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.
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
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
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
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
Editor's Notes
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, <font> 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