77
Komplexe Sites sauber aufbauen Jens Grochtdreis

Komplexe Sites sauber aufbauen

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Komplexe Sites sauber aufbauen

Komplexe Sites sauber aufbauen

Jens Grochtdreis

Page 2: Komplexe Sites sauber aufbauen

‣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

Jens Grochtdreis

Page 3: Komplexe Sites sauber aufbauen

Bei einem Vortrag denkt nach Minuten sowieso jeder

nur noch an Sex.Sigmund Freud

Page 4: Komplexe Sites sauber aufbauen
Page 5: Komplexe Sites sauber aufbauen
Page 6: Komplexe Sites sauber aufbauen
Page 7: Komplexe Sites sauber aufbauen
Page 8: Komplexe Sites sauber aufbauen

Kommunikation

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

Page 9: Komplexe Sites sauber aufbauen

Versionierung

Page 10: Komplexe Sites sauber aufbauen

Früher: Heute:

index.htmlindex_01032009.htmlindex_03032009.htmlindex_03032009b.htmlindex_03032009c.html

Versionierung

Page 11: Komplexe Sites sauber aufbauen

Kommentare sind dabei sehr wichtig

Page 12: Komplexe Sites sauber aufbauen
Page 13: Komplexe Sites sauber aufbauen
Page 14: Komplexe Sites sauber aufbauen
Page 15: Komplexe Sites sauber aufbauen

Ticketsystem

Page 16: Komplexe Sites sauber aufbauen

Traditionell

‣ E-Mail (-Massaker) mit Anhängen

‣ Kommentare in E-Mail, PPT, PDF und Word

‣ Aufgabe abhaken?

‣ Aufgabe zuweisen?

‣ Aufgabe priorisieren?

Page 17: Komplexe Sites sauber aufbauen

Mantis

http://www.mantisbt.org/

Page 18: Komplexe Sites sauber aufbauen

Ein Beispiel-Eintrag

Page 19: Komplexe Sites sauber aufbauen

Layout mit Strukturmarkierungen

Page 20: Komplexe Sites sauber aufbauen
Page 21: Komplexe Sites sauber aufbauen
Page 22: Komplexe Sites sauber aufbauen

Symbole in Fireworks

Page 23: Komplexe Sites sauber aufbauen

Fireworks statt Photoshop

Page 24: Komplexe Sites sauber aufbauen
Page 25: Komplexe Sites sauber aufbauen

Basis: YAML

Page 26: Komplexe Sites sauber aufbauen
Page 27: Komplexe Sites sauber aufbauen

Warum YAML

‣Wunsch des Kunden

‣ Sehr gut dokumentierte Grundlage

‣ Lösung von Standardproblemen

‣ Standardkomponenten

‣ Ist grundsätzlich dienstleisterunabhängig

Page 28: Komplexe Sites sauber aufbauen

/** * "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);

Page 29: Komplexe Sites sauber aufbauen

Struktur

Page 30: Komplexe Sites sauber aufbauen

Beispiel: jaxenter.com

Page 31: Komplexe Sites sauber aufbauen
Page 32: Komplexe Sites sauber aufbauen
Page 33: Komplexe Sites sauber aufbauen

Beispiel: Deutsche Bank

Page 34: Komplexe Sites sauber aufbauen
Page 35: Komplexe Sites sauber aufbauen
Page 36: Komplexe Sites sauber aufbauen
Page 37: Komplexe Sites sauber aufbauen
Page 38: Komplexe Sites sauber aufbauen

Beispiel: stern.de

Page 39: Komplexe Sites sauber aufbauen
Page 40: Komplexe Sites sauber aufbauen

Überschriften sind überbewertet ...

Page 41: Komplexe Sites sauber aufbauen
Page 42: Komplexe Sites sauber aufbauen

So könnte stern.de strukturiert sein

Page 43: Komplexe Sites sauber aufbauen
Page 44: Komplexe Sites sauber aufbauen

Beispiel: adac.de

Page 45: Komplexe Sites sauber aufbauen
Page 46: Komplexe Sites sauber aufbauen

Neue HTML5-Elemente

Page 47: Komplexe Sites sauber aufbauen

Seite ist eine Ansammlung von Modulen

Page 48: Komplexe Sites sauber aufbauen
Page 49: Komplexe Sites sauber aufbauen
Page 50: Komplexe Sites sauber aufbauen
Page 51: Komplexe Sites sauber aufbauen
Page 52: Komplexe Sites sauber aufbauen
Page 53: Komplexe Sites sauber aufbauen

Inhalte differieren zwischen Layout und Realität

Page 54: Komplexe Sites sauber aufbauen
Page 55: Komplexe Sites sauber aufbauen

Keine Seiten bauen, sondern Schnipsel

Page 57: Komplexe Sites sauber aufbauen

Grobe Struktur

Page 58: Komplexe Sites sauber aufbauen

Der CSS-Ordner

Page 59: Komplexe Sites sauber aufbauen

Der CSS-Ordner

Page 60: Komplexe Sites sauber aufbauen

Der Bilder-Ordner

Page 61: Komplexe Sites sauber aufbauen

Bilder, die im CSS referenziert werden, werden im CSS-Ordner abgelegt.

Gibt es eine Gruppe von Bildern, dann in einen Ordner packen.

Page 62: Komplexe Sites sauber aufbauen

Dummybilder

http://dummyimage.com/

Page 63: Komplexe Sites sauber aufbauen

Der inc-Ordner

Page 64: Komplexe Sites sauber aufbauen

Im inc-Ordner

Page 65: Komplexe Sites sauber aufbauen

Die Steuerdatei -video-einzel.php

Page 66: Komplexe Sites sauber aufbauen

Die Inhaltsdatei -video-einzel.php.inc

Page 67: Komplexe Sites sauber aufbauen

Die Steuerdatei -mit Ergänzungen

Page 68: Komplexe Sites sauber aufbauen

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

videouebersicht.inc

Page 69: Komplexe Sites sauber aufbauen

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

vcsmall1.inc

Page 70: Komplexe Sites sauber aufbauen

Themes

Page 71: Komplexe Sites sauber aufbauen

Jaxenter.com

Page 72: Komplexe Sites sauber aufbauen

mobile360.de

Page 73: Komplexe Sites sauber aufbauen

Die Basis der Themes

Page 74: Komplexe Sites sauber aufbauen

@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 ================ */ }

Page 75: Komplexe Sites sauber aufbauen

{color: #000;}{color: #333;}{color:#444;}{color:#555;}{color: #666; }{color: #fff;}{color: #2e506b;}{color: #0063a9;}{color: #0b60ab;}{color: #b7c7d4;}{color: #25516a;}{color: #74804d;}{color:#679A06;}

jaxenter.com

{color: #000;}{color:#000;}{color:#333;}{color: #000; }{color: #fff;}{color: #1d85af;}{color: #2795b7;}{color: #2795b7;}{color: #2795bd;}{color: #000;}{color: #000;}{color: #1d85af;}{color:#679A06;}

mobile360.de

Page 76: Komplexe Sites sauber aufbauen

Und? Hatte Freud recht?Ich hoffe nicht.

Page 77: Komplexe Sites sauber aufbauen

Jens Grochtdreishttp://grochtdreis.de

http://twitter.com/Flockehttp://webkrauts.de

Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/