Este documento describe las nuevas características de HTML5, incluyendo Canvas, SVG, video, audio, almacenamiento local, geolocalización, IndexedDB, WebSockets y CSS3 Media Queries. También discute las limitaciones del protocolo HTTP y cómo las nuevas tecnologías de HTML5 abordan esto permitiendo comunicación bidireccional y carga de datos sin conexión.

1. Gonzalo
Aplicaciones en HTML 5: Pérez
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, todavía.
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
•
•
•
•
•

9. Last Update: 13th June 2011
Geolocation
ECMA
HTML CSS Web Apps SVG

10. 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

11. Microsoft & HTML5
beautyoftheweb.com ietestdrive.com html5labs.com

12. Media

13. 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

14. 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

15. 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

16. 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

17. Dispositivos

18. 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

19. 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

20. Tecnologías de soporte Offline
• Local Storage
• Offline/Online Events
• File & Blob APIs
• IndexedDB
• Sincronización de recursos vía
XMLHttpRequest (XHR) y WebSockets

21. Conceptos de Mapeo
Concept Relational DB IndexedDB (ISAM DB)
Database Database Database
Tables Tables contain columns and ObjectStore contains
rows Javascript objects and keys
Query Mechanism SQL Cursor APIs
Joins SQL Application code
Transaction 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
transactions
Transaction Commits Transaction creation is explicit Transaction creation is explicit
Default is to rollback unless I Default is to commit unless I
call commit call abort
Property Lookups SQL Indexes are required to query
object properties directly
Filters SQL KeyRange APIs

22. Acceso y carga de datos con
IndexedDB
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;
}
};

23. Limitaciones en HTTP
HTTP es un protocolo request-reply
Las aplicaciones hoy usan workarounds para permitir push

24. Modelos Actuales
Polling Periódico
El navegador usa XmlHttpRequest para consultar
periódicamente al servidor

25. Modelos Actuales
Long 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

26. WebSockets
• Tecnología interoperable nueva, bajo
estandarización
• Socket bidireccional Full Duplex
• API Javascript W3C
• Secure (SSL)
• Alta performance
• Conexiones cross dominio

27. API bajo nivel ASP.NET
El 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…);
}

28. Recursos para el Desarrollador
• Noticias: blogs.msdn.com/IE
• Demostraciones: www.beautyoftheweb.com
• Ejemplos Técnicos: www.ietestdrive.com
• HTML5 Labs: www.html5labs.com

29. Gonzalo Pérez Miguel Angel Saez
MVP ASP.NET Microsoft Argentina
@chalalo @masaez