Jump to: navigation, search

Training:WebCourseSpanish

Revision as of 15:41, 6 January 2012 by Kocadmin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Ejercicios de programación para el Web Huajapan

Requisitos

  • Desempacar los directorios de las lecciones y tenerlas disponibles en el escritorio.
  • Instalar Firefox y Firebug en la computadora.
  • Abrir la página http://aumha.org/html/colorsb.htm en un navegador web.
  • Investigar que editor de texto funciona mejor en EduUbuntu - OpenOfficeWriter.

Lección 0: Escoger y crear tu avatar

  • Si hay acceso a internet, los estudiantes deben construir un avatar, deben nombrar el archivo como avatar.png y copiarlo al directorio de la lección Group0.
  • Si no hay acceso a internet, los estudiantes deben escoger un avatar en el directorio Avatars. El número del avatar que ellos escojan corresponde al nombre del directorio del group en el que trabajarán.

Lección 1: Haciendo páginas web.

¿Qué es HTML?

  • HTML significa HyperText Markup Language (Lenguaje de Etiquetado de Hiper-Texto, lenguaje para crear página web).
  • HTML es el lenguaje que los navegadores web entienden. Así como nosotros hablamos el lenguaje Español o Inglés, los navegadores web hablan HTML.
  • A los documentos HTML generalmente se les llama páginas web. El navegador web obtiene las páginas web de los servidores de páginas web gracias a la internet pueden estar ubicados en cualquier parte del mundo.
  • Por lo tanto, cuando tú visitas un sitio web con un navegador, tu estás viendo una página web.
  • Hoy aprenderemos como crear nuestras propias páginas web y también aprenderemos algunos trucos fáciles.
  • ¿Cuantos de ustedes han creado páginas web?
  • ¡Ahora crearemos nuestra primera página web!

¡Hagamos nuestra primera página web!

  • Abrir lesson1.html
  • DOCTYPE - Declaración del tipo de documento.
  • html
  • Un documento HTML tiene un encabezado (HEAD) y un cuerpo (BODY).
    • head
    • title
    • body
  • Ver una página en un navegador (¿ver el código HTML?)
  • Ejemplo: Bold.
  • H1
  • Párrafo.
  • ¿Alguien puede identificar el patrón en la manera en que se hacen las anotaciones HTML?
    • Así como en español las frases se inician con una letra mayúscula y se terminan con un punto final, también hay un patrón que se usa para escribir etiquetas HTML.
    • Cada etiqueta empieza con el signo menor que (<), el nombre de la etiqueta y un signo mayor que (>).
    • Después viene el contenido entre la etiqueta que abre y la etiqueta que cierra.
    • Después viene la etiqueta que cierra, que está formada por un signo menor que (<), una diagonal (/), el nombre de la etiqueta y por último un signo menor que (>).
      • Las etiquetas aplican al texto que está entre ellas, es decir, al contenido entre la etiqueta que abre y la etiqueta que cierra.
      • Si recuerdan, HTML significa lenguaje de anotación de hiper-texto. Las etiquetas son la razón por la cual se le conoce de esa manera. Las etiquetas delimitan cierto contenido de tal manera que le asigna significado y representación al contenido de nuestras páginas web.
    • Agregar una imagen.
    • Agregar una liga.
    • ¿Quién puede adivinar como se puede create texto cursivo y enfatizado?

CSS

  • Existe una manera de agregar estilo a una página. Se le conoce como CSS.
  • Cascading Style Sheets (CSS) o Hojas de Estilo en Cascada, es un lenguaje de hojas de estilo que se usa para describir la manera que un documento HTML se verá y el formato que tendrá.
  • Copiar el archivo Script.
  • Cambiar colores.
  • Ahora que cada uno de ustedes han creado una página web, ya se pueden nombrar desarrolladores web. :-D

Lección 2:Una probadita de JavaScript y YUI.

  • Copiemos el archivo leccion1 al directorio leccion2. Tomaremos la leccion1 como base para iniciar la leccion2.
  • Una vez que ya se copio, abrir el directorio leccion2 y nombraremos el archivo leccion1 como leccion2.html
  • Aprenderemos algunos trucos nuevos.
  • Abrir leccion2.html
  • Cambio el título en un campo de entrada con un botón a su lado.
  • Ahora, cuando hacemos un clic con el botón, lo que queremos pasar es que el color cambia.
  • Aquí es donde se requieren JavaScript. Con JavaScript, podemos hacer cosas como la animación, moviendo cosas de sitio, y podemos escribir código que cambia la página cuando el usuario hace clic en alguna parte.
  • Ahora cuando vaya a la página web que hemos construido, es siempre la misma. No cambia por sí mismo y no hace nada cuando hacemos clic en cualquier lugar. Por ejemplo, no hace nada cuando se haga clic en el avatar.
  • Copia el archivo de Javascript
  • Mira su sitio en un navegador
  • Agrega nombres de Identificación con el atributo id en el HTML
  • Mira su sitio en un navegador
  • Introduzca colores diferentes en el navegador; haga clic en el botón
  • Cambiar el fondo


Lección 3: Arrastrar el avatar

  • Ahora vamos a jugar con características más complicadas
  • Abre lesson3.html
  • Cambia la imágen del avatar a tu avatar
  • Mirala página en el navegador
  • El avatar se mueve - No hay reciadros a su alrededor.
  • Copiar estilos
  • Copiar desde el script
  • YUI es una librería JavaScript open-source de Yahoo! Se construyó y se utiliza para crear web ricas en interación.
  • YUI hace la vida más fácil para los desarrolladores web. Eso hace que cosas como las animaciones, arrastrar y soltar sean posibles solo con unas cuantas líneas de código.
  • Cambiar la altura / ancho del cuadro del avatar
  • Mover la imágen dentro del cuadro
  • Cambiar el color


Lección 4: Desvanecimiento del avatar

  • Abre lesson4.html
  • Copia el script
  • Cómo podría modificarlo para que la imágen no este completamente transparente
  • Puntos extra - cambiar el enlace a un botón

Lección 5: ¿Qué más es posible?

  • Ejemplo YUI
  • Ver el código fuente
  • Inspeccionar un elemento
  • Formas de aprender:
    • W3C
    • Ver otros sitios usando Firebug.