Die Anforderungen für Websites sind heute oft widersprüchlich: verlangt ist ein zeitgemäßes Design und ansprechende Animationen, aber bitte mit offenen Webstandards, damit das ganze auch auf Smartphones und Tablets gut aussieht. Gleichzeitig ist auf Kundenseite aber ein Browser im Einsatz, der seit Jahren nicht mehr aktualisiert wurde. Jonathan Weiß stellt Lösungen vor, um diese Herausforderung zu stemmen und zeigt, welches kaum bekannte Potenzial im Legacy-Browser steckt.
2. Zur Person
• Technischer Berater und Frontend-Entwickler bei Virtual Identity AG
• Webentwickler aus Leidenschaft
• Im Netz seit 1998
• Hassliebe für Webtechnologien
25. Flashback: Webtechnologie 2001
Diese Demos werden im Internet Explorer 6.0 gezeigt:
1. a) http://midiwebconcept.free.fr/Demos/Ffox.htm
b) http://http.midiwebconcept.free.fr/PeleMele.htm
2. http://mysterycity.de/transform/test/test.html
3. http://www.useragentman.com/tests/cssSandpaper/cube3.html
26. Ergebnis der „Zeitreise“
‣ Alte Versionen des Internet Explorers überraschen mit Features
‣ Diese Features entsprechen nicht den Web Standards
? Kann man nicht etwas aus diesen Möglichkeiten machen?
? Muss man jetzt alles doppelt implemtieren?
36. SVG: Raphaël - Einsatz
// Creates canvas 320 × 200 in element #drawingContainer
var paper = Raphael('drawingContainer', 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to black
circle.attr("stroke", "#000");
http://jsfiddle.net/utUFz/2/
39. Connectivity: sockjs - Vorstellung
• Ziel: bessere Client-Server-Kommunikation
• Web-Standard: WebSocket
• IE-Magic: XMLHTTPRequest mit Long Polling
• WebSockets werden erst im IE10 nativ unterstützt
• Entwickler: Firma VMware, Lizenz: MIT
40. Connectivity: sockjs - Einsatz
// Client code:
var sockjs = new SockJS('/myApp');
sockjs.send('Hi Server!');
sockjs.onmessage = function(e) {
alert('Server answered: ' + e.data);
};
// Server code:
var sockjs_opts = {sockjs_url: "http://cdn.sockjs.org/sockjs-0.3.min.js"};
var sockjs_echo = sockjs.createServer(sockjs_opts);
sockjs_echo.on('connection', function(conn) {
conn.on('data', function(message) {
conn.write('Hello Client! You said:' + message);
});
});
41. Eye Candy: CSS3Pie - Vorstellung
• Ziel: CSS3-Features nachbilden
• Web-Standard: CSS3
• IE-Magic: VML
• Für alle IE (je nach Verwendung kann der IE manches Feature nativ)
• Entwickler: Firma Sencha, Lizenz: Apache Licence und GPL
45. HTML-5-Tags: html5shim - Einführung
• Ziel: HTML-5-Tags bereits heute verwenden für Screen und Print
• JavaScript-Lösung für IE < 9
• Entwickler: Alexander Farkas, John-David Dalton, Jonathan Neal, Remy
Sharp
• Lizenz: MIT und GPL2
49. Ist nun alles in Butter?
• polyfills/shims sind keine Module
50. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
51. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
• Performance beobachten!
52. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
• Performance beobachten!
• Nebeneffekte
53. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
• Performance beobachten!
• Nebeneffekte
• JavaScript wird benötigt
56. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
Budget Quality
57. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
Budget Quality
58. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
Budget Quality
59. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
4. Prototypen erstellen
Budget Quality
60. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
4. Prototypen erstellen
5. Performance testen
Budget Quality
61. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
4. Prototypen erstellen
5. Performance testen
Budget Quality
6. Kompromisse eingehen
62. Wichtige Ressourcen
• When can I use…
http://caniuse.com/
• HTML5 please
http://html5please.com/
• HTML5 Cross Browser Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
64. Fazit
• Legacy Browser sind leistungsfähiger, als vermutet
• Polyfills / shims als Brückentechnologie verwenden
• Die Zeit arbeitet für uns!
• Progressive enhancement für optionale Features
• Graceful degradation vor allem bei visuellen Aspekten
65. Was nun? (Teil 2)
a.Kleinsten gemeinsamen Nenner verwenden…
b.Ignorieren und auf moderne Webtechnologien setzen…
c.Warten…?
66. Was nun? (Teil 2)
a.Kleinsten gemeinsamen Nenner verwenden…
b.Ignorieren und auf moderne Webtechnologien setzen…
c.Warten…?
67. Fragen?
http://jonathanweiss.net/me
Was ist mit…
• Modernizr
• Audio/Video
• Webfonts
• …?
Fragt mich einfach
in der Pause oder
später per Mail/
Twitter/Whatever :-)
@jonathan_weiss
68. (Bildnachweise)
• Seite 3: http://www.w3.org/html/logo/
• Seite 4: http://de.wikipedia.org/w/index.php?title=Datei:HTML5-Spezifikations-
%C3%9Cbersicht.svg&filetimestamp=20120411222933
• Seite 10:
http://www.flickr.com/photos/familie-golde/2406800931/
http://de.wikipedia.org/w/index.php?
title=Datei:Unterlegscheiben_dolo280.jpg&filetimestamp=20110603081729
• Seite 12:
http://en.wikipedia.org/wiki/File:JavaScript-logo.png
http://en.wikipedia.org/wiki/File:Internet_Explorer_7_Logo.png
http://commons.wikimedia.org/wiki/File:Crystal_Clear_filesystem_folder_lin.png
• Seite 28: http://www.w3.org/html/logo/
• Seite 33: Bild basiert auf http://icanhascheezburger.com/2012/04/29/funny-cat-pictures-lolcats-it-was-a-
joke/
• Seite 34: http://digitalchecking.blogspot.de/p/twitter-follow-me-images-for-you.html
Editor's Notes
\n
Gleichzeitig total begeistert, was im Browser so alles abgeht und frustriert, dass es nicht einfach ist.\nUnd das war schon immer so. Ich wei&#xDF; noch, wie ich mich damals &#xFC;ber CSS gefreut hatte und endlich die Tabellenlayout los war und auch irgendwann auf frames verzichten konnten. Genauso aufregend fand ich sp&#xE4;ter die M&#xF6;glichkeit mit JavaScript Formulardaten auszuwerten und das nicht immer in PHP (oder sonst etwas machen zu m&#xFC;ssen). Und was ich mich an Webtechnologien begeistert, zeige ich euch jetzt.\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
Nur der Vollst&#xE4;ndigkeit halber:Das sind alles Begriffe, die man in der Regel im Zusammenhang mit HTML5 h&#xF6;rt. Das ist so nicht ganz richtig, denn eigentlich ist nur das HTML5, was von der WHAT WG spezifiziert wird. F&#xFC;r CSS3, zum Beispiel, ist eine ganz andere WG zust&#xE4;ndig.\n\nhttp://de.wikipedia.org/w/index.php?title=Datei:HTML5-Spezifikations-%C3%9Cbersicht.svg&filetimestamp=20120411222933\n\nInzwischen setzt sich langsam der von Thomas Mittelbach stammende Begriff Web8 durch = HTML5 + CSS3 = Web8. Dieser Begriff soll verdeutlichen, dass es um eine Reihe von Webtechnologien geht, die mehr sind, als in der HTML-5-Spezifikation stehen.\nAber das nur am Rande. Wie man diese Technologien nun umschreibt, ob mit HTML5 oder Web8 oder nicht, wichtig ist, dass Browser immer m&#xE4;chtiger werden und ein vielfaches an Funktionen und APIs bieten als noch vor wenigen Jahren.\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
&#x2022; Marktanteil HTML-5-f&#xE4;higer Desktop-Browser: ~60%\n&#x2022; Somit sind ~40% der Nutzer mit einem Legacy-Browser unterwegs!\n&#x2022; Davon sind ~7% IE6, ~4,5% IE7 und ~25,4% IE8\n&#x2022; Alte Versionen anderer Browser im Promillebereich\n => Wer einen alternativen Browser einsetzen kann, der aktualisiert auch\n => Wer einen alten IE verwendet, hat oft keine andere Wahl!\n\nUNTERNEHMEN\nF&#xFC;r Unternehmen, vor allem in Deutschland, habe ich keine Zahlen, aber Erfahrungswerte. So wei&#xDF; ich von einigen DAX-30-Unternehmen, die immernoch den IE7 oder IE8 als Standard-Browser vorschreiben. \n
Das w&#xE4;re HTML4 und w&#xE4;re entt&#xE4;uschend, denn man w&#xFC;rde immer sehen, was theoretisch m&#xF6;glich w&#xE4;re und das Gef&#xFC;hl haben, etwas zu verpassen.Damit versperrt man eine gro&#xDF;e Anzahl an Nutzern und muss sich (besonders im Konzernumfeld) unangenehmen Fragen stellen: &#x201E;Warum funktioniert denn das f&#xFC;r uns entwickelte Feature/ die Webanwendung nicht, wie wir uns das vorgestellt haben?&#x201C;Vielleicht ist die Zeit ja noch nicht reif f&#xFC;r diese Technologie und in ein paar Jahren sieht es anders aus. Hier gibt es die IE6 Countdown. Hier kommt man allerdings vom Regen in die Traufe, denn der IE7 unterst&#xFC;tzt kaum mehr moderene Webstandards und wird bis 2014 offiziell von MS noch unterst&#xFC;tzt (also mit Updates versehen). Der IE8 sogar mindestens bis 2017.\nWenn man sich die Optionen ansieht, dann merkt man, dass sie alle nicht besonders sch&#xF6;n sind. Daher: wenn wir uns schon mit Legacy-Browsern besch&#xE4;ftigen m&#xFC;ssen, dann sollten wir uns doch einmal genau anschauen, was sie k&#xF6;nnen.\n
&#x2022; Behavior: userData\n&#x2022; Long Polling\n&#x2022; VML\n&#x2022; Filter\n
&#x2022; Warum muss man wissen, was der IE 2001 bereits konnte?\n&#x2022; Nun, er kann eine ganze Menge. \n&#x2022; Geht seinen eigenen Weg (MS-Weg, kein Web-Standard)\n&#x2022; Dennoch w&#xFC;rde ich nicht sagen, dass er ein guter Browser ist - daf&#xFC;r ist er einfach zu alt: langsam, buggy und &#xFC;berholt.\n\nABER:\n&#x2022; Die M&#xF6;glichkeiten sollten wir nutzen!\n&#x2022; Muss man jetzt alles doppelt implementieren? MS-Weg und WebStandard-Weg\n&#x2022; Antwort: nein!\n
Polyfills\n&#x2022; bilden eine NEUE native API eines Standards 1:1 nach\n&#x2022; kommen nur zum Einsatz, wenn der Browser die API nicht unterst&#xFC;tzt\n&#x2022; erm&#xF6;glichen heute bereits den Einsatz von k&#xFC;nftigen Standards\n\nshims/shivs\n&#x2022; bieten eine Funktion, die kein Standard ist\n&#x2022; (oder) normalisieren verschiedene Implementierungen\n\nDas war die urspr&#xFC;ngliche Unterteilung (von Paul Irish und Remy Sharp), heute werden die Begriffe leider nicht mehr konsequent so verwendet. So wie man heute immer noch von AJAX spricht, auch wenn man &#xFC;berhaupt kein XML mehr austauscht, sondern JSON, genau so werden diese Begriffe heute analog verwendet&#x2026;\n\nCUT: Darum auch der Titel dieses Talks: HTML-5-Legacy-Anwendungen. Wir verwenden HTML-5-Technologien mit einem Fallback f&#xFC;r Legacy-Browser. Genau das bieten uns diese polyfills/shims.\n\nhttp://paulirish.com/i/7570.png\nhttp://remysharp.com/2010/10/08/what-is-a-polyfill/\n\nhttp://www.flickr.com/photos/familie-golde/2406800931/\nhttp://de.wikipedia.org/w/index.php?title=Datei:Unterlegscheiben_dolo280.jpg&filetimestamp=20110603081729\n\n
Polyfills\n&#x2022; bilden eine NEUE native API eines Standards 1:1 nach\n&#x2022; kommen nur zum Einsatz, wenn der Browser die API nicht unterst&#xFC;tzt\n&#x2022; erm&#xF6;glichen heute bereits den Einsatz von k&#xFC;nftigen Standards\n\nshims/shivs\n&#x2022; bieten eine Funktion, die kein Standard ist\n&#x2022; (oder) normalisieren verschiedene Implementierungen\n\nDas war die urspr&#xFC;ngliche Unterteilung (von Paul Irish und Remy Sharp), heute werden die Begriffe leider nicht mehr konsequent so verwendet. So wie man heute immer noch von AJAX spricht, auch wenn man &#xFC;berhaupt kein XML mehr austauscht, sondern JSON, genau so werden diese Begriffe heute analog verwendet&#x2026;\n\nCUT: Darum auch der Titel dieses Talks: HTML-5-Legacy-Anwendungen. Wir verwenden HTML-5-Technologien mit einem Fallback f&#xFC;r Legacy-Browser. Genau das bieten uns diese polyfills/shims.\n\nhttp://paulirish.com/i/7570.png\nhttp://remysharp.com/2010/10/08/what-is-a-polyfill/\n\nhttp://www.flickr.com/photos/familie-golde/2406800931/\nhttp://de.wikipedia.org/w/index.php?title=Datei:Unterlegscheiben_dolo280.jpg&filetimestamp=20110603081729\n\n
Ich m&#xF6;chte nun L&#xF6;sungen f&#xFC;r 5 Bereiche vorstellen. Dazu werde ich jeweils erkl&#xE4;ren, wie die L&#xF6;sung technisch aufgebaut ist (worauf sie basiert), wie man sie einsetzt und mit welchen Einschr&#xE4;nkungen man rechnen muss.\n
Bei den L&#xF6;sungen gibt es immer drei Ans&#xE4;tzt, wie sie intern funktionieren.\n\nhttp://en.wikipedia.org/wiki/File:JavaScript-logo.png\nhttp://en.wikipedia.org/wiki/File:Internet_Explorer_7_Logo.png\nhttp://commons.wikimedia.org/wiki/File:Crystal_Clear_filesystem_folder_lin.png\n
&#x2022; Komfortabler im Zugriff als Cookies: Key-Value-Pairs\n&#x2022; Gr&#xF6;&#xDF;ere Datenmengen als Cookies (hier max. 4000 Bytes) [http://myownplayground.atspace.com/cookietest.html]\n&#x2022; auch sinnvoll f&#xFC;r Offline-Betrieb von Webanwendungen. \n&#x2022; Achtung: Daten werden unverschl&#xFC;sselt gespeichert und sollten daher keine sensiblen Daten enthalten!\n&#x2022; Daten werden bei jedem Request wieder &#xFC;bertragen (wie bei Cookies)\n&#x2022; es lassen sich nur Strings speichern, komplexe Datentypen muss man serialisieren\n&#x2022; Achtung: Limit ist 128KB f&#xFC;r IE < 8, ansonsten 5 - 10 MB\n\nhttp://www.jstorage.info/#basics\n
L&#xF6;schen: &#xDC;berschreiben des Keys mit null\nGist: https://gist.github.com/1204477\n\n
\nSVG-Animation war Grundlage f&#xFC;r Interaktionen in HD-DVDsUhr: http://upload.wikimedia.org/wikibooks/de/0/09/SVG_Analoguhr01.svg\n\n&#x2022; Zwei unterschiedliche APIs:\n = Vektorgrafiken (SVG) vs Pixelgrafiken (Canvas)\n\nSVG einbinden: http://www.schepers.cc/svg/blendups/embedding.html\n\nRaphael\nCanvas in Flash oder Silverlight\nTechnisch: VML im IE\n\n\nBlob: http://www.blobsallad.se/\n
&#x2022; VML wurde von MS, HP und Macromedia entwickelt und 1998 dem W3C vorgeschlagen\n&#x2022; abgelehnt, da gleichzeitig Adobe und an Sun Precision Graphic Markup Language arbeiteten\n&#x2022; Das W3C entwickelte daraufhin SVG\n&#x2022; MS hielt aber bis zum IE9 an VML fest; erst der IE10 wird nur noch SVG unterst&#xFC;tzten\n&#x2022; IE9 kann SVG, allerdings ohne Animationen, Filter und Schriften\n\n
Issues:\nAbdeckung von nur 50% der Features von SVG. Vergleich: IE9: 59%, Chrom10: 90%\n
&#x2022; ExplorerCanvas (Silverlight: mehr Performance mit VML-Fallback - Faktor 2 bis 20!)\n&#x2022; FlashCanvas (Flash-L&#xF6;sung)\n\nIssues:\n&#x2022; Clipping Paths not supported\n&#x2022; Kreisf&#xF6;rmige Farbverl&#xE4;ufe auch nicht\n&#x2022; \n\nhttp://www.picnet.com.au/blogs/guido/post/2010/03/15/google-explorercanvas-excanvas-for-ie-silverlight-vs-vml/\n
&#x2022; ExplorerCanvas (Silverlight: mehr Performance mit VML-Fallback)\n&#x2022; FlashCanvas (Flash-L&#xF6;sung)\n
&#x2022; Websocket-API ist sehr klein: enth&#xE4;lt im Prinzip nur send() und close().\n&#x2022; Event-Handler: onmessage(), onerror(), onclose() und onopen()\n&#x2022; onmessage hat Argument mit e.data und das war es auch schon :-)\n
\n
&#x2022; border-radius: runde Ecken\n&#x2022; box-shadow: Schatten\n&#x2022; border-image: Mit Grafiken Rahmen zeichnen\n\n&#x2022; CSS3 Backgrounds (-pie-background): mehrere Hintergrundbilder\n&#x2022; Gradients: Verl&#xE4;ufe\n&#x2022; RGBA Color Values: Farbwerte mit Alphakanal\n\n&#x2022; Bugfixing f&#xFC;r transparente PNGs\n\n
Issues:\n &#x2022; position: static funktioniert nicht zuverl&#xE4;ssig\n &#x2022; Pfadangaben werden relative zur Umgebung interpretiert, in denen der JS-Code augef&#xFC;hrt wird: also der der HTML-Datei (Muss man nur bedenken, ist kein gro&#xDF;es Problem)\n &#x2022; Manche Elemente (input) k&#xF6;nnen nicht gestyled werden.\n&#x2022; Bei Zoom werden Hintergrundbilder nicht mit skaliert\n\nIn Summe sehe ich diese Einschr&#xE4;nkungen nicht als gravierend an.\n
&#x201E;Haw-reih-lok&#x201C;\n
Issues:\n&#x2022; blur-radius f&#xFC;r box-shadow wird nicht unterst&#xFC;tzt\n&#x2022; kreisf&#xF6;rmige Verl&#xE4;ufe auch nicht\n&#x2022; Verl&#xE4;ufe k&#xF6;nnen nur zwei Farben haben\n&#x2022; &#xC4;ndern der Schriftgr&#xF6;&#xDF;e f&#xFC;hrt zu seltsamen Effekten\n\nAuch hier: keine gro&#xDF;en Einschr&#xE4;nkungen\n
&#x2022; die JavaScript-L&#xF6;sung triggert intern einen Mechanisum im IE, damit er auch unbekannte HTML-Tags mit Styles versehen und mit solchen drucken kann\n
\n
Kein klingonisch links, sondern die HTML-5-Badge-Icons\n&#x2022; Wir haben mit den vorgestellten L&#xF6;sungen diese HTML-5-APIs abgedeckt.\n&#x2022; Diese Features sind somit heute verwendbar!\n\nCUT:\n&#x2022; Es gibt noch einen Haufen mehr, die ich aus Zeitgr&#xFC;nden nicht integriert \nhabe. Das ganze Thema: Audio-/Video-Tag mit Flashfallback oder Webfonts zum Beispiel. Sp&#xE4;ter stelle noch Links vor, unter denen man schauen kann, was noch alles m&#xF6;glich ist.\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
\n
&#x2022; Alte Browser k&#xF6;nnen mehr, als man zun&#xE4;chst denkt (auch dank manch eigent&#xFC;mlicher Erfindungen von Micorosoft (Filter, Behavior, HTC) - aber immerhin hat MS auch AJAX erfunden)!\n&#x2022; Polyfills / shims sind Br&#xFC;ckentechnologie, um bereits heute zukunftsf&#xE4;higen Code zu schreiben\n&#x2022; Die Zeit arbeitet daher F&#xDC;R uns!\n\nSchrittweise Verbesserung durch sog. Progressive Enhancement. z.B. wenn der Browser Geolocation anbietet und zul&#xE4;sst, dann f&#xFC;llt zeigt man z.B. die n&#xE4;chste Filiale direkt an. Ansonsten zeigt man eine Deutschlandkarte gem&#xE4;&#xDF; IP-Adresse. Das ist jetzt kein Beinbruch und der Benutzer kommt auch so zum Ziel, aber falls die M&#xF6;glichkeit besteht, dann wird der Erlebnis f&#xFC;r ihn halt ein aufgewertet.\n\nFehlertoleranz durch Graceful degredation\n\n&#x2022; Dennoch: gut &#xFC;berlegen und abw&#xE4;gen, wann man welchen Aufwand betreibt und wann man pragmatisch etwas NICHT macht: nicht alle Browser biete dieselbe User Experience. Die Leute sind daran gew&#xF6;hnt! Im Office mit dem IE verhalten sich Seiten anders als daheim im Chrome. Graceful degredation auch mit Polyfills/shims: &#xE4;hnlich wie bei CSS3 wird nicht alles unterst&#xFC;tzt.\n
Ich m&#xF6;chte euch heute eines mitgeben:\nhabt den Mut, moderne Webstandards bereits heute einzusetzen. Es gibt keine Rundum-Sorglos-L&#xF6;sung und vielleicht gibt es jetzt auch die ein oder andere Erwartung, die recht hoch ist. Aber Fakt ist: wir k&#xF6;nnen heute schon so viele dieser tollen M&#xF6;glichkeiten verwenden und damit zeitgem&#xE4;&#xDF;e, tolle Webseiten / Webanwendungen umsetzen, dass es diese M&#xFC;he wert ist!\n