Professional Documents
Culture Documents
&
CSS3
Hernn Beati
Adaptado por: Yensi Vega
Web = HTML
Lenguaje universal, base de la Web
HTML5
Nuevo en HTML5
Nuevas etiquetas semnticas
Video, audio y animacin sin plugins
(Acceso universal: cualquier dispositivo, cualquier
navegador, cualquier versin)
Nuevo en CSS3
Usar cualquier tipografa
Efectos decorativos: sombras, RGBa,
bordes redondeados, gradientes,
(menor uso de imgenes)
Movimientos: transformaciones,
transiciones, animaciones
(menor uso de JavaScript)
Nuevo en Scripts
Animaciones con Canvas
Drag & Drop
Geolocalizacin 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 (actualizacin en vivo, tipo Ajax)
Hilos (threads) Web Workers
Pero...cul es
la pregunta?
(que todos nos estamos
haciendo con HTML5 y CSS3)
Ya se puede usar
en todos los
navegadores!?
Naaahh...
El principal:
Esperar que la
perfeccin total se
haga realidad un da.
El Da D nunca existir
Y entonces
cul es la respuesta?
Ya se puede usar!?
Versin abreviada:
Versin explicada:
Se puede usar
mediante tcnicas
de compatibilidad
Principales tcnicas:
Mejora progresiva
(Progressive enhancement).
Degradacin elegante
(Graceful degradation).
Mejora regresiva
(Regressive enhancement).
1. Mejora progresiva
(Progressive enhancement)
Despus de crear una pgina
bsica, que funcione en
Explorer, agreguemos
funcionalidades extra para
navegadores ms potentes,
usando selectores avanzados.
Dave Shea (2003)
www.csszengarden.com
2. Degradacin elegante
(Graceful degradation)
Disear para los navegadores ms
potentes y mviles, haciendo uso
pleno de HTML5 y CSS3, asumiendo que
no se va a ver idntico.
Tercera posicin:
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 caracterstica esttica).
Se les llama shims, polyfills, scripts
compatibilizadores, etc.
Por ejemplo: Modernizr, Selectivizr, Yepnope.
Diseo Adaptable
(responsive design)
Aceptar diferencias entre dispositivos...
...pero tambin aceptar diferencias
entre navegadores y sus versiones.
NO BUSCAR UNIFORMIDAD!!!
Entonces,
qu debo hacer
para usar
HTML5 y CSS3 ya?
Cambiar la forma
de pensar
el diseo web.
Nuestro concepto
de diseo web no
puede seguir siendo
el mismo que en
diseo grfico.
La web es <---flexible--->
(mltiples dispositivos,
mltiples navegadores)
Y ms!...
!!!?
EL DISEO NO ES ARTE
La pregunta del
diseo web debe ser:
puedo hacer las tareas
que vine a hacer al sitio?
(Con cualquier dispositivo,
con cualquier navegador y versin)
Deberemos explicar a
clientes y jefes
que cada usuario
ver levemente distinto
cada sitio web
Porque es inevitable
y no tiene nada de malo!
Diseo adaptable = Responsive design
Resumiendo:
(respuestas a la pregunta)
S, se puede usar HTML5 y CSS3 hoy!
Aplicando tcnicas de compatibilidad:
Mejora progresiva, Degradacin elegante o
Mejora regresiva.
Debemos aceptar la flexibilidad de la web, y
cambiar nuestras expectativas de diseo.
HTML5:
Primer estndar
vivo
Ahora: navegadores
innovan, y W3C lo
agrega al estndar
Es lo lgico...
Conclusin:
HTML5 es el estndar
ms consensuado
de la historia!
Todos lo apoyan...
Estructuras nuevas
Article: contenido fundamental, independiente
Aside: contenido accesorio, no fundamental
Nav: barra de navegacin
Section: una seccin o bloque (ex DIV)
Header: introduccin / orientacin sobre seccin
Footer: final de una seccin
Hgroup: grupo de encabezados
Figure: contenido relacionado (imagen, video,
audio, canvas, grficos, tablas estadsticas, 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>
<img src=x />
<p>Esta foto habla de...</p>
</div>
<figure>
<img src=x />
<figcaption><p>Esta foto
habla de...</p></figcaption>
</figure>
An ms significado?
Extensibilidad con
Microdata y
Microformatos
Google debe entender cul contenido es
importante y cul no lo es...
Secciones explcitas
Article
Aside
Nav
Section
1. Article
Es el contenido importante
de cada pgina
Puede haber uno, o varios por pgina
Ver ejemplo
2. Aside
Es informacin secundaria,
que podra no estar.
Ej.: Barras laterales, banners.
Ver ejemplo
3. Nav
Una barra de navegacin.
Puede haber una, o varias por pgina
Ver ejemplo
4. Section
Una seccin explcita.
Puede haber una, o varias por pgina
Ver ejemplo
Ver ejemplo
Ver ejemplo
Ver ejemplo
Figure
No es solo para fotos (diagramas, SVG,
MathML, listas de cdigo) que puedan ser
referenciados (apndice, ndice, etc.)
<figure>
<figcaption>Bla</figcaption>
<img src="logo.jpg" />
</figure>
Ver ejemplo
Textos ms semnticos
Mark: resultados resaltados (en vez de
span, em o strong)
Time: Hora, Fecha, o ambas cosas
Meter: Medidas dentro de una escala
Progress: Medidas dinmicas,
cambiantes
An ms significado?
Extensibilidad con
Microdata y
Microformatos
Google debe entender cul contenido es
importante y cul 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">Espaa</span>
<span class="postal-code">33203</span>
</span>
</div>
Ver ejemplo
Validacin!
Soluciones HTML5:
13 nuevos type:
search, tel, url, email,
number, range, datetime,
datetime-local, date, month,
week, time, color
Search:
<input type="search">
Tel:
<input type="tel">
-Puede incluir espacios o guiones
-Degrada en text
-Por ahora, es solo semntica
URL:
<input type="url">
Email:
<input type="email">
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, ms
signo y potencia)
Range:
<input type="range"
min="0" max="100" step="10"
value="50">
Usar si no importa la precisin del nmero,
sino la usabilidad.
Date:
<input type="date">
Datetime:
<input type="datetime">
Month:
<input type="month">
Week:
<input type="week">
Time:
<input type="time" min="11:30"
max="23:30" step="600">
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>
<input type="text"
autocomplete=off>
(por default)
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 Crdito:
<input pattern="[0-9]{13,16}">
</label>
Datalist
(auto-suggest)
No validar:
<form novalidate>
Para usar validacin 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
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
Valores de Preload
preload="none" (no descarga nada)
preload="metadata" (no baja el video,
pero s sus metadatos -tamao, etc.-)
preload="auto" (lo baja por adelantado)
preload="" (igual a auto, lo baja)
Si no es declarado, cada navegador decide, aunque
especificacin dice que debe aplicar metadata.
Poster
poster="imagen_inicial.jpg
Imagen que se ve antes de dar play
Animaciones
a la HTML5 (sin Flash)
3 tecnologas:
1) Canvas (bitmap)
2) SVG (vectorial) -poco soporte3) CSS3 Animations
Ejemplos de Canvas
http://agent8ball.com/
http://www.s5-style.com/
Asegurar soporte:
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
http://excanvas.sourceforge.net