Training:WebCourseSpanish

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.

¿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.
 * http://aumha.org/html/colorsb.htm


 * Algunos ejemplos:
 * ¿Cuales son algunos de tus sitios web favoritos?
 * http://kids.yahoo.com/
 * http://www.girlstart.com/
 * http://www.kids.gov/
 * http://wikipedia.org/
 * http://flickr.com
 * http://mail.yahoo.com


 * 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.


 * Demos un vistazo a un sitio que usa YUI: http://my.yahoo.com
 * 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.