HTML-5-Legacy-Anwendungen

HTML-5-Legacy-Anwendungen Jonathan Weiß Samstag, 12. Mai 12

Zur Person • Technischer Berater und Frontend-Entwickler bei Virtual Identity
AG • Webentwickler aus Leidenschaft • Im Netz seit 1998 • @jonathan_weiss Samstag, 12. Mai 12

Wir leben in spannenden Zeiten… Samstag, 12. Mai 12

… haben aber ein kleines Problem! Samstag, 12. Mai 12

… haben aber ein kleines Problem! http://evolutionofweb.appspot.com/ Samstag, 12. Mai
12

Weltweit verwenden nur 58% der Benutzer einen HTML-5-fähigen Browser Legacy
38 % HTML5 58 % unbekannt 4 % http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 Samstag, 12. Mai 12

Was nun? a.Kleinsten gemeinsamen Nenner verwenden… b.Ignorieren und auf moderne
Webtechnologien setzen… c.Warten…? Samstag, 12. Mai 12

Flashback: Webtechnologie 2001 Demos Samstag, 12. Mai 12

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? Samstag, 12. Mai 12

Zwei hilfreiche Werkzeuge „polyﬁll“ „shim“ Spachtelmasse Unterlegscheibe Samstag, 12. Mai
12

Lösungen für fünf Bereiche • Storage • Eye Candy •
Connectivity • 2D-Graﬁken • HTML-5-Tags Samstag, 12. Mai 12

Die drei Lösungswege • Reines JavaScript • Feature vom Internet
Explorer („IE-Magic“) • Einsatz von Plugins Samstag, 12. Mai 12

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, Lizenze: MIT und GPL • Ist ein jQuery-Plugin Samstag, 12. Mai 12

Web Storage: amplify.store - Einsatz var$myStore$=$amplify.store[window.localStorage$? $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$'localStorage'$:$'userData']; /* lierfert$die$Methode $$amplify.store.localStore$oder$
$$amplify.store.userData */ myStore('foo',$'bar'); alert(myStore('foo'));$//$bar myStore('complex',${$'foo'$:$'bar',$magicNumber$:$42$}); alert(myStore('complex'));$//$Object alert(myStore('complex')['foo']);$//$bar http://jsﬁddle.net/rZEY7/ Samstag, 12. Mai 12

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 Samstag, 12. Mai 12

Eye Candy: CSS3Pie - Einsatz #myElement${ $$border:$1px$solid$#696; $$padding:$60px$0; $$textValign:$center; $$width:$200px;
$$borderVradius:$15px; $$boxVshadow:$#666$0px$2px$3px; $$VpieVbackground:$linearVgradient(#EEFF99,$#66EE33); $$behavior:$url(/PIE.htc); } http://css3pie.com/ Samstag, 12. Mai 12

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 Samstag, 12. Mai 12

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; $ backgroundVcolor:$white; $ VsandVtransform:$rotate(45deg); } </style></head> <body> $ <div$id="o1">Can$you$read$me?</div> </body> </html> Samstag, 12. Mai 12

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 Samstag, 12. Mai 12

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/ sockjsV0.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); $$$$}); }); Samstag, 12. Mai 12

2D-Grafiken: Übersicht Scalable Vector Graphics (SVG) • Vektor-Grafik • XML-Datei
• Animationen deklarativ möglich • DOM-API für Modifikationen Canvas • Bitmap-Grafik • HTML-Element • JavaScript-Zeichen-API Samstag, 12. Mai 12

SVG: Raphaël - Einführung • Ziel: Vektorgraﬁken anzeigen • Web-Standard:
SVG • IE-Magic: IE <9 verwenden VML • IE9+ unterstützt Standard-API • Entwickler: Dmitry Baranovskiy, Lizenz: MIT License Samstag, 12. Mai 12

SVG: Raphaël - Einsatz http://jsﬁddle.net/utUFz/2/ // 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"); Samstag, 12. Mai 12

Canvas: ExplorerCanvas - Einführung • Ziel: Dynamsiche Bitmapgraﬁken anzeigen •
Web-Standard: Canvas • IE-Magic: IE < 9 verwenden Silverlight-Plugin oder VML • IE9+ unterstützt Standard-API • Entwickler: Firma Google, Lizenz: Apache License Samstag, 12. Mai 12

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> Samstag, 12. Mai 12

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 Samstag, 12. Mai 12

HTML-5-Tags: html5shim - Einsatz <!doctype$html> <html> <head> $$$$<meta$httpVequiv="XVUAVCompatible"$content="IE=edge,chrome=1"> $$$$<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> Samstag, 12. Mai 12

Zusammenfassung • WebStorage • CSS3 • WebSocket • SVG •
Canvas • HTML-5-Tags Samstag, 12. Mai 12

Ist nun alles in Butter? • polyﬁlls/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standard! • Performance beobachten! • Nebeneffekte Samstag, 12. Mai 12

Vorgehen beim Einsatz von polyﬁlls/shims 1. Generelle Problematik erklären 2.
Alternativen aufzeigen 3. Einschränkungen beachten 4. Prototypen erstellen 5. Performance testen 6. Kompromisse eingehen Time Budget Quality Samstag, 12. Mai 12

Wichtige Ressourcen • When can I use… http://caniuse.com/ • HTML5
please http://html5please.com/ • HTML5 Cross Browser Polyﬁlls https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyﬁlls Samstag, 12. Mai 12

Fazit • Legacy Browser sind leistungsfähiger, als vermutet • Polyﬁlls
/ shims als Brückentechnologie verwenden • Die Zeit arbeitet für uns! • Progressive enhancement für optionale Features • Graceful degradation vor allem bei visuellen Aspekten Samstag, 12. Mai 12

Was nun? (Teil 2) a.Kleinsten gemeinsamen Nenner verwenden… b.Ignorieren und
auf moderne Webtechnologien setzen… c.Warten…? Samstag, 12. Mai 12

Fragen? @jonathan_weiss http://jonathanweiss.net/me Samstag, 12. Mai 12

HTML-5-Legacy-Anwendungen

HTML-5-Legacy-Anwendungen

More Decks by Jonathan Weiß

Other Decks in Programming

Featured

Transcript