html5 & css3
DESCRIPTION
HTML5 & CSS3. Hernán Beati @hernan_beati [email protected]. 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) - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/6.jpg)
La web es <---flexible--->(múltiples dispositivos, múltiples navegadores)
![Page 7: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/8.jpg)
Antes: W3C definía reglas, que luego los navegadores
iban aplicando
![Page 9: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/9.jpg)
Estructuras nuevasArticle: contenido fundamental,
independienteAside: contenido accesorio, no
fundamental Nav: barra de navegaciónSection: una sección o bloque (ex DIV)Header: introducción / orientación sobre
secciónFooter: final de una secciónHgroup: grupo de encabezadosFigure: contenido relacionado (imagen,
video, audio, canvas, gráficos, tablas estadísticas, etc.)
Figcaption: leyenda de un elemento Figure
![Page 10: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/11.jpg)
Secciones explícitas
ArticleAsideNavSection
![Page 12: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/18.jpg)
Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body.
Ver ejemplo
![Page 19: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/19.jpg)
![Page 20: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/21.jpg)
![Page 22: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/22.jpg)
Textos más semánticosMark: 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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/23.jpg)
<Etiquetas> que cambiaronA puede envolver varias cosas (bloques)Address pertenece a una sección, no solo a la
página enteraB estilo “diferente”, pero no más importante ni
negritaI cambio de entonación (en otro idioma,
tecnicismos)Strong es algo importante, aunque no se vea
distintoCite 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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/24.jpg)
nuevos type:
search, tel, url, email, number, range, datetime, datetime-local, date, month, week, time, color
![Page 25: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/27.jpg)
URL:
<input type="url">
Valida que sea una URL absoluta
![Page 28: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/34.jpg)
Week:<input type="week">
Mismos atributos que Date (min, max, step)Formato: 2011-W17
![Page 35: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/36.jpg)
Color: <input type="color">
Opera 11+
![Page 37: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/37.jpg)
Atributos nuevos
![Page 38: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/38.jpg)
Multiple
<input type="file" multiple="true">
Se usa en inputs de tipo file o email
![Page 39: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/39.jpg)
Autocomplete
<input type="text" autocomplete=“on”> (por default)
<input type="text" autocomplete=“off”>
![Page 40: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/40.jpg)
Campos obligatorios<form> <input type="email" id="casilla" required> <input type="submit" value="Subscribirse"></form>
![Page 41: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/41.jpg)
Autofocus
<input type="text" autofocus>
(a un solo campo, o solo tomará el último)
![Page 42: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/43.jpg)
Pattern<label> Nro. de Tarjeta de Crédito:<input pattern="[0-9]{13,16}"></label>
![Page 44: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/45.jpg)
No validar:
<form novalidate>
Para usar validación propia(con JavaScript)
![Page 46: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/46.jpg)
Compatibilizar formulariospara navegadores viejos
https://github.com/ryanseddon/H5F
![Page 47: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/47.jpg)
Multimedia HTML5:
Audio, video y animaciones
![Page 48: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/49.jpg)
Formatos soportados
.mp3 - Chrome y Safari.ogg - Firefox y Opera
¿Explorer? Fallback con Player .flv
![Page 50: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/53.jpg)
Posterposter="imagen_inicial.jpg“
Imagen que se ve antes de dar play
![Page 54: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/54.jpg)
Video con fallbackhttp://camendesign.com/code/video_for_everybody
![Page 55: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/56.jpg)
Ejemplos de Canvas
http://agent8ball.com/
http://www.s5-style.com/
![Page 57: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/57.jpg)
Libros sobre Canvas
![Page 58: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/58.jpg)
Asegurar soporte:
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
http://excanvas.sourceforge.net
![Page 59: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/60.jpg)
Hacemos un break!
Y seguimos con:
Posibilidades de CSS3
![Page 61: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/62.jpg)
1. Tipografías con @font-face
![Page 63: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/63.jpg)
![Page 64: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/64.jpg)
@font-face{ font-family:Mifuente; src: fuente.woff; }
#titulos{ font-family: Mifuente, arial, helvetica, sans-serif; }
![Page 65: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/66.jpg)
Columnas column-count: Cuántas column-width: Ancho column-gap: Huecocolumn-rule: Rayita
![Page 67: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/67.jpg)
.tres_columnas{ column-count: 3; column-width: 120px; column-gap: 24px;column-rule: 1px solid #999; }
![Page 68: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/68.jpg)
2. Colores en CSS3
RGBa HSL HSLa Degradés Transparencias
![Page 69: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/70.jpg)
¿Y Explorer?Comentarios Condicionales: <!--[if IE]> <link rel= “stylesheet”
href= “hojaexplorer.css”><![endif]-->
![Page 71: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/74.jpg)
Tono, saturación, brillo + Translucidez: HSLabody{ background-color: hsla(300,130%,65%,10%);}
HSL con translucidez Alpha
![Page 75: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/75.jpg)
Generador de Degradéshttp://gradients.glrzad.com
![Page 76: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/76.jpg)
![Page 77: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/77.jpg)
Bordes redondeados
#algo { border-radius:10px;
}
![Page 78: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/78.jpg)
Border-image#algo{border-image: url("borde.png") 12 repeat round; }
![Page 79: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/79.jpg)
Ejemplo de border-image http://www.w3.org/TR/css3-background/#border-images
![Page 80: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/80.jpg)
Ejemplo de Box-shadow
.sombra {box-shadow: 10px 10px 5px #999;}
![Page 81: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/81.jpg)
![Page 82: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/83.jpg)
Text-shadow
.sombra { text-shadow: 10px 10px 5px #999;}
![Page 84: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/84.jpg)
![Page 85: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/86.jpg)
http://mediaqueri.
es
![Page 87: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/88.jpg)
Media dentro de CSS @media screen { h1 { font-size: 2em; } }
![Page 89: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/94.jpg)
Criterio antiguo (actual!):
Sitio PC+ media queries = Sitio móvil??????
![Page 95: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/95.jpg)
La ausencia de detecciónde Media Queries debe ser el primer filtro!
![Page 96: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/96.jpg)
Mejor:
Sitio Móvil+ media queries = Sitio PC(Progressive enhancement)
![Page 97: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/98.jpg)
Compatibilidad para navegadores viejos:http://code.google.com/p/css3-mediaqueries-js
![Page 99: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/99.jpg)
TODOS los fallbacks:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 100: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/100.jpg)
Transformaciones, transiciones y
animaciones con CSS3
![Page 101: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/102.jpg)
Transformaciones
![Page 103: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/103.jpg)
Funciones posibles de transform:
1. scale2. rotate3. skew4. translate5. matrix
![Page 104: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/104.jpg)
1. Scaletransform: scale(1.5);/* Aumenta 50% ambos sentidos */
transform:scale(1.5,0.5);/* Aumenta 50% horizontal y reduce 50% vertical */
![Page 105: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/106.jpg)
2. Rotatetransform:rotate(45deg);
Positivo: sentido agujas del relojNegativo: contra reloj
![Page 107: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/107.jpg)
3. Skewtransform: skew(5deg,-5deg);
Por separado:skewX(grados)skewY(grados)
![Page 108: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/108.jpg)
4. Translatetransform: translate(30px,10px);
Por separado:translateX(distancia)translateY(distancia)
![Page 109: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/109.jpg)
Transiciones
Cambio de valor de una propiedad en un tiempo
![Page 110: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/113.jpg)
Animaciones solo con CSS!
Referencia oficial del W3C:http://dev.w3.org/csswg/css3-
animations/
![Page 114: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/html5/thumbnails/114.jpg)
Pasos:1. Defino keyframes (similar a “capa” en Flash)
2. Relaciono con objeto y defino propiedades
![Page 115: HTML5 & CSS3](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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](https://reader035.vdocuments.pub/reader035/viewer/2022081418/568155d0550346895dc3a01c/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;}