HTML5 + ASP.NET

Ignacio LópezWormhole IT

Rodolfo FinochiettiLagash

Mariano SánchezLagash

Desarrollando para dispositivos Móviles con

2

W3C HTML Working GroupChairSam Ruby (IBM)Paul Cotton (Microsoft)Maciej Stachowiak (Apple)40 Organizaciones Miembro, 411 Participantes, 280 Expertos Invitados16 people from Microsoft teams

9 Publicaciones• HTML5• HTML Canvas 2D Context• HTML: The Markup• HTML5 diffs from HTML4• Polyglot MarkupRecomendaciones Producidas libres de ganancia

First Published Working Draft Working Draft Candidate

RecommendationLast Call Recommendation

HTML5 W3C

HTML

HTML5Canvas 2D Context

Microdata

HTML+RDFa

HTML5 M

arkupHTM

L5 Diff from HTM

L4Polyglot MarkupText alternatives

CSS

CSS Snapshot 2007CSS Nam

espacesCSS Paged M

ediaCSS Print Profile

CSS Values and UnitsCSS Cascading and Inheritance

CSS TextCSS W

riting Modes

CSS Line GridCSS Ruby

CSS Generated Content for Paged Media

CSS Backgrounds and BordersCSS Fonts

CSS Basic Box Model

CSS Multi-colum

n LayoutCSS Tem

plate LayoutCSS M

edia QueriesCSS SpeechCSS Color

CSS Basic User Interface CSS Scoping

CSS Grid PositioningCSS Flexible Box Layout

CSS Image Values

CSS 2D Transformations

CSS 3D Transformations

CSS TransitionsCSS Anim

ations

Web Apps

CORSElem

ent TraversalFile API

Index DBProgram

mable HTTP Caching and Serving

Progress EventsSelectors API

Selectors API L2Server-Sent Events

Uniform M

essaging PolicyW

eb DOM CoreW

eb SQL DatabaseW

eb IDLW

eb Sockets APIW

eb StorageW

eb Workers

XmlHttpRequest

XmlHttpRequest L2

DOM L1

DOM L2 Core

DOM L2 Views

DOM L2 Events

DOM L2 Style

DOM L2 Traversal and Range

DOM L2 HTM

LDOM

L3 CoreDOM

L3 EventsDOM

L3 Load and SaveDOM

L3 ValidationDOM

L3 XPathDOM

L3 Views and Formatting

DOM L3 Abstract Schem

as

SVG

Docum

ent StructureBasic Shapes

PathsText

Transforms

Painting, Filling, ColorScriptingStyling

Gradients and Patterns

SMIL

FontsFilters

GeolocationGeolocation API

ECMA

ECMA Script

262

ECMAScript 262

First Public Working Draft Working Draft Last Call

Candidate Recommendati

onRecommendation

Site Ready HTML5

El enfoque de Microsoft a HTML5

Under DevelopmentFeatures Emerging Standards

beautyoftheweb.com ietestdrive.com html5labs.com

IE9 IE Platform Previews HTML5 Labs

HTML5 in IE9HTML5

• New Markup Elements

• Canvas• Audio• Video• Local Storage• Cross-Window

Messaging• Text Selection APIs• Parsing SVG in HTML

CSS3• 2D Transforms• Border Radius• Box-Shadow• Fonts (WOFF)• Media Queries• Multiple

Backgrounds• Namespaces• Opacity• rgba(), hsl(), hsla()• Selectors (IE8)

SVG• Shapes• Clipping, Masking,

and Compositing• Transforms• Extensibility• Gradients• Interactivity• Linking and Views• Painting and Colors• Paths• Text

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

http://bit.ly/IE9Guide

Hardware Acceleration

HTML5 en IE10 Platform PreviewsHTML5

• Drag&Drop• File API• Forms Validation• Sandbox• Web Workers• Web Sockets• Async• AppCache

CSS3• Grid• Flexbox• Gradient• Multi-Column• Floats• Transforms• Animations• Gradients• Transitions

Others• Web Performance

APIs• ECMA Script 5 Strict

Mode• Advanced Hit

Testing APIs• Media Queries

Listeners• Removal of Style

Sheet Limits

http://bit.ly/IE10Guide

HTML5 hoy

Windows 8

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Metro style Apps

Communication

& DataApplication Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em S

ervi

ces

View

Mod

el

Cont

rolle

rCo

re Windows Core OS Services

Communication

& DataApplication Model

Devices & Printing

Graphics & Media

Syst

em S

ervi

ces

Core

Novedades en ASP.NET MVC4

Nuevos Features de ASP.NET MVC 4• Bundling/Minification Support• Database Migrations• Mobile Web• Asynchronous Support• Web APIs• Real Time Communication

Demo

ASP.NET MVC 4

File -> New Project

Bundling y Minification

Bundling y MinificationMejora la performance de carga de JavaScript y CSSReduciendo # y tamaño de requests HTTP

Funciona por convención (no requiere configuración)

Totalmente adaptable y extensible

Bundling and Minification

Demo

ASP.NET MVC 4

Bundling & Minification

URL Resolution Enhancements• Razor ahora resuelve ~/ dentro de los atributos

HTML

• Hoy se escribe:

• Razor ahora nos permite escribir:

<script src=”@Url.Content(“~/Scripts/Site.js”)”></script>

<script src=”~/Scripts/Site.js”></script>

Conditional Attribute Enhancements• Hoy se escribe:

@{     string myClass = null;      if (someCondition) {          myClass = ”shinyFancy”;     }}

<div @{if (myClass != null) { <text>class=”@myClass”</text> } }>Content</div>

Conditional Attribute Enhancements• Razor ahora nos permite escribir:

• Y el atributo se va a omitir automaticamente si el valor es null

@{     string myClass = null;      if (someCondition) {          myClass = ”shinyFancy”;     }}

<div class=”@myClass”>Content</div>

Mobile Web

Mobile web con ASP.NET MVC 4Adaptive Rendering

Vía CSS Media Queries

Display ModesVistas adaptadas por dispositivos

Mobile TemplateUtilizando jQuery.Mobile

Adaptive Rendering

Display Modes

Mobile Template

Demo

ASP.NET MVC 4

Mobile Web con ASP.NET MVC 4

Asynchronous Support

Asynchronous SupportPorque async en el server?Porque nos permite usar de manera mas eficiente los recurso del Server

Y como funciona?Al momento de invocar a un resource remoto, el controller le cede el control permitiendole reutilizar el thread mientras espera la respuesta.Cuando la llamada remota se completa, el controller es re-scheduleado para completar su ejecución.Menor # de threads corriendo -> aumenta la escalabilidad

El uso de async en el servicio no se expone a browsers/clienteshttp://myserver.com/products -> la misma URL puede ser implementada en ASP.NET usando un controller sincrónico o asincronico.

Async en MVC hoypublic class Products : AsyncController {

public void IndexAsync() {

    WebClient wc1 = new WebClient();

    AsyncManager.OutstandingOperations.Increment();

    wc1.DownloadStringCompleted += (sender, e) => {        AsyncManager.Parameters[“result"] = e.Result;        AsyncManager.OutstandingOperations.Decrement();    };

    wc1.DownloadStringAsync(new Uri("http://www.bing.com/")); }  public ActionResult IndexCompleted(string result) {    return View(); }}

Async en MVC con VS 11

public class Products : Controller {

public async Task<ActionResult> IndexAsync() {

WebClient web = new WebClient();

    string result = await web.DownloadStringTaskAsync("www.bing.com/");     return View(); }}