Website Dokumentation. rene hirt.ch

Transkript

1 Website Dokumentation rene 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, hirt.ch

2 1. Verzeichnisse 1.1. Inhaltsverzeichnis 1. Verzeichnisse Inhaltsverzeichnis Abbildungsverzeichnis Tabellenverzeichnis Planung Ziele und Inhalte Strategisches Konzept Produktionshandbuch Realisierung Benutzte Hardware Benutzte Software Test Server Einstellungen von Dreamweaver Speziell verwendete Scripts Script für die Schriftart: Lucida Calligrafy JavaScript für das Hochscrollen der Website Border Radius Fein Konzept Abänderungen Homepage Text Definition Navigations Architektur Design Konzept Abänderungen Content_left Content_middle Sub Navigation Footer Verzeichnisstruktur Lokale Verzeichnisstruktur Host Verzeichnisstruktur Style Guide DIV Identifikation Site Identifikation Website Dokumentation_Open.docx Version 0.3 Seite 1 von 26

3 5.3. Body Header Navigation Footer Inhalt HTML Tags Bildformatierung Style Sheets Allgemeine Informationen und Sheets Spezieller Sheet Eintrag für die Vorlage: Haupt Kategorie Spezieller Sheet Eintrag für die Vorlage: Homepage Farb Tabellen Homepage Header Body Navigation Footer Launch Meta Angaben Allgemeine Meta Angaben Meta Angaben nach Dublin Core Provider Angaben und Logins Suchmaschinen Anmeldungen Wartungsleitfaden Anhänge Wordpress Grundeinstellungen Einbindung des Wordpress in die Homepage Wordpress Test Server Style Sheet Änderungen in Wordpress Linkliste Thema: font face Scroll to top Cascading Style Sheets und Design Website Dokumentation_Open.docx Version 0.3 Seite 2 von 26

4 1.2. Abbildungsverzeichnis Abbildung 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 Abbildung 7: Div Identifikation mit Höhen Abbildung 8: Wordpress Links und Einstellungen Abbildung 9: Style Wordpress Tabellenverzeichnis Tabelle 1: Benutzte Hardware... 4 Tabelle 2: Benutzte Software... 5 Tabelle 3: Neue Text Definition... 9 Tabelle 4: Neue Boxen im Footer Tabelle 5: Lokale Verzeichnis Strukturen Tabelle 6: Host Verzeichnis Struktur Tabelle 7: Div Identifikation Tabelle 8: Site Identifikation Tabelle 9: Style Sheets Tabelle 10: Allgemeine Meta Angaben Tabelle 11: Meta Angaben nach Dublin Core Tabelle 12: Provider Angaben und Logins Tabelle 13: Wartungsleitfaden Tabelle 14: Wordpress Einstellungen Tabelle 15: Stylesheet Wordpress Neue Codes Tabelle 16: Links Font Face Tabelle 17: Links Scroll to top Tabelle 18: Links CSS und Design Planung 2.1. Ziele und Inhalte Die 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 Strategisches Konzept Der 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 Website Dokumentation_Open.docx Version 0.3 Seite 3 von 26

5 ä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 Produktionshandbuch Der 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. Benutzte Hardware Umgebung Private Workstation Berufliche Workstation Web Host Internetanbindung Tabelle 1: Benutzte Hardware Merkmale Für die Öffentlichkeit gesperrt. Der bereits bestehende Web Host hat folgende Konfigurationen gemäss Abbildung 1: Web Host Hostpoint, Stand 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. Website Dokumentation_Open.docx Version 0.3 Seite 4 von 26

6 Abbildung 1: Web Host Hostpoint 3.2. Benutzte Software Anwendung Software Version FTP Client WinSCP HTML Editor Adobe Design Premium CS5: Dreamweaver 5.5 Notepad CSS Editor Adobe Design Premium CS5: Dreamweaver 5.5 Notepad Gestaltung Adobe Design Premium CS5: Fireworks 5.5 Bildbearbeitung Adobe Design Premium CS5: Photoshop 5.5 Blog Wordpress Analyse Awstats Unbekannt Host GUI Hostpoint Control Panel Unbekannt Projektplanung Ganttproject Mindjet MindManager Pro Novell GroupWise Outlook 2007 Unbekannt Acrobat 9 Professional Betriebssystem Microsoft Windows 7 SP1 Enterprise SP1 Test Server WampServer 2.2 Apache PHP phpmyadmin MySQL Tabelle 2: Benutzte Software Website Dokumentation_Open.docx Version 0.3 Seite 5 von 26

7 Test Server Einstellungen von Dreamweaver 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. Website Dokumentation_Open.docx Version 0.3 Seite 6 von 26

8 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. Website Dokumentation_Open.docx Version 0.3 Seite 7 von 26

9 3.3. Speziell verwendete Scripts Script für die Schriftart: Lucida Calligrafy Die Schriftart Lucida Calligrafy wird nicht in jedem Betriebssystem unterstützt. Daher wird über den CSS Befehl folgendes Script face { } font family:'lucida Calligraphy'; src: local(''); src: url(' hirt.ch/tamplates/lucida calligrafy.eot') format('eot'), url(' 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 JavaScript für das Hochscrollen der Website Von 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=" <script type="text/javascript" src="scripts/scrolltopcontrol.js"> /*********************************************** * Scroll To Top Control script Dynamic Drive DHTML code library ( * This notice MUST stay intact for legal use * Visit Project Page at 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" />', Website Dokumentation_Open.docx Version 0.3 Seite 8 von 26

10 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 Border Radius Die 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 borderradius 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 Fein Konzept Abänderungen Homepage Um 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 Text Definition Die Schriftart Lucida Calligrafy hat sich in den Screen Test für die Navigation und Sub Navigation nicht bewährt. Auch funktionierte diese Schriftart mit 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 H1 Tahoma, Geneva, 14px, letter space:normal content_middle_right Navigation A Tahoma, Geneva, 24px, letter space:1.5px Sub Navigation A Tahoma, Geneva, 16px, letter space:1.5px Tabelle 3: Neue Text Definition 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. Website Dokumentation_Open.docx Version 0.3 Seite 9 von 26

11 Navigations Architektur Die 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 zeigt Design Konzept Abänderungen Content_left Die 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 Content_middle Damit 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 Sub Navigation Das 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 Footer Damit die Inhalte im Footer besser unterteilt werden können wurden hier zusätzliche Boxen generiert: Boxen Name Inhalte Float Position Masse ing footer_top Top Link Left Direkt nach der Boxe footer, Breite: 50px. die alle Boxen einschliesst. footer_copy Copyright und Left Nach der Boxe footer_top Breite: 150px. Design footer_navigation Haupt Menü Left Nach der Boxe footer_copy Breite: 400px. footer_links Meta Links Left Nach der Boxe Breite: 390px. footer_navigation Tabelle 4: Neue Boxen im Footer 4. Verzeichnisstruktur 4.1. Lokale Verzeichnisstruktur Hauptverzeichnis Unterverzeichnis Eigenschaften Altes Projekt Diverse Hier sind alle Informationen über die alten Projekte der Website rene hirt.ch abgespeichert. hirt.ch Die Online Dateien der Website aus dem Jahre Website Dokumentation_Open.docx Version 0.3 Seite 10 von 26

12 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 Website Dokumentation_Open.docx Version 0.3 Seite 11 von 26

13 Kapitel 4.2. ersichtlich. Vorlagen Diverse Vorlagen und Hilfsmittel zur Erstellung des Konzeptes, Dokumentation und der Website. Tabelle 5: Lokale Verzeichnis Strukturen 4.2. Host Verzeichnisstruktur Diese 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 Tabelle 6: Host Verzeichnis Struktur Website Dokumentation_Open.docx Version 0.3 Seite 12 von 26

14 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 Breite: 1000px anderen Boxen meta_link #8F0072 None Direkt nach dem content_body und vor dem Breite: 1000px Höhe: 30px header 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. Website Dokumentation_Open.docx Version 0.3 Seite 13 von 26

15 content_middle_right content_right #FFFFFF (#CCCCCC) #FFFFFF (#999999) Right Right Direkt nach dem content_middle und vor content_right Vor dem content_middle_right oder content_middle und als Abschluss des content_main footer #8F0072 Clear Direkt nach dem content_middle Tabelle 7: Div Identifikation Hier ist das höhenbereinigte Gestaltungsraster: Breite: 200px Höhe: skalierbar. Breite: 200px Höhe: skalierbar. Breite: 1000px Höhe: 50px. Abbildung 7: Div Identifikation mit Höhen 5.2. Site Identifikation Fü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 Website Dokumentation_Open.docx Version 0.3 Seite 14 von 26

16 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 Website Dokumentation_Open.docx Version 0.3 Seite 15 von 26

17 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. Website Dokumentation_Open.docx Version 0.3 Seite 16 von 26

18 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 Style Sheets Allgemeine Informationen und Sheets Auf 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 integriert mit den folgenden Aufgaben: Website Dokumentation_Open.docx Version 0.3 Seite 17 von 26

19 Style Sheet Aufgabe/Eigenschaft Boxen Main.css Ist das erste Style Sheet mit der Verlinkung zu den anderen Sheets. Beinhaltet die generellen #content_body #content_main Tags Definitionen und Gesamt Struktur der Website. Print.css Sorgt für die Druck Ausgabe der Website Alle Meta_link.css Formatiert den Meta Link Bereich und die #meta_link Header Navigation. Header.css Ist verantwortlich für den Header Bereich. #header Navigation.css Sorgt für die Formatierung und die #navigation Positionierung der Haupt Navigation. Content_left.css Positioniert die erste Box im Inhalts Bereich. #content_left Sub_navigation.css Definiert und Positioniert die Unter #sub_navigation Navigation mit ihren Links, Boxen und Stimmungsbildern. Content_middle.css Positioniert die Haupt Box für die Inhalte. #content_middle Content_middle_right.css Sorgt für die Positionierung und Formatierung #content_middle_right der zusätzlichen Inhalte in den Unter Kategorien. Content_right.css Positioniert die Stimmungsbilder auf der rechten Seite der Website. #content_right Footer.css Tabelle 9: Style Sheets Zeigt sich Verantwortlich für den Schlussbereich der Website inkl. Links. #footer #footer_top #footer_copy #footer_navigation #footer_links 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 Spezieller Sheet Eintrag für die Vorlage: Haupt Kategorie Fü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 Spezieller Sheet Eintrag für die Vorlage: Homepage Fü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 Website Dokumentation_Open.docx Version 0.3 Seite 18 von 26

20 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 Angaben Da 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" /> Allgemeine Meta Angaben Meta 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 Website Dokumentation_Open.docx Version 0.3 Seite 19 von 26