13
Dokumentation Webseite für die Auszubildenen Abteilung Nürnberg, 7. Februar 2014 Version: 1 von: Matthias Ennen

Webseiten dokumentation

Embed Size (px)

Citation preview

Page 1: Webseiten dokumentation

Dokumentation

Webseite für die Auszubildenen Abteilung

Nürnberg, 7. Februar 2014

Version: 1von: Matthias Ennen

Page 2: Webseiten dokumentation

Inhaltsverzeichnis ............................................................................ 1

Tagesablaufplan Tag 1 ..................................................................................... 2 - 3 Tag 2 ..................................................................................... 4 Tag 3 ..................................................................................... 5 Tag 4 ..................................................................................... 6 Tag 5 ..................................................................................... 6 Tag 6 ..................................................................................... 6 Tag 7 ..................................................................................... 7 Tag 8 ..................................................................................... 7 Quellcode Beschreibung Navigation .......................................................................... 8 Cycle ..................................................................................... 9 PDF Viewer ......................................................................... 10 Countup ............................................................................... 11 - 12

Inhaltsverzeichnis

1

Page 3: Webseiten dokumentation

Tag 1

Ideensammlung Inspirationssuche und erstellen erster Scribbles

Tagesablaufplan

2

Page 4: Webseiten dokumentation

Tagesablaufplan

3

Page 5: Webseiten dokumentation

Tag 2

Umsetzung erster Ideen in Photoshop

Tagesablaufplan

4

Page 6: Webseiten dokumentation

Tag 3

Zweites Design in Photoshop erstellt

Tagesablaufplan

5

Page 7: Webseiten dokumentation

Tag 4 Zweites Design in HTML übertragen Teil 1

Tag 5 Navigation erstellt

Tag 6 Lightbox erstellt

Tagesablaufplan

6

Page 8: Webseiten dokumentation

Tag 7 Fehlerbehebung Schönheitskorrektur

Tag 8

Timer erstellt der Anzeigt wie lange man im Bertrieb angestellt ist.

Tagesablaufplan

7

Page 9: Webseiten dokumentation

Quellcode Beschreibung

Navigation

Hier wird in einer Unordert list eine Baumstruktur erstellt die dann mit hilfe von css dargestellt wird und ein Dropdown Menü erstellt.

Quellcode Beschreibung

8

Page 10: Webseiten dokumentation

Cycle

Hier werden die beiden Bilder definiert zwischen, welche sich abwechselnd einblenden lassen.

Dies ist das Script wo die bilder durchgewechselt werden mit hilfe der Cycle Funtionfx: steht für den übergang der beiden Bilder.delay:steht für die Zeit die zwischen einem wechsel vergehen soll bevor der nächste wechsel eintritt.

Quellcode Beschreibung

9

Page 11: Webseiten dokumentation

PDF Viewer

Der PDF viewer wurde mit hilfe der Seite Slideshare erstellt aufdieser kann man seine pdf dateinhochladen und die seite gibt einem dann ein Iframe code den man in die Homepage einbauen muss und gegebenfalls optimieren.

Hier wird das iframe in den html code eingeladen

Hier werden Abstände sowie größe des iframes vergeben und an die Seite angepasst.

Quellcode Beschreibung

10

Page 12: Webseiten dokumentation

CountUp

Hier wird der Counter ins HTML eingebettet.

In den folgenden Zeilen wird gezeigt wie der Counter Arbeitet bei var werden variablen angelegt die angeben auf welches datum zurückgerechnet werden soll

bei Jahre wird solange hochgezählt vom angegebenem jahr bis zum heutigen

Bsp.:

Das angegebenes Jahr wäre 2010 würde es jetzt solange hochrechnen bis es das heutige Jahr 2014 erreicht hat also 4 mal, diese 4 jahre werden nun angezeigt.

Würde das Datum in der Zukunft liegen würde er solange warte bis das datum in der Vergangenheit liegt und erst an anfangen zu zählen solange es aber in der Zukunft ist werden nur 0 ausgegeben

mit den restlichen Daten wie Monat, Tag, Stunde, Minute, Sekunde verhält es sich genau gleich.

Quellcode Beschreibung

11

Page 13: Webseiten dokumentation

Nachdem im letzten schritt alles gezählt wurde, wird es hier ausgegeben

liegt das Datum in der Zukunft wird eine 0 pro Datenfeld ausgegeben liegt es in der Vergangenheit wird der Wert Angelegt wie weit es sich in der Vergangenheit befindet angezeigt.

Die Abbildung der Daten sollte nun so aussehen

Quellcode Beschreibung

12