Issuu on Google+

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


HTML5 Ahora