Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5-Legacy-Anwendungen

1,526 views

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
  • Be the first to comment

  • Be the first to like this

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

×