introducción a html5 y css3 - artmedia 2011
DESCRIPTION
Taller sobre HTML5 y CSS3 que dicté en la conferencia ArtMedia 2011, en la Universidad Maimónides.TRANSCRIPT
![Page 2: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/2.jpg)
Hernán BeatiDesarrollador Web + 12 años
+ coautor conMaximiliano Firtman
Autor
libro:
Fundador de:
Docente en:
![Page 3: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/3.jpg)
Web = HTMLLenguaje universal, base de la
Web
![Page 4: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/4.jpg)
HTML 4.01 = 1999XHTML 1.0 = 2000 XHTML 1.1 = 2001
XHTML 2 = ?
HTML5
![Page 5: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/5.jpg)
¿A qué se le llama HTML5?HTML5 (nuevas etiquetas,
marcado)
CSS3 (nuevos estilos)
APIs JavaScript (programación)
+ Otros estándares W3C (SVG, MathMl)
+ Estándares “de facto” (microformatos)
+ Experimentos de algún navegador+ + + ...
![Page 6: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/6.jpg)
Nuevo en HTML5
Nuevas etiquetas semánticas(Google debe entender los contenidos)
Video, audio y animación sin plugins
(Acceso universal: cualquier dispositivo, cualquier navegador, cualquier versión)
Nuevos elementos de formularios
(Más usabilidad y menor uso de JavaScript)
![Page 7: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/7.jpg)
Nuevo en CSS3Usar cualquier tipografía
Efectos decorativos: sombras, RGBa, bordes redondeados, gradientes,
(menor uso de imágenes)
Movimientos: transformaciones, transiciones, animaciones
(menor uso de JavaScript)
Diseño adaptable: Media Queries
Selectores más precisos(menor uso de marcado innecesario)
![Page 8: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/8.jpg)
Nuevo en ScriptsAnimaciones con Canvas
Drag & Drop
Geolocalización del usuario
Trabajo offline (cache de aplicaciones)Web Storage (session y local)
File System API (archivos enteros)
Bases de datos del lado del cliente
Web sockets (actualización en vivo, tipo Ajax)
Hilos (threads) Web Workers
![Page 9: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/9.jpg)
Pero...¿cuál es “la” pregunta?
(que todos nos estamos haciendo con HTML5 y
CSS3)
![Page 10: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/10.jpg)
¿Ya se puede usar!?
![Page 11: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/11.jpg)
“Naaahh...¡si en Explorer
no anda!”
![Page 12: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/12.jpg)
Esa duda se basa en rumores*
*(conceptos erróneos)
![Page 13: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/13.jpg)
El principal:
Esperar que la perfección total se haga realidad un día.El “Día D” nunca existirá…
![Page 14: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/14.jpg)
“Cuando todos los seres humanos del mundo se actualicen a X navegador...”
La diversidad de versiones y plataformas siempre existirá: sin plugins, JavaScript desactivado, resoluciones MUY diferentes.
![Page 15: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/15.jpg)
“Cuando todos los navegadores interpreten idénticamente el 100% del estándar...”Las diferencias entre navegadores siempre
existirán, jamás hubo 2 navegadores iguales.
La evolución / innovación implementando nuevas capacidades, siempre existirá.
Siempre seguirán en uso navegadores antiguos.
![Page 16: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/16.jpg)
“Cuando el W3C publique la especificación, ahí sí se podrá usar!”
En 2015 recién será “Recomendación”. ¿Para 2022 la habrán implementado los navegadores?
HTML: primer estándar VIVO, sin versión.
Se estandarizan las innovaciones.Lo que ya funciona nunca se quitará.
![Page 17: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/17.jpg)
“...porque yo quiero que mis diseños se vean idénticos en todos los navegadores y en todos los dispositivos...”
¿!? Existen celulares de 128 x 160 pixeles, y plasmas de 1920 x 1200px!!
![Page 18: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/18.jpg)
¿Y entoncescuál es la
respuesta?
¿Ya se puede usar!?
![Page 19: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/19.jpg)
Versión abreviada:
Sí
![Page 20: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/20.jpg)
Versión explicada:
Se puede usar
mediante técnicas
de compatibilidad
![Page 21: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/21.jpg)
Principales técnicas:
Mejora progresiva (Progressive enhancement).
Degradación elegante (Graceful degradation).
Mejora regresiva (Regressive enhancement).
![Page 22: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/22.jpg)
1. Mejora progresiva(Progressive enhancement)
“Después de crear una página básica, que funcione en Explorer, agreguemos funcionalidades extra para navegadores más potentes,usando selectores avanzados.”
Dave Shea (2003)
www.csszengarden.com
![Page 23: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/23.jpg)
2. Degradación elegante(Graceful degradation)
“Diseñar para los navegadores más potentes y móviles, haciendo uso pleno de HTML5 y CSS3, asumiendo que no se va a ver idéntico.”
Degrada en sitio menos decorado o menos funcional (le “falta” algo).
![Page 24: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/24.jpg)
Andy Clarke propone crear hoja de estilo de texto plano para Explorers viejos, y no perder tiempo en compatibilizar la estética...
(O cobrar ese tiempo aparte!)
![Page 25: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/25.jpg)
Aplicamos nuevas etiquetas HTML5 y CSS3 para navegadores nuevos, y luego agregamos scripts para “fabricar” esa misma funcionalidad en navegadores que no la traen (funcional, o a veces característica estética).
Se les llama shims, polyfills, scripts compatibilizadores, etc.
Por ejemplo: Modernizr, Selectivizr, Yepnope.
Tercera posición:
3. Mejora Regresiva:Complementar al navegador
![Page 26: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/26.jpg)
Aceptar diferencias entre dispositivos...
...pero también aceptar diferencias entre navegadores y sus versiones.
NO BUSCAR UNIFORMIDAD!!!
En el fondo, el concepto clave es aplicar
Diseño Adaptable(responsive design)
![Page 27: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/27.jpg)
Supera actitudes extremas de:
-Usar sólo características CSS básicas que sean soportadas por el obsoleto Explorer 6 (recién Explorer 8 aplicó CSS 2.1 completo, 10 años!!!).
-Olvidarse completamente de navegadores anteriores y limitados, diseñando sólo para navegadores modernos (Andy Clarke…)
![Page 28: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/28.jpg)
¿qué debo hacer para usar
HTML5 y CSS3 ya?
Entonces,
![Page 29: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/29.jpg)
Cambiar la forma
de pensar el diseño web.
![Page 30: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/30.jpg)
Nuestro concepto
de diseño web no puede seguir
siendo el mismo que en diseño
“gráfico”.
![Page 31: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/31.jpg)
La web es <---flexible--->(múltiples dispositivos, múltiples navegadores)
![Page 32: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/32.jpg)
La web es MUY flexible:(¿Para cuál resolución diseñar? Para TODAS!!)
Y más!...
![Page 33: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/33.jpg)
“...pero yo quiero que mis diseños se vean idénticos en todos los navegadores y en todos los dispositivos...”
¿!!!?
![Page 34: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/34.jpg)
Pensar el diseño web como creación de experiencias de usuario, y no como una decoración rígida, uniformizadora, ni como un lienzo artístico.
Algo es diseño si es funcional a una meta,
EL DISEÑO NO ES ARTE
![Page 35: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/35.jpg)
“La” pregunta del diseño web debe
ser:
¿puedo hacer las tareas que vine a
hacer al sitio?(Con cualquier dispositivo, con cualquier navegador y versión)
![Page 36: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/36.jpg)
Deberemos explicar a clientes y jefes
que cada usuario “verá levemente
distinto”cada sitio web¡Porque es inevitable
y no tiene nada de malo!
Diseño adaptable = Responsive design
![Page 37: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/37.jpg)
Resumiendo:(respuestas a “la” pregunta)
Sí, se puede usar HTML5 y CSS3 hoy! Aplicando técnicas de compatibilidad:
Mejora progresiva, Degradación elegante o Mejora regresiva.
Debemos aceptar la flexibilidad de la web, y cambiar nuestras expectativas de diseño.
![Page 38: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/38.jpg)
HTML5: Primer estándar
“vivo”
![Page 39: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/39.jpg)
Antes: W3C definía reglas, que luego los navegadores
iban aplicando
![Page 40: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/40.jpg)
Ahora: navegadores
innovan, y W3C lo agrega al
estándarEs lo lógico...
![Page 41: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/41.jpg)
Conclusión:
HTML5 es el estándar más consensuado de la historia!
Todos lo apoyan...
![Page 42: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/42.jpg)
¿Objetivo de nuevas etiquetas?
Usar etiquetas con significadoGoogle debe entender cuál contenido es
importante y cuál no lo es.
![Page 43: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/43.jpg)
Estructuras nuevasArticle: contenido fundamental,
independiente
Aside: contenido accesorio, no fundamental
Nav: barra de navegación
Section: una sección o bloque (ex DIV)
Header: introducción / orientación sobre sección
Footer: final de una sección
Hgroup: grupo de encabezados
Figure: contenido relacionado (imagen, video, audio, canvas, gráficos, tablas estadísticas, etc.)
Figcaption: leyenda de un elemento Figure
![Page 44: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/44.jpg)
Ejemplos:Antes:
<div id=“wrapper”></div>
<div id=“noticia”></div>
<div id=“banners”></div>
<div id=“header”></div>
<div id=“footer”></div>
<div id=“nav”></div>
<div id=“foto”><img src=“x” /><p>Esta foto habla de...</p></div>
Ahora:
<section></section>
<article></article>
<aside></aside>
<header></header>
<footer></footer>
<nav></nav>
<figure><img src=“x” /><figcaption><p>Esta foto habla de...</p></figcaption></figure>
![Page 45: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/45.jpg)
Secciones explícitas
ArticleAsideNavSection
![Page 46: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/46.jpg)
1. Article
Es el contenido importante de cada página
Puede haber uno, o varios por página Ver ejemplo
![Page 47: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/47.jpg)
2. Aside
Es información secundaria, que podría no estar.
Ej.: Barras laterales, banners.Ver ejemplo
![Page 48: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/48.jpg)
3. Nav
Una barra de navegación.
Puede haber una, o varias por página
Ver ejemplo
![Page 49: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/49.jpg)
4. Section
Una sección explícita.
Puede haber una, o varias por página
Ver ejemplo
![Page 50: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/50.jpg)
4.a Section = “parte de...” Puede haber una o más sections dentro de un article:
<article>
<section>Datos del Autor</section>
<section>Comentarios</section>
</article>
Ver ejemplo
![Page 51: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/51.jpg)
4.b Section = “contenedor de...” Una section puede tener articles dentro (¡con sections dentro!):
<section>
<article>Noticia de hoy</article>
<article>Noticia de ayer</article>
</article>
Ver ejemplo
![Page 52: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/52.jpg)
Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body.
Ver ejemplo
![Page 53: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/53.jpg)
![Page 54: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/54.jpg)
FigureNo es solo para fotos (diagramas, SVG, MathML, listas de código) que puedan ser referenciados (apéndice, índice, etc.) <figure> <figcaption>Bla</figcaption> <img src="logo.jpg" /></figure>
Ver ejemplo
![Page 55: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/55.jpg)
![Page 56: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/56.jpg)
Compatibilizador para Explorer
![Page 57: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/57.jpg)
Textos más semánticos
Mark: resultados resaltados (en vez de span, em o strong)
Time: Hora, Fecha, o ambas cosas
Meter: Medidas dentro de una escala
Progress: Medidas dinámicas, cambiantes
![Page 58: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/58.jpg)
<Etiquetas> que cambiaronA puede envolver varias cosas (bloques)
Address pertenece a una sección, no solo a la página entera
B estilo “diferente”, pero no más importante ni negrita
I cambio de entonación (en otro idioma, tecnicismos)
Strong es algo importante, aunque no se vea distinto
Cite ahora es para “título” de la obra citada, no para “autor”
Hr cambio de tema entre párrafos (Ej.: viñeta entre estrofas)
Small es la letra chica de los contratos, términos legales
![Page 59: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/59.jpg)
¿Aún más significado?
Extensibilidad con Microdata y
Microformatos“Google debe entender cuál contenido es
importante y cuál no lo es...”
![Page 60: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/60.jpg)
Datos personalesOpiniones / revisionesContactosProductosEmpresasRecetasEventosVideo
http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897
![Page 61: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/61.jpg)
<div class="vcard"> <img class="photo" src="http://www.sitio.com/tim.jpg" /> <strong class="fn">Tim Berners-Lee</strong> <span class="title">Director</span> del <span class="org">W3C</span> <span class="adr"> <span class="street-address">C/Ada Byron, 39</span> <span class="locality">Asturias</span>, <span class="region">España</span> <span class="postal-code">33203</span> </span>
</div>
Ver ejemplo
![Page 62: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/62.jpg)
¿Principal dificultad de los formularios?
Validación!
![Page 63: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/63.jpg)
Soluciones HTML5:
Nuevos tipos de input y nuevos atributos auto-validables
![Page 64: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/64.jpg)
13 nuevos type:
search, tel, url, email, number, range, datetime, datetime-local, date, month, week, time, color
![Page 65: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/65.jpg)
Search:<input type="search">
-Botón “x” para “limpiar”-No permite saltos de línea-Degrada en “text”
![Page 66: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/66.jpg)
Tel:
<input type="tel">
-Puede incluir espacios o guiones-Degrada en “text”-Por ahora, es solo semántica
![Page 67: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/67.jpg)
URL:
<input type="url">
Valida que sea una URL absoluta
![Page 68: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/68.jpg)
Email:
<input type="email">
Verifica que la casilla sea válida.
Puede llevar el atributo multiple y en ese caso acepta varias casillas separadas por comas.
![Page 69: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/69.jpg)
Number:
<input type="number" min="0" max="100" step="10" value="50">
Formato: -12345.678e+90(puede ser negativo, usa punto para decimales, e para exponente, mássigno y potencia)
![Page 70: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/70.jpg)
Range:
<input type="range"min="0" max="100" step="10" value="50">
Usar si no importa la precisión del número, sino la usabilidad.
![Page 71: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/71.jpg)
Date: <input type="date">
Puede llevar min, max (rango permitido) y step (por default, de a 1 día)Formato: 2011-09-19
![Page 72: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/72.jpg)
Datetime:
<input type="datetime">
Fecha y hora en formato UTC:2011-05-19T10:55:59.001-03:00
![Page 73: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/73.jpg)
Month: <input type="month">
-Mismos atributos que Date (min, max, step)-Formato: 2011-05-¿vencimiento de tarjeta de crédito?
![Page 74: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/74.jpg)
Week:<input type="week">
Mismos atributos que Date (min, max, step)Formato: 2011-W17
![Page 75: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/75.jpg)
Time: <input type="time" min="11:30" max="23:30" step="600">
Mismos atributos que date.
Formato: 11:59 Formato con segundos (opcionales): 11:59:59
![Page 76: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/76.jpg)
Color: <input type="color">
Opera 11+
![Page 77: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/77.jpg)
Atributos nuevos
![Page 78: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/78.jpg)
Multiple
<input type="file" multiple="true">
Se usa en inputs de tipo file o email
![Page 79: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/79.jpg)
Autocomplete
<input type="text" autocomplete=“on”> (por default)
<input type="text" autocomplete=“off”>
![Page 80: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/80.jpg)
Campos obligatorios
<form> <input type="email" id="casilla" required> <input type="submit" value="Subscribirse"></form>
![Page 81: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/81.jpg)
Autofocus
<input type="text" autofocus>
(a un solo campo, o solo tomará el último)
![Page 82: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/82.jpg)
Placeholder
<input type="text" placeholder="Escriba su nombre">
(tener en cuenta que el placeholder se esconde si hay autofocus)
![Page 83: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/83.jpg)
Pattern
<label> Nro. de Tarjeta de Crédito:<input pattern="[0-9]{13,16}"></label>
![Page 84: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/84.jpg)
Datalist (auto-suggest)<input type="url" name="diario" list="sugerencias"> <datalist id="sugerencias">
<option label="La Nación" value="http://www.lanacion.com.ar"></option> <option label="Clarín" value="http://www.clarin.com"></option> <option label="Página 12" value="http://www.pagina12.com.ar"></option> <option label="Infobae" value="http://www.infobae.com"></option> </datalist>
![Page 85: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/85.jpg)
No validar:
<form novalidate>
Para usar validación propia(con JavaScript)
![Page 86: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/86.jpg)
Compatibilizar formulariospara navegadores viejos
https://github.com/ryanseddon/H5F
![Page 87: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/87.jpg)
Multimedia HTML5:
Audio, video y animaciones
![Page 88: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/88.jpg)
Audio<audio controls="controls">
<source src=“x.ogg" type="audio/ogg" /> <source src=“x.mp3" type="audio/mpeg" />
Contenido alternativo.
</audio>
![Page 89: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/89.jpg)
Formatos soportados
.mp3 - Chrome y Safari.ogg - Firefox y Opera
¿Explorer? Fallback con Player .flv
![Page 90: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/90.jpg)
Video<video controls="controls" preload="auto">
<source src= "x.mp4" type="video/mp4" /> <source src= "x.webm" type="video/webm" /><source src= "x.ogg" type="video/ogg" />
Contenido alternativo.
</video>
![Page 91: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/91.jpg)
Formatos soportados
.mp4 – Chrome 6, Safari 5, Explorer 9
.ogg y WebM – Chrome, Firefox y Opera
¿Explorer viejo? Fallback con .flv
![Page 92: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/92.jpg)
Valores de Preloadpreload="none" (no descarga nada)
preload="metadata" (no baja el video, pero sí sus metadatos -tamaño, etc.-)
preload="auto" (lo baja por adelantado)preload="" (igual a auto, lo baja)
Si no es declarado, cada navegador decide, aunque especificación dice que debe aplicar “metadata”.
![Page 93: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/93.jpg)
Poster
poster="imagen_inicial.jpg“
Imagen que se ve antes de dar play
![Page 94: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/94.jpg)
Video con fallbackhttp://camendesign.com/code/video_for_everybody
![Page 95: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/95.jpg)
Animaciones “a la HTML5” (sin Flash)
3 tecnologías:
1) Canvas (bitmap)2) SVG (vectorial) -poco soporte-3) CSS3 Animations
![Page 96: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/96.jpg)
Ejemplos de Canvas
http://agent8ball.com/
http://www.s5-style.com/
![Page 97: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/97.jpg)
Libros sobre Canvas
![Page 98: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/98.jpg)
Asegurar soporte:
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
http://excanvas.sourceforge.net
![Page 99: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/99.jpg)
Referencias oficiales de HTML5:
Versión aprobada (vieja):http://www.w3.org/TR/html5/
Versión borrador “vivo”:
http://dev.w3.org/html5/markup/Overview.html
Versión del WHATWG:http://www.whatwg.org/html
![Page 100: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/100.jpg)
Hacemos un break!
Y seguimos con:
Posibilidades de CSS3
![Page 101: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/101.jpg)
Nuevas posibilidades
estéticas
Textos: Fuentes, columnas, wrap.
Colores: transparencia, degradé. Elementos decorativos: bordes,
sombras de cajas y de textos, efectos 3D, fondos
múltiples.
![Page 102: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/102.jpg)
1. Tipografías con @font-face
![Page 103: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/103.jpg)
![Page 104: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/104.jpg)
@font-face{ font-family:Mifuente; src: fuente.woff; }
#titulos{ font-family: Mifuente, arial, helvetica, sans-serif; }
![Page 105: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/105.jpg)
@font-face {font-family: 'Mega'; /* Nombre a usar */
src: url('mega.eot'); /* Compat. c/IE 9 */
src: url('mega.eot?#iefix') format('embedded-opentype'), /* IE 6-8 */
url('mega.woff') format('woff'), /* resto */
url('mega.ttf') format('truetype'), /* Safari, Android, iOS */
url('mega.svg#MegalopolisExtraRegular') format('svg'); /* iOS versiones viejas */}
![Page 106: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/106.jpg)
Columnas
column-count: Cuántas column-width: Ancho column-gap: Huecocolumn-rule: Rayita
![Page 107: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/107.jpg)
.tres_columnas{ column-count: 3; column-width: 120px; column-gap: 24px;column-rule: 1px solid #999; }
![Page 108: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/108.jpg)
2. Colores en CSS3
RGBa HSL HSLa Degradés Transparencias
![Page 109: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/109.jpg)
Translucidez RGBa body{ background-color:rgb(100,20,40); /* Fallback sólido */
background-color:rgba(100,20,40,0.5);}
A diferencia de opacity, no se hereda!
RGBa(0,0,0,0) es transparente total
![Page 110: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/110.jpg)
¿Y Explorer?Comentarios Condicionales: <!--[if IE]> <link rel= “stylesheet”
href= “hojaexplorer.css”><![endif]-->
![Page 111: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/111.jpg)
Dentro de hojaexplorer.css:
.translucido { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); /* mismo valor de inicio y fin / zoom: 1; }
![Page 112: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/112.jpg)
Formato startColorstr
AARRGGBBAA = Alpha, 00 transparente, FF
sólidoRR = Red
GG = GreenBB = Blue
Conversor RGB a Hexadecimal:http://www.javascripter.net/faq/rgbtohex.htm
![Page 113: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/113.jpg)
Tono, saturación, brillo: HSL
body{ background-color: hsl(360,100%,20%);}
Valor de Tono: 0 a 360 (0 rojo, 120 verde, 240 azul, 360 rojo)
Conversor para fallback:http://serennu.com/colour/hsltorgb.php
![Page 114: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/114.jpg)
Tono, saturación, brillo + Translucidez: HSLa
body{ background-color: hsla(300,130%,65%,10%);}
HSL con translucidez Alpha
![Page 115: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/115.jpg)
Generador de Degradés
http://gradients.glrzad.com
![Page 116: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/116.jpg)
![Page 117: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/117.jpg)
Bordes redondeados
#algo { border-radius:10px;
}
![Page 118: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/118.jpg)
Border-image
#algo{border-image: url("borde.png") 12 repeat round; }
![Page 119: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/119.jpg)
Ejemplo de border-image http://www.w3.org/TR/css3-background/#border-images
![Page 120: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/120.jpg)
Ejemplo de Box-shadow
.sombra {box-shadow: 10px 10px 5px #999;}
![Page 121: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/121.jpg)
![Page 122: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/122.jpg)
Sombra en Explorer
.sombra { zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);}
![Page 123: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/123.jpg)
Text-shadow
.sombra { text-shadow: 10px 10px 5px #999;}
![Page 124: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/124.jpg)
![Page 125: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/125.jpg)
Media queries(consultas sobre el medio)
Detectan características de un dispositivo, para aplicarle distintos estilos
http://www.w3.org/TR/css3-mediaqueries
![Page 126: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/126.jpg)
http://mediaqueri.es
![Page 127: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/127.jpg)
Media “a la antigua” En el HTML:
<link rel="stylesheet” media="screen" href=“pantalla.css">
<link rel="stylesheet” media="print" href=“impresora.css">
<link rel="stylesheet” media=“handheld" href=“algun-celular.css">
![Page 128: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/128.jpg)
Media dentro de CSS
@media screen { h1 { font-size: 2em; } }
![Page 129: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/129.jpg)
Característicasdetectables
width, height, device-width, device-height,orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
![Page 130: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/130.jpg)
Condiciones (Queries):
<link href=“celular.css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 320px)” >
<link href=“tableta.css" rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 768px)" >
<link href=“monitor.css" rel="stylesheet" media="screen and (min-width: 801px)">
![Page 131: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/131.jpg)
Detectar orientación
<link rel="stylesheet" media="all and (orientation:portrait)" href=“vertical.css">
<link rel="stylesheet" media="all and (orientation:landscape)"href=“horizontal.css">
![Page 132: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/132.jpg)
Detección de tamaño
@media screen and (min-width: 400px) and (max-width: 2900px) { /* solo leerán esto en PCs */}
![Page 133: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/133.jpg)
iPhone, iPad y PC<link rel="stylesheet" media="all and (max-device-width: 480px)" href=“iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href=“ipad.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href=“ipad-horizontal.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href=“pc.css">
![Page 134: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/134.jpg)
Criterio antiguo (actual!):
Sitio PC+ media queries = Sitio móvil??????
![Page 135: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/135.jpg)
La ausencia de detecciónde Media Queries debe ser
el primer filtro!
![Page 136: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/136.jpg)
Mejor:
Sitio Móvil+ media queries = Sitio PC
(Progressive enhancement)
![Page 137: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/137.jpg)
Móvil primero:
<link rel="stylesheet" media=“screen" href=“celulares.css">
<link rel="stylesheet" media=“screen and (min-device-width:1024px) and (max-width:989px)" href=“pc.css">
![Page 138: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/138.jpg)
Compatibilidad para navegadores viejos:
http://code.google.com/p/css3-mediaqueries-js
![Page 139: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/139.jpg)
TODOS los fallbacks:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 140: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/140.jpg)
Transformaciones, transiciones y
animaciones con CSS3
![Page 141: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/141.jpg)
Transformación = “estática”, cambia valor
de una propiedad
Transición = “dinámica”, cambia entre
dos estados
Animación = “serie de” transiciones, con timing
![Page 142: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/142.jpg)
Transformaciones
![Page 143: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/143.jpg)
Funciones posibles de transform:
1. scale2. rotate3. skew4. translate5. matrix
![Page 144: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/144.jpg)
1. Scale
transform: scale(1.5);/* Aumenta 50% ambos sentidos */
transform:scale(1.5,0.5);/* Aumenta 50% horizontal y reduce 50% vertical */
![Page 145: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/145.jpg)
Escalar en Explorer <9
zoom: 1; /* Siempre al principio, para activar hasLayout */
/* Ahora sí, reducimos o ampliamos */zoom: 1.5; /* Aumenta tamaño */
![Page 146: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/146.jpg)
2. Rotate
transform:rotate(45deg);
Positivo: sentido agujas del relojNegativo: contra reloj
![Page 147: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/147.jpg)
3. Skew
transform: skew(5deg,-5deg);
Por separado:skewX(grados)skewY(grados)
![Page 148: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/148.jpg)
4. Translate
transform: translate(30px,10px);
Por separado:translateX(distancia)translateY(distancia)
![Page 149: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/149.jpg)
Transiciones
Cambio de valor de una
propiedad en un tiempo
![Page 150: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/150.jpg)
Ejemplo:
a { color: white; background: red;}
a:hover {color: yellow; background: blue;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;
}
![Page 151: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/151.jpg)
Propiedades por separado
transition-property: Propiedad(es) CSS a ser animadas.
transition-duration: En segundos. Por defecto el valor es 0.
transition-timing-function: Define ease (por defecto), linear, ease-in, ease-out y ease-in-out.
transition-delay: Pausa antes de iniciar animación.
![Page 152: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/152.jpg)
Editor online de timing de transiciones:
http://matthewlein.com/ceaser/
Comparación de timings:http://www.the-art-of-web.com/css/timing-function/
Valores de timing por defecto:http://www.w3.org/TR/css3-transitions/
![Page 153: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/153.jpg)
Animaciones solo con CSS!
Referencia oficial del W3C:http://dev.w3.org/csswg/css3-animations/
![Page 154: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/154.jpg)
Pasos:1. Defino keyframes (similar a “capa” en Flash)
2. Relaciono con objeto y defino propiedades
![Page 155: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/155.jpg)
1. Defino keyframes:
@-webkit-keyframes nombre { 0% {
transform:funcion(valor); }
20% { transform:funcion(valor);
}
100% { transform:funcion(valor);
} }
![Page 156: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/156.jpg)
2. Relaciono con objeto y defino propiedades:
#objeto { -webkit-animation-name: nombre; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out;}
![Page 157: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/157.jpg)
Conversor agrega prefijos
http://animationfillcode.com
![Page 158: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/158.jpg)
Soporte navegadoresy ejemplos
http://robertnyman.com/css3/
![Page 159: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/159.jpg)
Sencha Animator (+/- Flash 3)
http://www.sencha.com/products/animator/
Adobe Wallabyhttp://labs.adobe.com/downloads/wallaby.html
Adobe Edgelabs.adobe.com/technologies/edge/
![Page 160: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/160.jpg)
Estar pendientes de avances del
W3C:http://www.w3.org/Style/CSS/current-work
![Page 161: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/161.jpg)
APIs de JavaScript
(son algo para programadores, solo
daremos un vistazo para saber qué posibilidades
hay)
![Page 162: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/162.jpg)
Objetivos:
1) No depender de librerías (JQuery y similares) para funcionalidades comunes
2) Nuevas funcionalidades
![Page 163: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/163.jpg)
1. Geolocalización
2. Multimedia: Audio, Video, Canvas
3. Trabajo offline conLocal Storage, Web Storage,
Bases de Datos locales, Application Cache.
4. File System, Historial, WebSockets, Drag and Drop,
5. Hilos (Threads): Web Workers
6. Móviles: DeviceMotion, Viewport, Gestures, Touch
![Page 164: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/164.jpg)
Ver ejemplos:
http://www.html5demos.com
Usar técnicas de compatibilidad
también para JavaScript:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
![Page 165: Introducción a HTML5 y CSS3 - ArtMedia 2011](https://reader033.vdocuments.net/reader033/viewer/2022061112/54570d05af795997098b5c78/html5/thumbnails/165.jpg)
Conclusión:
Usar HTML5 y CSS3
mediante técnicasde compatibilidad
+Aplicar Diseño Adaptable
(responsive design)