Programación web con HTML5

4,326 views

Published on

Taller realizado en la Campus Party Valencia 2011

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,326
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
90
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Programación web con HTML5

  1. 1. Programación Web con HTML5 Campus Party 2011 #CPES15 - #CPIN Parte 1
  2. 2. Jorge del Casar @jorgecasarMadrid Google Technology User Group GTUG Madrid · Frontend Spain · ShoTools.com
  3. 3. ¿Qué NO es HTML5?CSS3JS APIs (GEOlocation, workers, Drag&Drop, Web storage...)Web Apps
  4. 4. ¿Qué NO es HTML5?Todo lo que esté fuera del lenguaje de marcado
  5. 5. ¿Qué es HTML5?Lenguaje de marcadoWeb FormsVideo & AudioCanvasSVG
  6. 6. ¿Qué es HTML5?La base de las aplicaciones web
  7. 7. CSS2.1 GEO location CSS1 Storage CSS JS APis CSS3 web forms Drag & Drop SVG HTML5 video canvas audio Silverlight FlashWeb Apps
  8. 8. Historia reciente
  9. 9. 2004 - WHATWGFormada por gente de Mozilla, Opera yApple para trabajar en avanzar HTMLen respuesta a la decisión de la W3C deabandonar HTML en favor detecnologías basadas en XML
  10. 10. 2007 - WHATWG + W3CSe forma el grupo de trabajo HTMLpara trabajar conjuntamenteAmbos grupos trabajaron juntos en eldesarrollo de la especificación HTML5
  11. 11. 2009 - R.I.P. XHTMLReconociendo el valor del grupo detrabajo de XHTML 2 la W3C decideabandonar el desarrollo
  12. 12. 2011 - Logo HTML5 http://www.w3.org/html/logo/
  13. 13. SemánticaDar significado a laestructuraSet de etiquetas másricas RDFa Microdatos Microformatos
  14. 14. header nav headernav section figure figure video figcaption figcaption header section header header article article article aside footer
  15. 15. Nuevas etiquetas av tim e gr ess met er n pro rp audio ou tput list ary key ta f ooter su mm da gen figure details artmark vid icl command eo e ad er de he sisource canv a oup figc as wb rt hgr ruby apti on r
  16. 16. Offline & almacenamientoAplicaciones web sinconexión Caché Local storage Indexed DB File API
  17. 17. Web storage Pares etiqueta/valor Etiqueta: string Valor: cualquier objeto Javascriptvar input = document.querySelector(‘input[name=‘nombre’]’);storageSaveButton.addEventListener(‘click’, function(){ window.localStorage.setItem(‘nombre’, input.value);}, false);input.value = window.localStorage.getItem(‘nombre’);
  18. 18. Offline web aplications Navegación offline Recursos cacheados cargan más rápido Solo descarga los recursos que cambian<html manifest=”cache.appcache”>window.applicationCache.addEventListener(‘updateready’, function(e){ if(window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); if(confirm(‘Una nueva versión está disponible. ¿Descargar?’)) { window.location.reload(); } }}, false);
  19. 19. Acceso al dispositivoGeolocalización APIMicrófonoCámaraDatos locales(contactos y eventos)Orientación
  20. 20. Drag & Dropdocument.addEventListener(‘dragstart’, function(e){ event.dataTransfer.setData(‘text’, ‘Texto personalizado’); event.dataTransfer.effectAllowed = ‘copy’;}, false);
  21. 21. API de Geolocalizaciónif (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, handlePositionError);}function showPosition(position) { var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latLng, map: map }); map.setCenter(latLng);}
  22. 22. ConectividadChats en tiempo realJuegos más rapidosMejor comunicaciónNotificaciones Push(Web Sockets, Server-Sent Events)
  23. 23. WebSocketsvar socket = new WebSocket(url);socket.onopen = function(e) { socket.send(‘Hola, socket’);}socket.onmessage = function(e) { alert(e.data);}socket.close = function(e) { alert(‘Adios’);}
  24. 24. MultimediaAudioVideo
  25. 25. 3D, gráficos y efectosSVGCanvasWebGLCSS3 3D
  26. 26. SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"height="100%" width="100%" viewBox="0 0 512 512" version="1.1"><polygon points="74.633,100.62 437.37,100.62 404.32,470.82 255.78,512107.64,470.88" fill="#E44D26"/><polygon points="376.03,447.25 404.27,130.89 256,130.89 256,480.52"fill="#F16529"/><polygon points="195.91,268.22 191.76,221.72 256,221.72 256,176.3 255.84,176.3142.13,176.3 143.22,188.49 154.38,313.63 256,313.63 256,268.22" fill="#EBEBEB"/><polygon points="255.8,386.21 205.23,372.55 201.99,336.33 177.42,336.33156.41,336.33 162.77,407.63 255.79,433.46 256,433.4 256,386.15" fill="#EBEBEB"/> <pathd="m108.38,0h23.077v22.8h21.11v-22.8h23.078v69.044h-23.08v-23.12h-21.11v23.12h-23.077v-69.044z"/><pathd="M205.99,22.896h-20.312v-22.896h63.72v22.896h-20.327v46.148h-23.078v-46.148z"/><pathd="m259.51,0h24.063l14.81,24.26,14.78-24.26h24.072v69.044h-22.977v-34.222l-15.877,24.549h-0.397l-15.89-24.549v34.222h-22.58v-69.044z"/><path d="m348.72,0h23.084v46.222h32.453v22.822h-55.53v-69.044z"/><polygon points="255.84,313.63 311.76,313.63 306.49,372.52 255.84,386.19255.84,433.44 348.94,407.63 349.62,399.96 360.29,280.41 361.4,268.22 349.16,268.22255.84,268.22" fill="#FFF"/><polygon points="255.84,204.51 255.84,221.6 255.84,221.72 365.38,221.72365.38,221.72 365.53,221.72 366.44,211.51 368.51,188.49 369.6,176.3 255.84,176.3"fill="#FFF"/></svg>
  27. 27. Canvasfunction draw() { var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(40,0,0)”; ctx.fillRect (20, 20, 65, 60); ctx.fillStyle = “rgba(0, 0, 160, 0.5)”; ctx.fillRect (40, 40, 65, 60); }}
  28. 28. Rendimiento e integraciónWeb WorkersXMLHttpRequest 2
  29. 29. Web Workers// main.jsvar worker = new Worker(‘tarea.js’);worker.onmessage = function(e) { alert(e.data);};worker.postMessage(‘data’);// tarea.jsself.onmessage = function(e) { // Algunas tareas... self.postMessage(‘recibido: ’ e.data);}
  30. 30. Estilos CSS3EstilosEfectosWeb Open Font
  31. 31. Insignias
  32. 32. Progressive Enhancement
  33. 33. Graceful Degradation
  34. 34. ¿Cómo empezar?
  35. 35. !DOCTYPE XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5<!DOCTYPE html>
  36. 36. Encoding XHTML 1.0 Strict<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> HTML5<meta charset="utf-8" />
  37. 37. Links XHTML 1.0 Strict<link rel="stylesheet" type="text/css" href="style.css"/> HTML5<link rel=stylesheet href=style.css>
  38. 38. Script XHTML 1.0 Strict<script type="text/javascript" src="jquery.js"></script> HTML5<script src=jquery.js></script>
  39. 39. Polyfills html5shim<!-- [if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  40. 40. DemoConvertir una web cualquiera a HTML5
  41. 41. Programación Web con HTML5 Campus Party 2011 #CPES15 - #CPIN Parte 2
  42. 42. Concurso GTUG Convertir una web a HTML5versiones tablet y smartphone
  43. 43. Premio del concurso
  44. 44. Características Chrome Book12,1 pulgadas1,48KgIntel® AtomTM Dual-CoreWebcam HD2 USBRanura tarjetas 4 en 1Minipuerto VGA
  45. 45. HTML5 BOILERPLATETodos los navegadores (IE6)Preparado para HTML5.Recomendaciones sobre caché y compresiónConfiguración por defecto basada en buenas prácticasOptimizaciones para navegadores móvilesMejora progresiva con degradación gradual … sí, loconseguimos!Clases específicas para IEClases .no-js y .jsCompleta e interconectada test suite
  46. 46. HTML5 BOILERPLATEMedir el rendimiento de Javascriptconsole.logCSS para impresiónMarcado y estructura CSS adaptables a Smartphones ytabletsAjuste pngfix para IE6 incluído.Clases .clearfix, .visuallyhidden.htaccess para HTML5 y mayor velocidadAlojamiento CDN de jQuery con sistema de anticaídas
  47. 47. <html> Detectar el navegador Detectar capacidades<!--[if lt IE 7 ]> <html class="no-js ie6" lang="es"> <![endif]--><!--[if IE 7 ]> <html class="no-js ie7" lang="es"> <![endif]--><!--[if IE 8 ]> <html class="no-js ie8" lang="es"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="es"> <!--<![endif]-->
  48. 48. Chrome Frame Google Chrome en IE<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  49. 49. Librerías que usajQuery · http://jquery.com/QUnit · http://docs.jquery.com/Qunitmodernizr · http://www.modernizr.com/DD_belatedPNG · http://www.dillerdesign.com/experiment/DD_belatedPNG/
  50. 50. jQuery31KB (Minified and Gzipped)Soporta selectores CSS3 y másIE 6.0+, FF 2.0+, Safari 3.0+, Opera9.0+, Chrome
  51. 51. QUnit test("a basic test example", function() {Unit testing ok( true, "this test is fine" ); var value = "hello";para javascript equals( "hello", value, "We expect value to be hello" ); }); module("Module A"); test("first test within module", function() { ok( true, "all pass" ); }); test("second test within module", function() { ok( true, "all pass" ); }); module("Module B"); test("some other test", function() { expect(2); equals( true, false, "failing test" ); equals( true, true, "passing test" ); });
  52. 52. Modernizrcompatibilidad con HTML5 y CSS3
  53. 53. Modernizrsoporte PNG transparentes en IE6
  54. 54. Formularios
  55. 55. Nuevos atributos placeholder required autofocus novalidate<input id="buscar" placeholder=”Buscar” autofocus required><script>if (!("autofocus" in document.createElement("input"))) { document.getElementById("buscar").focus();}var elements = document.getElementsByTagName("INPUT");for (var i=0; i<elements.length; i++) { elements[i].setCustomValidity("This field cannot be left blank");}</script>
  56. 56. Imágeneshttp://www.w3.org/html/logo/http://jayinreallife.files.wordpress.com/2010/06/evolution.jpghttp://blogidol.ca/wp-content/uploads/2010/04/html.jpghttp://swwweet.com/presentaciones/viajartiempo/
  57. 57. <mark>Gacias</mark> @jorgecasar #CPES15 - #CPIN

×