Vídeo de la presentación: http://www.youtube.com/watch?v=1hR7EtD6Bns HTML5: ¿Qué es HTML5? Tecnologías de la familia HTML5: - HTML5 - Canvas - SVG - Geolocalización - Caché - Base de datos - Web workers Más información: http://desarrolloweb.dlsi.ua.es Autor: Sergio Luján Mora, profesor de la Universidad de Alicante (http://www.ua.es)

1. HTML5:¿Qué es HTML5? Sergio Luján Mora sergio.lujan@ua.es HTML5-02

2. Vídeo de esta presentación Puedes ver esta presentación en vídeo: http://www.youtube.com/watch?v=1hR7EtD6Bns

9. HTML CSS DOM Javascript dhtml

10. Dhtml XHR XML JSON ajax

11. Geolocation Cache database Web workers Ajax HTML5 CANVAS SVG HTML5

13. <article> <aside> <audio> <datalist> <footer> <header> <hgroup> <meter> <nav> <progress> <section> <time>

14. <canvas id="myDrawing" width="200" height="200"><p>Tunavegador no admite canvas.</p></canvas> vardrawingCanvas = document.getElementById('myDrawing');// Comprueba si el navegador admite canvasif(drawingCanvas.getContext) {// Inicializa el contexto de dibujo en 2 dimensionesvarcontext = drawingCanvas.getContext('2d');// Dibuja un arco context.arc(100, 100, 50, 0, Math.PI*2, true); <canvas> <canvas id="myDrawing" width="200" height="200"><p>Tunavegador no admite canvas.</p></canvas>

17. <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" />

18. navigator.geolocation.getCurrentPosition( function(position) { varlat = position.coords.latitude; varlon = position.coords.longitude; showLocation(lat, lon); } );

19. CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js <bodymanifest="./cache.manifest"> </body>

20. vardb = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); functionsaveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } ); }

22. <script> varworker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script>

30. Más información: http://desarrolloweb.dlsi.ua.es/ sergio.lujan@ua.es

31. Créditos de fotografías e imágenes: http://www.sxc.hu/photo/1213666 http://www.w3.org/html/logo/ http://www.w3.org/Consortium/facts.html http://dev.xguru.net/html5/src/html5timeline.png http://www.sxc.hu/photo/1238327