HTML5 & CSS3
116
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 Presentation
Transcript of HTML5 & CSS3
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)
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)
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
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)
La web es <---flexible--->(múltiples dispositivos, múltiples navegadores)
La web es MUY flexible:(¿Para cuál resolución diseñar? Para TODAS!!)
Y más!...
Antes: W3C definía reglas, que luego los navegadores
iban aplicando
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
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>
Secciones explícitas
ArticleAsideNavSection
1. Article
Es el contenido importante de cada página
Puede haber uno, o varios por página Ver ejemplo
2. Aside
Es información secundaria, que podría no estar.
Ej.: Barras laterales, banners.Ver ejemplo
3. Nav
Una barra de navegación.
Puede haber una, o varias por página
Ver ejemplo
4. Section
Una sección explícita.
Puede haber una, o varias por página
Ver ejemplo
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
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
Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body.
Ver ejemplo
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
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
<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
nuevos type:
search, tel, url, email, number, range, datetime, datetime-local, date, month, week, time, color
Search:<input type="search">
-Botón “x” para “limpiar”-No permite saltos de línea-Degrada en “text”
Tel:
<input type="tel">
-Puede incluir espacios o guiones-Degrada en “text”-Por ahora, es solo semántica
URL:
<input type="url">
Valida que sea una URL absoluta
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.
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)
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.
Date: <input type="date">
Puede llevar min, max (rango permitido) y step (por default, de a 1 día)Formato: 2011-09-19
Datetime:
<input type="datetime">
Fecha y hora en formato UTC:2011-05-19T10:55:59.001-03:00
Month: <input type="month">
-Mismos atributos que Date (min, max, step)-Formato: 2011-05-¿vencimiento de tarjeta de crédito?
Week:<input type="week">
Mismos atributos que Date (min, max, step)Formato: 2011-W17
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
Color: <input type="color">
Opera 11+
Atributos nuevos
Multiple
<input type="file" multiple="true">
Se usa en inputs de tipo file o email
Autocomplete
<input type="text" autocomplete=“on”> (por default)
<input type="text" autocomplete=“off”>
Campos obligatorios<form> <input type="email" id="casilla" required> <input type="submit" value="Subscribirse"></form>
Autofocus
<input type="text" autofocus>
(a un solo campo, o solo tomará el último)
Placeholder
<input type="text" placeholder="Escriba su nombre">
(tener en cuenta que el placeholder se esconde si hay autofocus)
Pattern<label> Nro. de Tarjeta de Crédito:<input pattern="[0-9]{13,16}"></label>
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>
No validar:
<form novalidate>
Para usar validación propia(con JavaScript)
Compatibilizar formulariospara navegadores viejos
https://github.com/ryanseddon/H5F
Multimedia HTML5:
Audio, video y animaciones
Audio<audio controls="controls">
<source src=“x.ogg" type="audio/ogg" /> <source src=“x.mp3" type="audio/mpeg" />
Contenido alternativo.
</audio>
Formatos soportados
.mp3 - Chrome y Safari.ogg - Firefox y Opera
¿Explorer? Fallback con Player .flv
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>
Formatos soportados
.mp4 – Chrome 6, Safari 5, Explorer 9
.ogg y WebM – Chrome, Firefox y Opera
¿Explorer viejo? Fallback con .flv
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”.
Posterposter="imagen_inicial.jpg“
Imagen que se ve antes de dar play
Video con fallbackhttp://camendesign.com/code/video_for_everybody
Animaciones “a la HTML5” (sin Flash)
3 tecnologías:
1) Canvas (bitmap)2) SVG (vectorial) -poco soporte-3) CSS3 Animations
Ejemplos de Canvas
http://agent8ball.com/
http://www.s5-style.com/
Libros sobre Canvas
Asegurar soporte:
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
http://excanvas.sourceforge.net
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
Hacemos un break!
Y seguimos con:
Posibilidades de CSS3
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.
1. Tipografías con @font-face
@font-face{ font-family:Mifuente; src: fuente.woff; }
#titulos{ font-family: Mifuente, arial, helvetica, sans-serif; }
@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 */}
Columnas column-count: Cuántas column-width: Ancho column-gap: Huecocolumn-rule: Rayita
.tres_columnas{ column-count: 3; column-width: 120px; column-gap: 24px;column-rule: 1px solid #999; }
2. Colores en CSS3
RGBa HSL HSLa Degradés Transparencias
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
¿Y Explorer?Comentarios Condicionales: <!--[if IE]> <link rel= “stylesheet”
href= “hojaexplorer.css”><![endif]-->
Dentro de hojaexplorer.css:
.translucido { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); /* mismo valor de inicio y fin / zoom: 1; }
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
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
Tono, saturación, brillo + Translucidez: HSLabody{ background-color: hsla(300,130%,65%,10%);}
HSL con translucidez Alpha
Generador de Degradéshttp://gradients.glrzad.com
Bordes redondeados
#algo { border-radius:10px;
}
Border-image#algo{border-image: url("borde.png") 12 repeat round; }
Ejemplo de border-image http://www.w3.org/TR/css3-background/#border-images
Ejemplo de Box-shadow
.sombra {box-shadow: 10px 10px 5px #999;}
Sombra en Explorer
.sombra { zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);}
Text-shadow
.sombra { text-shadow: 10px 10px 5px #999;}
Media queries(consultas sobre el medio)
Detectan características de un dispositivo, para aplicarle distintos estilos
http://www.w3.org/TR/css3-mediaqueries
http://mediaqueri.
es
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">
Media dentro de CSS @media screen { h1 { font-size: 2em; } }
Característicasdetectables
width, height, device-width, device-height,orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
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)">
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">
Detección de tamaño
@media screen and (min-width: 400px) and (max-width: 2900px) { /* solo leerán esto en PCs */}
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">
Criterio antiguo (actual!):
Sitio PC+ media queries = Sitio móvil??????
La ausencia de detecciónde Media Queries debe ser el primer filtro!
Mejor:
Sitio Móvil+ media queries = Sitio PC(Progressive enhancement)
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">
Compatibilidad para navegadores viejos:http://code.google.com/p/css3-mediaqueries-js
TODOS los fallbacks:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Transformaciones, transiciones y
animaciones con CSS3
Transformación = “estática”, cambia valor
de una propiedad
Transición = “dinámica”, cambia entre
dos estados
Animación = “serie de” transiciones, con timing
Transformaciones
Funciones posibles de transform:
1. scale2. rotate3. skew4. translate5. matrix
1. Scaletransform: scale(1.5);/* Aumenta 50% ambos sentidos */
transform:scale(1.5,0.5);/* Aumenta 50% horizontal y reduce 50% vertical */
Escalar en Explorer <9
zoom: 1; /* Siempre al principio, para activar hasLayout */
/* Ahora sí, reducimos o ampliamos */zoom: 1.5; /* Aumenta tamaño */
2. Rotatetransform:rotate(45deg);
Positivo: sentido agujas del relojNegativo: contra reloj
3. Skewtransform: skew(5deg,-5deg);
Por separado:skewX(grados)skewY(grados)
4. Translatetransform: translate(30px,10px);
Por separado:translateX(distancia)translateY(distancia)
Transiciones
Cambio de valor de una propiedad en un tiempo
Ejemplo:
a { color: white; background: red;}
a:hover {color: yellow; background: blue;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;
}
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.
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/
Animaciones solo con CSS!
Referencia oficial del W3C:http://dev.w3.org/csswg/css3-
animations/
Pasos:1. Defino keyframes (similar a “capa” en Flash)
2. Relaciono con objeto y defino propiedades
1. Defino keyframes:
@-webkit-keyframes nombre { 0% {
transform:funcion(valor); }
20% { transform:funcion(valor);
}
100% { transform:funcion(valor);
} }
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;}
