Schöneres Web mit HTML5 + CSS3

523 views

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
523
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×