Saltar al contenido

Pequeños Emprendedores 2009-2010

Proyecto de programación alumnos de 3er grado de secundaria

Descarga en PDF proyecto_pequeños_emprendedores.pdf

Este sábado 13 de febrero de 2010 si hay clase de Pequeños emprendedores, a las 10:00 hrs., lugar habitual

(para entregar vía correo electrónico (pe@axayacatl.edu.mx) antes del lunes 1 de febrero de 2010)

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

Tarea 02

ene 19

(para entregar vía correo electrónico (pe@axayacatl.edu.mx) antes del viernes 22 de enero de 2010)

  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

Operadores de aritmética

Operadores de Aritmética
Ejemplo Nombre Resultado
-$a Negación El opuesto de $a.
$a + $b Adición Suma de $a y $b.
$a – $b Substracción Diferencia entre $a y $b.
$a * $b Multiplicación Producto de $a y $b.
$a / $b División Cociente de $a y $b.
$a % $b Módulo Resto de $a dividido por $b.

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:

<?php

$a = ($b = 4) + 5; // $a es igual a 9 ahora, y $b ha sido definido a 4.

?>

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.

Operador Descripción Ejemplo
= Asigna un valor a una variable $variable = 5;
+= Incrementa el valor de la variable en el valor dado. Equivale a $a = $a + 7 $a += 7;
-= Decrementa el valor de la variable en el valor dado. Equivale a $a = $a – 3 $a -= 3;
*= Multiplica el valor de la variable. Equivale a $a = $a * 4 $a *= 4;
/= Divide el valor de la variable. Equivale a $a = $a / 2 $a /= 2;

Operadores de cadenas de caracteres

Operador Descripción Ejemplo
. Concatena dos cademas $texto."Hola";
.= Concatena a la variable una cadena. Equivale a $a = $a.$b $a .= $b;

Operadores de comparación

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

Ejemplo Nombre Resultado
$a == $b Igual TRUE si $a es igual a $b.
$a === $b Idéntico TRUE si $a es exactamente igual a $b, y son del mismo tipo.
$a != $b Diferente TRUE si $a no es igual a $b.
$a <> $b Diferente TRUE si $a no es igual a $b.
$a !== $b No idénticos TRUE si $a no es igual a $b, o si no son del mismo tipo.
$a < $b Menor que TRUE si $a es escrictamente menor que $b.
$a > $b Mayor que TRUE si $a es estrictamente mayor que $b.
$a <= $b Menor o igual que TRUE si $a es menor o igual que $b.
$a >= $b Mayor o igual que TRUE si $a es mayor o igual que $b.

Operadores lógicos

Ejemplo Nombre Resultado
$a and $b Y TRUE si tanto $a como $b son TRUE.
$a or $b O TRUE si cualquiera de $a o $b es TRUE.
$a xor $b O exclusivo (Xor) TRUE si $a o $b es TRUE, pero no ambos.
! $a No TRUE si $a no es TRUE.
$a && $b Y TRUE si tanto $a como $b son TRUE.
$a || $b O TRUE si cualquiera de $a o $b es TRUE.

Debido a los preparativos y al festival de Navidad, se pospone la clase programada para este sábado 12 de diciembre de 2009, así mismo el periodo para la entrega de los códigos de la tarea podrán ser entregados como máximo el día 13 de diciembre de 2009.

Tarea 01

dic 6

(para entregar vía correo electrónico (pe@axayacatl.edu.mx) antes del viernes 11 de diciembre de 2009)

  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

PHP (acrónimo de “PHP: Hypertext Preprocessor”) es un lenguaje de “código abierto” interpretado, de alto nivel, embebido en páginas HTML y ejecutado en el servidor.

¿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:

  • border: Donde se establece el valor en pixels del borde de la tabla. Si le asignamos el valor cero no habrá borde.
  • colspan: expande una celda horizontalmente(con la celda de la derecha).
  • rowspan: expande una celda verticalmente(con la celda inferior).
  • width: anchura de la tabla en pixels o en porcentaje (el 100% es el máximo del que dispone el navegador).
  • height: altura de la tabla en pixels o en porcentaje.
  • <!-- 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)

    El presente curso tiene como objetivo preparar a los alumnos de 3er grado de secundaria, que fueron seleccionados para llevar a cabo el proyecto “Pequeños Emprendedores” correspondiente al ciclo escolar 2009-2010.

    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):

    Etiqueta Utilidad Resultado
    <p> ... </p>
    Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto. Soy un párrafo
    <center> ... </center> Permite centrar todo el texto del párrafo. Yo estoy centrado
    <pre> ... </pre> Representa con un tipo de letra de ancho fijo y respetando espacios y retornos de línea.
    Muy útil a la hora de representar código fuente.
    Este es un texto con
    letra de ancho fijo
    <address> ... </address> Para escribir direcciones (de esas donde vive la gente, no electrónicas).
    Juana Petunia Pérez López
    Calle Amargura N° 9, 1ºB
    Cd. Casitas
    <blockquote> ... </blockquote> Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a
    izquierda como a derecha, razón por la que se usa habitualmente.

    Si es bueno vivir, todavía es mejor soñar, y lo mejor de todo, despertar.
    Antonio Machado (1875-1939) Poeta y prosista español.

    <b> … </b> Pone un texto en negritas, se recomienda utilizar en su lugar la etiqueta <strong> Soy un texto en negritas
    <i> … </i> Pone un texto en cursivas, se recomienda utilizar la etiqueta em Soy un texto en cursivas
    <s> … </s> Tacha un texto Soy un texto tachado
    <u> … </u> Subraya un texto, no se recomienda su utilización Soy un texto subrayado
    <tt> ... </tt> Permite representar el texto en un tipo de letra de ancho fijo. Texto en letra de ancho fijo
    <sup> ... </sup> Letra superíndice. E=mc2
    <sub> ... </sub> Letra subíndice. H2O
    <big> ... </big> Incrementa el tamaño del tipo de letra. Soy GRANDE
    <small> ... </small> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito