Post on 20-Jan-2015
description
Nutze die Macht!Moderne Webdesign-Techniken.
Eric EggertFreelancer, 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 Seite ist.«
WCAG2.0Richtlinien für barrierefreie Webseiten 2.0
WAI-ARIAAccessible Rich Internet Application
WAI-ARIAWCAG2.0
CSS for JS
JavaScript
CSS
HTML
(Ginader, 5 layers of accessibility)
Not all Browsers* are created equal.
*Browser = User Agent
IE6
Internet Explorer 6
0
3
6
9
12
15
Jun 2008 Aug 2008 Oct 2008 Dec 2008 Feb 2009 Apr 2009 Jun 2009
Visitors Diggs Comments
0
20
40
60
80
100
IE Firefox Opera Safari Chrome Other
3
7
32
19
90
4
1515
5
46
56
ZuhauseArbeitsplatz
7%
17%
76%
Kann nicht upgradenWill nicht upgradenMag den IE6
(DIGG, Much Ado About IE6)
Define Support.Was ist Unterstützung?
dowebsitesneedtolookexactlythesameineverybrowser.com
Neue Webtechnologien
Jetzt geht’s wirklich los!
HTML5
GrundprinzipienStart from Scratch
Building by JustificationPaving the Cowpaths
Doctype<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
!
<!DOCTYPE html>
Zeichensatz<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
!
<meta charset="utf-8" />
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>, <mark>, <meter>, <progress>, <time>, <canvas>,
<command>, <datagrid>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt>, <rp>
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@scoped, *@contenteditable,
*@contextmenu, *@draggable, *@hidden, *@spellcheck
Abgescha!tes(Auswahl)
acronym, [a,input,button]@accesskey, img@longdesc, table@summary,
td/th@axis, td/th@abbr, td@scope
Feedback wanted!In der Arbeitsgruppe
Im Wiki
<!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>
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>
XHTML
Jetzt schon benutzbar!
// 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])}})()
article, aside, dialog, footer, header, section { display: block;}
Canvas
+
(VML)
(Filament Group)
(Filament Group)
(Filament Group)
(Filament Group)
(Filament Group)
CSS3+ CSS2.1
Graceful DegradationWIN!
»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)
ModuleCandidate Recommendation:CSS Color Module Level 3CSS Namespaces ModuleMedia QueriesCSS3 Basic User Interface ModuleCSS3 Ruby Module
Working Drafts:Selectors Level 3CSS Fonts Module Level 3CSS3 module: Multi-column layoutCSS Backgrounds and Borders Module Level 3
Module
Selectors
(PPK)
Internet ExplorerIE7/IE8.js
http://ie7-js.googlecode.com
ColorsRGB (Red Green Blue)
HSL (Hue Saturation Luminance)Neu: RGBA + HSLA
Colorsdiv { /* 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;}
Abgerundete Eckendiv { /* Webkit */
-webkit-border-radius: 7px; /* Mozilla */
-moz-border-radius: 7px; /* Standard */
border-radius: 7px;}
GeolocationFirefox + 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"><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>
APIsMashups WIN!
Jede Webseite ist eine API.
YQLYahoo! Query Language
BeispielSELECT
div.class, div.div.div.div.ul.li.div.h3.a FROM html WHERE url="http://derstandard.at/Seite1" and xpath="//div[@id='documentCanvas']"
Danke!Materialien in den nächsten Tagen aufwebaccessibility.at/ikt09
Images: Mike Stimpson/FAILblog