Embed Size (px)
Citation preview
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?
NO!HELL
NO!
PROGRESSIVEENHANCEMENT(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
HTML5
DOCTYPEXHTML 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 TAGSXHTML 1.0
<meta http-‐equiv="Content-‐Type" content="text/html" »charset=UTF-‐8" />
HTML5
<meta charset="UTF-‐8">
SCRIPT TAGXHTML 1.0<script type="text/javascript" src="file.js"></script>
HTML5
<script src="file.js"></script>
LINK TAGXHTML 1.0<link rel="stylesheet" type="text/css" href="file.css" />
HTML5
<link rel="stylesheet" href="file.css">
SYNTAXXHTML 1.0<br />
– XML Syntax– Tags lowercase
HTML5
<br> oder <BR> oder <br /> …
– uppercase– lowercase– quoted– unquoted– …
BLOCK LINKSXHTML 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 + attributesframe, 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 headerhgroup footer
SEMANTIKaside navarticle …
header
header
section
header
section
footer
header
section
footer
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 Offizier 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äfig 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
http://books.alistapart.com/
http://html5doctor.com/
DIE ZUKUNFTCSS3
CSS3 MODULEAdvanced 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; background-‐color: 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_rgba { background-‐color: #000; background-‐color: 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
RESULTAT
RGBA Demo
.box_gradient { background-‐color: #444; background-‐image: -‐moz-‐linear-‐gradient(top, #444444, #999999) /* FF3.6 */ background-‐image: -‐webkit-‐gradient(linear, left top, left bottom, »color-‐stop(0, #444444),color-‐stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient » (startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -‐ms-‐filter: "progid:DXImageTransform.Microsoft.gradient » (startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */}
VERLAUF
.box_gradient { background-‐color: #444444; background-‐image: -‐moz-‐linear-‐gradient(top, #444444, #999999) /* FF3.6 */ background-‐image: -‐webkit-‐gradient(linear, left top, left bottom, »color-‐stop(0, #444444),color-‐stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient » (startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -‐ms-‐filter: "progid:DXImageTransform.Microsoft.gradient » (startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */}
VERLAUF
RESULTAT
.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
RESULTAT
.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
RESULTAT
.box_textshadow { text-‐shadow: 0px 1px 1px rgba(255,255,255,.5); /* FF3.5+, Opera 9+, Saf1+, Chrome */ }
TEXT SCHATTEN
RESULTAT
Button
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
RESULTAT
Button
.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
.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
RESULTAT
DANKE.DANKE.
LINKS / QUELLENhttp://www.delicious.com/rawdiggie/designbriefing
