Webmontag Wien V
Modernes
Webdesign
  Eric Eggert
    yatil.de
Modernes
Webdesign
1. POSH
X
1. POSH
Plain-Old-Semantic-HTML
„Semantic HTML is the subset of HTML 4.01
(or XHTML 1.0) elements and attributes that are
 semantic rather than presentati...
POSH Checkliste
    Die erste POSH-Regel ist, dass dein POSH
•
    validieren (http://validator.w3.org) muss.
    Zweitens...
2. Persönliche
Codebausteine
2. Persönliche
       Codebausteine
“You can think of a personal markup pattern as a
sort of microformat that solves a pro...
2. Persönliche
      Codebausteine
     Wiederverwendbare HTML-Bausteine

„Elemente, die sich – auch abgewandelt – auf
ein...
aus: yatil.de/focusstandards/
3. Raster
Spalten
aus: Khoi Vinh: The Other Times
aus: Khoi Vinh: yeeaahh.subtraction.com
aus: Khoi Vinh: yeeaahh.subtraction.com
aus: Khoi Vinh: yeeaahh.subtraction.com
Zeilen
aus: ALA, Wilson Miner: Setting Type on the Web to a
                   Baseline Grid
aus: ALA, Wilson Miner: Setting Type on the Web to a
                   Baseline Grid
4. Typografie
aus: Dan Cederholm: SimpleBits.com
aus: AIGA.com
5. Unaufdringliches
    Javascript
    Unauffällig, doch genial
<a href="#"
   onclick="toggle('div.hinweis');
            return false;">
     Hinweise einblenden
</a>
X
<a href="#"
   onclick="toggle('div.hinweis');
            return false;">
     Hinweise einblenden
</a>
<script type="text/javascript">
addEvent('hinwtoggle',
         'click',
         toggle('div.hinweis')
        );
</scrip...
Weiterführende
     Links:
                      1. Posh
              microformats.org/wiki/posh


      2. Persönliche C...
Weiterführende
                Links:
                             4. Typografie
             R. Rutter & M. Boulton: Web T...
Ende
Danke für’s Zuhören :)




 Eric Eggert, yatil.de
Modernes Webdesign
Upcoming SlideShare
Loading in...5
×

Modernes Webdesign

2,895

Published on

Moderne Webdesign-Paradigmen. Vorgestellt beim Webmontag in Wien vom 30.04.2007

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,895
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
94
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Modernes Webdesign

  1. 1. Webmontag Wien V
  2. 2. Modernes Webdesign Eric Eggert yatil.de
  3. 3. Modernes Webdesign
  4. 4. 1. POSH
  5. 5. X
  6. 6. 1. POSH Plain-Old-Semantic-HTML
  7. 7. „Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. The best way to learn and understand POSH is to do it. Pick a page on your web site to begin with, and apply the POSH Checklist to it.“ (microformats.org/wiki/posh)
  8. 8. POSH Checkliste Die erste POSH-Regel ist, dass dein POSH • validieren (http://validator.w3.org) muss. Zweitens: Hör auf TABLEs für Präsentations- • zwecke zu benutzen, entferne 1px-GIFs und HTML-Elemente für Präsentation. Leere Anker eliminieren (http://tantek.com/log/ • 2002/11.html#L20021128t1352). Benutze gute, semantische Klassennamen. •
  9. 9. 2. Persönliche Codebausteine
  10. 10. 2. Persönliche Codebausteine “You can think of a personal markup pattern as a sort of microformat that solves a problem unique to your situation.” (Garrett Dimon, 23.04.2007)
  11. 11. 2. Persönliche Codebausteine Wiederverwendbare HTML-Bausteine „Elemente, die sich – auch abgewandelt – auf einer Webseite wiederholen“ (Eric Eggert, 25.04.2006)
  12. 12. aus: yatil.de/focusstandards/
  13. 13. 3. Raster
  14. 14. Spalten
  15. 15. aus: Khoi Vinh: The Other Times
  16. 16. aus: Khoi Vinh: yeeaahh.subtraction.com
  17. 17. aus: Khoi Vinh: yeeaahh.subtraction.com
  18. 18. aus: Khoi Vinh: yeeaahh.subtraction.com
  19. 19. Zeilen
  20. 20. aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid
  21. 21. aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid
  22. 22. 4. Typografie
  23. 23. aus: Dan Cederholm: SimpleBits.com
  24. 24. aus: AIGA.com
  25. 25. 5. Unaufdringliches Javascript Unauffällig, doch genial
  26. 26. <a href="#" onclick="toggle('div.hinweis'); return false;"> Hinweise einblenden </a>
  27. 27. X <a href="#" onclick="toggle('div.hinweis'); return false;"> Hinweise einblenden </a>
  28. 28. <script type="text/javascript"> addEvent('hinwtoggle', 'click', toggle('div.hinweis') ); </script> <a id="hinwtoggle" href="/hinweise.html"> Hinweise einblenden </a>
  29. 29. Weiterführende Links: 1. Posh microformats.org/wiki/posh 2. Persönliche Codebausteine Garrett Dimon: Coding for Content Eric Eggert: XHTML-Bausteine 3. Raster Mark Boulton: Five Simple Steps to designing grid systems Khoi Vinh: The Other Times Khoi Vinh: Oh Yeeaahh! & yeeaahh.subtraction.com & Grids Are Good@SXSW
  30. 30. Weiterführende Links: 4. Typografie R. Rutter & M. Boulton: Web Typography Sucks @SXSW Mark Boulton: Five Simple Steps to better typography Jon Hicks: Choosing typefaces for the web @Oxford Geek Night Jeff Croft: Elegant Web Typography (PDF) @FOWD 5. Unaufdringliches JavaScript Christian Heilmann: Barrierefreies JavaScript Die Folien 16–19, 21, 22, 24, 25 sind Eigentum der jeweiligen Autoren. Sie werden zu Demonstrationszwecken hier gezeigt. Alle anderen Folien sind unter einer CC-Lizenz veröffentlicht.
  31. 31. Ende Danke für’s Zuhören :) Eric Eggert, yatil.de
  1. A particular slide catching your eye?

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

×