HTML5 & CSS3

Hernán Beati
@hernan_beati hern
[email protected]
 Hernán Beati
Desarrollador Web + 12 años

+ coautor con
Autor libro: Maximiliano Firtman

Fundador de:

Docente en:
 Web = HTML
Lenguaje universal, base de la Web
HTML 4.01 = 1999
XHTML 1.0 =
2000
XHTML 1.1 =
2001 XHTML 2
=?
¿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
+ + + ...
 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)
 Nuevo en CSS3
Usar 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
Nuevo en Scripts
Animaciones 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)
Pero...¿cuál es
“la” pregunta?
(que todos nos estamos
haciendo con HTML5 y CSS3)
¿Ya se puede
usar!?
“Naaahh...
¡si en Explorer
no anda!”
Esa duda se basa en
rumores*

*(conceptos erróneos)
El principal:

Esperar que la
perfección total se
haga realidad un
día.
El “Día D” nunca existirá…
“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.
“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.
 “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á.
“...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!!
 ¿Y entonces
cuál es la respuesta?

¿Ya se puede
usar!?
Versión abreviada:

Sí
 Versión explicada:

Se puede usar
mediante técnicas
de
compatibilidad
 Principales técnicas:

Mejora progresiva
(Progressive enhancement).
Degradación elegante
(Graceful degradation).
Mejora regresiva
(Regressive enhancement).
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
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).
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!)

Tercera posición:

3. Mejora Regresiva:
Complementar al navegador
 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.
En el fondo, el concepto clave es aplicar

Diseño
Adaptable
(responsive design)
 Aceptar diferencias entre dispositivos...
 ...pero también aceptar
diferencias entre navegadores y
sus versiones.

NO BUSCAR UNIFORMIDAD!!!
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…)
Entonces,

¿qué debo hacer

para usar
HTML5 y CSS3
ya?
Cambiar la forma
de pensar
el diseño web.
 Nuestro concepto
de diseño web
no
puede seguir siendo
el mismo que en
diseño “gráfico”.
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!...
“...pero yo quiero que mis
diseños se vean idénticos en
todos los navegadores y en
todos los dispositivos...”

¿!!!?
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
 “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)
 Deberemos explicar a
clientes y jefes
que cada usuario
“verá levemente
distinto” cada sitio
web
¡Porque es inevitable
y no tiene nada de
malo!
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.
 HTML5:
Primer estándar
“vivo”
Antes: W3C definía
reglas, que luego los
navegadores iban
aplicando
Ahora: navegadores
innovan, y W3C lo
agrega al estándar

Es lo lógico...
 Conclusión:
HTML5 es el estándar
más consensuado
de la historia!

Todos lo apoyan...
¿Objetivo de nuevas etiquetas?

Usar etiquetas con

significado
Google debe entender cuál contenido es
importante y cuál no lo es.
Estructuras nuevas
 Article: 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
Ejemplos:
Antes: Ahora:
 <div id=“wrapper”></div>  <section></section>
 <div id=“noticia”></div>  <article></article>
 <div id=“banners”></div>  <aside></aside>
 <div id=“header”></div>  <header></header>
 <div id=“footer”></div>  <footer></footer>
 <div id=“nav”></div>  <nav></nav>
 <div id=“foto”>  <figure>
<img src=“x” /> <img src=“x” />
<p>Esta foto habla de...</p> <figcaption><p>Esta foto
</div> habla de...</p></figcaption>
</figure>
Secciones explícitas

Article
Aside
Nav
Section
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
>
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>
Headers & Footers
Pertenecen a secciones
(article, aside, nav y section)
además del body.

Ver ejemplo
Titulo dentro del header de la Pagina

'l'ftulo dentr o del header del at11culo

@ he rnan_be he rnan @ s abe rweb .co m .

ati ar
Figure
No 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
_ Este es el_fi_gcaption arriba de la_foto

HTML

CII

En cambio aqui esta abajo

Compatibilizador para Explorer
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
<Etiquetas> que cambiaron

 A 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
 ¿Aún más significado?

Extensibilidad con
Microdata y
Microformatos
“Google debe entender cuál contenido es
importante y cuál no lo es...”
http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897

Datos personales
Opiniones / revisiones
Contactos
Productos
Empresas
Recetas
Eventos
Video
<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
¿Principal dificultad de los
formularios?

Validación
!
Soluciones HTML5:

Nuevos tipos de input

y nuevos atributos
auto-validables
13 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ás
signo 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)
Patter
n
<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
formularios
para 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

Vide
o
<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 Preload
preload="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”.
Poste
r
poster="imagen_inicial.jpg“

Imagen que se ve antes de dar play

Video con fallback
http://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
 exljbris Font Foundry
F re e f o n t s Well crafted (free) fonts by Jos Buivenga
Delicious Welcome to Jos Buivenga's e x l jbr i s F o nt F o u n d r y. Here you can find my [free] funts.
Delicious , Fontin , Fontin Sans, Ta llys , Fertigo Pr o, Dia v lo, Anivers , Mu seo, Museo Sa ns , Museo
Diavlo Sans Rou nded , Museo Sla b, Ca llu na , Calluna Sans & Geotica .

Fontin What's in this difficult to read and pronounce name? An ex libris is a label bearing the owner's
name that is pasted usually on the inside cover of a book. My initials are ljb, so I that's how I
Fontin Sans came to my label: exljbris.
Tallys

S o m e f re e Museo Sans Rounded released!

SAN
Anivers

Calluna
Calluna

FRANCISCO
Sans Fertigo

Pro
Fertigo Script

Geotica

Museo

Museo

Sans

Museo Slab

None
f re e
@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: Hueco
column-rule:
Rayita
.
tres_columnas{ colu
mn-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=#9900
0050,endColorstr=#99000050);
/* mismo valor de inicio y fin /
zoom: 1;
}
 Formato startColorstr
AARRGGBB
AA = Alpha, 00 transparente, FF
sólido RR = Red
GG = Green
BB = Blue
Conversor RGB a
Hexadecimal:
http://www.javascripter.net/fa
q/rgbtohex.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://serenn

u.com/colour/hsltorgb.php
Tono, saturación, brillo +
Translucidez: HSLa

body{
background-color:
hsla(300,130%,65%,10%);
}

HSL con translucidez Alpha

Generador de Degradés
http://gradients.glrzad.com
@ hernan _beati he m an @ s abe rweb.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;
}
 Este texto
es e
•
r1mero

.-------
.·u , Hernan · · · @ he rnan_be he rnan @ sabe
Beati
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;
}
 Este texto
es el
pr1 •

mero

!l 0

/al
§t9JP)initIDl/al
(g}il,l( tdlt9
liflTil(g/61
U)
·• · @ hernan_beati hem an@ s abe
Media queries
(consultas sobre el medio)

Detectan características de un dispositivo,

para aplicarle distintos estilos

http://www.w3.org/TR/css3-mediaqueries
http://medi
a queri.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ística
s detectables

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ón
de 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. scale
2. rotate
3. skew
4. translate
5. matrix
1. Scale
transform: 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. Rotate
transform:rotate(45deg);

Positivo: sentido agujas del reloj

Negativo: contra reloj
3. Skew
transform: skew(5deg,-5deg);

Por separado:
skewX(grados)

skewY(grados)
4.
Translate
transform: 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
: . Defino keyframes
1
(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;
}
 Conversor
agrega prefijos

http://animationfillcode.com
Soporte navegadores
y ejemplos

http://robertnyman.com/css3/
Sencha Animator (+/- Flash 3)
http://www.sencha.com/products/animator
/

Adobe Wallaby
http://labs.adobe.com/downloads/wallaby.html

Adobe Edge
labs.adobe.com/technologies/edge/
 Estar pendientes de
avances del W3C:
http://www.w3.org/Style/CSS/current-work
 APIs de JavaScript
(son algo para programadores,
solo daremos un vistazo para
saber qué posibilidades
hay)
Objetivos:

1)No depender de librerías

(JQuery y similares) para
funcionalidades comunes

2) Nuevas funcionalidades
 1. Geolocalización

2. Multimedia: Audio, Video, Canvas

3.Trabajo offline con
Local 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
 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
 Conclusión:

Usar HTML5 y CSS3

mediante técnicas
de
compatibilidad
+Aplicar Diseño
HTML5 & CSS3

Hernán Beati
@hernan_beati
[email protected]