Training:WebCourseSpanish
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.
- 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.