Datei öffnen - BRG Petersgasse

1
Inhaltsverzeichnis
1. HTML/XHTML ................................................................................................................................... 5
1.2 Metadaten im Head-Bereich..................................................................................................... 7
1.2.1„Charset“ bzw. Zeichenkodierung ..................................................................................... 8
1.3 Der Head-Bereich der Website der Band „Exanimalis“ ........................................................ 9
1.4 Neuerungen in HTML 5 ........................................................................................................... 11
2. CSS .................................................................................................................................................. 13
2.1 Entwicklung von CSS .............................................................................................................. 13
2.2 Einbinden von CSS .................................................................................................................. 14
2.2.1 Inhalt im Mozilla Firefox Browser ................................................................................... 16
2.3 Design der Website ................................................................................................................. 17
2.4 Lorem ipsum Text .................................................................................................................... 20
2.5 Die Homeseite .......................................................................................................................... 21
2.5.1 Musikplayer ........................................................................................................................ 22
2.6 Artwork der Band ..................................................................................................................... 24
2.8 Bandmitglieder.......................................................................................................................... 28
3. JavaScript ........................................................................................................................................ 30
3.1 Slideshow .................................................................................................................................. 31
4. CMS, Datenbanken & Websiteveröffentlichung ........................................................................ 33
4.1 CMS – Content-Management-System .................................................................................. 34
2
4.2 Websiteveröffentlichung .......................................................................................................... 35
4.3 Rechtliches................................................................................................................................ 38
5.
Zusammenfassung ..................................................................................................................... 40
6.
Quellenverzeichnis ..................................................................................................................... 43
Protokoll ............................................................................................................................................... 45
Disposition ........................................................................................................................................... 46
3
Vorwort
Zunächst habe ich mich natürlich nach einem Auftraggeber für eine Website umgesehen. Dabei fand ich schon bald einen passenden Auftrag, der mir von Dominik Bulfon erteilt worden
war. Das Ziel war es, für Herrn Bulfon und seine Musikgruppe „Exanimalis― eine gut strukturierte und der „Metal-Szene― entsprechende Website zu planen und zu konstruieren. Daraufhin habe ich ein paar Websites von bekannten Metalbands durchforstet und mir notiert die
Merkmale notiert, die besonders hervorstachen bzw. prägend waren. Ein weiterer wichtiger
Faktor war, dass mir bewusst sein musste, dass ich viel Informationsmaterial nur in Englisch
finden würde, da HTML/XHTML, CSS oder Javascript-Befehle schließlich rein englisch
nutzbar sind. Deshalb habe ich mich ebenso viel mit englischen Artikeln befasst und natürlich, wenn nötig, verschiedenste HTML-Begriffe auf Deutsch erklärt.
Der nächste Schritt war, die passende Entwicklungsumgebung zu finden, um eine möglichst
hochwertige Seite erstellen zu können. Natürlich musste ich dabei größtenteils auf Freeware
zurückgreifen, da mir die finanziellen Mittel für teure Editoren fehlten.
Ich entschied mich GIMP als Bildbearbeitungsprogramm zu benutzen und als Webeditor
Macromedia Dreamweaver, den ich bereits verwendet hatte und nicht kaufen musste. Als Ziel
habe ich mir gesetzt, die Website nur in XHTML 1.0, CSS3 und Javascript zu schreiben bzw.
zu coden und mittels „Firebug―, einem Firefox Add-on zu validieren und auf etwaige Fehler
zu untersuchen. Zusätzlich habe ich die Webseite auf Online-Tauglichkeit mit dem Programms „XAMPP1― getestet. Natürlich ist es schwerer, eine Website nur im Code zu programmieren, als einfach nur mittels Baukästen und veralteten Techniken eine Website „zusammenzuschustern― und dann den Inhalt einzufügen, aber auf diese Art und Weise konnte
ich meine Fähigkeiten im Bereich XHTML und CSS verbessern und hatte auch so die volle
Kontrolle über den Inhalt der Homepage! Es wurde kein komplett neues CSS-Template entwickelt, sondern es wurde lediglich ein adäquates, bereits vorhandenes - wenn nötig - verändert und natürlich anhand von Screenshots erklärt!
1
Vgl. Apache Friends – Xampp; http://www.apachefriends.org/de/xampp.html (14.10.2010)
4
1. HTML/XHTML
HTML (Hyper Text Markup Language) ist die Auszeichnungssprache, mit der Textdokumente in Webseiten und –
applikationen verwandelt werden. Die Hauptaufgabe von HTML besteht darin, eine semantische Beschreibung des Inhalts zu
liefern und dem Dokument eine Struktur zu geben.2
HTML ist die Grundlage des World Wide Webs, oder wie wir es auch kennen und täglich
benutzen, des „www’s―. HTML ist zuständig für das Anzeigen von Inhalten, wie etwa Text,
Bildern oder Tabellen. Jedoch würde dies ohne CSS (Cascading Stylesheets) etwas trist ausschauen, da HTML rein auf das Informelle beschränkt ist und keinen Wert auf das Grafische
legt. Dafür gibt es wie bereits genannt CSS, aber dazu später noch mehr! HTML wurde am
13. März 1989 von Tim Berners-Lee, einem Wissenschaftler des CERN als Standard festgelegt. Die aktuell gebräuchliche Versionsnummer von HTML ist HTML 4.01, jedoch befindet
sich HTML 5 schon in der Entwicklungsphase.
Parallel dazu entwickelte sich auch XHTML (Extensible Hypertext Markup Language). Nun
stellt man sich berechtigt die Frage, worin der Unterschied zwischen den zwei wohl gebräuchlichen Sprachen besteht. XHTML enthält alle Elemente von HTML, und dies ermöglicht eine möglichst komplikationslose Darstellung von Websites. Ein nicht XHTML-fähiger
Webbrowser kann in den meisten Fällen XHTML trotzdem anzeigen – es wird als normales
HTML verarbeitet, da wie bereits erwähnt große Zusammenhänge bestehen. Natürlich kann es
zu Verarbeitungsfehlern kommen, dies macht aber nichts, da es eine bestimmte Fehlertoleranz bei HTML gibt. Genau darin besteht auch der Unterschied zwischen den beiden Varianten. XHTML wurde mit der Grundidee konzipiert, dass man einen unkomplizierten Datenaustausch vollziehen kann und dass es daher auch weniger tolerant als HTML ist. Um ein Beispiel zu nennen, könnten wir bestimmte HTML/XHTML-„Tags― vergleichen. Nun eine Erklärung des Begriffes Tag:
„Jedes Element (es werden englische Begriffe für Elemente benutzt) eines Dokuments wird
durch ein oder zwei Tags gekennzeichnet. [...] Es gibt öffnende Tags und schließende Tags.―3
2
Vgl. Niederst Robbins, Jennifer: HTML & XHTML – kurz & gut. Köln: O’Reilly 2010, S. 1.
3
Vgl. Henick, Ben: Das Beste an HTML & CSS. Köln: O’Reilly 2010, S. 8.
5
Tags beinhalten einfach die verschiedenen Elemente in einem HTML-Dokument.
Bei HTML gibt es noch eine Vielzahl sogenannter selbstschließender Tags, hingegen muss
man bei XHTML stets darauf achten, ein Tag mit den Zeichen „/>― zu schließen. Zusätzlich
will man in XHTML wirklich nur noch auf die Überlieferung des Textes achten und keine
visuellen Attribute wie etwa „<b>― (für fettgedruckten Text) im Code verwenden. Darum soll
sich ausschließlich nur noch CSS kümmern.
Bei beiden Arten kann man sich noch zwischen den Varianten Transitional und Strict entscheiden. Es gibt noch eine dritte Variante, dass sog. Frameset, dass aber total veraltet und
nicht mehr gebräuchlich ist.
1.1 Standard XHTML1.0 – Site in Macromedia Dreamweaver
Hier haben wir nun ein komplett neu geöffnetes HTML-Dokument, in dem bereits standardgemäß ein paar Zeilen Code vorgegeben sind.
1. In der ersten Zeile gibt uns der sog. „DOCTYPE― an, in welcher Sprache wir das Inhaltliche verfassen. Man kann sich zwischen HTML 4.0 oder XHTML 1.0 entscheiden. Zusätzlich
gibt es bei beiden Typen noch die Wahl zwischen „Transitional― und „Strict―. – Wie man bei
dem gekennzeichneten Part erkennen kann, ist als Standard XHTML 1.0 mit der Variante
6
Transitional angegeben. Ebeneso kann man ein paar unverständliche Symbole bzw. Buchstabenketten erkennen. W3C hat jedoch einen sehr prägenden Sinn! „Das World Wide Web
Consortium (kurz: W3C) ist das Gremium zur Standardisierung, der das World Wide Web
betreffenden Techniken. Es wurde am 1. Oktober 1994 am MIT Laboratory for Computer
Science in Cambridge (Massachusetts) gegründet.―4
2. und 3. Nun folgt der ―head‖-Bereich, in den eine Vielzahl von sogenannten Metadaten verschachtelt werden können, wie auch eine Vielzahl an CSS-Befehlen oder gar die Informationen zur verwendeten Sprache einer Website, aber dazu später mehr. Als Vorgabe ist nur das
„charset― und der „content type― anzugeben. Der „Content-Type― bzw. der Inhaltstyp gibt
logischerweise als Standard „Text― und HTML als verwendete Sprache an. Weitere Typen
sind z.B. CSS oder Javascript. In Macromedia Dreamweaver ist bei dem charset-Element
standardgemäß „iso-8859-1― vorgegeben, welches aber sehr unbeliebt und veraltet ist. In dem
darauf folgenden Screenshot wird erläutert, welches „charset― für die Webseite benutzt wird
und natürlich werden auch diverse Metadaten erklärt.
1.2 Metadaten im Head-Bereich
Was sind sogenannte Metadaten in Bezug auf Webseiten überhaupt?
Enthält zusätzliche Informationen über das Dokument. Es sollte sich im head-Teil des Dokuments befinden. Es wird üblicherweise eingesetzt, um den Medientyp und die verwendete Zeichenkodierung anzugeben.5
Eine Zeit lang wurden Metadaten auch benutzt, um die eigenen Webseiten bei Suchmaschienen höher einzuordnen! Mit dem Begriff <meta name=“keywords“ content=„Schlagwörter
HIER eingeben“ /> konnte man seine Seite für Suchmaschinen optimieren! Inzwischen ist
diese Variante jedoch völlig überholt und Suchmaschinen a la Google oder Yahoo legen nun
mehr Wert auf die Gliederung, Gestaltung und Semantik einer Internetseite.
4
5
Vgl. W3C; http://de.wikipedia.org/wiki/World_Wide_Web_Consortium (17.10.2010)
Vgl. Niederst Robbins, Jennifer: HTML & XHTML – kurz & gut. Köln: O’Reilly 2010, S. 113.
7
Es gibt verschiede Metadaten, technische, aber auch Daten die nur Informationen über Sprache, Autor oder sogar Adresse des Erstellers (geographische Daten) beinhalten. Insbesondere
ist das sogenannte „charset― wichtig – warum, wird im folgenden Kapitel erklärt.
1.2.1„Charset“ bzw. Zeichenkodierung
„Charsets sind Zeichenkodierungen (engl= Character encoding), die eine eindeutige Zuordnung von Schriftzeichen und Symbolen innerhalb eines Textes erlauben. Daher gibt es z.B.
für Ü, Ä, Ö bestimmte Kodierungen innerhalb der verschiedenen charsets.―6 Sie unterscheiden sich hauptsächlich in Hinsicht auf Toleranz bzw. Quantität der Zeichen/Symbole etc.
Es gibt viele verschiedene charset-Typen, jedoch sind die drei Üblichsten:
 iso-8859-1
 windows-1252
 UTF-8
Unter Webdesignern ist UTF-8 im Moment wohl das am meisten Verbreitetste charset,
schlicht und einfach wegen der Flexibilität und der Anzahl an Zeichen.
Auf der folgenden Seite wird bereits mit der Arbeit im head-Bereich der Website begonnen!
Es werden alle relevanten Metadaten der Konstruktion mit Hilfe eines Screenshot gezeigt und
es wird erläutert, warum diese im head-Bereich essentiell sind.
6
Vgl. Zeichenkodierung; http://de.wikipedia.org/wiki/Zeichenkodierung (2.11.2010)
8
1.3 Der Head-Bereich der Website der Band „Exanimalis“
Anbei ein Screenshot, der die Metadaten für die Website der Band „Exanimalis― zeigt.
Zuerst muss gesagt sein, dass verschiedene Arten bzw. Schreibweisen von Metadaten exisitieren! Zum Einem, die essentiellen technischen Metadaten, die man hier an dem „meta httpeuqiv=“ erkennen kann und zum Anderen, die „meta name=“, die zusätzliche Informationen
über die Webseite preisgeben!
„Das Attribut http-equiv wird verwendet, wenn im Meta-Tag Daten transportiert werden sollen (genauer: im ContentAttribut), die dort nur hilfsweise als Ersatz für einen HTTP-Header untergebracht sind. Deshalb auch die Bezeichnung "httpequiv" = Äquivalent zu HTTP.― 7
Der Typ „name― dagegen kennzeichnet ganz normale Metadaten wie zum Beispiel Infos über
Autor, Ort und evtl. Kurzbeschreibungen.
1. Die inhaltsbezogenen Metainformationen sind wohl am wichtigsten. Hierbei ist es
schon üblich die „content types― für die veschieden verwendeten Sachen der Website
anzugeben. Hierbei hat man ganz einfach den header mit drei Metainfos „gefüttert―.
Es wird bei der Erstellung „text/html―, „text/css― und natürlich „text/javascript― verwendet. Ebenso sind diese Daten wichtig, wenn man zum Beispiel die Gestaltung der
Webseite via CSS nicht direkt in dem HTML-Dokument, sondern es auf einem externen Cascading Style Sheet macht und dieses im head-Bereich verlinkt und darauf
7
Vgl. SELFHTML Forumsarchiv; http://forum.de.selfhtml.org/archiv/2007/7/t155986/ (18.11.2010)
9
hinweist. Das hat den Vorteil, dass man ein zu großes Chaos, in einem einzigen Dokument vermeiden kann, und auch nicht zu viele Zeilen Code beisammen hat. Man
kann ohne allzu großen Aufwand in einem seperaten Stylesheet die Informationen für
jedes einzelne Element, wie Überschriften oder Paragraphen/Absätze bestimmen.
2. Ein weiterer wichtiger Aspekt, ist die Angabe der jeweiligen Sprache, die in dem Dokument benutzt wird. Hierbei wurde das Attribut „de― für Deutsch genommen, da der
Inhalt der Bandhomepage auf Deutsch sein wird. Jede Sprache hat natürlich ihr eigenes Attribut, so müsste man für Englisch „en―, für Italinisch „it― usw. nehmen.
3. „<!—„ und „-->― sind sehr wichtig für das „Coden― einer Website! Die beiden Attribute sind notwendig, um Kommentare hinzuzufügen. Welchen Sinn das haben soll?
Nun bei etlichen Zeilen Code fragt man sich spätestens nach 2 Wochen, warum man
dass so, oder dies so verfasst hat. Mithilfe von Kommentaren, die durch diese speziellen Zeichen nicht auf der Homepage aufscheinen, jedoch im Code lesbar sind, können
sich Entwickler von Homepages selbst einen Gefallen tun und sich für spätere Fehlerbehebungen notieren, was sie sich überhaupt bei Diesem und Jenem gedacht haben,
bzw. was der eigentliche Nutzen davon sein sollte. Natürlich kann es ebenso nützlich
für Laien sein. Wenn Internetbenutzer einfach nur den Quelltext betrachten wollen
und sich fragen, was die ganzen Begriffe bedeuten bzw. welcher Nutzen dahintersteckt, können die Kommentare von Entwicklern oftmals sehr hilfreich sein. Als
Beispiel: <meta http-equiv=―Content-language― content=―de― />
Hier könnte der
Ersteller einfach schreiben ―Dieser Befehl gibt an, dass die Webseite ausschließlich in
deutscher Sprache vorhanden ist―.
4. Die „description―, die Beschreibung also dient NICHT zur Suchmaschinenoptimierung. Es wurde vorher bereits erwähnt, dass der Meta-Befehl „keywords― veraltet sei
und sicherlich keine Meta-Informationen zur Suchmaschinenoptimierung in der Webseite vorhanden sein werden, da diese überholt bzw. nutzlos sind, dafür wird mehr
Augenmerk auf die Semantik gelegt. Der Befehl „description― ist lediglich eine Kurzbeschreibung der erstellten Seite, die dann bei den Suchmaschinen unter den Links
verfügbar ist. Dieser dient lediglich dazu, dem Benutzer eine kurze Infomation zu geben, was ihn auf der jeweiligen Seite erwarten wird!
10
Unter den gekennzeichneten Begriffen gibt es noch zwei weitere: „google-siteverification― ist einer von diesen. Auf diesen will ich jedoch nicht näher eingehen, da
es für bestimmte Seiten wie Google oder Yahoo etliche „Meta-Commands― gibt. Vorhin wurde erwähnt, dass man ebenso Informationen zu dem Standort, d.h. zu seiner
Adresse preisgeben kann. Ein dazugehöriger Metabefehl ist „<meta name=“geo.position“ ..../>.
„Die Meta-Angabe robots dient dazu, einem Suchdienst das Auslesen einer Webseite zu verbieten. Dieses Verbieten kann sinnvoll sein, wenn z.B. Testseiten auf den Server geladen werden oder wenn es sich um irrelevante Seiten handelt.―8
Als Beispiel ein Exzerpt aus meinem robots-Befehl:
<meta name="robot" content="index,follow …/>
Index  Seite auslesen.
Follow  Allen Links folgen.
1.4 Neuerungen in HTML 5
„HTML 5 ist noch lange nicht fertig, aber im Gegensatz zur bisherigen Praxis erfolgt die
Entwicklung des HTML5-Standards Hand in Hand mit dessen Implementierung.―9
Was gibt es Neues?
In HTML 5 wurden eine Menge neuer Elemente und Attribute implementiert. Diese ermöglichen dem Entwickler oft verwendete Teile der Webseite schnell ansteuern zu können.
8
Vgl. Metatab; http://www.metatab.de/meta_tags/robots.htm (18.11.2010)
9
Förster, Klaus; Öggl, Bernd: HTML 5 – Leitfaden für Webentwickler. München: Addison-Wesley 2010, S. 32
11
Neue bzw. modifizierte Elemente und Attribute in HTML 5:
canvas  Ein Highlight in HTML 5; canvas ist vereinfacht gesagt eine Javascript programmierbare Bilddatei.
article, section, nav, aside  Elemente, die Webseiten strukturieren und einteilen können.
figure, figcaption  Bestimmte Befehle für Abbildungen.
Auch gibt es noch andere Elemente, die wohl eher bestimmten „Webapplikationen― zuzuordnen sind.
keygen  Dient der Verschlüsselung digitaler Signaturen im Internet.
command  Vergleichsweise mit der Computer-Konsole dient das Element, um Kommandos auszuführen, ist aber kein Javascript-Befehl!
Das Ziel von HTML 5 ist, dass noch mehr Acht auf die strikte Trennung der verschiedenen
Inhalte gegeben wird und dass HTML benutzerfreundlicher gemacht wird, so dass auch Laien
eine Chance haben, sich schnell im Bereich des Webdesigns orientieren zu können.
12
2. CSS
Der Nutzen von CSS ist den meisten Internetnutzern wahrscheinlich gar nicht bewusst. Am
Anfang der Websiteentwicklung gab es keine Trennung von Inhalt (HTML), Layout (CSS)
und Animation (Javascript), alles war schlicht und einfach in einer Datei zusammengefasst.
Jedoch wurden die Dateien dadurch natürlich unübersichtlich und das ganze „Gerüst― war
fehleranfälliger. Heutzutage kann man einfach die CSS-Dateien, also die Templates, die die
grafische Gestaltung übernehmen, extern erstellen und im head-Bereich verlinken. Natürlich
muss der Code in dem seperaten Stylesheet Bezug auf bestimmte Teile im HTML-Dokument
nehmen. Aber bevor dies anhand eines kurzen Beispiels erklärt wird, werden zuerst die Wurzeln von CSS ausfindig gemacht.
Was bedeutet CSS?
„Cascading Style Sheets (Abk.: CSS) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor
allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll.―10
2.1 Entwicklung von CSS
„Die Idee für Cascading Style Sheets kam Hakom Wium Lie 1994, der heute bei Opera Software ASA (Konzern, der den
bekannten Browser „Opera― erschaffen hat) arbeitet. Er fing mit Bert Bos an, CSS zu entwickeln und arbeitet heute noch in
Zusammenarbeit mit dem W3C an der Weiterentwicklung von jenem.―11
Das Ziel war es, Regeln zu definieren, die über mehrere Stylesheets hinweg vererbt werden
konnten. Das World Wide Web Consortium wurde 1994 in Chichago auf CSS aufmerksam,
als Hakom einen Vortrag über sein Projekt bei der Konferenz „Mosaic and the Web― hielt.
Später arbeiteten immer mehr Informatiker an diesem Projekt. Zum Beispiel Thomas Reardon von Microsoft. Die erste Version, CSS Level 1 (CSS 1), wurde im Dezember 1996 veröffentlicht, heute wird es von jedem Browser unterstützt. Ohne CSS würden all unsere Internetseiten bei weitem nicht denselben grafischen Effekt erzielen! Wenig später, im Mai 1998,
publizierten die Entwickler bereits CSS Level 2 (CSS 2). Die derzeit gebräuchliche Version
ist CSS Level 2.1.
10
Vgl. Wikipedia CSS; http://de.wikipedia.org/wiki/Cascading_Style_Sheets (29.11.2010)
11
Vgl. E-Book: Webseitenentwicklung CSS;
http://de.wikibooks.org/wiki/Websiteentwicklung:_CSS:_Geschichte (29.11.2010)
13
CSS 3 ist zwar schon fertiggestellt, jedoch wird es noch kaum unterstüzt bzw. ist es noch im
Standardisierungsverfahren.
2.2 Einbinden von CSS
Nun wird anhand eines einfachen Beispiels die Funktionweise und die Einbindung von CSSDateien in einer Website kurz erläutet. Da heutzutage die strikte Trennung von Inhalt und
Layout für mehr Übersicht sorgt, wird lediglich ein externes Stylesheet erstellt und mit einer
HTML-Datei verlinkt. Es gibt jedoch noch andere Methoden CSS in einer Webseite zu integrieren. Man kann beispielsweise direkt einem seperaten HTML-Attribut einen „Style― zuweisen. Doch stellt man sich jetzt eine komplexe Website mit endlos vielen verschiedenen Überschriften, Paragraphen oder Zitaten vor, so wird einem schnell bewusst, wie unübersichtlich
das HTML-Dokument dann wird. Wenn man jeden HTML-Tag mit einem Style-Attribut versehen muss, dann wird das Dokument riesig und somit auch fehleranfälliger. Genau das will
man ja verhindern, deswegen kann man nicht oft genug erwähnen, wie wichtig die Trennung
von Textverarbeitung und Textgestaltung ist!
So schaut der Inhalt im HTML-Dokument aus.
14
Selbst angefertigtes Stylesheet.
Zusätzlich zu den Kommentaren, die im Screenshot ersichtlich sind, wird noch eine möglichst
detaillierte Erklärung hierzu abgegeben.
In den ersten paar Zeilen des Dokuments wurde ein sogenannter „Reset-Style― geschrieben.
Ein Reset-Style erlaubt eine einheitliche Struktur für die gesamte Website. Beispielsweise
gibt es öfters kleine Differenzen zwischen verschiedenen Browsern und um diese auszumerzen, versieht man oftmals eine CSS-Datei mit jenem genannten Style am Beginn einer CSSDatei. Beispielsweise wurde hier als einheitliche Hintergrundfarbe Schwarz gewählt. Denn
ein Hintergrundbild statt einer einfachen Hintergrundfarbe würde die kurz verfasste Biographie der Band nur schwer lesbar machen. Man würde den Text dann kaum entziffern können.
Anschließend wurden noch den zwei Überschriften und dem Absatz <p>…</p> bestimmte
Styles zugewiesen. Das Wichtigste bei den CSS-Befehlen ist, jeden Befehl mit einem Semikolon „;“ zu beenden. Und die Styles mit „{“ zu öffnen und mit „}“ zu schließen.
15
2.2.1 Inhalt im Mozilla Firefox Browser
Nicht mit Stylesheet versehen.
Mit dem Stylesheet versehen  im Mozilla Firefox Browser.
16
Ein Beispiel um die Funktionen und die Benutzung von CSS zu erklären, erlernt anhand eines
Video-Tutorials von Galileo Design12 & Webmaster-Crashkurs.13
2.3 Design der Website
Da nun die Funktionsweise von CSS erklärt worden ist, möchte ich nun das von mir gewählte
„CSS-Template― für die Homepage vorstellen und erklären. Es wird kein selbst gefertigtes
benutzt, da stimmungsvolle Templates sehr aufwändig zu programmieren sind und man hierfür sehr viel Erfahrung benötigt, ebenso sind viele Elemente grafisch zu erzeugen und aufeinander abzustimmen. Und damit alles stilvoll zusammenpasst, ist eine Menge an Erfahrung
vonnöten. Deswegen wird eine optisch sehr ansprechende Vorlage aus dem Internet gewählt.
Es gibt eine Vielzahl an optisch hochwertigen Templates bzw. Skripten zum kostenlosen
Download, jedoch gibt es natürlich auch Firmen, die sich ihre Dienstleistungen entgelten lassen. Dies ist aber, wie gesagt, nicht nötig, da die Auswahl an kostenlosen Templates enorm
ist.
12
Vgl. Galileo Computing; Webseiten programmieren und gestalten – Video Training; Kapitel 3 „CSS
einbinden― (26.12.2010)
13
Vgl. Text-Ausrichtung über CSS ; http://www.webmaster-crashkurs.de/text-ausrichtung-ueber-css.htm
(26.12.2010)
17
2.3.1 Begriff Template
„Template bedeutet soviel wie eine Vorlage, eine Hilfestellung.―14 – Der Begriff wird nicht
nur bei der Webseitenprogrammierung, nein auch bei der Erstellung von Programmen mit
C++ und anderen gängigen Programmiersprachen benutzt. Aber das war bei weitem noch
nicht alles, der Begriff ist in der Chemie, der Molekularbiologie oder sogar in der modernen
Kunst gebräuchlich!
2.3.2 Das gewählte CSS-Template für die Bandseite
Ich habe mir ein kostenlosees CSS-Template von dem Anbieter „freewebtemplates.com―15
ausgesucht. Es wird natürlich der Ersteller vermerkt, um keine Urheberrechte zu verletzen,
trotzdem wird das Template geringfügig verändert und erklärt werden. – Im Prinzip funktioniert es wie das kurze selbstgecodete Beispiel, nur das ebenso selbst erstellte Grafiken und
Tabellen eingebunden worden sind. Der Name des Templates ist „shadowed―.16
Wichtig wäre vielleicht noch zu wissen, dass bei diesem Template eine Vielzahl von sogenannten „div-Tags― benutzt wurde. div-Tags fügt man im HTML-Code hinzu, um eine Seite
zu strukturieren, sie zu unterteilen. Man kann den Befehl auch verschachteln, d.h. ein „divTag― kann mit Hilfe von weiteren nochmals unterteilt werden.
14
15
16
Vgl. Template; http://de.wikipedia.org/wiki/Template (26.12.2010)
Vgl. Free Templates; http://www.freewebtemplates.com/ (28.12.2010)
Vgl. Shadowed Template; http://www.freewebtemplates.com/download/templates/10232 (28.12.2010)
18
Shadowed Template in Mozilla Firefox.
Ich habe mich für dieses Template entschieden, da es stimmig aussieht und ich es den Wünschen einer Death-Metal Band anpassen kann, da der Hintergrund bereits passend ist. Natürlich kann der Inhalt beliebig nach den Wünschen der Band verändert werden. Man wird sich
trotzdem wahrscheinlich fragen, ob dieser unverständliche, hervorgehobene Textausschnitt
etwas bedeuten soll. Diesen Text findet man komischerweise fast bei jedem Template vor, ob
es eine Verschwörung einer Sekte, eine geheime Botschaft oder dergleichen ist? Nein, natürlich alles Quatsch, es ist der berühmte „Iorem Ipsum―-Text! Diesem Text und seinem Nutzen
wird sogar ein kleines Unterkapitel gewidmet.
19
2.4 Lorem ipsum Text
„Lorem ipsum ist der gebräuchliche Dummy-Text in der Druckindustrie. Seine Herkunft wird im 16. Jahrhundert vermutet,
als ein unbekannter Buchmacher ein Verzeichnis seiner Schriftarten herstellte.―17
Der Text an sich ist nicht richtiges Latein, er enthält lediglich ein paar lateinische Begriffe.
„Er dient dazu von dem Inhalt der Seite abzulenken, da sowieso kein Mensch vermag dieses unverständliche „Gebrabbel― zu
entziffern, dadurch wird mehr Wert auf die Gestaltung und das Design von Websites gelegt.―18
Deswegen findet man diese berühmten oder ähnlichen Dummy-Texte oftmals bei Templates
vor. Jedoch benutzt man diesen Dummytext natürlich nicht nur in der Internetbranche, nein,
auch in vielen anderen Bereichen dient er als Platzhalter.
Es ist möglich sich diesen Text ganz einfach über einen „Generator― für eine beliebige Anzahl
an vorhergesehen Wörter generieren zu lassen. Hierfür gibt es unzählige Seiten, eine davon ist
„Lorem ipsum.de―19
Als Beispiel einen 100 Wörter Dummytext von der oben genannten Website:
―Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.‖
17
Vgl. Lorem Ipsum; http://directtools.de/wissen/normen/loremipsum.htm (29.12.2010)
18
Vgl. Lorem Ipsum; http://de.wikipedia.org/wiki/Lorem_ipsum (29.12.2010)
19
Siehe Lorem Ipsum Generator; http://www.loremipsum.de/ (29.12.2010)
20
2.5 Die Homeseite
Die Homeseite der Band Exanimalis im Mozilla Firefox Browser.
1. Die oberste Navigationsleiste wurde beibehalten, nur die Buttons wurden umbenannt.
Jeder dieser Buttons wird den Benutzer auf eine neue Seite weiterleiten, auf der man
laut dem Button die diversen Sachen begutachten kann.
2. Die Suchleiste wurde entfernt, da bei einem so kleinen Projekt eine Suche bestimmter
Informationen irrelevant ist. Alle Informationen sind gut einsehbar und machen eine
Suchleiste daher unnötig. Jene wurde durch einen Musikplayer ausgetauscht. Dieser
21
Musikplayer wurde nach dem Vorbild des EMFF20 erstellt. Zu dem Player und dem
Skript aber später mehr!
3. Die Seitenleiste dient dazu, um Näheres über die Bandmitglieder zu erfahren. Es gibt
zwar einen extra Link in der oberen Navigationsleiste namens „Mitglieder―, jedoch
keine Informationen zu jedem einzelnen Mitglied, dafür wurde die Seitenleiste verwendet.
2.5.1 Musikplayer
Ich habe den EMFF (Easy Musicplayer For Flash) genommen, da es ein kostenloses Skript ist,
dass ich meinen Bedürfnissen anpassen konnte. Zudem sind andere Player wie z.B. der
myspace21-Player nicht für den Nutzen externer Webseiten gestattet. Es gibt zwar etliche
myspace-Player Skripts, jedoch ist keines von diesen legal. Bitte beachten Sie, dass ich mich
von der Distribution illegaler Skripte distanzieren möchte!
Skript des eingebetten Musikplayers auf der Homeseite.
Der Musikplayer wurde in einem div-Tag eingebettet und diesem wurde eine entsprechende
Größe (240x35) verliehen. „Ich habe W3C-konform alles ohne etwaige Fehler eingebunden
und es funktioniert einwandfrei.―22 In dem Screenshot ist ersichtlich, dass hierbei eine Datei
20
Vgl. EMFF; http://emff.sourceforge.net/ (5.01.2011)
21
Vgl. Myspace; http://www.myspace.com/ (5.01.2011)
22
Vgl. Musik W3C-konform in Webseiten einbinden; http://aktuell.de.selfhtml.org/artikel/grafik/flashmusik/
(5.01.2011)
22
von einer externen Internetseite in dem Player abgespielt wird. Natürlich wäre dies illegal
ohne einen Vermerk zu machen, jedoch ist jene Internetseite ein Uploadportal namens „TooFiles―,23 bei dem ich meine eigene Musik hochgeladen habe. Sobald die Webseite online gestellt wird, werden natürlich die eigenen Songs der Band im Player integriert sein, da ich bei
Kompositionen anderer Bands natürlich kein Recht habe, deren Lieder auf meiner Seite zu
publizieren.
Der Hintergrundgedanke ist, dass alle Songs dort online gestellt werden und so beim Laden
der Bandseite die Ressourcen von jener Uploadseite genutzt werden. Dadurch wird vermieden, zu viel Datenvolumen für Songs zu verbrauchen, sollte die Seite später publik gemacht
werden. Domains bieten auch nur eine gewisse Menge an Daten für einen bestimmten Preis!
So können Kosten bei etwaigem „hosten― der Seite vermindert werden und das Laden der
Songs erfolgt über die Ressourcen der besagten Internetseite!
Nun zu den Möglichkeiten des Players:
 Er ist grafisch an das Design der Webseite angepasst.
 Er hat lediglich eine Play-, Pause- und Stopp-Taste. Ein Lautstärkenregler ist ebenfalls
vorhanden.
 Es ist möglich an eine bestimmte Stelle vor- oder zurückzuspulen.
 Es wird eine Playlist aus allen aktuellen Songs der Band vorhanden sein, jedoch habe
ich derzeit noch kein Songmaterial zur Verfügung.
 Ich habe mich gegen das automatische Abspielen des Tracks beim Laden der Webseite
entschieden. Es ist störend, nicht selbst entscheiden zu können, ob man nun eine passende Hintergrundmusik wünscht oder nicht. Daher wurde auf eine Autoplayfunktion
verzichtet.
23
Siehe TooFiles; http://www.toofiles.com (5.01.2011)
23
2.6 Artwork der Band
Es wurde ganz simpel ein neues HTML-Dokument erstellt und jenes mit dem Style der Homeseite versehen. Natürlich soll jede Seite mit demselben Style versehen sein. Daher wurde
die Artworkseite mit Hilfe von Buttons in Unterkategorien geteilt. Anhand eines Bandlogos
wurden möglichst passende Buttons gefertigt.
Anbei ein Beispiel eines derartigen Buttons:
Anschließend wurden die Buttons mit den dazugehörigen Seiten verlinkt. Dadurch muss man
sich als Erstes für eine Unterkategorie an Artwork entscheiden und den jeweiligen Button
benutzen, um zu dieser zu gelangen. Es funktioniert ganz simpel. Man muss das Bild mit einem <img src―xxx― /> in der Website verlinken und dann einen Link innerhalb des Bildes
erstellen. Das Ganze ist wenig aufwändig, daher kann man dadurch viele Unterkategorien mit
Hilfe von Buttons/Bildern erstellen. Folgend nun der Ausschnitt von Code aus dem Dreamweaver 8:
Verlinkung in einem Bild/Button.
Da die Methode nun erläutert worden ist, folgen wiederum Screenshots der vollendeten Artworkseite und deren untergeordneten Seiten. Zusätzlich wurde die Artworkseite schon mit der
Homeseite verlinkt. Am Ende soll jede Seite von einer beliebigen anderen verfügbar sein.
24
Seiten zum Artwork der Band.
25
Derzeit sind in jedem Unterkapitel die Bilder stupide untereinander angeordnet. Natürlich ist
das nicht gerade schön, denn meilenweit runterscrollen mag kein Benutzer, daher wird später
mit Hilfe von Javascript eine Slideshow in die Webseite implementiert. Sie würde die Seite
sicherlich aufwerten und somit das Gesamtkonzept verbessern.
Jedoch wird nun kein Screenshot der Slideshow hinzugefügt, da jene erst nach der Fertigstellung der gesamten Webseite gecoded wird. Die Slideshow wird im Kapitel „Javascript― erstellt.
2.7 Tour & Links
Zu diesen Seiten bleibt eigentlich nicht viel zu sagen übrig. Es wurden keine neuen Techniken
oder sonstige Spielereien verwendet. Die Links wurden wiederum in Buttons verschachtelt.
Anbei nun die fertigen Seiten:
Tourseite der Homepage.
26
Linkseite der Homepage.
Die Tour-Seite wurde ganz einfach erstellt. Dominik Bulfon wurde nach den nötigen Informationen gefragt und jene Konzerte die bisher stattgefunden haben, wurden in einer Liste zusammengefasst. Zusätzlich sind seperat die zukünftigen Auftritte der Band vorzufinden. Natürlich ist Exanimalis bereits im Web präsent, daher sind die wichtigsten Seiten, zugehörig zu
der Band, als Links verewigt worden. Dadurch gelangt man beispielweise relativ einfach zu
deren Fanpages auf diversen Netzwerken im Internet.
27
2.8 Bandmitglieder
Wie bereits erwähnt wurde, wird es zwei Möglichkeiten geben, die Informationen über die
Mitglieder der Band auf der Seite vorzufinden. Zum Einem über den Button „Mitglieder― in
der oberen Navigationsleiste, zum Anderen wird man die Möglichkeit haben jedes Mitglied
einzeln betrachten zu können, und zwar mit Hilfe der Seitenleiste. Dabei ist zu beachten, dass
beide Navigationsleisten verschiedene Informationen preisgeben! Denn bei dem MitgliederButton wird eine kleine Bandbiographie enthalten sein, bei den einzelenen Mitglieder-Buttons
dagegen nicht. Anbei wiederum zwei Screenshots:
Info über die einzelnen Mitglieder.
28
Mitgliederseite der oberen Navigationsleiste.
Nun ist eigentlich so gut wie alles fertig. Die Kontaktseite wird hier nicht extra bearbeitet, da
die Band selbst entscheiden soll, was auf diese Seite kommt. Die Webseite ist soweit in Ordnung, jedoch könnten noch viele Javascript-Befehle hinzugefügt werden. Meistens bemerkt
man gar nicht, welche Befehle Javascript-basierend und welche es nicht sind. Dazu wie auch
zu dem Oberkapitel HTML/CSS nun ein kleiner historischer „Background―.
29
3. JavaScript
„JavaScript ist eine Skriptsprache, die hauptsächlich für das DOM-Scripting in WebBrowsern eingesetzt wird.―24 Der vorhergehende Satz erklärt JavaScript wohl am besten,
jedoch ist er für den Laien unverständlich. Daher versuche ich „DOM-Scripting― ebenso zu
erklären, um etwaige Unverständnisse aufklären zu können. DOM-Scripting (Document Object Model) oder auch dynamisches HTML genannt ist eine bestimmte Methode, um Webseiten durch eine Handlung des Benutzers bzw. Betrachters zu verändern. Um es leichter verständlich zu machen, sind im nächsten Absatz ein paar Beispiele aufgelistet, ebenso werden
ein paar dieser DOM-Scriptings in der Website vorkommen und per Screenshot möglichst
detailliert erklärt werden!
Beispiele für DOM-Scriptings:
 Erscheinen ("Aufklappen") oder Hervorheben (meist mit einer Farbänderung versehen) eines Menüs
 Hervorhebung eines Textes
 Möglichkeit, Objekte durch „Drag & Drop― auf dem Bildschirm zu verschieben
 Slideshow für Bilder
Der Unterschied von JavaScript zu HTML/CSS ist bei weitem größer als zwischen den beiden
anderen. JavaScript ist wohl eher mit der „C-Familie― zu vergleichen, wozu auch Java gehört.
Jedoch haben Java und JavaScript völlig unterschiedlichen Arbeitsmethoden und Funktionsweisen, daher ist Vorsicht geboten!
24
Vgl. JavaScript; http://de.wikipedia.org/wiki/JavaScript (7.2.2011)
30
3.1 Slideshow
Es wurde bereits erwähnt, dass die triste Abfolge der Bilder untereinander durch eine Slideshow aufgewertet werden soll und somit die Funktionsweise auch erheblich erleichtern soll.
Es wird, wie bei dem Musikplayerskript, ein kostenloses Skript, dass schon die jeweiligen
grafischen Spielereien bietet, verwendet und implementiert werden. Selbstverständlich wird
jenes Slideshowskript an den richtigen Stellen im Code vermerkt, um rechtliche Konsequenzen zu vermeiden.
Skript der Slideshow
Natürlich erstellt man ein externes Javascript-Dokument, ähnlich der Prozedur, der Erstellung
des Cascading Stylesheets, und verlinkt jenes anschließend nur noch in dem head-Bereich des
HTML-Dokuments. Dabei muss jedoch beachtet werden, dass jene Slideshow durch 2 Definitionen im HTML-Dokument definiert wird. Zum Einem durch die Verlinkung im headBereich und zum Anderen durch die ID des div-Tags mit dem Befehl:
var def_divid=“beliebige Bezeichnung“;
Das Attribut „var― steht für Variable und bestimmt grundsätzlich einen Javascriptbefehl,
def_divid heißt soviel wie „Define divID―  Man muss dem div-Tag, in welchem später die
Slideshow verschachtelt werden soll, eine bestimmte Bezeichnung geben, damit das div-Tag
im HTML-Dokument auf die richtigen Ressourcen zurückgreifen kann. In der HTML-Datei
muss man anschließend ganz einfach ein div-Tag erstellen und die Bezeichnung des jeweils
passenden Javscript-Dokuments angeben. Bei der Webseite würde das so aussehen:
<div id="slideshow">
31
Dadurch erkennt HTML nun, auf welche Datei sich der div-Container bezieht und kann diese
abrufen. Da man Variablen eine Unmenge an Bedeutungen zuweisen kann, wurden die Variablen, die im Script benutzt wurden, bereits mit Hilfe von Kommentaren erklärt, jedoch wird
nachfolgend noch ein wichtiger Befehl erklärt – der sogenannte „Array-Befehl―.
Array ist vor allem ein charakteristischer Befehl für Slideshows. Denn Array heißt übersetzt
aus dem Englischen, soviel wie „Reihe/Abfolge― bzw. eine Ansammlung von Daten. Da wir
bei einer Slideshow ja das Ziel vor Augen haben, möglichst viele Bilder in einer Reihenfolge
(Array) abzuspielen, ist das Attribut essentiell für jene. Ebenso muss definiert werden, welche
Art von Daten in dieser Abfolge vorkommen soll. Hierzu gibt es wieder das Attribut:
var def_imges=new Array
In unserem Fall wird die Abfolge als „imges― definiert. Hierbei ist imges eine Abkürzung für
das englische Wort „image―, das übersetzt Bild bedeutet. Man könnte die Abfolge z.B. auch
als integer (Zahlen), Single (Kommazahlen möglich) oder String (Buchstaben) definieren. Im
Falle der Slideshow benötigt man natürlich Bilder. Diese werden nach der Definition der Abfolge einfach mit Hilfe einer Pfadangabe zu den jeweiligen Bilddateien zwischen zwei
Klammern angegeben.
Wiederum wurden manche Attribute anhand eines Videoturtorials von Galileo Design25 erlernt und erklärt.
25
Vgl. Galileo Computing; Webseiten programmieren und gestalten – Video Training; Kapitel 5.5 „Array,
Objekt, Funktion― (8.2.2011)
32
4. CMS, Datenbanken & Websiteveröffentlichung
In dem letzten großen Kapitel wird man einen Überblick über bestimmte Verwaltungsmöglichkeiten einer Homepage erlangen und ebenso etwas über die verschiedensten Möglichkeiten zum Publizieren erfahren.
Es gibt eine Vielzahl an kostenlosen CMS, unter anderem Joomla26 (für die Verwaltung kleinerer Websits geeignet) oder Drupal27 (bereits für größere Websits gebräuchlich, vor allem für
Community-Projekte). Später wird der Nutzen von jenen noch genauer erklärt.
Datenbanken sind, wie der Name schon sagt, Speicher für Daten, die in der Lage sind eine
große Menge an Daten schnell zu sortieren und bei Bedarf schnell zu finden. Das wohl berühmteste Programm ist MySQL28. Datenbanken kommen vor allem bei sehr großen Webprojekten zum Einsatz, denn dadurch werden die Daten sortiert und schnell aufrufbar. – Daher
vermeidet man ein großes Chaos. Da man bei der Webseite für die Band nicht eine große
Menge an Daten hat, ist die Erstellung jener nicht so wichtig. Deswegen wird auf jene nicht
näher eingegangen. Datenbaken werden bei riesigen Portalen wie z.B. Youtube29 sinnvoll
bzw. sind sie essentiell bei großen Webprojekten.
Das letzte Unterkapitel wird von der Veröffentlichung der Website handeln. Denn spätestens
bei der Publizierung der Webseite sollte man sich Gedanken über den richtigen Webhost (den
besten Anbieter) machen und man sollte auch alle rechtlichen Maßnahmen treffen, dass man
später nicht wegen Urheberrechtsverletzungen angeklagt werden kann! Ebenso ist eine Validierung (Prüfung) des HTML-, CSS- und Javascript-Codes erforderlich. Zusätzlich kann man
die Performance und die Ladezeit optimieren.
26
Vgl. Joomla – because open source matters; http://www.joomla.de/ (12.2.2011)
27
Vgl. Drupal; http://drupal.org/ (12.2.2011)
28
Vgl. MySQL; http://www.mysql.com/ (12.2.2011)
29
Vgl. YouTube; http://www.youtube.com/ (12.2.2011)
33
4.1 CMS – Content-Management-System
CMS ist eine Abkürzung für „Content-Management-System―
Ein Content-Management-System (kurz: CMS, übersetzt: Inhaltsverwaltungssystem) ist ein System zur gemeinschaftlichen
Erstellung, Bearbeitung und Organisation von Inhalten. Diese können aus Text- und Multimedia-Dokumenten bestehen. Ein
Autor kann ein solches System in den meisten Fällen ohne Programmier- oder HTML-Kenntnisse bedienen.30
Es wurde bereits erläutert, dass es eine Vielzahl an „Open Source― CMS gibt. Nun hat man
den Begriff Open-Source schon etliche Male gehört, jedoch nie wirklich eine Erklärung zu
diesem bekommen. Open Source sind Programme, bei denen es als Benutzer erlaubt ist, den
Quelltext einzusehen und an dem Programm selbst Modifikationen durchzuführen. Open
Source heißt ja wortwörtlich übersetzt „offene Quelle― – daraus lässt sich schließen, dass alle
Programme, die so betitlet sind, für jeden zum Gebrauch bereit stehen und man sich an der
Weiterentwicklung beteiligen kann. CMS eignen sich besonders für Personen, die selbst sehr
wenig Kenntnisse im Bereich Webdesign haben. Durch Content-Management-Systeme wird
diesen Benutzern die Konstruktion einer Homepage in einem benutzerfreundlichen Interface
(= Benutzeroberfläche) ermöglicht. In dem deutschsprachigem Raum ist Joomla das wohl
bekannteste CMS.
„(...) Es eignet sich ausgezeichnet für kleinere und mittlere Auftritte, aber auch große Portale sind
mit diesem System bereits realisiert worden.“31
30
Vgl. Content-Management-System; http://de.wikipedia.org/wiki/Content-Management-System (12.2.2011)
31
Vgl. Joomla – because open source matters; http://www.joomla.de/neuigkeiten.html (12.2.2011)
34
4.2 Websiteveröffentlichung
Selbst bei der Veröffentlichung der Webseite, also eigentlich dem finalen Schritt der Homepagekonstruktion, kann es zu vielerlei Problemen kommen. Daher sollte der richtige „Webhost― gefunden werden, Rechtliches vor der Publikation geklärt sein und das richtige Produkt
beim Anbieter bestellt werden. Nun zu dem Begriff Webhost: Webhost bedeutet übersetzt
soviel wie „Webanbieter―. – Webanbieter gibt es inzwischen wie Sand am Meer, daher ist
mit großer Sorgfalt der richtige unter jenen zu wählen. Dabei gibt es immer ein paar Branchenriesen, die, einerseits sicherlich stabil sind – d.h. sie würden nicht so schnell in Konkurs
gehen – andererseits erfüllen jene Webgiganten vielleicht nicht ihre individuellen Bedürfnisse. Daher sollte man einen zuverlässigen Webhost herauspicken, der neben stabilen Servern
auch eine große Produktpalette bietet. Nun hat man sicherlich schon einige „Hostingbegriffe―
aufgeschnappt, jedoch überhaupt keine Ahnung, was diese bedeuten könnten. Die Webseite
der Band basiert auf keinem riesigen Konzept, daher würde eine billige Variante der Veröffentlichung reichen. Die Seite bräuchte keinen eigenen Server. – Dazu nun aber die verschiedenen Hostingmöglichkeiten.
Vorab sollte man noch die Begriffe wie „Webspace― oder „Traffic― 32 erläutern und überprüfen, ob der ausgewählte Webhost ihre Skriptsprachen unterstützt. Webspace bedeutet wortwörtlich übersetzt „Webplatz―. Der Webspace sollte bei jedem Internetanbieter angegeben
sein. Der Webspace gibt eine verfügbare Menge an Datenvolumen (in Megabyte = MB oder
Gigabyte = GB angegeben) an, die man für die Homepagedateien zur Verfügung gestellt bekommt. Normalerweise reichen einige Megabyte aus, da die Dateien der Webseite nicht allzu
groß sind. Bedeutend mehr Webspace braucht man hingegen schon für größere Portale, bei
denen diverse Medien online gestellt werden, die schon mehrere MB bis zu GB an Platz benötigen (Videos, Musikarchive u.a.). Traffic ist hingegen schon wichtiger. Traffic bedeutet auf
Deutsch Verkehr. – In der Webbranche bezieht sich der Begriff auf den Datenverkehr. Dieser
gibt an, wie viele Daten von ihrem Server aus zu den Benutzern, die ihre Seite betrachten,
versendet werden. Anhand eines Beispiels ist es wahrscheinlicher besser zu erklären. Bei-
32
Vgl. Galileo Computing; Webseiten programmieren und gestalten – Video Training; Kapitel 4.2 „Der richtige
Webhost― (13.2.2011)
35
spielsweise hat die Homepage nun ein Volumen von 10 MB und man hat einen monatlichen
Traffic von 100 GB zur Verfügung. Somit könnte die Homepage 10.000 Mal besucht werden,
bis ihr Datenverkehrsvolumen aufgebraucht ist. Heutzutage ist es schon üblicher „TrafficFlatrates― zu erhalten. Das heißt, man muss nicht mehr eine bestimmte Menge an Datenvolumen zahlen, sondern kommt nur für das verbrauchte Datenvolumen auf. Dadurch wird einem
vielleicht bewusst, wie viel Trafficvolumen bekannte Internetseiten aufbrauchen. Facebook33
benötigt wahrscheinlich zigtausend Terrabyte (1 Terrabyte = TB = 1000 Gigabyte) an Datenvolumen. Wenn man bedenkt, dass jene Communityportale mehrere Millionen Male pro Tag
aufgerufen werden, ist die Summe an Daten unvorstellbar groß! Zuletzt sollte noch beachtet
werden, welche Skriptsprachen der jeweilige Anbieter unterstützt. Denn, wenn man diesen
entscheidenen Faktor nicht beachtet, kann es vorkommen, dass man einen Host besitzt, jedoch
die gecodete Webseite von dem Host nicht unterstützt wird. Da nun die wichtigsten Termina
erklärt wurden, werden nun die verschiedenen Hostingmöglichkeiten aufgelistet und erklärt.
Webhosting für Privatanwender (auch „Shared-Hosting“genannt)
Hierzu gibt es verschiedene Pakete, die für kleinere Webprojekte ausreichend sind. Für derartige Produkte belaufen sich die einmaligen Setup-Preise (Setup = Montage / Webseite auf den
Server laden) von 1 bis max. 10 Euro. Die monatlichen Gebühren liegen in derselben Preisklasse. Sobald die Performance der Webseite nicht mehr in Ordnung ist, sollte man sofort den
Betreiber kontaktieren. Es ist keine Seltenheit, dass ihre Kapazität ausgeschöpft ist. Denn bei
dieser Form des Webhostings hat man keinen eigenen Server für die Webseite, da über den
Server in der Regel auch noch rund 20-30 andere Webseiten betreut werden. Daher auch der
englische Name Shared-Hosting (shared = geteilt). Wenn alle Webseiten zu derselben Zeit
einen „Besucheransturm― verbuchen würden, dann würde der Server, auf dem diese laufen,
zusammenbrechen. Denn er ist so konzipiert, dass dieser die Leistungsressourcen zu der Webseite, die jene Ressourcen gerade benötigt, transferiert. Deswegen könnte er theoretisch unter
33
Vgl. Facebook; http://www.facebook.com/ (13.2.2011)
36
Vollbelastung aller Webseiten, die auf dem Server laufen, zusammenbrechen – ein großer
Nachteil des „normalen― Hostingprodukts.
Virtual Server
Der Name gibt schon an, dass es sich nicht bereits um einen kompletten Server, der nur für
die Benutzung eines Webseiteninhabers gedacht ist, handelt, sondern ein „virtueller― Server
ist der, der eine bestimmte Kapazität eines echten Servercomputers einnimmt. Der einzige
Unterschied zu dem normalen Webhosting besteht darin, dass man mit einem Virtual Server
weniger Mitinhaber eines Servercomputers hat und dadurch mehr Serverleistung bereit steht.
Normalerweise teilt man sich den Server mit max. 5 weiteren Personen. Deswegen erhält jeder Mitinhaber bereits mehr Leistung für die Webseite. Jedoch muss man bei einem Virtual
Server den Server bereits komplett selbst verwalten. Daher ist es nötig, das gewisse „Knowhow― zu haben. Als Hobbyentwickler von Webseiten sollte man daher lieber auf die erstgenannte Variante zurückgreifen, da es zu vielen Komplikationen mit der Serververwaltung
kommen kann!
Dedicated Server
Dedicated heißt bereits, dass man einen eigenen Servercomputer in dem Rechenzentrum des
Webhost erhält und daher die volle Leistung ausschöpfen kann. (Dedicated heißt übersetzt
unter anderem „gewidmet, speziell für ...―) Jedoch muss man, ebenso wie bei dem Virtual
Server, alles alleine verwalten und sollte bereits Erfahrung mit dem Servermanagement haben! Man müsste die neuesten Versionen der Skriptsprachen installieren, den Computer verwalten und das gesamte Datenmaterial der Webseite mit dem des Webservers synchronisieren. Im Gegensatz zu dem normalen Webhosting ist die Anschaffung eines Dedicated Servers
natürlich schon um einiges teurer. Diese Variante des Webhostings brauchen bereits größere
Internetportale mit mehreren hunderttausend Benutzern; die Anschaffung eines Dedicated
Servers für eine normale Homepage wäre eine Fehlinvestition.
37
Managed Hosting
Inzwischen bieten jedoch viele Anbieter bereits das sogenannte „Managed Hosting―. Hierbei
erhält man wiederum einen eigenen Servercomputer, muss sich jedoch nicht mehr mit der
Verwaltung des Server herumplagen. Ein Mitarbeiter des Webhosts verwaltet dann den Server, installiert etwaige Updates und gibt bei Problemen Auskunft. Logischerweise ist diese
Art von Hosting dann die Teuerste und in dem Fall der Bandwebseite irrelevant!
4.3 Rechtliches
Ein Faktor, der vor der Publizierung der Seite beachtet werden muss, ist das Erstellen eines
sogenannten Impressums.
Ein Impressum (lat. impressum „Hineingedrücktes― bzw. „Aufgedrücktes―) ist eine gesetzlich vorgeschriebene Herkunftsangabe in Publikationen, die Angaben über den Verlag, Autor, Herausgeber oder Redaktion enthält, vor allem um die presserechtlich für den Inhalt Verantwortlichen kenntlich zu machen.34
Dies ist die allgemeine Worterklärung, hierbei wohl eher auf ein Buchimpressum bezogen.
Jedoch gibt es keine allzugroßen Unterschiede zu dem Impressum, das bei Internetseiten erstellt werden muss. Nun stellt sich sicherlich die Frage, warum denn bei der Bandseite noch
kein Impressum vorhanden ist. Es besteht nur dann die Pflicht, ein Impressum zu erstellen,
wenn jene Internetseite für einen kommerziellen Nutzen erstellt wurde. Solange die Bandseite
keinen „Merchandisehandel― betreibt, besteht kein Grund jenes zu erstellen. Zudem ist die
Seite ja wohl noch länger nicht publik, da man den Auftraggeber vorerst über die monatliche
Finanzierung jener Seite informieren muss. Natürlich ist es schwierig zu bestimmen, ob man
nun eine Seite für den kommerziellen Nutzen betreibt oder nicht, daher ist es ratsam immer
ein Impressum nach einer bestimmten Vorgabe zu erstellen. Anhand der Bandseite sollten in
dem Impressum mindestens ein Vorname und Nachname und zwei Kontaktmöglichkeiten (EMail/Kontaktformular/Telefonnummer) angegeben sein. Weitere Bestimmungen wie zum
34
Vgl. Impressum; http://de.wikipedia.org/wiki/Impressum (13.2.2011)
38
Beispiel Handelsregistereintrag oder Art des Gewerbes sind vollkommen irrelevant bei der
Bandwebseite. Ebenso ändern sich die Gesetze ständig.
„Ich darf Sie in diesen Belangen auch gar nicht beraten [...] am besten Sie informieren sich
selbst, oder wenden sich an einen Rechtsanwalt―35
Zusätzlich kann man eine Datzenschutzerklärung verfassen, in der man dem Benutzer entweder versichert, dass man keine Daten von jenem erhebt oder, dass man bestimmte Daten abfragen wird. – In Bezug auf die Bandwebsite werden natürlich keine Daten von Benutzern
erhoben.
Es gibt einige Stolperfallen, auf die man nun noch hingewiesen werden sollte. Völliger Mumpitz sind „Disclaimer― (übersetzt = Widerruf), da jene rechtlich nicht anerkannt werden.
Wenn man z.B. Fremdlinks auf der Website implementiert und sich mit Hilfe eines Disclaimers von diesen distanzieren will, um sich somit rechtlich abzusichern, wird man leider enttäuscht werden! Das Gesetz gibt in diesem Fall vor, dass der Homepageinhaber sich über alle
Inhalte der Fremdlinks bewusst sein muss und diese mit reinem Gewissen dem Internetbenutzer zur Verfügung stellen kann.
Es hilft gar nichts, wenn man Folgendes unter den Fremdlinks notiert:
„Hiermit distanziere ich mich ausdrücklich von allen Inhalten der von mir verlinkten Seiten.“
Wichtig ist es, hierbei sehr vorsichtig zu agieren und keine Fremdlinks auf der Webseite aufscheinen zu lassen, solange man nicht zu 100 Prozent sicher ist, dass es sich auf dieser Seite
um legalen Inhalt handelt. Ein sehr heißes und umstrittenes Pflaster, das bei dem Projekt nicht
zum Tragen kommt, ist der sogenannte „E-Commerce―. E-Commerce betreiben jene Internetseiten, die in „Online-Shops― verschiedene Produkte zum Verkauf anbieten wie z.B. Amazon.36
35
Vgl. Galileo Computing; Webseiten programmieren und gestalten – Video Training; Kapitel 4.13 Rechtliches
(13.2.2011)
36
Vgl. Amazon; http://www.amazon.de/ (13.2.2011)
39
Hierbei ändern sich die rechtlichen Bedingungen ständig und oftmals muss man mit Klagen
von konkurrierenden Online-Shops rechnen. In diesem Falle braucht man dringend einen
kompetenten Juristen, der sich in dieser Sparte gut auskennt. Daher sollte man als Laie keinen
Online-Shop eröffnen.
5. Zusammenfassung
Ich habe mich seit dem Schulbeginn im September intensiv mit der FBA-Erarbeitung auseinandergesetzt. Anfangs war ich noch etwas unsicher und versuchte möglichst viele Informationen zu sammeln. Ich habe einiges in Bezug auf HTML, CSS und JavaScript durch diverse
Video-Turtorials dazu gelernt. Parallel dazu habe ich mir bereits überlegt, wie ich die FBA
überhaupt unterteilen sollte. Schlussendlich entschied ich mich, die FBA in vier große Bereiche zu unterteilen und zu jedem Bereich jeweils den praktischen Teil gleich zu erarbeiten.
Ein weiteres Ziel war, dass ich den praktischen Teil auch möglichst verständlich erkläre. Ich
möchte, dass meine FBA für einen Laien verständlich ist und dieser dann mit Hilfe meiner
Arbeit auch Kenntnisse auf dem Gebiet Webdesign erlangen kann. Es soll als eine Art Turtorial dienen.
FBA und Webseite nahmen langsam eine anspechende Form an und es wurde immer leichter,
an beiden Teilen zu arbeiten. Sobald ich an der Facharbeit gearbeitet habe, war ich sehr motiviert, nicht nur, um jene erfolgreich zu beenden, sondern auch, weil ich mit jedem neuen Kapitel eine Menge dazugelernt habe.
Ich halte auch das korrekte Zitieren für sehr wichtig; es wird mir im späteren Leben hoffentlich bei der Abfassung der Diplomarbeit helfen.
Der praktische Teil sagte mir besonders zu, da ich einen passenden Auftraggeber gefunden
hatte und die Webseite somit nicht „umsonst― konstruiert wurde. Ohne den praktischen Teil
wäre es wahrscheinlich mit der Zeit ziemlich ermüdend geworden, die Motivation bei der
Erarbeitung der FBA weiterhin aufrecht zu erhalten. Dies war auch das erste Webprojekt, in
40
dem ich ausschließlich im Code-Bereich gearbeitet habe und nicht wie sonst immer die Seite
durch einfaches Tabellen-Layouting erstellt habe. So konnte ich mir bestimmte HTML- und
CSS-Begriffe aneignen und lernte diese korrekt zu benutzen.
Das Lernziel, das ich mir selbst gesetzt habe, habe ich meines Erachtens erfüllt. Jetzt bin ich
nicht mehr auf irgendwelche „Homepagebaukästen― oder CMS angewiesen. Um meine Fähigkeiten im Bereich Webdesign auch weiterhin verbessern zu können, habe ich bereits wertvolle Tipps bekommen und werde auch weiterhin nach Auftraggebern in meinem Bekanntenkreis Ausschau halten. Übung macht ja bekanntlich den Meister.
Abstract
I’ve been working on my FBA since the beginning of this school year in September. At first I
was kind of unsure how to start working on the FBA and I tried really hard to gather as much
information as possible. I’ve learned a lot of new things about HTML, CSS and JavaScript
throughout numerous Video-Tutorials.
At the same time I’ve been thinking about, how to structure my FBA and came to the conclusion, that I’m going to divide the whole work into four main chapters with several subcategories. Furthermore I’ve decided to give the needed information, about the practical part, in each
chapter, referring to the chapter’s headline. However, another personal aim was to explain the
practical part in a way, that everyone, who would read it, would be able to understand the
main content. The FBA should be like a tutorial for people who haven’t got any clue about
Web-Design.
After a while it has gotten very easy to work on it. By then I was very motivated on working
on the FBA, not just with the aim to finish it, but also the aim to learn a lot of new stuff. With
every finished subchapter, I’ve felt comfortable, because I’ve learned something important for
myself. The quotations, which I had to make, were exhausting at first but now I know it’s
very important to be that ―strict‖ with quoting something. Thus it’s a good preparation for my
upcoming degree dissertation.
41
The practical experience suited me perfectly, because I’ve found a good client and that way
the website was constructed for a purpose. I guess without that purpose I wouldn’t have been
motivated to work on the Homepage for such a long time. It was also my first Web-Project,
where I’ve only been working in the Source-Code. – After all it was totally worth it! I’ve
learned a lot of new commands and know how to use it properly and in an effective way for
creating a website.
I’ve reached all my personal aims, though I did not think I could really achieve them. Now I
don’t need to use CMS or construction kits anymore, I’ve just started to realize how important
it is to understand the Source-Code and check it for any valid mistakes. For the future I’ve
planned to find new clients, to get better in Web-Developing. Skill comes along with practice.
42
6. Quellenverzeichnis
Internetquellen
http://www.apachefriends.org/de/xampp.html (14.10.2010)
http://de.wikipedia.org/wiki/World_Wide_Web_Consortium (17.10.2010)
http://de.wikipedia.org/wiki/Zeichenkodierung (2.11.2010)
http://forum.de.selfhtml.org/archiv/2007/7/t155986/ (18.11.2010)
http://www.metatab.de/meta_tags/robots.htm (18.11.2010)
http://de.wikipedia.org/wiki/Cascading_Style_Sheets (29.11.2010)
http://de.wikibooks.org/wiki/Websiteentwicklung:_CSS:_Geschichte (29.11.2010)
http://www.webmaster-crashkurs.de/text-ausrichtung-ueber-css.htm (26.12.2010)
http://de.wikipedia.org/wiki/Template (26.12.2010)
http://www.freewebtemplates.com/ (28.12.2010)
http://www.freewebtemplates.com/download/templates/10232 (28.12.2010)
http://directtools.de/wissen/normen/loremipsum.htm (29.12.2010)
http://de.wikipedia.org/wiki/Lorem_ipsum (29.12.2010)
http://www.loremipsum.de/ (29.12.2010)
http://emff.sourceforge.net/ (5.01.2011)
http://www.myspace.com/ (5.01.2011)
43
http://aktuell.de.selfhtml.org/artikel/grafik/flashmusik/ (5.01.2011)
http://www.toofiles.com (5.01.2011)
http://de.wikipedia.org/wiki/JavaScript (7.2.2011)
http://www.joomla.de/ (12.2.2011)
http://drupal.org/ (12.2.2011)
http://www.mysql.com/ (12.2.2011)
http://www.youtube.com/ (12.2.2011)
http://de.wikipedia.org/wiki/Content-Management-System (12.2.2011)
http://www.joomla.de/neuigkeiten.html (12.2.2011)
http://www.facebook.com/ (13.2.2011)
http://de.wikipedia.org/wiki/Impressum (13.2.2011)
http://www.amazon.de/; (13.2.2011)
Buch- und Videoquellen
Förster Klaus; Öggl Bernd: HTML 5 – Leitfaden für Webentwickler München: AddisonWesley 2010
Henick, Ben: Das Beste an HTML & CSS. Köln: O’Reilly 2010
Niederst Robbins, Jennifer: HTML & XHTML – kurz & gut. Köln: O’Reilly 2010
Webseiten programmieren und gestalten. Video Training. DVD-ROM. Bonn: Galileo Press
2010
44
Protokoll
 Ende der Sommerferien: Kontaktaufnahme mit Prof. Peter Tschuffer + Themenwahl
 2. Schulwoche Auftraggeber gefunden, „Dominik Bulfon― (Gitarrist der Band
„Exanimalis―)
 Mitte September: Dispositionsabgabe
 19. Oktober: Wiedervorlage der Disposition und Gespräch mit Prof. Tschuffer
 Ende Oktober  Bandlogo + Infos von Dominik Bulfon erhalten (Kommunikation via
Facebook und telefonisch)
 22.-26. Oktober (verlängertes Wochenende)  Intensive Recherche & Fortbildung im
Bereich XHMTL, CSS und Javascript
 November: Erarbeitung der FBA
 Mitte Dezember: Besprechung mit Herrn Prof. Tschuffer (Zitierregeln, Videoturtorial,
etc.)
 21. Dezember: Besprechung der FBA-Fortschritte mit Herrn Prof. Tschuffer und Planung der Arbeiten an der FBA über die Winterferien.
 Winterferien: Erarbeitung der FBA
 Mitte Jänner: Besprechung der restlichen Kapitel der FBA mit dem Betreuungslehrer
 Mitte Febrar: Inhaltliche Fertigstellung der FBA und Beginn des Korrkturlesens
 17. Februar: Besprechung mit Herrn Prof. Tschuffer
 Semesterferien 2011: Beendigung der FBA
 2. März: Letzte Besprechung der FBA mit Herrn Prof. Tschuffer
 1. Märzwoche: Spiralisierung der FBA
45
Disposition
601226/10/11/4
Entwicklungen und Möglichkeiten im Design von Webseiten, veranschaulicht
an der Fertigung einer Website für die Grazer Musikgruppe „Exanimalis“ –
mit besonderem Augenmerk auf die optische Wirkung
Allgemein
Autor
Strunz Paul
Schule
BRG Graz, Petersgasse
Gegenstand Informatik
Betreuer
Tschuffer Peter, Mag.
LSI
Hinteregger Robert, Mag. Dr.
Stichwort Website Erstellung
Disposition
Angestrebte Ziele der Arbeit und persönlicher Bezug zum Thema
Neuer Titel:
Entwicklungen und aktuelle Möglichkeiten im Webdesign - veranschaulicht an der Fertigung
einer Website für die Grazer Musikgruppe „Exanimalis―
Beschreibung der Layout-Möglichkeiten (mittels Tabellen – bei Framesets – über die Raumaufteilung mit div-Elementen und der Trennung der Bereiche Inhalt, Layout und Animation –
Neues mit HTML5 und CSS3) und Darstellung dieser unterschiedlichen Konstruktionsmöglichkeiten anhand der Erstellung einer Website für die Band Ex Animalis.
Schon früh amateurhafte Site-Erstellung mit Homepagebaukästen, in der Oberstufe im Rahmen des Kurssystems entsprechende Fachkurse belegt, nun auch Interesse an der Erstellung
einer professionellen Website mit besonderer Berücksichtigung der visuellen Effekte.
Inhaltliche Grobgliederung
• Erläuterung der Probleme bei der Verwendung „unsichtbarer― Layout-Tabellen.
• Vor- und Nachteile von Framesets bei der Positionierung von Inhalten.
• Erklärung der Vorteile, die sich aus der strikten Trennung von Inhalt (XHTML), Layout
(CSS) und Animation (JavaScript) ergeben.
• Neuerungen durch HTML5 und CSS3
• Erleichterungen durch die Verwendung von Vorlagen, Templates und Homepagebaukästen.
• Konstruktion einer Website für eine Musikgruppe und Dokumentation der unterschiedlichen
Gestaltungsmöglichkeiten auch unter dem Aspekt der Barrierefreiheit.
Voraussichtliche Schwerpunkte der Arbeit
46
Darstellung der Designmöglichkeiten bei Websites und Erstellung einer eigenen Website.
Voraussichtlich verwendete Methoden und zur Verfügung stehende Unterlagen und
Hilfsmittel
Recherche in der Literatur und im Internet – Erstellen von Content (Text, Bild, Audioclips) –
Dokumentation.
Printmedien:
Henick, Ben (2010): Das Beste an HTML & CSS. Best Practices für standardkonformes
Webdesign. ISBN: 978-3-89721-617-4
Mora, Nils (2010): Adobe Photoshop CS5 für Webdesigner. ISBN: 978-3-8266-5607-1
Schaefer, Christian (2010): Webseiten programmieren und gestalten. ISBN: 978-3-83621633-3
Stocks, Elliot (2009): Sexy Webdesign. Wie man mit guten Konzepten tolle Websites baut.
ISBN: 978-3-89864-631-4
Uehlin, Fabian (2008): Barrierefreie Webseiten. ISBN: 978-3-8266-1674-7
Internet:
http://jendryschik.de/wsdev/einfuehrung/
http://dciwam.de/checkliste/
http://www.freewebtemplates.com/
http://www.slideshare.net/Larz73/html5-css3
Editoren wie Expression Web, aber auch Open-Source-Software wie Audacity (Audioeditor
und Aufnahmesoftware) und GIMP (Linux-Bildbearbeitung).
Sonstige Vereinbarungen
37
37
https://citrix.lsr-stmk.gv.at/Schulverwaltung/default.aspx (2. 3. 2011) – Titel nach Wiedervorlage am 19. 10.
2010 geändert.
47