website dokumentation - rene-hirt.ch | rené hirt's website · 2013-02-08 · website‐...
Post on 18-Feb-2020
0 Views
Preview:
TRANSCRIPT
Website‐Dokumentationrene‐hirt.ch Es ist der Bauplan vom Konzept zur Umsetzung und Launch der Website. Das Dokument enthält technisch relevante Daten zu Konstruktion des Internetauftritts. René Hirt, renehirt@rene‐hirt.ch 29.10.2012
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 1 von 26
1. Verzeichnisse
1.1. Inhaltsverzeichnis1. Verzeichnisse ................................................................................................................................... 1
1.1. Inhaltsverzeichnis .................................................................................................................... 1
1.2. Abbildungsverzeichnis ............................................................................................................. 3
1.3. Tabellenverzeichnis ................................................................................................................. 3
2. Planung ............................................................................................................................................ 3
2.1. Ziele und Inhalte ...................................................................................................................... 3
2.2. Strategisches Konzept ............................................................................................................. 3
2.3. Produktionshandbuch ............................................................................................................. 4
3. Realisierung ..................................................................................................................................... 4
3.1. Benutzte Hardware ................................................................................................................. 4
3.2. Benutzte Software ................................................................................................................... 5
3.2.1. Test‐Server‐Einstellungen von Dreamweaver ................................................................. 6
3.3. Speziell verwendete Scripts ..................................................................................................... 8
3.3.1. Script für die Schriftart: Lucida Calligrafy ........................................................................ 8
3.3.2. JavaScript für das Hochscrollen der Website .................................................................. 8
3.3.3. Border‐Radius .................................................................................................................. 9
3.4. Fein‐Konzept‐Abänderungen .................................................................................................. 9
3.4.1. Homepage ....................................................................................................................... 9
3.4.2. Text‐Definition ................................................................................................................. 9
3.4.3. Navigations‐Architektur ................................................................................................ 10
3.5. Design‐Konzept‐Abänderungen ............................................................................................ 10
3.5.1. Content_left .................................................................................................................. 10
3.5.2. Content_middle ............................................................................................................. 10
3.5.3. Sub‐Navigation .............................................................................................................. 10
3.5.4. Footer ............................................................................................................................ 10
4. Verzeichnisstruktur ....................................................................................................................... 10
4.1. Lokale Verzeichnisstruktur .................................................................................................... 10
4.2. Host Verzeichnisstruktur ....................................................................................................... 12
5. Style‐Guide .................................................................................................................................... 13
5.1. DIV‐Identifikation .................................................................................................................. 13
5.2. Site‐Identifikation .................................................................................................................. 14
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 2 von 26
5.3. Body ....................................................................................................................................... 17
5.4. Header ................................................................................................................................... 17
5.5. Navigation ............................................................................................................................. 17
5.6. Footer .................................................................................................................................... 17
5.7. Inhalt ...................................................................................................................................... 17
5.8. HTML‐Tags ............................................................................................................................. 17
5.9. Bildformatierung ................................................................................................................... 17
5.10. Style‐Sheets ....................................................................................................................... 17
5.10.1. Allgemeine Informationen und Sheets .......................................................................... 17
5.10.2. Spezieller Sheet‐Eintrag für die Vorlage: Haupt‐Kategorie ........................................... 18
5.10.3. Spezieller Sheet‐Eintrag für die Vorlage: Homepage .................................................... 18
6. Farb‐Tabellen ................................................................................................................................. 19
6.1. Homepage ............................................................................................................................. 19
6.2. Header ................................................................................................................................... 19
6.3. Body ....................................................................................................................................... 19
6.4. Navigation ............................................................................................................................. 19
6.5. Footer .................................................................................................................................... 19
7. Launch ........................................................................................................................................... 19
7.1. Meta‐Angaben ....................................................................................................................... 19
7.1.1. Allgemeine Meta‐Angaben ............................................................................................ 19
7.1.2. Meta‐Angaben nach Dublin Core .................................................................................. 20
7.2. Provider‐Angaben und Logins ............................................................................................... 20
7.3. Suchmaschinen‐Anmeldungen .............................................................................................. 21
7.4. Wartungsleitfaden ................................................................................................................. 21
8. Anhänge......................................................................................................................................... 22
8.1. Wordpress‐Grundeinstellungen ............................................................................................ 22
8.2. Einbindung des Wordpress in die Homepage ....................................................................... 23
8.3. Wordpress‐Test‐Server .......................................................................................................... 24
8.4. Style‐Sheet‐Änderungen in Wordpress ................................................................................. 24
8.5. Linkliste .................................................................................................................................. 25
8.5.1. Thema: font‐face ........................................................................................................... 25
8.5.2. Scroll to top ................................................................................................................... 25
8.5.3. Cascading Style Sheets und Design ............................................................................... 25
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 3 von 26
1.2. AbbildungsverzeichnisAbbildung 1: Web‐Host ‐ Hostpoint ........................................................................................................ 5
Abbildung 2: Lokale DW‐Einstellungen ................................................................................................... 6
Abbildung 3: Einfache Test‐Server‐Einstellungen ................................................................................... 6
Abbildung 4: Erweiterte Test‐Server‐Einstellungen ................................................................................ 7
Abbildung 5: Stammordner für Bilder ..................................................................................................... 7
Abbildung 6: Div‐Identifikation ............................................................................................................. 13
Abbildung 7: Div‐Identifikation mit Höhen ........................................................................................... 14
Abbildung 8: Wordpress ‐ Links und Einstellungen ............................................................................... 23
Abbildung 9: Style ‐ Wordpress ............................................................................................................. 24
1.3. TabellenverzeichnisTabelle 1: Benutzte Hardware ................................................................................................................. 4
Tabelle 2: Benutzte Software .................................................................................................................. 5
Tabelle 3: Neue Text‐Definition .............................................................................................................. 9
Tabelle 4: Neue Boxen im Footer .......................................................................................................... 10
Tabelle 5: Lokale Verzeichnis‐Strukturen .............................................................................................. 12
Tabelle 6: Host Verzeichnis‐Struktur ..................................................................................................... 12
Tabelle 7: Div‐Identifikation .................................................................................................................. 14
Tabelle 8: Site ‐ Identifikation ............................................................................................................... 17
Tabelle 9: Style‐Sheets .......................................................................................................................... 18
Tabelle 10: Allgemeine Meta‐Angaben ................................................................................................. 20
Tabelle 11: Meta‐Angaben nach Dublin Core ....................................................................................... 20
Tabelle 12: Provider‐Angaben und Logins ............................................................................................. 21
Tabelle 13: Wartungsleitfaden .............................................................................................................. 21
Tabelle 14: Wordpress‐Einstellungen ................................................................................................... 23
Tabelle 15: Stylesheet Wordpress ‐ Neue Codes .................................................................................. 25
Tabelle 16: Links ‐ Font‐Face ................................................................................................................. 25
Tabelle 17: Links ‐ Scroll to top.............................................................................................................. 25
Tabelle 18: Links ‐ CSS und Design ........................................................................................................ 26
2. Planung
2.1. ZieleundInhalteDie Website rene‐hirt.ch war bereits 8 Jahre alt und wurde selten aktualisiert. Sie entsprach nicht
mehr dem heutigen Standard und sie war auch vom Design her entsprach sie nicht mehr dem Stil von
René Hirt. Daher entschloss sich René Hirt die alte Website nicht mehr zu renovieren, sondern eine
komplett neue Website zu kreieren. Das Ziel der neuen Website ist es, die Person René Hirt im Stand
2012 zu wiederspiegeln.
2.2. StrategischesKonzeptDer Benutzer soll nach dem Besuch der Website die Person und den Charakter kennen. Daher
entschloss sich René Hirt die Website generell statisch zu gestalten, da sich die Inhalte eh kaum
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 4 von 26
ändern. Anhand der Konkurrenzanalyse und SWOT‐Profil erkannte der Auftraggeber, dass
zunehmend dynamische Inhalte wichtig werden. Daher wurde auch der Homepage ein Blog mit
einem persönlichen Tagebuch implementiert.
2.3. ProduktionshandbuchDer Grundton der Website wurde in einem violetten Farbton gehalten. Die Farben Rot und Blau
sollen das Violett unterstreichen. Die Schriftart wurde in der Farbe Schwarz gehalten mit weissem
Hintergrund. Diverse Style‐Elemente wurden durch die Farben Gold und Silber unterstützt.
Die Überschriften wurden generell in den Schriftarten Lucida Calligrafy und als Alternative die
Schriftart Tahoma gewählt. Für die Links und Inhaltstexten benutzte man die Schriftart Verdana.
Als Navigations‐Architektur wählte man eine Haupt‐Navigation, die horizontal direkt unterhalb des
Header positioniert wurde. Die Unter‐Navigation wurde auf die linke Website des Inhalts
untergebracht. Weitere Unter‐Navigation wurde nicht geplant, da auch bewusst die Klicktiefe gering
gehalten wurde. Die Meta‐Navigation für Inhalte, die nicht in eine Kategorie eingeteilt werden
konnte, wurde direkt oberhalb des Headers positioniert.
Als Gestaltungsrater wurde ein generelles Raster von 5 Spalten genommen, um den goldenen Schnitt
zu gewährleisten. Die Reihen wurden nicht bewusst eingeteilt, jedoch wurde bei der Konstruktion auf
die Rasterhaltigkeit geachtet.
3. Realisierung
3.1. BenutzteHardwareUmgebung Merkmale
Private Workstation
Berufliche Workstation Für die Öffentlichkeit gesperrt.
Web‐Host
Internetanbindung
Tabelle 1: Benutzte Hardware
Der bereits bestehende Web‐Host hat folgende Konfigurationen gemäss Abbildung 1: Web‐Host ‐
Hostpoint, Stand 13.11.2012.
Daher wurde entschieden auf der Workstation im Betrieb den WampServer 2.2E, 64bit auf
Grundlagen von PHP 5.3 zu installieren, obschon ein WampServer mit PHP 5.4 existieren würde.
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 5 von 26
Abbildung 1: Web‐Host ‐ Hostpoint
3.2. BenutzteSoftwareAnwendung Software Version
FTP‐Client WinSCP 4.3.7
HTML‐Editor Adobe Design Premium CS5: Dreamweaver 5.5
Notepad++ 6.1.3
CSS‐Editor Adobe Design Premium CS5: Dreamweaver 5.5
Notepad++ 6.1.3
Gestaltung Adobe Design Premium CS5: Fireworks 5.5
Bildbearbeitung Adobe Design Premium CS5: Photoshop 5.5
Blog Wordpress 3.4.2
Analyse Awstats Unbekannt
Host‐GUI Hostpoint Control Panel Unbekannt
Projektplanung Ganttproject 2.5.2
Mindjet MindManager Pro 7.1.394
Novell GroupWise 8.0.2
Outlook 2007 Unbekannt
Acrobat 9 Professional 9.5.2
Betriebssystem Microsoft Windows 7 SP1 Enterprise 6.1.7601 SP1
Test‐Server WampServer 2.2
Apache 2.2.22
PHP 5.3.13
phpMyAdmin 3.5.1
MySQL 5.5.24 Tabelle 2: Benutzte Software
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 6 von 26
3.2.1. Test‐Server‐EinstellungenvonDreamweaver
Abbildung 2: Lokale DW‐Einstellungen
Da die lokalen Dreamweaver‐Einstellungen direkt zum Test‐Server gehen, werden die Daten
regelmässig auf den Stick gesichert werden müssen!
Abbildung 3: Einfache Test‐Server‐Einstellungen
Für den Upload auf den Web‐Host von Hostpoint (Scharfschaltung – Launch) wird ein FTP‐Client
benutzt und die Daten mittels dem FTP‐Protokoll übertragen. Die Logins sind im Kapitel 7.2. zu
finden.
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 7 von 26
Abbildung 4: Erweiterte Test‐Server‐Einstellungen
Ob die Daten tatsächlich automatisch auf den Test‐Server beim Abspeichern raufgeladen werden
sollen, wird man in der Praxis noch ausprobieren müssen. Hier wird aber versucht, Flüchtigkeitsfehler
zu vermeiden, indem man vergisst, den Server zu aktualisieren.
Abbildung 5: Stammordner für Bilder
Diese Einstellung wird nicht zwingend benötigt, kann aber die Arbeiten vereinfachen.
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 8 von 26
3.3. SpeziellverwendeteScripts
3.3.1. ScriptfürdieSchriftart:LucidaCalligrafyDie Schriftart Lucida Calligrafy wird nicht in jedem Betriebssystem unterstützt. Daher wird über den
CSS‐Befehl folgendes Script eingesetzt:
@font‐face {
font‐family:'Lucida Calligraphy';
src: local('');
src: url('www.rene‐hirt.ch/tamplates/lucida‐calligrafy.eot') format('eot'),
url('www.rene‐hirt.ch/templates/lucida‐calligrafy.ttf') format('truetype'),
font‐weight:normal;
font‐style:italic;
}
Zudem wird im Host‐Server in der Datei .htaccess folgender Befehl eingetragen, damit auch Firefox
mit absoluten Links umgehen kann:
<FilesMatch "\.(ttf|otf|eot)$">
Header set Access‐Control‐Allow‐Origin "*"
</FilesMatch>
Mit allen anderen Browser‐Versionen sollte mit dem font‐face‐Befehl die Schriftart funktionieren.
3.3.2. JavaScriptfürdasHochscrollenderWebsiteVon Dynamic Drive wird ein spezielles JavaScript für das Hochscrollen der Website zum Anfang der
Seite benutzt. Das Script ist im Verzeichnis ‚scripts‘ auf dem Host gespeichert. Das Script wird im
Header aufgerufen unter folgendem Befehl:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script‐ © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source
code***********************************************/
</script>
WICHTIG: Damit das Script funktioniert muss als Link: <a href="#top">Back to Top</a> enthalten
sein. Die Variablen können im Script scrolltopcontrol.js verändert werden. Entsprechende Angaben
sind im Script kommentiert.
Zudem wurde für den Scroll‐Button ein eigenes Bild generiert unter dem Namen: up_lila.png. Diese
ersetzt up.png im Orginal‐Script. Der neue Pfadt heisst:
controlHTML: '<img src="images/up_lila.png" style="width:100px; height:50px" />',
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 9 von 26
Auf der Zeile 59 wurde das Original‐Script auch verändert mit dem Eintrag:
.attr({title:'Nach oben ‐ Zum Haupt‐Menu'})
Wenn der Benutzer auf den Button geht erscheint mit diesem Eintrag ein Hilfsfenster mit der
Beschriftung: ‚Nach oben – Zum Haupt‐Menu‘.
3.3.3. Border‐RadiusDie sichtbaren Boxen sollen oben links und unten rechts abgerundet sein. Im Design‐Konzept ist dies
unterschiedlich gezeichnet worden, indem alle Ecken rund sind. Die obere rechte und die untere
linke Ecke sollen spitz verlaufen. Daher werden für die abgerundeten Ecken im Stylesheet der border‐
radius‐Befehle verwendet. Diese sind allerdings nur auf Browsern ersichtlich, die mit CSS3 umgehen
können. Im Code werden auch Hacks für die verschiedenen Browser geschrieben:
‐webkit‐border‐top‐left‐radius: 10px;
‐webkit‐border‐bottom‐right‐radius: 10px;
‐moz‐border‐radius‐topleft: 10px;
‐moz‐border‐radius‐bottomright: 10px;
border‐top‐left‐radius: 10px;
border‐bottom‐right‐radius: 10px;
Dies ist der Beispiel‐Code für die Hauptnavigation. Dies wird auch für die Boxen sub_navigation und
content_middle_right verwendet. Der Radius wird dabei 5px betragen.
Es wurde ein Border‐Radius‐Generator für den Code verwendet: border‐radius.com.
3.4. Fein‐Konzept‐Abänderungen
3.4.1. HomepageUm für das Wordpress auf der linken Seite einen geeigneten Seiten‐Spiegel zu haben, wurde die Box
content_left auf der Homepage entgegen dem Fein‐Konzept integriert mit dem Bild content_left.gif.
3.4.2. Text‐DefinitionDie Schriftart Lucida Calligrafy hat sich in den Screen‐Test für die Navigation und Sub‐Navigation
nicht bewährt. Auch funktionierte diese Schriftart mit dem @font‐face Script nicht sehr zuverlässig.
Zudem wirkte die Website zu schnörkelig und filigran. Deshalb wurde auch bei den Überschriften auf
Lucida Calligrafy verzichtet. Als Ersatz wurden folgende Fonts verwendet:
Objekt Tag Eigenschaften
Überschrift 1 H1 Tahoma, Geneva, 20px, letter‐space:1.5px
Überschrift 2 H2 Tahoma, Geneva, 16px, letter‐space:1.5px
Überschrift 3 H3 Tahoma, Geneva, 14px, letter‐space:1.5px
Überschrift 1 im content_middle_right
H1 Tahoma, Geneva, 14px, letter‐space:normal
Navigation A Tahoma, Geneva, 24px, letter‐space:1.5px
Sub‐Navigation A Tahoma, Geneva, 16px, letter‐space:1.5px Tabelle 3: Neue Text‐Definition
Das @font‐face‐Script wird nicht mehr benötigt und daher im Code auskommentiert, falls es später
dennoch benutzt werden sollte. Auch der Code im .htaccess bleibt bis auf weiteres bestehen.
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 10 von 26
3.4.3. Navigations‐ArchitekturDie beiden Links: Linkliste und Website‐Projekte, die zuerst ein Bestandteil der Haupt‐Navigation sein
sollte wurden aus Platz‐Gründen in den Meta‐Bereich versetzt. Dort wurden sie gestalterisch
getrennt von den übrigen Meta‐Links. Zusätzlich wurde ein Link für die DVD‐Sammlung von René Hirt
angebracht, die auf die Website http://connect.collectorz.com/users/renehirt/movies/view zeigt.
3.5. Design‐Konzept‐Abänderungen
3.5.1. Content_leftDie Box content_left wurde neu in der Homepage integriert mit einer Breite von den geplanten 50px.
Im Anschluss an content_left kommt der Tag iframe, der das Wordpress auf der Homepage
integriert. Die folgende Box wurde auf eine Breite von 950px angepasst.
3.5.2. Content_middleDamit das Floating und die Platzierung der Boxe content_middle besser funktioniert, wurde entgegen
dem Fein‐Konzept diese Box in der Breite auf 350px beschränkt. Zudem hat der Inhalt auf beiden
Seite einen Raum von 15px erhalten, damit dieser vom Style her besser funktioniert.
3.5.3. Sub‐NavigationDas Stimmungsbild für die Unter‐Navigation wurde wegen technischer und umständlicher Struktur
nicht mehr unterhalb der Box sondern innerhalb dieser Box programmiert. Auch der Style der Unter‐
Navigation wurde gestalterisch verändert, damit diese besser in das Gesamtbild der Website passt
und damit sich der Benutzer von der Usability her besser orientieren kann. Die Links und der Titel mit
Stimmungsbild werden über ein hr‐Tag voneinander getrennt.
3.5.4. FooterDamit die Inhalte im Footer besser unterteilt werden können wurden hier zusätzliche Boxen
generiert:
Boxen Name Inhalte Floating
Position Masse
footer_top Top Link Left Direkt nach der Boxe footer, die alle Boxen einschliesst.
Breite: 50px.
footer_copy Copyright und Design
Left Nach der Boxe footer_top Breite: 150px.
footer_navigation Haupt‐Menü Left Nach der Boxe footer_copy Breite: 400px.
footer_links Meta‐Links Left Nach der Boxe footer_navigation
Breite: 390px.
Tabelle 4: Neue Boxen im Footer
4. Verzeichnisstruktur
4.1. LokaleVerzeichnisstrukturHauptverzeichnis Unterverzeichnis Eigenschaften
Altes Projekt Diverse Hier sind alle Informationen über die alten Projekte der Website rene‐hirt.ch abgespeichert.
www.rene‐hirt.ch Die Online‐Dateien der Website aus dem Jahre 2004.
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 11 von 26
Backup ‐ Hier werden die kompletten Server‐Backups gespeichert.
Datenbank ‐ Verzeichnisse und Dateien, die für die Datenbank verantwortlich sind, wie das Wordpress Tagebuch
Wordpress Root für die Wordpress Module
Diverses ‐ Für Verzeichnisse und Dateien, die nicht zugeordnet werden können.
Konzept ‐ Alle Verzeichnisse und Dateien, die für die konzeptionellen Arbeiten notwendig sind. Hier sind auch enthalten: ‐ Website‐Konzept.docx ‐ Website‐Dokumentation.docx
Abbildung Diverse JPG‐ und PNG‐Dateien, die im Konzept und Dokumentationen enthalten sind.
Mindmaps Diverse Mindmaps und Brainstormings, die massgebend für das Konzept waren.
Präsentationen Diverse PowerPoint‐Dateien, die für das Konzept notwendig waren.
Org Bilder ‐ Bilder, die im Roh‐Zustand und unbearbeitet vorhanden sind.
Bern Bilder, die die Stadt Bern betreffen
Bilderübungen Übungen, die auch drei Bildern in den frühen Jahren gemacht wurden.
Diverses Zu zuordnungsbare Bild‐Dateien
Ferien Bilder aus den Ferien oder Ausflüge
Games Screenshot und Download‐Bilder aus den gespielten Games
Header Rohdateien aus dem entwickelten Header
Hintergrund Rohdateien für den Hintergrund
ICT Bilder, die im Zusammenhang mit der Informatik stehen.
Internet DL Download Bilder aus dem Internet in ihrer originalen Form.
Logos Selbst entworfene Logos.
Mittelalter und Fantasie
Bilder zum Thema Mittelalter und Fantasie, ev auch Science Fiction.
Photoshop Bilder in ihrer Roh Form als PSD‐Datei gespeichert.
Portrait Portrait‐Bilder von René Hirt
Sternzeichen Horoskop‐Bilder zum Sternzeichen Schütze und Pferd.
WOW‐Bilder Games‐Bilder, die ausschliesslich das MMORPG World of Warcraft betreffen.
Org Programme ‐ Diverse Programme, Manuals, ZIP‐Dateien, PDF‐Dateien und Notizen, die für die Arbeiten benutzt worden sind.
Formmail Roh‐Code für den Formmailer, der aus dem Generator von Hostpoint rauskopiert wurde. Wird für das Kontakt‐Formular verwendet.
Org Text ‐ Texte, die in ihrer Roh Form und unformatiert vorhanden sind.
rene‐hirt.ch ‐ Die Struktur, wie sie auf dem Webserver vorhanden sein wird. Von diesem Verzeichnis aus findet der Upload statt über FTP (WinSCP). Die detaillierte Struktur ist im
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 12 von 26
Kapitel 4.2. ersichtlich.
Vorlagen ‐ Diverse Vorlagen und Hilfsmittel zur Erstellung des Konzeptes, Dokumentation und der Website.
Tabelle 5: Lokale Verzeichnis‐Strukturen
4.2. HostVerzeichnisstrukturDiese Ordner‐Struktur wird online auf den Webserver von Hostpoint raufgeladen; in das Verzeichnis:
public_html. Auf dem Root besteht eine Verknüpfung www, die aber auch auf das Verzeichnis
public_html verweist. Generell wird die gesamte Website auf das Root des Servers geladen und keine
Unterverzeichnisse oder Sub‐Domains auf dem Server installiert. Ausnahmen können Module wie
zum Beispiel das Wordpress oder andere dynamische Elemente (CMS, Foren) darstellen. Weitere
Verzeichnisse, die über den FTP‐Zugang zu erreichen sind, werden für den Website‐Auftritt nicht
benötigt.
Aussergewöhnliche Konfigurationen, die auch den Webserver und die Sicherheit betrifft, werden
über den Support von Hostpoint eingestellt werden müssen. Dies kann Einträge im .htaccess
betreffen, die einen absoluten URL für das font‐face zulassen.
Hauptverzeichnis Unterverzeichnis Eigenschaften
_notes ‐ Wird automatisch von Dreamweaver generiert.
_Vorlage ‐ Hier werden die Original‐Vorlagen der Website gespeichert aus denen weitere Sites generiert werden können.
css ‐ In diesem Verzeichnis werden die Style Sheets der Website gespeichert.
images ‐ Die bearbeiteten Bilder werden dort abgelegt.
pdf ‐ Hier werden die öffentlich zugänglichen PDF‐Dateien abgelegt.
scripts ‐ Hier wird das Verzeichnis für diverse Skripte wie PHP, JavaScript oder ähnliche.
sites ‐ Es ist der Überordner für alle Webseiten.
01_home Die Index‐Seite wird direkt im Root stehen und nicht in diesem Unterverzeichnis! Hier werden die Seiten der Header‐Kategorien stehen.
02_itsme Websites der Haupt‐Kategorie: It’s me ^^
03_ausbildung Websites der Haupt‐Kategorie: Ausbildung
04_hobbies Websites der Haupt‐Kategorie: Hobbies
05_sport Websites der Haupt‐Kategorie: Sport
06_games Websites der Haupt‐Kategorie: Games
07 Reserve
08_links Websites der Haupt‐Kategorie: Linkliste
09_projekt Websites der Haupt‐Kategorie: Website‐Projekt
templates ‐ Hier werden generierbare Vorlagen abgespeichert für eventuell spätere dynamische Inhalte.
wordpress ‐ Wordpress‐Modul der Homepage.
Website_2004 Diverse Die Website aus dem Jahre 2004‐2012 Tabelle 6: Host Verzeichnis‐Struktur
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 13 von 26
5. Style‐Guide
5.1. DIV‐Identifikation
Abbildung 6: Div‐Identifikation
Es wurde die gleiche Identifikation benutzt wie sie vorher im Design‐Konzept beschrieben wurde.
Auch das Gestaltungsraster konnte direkt verwendet werden. Die Boxen content_middle_right und
content_right wurden wegen dem float:right Befehl getauscht.
Boxen Name Farb‐Code Floating Position Masse
content_body #FFFFFF None Rahmen‐Box über alle anderen Boxen
Breite: 1000px
meta_link #8F0072 None Direkt nach dem content_body und vor dem header
Breite: 1000px Höhe: 30px
header #64008F None Direkt nach dem meta_link und vor navigation
Breite: 1000px Höhe: 120px
navigation #64008F None Nach dem Header und vor content_main
Breite: 1000px Höhe: 50px
content_main #CCCCCC None Direkt nach navigation und vor dem footer!!!
Breite: 1000px Höhe: ‐
content_left #FFFFFF (#64002F)
Left Innerhalb des content_main und vor der sub_navigation
Breite: 50px Höhe: skaliert
sub_navigation #8F002A Left Direkt nach dem content_left und vor content_middle
Breite: 150px Höhe: skalierbar
content_middle #FFFFFF (#FFFF00)
None Nach der sub_navigation und vor dem content_middle_right
Breite: (400px), Höhe: skalierbar.
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 14 von 26
content_middle_right #FFFFFF (#CCCCCC)
Right Direkt nach dem content_middle und vor content_right
Breite: 200px Höhe: skalierbar.
content_right #FFFFFF (#999999)
Right Vor dem content_middle_right oder content_middle und als Abschluss des content_main
Breite: 200px Höhe: skalierbar.
footer #8F0072 Clear Direkt nach dem content_middle
Breite: 1000px Höhe: 50px.
Tabelle 7: Div‐Identifikation
Hier ist das höhenbereinigte Gestaltungsraster:
Abbildung 7: Div‐Identifikation mit Höhen
5.2. Site‐IdentifikationFür sämtliche Inhalt‐Seiten und Homepage wurden generell drei unterschiedliche Vorlagen
entwickelt, die im Verzeichnis _Vorlage abgelegt sind:
Index_haupt_kategorie.php – Für Websites der Haupt‐Navigation, ohne den rechten
mittleren Teil content_middle_right
Index_homepage.php – Für Websites, die für die Startseite oder Tests bestimmt sind.
Index_unter_kategorie.php – Für Inhalte aus der Unter‐Kategorien, bei denen alle Boxen
gezeigt werden.
Die folgende Tabelle zeigt den konkreten Aufbau der einzelnen Websites. Alle Websites, ausser die
index‐Seiten, sind im Haupt‐Verzeichnis ‚sites‘ im Root abgelegt:
Name Verzeichnis Vorlage Kategorie Inhalte
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 15 von 26
Index.php Root Index_homepage.php Keine Startseite (scharf)
Index_d.php Root Index_unter_kategorie.php Unter‐K. Haupt‐K.
Demo‐Seite für die komplette Website
Index_i.php Root Index_haupt_kategorie.php Keine Vorlageseite für das iframe, falls der Browser keine Frames anzeigt.
Index_iframe.php Root Index_homepage.php Keine Demo‐Seite für die Startseite inkl. Wordpress
Index_p.php Root Index_homepage.php Keine Test‐Seiten für Integration von PHP.
Index_w.php Root Index_homepage.php Keine Wordpress‐Seite für den Test‐Server
Inhalt.php 01_home Index_unter_kategorie.php Header Das Inhaltsverzeichnis
Impressum.php 01_home Index_unter_kategorie.php Header Das Impressum
Kontakt.php 02_itsme Index_unter_kategorie.php Header Kontakt‐Daten und das Kontakt‐Fomular
Suche.php 01_home Index_unter_kategorie.php Header Für eine spätere Such‐Funktion als Platzhalter.
Links.php 08_links Index_haupt_kategorie.php Header Überblick der wichtigsten Links
Websites.php 08_links Index_unter_kategorie.php Unter Zeigt die Websites von René Hirt
Bummel.php 08_links Index_unter_kategorie.php Unter Die E‐Shop‐Links.
Joblinks.php 08_links Index_unter_kategorie.php Unter Berufliche Links.
Gamelinks.php 08_links Index_unter_kategorie.php Unter Links über das Gamen.
Hobbylinks.php 08_links Index_unter_kategorie.php Unter Ein paar Links über die Hobbies.
Sportlinks.php 08_links Index_unter_kategorie.php Unter Links über Sport.
projekt.php 09_projekt Index_haupt_kategorie.php Header Überblick über das Projekt.
Fazit.php 09_projekt Index_unter_kategorie.php Unter Rückblick über das Websites‐Projekt
Konzept.php 09_projekt Index_unter_kategorie.php Unter Vorstellung des Website‐Konzepts.
Dokumente.php 09_projekt Index_unter_kategorie.php Unter Vorstellung der Website‐Dokumentation.
Design.php 09_projekt Index_unter_kategorie.php Unter Diverse Design‐
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 16 von 26
Skizzen aus dem Konzept.
Itsme.php 02_itsme Index_haupt_kategorie.php Haupt Der Überblick über meine Person.
Daten.php 02_itsme Index_unter_kategorie.php Unter Meine persönlichen Daten.
Stationen.php 02_itsme Index_unter_kategorie.php Unter Die Stationen und Wohnorte im Leben.
Lebenslauf.php 02_itsme Index_unter_kategorie.php Unter Ein kurzer Lebenslauf.
Charaktere.php 02_itsme Index_unter_kategorie.php Unter Eine Beschreibung der eigenen Sternzeichen.
Ausbildung.php 03_ausbildung Index_haupt_kategorie.php Haupt Die Übersicht meiner Ausbildung.
Ict.php 03_ausbildung Index_unter_kategorie.php Unter ICT‐Kenntnisse und Diplome.
Referenzen.php 03_ausbildung Index_unter_kategorie.php Unter Website‐Referenzen.
Kaufmann.php 03_ausbildung Index_unter_kategorie.php Unter Kaufmännische Ausbildung und Diplome.
Marketing.php 03_ausbildung Index_unter_kategorie.php Unter Diplome und Wissen im Marketing und Verkauf.
Technisch.php 03_ausbildung Index_unter_kategorie.php Unter Technisches Wissen und Diplome
Hobbies.php 04_hobbies Index_haupt_kategorie.php Haupt Überblick der eigenen Hobbies.
Schach.php 04_hobbies Index_unter_kategorie.php Unter Über die Zeit im Schach.
Musik.php 04_hobbies Index_unter_kategorie.php Unter Meine Lieblingsmusik.
Filme.php 04_hobbies Index_unter_kategorie.php Unter Die Liebe zum Film mit der Film‐Datenbank.
Lesen.php 04_hobbies Index_unter_kategorie.php Unter Die bevorzugten Bücher und Stile.
Schreiben.php 04_hobbies Index_unter_kategorie.php Unter Die ersten Versuche des Schreibens.
Sport.php 05_sport Index_haupt_kategorie.php Haupt Der Überblick über sportliche Aktivität.
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 17 von 26
Fitness.php 05_sport Index_unter_kategorie.php Unter Aktivität im Fitness‐Center
Wingchun.php 05_sport Index_unter_kategorie.php Unter Die Zeit als Wing Chun Schüler
Icehockey.php 05_sport Index_unter_kategorie.php Unter Die Zeit beim SCB
Formeleins.php 05_sport Index_unter_kategorie.php Unter Die Begeisterung im Renn‐Sport
Games.php 06_games Index_haupt_kategorie.php Haupt Überblick über das Gaming/Spiele
Playstation.php 06_sport Index_unter_kategorie.php Unter Die Zeit mit der Play Station.
Pc.php 06_sport Index_unter_kategorie.php Unter Die beliebtesten PC Spiele.
Mmorpg.php 06_sport Index_unter_kategorie.php Unter Über die Online Rollenspiele.
Tabelle 8: Site ‐ Identifikation
5.3. Body
5.4. Header
5.5. Navigation
5.6. Footer
5.7. Inhalt
5.8. HTML‐Tags
5.9. Bildformatierung
5.10. Style‐Sheets
5.10.1. AllgemeineInformationenundSheetsAuf den Websites wurden zwei unterschiedliche Links zu den Style‐Sheets definiert:
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
Der obere Link leitet zur Haupt‐Sheet, der generell für die Gestaltung am Monitor verantwortlich ist.
Der zweite Link leitet weiter zum Sheet, der nur für die Ausgabe zum Drucker konzipiert worden ist.
In diesem Style‐Sheet werden der Header, die Haupt‐ und Unter‐Navigation, der Footer sowie das
Bildmaterial ausgeschlossen. Somit erhält der Benutzer reine Text‐Informationen für den Ausdruck.
Der Style‐Sheet für das Wordpress wurden im Kapiteln 8.1 und die Abänderungen in die Datei
style.css von Wordpress wurde in dem Kapitel 8.4 aufgeschrieben.
Aus dem Style‐Sheet main.css werden weitere Unter‐Sheets mittels Befehl @import integriert mit
den folgenden Aufgaben:
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 18 von 26
Style‐Sheet Aufgabe/Eigenschaft Boxen
Main.css Ist das erste Style‐Sheet mit der Verlinkung zu den anderen Sheets. Beinhaltet die generellen Tags‐Definitionen und Gesamt‐Struktur der Website.
#content_body #content_main
Print.css Sorgt für die Druck‐Ausgabe der Website Alle
Meta_link.css Formatiert den Meta‐Link‐Bereich und die Header‐Navigation.
#meta_link
Header.css Ist verantwortlich für den Header‐Bereich. #header
Navigation.css Sorgt für die Formatierung und die Positionierung der Haupt‐Navigation.
#navigation
Content_left.css Positioniert die erste Box im Inhalts‐Bereich. #content_left
Sub_navigation.css Definiert und Positioniert die Unter‐Navigation mit ihren Links, Boxen und Stimmungsbildern.
#sub_navigation
Content_middle.css Positioniert die Haupt‐Box für die Inhalte. #content_middle
Content_middle_right.css Sorgt für die Positionierung und Formatierung der zusätzlichen Inhalte in den Unter‐Kategorien.
#content_middle_right
Content_right.css Positioniert die Stimmungsbilder auf der rechten Seite der Website.
#content_right
Footer.css Zeigt sich Verantwortlich für den Schlussbereich der Website inkl. Links.
#footer #footer_top #footer_copy #footer_navigation #footer_links
Tabelle 9: Style‐Sheets
Alle Style‐Sheets sind im Verzeichnis ‚css‘ im Root zu finden. Wichtige Elemente, die zur
Positionierung der Boxen oder Links dienen sind im Script mit den entsprechenden Kommentaren
versehen.
5.10.2. SpeziellerSheet‐EintragfürdieVorlage:Haupt‐KategorieFür die Vorlage index_haupt_kategorie wurde im Header folgender Style definiert:
<style type="text/css" media="screen">
#content_right {
width:400px;
background‐color:#FFF;
}
</style>
Gemäss der Vererbungs‐Regeln wird mit diesem Script gesorgt, dass die äusserste Rechte Box mit
dem Stimmungsbild die notwendige Breite von 400px erhält und somit die Website‐Struktur aufrecht
erhalten wird. Dies ist nötig das die Box content_middle_right in der Haupt‐Kategorie nicht mehr
gezeigt wird und daher ausgeblendet wird.
5.10.3. SpeziellerSheet‐EintragfürdieVorlage:HomepageFür die Vorlage index_homepage wurde auch Sicherheitsgründen die Box #content_main nochmals
konfiguriert und positioniert. Je nach Inhalten kann daher die Breite, Höhe, Hintergründe etc. für die
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 19 von 26
Startseite individuell verändert werden. Zudem kann mit dieser Box die technische Möglichkeit
gegeben werden, zusätzlich die linken oder rechten Stimmungsbilder einzublenden.
Das Script im Header‐Tag:
<style type="text/css" media="screen">
#content_main {
width:1000px;
background‐color:#FFF;
display:block;
clear:both;
}
</style>
6. Farb‐Tabellen
6.1. Homepage
6.2. Header
6.3. Body
6.4. Navigation
6.5. Footer
7. Launch
7.1. Meta‐AngabenDa die Domain der Website bereits 8 Jahre existiert, ist diese im Ranking unter dem Suchbegriff rene
hirt an oberster Stelle. Die Website wurde wegen dem Provisorium (Tagebuch René Hirt) bereits im
November im Webmaster‐Tool von google angemeldet. Zur Verifikation gilt folgender Meta:
<meta name="google‐site‐verification" content="GKv‐ttHp8dAgY2b4L2or1kfAt0zigSEXnCEydxHzqf4"
/>
7.1.1. AllgemeineMeta‐AngabenMeta‐Name Inhalt
Description René Hirt's Persönliche Website ‐ Das eigene Tagebuch‐Blog mit täglich neuen Einträgen ‐ Lernen sie die Person René Hirt aus Bern, Schweiz kennen.
Keywords René Hirt, Website, Blog, persönlich, Erlebnisse, Geschehen, Zollikofen, Bern, Schweiz, It's me, Lebenslauf, Charaktere, Kontakt, Ausbildung, ICT, Wissen, Referenzen, Kaufmann, Kenntnisse, Marketing, Verkauf, Technisch, Hobbies, Hobby, Schach, Musik, Filme, Movies, Lesen, Schreiben, Sport, Fitness, Wing, Chun, Kung Fu, Ice, Hockey, Formel Eins, Play Station, PC, Games, MMORPG, Linkliste, Einkaufsbummel, Gaming, Fazit, Konzept, Dokumente, Design, Skizzen
Robots Index, follow, all
Content‐language De, deutsch, german
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 20 von 26
Revisit‐after 15 days
Author René Hirt
Publisher René Hirt
Copyright René Hirt
Date 2012‐12‐07 Tabelle 10: Allgemeine Meta‐Angaben
7.1.2. Meta‐AngabennachDublinCoreMeta‐Name Inhalt
DC.title René Hirt's Website ‐ Die persönliche Website von René Hirt mit eigenem Tagebuch
DC.creator René Hirt
DC.subject Personifizierte Website mit Tagebuch, Hobbies, Ausbildung, Interessen von René Hirt
DC.description René Hirt's Persönliche Website ‐ Das eigene Tagebuch‐Blog mit täglich neuen Einträgen ‐ Lernen sie die Person René Hirt aus Bern, Schweiz kennen.
DC.publisher René Hirt
DC.contributor René Hirt
DC.date 2012‐12‐07
DC.type Text
DC.format Text/html
DC.identifier http://www.rene‐hirt.ch
DC.source René Hirt, Autor, Wikipedia
DC.language De
DC.coverage Bern, Schweiz, Switzerland
DC.rights Alle Rechte liegen beim Autor Tabelle 11: Meta‐Angaben nach Dublin Core
7.2. Provider‐AngabenundLoginsHost‐Provider Hostpoint, St. Dionysstrasse 31, 8640 Rapperswil‐Jona, Schweiz
URL‐Provider http://www.hostpoint.ch
Provider‐Hotline 0844 040404 Support und Verkauf
Provider Online Support Support.hostpoint.ch
Login Control Panel Benutzername Für die Öffentlichkeit gesperrt.
Passwort
E‐Mail‐Account Email‐Adresse
Posteingangs‐Server
Postausgangs‐Server
Benutzername
Passwort
Login Open‐Xchange Benutzername
Passwort
Login Webserver Server‐Adresse
Protokoll
Benutzername
Passwort
Portnummer
Verschlüsselung
Wordpress Applikations‐Art
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 21 von 26
Applikations‐Name
URL
Website
Version
Verzeichnis
Datenbank
Datenbank‐Benutzer
Datenbank‐Passwort
Wordpress‐Testserver URL
Verzeichnis
Host
Domain‐Registratur Registrierungsstelle
URL
User‐ID
Passwort
Domain‐Name
Domain‐Halter
Technischer Kontakt
Name‐Server
IPv6
Google Webmaster‐Tool Benutzername
Passwort Tabelle 12: Provider‐Angaben und Logins
7.3. Suchmaschinen‐AnmeldungenDie erste Anmeldung wurde bereits Mitte Oktober 2012 über das Webmaster‐Tool von google
vorgenommen. Alle anderen wichtigen Suchmaschinen haben daher die Website innerhalb 3 Tagen
indiziert.
7.4. WartungsleitfadenWartungsfenster Arbeiten
Täglich Tagebuch‐Einträge verfassen. Kommentare verwalten. Kontakt‐Anfragen bearbeiten.
Wöchentlich Technische Korrektheit und Suchmaschinen‐Ranking überprüfen.
Monatlich Zugriffs‐Statistiken analysieren. Schlecht besuchte Seiten analysieren und für die Jahreswartung vormerken. Backup der Website vornehmen.
Jährlich Schlecht besuchte Seiten entsorgen oder Massnahmen zur Förderung suchen. Website‐Konzept auf ihren Erfolg überprüfen und eventuelle Massnahmen festlegen wie Fein‐ und Design‐Konzept überarbeiten.
Tabelle 13: Wartungsleitfaden
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 22 von 26
8. Anhänge
8.1. Wordpress‐GrundeinstellungenDas Wordpress dient nur zur Sammlung des Block‐Eintrags. Diese wird am Launchtermin in die
Homepage integriert. Entsprechend können Feineinstellungen und Konfigurationen abgeändert
werden. Sie dient aber zurzeit als Überganglösung der alten Website, da die alte aus dem Jahr 2004
zu kindisch aufgebaut und designet war.
Die Datenbank‐Angaben sind in der Tabelle: Provider‐Angaben und Logins zu finden.
Es wird nur eine einzige Seite im Wordpress dargestellt. Weitere Seiten existieren nicht. Dafür wurde
das Archiv aktiviert und der Benutzer kann über dieses Archiv auch ältere Tagebucheinträge
besichtigen. Generell wurde das Wordpress Design Twenty Eleven Version 1.4 mit leichten
Abänderungen benutzt. Die massgebenden Konfigurationen sind auch entsprechend in der Sparte
Design geändert worden.
Kategorie Unter‐Kategorie Eigenschaften
Seitentitel Blogtitel René Hirt’s Tagebuch
Untertitel Das aktuelle Geschehen und Erlebnisse während des Tages... ‐ Die Persönliche Website
Headertext anzeigen Hacken setzen
Farben Farbschema Hell
Textfarbe in der Kopfzeile
#9041af
Hintergrundfarbe #d4d0b7
Linkfarbe #8f0072
Layout Layout Inhalt links
Kopfbild Hochgeladen crooped‐tagebuch_wp.jpg
Hintergrundbild Hintergrundbild Kein Bild
Navigation Primäres Menü Fake
Statische Startseite Startseite zeigt Punkt in Dein letzter Beitrag
Widgets Allgemeine Sidebar Letzte Artikel, Anzahl: 5
Letzte Kommentare, Anzahl: 5
Archive, Zeige alle Artikel‐Zähler
Links, Ronny’s Linkliste, sortiert nach Link‐Wertung,, Zeige Link‐Grafik, Zeige Link‐Namen, Zeige Link‐Beschreibung.
Kalender
Fusszeile, erster Bereich Letzte Artikel, Anzahl: 3
Fusszeile, zweiter Bereich
Letzte Kommentare, Anzahl: 3
Fusszeile, dritter Bereich
Archive, Als Auswahlbox darstellen, Zeige Artikel‐Zähler
Menüs Primäres Menü Fake, keine Hacken wählen
Editor Kopfzeile Header.php (verändertes Script)
Einstellungen Wordpress Adresse http://www.rene‐hirt.ch/wordpress
Seiten‐Adresse http://www.rene‐hirt.ch (im index.php geändert)
E‐Mail‐Adresse renehirt@rene‐hirt.ch
Zeitzone UTC+1
Datumsformat 2. Monat Jahrzahl
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 23 von 26
Zeitformat 24:00
Woche beginnt am Montag
Blockseitenanzahl 8 Artikel
Suchmaschinen Dürfen Seite indexieren
Links Siehe Abbildung Abbildung 1: Wordpress – Links und Einstellungen Tabelle 14: Wordpress‐Einstellungen
Generell wurden die Links mit dem Target _blank konfiguriert, damit ein neues Fenster geöffnet
wird. Die Ausnahme bildet der Link Administration, der im demselben Fenster geöffnet werden soll
wie die Hauptseite. Als Target wurde _none gewählt. Die Bewertung wurde so eingestellt, um die
Reihenfolge der Links zu gewährleisten. Ein Benutzer wird aber keine Bewertung abgeben können.
Abbildung 8: Wordpress ‐ Links und Einstellungen
8.2. EinbindungdesWordpressindieHomepageNach einigen Versuchen und Recherchen in Foren habe ich mich entschlossen, das Wordpress mittels
iframe‐Tag auf der Homepage einzubinden. Dagegen spricht der Umstand, dass Frames heutzutage
eher verpönt sind. Der Vorteil ist aber, dass das Wordpress ohne massgebende und einschneidende
Veränderungen integriert werden kann und daher einige technische Probleme löst. Zudem ist auf der
Website und in Wordpress jeweils ein JavaScript implementiert, dass den Benutzer erlaubt, sehr
rasch nach oben zu scrollen, falls er sich auf der Website verliert.
Ein weiterer Gesichtspunkt ist der Umstand, dass generell die Homepage an die Person René Hirt im
Vordergrund steht und nicht das Tagebuch! Daher sind die Meta‐Angaben der Homepage
massgebend und nicht die Meta‐Tags in Wordpress. Somit ist es unwichtig, ob die Meta‐Angaben im
iframe gelesen werden können oder nicht. Als Schutz vor Spam kann dies sogar ein Vorteil bedeuten.
Nach der Boxe content_left wurde dieser Code geschrieben:
<iframe src="http://www.rene‐hirt.ch" name="Wordpress‐Blog‐Tagebuch" width="950px"
height="1000px" frameborder="0" marginheight="0" marginwidth="0" hspace="0" align="left"
vspace="0"><p>Leider kann ihr Browser keine iFrames darstellen</p></iframe>
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 24 von 26
Dieser Code ist allerdings ein Provisorium für den Test‐Server. Bei dem definitiven Launch werden
noch Angleichungen an den Server gemacht. Das Wordpress wird über die Datei index_w.php
(ehemals Test‐Server) gestartet und als Inhalt des Tag iframe wird eine eigene Homepage
index_i.htm gestaltet, falls der Browser das iframe nicht darstellen kann.
8.3. Wordpress‐Test‐ServerUm den Style vom Wordpress‐Tagebuch in die Website einbinden zu können, wurde auf dem Test‐
Server der Workstation im Betrieb das Wordpress‐Modul inkl. Datenbank mit dem Stand von
13.11.2012 gespiegelt und lokal integriert. Die entsprechenden Daten befinden sich im Verzeichnis
‚Datenbank‘. Lokal wurde ein Benutzer anhand der Tabelle 7.2 – Provider‐Angaben und Logins
erstellt (renehir_wp260).
ACHTUNG: Als Host wurde nicht der Pfad von Hostpoint angegeben sondern dieser wurde auf
‚localhost‘ gesetzt. Dieser wird in der Datei wp_config.php in der Zeile 30 von define('DB_HOST',
'renehir.mysql.db.internal'); auf define('DB_HOST', 'localhost'); geändert.
Das Tagebuch wird mit der URL http://localhost/renehirt/index_w.php aufgerufen.
8.4. Style‐Sheet‐ÄnderungeninWordpress
Abbildung 9: Style ‐ Wordpress
Unter Design > Editor > Stylesheet (style.css) im Bereich Structure in den Wordpress‐Konfigurationen
wurden folgende Styles verändert:
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 25 von 26
Tag/Objekt Original‐Code Neuer Code
Body padding: 0 2em; padding: 0;
#page margin: 2em auto; max‐width: 1000px;
margin: 0 auto; max‐width: 1000px; margin‐top:‐50px;
#branding hgroup margin: 0 7.6%; margin: 0 0;
#access div margin: 0 7.6%; margin: 0 0;
#content margin: 0 34% 0 7.6%; width: 58.4%;
margin: 0 34% 0 0; width: 58.4%;
#primary margin: margin: 0 ‐26.4% 0 0; margin: 0 ‐40% 0 0;
#secundary width: 18.8%; width: 25%; Tabelle 15: Stylesheet Wordpress ‐ Neue Codes
Generell wurde der Code so verändert, dass der linke Abstand von Wordpress bündig zu
content_left, also ohne Zwischenraum, ist. Bei #page {margin‐top:‐50px;} soll der Abstand der Haupt‐
Überschrift zur Haupt‐Navigation der Website stimmig eingestellt werden können.
Um das Wordpress von der Raumaufteilung besser der Website anzugleichen wurden auch die
Objekte #primary und #secundary verändert. Somit passt die Aufteilung besser zum Header und
verursacht einen natürlichen goldenen Schnitt.
Das Original‐Script wurde im Verzeichnis Backup gesichert.
8.5. Linkliste
8.5.1. Thema:font‐faceLinks Bemerkung
http://css3‐html5.de/css3‐web‐fonts/ Einfach deutsche Anleitung mit Film
http://de.selfhtml.org/css/eigenschaften/schrift_datei.htm
http://forum.cmsmadesimple.de/viewtopic.php?id=1265
http://www.kupix.de/nc/news1/font‐face‐im‐firefox‐funktioniert‐nicht.html
.htaccess Eintrag
Tabelle 16: Links ‐ Font‐Face
8.5.2. ScrolltotopLinks Bemerkungen
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm Anleitung auf Englisch
Tabelle 17: Links ‐ Scroll to top
8.5.3. CascadingStyleSheetsundDesignLinks Bemerkungen
http://www.css4you.de/
http://blogdrauf.de/qualitative‐schriftarten‐sammlung/809/ Schriftarten
http://border‐radius.com/ Border‐Radius‐Generator
http://farbwolke.de/top‐3‐farbharmonie‐tools/ Farbmodelle
http://mudcu.be/sphere/#config={%22hsl%22:{%22H%22:271.75340486007156,%22S%22:100,%22L%22:21.563273908200372},%22theme%22:%22dark%22,%22quantize%22:0,%22harmony%22:%22Analogous%22,%22vision%22:%22Normal%22,%22space%22:%22RYB%22,%22top%22:62,%22left%22:50,%2
Alternatives Farbmodel
rene‐hirt.ch Website‐Dokumentation 2.Oktober2012
Website‐Dokumentation_Open.docx Version 0.3 Seite 26 von 26
2diameter%22:500,%22scale%22:3,%22dot%22:false}
Tabelle 18: Links ‐ CSS und Design
top related