blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

ASP.NET Loves HTML5 #TEE12

Mads Kristensen (@mkristensen), ASP.NET Program Manager bei Microsoft, hielt eine Session über Visual Studio 12, ASP.NET 4.5 und HTML5 und CSS3: ASP.NET Loves HTML5.

HTML5 & CSS3 bringen viele Vorteile: smaller, simpler (clean) and semantic.
Beispiele: rounded corners, placeholder, neue HTML5-Elemente <nav>,<section>, <article> etc.

Mads zeigt, wie in VS 2012 (Beta) eine kleine HTML 4.01 Seite auf HTML5 umgebaut wird:
<doctype html>, <div> zu <section>, <hgroup>, etc. Schon damit wird die Semantik der Webseite ... sinnvoll.

IMG_3311

Vom Aussehen der Webseite hat sich nichts geändert - außer man schaltet auf einen Nicht-HTML5-Browser (wie IE7) um... Das Aussehen stimmt nicht mehr und die Tags werden "seltsam", z.B. "/header/".

IMG_3313

Die Lösung: NuGet Paket modernizr (bzw. http://modernizr.com/) ...dieses Paket wird als script inkludiert. Damit (und mit ein paar Anpassungen) sieht die HTML5-Seite in IE7 wieder gleich aus.

In diesem Beispiel werden HTML5 Audio Tags verwendet:

IMG_3314

Wenn der Browser .mp3 versteht, wird das Audio-File im Player abgespielt. Wenn nicht, sucht der Browser nach den nächsten Tags und versucht diese. Mit Modernizr können Browser-Fähigkeiten abgefragt werden - wie im Beispiel hier: Per jQuery wird der Audio-Player ausgeschalten, wenn es der Browser nicht unterstützt:

if (!Modernizr.audio) { $("audio").hide }

Ein weiteres Beispiel zeigt multiplen File Upload mit HTML5:

IMG_3316

Nun können in VS12 serverseitige Eventhandler gleich eingefügt werden: Im CodeBehind sieht es dann so aus:

if (upload.HasFiles) {
foreach (var file in upload.PostedFiles) // do something with file
}

Das funktioniert natürlich auch mit nur einem File. Zwinkerndes Smiley das Beispiel wird dann noch erweitert, in dem es vor dem Upload die Filesize anzeigen soll - mit jQuery und eigenem script.js:

IMG_3317 IMG_3319

Das Ergebnis sieht dann so aus:

IMG_3318

Security-Hinweis: JS kann übrigens nur auf Daten und Methoden zugreifen, die der Benutzer zulässt.

IMG_3321

Alles passiert im Browser - es gibt keinen Netzwerk-Traffic für die Anzeige der Bilder.

Base64 encoded (Data-URI) sieht dann übrigens so aus:

IMG_3322

Mit einem neuen ASP.NET 4.5 Website-Projekt in VS kommen auch schon ein ganzer Haufen an NuGet Packages mit:

IMG_3323

Mads verwendet Opera Mobile Emulator zur Demonstration von Responsive Websites und CSS Media Queries.

IMG_3327

...und den CSS-ColorPicker in VS2012 (auch mit Transparenz)

IMG_3328

Der CSS-Editor in VS12 wurde komplett neu gemacht (zB: Outlining, STRG K+S für #regions) und fühlt sich nun wie der Editor in C# an...

Neben dem FilePicker wurde auch an den neuen Input Types gearbeitet. Nun funktioniert in der ASp.NEt TexBox das TextMode-Attribut:

<asp:TextBox runat="Server" TextMode="DateTime" />

Zur Zeit unterstützt nur Opera alle HTML5-Input Types. BTW: MVC unterstützt Models automatisch - und erstellt somit die richtigen Input Data-Types. Wie kann man solche DataTime cross-browser erreichen? Eine Methode ist: yepnope():

IMG_3329

Workaround mit yepnope und jQuery: jQUery DatePicker verwenden, wenn der Browser den Input Type nicht unterstützt. Tipp: Nicht: Browser auf Name und Version prüfen, sondern Features prüfen (wie oben).

Weiteres Demo - für mich als ASP.NEt Develope rein Highlight:

Das AspNet.Web.Optimization Package. Das Paket ermöglicht "Bundling". Einzelne Objekte werden in ein einziges Download-Paket zusammengefasst und gepackt (minification).

IMG_3330 IMG_3331

Hier werden verschiedene Files (mit Wildcards) in das Bundle gepackt. Mit .Render werden Files hinzugefügt. Das Demo läuft so wesentlich schneller (von 25 requests auf 13 request und es wurde viel Bandbreite gespart). Beim rendering wird ein "Fungeprint" (=Hashcode) des Files als Parameter ?v=xyz angehängt. somit wird sichergestellt, dass das Bundle neu geladen wird, wenn Änderungen erfolgt sind - sonst nicht. Serverseitig wird immer gecached. Das bedeutet maximale Performance.

IMG_3332

Die Update-Zyklen sind mittlerweile sehr rasch. In VS12 (inkl. Express und Webmatrix) werden Toast-Messages über Updates informieren!

HTML5 wird erst ab ASP.NET 4.5 unterstützt. Coole Funktionen!

IMG_3335

News & Infos are welcome!



Loading