Nutze die Macht!
 Moderne Webdesign-Techniken.
Eric Eggert
Freelancer, Webkrauts, HTML5,
   BAD TF, vienna web week

           @yatil

          yatil.de
»Vorsicht du walten lassen
musst, wenn in die Zukunft
  du blickst, Anakin. Die
Furcht vor Verlust ein Pfad
  zur Dunklen ...
WCAG2.0
Richtlinien für barrierefreie Webseiten 2.0


           WAI-ARIA
   Accessible Rich Internet Application
WCAG2.0              WAI-ARIA

           CSS for JS

           JavaScript


              CSS


             HTML

     ...
Not all Browsers*
are created equal.




           *Browser = User Agent
IE6
Internet Explorer 6
15
                                      Visitors    Diggs       Comments



12




 9




 6




 3




 0
Jun 2008   Aug...
100
                                                               Zuhause
                90                             ...
7%

17%

                       Kann nicht upgraden
                       Will nicht upgraden
                       Mag ...
Define Support.
  Was ist Unterstützung?
dowebsitesneedtolookexactlythesameineverybrowser.com
Neue
Webtechnologien
   Jetzt geht’s wirklich los!
HTML5
Grundprinzipien
     Start from Scratch
  Building by Justification
   Paving the Cowpaths
Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
                 ...
Zeichensatz
  <meta http-equiv="content-type"
content="text/html; charset=utf-8" />
                 !
      <meta charset...
Defaultwerte
<script type="text/javascript"></script>
                   !
           <script></script>
Defaultwerte
<style type="text/css"></style>
              !
       <style></style>
Neue Elemente
<section>, <article>, <aside>, <header>, <footer>, <nav>,
   <dialog>, <figure>, <audio> & <video>, <embed>,
...
Neue
<type input="…">
datetime, datetime-local, date, month, week, time,
      number, range, email, url, search, color
Neue Attribute
                      (Auswahl)
  ol@start, ol@reversed, li@value, input@autofocus,
   input@form, style@sc...
Abgescha!tes
                      (Auswahl)
acronym, [a,input,button]@accesskey, img@longdesc,
                  table@su...
Feedback wanted!
    In der Arbeitsgruppe
           Im Wiki
HTML

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Beispiel</title>
   </head>
   <body>
 ...
XHTML

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Beispiel</title>
   </head>
   <body...
Jetzt schon
benutzbar!
// For discussion and comments, see: http://remysharp.com/
2009/01/07/html5-enabling-script/

(function(){if(!/*@cc_on!@*/...
article, aside, dialog,
footer, header, section {
   display: block;
}
Canvas
         +
             (VML)
(Filament Group)
(Filament Group)
(Filament Group)
(Filament Group)
(Filament Group)
CSS3
+ CSS2.1
Graceful Degradation
        WIN!
»Mit Graceful degradation wird die Eigenschaft eines
    (Computer)Systems bezeichnet, a...
Module
Candidate Recommendation:
CSS Color Module Level 3
CSS Namespaces Module
Media Queries
CSS3 Basic User Interface
Mo...
Module
Working Drafts:
Selectors Level 3
CSS Fonts Module Level 3
CSS3 module: Multi-column
layout
CSS Backgrounds and Bor...
Selectors



            (PPK)
Internet Explorer
           IE7/IE8.js

  http://ie7-js.googlecode.com
Colors
     RGB (Red Green Blue)
HSL (Hue Saturation Luminance)
      Neu: RGBA + HSLA
Colors
div {
    /* good browsers: FF2, Sf1, IE7+, OP9 */

    background: url(darktransparent.png);
    /* better browser...
Abgerundete Ecken
div {
    /* Webkit */

    -webkit-border-radius: 7px;
    /* Mozilla */

    -moz-border-radius: 7px;
...
Geolocation
 Firefox + Safari touch,
      Google Gears




               (W3C, Google Gears)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">...
APIs
Mashups WIN!
Jede Webseite ist
    eine API.
YQL
Yahoo! Query Language
Beispiel
  SELECT
div.class,
div.div.div.div.ul.li.div.h3.a
FROM html
WHERE url="http://derstandard.at/Seite1"
and xpath="...
Danke!
Materialien in den nächsten Tagen auf
webaccessibility.at/ikt09




Images: Mike Stimpson/FAILblog
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Upcoming SlideShare
Loading in …5
×

Nutze die Macht @ IKT-Forum 09 Linz

3,717 views

Published on

Published in: Technology, Design
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
3,717
On SlideShare
0
From Embeds
0
Number of Embeds
116
Actions
Shares
0
Downloads
16
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Nutze die Macht @ IKT-Forum 09 Linz

  1. 1. Nutze die Macht! Moderne Webdesign-Techniken.
  2. 2. Eric Eggert Freelancer, Webkrauts, HTML5, BAD TF, vienna web week @yatil yatil.de
  3. 3. »Vorsicht du walten lassen musst, wenn in die Zukunft du blickst, Anakin. Die Furcht vor Verlust ein Pfad zur Dunklen Seite ist.«
  4. 4. WCAG2.0 Richtlinien für barrierefreie Webseiten 2.0 WAI-ARIA Accessible Rich Internet Application
  5. 5. WCAG2.0 WAI-ARIA CSS for JS JavaScript CSS HTML (Ginader, 5 layers of accessibility)
  6. 6. Not all Browsers* are created equal. *Browser = User Agent
  7. 7. IE6
  8. 8. Internet Explorer 6
  9. 9. 15 Visitors Diggs Comments 12 9 6 3 0 Jun 2008 Aug 2008 Oct 2008 Dec 2008 Feb 2009 Apr 2009 Jun 2009
  10. 10. 100 Zuhause 90 Arbeitsplatz 80 60 56 46 40 20 19 15 15 7 5 4 2 3 3 0 IE Firefox Opera Safari Chrome Other
  11. 11. 7% 17% Kann nicht upgraden Will nicht upgraden Mag den IE6 76% (DIGG, Much Ado About IE6)
  12. 12. Define Support. Was ist Unterstützung?
  13. 13. dowebsitesneedtolookexactlythesameineverybrowser.com
  14. 14. Neue Webtechnologien Jetzt geht’s wirklich los!
  15. 15. HTML5
  16. 16. Grundprinzipien Start from Scratch Building by Justification Paving the Cowpaths
  17. 17. Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ! <!DOCTYPE html>
  18. 18. Zeichensatz <meta http-equiv="content-type" content="text/html; charset=utf-8" /> ! <meta charset="utf-8" />
  19. 19. Defaultwerte <script type="text/javascript"></script> ! <script></script>
  20. 20. Defaultwerte <style type="text/css"></style> ! <style></style>
  21. 21. Neue Elemente <section>, <article>, <aside>, <header>, <footer>, <nav>, <dialog>, <figure>, <audio> & <video>, <embed>, <mark>, <meter>, <progress>, <time>, <canvas>, <command>, <datagrid>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt>, <rp>
  22. 22. Neue <type input="…"> datetime, datetime-local, date, month, week, time, number, range, email, url, search, color
  23. 23. Neue Attribute (Auswahl) ol@start, ol@reversed, li@value, input@autofocus, input@form, style@scoped, *@contenteditable, *@contextmenu, *@draggable, *@hidden, *@spellcheck
  24. 24. Abgescha!tes (Auswahl) acronym, [a,input,button]@accesskey, img@longdesc, table@summary, td/th@axis, td/th@abbr, td@scope
  25. 25. Feedback wanted! In der Arbeitsgruppe Im Wiki
  26. 26. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Beispiel</title> </head> <body> <article> <h1>Dies ist eine Überschrift</h1> <p>Dies ist ein Absatz mit Zeilen<br> umbruch, einfach zu Demonstrationszwecken</p> </article> </body> </html>
  27. 27. XHTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Beispiel</title> </head> <body> <article> <h1>Dies ist eine Überschrift</h1> <p>Dies ist ein Absatz mit Zeilen<br /> umbruch, einfach zu Demonstrationszwecken</p> </article> </body> </html>
  28. 28. Jetzt schon benutzbar!
  29. 29. // For discussion and comments, see: http://remysharp.com/ 2009/01/07/html5-enabling-script/ (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist, details,dialog,eventsource,figure,footer,header,hgroup, mark,menu,meter,nav,output,progress,section,time,video" .split(','),i=e.length;while(i--) {document.createElement(e[i])}})()
  30. 30. article, aside, dialog, footer, header, section { display: block; }
  31. 31. Canvas + (VML)
  32. 32. (Filament Group)
  33. 33. (Filament Group)
  34. 34. (Filament Group)
  35. 35. (Filament Group)
  36. 36. (Filament Group)
  37. 37. CSS3 + CSS2.1
  38. 38. Graceful Degradation WIN! »Mit Graceful degradation wird die Eigenschaft eines (Computer)Systems bezeichnet, auf Fehler und unerwartet eintre!ende Ereignisse sicher und angemessen zu reagieren: Ein Fehler im Einzelsystem reduziert die Funktionalität des Gesamtsystems nur schrittweise, etwa durch eine verminderte Qualität oder einen reduzierten Funktionsumfang.« (Wikipedia)
  39. 39. Module Candidate Recommendation: CSS Color Module Level 3 CSS Namespaces Module Media Queries CSS3 Basic User Interface Module CSS3 Ruby Module
  40. 40. Module Working Drafts: Selectors Level 3 CSS Fonts Module Level 3 CSS3 module: Multi-column layout CSS Backgrounds and Borders Module Level 3
  41. 41. Selectors (PPK)
  42. 42. Internet Explorer IE7/IE8.js http://ie7-js.googlecode.com
  43. 43. Colors RGB (Red Green Blue) HSL (Hue Saturation Luminance) Neu: RGBA + HSLA
  44. 44. Colors div { /* good browsers: FF2, Sf1, IE7+, OP9 */ background: url(darktransparent.png); /* better browsers: FF3+, Sf2+, OP10+ */ background: rgba(50,50,50,0.6); /* IE6 */ _background: #333; }
  45. 45. Abgerundete Ecken div { /* Webkit */ -webkit-border-radius: 7px; /* Mozilla */ -moz-border-radius: 7px; /* Standard */ border-radius: 7px; }
  46. 46. Geolocation Firefox + Safari touch, Google Gears (W3C, Google Gears)
  47. 47. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Testing W3C JavaScript Geolocation</title> <script src="../../js/inspect.js"></script> <script type="text/javascript"> function findLocation() { navigator.geolocation.getCurrentPosition(foundLocation, noLocation); } function foundLocation(position) { document.getElementById("inspecttext").innerHTML = inspect(position, 3); var lat = position.coords.latitude; var long = position.coords.longitude; alert(lat + "n" + long); } function noLocation() { alert('Could not find location'); } </script> </head><body> <button onclick="findLocation();">Click to find location</button> <div id="inspecttext"></div> </body></html>
  48. 48. APIs Mashups WIN!
  49. 49. Jede Webseite ist eine API.
  50. 50. YQL Yahoo! Query Language
  51. 51. Beispiel SELECT div.class, div.div.div.div.ul.li.div.h3.a FROM html WHERE url="http://derstandard.at/Seite1" and xpath="//div[@id='documentCanvas']"
  52. 52. Danke! Materialien in den nächsten Tagen auf webaccessibility.at/ikt09 Images: Mike Stimpson/FAILblog

×