http://wiki.kidsoncomputers.org/index.php?action=history&feed=atom&title=Training%3AWebCourseSpanish 2026-05-06T04:31:53Z Revision history for this page on the wiki MediaWiki 1.40.1 http://wiki.kidsoncomputers.org/index.php?title=Training:WebCourseSpanish&diff=19&oldid=prev 2012-01-06T22:41:17Z

<p>Created page with &quot;== Ejercicios de programación para el Web Huajapan == === Requisitos=== * Desempacar los directorios de las lecciones y tenerlas disponibles en el escritorio. * Instalar Firefo...&quot;</p> <p><b>New page</b></p><div>== Ejercicios de programación para el Web Huajapan ==<br /> <br /> === Requisitos===<br /> * Desempacar los directorios de las lecciones y tenerlas disponibles en el escritorio.<br /> * Instalar Firefox y Firebug en la computadora.<br /> * Abrir la página http://aumha.org/html/colorsb.htm en un navegador web.<br /> * Investigar que editor de texto funciona mejor en EduUbuntu - OpenOfficeWriter.<br /> <br /> ===Lección 0: Escoger y crear tu avatar ===<br /> * 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.<br /> * 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. <br /> <br /> ===Lección 1: Haciendo páginas web.===<br /> ====¿Qué es HTML?====<br /> * HTML significa HyperText Markup Language (Lenguaje de Etiquetado de Hiper-Texto, lenguaje para crear página web).<br /> * 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.<br /> * 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.<br /> * Por lo tanto, cuando tú visitas un sitio web con un navegador, tu estás viendo una página web.<br /> * Hoy aprenderemos como crear nuestras propias páginas web y también aprenderemos algunos trucos fáciles.<br /> * ¿Cuantos de ustedes han creado páginas web?<br /> * ¡Ahora crearemos nuestra primera página web!<br /> <br /> ====¡Hagamos nuestra primera página web!====<br /> * Abrir lesson1.html<br /> * DOCTYPE - Declaración del tipo de documento.<br /> * html<br /> * Un documento HTML tiene un encabezado (HEAD) y un cuerpo (BODY).<br /> ** head<br /> ** title<br /> ** body<br /> * Ver una página en un navegador (¿ver el código HTML?)<br /> * Ejemplo: Bold.<br /> * H1<br /> * Párrafo.<br /> * ¿Alguien puede identificar el patrón en la manera en que se hacen las anotaciones HTML?<br /> ** 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.<br /> ** Cada etiqueta empieza con el signo menor que (&lt;), el nombre de la etiqueta y un signo mayor que (&gt;).<br /> ** Después viene el contenido entre la etiqueta que abre y la etiqueta que cierra.<br /> ** Después viene la etiqueta que cierra, que está formada por un signo menor que (&lt;), una diagonal (/), el nombre de la etiqueta y por último un signo menor que (&gt;).<br /> *** Las etiquetas aplican al texto que está entre ellas, es decir, al contenido entre la etiqueta que abre y la etiqueta que cierra.<br /> *** 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.<br /> <br /> ** Agregar una imagen.<br /> ** Agregar una liga.<br /> ** ¿Quién puede adivinar como se puede create texto cursivo y enfatizado?<br /> <br /> ==== CSS ====<br /> * Existe una manera de agregar estilo a una página. Se le conoce como CSS.<br /> * 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á.<br /> * Copiar el archivo Script.<br /> * Cambiar colores.<br /> ** http://aumha.org/html/colorsb.htm<br /> <br /> * Algunos ejemplos:<br /> ** ¿Cuales son algunos de tus sitios web favoritos?<br /> ** http://kids.yahoo.com/<br /> ** http://www.girlstart.com/<br /> ** http://www.kids.gov/<br /> ** http://wikipedia.org/<br /> ** http://flickr.com<br /> ** http://mail.yahoo.com<br /> <br /> * Ahora que cada uno de ustedes han creado una página web, ya se pueden nombrar desarrolladores web. :-D<br /> <br /> === Lección 2:Una probadita de JavaScript y YUI. ===<br /> <br /> * Copiemos el archivo leccion1 al directorio leccion2. Tomaremos la leccion1 como base para iniciar la leccion2.<br /> * Una vez que ya se copio, abrir el directorio leccion2 y nombraremos el archivo leccion1 como leccion2.html<br /> * Aprenderemos algunos trucos nuevos.<br /> * Abrir leccion2.html<br /> * Cambio el título en un campo de entrada con un botón a su lado.<br /> * Ahora, cuando hacemos un clic con el botón, lo que queremos pasar es que el color cambia.<br /> <br /> * 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.<br /> * 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. <br /> <br /> * Copia el archivo de Javascript<br /> <br /> * Mira su sitio en un navegador <br /> * Agrega nombres de Identificación con el atributo id en el HTML<br /> * Mira su sitio en un navegador <br /> * Introduzca colores diferentes en el navegador; haga clic en el botón<br /> <br /> * Cambiar el fondo<br /> <br /> &lt;!-- ===Lesson 3: Drag the avatar===<br /> * Now let&#039;s play around with some more complicated features<br /> * Open up lesson3.html<br /> <br /> * Change avatar image to be your avatar<br /> * Look at page in web browser<br /> <br /> * Avatar does move - no box around it. <br /> <br /> * Copy styles<br /> * Copy from script file <br /> <br /> * YUI es un código abierto de JavaScript que Yahoo ha construido. YUI se utiliza para crear aplicaciones ricas y interactivas.<br /> * YUI facilita la vida de los desarrolladores web. Con YUI, las cosas como la animación y arrastrar y soltar son posible con sólo unas pocas líneas de código.<br /> <br /> * Vamos a examinar un sitio que utiliza YUI: http://my.yahoo.com<br /> <br /> * Cambiar la altura y anchura de la caja del avatar<br /> * cambiar la lugar de la imagen en la casilla<br /> * Cambiar el color --&gt;<br /> <br /> ===Lección 3: Arrastrar el avatar===<br /> * Ahora vamos a jugar con características más complicadas<br /> * Abre lesson3.html<br /> <br /> * Cambia la imágen del avatar a tu avatar<br /> * Mirala página en el navegador<br /> <br /> * El avatar se mueve - No hay reciadros a su alrededor. <br /> <br /> * Copiar estilos<br /> * Copiar desde el script<br /> <br /> * YUI es una librería JavaScript open-source de Yahoo! Se construyó y se utiliza para crear web ricas en interación.<br /> * 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.<br /> <br /> * Demos un vistazo a un sitio que usa YUI: http://my.yahoo.com<br /> <br /> * Cambiar la altura / ancho del cuadro del avatar<br /> * Mover la imágen dentro del cuadro<br /> * Cambiar el color<br /> <br /> &lt;!--<br /> === Lesson 4: Fading the avatar ===<br /> * Open up lesson4.html<br /> * Copy script file<br /> <br /> * How would I change it so that the image is not fully transparent<br /> * Extra credit - change link to a button<br /> --&gt;<br /> <br /> === Lección 4: Desvanecimiento del avatar ===<br /> * Abre lesson4.html<br /> * Copia el script<br /> <br /> * Cómo podría modificarlo para que la imágen no este completamente transparente<br /> * Puntos extra - cambiar el enlace a un botón<br /> <br /> &lt;!--<br /> === Lesson 5: What&#039;s Possible? ===<br /> * YUI example<br /> <br /> * View Source<br /> * Inspect Element<br /> <br /> * Ways to learn:<br /> ** W3C<br /> ** Look at other sites using Firebug.<br /> --&gt;<br /> === Lección 5: ¿Qué más es posible? ===<br /> * Ejemplo YUI <br /> <br /> * Ver el código fuente<br /> * Inspeccionar un elemento<br /> <br /> * Formas de aprender:<br /> ** W3C<br /> ** Ver otros sitios usando Firebug.</div>

Kocadmin