Komplexe Sites sauber aufbauen

Komplexe Sites sauber aufbauen

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

Jens Grochtdreis

Bei einem Vortrag denkt nach Minuten sowieso jeder

nur noch an Sex.Sigmund Freud

Kommunikation

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

Versionierung

Früher: Heute:

index.htmlindex_01032009.htmlindex_03032009.htmlindex_03032009b.htmlindex_03032009c.html

Versionierung

Kommentare sind dabei sehr wichtig

Ticketsystem

Traditionell

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

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

‣ Aufgabe abhaken?

‣ Aufgabe zuweisen?

‣ Aufgabe priorisieren?

Mantis

http://www.mantisbt.org/

Ein Beispiel-Eintrag

Layout mit Strukturmarkierungen

Symbole in Fireworks

Fireworks statt Photoshop

Basis: YAML

Warum YAML

‣Wunsch des Kunden

‣ Sehr gut dokumentierte Grundlage

‣ Lösung von Standardproblemen

‣ Standardkomponenten

‣ Ist grundsätzlich dienstleisterunabhängig

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

Struktur

Beispiel: jaxenter.com

Beispiel: Deutsche Bank

Beispiel: stern.de

Überschriften sind überbewertet ...

So könnte stern.de strukturiert sein

Beispiel: adac.de

Neue HTML5-Elemente

Seite ist eine Ansammlung von Modulen

Inhalte differieren zwischen Layout und Realität

Keine Seiten bauen, sondern Schnipsel

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

Grobe Struktur

Der CSS-Ordner

Der CSS-Ordner

Der Bilder-Ordner

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

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

Dummybilder

http://dummyimage.com/

Der inc-Ordner

Im inc-Ordner

Die Steuerdatei -video-einzel.php

Die Inhaltsdatei -video-einzel.php.inc

Die Steuerdatei -mit Ergänzungen

<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

<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

Themes

Jaxenter.com

mobile360.de

Die Basis der Themes

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

{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

Und? Hatte Freud recht?Ich hoffe nicht.

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/