HTML5, AHORA Bogo<Dev>
¿QUIÉN SOY YO? • @julian_amaya
// julian@monoku.com
• http://flavors.me/julian_amaya • Fundador
de monoku.com + otras
• Google API • Fanboy
Guru
de Google y 37Signals
• Desarrollador
especializado en BackEnd y líder de proyectos
2 COSAS RANDOM ANTES DE EMPEZAR
• Bogo<Dev/> • La
web y yo.
es mejor que Bogo<Dev> , no?
OBJETIVOS
• Difundir
la palabra del bien: HTML y los estándares.
cómo pueden empezar ya a aplicar las nuevas herramientas que ofrece HTML5 y CSS3 en su día a día
• Mostrarles
• Mostrarles
algunos ejemplos hechos en Bogotá
CONTENIDO
¿Qué es realmente HTML5?
HTML5 y CSS3 para el día a día
<!DOCTYPE html> <html> <head> <title>HTML5</title> </head> <body>Hola, ¿Esto es HTML5?</body> </html>
¿QUÉ ES REALMENTE HTML5?
NO ES SOLO HTML!
• Conjunto
de estándares y tecnologías que permiten la siguiente evolución de la web como plataforma.
HTML + CSS + JS
SEMANTICS
FORMS
• Soporte • Se
para nuevos tipos de campo en formularios
puede decir cuando es “required”
• http://brucelawson.co.uk/tests/html5-forms-demo.html
MULTIMEDIA
VIDEO • Permite
la reproducción y manipulación de videos sin necesidad de plugins.
• DEMOS: • youtube.com • http://pepijnniesten.nl/
html5_css3_reflection_video_background
SALGAMOS DE ESTA DISCUSIÓN DE UNA VEZ
•
Flash vs. HTML5
AUDIO • Permite
la reproducción e interacción con audio sin necesidad de plugins. SOLO FIREFOX
• DEMOS AUDIO
(+ Canvas):
• http://cubicvr.org/CubicVR.js/bd3/BeatDetektor1HD.html • http://weare.buildingsky.net/processing/dsp.js/examples/fft.html
PERFORMANCE + CORE
WEBWORKERS (Ó THREADS) • Permite
tener páginas ejecutando código en otro hilo, para poder realizar operaciones complejas sin bloquear la UI
• http://www.robodesign.ro/coding/html5-demo-video-
histogram/index-web-worker.html
• http://htmlfive.appspot.com/static/tracker1.html
(FF)
NOTIFICACIONES • Se
pueden habilitar notificaciones para que las aplicaciones puedan correr en background pero notificar a usuarios de eventos.
• http://www.onepixelahead.com/demos/html5Notifications/
html5_notification_test.html
• Gmail, alguien?
Calendar?
3D, GRAPHICS & EFFECTS
CANVAS • Canvas
es una etiqueta o elemento en HTML que permite la generación de gráficos en forma dinámica por medio de programación dentro de una página.
• http://wall.sipoteburrito.com/ • http://www.lucidchart.com • Obviamente
el video de Arcade Fire.
SVG
• Permite
el manejo de gráficos en vectores.
• http://g.raphaeljs.com/piechart2.html • Raphael! • http://www.zemoga.com/
WEBGL
• OK, este
no está listo aún. Pero es demasiado cool.
• http://media.tojicode.com/q3bsp/
ACCESO AL DISPOSITIVO
GEOLOCALIZACIÓN
• Geolocalización • Permite
permite conocer la ubicación del usuario
acceder a los diferentes recursos de la maquina
DISPOSITIVOS (Mﾃ天IL)
窶｢ Ok, esta
no estﾃ｡ lista pero es el futuro!!
窶｢ http://www.youtube.com/watch?
v=L1XqvLOi-3I&feature=player_embedded
ALMACENAMIENTO
APP CACHE
• Permite
usar los sitios web sin necesidad de conexión
nuevo: Permite usar los sitios web sin necesidad de conexión
• De
• http://htmlfive.appspot.com/static/stickies.html
LOCAL STORAGE
• Permite
tener un mapa de datos sencillo
• get(‘key’) • set(‘key’,value) • http://conosur.com.co/domicilios/
INDEXED DB
â&#x20AC;˘ Permite
tener una base de datos en el browser !!!!!!
â&#x20AC;˘ https://developer.mozilla.org/en-US/demos/detail/gsd-with-
indexeddb/launch
ARCHIVOS
• Soporte
para drag-in
• Soporte
para drag-out (solo Chrome)
CONECTIVIDAD
WEBSOCKETS
• Permite
mantener una conexión con el servidor y transmitir datos de texto
• Real
time WEB!
CSS3
FUENTES • Desde
IE7 ya hay soporte para fuentes
• Servicios
como typekit ayudan a la inclusión de fuentes (y manejo de licencias)
• Demos: • http://monoku.com • http://www.voltagefashionamplified.com/
MANEJO DE TEXTO
• Text
wrapping
• Manejo
de columnas (!!!!)
• Sombras • Bordes
BORDES REDONDEADOS
• Finalmente, bordes
hacks.
redondeados sin necesidad de imágenes,
• http://ie.microsoft.com/testdrive/HTML5/BorderRadius/
Default.html
TRANSICIONES
• Transiciones
entre propiedades
• Aceleración
por hardware en desktop (algunos) y móvil
• http://slides.html5rocks.com/#css-transitions
TRANSFORMACIONES
• Rotar, escalar, zoom • http://slides.html5rocks.com/#css-transformss
Y EL FUTURO...
OTROS
• Speech • Device
input: http://slides.html5rocks.com/#speech-input
Orientarion: http://slides.html5rocks.com/#slideorientation
•Y
más!
HTML5 PARA EL DÍA A DÍA
LA REALIDAD Browser Market Share Marzo 2.011
LA REALIDAD Browser Market Share Marzo 2.010 a Marzo 2.011
FUCK IT.
¿POR QUÉ?
• IE6
NO SE DEBE SOPORTAR MÁS. Ese 11% son usuarios corporativos que no pueden upgradear, y ya se acostumbran a no poder navegar bien.
¿POR QUÉ? • Lo
más probable es que IE9 “pronto” aumente considerablemente su market share. Y con actualizaciones automáticas, IE por fin podrá mantenerse al día.
• Para • Los
IE6, 7 y 8, existe Google Chrome Frame.
otros navegadores con updates automáticos suelen estar al día.
ENTONCES...
• Degrade • Revisar
gracefully es la mejor opción
caniuse.com y ver cómo cada día mejora el soporte.
CREANDO MAGIA • Usando
librerías podemos hacer uso también de la magia de los nuevos navegadores y los usuarios no-cool igual podrían ver el contenido. (Ej: http://scripty2.com/hardwareacceleration/ )
• modernizr
ayuda a detectar la funcionalidad y crear opciones cuando no se soporta.
• http://selectivizr.com/
CSS3
ayuda con los selectores nuevos de
QUÉ ES SEGURO USAR?
• En
los navegadores desktop:
• Fuentes! • Canvas
con http://excanvas.sourceforge.net/ para que funcione en IE7+
QUÉ ES SEGURO USAR?
• En
iPhone y Android
• CASI • SVG
TODO!
no corre en Android < 3
MONOKU.TUMBLR.COM