Date post: | 22-May-2015 |
Category: |
Technology |
Upload: | jens-grochtdreis |
View: | 1,891 times |
Download: | 1 times |
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/