Your SlideShare is downloading. ×
0
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 Fig...
MÜSSEN WEBSEITEN
IN ALLEN BROWSERN
GENAU GLEICH
AUSSEHEN?
NO!
HELL
NO!
PROGRESSIVE
ENHANCEMENT
(ENRICHMENT)
«Progressive Enhancement beschreibt eine Methode
im Webdesign, die Barrierefreiheit, semantische
Auszeichnung und Trennung...
The Chocolatey Layers of Progressive Enhancement
Illustration von Kevin Cornell
HTML5
DOCTYPE
XHTML 1.0
<!DOCTYPE	
  html	
  PUBLIC
	
  "-­‐//W3C//DTD	
  XHTML	
  1.0	
  Strict	
  //EN"
	
  "http://www.w3.org...
META TAGS
XHTML 1.0
<meta	
  http-­‐equiv="Content-­‐Type"	
  content="text/html"	
  »
charset=UTF-­‐8"	
  />
HTML5
<meta	...
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"	
...
SYNTAX
XHTML 1.0
<br	
  />
– XML Syntax
– Tags lowercase
HTML5
<br> oder <BR> oder <br	
  /> …
– uppercase
– lowercase
– q...
BLOCK LINKS
XHTML 1.0
<h2><a	
  href="/product">Title</a></h2>
<p><a	
  href="/product">Check	
  it	
  out!</a></p>
HTML5
...
BITTE NICHT!
– obsolete (depricated) elements + attributes
frame, frameset, noframe
acronym
font, big, center, strike
bgco...
WAS NOCH?
RICH MEDIA
canvas, audio, video
WEBFORMS 2.0
<input	
  id="age"	
  type="text"	
  placeholder="Ihr	
  Alter"	
  ...
section	
  	
  	
  	
  
header
hgroup	
  	
  	
  	
  	
  
footer
SEMANTIK
aside	
  	
  	
  	
  	
  	
  
nav
article	
  	
 ...
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 ohn...
<article>
	
  	
  <header>
	
  	
  	
  	
  <h1>article	
  macht	
  glücklich<h1>
	
  	
  </header>
	
  	
  <h2>Jemand	
  m...
http://books.alistapart.com/
http://html5doctor.com/
DIE ZUKUNFT
CSS3
CSS3 MODULE
Advanced layout / Aural Style Sheets / Backgrounds and
Borders / Basic User Interfaces / Box Model / Cascading...
::selection	
  {	
  
	
  	
  background:	
  #d30820;
}	
  /*	
  selektierter	
  Text	
  erhält	
  roten	
  Hintergrund	
  ...
RESULTAT
fresh link » – Liste
– Liste
– Liste
– Liste
:after::selection :last-­‐child
.box_rgba	
  {	
  
	
  	
  background-­‐color:	
  #000;	
  
	
  	
  background-­‐color:	
  rgba(0,	
  0,	
  0,	
  .6);	
  ...
.box_rgba	
  {	
  
	
  	
  background-­‐color:	
  #000;	
  
	
  	
  background-­‐color:	
  rgba(0,	
  0,	
  0,	
  .6);	
  ...
RESULTAT
RGBA Demo
.box_gradient	
  {	
  
	
  	
  background-­‐color:	
  #444;
	
  	
  background-­‐image:	
  -­‐moz-­‐linear-­‐gradient(top,...
.box_gradient	
  {	
  
	
  	
  background-­‐color:	
  #444444;
	
  	
  background-­‐image:	
  -­‐moz-­‐linear-­‐gradient(t...
RESULTAT
.box_shadow	
  {	
  
	
  	
  -­‐moz-­‐box-­‐shadow:	
  0px	
  0px	
  4px	
  rgba(0,0,0,.6);	
  
	
  	
  /*	
  FF3.5+	
  */...
RESULTAT
.box_round	
  {	
  
	
  	
  -­‐moz-­‐border-­‐radius:	
  3px;	
  
	
  	
  /*	
  FF1+	
  */	
  
	
  	
  -­‐webkit-­‐border-...
RESULTAT
.box_textshadow	
  {	
  
	
  	
  text-­‐shadow:	
  0px	
  1px	
  1px	
  rgba(255,255,255,.5);	
  
	
  	
  /*	
  FF3.5+,	
 ...
RESULTAT
Button
Button Button
Coole Browser IE
@font-­‐face	
  {	
  
	
  	
  font-­‐family:	
  'WebFont';	
  src:	
  url('DroidSans.eot');	
  /*	
  IE6-­‐8	
  */	
  	
  ...
RESULTAT
Button
.box_rotate	
  {	
  
	
  	
  -­‐moz-­‐transform:	
  rotate(7.5deg);	
  /*	
  FF3.5+	
  */	
  
	
  	
  -­‐o-­‐transform:	
 ...
.box_rotate	
  {	
  
	
  	
  -­‐moz-­‐transform:	
  rotate(7.5deg);	
  /*	
  FF3.5+	
  */	
  
	
  	
  -­‐o-­‐transform:	
 ...
RESULTAT
http://handcraftedcss.com/
http://hardboiledwebdesign.com/
DANKE.DANKE.
LINKS / QUELLEN
http://www.delicious.com/rawdiggie/designbriefing
Schöneres Web mit HTML5 + CSS3
Schöneres Web mit HTML5 + CSS3
Upcoming SlideShare
Loading in...5
×

Schöneres Web mit HTML5 + CSS3

428

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
428
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Schöneres Web mit HTML5 + CSS3"

  1. 1. SCHÖNERES WEB MIT HTML5 & CSS3
  2. 2. PROGRESSIVE ENHANCEMENT — HTML5 — CSS3
  3. 3. GENC RASHITI – UX Designer @ Ginetta™ – HTML + CSS Ninja – Enthusiast ICH LIEBE … frischen Jazz / Terry Pratchett / 2D Fighting Games / wohlgeformte Buchstaben / abgerundete Ecken @RAWDIGGIE
  4. 4. MÜSSEN WEBSEITEN IN ALLEN BROWSERN GENAU GLEICH AUSSEHEN?
  5. 5. NO! HELL
  6. 6. NO!
  7. 7. PROGRESSIVE ENHANCEMENT (ENRICHMENT)
  8. 8. «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
  9. 9. The Chocolatey Layers of Progressive Enhancement
  10. 10. Illustration von Kevin Cornell
  11. 11. HTML5
  12. 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. 13. META TAGS XHTML 1.0 <meta  http-­‐equiv="Content-­‐Type"  content="text/html"  » charset=UTF-­‐8"  /> HTML5 <meta  charset="UTF-­‐8">
  14. 14. SCRIPT TAG XHTML 1.0 <script  type="text/javascript"  src="file.js"></script> HTML5 <script  src="file.js"></script>
  15. 15. LINK TAG XHTML 1.0 <link  rel="stylesheet"  type="text/css"  href="file.css"  /> HTML5 <link  rel="stylesheet"  href="file.css">
  16. 16. SYNTAX XHTML 1.0 <br  /> – XML Syntax – Tags lowercase HTML5 <br> oder <BR> oder <br  /> … – uppercase – lowercase – quoted – unquoted – …
  17. 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. 18. BITTE NICHT! – obsolete (depricated) elements + attributes frame, frameset, noframe acronym font, big, center, strike bgcolor, cellspacing, cellpadding, valign  …
  19. 19. 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">
  20. 20. section         header hgroup           footer SEMANTIK aside             nav article         …
  21. 21. header
  22. 22. header section
  23. 23. header section footer
  24. 24. header section footer article
  25. 25. header section footer nav article
  26. 26. 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.
  27. 27. <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
  28. 28. http://books.alistapart.com/
  29. 29. http://html5doctor.com/
  30. 30. DIE ZUKUNFT CSS3
  31. 31. 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
  32. 32. ::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
  33. 33. RESULTAT fresh link » – Liste – Liste – Liste – Liste :after::selection :last-­‐child
  34. 34. .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
  35. 35. .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
  36. 36. RESULTAT RGBA Demo
  37. 37. .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
  38. 38. .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
  39. 39. RESULTAT
  40. 40. .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
  41. 41. RESULTAT
  42. 42. .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
  43. 43. RESULTAT
  44. 44. .box_textshadow  {      text-­‐shadow:  0px  1px  1px  rgba(255,255,255,.5);      /*  FF3.5+,  Opera  9+,  Saf1+,  Chrome  */   } TEXT SCHATTEN
  45. 45. RESULTAT Button
  46. 46. Button Button Coole Browser IE
  47. 47. @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
  48. 48. RESULTAT Button
  49. 49. .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
  50. 50. .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
  51. 51. RESULTAT
  52. 52. http://handcraftedcss.com/
  53. 53. http://hardboiledwebdesign.com/
  54. 54. DANKE.DANKE.
  55. 55. LINKS / QUELLEN http://www.delicious.com/rawdiggie/designbriefing
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×