Ausgehend vom Relaunch von Jaxenter.com zeige ich, wie man komplexe Sites aufbauen kann und welche Gedanken man sich über Überschriftenstrukturen machen sollte.

1. Komplexe Sites sauber
aufbauen
Jens Grochtdreis

2. Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 11 Jahre Arbeit im und fürs Web
‣ Gründer der Webkrauts
‣ Blogger
‣ Autor für: PHPMagazin, PHPUser, T3N,
Webstandards-Magazin
‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

3. Bei einem Vortrag denkt
nach Minuten sowieso jeder
nur noch an Sex.
Sigmund Freud

8. Kommunikation
http://friendsofirony.com/2009/12/22/so-wait-wut/

9. Versionierung

10. Versionierung
Früher: Heute:
index.html
index_01032009.html
index_03032009.html
index_03032009b.html
index_03032009c.html

11. Kommentare sind dabei sehr
wichtig

15. Ticketsystem

16. Traditionell
‣ E-Mail (-Massaker) mit Anhängen
‣ Kommentare in E-Mail, PPT, PDF und Word
‣ Aufgabe abhaken?
‣ Aufgabe zuweisen?
‣ Aufgabe priorisieren?

17. Mantis
http://www.mantisbt.org/

18. Ein Beispiel-Eintrag

19. Layout mit
Strukturmarkierungen

22. Symbole in Fireworks

23. Fireworks statt Photoshop

25. Basis:YAML

27. Warum YAML
‣ Wunsch des Kunden
‣ Sehr gut dokumentierte Grundlage
‣ Lösung von Standardproblemen
‣ Standardkomponenten
‣ Ist grundsätzlich dienstleisterunabhängig

28. /**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
*
* (en) central stylesheet
* (de) Zentrales Stylesheet
*
* @link http://www.yaml.de
*/
/* import core styles | Basis-Stylesheets einbinden */
@import url(/lib/yaml/3.2_100110/core/slim_base.css);
/* horizontale Navigation */
@import url(navigation/horizontal_nav.css);
/* Die Grundlage des Designs */
@import url(screen/layout.css);
/* Das Layout der Tabs */
@import url(screen/tabs.css);
/* Die Basisdefinitionen der Formulare - nicht ändern! */
@import url(screen/forms.css);
/* Die Optik der Formulare */
@import url(screen/forms-layout.css);
/* import print layout | Druck-Layout einbinden */
@import url(print/print.css);

29. Struktur

30. Beispiel: jaxenter.com

33. Beispiel: Deutsche Bank

38. Beispiel: stern.de

40. Überschriften sind
überbewertet ...

42. So könnte stern.de
strukturiert sein

44. Beispiel: adac.de

46. Neue HTML5-Elemente

47. Seite ist eine Ansammlung
von Modulen

53. Inhalte differieren zwischen
Layout und Realität

55. Keine Seiten bauen,
sondern Schnipsel

56. http://grochtdreis.de/weblog/2010/04/27/ein-blick-in-meinen-entwicklungsprozess/

57. Grobe Struktur

58. Der CSS-Ordner

59. Der CSS-Ordner

60. Der Bilder-Ordner

61. Bilder, die im CSS referenziert werden, werden
im CSS-Ordner abgelegt.
Gibt es eine Gruppe von Bildern, dann in einen
Ordner packen.

62. Dummybilder
http://dummyimage.com/

63. Der inc-Ordner

64. Im inc-Ordner

65. Die Steuerdatei -
video-einzel.php

66. Die Inhaltsdatei -
video-einzel.php.inc

67. Die Steuerdatei -
mit Ergänzungen

68. videouebersicht.inc
<div class="mediapool-list clearfix">
<h2>Videos</h2>
<div class="paginationControl clearfix">
<!-- "previous page" action -->
<a class="previous prev browse left" href="#"></a>
<ul class="pages"></ul>
<!-- "next page" action -->
<a class="next browse right" href="#"></a>
</div>
<!-- Die scrollbaren Thumbnails. Es sind immer nur zwei Einträge zu sehen. -->
<div id="scrollcontainer">
<ul class="scrolled">
<li><?php include 'vcsmall1.inc'; ?></li>
<li><?php include 'vcsmall2.inc'; ?></li>
<li><?php include 'vcsmall3.inc'; ?></li>
<li><?php include 'vcsmall4.inc'; ?></li>
<li><?php include 'vcsmall1.inc'; ?></li>
<li><?php include 'vcsmall2.inc'; ?></li>
<li><?php include 'vcsmall3.inc'; ?></li>
<li><?php include 'vcsmall4.inc'; ?></li>
<li><?php include 'vcsmall1.inc'; ?></li>
<li><?php include 'vcsmall2.inc'; ?></li>
</ul>
</div>
</div><!-- end: mediapool-list -->

69. vcsmall1.inc
<div class="vcsmall clearfix">
<div class="videopic">
<a href="#">
<img src="images/video_playbutton.png" class="videoplaybtn" alt="Video Playbutton" />
<img src="images/dummybilder/114x77-1.png" class="videosymbol" alt="114x77 1" />
</a>
</div>
<div class="vcsmallcnt">
<h5><a href="#">Lorem ipsum dolor sit.</a></h5>
<p><a href="#">Morbi euismod magna ac lorem rutrum elementum.</a></p>
</div>
</div><!-- end: .vcsmall -->

70. Themes

71. Jaxenter.com

72. mobile360.de

73. Die Basis der Themes

74. @media all {
/**
* @section Schriften
*/
/* =========== Allgemeine Schriftzuweisungen ================ */
/* =========== Font-size ================ */
/* =========== font-weight | font-style ================ */
/* =========== text-transform | text-decoration ================ */
/**
* @section Allgemeine Regeln
*/
/**
* @section Farben der jeweiligen Site
*/
/* Page margins and background | Randbereiche & Seitenhintergrund */
/* =========== color ================ */
/* =========== border ================ */
/* =========== runde Ecken ================ */
}
@media screen {
/* =========== background-image ================ */
/* =========== background-color ================ */
/* =========== Schatten ================ */
}

75. {color: #000;} {color: #000;}
{color: #333;} {color:#000;}
{color:#444;} {color:#333;}
{color:#555;} {color: #000; }
{color: #666; } {color: #fff;}
{color: #fff;} {color: #1d85af;}
{color: #2e506b;} {color: #2795b7;}
{color: #0063a9;} {color: #2795b7;}
{color: #0b60ab;} {color: #2795bd;}
{color: #b7c7d4;} {color: #000;}
{color: #25516a;} {color: #000;}
{color: #74804d;} {color: #1d85af;}
{color:#679A06;} {color:#679A06;}
jaxenter.com mobile360.de

76. Und? Hatte Freud recht?
Ich hoffe nicht.

77. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/