Successfully reported this slideshow.

Presentación en Aspgems html5

2,661 views

Published on

Charla de introducción al html5 que ofrecí en las oficinas de Aspgems el día 12 de enero de 2011

Published in: Technology
  • Be the first to comment

Presentación en Aspgems html5

  1. 1. Introducción al HTML5 Jorge Alvarez - Enero 2011
  2. 2. Sumario • Introducción • Etiquetas y elementos estructurales • Formularios • Rich Media • Nuevas A.P.I.’s • CSS 3
  3. 3. Qué es HTML5 • No solo un lenguaje de marcado • Sintaxis “relajada” • Gestión de errores • Mejoras en javascript • Un caos de especificaciones y soporte entre diferentes navegadores
  4. 4. Etiquetas / Elementos obsoletos (I) • basefont • u • big • frame • small (no queda obsoleto cambia la especificación) • frameset • center • noframes • font • acronym • s • applet • strike • dir • tt • align
  5. 5. Etiquetas / Elementos obsoletos (II) • link • hspace • vlink • vspace • alink • cellpadding • bgcolor • cellspacing • height • border • width • target • scrolling • longdesc • valign
  6. 6. Etiquetas / a nidar <a href=”http://myweb.com/help.html”> <h1>If you need help, just ask</h1> <p>Conctact us from 9-5</p> </a>
  7. 7. Nuevas etiquetas • HEADER FOOTER SECTION ARTICLE • Contenedores que agrupan contenido relacionado • Article no es solamente para artículos de texto/blogs sino que los productos/servicios de una empresa también son articles. • Diferencia con section: Pensar si el contenido es sindicable (RSS Atom)
  8. 8. Nuevas etiquetas • ASIDE • Indica contenido adicional o relacionado con el contenido principal • NO es para barras laterales. Las barras laterales son sections no aside • NAV • Solo incluir en elementos de navegación relevantes, no en cada lista de enlaces.
  9. 9. Nuevas etiquetas • HGROUP • Agrupa contenido relacionado en el encabezado • Generalmente varios headings (h1, h2..) • Para el esquema o resumen de la página el heading de menor valor será el relevante.
  10. 10. Nuevas etiquetas • FIGURE FIGCAPTION • Hace referencia a una anotación (no tiene porqué ser una imagen) ilustrativa o aclarativa del texto principal. <p>Puedes programar nuestra API utilizando el siguiente código:</p> <figure id="code98"> <figcaption>Publicación de un Twitter mediante el API</figcaption> <pre> <code> # Initialize your Twitter client client = Twitter::Client.new # Post a status update client.update("I just posted a status update via the Twitter Ruby Gem!") # Read the most recent status update in your home timeline puts client.home_timeline.first.text </code> </pre> </figure>
  11. 11. Ejemplo de página <!DOCTYPE html> <html> <header> <meta charset="UTF-8" /> <script src="jquery.js"></script> <link rel="stylesheet" href="main.css" /> </header> <body>
  12. 12. Ejemplo de página <header> <hgroup> <h1>La web del Metal</h1> <h2>Si te gusta el heavy o trabajas en una fundición, esta es tu web</h2> </hgroup> <img src=”cuernos.png” alt=”Viva el trash, el doom y el black metal” id=”logo” /> <nav> <ul> <li>Conciertos</li> <li>Entrevistas/li> <li>Noticias</li> <li>Contactar</li> </ul> </nav> </header>
  13. 13. <article> Ejemplo de página <header> <h1>Entrevista con Cradle of Filth </h1> <time datetime=”2011-01-04T22:04:49+01:00” pubdate> Martes, 4 de Enero de 2011 </time> </header> <p> Hoy tenemos con nosotros a una de las bandas mas grandes del panorama musical. </p> <footer> 4 comentarios <a href=”/comments” title=”Nos interesa tu opinión”>Deja tu comentario </a> </footer> <aside> <h1>Recursos sobre Cradle of Filth</h1> <ul> <li>Biografía</li> <li>Letras</li> <li>Vídeos</li> <li>Web oficial</li> </ul> </aside> </article>
  14. 14. Ejemplo de página <section id=”sidebar”> <section id=”banner”> <img src=”/ad.png” alt=”Hay que hacer algo de caja” /> </section> <nav id=”submenu”> <ul> <li>Entradas para conciertos</li> <li>Foro de debate</li> <li>Visita nuestra tienda</li> </ul> </nav> <footer> <small> Las opiniones vertidas por los que hablan son de ellos nosotros no nos hacemos responsables porque somos, básicamente, unos cobardicas. </small> </footer> </section>
  15. 15. Ejemplo de página <footer> <small> © 2011 Metaleros sin fronteras | Diseño web Tom araya </small> <ul> <li>Conciertos</li> <li>Entrevistas</li> <li>Noticias</li> <li>Contactar</li> </ul> </footer> </body> </html>
  16. 16. Nuevas etiquetas / Compatibilidad con IE • IE 6, 7 y 8 no las soportan (ni esto ni casi nada de html5) • Aún así podemos usarlas • Modernizr • Crearlas mediante javascript • http://remysharp.com/html5-enabling-script
  17. 17. Nuevos elementos • MARK • Resalta un elemento pero sin la importancia semántica de em o de strong (span) • Ejemplo: Resaltar resultados en una búsqueda • <p>El perro de san <mark>roque</mark> no tiene rabo.</p>
  18. 18. Nuevos elementos • TIME • Muestra el tiempo en formato entendible tanto para máquinas como para humanos • (el atmosférico no, el otro) • Heredado de los microformatos <abbr> • El formato es el ISO 8601 • pubdate en article • Pro Tip: @content.created_at.iso8601 <time datetime=”2011-01-04T22:04:49+01:00” pubdate>Martes, 4 de Enero de 2011</ time>
  19. 19. Nuevos elementos • METER • Muestra medidas que forman parte de una escala <meter min="0" max="3000" value="250" title=”Euros”> Ya casi tenemos un 10% recaudado </meter>
  20. 20. Nuevos elementos • PROGRESS • Muestra medidas de algo que está cambiando en este momento <progress min="0" max="90" value="60"> Ya queda menos para que acabe este rollo </progress>
  21. 21. Nuevos elementos • ADDRESS • Sirve para indicar una dirección. Pero no todas las direcciones de la página sino aquellas relevantes al contenido mostrado <address> <a href=”/about_me.html”>Juan Doe</a><br /> Avenida de las acacias, 22<br /> Londres, 343898 </address>
  22. 22. Formularios / Nuevos elementos • PLACEHOLDER • AUTOFOCUS • REQUIRED • AUTOCOMPLETE <label for="nombre">Tu nombre</label> <input type="text" id="nombre" name="nombre" placeholder="Tu nombre y un apellido" /> <label for="empresa">Empresa</label> <input type="text" id="empresa" name="empresa" autocomplete=”off” autofocus /> <form autocomplete=”off”>
  23. 23. Formularios / Nuevos elementos • DATALIST • CONTENTEDITABLE $(function(){ var status = $("#status"); $("span[contenteditable=true]" ).blur(function(){ var field = $(this).attr("id"); var value = $(this).text(); $.post("http://localhost:3000/users/1" ,field + "=" + value, function(data){ status.text(data); } ); }); }); http://media.pragprog.com/titles/bhh5/code/html5_content_editable/show.html
  24. 24. Formularios / Input • SEARCH • URL • EMAIL • PHONE <input id="query" name="query" type="search" placeholder="Busca lo que quieras" /> <input id="email" name="email" type="email"> <input id="website" name="website" type="url"> <input id="phone" name="phone" type="tel">
  25. 25. Formularios / Input • RANGE • DATE • NUMBER • COLOR <label for="handsome">Como eres de guap@?</label> <input id="handsome" name="handsome" type="range" min="1" max="5" value="2" /> <label for="handicap">Que handicap tienes?</label> <input id="handicap" name="handicap" type="number" min="0" max="36" step=”2” /> <label for="shower">Cuando te duchaste por última vez?</label> <input id="shower" name="shower" type="date" value="2011-01-12" /> <label for="hair">Color de pelo</label> <input id="hair" name="hair" type="color" />
  26. 26. Formularios / Validación • REQUIRED • NOVALIDATE • PATTERN • COLOR <input type="text" id="name" name="name" placeholder="Tu nombre y un apellido" required /> <input id="pcode" name="pcode" pattern="[d]{5}" /> <form novalidate> <input type="email" id="email" name="email" novalidate />
  27. 27. Rich Media / Audio • Formatos soportados • AAC Safari 4, Chrome 3, IOS • MP3 IE9, Safari 4, Chrome 3, IOS • Vorbis (OGG) Firefox 3, Chrome 4, Opera 10
  28. 28. Rich Media / Audio • AUTOPLAY • CONTROLS • LOOP • AUTOBUFFER PRELOAD <audio controls autoplay loop preload=”none”> <source src="/Her_ghost_in_the_fog.ogg" type="audio/ogg" /> <source src="/Her_ghost_in_the_fog.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="player.swf? soundFile=Her_ghost_in_the_fog.mp3"> <param name="movie" value="player.swf? soundFile=Her_ghost_in_the_fog.mp3" /> <a href="Her_ghost_in_the_fog.mp3">Descargate el tema en tu 286</a> <p>Un temazo de una de las más grandes bandas de la historia</ p> </object> </audio>
  29. 29. Rich Media / Vídeo • Formatos soportados • H.264 IE9, Safari 4, Chrome 3, IOS • Thedora Firefox 3.5, Chrome 4, Opera 10 • VP8 IE9 (codec), Firefox 4, Chrome 5, Opera 10.7
  30. 30. Formularios / Vídeo • POSTER • CONTROLS <video src="live_bait_for_the_dead.mp4" controls width="480" height="320" poster=”live_bait.png” autobuffer> </video>
  31. 31. Canvas / 2D <canvas id="canvas" width="480" height="320"> <p>No tienes canvas te vamos a poner una fotico pa’ disimular</p> <img src="The_principal_of_evil_made_flesh.jpg" alt="Another top hit"> </canvas> var canvas = document.getElementById('canvas'); var draw_2d = canvas.getContext('2d'); context.lineWidth = 2; context.beginPath(); context.moveTo(0, 40); context.lineTo(30, 0); context.lineTo(60, 40 ); context.lineTo(285, 40 ); context.stroke(); context.closePath();
  32. 32. • SVG Canvas • existía ya y con soporte pero se han decantado por canvas • 3D • Algún día • Rgraph • Librería para generar gráficos • WebGL • Apple, Google, Opera y Mozilla soportan parte de las especificaciones http://learningwebgl.com/blog/
  33. 33. <div id="graph_data"> Canvas / Ejemplo <h1>Browser share for this site</h1> <ul> <li><p data-name="Safari 4" data-percent="15">Safari 4 - 15%</p> </li> <li> <p data-name="Internet Explorer" data-percent="55">Internet Explorer - 5%</p> </li> <li> <p data-name="Firefox" data-percent="14">Firefox - 14%</p> </li> <li> <p data-name="Google Chrome" data-percent="16">Google Chrome - 66%</p> </li> </ul> </div> function canvasGraph(){ var title = $('#graph_data h1').text(); var labels = $("#graph_data>ul>li>p[data-name]").map(function(){ return $(this).attr("data-name"); }); var percents = $("#graph_data>ul>li>p[data-percent]").map(function(){ return parseInt($(this).attr("data-percent")); }); var bar = new RGraph.Bar('browsers', percents); bar.Set('chart.gutter', 50); bar.Set('chart.colors', ['red']); bar.Set('chart.title', title); bar.Set('chart.labels', labels); bar.Draw(); }
  34. 34. Drag and Drop • Especificación creada por Micro$oft • Es un caos • Hay 7 eventos • ondragstart • ondragend • ondragenter • ondragover • ondragleave • ondrop • ondrag
  35. 35. Drag and Drop • DRAGGABLE • auto (defecto) • true • false • DROPZONE • Copy • Move • Link http://html5demos.com/drag
  36. 36. API’s • Características comunes • Sandboxed • Quotas • Transactions • Events
  37. 37. localStorage • Almacenamiento clave/valor • Objetos tipo string • Serializar/desserializar JSON.stringify() y JSON.parse() • window.localStorage() • localStorage.setItem(key, value) • var value = localStorage.getItem(key)
  38. 38. sessionStorage • El contenido se borra al cerrar la sessión • window.sessionStorage() • sessionStorage.setItem(key, value) • var value = sessionStorage.getItem(key)
  39. 39. SQL Storage • La novia cadaver • En noviembre de 2010 se deja de evolucionar. • Firefox no lo implementa. • Safari, Chrome y IOS permiten su uso • Utiliza sqlLite
  40. 40. SQL Storage this.db = openDatabase('geomood', '1.0', 'Geo-Mood Checkins', 8192); this.db.transaction(function(tx) { tx.executeSql("create table if not exists " + "checkins(id integer primary key asc, time integer, latitude float," + "longitude float, mood string)", [], function() { console.log("succ"); } ); }); store.db.transaction(function(tx) { tx.executeSql( "insert into checkins " + "(time, latitude, longitude, mood) values (?,?,?,?);", [checkin.time, checkin.latitude, checkin.longitude, checkin.mood], handler, store.onError ); }); http://www.html5rocks.com/tutorials/offline/storage/
  41. 41. Indexed Database • Será el estandar que todos los browsers implementen • noSql • Almacenamiento clave/valor • documentos almacenados con un id único y cada documento almacena objetos compuestos de clave/valor • Soportado parcialmente por Chrome y Firefox
  42. 42. Indexed Database Modo síncrono var db = indexedDB.open('books', 'Book store', false); if (db.version !== '1.0') { var olddb = indexedDB.open('books', 'Book store'); olddb.createObjectStore('books', 'isbn'); olddb.createIndex('BookAuthor', 'books', 'author', false); olddb.setVersion("1.0"); } // db.version === "1.0"; var index = db.openIndex('BookAuthor'); var matching = index.get('fred'); if (matching) { report(matching.isbn, matching.name, matching.author); } else { report(null); }
  43. 43. Indexed Database Modo asíncrono function findFred() { var store = db.objectStore('books'); var index = store.index('BookAuthor'); var req = index.get('fred'); req.onsuccess = function(event) { var matching = event.result; report(matching.isbn, matching.name, matching.author); } req.onerror = function(event) { report(null); } } var db; var dbRequest = indexedDB.open('books', 'Book store'); dbRequest.onsuccess = function(event) { db = event.result; if (db.version != "1.0") { var versionRequest = db.setVersion("1.0"); versionRequest.ontimeout = function(event) { throw new Error("timeout trying to set version to 1.0"); } versionRequest.onsuccess = function(event) { var store = db.createObjectStore('books', 'isbn'); store.createIndex('BookAuthor', 'books', 'author', false);event.transaction.onabort = function(event) { throw new Error("error while trying to set version to 1.0"); } event.transaction.oncomplete = function(event) { findFred(db); } } } else { findFred(db); } }
  44. 44. Offline support • <html manifest=”notes.manifest”> • Pro Tip: Servir notes.manifest con mime/ type text/cache-manifest • AddType text/cache-manifest .manifest • Si cambiamos los ficheros cacheados incrementamos el número de versión • http://www.w3.org/TR/html5/offline.html
  45. 45. Offline support CACHE MANIFEST # v = 1.0.0 /javascripts/jquery.min.js /javascripts/application.js /images/checked.png /images/unchecked.png NETWORK: payment.cgi CACHE: /stylesheets/screen.css /stylesheets/main.css # Muestra la página offline.html cuando ocurre un error trabajando en modo offline FALLBACK: / /offline.html # El wildcard sirve para indicar que está permitido el acceso a recursos de otros sitios. NETWORK: *
  46. 46. Cross-domain • Para enviar mensajes • postMessage(“ping”, “http://myserver.com/cheers”) • El receptor $(function(){ $(window).bind("message" ,function(event){ $("#message" ).val(event.originalEvent.data); }); }); No todos los navegadores soportan la especificación. jQuery tiene un plugin llamado postMessages que hace lo mismo y funciona de forma idéntica.
  47. 47. Geolocalización • El navegador pregunta al usuario la primera vez si permite o no usar la geolocalización window.onload = function() { var startPos; navigator.geolocation.getCurrentPosition(function(position) { startPos = position; document.getElementById('startLat').innerHTML = startPos.coords.latitude; document.getElementById('startLon').innerHTML = startPos.coords.longitude; }, function(error) { alert('Error occurred. Error code: ' + error.code); // 0: unknown error // 1: permission denied // 2: position unavailable (error response from location provider) // 3: timed out }); };
  48. 48. Geolocalización Para monitorizar su posición ya que getCurrentPosition solo se ejecuta una vez, al cargar la página. navigator.geolocation.watchPosition(function(position ) { document.getElementById('currentLat').innerHTML = position.coords.latitude; document.getElementById('currentLon').innerHTML = position.coords.longitude; });
  49. 49. Geolocalización Si deseamos localizar al usuario a toda costa y no dispone o no nos permite la geolocalización podemos utilizar el api de google para localizarlo por ip if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { showLocation(position.coords.latitude, position.coords.longitude); }); } else { // Implementar http://code.google.com/apis/loader/#ClientLocation };
  50. 50. Historico navegación function supportsHistory(){ return !!(window.history && window.history.pushState); } window.history.length window.history.go(number) window.history.back() window.history.forward() window.history.pushState(data, title, [url]) window.history.replaceState(data, title, [url]) Ejemplo history.pushState(currentPage, document.title, '?x=' + currentPage); Todo esto ya lo hace el plugin de jQuery Addresses (y mas cosas) y es cross browser http://www.asual.com/jquery/address/
  51. 51. Web Sockets var connection = new WebSocket('ws://html5rocks.websocket.org/echo'); // Utilizamos ws como protocolo y existe también wss para los seguros // When the connection is open, send some data to the server connection.onopen = function () { connection.send('Ping'); // Send the message 'Ping' to the server }; // Log errors connection.onerror = function (error) { console.log('WebSocket Error ' + error); }; // Log messages from the server connection.onmessage = function (e) { console.log('Server: ' + e.data); };
  52. 52. Web workers //Inicializamos var worker = new Worker("renderiza_un_3d_complicado.js"); //arrancamos el worker worker.postMessage(); //le mandamos un mensaje worker.postMessage('Hello World'); //recibimos sus mensajes worker.addEventListener('message', function(e) { console.log('Worker said: ', e.data); }, false);
  53. 53. CSS3 • Pseudoclases • Gradientes • Multiple columns • Transformaciones • Media Queries • Web Fonts • Flexible Box Model • Transiciones • Esquinas redondeadas • Interfaces 3D • Sombras
  54. 54. Recursos • HTML5 for web designers - Jeremy Keith (A book apart) • HTML5 & CSS3 - Brian P. Hogan (The pragmatic programmers) • http://www.delicious.com/jorgegorka/html5 • http://www.alvareznavarro.es
  55. 55. Y no olviden supermineralizarse y supervitaminarse

×