html5 ahora
Post on 05-Feb-2016
233 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML5, AHORABogo<Dev>
¿QUIÉN SOY YO?
• @julian_amaya // julian@monoku.com
• http://flavors.me/julian_amaya
• Fundador de monoku.com + otras
• Google API Guru
• Fanboy de Google y 37Signals
• Desarrollador especializado en BackEnd y líder de proyectos
2 COSAS RANDOM ANTES DE EMPEZAR
• Bogo<Dev/> es mejor que Bogo<Dev> , no?
• La web y yo.
OBJETIVOS
• Difundir la palabra del bien: HTML y los estándares.
• Mostrarles cómo pueden empezar ya a aplicar las nuevas herramientas que ofrece HTML5 y CSS3 en su día a día
• Mostrarles algunos ejemplos hechos en Bogotá
CONTENIDO
¿Qué es realmente HTML5?
HTML5 y CSS3 para el día a día
¿QUÉ ES REALMENTE HTML5?
<!DOCTYPE html> <html> <head>
<title>HTML5</title> </head> <body>Hola, ¿Esto es HTML5?</body>
</html>
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 para nuevos tipos de campo en formularios
• Se 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 conocer la ubicación del usuario
• Permite acceder a los diferentes recursos de la maquina
DISPOSITIVOS (MÓVIL)
• 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
• De nuevo: Permite usar los sitios web sin necesidad de conexión
• 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
• Permite tener una base de datos en el browser !!!!!!
• 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 redondeados sin necesidad de imágenes, hacks.
• 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 input: http://slides.html5rocks.com/#speech-input
• Device Orientarion: http://slides.html5rocks.com/#slide-orientation
• Y más!
HTML5 PARA EL DÍA A DÍA
LA REALIDADBrowser Market Share Marzo 2.011
LA REALIDADBrowser 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 IE6, 7 y 8, existe Google Chrome Frame.
• Los otros navegadores con updates automáticos suelen estar al día.
ENTONCES...
• Degrade gracefully es la mejor opción
• Revisar 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/hardware-acceleration/ )
• modernizr ayuda a detectar la funcionalidad y crear opciones cuando no se soporta.
• http://selectivizr.com/ ayuda con los selectores nuevos de CSS3
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 TODO!
• SVG no corre en Android < 3
MONOKU.TUMBLR.COM
top related