Your SlideShare is downloading. ×
0
GonzaloAplicaciones en HTML 5:   Pérez   Los pilares de una     @chalalo                          Miguel Saez      Nueva W...
2
PAGE 3
http://theinsong.com/wayoutwars
¿Qué es “HTML5”? HTML5 es el futuro de la Web HTML5 no es (únicamente) un mensaje de Mercadotecnia HTML5 no está completo,...
Mapa de “HTML5”
Equipo de Trabajo en W3C HTML              •              •              •              •              •
Last Update: 13th June 2011                                                Geolocation                                    ...
HTML5 en IE9                                              http://bit.ly/IE9Guide      HTML5                  CSS3         ...
Microsoft & HTML5beautyoftheweb.com ietestdrive.com   html5labs.com
Media
Canvas  Un boque de elementos que permiten a los desarrolladores   dibujar gráficos 2D utilizando JavaScript.     Alguno...
Scalable Vector Graphics (SVG)   Crear y dibujar gráficas vectoriales en 2D usando XML       Las imágenes vectoriales co...
HTML5 <video>  Soporte para el elemento <video> en HTML5      Formato Estándar de la Industria MPEG-4/H.264 video      ...
HTML5 <audio>                                               http://html5beats.com Soporte para el elemento HTML5 <audio> ...
Dispositivos
CSS3 Media Queries  Estilo de páginas selectivas basadas en las propiedades del   medio de entrega<link href=“mobile.css"...
Geo-Localización Permite que los sitios Web usen la ubicación para mejorar los  servicios       Requiere el consentimien...
Tecnologías de soporte Offline•   Local Storage•   Offline/Online Events•   File & Blob APIs•   IndexedDB•   Sincronizació...
Conceptos de MapeoConcept                     Relational DB                      IndexedDB (ISAM DB)Database              ...
Acceso y carga de datos conIndexedDB var oRequestDB = window.indexedDB.open(“Library”); oRequestDB.onsuccess = function (e...
Limitaciones en HTTPHTTP es un protocolo request-replyLas aplicaciones hoy usan workarounds para permitir push
Modelos ActualesPolling Periódico  El navegador usa XmlHttpRequest para consultar  periódicamente al servidor
Modelos ActualesLong Polling  – El Servidor mantiene la solicitud HTTP hasta que hay    información para devolver  – El Cl...
WebSockets• Tecnología interoperable nueva, bajo  estandarización• Socket bidireccional Full Duplex• API Javascript W3C• S...
API bajo nivel ASP.NETEl desarrollador acepta elevar a conexión WebSocket  HttpContext.Current.AcceptWebSocketRequest(    ...
Recursos para el Desarrollador•   Noticias: blogs.msdn.com/IE•   Demostraciones: www.beautyoftheweb.com•   Ejemplos Técnic...
Gonzalo Pérez   Miguel Angel SaezMVP ASP.NET     Microsoft Argentina@chalalo        @masaez
Aplicaciones en HTML 5: Los pilares de una Nueva Web
Upcoming SlideShare
Loading in...5
×

Aplicaciones en HTML 5: Los pilares de una Nueva Web

6,057

Published on

Slides de Charla de HTML5 que di junto al master Miguel Saez en el TechDays 2011

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,057
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
77
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • It’s always fun to look back at where we started, and I want to take a minute to do that. The Microsoft.com website in early 2000 was a pretty spartan site, there was no interactivity, it certainly wasn’t very pretty, and the markup used, well… [CLICK] Well that’s a whole different story. By todays standards, this is looking pretty scary with table based layout, &lt;font&gt; elements, and all.
  • And more recently, we’ve seen an up-surge of casual games, like Farmville that rely on browser add-ons to create rich, interactive experiences. But we’ve heard from you, that you want to build web applications based on web standards, and not have to rely on 3rd party add-ons.
  • Taking the HTML5 Working Group as an example, Paul Cotton (Microsoft Corp) is a co-chair of the group – we’ve been leading this space for many years!In addition to Paul, more than 16 people from Microsoft are working just on this working group – plus many others involved in other WGs.
  • Building a standard is like planning a building. You go through different steps and it’s important to plan all levels carefully – or you risk to hit issues along the road.
  • If we look at the broad spectrum, today there are more than 100 specifications that fall under the “HTML5” umbrella. As you can see, all of them follow a different status.Some of them are mature (Recommendation), some are still work in progress (Working Draft) and some just submitted (First Published WD)As we will see later, with Internet Explorer we wanted to provide an interoperable implementation of these standards – with clear expectations and deliverables for the developer community.
  • Vamos a Demo- Soporte en MVC4 (Elementos Semánticos)- Intellisense- Media Query- Modernizr- Feature vs Browser Detection
  • Transcript of "Aplicaciones en HTML 5: Los pilares de una Nueva Web"

    1. 1. GonzaloAplicaciones en HTML 5: Pérez Los pilares de una @chalalo Miguel Saez Nueva Web @masaez
    2. 2. 2
    3. 3. PAGE 3
    4. 4. http://theinsong.com/wayoutwars
    5. 5. ¿Qué es “HTML5”? HTML5 es el futuro de la Web HTML5 no es (únicamente) un mensaje de Mercadotecnia HTML5 no está completo, todavía. HTML5 es muy grande: probarlo no es sencillo HTML5 necesita hacerse de la manera correcta
    6. 6. Mapa de “HTML5”
    7. 7. Equipo de Trabajo en W3C HTML • • • • •
    8. 8. Last Update: 13th June 2011 Geolocation ECMAHTML CSS Web Apps SVG
    9. 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. 10. Microsoft & HTML5beautyoftheweb.com ietestdrive.com html5labs.com
    11. 11. Media
    12. 12. Canvas  Un boque de elementos que permiten a los desarrolladores dibujar gráficos 2D utilizando JavaScript.  Algunos métodos para dibujar son: paths, boxes, circles, text and rasterized images<canvas id="myCanvas" width="200" height="200"> ¡Tu navegador no soporta Canvas!</canvas><script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);</script> 13
    13. 13. Scalable Vector Graphics (SVG)  Crear y dibujar gráficas vectoriales en 2D usando XML  Las imágenes vectoriales compuestas por formas en vez de pixeles.  Basado en SVG 1.1 2a edición – especificación 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 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg> 14
    14. 14. HTML5 <video>  Soporte para el elemento <video> en HTML5  Formato Estándar de la Industria MPEG-4/H.264 video  El Video puede ser compuesto con cualquier otro elemento de la página  Contenidos HTML, imágenes, gráficos SVG  Aceleración por Hardware, decodificación basada en GPU<video src="video.mp4" id="videoTag"> <source src="video.webm" /> <span>Sad Panda!<br /> ¡Tu navegador no soporta video HTML!…</span> <!– Puedes pegar Flash or Video Silverlight Aquí --></video>15
    15. 15. HTML5 <audio> http://html5beats.com Soporte para el elemento HTML5 <audio>  Estándar de la Industria es MP3 y AAC audio  Completamente programable via el DOM Atributos  src – especifica la ubicación 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 página <audio src="audio.mp3" id="audioTag" autoplay controls> <!-- ¡Tu navegador no soporta audio! --> <!–- Puedes pegar audio de Flash o Silverlight aquí --> </audio> 16
    16. 16. Dispositivos
    17. 17. CSS3 Media Queries  Estilo de páginas selectivas basadas en las propiedades del medio de entrega<link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“text/css" /><link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max-width:1024px)" type="text/css" /><link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" /> 18
    18. 18. Geo-Localización Permite que los sitios Web usen la ubicación 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. 19. Tecnologías de soporte Offline• Local Storage• Offline/Online Events• File & Blob APIs• IndexedDB• Sincronización de recursos vía XMLHttpRequest (XHR) y WebSockets
    20. 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. 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. 22. Limitaciones en HTTPHTTP es un protocolo request-replyLas aplicaciones hoy usan workarounds para permitir push
    23. 23. Modelos ActualesPolling Periódico El navegador usa XmlHttpRequest para consultar periódicamente al servidor
    24. 24. Modelos ActualesLong Polling – El Servidor mantiene la solicitud HTTP hasta que hay información para devolver – El Client envía una nueva solicitud al terminar la anterior
    25. 25. WebSockets• Tecnología interoperable nueva, bajo estandarización• Socket bidireccional Full Duplex• API Javascript W3C• Secure (SSL)• Alta performance• Conexiones cross dominio
    26. 26. API bajo nivel ASP.NETEl desarrollador acepta elevar a conexión WebSocket HttpContext.Current.AcceptWebSocketRequest( Func<AspNetWebSocketContext,Task> myWebSocketApp, AspNetWebSocketOptions optionalSetupInfo );Envío y Recepción asicrónica de mensajes public async Task MyWebSocketApp(AspNetWebSocketContext context) { var socket = context.WebSocket; … var input = await socket.ReceiveAsync(buffer); … await socket.SendAsync(outputBuffer,…params…); }
    27. 27. Recursos para el Desarrollador• Noticias: blogs.msdn.com/IE• Demostraciones: www.beautyoftheweb.com• Ejemplos Técnicos: www.ietestdrive.com• HTML5 Labs: www.html5labs.com
    28. 28. Gonzalo Pérez Miguel Angel SaezMVP ASP.NET Microsoft Argentina@chalalo @masaez
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×