Nutze die Macht @ IKT-Forum 09 Linz

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 Seite ist.«

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

(Ginader, 5 layers of accessibility)

Not all Browsers*
are created equal.

*Browser = User Agent

15
Visitors Diggs Comments

12

9

6

3

0
Jun 2008 Aug 2008 Oct 2008 Dec 2008 Feb 2009 Apr 2009 Jun 2009

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

7%

17%

Kann nicht upgraden
Will nicht upgraden
Mag den IE6

76%

(DIGG, Much Ado About IE6)

Deﬁne Support.
Was ist Unterstützung?

dowebsitesneedtolookexactlythesameineverybrowser.com

Neue
Webtechnologien
Jetzt geht’s wirklich los!

Grundprinzipien
Start from Scratch
Building by Justiﬁcation
Paving 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>, <ﬁgure>, <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

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

<!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>

// 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;
}

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)

Module
Candidate Recommendation:
CSS Color Module Level 3
CSS Namespaces Module
Media Queries
CSS3 Basic User Interface
Module
CSS3 Ruby Module

Module
Working Drafts:
Selectors Level 3
CSS Fonts Module Level 3
CSS3 module: Multi-column
layout
CSS Backgrounds and Borders
Module Level 3

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 browsers: FF3+, Sf2+, OP10+ */

background: rgba(50,50,50,0.6);
/* IE6 */

_background: #333;
}

Abgerundete Ecken
div {
/* Webkit */

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

-moz-border-radius: 7px;
/* Standard */

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">
<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>

Jede Webseite ist
eine API.

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']"

Danke!
Materialien in den nächsten Tagen auf
webaccessibility.at/ikt09

Images: Mike Stimpson/FAILblog

Nutze die Macht @ IKT-Forum 09 Linz

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Ähnlich wie Nutze die Macht @ IKT-Forum 09 Linz

Ähnlich wie Nutze die Macht @ IKT-Forum 09 Linz (20)

Mehr von Eric Eggert

Mehr von Eric Eggert (20)

Nutze die Macht @ IKT-Forum 09 Linz