HTML5 abwärtskompatibel:Gerätevielfalt & ZugänglichkeitJonathan Weiß1Montag, 24. Juni 13
Zur Person• Freier Berater und Entwickler mit Schwerpunkt Webtechnologien• Im Netz seit 1998• Webentwickler aus Leidenscha...
Zur Person• Freier Berater und Entwickler mit Schwerpunkt Webtechnologien• Im Netz seit 1998• Webentwickler aus Leidenscha...
Frontend-Entwicklung macht Spaß…3Montag, 24. Juni 13
WebGLFrontend-Entwicklung macht Spaß…Web WorkersOffline StorageNative MultimediaCanvas 2DFile APIGeolocationWebsockets3Mont...
WebGLFrontend-Entwicklung macht Spaß…Web WorkersOffline StorageNative MultimediaCanvas 2DFile APIGeolocationWebsockets3Mont...
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
… ist aber auch anstrengend!4Montag, 24. Juni 13
Die drei Themen dieses Vortrags1. Legacy-Browser2. SmartPhones3. Zugänglichkeit / Barrierefreiheit5Montag, 24. Juni 13
Eines vorab: HTML5?6Montag, 24. Juni 13
Thema #1: Legacy-Browser (Desktop)7Montag, 24. Juni 13
Weltweit verwendet jeder zweite Benutzer einenHTML-5-fähigen Desktop-BrowserLegacy46 %HTML551 %unbekannt2 %http://www.netm...
Werkzeuge & Hilfsmittel1. Feature Detection2. Polyfills3. Progessive Enhancement / Graceful Degradation9Montag, 24. Juni 13
Feature Detection mit Modernizr• Erkennt Features (APIs) des Browsers• setzt CSS-Klassen für jedes (nativ unterstützte, so...
Modernizr: CSS-Beispiel#myAwesomeButton	  {	  	  font-­‐size:	  2em;	  	  padding:	  1em;	  	  font-­‐family:	  Lucida	  G...
Modernizr: Abfrage von Features in JSif	  (Modernizr.canvas)	  {	  	  //	  Implementierung	  mit	  der	  Canvas-­‐API}	  e...
Polyfills: moderne APIs in alten Browsern• bilden native APIs nach• ermöglichen heute bereits den Einsatz von (künftigen) W...
Polyfills: wie ist das möglich?• Reines JavaScript• Feature vom Internet Explorer („IE-Magic“)• Einsatz von Browser-Plugins...
Polyfills: Demos• Geolocation• LocalStorage• CSS315Montag, 24. Juni 13
Geolocation: index.html<script	  type="text/javascript">Modernizr.load([	   {	   	   test:	  Modernizr.geolocation,	   	  ...
Geolocation: geoip.jsfunction	  geoip_country_code()	  {	  return	  DE;	  }function	  geoip_country_name()	  {	  return	  ...
Geolocation: geo-shim.js//	  geo-­‐location	  shimnavigator.geolocation	  =	  {	   getCurrentPosition	  :	  function(callb...
Geolocation: main.jsfunction	  initialize()	  {	  	  //	  Google	  Maps	  wird	  initialisiert	  in	  “map”	   navigator.g...
Geolocation: Demo20Montag, 24. Juni 13
Local Storage: index.html<script	  type="text/javascript">Modernizr.load([	   {	   	   test:	  Modernizr.localstorage,	   ...
Local Storage: index.html (Teil 1 von 2)<script	  type="text/javascript">Modernizr.load([	   {	   	   test:	  Modernizr.lo...
Local Storage: index.html (Teil 2 von 2)function	  init()	  {	  	  var	  value	  =	  localStorage.getItem(mycontent);	  	 ...
Local Storage: local-storage.jsPolyfill von Brett Wejrowski, verwendet intern das userData Behavior(http://msdn.microsoft.c...
Local Storage: Demo25Montag, 24. Juni 13
CSS3: CSS3Pie#target	  {	  	  border:	  1px	  solid	  #696;	  	  padding:	  60px	  0;	  	  text-­‐align:	  center;	  width...
CSS3Pie: Demo27Montag, 24. Juni 13
CSS3Pie: Unter der Haube<css3pie	  id="_pie_107"	  style="DISPLAY:	  block;	  LEFT:	  0px;	  BEHAVIOR:	  none!	  important...
Polyfills: Probleme• Polyfills sind keine Module - manche sind zueinander inkompatibel• Performance im Blick behalten• Mit N...
Polyfills: Ressourcen• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills• http://html5please.com/30M...
Progressive Enhancement31Montag, 24. Juni 13
Progressive Enhancement31Montag, 24. Juni 13
Progressive Enhancement31Montag, 24. Juni 13
Progressive Enhancement31Montag, 24. Juni 13
Progressive EnhancementInteraktionJavaScriptPräsentationCSSStrukturSemantisches HTMLInhaltTexte + Fotos + …31Montag, 24. J...
Progressive Enhancement: Beispiel32Montag, 24. Juni 13
Graceful Degradation33Montag, 24. Juni 13
Graceful Degradation33Montag, 24. Juni 13
Graceful Degradation• Login per AJAX > Login per POST-Request• Sanftes Scrollen zum Element > Sprung zum Textanker• Video ...
Graceful Degradation: Gegenbeispiel34Montag, 24. Juni 13
Graceful Degradation: Gegenbeispiel34Montag, 24. Juni 13
Unterschiede & Gemeinsamkeiten• Unterschiedliche Betrachtungsweise• PE: von innen nach außen• GD: vom Idealfall zum Fehler...
ZusammenfassungNicht-unterstütztesFeature XFallbackbeachten!Bewertung /ArgumentierenPolyfillverwendennativeVerwendungFeatur...
Thema #2: Ältere SmartPhones37Montag, 24. Juni 13
Werkzeuge & Hilfsmittel1. Browser-Matrix2. Gerätedatenbank3. Performance: Analyse & Optimierung38Montag, 24. Juni 13
Graded Browser SupportA C XTrafficBrowser-LeistungEntwicklung& TestingErwarteteUserExperiencehoch signifikant geringhoch geri...
Graded Browser Support: BeispielA-graded Browsers in Q3 2012Safari auf iOS 4.x„Browser“ auf Android 2.3.xInternet Explorer...
Graded Browser Support: BeispielA-graded Browsers in Q1 2013Safari auf iOS 4.x„Browser“ auf Android 2.3.x ➔ XInternet Expl...
Eigene Browser-Matrix (Beispiel)• iOS 5+• Android 4.x• Windows Phone 8• BlackBerry 10+• Opera Mobile 12+• FireFox Mobile 1...
Grundlagen für die eigene Browser-Matrix• Traffic• Auswertung der Logs• „Strategischer Browser“• Leistungsfähigkeit• http://...
Gerätedatenbank: Vorteile• Modernizr kann nicht alles zuverlässig erkennen• Der Server kann direkt den richtigen Content (...
Gerätedatenbank: WURFL• WURFL = Wireless Universal Resource FiLe, von ScientiaMobile• ~ 15.000 Geräte enthalten• listet 50...
Gerätedatenbank: Demo45Montag, 24. Juni 13
Performance: Analyse & Optimierung: Warum?Performance ist Teil der User Experience• Ladezeit• Rendering• Verhalten46Montag...
Performance: Umgebung47Montag, 24. Juni 13
Performance: UmgebungIm Vergleich zum Desktop haben Mobilgeräte• schwächere CPUs und weniger RAM• unterwegs eine langsamer...
Performance: Umgebung48Montag, 24. Juni 13
Performance: UmgebungBrowser-Engine zum eigenen Vorteil nutzen! Zum Beispiel…• Ressourcen lokal zwischenspeichern (LocalSt...
Performance: Schnelle Reaktion auf Eingaben49Montag, 24. Juni 13
Performance: Schnelle Reaktion auf EingabenFastClick von Rowan Beentje & Matthew Galizia, MIT Licensewindow.addEventListen...
Performance: Schnelle Reaktion auf EingabenFastClick von Rowan Beentje & Matthew Galizia, MIT Licensewindow.addEventListen...
Performance: Schnelle Reaktion - Demo50Montag, 24. Juni 13
Messung & Optimierung von Animationen (1/2)el.animate(	  	  {	   	   fontSize:	  42,	   	   paddingTop:	  30,	   	   paddi...
Messung & Optimierung von Animationen (2/2)el.	  	  unbind(webkitTransitionEnd).	  	  on(webkitTransitionEnd,	  callback);...
Messung & Optimierung von Animationen: Demo53Montag, 24. Juni 13
Thema #3: Zugänglichkeit54Montag, 24. Juni 13
Zugänglichkeit: Das Problem im Frontend55Montag, 24. Juni 13
Eine neue Spezifikation: WAI-ARIAWeb Accessibility Initiative - Accessible Rich Internet Applications1. Roles1.1. Landmarks...
WAI-ARIA: Landmarks<!DOCTYPE	  HTML><head>...</head><body>	  	  <div	  id="banner"	  role="banner">OMG	  kittens!	  (banne...
WAI-ARIA: Landmarks-Demo58Montag, 24. Juni 13
WAI-ARIA: Document Structure<h1	  role="heading">What	  is	  a	  browser?</h1><p	  role="definition">A	  computer	  progra...
WAI-ARIA: States & Properties<label	  for="fullname">Name</label><input	  id="fullname"	  aria-­‐required="true"	  aria-­‐...
WAI-ARIA: Alternative Implementierung<div	  role="alert"	  id="summary"></div>var	  warnings	  =	  [];if	  (!nameIsValid()...
WAI-ARIA: States & Properties - Demo62Montag, 24. Juni 13
Zugänglichkeit: Testen63Montag, 24. Juni 13
Zugänglichkeit: Testen• Windows:• NVDA (NonVisual Desktop Access) - Open Source, Sprachausgabe &Braillezeile (ab 0.6p3)• J...
Zugänglichkeit: Ressourcen64Montag, 24. Juni 13
Zugänglichkeit: Ressourcen• http://www.w3.org/TR/wai-aria• Offizielle Spezifikation vom W3C• http://www.html5accessibility.co...
1. Frontend-Entwickler berücksichtigen heute mehr Geräte undAusgabeformate als je zuvor.2. Es ist möglich, moderne Feature...
Fragen?66Montag, 24. Juni 13
(Bildnachweise)• Seite 3: http://www.w3.org/html/logo/• Seite 4: http://commons.wikimedia.org/wiki/File:Assorted_smartphon...
Upcoming SlideShare
Loading in …5
×

HTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit

2,128 views

Published on

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.

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

No Downloads
Views
Total views
2,128
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit

  1. 1. HTML5 abwärtskompatibel:Gerätevielfalt & ZugänglichkeitJonathan Weiß1Montag, 24. Juni 13
  2. 2. Zur Person• Freier Berater und Entwickler mit Schwerpunkt Webtechnologien• Im Netz seit 1998• Webentwickler aus Leidenschaft• Spezialisiert auf Frontend, fasziniert von JavaScript2Montag, 24. Juni 13
  3. 3. Zur Person• Freier Berater und Entwickler mit Schwerpunkt Webtechnologien• Im Netz seit 1998• Webentwickler aus Leidenschaft• Spezialisiert auf Frontend, fasziniert von JavaScriptHire me!2Montag, 24. Juni 13
  4. 4. Frontend-Entwicklung macht Spaß…3Montag, 24. Juni 13
  5. 5. WebGLFrontend-Entwicklung macht Spaß…Web WorkersOffline StorageNative MultimediaCanvas 2DFile APIGeolocationWebsockets3Montag, 24. Juni 13
  6. 6. WebGLFrontend-Entwicklung macht Spaß…Web WorkersOffline StorageNative MultimediaCanvas 2DFile APIGeolocationWebsockets3Montag, 24. Juni 13
  7. 7. … ist aber auch anstrengend!4Montag, 24. Juni 13
  8. 8. … ist aber auch anstrengend!4Montag, 24. Juni 13
  9. 9. … ist aber auch anstrengend!4Montag, 24. Juni 13
  10. 10. … ist aber auch anstrengend!4Montag, 24. Juni 13
  11. 11. … ist aber auch anstrengend!4Montag, 24. Juni 13
  12. 12. … ist aber auch anstrengend!4Montag, 24. Juni 13
  13. 13. … ist aber auch anstrengend!4Montag, 24. Juni 13
  14. 14. … ist aber auch anstrengend!4Montag, 24. Juni 13
  15. 15. … ist aber auch anstrengend!4Montag, 24. Juni 13
  16. 16. Die drei Themen dieses Vortrags1. Legacy-Browser2. SmartPhones3. Zugänglichkeit / Barrierefreiheit5Montag, 24. Juni 13
  17. 17. Eines vorab: HTML5?6Montag, 24. Juni 13
  18. 18. Thema #1: Legacy-Browser (Desktop)7Montag, 24. Juni 13
  19. 19. Weltweit verwendet jeder zweite Benutzer einenHTML-5-fähigen Desktop-BrowserLegacy46 %HTML551 %unbekannt2 %http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=08Montag, 24. Juni 13
  20. 20. Werkzeuge & Hilfsmittel1. Feature Detection2. Polyfills3. Progessive Enhancement / Graceful Degradation9Montag, 24. Juni 13
  21. 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-Klassen10Montag, 24. Juni 13
  22. 22. Modernizr: CSS-Beispiel#myAwesomeButton  {    font-­‐size:  2em;    padding:  1em;    font-­‐family:  Lucida  Grande,  Helvetica,  Arial,  Sans-­‐Serif;    vertical-­‐align:  middle;    color:  #fff;    border:  1px  solid  black;}.cssgradients  #myAwesomeButton  {    background:  linear-­‐gradient(to  bottom,  #65a9d7,  #133c57);}.nocssgradients  #myAwesomeButton  {    background-­‐image:  url(“linear-­‐gradient.png”);}11Montag, 24. Juni 13
  23. 23. Modernizr: Abfrage von Features in JSif  (Modernizr.canvas)  {    //  Implementierung  mit  der  Canvas-­‐API}  else  {    //  Fallback-­‐Implementierung  (z.B.  Flash-­‐Plugin)}12Montag, 24. Juni 13
  24. 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 Modernizr13Montag, 24. Juni 13
  25. 25. Polyfills: wie ist das möglich?• Reines JavaScript• Feature vom Internet Explorer („IE-Magic“)• Einsatz von Browser-Plugins14Montag, 24. Juni 13
  26. 26. Polyfills: Demos• Geolocation• LocalStorage• CSS315Montag, 24. Juni 13
  27. 27. Geolocation: index.html<script  type="text/javascript">Modernizr.load([   {     test:  Modernizr.geolocation,     nope:  [       http://j.maxmind.com/app/geoip.js,       js/geo-­‐shim.js     ],     both:  [       js/main.js,       https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize     ]   }]);</script>16Montag, 24. Juni 13
  28. 28. Geolocation: geoip.jsfunction  geoip_country_code()  {  return  DE;  }function  geoip_country_name()  {  return  Germany;  }function  geoip_city()                  {  return  Düsseldorf;  }function  geoip_region()              {  return  07;  }function  geoip_region_name()    {  return  Nordrhein-­‐Westfalen;  }function  geoip_latitude()          {  return  51.2167;  }function  geoip_longitude()        {  return  6.7667;  }function  geoip_postal_code()    {  return  ;  }function  geoip_area_code()        {  return  ;  }function  geoip_metro_code()      {  return  ;  }17Montag, 24. Juni 13
  29. 29. Geolocation: geo-shim.js//  geo-­‐location  shimnavigator.geolocation  =  {   getCurrentPosition  :  function(callback){     //  Read  data  from  MAXMIND  here     var  lat  =  geoip_latitude();     var  lng  =  geoip_longitude();     callback({       coords:  {         latitude:  lat,         longitude:  lng       }     });   }};navigator.geolocation.watchPosition  =    navigator.geolocation.getCurrentPosition;18Montag, 24. Juni 13
  30. 30. Geolocation: main.jsfunction  initialize()  {    //  Google  Maps  wird  initialisiert  in  “map”   navigator.geolocation.watchPosition(function(pos){        var  geoPos  =  new  google.maps.LatLng(            pos.coords.latitude,            pos.coords.longitude        );        var  marker  =  new  google.maps.Marker({            position:  geoPos,  map:  map        });        map.setCenter(geoPos);        map.setZoom(16);        document.getElementById(coords).innerHTML  =  pos.coords.latitude  +    /    +  pos.coords.longitude;   });19Montag, 24. Juni 13
  31. 31. Geolocation: Demo20Montag, 24. Juni 13
  32. 32. Local Storage: index.html<script  type="text/javascript">Modernizr.load([   {     test:  Modernizr.localstorage,     nope:  [  js/storage.min.js  ]   },   {     test:  window.JSON,     nope:  [  http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js  ]   },   {     load:  [  js/vendor/jquery-­‐1.9.1.min.js  ],     complete:  init   }]);function  init()  {...21Montag, 24. Juni 13
  33. 33. Local Storage: index.html (Teil 1 von 2)<script  type="text/javascript">Modernizr.load([   {     test:  Modernizr.localstorage,     nope:  [  js/storage.min.js  ]   },   {     test:  window.JSON,     nope:  [  http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js  ]   },   {     load:  [  js/vendor/jquery-­‐1.9.1.min.js  ],     complete:  init   }]);function  init()  {...22Montag, 24. Juni 13
  34. 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. 35. Local Storage: local-storage.jsPolyfill 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-js24Montag, 24. Juni 13
  36. 36. Local Storage: Demo25Montag, 24. Juni 13
  37. 37. CSS3: CSS3Pie#target  {    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);}26Montag, 24. Juni 13
  38. 38. CSS3Pie: Demo27Montag, 24. Juni 13
  39. 39. CSS3Pie: Unter der Haube<css3pie  id="_pie_107"  style="DISPLAY:  block;  LEFT:  0px;  BEHAVIOR:  none!  important;  DIRECTION:  ltr;  POSITION:  absolute;  TOP:  5px">    <shape  id="_pie_shadow0_104"  style="LEFT:  0px;  BEHAVIOR:  url(#default#VML);  WIDTH:  202px;  POSITION:  absolute;  TOP:  2px;  HEIGHT:  140px">    <fill  style="BEHAVIOR:  url(#default#VML)"></fill></shape><shape  id="_pie_bgImage0_105"  style="LEFT:  0px;  BEHAVIOR:  url(#default#VML);  WIDTH:  202px;  POSITION:  absolute;  TOP:  0px;  HEIGHT:  140px">    <fill  style="BEHAVIOR:  url(#default#VML)"></fill></shape><shape  id="_pie_border0_106"  style="LEFT:  0px;  BEHAVIOR:  url(#default#VML);  WIDTH:  202px;  POSITION:  absolute;  TOP:  0px;  HEIGHT:  140px">    <fill  style="BEHAVIOR:  url(#default#VML)"></fill></shape></css3pie><DIV  class="  pie_first-­‐child  pie_first-­‐child  pie_first-­‐child"  id="target"  style="BORDER-­‐RIGHT:  #696  1px  solid;  PADDING-­‐RIGHT:  0px;  BORDER-­‐TOP:  #696  1px  solid;  PADDING-­‐LEFT:  0px;  BACKGROUND:  #eeff99;  PADDING-­‐BOTTOM:  60px;  BEHAVIOR:  url(/pie/PIE.htc);  BORDER-­‐LEFT:  #696  1px  solid;  WIDTH:  200px;  PADDING-­‐TOP:  60px;  BORDER-­‐BOTTOM:  #696  1px  solid;  TEXT-­‐ALIGN:  center;  -­‐moz-­‐border-­‐radius:  8px;  -­‐webkit-­‐border-­‐radius:  8px;  border-­‐radius:  8px;  box-­‐shadow:  #666  0px  2px  3px;  -­‐moz-­‐box-­‐shadow:  #666  0px  2px  3px;  -­‐webkit-­‐box-­‐shadow:  #666  0px  2px  3px;  -­‐pie-­‐background:  linear-­‐gradient(#EEFF99,  #66EE33)">Mmmmm,  pie.  </DIV>28Montag, 24. Juni 13
  40. 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
  41. 41. Polyfills: Ressourcen• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills• http://html5please.com/30Montag, 24. Juni 13
  42. 42. Progressive Enhancement31Montag, 24. Juni 13
  43. 43. Progressive Enhancement31Montag, 24. Juni 13
  44. 44. Progressive Enhancement31Montag, 24. Juni 13
  45. 45. Progressive Enhancement31Montag, 24. Juni 13
  46. 46. Progressive EnhancementInteraktionJavaScriptPräsentationCSSStrukturSemantisches HTMLInhaltTexte + Fotos + …31Montag, 24. Juni 13
  47. 47. Progressive Enhancement: Beispiel32Montag, 24. Juni 13
  48. 48. Graceful Degradation33Montag, 24. Juni 13
  49. 49. Graceful Degradation33Montag, 24. Juni 13
  50. 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-Submit33Montag, 24. Juni 13
  51. 51. Graceful Degradation: Gegenbeispiel34Montag, 24. Juni 13
  52. 52. Graceful Degradation: Gegenbeispiel34Montag, 24. Juni 13
  53. 53. Unterschiede & Gemeinsamkeiten• Unterschiedliche Betrachtungsweise• PE: von innen nach außen• GD: vom Idealfall zum Fehlerfall• Gemeinsamkeiten• kontrollierter Fallback• Funktionalität bleibt erhalten• Argumentationshilfe gegenüber Management / Kunden35Montag, 24. Juni 13
  54. 54. ZusammenfassungNicht-unterstütztesFeature XFallbackbeachten!Bewertung /ArgumentierenPolyfillverwendennativeVerwendungFeatureDetectionIgnorieren36Montag, 24. Juni 13
  55. 55. Thema #2: Ältere SmartPhones37Montag, 24. Juni 13
  56. 56. Werkzeuge & Hilfsmittel1. Browser-Matrix2. Gerätedatenbank3. Performance: Analyse & Optimierung38Montag, 24. Juni 13
  57. 57. Graded Browser SupportA C XTrafficBrowser-LeistungEntwicklung& TestingErwarteteUserExperiencehoch signifikant geringhoch gering Annahme: hochaktive Entwicklung &aktives Testingaktive Entwicklung &aktives TestingkeineBerücksichtigunghoch gering* Annahme: hoch39Montag, 24. Juni 13
  58. 58. Graded Browser Support: BeispielA-graded Browsers in Q3 2012Safari auf iOS 4.x„Browser“ auf Android 2.3.xInternet Explorer auf Windows Phone 7.540Montag, 24. Juni 13
  59. 59. Graded Browser Support: BeispielA-graded Browsers in Q1 2013Safari auf iOS 4.x„Browser“ auf Android 2.3.x ➔ XInternet Explorer auf Windows Phone 7.5 ➔ C40Montag, 24. Juni 13
  60. 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 S6041Montag, 24. Juni 13
  61. 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. 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. 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, PHP44Montag, 24. Juni 13
  64. 64. Gerätedatenbank: Demo45Montag, 24. Juni 13
  65. 65. Performance: Analyse & Optimierung: Warum?Performance ist Teil der User Experience• Ladezeit• Rendering• Verhalten46Montag, 24. Juni 13
  66. 66. Performance: Umgebung47Montag, 24. Juni 13
  67. 67. Performance: UmgebungIm 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
  68. 68. Performance: Umgebung48Montag, 24. Juni 13
  69. 69. Performance: UmgebungBrowser-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
  70. 70. Performance: Schnelle Reaktion auf Eingaben49Montag, 24. Juni 13
  71. 71. Performance: Schnelle Reaktion auf EingabenFastClick von Rowan Beentje & Matthew Galizia, MIT Licensewindow.addEventListener(load,  function()  {    FastClick.attach(document.body);},  false);49Montag, 24. Juni 13
  72. 72. Performance: Schnelle Reaktion auf EingabenFastClick von Rowan Beentje & Matthew Galizia, MIT Licensewindow.addEventListener(load,  function()  {    FastClick.attach(document.body);},  false);<a  class="needsclick">Langsam,  aber  sicher!</a>Anstelle eines synthetischen Events, kann bei Problemen auch das echteEvent verwendet werden:49Montag, 24. Juni 13
  73. 73. Performance: Schnelle Reaktion - Demo50Montag, 24. Juni 13
  74. 74. Messung & Optimierung von Animationen (1/2)el.animate(    {     fontSize:  42,     paddingTop:  30,     paddingBottom:  30,     paddingLeft:36,     paddingRight:  36,     opacity:  0.5   },      {     progress:  function  (animation,  progress,  remainingMs)  {       el.css(-­‐webkit-­‐transform,  rotate(  +  (180  *  progress)  +  deg));     },     duration:  500,     done:  callback   });51Montag, 24. Juni 13
  75. 75. Messung & Optimierung von Animationen (2/2)el.    unbind(webkitTransitionEnd).    on(webkitTransitionEnd,  callback);el.addClass(aniLarge);#btnCss  {   transition-­‐property:  font-­‐size,  padding,  -­‐webkit-­‐transform,  opacity;   transition-­‐duration:  0.5s,  0.5s,  0.5s,  0.5s,  0.5s,  0.5s;}#btnCss.aniLarge  {   font-­‐size:  42px;  padding:  30px  36px;   -­‐webkit-­‐transform:  rotate(180deg);   opacity:  0.5;}52Montag, 24. Juni 13
  76. 76. Messung & Optimierung von Animationen: Demo53Montag, 24. Juni 13
  77. 77. Thema #3: Zugänglichkeit54Montag, 24. Juni 13
  78. 78. Zugänglichkeit: Das Problem im Frontend55Montag, 24. Juni 13
  79. 79. Eine neue Spezifikation: WAI-ARIAWeb Accessibility Initiative - Accessible Rich Internet Applications1. Roles1.1. Landmarks1.2. Document Structure1.3. Widget2. States & Properties(3. Keyboard Handling)56Montag, 24. Juni 13
  80. 80. WAI-ARIA: Landmarks<!DOCTYPE  HTML><head>...</head><body>    <div  id="banner"  role="banner">OMG  kittens!  (banner)</div>    <nav  id="navigation"  role="navigation">Navigation</nav>    <div  id="main"  role="main">The  main  content  goes  here...</div>    <div  id="complementary"  role="complementary">  Side  Bar        <div  role="form"  id="form">            <div  id="search"  role="search">...</div>        </div>    </div>    <footer  id="contentinfo"  role="contentinfo">        <p>&copy;  Company  2012</p>    </footer></body></html>57Montag, 24. Juni 13
  81. 81. WAI-ARIA: Landmarks-Demo58Montag, 24. Juni 13
  82. 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">&mdash;&mdash;&mdash;&mdash;&mdash;</p><h3  role="heading">Examples</h3><ul  role="list">    <li  role="listitem">Mozilla  Firefox</li>    ...</ul>59Montag, 24. Juni 13
  83. 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. 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
  85. 85. WAI-ARIA: States & Properties - Demo62Montag, 24. Juni 13
  86. 86. Zugänglichkeit: Testen63Montag, 24. Juni 13
  87. 87. Zugänglichkeit: Testen• Windows:• NVDA (NonVisual Desktop Access) - Open Source, Sprachausgabe &Braillezeile (ab 0.6p3)• JAWS - proprietär, Sprachausgabe & Braillezeile• OS X / iOS• Voice Over - integriert, Sprachausgabe & Braillezeile• Linux• Orca (GNOME) - Open Source, Sprachausgabe & Braillezeile63Montag, 24. Juni 13
  88. 88. Zugänglichkeit: Ressourcen64Montag, 24. Juni 13
  89. 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ürZugänglichkeit64Montag, 24. Juni 13
  90. 90. 1. Frontend-Entwickler berücksichtigen heute mehr Geräte undAusgabeformate 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 istunabdingbar.4. SmartPhones profitieren von guten Browser-Engines und bieten vielPotenzial für eine gute User Experience.5. Auch moderne RIAs können allen zugänglich gemacht werden.Fazit65Montag, 24. Juni 13
  91. 91. Fragen?66Montag, 24. Juni 13
  92. 92. (Bildnachweise)• Seite 3: http://www.w3.org/html/logo/• Seite 4: http://commons.wikimedia.org/wiki/File:Assorted_smartphones.jpghttp://www.flickr.com/photos/eggplant/22414618/http://www.flickr.com/photos/andrewcx/6288363953/http://commons.wikimedia.org/wiki/File:MacBook_Pro_Retina.pnghttp://www.flickr.com/photos/jimjarmo/2937958822/http://www.flickr.com/photos/lge/6578498093/http://www.flickr.com/photos/jurvetson/7408464122/http://www.flickr.com/photos/kazuhito/132436943/• Seite 5:http://commons.wikimedia.org/wiki/File:Assorted_smartphones.jpghttp://www.flickr.com/photos/eggplant/22414618/http://www.flickr.com/photos/kazuhito/132436943/• Seite 6: http://en.wikipedia.org/wiki/File:HTML5-APIs-and-related-technologies-by-Sergey-Mavrody.png• Seite 7: http://www.flickr.com/photos/eggplant/22414618/• Seite 14: http://en.wikipedia.org/wiki/File:JavaScript-logo.pnghttp://en.wikipedia.org/wiki/File:Internet_Explorer_7_Logo.pnghttp://commons.wikimedia.org/wiki/File:Crystal_Clear_filesystem_folder_lin.png• Seite 31: http://noisecult.deviantart.com/art/Old-Television-140046784http://www.flickr.com/photos/birdies100/1250631561/http://www.flickr.com/photos/blakespot/2375502294/• Seite 33: http://commons.wikimedia.org/wiki/File:Motorized_toothbrush.jpg• Seite 37: http://commons.wikimedia.org/wiki/File:Assorted_smartphones.jpg• Seite 54: http://www.flickr.com/photos/kazuhito/132436943/67Montag, 24. Juni 13

×