Schöneres Web mit HTML5 + CSS3

SCHÖNERES
WEB MIT
HTML5 & CSS3

PROGRESSIVE
ENHANCEMENT
—
HTML5
—
CSS3

GENC RASHITI
– UX Designer @ Ginetta™
– HTML + CSS Ninja
– Enthusiast
ICH LIEBE …
frischen Jazz / Terry Pratchett / 2D Fighting
Games / wohlgeformte Buchstaben / abgerundete
Ecken
@RAWDIGGIE

MÜSSEN WEBSEITEN
IN ALLEN BROWSERN
GENAU GLEICH
AUSSEHEN?

PROGRESSIVE
ENHANCEMENT
(ENRICHMENT)

«Progressive Enhancement beschreibt eine Methode
im Webdesign, die Barrierefreiheit, semantische
Auszeichnung und Trennung von Information und
Präsentation beinhaltet, um eine Website auch für
Endgeräte benutzbar zu machen, die nur über
eingeschränkte Funktionen (JavaScript-/CSS-/
Flash-Unterstützung) verfügen.»
— http://www.wikipedia.de

The Chocolatey Layers of Progressive Enhancement

Illustration von Kevin Cornell

DOCTYPE
XHTML 1.0
<!DOCTYPE
html
PUBLIC

"-‐//W3C//DTD
XHTML
1.0
Strict
//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml-‐strict.dtd">
HTML5
<!DOCTYPE
html>

META TAGS
XHTML 1.0
<meta
http-‐equiv="Content-‐Type"
content="text/html"
»
charset=UTF-‐8"
/>
HTML5
<meta
charset="UTF-‐8">

SCRIPT TAG
XHTML 1.0
<script
type="text/javascript"
src="file.js"></script>
HTML5
<script
src="file.js"></script>

LINK TAG
XHTML 1.0
<link
rel="stylesheet"
type="text/css"
href="file.css"
/>
HTML5
<link
rel="stylesheet"
href="file.css">

SYNTAX
XHTML 1.0
<br
/>
– XML Syntax
– Tags lowercase
HTML5
<br> oder <BR> oder <br
/> …
– uppercase
– lowercase
– quoted
– unquoted
– …

BLOCK LINKS
XHTML 1.0
<h2><a
href="/product">Title</a></h2>
<p><a
href="/product">Check
it
out!</a></p>
HTML5
<a
href="/product">

<h2>Title</h2>

<p>Check
it
out!</p>
</a>

BITTE NICHT!
– obsolete (depricated) elements + attributes
frame, frameset, noframe
acronym
font, big, center, strike
bgcolor, cellspacing, cellpadding, valign
…

WAS NOCH?
RICH MEDIA
canvas, audio, video
WEBFORMS 2.0
<input
id="age"
type="text"
placeholder="Ihr
Alter"
»

required>
<input
id="tel"
type="tel">
<input
id="email"
type="email">
<input
id="url"
type="url">

section

header
hgroup

footer
SEMANTIK
aside

nav
article

…

header
section
footer
nav
article

article macht glücklich!
Publiziert am 2. Oktober, 2010 von Genc Rashiti
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
«Wie ein Hund!» sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich
in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen
wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. «Es ist ein
eigentümlicher Apparat», sagte der Ofﬁzier zu dem Forschungsreisenden und
überblickte mit einem gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der
Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und
hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das
Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich,
umdrängten den Käﬁg und wollten sich gar nicht fortrühren. Jemand musste
Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er
eines Morgens verhaftet.

<article>

<header>

<h1>article
macht
glücklich<h1>

</header>

<h2>Jemand
musste
Josef…</h2>

<p>Als
Gregor
Samsa
eines
Morgens…</p>

<footer>

<p>Publiziert
am
<time
datetime="2010-‐10-‐2T15:03"
pubdate>2.Oktober

2010</time>
von
Genc
Rashiti</p>

</footer>
</article>
ARTICLE

CSS3 MODULE
Advanced layout / Aural Style Sheets / Backgrounds and
Borders / Basic User Interfaces / Box Model / Cascading
and Inheritance / Color / Fonts / Generated Content for
Paged Media / Generated and Replaced Content /
Hyperlink Presentation / Line Layout / Lists / Maths /
Multi Column Layout / Namespaces / Object
Model / Paged Media / Positioning / Presentation Levels /
Reader Media Types / Ruby / Scoping / Speech / Syntax /
Tables / Text / Text Layout / Values and Units / Web Fonts

::selection
{

background:
#d30820;
}
/*
selektierter
Text
erhält
roten
Hintergrund
*/
#menu
a:after
{

content:"»";
}
/*
fügt
ein
»
Symbol
ein
*/
li:last-‐child
{

border-‐bottom:
none;
}
/*
letztes
Listenelement
erhält
die
Farbe
#eee
*/
COOLE SELEKTOREN

RESULTAT
fresh link » – Liste
– Liste
– Liste
– Liste
:after::selection :last-‐child

.box_rgba
{

background-‐color:
#000;

rgba(0,
0,
0,
.6);

/*
FF3+,
Saf3+,
Opera
10.10+,
Chrome,
IE9
*/

filter:
progid:DXImageTransform.Microsoft.gradient
»

(startColorStr='#99000000',EndColorStr='#99000000');

/*
IE6,
IE7
*/

-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.gradient
»

(startColorStr='#99000000',EndColorStr='#99000000')";

/*
IE8
*/

}
TRANSPARENTER HINTERGRUND

.box_gradient
{

#444;

background-‐image:
-‐moz-‐linear-‐gradient(top,
#444444,
#999999)

/*
FF3.6
*/

-‐webkit-‐gradient(linear,
left
top,
left
bottom,
»
color-‐stop(0,
#444444),color-‐stop(1,
#999999));

/*
Saf4+,
Chrome
*/

filter:
»

(startColorStr='#444444',
EndColorStr='#999999');

/*
IE6,IE7
*/

-‐ms-‐filter:
»

EndColorStr='#999999')";

/*
IE8
*/
}
VERLAUF

.box_gradient
{

#444444;

-‐moz-‐linear-‐gradient(top,
#444444,
#999999)

/*
FF3.6
*/

-‐webkit-‐gradient(linear,
left
top,
left
bottom,
»
color-‐stop(0,
#444444),color-‐stop(1,
#999999));

/*
Saf4+,
Chrome
*/

filter:
»

EndColorStr='#999999');

/*
IE6,IE7
*/

-‐ms-‐filter:
»

EndColorStr='#999999')";

/*
IE8
*/
}
VERLAUF

.box_shadow
{

-‐moz-‐box-‐shadow:
0px
0px
4px
rgba(0,0,0,.6);

/*
FF3.5+
*/

-‐webkit-‐box-‐shadow:
0px
0px
4px
rgba(0,0,0,.6);

/*
Saf3.0+,
Chrome
*/

box-‐shadow:
0px
0px
4px
rgba(0,0,0.6);

/*
Opera
10.5,
IE
9
*/

}
SCHATTENWURF

.box_round
{

-‐moz-‐border-‐radius:
3px;

/*
FF1+
*/

-‐webkit-‐border-‐radius:
3px;

/*
Saf3-‐4
*/

border-‐radius:
3px;

/*
Opera
10.5,
IE
9,
Saf5,
Chrome
*/

}
ABGERUNDETE ECKEN

.box_textshadow
{

text-‐shadow:
0px
1px
1px
rgba(255,255,255,.5);

/*
FF3.5+,
Opera
9+,
Saf1+,
Chrome
*/

}
TEXT SCHATTEN

Button Button
Coole Browser IE

@font-‐face
{

font-‐family:
'WebFont';
src:
url('DroidSans.eot');
/*
IE6-‐8
*/

src:
local('☺'),

url('DroidSans.woff')
format('woff'),
/*
FF3.6,
IE9
*/

url('DroidSans.ttf')
format('truetype');

/*
Saf3+,Chrome,
FF3.5,
Opera10+
*/
}
button
{

font-‐family:
"WebFont";
}
WEB FONTS

.box_rotate
{

-‐moz-‐transform:
rotate(7.5deg);
/*
FF3.5+
*/

-‐o-‐transform:
rotate(7.5deg);
/*
Opera
10.5
*/

-‐webkit-‐transform:
rotate(7.5deg);
/*
Saf3.1+,
Chrome
*/

transform:
rotate(7.5deg);

filter:
progid:DXImageTransform.Microsoft.Matrix
»
(sizingMethod='auto
expand',
M11=0.9914448613738104,
»
M12=-‐0.13052619222005157,M21=0.13052619222005157,
»

M22=0.9914448613738104);

/*
IE6,
IE7
*/

-‐ms-‐filter:
"progid:DXImageTransform.Microsoft.Matrix
»
(M11=0.9914448613738104,
M12=-‐0.13052619222005157,
»
M21=0.13052619222005157,
M22=0.9914448613738104,
»
sizingMethod='auto
expand')";

/*
IE8
*/

zoom:
1;

}
ROTATION

http://hardboiledwebdesign.com/

LINKS / QUELLEN
http://www.delicious.com/rawdiggie/designbriefing

Schöneres Web mit HTML5 + CSS3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Schöneres Web mit HTML5 + CSS3

Ähnlich wie Schöneres Web mit HTML5 + CSS3 (20)

Schöneres Web mit HTML5 + CSS3