komplexe sites sauber aufbauen

77
Komplexe Sites sauber aufbauen Jens Grochtdreis

Upload: jens-grochtdreis

Post on 22-May-2015

1.893 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

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/