Slides de Charla de HTML5 que di junto al master Miguel Saez en el TechDays 2011
Transcript of Aplicaciones en HTML 5: Los pilares de una Nueva Web
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