Nota: No habrá clases este sábado 30

1. Crear un proyecto de un restaurante con la siguiente estructura:
   • Pagina de inicio que solicite el “Nombre” (este se mostrara a lo largo de todas las páginas del proyecto)
   • Presentar un “Menú” con las siguientes secciones: Sopas-entradas, Platos fuertes, Ensaladas, Postres, Bebidas y Botanas.
   • Cada una de las secciones deberá mostrar un mínimo de 10 elementos a escoger.
   • Cada platillo o elemento a escoger tendrá una imagen correspondiente.
   • Todas las páginas del proyecto deberán tener la misma estructura visual (imagen de fondo, tipo y tamaño de fuente, colores, etc.)
   • Al finalizar, se mostrara un resumen con lo que el “cliente” selecciono.

Nota: Todos los scripts deberán tener las siguientes características:

• Documentados completamente con comentarios.
• Indentados de forma correcta.
• Sin errores de ejecución.
• Empaquetados en un solo archivo RAR.

Cualquier duda, consulta o comentario, hacerlo por medio de los comentarios de este Post

1. Enviar todos los programas realizados en la clase del 16 de enero, debidamente comentados y en excelente presentación.
2. Crear un programa que muestre el resultado y residuo de una división, por ejemplo:
   

     	El resultado de la división de 200 / 39 es: 5.12 y el residuo es: 5

3. Crear un programa que muestre los cuadrados de los primeros 20 números primos.
4. Crear un programa que divida los números del 1 al 100 entre 3 y muestre el residuo de cada operación.
5. Crear un programa con las 5 funciónes siguientes:
   • Cálculo del área de un círculo.
   • Cálculo del área de un triángulo.
   • Cálculo del área de un cuadrado.
   • Cálculo del área de un rectángulo.
   • Calculo del área de un pentágono.
6. Crear un programa que muestre la tabla de Pitágoras .
7. Crear un formulario que solicite los siguientes datos:
   • Apellido paterno.
   • Apellido materno.
   • Nombre(s).
   • Teléfono de casa.
   • Teléfono celular.
   • Correo electrónico.
   • Dirección.
8. Escribir un programa que solicite un número y muestre la tabla de multiplicar correspondiente.
9. Escribir un programa que solicite 10 valores y calcule el promedio y la suma correspondiente.
10. Escribir un programa que solicite 5 valores y ordene los resultados de mayor a menor o de menor a mayor segun se seleccione.

Nota: Todos los scripts deberán tener las siguientes caracteristicas:

• Documentados completamente con comentarios.
• Indentados de forma correcta.
• Sin errores de ejecución.
• Empaquetados en un solo archivo RAR.

Cualquier duda, consulta o comentario, hacerlo por medio de los comentarios de este Post

El operador de división ("/") devuelve un valor flotante a menos que los dos operandos sean enteros (o cadenas que son convertidas a enteros) y los números sean divisibles sin residuos, en cuyo caso se devuelve un valor entero.

Los operandos del módulo son convertidos a enteros (removiendo la parte decimal) antes de ser procesados.

Nota: El resto de $a % $b es negativo para valores negativos de $a.

Operadores de asignación

El operador básico de asignación es "=". A primera vista, podríamos pensar en él como "es igual a". No lo hagamos. Lo que quiere decir en realidad es que el operando de la izquierda recibe el valor de la expresión a la derecha (es decir, "se define a").

El valor de una expresión de asignación es el valor que se asigna. Es decir, el valor de "$a = 3" es 3. Esto le permite hacer una que otra cosa curiosa:

Nota: El operador de asignación "=" no debe confundirse con la comparación logica "==".

En conjunto con el operador básico de asignación, existen "operadores combinados" para todos los operadores de aritmética binaria, unión de matrices y de cadenas, que le permiten usar un valor en una expresión y luego definir su valor como el resultado de esa expresión.

Operadores de cadenas de caracteres

Operadores de comparación

Los operadores de comparación, como su nombre indica, le permiten comparar dos valores en evaluaciones logicas.

Operadores lógicos

1. Crear un script (programa) que sume el valor de 10 variables y muestre el valor de cada variable y el resultado.
2. Crear un script que defina como constante el valor de pi (π) y calcule el área de 5 círculos con las siguientes medidas:
   • Primer circulo 35 cm de diámetro
   • Segundo circulo 42.5 cm de diámetro
   • Tercer circulo 200 cm de diámetro
   • Cuarto circulo 12.3 cm de diámetro
   • Quinto circulo 35 cm de radio
3. Hacer un script muestre el área de un triángulo o un rectángulo de acuerdo al valor de las siguientes variables:

   /*Calcula el área de un rectángulo*/
   $figura = "rectangulo";
   $base = 50;
   $altura = 30;

   Al cambiar el valor de la variable $figura por “triangulo” deberá calcularse el área correcta para esta figura, por ejemplo:

   $figura = "rectangulo";
   $base = 50;
   $altura = 30;
   área de la figura rectángulo es 150
   
   $figura = "triangulo";
   $base = 50;
   $altura = 30;
   área de la figura triángulo es 75

4. Hacer un scrip que muestre los números primos menores a 1000.
5. Hacer un script que muestre los primeros 200 números de la serie de Fibonacci.
6. Hacer un script que muestre las tablas de multiplicar del 0 al 20.
7. Hacer un script que cree una tabla con x columnas, determinadas por el valor de una variable, por ejemplo:

   //si la variable tiene el valor de 5
   $cols = 5;
   //se creara una tabla con 5 columnas

8. Crear un script que cree una tabla con un numero de columnas y filas determinados por dos variables.
9. Crear un escript que determine de tres variables:
   • Cual es la mayor.
   • Cual la menor.
   • Si las tres son del mismo valor.
10. Crear un script que muestre si el valor de una variable es:
    • Un número negativo.
    • Es igual a 0 (cero).
    • Es mayor a 0(cero) pero inferior a 100.
    • Es mayor o igual a 100 pero inferior a 1,000,000.
    • Es un número mayor o igual a 1,000,000.

Nota: Todos los scripts deberán tener las siguientes caracteristicas:

• Documentados completamente con comentarios.
• Indentados de forma correcta.
• Sin errores de ejecución.
• Empaquetados en un solo archivo RAR.

Cualquier duda, consulta o comentario, hacerlo por medio de los comentarios de este Post

¿Qué significa esto? veamos un ejemplo:

<html>
  <head>
    <title>Hola Mundo!</title>
  </head>
  <body>
    <p>
    <?php
      echo "Hola Mundo!";
    ?>
    </p>
  </body>
</html>

Lo primero que observamos en este ejemplo y que hace de PHP un lenguaje diferente a otros lenguajes de programación (como VBasic, C++, etc.) es que aquí se trata de un documento HTML donde hemos insertado el código PHP (código embebido) dentro de las etiquetas especiales “<?php“ para iniciar el codigo PHP y “ ?>” para indicar el final del código PHP, en nuestro ejemplo se producirá una salida de texto. Todo este proceso se realiza en el servidor web, el “cliente” (navegador) no podra “ver” el codigo PHP, solo lo que este ha generado, si miramos el documento HTML que genero nuestro ejemplo veremos algo como:

<html>
  <head>
    <title>Hola Mundo!</title>
  </head>
  <body>
    <p>
    Hola Mundo!
    </p>
  </body>
</html>

Podemos notar que todo lo referente a código PHP ha “desaparecido” ya que es el servidor quien procesa y traduce las ordenes PHP y solo retorna al cliente el resultado en forma de documento HTML

TABLAS

Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos tipos de contenidos.

Para crearlas utilizamos la etiqueta principal <table> junto con su cierre correspondediente </table>. Dentro de esta etiqueta vamos creando las distintas filas por medio de la etiqueta <tr> y </tr>, y en cada fila las celdas a través de la etiqueta <td> y </td>. Las celdas de cada fila se ordenan automáticamente de izquierda a derecha. Dentro de estas etiquetas de celda es donde colocaremos nuestro contenido.

Se usaron los siguientes atributos:

<!-- table.html
      itaka666
      21-noviembre-2009
      Tabla. Uso de los atributos: border, colspan, rowspan, width, heigth-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body>
    <table border="1">
    <caption>tabla de ejemplo</caption>
      <tr>
        <th>encabezado 1</th>
        <th>encabezado 2</th>
        <th>encabezado 3</th>
      <tr>
        <td colspan="2">celda 1</td>
        <td>celda 2</td>
      </tr>
      <tr>
        <td>celda 4</td>
        <td>celda 5</td>
        <td>celda 6</td>
      <tr>
        <td>celda 7</td>
        <td rowspan="2">celda 8</td>
        <td>celda 9</td>
      <tr>
        <td>celda 10</td>
        <td>celda 12</td>
      </tr>
      <tr>
        <td width="300" height="150">&nbsp;</td>
        <td width="150">&nbsp;</td>
        <td width="500">&nbsp;</td>
     </table>
  </body>
</html>

INSERTAR (Imágenes)

Para este ciclo escolar se ha hecho un giro radical en el modo de creación. Se eligió la programación Web como base para su creación, mismo que permite mantener  el proyecto al día gracias a las técnicas modernas de programación, desarrollo y lenguaje más utilizados en la Internet a nivel profesional: PHP

Este lenguaje permite crear “páginas web dinámicas” que se “insertan” en el código HTML

Introducción a HTML

HTML (desde wikipedia), siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de “etiquetas”, rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

Requisitos

Si estas leyendo esto ya tienes el principal requisito: un navegador web. Actualmente todas las computadoras incluyen un navegador que permite “ver” páginas web (cualquiera que utilices esta bien). En la sección de software puedes encontrar enlaces para descargar algún otro si lo prefieres.

El segundo requisito es: un editor de texto. También puedes utilizar el que más te plazca, con la única condición que guarde los archivos en “texto plano”, es decir, sin ningún tipo de formato En las computadoras Windows podemos utilizar el “Bloc de Notas”, de igual forma, en la sección de sofware puedes encontrar una lista de otros editores que puedes descargar.

Para el presente curso se ha recomendado el editor PSPad, que entre otras ventajas tiene numeración de líneas, coloreado de sintaxis, auto-cierre de etiquetas, indentación  automática, etc. Todas estas propiedades son muy útiles para escribir codigo HTML y PHP.

La primer página web

La codificación HTML esta formada a partir de “etiquetas” encerradas entre los símbolos de “menor que” y “mayor que” (<, >).

Existen algunas reglas para formar un correcto código HTML:

• Los nombres de elementos y atributos deben escribirse en minúsculas.

  Ejemplos:
  Incorrecto: <BODY BgColor="#000000">
  Correcto: <body bgcolor="#000000">

• Todos los valores de los atributos deben ir entrecomillados.

  Ejemplos:
  Incorrecto: <a href=index.php>
  Correcto: <a href="index.php">

• Todos los elementos “no vacíos” deben ir entre la etiqueta de principio y la etiqueta de final.

  Ejemplos:
  Incorrecto:
  <ul>
    <li>Uno
    <li>Dos
    <li>Tres
  </ul>
  Correcto:
  <ul>
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
  </ul>

• Todos los elementos deben estar anidados ordenadamente.

  Ejemplos:
  Incorrecto: <b>El respeto <i>al derecho ajeno es la paz.</b></i>
  Correcto: <b>El respeto <i>al derecho ajeno es la paz.</i></b>

• Los elementos “vacíos” deben llevar terminación.

  Ejemplos:
  Incorrecto: <br> <hr>
  Correcto: <br/> <hr/>

Ahora veamos el código completo de una página web para analizarla a detalle más adelante


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<p>Hola Mundo!</p>
</body>
</html>


Explicación

La primer línea (<!DOCTYPE …>) se analizara a detalle en clases posteriores, asi que por el momento dejaremos pendiente su explicación.

Un archivo HTML solo puede contener una etiqueta <html> esta a su vez puede contener solo dos tipos de etiquetas <head> y <body> (también es posible usar las etiquetas de marcos <frame> sin embargo estas son poco recomendables pues van en contra de la filosofía de internet de no mezclar contenido con presentación y son problemáticas en su manejo)

Lo anterior nos hace notar que un documento HTML esta dividido en dos secciones, una “cabecera” (<head>) y un “cuerpo” (<body>)

<head>

Dentro de la etiqueta <head> encontraremos información referente al documento actual, por ejemplo el titulo de la página, palabras clave útiles a los buscadores, codificación utilizada, enlaces a archivos de apoyo (hojas de estilo, scripts, iconos, etc.).

<title>

En el ejemplo podemos observar solo una etiqueta dentro de la cabecera: la etiqueta <title> esta se utiliza para Definir el “titulo” del documento actual (visible en la barra de titulo del navegador) se recomienda usar descripciones cortas y concisas sobre el contenido de la página.

<body>

El segundo componente de un archivo HTML es el “cuerpo” definido por la etiqueta <body>, en esta sección es donde encontraremos el contenido en si de nuestra página, es esto lo que nos mostraran los navegadores.

<p>

La etiqueta <p> define un párrafo de texto, en nuestro ejemplo con la frase: Hola Mundo!

Nombres de archivo para documentos HTML

Es recomndable que los archivos de HTML utilicen unicamente minusculas evitando el uso de espacios, acentos, eñes y caracteres especiales o fuera del alfabeto inglés, como extensión utilizaremos .htm o .html, si estamos utilizando PSPad como editor se asignara automáticamente la extensión, si usamos otro tipo de editores (como el Bloc de Notas de Windows) debemos asegurarnos que no se añade la extensión .txt a nuestros archivos:

Incorrecto:
Hola Mundo.html
hola_mundo.html.txt

Correcto:
hola_mundo.html

Comentarios

En HTML es posible utilizar comentarios, estos serán ignorados por el navegador, pudiendo incluir tantos como consideremos necesarios, incluso pueden ir fuera de las etiquetas <html> siendo de gran utilidad para quien escribe el documento HTML

Durante el proyecto utilizaremos a inicio de cada archivo  una serie de comentarios utiles para el correcto desarrollo del mismo, facilitando la edición y corrección de los archivos, a continuación un ejemplo de esta convención:

<!--
nombre_del_archivo.html
nombre del programador
fecha de creación
Objetivo del documento
Comentarios sobre el mismo
-->

<!--
hola_mundo.html
alonso6665
7-11-2009
Ejemplo de un documento típico en HTML
-->

Encabezados

HTML cuenta con 6 niveles de encabezados, siendo la etiqueta <h1> la de mayor relevancia hasta <h6> que sería la de menor relevancia. Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia he preferido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal. Es decir para determinar la importancia no la apariencia.

Codigo:

<h1>Encabezado de nivel uno</h1>
<h2>Encabezado de nivel dos</h2>
<h3>Encabezado de nivel tres</h3>
<h4>Encabezado de nivel cuatro</h4>
<h5>Encabezado de nivel cinco</h5>
<h6>Encabezado de nivel seis</h6>

Ejemplo:

Encabezado de nivel uno

Encabezado de nivel dos

Encabezado de nivel tres

Encabezado de nivel cuatro

Encabezado de nivel cinco

Encabezado de nivel seis

Etiquetas de uso común

Estas son las etiquetas más importantes (excluyendo algunas que
veremos más adelante):

Este es un texto con
letra de ancho fijo