HTML5-Legacy-Anwendungen

HTML-5-Legacy-Anwendungen
Jonathan Weiß

Zur Person

• Technischer Berater und Frontend-Entwickler bei Virtual Identity AG

• Webentwickler aus Leidenschaft

• Im Netz seit 1998

• Hassliebe für Webtechnologien

Wir leben in spannenden Zeiten…

… haben aber ein kleines Problem!

… haben aber ein kleines Problem!

http://evolutionofweb.appspot.com/

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

Was nun?

a.Kleinsten gemeinsamen Nenner verwenden…

b.Ignorieren und auf moderne Webtechnologien setzen…

c.Warten…?

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

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?

Zwei hilfreiche Werkzeuge

Spachtelmasse Unterlegscheibe

Zwei hilfreiche Werkzeuge

Spachtelmasse Unterlegscheibe
„polyﬁll“ „shim“

Lösungen für fünf Bereiche

• Storage

• 2D-Graﬁken

• 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 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

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/

2D-Grafiken: Übersicht

Scalable 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

SVG: Raphaël - Einführung

• Ziel: Vektorgraﬁken anzeigen

• Web-Standard: SVG

• IE-Magic: IE <9 verwenden VML


• Entwickler: Dmitry Baranovskiy, Lizenz: MIT License

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/

Canvas: ExplorerCanvas - Einführung

• Ziel: Dynamsiche Bitmapgraﬁken anzeigen

• Web-Standard: Canvas

• IE-Magic: IE < 9 verwenden Silverlight-Plugin oder VML


• Entwickler: Firma Google, Lizenz: Apache License

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>

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

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);
});
});

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

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/

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

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>

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

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>

Zusammenfassung

• WebStorage

• SVG

• Canvas

• CSS3

• WebSocket

• HTML-5-Tags

http://www.w3.org/html/logo/

Ist nun alles in Butter?

• polyﬁlls/shims sind keine Module



• Keine vollständige Abdeckung der Web-Standards!




• Performance beobachten!





• Nebeneffekte





• Nebeneffekte

• JavaScript wird benötigt

Vorgehen beim Einsatz von polyﬁlls/shims


Time

Budget Quality


1. Generelle Problematik erklären Time

Budget Quality



2. Alternativen aufzeigen

Budget Quality




3. Einschränkungen beachten

Budget Quality





4. Prototypen erstellen

Budget Quality






5. Performance testen
Budget Quality






5. Performance testen
Budget Quality
6. Kompromisse eingehen

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

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

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
• Audio/Video
• Webfonts
• …?

Fragt mich einfach
in der Pause oder
später per Mail/
Twitter/Whatever :-)

@jonathan_weiss

(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

HTML5-Legacy-Anwendungen

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Destacado

Destacado (20)

Similar a HTML5-Legacy-Anwendungen

Similar a HTML5-Legacy-Anwendungen (20)

HTML5-Legacy-Anwendungen

Notas del editor