Your SlideShare is downloading. ×
HTML-5-Legacy-AnwendungenJonathan Weiß
Zur Person• Technischer Berater und Frontend-Entwickler bei Virtual Identity AG• Webentwickler aus Leidenschaft• Im Netz s...
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
Wir leben in spannenden Zeiten…
… haben aber ein kleines Problem!
… haben aber ein kleines Problem!
… haben aber ein kleines Problem!                                    http://evolutionofweb.appspot.com/
… haben aber ein kleines Problem!                                    http://evolutionofweb.appspot.com/
… haben aber ein kleines Problem!                                    http://evolutionofweb.appspot.com/
… haben aber ein kleines Problem!                                    http://evolutionofweb.appspot.com/
… haben aber ein kleines Problem!                                    http://evolutionofweb.appspot.com/
Weltweit verwenden nur 58% der Benutzer einen    HTML-5-fähigen Browser                                                unb...
Was nun?a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
Was nun?a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
Flashback: Webtechnologie 2001Diese Demos werden im Internet Explorer 6.0 gezeigt:1. a) http://midiwebconcept.free.fr/Demo...
Ergebnis der „Zeitreise“‣ Alte Versionen des Internet Explorers überraschen mit Features‣ Diese Features entsprechen nicht...
Zwei hilfreiche Werkzeuge
Zwei hilfreiche WerkzeugeSpachtelmasse               Unterlegscheibe
Zwei hilfreiche WerkzeugeSpachtelmasse               Unterlegscheibe„polyfill“                   „shim“
Lösungen für fünf Bereiche• Storage• 2D-Grafiken• Connectivity• Eye Candy• HTML-5-Tags
Die drei Lösungswege• Reines JavaScript• Feature vom Internet Explorer („IE-Magic“)• Einsatz von Plugins
Web Storage: amplify.store - Vorstellung• Ziel: Daten clientseitig (dauerhaft) speichern• Web-Standard: WebStorage bestehe...
Web Storage: amplify.store - Einsatzvar myStore = amplify.store[window.localStorage ?                      localStorage : ...
2D-Grafiken: ÜbersichtScalable Vector Graphics (SVG)     Canvas• Vektor-Grafik                     • Bitmap-Grafik• XML-Datei...
SVG: Raphaël - Einführung• Ziel: Vektorgrafiken anzeigen• Web-Standard: SVG• IE-Magic: IE <9 verwenden VML• IE9+ unterstütz...
SVG: Raphaël - Einsatz// Creates canvas 320 × 200 in element #drawingContainervar paper = Raphael(drawingContainer, 320, 2...
Canvas: ExplorerCanvas - Einführung• Ziel: Dynamsiche Bitmapgrafiken anzeigen• Web-Standard: Canvas• IE-Magic: IE < 9 verwe...
Canvas: ExplorerCanvas - Einsatz<html><head> <script type="text/javascript" src="excanvas.js"></script> <script type="text...
Connectivity: sockjs - Vorstellung• Ziel: bessere Client-Server-Kommunikation• Web-Standard: WebSocket• IE-Magic: XMLHTTPR...
Connectivity: sockjs - Einsatz// Client code:var sockjs = new SockJS(/myApp);sockjs.send(Hi Server!);sockjs.onmessage = fu...
Eye Candy: CSS3Pie - Vorstellung• Ziel: CSS3-Features nachbilden• Web-Standard: CSS3• IE-Magic: VML• Für alle IE (je nach ...
Eye Candy: CSS3Pie - Einsatz#myElement { border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px;    bor...
Eye-Candy: cssSandpaper - Vorstellung• Ziel: Für 2D-Transformationen von Elementen• IE-Magic: IE < 9 verwenden Matrix-Filt...
Eye-Candy: cssSandpaper - Einsatz<!DOCTYPE html><html lang="en"><head><script type="text/javascript" src="cssSandpaper.js"...
HTML-5-Tags: html5shim - Einführung• Ziel: HTML-5-Tags bereits heute verwenden für Screen und Print• JavaScript-Lösung für...
HTML-5-Tags: html5shim - Einsatz<!doctype html><html><head>  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"...
Zusammenfassung • WebStorage • SVG • Canvas • CSS3 • WebSocket • HTML-5-Tags                  http://www.w3.org/html/logo/
Ist nun alles in Butter?
Ist nun alles in Butter?• polyfills/shims sind keine Module
Ist nun alles in Butter?• polyfills/shims sind keine Module• Keine vollständige Abdeckung der Web-Standards!
Ist nun alles in Butter?• polyfills/shims sind keine Module• Keine vollständige Abdeckung der Web-Standards!• Performance b...
Ist nun alles in Butter?• polyfills/shims sind keine Module• Keine vollständige Abdeckung der Web-Standards!• Performance b...
Ist nun alles in Butter?• polyfills/shims sind keine Module• Keine vollständige Abdeckung der Web-Standards!• Performance b...
Vorgehen beim Einsatz von polyfills/shims
Vorgehen beim Einsatz von polyfills/shims                                 Time                       Budget              Qu...
Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären            Time                                 ...
Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären            Time2. Alternativen aufzeigen        ...
Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären            Time2. Alternativen aufzeigen3. Einsc...
Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären            Time2. Alternativen aufzeigen3. Einsc...
Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären            Time2. Alternativen aufzeigen3. Einsc...
Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären            Time2. Alternativen aufzeigen3. Einsc...
Wichtige Ressourcen• When can I use…  http://caniuse.com/• HTML5 please  http://html5please.com/• HTML5 Cross Browser Poly...
Fazit
Fazit• Legacy Browser sind leistungsfähiger, als vermutet• Polyfills / shims als Brückentechnologie verwenden• Die Zeit arb...
Was nun? (Teil 2)a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
Was nun? (Teil 2)a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
Fragen?http://jonathanweiss.net/me                              Was ist mit…                              • Modernizr     ...
(Bildnachweise)• Seite 3: http://www.w3.org/html/logo/• Seite 4: http://de.wikipedia.org/w/index.php?title=Datei:HTML5-Spe...
Upcoming SlideShare
Loading in...5
×

HTML5-Legacy-Anwendungen

1,118

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,118
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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&amp;#xDF; noch, wie ich mich damals &amp;#xFC;ber CSS gefreut hatte und endlich die Tabellenlayout los war und auch irgendwann auf frames verzichten konnten. Genauso aufregend fand ich sp&amp;#xE4;ter die M&amp;#xF6;glichkeit mit JavaScript Formulardaten auszuwerten und das nicht immer in PHP (oder sonst etwas machen zu m&amp;#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&amp;#xE4;ndigkeit halber:Das sind alles Begriffe, die man in der Regel im Zusammenhang mit HTML5 h&amp;#xF6;rt. Das ist so nicht ganz richtig, denn eigentlich ist nur das HTML5, was von der WHAT WG spezifiziert wird. F&amp;#xFC;r CSS3, zum Beispiel, ist eine ganz andere WG zust&amp;#xE4;ndig.\n\nhttp://de.wikipedia.org/w/index.php?title=Datei:HTML5-Spezifikations-%C3%9Cbersicht.svg&amp;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&amp;#xE4;chtiger werden und ein vielfaches an Funktionen und APIs bieten als noch vor wenigen Jahren.\n
  • Diese tollen M&amp;#xF6;glichkeiten sind in veralteten Browser nicht m&amp;#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&amp;#x2026; Warum ich mich auf den IE beschr&amp;#xE4;nke erkl&amp;#xE4;re ich gleich noch. Vorher m&amp;#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&amp;#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&amp;#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&amp;qpcustomd=0\n\n
  • Diese tollen M&amp;#xF6;glichkeiten sind in veralteten Browser nicht m&amp;#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&amp;#x2026; Warum ich mich auf den IE beschr&amp;#xE4;nke erkl&amp;#xE4;re ich gleich noch. Vorher m&amp;#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&amp;#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&amp;#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&amp;qpcustomd=0\n\n
  • Diese tollen M&amp;#xF6;glichkeiten sind in veralteten Browser nicht m&amp;#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&amp;#x2026; Warum ich mich auf den IE beschr&amp;#xE4;nke erkl&amp;#xE4;re ich gleich noch. Vorher m&amp;#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&amp;#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&amp;#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&amp;qpcustomd=0\n\n
  • Diese tollen M&amp;#xF6;glichkeiten sind in veralteten Browser nicht m&amp;#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&amp;#x2026; Warum ich mich auf den IE beschr&amp;#xE4;nke erkl&amp;#xE4;re ich gleich noch. Vorher m&amp;#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&amp;#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&amp;#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&amp;qpcustomd=0\n\n
  • Diese tollen M&amp;#xF6;glichkeiten sind in veralteten Browser nicht m&amp;#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&amp;#x2026; Warum ich mich auf den IE beschr&amp;#xE4;nke erkl&amp;#xE4;re ich gleich noch. Vorher m&amp;#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&amp;#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&amp;#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&amp;qpcustomd=0\n\n
  • Diese tollen M&amp;#xF6;glichkeiten sind in veralteten Browser nicht m&amp;#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&amp;#x2026; Warum ich mich auf den IE beschr&amp;#xE4;nke erkl&amp;#xE4;re ich gleich noch. Vorher m&amp;#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&amp;#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#x2026;&amp;#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&amp;#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&amp;qpcustomd=0\n\n
  • &amp;#x2022; Marktanteil HTML-5-f&amp;#xE4;higer Desktop-Browser: ~60%\n&amp;#x2022; Somit sind ~40% der Nutzer mit einem Legacy-Browser unterwegs!\n&amp;#x2022; Davon sind ~7% IE6, ~4,5% IE7 und ~25,4% IE8\n&amp;#x2022; Alte Versionen anderer Browser im Promillebereich\n =&gt; Wer einen alternativen Browser einsetzen kann, der aktualisiert auch\n =&gt; Wer einen alten IE verwendet, hat oft keine andere Wahl!\n\nUNTERNEHMEN\nF&amp;#xFC;r Unternehmen, vor allem in Deutschland, habe ich keine Zahlen, aber Erfahrungswerte. So wei&amp;#xDF; ich von einigen DAX-30-Unternehmen, die immernoch den IE7 oder IE8 als Standard-Browser vorschreiben. \n
  • Das w&amp;#xE4;re HTML4 und w&amp;#xE4;re entt&amp;#xE4;uschend, denn man w&amp;#xFC;rde immer sehen, was theoretisch m&amp;#xF6;glich w&amp;#xE4;re und das Gef&amp;#xFC;hl haben, etwas zu verpassen.Damit versperrt man eine gro&amp;#xDF;e Anzahl an Nutzern und muss sich (besonders im Konzernumfeld) unangenehmen Fragen stellen: &amp;#x201E;Warum funktioniert denn das f&amp;#xFC;r uns entwickelte Feature/ die Webanwendung nicht, wie wir uns das vorgestellt haben?&amp;#x201C;Vielleicht ist die Zeit ja noch nicht reif f&amp;#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&amp;#xFC;tzt kaum mehr moderene Webstandards und wird bis 2014 offiziell von MS noch unterst&amp;#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&amp;#xF6;n sind. Daher: wenn wir uns schon mit Legacy-Browsern besch&amp;#xE4;ftigen m&amp;#xFC;ssen, dann sollten wir uns doch einmal genau anschauen, was sie k&amp;#xF6;nnen.\n
  • &amp;#x2022; Behavior: userData\n&amp;#x2022; Long Polling\n&amp;#x2022; VML\n&amp;#x2022; Filter\n
  • &amp;#x2022; Warum muss man wissen, was der IE 2001 bereits konnte?\n&amp;#x2022; Nun, er kann eine ganze Menge. \n&amp;#x2022; Geht seinen eigenen Weg (MS-Weg, kein Web-Standard)\n&amp;#x2022; Dennoch w&amp;#xFC;rde ich nicht sagen, dass er ein guter Browser ist - daf&amp;#xFC;r ist er einfach zu alt: langsam, buggy und &amp;#xFC;berholt.\n\nABER:\n&amp;#x2022; Die M&amp;#xF6;glichkeiten sollten wir nutzen!\n&amp;#x2022; Muss man jetzt alles doppelt implementieren? MS-Weg und WebStandard-Weg\n&amp;#x2022; Antwort: nein!\n
  • Polyfills\n&amp;#x2022; bilden eine NEUE native API eines Standards 1:1 nach\n&amp;#x2022; kommen nur zum Einsatz, wenn der Browser die API nicht unterst&amp;#xFC;tzt\n&amp;#x2022; erm&amp;#xF6;glichen heute bereits den Einsatz von k&amp;#xFC;nftigen Standards\n\nshims/shivs\n&amp;#x2022; bieten eine Funktion, die kein Standard ist\n&amp;#x2022; (oder) normalisieren verschiedene Implementierungen\n\nDas war die urspr&amp;#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 &amp;#xFC;berhaupt kein XML mehr austauscht, sondern JSON, genau so werden diese Begriffe heute analog verwendet&amp;#x2026;\n\nCUT: Darum auch der Titel dieses Talks: HTML-5-Legacy-Anwendungen. Wir verwenden HTML-5-Technologien mit einem Fallback f&amp;#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&amp;filetimestamp=20110603081729\n\n
  • Polyfills\n&amp;#x2022; bilden eine NEUE native API eines Standards 1:1 nach\n&amp;#x2022; kommen nur zum Einsatz, wenn der Browser die API nicht unterst&amp;#xFC;tzt\n&amp;#x2022; erm&amp;#xF6;glichen heute bereits den Einsatz von k&amp;#xFC;nftigen Standards\n\nshims/shivs\n&amp;#x2022; bieten eine Funktion, die kein Standard ist\n&amp;#x2022; (oder) normalisieren verschiedene Implementierungen\n\nDas war die urspr&amp;#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 &amp;#xFC;berhaupt kein XML mehr austauscht, sondern JSON, genau so werden diese Begriffe heute analog verwendet&amp;#x2026;\n\nCUT: Darum auch der Titel dieses Talks: HTML-5-Legacy-Anwendungen. Wir verwenden HTML-5-Technologien mit einem Fallback f&amp;#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&amp;filetimestamp=20110603081729\n\n
  • Ich m&amp;#xF6;chte nun L&amp;#xF6;sungen f&amp;#xFC;r 5 Bereiche vorstellen. Dazu werde ich jeweils erkl&amp;#xE4;ren, wie die L&amp;#xF6;sung technisch aufgebaut ist (worauf sie basiert), wie man sie einsetzt und mit welchen Einschr&amp;#xE4;nkungen man rechnen muss.\n
  • Bei den L&amp;#xF6;sungen gibt es immer drei Ans&amp;#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
  • &amp;#x2022; Komfortabler im Zugriff als Cookies: Key-Value-Pairs\n&amp;#x2022; Gr&amp;#xF6;&amp;#xDF;ere Datenmengen als Cookies (hier max. 4000 Bytes) [http://myownplayground.atspace.com/cookietest.html]\n&amp;#x2022; auch sinnvoll f&amp;#xFC;r Offline-Betrieb von Webanwendungen. \n&amp;#x2022; Achtung: Daten werden unverschl&amp;#xFC;sselt gespeichert und sollten daher keine sensiblen Daten enthalten!\n&amp;#x2022; Daten werden bei jedem Request wieder &amp;#xFC;bertragen (wie bei Cookies)\n&amp;#x2022; es lassen sich nur Strings speichern, komplexe Datentypen muss man serialisieren\n&amp;#x2022; Achtung: Limit ist 128KB f&amp;#xFC;r IE &lt; 8, ansonsten 5 - 10 MB\n\nhttp://www.jstorage.info/#basics\n
  • L&amp;#xF6;schen: &amp;#xDC;berschreiben des Keys mit null\nGist: https://gist.github.com/1204477\n\n
  • \nSVG-Animation war Grundlage f&amp;#xFC;r Interaktionen in HD-DVDsUhr: http://upload.wikimedia.org/wikibooks/de/0/09/SVG_Analoguhr01.svg\n\n&amp;#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
  • &amp;#x2022; VML wurde von MS, HP und Macromedia entwickelt und 1998 dem W3C vorgeschlagen\n&amp;#x2022; abgelehnt, da gleichzeitig Adobe und an Sun Precision Graphic Markup Language arbeiteten\n&amp;#x2022; Das W3C entwickelte daraufhin SVG\n&amp;#x2022; MS hielt aber bis zum IE9 an VML fest; erst der IE10 wird nur noch SVG unterst&amp;#xFC;tzten\n&amp;#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
  • &amp;#x2022; ExplorerCanvas (Silverlight: mehr Performance mit VML-Fallback - Faktor 2 bis 20!)\n&amp;#x2022; FlashCanvas (Flash-L&amp;#xF6;sung)\n\nIssues:\n&amp;#x2022; Clipping Paths not supported\n&amp;#x2022; Kreisf&amp;#xF6;rmige Farbverl&amp;#xE4;ufe auch nicht\n&amp;#x2022; \n\nhttp://www.picnet.com.au/blogs/guido/post/2010/03/15/google-explorercanvas-excanvas-for-ie-silverlight-vs-vml/\n
  • &amp;#x2022; ExplorerCanvas (Silverlight: mehr Performance mit VML-Fallback)\n&amp;#x2022; FlashCanvas (Flash-L&amp;#xF6;sung)\n
  • &amp;#x2022; Websocket-API ist sehr klein: enth&amp;#xE4;lt im Prinzip nur send() und close().\n&amp;#x2022; Event-Handler: onmessage(), onerror(), onclose() und onopen()\n&amp;#x2022; onmessage hat Argument mit e.data und das war es auch schon :-)\n
  • \n
  • &amp;#x2022; border-radius: runde Ecken\n&amp;#x2022; box-shadow: Schatten\n&amp;#x2022; border-image: Mit Grafiken Rahmen zeichnen\n\n&amp;#x2022; CSS3 Backgrounds (-pie-background): mehrere Hintergrundbilder\n&amp;#x2022; Gradients: Verl&amp;#xE4;ufe\n&amp;#x2022; RGBA Color Values: Farbwerte mit Alphakanal\n\n&amp;#x2022; Bugfixing f&amp;#xFC;r transparente PNGs\n\n
  • Issues:\n &amp;#x2022; position: static funktioniert nicht zuverl&amp;#xE4;ssig\n &amp;#x2022; Pfadangaben werden relative zur Umgebung interpretiert, in denen der JS-Code augef&amp;#xFC;hrt wird: also der der HTML-Datei (Muss man nur bedenken, ist kein gro&amp;#xDF;es Problem)\n &amp;#x2022; Manche Elemente (input) k&amp;#xF6;nnen nicht gestyled werden.\n&amp;#x2022; Bei Zoom werden Hintergrundbilder nicht mit skaliert\n\nIn Summe sehe ich diese Einschr&amp;#xE4;nkungen nicht als gravierend an.\n
  • &amp;#x201E;Haw-reih-lok&amp;#x201C;\n
  • Issues:\n&amp;#x2022; blur-radius f&amp;#xFC;r box-shadow wird nicht unterst&amp;#xFC;tzt\n&amp;#x2022; kreisf&amp;#xF6;rmige Verl&amp;#xE4;ufe auch nicht\n&amp;#x2022; Verl&amp;#xE4;ufe k&amp;#xF6;nnen nur zwei Farben haben\n&amp;#x2022; &amp;#xC4;ndern der Schriftgr&amp;#xF6;&amp;#xDF;e f&amp;#xFC;hrt zu seltsamen Effekten\n\nAuch hier: keine gro&amp;#xDF;en Einschr&amp;#xE4;nkungen\n
  • &amp;#x2022; die JavaScript-L&amp;#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&amp;#x2022; Wir haben mit den vorgestellten L&amp;#xF6;sungen diese HTML-5-APIs abgedeckt.\n&amp;#x2022; Diese Features sind somit heute verwendbar!\n\nCUT:\n&amp;#x2022; Es gibt noch einen Haufen mehr, die ich aus Zeitgr&amp;#xFC;nden nicht integriert \nhabe. Das ganze Thema: Audio-/Video-Tag mit Flashfallback oder Webfonts zum Beispiel. Sp&amp;#xE4;ter stelle noch Links vor, unter denen man schauen kann, was noch alles m&amp;#xF6;glich ist.\n
  • &amp;#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&amp;#xE4;ngigkeiten (jQuery o.&amp;#xE4;.), die wieder Ressourcen ben&amp;#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&amp;#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&amp;#xE4;ten im git/SVN\n&amp;#x2022; Die Performance wird leiden (HTC erkl&amp;#xE4;ren)\n&amp;#x2022; Nebeneffekte nicht auszuschlie&amp;#xDF;en (Filter auf Filter z.B.)\n&amp;#x2022; JavaScript wird immer ben&amp;#xF6;tigt (dazu komme ich auf der n&amp;#xE4;chsten Seite noch einmal)\n
  • &amp;#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&amp;#xE4;ngigkeiten (jQuery o.&amp;#xE4;.), die wieder Ressourcen ben&amp;#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&amp;#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&amp;#xE4;ten im git/SVN\n&amp;#x2022; Die Performance wird leiden (HTC erkl&amp;#xE4;ren)\n&amp;#x2022; Nebeneffekte nicht auszuschlie&amp;#xDF;en (Filter auf Filter z.B.)\n&amp;#x2022; JavaScript wird immer ben&amp;#xF6;tigt (dazu komme ich auf der n&amp;#xE4;chsten Seite noch einmal)\n
  • &amp;#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&amp;#xE4;ngigkeiten (jQuery o.&amp;#xE4;.), die wieder Ressourcen ben&amp;#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&amp;#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&amp;#xE4;ten im git/SVN\n&amp;#x2022; Die Performance wird leiden (HTC erkl&amp;#xE4;ren)\n&amp;#x2022; Nebeneffekte nicht auszuschlie&amp;#xDF;en (Filter auf Filter z.B.)\n&amp;#x2022; JavaScript wird immer ben&amp;#xF6;tigt (dazu komme ich auf der n&amp;#xE4;chsten Seite noch einmal)\n
  • &amp;#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&amp;#xE4;ngigkeiten (jQuery o.&amp;#xE4;.), die wieder Ressourcen ben&amp;#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&amp;#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&amp;#xE4;ten im git/SVN\n&amp;#x2022; Die Performance wird leiden (HTC erkl&amp;#xE4;ren)\n&amp;#x2022; Nebeneffekte nicht auszuschlie&amp;#xDF;en (Filter auf Filter z.B.)\n&amp;#x2022; JavaScript wird immer ben&amp;#xF6;tigt (dazu komme ich auf der n&amp;#xE4;chsten Seite noch einmal)\n
  • &amp;#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&amp;#xE4;ngigkeiten (jQuery o.&amp;#xE4;.), die wieder Ressourcen ben&amp;#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&amp;#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&amp;#xE4;ten im git/SVN\n&amp;#x2022; Die Performance wird leiden (HTC erkl&amp;#xE4;ren)\n&amp;#x2022; Nebeneffekte nicht auszuschlie&amp;#xDF;en (Filter auf Filter z.B.)\n&amp;#x2022; JavaScript wird immer ben&amp;#xF6;tigt (dazu komme ich auf der n&amp;#xE4;chsten Seite noch einmal)\n
  • &amp;#x2022; Problem dem Verantwortlichen verst&amp;#xE4;ndlich machen (&amp;#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&amp;#x201D;)\n&amp;#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&amp;#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&amp;#xE4;ufe kann man sch&amp;#xF6;ne Interfaces bauen.\n&amp;#x2022; Kompromisse schlie&amp;#xDF;en (L&amp;#xF6;sung soll ja in Time, Budget und Quality sein!)\n
  • &amp;#x2022; Problem dem Verantwortlichen verst&amp;#xE4;ndlich machen (&amp;#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&amp;#x201D;)\n&amp;#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&amp;#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&amp;#xE4;ufe kann man sch&amp;#xF6;ne Interfaces bauen.\n&amp;#x2022; Kompromisse schlie&amp;#xDF;en (L&amp;#xF6;sung soll ja in Time, Budget und Quality sein!)\n
  • &amp;#x2022; Problem dem Verantwortlichen verst&amp;#xE4;ndlich machen (&amp;#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&amp;#x201D;)\n&amp;#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&amp;#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&amp;#xE4;ufe kann man sch&amp;#xF6;ne Interfaces bauen.\n&amp;#x2022; Kompromisse schlie&amp;#xDF;en (L&amp;#xF6;sung soll ja in Time, Budget und Quality sein!)\n
  • &amp;#x2022; Problem dem Verantwortlichen verst&amp;#xE4;ndlich machen (&amp;#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&amp;#x201D;)\n&amp;#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&amp;#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&amp;#xE4;ufe kann man sch&amp;#xF6;ne Interfaces bauen.\n&amp;#x2022; Kompromisse schlie&amp;#xDF;en (L&amp;#xF6;sung soll ja in Time, Budget und Quality sein!)\n
  • &amp;#x2022; Problem dem Verantwortlichen verst&amp;#xE4;ndlich machen (&amp;#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&amp;#x201D;)\n&amp;#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&amp;#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&amp;#xE4;ufe kann man sch&amp;#xF6;ne Interfaces bauen.\n&amp;#x2022; Kompromisse schlie&amp;#xDF;en (L&amp;#xF6;sung soll ja in Time, Budget und Quality sein!)\n
  • &amp;#x2022; Problem dem Verantwortlichen verst&amp;#xE4;ndlich machen (&amp;#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&amp;#x201D;)\n&amp;#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&amp;#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&amp;#xE4;ufe kann man sch&amp;#xF6;ne Interfaces bauen.\n&amp;#x2022; Kompromisse schlie&amp;#xDF;en (L&amp;#xF6;sung soll ja in Time, Budget und Quality sein!)\n
  • &amp;#x2022; Problem dem Verantwortlichen verst&amp;#xE4;ndlich machen (&amp;#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&amp;#x201D;)\n&amp;#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&amp;#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&amp;#xE4;ufe kann man sch&amp;#xF6;ne Interfaces bauen.\n&amp;#x2022; Kompromisse schlie&amp;#xDF;en (L&amp;#xF6;sung soll ja in Time, Budget und Quality sein!)\n
  • \n
  • &amp;#x2022; Alte Browser k&amp;#xF6;nnen mehr, als man zun&amp;#xE4;chst denkt (auch dank manch eigent&amp;#xFC;mlicher Erfindungen von Micorosoft (Filter, Behavior, HTC) - aber immerhin hat MS auch AJAX erfunden)!\n&amp;#x2022; Polyfills / shims sind Br&amp;#xFC;ckentechnologie, um bereits heute zukunftsf&amp;#xE4;higen Code zu schreiben\n&amp;#x2022; Die Zeit arbeitet daher F&amp;#xDC;R uns!\n\nSchrittweise Verbesserung durch sog. Progressive Enhancement. z.B. wenn der Browser Geolocation anbietet und zul&amp;#xE4;sst, dann f&amp;#xFC;llt zeigt man z.B. die n&amp;#xE4;chste Filiale direkt an. Ansonsten zeigt man eine Deutschlandkarte gem&amp;#xE4;&amp;#xDF; IP-Adresse. Das ist jetzt kein Beinbruch und der Benutzer kommt auch so zum Ziel, aber falls die M&amp;#xF6;glichkeit besteht, dann wird der Erlebnis f&amp;#xFC;r ihn halt ein aufgewertet.\n\nFehlertoleranz durch Graceful degredation\n\n&amp;#x2022; Dennoch: gut &amp;#xFC;berlegen und abw&amp;#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&amp;#xF6;hnt! Im Office mit dem IE verhalten sich Seiten anders als daheim im Chrome. Graceful degredation auch mit Polyfills/shims: &amp;#xE4;hnlich wie bei CSS3 wird nicht alles unterst&amp;#xFC;tzt.\n
  • Ich m&amp;#xF6;chte euch heute eines mitgeben:\nhabt den Mut, moderne Webstandards bereits heute einzusetzen. Es gibt keine Rundum-Sorglos-L&amp;#xF6;sung und vielleicht gibt es jetzt auch die ein oder andere Erwartung, die recht hoch ist. Aber Fakt ist: wir k&amp;#xF6;nnen heute schon so viele dieser tollen M&amp;#xF6;glichkeiten verwenden und damit zeitgem&amp;#xE4;&amp;#xDF;e, tolle Webseiten / Webanwendungen umsetzen, dass es diese M&amp;#xFC;he wert ist!\n
  • \n
  • \n
  • Transcript of "HTML5-Legacy-Anwendungen"

    1. 1. HTML-5-Legacy-AnwendungenJonathan Weiß
    2. 2. Zur Person• Technischer Berater und Frontend-Entwickler bei Virtual Identity AG• Webentwickler aus Leidenschaft• Im Netz seit 1998• Hassliebe für Webtechnologien
    3. 3. Wir leben in spannenden Zeiten…
    4. 4. Wir leben in spannenden Zeiten…
    5. 5. Wir leben in spannenden Zeiten…
    6. 6. Wir leben in spannenden Zeiten…
    7. 7. Wir leben in spannenden Zeiten…
    8. 8. Wir leben in spannenden Zeiten…
    9. 9. Wir leben in spannenden Zeiten…
    10. 10. Wir leben in spannenden Zeiten…
    11. 11. Wir leben in spannenden Zeiten…
    12. 12. Wir leben in spannenden Zeiten…
    13. 13. Wir leben in spannenden Zeiten…
    14. 14. Wir leben in spannenden Zeiten…
    15. 15. … haben aber ein kleines Problem!
    16. 16. … haben aber ein kleines Problem!
    17. 17. … haben aber ein kleines Problem! http://evolutionofweb.appspot.com/
    18. 18. … haben aber ein kleines Problem! http://evolutionofweb.appspot.com/
    19. 19. … haben aber ein kleines Problem! http://evolutionofweb.appspot.com/
    20. 20. … haben aber ein kleines Problem! http://evolutionofweb.appspot.com/
    21. 21. … haben aber ein kleines Problem! http://evolutionofweb.appspot.com/
    22. 22. Weltweit verwenden nur 58% der Benutzer einen HTML-5-fähigen Browser unbekannt 4 % Legacy 38 % HTML5 58 %http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
    23. 23. Was nun?a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
    24. 24. Was nun?a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
    25. 25. Flashback: Webtechnologie 2001Diese Demos werden im Internet Explorer 6.0 gezeigt:1. a) http://midiwebconcept.free.fr/Demos/Ffox.htm b) http://http.midiwebconcept.free.fr/PeleMele.htm2. http://mysterycity.de/transform/test/test.html3. http://www.useragentman.com/tests/cssSandpaper/cube3.html
    26. 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?
    27. 27. Zwei hilfreiche Werkzeuge
    28. 28. Zwei hilfreiche WerkzeugeSpachtelmasse Unterlegscheibe
    29. 29. Zwei hilfreiche WerkzeugeSpachtelmasse Unterlegscheibe„polyfill“ „shim“
    30. 30. Lösungen für fünf Bereiche• Storage• 2D-Grafiken• Connectivity• Eye Candy• HTML-5-Tags
    31. 31. Die drei Lösungswege• Reines JavaScript• Feature vom Internet Explorer („IE-Magic“)• Einsatz von Plugins
    32. 32. Web Storage: amplify.store - Vorstellung• Ziel: Daten clientseitig (dauerhaft) speichern• Web-Standard: WebStorage bestehend aus SessionStorage & LocalStorage• IE-Magic: IE 6 und 7 verwenden Behaviors• IE8+ unterstützt Standard-API• Entwickler: Firma appendTo, Lizenz: MIT und GPL• Ist ein jQuery-Plugin
    33. 33. Web Storage: amplify.store - Einsatzvar myStore = amplify.store[window.localStorage ? localStorage : userData];/*lierfert die Methode amplify.store.localStore oder amplify.store.userData*/myStore(foo, bar);alert(myStore(foo)); // barmyStore(complex, { foo : bar, magicNumber : 42 });alert(myStore(complex)); // Objectalert(myStore(complex)[foo]); // bar​​ http://jsfiddle.net/rZEY7/
    34. 34. 2D-Grafiken: ÜbersichtScalable Vector Graphics (SVG) Canvas• Vektor-Grafik • Bitmap-Grafik• XML-Datei • HTML-Element• Animationen deklarativ möglich • Modifikation von Bildaten möglich• DOM-API für Modifikationen • JavaScript-API
    35. 35. SVG: Raphaël - Einführung• Ziel: Vektorgrafiken anzeigen• Web-Standard: SVG• IE-Magic: IE <9 verwenden VML• IE9+ unterstützt Standard-API• Entwickler: Dmitry Baranovskiy, Lizenz: MIT License
    36. 36. SVG: Raphaël - Einsatz// Creates canvas 320 × 200 in element #drawingContainervar paper = Raphael(drawingContainer, 320, 200);// Creates circle at x = 50, y = 40, with radius 10var 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 blackcircle.attr("stroke", "#000");​ http://jsfiddle.net/utUFz/2/
    37. 37. Canvas: ExplorerCanvas - Einführung• Ziel: Dynamsiche Bitmapgrafiken anzeigen• Web-Standard: Canvas• IE-Magic: IE < 9 verwenden Silverlight-Plugin oder VML• IE9+ unterstützt Standard-API• Entwickler: Firma Google, Lizenz: Apache License
    38. 38. Canvas: ExplorerCanvas - Einsatz<html><head> <script type="text/javascript" src="excanvas.js"></script> <script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } </script></head><body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas></body></html>
    39. 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. 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. 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
    42. 42. Eye Candy: CSS3Pie - Einsatz#myElement { border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; border-radius: 15px; box-shadow: #666 0px 2px 3px; -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(/PIE.htc);} http://css3pie.com/
    43. 43. Eye-Candy: cssSandpaper - Vorstellung• Ziel: Für 2D-Transformationen von Elementen• IE-Magic: IE < 9 verwenden Matrix-Filter• IE 9 unterstüzt CSS3 Transforms• von Zoltan Hawryluk, Lizenz: MIT
    44. 44. Eye-Candy: cssSandpaper - Einsatz<!DOCTYPE html><html lang="en"><head><script type="text/javascript" src="cssSandpaper.js"></script><style>#o1 { border: solid 1px black; position: absolute; width: 100px; height: 20px; padding: 10px; background-color: white; -sand-transform: rotate(45deg);}</style></head><body> <div id="o1">Can you read me?</div></body></html>
    45. 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
    46. 46. HTML-5-Tags: html5shim - Einsatz<!doctype html><html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="html5.js"></script></head><body> <header> <h1>Page title</h1> </header> <nav>Navigation</nav> <section id="intro">Teaser</section> <section>Main content</section> <aside>Sidebar</aside> <footer>Footer</footer></body></html>
    47. 47. Zusammenfassung • WebStorage • SVG • Canvas • CSS3 • WebSocket • HTML-5-Tags http://www.w3.org/html/logo/
    48. 48. Ist nun alles in Butter?
    49. 49. Ist nun alles in Butter?• polyfills/shims sind keine Module
    50. 50. Ist nun alles in Butter?• polyfills/shims sind keine Module• Keine vollständige Abdeckung der Web-Standards!
    51. 51. Ist nun alles in Butter?• polyfills/shims sind keine Module• Keine vollständige Abdeckung der Web-Standards!• Performance beobachten!
    52. 52. Ist nun alles in Butter?• polyfills/shims sind keine Module• Keine vollständige Abdeckung der Web-Standards!• Performance beobachten!• Nebeneffekte
    53. 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
    54. 54. Vorgehen beim Einsatz von polyfills/shims
    55. 55. Vorgehen beim Einsatz von polyfills/shims Time Budget Quality
    56. 56. Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären Time Budget Quality
    57. 57. Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären Time2. Alternativen aufzeigen Budget Quality
    58. 58. Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären Time2. Alternativen aufzeigen3. Einschränkungen beachten Budget Quality
    59. 59. Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären Time2. Alternativen aufzeigen3. Einschränkungen beachten4. Prototypen erstellen Budget Quality
    60. 60. Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären Time2. Alternativen aufzeigen3. Einschränkungen beachten4. Prototypen erstellen5. Performance testen Budget Quality
    61. 61. Vorgehen beim Einsatz von polyfills/shims1. Generelle Problematik erklären Time2. Alternativen aufzeigen3. Einschränkungen beachten4. Prototypen erstellen5. Performance testen Budget Quality6. Kompromisse eingehen
    62. 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
    63. 63. Fazit
    64. 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. 65. Was nun? (Teil 2)a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
    66. 66. Was nun? (Teil 2)a.Kleinsten gemeinsamen Nenner verwenden…b.Ignorieren und auf moderne Webtechnologien setzen…c.Warten…?
    67. 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. 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

    ×