modernes webdesign · pdf file 2018. 11. 11. · modernes webdesign eric eggert...

Click here to load reader

Post on 27-Jan-2021

2 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Modernes Webdesign

    Eric Eggert yatil.de

    http://yatil.de/ http://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 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)

    http://microformats.org/wiki/posh http://microformats.org/wiki/posh

  • 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.

    http://validator.w3.org http://validator.w3.org http://tantek.com/log/2002/11.html#L20021128t1352 http://tantek.com/log/2002/11.html#L20021128t1352 http://tantek.com/log/2002/11.html#L20021128t1352 http://tantek.com/log/2002/11.html#L20021128t1352

  • 2. Persönliche Codebausteine

  • 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)

    http://www.digital-web.com/articles/coding_for_content/ http://www.digital-web.com/articles/coding_for_content/

  • 2. Persönliche Codebausteine

    Wiederverwendbare HTML-Bausteine

    „Elemente, die sich – auch abgewandelt – auf einer Webseite wiederholen“ (Eric Eggert, 25.04.2006)

    http://yatil.de/Artikel/xhtml-bausteine http://yatil.de/Artikel/xhtml-bausteine

  • aus: yatil.de/focusstandards/

    http://yatil.de/focusstandards/ http://yatil.de/focusstandards/

  • 3. Raster

  • Spalten

  • aus: Khoi Vinh: The Other Times

    http://www.subtraction.com/archives/2007/0410_the_other_ti.php http://www.subtraction.com/archives/2007/0410_the_other_ti.php

  • aus: Khoi Vinh: yeeaahh.subtraction.com

    http://yeeaahh.subtraction.com http://yeeaahh.subtraction.com

  • aus: Khoi Vinh: yeeaahh.subtraction.com

    http://yeeaahh.subtraction.com http://yeeaahh.subtraction.com

  • aus: Khoi Vinh: yeeaahh.subtraction.com

    http://yeeaahh.subtraction.com http://yeeaahh.subtraction.com

  • Zeilen

  • aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid

    http://alistapart.com/articles/settingtypeontheweb http://alistapart.com/articles/settingtypeontheweb http://alistapart.com/articles/settingtypeontheweb http://alistapart.com/articles/settingtypeontheweb

  • aus: ALA, Wilson Miner: Setting Type on the Web to a Baseline Grid

    http://alistapart.com/articles/settingtypeontheweb http://alistapart.com/articles/settingtypeontheweb http://alistapart.com/articles/settingtypeontheweb http://alistapart.com/articles/settingtypeontheweb

  • 4. Typografie

  • aus: Dan Cederholm: SimpleBits.com

    http://simplebits.com http://simplebits.com

  • aus: AIGA.com

    http://aiga.com http://aiga.com

  • 5. Unaufdringliches Javascript Unauffällig, doch genial

  • Hinweise einblenden

  • Hinweise einblenden

    X

  • Hinweise einblenden

    addEvent('hinwtoggle',

    'click',

    toggle('div.hinweis')

    );

  • 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

    http://microformats.org/wiki/posh http://microformats.org/wiki/posh http://www.digital-web.com/articles/coding_for_content/ http://www.digital-web.com/articles/coding_for_content/ http://yatil.de/Artikel/xhtml-bausteine http://yatil.de/Artikel/xhtml-bausteine http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/ http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/ http://www.subtraction.com/archives/2007/0410_the_other_ti.php http://www.subtraction.com/archives/2007/0410_the_other_ti.php http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php http://yeeaahh.subtraction.com/ http://yeeaahh.subtraction.com/

  • 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.

    http://webtypography.net/sxsw2007/ http://webtypography.net/sxsw2007/ http://webtypography.net/sxsw2007/ http://webtypography.net/sxsw2007/ http://www.hicksdesign.co.uk/journal/oxford-geek-night-2 http://www.hicksdesign.co.uk/journal/oxford-geek-night-2 http://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Workshop_Elegant_Web_Typography.pdf http://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Workshop_Elegant_Web_Typography.pdf http://ichwill.net/ http://ichwill.net/ http://creativecommons.org/licenses/by/3.0/ http://creativecommons.org/licenses/by/3.0/

  • Ende Danke für’s Zuhören :)

    Eric Eggert, yatil.de

    http://yatil.de/ http://yatil.de/

View more