Downloaden Sie, um offline zu lesen
Schöneres Web mit HTML5 + CSS3
- 1.
- 2.
- 3. GENC RASHITI – UXDesigner @ Ginetta™ – HTML + CSS Ninja – Enthusiast ICH LIEBE … frischen Jazz / Terry Pratchett / 2D Fighting Games / wohlgeformte Buchstaben / abgerundete Ecken @RAWDIGGIE
- 4. MÜSSEN WEBSEITEN IN ALLENBROWSERN GENAU GLEICH AUSSEHEN?
- 5.
- 6.
- 7.
- 8. «Progressive Enhancement beschreibteine 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
- 9. The Chocolatey Layersof Progressive Enhancement
- 10. Illustration von KevinCornell
- 11.
- 12. 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>
- 13. META TAGS XHTML 1.0 <meta http-‐equiv="Content-‐Type" content="text/html" » charset=UTF-‐8" /> HTML5 <meta charset="UTF-‐8">
- 14. SCRIPT TAG XHTML 1.0 <script type="text/javascript" src="file.js"></script> HTML5 <script src="file.js"></script>
- 15. LINK TAG XHTML 1.0 <link rel="stylesheet" type="text/css" href="file.css" /> HTML5 <link rel="stylesheet" href="file.css">
- 16. SYNTAX XHTML 1.0 <br /> –XML Syntax – Tags lowercase HTML5 <br> oder <BR> oder <br /> … – uppercase – lowercase – quoted – unquoted – …
- 17. 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>
- 18. BITTE NICHT! – obsolete(depricated) elements + attributes frame, frameset, noframe acronym font, big, center, strike bgcolor, cellspacing, cellpadding, valign …
- 19. WAS NOCH? RICH MEDIA canvas, audio, video WEBFORMS2.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">
- 21. section header hgroup footer SEMANTIK aside nav article …
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. article macht glücklich! Publiziertam 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.
- 29. <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
- 30.
- 31.
- 32.
- 33. 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
- 34. ::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
- 35. RESULTAT fresh link »– Liste – Liste – Liste – Liste :after::selection :last-‐child
- 36. .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
- 37. .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
- 38.
- 39. .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
- 40. .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
- 41.
- 42. .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
- 43.
- 44. .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
- 45.
- 46. .box_textshadow { text-‐shadow: 0px 1px 1px rgba(255,255,255,.5); /* FF3.5+, Opera 9+, Saf1+, Chrome */ } TEXT SCHATTEN
- 47.
- 48.
- 49. @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
- 50.
- 51. .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
- 52. .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
- 53.
- 54.
- 55.
- 56.
- 57.