Вы находитесь на странице: 1из 29

Aplicaciones en HTML 5:

Los pilares de una


Nueva Web

Gonzalo
Prez
@chalalo
Miguel Saez
@masaez

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, todava.

HTML5 es muy grande: probarlo no es sencillo


HTML5 necesita hacerse de la manera correcta

Mapa de HTML5

Equipo de Trabajo en W3C HTML

HTML

CSS

Web Apps

SVG

Geolocation
ECMA

Last Update: 13th June 2011

HTML5 en IE9
CSS3

HTML5
New Markup
Elements
Canvas
Audio
Video
Local Storage
Cross-Window
Messaging
Text Selection
APIs
Parsing SVG in
HTML

2D Transforms
Border Radius
Box-Shadow
Fonts (WOFF)
Media Queries
Multiple
Backgrounds
Namespaces
Opacity
rgba(), hsl(),
hsla()
Selectors (IE8)

http://bit.ly/IE9Guide
SVG

Others

Shapes
Clipping,
Masking, and
Compositing
Transforms
Extensibility
Gradients
Interactivity
Linking and Views
Painting and
Colors
Paths
Text

ECMA Script 5 (all but


Strict Mode)
Native JSON support
(IE8)
Performance API
Geo-Location
Data-uri (IE8)
DOM L2, L3
Selectors API L2
AJAX Navigation (IE8)
DOMParser and
XMLSerializer
ICC v2 and Color
Profile
ARIA

Hardware Acceleration

Microsoft & HTML5

beautyoftheweb.com ietestdrive.com

html5labs.com

Media

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

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, patterns, 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

HTML5 <video>
Soporte para el elemento <video> 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 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

HTML5 <audio>

http://html5beats.com

Soporte para el elemento HTML5 <audio>


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

<audio src="audio.mp3" id="audioTag" autoplay controls>


<!-- Tu navegador no soporta audio! -->
<!- Puedes pegar audio de Flash o Silverlight aqu -->
</audio>

16

Dispositivos

CSS3 Media Queries


Estilo de pginas 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

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

Tecnologas de soporte Offline

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

Conceptos de Mapeo
Concept

Relational DB

IndexedDB (ISAM DB)

Database

Database

Database

Tables

Tables contain columns and


rows

ObjectStore contains
Javascript objects and keys

Query Mechanism

SQL

Cursor APIs

Joins

SQL

Application code

Transaction Types & Locks

Locks databases, tables, or


rows on
READ_WRITE Transactions

Lock database on
VERSION_CHANGE transaction
Lock objectStores on
READ_ONLY and READ_WRITE
transactions

Transaction Commits

Transaction creation is explicit


Default is to rollback unless I
call commit

Transaction creation is explicit


Default is to commit unless I
call abort

Property Lookups

SQL

Indexes are required to query


object properties directly

Filters

SQL

KeyRange APIs

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;
}
};

Limitaciones en HTTP
HTTP es un protocolo request-reply

Las aplicaciones hoy usan workarounds para permitir push

Modelos Actuales
Polling Peridico

El navegador usa XmlHttpRequest para consultar


peridicamente al servidor

Modelos Actuales
Long Polling

El Servidor mantiene la solicitud HTTP hasta que hay


informacin para devolver
El Client enva una nueva solicitud al terminar la
anterior

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

API bajo nivel ASP.NET


El desarrollador acepta elevar a conexin WebSocket
HttpContext.Current.AcceptWebSocketRequest(
Func<AspNetWebSocketContext,Task> 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);
}

Recursos para el Desarrollador

Noticias: blogs.msdn.com/IE
Demostraciones: www.beautyoftheweb.com
Ejemplos Tcnicos: www.ietestdrive.com
HTML5 Labs: www.html5labs.com

Gonzalo Prez
MVP ASP.NET
@chalalo

Miguel Angel Saez


Microsoft Argentina
@masaez

Вам также может понравиться