Einführung in die Internet-Programmierung. WebDesign, HTML, CSS, JavaScript, SEO

Inhaltsverzeichnis

Abbildungsverzeichnis

Abkürzungsverzeichnis

1 Einleitung
1.1 Einführung in das Thema
1.2 Problemstellung und Ziel dieser Arbeit .
1.3 Aufbau der Arbeit

2 Grundlagen
2.1 Vorüberlegungen
2.2 AIDA-Prinzip
2.3 Usability
2.4 Ergonomie
2.5 SEO
2.6 HTML Unterschiede
2.7 Rechtliches

3 Aufbau der Webseite
3.1 Verwendete Hilfswerkzeuge
3.2 Verzeichnisstruktur
3.3 Menüstruktur
3.4 Seitenstruktur

4 Programteile der Webseite
4.1 PHP
4.2 HTML
4.3 CSS
4.4 JavaScript
4.5 URL Rewrite
4.6 Social Media Integration

5 Bewertung
5.1 Zusammenfassung
5.2 Kritische Würdigung
5.3 Ausblick
5.4 Erfolgsfaktoren

Literaturverzeichnis

Abbildungsverzeichnis

1 PHP Codebeispiel Definition der Meta-Elemente für die Seite Reise- ziele und Einbindung dieser

2 PHP Codebeispiel Definition der Meta-Elemente für die Startseite und Einbindung dieser

3 HTML Codebeispiel der Startseite

4 CSS Codebeispiel der globalen Definitionen

5 CSS Codebeispiel des Menüs

6 CSS Codebeispiel der Inhalts

7 HTML Codebeispiel Buchungsformular

8 JavaScript Codebeispiel Buchungsformularüberprüfung

9 JavaScript Codebeispiel Buchungsformular Pflichtfeldüberprüfung

10 JavaScript Codebeispie Buchungsformular Pflichtfeldüberprüfung und Fehlerausgabe

11 JavaScript Codebeispiel Buchungsformular Bestätigungausgabe

12 .htaccess Codebeispiel zur URL Umschreibung

13 PHP Codebeispiel Konfigurationskonstante für URL Umschreibung

Abkürzungsverzeichnis

Abbildung in dieser Leseprobe nicht enthalten

1 Einleitung

1.1 Einführung in das Thema

Eine Webseite ist heutzutage unabdingbar, insbesondere für Unternehmen, Freiberufler und Selbstständige. Denn mit einer Webseite präsentieren sie sich im Internet, stellen dabei sich und ihre Produkte und Dienstleistungen vor. Damit können neue Kundenbeziehungen hergestellt und neue Umsatzwege geschaffen werden.

1.2 Problemstellung und Ziel dieser Arbeit

Die Problemstellung dieser Arbeit ist, dass keine Webseite für die Präsentation von un- ternehmenseigenen Produkten vorliegt. Des Weiteren sind keine professionellen Hilfs- werkzeuge für die Erstellung einer Webseite vorhanden. Das Ziel ist die Konzeption ei- ner Webseite ohne professionelle Hilfswerkzeuge wie zum Beispiel eines Content Ma- nagement System (CMS)¹ oder einem speziellen Editor zum bequemen Erstellen der Webseite nach den standardisierten Vorgaben der World Wide Web Consortium (W3C) aufzubauen. Dabei müssen Unterseiten erstellt werden, in denen Informationen über das Unternehmen, Reiseziele, Unterkünfte, Busse, Preise und Buchungsmöglichkeiten abgerufen werden können.

1.3 Aufbau der Arbeit

Im Grundlagenteil wird auf einige wichtige Vorüberlegungen eingegangen, die vor der Erstellung der Webseite gemacht werden müssen. Im Hauptteil sind die Strukturen der Webseite und die verwendeten Hilfswerkzeuge zur Erstellung der Webseite beschrieben. Der Schluss beinhaltet eine Zusammenfassung, eine kritische Würdigung sowie einen Ausblick auf weitere Optimierungen. Die erreichten und erkennbaren Erfolgsfaktoren werden im Schlussteil aufgeführt.

2 Grundlagen

2.1 Vorüberlegungen

Bevor mit der Programmierung der Webseite begonnen werden kann, sind wichtige Vorüberlegungen anzustellen. Die Zielgruppe, das Design und der Aufbau der Webseite sowie die rechtlichen Grundlagen müssen im Vorfeld klar definiert sein. Das ist deshalb so wichtig, da sonst zu viel Zeit in die Entwicklung der Webseite gesteckt wird, welche nicht den Vorstellungen entspricht oder ihren Zweck verfehlt. Dabei wurde die Zielgruppe im Hinblick auf die Altersgruppe nicht eingeschränkt.

2.2 AIDA-Prinzip

Damit die Webseite und die darauf angebotenen Produkte und Dienstleistungen den Kunden zum Verweilen auf der Webseite einladen und sein Interesse wecken, ist es wichtig, diese interessant und differenziert zu den Wettbewerbern zu gestalten. Wenn Produkte und Dienstleistungen direkt über die Webseite bezogen werden können, ist das AIDA-Prinzip^{2 3 4} ein wichtiges Instrument dafür. Je länger ein Besucher auf der Webseite verweilt und sich informiert, desto höher ist die Chance, dass er den Wunsch äußert, dieses Produkt oder Dienstleistung zu erwerben. Ebenso ist es möglich, dass er zum jetzigen oder späteren Zeitpunkt eine Bestellung auslöst.

2.3 Usability

Für den Erfolg einer Webseite ist es von entscheidender Bedeutung, dass sich die Be- sucher auf dieser wohlfühlen. Das heißt, dass die potentiellen Kunden der Webseite auf alle öffentlich zugänglichen Unterseiten navigieren können. Die letzte Ebene muss in maximal 4 - 5 Klicks erreicht werden können. Außerdem sind zu lange Ladezeiten zu vermeiden, ansonsten könnte der Besucher die Webseite verlassen. Da blinde Men- schen die Webseite ebenfalls aufrufen können, ist es wichtig, dass Links und Bilder mit entsprechenden Tags⁵ versehen werden. Die Webseite muss seriös wirken und frei von Fehlern sein. Außerdem ist die Menüstruktur so zu wählen, dass diese klar und in verständlicher Weise geschrieben und angeordnet ist. Beim Klick auf den jeweiligen Bereich muss der Besucher auf die zu erwartende Unterseite gelangen.

2.4 Ergonomie

Die Ergonomie einer Webseite ist bedeutsam für das längere Verweilen auf dieser. Denn ein schwer lesbarer Text oder eine unglücklich gewählte Farbkombination mit schlechtem Kontrast, der die Augen zu sehr belastet, lässt den Besucher die Webseite schnell wieder verlassen. Klar verständlicher Text, orthografisch und grammatikalisch korrekt mit einer begreiflichen und aussagekräftigen Navigation verlängern die Aufenthaltsdauer des Besuchers. Ein gut gewählter Kontrast mit thematisch passenden Farben und Bildern verlängern ebenfalls die Aufenthaltsdauer.

2.5 SEO

Die schönste Webseite ohne Besucher kann nicht erfolgreich sein. Daher ist es für je- de Webseite - insbesondere für kommerzielle - wichtig, dass diese bei Eingabe von bestimmten Suchbegriffen in die Suchmaschine, dort auch gefunden wird. Mit Search Engine Optimization (SEO)^{6 7} lässt sich dies bewerkstelligen. Dabei sind einige wich- tige Punkte beim Aufbau der Webseite zu beachten. Aussagekräftige Titel und Be- schreibungen, welche eine kurze Zusammenfassung über die jeweilige Unterseite und das Thema wiedergeben sowie eine dezente Verwendung von Überschrift-Tags⁸ ver- helfen der Auffindbarkeit der Seite in der Suchmaschine. Die Ladezeit der Websei- te, Häufigkeit der Keywords⁹ im Text sowie Einzigartigkeit und Themenrelevanz des Textes sind ebenfalls ausschlaggebende Kriterien für ein erfolgreiches SEO. Der Inhalt muss vorrangig für den Besucher und nicht für die Suchmaschine geschrieben werden, denn dieser soll schließlich dem Besucher einen Mehrwert bieten.

2.6 HTML Unterschiede

Hyper Text Markup Language (HTML) ist eine textbasierte Auszeichnungssprache. Die Definition wird vom W3C¹⁰ vorgegeben. Der Aufbau von HTML ist sehr einfach gehalten, dabei sind die Unterschiede in den HTML-Versionen 4 und 5 zu beachten. HTML 4 ist der derzeitige Standard und wird von den Webbrowsern richtig darge- stellt. HTML 5 mit allen Funktionen und Tags wird derzeit von den meisten Webbrow- sern nicht richtig interpretiert. Auch beim derzeitigen Standard, bei Cascading Style Sheet (CSS) 2 gibt es Eigenheiten, sodass diese nicht von allen Webbrowsern richtig angezeigt werden. Meist werden die standardisierten Elemente korrekt visualisiert, die erweiterten allerdings nicht.

2.7 Rechtliches

Jede Webseite, dessen Inhaber einen Wohnsitz innerhalb Deutschland hat, muss sich an deutsches geltendes Recht halten. Nach §5 TMG¹¹ muss jede Webseite eines deutschen Bundesbürger ein gültiges Impressum aufweisen. Im Impressum ist der Vorname, Name, Anschrift, eine E-Mail-Adresse sowie eine zweite Kontaktmöglichkeit für kurzfristige Anfragen zu hinterlegen. Bei Unternehmen ist des Weiteren die Umsatzsteuer ID, der Handelsregistereintrag und die Aufsichtsbehörde anzugeben. Ohne ein gültiges Impressum verstößt die Webseite gegen gültiges deutsches Recht, was eine Abmahnung mit Strafzahlung zur Folge haben kann¹².

3 Aufbau der Webseite

3.1 Verwendete Hilfswerkzeuge

Für die Erstellung der Webseite wurde der Standardtexteditor des Betriebssystems ver- wendet. Mit diesem ist es ohne Einschränkungen möglich, HTML, CSS, Hypertext Preprocessor (PHP) und Javascript Code zu schreiben. Zur einfacheren Zusammen- arbeit und zur Versionierung der einzelnen Codezeilen wurde Git¹³ als Versionsver- waltungssystem verwendet. Die Benutzung eines solchen Systems ist optional, bringt aber gerade bei mehreren Entwicklern einen erheblichen Vorteil mit sich. Das Testen der Webseite wurde mit dem Webbrowser Mozilla Firefox in der aktuellen Version 22 durchgeführt. Das Webbrowser Plug-in Firebug¹⁴ bietet eine komfortable Möglich- keit zum Debuggen¹⁵ von Javascript Code an. Da es teilweise erhebliche Unterschie- de zwischen den verschiedenen Webbrowsern gibt, sollte eine Webseite deshalb mit verschiedenen Webbrowsern und Versionen auf unterschiedlichen Betriebssystemen getestet werden.

3.2 Verzeichnisstruktur

Eine klare Verzeichnisstruktur verhilft einer leichteren und besseren Zusammenarbeit mit mehreren Personen. Bei größeren Webseiten erhöht sich dadurch die Übersichtlichkeit bei der Weiterentwicklung und Pflege. Die Ablageorte sind klar definiert, da Bilder im Verzeichnis images, JavaScript-Dateien im Verzeichnis js, CSS-Dateien im Verzeichnis css und HTML Seiten im Verzeichnis includes abgelegt werden. Außerdem lässt sich eine einfache und klar definierte Verzeichnisstruktur leichter einprägen, was einen Zeitvorteil während der Programmierung mit sich bringt.

3.3 Menüstruktur

Die Menüstruktur wurde so gewählt, dass die wichtigen Informationen zur Reise und Unterkünfte sowie zur Buchungsmöglichkeit für die Besucher an oberster Stelle ste- hen. Anhand einer Heatmap^{16 17} können die ersten und die fortlaufenden Blicke und Klicks der Besucher kenntlich gemacht werden. Hierfür gibt es kostenpflichtige Hilfs- werkzeuge und Anbieter, die diese Analyse vornehmen und die Ergebnisse bereitstel- len.

3.4 Seitenstruktur

Da eine framebasierte Seitenstruktur nicht suchmaschinenfreundlich ist und sogar recht- liche Probleme mit sich bringen kann, wurde ein Div-Layout gewählt. Die Anordnung ist klassisch. Das zentrale Navigationsmenü befindet sich links vom Inhalt. Die je nach Auflösung immer zentriert gehaltene Anordnung wird von einer statischen Fußzeile abgerundet.

4 Programteile der Webseite

4.1 PHP

PHP¹⁸ ist eine Scriptsprache und vor allem im Webbereich sehr verbreitet. Mit dem folgenden PHP-Script wird die komplette Seite generiert, sodass nicht auf jeder Un- terseite das Menü manuell erstellt und bei Änderungen angepasst werden muss. Des Weiteren ist es damit möglich für jede Unterseite einen eigenen Titel, separate Be- schreibung sowie Metatags zur Suchmaschinenoptimierung anzugeben. Die Änderun- gen werden in der Datei index.php eingetragen und sind für die jeweils eingetragenen Unterseiten gültig^{19 20}.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: PHP Codebeispiel Definition der Meta-Elemente für die Seite Reiseziele und Einbindung dieser, Datei: index.php

[...]

¹ hilft bei der Verwaltung und Pflege der Webseite

² AIDA = Attention (Aufmerksamkeit), Interest (Interesse wecken), Desire (Besitzwunsch erwecken), Action (Kunde kauft)

³ [Kester, 2006]

⁴ [Gabler Wirtschaftslexikon AIDA-Regel, 2013]

⁵ Ein Tag kennzeichnet Bereiche innerhalb eines Codeausschnittes

⁶ Suchmaschinenoptimierung

⁷ [Düweke and Rabsch, 2012]

⁸ h1 - h6, h1 nur einmal pro Unterseite verwenden

⁹ Keyword = Schlüsselwort im Text der Unterseite

¹⁰ http://www.w3.org/

¹¹ http://www.gesetze-im-internet.de/tmg/__5.html

¹² [Wien, 2012]

¹³ http://git-scm.com/

¹⁴ http://getfirebug.com

¹⁵ Debuggen bezeichnet den Vorgang zur Fehlersuche in Programmen

¹⁶ Heatmap ist eine Wärmekarte und zeigt die Blicke der Besucher auf

¹⁷ [Heatmap Analysen , 2013]

¹⁸ http://php.net/

¹⁹ [Lerdorf et al., 2007]

²⁰ [Schlossnagle, 2006]