html5 & css3 hernán beati @hernan_beati [email protected]
TRANSCRIPT
![Page 2: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/2.jpg)
Nuevo en HTML5
Nuevas etiquetas semánticas(Navegadores 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 3: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/3.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 4: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/4.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 5: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/5.jpg)
Aceptar diferencias entre dispositivos...
...pero también aceptar diferencias entre navegadores y sus versiones.
En el fondo, el concepto clave es aplicar
Diseño Adaptable(responsive design)
![Page 6: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/6.jpg)
La web es <---flexible--->(múltiples dispositivos, múltiples navegadores)
![Page 7: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/7.jpg)
La web es MUY flexible:(¿Para cuál resolución diseñar? Para TODAS!!)
Y más!...
![Page 8: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/8.jpg)
Antes: W3C definía reglas, que luego los navegadores
iban aplicando
![Page 9: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/9.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 10: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/10.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 11: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/11.jpg)
Secciones explícitas
ArticleAsideNavSection
![Page 12: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/12.jpg)
1. Article
Es el contenido importante de cada página
Puede haber uno, o varios por página Ver ejemplo
![Page 13: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/13.jpg)
2. Aside
Es información secundaria, que podría no estar.
Ej.: Barras laterales, banners.Ver ejemplo
![Page 14: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/14.jpg)
3. Nav
Una barra de navegación.
Puede haber una, o varias por página
Ver ejemplo
![Page 15: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/15.jpg)
4. Section
Una sección explícita.
Puede haber una, o varias por página
Ver ejemplo
![Page 16: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/16.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 17: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/17.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 18: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/18.jpg)
Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body.
Ver ejemplo
![Page 19: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/19.jpg)
![Page 20: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/20.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 21: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/21.jpg)
![Page 22: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/22.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 23: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/23.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 24: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/24.jpg)
nuevos type:
search, tel, url, email, number, range, datetime, datetime-local, date, month, week, time, color
![Page 25: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/25.jpg)
Search:<input type="search">
-Botón “x” para “limpiar”-No permite saltos de línea-Degrada en “text”
![Page 26: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/26.jpg)
Tel:
<input type="tel">
-Puede incluir espacios o guiones-Degrada en “text”-Por ahora, es solo semántica
![Page 27: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/27.jpg)
URL:
<input type="url">
Valida que sea una URL absoluta
![Page 28: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/28.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 29: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/29.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 30: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/30.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 31: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/31.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 32: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/32.jpg)
Datetime:
<input type="datetime">
Fecha y hora en formato UTC:2011-05-19T10:55:59.001-03:00
![Page 33: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/33.jpg)
Month: <input type="month">
-Mismos atributos que Date (min, max, step)-Formato: 2011-05-¿vencimiento de tarjeta de crédito?
![Page 34: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/34.jpg)
Week:<input type="week">
Mismos atributos que Date (min, max, step)Formato: 2011-W17
![Page 35: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/35.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 36: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/36.jpg)
Color: <input type="color">
Opera 11+
![Page 37: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/37.jpg)
Atributos nuevos
![Page 38: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/38.jpg)
Multiple
<input type="file" multiple="true">
Se usa en inputs de tipo file o email
![Page 39: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/39.jpg)
Autocomplete
<input type="text" autocomplete=“on”> (por default)
<input type="text" autocomplete=“off”>
![Page 40: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/40.jpg)
Campos obligatorios
<form> <input type="email" id="casilla" required> <input type="submit" value="Subscribirse"></form>
![Page 41: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/41.jpg)
Autofocus
<input type="text" autofocus>
(a un solo campo, o solo tomará el último)
![Page 42: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/42.jpg)
Placeholder
<input type="text" placeholder="Escriba su nombre">
(tener en cuenta que el placeholder se esconde si hay autofocus)
![Page 43: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/43.jpg)
Pattern
<label> Nro. de Tarjeta de Crédito:<input pattern="[0-9]{13,16}"></label>
![Page 44: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/44.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 45: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/45.jpg)
No validar:
<form novalidate>
Para usar validación propia(con JavaScript)
![Page 46: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/46.jpg)
Compatibilizar formulariospara navegadores viejos
https://github.com/ryanseddon/H5F
![Page 47: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/47.jpg)
Multimedia HTML5:
Audio, video y animaciones
![Page 48: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/48.jpg)
Audio<audio controls="controls">
<source src=“x.ogg" type="audio/ogg" /> <source src=“x.mp3" type="audio/mpeg" />
Contenido alternativo.
</audio>
![Page 49: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/49.jpg)
Formatos soportados
.mp3 - Chrome y Safari.ogg - Firefox y Opera
¿Explorer? Fallback con Player .flv
![Page 50: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/50.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 51: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/51.jpg)
Formatos soportados
.mp4 – Chrome 6, Safari 5, Explorer 9
.ogg y WebM – Chrome, Firefox y Opera
¿Explorer viejo? Fallback con .flv
![Page 52: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/52.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 53: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/53.jpg)
Poster
poster="imagen_inicial.jpg“
Imagen que se ve antes de dar play
![Page 54: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/54.jpg)
Video con fallbackhttp://camendesign.com/code/video_for_everybody
![Page 55: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/55.jpg)
Animaciones “a la HTML5” (sin Flash)
3 tecnologías:
1) Canvas (bitmap)2) SVG (vectorial) -poco soporte-3) CSS3 Animations
![Page 56: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/56.jpg)
Ejemplos de Canvas
http://agent8ball.com/
http://www.s5-style.com/
![Page 57: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/57.jpg)
Libros sobre Canvas
![Page 58: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/58.jpg)
Asegurar soporte:
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
http://excanvas.sourceforge.net
![Page 59: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/59.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 60: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/60.jpg)
Hacemos un break!
Y seguimos con:
Posibilidades de CSS3
![Page 61: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/61.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 62: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/62.jpg)
1. Tipografías con @font-face
![Page 63: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/63.jpg)
![Page 64: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/64.jpg)
@font-face{ font-family:Mifuente; src: fuente.woff; }
#titulos{ font-family: Mifuente, arial, helvetica, sans-serif; }
![Page 65: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/65.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 66: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/66.jpg)
Columnas
column-count: Cuántas column-width: Ancho column-gap: Huecocolumn-rule: Rayita
![Page 67: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/67.jpg)
.tres_columnas{ column-count: 3; column-width: 120px; column-gap: 24px;column-rule: 1px solid #999; }
![Page 68: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/68.jpg)
2. Colores en CSS3
RGBa HSL HSLa Degradés Transparencias
![Page 69: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/69.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 70: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/70.jpg)
¿Y Explorer?Comentarios Condicionales: <!--[if IE]> <link rel= “stylesheet”
href= “hojaexplorer.css”><![endif]-->
![Page 71: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/71.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 72: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/72.jpg)
Formato startColorstr
AARRGGBBAA = Alpha, 00 transparente, FF
sólidoRR = Red
GG = GreenBB = Blue
Conversor RGB a Hexadecimal:http://www.javascripter.net/faq/rgbtohe
x.htm
![Page 73: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/73.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 74: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/74.jpg)
Tono, saturación, brillo + Translucidez: HSLa
body{ background-color: hsla(300,130%,65%,10%);}
HSL con translucidez Alpha
![Page 75: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/75.jpg)
Generador de Degradés
http://gradients.glrzad.com
![Page 76: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/76.jpg)
![Page 77: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/77.jpg)
Bordes redondeados
#algo { border-radius:10px;
}
![Page 78: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/78.jpg)
Border-image
#algo{border-image: url("borde.png") 12 repeat round; }
![Page 79: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/79.jpg)
Ejemplo de border-image http://www.w3.org/TR/css3-background/#border-images
![Page 80: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/80.jpg)
Ejemplo de Box-shadow
.sombra {box-shadow: 10px 10px 5px #999;}
![Page 81: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/81.jpg)
![Page 82: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/82.jpg)
Sombra en Explorer
.sombra { zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);}
![Page 83: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/83.jpg)
Text-shadow
.sombra { text-shadow: 10px 10px 5px #999;}
![Page 84: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/84.jpg)
![Page 85: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/85.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 86: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/86.jpg)
http://mediaqueri.
es
![Page 87: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/87.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 88: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/88.jpg)
Media dentro de CSS
@media screen { h1 { font-size: 2em; } }
![Page 89: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/89.jpg)
Característicasdetectables
width, height, device-width, device-height,orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
![Page 90: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/90.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 91: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/91.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 92: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/92.jpg)
Detección de tamaño
@media screen and (min-width: 400px) and (max-width: 2900px) { /* solo leerán esto en PCs */}
![Page 93: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/93.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 94: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/94.jpg)
Criterio antiguo (actual!):
Sitio PC+ media queries = Sitio móvil??????
![Page 95: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/95.jpg)
La ausencia de detecciónde Media Queries debe ser
el primer filtro!
![Page 96: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/96.jpg)
Mejor:
Sitio Móvil+ media queries = Sitio PC
(Progressive enhancement)
![Page 97: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/97.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 98: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/98.jpg)
Compatibilidad para navegadores viejos:
http://code.google.com/p/css3-mediaqueries-js
![Page 99: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/99.jpg)
TODOS los fallbacks:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 100: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/100.jpg)
Transformaciones, transiciones y
animaciones con CSS3
![Page 101: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/101.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 102: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/102.jpg)
Transformaciones
![Page 103: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/103.jpg)
Funciones posibles de transform:
1. scale2. rotate3. skew4. translate5. matrix
![Page 104: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/104.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 105: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/105.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 106: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/106.jpg)
2. Rotate
transform:rotate(45deg);
Positivo: sentido agujas del relojNegativo: contra reloj
![Page 107: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/107.jpg)
3. Skew
transform: skew(5deg,-5deg);
Por separado:skewX(grados)skewY(grados)
![Page 108: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/108.jpg)
4. Translate
transform: translate(30px,10px);
Por separado:translateX(distancia)translateY(distancia)
![Page 109: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/109.jpg)
Transiciones
Cambio de valor de una
propiedad en un tiempo
![Page 110: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/110.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 111: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/111.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 112: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/112.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 113: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/113.jpg)
Animaciones solo con CSS!
Referencia oficial del W3C:http://dev.w3.org/csswg/css3-
animations/
![Page 114: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/114.jpg)
Pasos:1. Defino keyframes (similar a “capa” en Flash)
2. Relaciono con objeto y defino propiedades
![Page 115: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/115.jpg)
1. Defino keyframes:
@-webkit-keyframes nombre { 0% {
transform:funcion(valor); }
20% { transform:funcion(valor);
}
100% { transform:funcion(valor);
} }
![Page 116: HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar](https://reader036.vdocuments.pub/reader036/viewer/2022062410/5665b4911a28abb57c923d02/html5/thumbnails/116.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;}