1. GonzaloAplicaciones en HTML 5: Prez Los pilares de una @chalalo Miguel Saez Nueva Web @masaez

2. 2

3. PAGE 3

4. http://theinsong.com/wayoutwars

5. Qu es HTML5? HTML5 es el futuro de la Web HTML5 no es (nicamente) un mensaje de Mercadotecnia HTML5 no est completo, todava. HTML5 es muy grande: probarlo no es sencillo HTML5 necesita hacerse de la manera correcta

6. Mapa de HTML5

7. Equipo de Trabajo en W3C HTML

8. Last Update: 13th June 2011 Geolocation ECMAHTML CSS Web Apps SVG

9. HTML5 en IE9 http://bit.ly/IE9Guide HTML5 CSS3 SVG Others New Markup 2D Transforms Shapes ECMA Script 5 (all but Elements Strict Mode) Border Radius Clipping, Masking Native JSON support Canvas Box-Shadow , and (IE8) Audio Fonts (WOFF) Compositing Performance API Video Media Queries Transforms Geo-Location Local Storage Multiple Extensibility Data-uri (IE8) Cross-Window Backgrounds Gradients DOM L2, L3 Messaging Namespaces Interactivity Selectors API L2 Text Selection Linking and Views AJAX Navigation (IE8) Opacity APIs Painting and DOMParser and rgba(), hsl(), hsla( XMLSerializer Parsing SVG in ) Colors ICC v2 and Color HTML Selectors (IE8) Paths Profile Text ARIA Hardware Acceleration

10. Microsoft & HTML5beautyoftheweb.com ietestdrive.com html5labs.com

11. Media

12. Canvas Un boque de elementos que permiten a los desarrolladores dibujar grficos 2D utilizando JavaScript. Algunos mtodos para dibujar son: paths, boxes, circles, text and rasterized images Tu navegador no soporta Canvas! 13

13. Scalable Vector Graphics (SVG) Crear y dibujar grficas vectoriales en 2D usando XML Las imgenes vectoriales compuestas por formas en vez de pixeles. Basado en SVG 1.1 2a edicin especificacin completa Soporte para: DOM tenga acceso completo a los elementos SVG Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patter ns, masking, clipping, markers, linking and views 14

14. HTML5 Soporte para el elemento en HTML5 Formato Estndar de la Industria MPEG-4/H.264 video El Video puede ser compuesto con cualquier otro elemento de la pgina Contenidos HTML, imgenes, grficos SVG Aceleracin por Hardware, decodificacin basada en GPUSad Panda!
Tu navegador no soporta video HTML! 15

15. HTML5 http://html5beats.com Soporte para el elemento HTML5 Estndar de la Industria es MP3 y AAC audio Completamente programable via el DOM Atributos src especifica la ubicacin del archivo fuente autoplay se ejecuta tan pronto termine la carga controls si es necesario utilizar controles de video preload si se necesita ir cargandolo mientras se despliega la carga de pgina 16

16. Dispositivos

17. CSS3 Media Queries Estilo de pginas selectivas basadas en las propiedades del medio de entrega 18

18. Geo-Localizacin Permite que los sitios Web usen la ubicacin para mejorar los servicios Requiere el consentimiento del usuario Navigator.geolocation.getCurrentPosition(); function getLocation() { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); } } function callBack(position) { var accuracy = position.coords[accuracy]; var latitude = position.coords[latitude]; var longitude = position.coords[longitude]; } 19

19. Tecnologas de soporte Offline Local Storage Offline/Online Events File & Blob APIs IndexedDB Sincronizacin de recursos va XMLHttpRequest (XHR) y WebSockets

20. Conceptos de MapeoConcept Relational DB IndexedDB (ISAM DB)Database Database DatabaseTables Tables contain columns and ObjectStore contains rows Javascript objects and keysQuery Mechanism SQL Cursor APIsJoins SQL Application codeTransaction Types & Locks Locks databases, tables, or Lock database on rows on VERSION_CHANGE transaction READ_WRITE Transactions Lock objectStores on READ_ONLY and READ_WRITE transactionsTransaction Commits Transaction creation is explicit Transaction creation is explicit Default is to rollback unless I Default is to commit unless I call commit call abortProperty Lookups SQL Indexes are required to query object properties directlyFilters SQL KeyRange APIs

21. Acceso y carga de datos conIndexedDB var oRequestDB = window.indexedDB.open(Library); oRequestDB.onsuccess = function (event) { db1 = oRequestDB.result; if (db1.version == 1) { txn = db1.transaction([Books],IDBTransaction.READ_ONLY); var objStoreReq = txn.objectStore(Books); var request = objStoreReq.get("Book0"); request.onsuccess = processGet; } };

22. Limitaciones en HTTPHTTP es un protocolo request-replyLas aplicaciones hoy usan workarounds para permitir push

23. Modelos ActualesPolling Peridico El navegador usa XmlHttpRequest para consultar peridicamente al servidor

24. Modelos ActualesLong Polling El Servidor mantiene la solicitud HTTP hasta que hay informacin para devolver El Client enva una nueva solicitud al terminar la anterior

25. WebSockets Tecnologa interoperable nueva, bajo estandarizacin Socket bidireccional Full Duplex API Javascript W3C Secure (SSL) Alta performance Conexiones cross dominio

26. API bajo nivel ASP.NETEl desarrollador acepta elevar a conexin WebSocket HttpContext.Current.AcceptWebSocketRequest( Func myWebSocketApp, AspNetWebSocketOptions optionalSetupInfo );Envo y Recepcin asicrnica de mensajes public async Task MyWebSocketApp(AspNetWebSocketContext context) { var socket = context.WebSocket; var input = await socket.ReceiveAsync(buffer); await socket.SendAsync(outputBuffer,params); }

27. Recursos para el Desarrollador Noticias: blogs.msdn.com/IE Demostraciones: www.beautyoftheweb.com Ejemplos Tcnicos: www.ietestdrive.com HTML5 Labs: www.html5labs.com

28. Gonzalo Prez Miguel Angel SaezMVP ASP.NET Microsoft Argentina@chalalo @masaez