ASP.NET Loves HTML5 #TEE12

Von Toni Pohl (Gastblogger) Autor Feed 28. June 2012 16:07

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!



Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Datenschutzhinweis: Sie stimmen durch "Kommentar speichern" der Speicherung Ihrer Angaben durch Microsoft Österreich für die Beantwortung der Anfrage zu. Sie erhalten dadurch keine unerwünschten Werbezusendungen. Ihre Emailadresse wird auf Ihren Wunsch dazu verwendet Sie über neue Kommentare zu informieren.

Microsoft respektiert den Datenschutz. Datenschutz & Cookies

Entwickler Wettbewerbe:

Wettbewerbe

Entwickler Events:

Developer Events

App für Windows 8, Windows Phone oder/und Azure? Diese Events zeigen Dir, wie es geht:

Mehr Information

Aktuelle Downloads

Visual Studio Downloads
 
Windows Azure Free Trial
Instagram
CodeFest.at on Facebook

Datenschutz & Cookies · Nutzungsbedingungen · Impressum · Markenzeichen
© 2013 Microsoft. Alle Rechte vorbehalten · BlogEngine.NET 2.7.0.0 · Diese Website wird für Microsoft von atwork gehostet.
powered by atwork