Date post: | 07-Feb-2017 |
Category: |
Software |
Upload: | mariano-sanchez |
View: | 38 times |
Download: | 0 times |
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(); }}