Nutze die Macht! Moderne Webdesign-Techniken.
Slide 1
Slide 2
Eric Eggert Freelancer, Webkrauts, HTML5, BAD TF, vienna web week @yatil yatil.de
Slide 3
»Vorsicht du walten lassen musst, wenn in die Zukunft du blickst, Anakin. Die Furcht vor Verlust ein Pfad zur Dunklen Seite ist.«
Slide 4
Slide 5
WCAG2.0 Richtlinien für barrierefreie Webseiten 2.0 WAI-ARIA Accessible Rich Internet Application
Slide 6
WAI-ARIA WCAG2.0 CSS for JS JavaScript CSS HTML ( Ginader, 5 layers of accessibility )
Slide 7
Not all Browsers* are created equal. *Browser = User Agent
Slide 8
IE6
Slide 9
Internet Explorer 6
Slide 10
0 3 6 9 12 15 Jun 2008 Aug 2008 Oct 2008 Dec 2008 Feb 2009 Apr 2009 Jun 2009 Visitors Diggs Comments
Slide 11
0 20 40 60 80 100 IE Firefox Opera Safari Chrome Other Zuhause Arbeitsplatz
3
7
3
2
19
90
4
15
15
5
46
56
Slide 12
Kann nicht upgraden Will nicht upgraden Mag den IE6 ( DIGG, Much Ado About IE6 )
7%
17%
76%
Slide 13
Define Support. Was ist Unterstützung?
Slide 14
dowebsitesneedtolookexactlythesameineverybrowser.com
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Neue Webtechnologien Jetzt geht’s wirklich los!
Slide 20
HTML5
Slide 21
Grundprinzipien Start from Scratch Building by Justification Paving the Cowpaths
Slide 22
Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">!
<!DOCTYPE html>Slide 23
Zeichensatz
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> ! <meta charset="utf-8" />Slide 24
Defaultwerte
<script type="text/javascript"></script>!
<script></script>Slide 25
Defaultwerte
<style type="text/css"></style>!
<style></style>Slide 26
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>Slide 27
Slide 28
Slide 29
Neue <type input="…"> datetime, datetime-local, date, month, week, time, number, range, email, url, search, color
Slide 30
Slide 31
Slide 32
Slide 33
Neue Attribute (Auswahl) ol@start, ol@reversed, li@value, input@autofocus, input@form, style@scoped, *@contenteditable, *@contextmenu, *@draggable, *@hidden, *@spellcheck
Slide 34
Abgescha ! tes (Auswahl) acronym, [a,input,button]@accesskey, img@longdesc, table@summary, td/th@axis, td/th@abbr, td@scope
Slide 35
Feedback wanted! In der Arbeitsgruppe Im Wiki
Slide 36
<!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
Slide 37
<!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
Slide 38
Jetzt schon benutzbar!
Slide 39
Slide 40
Slide 41
// 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])}})()
Slide 42
article, aside, dialog, footer, header, section { display: block; }
Slide 43
Canvas + (VML)
Slide 44
( Filament Group )
Slide 45
( Filament Group )
Slide 46
( Filament Group )
Slide 47
( Filament Group )
Slide 48
( Filament Group )
Slide 49
CSS3
- CSS2.1
Slide 50
Slide 51
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)
Slide 52
Module Candidate Recommendation: CSS Color Module Level 3 CSS Namespaces Module Media Queries CSS3 Basic User Interface Module CSS3 Ruby Module
Slide 53
Working Drafts: Selectors Level 3 CSS Fonts Module Level 3 CSS3 module: Multi-column layout CSS Backgrounds and Borders Module Level 3 Module
Slide 54
Selectors ( PPK )
Slide 55
Internet Explorer IE7/IE8.js http://ie7-js.googlecode.com
Slide 56
Colors RGB (Red Green Blue) HSL (Hue Saturation Luminance) Neu: RGBA + HSLA
Slide 57
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; }
Slide 58
Abgerundete Ecken div {
/* Webkit */ -webkit-border-radius: 7px;
/* Mozilla */ -moz-border-radius: 7px;
/* Standard */ border-radius: 7px; }
Slide 59
Geolocation Firefox + Safari touch, Google Gears ( W3C , Google Gears )
Slide 60
Slide 61
Slide 62
Slide 63
<!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 + "
" + 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>
Slide 64
APIs Mashups WIN!
Slide 65
Slide 66
Slide 67
Slide 68
Slide 69
Jede Webseite ist
eine API.
Slide 70
Slide 71
YQL Yahoo! Query Language
Slide 72
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']"
Slide 73
Slide 74
Slide 75
Slide 76
Danke! Materialien in den nächsten Tagen auf webaccessibility.at/ikt09 Images: Mike Stimpson / FAILblog
