HTML5 ermöglicht es Entwicklern leistungsfähige Webanwendungen zu schreiben, die einen Vergleich mit Desktop-Anwendungen immer weniger scheuen müssen. Beim Einsatz von HTML5 besteht jedoch die Gefahr, dass man über das Ziel hinausschießt und die Anwendungen wichtigen Zielgruppen vorenthält:
1. Mitarbeiter in (großen) Unternehmen können häufig nur einen Legacy-Browser verwenden, der wesentliche Teile von HTML5 nicht unterstützt.
2. Viele Menschen, besonders aus den Schwellenländern, gehen zum ersten mal mit einem Smartphone online. Dies ist dann aber kein High-End-Produkt wie ein modernes iPhone, sondern ein wesentlich weniger leistungsfähiges Gerät.
3. Obwohl heute viele Screenreader JavaScript beherrschen ist das noch keine Garantie dafür, dass eine Webanwendung auch körperlich eingeschränkten Nutzern zugänglich ist.
Jonathan erklärt, wie man eine Moderne Webanwendung entwirft und umsetzt, die allen Zielgruppen gerecht wird und stellt Tools und Frameworks vor die bei dieses Vorhaben unterstützen.
2. Zur Person
• Freier Berater und Entwickler mit Schwerpunkt Webtechnologien
• Im Netz seit 1998
• Webentwickler aus Leidenschaft
• Spezialisiert auf Frontend, fasziniert von JavaScript
2Montag, 24. Juni 13
3. Zur Person
• Freier Berater und Entwickler mit Schwerpunkt Webtechnologien
• Im Netz seit 1998
• Webentwickler aus Leidenschaft
• Spezialisiert auf Frontend, fasziniert von JavaScript
Hire me!
2Montag, 24. Juni 13
21. Feature Detection mit Modernizr
• Erkennt Features (APIs) des Browsers
• setzt CSS-Klassen für jedes (nativ unterstützte, sowie nicht-unterstützte)
Feature auf das <html>-Tag: <html
class=”history
no-‐touch...”>
• bietet Lookup für Features in JS an: if
(Modernizr.svg)
{...
• enthält einen Loader für Dateien
• liefert Prefixes für CSS-Klassen
10Montag, 24. Juni 13
23. Modernizr: Abfrage von Features in JS
if
(Modernizr.canvas)
{
//
Implementierung
mit
der
Canvas-‐API
}
else
{
//
Fallback-‐Implementierung
(z.B.
Flash-‐Plugin)
}
12Montag, 24. Juni 13
24. Polyfills: moderne APIs in alten Browsern
• bilden native APIs nach
• ermöglichen heute bereits den Einsatz von (künftigen) Web-Standards
• kommen nur zum Einsatz, wenn der Browser die API nicht unterstützt
• gehen daher Hand in Hand mit Modernizr
13Montag, 24. Juni 13
25. Polyfills: wie ist das möglich?
• Reines JavaScript
• Feature vom Internet Explorer („IE-Magic“)
• Einsatz von Browser-Plugins
14Montag, 24. Juni 13
34. Local Storage: index.html (Teil 2 von 2)
function
init()
{
var
value
=
localStorage.getItem('mycontent');
if
(value)
{
$('#mytext').val(value);
}
$('#submitbutton').on('click'
function(ev)
{
var
value
=
$('#mytext').val();
localStorage.setItem('mycontent',
value);
});
}
</script>
23Montag, 24. Juni 13
35. Local Storage: local-storage.js
Polyfill von Brett Wejrowski, verwendet intern das userData Behavior
(http://msdn.microsoft.com/en-us/library/ms531424(v=vs.85).aspx)
var
div
=
document.createElement("div");
div.style.display
=
"none";
document.getElementsByTagName("head")[0].appendChild(div);
div.addBehavior("#default#userdata");
var
localStorage
=
window["localStorage"]
=
{
"getItem":
function(key)
{
div.load('localStorage');
return
div.getAttribute(key);
},
"setItem":function(key,
value){
div.load('localStorage');
return
div.setAttribute(key,
value);
}
https://github.com/wojodesign/local-storage-js
24Montag, 24. Juni 13
40. Polyfills: Probleme
• Polyfills sind keine Module - manche sind zueinander inkompatibel
• Performance im Blick behalten
• Mit Nebeneffekte rechnen
• Qualität prüfen
➔ kurz: wissen, was das Polyfill macht!
29Montag, 24. Juni 13
50. Graceful Degradation
• Login per AJAX > Login per POST-Request
• Sanftes Scrollen zum Element > Sprung zum Textanker
• Video als Video-Tag > Video in Flash > Video als Download im neuen Tab
• Upload per Drag and Drop > Upload über Formular-Submit
33Montag, 24. Juni 13
57. Graded Browser Support
A C X
Traffic
Browser-
Leistung
Entwicklung
& Testing
Erwartete
User
Experience
hoch signifikant gering
hoch gering Annahme: hoch
aktive Entwicklung &
aktives Testing
aktive Entwicklung &
aktives Testing
keine
Berücksichtigung
hoch gering* Annahme: hoch
39Montag, 24. Juni 13
58. Graded Browser Support: Beispiel
A-graded Browsers in Q3 2012
Safari auf iOS 4.x
„Browser“ auf Android 2.3.x
Internet Explorer auf Windows Phone 7.5
40Montag, 24. Juni 13
59. Graded Browser Support: Beispiel
A-graded Browsers in Q1 2013
Safari auf iOS 4.x
„Browser“ auf Android 2.3.x ➔ X
Internet Explorer auf Windows Phone 7.5 ➔ C
40Montag, 24. Juni 13
60. Eigene Browser-Matrix (Beispiel)
• iOS 5+
• Android 4.x
• Windows Phone 8
• BlackBerry 10+
• Opera Mobile 12+
• FireFox Mobile 15+
• Chrome (Android)
• iOS 3.2
• Android 2.2.x
• Windows Phone 7.5
• BlackBerry OS 7.x
• Opera Mobile 10
• webOS 2.1
• Android 1.5
• Windows Mobile 6.5
• Nokia S60
41Montag, 24. Juni 13
61. Grundlagen für die eigene Browser-Matrix
• Traffic
• Auswertung der Logs
• „Strategischer Browser“
• Leistungsfähigkeit
• http://html5test.com/results/mobile.html
• http://caniuse.com/
• http://www.quirksmode.org/mobile/
42Montag, 24. Juni 13
62. Gerätedatenbank: Vorteile
• Modernizr kann nicht alles zuverlässig erkennen
• Der Server kann direkt den richtigen Content (z.B. für Mobile) schicken
• Bonuspunkt: Geräteklasse wird mitgeliefert
(SmartPhone, Tablet, SmartTV, …)
• Man kann Bugs auf Geräten gezielt entgegenwirken*
43Montag, 24. Juni 13
63. Gerätedatenbank: WURFL
• WURFL = Wireless Universal Resource FiLe, von ScientiaMobile
• ~ 15.000 Geräte enthalten
• listet 500+ Fähigkeiten in 30 Gruppen
(u.a. AJAX, CSS, HTML_UI, Playback, Streaming)
• kontinuierliche Updates und Pflege der DB
• APIs (unter der AGPL) verfügbar für ASP.NET, Java, PHP
44Montag, 24. Juni 13
67. Performance: Umgebung
Im Vergleich zum Desktop haben Mobilgeräte
• schwächere CPUs und weniger RAM
• unterwegs eine langsamere Internet-Verbindung
• (in der Regel) leistungsfähige Browser-Engines!
47Montag, 24. Juni 13
69. Performance: Umgebung
Browser-Engine zum eigenen Vorteil nutzen! Zum Beispiel…
• Ressourcen lokal zwischenspeichern (LocalStorage, AppCache, …)
• CSS Transition anstatt element.animate({…
• auf die „richtigen“ Events reagieren
• CSS Transforms verlagert das Rendering auf die GPU.
• Icon-Fonts anstelle von Bildern (Bonuspunkt: Retina!)
48Montag, 24. Juni 13
71. Performance: Schnelle Reaktion auf Eingaben
FastClick von Rowan Beentje & Matthew Galizia, MIT License
window.addEventListener('load',
function()
{
FastClick.attach(document.body);
},
false);
49Montag, 24. Juni 13
72. Performance: Schnelle Reaktion auf Eingaben
FastClick von Rowan Beentje & Matthew Galizia, MIT License
window.addEventListener('load',
function()
{
FastClick.attach(document.body);
},
false);
<a
class="needsclick">Langsam,
aber
sicher!</a>
Anstelle eines synthetischen Events, kann bei Problemen auch das echte
Event verwendet werden:
49Montag, 24. Juni 13
82. WAI-ARIA: Document Structure
<h1
role="heading">What
is
a
browser?</h1>
<p
role="definition">A
computer
program
that
enables
internet
users
to
access,
navigate,
and
search
World
Wide
Web
sites.</p>
<p
role="separator">—————</p>
<h3
role="heading">Examples</h3>
<ul
role="list">
<li
role="listitem">Mozilla
Firefox</li>
...
</ul>
59Montag, 24. Juni 13
83. WAI-ARIA: States & Properties
<label
for="fullname">Name</label>
<input
id="fullname"
aria-‐required="true"
aria-‐
labelledby="namedesc"
aria-‐invalid="false"
type="text">
<span
id="namedesc"
tabindex="-‐1"
aria-‐hidden="true">(Please
enter
your
full
name)</span>
<p
class="error"
tabindex="-‐1"
aria-‐hidden="true">You
did
not
enter
your
full
name.
Please
go
back
to
the
input
field.</p>
<button
class="btn
btn-‐large
btn-‐danger"
tabindex="0"
aria-‐
label="Resetting
will
remove
all
data
you
entered
in
this
form.
Reset">Reset</button>
if
(!nameIsValid()
{
$('.error').show().attr({
'aria-‐hidden':
'false',
'tabindex':
'0'
}).focus();
}
60Montag, 24. Juni 13
84. WAI-ARIA: Alternative Implementierung
<div
role="alert"
id="summary"></div>
var
warnings
=
[];
if
(!nameIsValid())
{
warnings.push('Please
enter
your
full
name.');
}
if
(!genderIsValid())
{
warnings.push('Please
specify
your
gender.');
}
if
(!agreed())
{
warnings.push('You
have
to
agree
to
the
terms
of
service.');
}
if
(warnings.length
===
0)
{
warnings.push('Registration
successful!');
}
$('#summary').html(
warnings.join('<br
/>')
);
61Montag, 24. Juni 13
89. Zugänglichkeit: Ressourcen
• http://www.w3.org/TR/wai-aria
• Offizielle Spezifikation vom W3C
• http://www.html5accessibility.com
• Übersicht über Browser-Support & umfangreiche Tests
• http://oaa-accessibility.org/
• Detailierte Sammlung von Regeln, Tests und Best Practices für
Zugänglichkeit
64Montag, 24. Juni 13
90. 1. Frontend-Entwickler berücksichtigen heute mehr Geräte und
Ausgabeformate als je zuvor.
2. Es ist möglich, moderne Features in älteren Browser einzusetzen -
aber nicht um jeden Preis!
3. Ein Verständnis aller Projektbeteiligten für modernes Frontend ist
unabdingbar.
4. SmartPhones profitieren von guten Browser-Engines und bieten viel
Potenzial für eine gute User Experience.
5. Auch moderne RIAs können allen zugänglich gemacht werden.
Fazit
65Montag, 24. Juni 13