Presentación html5
Upcoming SlideShare
Loading in...5
×
 

Presentación html5

on

  • 2,875 views

 

Statistics

Views

Total Views
2,875
Views on SlideShare
2,344
Embed Views
531

Actions

Likes
5
Downloads
112
Comments
0

4 Embeds 531

http://www.elgandalfumeta.com 436
http://www.scoop.it 92
http://www.365dailyjournal.com 2
http://feeds.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Presentación html5 Presentación html5 Presentation Transcript

  • HTML 5He visto el futuro y está en el navegador 1
  • PrólogoLa web tiene un nuevo estándar que rompe la barrera entre HTML y el scripting HTML5 es el nuevo estándar universal, abierto y gratuito, para la elaboración de páginas web -HTML5 = HTML + CSS + Javascript -HTML 5 todavía está en fase de working draft. Aunque en 2014 se espera que sea recomendación de facto! -Es regulado por el WHATWG –Apple, Google, Mozilla y Opera- y el W3C -Gracias a los Polyfills ya no hay excusa para no empezar a hacer páginas web en HTML5 2
  • PrólogoUn poco de historiaHTML5 marca un punto de inflexión en el desarrollo del lenguaje de marcado 1991 - HTML 1994 – HTML 2 1996 – CSS 1 + Javascript 1997 – HTML 4 1998 – CSS 2 2000 – XHTML 1 2002 – Diseño web sin tablas 2005 - AJAX 2009 – HTML 5 + CSS 3-LINKS:Regreso al pasado: http://onsoftware.softonic.com/regreso-al-pasado-internet-en-1997 3
  • Web SemánticaDe la información al Conocimiento Trata de Añadir significado a la información para que lo entiendan las máquinas -agentes- y filtren la que es realmente útil para los usuarios. También implica el desarrollo de los propios agentes -Nuevas etiquetas estructurales -Marcado de datos -Nueva generación de Formularios -Más valores para el atributo rel 4
  • Nuevas etiquetas estructurales Web SemánticaAdiós a la divitis! HTML 5 proporciona un conjunto de etiquetas que definen con mayor claridad los bloques principales de contenido que componen un documento HTML El nuevo Doctype <!DOCTYPE html> Nuevas etiquetas: <command> <datagrid> <datalist> <details> <dialog> <embed> <eventsource> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <menu> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> 5
  • Nuevas etiquetas estructurales Web Semántica Principales etiquetas estructurales-LINKS: -Principales etiquetas estructurales: http://www.ibm.com/developerworks/ssa/web/ library/wa-html5structuraltags/ Soporte global: 75,38% 6
  • Marcado de datos Web Semántica -El marcado de datos es un paso más en la llamada web semántica para dar significado a los contenidos -Le dice a las máquinas -agentes de usuario- qué se describe exactamente en una determinada información Formatos de marcado: -RDFa -Microformatos -Microdatos… 7
  • Marcado de datos Web Semántica Para el marcado estructurado de datos se puede utilizar microdatos, microformatos y RDFa -En vez de hacer elegir a los webmasters entre uno estos formatos, sería conveniente centrarse en uno solo -Un único formato mejoraría la consistencia de datos entre los distintos motores de búsqueda -Microdatos comparte la sencillez de los microformatos y la capacidad de ampliación de RDFa Por ejemplo, los Microdatos de Schema.org ya comienzan a mostrar fragmentos enriquecidos -rich snippets- para sus resultados: Los fragmentos enriquecidos permiten a los usuarios ver información y datos adicionales de su sitio en los resultados de búsqueda... busca Angry Birds en Google y compruébalo! 8
  • Marcado de datos Web Semántica ¿Cuál elegir? Microdatos por su uso en schema.org y su aceptación por Google, Microsoft y Yahoo! 9
  • Marcado de datos Web Semántica Elementos que incorporan los microdatos: itemscope, itemtype, itemid, itemref, itemprop <section itemscope itemtype="http:// enciclopediadecriaturas.com/criaturas#hobbits"> <h1 itemprop="name">Hobbits albos</h1> <p itemprop="desc">Los hobbits albos son los más altos -120 cm- y aventureros de entre los hobbits.</p> <img itemprop="img" src="hobbit.jpg" alt="" title="Hedral, hobbit albo"> </section>-LINKS:Schema: http://schema.orgCreate HTML with schema.org microdata: http://schema-creator.org/ 10
  • Formularios Web SemánticaNueva generación de formularios! Se añaden pequeñas funcionalidades que antes precisaban Javascript -Nuevos elementos: meter, progress, output, keygen, datalist -Nuevos tipos de input: email, url, tel, search, number, range, color, date, time, datetime, month, week -Nuevos atributos: list, autofocus, placeholder, file multiple, pattern, autocomplete, max, min, step, required Y si le sumamos el poder de XMLHttpRequest 2: -El objeto FormData: crear y enviar formularios al vuelo -FILE API FileReader: Upload de archivos con barra de progreso 11
  • Formularios Web Semántica <style> [required] { border-color: #88a; -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5); } :invalid { border-color: #e88; -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);+ } </style> <form> <label>Nombre: <input name="name" required></label> <label>E-mail: <input name="email" type="email" required></label> <label>URL: <input name="url" type="url"></label> <label>Comentario: <textarea name="comment" required></textarea></label> <input type="submit" value="Enviar"> </form>-LINKS:-XMLHTTPRequest 2 y El objeto FormData: http://www.html5rocks.com/en/tutorials/file/xhr2/-Div In To HTML5 - A Form of Mandness: http://diveintohtml5.info/forms.html-Soporte (detalles): http://wufoo.com/html5/ Soporte global: 53,13% 12
  • Nuevos valores para el atriburo rel Web Semántica El nuevo HTML tendrá que ser un poco más descriptivo a la hora de definir el tipo de link al que estamos enlazando De eso se encarga el atributo rel: alternate, archives, author, bookmark, contact, external, feed, first, help, icon, index, last, licence, next, nofollow, noreferrer, pingback, prefetch, prev, search, stylesheet, sidebar, tag, up Nótese la importancia de rel de cara al SEO 13
  • APIS de JavascriptLas responsables de la magia -Tecnologías offline/storage Application Cache Web Storage IndexedDB -Comunicación y conectividad WebSockets Web Workers Notificaciones -Acceso al dispositivo Drag & Drop nativo Desktop Drag-In & Drag-Out Filesystem API Geolocalización Orientación del dispositivo Webcam y micro 14
  • Tecnologías offline API JavascriptNo siempre la conexión a la red es fiable, pero las aplicaciones sí que tienen que serlo Imaginemos que un usuario está rellenando un formulario y pierde el acceso a la red o que la descarga de datos de nuestro móvil es limitada… 15
  • Tecnologías offline API Javascript Las aplicaciones HTML5 pueden comenzar más rápido y trabajar incluso si no hay conexión a Internet, gracias a la caché de la aplicación, el almacenamiento local, bases de datos indexadas y las APIs de archivo Cuanta más información se maneje en local mejor rendimiento del sistema y más satisfactoria la experiencia del usuario Por supuesto, los datos son más vulnerables, y el usuario no puede acceder a estos desde varios clientes; por lo tanto, solo debería utilizarse para datos que no sean críticos 16
  • Tecnologías offline API Javascript -AppCache: para guardar los archivos en local y acceder a ellos en modo offline en forma de URLs -IndexedDB para guardar datos estructurados en local y poder acceder y consultarlos -Web Storage para guardar pequeñas cantidades de información en formato de texto en el equipo -Los Eventos Offline, para detectar el estado de la conexión a la red 17
  • Application Cache Tecnologías offline Fichero de configuración que permite guardar archivos en local -Para acceder a ellos cuando no hay conexión -Para optimizar la velocidad de carga -Hay que crear canales de sincronización de datos entre nuestras aplicaciones y la nube -El estándar HTML5 también incluye tecnologías para guardar los datos en el cliente -AppCache ofrece ventajas con respecto a la caché de HTTP Uso: Basta con crear un archivo MANIFEST -lista todos los archivos que necesitan ser cargados en la caché- y acceder al objeto window.applicationCache 18
  • Application Cache Tecnologías offline AppCache es sólo una parte de las tecnologías offline de HTML 5 Tenemos que asegurarnos de que los datos cacheados siguen siendo relevantes y están actualizados. Como hemos dicho, para ello necesitamos crear canales de sincronización de datos entre nuestras aplicaciones y la nube Podemos hacerlo con WebSockets y XHR, que nos ofrecen una forma de sincronización, para finalmente guardarlos en una base de datos IndexedDB Esta técnica también se puede utilizar para subir al servidor la información guardada con Web Storage 19
  • Application Cache Tecnologías offline Documento cache.appcache: CACHE MANIFEST # 08-04-2012:v2 CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Recursos que se requieren online NETWORK: login.php # FALLBACK, Declara archivos a utilizar por defecto en el caso de no encontrar el recurso solicitado FALLBACK: /main.php /offline.html img/large/ images/offline.jpg 20
  • Application Cache Tecnologías offline El HTML: <html manifest="cache.appcache"> <script> window.applicationCache.addEventListener(updateready, function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); if (confirm(A new version of this site is available. Load it?)) { window.location.reload(); } } }, false); </script>-LINKS:-juego Web interactivo que funciona sin conexión:http://ie.microsoft.com/testdrive/HTML5/KidsBook/-Recetas (Uso de AppCache e IndexedDB):http://ie.microsoft.com/testdrive/HTML5/Cookbook/ Soporte global: 59,88% 21
  • Web Storage Tecnologías offline Almacenamiento de datos del lado del cliente. -Muy útil para almacenar pequeñas cantidades de datos (IndexedDB para almacenar grandes cantidades de datos complejos y estructurados) -Los datos son almacenados usando pares de clave/valor -Una forma mejor y más segura de almacenar información que el método tradicional de almacenamiento mediante cookies sessionStorage y localStorage: El almacenamiento por sesión es por ventana, y su tiempo de vida está limitado a lo que dure la ventana (o pestaña): sessionStorage Los datos alojados en un almacenamiento local son sólo accesibles por dominio y persisten cuando se cierra el navegador: localStorage. Soporte global: 88,29% 22
  • Web Storage Tecnologías offline sessionStorage //Obtenemos el elemento que contiene el contenido del post var content = document.getElementById("content"); //Comprobamos si existe contenido guardado, lo cual indicaría un refresco de página accidental if (sessionStorage.getItem("autosave")) { content.value = sessionStorage.getItem("autosave"); } //Guardamos el contenido del elemento cada minuto setInterval(function() { sessionStorage.setItem("autosave", content.value); }, 1000*60); localStorage //almacenar el número de veces que un usuario ha visitado una página localStorage[www.tudominio.com].setItem("visitas", parseInt(localStorage[www.tudominio.com].getItem("visitas") || 0 ) + 1); 23
  • IndexedDB Tecnologías offline API para almacenamiento avanzado de datos en la parte de cliente -Mecanismo de almacenamiento de grandes cantidades de datos estructurados -Provee de un acceso de alto rendimiento a los mismos, usando índices. -Está construido sobre un modelo de base de datos transaccional -Su API es mayormente asíncrona Sustituye a Web SQL Database, que ha sido declarada deprecated por la W3C.-LINK:IndexedDB: http://www.html5rocks.com/en/tutorials/indexeddb/todo/ Soporte global: 44,98% 24
  • Comunicación & Conectitividad API Javascript -Web Workers -WebSockets -Notificaciones HTML 5 presenta una conectividad más eficiente entre cliente y servidor, lo que garantiza una mejor comunicación 25
  • Binomio WebSockets/Server-Sent EventsEl servidor llama a tu puerta 26
  • WebSockets Comunicación y conectividad HTML5 ofrece dos nuevos estándares de comunicación: Server-Sent Events y WebSockets. -WebSockets consiste en abrir un canal full-duplex permanente entre el servidor y el cliente aprovechando el protocolo TCP -Server-Sent Events se utiliza para mandar eventos directamente desde nuestro servidor al cliente de nuestra aplicación Este tipo de comunicación está pensado para aplicaciones que necesiten de mucha transferencia de datos en tipo instantáneo, como por ejemplo juegos online 27
  • WebSockets Comunicación y conectividad ¿Pero, qué nos proporciona? -Reducción en el consumo de red y de procesamiento -Evolución en el desarrollo de aplicaciones RIA con HTML! Casos donde sería útil que el servidor pudiera comunicarse con el navegador sin que el cliente lo solicite necesariamente: -Web chats (como el de Facebook) -Trabajo colaborativo (Como el de Google Docs) -Sitios de subastas o sistemas para bolsas de valores, donde los datos hacen falta en tiempo real 28
  • WebSockets Comunicación y conectividad Web Sockets es más rápido que HTTP HTTP fue diseñado para la transferencia de documentos, en realidad no está adecuado para las aplicaciones web modernas: -Naturaleza medio-dúplex: sólo se puede comunicar en una dirección a la vez, bien del cliente al servidor o del servidor al cliente -los paquetes HTTP vienen cargados con grandes cantidades de datos de cabecera, lo cual consume ancho de banda y requiere más trabajo de procesamiento WebSockets se adecúa mejor a la nuevas exigencias de la web -Podría abrir el paso a una nueva generación de aplicaciones web en tiempo real y latencia cero -Los ingenieros de Google importaron el QUAKE II para que corriera en el navegador usando WebSocket. Esto hubiera sido imposible usando HTTP 29
  • WebSockets Comunicación y conectividad Uso de Web Socket: -Tecnologías offline -Video juego Quake II GWT en web -Acceso webcam y vídeo-LINKS:Web Sockets es más rápido que HTTP: http://bit.ly/HQisynAplicaciones web y móvil Realtime: http://pusher.com Soporte global: 54,47% 30
  • Web Workers Comunicación y conectividadEsos currelas! La API Web Workers permite la ejecución de scripts en segundo plano (background) -Simulación del multiproceso -multi-threading- con javascript -Mejora del rendimiento de la aplicación y por consiguiente de la experiencia de usuario (antes, un proceso de larga duración podía colgar toda la ventana, bloqueando el thread de la interfaz de usuario) Y puesto que los Web Workers se ejecutan en threads independientes, el código debe ir en archivos independientes... 31
  • Web Workers Comunicación y conectividad //ARCHIVO: curritos.js function messageHandler(event) { // Accede a los datos del mensaje enviado por la página principal var messageSent = event.data; // Prepara el mensaje que se va a devolver var messageReturned = "¡Hola, " + messageSent + ", los curritos te saludamos!"; // Publica el mensaje de vuelta en la página principal this.postMessage(messageReturned); } //Página web principal: manejador del mensaje de retorno <div id="output"></div> <script type="text/javascript"> //Instancia el Worker var myHelloWorker = new Worker(curritos.js); myHelloWorker.addEventListener("message", function (event) { document.getElementById("output").textContent = event.data; }, false); // Inicializa el worker enviándole un primer mensaje myHelloWorker.postMessage("Netquet"); // Detiene el worker con el comando terminate() myHelloWorker.terminate(); </script> 32
  • Web Workers Comunicación y conectividad Un worker no es más que una archivo .js que se encarga de una funcionalidad puntual (nótese que los workers no tienen acceso al DOM o a otros workers!) En la página principal, basta instanciar un objeto Worker, que se comunicará con el propio worker mediante mensajes 33
  • Web Workers Comunicación y conectividad ¿Cuándo conviene utilizar Web Workers? -Cuando afecte a la experiencia de usuario: Manipulación de grandes cantidades de datos -En procesamiento de imágenes mediante el uso de datos extraídos de elementos <canvas> o <video> -Accesos simultáneos a una base de datos (con IndexedDB) -Siempre que no necesitemos el DOM, of course! Perfecto para Videojuegos! -Ejemplos: HTML Rocks: http://slides.html5rocks.com/#web-workers Utilización de varios web workers: http://nerget.com/rayjs-mt/ rayjs.html Soporte global: 57,33% 34
  • Notificaciones Comunicación y conectividad El API de Notificaciones HTML5 permite mostrar notificaciones al usuario para determinados eventos 1-Verificar si hay soporte: window.webkitNotifications 2-Crear Notificación (dos tipos: texto plano y HTML): window.webkitNotifications.createNotification 3-Pedir permiso al usuario: window.webkitNotifications.checkPermission Casos: -Email nuevo -Nuevo twit -Eventos de calendario-LINK:HTML Rocks: http://slides.html5rocks.com/#notifications-api Soporte parcial: 27% 35
  • Acceso al dispositivo API JavascriptIntegración con el Sistema Operativo! -Drag & Drop nativo -Desktop Drag-In -Desktop Drag-Out -Filesystem API -Geolocalización -Orientación del dispositivo -Webcam y micro 36
  • Drag & Drop Nativo Acceso al dispositivo Una de las funcionalidades principales y más comunes de las interfaces gráficas actuales Evidentemente, precisa javascript (pero ya no se usará para hacer todo el proceso como antes, sólo parte de la funcionalidad en el manejo de eventos) 1-Comprobar compatibilidad: Modernizr.draganddrop 2-Crear contenido arrastrable: draggable=’true’ 3-Definir eventos: dragstart, drag, dragenter, dragover, dragleave, drop, dragend 37
  • Drag & Drop Nativo Acceso al dispositivo 4-Otros: -El objeto datatransfer: ahora ya podemos enviar información junto al elemento arrastrado -Imagen fantasma: representación libre del objeto que está siendo arrastrado -Efectos drop: copiado, movimiento, enlazado, …-Ejemplo:-HTML5 Rocks: http://slides.html5rocks.com/#drag-and-drop-Gerifaltitos: http://bit.ly/HrCvcf (JQuery) Soporte global: 86,43% 38
  • Desktop Drag-In & Drag-Out Acceso al dispositivo Más allá de todo esto, tenemos la posibilidad de transferir contenido entre aplicaciones web y con software de escritorio en general Desktop Drag-In & DragOut Habilita la funcionalidad de arrastrar de nuestro escritorio al navegador o del navegador a nuestro escritorio. -Ejemplo: Drag-In: http://slides.html5rocks.com/#drag-in Drag-Out: http://slides.html5rocks.com/#drag-out 39
  • FILE API Acceso al dispositivo -Abrir archivos locales a través de input type -Obtener información de dicho archivo mediante la API javascript Esta solución nos permite presentar una miniatura de una imagen que se desee subir al servidor antes de enviarla o verificar el MIME de los archivos compatibles, y hasta su tamaño El caso más claro es el Upload de archivos múltiple! -Ejemplo: Múltiple Upload: http://robertnyman.com/html5/fileapi-upload/ fileapi-upload.html-LINK:The HTML5 FILE API for Upload: http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/ Soporte global: 53,99% 40
  • Geolocalización Acceso al dispositivoCon un poco de código podremos obtener la ubicación del usuario -La API de Geolocalización es un esfuerzo de la W3C para estandarizar una interfaz que recupere información geográfica de un dispositivo cliente -Ahora es el propio navegador el que detecta la latitud y longitud (A través del WIFI o GPS del dispositivo) ¡Ideal para aplicaciones web en dispositivos móviles! -La geolocalización es útil en sitios sociales para mostrar dónde se encuentra el usuario, y/o compartir imágenes o vídeos de dónde se encuentra (esta característica ya funciona con Google Maps) -También, dependiendo de dónde esté el usuario, podría mostrar una información diferente (MK´) 41
  • Geolocalización Acceso al dispositivo Así de simple: 1-Detectamos que soporte la funcionalidad: navigator.geolocation 2-Recuperamos la posición del usuario: navigator.geolocation.getCurrentPosition mediante el objeto position 3-El navegador nos preguntará si deseamos compartir nuestra posición. ¡El usuario debe autorizarlo! 4-Dibujamos mapa (esto ya con la API de Google Maps): <script type="text/javascript" src="http:// maps.google.com/maps/api/js?sensor=false"></script> -Ejemplo: HTML Rocks: http://slides.html5rocks.com/#geolocation Soporte global: 70,4% 42
  • Orientación del dispositivo Acceso al dispositivoLa magia del acelerómetro y del giroscopio iPhone, iPads y la mayoría de los smartphones más modernos incorporan un acelerómetro y/o un giroscopio. También los macBook Las nuevas API de HTML5 permiten el uso de acelerómetros/giroscopios window.addEventListener(deviceorientation, function(event) { var a = event.alpha; var b = event.beta; var g = event.gamma; }, false); -Ejemplo: HTML Rocks: http://slides.html5rocks.com/#slide-orientation Imagen 360º: http://360.io/pt3dmqna Soporte global: 51,04% 43
  • Acceso a webcam y micro Acceso al dispositivovideollamadas y videoconferencias de forma nativa Con HTML 5 podremos acceder directamente a los dispositivos de audio, video y cámaras fotográficas Servicios de videollamadas y videoconferencias utilizando únicamente el navegador web Será la etiqueta <device> la encargada de permitir al usuario dar acceso a la página a determinados dispositivos del equipo. Tendremos que esperar a que el usuario seleccione un dispositivo para darnos acceso API Media Capture: define las mejoras que tendrían que tener los formularios para proveer acceso a audio, imagen y captura de vídeo (todavía es un working draft) 44
  • Acceso a webcam y micro Acceso al dispositivo Reconocimiento de voz con HTML 5: Speech input Este nuevo campo permite capturar la voz del usuario y escribir directamente en el campo de texto lo que dice, o también procesar directamente la voz (ej.: Google Translate) <input type="text" x-webkit-speech /> -Ejemplo: Transmisión grabaciones webcam entre 2 ordenadores: http://bit.ly/dzXsHo Speech Input: http://slides.html5rocks.com/#speech-input-LINK:HTML Media Capture specification: http://dev.w3.org/2009/dap/camera/ 45
  • Gráficos¿Estás listo para jugar al máximo nivel desde tu navegador y de forma nativa? Canvas: manipulación de mapa de bits SVG: gráficos vectoriales WebGL: el 3D en la web 46
  • El elemento Canvas GráficosManipulación de mapa de bits -El elemento Canvas permite representar en pantalla imágenes, gráficos y formas geométricas de todo tipo. E incluso textos -El dibujo en el canvas se hace mediante el API Canvas 2D -El potencial de canvas reside en su habilidad para actualizar su contenido en tiempo real. -El canvas aprovecha las bondades de la aceleración de gráficos por hardware: Eficiencia y mayor rendimiento API Canvas 2D: Manipulación del contexto del canvas, manipulación de imágenes, manipulación de formas y colores, manipulación de líneas, textos y sombras, transformaciones y animaciones, control del ratón 47
  • El elemento Canvas Gráficos <canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = round; canvasContext.strokeStyle = rgba(255, 127, 0, 0.5); canvasContext.stroke(); </script>-LINK:Guía del canvas: http://www.desarrolloweb.com/articulos/guia-canvas-html5-desarrolladores.htmlKineticJS (librería de JavaScript que extiende el contexto 2D para Canvas):http://www.kineticjs.com (ejemplos de gráficos y de código) 48
  • Aceleración gráfica por hardware Gráficos¡Desde el navegador!Cuando enviamos comandos de dibujo al canvas, los navegadores ya soncapaces de entregarlos directamente al hardware de gráficos –GPU–,liberando a la CPU de trabajo, y por consiguiente, aumentandoconsiderablemente el rendimientoNavegador:-Rendimiento muy superior (animaciones en tiempo real)-Experiencia de usuario mejorada, más intensa y gratificante-Ejemplos:Juego retro de Zombies mutantes hecho con el motor Impact JS y mostradoen el canvas de HTML5: http://www.mutantzombiemonsters.com/CanvasDOOM: http://www.benjoffe.com/code/demos/canvascape/textures Soporte global: 72,96% 49
  • SVG (Scalable Vector Graphics) GráficosDibujo vectorial SVG es un formato de gráficos vectoriales basado en XML 50
  • SVG (Scalable Vector Graphics) Gráficos -Es independiente de la resolución de pantalla (puede escalarse la imagen sin perder resolución) -Como se basa en XML, el manejo de sus diferentes elementos y atributos es realmente fácil -Es mejor solución para animaciones complejas <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert(hello);"/> </svg> -Ejemplos: -Muchas de las imágenes que usa Wikipedia empiezan a estar ya en este formato -HTML5 Rocks: http://slides.html5rocks.com/#svg-example-slide-LINK:-Soporte (detalle): http://caniuse.com/#cats=SVG 51
  • Gráficos¿Canvas o SVG?Dibujo vectorial vs Mapa de bits… -Si quieres que el aspecto de tu sitio web sea independiente de la resolución de pantalla, altamente interactivo o es para ver e imprimir: SVG. -Si por el contrario, estás desarrollando un juego y quieres que los gráficos se muestren en pantalla a gran velocidad, o no quieres trabajar con XML: Canvas. -Idealmente, ambos elementos pueden funcionar juntos de forma complementaria a la perfección.-LINK:Elucubraciones sobre cuándo usar Canvas, SVG o ambos [EN]: http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx 52
  • GráficosWebGL nos trae el 3D a la webJavascript no tiene límites! Especificación estándar que dota a los navegadores web de gráficos 3D sin necesidad de extensiones -El Canvas puede invocar el estándar WebGL -Permite crear figuras en 3D, dar iluminación y aplicar texturas -Permite movernos en un entorno 3D y aplicar eventos para poder tener interacción con teclado y mouse Desventajas: compatibilidad, rendimiento y seguridad. Está demasiado verde todavía -Compatibilidad navegadores -Necesidad de HW potente -La telefonía móvil (batería) 53
  • GráficosWebGL nos trae el 3D a la web-Ejemplos:El vuelo del navegante:http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/Giro de la Tierra y la Luna en HTML 5: https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/Earth.htmlTron en HTML 5 y WebGL: http://cycleblob.com/QUAKE II: http://media.tojicode.com/q3bsp/-LINKS:Test navegación para HTML5 y WebGL:http://ie.microsoft.com/testdrive/performance/fishietank/HTML5 y WEbGL test: http://helloracer.com/webgl/¿Queréis romper Google?: http://mrdoob.com/projects/chromeexperiments/google_gravity/ (roto y todo podéis seguir usándolo)Funcionalidades destacadas WebGL:http://www.khronos.org/webgl/wiki/Demo_Repository Soporte global: 48,4% 54
  • GráficosWebGL nos trae el 3D a la web Caso de estudio: Quake II GWT en web: -WebSockets -Renderizado WebGL -Implementación GWT de Java -Web Storage (para salvar juego y preferencias) 55
  • MultimediaSoporte multimedia estándar y nativo: ¡Adiós plugins! Podemos afrontar este punto como una guerra abierta con diferentes frentes: 1-Reproductor nativo vs reproductor basado en plugins: HTML 5 vs Flash 2-Tecnologías libres y abierta vs propietarias: Mozilla, Opera (y Google) vs Apple y Microsoft 3-Y propietarias vs propietarias: Apple vs Adobe -El problema de utilizar un reproductor de vídeo basado en plugins es que su contenido esta encerrado y oculto para el resto del documento -Disponer de elementos nativos en HTML supone la integración de los mismos con otras tecnologías del navegador, como JavaScript y CSS 56
  • MultimediaNuevas etiquetas Audio y Video:Dos de las claves de HTML 5 y del futuro de la web<audio id="audio" src="sound.mp3" controls></audio><video id="video" src="movie.webm" autoplaycontrols></video>Contenedores: Códecs Audio + Códecs Vídeo-OGG: Vorbis + Theora (Mozilla y Opera)-MP4: ACC + H.264 y mp3 + H.264 (Apple y Microsoft)-WebM: Vorbis + VP8 (Google) Soporte global: 70% 57
  • MultimediaAPIs de AudioJavascript para procesamiento y sintetización avanzada de audio en aplicaciones web Audio Data API -> Mozilla -Extiende <audio> y <video> -API basada en eventos Web Audio API -> Google -AudioContext y AudioNode -API a alto nivel -Ejemplos: Pocket Full Of HTML5 (Audio Data API): http://slidesha.re/xVXdSZ Real-time Audio analysis (Web Audio API): http://bit.ly/ux2smU 58
  • MultimediaAPIs de Audio WebRTC API -Proporcionar comunicación en tiempo real en la web -Escenarios: streaming y videoconferencia HTML Streams API -> Ian Hickson -Múltiples flujos multimedia en HTML5 -HTML MediaController API -Captura y grabación de audio y vídeo local MediaStream Processing API -API común que trata de aunar todas las anteriores 59
  • Multimedia¿Cuál elegir? Web Audio API: -Más eficiente -Más fácil de usar -Mayor cuota móvil/Tablet -Además, Google financia a Mozilla y no al revés ;) -Ejemplos: Plink (Web Audio API y Node.JS): http://labs.dinahmoe.com/plink/# Pirates loves daisies (juego): http://www.pirateslovedaisies.com-LINK:Web Audio API (W3C Editor´s Draft): http://bit.ly/rbKBR7 60
  • Multimedia¡Vídeo nativo en HTML! Stream de video con HTML5 (sin Flash ni Silverlight) Habrá que esperar un poco de tiempo, atendiendo a las ya conocidas razones de compatibilidad -Ejemplo: JPayer video: http://bit.ly/fHUSDg-LINKS:Convertidores de vídeo a otro formato: Media Converter: http://mediaconverter.org/ (online y gratuito) Miro Video Converter: http://www.mirovideoconverter.com/Mediasource API: http://bit.ly/qnvqGa 61
  • Multimedia¡Vídeo nativo en HTML!<script>function fallo(e){ switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED:alert(Has abortado el playback.); break; case e.target.error.MEDIA_ERR_NETWORK: alert(Error en la red.); break; case e.target.error.MEDIA_ERR_DECODE: alert(Problema de codificación.); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:alert(Formato no soportado oarchivo no encontrado.); break; default: alert(Ha ocurrido un error desconocido.); break; }}</script><video controls height="300" width="400" loop autoplay onerror="fallo(event)" > <source src="ejemplo_conversion.webmvp8.webm" type="video/webm" /> <source src="ejemplo_conversion.mp4" type="video/h264" /> <source src="ejemplo_conversion.theora.ogv" type="video/ogg" /></video> Soporte global: 45,14% 62
  • MultimediaGuerra de códecsTecnologías libres y abiertas vs propietarias: Opera y Mozilla vs Apple y Microsoft Mozilla y Opera proponen  Theora (códec de vídeo libre), Vorbis (códec de audio libre) y el contenedor Ogg (también abierto) Apple condena a Adobe al ostracismo en la telefonía móvil y defiende su códec H.264 Microsoft, aunque más abierto que Apple, también apuesta por el H.264 El gigante Google apoya su códec abierto VP8 pero no le hace feos a H.264 63
  • MultimediaGuerra de códecs O sea, que a estas alturas no está aclarado… -Corremos el riesgo de volver a las épocas de incompatibilidades a las que precisamente Flash puso fin -Es un riesgo para la web, dejar en manos de una única empresa privada el futuro de algo tan importante para el desarrollo de Internet como es el video 64
  • MultimediaGuerra de códecsTecnologías propietarias vs propietarias: Adobe vs Apple A estas alturas, Apple ya ha ganado la batalla: Adobe anunció que Flash ya no daría soporte a los móviles. Importante decisión, que no hubiera sido posible si Apple no hubiera podido contar con HTML5 para presionarlos Adobe, simplemente, va a dar herramientas a los desarrolladores para que puedan convertir el formato Flash a HTML 5 (Adobe AIR) 65
  • MultimediaGuerra de códecs¿Quién ganará esta batalla? Sin duda alguna, HTML5 ganará -en un futuro no demasiado lejano-, desplazando totalmente a Flash en lo que a desarrollo de juegos a través del navegador se refiere Dependerá del ritmo con que los navegadores vayan dando soporte a las nuevas características disponibles en HTML5. ¡Aunque ya sabemos lo complejo que es todo este mundo de las patentes y el código libre!¡sobre todo con la cantidad de navegadores, intereses y usuarios que hay implicados! 66
  • Estilos CSS 3Mira, mamá: ¡Sin javascript! -Selectores CSS -Gradientes -Webfonts -Sombras -TextWrapping -Imágenes borde -Columnas -Box Model -Stroke -Transiciones -Opacidad -Tranformaciones -HSL -Animaciones -Bordes redondeados -Uso de media query 67
  • Estilos CSS 3 -Ejemplos: HTML5 Rocks: http://slides.html5rocks.com/#css3-title Efectos rollover CSS3: http://tympanus.net/codrops/ 2011/11/02/original-hover-effects-with-css3/ Efecto Matrix CSS3: http://girliemac.com/sandbox/ matrix.html-LINK:HTML5 snippets: http://html5snippets.com/ Soporte global: 68,39-94,03% 68
  • PolyfillsParcheando navegadores prehistóricos Como hemos podido comprobar, hay un tema que nos aleja todavía de querer comprometernos con HTML5; sí, hablamos de la compatibilidad, y aquí veremos al menos una aproximación de cómo resolverlo... Por una parte, utilizaremos Modernizr, que es una biblioteca para detectar el soporte de los navegadores a las diferentes funcionalidades de HTML 5 <script src="modernizr.min.js"></script> Con Modernizr.load()podremos cargar Pollyfills 69
  • Polyfills Y por otra, tenemos los Polyfills, que son bibliotecas Javascript que amplían las funcionalidades de los navegadores que no soportan las nuevas funcionalidades de HTML 5 Un polyfill es como un emulador que nos permitirá trabajar en clientes web antiguos de la misma forma que si fueran modernos Eso sí, utilizad los Pollyfills con cuidado, ya que pueden disminuir el rendimiento de los navegadores-LINKS:Herramienta para saber el nivel de soporte de HTML5 de tu navegador: http://html5test.com/Guía de APIs y estilos CSS a poder usar en nuestras aplicaciones: http://html5please.com/Excelente presentación sobre polyfills [EN]: http://addyosmani.com/polyfillthehtml5gaps/slides/#14 70
  • Principales Polyfills Polyfills -HTML Shiv: Cada vez hay menos excusas para empezar a usar HTML5 en nuestros sitios! <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--> -Google Chrome Frame: Complemento para IE, diseñado para sustituir el motor de renderizado de IE por el del Google Chrome (funciona con IE 6-9. Permite que sitios web programados adecuadamente sean mostrados de manera correcta bajo IE) <meta http-equiv="X-UA-Compatible" content="chrome=1" /> Esto hará que la página sea renderizada por Chrome para quien lo tenga instalado, sin afectar a los usuarios que no lo tengan 71
  • Principales Polyfills Polyfills -HTML5Boilerplate: Es una robusta plantilla que nos ayuda a optimizar tanto el código como la compatibilidad y el rendimiento de carga de páginas HTML 5 -También incluye Mobile Boilerplate -Y constructor de proyectos que simplifica H5BP: Initializr -Selectivizr: Para compatibilizar atributos CSS3 y pseudo-clases en IE 6-8 <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></ script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> 72
  • Principales Polyfills Polyfills -LINKS: Modernizr: http://modernizr.com/ HTML Shiv: http://code.google.com/p/html5shiv/ Google Chrome Frame: http://www.google.com/chromeframe?hl=es&quickenable=true HTML5Boilerplate: http://html5boilerplate.com/ Initializr (H5BP+Modernizr+JQuery): http://www.initializr.com/ Selectivizr: http://selectivizr.com/ La guía Todo-En-Uno –que ni está ordenada alfabéticamente ni es boba- de Planes B para HTML5: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills Las 15 APIs más populares de HTML5: http://www.htmlcinco.com/15-apis-de-html5/ 73
  • Dispositivos móvilesBe mobile, my friend 74
  • Dispositivos móvilesHTML5 será la web para los dispositivos móviles: tablets ysmartphonesSin tardar demasiado será fundamental tener páginas webque se muestren correctamente y sean funcionales encualquiera de los dispositivos en los que sean visualizadasCompatibilidad: -iOS 3.0+ -Android 2.0+ -BlackBerry smartphones 5.0+ -BlackBerry playbook 1.0+ -webOS 1.4+ -Symbian anna+ -Bada 2.0 -Windows phone mango+ 75
  • Frameworks Dispositivos móviles ¿Qué tipo de aplicaciones podemos desarrollar para un móvil? -Aplicaciones no nativas basadas en el navegador móvil -Aplicaciones nativas (Objective C/Java) que acceden directamente al HW del móvil Frameworks para el desarrollo de aplicaciones web (no nativas) para dispositivos móviles en todas las plataformas -Todos utilizan HTML 5, CSS 3 y Javascript -Todos soportan varias plataformas 76
  • Frameworks Dispositivos móviles JQuery Mobile y Sencha Touch son frameworks javascript que permiten desarrollar aplicaciones no nativas para el navegador del móvil con el mismo Look & Feel de las aplicaciones nativas PhoneGap y Titanium Appcelerator, lo que nos permiten es empaquetar nuestra aplicación web permitiendo su distribución en los diferentes sistemas de venta 77
  • PhoneGap Dispositivos móviles Permite crear aplicaciones usando exclusivamente HTML5, CSS3 y Javascript y empaquetarlas para que sean compatibles con las principales plataformas móviles Provee una serie de bibliotecas desarrolladas en el lenguaje específico de cada plataforma (Objective-C para IOS, Java para Android, etc), que permiten acceder desde el código HTML 5 a las principales funcionalidades del dispositivo Al ser una página web, tenemos acceso al DOM y podemos usar frameworks como jQuery Mobile o cualquier otro Evidentemente, no tendrá todo el potencial de una aplicación nativa 78
  • JQuery Mobile Dispositivos móviles Framework para el desarrollo de aplicaciones y sitios web optimizados para smartphones y tablets “Write less, do more” Podemos desarrollar una sola aplicación que funcione en las plataformas más populares de smarthphones y tablets (en vez de tener que escribir aplicaciones nativas para cada dispositivo móvil o sistema operativo) No es necesario que el programador reciba formación específica como Objective-C para iOS/iPhone o Java para Android, únicamente sabiendo HTML puede realizar el trabajo 79
  • Dispositivos móvilesOtras técnicas para garantizar la compatibilidad , consistencia yrendimiento de un sitio web:-Ajustes del área de visión o Viewport para evitar problemas de escalainvoluntaria<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">-Favicons de múltiples resoluciones-Media queries, que permiten adaptar el sitio según tamaño y resolución delequipoLas media queries CSS3 modifican la estructura de la página en función deltamaño de la pantalla. Simplemente, redefinimos los estilos –al final del .css- pararesoluciones muy grandes y para muy pequeñas (dispositivos móviles) 80
  • Dispositivos móviles@media screen and (min-width:1200px){ img { max-width:1000px; } #container{ width:1100px; } header h1 a{ width:1100px; height:180px; background:url(imagen.jpg) no-repeat 0 0; }}@media screen and (max-width:600px){ img { max-width:290px; } #container{ width:auto; } header h1 a{ width:auto; }} 81
  • Dispositivos móviles-LINKS: -W3C. Estándares para aplicaciones Web en móviles (Febrero 2012): http://www.w3.org/2012/02/mobile-web-app-state/ -Compatibilidad HTML5 en móviles y tablets: http://mobilehtml5.org/ -Aplicación web offline para dispositivos móviles con HTML 5: http://www.ibm.com/developerworks/web/library/wa-offlineweb/ Soporte global: 72,48% 82
  • EpílogoLinks y Agradecimientos -HTML5 rocks: http://slides.html5rocks.com/#landing-slide-Info -Ejemplos HTML5 y APIs relacionadas: http://robertnyman.com/html5/ -DIV In To HTML5: http://diveintohtml5.info/ -Soporte navegadores: http://caniuse.com/ -Pick an API: http://playground.html5rocks.com/ -Tabla periódica de los Elementos HTML5 (^^): http://joshduck.com/periodic-table.html -HTMLFácil: http://html5facil.com/ -10 cuentas de Twitter relacionadas con HTML5 para seguir: http://css3html5.com.ar/10-cuentas-de-twitter-para-seguir/ -BrowserQuest: http://browserquest.mozilla.org/ 83
  • Caso de estudio Epílogo BrowserQuest: Juego de rol -masivo y multijugador- en línea de Mozilla -Las cosas que se ven en el navegador son alimentadas por Canvas -Los webSocket facilitan la comunicación con el servidor. El propio servidor está escrito en JavaScript y se ejecuta en varios servidores a través de Node.js* -Utiliza HTML5 Audio API para el sonido -Web Workers para cargar el mapa del juego al mismo tiempo que la página de inicio -localStorage para guardar el progreso del jugador -CSS3 Media Queries para asegurar que el juego se adapta a diferente tipos de ventana y tamaños de pantalla Más juegos en HTML5: http://bitelia.com/2012/02/8-juegos-geniales- desarrollados-en-html5 84
  • Extra rare tracks ^^ Epílogo Node.js (servidor web) Node es un entorno JavaScript de lado de servidor que utiliza un modelo asíncrono y dirigido por eventos Lista de aplicaciones para las que Node encajaría perfectamente (mejor que Apache): -Juegos online -Gestores de correo online: de esta manera teniendo el navegador abierto podríamos ver notificaciones en tiempo real de nuevos correos recibidos -Herramientas de colaboración -Chats -Redes sociales: por ejemplo para actualizar automáticamente tu muro de novedades -Herramientas de traducción en tiempo real-LINK:El Libro para Principiantes en Node.js: http://www.nodebeginner.org/index-es.html 85
  • Agradecimientos Epílogo -Tim Berners Lee -Richard Stallman -Linus Torvals -Jesús Conde -W3C -Netquest Espero que haya sido de su agrado. Saludos y hasta otra ;) 86