curso de diseÑo web · 2017-06-29 · curso de diseño web – manual del profesor 7 •...

CURSO DE

DISEÑO WEB MANUAL DEL PROFESOR

Profesora: Sabrina Castagno

v.1.0: Junio 2017

Autores: Sabrina Castagno, ITMaster Academy

Edición Revisada: Maximiliano Firtman, ITMaster Academy

Este contenido se distribuye bajo licencia Creative Commons 3.0 con atribución

(https://creativecommons.org/licenses/by/3.0/)

Se acepta su copia y redistribución en cualquier medio y formato y adaptarlo en cualquier forma

(remixado, transformado y construir sobre él) para cualquier propósito, incluso comercial bajo una

única condición: la atribución y crédito a sus autores y a la aclaración de cambios realizados en

caso de haberse realizado

INDICE

INDICE .............................................................................................................................................................3

ORGANIZACIÓN DEL CURSO...................................................................................................................5

MÓDULO I: EMPEZANDO CON HTML Y CSS.......................................................................................6

CLASE 1 .........................................................................................................................................................6

Comenzando..............................................................................................................................................6

Editor ........................................................................................................................................................8

Bases de HTML .........................................................................................................................................9

Listas .......................................................................................................................................................10

Imágenes .................................................................................................................................................11

Ejercicio Integrador ...............................................................................................................................13

CLASE 2 .......................................................................................................................................................14

Vínculos ..................................................................................................................................................14

Empezando con CSS ...............................................................................................................................16

Tipografías y Colores .............................................................................................................................19

CLASE 3 .......................................................................................................................................................20

Contenedores ..........................................................................................................................................20

Agregando CSS .......................................................................................................................................21

Agregando bordes redondeados .............................................................................................................22


CLASE 4 .......................................................................................................................................................24

Propiedades avanzadas ..........................................................................................................................24

Flexbox....................................................................................................................................................24


MÓDULO II: FORMULARIOS ..................................................................................................................28

CLASE 1 .......................................................................................................................................................28

Aprendiendo lo básico ............................................................................................................................28


CLASE 2 .......................................................................................................................................................31

Selectores Nativos ...................................................................................................................................31


CLASE 3 .......................................................................................................................................................33

Elementos de Selección de Lista .............................................................................................................33

Validación ...............................................................................................................................................33

Otros elementos semánticos....................................................................................................................34

Curso de Diseño Web – Manual del Profesor 4


MÓDULO III: IMÁGENES Y VIDEO .......................................................................................................37

CLASE 1 .......................................................................................................................................................37

Trabajando con imágenes .......................................................................................................................37

Mostrando la imagen ..............................................................................................................................38

SVG .........................................................................................................................................................39


CLASE 2 .......................................................................................................................................................41

Embebiendo contenido ............................................................................................................................41

Figuras ....................................................................................................................................................43


CLASE 3 .......................................................................................................................................................48

Reproduciendo audio y video .................................................................................................................48

Canvas ....................................................................................................................................................50



ORGANIZACIÓN DEL CURSO

¡Hola! Bienvenido o bienvenida al Manual del Profesor del curso de Diseño Web. En estas

páginas te ayudaré a organizar el dictado de este curso a alumnos del mismo. Este Manual

se acompaña con los videos del curso y el ZIP con los materiales que podés utilizar en la

clase.

También te recomiendo repasar y revisar el Manual del Alumno que le será entregado a

cada alumno y podés usar como base y como pedido de lectura a los alumnos de una clase

a otra.

Este manual es una sugerencia, te recomiendo adaptarlo a tu forma de dictar y al grupo

que te toque para hacerlo más ameno y cumplir los objetivos del curso.

Este manual está organizado por clase, pero dependiendo del grupo que se te asigne, el

nivel del mismo y la duración del mismo podrías necesitar algunos ajustes en la duración

de los temas y en qué dictar clase por clase. Tomalo como una guía de ayuda no como

algo que debas cumplir 100%.

Cada vez que comiences una clase, preguntá si quedó alguna duda o consulta de la clase

anterior y al terminar tratá de hacerlo 5 ó 10 minutos antes del horario oficial de cierre y

hacé un repaso o punteo de los temas que se trataron en el día y es una buena oportunidad

para terminar de ver si queda alguna pregunta.

Hay un examen por cada módulo, úsalo para ver en qué temas quedaron dudas y repasar

los temas.

Junto con este manual tenés a disposición unas carpetas con archivos por clase que te

ayuden como guía para usar con los alumnos. Revisá qué archivos querés compartir con

los alumnos para usarlos de base y qué preferís que hagan ellos sobre la marcha del curso.

¡Mucha suerte con el dictado!


MÓDULO I: EMPEZANDO CON HTML Y CSS

Clase 1

Comenzando

El primer paso por supuesto es presentarte, hacelo corto y efectivo. Contales qué hacés y

por qué te interesa enseñarles este tema. Luego contales cómo va a ser la organización del

curso, cuántos días, cómo se le entrega el material, qué tipo de curso será, qué prácticas

haremos y repasá el temario de cosas que van a ver y qué van a saber hacer. Siempre es

bueno contar si harás un recreo y a qué hora, dónde están los baños y la salida de

emergencia ante cualquier problema.

Luego para romper el hielo si son menos de 20 alumnos podés hacer que cada uno se

presente rápido (no más de 20 segundos por alumno) diciendo a qué se dedican y qué

esperan del curso. Si son más de 20 alumnos es mejor hacer preguntas y que levanten la

mano.

Luego de esto preguntales si alguno tiene alguna duda sobre lo que se verá en el curso

antes de arrancar.

Algunos consejos sobre la actitud como profesor(a):

• No tenerle miedo a la clase, son sólo otras personas que quieren aprender un tema.

Vos no tenés que ser el más experto para dar el curso, sos alguien que sabe un poco

más que ellos y que ya practicó y estás para ayudarlos. No lo consideres como que

el evaluado sos vos y que estás dando un examen oral.

• Hay que esperar todo tipo de preguntas y responder desde tu experiencia. Nunca

inventes una respuesta; si no la sabés, respondé que no sabés la respuesta y deciles

que después fuera de clase o para la siguiente clase le buscás la respuesta.

• Planteá ejercicios prácticos que tengan relación con la vida diaria de los alumnos,

algo que vean concreto. Evitá ejemplos académicos o que no tienen relación con la

vida diaria del lugar donde se dicte el curso. Cuanto más cercano a los alumnos esté

el ejercicio mejor comprenderán los conceptos.

• No pasa nada si te equivocás en clase, no te pongas nervioso/a, simplemente actúa

como si estuvieras trabajando (todos nos equivocamos) y mostrales cómo se detecta

y arregla el problema

• Nunca suponer que los alumnos saben algo. Preguntá primero, incluso si te parece

algo básico como crear una carpeta o saber que "save" significa grabar en inglés.


• Incentivá las preguntas, cada tanto si están muy tímidos preguntá si hay alguna duda

o si alguien tiene una pregunta. Cuando alguien pregunta, aún si te parece super

básica, agradécele y decile que es buena pregunta porque seguro alguien más está

pensando lo mismo.

• Cuando puedas incentivá a los alumnos a hacer ejercicios entre clase y que puedan

investigar algún tema en Google.

• No te quedes a la defensiva detrás de un escritorio. Es mejor caminar por la clase

mientras vas mirando a todos los alumnos. Que todos se sientan que hablás con

ellos, en lugar de mirar al piso, al techo o sólo a los de adelante.

Al inicio hacé una introducción de qué es el Diseño Web y que HTML es el primer lenguaje

que vamos a usar. Contales qué es una página web y qué tipo de cosas van a aprender en

el curso. No te pongas muy teórico en esta parte, sólo con palabras simples y sencillas qué

van a ser capaces de hacer. Es mejor ir a la práctica en cursos tan cortos e intensivos.


Editor

En esta primer clase te recomiendo llevar al alumno a crear desde cero un documento de

HTML. Directamente enseñale a descargar un editor como el sublime o Visual Studio Code

(si te gusta otro editor bienvenido sea) desde sus páginas oficiales. Revisá el manual del

alumno con los links y sugerencias.

Otra opción es que los alumnos trabajen con un editor online como plunker, el cual es

gratuito y fácil de usar en https://plnkr.co/edit/

La vista es la siguiente:

Si querés crear un archivo nuevo allí, vas a New File en el margen derecho, si se quiere

escribir simplemente se escribe donde dice Hello Plunker, y si se quieren guardar los

cambios se hace clic en Save, luego en Run para poder ver lo que hacemos (aparecerá

una vista del lado derecho para eso) y para bajarnos el archivo a nuestras computadoras

hacemos clic en la flecha hacia abajo en la parte superior derecha.

Dale a los alumnos la opción de elegir la mejor forma o más cómoda de trabajar, pero

siempre acordate que es la primera vez que trabajan con HTML, no asumas que saben

hacer cosas básicas y siempre mirá donde tienen dudas y ayudalos. Nunca trates de

ignorante a alguien que no sabe algo básico (como crear una carpeta o que no entiende

palabras en inglés). Tu tarea es acompañar al alumno en todo el proceso y hacerlo sentir

que puede avanzar y no porque algún compañero/a sepa más, no va a poder hacer el curso.

https://plnkr.co/edit/


Comenzá invitando a los alumnos a crear un archivo. En este momento, es una buena

posibilidad de incluir reglas de nomenclatura para archivos HTML y enseñarles a guardarlo.

Que el alumno se de cuenta que rápidamente pudo crear un archivo, eso lo va a ayudar a

ganar confianza. También el hecho de enseñarles a crear un carpeta y poder encontrar el

archivo en su computadora es un factor importante, no lo dejes de lado.

Bases de HTML

Luego empezá a contarle qué partes forman o integran el HTML. En el manual del alumno

se les cuenta a los alumnos que también pueden omitirlas (html, head, body), menos title y

doctype. Eso también contáselo e invitalo a que tome la decisión de hacerlo o no. Al

principio tal vez sea mejor evitar el head y el body para que puedan escribir menos código

y tenerlo funcionando y visible en un navegador lo antes posible.

Por otro lado, cuando le haces generar un title, mostrarle como puede ver HTML en el

navegador. Contale que cualquier página web puede ser vista desde el navegador. Si

querés, y sentís que los alumnos están con ganas de verlo, mostrale cómo activar la vista

código desde un navegador en cualquier página web (ver código fuente).

Contales que el title aparece en los resultados de búsqueda, buscá algo en Google y

mostráselos, por ejemplo buscá el nombre de tu provincia en el buscador de google y

contales que eso que aparece grande en azul arriba es el title, después entrá a esa página

y mostrales como también aparece en la pestaña y también en la vista código para

corroborrar con ellos que es el title.

Como el siguiente ejemplo:

Luego enseñales los elementos de texto, enunciados, párrafos, listas, wbr, br.

Si te sentís cómodo mientras lo vas haciendo, incluí atributos y contáles que son. La idea

es que se sientan naturales al momento de aprender no algo pausado o cortado.


Te doy un ejemplo para que te ayude a mostrárselos:

Listas

Luego se puede trabajar con las listas. Por ejemplo podemos empezar a trabajar con una

lista de ítems o de elementos que vamos a aprender en el curso:


La verdad es que si bien estos elementos en el manual están antes, yo te recomiendo en

este punto enseñarles a trabajar con strong , em. Contarles que lo que hacemos es destacar

un contenido, y que al ser elementos de línea van dentro de los de bloque o contenedores.

Mostrarles un ejemplo por caso:

Imágenes

Ahora luego de ver estos temas, vas a enseñarles a trabajar con imágenes. Si bien este

tema se profundiza en otro módulo una imagen vale más que mil palabras así que siempre

quieren ver rápidamente una imagen. Así que les vas a contar cosas básicas, sobre como

incluirlas, que atributos tiene y que se puede trabajar de manera absoluta o relativa.

Por ejemplo


Acordate que la idea es que ya estés por la segunda hora cumplida o un poco más , cuando

estás viendo este tema, para poder reservarte la última hora para poder ejercitar y poder

responder preguntas o dudas.

La idea es que lo hagas con paciencia, con la mayor cantidad de ejemplos posibles, que

ellos lo hagan con vos, que puedas ir viendo que de a poco lo van entendiendo.

Te muestro un ejemplo para enseñarles con align (solo mostrarles left y right)

Antes de hacer el ejercicio integrador de esta clase, te doy un dato que te va a ayudar con

el tema de imágenes. Hay una página desde donde poder tomar imágenes gratuitas

llamada www.iconfinder.com

Por otro lado, te cuento que también el volver a hacer hincapié en como guardar los

archivos, y como se hacer referencia al nombre de una carpeta (imagenes/imagen.jpg) es

importante. Si querés contarles que formatos hay pero no profundices ya que eso escapa

a esta primer clase.

Sí es un buen paso, enseñarles a bajarse una imagen de internet, o con F2 cambiar el

nombre a una imagen en la propia computadora.

Cuando les enseñes los atributos acordate de detallarles uno por uno para que sirven

Por ahora no vas a profundizar más que esto, acordate que luego ellos van a tener un curso

especial para imágenes, etc.

http://www.iconfinder.com/


Ejercicio Integrador

Seguramente ya estará por las dos horas y cuarto, esa es la idea, ahora con tiempo contales

que van a hacer el ejercicio integrador. Primero pediles que creen una carpeta y que

generen su index , la idea es que repasen lo que ya habían visto al principio, ahora pediles

que junto con vos o solo lo hagan y luego corregilo. Nunca los dejes solos, pero sí es

importante que ellos lo traten de hacer por su cuenta en lugar de copiar del pizarrón o

proyector porque sino siempre cuentan con tu ayuda y no terminan de darse cuenta si

entienden o no. Por eso , el decirles “tomense unos minutos para hacer esta primer parte,

luego vamos a corregirla juntos” es una buena medida a tomar

Si querés contales que este ejercicio integrador se va a ir completando en las próximas

clases.


Clase 2

Vínculos

Hoy vamos a trabajar con vínculos. Pensá que los alumnos recién empezaron a ver cómo

trabajar con HTML, por lo tanto el tema vínculos puede ser un poco difícil al principio.

Comenzá haciendo dos archivos con nombres genéricos. Por ejemplo archivo1 y archivo2.

La idea es que haga un vínculo simple. Sin demasiadas complejidades.

Por caso:

La idea es que en los dos archivos tanto archivo-1 como archivo-2 estén los mismos

vínculos y ellos puedan ver cómo se va y se vuelve con estos vínculos que han creado.

Después llamales la atención sobre el hecho de estar trabajando en la misma pestaña o

ventana, ahí aprovechá para mostrarles rutas absolutas e incluí el target _blank y

diferencialo del _self

Es interesante que les muestres que el title genera un tooltip o una etiqueta amarilla que

describe su contenido. También si querés contarles que el title es aplicable a cualquier

elemento.

Acordate que en el ejemplo anterior sería bueno incluir el target="_blank"


Un dato interesante sería trabajar con imágenes y vínculos. Por ejemplo toma una imagen

y anidala en un vínculo para que ellos sepan cómo hacerlo también

Luego pasá a contarles qué es un vínculo de correo electrónico.

Enseñales que el servidor de correo electrónico que se abre es el que elige el usuario, tené

en cuenta que muchos alumnos no conocen mucho el manejo de servidores de correo

electrónico así que mostrarles los más conocidos, enseñarles que es un correo nuevo, etc,

es importante para que puedan entender este tipo de vínculo.

Fijensé como puse variantes que son interesantes mostrarles a los alumnos, simples, por

ejemplo varios destinatarios o un asunto (hay otras variantes pero son demasiado

complejas la idea es simplificar lo que los alumnos van viendo para poder entenderlo bien)

Luego se trabará con anclas, la idea es también simplificarlo y si se quiere incluir un ejemplo

de un ancla también con otro archivo:


También obviamente un ejemplo útil es presentar las preguntas y respuestas, para que le

usuario al hacerle clic a la pregunta vaya a la respuesta que le corresponde.

Empezando con CSS

Vamos a empezar a trabajar con CSS lo importante es hacerlo primero con estilos en línea,

de manera simple para entender la idea.

Esta incorporación simple es útil para que los alumnos vean como lo que van haciendo va

tomando forma.


La idea es plantear de manera simple como trabajar, con CSS. Por eso mostrar en primera

instancia todos los modos que tenemos de trabajar es interesante, si bien ellos aún no han

comprendido bien cómo funciona una propiedad y un valor, el mostrarles como el body va

cambiando de color desde estas tres maneras de trabajar es importante para que vayan

viendo cambios y eso los va a entusiasmar

Si se quiere, comenzar con color y background-color, ir cambiando de color a los elementos,

enseñarles que valores posibles se pueden trabajar y mientras de manera natural ir

proponiendo como se configura una regla de estilo

Siempre comenzar con selectores de etiqueta y explicar la ley de herencia pero de manera

simple, que se entienda que los elementos que están dentro por ejemplo heredan el color

(mostrar que pasa con los vinculos y cmo hay que modificarlos directamente)

Por ejemplo

<!doctype html>

<link href="estilos.css" rel="stylesheet">

<title>Estilos </title>

<body>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<a href="http://www.google.com"> Google </a>

</body>

En la hoja de estilos.css

body {background-color: #333; color: lightBlue;}

a { color: orange; }

Luego pasar a trabajar con propiedades de texto, se puede tomar el mismo ejemplo anterior,

sumar una lista por ejemplo e ir viendo cómo vamos aplicando primero en selectores de


etiqueta. Luego mostrar el ID, por ejemplo hacer dos párrafos y mostrar como modificar

solo uno con un #

En estilos.css

La idea es luego mostrar la diferencia con una clase:

La idea es en el mismo archivo anterior ir haciendo dos listas: una ordenada otra

desordenada, y en varios ítems poner esa clase, luego aplicar los estilos vistos

anteriormente.


Por ejemplo el arhivo HTML se vería así

Tipografías y Colores

La idea es luego incorporar las Google Fonts, enseñarles que con ésto podemos liberarnos

del hecho de que el usuario tenga o no instalada la tipografía que utilizamos o no en su

sistema operativo (darles un ejemplo con las fuentes que puedan tener en su celular, algo

con lo que pueden o no trabajar).

Es importante siempre darles el paso a paso de cómo hacerlo, sumar más de una tipografía

y llamarla con font-family; revisá el Manual del Alumno cómo trabajar con ello.

No te recomiendo entrar en detalles de cómo funciona la sintaxis @font-face y los tipos de

archivos de tipografía porque para el público de este curso sería entrar en temas muy

avanzados y que tampoco se aprovecharán en la clase.

Al final de esta clase, el objetivo es que puedas plantear un ejercicio integrador continuando

el de la clase anterior.

Hemos dividido el ejercicio integrador en dos partes, se puede hacer una primer parte con

los elementos nuevos de HTML con los cuales se trabajó al principio y luego otra parte

incluyendo CSS

Para definir colores, mostrale a los alumnos que pueden usar páginas como http://html-

color-codes.info/ o directamente usar Google y buscar "paleta de colores", mostrales cómo

copiar y pegar en el CSS los colores, no asumas que sabrán cómo hacerlo.

También podés mostrarles cómo usar fotos para tomar paletas de colores desde allí con

herramientas como http://html-color-codes.info/colors-from-image/

Acá solamente con subir la imagen, y luego presiona sobre le color que quieras saber.

http://html-color-codes.info/

http://html-color-codes.info/

http://html-color-codes.info/colors-from-image/


Clase 3

En la clase de hoy vamos a ver los elementos contenedores de HTML.

Contenedores

No es necesario incurrir en detalles demasiado técnicos o discusiones semánticas muy

profundas de cuál usar en cada momento sino mínimamente cómo utilizarlos. Verás en el

Manual del Alumno detalles importante de cada uno sin perdernos en profundizar en los

mismos.

No tiene sentido verlos sin de paso empezar a mostrar algunas propiedades de caja de

CSS, como background-color, background-image, background-repeat, background-size y

de caja width, height, border , padding y margin.

La idea es de a poco, son muchas propiedades y muchos elementos nuevos por tanto

ejemplos como el siguiente serán útiles para poder ir entiendiéndolo.

Por ejemplo, podemos empezar desarrollando un sitio ficticio con un header con un nav

(menú de navegación), footer y una sección. Luego podemos ponerle a cada sección un

color de fondo, ancho y alto. Ahí me detendría un poco

<header>

<h1> Mi Web </h1>

<nav>

<ul>

<li> <a href="index.html"> Inicio </a> </li>

<li> <a href="contacto.html"> Contacto </a> </li>

<li> <a href="servicios.html"> Servicios </a> </li>

</ul>

</nav>

</header>

<section>

<h2> Mis Servicios </h2>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

</p>

<ul>

<li> item 1 </li>


<li> item 2 </li>

<li> item 3 </li>

<li> item 4 </li>

</ul>

</section>

<footer>

<a href="mailto:[email protected]" title="vinculo de correo electrónico"> Vinculo </a>

</footer>

Cuando quieras ofrecerle a los alumnos la posibilidad de poner textos de pruebas en el

HTML te recomiendo usar artículos de Wikipedia de temas que sean de interés de los

alumnos o el famoso "Lorem Ipsum" que es un texto de prueba que viene del mundo

editorial cuando se quiere mostrar un diseño sin saber todavía los textos finales. Google te

ayudará a encontrar estos textos listos para copiar y pegar.

Agregando CSS

Los estilos que podés usar para el ejemplo anterior pueden ser algo como

<style>

body { color: white; background-color: #333;}

header { width: 100%; background-color: lightBlue;}

section { width: 960px; background-color: orange;}

footer { width: 100%, background-color: gray;}

</style>

Luego se podría trabajar con margin y padding, incluyéndolo en el ejemplo anterior ante la

necesidad que vemos de que los elementos están demasiado juntos o pegados a los

bordes.

Los estilos podrían mutar de la siguiente manera

<style>

body { color: white; background-color: #333; margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0;}

header { width: 100%; background-color: lightBlue; padding: 10px}

section { width: 960px; background-color: orange; margin-left: auto; margin-right: auto; padding-top: 10px; margin-left: 5px; margin-right: 5px;}


footer { width: 100%, background-color: gray; padding: 10px;}

</style>

Aquí se podría explicar a los alumnos que si ponemos un sólo valor en padding o margin

eso incluye los 4 lados (arriba, abajo, derecha e izquierda). También que 0 es para quitar

márgenes por ejemplo en el body y cuando usamos 0 no se usa unidad (como px o %) dado

que cero es siempre cero no importa la unidad.

También podemos hacer una lista y mostrar cómo esta tiene padding y margin por defecto

y sacarla de la misma forma que lo hicimos con body.

Es interesante ir integrando los conocimientos y que sea algo natural.

Agregando bordes redondeados

Luego a los elementos se les puede ir poniendo bordes

<style>



section { width: 960px; background-color: orange; margin-left: auto; margin-right: auto; padding-top: 10px; margin-left: 5px; margin-right: 5px; border: 1px solid blue;}


</style>

Luego se podrá ir trabajando con border-radius para bordes redondeados, la idea es ir

haciéndolo en nuestro ejemplo anterior, ir trabajando sobre los diferentes valores y

posibilidades:

<style>



section { width: 960px; background-color: orange; margin-left: auto; margin-right: auto; padding-top: 10px; margin-left: 5px; margin-right: 5px; border: 1px solid blue; border-radius: 20px;}


</style>


Si se quiere incluir una imagen en nuestro section y redondearle las esquinas con border-

radius es interesante para salir del hecho de que sólo es aplicable a un elemento estructural

o de bloque como en este caso un section.


A esa altura ya habrán pasado unas 2 horas o más de clase, por lo cual se procederá a

trabajar con el ejercicio integrador, la idea es continuar lo visto la clase anterior con nuevos

elementos de esta clase, aquí se incluirá también backrground-image , background-repeat

y background-size.

Ayudanos con ejemplos. Eso les va a gustar y van a tener ganas de seguir cursando, porque

saben que ellos pudieron hacerlo sin problemas.

Además de enseñarles cómo hacer bordes redondeados por ellos mismos, te recomiendo

que les pases el siguiente link y con ellos veas como copiar y pegar el código desde esta

herramienta online http://border-radius.com/

Acordate de avisarles que desactiven la opción debajo que dice gecko y webkit, no

profundices demasiado el por qué; solamente decile que ahora no hace falta, que era para

navegadores viejos que hoy no existen más.

http://border-radius.com/


Clase 4

Propiedades avanzadas

En esta última clase del primer módulo comenzaremos a trabajar sobre un div que tendrá

un ancho , un alto y se le dará también un border-radius y border se le sumará box-shadow..

Explicá que los valores son los mismos valores de colores que hemos visto anteriormente,

la realidad es que es una buena oportunidad para repasar esos conceptos vistos al principio

del curso.

También más allá de contarles cómo se usa y que valores tiene box-shadow (posición, blur,

color, distancia, posición), mostrales que hay generadores para poder trabajar te

recomiendo la siguiente página: http://www.cssmatic.com/es/box-shadow

También acá mencionales no pegar -webkit ni -gecko- no profundices sólo contales que ya

no se usa.

Flexbox

Luego pasaremos directamente a trabajar con Flexbox sin hacerlo demasiado complejo.

Podemos comenzar con algo como:

<style>

.padre{

display: flex;

width: 500px;

background-color: lightBlue;

}

.item { width: 100px; height: 50px; background-color: orange;}

</style>

<section class="padre">

<section class="ítem"> </section>



</section>

http://www.cssmatic.com/es/box-shadow


Luego pasar a trabajar con las propiedades del padre para agregar Flexbox e ir mostrando

en vivo cómo cambia el comportamiento, por ejemplo

body { direction: rtl; }

.padre {

display: flex;

width: 500px;

background-color: lightBlue;

}

Luego pasamos a mostrar a cómo disponemos los elementos con flex-direction:

.items {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

Lo siguiente es trabajar con las distintas direcciones permitidas (revisá el Manual del

Alumno para más información) y probar los valores column, column-reverse, row y row-

reverse. Vayan dando ejemplos de cada uno, cambiándo el valor.

Lo siguiente es probar justify-content y sus posibles valores, como: flex-start, flex-end,

center, space-between, space-around

Finalmente podría quedar algo como:

<head>

<style>

.contenedor {

display: flex;

flex-direction: column;

width: 400px;

height: 250px;

background-color: lightgrey;

justify-content: flex-end;

}


.items {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

</style>

Luego pasá a mostrar ejemplos también con la propiedad align-items para la alineación

vertical.

.contenedor {

display: flex;

flex-direction: column;

width: 400px;

height: 250px;

background-color: lightgrey;

justify-content: flex-end;

align-items: flex-start;

}

Notemos que nunca hemos cambiado el HTML; trabajamos siempre con el mismo. Acá es

bueno recordar que HTML es para texto y estructura y que con CSS elegimos cómo

mostrarlo.

Al final mostrales el sitio http://css3generator.com/. No lo lleves a otras propiedades, hace

clic en flexbox y mostrales la pantalla, con ellos copia y pega el código, la idea es que sepan

que pueden ir aprendiendo también utilizando estas herramientas.


Un dato interesante, es que vamos a empezar quizás el ejercicio integrador un poco antes,

pero tiene que ver con que vamos a incluir en este ejercicio final integrador, pseudo clases ,

la realidad es que quizás quieras dejar un rato el ejercicio integrador cuando llegues a ese

punto y enseñarles cómo funcionan, la idea es mostrarlas sobre vínculos,

solo :link, :hover, :active y :visited, no profundizar sobre estas cuestiones , sólo con la

intención que les enseñes a hacer una barra de navegación como figura en el ejercicio

integrador.

http://css3generator.com/


MÓDULO II: FORMULARIOS

Clase 1

Aprendiendo lo básico

Primero la idea es que vayas de a poco. Es posible que el alumno no sepa siquiera quizás

qué es un formulario, así que una buena medida es ir trabajando mostrando ejemplos.

Todos seguramente habrán usado un formulario (como búsqueda, login o registro de un

sitio) pero no necesariamente saben que se llaman así.

Comenzar con un formulario de búsqueda en Google, o un formulario de contacto de una

página, también mostrar un formulario de login (identificación) por ejemplo desde Google,

Outlook o Facebook.

La idea es que entienda que ese formulario se estructura con HTML pero finalmente

funciona en base a un lenguaje de programación que le permite hacer que el usuario envíe

y reciba información con el servidor. Acá podes tomar un tiempo para volver a explicar

rápidamente que es un servidor y por qué el formulario sólo enviará o recibirá información

si está trabajado a su vez con un lenguaje de servidor como por ejemplo PHP.

Podrían comenzar por mostrar un campo de texto, en vez de que te pierda en ejemplos de

qué es form, o entrar ya a explicarles que el method, action, etc es mejor hacerlo así:

<input type="text">

Lo mostrás en el navegador y les hacés ver que se puede hacer foco y tipear texto dentro.

Después se puede explicar el uso del Label qué es el placeholder y qué name y agregarlo.

<label>Nombre y Apellido:

<input type="text" placeholder="Ingresá tu nombre. Ejemplo: Juan Perez" name="nombre">

</label>

Luego vamos a pasar directamente a ver los botones, les vas a enseñar los usos de los

siguientes botones:

<button> boton </button>


<input type="button" value="boton que no hace nada">

<input type="submit" value="boton que ejecuta el formulario">

Luego de esto, lo vamos a completar explicando los atributos del elemento form: action y

form. Esto sirve para poder entonces ahora sí antes de probar el siguiente ejemplo sumar

required a nuestro campo de nombre

<form method="post" action="codigo.php">

<label> Nombre <input type="text" name="nombre" placeholder="Juan Perez" required> </label>

<button> Enviar </button>

<input type="reset" value="borrar-me equivoque">

</form>

Aquí explicamos bien la diferencia entre post y get, se puede dar ejemplos con este

formulario de como en el caso de get la información se concatena como apéndice de la url.

Si querés podes retomar el ejemplo de búsqueda que también hiciste y mostrarlo con get y

este que parece más un formulario de contacto hacerlo con post.

Como de todas maneras habrá un ejercicio integrador, te recomiendo ir mostrándole los

campos en archivos separados, ir viendo uno por uno de todas maneras al final vas a verlos

todos juntos.

Luego se puede incluir a este ejemplo el campo de url , email , number y tel. Es interesante

que en el caso de number se sumen los minimos, máximos y el intervalo al momento de

explicarlo.

Luego de terminar de explicar lo anterior, se puede empezar a trabajar con el campo de

télefono puntualmente, les recomiendo una página para enseñárselas a los alumnos que

es http://html5pattern.com/, tomar ejemplos de esta página y enseñarles a poner patrones

como expresiones regular no solamente en un campo de tel, sino también en uno de nombre

por ejemplo.


Por otro lado después vamos a comenzar a trabajar con el ejercicio integrador de esta clase,

la idea es que ten queden al menos 40 minutos para poder trabajarlo

http://html5pattern.com/


Fijate que en el ejercicio integrador se trabaja con el elemento span para poder hacer

aparecer un * a aquellos campos requeridos, explicales muy simple de que se trata ese

elemento, si te parece necesario dale un ejemplo por fuera del ejercicio por caso:

<style>

span { color: red;}

</style>

<p> mi parrafo con un texto en <span>rojo</span> </p>

También en el ejercicio se aplican estilos sobre el formulario por ejemplo propiedades ya

vista en el módulo inicial de HTML, como el uso de google fonts para poner tipografía, font-

size, color, background-color, width, height, line-height, font-weight y border-radius.


Clase 2

Selectores Nativos

En este clase la idea es continuar con lo visto la clase anterior, vamos a trabajar con los

elementos de formulario nativo, como selectores de fechas y otros.

En el caso de los tipos de ingreso de fecha te invito a mostrarle todas las opciones, y fijar

minimos y máximos como en el siguiente ejemplo, deben ser simples nada complicado algo

que el alumno entienda

<form action="codigo.php" method="POST">

<input type="date" name="dia" min="2000-01-01" max="2014-12-31">

<button> Enviar </button>

</form>

Enseñales que también puede tener required

Luego hacelo con cada variante, month, date, time, etc. Y que vayan probando la diferencia

de cada uno en el navegador directamente.

Luego seguirá el campo de rango, trabajando con min, max y step (como lo hiciste la clase

pasada con number) contales que se puede usar para otras cosas no solamente para un

formulario, por ejemplo para bajar o subir el volumen de un audio.

El campo de color es interesante para que vean como estos elementos cambian su diseño

según el navegador.

Luego mostrarás el campo de búsqueda, te recomiendo retormar el ejemplo del atributo

autofocus, y mostrarles como estos campos son interesantes, para cuando hay formularios

de búsqueda y queremos concentrar al usuario sobre ese formulario en particular.


Después vamos a trabajar con campos de verificación checkboxes y radios, la idea es que

les muestres las diferencias entre los dos (que uno es inclusivo y el otro exclusivo) y que

aparte, les presentes atributos como checked, y también required.

Por otro lado, que los trabajes con label como en el siguiente ejemplo:

<label> Quiero recibir newsletter

<input type="checkbox" name="newsletter" checked value="si">

</label>

<label> Estado Civil Casado

<input type="radio" name="estado" value="casado">

</label>

<label> Estado Civil Soltero

<input type="radio" name="estado" value="soltero">

</label>

En caso de los radios de la importancia que reviste el hecho de que si son campos que

forman parte del mismo grupo deben tener el mismo name para que sean mutualmente

exclusivos.


Luego por último mostrarás la utilidad del datalist y el ejemplo se verá puntualmente en el

ejercicio integrador.

Ahora te quedará seguro unos 40 minutos para hacer el ejercicio integrador que es la

continuación del ejercicio de la clase anterior, agregando conceptos vistos en la clase de

hoy.


Clase 3

Elementos de Selección de Lista

En esta última clase del módulo de formularios se va a retormar el datalist de la clase

pasada, dependiendo del tiempo de la clase pasada, se puede pasar el datalist para esta

clase también. pero en este caso vas a enseñarles cómo hacer un menú desplegable con

sugerencias. Buscá algo que le resulte interesante a los alumnos sugerir, algo que usen a

diario en la localidad donde estés dando el curso, como un listado de colectivos, kioscos, o

algo que sea divertido que aparezca en una lista desplegable.

El siguiente paso es el <select>, se puede duplicar la lista creada anteriormente y allí

mostrarles la diferencia entre tener una combinación de input y datalist a tener un select.

También mostrales una lista de selección múltiples como

<select name="idiomas" size="3" multiple>

<option value="ingles">Ingles</option>

<option value="frances">Francés</option>

<option value="español">Español</option>

</select>

Contale que en navegadores de escritorio se usa la tecla Control y Shift para elegir más de

una opción y en navegadores de teléfonos celulares la interfaz es completamente distinta y

más fácil de usar.

Validación

La idea es que antes que termine la clase mientras vas mostrando ejemplos puedas ir

también enseñando que se pueden validar pero también dar estilos a esa validación , ya

desde la clase anterior es bueno ir haciéndolo, pero a veces dependiendo el tiempo se

puede explicar en esta clase, pero si se nota en el ejercicio integrador de la clase pasada

ya tenemos aplicadas las pseudo clases de validación.

• :invalid

• :valid

• :required

• :optional

• :checked


Otros elementos semánticos

Luego vas a trabajar con el textarea y como a su vez se puede incluir el atributo maxlength

a todos los elementos vistos anteriormente

Luego vas a trabajar con meter y progress, acordate de mostrar las variantes de meter

<meter value="2" min="0" max="10">metrica</meter><br>

Luego terminás mostrando progress, el cual es más sencillo ya que cuenta con menos

atributos, contales también que se puede utilizar sumado a JavaScript y ahí se da su

principal utilidad el mostrar un progreso, para alguna operación que se está haciendo como

calculando algo, o descargando contenido del servidor.

Si bien estos elementos se pueden contextualizar en un formulario, vos mostralos por fuera,

es decir por ejemplo el meter en cuantos votos saco un candidato y contá que el progress

se puede utilizar cuando carga una página te doy un ejemplo de progress para que lo uses:

<progress value="22" max="100"></progress>


Ahora vas a hacer el ejercicio integrador, este ejercicio tiene como particular el hecho de

que vas a trabajar al final mostrando un ejemplo de trabajo con servidor, pero la idea no es

complicar a los alumnos así que lo que vas a hacer es ir a un editor online llamado plunker,

vas a contarles que este como tantos otros editores online, tienen conexión con el servidor,

y eso hace que esto funcione, no vayas más allá.

Para mostrar un formulario en acción funcionando te recomiendo revisar el servicio gratuito

ofrecido en https://formspree.io donde cada alumno podrá poner un action en el formulario

con su propia dirección de email y probar el envío del formulario que llega a su casilla (previa

aprobación ante el primer intento).

De esta forma en el action hay que poner como sufijo la dirección de email donde queremos

recibir la información, como:

https://formspree.io/


archivo.html

<form method="post" action="https://formspree.io/[email protected]">

<label> Nombre <input type="text" name="nombre" required> </label>

<label> Email <input type="email" name="email" required> </label>

<label> Consulta <textarea required name="comentarios" maxlength="200"></textarea> </label>

</form>

En los archivos adjuntos también tenés un archivo en PHP que recibe esta información y la

envía por email por si querés mostrarlo como algo extra.

De todas maneras, también les ofreceremos a los alumnos páginas online que nos facilitan

los procesos tanto de validación como de trabajo con lenguajes de servidor como por

ejemplo

http://scriptgenerator.net/html-php-contact-form-mailer-generator/

Donde de manera sencilla como vemos en la siguiente imagen podemos configurar de

quien y como mandar el mensaje:

http://scriptgenerator.net/html-php-contact-form-mailer-generator/


A través de generate code, podemos luego tener incluso una preview o copiar nuestro

codigo en nuestro HTML.

Es importante recordarle al usuario que esto requiere de un servidor y es usualmente un

trabajo por fuera del diseño web, que termina con el armado del formulario.


MÓDULO III: IMÁGENES Y VIDEO

Hoy vamos a ver cómo dictar el módulo de Imágenes, elementos gráficos y de multimedia.

Clase 1

Trabajando con imágenes

En esta vas a explicar cómo trabajar con imágenes. Cómo descargarse una imagen del

navegador es una buena forma de empezar. Busca una imagen en el navegador, por

ejemplo "avatar", luego mostrarles que las imágenes se pueden buscar en una pestaña

especial de resultados de búsqueda que se llama imágenes dentro de Google.

También es interesante contarles que tenemos criterios de búsqueda, donde hay imágenes

que tienen derechos de autor y mostrarles como es bueno respetar esos derechos para

evitar problemas


La idea es que luego les muestres como filtrar por ejemplo desde Google la búsqueda como

búsqueda segura:

Luego de eso presentarles herramientas para buscar imágenes por ejemplo

• www.iconfinder.com

• http://www.sxc.hu/

De esta manera podemos enseñarles también cómo guardarlas o bajarlas. Por otro lado,

en esta clase enseñarles que las imágenes se pueden diseñar o mismo guardar en

diferentes formatos.

Este el puntapié para contar que formatos tenemos

• JPEG

• GIF

• PNG

La idea es quizás generar una imagen y mostrar la misma imagen en los 3 formatos para

mostrar diferencias entre ellas.

En los archivos de recursos para el profesor encontrarás una imagen para poder usar en el

curso.

Mostrando la imagen

A esta altura ya todos los alumnos querrán ver cómo se agrega finalmente la imagen al

HTML. Así que probamos el uso de la eitqueta img como en el siguiente caso:

<img src="imagen.jpg" alt="alt" width="200" height="200" border="30" align="left">

Si bien usamos muchos atributos HTML, la idea es luego mover algunos hacia CSS, es una

buena oportunidad para repasar propiedades como las siguientes

img { width: 200px; heigth: 200px; border:1px solid blue; border-radius: 10px; box-shadow: 1px 2px 3px blue; }

http://www.iconfinder.com/

http://www.sxc.hu/


SVG

Luego vas a contarle a los alumnos que hay un formato llamado SVG. Les vas a detallar

las características principales, acordate que los alumnos quizás no sepan nada sobre

imágenes, ya antes seguramente cuando les marcaste las diferencias entre por caso .jpg

y .png les dijiste qué era un canal alpha o transparente. Acordate que esto siempre tiene

que ser con ejemplos por caso como te dije antes, tomar la misma imagen y mostrar las

diferencias de cada formato, en este caso como primer visión del .svg el hacer esto es

fundamental. Tomá una imagen en .png y .svg y generá la diferencia (haciendo mucho

zoom o poniendo la imagen muy grande) eso va a ayudar a los alumnos a entenderlo.

En primera instancia, entonces vas a mostrar el .svg como parte de una etiqueta img. Pero

después la idea es que les muestres a los alumnos cuantas formas tenes de incorporarlo.

Aunque parezca difícil es mostrar formas simples como cuadrados, circulos, y elipses es

algo interesante para que ellos vean, porque no es para nada dificil, simplemente seguir

que hace cada atributo y sumar propiedades fáciles (no trabajes sombras ni cosas más

complejas) desde CSS los va a ayudar a entender este elemento.

<!DOCTYPE html>

<h1>My first SVG</h1>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>

Recordá que en el ejemplo está en forma de atributo pero lo mismo se puede hacer con

propiedades

<style>

svg { width: 100px; height: 100px;}

.circulo {stroke: green; stroke-width: 5px; fill: blue; }

</style>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" fill="yellow" />

</svg>


También al usar SVGs como archivos externos podés mostrarlo cómo también se puede

definir como imagen de fondo de la propiedad background-image

div { background-image: url(../imagen/imagen.svg)}

En estos pasos recordá repasar el concepto de poner las imágenes en una carpeta y las

rutas por ejemplo si salgo o entro a una carpeta

• imagenes/imagen.jpg

• ../imagenes/imagen.jpg

Pero luego, contales que se pueden hacer elementos más complejos, y presentales la

página http://www.svg-generator.de/ esta página es genial y con sólo crear la forma que

quieras y exportarla se pueden obtener elementos en svg


La idea es que ahora te quede aproximadamente una hora para poder trabajar con el

ejercicio integrador de esta clase. Acordate que vamos a incorporar elementos como divs,

y demás propiedades de CSS también, así que con paciencia y tiempo irás viendo con los

alumnos como armar el ejercicio, pero también darles unos minutos solos para hacerlo es

importante. Si bien el ejercicio tiene sus propias imágenes la idea es que los alumnos las

descarguen desde Google, así que eso es importante recordárselos, para que recorran el

proceso de guardardo de imagen y filtros al momento de hacerlo.

En este punto es divertido que los lleves a conocer alguna herramienta online para editar

imágenes, acordate que ellos no saben usar ni Phooshop ni nada de esos programas que

son para profesionales, entonces que sepan una herramienta online para editar imágenes

los hace más cercanos al proceso de edición .

http://www.svg-generator.de/


Clase 2

Embebiendo contenido

En esta clase vas a comenzar a contarles que es embed. El uso de embed para poner

incluir cualquier elemento es útil, incluso mostrales cómo trabajar con .svg en un embed,

luego con un html y con un archivo de audio.

Contales que se puede trabajar con width y height y también con propiedades de CSS

<embed src="audio.mp3" width="200" height="30">

Este es un buen momento para contarles que a veces los archivos necesitan de plugins, no

te pierdas en definiciones técnicas y difíciles, sólo deciles que te permite poder ver video,

audio, o una animación en programas especiales como Flash Player y que en estos casos

que requieren plugin no será compatible con teléfonos celulares.

Luego les vas a enseñar que es un iframe , usalo en primer lugar también incluyendo un .svg

o incluso un .html

<iframe frameborder="0" width="200" height="300"

src="archivo.html"></iframe>

Luego contales que ahora se los utiliza para embeber contenido en nuestro sitio que está

generado y alojado en otros sitios, como Google Maps, Twitter, Facebook y YouTube. Para

eso hay que buscar una opción de Embeber (Embed en inglés) o Compartir que suele haber

cuando vemos contenido en uno de estos sitios.

Cuando lo hagas, utilizá tu tiempo para contarles como incluir archivos desde Youtube y

Google Maps, contales que se pueden configurar parámetros, como colores, tamaños y

demás por ejemplo desde Youtube o también que se puede trabajar con insertar tu Mapa

en una red social o trabajar con un iframe como lo vamos a hacer en el ejercicio integrador,

por ejemplo mostrarle la interfaz como usarla , etc:


También lo mismo podés hacer en YouTube, por ejemplo en la opción mostrar más se

despliega una pestaña que te permite Configurar info como tiempo, etc


Te paso un ejemplo de la pestaña que se despliega:

Hacé ejemplos con ellos, preguntales cuál es su canal de YouTube favorito o buscá algún

video que se haya viralizado en el último tiempo para generar simpatía y que vean cómo

pueden embeber en su sitio estos contenidos.

Figuras

Ahora es tiempo de mostrar el elemento figure y para qué sirve. Acordate que este elemento

incluye elementos gráficos no solamente imágenes, sino también video, audio, o líneas de

codigo.

Darles un ejemplo con el elemento code es una buena alternativa

<figure>

<figcaption>El código fuente CSS para cambiar color de los links</figcaption>

<code> a:visited { color: green } </code>


</figure>

A veces en un blog de tecnología, diseño o programación utilizamos este elemento para

mostrar líneas de código explicativas de algún proceso, darles ejemplos de eso es bueno.

Luego mostrales que se puede usar figcaption para dar una descripción de los elementos,

mostrales variantes con varias imágenes, y demás elementos .

Luego vamos a trabajar sobre un mapa de imagen, la idea es que entiendan el concepto

pero básicamente dales una herramienta para poder hacerlo www.image-maps.com

Primero tenés que subir la imagen (por ejemplo un mapa del país o provincia que nos

permita elegir zonas) y luego con botón derecho del mouse, vas eligiendo la forma a

realizar. Te paso una imagen para que lo entiendas mejor

Fijate que la idea es que te quedes haciendo esto con los alumnos, que les des varios

ejemplos con esta herramienta que lo puedan entender bien. Te cuento también que esta

herramienta tiene varias particularidades, por ejemplo las siguientes:

http://www.image-maps.com/


Cuando querés que se guarden los cambios, vas a hacer clic en el botón derecho del mouse

y guardas los datos, pero luego para poder usarlo tenés dos opciones:

GET CODE en este menú es donde tenés que ir:

Ahí si querés te podés crear una cuenta, esa cuenta te permite trabajar con estos elementos

online, es decir haciendo referencia a la ruta absoluta, no te tenés que bajar nada , la

imagen queda en el servidor de ellos.


Sino podés cambiar las rutas a relativas cuando copias el código por ejemplo:

<img id="Image-Maps-Com-image-maps-2017-04-24-132740" src="http://www.image-maps.com/m/private/0/h5emn8393cakiufv9enn0vfq63_mapa.jpg" border="0" width="917" height="1044" orgWidth="917" orgHeight="1044" usemap="#image-maps-2017-04-24-132740" alt="" />

<map name="image-maps-2017-04-24-132740" id="ImageMapsCom-image-maps-2017-04-24-132740">

<area id="buenosAires" alt="Buenos Aires" title="buenosAires" href="https://es.wikipedia.org/wiki/Buenos_Aires" shape="rect" coords="443,425,521,514" style="outline:none;" target="_self" />

<area id="cordoba" alt="Córdoba" title="Córdoba" href="https://es.wikipedia.org/wiki/Provincia_de_C%C3%B3rdoba_(Argentina)" shape="rect" coords="392,301,447,344" style="outline:none;" target="_self" />

</map>

Este código lo copiamos de la página, pero si te fijás las rutas son absolutas, esto sirve por

24hs si no tenés cuenta, entonces no sirve (salvo que te hagas una cuenta) sino cambia

simplemente las rutas a relativas

<img id="Image-Maps-Com-image-maps-2017-04-24-132740" src="mapa.jpg" border="0" width="917" height="1044" orgWidth="917" orgHeight="1044" usemap="#image-maps-2017-04-24-132740" alt="" />


La idea es que aún te queden al menos 40 minutos para ejercitar con el ejercicio integrador.

Que es en sí la continuación del ejercicio anterior. Vas a ver que incluimos todos los

elementos vistos, que trabajen con las herramientas que vos les enseñaste, dejalos que

investiguen y está con ellos ante cualquier duda, eso los va a ayudar a perder el miedo

cuando las usan. Si bien en el ejercicio que tenés de ejemplo yo trabajé con determinadas

formas y archivos, tratá que ellos generen los suyos propios, así pueden ver bien si se

comprende o no lo dado y que no sea solamente una simple copia.

En el ejercicio integrador hay varios elementos SVG que también se puede elegir entre que

el alumno los haga manualmente (cuadrados) o más allá de ser simples que los genere con

la herramienta online y se le enseñe a copiar y pegar el código en el html simplemente.

También hay un generador que está bueno mostrárselo a los alumnos

http://scriptgenerator.net/iframe-code-generator/ para generar iframes de manera simple

desde 0.

http://scriptgenerator.net/iframe-code-generator/


La idea es darles la mayor cantidad de herramientas online para poder trabajar, más allá

de conocer cada elemento que se simplifique la tarea.


Clase 3

En esta última clase les vas a enseñar elementos como video, audio y canvas.

Reproduciendo audio y video

Enseñales el uso de los atributos de cada elemento, por ejemplo

<video src="video.mp4" width="320" height="240" controls>

</video>

Habláles de los formatos y en ese punto detenete a contarles que es el elemento source

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.webm" type="video/webm">

</video>

También enseñarles que hay convertidores de videos a otros formatos es una buena idea.

Probá a hacer una conversión a OGG o a WebM con ellos.

Lo mismo vas a hacer con audio, y vas a convertir formatos y utilizar el elemento source

<audio src="audio.ogg" autoplay></audio>

Luego enseñales, que se pueden hacer controles personalizados, yo te dejo un ejemplo

para que lo hagas vos, fácil para que lo puedan ver. Como esto ya es JavaScript y está

fuera del ámbito de este curso, lo hacemos simple y sin mucha explicación teórica:

<button onclick="playVideo()" type="button">Play</button>

<button onclick="pauseVideo()" type="button">Stop</button><br>

<video id="miVideo" width="320" height="176">

<source src="video.mp4" >

<source src="video.ogg">

</video>

<script>

var video = document.getElementById("miVideo");


function playVideo() {

video.play();

}

function pauseVideo() {

video.pause();

}

</script>

La idea es luego mostrarles la herramienta

http://scriptgenerator.net/simple-html5-embed-video-player/

que permite generar rápidamente con datos fáciles de seguir un player de video.

http://scriptgenerator.net/simple-html5-embed-video-player/


Canvas

Después vas a contarle, que existe un elemento que se llama canvas, les va a mostrar uno

o dos ejemplos simples y el contexto en el cuál se los trabaja, pero nada profundo, porque

acordate que este elemento requiere JS para mostrales ejemplos te recomiendo páginas

como: https://threejs.org/examples/

Podés ir también mostrándoles el código, pero sólo para que vean que están hecho con

Javscript, si querés contarles en este punto que JavaScript es algo complementario de

HTML para poder animar elementos como por ejemplos estos, o hacer galerias de

imágenes deslizables y demás es un buen momento.

No vayas rápido, mostrales ejemplos, incluso si conocés otras páginas es un buen momento

para detenerse en este elemento.

A este punto los alumnos seguramente están maravillados con Canvas pero no muy

contentos con el hecho de que no saben trabajar con esto pero ahí es cuando les vas a

contar que hay una herramienta para generarlo automáticamente :

http://www.htmlcanvasstudio.com/

Enseñales a usarlo y a generar un elemento que puedan usar en su HTML


Ahora vas a realizar con los alumnos el ejercicio integrador, que es la continuación del

ejercicio de la clase anterior, acordate de dejarlos unos minutos para que lo puedan hacer

solos, pero también está con ellos preguntando si tienen dudas o caminando por el aula

verificando en qué está cada alumno, la idea es que no se lleven nada por la mitad sino que

juntos lo puedan corregir.

Si bien hay una forma determinada de Canvas la idea es que ellos generen la propia a

través del sencillo panel

https://threejs.org/examples/

http://www.htmlcanvasstudio.com/

curso de diseÑo web · 2017-06-29 · curso de diseño web – manual del profesor 7 •...

Documents