Upload
jens-grochtdreis
View
1.895
Download
1
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
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?
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.
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/