Informationen über dieses Buch erhalten sie im Anhang: Dieses Buch

• Druckseite (Druckseite.html)

• Inhaltsverzeichnis
  • Teil 1 - Anfänger
    • Internet
      • Ein Netz
      • Aufbau
      • Dienste
      • Geschichte
    • World Wide Web
      • Webseiten
      • Software
      • Infos nachschlagen
      • Geschichte
    • Inhalte
      • Vorbereitung
      • Visitenkarte
      • Absatz und Umbrüche
      • Verweise
      • Grundgerüst
    • Layout
      • Quellcode
      • Direkte Formate
      • Formatvorlagen
    • Dynamik
      • Programme verstehen
      • Dynamisches HTML
      • Dokument Object Model
    • Webpräsenz
      • Weitere Tags
      • Vorbereitungen
      • Webpräsenz
  • Teil 2 - Fortgeschritten
    • Fortgeschrittene Methoden
      • Quellcode analysieren
      • Erweitertes Layout
      • Animation
      • Stylesheet umschalten
      • Absätze einblenden
      • Anfahrt (OSM)
      • Bildergallerie
      • Formulare
      • Spezielle Dateien
    • Webpräsenz generieren
    • Webserver
    • Rahmenbedingungen
      • Barrieren
      • Recht
      • Werbung
      • Datenschutz
      • Suchoptimierung
    • Projektmanagement
      • Phase Ideenfindung
      • Phase Initialisierung
      • Phase Analyse
      • Phase Konzept
      • Phase Realisierung
      • Phase Einführung
      • Betrieb
  • Teil 3 - Profi
    • Techniken
      • Boxen
      • Schriften
      • Texte
      • Formeln
      • Canvas
    • Rezepte
      • Mehrsprachige Webpräsenz
      • SVG oder PNG
      • lokale Datei lesen
      • Suchen
    • Frameworks
      • Slidy
      • YAML
  • Teil 4 - CMS
    • Content Management
      • CMS
      • Client CM
      • Server CMS
    • Joomla
      • Joomla Begriffe
      • Joomla Überblick
      • Joomla Zusammenhang
      • Joomla Erweiterungen
      • Template erstellen
    • Typo 3
      • Typo3 Begriffe
      • Typo3 Überblick
      • Typo3 Zusammenhang
      • Typo3 Erweiterungen
      • Template und TypoScript
  • Teil 5 - JavaScript
    • Definitionen
      • Extern
      • Intern
      • Datenstrukturen
    • Ablauf
      • Anweisungen
      • Funktionen
      • Objekte
      • Zuweisungen und Ausdrücke
      • Bedingungen
      • Schleifen
    • DOM
      • Website ändern
      • Website erweitern
    • Ajax Beispiel
  • Anhang
    • Anhang: Allgemein
      • Anhang: Dieses Buch
      • Anhang: Fachbegriffe
      • Anhang: Tastaturkommandos
      • Anhang: Beispiel
      • Anhang: Syntaxübersicht
      • Anhang: Benutzung von FTP
    • Anhang: HTML
      • Anhang: Wichtige Tags
      • Anhang: Semantische Tags
      • Anhang: Formatierende Tags
      • Anhang: HTML-Universalattribute und Events
      • Anhang: HTML-Entities
      • Anhang: xhtml
      • Anhang: HTML 5
    • Anhang: CSS
      • Anhang: CSS-Syntax
      • Anhang: CSS-Eigenschaften
      • Anhang: CSS-Boxmodell
      • Anhang: CSS-Einheiten und Farben
    • Anhang: JavaScript
      • Anhang: JS-Syntax
      • Anhang: JS-Funktionen und Objekte
      • Anhang: JS reservierte Wörter
      • Anhang: JS Escape-Sequenzen
      • Anhang: JS-Bezeichner

Kapitel

n.v.

Einführung

Zunächst widmen wir uns in diesem ersten Teil etwas Theorie zum Internet und World Wide Web, um die Begriff zu trennen und den Hintergrund zu verstehen. Ein kurzer Anriss der jeweiligen Geschichte komplettiert diese Kapitel.

Dann bauen wir anhand eines Beispiels langsam eine einfache Version unserer Webpräsenz auf. Zunächst beschränken wir uns dabei auf eine Visitenkarte. Später wird das Beispiel dann immer komplexer und mündet in einer kompletten Webpräsenz. Dabei lernen wir die Techniken zur Webentwicklung wie HTML (Inhalte), CSS (Layout) und JavaScript (Dynamik) kennen.

Unterkapitel

n.v.

Einführung

Bevor wir uns mit dem World Wide Web beschäftigen, sollten wir uns dem Internet zuwenden.

Da gibt es einen Unterschied?! Ja, denn nur umgamgssprachlich werden die beiden Begriffe nicht unterschieden. Für Profis sind das zwei ganz verschiedene Dinge.

Wir betrachten das Netz an sich und seinen Aufbau. Als Infrastruktur bietet sich das Internet als Plattform für verschiedene Dienste an. Und seine Geschichte lehrt uns, warum das Netz heute so ist wie es ist.

Internet

Das Internet „an sich“ ist nicht direkt greifbar und somit auch nicht begreifbar. Wie können wir uns also dem Internet nähern. Fangen wir doch am besten mit einem praktischen Vergleich an.

Zwischennetz

Das Wort Internet besteht aus zwei Teilen: inter und net. Als Deutsche klingt uns das vertraut und wir dürfen wirklich Internetz übersetzen. „Inter“ bedeutet „zwischen“ und ein Netz verbindet Dinge (siehe Telefonnetz).

Machen wir einen kurzen Ausflug in die uns bekannte Welt: Eine Stadt. Eine Stadt hat ein Straßennetz. Auf dem Straßennetz komme ich von Punkt A nach Punkt B. Oder noch besser: Es verbindet Adresse A mit Adresse B. Von oben gesehen sieht so ein Straßennetz (http://de.wikipedia.org/wiki/Straßennetz) wie ein Spinnennetz (http://de.wikipedia.org/wiki/Spinnennetz) aus und so ist es sicherlich auch als Analogie (http://de.wikipedia.org/wiki/Analogie_(Rhetorik)) zu verstehen.

Wenn wir jetzt aber von Stadt zu Stadt oder Bundesland zu Bundesland fahren wollen, sind die Straßennetze der Städte wieder durch ein – vereinfacht gesagt – Überlandstraßennetz verbunden. Dieses Überlandstraßennetz entspricht in unserer Analogie dem Internet: Das Internet verbindet weltweit lokale Netze (LANs (http://de.wikipedia.org/wiki/Local_Area_Network)) von Firmen, Institutionen und heutzutage auch Privatpersonen.

Wie das Straßennetz ist das Internet also eine Infrastruktur (http://de.wikipedia.org/wiki/Infrastruktur) um Dinge zu befördern. Auf Straßen werden Personen und Güter transportiert, das Internet befördert Daten und Informationen. Es ist also dem Telefonnetz vergleichbar, das Faxe und Gespräche weiterleitet.

Wem gehört es?

Wie auch bei anderen Netzen (Straßen und Telefon) gehört das Internet keiner Institution. Bestimmte Firmen betreiben einen Teil des Netzes auf eigene Kosten. Andere Firmen vermieten wiederum ihre Infrastruktur oder binden den Endkunden gegen Gebühr an. Hier gibt es eine gewisse Diskrepanz zwischen Firmen, die mit Internetdiensten großen Profit machen und den Firmen, welche die Infrastruktur betreiben.

Netzneutralität

In diesem Zusammenhang spricht man heute immer mehr über Netzneutralität (http://de.wikipedia.org/wiki/Netzneutralität). Um diesen Begriff besser zu verstehen, folgt ein Beispiel aus dem Telefonnetz: Anbieter von Diensten mit 0190er/0900ter Nummern (Sex-Hotlines, Börsentelefone) können sehr viel Geld verdienen. Die Betreiber der Netze (Telekom, Arcor, …) bekommen aber immer nur einen festen kleinen Betrag.

Das Netz verhält sich aber trotzdem neutral gegenüber dem Dienst, d.h. er wird nicht bevorzugt. Der Netzbetreiber behandelt also diesen Premiumkunden genauso wie beispielsweise eine kostenlose Telefon­seelsorge.

Infrastruktur

Damit ist aber auch schon eine wichtige Unterscheidung klar geworden: Das Internet ist wie das Telefonnetz eine reine Infrastruktur. Die Dienste, die darauf laufen, sind eigentlich davon klar zu trennen. Umgangssprachlich vermischt sich das aber. So spricht man von der Telefonabzocke, obwohl das Telefon niemand abzockt, sondern höchstens der Diensteanbieter.

Ähnlich ist es mit dem Internet. Umgangssprachlich gebraucht man das Wort für zwei verschiedene Dinge. Einmal tatsächlich für die Infrastruktur, aber andererseits auch für den bekanntesten Dienst: das World Wide Web (WWW)! In diesem Buch meint das Wort „Internet“ allerdings immer die Infrastruktur.

Physischer Aufbau

Wie das Internet physikalisch funktioniert, mag uns an dieser Stelle nicht interessieren, da es für das Entwerfen von Webseiten nicht wichtig ist. Die Wikipedia gibt zur Technik (http://de.wikipedia.org/wiki/Internet#Technik) und den Protokollen (http://de.wikipedia.org/wiki/TCP/IP-Referenzmodell#TCP.2FIP-Referenzmodell) gerne Auskunft.

Der logische Aufbau des Netzes und seine Begriffe sind für uns aber sehr wohl wichtig.

Logischer Aufbau

Kommen wir zu unserem Vergleich mit dem Straßennetz zurück. Im Internet nehmen sie bestimmte Dienste wie das WWW in Anspruch. Genauso machen sie es ja auch in der Realität einer Stadt. Sie wollen beispielsweise ein Medikament in einer Apotheke holen.

Gehen wir davon aus, das sie sich in der Stadt nicht auskennen. Sie besorgen sich zu nächst - beispielsweise in den Gelben Seiten - den Namen einer Apotheke X. Anhand des Namens erfragen oder schlagen sie dann die Adresse nach. Mit der Adresse fahren sie beispielsweise per Taxi zu Apotheke.

Im Internet läuft das im Prinzip genauso. Sie besorgen sich (googeln) den Namen einer Internetapotheke (www.x-apotheke.de). Beim Besorgen der Adresse haben sie es im Internet einfacher. Das macht ein weiterer Dienst für sie, der Domain Name Service (http://de.wikipedia.org/wiki/Domain_Name_Service) (DNS, s. Anhang: Fachbegriffe). Auch die Fahrt mit dem Taxi bleibt ihnen erspart, da sie ja mit dem Browser ein dauerhaftes, preiswertes Transportmittel besitzen.

Das Internet kennt also auch die Unterscheidung von Namen und Adressen, wie im realen Leben. Diese sind übrigens - wie im wirklichen Leben - unabhängig vom verwendeten Dienst. Dass heißt, eine Adresse kann ein Dienst wie WWW und/oder Email bereitstellen.

Begriffe

Unter einer Adresse 123.45.67.89 kann sich sowohl eine Apotheke als auch ein Schuster befinden. Dann unterscheidet beide der Name – auch wie im richtigen Leben. Die Portnummer :80 (s.u.) kennzeichet eine WWW-Seite (Realität: Ladengeschäft) und kann normalerweise weggelassen werden. Andere Portnummern (http://de.wikipedia.org/wiki/Portnummer) sind für andere Dienste wie Post ausliefern (SMTP: 587) und Postfächer (POP3: 110) bestimmt.

Wie sie sehen kann ein Name auch mehrere Adressen haben. Gerade bei stark frequentierten Diensten wie Google ist das oft der Fall.

Nomenklatur

Für den Begriff der Webseite existieren leider sehr viele Synonyme (http://de.wikipedia.org/wiki/Synonym). Man spricht auch von Homepage, Website, Portal und Webpräsenz. Alle diese Begriffe habe ihre eigenen Ausprägungen, aber je nach Autor können diese variieren.

Dieses Buch verwendet durchgängig Webseite für ein einzelnes HTML-Dokument und Webpräsenz für den gesamten Internetauftritt.

Client/Server

Dienste sind Leistungen die ihnen jemand anbietet. In der Informatik spricht man in diesem Fall von Server (http://de.wikipedia.org/wiki/Server_(Software)) und Client (http://de.wikipedia.org/wiki/Client). Der Server bietet dem Client bestimmte Dienste an. Das können pro Server durchaus mehrere sein.

Achtung! In der Informatik kann ein Server und ein Client durchaus sowohl Hardware (http://de.wikipedia.org/wiki/Hardware) als auch Software (http://de.wikipedia.org/wiki/Software) sein. Wobei zur endgültigen Verwirrung sowohl auf einem Server (Hardware) auch ein Client (Software) und auf einem Client (Hardware) auch ein Server (Software) laufen kann (und heutzutage fast auch immer tut).

Dienste

Dienste werden also immer von einem (Software-)Server angeboten. Ein Software-Client stellt diesen Dienst dann dem Benutzer komfortabel zur Verfügung. Ein Protokoll (http://de.wikipedia.org/wiki/Protokoll) sorgt dabei dafür, das sich Client und Server verstehen.

Wir identifizieren die Internetdienste (http://de.wikipedia.org/wiki/Internetdienste) am einfachsten an den Client-Programmen: Outlook/Thunderbird (Mail-Client), Skype (Telefonie-Client), Whatsapp (Chat-Client), Internet Explorer/Firefox (Web-Client oder Webbrowser) usw.

Einige weitere Dienste als Beispiele:

Alte Dienste

Diese Dienste sind der breiten Öffentlichkeit nur als Spielarten des WWW bekannt.

Gopher (http://de.wikipedia.org/wiki/Gopher)

ein entfernter Vorläufer des WWW

Usenet (http://de.wikipedia.org/wiki/Usenet)

Diskussionsgruppen

Das Usenet ist beispielsweise mittels Google durchsuchbar (groups.google.com (http://groups.google.com)).

IRC (http://de.wikipedia.org/wiki/Internet_Relay_Chat)

Chat, Unterhaltung durch Texteingabe

Profidienste

Der Web-Profi kommt um bestimmte Dienste nicht herum.

Telnet (http://de.wikipedia.org/wiki/Telnet), SSH (http://de.wikipedia.org/wiki/Ssh)

(sicherer) Zugriff auf einen entfernten Rechner

FTP (http://de.wikipedia.org/wiki/File_Transfer_Protocol), SFTP (http://de.wikipedia.org/wiki/SSH_File_Transfer_Protocol)

(sicherer) Dateitransfer mit einen entfernten Rechner

Neuere Dienste

Sie haben das Internet auch bei nicht Technikern bekannt und beliebt gemacht.

E-Mail (http://de.wikipedia.org/wiki/E-mail)

Email senden und empfangen

World Wide Web (http://de.wikipedia.org/wiki/Www)

Web-Seiten anzeigen und Web-Anwendungen benutzen

Internettelefonie (http://de.wikipedia.org/wiki/Voip)

Telefonieren über das Internet

Da dieses Buch Webseiten gestalten will, ist für uns natürlich vor allem das WWW interessant.

Das Internet ist erst Ende der neunziger Jahre des zwanzigsten Jahrhunderts in das Bewusstsein der Menschen gerückt. Es ist allerdings schon erstaunlich viel älter. Die Anfänge reichen fast bis zu den Wurzeln der modernen Informationstechnologie (IT) zurück.

Wurzeln

Auch wenn das heutzutage immer wieder gerne verneint wird, liegt zumindest die Wurzel des Internets im militärischen Bereich. In den sechziger Jahren, zur Zeit des Kalten Krieges, entwickelten die Forscher der US-Militärs die Idee eines verteilten paketbasierten Datennetzes, welches dann später die Advanced Research Projects Agency (ARPA (http://de.wikipedia.org/wiki/DARPA)) umgesetzt hat.

Der Vorteil des ARPA-Netzes waren eben diese Attribute „verteilt“ und „paketbasiert (http://de.wikipedia.org/wiki/Paketvermittlung)“. „Verteilt“ meint, das es keine zentrale (also angreifbare) Instanz gibt und „paketbasiert“, das die Daten als kleine Paket individuell verschickt und registriert werden. Pakete die nicht angekommen sind, können so noch einmal angefordert werden.

Fortentwicklung

Weil sich dieses Netz als sehr robust erwies, haben die amerikanischen Universitäten schnell daran gefallen gefunden. Als offene Architektur konnten sie das ARPA-NET einfach an ihre Bedürfnisse anpassen und weiterentwickeln. Daraus entstand das TCP/IP-Protokoll, wie es auch heute noch im Internet verwendet wird. Als offener und einheitlicher Standard sorgte dieses Protokoll für den relativ schnellen Siegeszug des Internet auf der ganzen Welt.

Doch zunächst war das Internet als Infrastruktur noch sehr nackt. Als Dienste gab es vor allem den Zugriff auf Uni-Server und die Synchronisierung dieser. Die Studenten der Unis entdeckten allerdings schnell die weiteren Möglichkeiten. Sie schufen Blackboards (Nachrichtenbretter) und das Usenet (Diskussionsforen).

Verbreitung

In den USA, Europa und anderen Teilen der Welt arbeitete man zu dieser Zeit an eigenen Standards und Netzen. Große Firmen wie AOL, CompuServe und die Deutsche Post schufen eigene Datennetze. Doch der Einfluss der USA auf die IT sowie der offene Standard TCP/IP brachten das Internet auch in diesen Ländern voran.

In den USA war das militärisch und das zivile Netz mittlerweile entkoppelt. Für das zivile Backbone (Rückgrat) des Netzes setzte sich der Name Internet durch. Zuletzt bliebt dieses Internet als alleiniges weltweites Datennetz bestehen.

Unterkapitel

n.v.

Einführung

Der Dienst WWW (World Wide Web) bestand ursprünglich nur aus dem Transferprotokoll HTTP (http://de.wikipedia.org/wiki/HTTP) und der Hypertextsprache HTML (http://de.wikipedia.org/wiki/Html). Dafür hat sich auch der Begriff Webseiten eingebürgert. Heute sind die Vorlagensprache CSS (http://de.wikipedia.org/wiki/Cascading_Style_Sheets) und die Programmier­sprache JavaScript (http://de.wikipedia.org/wiki/JavaScript) dazu gekommen. Auf diese Teile gehen wir im weiteren Kursverlauf noch ausführlich ein.

Wir betrachten außerdem in einem Überblick die Software für die Webseitenentwicklung und erfahren wie wir zu relevanten Informationen kommen. Auch beim WWW ist seine Geschichte durchaus für uns interessant.

HTML-Familie

Die Hypertext Markup Language (HTML, Hypertext Auszeichnungs­sprache) ist wohl das am weitesten verbreitete Dateiformat und wohl auch das umstrittenste. Seine Stärken liegen im Klartextformat, in der Einfachheit und in der Erweiterbarkeit.

Angegriffen wurde HTML vor allen von Entwicklern und Designern. Diesen war die Sprache für ihre Bedürfnisse nicht spezifisch genug. Entwickler hätten gerne mehr Programmiermöglichkeiten und Designer mehr Layoutmöglichkeiten gehabt.

Entsprechend wurde HTML um JavaScript (Programmiermöglichkeiten) und CSS (Layoutmöglichkeiten) erweitert.

HTML - Hypertext

„Text lesen“ ist immer ein linearer Vorgang. Oft benötigt man aber Informationen, die an einer anderen Stelle stehen. Klassischerweise gibt es dann einen Verweis im Text.

Ist der Verweis allerdings nicht auf Papier sondern „im Computer“, liegt nichts näher als ihm direkt folgen zu können. Die Fähigkeit, mittels einer Verknüpfung (Link) in einen Text zu verweisen und dorthin springen zu können, nennt sich Hypertext. Diese Idee liegt nahe und ist dementsprechend alt.

HTML - Auszeichnungen

Auszeichnungen in einem Text dienten ursprünglich den Setzern aus der Druckindustrie als Anweisung für Semantik (http://de.wikipedia.org/wiki/Semantik) (Bedeutungen) wie Überschrift oder Fließtext.

Genauso funktioniert auch eine Auszeichnung in HTML. Ein bestimmtes Tag (http://de.wikipedia.org/wiki/Tag_%28Informatik%29) (Etikett oder Auszeichner) weist den Webbrowser an, bestimmte Formatierungen oder Eigenschaften dem Text zuzuordnen. Das sind zum Beispiel Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen.

Tags in HTML sind hierarchisch strukturiert, dass heißt sie stehen in Beziehung zueinander und können geschachtelt werden.

<ul>
  <li>1. Punkt</li>
  <li>2. Punkt</li>
  <li>3. Punkt</li>
</ul>

Am Beispiel kann man folgendes erkennen: Es gibt immer ein Starttag (<li>) und ein Endtag (</li>). Tags können ineinander geschachtelt werden (<ul><li> … </li></ul>). Allerdings ist dabei immer die Reihenfolge einzuhalten (Achtung falsch! <ul><li> … </ul></li>). Das Tag das zuletzt geöffnet wurde, muss immer zuerst geschlossen werden. Tags umschließen andere Tags und/oder Text.

HTML ist unabhängig vom Ausgabemedium. So kann ein HTML-Dokument beispielsweise auch über einen Sprachprozessor oder einen Drucker ausgegeben werden.

Stylesheets (CSS)

HTML, als reine Auszeichnungs­sprache, trennt nicht zwischen Darstellung und Inhalt, einem der Grundprinzipien der Informatik. Das stellt vor allem bei großen Projekten ein Hindernis dar, wenn sich das Layout einer Seite ändern soll. Es sind dann entsprechend alle Webseiten händisch aufwendig anzupassen.

Genau hier setzt CSS an: Inhalt (HTML) und Darstellung (CSS) werden in zwei getrennten Dateien gespeichert. Ändert man die Darstellung (CSS), passen sich automatisch allen davon abhängigen Webseiten an.

Dieses Buch verwendet deshalb von Anfang an CSS für Formatierungen, zumal dies längst alle modernen Webbrowser unterstützen.

JavaScript

HTML hat für den Informatiker noch ein zweites Problem: Es ist keine Programmiersprache. Jede Interaktivität mit dem Benutzer kann nur durch den Aufruf einer weiteren HTML-Seite erfolgen. Sie kennen das bestimmt: Ein Klick auf einen Link öffnet eine neue Seite.

Das hat aber zwei erhebliche Nachteile. Erstens muss immer eine komplette Seite nachgeladen werden und zweitens verhält sich eine Webanwendung anders als eine Computeranwendung. Dieses Problem löst JavaScript, als eine in die Webseite eingebundene Programmiersprache. Ähnlich wie CSS kann auch JavaScript innerhalb der HTML-Datei oder als gesonderte Datei vorliegen.

Da auch JavaScript aus der modernen Webseitengestaltung nicht mehr wegzudenken ist, wird es auch relativ früh in diesem Buch eingeführt. Allerdings geht es dabei nur um das Einbinden bestehender JavaScript-Funktionen. Die Programmierung ist ein eigenes Kapitel.

Klartextformat

HTML, CSS und JavaScript werden im sogenannten Klartextformat geschrieben. Können also mit jedem beliebigen Texteditor (Notepad) verfasst werden. Besser ist natürlich ein spezieller Editor, der die Syntax (http://de.wikipedia.org/wiki/Syntax) (Schreibweise) farblich unterscheiden kann (Notepad2, Notepad++, Hagen, …).

Sollten sie bisher Texte in einer Textverarbeitung geschrieben haben, müssen sie etwas umdenken. Deren Dateiformate sind kein Klartext – öffnen sie einfach einmal eine Office-Datei mit einem Texteditor. Allerdings kann fast jede Textverarbeitung als Dateiformat auch Klartext (meist „Text“ oder „Nur Text“ genannt) schreiben.

Natürlich existieren auch sogenannte WYSIWYG (http://de.wikipedia.org/wiki/WYSIWYG)-HTML-Editoren. Doch oft ist deren Ausgabe nicht hundertprozentig standard­konform. Am besten lernen sie HTML tatsächlich mit einem Texteditor.

Versionen

HTML ist leider immer noch nicht so einheitlich wie man das erwarten sollte. Es existieren nach wie vor noch einige Diskrepanzen zwischen den Browsern, die teilweise bei JavaScript und CSS noch größer sind. An diese Grenzen stoßen wir in diesem Buch allerdings eher selten und wenn gehe ich kurz darauf ein.

HTML

HTML liegt in verschiedenen Versionen vor (HTML 1.0, 2.0, 3.2, 4.01, 5.0 und XHTML 1.0, 1.1). Früher konnte es durchaus wichtig sein, sich an eine bestimmte Version zu halten. Heute ist eigentlich nur noch HTML 4.01 sowie XHTML 1.1 und die kommende Version 5 interessant.

HTML beruht auf SGML (http://de.wikipedia.org/wiki/SGML) (Standard Generalized Markup Language, Normierte Verallgemeinerte Auszeichnungs­sprache). Der richtige Sprachgebrauch lautet: HTML ist eine Anwendung von SGML. SGML verwendet eine sogenannte DTD (http://de.wikipedia.org/wiki/Dtd) (Document Type Definition, Dokumenttypdefinition), um die syntaktische Gültigkeit eines Dokumentes zu prüfen. Entsprechend existieren DTDs für die HTML-Versionen. Dazu später mehr.

xhtml

XHTML ist eine Neudefinition von HTML 4 auf Basis von XML (http://de.wikipedia.org/wiki/Xml) (Extensible Markup Language, erweiterbare Auszeichnungs­sprache). XML ist eine strengere Teilmenge und Vereinfachung von SGML. Es benutzt zur Gültigkeitsprüfung nicht nur DTDs, sondern auch XML-Schema (http://de.wikipedia.org/wiki/XML-Schema). Während DTDs eine eigene Syntax benutzen, verwendet XML-Schema wieder XML als Beschreibung der Gültigkeit. Trotzdem wird XHTML mit einer DTD auf Gültigkeit geprüft.

XML hat noch einige weitere Eigenschaften die Profis sehr schätzen. Vor allem die verschiedenen Zugriffs- und Manipulation­methoden sind dabei hervorzuheben. Das mag den Anfänger erst einmal nicht interessieren. Es schadet aber auf dem Weg zum Profi nicht, diese Vorzüge in der Hinterhand zu haben.

CSS und JavaScript

Die kommende CSS Version Level 3 ist zwar schon zu großen Teilen spezifiziert, aber noch nicht in allen Web-Browsern vollständig umgesetzt. CSS Vorlagen bedürfen also, genauso wie JavaScript, eine eingehende Prüfung mit den gängigen Browsern. JavaScript 1.5 ist als ECMA-262 Version 3 beim W3C standardisiert. Microsoft nennt die Sprache Jscript.

HTML/xhtml

Zu den Unterschieden zwischen HTML und XHTML siehe den Anhang: xhtml. In diesem Buch verwenden wir immer die XHTML-Schreibweise, da sie alle modernen Browser korrekt darstellen und sie uns leichter Fehler finden lässt.

Lokale Programme

Als Klartextformat bedarf das Schreiben von Webseiten normalerweise keiner speziellen Software. Trotzdem kann eine Software so manche spezielle Aufgabe vereinfachen. Da es nicht „die“ Software zur Web-Entwicklung gibt und sicherlich auch nie geben wird, folgt eine kurze, unvollständige Übersicht.

Webbrowser

Damit ihre Webseiten auf möglichst vielen Webbrowsern funktionieren, sollten sie sie entsprechend testen. Eine Mindestauswahl ist: Firefox (Rendering-Engine (http://de.wikipedia.org/wiki/HTML-Rendering): Gecko), Internet Explorer (Trident/Tasman), Google Chrome (WebKit) und Lynx auf zwei verschiedenen Betriebssystemen.

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#Browser) und bei Wikipedia (http://de.wikipedia.org/wiki/Liste_von_Webbrowsern).

Für den Mozilla Firefox (und Google Chrome) existieren einige interessante Erweiterungen für Webentwickler. Allerdings sind diverse dieser Erweiterungen in den neusten Versionen von Firefox schon enthalten.

Weitere bei Firefox Addons (http://addons.mozilla.org/de/firefox/).

HTML-Editoren

Bei den HTML-Editoren unterscheidet man textorientierte und WYSIWYG (http://de.wikipedia.org/wiki/WYSIWYG)-Editoren (What you see is what you get). Textorientierte Editoren helfen dem Entwickler meist mit Grundgerüsten und Vorlagen für gängige HTML-Tags. Oft haben sie auch eine integrierte Vorschau­funktion und eine rudimentäre Projektverwaltung. WYSIWYG-Editoren arbeiten im Grunde genommen wie eine Textverarbeitung. Man erstellt eine Webseite so, wie sie nachher aussehen soll.

Weitere bei selfhtml (http://aktuell.de.selfhtml.org/links/html-editoren.htm) und bei Wikipedia (http://de.wikipedia.org/wiki/Liste_von_HTML-Editoren).

Wenn sie einen WYSIWYG-Editor ausprobieren möchten, sollten sie erste Erfahrungen mit den freien Editoren NVU oder Kompozer sammeln.

Webserver

Es würde den Rahmen dieses Buches sprengen auf Webserver genauer einzugehen. Ein guter Einstiegspunkt für Informationen zu diesem Thema sind selfhtml und die Wikipedia (siehe Tabelle).

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#Webserver) und bei Wikipedia (http://de.wikipedia.org/wiki/Webserver).

FTP-Clients

Heutzutage können auch viele Dateibrowser (MS Explorer, Nautilus, Dolphin, Finder, …) bei Angabe des Dienstes (ftp://name:password@server.local) auf FTP-Server zugreifen.

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#FTP) und bei Wikipedia (http://de.wikipedia.org/wiki/Kategorie:FTP-Client).

Grafikprogramme und Multimedia

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#Multimedia) und bei Wikipedia (http://de.wikipedia.org/wiki/Grafiksoftware).

Portable Apps

Portable Apps (http://portableapps.com/de) sind Anwendungen, die auf einem USB-Stick installiert werden. D.h. sie können auf beliebigen (Windows) Rechnern von dem Stick gestartet werden. Für uns nützliche Apps sind:

• Firefox (Browser)
• Chrome (Browser)
• Lynx (Textbrowser)
• Notepad2 (Editor)
• Notepad++ (Editor)
• Kompozer (Editor)
• Filezilla (FTP-Client)
• DSynchronize (FTP-Client)
• 7-Zip (Pack-Programm)

und vielleicht

• VLC (Videobetrachter)
• IrfanView (Bildbetrachter)
• Gimp (Bildbearbeitung)

Für fortgeschrittene Webanwendungen kann man außerdem einen Webserver wie Server2Go (http://server2go-web.de/) auf dem Stick installieren.

SelfHTML

Eine komplette Referenz aller Informationen zur Webseitengestaltung finden sie unter: wiki.selfhtml.org (http://wiki.selfhtml.org/wiki/%%0%%) (veraltet, aber noch umfangreicher: de.selfhtml.org (http://de.selfhtml.org/%%0%%)). Ich werde mich in diesem Buch immer wieder auf Selfhtml beziehen, da ich der Meinung bin, dass man das Rad (HTML-Referenz) nicht ständig neu erfinden muss.

Alle neuen Tags bekommen auch eine Linksammlung auf diese Seiten in Klammern hinzugestellt: <p>. „S“ steht für die Referenz für das Tag in SelfHTML, „A“ für die Attribute des Tags und „W“ für das Tag im SelfHTML-WIKI. Da diese Referenz automatisch erstellt wird, muss sie nicht immer vollständig sein oder kann sogar ganz fehlen.

Entsprechendes gilt für CSS-Eigenschaften color: „W“ für die Eigenschaft im SelfHTML-WIKI und „C“ für die Eigenschaft im CSS-WIKI.

Kurzreferenzen zum schnellen Nachschlagen finden sie auch im Anhang.

Andere Seiten

Weitere Seiten:

• selfhtml Referenz (http://wiki.selfhtml.org/wiki/Referenzen)
• CSS for you (CSS für dich (http://www.css4you.de))
• CanIUse - Welches Tag läuft in welchen Browser (http://caniuse.com)
• CSS Wiki (http://www.css-wiki.com)
• Webdesign-Forum (http://www.html.de)

Außerdem finden sie in den Buchhandlungen viele Referenzbücher, die allerdings sehr schnell veralten. Deshalb kann ich an dieser Stelle keine Empfehlung abgeben. Für sehr Papieraffine ist allerdings eine beliebige Referenz sicherlich nicht verkehrt.

Ein Blick ins Netz ist für neuste Informationen immer nötig. Zu schnell ändern sich heutzutage die Browserversionen und damit die Unterstützung von neuen Features.

Wissenschaft

Die Geschichte des World Wide Web (WWW) wäre ohne das Internet nicht denkbar. Sie beruht auf den universitären Wurzeln des Netzes. In Publikationen sind die Verweise auf andere Publikationen für Forscher sehr wichtig.

So war es ein logischer Schritt, das Internet dazu zu nutzen. Erstaunlicherweise kommt gerade heute wieder die Diskussion auf, wissenschaftliche Artikel wieder frei im Netz zu veröffentlichen ( Artikel dazu (http://www.heise.de/ct/artikel/Offene-Wissenschaft-289060.html)).

HTML: Tim Berners-Lee

Tim Berner-Lee 2009, Quelle: Wikimedia (http://www.wikimedia.org), Lizenz: CC-BY-SA (http://creativecommons.org/licenses/by-sa/2.0/)

In den achtziger Jahren entwickelte der Informatiker Tim Berner-Lee am Genfer Forschungszentrum für Teilchenphysik (CERN) den Urahn des heutigen Dienstes WWW. Es war ein Pascal (http://de.wikipedia.org/wiki/Pascal_%28Programmiersprache%29)-Programm welches er Enquire (sich erkundigen) nannte.

Wie damals üblich war das Programm eine rein textbasierte Anwendungen mit der man ein wissenschaftliches Journal (Adressen, Gesprächsnotizen, Ideen, Erlebnisse, Arbeitsergebnisse und so weiter) verwalten konnte. Die Besonderheit des Programms war seine Hypertextfähigkeit.

Mit Hypertext bezeichnet man die Möglichkeit Dinge in einem Text miteinander zu verknüpfen oder zu verweisen. So kann man die Linearität eines Textes durchbrechen. Ein Buch ist immer Linear. Das ist aber nicht unbedingt das, was der Leser sich wünscht.

Oft braucht er zu einer Information eine andere, die sich aber ganz woanders im Buch findet. Der Autor kann ihm mit einem Verweis auf eine Seite oder ein Kapitel helfen. Suchen muss der der Leser selbst. Im Hypertext kann er den Verweis direkt folgen.

Nach Anregung eines Kollegen entwickelte Tim Berner-Lee diese Idee fürs Internet weiter und fand den Namen World Wide Web (WWW). Es dauerte dann allerdings noch eine Weile bis sich das Konzept immer mehr durchsetzte und das CERN verließ. Erst als einige unabhängige Programmierer Browser (Anzeigeprogramme) für das WWW schrieben, kam die Sache langsam ins Rollen. Die erste Website war übrigens 1990 unter der Adresse info.cern.ch (http://info.cern.ch) erreichbar.

Webbrowser: Marc Andreessen

Marc Andreessen 2013, Quelle: Wikimedia (http://www.wikimedia.org), Lizenz: CC-BY-SA (http://creativecommons.org/licenses/by-sa/2.0/)

Marc Andreessen war einer dieser Programmierer, der einen Browser für das WWW schrieb: den Mosaic. Anders als die meisten anderen dachte er dabei durchaus kommerziell. Er erweiterte den Browser mit neuen Features – sehr zum Ärger von Berner-Lee – und machte damit das Web populär.

Um wirklich Geld zu verdienen, schied Andreessen bald aus dem Mosaic-Projekt aus und gründete die Firma Netscape. Mitte der Neunziger hatte der Netscape Communicator schon einen Marktanteil von etwa 90%.

Microsoft verschlief zunächst die Entwicklung des Internet; es wollte seine eigene Technologie (MSN) durchsetzen. Erst als dies scheiterte, entwickelte man mit Hochdruck einen eigenen Browser, den man mit seinem Betriebssystem­monopol am Markt durchdrückte. Der Kampf um die Marktanteile mit Netscape wurde mit immer neuen, zum Teil inkompatiblen, Features ausgetragen. Zum Schluss wurde es eine Kunst Webseiten für beide System zu entwickeln.

Da diese Entwicklung sehr schnell sichtbar wurde, wurde mit dem W3-Konsortium (W3C) bald ein Standardisierungskomitee gegründet. Es hat bis heute viele Standards für das Internet und insbesondere das WWW (HTML 4.01 und XHTML 1.1) geschaffen. Leider halten sich die Browser auch in ihren neusten Versionen (Stand Anfang 2014) nicht 100% daran.

Unterkapitel

n.v.

Einführung

Zunächst widmen wir uns dem HTML-Teil einer Webseite - also den Inhalten. Wie schon beschrieben, trennen moderne Webpräsenzen in Inhalt (HTML) und Layout (CSS). Aber auch historisch gesehen kommt HTML zuerst. Außerdem wollen wir zu Anfang ja auch einige schnelle Erfolge (für die Motivation :-).

Ich gehe davon aus, das sie mit einem Dateibrowser (Windows Explorer), einem Webbrowser (Internet Explorer oder besser Firefox) und einem Texteditor (Notepad) umgehen können. Für unsere ersten Gehversuche benutzen wir den Text-Editor „Notepad2“ oder „Notepad++“ und den Browser „Firefox“. Diese Programme sollten auf ihrem Rechner installiert sein.

Beide Programme bekommen sie auch als portable Versionen für den USB-Stick. Laden (http://portableapps.com/de/download) sie dazu die „Portable Apps“ herunter und installieren sie sie auf einem schnellen USB-Stick (http://de.wikipedia.org/wiki/USB-Speicherstick).

Unter Mac OS und Linux können sie die normalen Standard-Editoren verwenden.

Vorbereitungen

Richten sie sich ihren USB-Stick ein oder legen sie sich ein Verzeichnis für ihre Übungsdateien an. Sollten sie PortableApps verwenden, findet sich auf dem Stick ein Verzeichnis „documents“. Wenn nicht legen sie es an. In diesem Verzeichnis sollten sie ihre Dateien ablegen.

Anmerkung: Wenn sie mit den PortableApps arbeiten, achten sie darauf, auch wirklich alle Programme von dort zu starten. Wenn sie ein Programm gestartet haben, zieht sich PortableApps in das Benachrichtigungsfeld (http://de.wikipedia.org/wiki/Benachrichtigungsfeld) (Systemtray) zurück. Öffnen Sie Dateien auch nicht mit Doppelklick, da sonst die lokal installierten Programme benutzt werden.

Arbeitsweise

Um Webseiten zu erstellen, sollten sie sich einen gewissen Arbeitsablauf aneignen.

Öffnen sie Firefox und den Editor (Notepad2 oder Notepad++). Klicken sie dann rechts auf die Taskleiste und wählen „Fenster nebeneinander anzeigen“. Sollten weitere Fenster erscheinen, schließen sie diese und wiederholen sie die Prozedur. Wenn sie jetzt in beiden Programmen die selbe Datei öffnen, können sie diese im Editor bearbeiten und speichern Strg + S. Danach drücken sie im Firefox F5, um die Änderungen sofort zu sehen.

Achtung: Kopieren sie die bestehende Datei immer vor jedem neuen Beispiel, damit sie alle Versionen ihrer Arbeit aufheben können. Entsprechend sind auch alle Beispieldateien durchnumeriert.

Um effektiv und schnell arbeiten zu können, beachten sie bitte den Anhang: Tastaturkommandos.

Zeichenkodierung

Ein Zeichensatz (http://de.wikipedia.org/wiki/Zeichensatz) teilt einem Betriebssystem oder einem Programm mit, wie die Zeichen (Buchstaben, Zahlen, …) intern zu codieren (darzustellen) sind. Noch vor einiger Zeit hatte jedes System seinen eigenen Zeichensatz (ASCII, ANSI, EBCDIC, …). Heute existiert zum Glück UTF-8 über (fast) alle Systemgrenzen hinweg.

Achten sie in ihrem Texteditor also auf die (Zeichen-)Kodierung UTF-8.

Lesen sie außerdem in der Wikipedia über Textdateien (http://de.wikipedia.org/wiki/Textdatei) nach.

Aller Anfang …

Der einfachste Fall einer Webpräsenz ist eine Visitenkarte.

Wir setzten nun das Ergebnis des Brainstormings in die Praxis um. Dabei verfeinern wir die Ergebnisse suksessive.

Anmerkung: Lesen sie in der Wikipedia nach, was QR-Codes (http://de.wikipedia.org/wiki/QR-Code) sind. Zum Erzeugen können sie einen Generator (http://qr-code-generator.de) verwenden. Allerdings muss ich sie leider noch ein bisschen vertrösten, bis wir eine Grafik (wie einen QR-Code oder ein Passfoto) in unsere Webseite einbauen können, dauert es noch ein wenig.

Visitenkarte als Text

Sie haben gerade ihre erste Webseite geschrieben, die in etwa wie im Beispiel 1 aussehen sollte. Ich gebe zu, hier habe ich ein wenig gemogelt. Denn HTML-Seiten sollten auch die Endung .html haben. Nichtsdestotrotz können sie diese Seite auf einen Webserver legen und im Internet abrufen.

Umlaute?

Computer kodieren Umlaute durch Zahlen in einem Zeichensatz (http://de.wikipedia.org/wiki/Zeichensatz). Dafür existieren verschiedene Zeichensatzsysteme. Am Anfang werden die Umlaute deshalb noch falsch dargestellt. Dazu später mehr.

UTF-8!

Wenn sie die Zeichenkodierung im Browser unter „Ansicht / Zeichenkodierung“ auf „Unicode“ (UTF-8) stellen, sollten die Umlaute richtig dargestellt werden.

Visitenkarte als HTML

Sind sie nun enttäuscht? Diese Ausgabe hatten sie wohl nicht erwartet. Doch wie kommt diese zustande? Scheinbar hat der Webbrowser jegliche Formatierung (Zeilenumbrüche) übergangen und hat den Text an einem Stück ausgegeben.

Whitespaces

Generell kann man sagen, dass ein Webbrowser alle sogenannten Leerräume oder White­spaces (http://de.wikipedia.org/wiki/Leerraum) (Tabulatoren, Zeilen­umbrüche und mehr als ein Leerzeichen) überliest und deshalb nicht ausgibt.

Anmerkung: Warum er das tut, lernen wir im Unterkapitel über die Formatierung von Quellcode.

Absätze

Denken sie an den Redakteur und den Setzer. Woher weiß der Setzer, ob ein bestimmter Textabschnitt zusammengehört und nicht auf die nächste Spalte oder Seite umgebrochen werden soll? Er braucht eine logische Formatierung: den Absatz. Dieser ist also ein logisch zusammen­gehöriger Textabschnitt.

In einer Textverarbeitung erzeugen sie einen Absatz mit Enter. Wenn sie die Steuerzeichen eingeblendet haben, erscheint an dieser Stelle ein Pi-Zeichen (¶). Auf jeden Fall behandelt die Textverarbeitung den Absatz als logische Einheit, auf die Formatierungen angewendet werden können (Absatzformate).

Da ein Texteditor (http://de.wikipedia.org/wiki/Textdatei) eine solche logische Formatierung nicht kennt, simuliert man ihn normalerweise durch zweimaliges Enter drücken. Man erhält so eine Leerzeile zwischen den Absätzen; die logische Formatierung wird durch eine sichtbare ersetzt. Das Drücken der Taste Enter bewirkt das Einfügen eines unsichtbaren Zeichens (ASCII/Unicode: 13) in Mac OS, (ASCII/Unicode: 10) in Unix oder der Zeichenkombination (ASCII/Unicode: 13,10) in DOS/Windows.

Anmerkung: Die Zeichencodes 10 und 13 nennt man auch Linefeed (http://de.wikipedia.org/wiki/Linefeed) (Zeilenvorschub) und Carriage return (http://de.wikipedia.org/wiki/Carriage return) (Wagenrücklauf).

Speicherauszug

Im folgenden sehen wir die Datei 01_visitenkarte.txt (Windows-codiert) als Speicherauszug (http://de.wikipedia.org/wiki/Speicherauszug) (sogenannter Hex-Dump). Hervorgehoben sind die Speicherzellen 013 010 (CR LF) für einen Zeilenumbruch und 013 010 013 10 (CR LF CR LF) für einen Absatz.

Sie sehen also, dass auch in einer reinen Textdatei Umbrüche und Absätze über spezielle Steuerzeichen erstellt werden.

Zusammenfassung

• Schon eine einfache .txt-Datei kann eine Webseite sein. Es genügt aber nicht diese Datei in eine .html-Datei umzubenennen.
• Ein Absatz ist eine logische Formatierung (keine sichtbare).

Absatz

Denken sie an unser Beispiel mit dem Redakteur und dem Setzer. Damit auch der Webbrowser (Setzer) die logische Formatierung eines Absatzes in eine sichtbare umsetzt, müssen wir diese Formatierung entsprechend mit einem Tag (sprich Tägg) <p> (paragraph - Absatz) kenn­zeichnen.

Die Kennzeichnung eines Textabschnittes mit einem Tag geschieht immer durch Umschließung. Um einen Absatz zu taggen schreiben wir zunächst den Starttag <p>, dann folgt der Text des Absatzes und zuletzt kommt der Endtag </p>:

<p>Hier steht der Absatz.</p>

oder übersichtlicher:

<p>
  Hier steht der Absatz.
</p>

Da wir uns hier zum ersten mal mit einem Tag beschäftigen, schauen wir kurz auf die Informationen, die uns Selfhtml bietet: <p> (klicken sie dazu auf →w).

Zunächst unterscheidet Selfhtml verschiedene HTML-Versionen. Wie schon gesagt, interessiert uns zunächst nur „XHTML 1 Strict“. Folgen wir diesem Link, bekommen wir Infos zu Bedeutung des Tags, Start-/Endetag, Elternelemente (darf vorkommen in) und Kindelemente (darf beinhalten). Zu den Attributen kommen wir später.

Anmerkung: PCData ist (einfach gesagt) nur Text.

Anmerkung: Schauen sie in den Tastatur­kommandos nach, wie sie sich den Quelltext des Beispiels anzeigen können.

Wenn sie wirklich nur (echte logische) Absätze mit <p> … </p> umschlossen haben, sollte ihre Webseite jetzt wie im Beispiel 3 erscheinen.

Zeilenumbruch

Innerhalb eines Absatzes kann es nötig sein, die Zeile umzubrechen und am Anfang fortzusetzen. Das nennt man dann entsprechend Zeilen­umbruch. Der augen­schein­lichste Unterschied zwischen Absatz und Zeilenumbruch ist, das ein Zeilenumbruch ein leeres Tag ist, also nichts umschließt. Er soll ja nur anzeigen, dass hier (also dort wo er steht) die Zeile umgebrochen wird.

In einer Textverarbeitung erzeugen sie einen Zeilenumbruch mit Umschalt + Enter. Wenn sie die Steuerzeichen eingeblendet haben, erscheint an dieser Stelle meist ein geknickter Pfeil nach links (↵). Da ein Texteditor eine solche Formatierung nicht kennt, simuliert man ihn normalerweise durch einmaliges Enter drücken.

Innerhalb eines Absatzes existiert in HTML für einen solchen Zeilenumbruch das Tag <br> (break - Umbruch). Außerhalb von <p> ist <br /> nicht erlaubt!

<p>
  Hier steht der Absatz mit Zeilenumbruch.<br />
  Hier geht der Absatz weiter.
</p>

Achtung: In XHTML (s. Anhang: xhtml) muss jedes Tag ein schließendes haben, also schreibt man <br></br> oder kurz <br />. Das Leerzeichen vor dem "/" erlaubt älteren Webbrowsern den Tag korrekt zu erkennen.

Block und Inline

Der Absatz <p> ist ein typisches Blockelement (http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente) und der Zeilenumbruch <br /> ein nicht ganz so typisches Inlineelement (http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente).

Blockelemente bilden Absätze (als logische Formatierung). Sie beinhalten im allgemeinen Text und Inlineelemente sowie weitere Blockelemente.

Inlineelemente enthalten im allgemeinen Text und andere Inlineelemente, allerdings niemals Blockelemente. Sowohl Block- als auch Inlineelemente können leer sein.

Später werden wir noch andere Unterschiede zwischen Block und Inline kennenlernen!

Ergebnis

Voila. Nun haben sie wirklich die erste HTML-Seite geschrieben, die etwa wie im Beispiel 4 aussehen sollte. Diese Visitenkarte ist zwar noch nicht schön, aber zumindest richtig strukturiert. Wie man eine Webseite formatiert, lernen sie im folgenden Kapitel.

Leider sind die heutigen Webbrowser sehr fehlertolerant. Wenn sie falschen HTML-Code schreiben, heißt das noch lange nicht, das der Browser einen Fehler meldet. Später sollten sie deshalb ihren Code immer mit einen HTML-Validator (http://validator.w3.org) (Gültigkeitsprüfer) prüfen.

Zusammenfassung

• HTML verwendet Tags zur Textauszeichnung.
• Ein Absatz wird mit <p> (Starttag) und </p> (Endetag) eingefasst.
• Zeilenumbrüche innerhalb eines Absatzes erzeugt man mit <br />, welches ein leeres Tag ist und deshalb mit „ /“ beendet wird. Ein leeres Tag umschließt nichts. Dies gilt für alle leeren Tags.

Verweise

Jetzt fehlt eigentlich nur noch der interaktive Teil (Hypertext). So eine Visitenkarte enthält schon einige potenzielle Kandidaten für Links an andere Stellen: Telefon, E-Mail und Webpräsenz (Homepage).

Anmerkung: Tags können mit sogenannten Attributen um weitere Eigenschaften erweitert werden. So existiert der Tag <a>, der ohne Attribute keine Bedeutung hat.

Hypertextlinks (Hyperlinks oder einfach Links) fügen wir mit der Tag/Attribut-Kombination <a href=""> (anchor / href = hypertext reference) in HTML ein. Ein Attribut erweitert ein Tag um bestimmte Eigenschaften.

<a href="http://domain.de">Text</a>

<a … >

Starttag

href="…"

Attribut

http://domain.de

Wert des Attribut

Text

Angezeigter Text

</a>

Endtag

Lassen sie mich das durch ein kleines Beispiel erläutern: Das Tag <a> ist generell für Referenzen zuständig. Mit dem Attribut href="" teilen wir dem Webbrowser mit, das wir irgendwas referenzieren wollen. Das kann eine andere Webseite sein, aber auch ein anderes Programm, das sich dann beispielsweise um das Verschicken einer E-Mail kümmert.

Verweisziele (href="…"):

http://www.google.de

Springt zur Homepage von Google

mailto:maria@mail.de

Verschickt Mails über ein externes Programm

callto:033045081620

Telefoniert über ein externes Programm (veraltet)

tel:033045081620

Telefoniert über ein externes Programm

faxto:033045081621

Faxt über ein externes Programm (veraltet)

fax:033045081620

Faxt über ein externes Programm

sms:015175081620

Simst über ein externes Programm

Anmerkung: Telefonnummern können die Ziffern „0“-„9“, „+“, „*“, „#“ und ein „,“ (Pause) enthalten. Bei SMSs können mehrere Nummern durch Komma getrennt und ein Betreff mit „*?body=“ angegegeben werden.

Sicherlich haben sie das Prinzip durchschaut. Der Wert des Attributs href="" muss ein URI (http://de.wikipedia.org/wiki/Uniform_Resource_Identifier) (siehe Anhang: Fachbegriffe) sein. Anhand des Schemas (http://de.wikipedia.org/wiki/Uniform_Resource_Identifier#Scheme) (http, mailto, callto) der URI stellt der Webbrowser fest, ob er den Verweis selbst (http) behandeln (folgen) kann oder ihn an ein externes Programm (mailto, tel, fax) übergeben muss. Ist kein externes Programm für das Schema definiert, erscheint eine Fehlermeldung.

Anmerkung: Das Tag <a> ist nicht nur für einen Verweissprung, sondern je nach Attribut, auch für andere Aufgaben (s. Selfhtml) zuständig. Dazu aber erst später mehr.

Verweise innerhalb der Domain

Allerdings existiert noch eine vereinfachte Darstellung von href-Werten. Wie im lokalen Dateisystem, können sie auch einfach ein Unterverzeichnis oder einen sonstigen Pfad (http://de.wikipedia.org/wiki/Pfadname) inklusive Dateinamen angeben. Das ist später bei Webpräsenzen wichtig, wenn sie mehrere Seiten haben, die sie untereinander verlinken wollen.

Beachten sie dabei, das sie nicht wie unter DOS und Windows üblich als Pfadtrenner das  \ -Zeichen benutzen, sondern wie in der Unix-Welt üblich das  / -Zeichen.

Absolute Adressierung

<a href=" / ">

Springt ins Hauptverzeichnis

<a href="/bilder/bild.png">

Öffnet die Datei bild.png im Verzeichnis bilder

Relative Adressierung …

… vom Ordner  /  aus

<a href=" . ">

Springt ins Hauptverzeichnis ( .  ist aktuelles Verzeichnis)

<a href="css">

Springt ins Unterverzeichnis css

<a href="bilder/bild.png">

Öffnet die Datei bild.png im Verzeichnis bilder

… vom Ordner css aus

<a href=" .. ">

Springt ins Hauptverzeichnis ( ..  ist übergeordnetes Verzeichnis)

<a href="../bilder">

Springt ins nebengeordnete Verzeichnis bilder

<a href="../bilder/layout">

Springt ins Verzeichnis layout

Anmerkung: Wenn sie nur einen Ordner und keine Datei angeben, wird im lokalen Dateisystem ein Inhaltsverzeichnis, auf einem Webserver meist die Datei index.htm(l) (Apache) oder default.htm (IIS) ausgegeben.

Referenz: Referenzieren in selfhtml (http://wiki.selfhtml.org/wiki/HTML/Referenzieren_in_HTML)

Übung

Probieren sie die Verweise ruhig einmal aus, in dem sie daraufklicken. Sollte ihr Browser eine Fehlermeldung ausgeben, ist das URI-Schema wahrscheinlich nicht richtig verknüpft, weil sie beispielsweise kein Programm zur Internet­telefonie installiert haben.

Zusammenfassung

• Tags und Attribute sollten sie immer kleinschreiben, denn XHTML fordert diese Schreibweise.
• Die allgemeine Schreibweise (Syntax) für ein Tag lautet:
  <tag attribut1="Wert1" …>
  Text innerhalb des Tags
  </tag>
• Syntax Verweis:
  <a href="URI"> Beschreibung </a>

Eine echte Webseite

Damit ein HTML-Validator unsere Seite als gültig erkennt, müssen wir sie noch mit einem allgemeinen HTML Grundgerüst ausrüsten.

Dieses Grundgerüst sollten sie in eine leere Datei einfügen und diese Datei als Basis für ihre Webseiten verwenden. So sparen sie sich das dauernde Nachschlagen nach der korrekten Syntax des HTML-Grundgerüstes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> ««
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Beschreibung der Seite</title>
  </head>

  <body>
    <!-- Hier stehen unsere HTML-Tags -->
  </body>
</html>

<!DOCTYPE ...>

Diese Zeile gibt den Umfang der HTML-Befehle für ein Dokument an. Anhand dieser DTD (http://de.wikipedia.org/wiki/Dtd) (document type defintion) kann der Browser oder Validator die Gültigkeit der HTML-Syntax überprüfen. Mehr dazu später.

<html> … </html>

Dieses Tag umschließt die gesamte HTML-Seite. Nur der <!DOCTYPE> steht außerhalb.

<html xmlns="http://www.w3.org/1999/xhtml">

Wenn sie, wie hier geschehen, xHTML verwenden, müssen sie auch noch einen XML-Namensraum (http://de.wikipedia.org/wiki/XMLNS) angeben. Dies ist eine Besonderheit von XML auf die ich im Rahmen dieses Buches nicht eingehen will.

<head> … </head>

Der Kopf der Seite. Hier geben sie allgemeine Definitionen, Verweise und den Titel der Seite an.

<title> … </title>

Der Titel der Seite. Diesen zeigt der Browser normalerweise oben rechts in der Fensterüberschrift an.

<body> … </body>

Der Körper der Seite. Hier steht der eigentliche HTML-Text. Also alles was wir bisher ohne Grundgerüst in der Visitenkarte geschrieben haben.

Meta-Tags

In den sogennannten <meta>-Tags geben sie besonderen Information für den Browser oder automatische Suchroboter an.

<meta name="author" content="Christian Hartnick" />

Kennzeichnet den Autor eines Dokumentes.

<meta name="robots" content="noindex" />

Mit dem Tag verweigern sie Suchrobotern optional das Auswerten dieses Dokuments.

<meta name="keywords" lang="de" content="Suchbegriffe, ..." />

Mit dem Tag können sie diesen Suchbegriffe vorgeben.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Legt den Typ und die Zeichenkodierung des Dokuments für HTML fest. Damit erscheinen jetzt auch Umlaute korrekt. Allerdings müssen sie darauf achten, dass ihr Editor auf „UTF-8“ eingestellt ist oder dies beim Speichern abfragt!

Referenz: Kopfdaten in Selfhtml (http://wiki.selfhtml.org/wiki/HTML/Kopfdaten)

Entities

In alten HTML-Browsern und Versionen waren das "ß" - wie auch die Umlaute - nicht erlaubt. Sie mußten als sogenannte Entities kodiert werden. Mit der Zeichensatzkodierung UTF-8 hat sich das geändert.

Allerdings müssen sie die Sonderzeichen  < ,  >  und  &  nach wie vor als Entität schreiben, da diese ja innerhalb des HTML-Quelltextes eine besondere Bedeutung haben. Eine Liste aller Entities finden sie im Anhang: HTML-Entities.

Andere Doctypes

Im folgenden finden sie weitere Doctypes, die sie kennen sollten, aber in diesem Buch nicht verwendet werden:

HTML 4 Transitional

(Übergangsversion zur Kompatibilität)

Die Transitional-Variante enthält noch ältere Elemente wie <font>, <center> und <u> sowie Attribute wie bgcolor="", align="" und target="". Mit dieser DTD können auch Webautoren, die nicht Layout und Inhalt voneinander trennen, standardkonformes HTML schreiben.

Außerdem soll er sicherstellen, dass bestehende Webseiten weiterhin durch aktuelle Webbrowser angezeigt werden können.

HTML 4 Frameset

(Übergangsversion zur Kompatibilität)

DTD für Framesets. Also für in mehrere Bereiche geteilte Webseiten. Diese Buch geht nicht näher auf Framsets ein, da sie einige grundsätzliche Nachteile haben. Siehe dazu: frameset und frames in selfhtml (http://wiki.selfhtml.org/wiki/HTML/Frames)

HTML 4 Strict

Diese DTD umfasst Elemente und Attribute, die zusammen mit Stylesheets Layout und Inhalt trennen. Text und Inline-Elemente müssen sich grundsätzlich innerhalb eines Block-Elements befinden, zum Beispiel in einem <p>-Element.

XHTML 1 Transitional

(Übergangsversion zur Kompatibilität)

s. HTML Transitional - allerdings in xhtml-Syntax.

XHTML 1 Frameset

(Übergangsversion zur Kompatibilität)

Frameset DTD für XHTML 1.

HTML 5

Erfrischend einfach :-)

Praxis

Nach dem Einfügen des Grundgerüstes sieht die Seite wie im Beispiel 6 aus. Bis auf den Seitentitel oben links sollte sich an der Darstellung nichts getan haben. Jetzt können sie aber einen HTML-Validator (http://validator.w3.org/) über die Seite laufen lassen.

(Der allerdings für unser Beispiel noch einen Fehler ausgibt, da die horizontale Linie im Beispiel noch nicht HTML-konform ist.)

Sollten sie Fragen zum Grundgerüst haben, schauen sie sich erst einmal den Quellcode des Beispiels 6 an.

Zusammenfassung

• Eine HTML-Seite sollte immer eine DOCTYPE haben, damit der Browser weiß, wie er sie interpretieren soll.
• Eine HTML-Seite hat immer mindestens folgendes Grundgerüst:
  <!doctype html>
  <html>
    <head>
      <title></title>
    </head>
    <body>
      …
    </body>
  </html>
• Im Kopf (<head>) geben sie allgemeine Definitionen, Verweise und den Titel der Seite an.
• Den Titel (<title>) zeigt der Browser normalerweise oben rechts in der Fensterüberschrift an.
• Im Körper (<body>) steht der eigentliche HTML-Text.

Unterkapitel

n.v.

Einführung

Jetzt widmen wir uns dem CSS-Teil einer Webseite - also dem Layout. Wie schon beschrieben, trennen moderne Webpräsenzen in Inhalt (HTML) und Layout (CSS). Ähnlich wie in einer modernen Textverarbeitung können sie mit CSS HTML direkt formatieren. Oder sie schaffen Formatvorlagen, die sie auf mehrere Webseiten anwenden können, um ein einheitliches Layout für die ganze Webpräsenz zu schaffen.

Allerdings ist für uns nicht nur die Formatierung der eigentlichen Seite interessant. Auch der HTML-Text den wir bisher geschrieben haben, sollte eine gewisse Form einhalten.

Code

Ganz am Anfang hatten wir gelernt, dass HTML eine Sprache (L - Language) ist. Wenn man bei Computern von Sprachen „spricht“, meint man damit eine formale Beschreibung, die in sogenannten Quellcode (http://de.wikipedia.org/wiki/Quellcode) geschrieben wird.

Wir haben den Computer (Webbrowser) also eine Reihe von Anweisungen, in einer Datei verpackt, zum Ausführen gegeben. Zwar haben wir kein Programm im ursprünglichen Sinn geschrieben, aber wir sind auf dem besten Weg dorthin. Also sollten wir auch ein paar Regeln befolgen, die unseren Quellcode für Andere besser lesbar macht.

Wahrscheinlich haben sie sich am Anfang unseres Beispiels gefragt warum HTML Whitespaces überliest. Dies ist eine Eigenschaft, die es mit vielen Computersprachen (wie auch CSS und JavaScript) teilt: Der Quellcode kann so formatiert werden.

Formatierung

Es gibt einige einfache Regeln um Quellcode - also unseren HTML-Text - besser lesbar (http://de.wikipedia.org/wiki/Quelltextformatierung) zu machen:

Jedes Anfangstag, das einen logischen Abschnitt (Block) anfängt, kommt in eine neue Zeile.

<p>
  1. Absatz
</p>

<p>
  2. Absatz
</p>

<p>
  3. Absatz
</p>

Rücken Sie untergeordnete Tags mit Leerzeichen ein:

<body>
  <div>
     <p>
       Absatz 1
     </p>

     <p>
       Absatz 2
     </p>
  </div>
</body>

Trennen Sie große logische Bereiche mit einer oder mehreren Leerzeilen:

<body>
  <h1>Erste Überschrift</h1>
  <p>
    Ein Absatz
  </p>

  <h1>Zweite Überschrift</h1>
  <p>
    ein gänzlich anderer Absatz
  </p>
</body>

Verwenden Sie Kommentare:

Mittels Programm

Sie können auch ein Programm wie HTML Tidy verwenden, um sowohl ihren Code zu prüfen, als auch eine Bereinigung durchzuführen. Für Firefox existiert eine entsprechende Erweiterung mit Namen Total Validator (addon).

Sonst verwenden sie am besten den Web-Service (http://services.w3.org/tidy/tidy).

Zusammenfassung

• Schreiben sie ihren Code lesbar!
• Verwenden sie Kommentare!
• Prüfen sie ihren Code auf Gültigkeit!

Im HTML-Text

HTML bietet zwar von Haus aus Formatierungen mit Tags wie <b> (bold – fett), <i> (italics - kursiv) und <u> (underline - unterstrichen).

<p>
  Dies ist ein <b>fetter</b>,
  ein <i>kursiver</i> oder
  ein <u>unterstrichener</u> Text.
<(p>

Doch diese sind mit dem Einzug von CSS als „deprecated“ - das heißt veraltet - gekenn­zeichnet. Und sollen in den nächsten Versionen nicht mehr unterstützt oder zumindest (HTML5) umgedeutet werden. Dementsprechend sind sie auch kein Bestandteil der HTML/XHTML Strict-Varianten (s. DTD).

Moderne Webpräsenzen setzen also zu recht auf Cascading Stylesheets (CSS). CSS haben den Vorteil, das Layout (Formatierung) und Inhalte (Texte, Bilder, ...) zu trennen.

Der „Verleger“ einer Webpräsenz bestimmt einmalig das Layout (CSS), der „Redakteur“ einer Webseite schreibt den Inhalt (HTML) und der „Setzer“ also der Webbrowser fügt beides zusammen. Ändert der Verleger das Layout, passen sich alle Inhalte automatisch an. Was also auf den ersten Blick nach mehr Arbeit aussieht, vereinfacht komplexere Webpräsenzen (wie dieses Buch) enorm.

Im Anhang: Formatierende Tags finden Sie die CSS-Eigenschaften, welche die alten HTML-Tags ersetzen. Um sie direkt zu verwenden, müssen sie das <span> Tag verwenden (s. Beispiel).

<p>
  Dies ist ein <span style="font-weight: bold;">fetter</span>,
  ein <span style="font-style: italic;">kursiver</span> oder
  ein <span style="text-decoration: underline;">unterstrichener</span> Text.
<(p>

Anmerkung: Schalten sie in Firefox spaßeshalber einmal unter „Ansicht“ den „Webseiten-Stil“ auf „Kein Stil”.

Unter Anhang: Wichtige Tags steht eine Liste der wichtigsten Tags. Wenn sie experimentierfreudig sind, können sie diese nach Lust und Laune in ihre Visitenkarte schon einbauen: Gute Kandidaten sind <address> (Adressblock kennzeichnen), <hr> (horizontale Trennlinie) und <ul>/<li>) (für Telefonlisten). Schlagen sie in der Referenz nach, wie sie diese Tags benutzen.

CSS-Styles

Wie sie im Quelltext des Beispiels sehen, können sie (fast) jedem Tag einen Style hinzufügen. Probieren sie das ruhig auch mit <p> (<p style="…">). Die entsprechenden CSS-Eigenschaften finden sie im Anhang: CSS-Eigenschaften.

Beachten sie dabei, das nicht für jedes Tag auch jeder Style Sinn ergibt. So sind viele Styles beispielsweise nur für Inline- oder Block-Tags erlaubt. Später werden wir sogar lernen, wie man aus einem Inline- ein Block-Tag und andersherum macht.

Einem allgemeinen Tag wie <p> einen bestimmten Stil (Style) zuzuordnen, ist „schlechter Stil“. Denn normalerweise wendet man einen Stil immer auf eine bestimmte Kategorien (oder Klassen) an. So könnten alle Überschriften in der Schriftart „Arial“ erscheinen und der Fließtext in „Times New Roman“. Bestimmter Fließtext sollte aber als Anmerkung „kursiv“ sein. Es muss also eine Möglichkeit geben, Tags oder speziell gekennzeichnete Tags für einen Stil zu selektieren.

Formatvorlagen

Um Tags für einen Stil zu selektieren, definieren wir die Stile in einem speziellen Bereich <style> des HTML-Headers (<head>). Dazu benutzen wir eine eigene CSS-Syntax: Selektor: { CSS­Eigenschaft1: Wert; CSS­Eigenschaft2: Wert; … }.

Anmerkung: Nicht umsonst wird in diesem Buch verschiedene Farben für die verschiedenen Sprachen HTML, CSS und JavaScript benutzt. Ihre Syntaxen sind grundlegend verschieden und sie sollten sie deshalb nicht durcheinander bringen (s. Anhang: Syntaxübersicht).

…
<head>
  <title>09 Meine Visitenkarte (css inline)</title>
  <style type="text/css">
    /* … Formatdefinitionen … */ 
    #Nachname { font-weight:bold; } 
  </style>
</head>
…

Erklärungen zur Syntax der Stildefinitionen finden sie im Anhang: CSS-Syntax.

Im Beispiel finden sie die übliche Vorgehensweise einen Stil für das HTML- Universalattribut id="" zu spezifizieren. Das heißt der Selektor #Name selektiert beisielsweise das HTML-Tag <span id="Name">. Der „Name“ muss innerhalb der HTML-Datei eindeutig sein, darf also kein zweites Mal vorkommen. Wollen sie mehreren Tags den gleichen Stil zuweisen, benutzen sie das Attribut <span class="Beruf">, welches sie mit dem Selektor .Beruf selektieren.

Die HTML-Tags <span> und <div> sind speziell für CSS-Forma­tierungen geschaffen worden.

Weitere CSS Eigenschaften (Formatierungen) finden sie im Anhang: CSS-Eigenschaften oder im Selfhtml Wiki (http://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften).

Vorlagendatei

Wächst ihre Webpräsenz über diese eine Seite hinaus, ist das Einbetten von Stildefinitionen innerhalb der HTML-Seite von Nachteil – entsprechende Stiländerungen müssten sie in alle Dateien permanent übertragen. Deshalb sollten sie die Stildefinitionen in eine eigene Datei auslagern:

/* Definitionen */
#Name    { font-weight:bold; }
#Grad    { font-size: small; }
.Beruf   { font-style: italic; }
a        { text-decoration:none; color:WindowText;}
a:before { content:"→"; color: blue; }
a:hover  { color: blue; }
hr       { width: 300px; margin-left: 0; }
.label   { display: inline-block; width: 3em; }

Für dieses Beispiel müssen wir unsere Tabelle erweitern:

Hinweis: Der Internet Explorer kennt die Pseudo-Eigenschaften :before und :after erst ab Version 8.

Anmerkung: An dieser Stelle kommt das erste Mal eine zweite Datei ins Spiel. Für diese CSS-Datei erstellen sie eine neue leere Datei im Texteditor und kopieren dort alles hinein was zwischen <style type="text/css"> und </style> steht. (Und ergänzen beispielsweise mit dem obigen Beispiel.) Diese Datei speichern sie dann unter einen Namen wie visitenkarte.css oder stylesheet.css.

In der HTML-Datei steht dann nur noch ein Verweis (<link>) auf diese externe Datei. Also müssen sie den ganzen Text innerhalb von <style type="text/css"> … </style> inklusive dieser Tags wie folgt löschen:

…
<head>
  <title>10 Meine Visitenkarte (css datei)</title>
  <link rel="stylesheet" type="text/css" href="10_visitenkarte.css" />
</head>
…

<link …>

Verlinkt eine externe (CSS-)Datei

rel="stylesheet"

bestimmt den Typ der Verknüpfung

type="text/css"

bestimmt den Dateityp

href="vk.css"

verweist auf die externe Datei

Hinweis: Sie können natürlich auch interne und externe Stylesheets mischen (wie im Beispiel 10 geschehen). Allerdings sollten sie dann darauf achten, dass auch nur seitenspezifische Formatierungen im (seiten-)internen Stylesheet stehen.

Block und Inline

Wie versprochen kommen wir noch einmal auf Block- und Inline-Elemente zurück. Wenn sie sich das Styleesheet aus dem Beispiel genau anschauen, finden sie die CSS-Eigenschaften display: inline-block; und width: 3em;.

Wie schon geschrieben, bilden Blockelemente eine logischen „Block“, dem man entsprechend auch unter anderem eine Höhe (height) und Breite (width) zuweisen kann. Inline-Elemente stehen mitten im fließenden Text. Es macht also normalerweise keinen Sinn ihnen Höhe und Breite zu geben.

Um möglichst flexibel zu bleiben, kann CSS aber HTML-Tags umetiquettieren. CSS kann also Blockelement in Inline-Elemente und umgekehrt verwandeln. Dazu existiert die Eigenschaft display. Allerdings kennt diese Eigenschaft auch den Wert „inline-block“, der das Tag als Inline-Element belässt, aber trotzdem eine Zuweisung einer Breite erlaubt. Damit ist es einfach Texte untereinander zu positionieren.

Im Anhang: CSS-Eigenschaften finden sie weitere Hinweise auf Block- oder Inline-Eigenschaften. Allerdings können sie fast alle Inline-Eigenschaften auch Blöcken zuweisen. Zu den Einheiten (hier em) lesen sie am besten Anhang: CSS-Einheiten und Farben.

Zusammenfassung

• Trennen sie immer Inhalt (HTML) und Layout/Formatierung (CSS)
• Verwenden sie separate Dateien für HTML und CSS.
• Denken sie an Lesbarkeit und Kommentierung der CSS-Datei.

Unterkapitel

n.v.

Einführung

Bevor wir zu JavaScript an sich kommen, machen wir einen kleinen Ausflug in die Theorie des Programmierens. Sinn dieses Kapitels ist es nicht programmieren zu lernen, sondern die Konzepte dahinter zu verstehen, damit sie fremden Code in ihre Webseiten einbinden können.

Danach lernen wir das einbinden von JavaScript in die Webseite direkt oder als Funktion. Zuletzt manipulieren wir die Seite über das DOM, was gerade mit Fremdfunktionen viele Vorteile bringt.

Bauanleitung

Programme sind eine Ansammlung von Anweisungen, die ein Computer oder anderes Programm ausführt. So etwa wie eine Bauanleitung, die Anweisungen für einen Menschen enthält, etwas bestimmtes zusammenzubauen. Bewegen wir uns also in dieser Analogie.

Ein Bauanleitung (hier das Beispiel Tisch) ist wie folgt strukturiert:

Definitionen

Benutze

Werkzeug und Material das nicht beiliegt (also extern zu besorgen ist).

Inhalt

Werkzeug und Material das beiliegt und bem Aufbauer bekannt zu machen ist.

Elemente des Arbeitsablaufs

Anweisungen

Konkrete Arbeitsanweisungen für den Aufbauer

Unteranweisungen

Komplexere Tätigkeiten werden zusammen­gefasst und als ein Schritt in den Arbeits­anweisungen ausgeführt.

Zuweisungen

Schraube S1 = Schraube mit Gewinde x / Länge y

Bedingungen

End- oder Abbruch­bedingung für eine Anweisung oder eine Wiederholung.

Wiederholungen (Schleifen)

Sich wiederholende Anweisungen

Kommentare

Kommentierung der Anweisungen

Computerprogramm

Ein Programm ist ähnlich strukturiert:

Definitionen

Extern

Variablen, Objekte und Funktionen die in gesonderten Dateien/Bibliotheken stehen.

Intern

Selbstdefinierte Variablen, Objekte und Funktionen bekannt machen.

Elemente des Programmablaufs

Anweisungen

Konkrete Programmanweisungen

Funktionen/Objekte

Mehrere Anweisungen / Zuweisungen werden zusammengefasst.

Zuweisungen

Variablen einen Wert zuweisen. (Auch eine Anweisung!)

Bedingungen

End- oder Abbruchbedingung für eine Anweisung oder eine Wiederholung.

Schleifen

Sich mehrfach wiederholende Anweisungen

Kommentare

Kommentierung der Anweisungen

Man erkennt sofort die Ähnlichkeit mit einem Bauanleitung.

Hier haben wir einige Konzepte, die sich nicht so einfach erschließen. Genaueres lesen sie im Kapitel über JavaScript.

Variablen

Variablen speichern veränderliche (variable) Werte.
variable = wert;

Funktion

Funktionen fassen parametrisierte Anweisungen zusammen und können einen Wert zurückgeben.
Rückgabewert = Funktion (Parameter1, Parameter2);

Objekt

Objekte fassen Variablen (als Attribute) und Funktionen (als Methoden) als Eigenschaften zusammen. Diese Eigenschaften können sie an andere Objekte vererben.

Programmieren mit Pseudocode

In der Informatik versteht man unter Pseudocode (http://de.wikipedia.org/wiki/Pseudocode) eine formalisierte Schreibweise von Anweisungen, die theoretisch ein Computer ausführen könnte. D.h. Pseudocode verzichtet auf alles sprachliche Beiwerk und konzentriert sich auf das wesentliche.

In dem Beispiel für ein Pseudo-Programm sind alle wesentlichen Konzepte der Programmierung enthalten:

Definitionen

Extern

Benutze Ausgabe, Datum

Intern

Definiere Jetzt vom Typ Datum/Uhrzeit, Definiere Wdh vom Typ Zahl;

Programmablaufs

Anweisungen

Ausgabe.Ausgeben (Jetzt);

Funktionen/Objekte

Datum.Jetzt;

Ausgabe.Ausgeben ();

Zuweisungen

Speicher 0 in Wdh; // Wdh=0;

Jetzt = Datum.Zeit;

Erhöhe Wert von Wdh um 1;

Bedingungen

Wdh == 10

Schleifen

wiederhole … bis ( … );

Kommentare

// Ablauf

JavaScript

Das Programm als JavaScript (Beispiel Zähler):

<!DOCTYPE html>
<html>
<head>
  <title>Zaehler</title>
</head>
<body>
  <script type="text/javascript">
    // Datumsbibliothek ist implizit enthalten
    var Datum = new Date(); // Sonderfall Objekt
    var jetzt;
    var i = 10;

    do {
      jetzt = Datum.toLocaleString(Datum.getTime());
      document.write('\n<p>' + jetzt + '<\/p>');
      i--; // enspricht i = i - 1
    } while (i>0);
  </script>
</body>
</html>

Dies ist natürlich ein sehr einfaches Programm, das uns nur die grundsätzliche Funktionsweise näher bringen soll. Denken sie daran, dass sie an dieser Stelle nicht Programmieren lernen sollen, sondern nur die Konzepte verstehen, um JavaScript-Funktionen verwenden zu können!

Definitionen

Extern

JavaScript-Funktionen werden über <script src=""> im Header eingebunden.

Aber: Viele Objekte sind implizit enthalten (Date, document)

Intern

var jetzt;

Variable „jetzt“ definieren.

var i = 10;

Variable „i“ definieren und mit „10“ vorbelegen.

var Datum = new Date();

Datum ist eigentlich ein Objekt der Klasse Date (s.u.). Klassen stellen wieder Funktionen (Methoden) zur Verfügung.

Programmablauf

Anweisungen

document.write('\n<p>' + jetzt + '<\/p>');

Zeichenkette ('<p>3.6.2014 20:21:01</p>') in HTML-Dokument ausgeben.

Funktionen/Obj.

document.write();

Zeichenkette in Dokument ausgeben.

Datum.toLocaleString();

Zeit/Datum in lesbare Zeichenkette (wie 3.6.2014 20:21:01) wandeln.

Datum.getTime();

Aktuelle Zeit/Datum holen.

Zuweisungen

jetzt = …;

In Variable „jetzt“ lesbare Zeit/Datum Zeichenkette speichern.

i--; //enspricht i = i - 1

Inhalt der Variablen „i“ um „1“ verringern.

Bedingungen

i > 0

Vergleiche linke und rechte Seite mit Vergleichsoperator (>).

Schleifen

do { … } while (i > 0);

Tue das folgende ( … ) solange die Bedingung „i > 0“ wahr ist.

Kommentare

// Datumsbibliothek ist implizit enthalten

Zusammenfassung

• Programmieren heißt, dem Computer Anweisungen zu geben.
• Das geschieht in einer formalisierten Form.

DHTML

Wie schon erwähnt bringt erst der Einsatz von JavaScript Interaktivität auf eine Webseite. Man spricht dann auch von dynamischen HTML, da JavaScript HTML zur Laufzeit (also nach dem Laden der Seite) ändern kann.

Anmerkung: Das unterscheidet JavaScript von einer Sprache wie PHP (http://de.wikipedia.org/wiki/PHP), Perl (http://de.wikipedia.org/wiki/Perl_(Programmiersprache)) oder ASP (http://de.wikipedia.org/wiki/Active_Server_Pages) die schon vor dem Ausliefern einer Seite auf dem Server ausgeführt werden.

Da moderne Webseiten aber nicht ohne Interaktivität auskommen, biete ich Ihnen in diesem Kapitel einen Einstieg in JavaScript. Sie können so zumindest bestehenden Code aus dem Web in ihre Projekte einfügen.

Eine Einführung in JavaScript bietet der fünfte Teil.

JS als Spamschutz

Als sinnvolle Anwendung für eine Visitenkarte bietet sich JavaScript beispielsweise an, wenn man aus Spamschutzgründen die E-Mail-Adresse nicht direkt in den HTML-Code schreiben will. Dort kann sie nämlich von sogenannten Spidern (spezialisierte Such­maschinen) gefunden und in Spam-Verteiler eingetragen werden.

Damit der Browser erkennt, dass an dieser Stelle Javascript steht, wird das Skript innerhalb des Tags <script> geschrieben. In JavaScript kodiert, kann das dann folgendermaßen aussehen:

<p>
  <!-- Script an Stelle des direkten Links -->
  <script type="text/javascript">
    var name   = "hilfe";
    var domain = "hartnick";
    var tld    = "de";
    document.write('\n<a href=\"mailto:' + name + '@' + domain + '.' + tld + '\">'
                   + name + '@' + domain + '.' + tld
                   + '</a>');
  </script>
  <noscript>_nick_at_domain_._de_</noscript> <br />
</p>

Sollte der Browser kein JavaScript darstellen, bestimmen sie im <noscript> Bereich einen alternativen Text.

Noch einmal der Hinweis: Nicht umsonst wird in diesem Buch verschiedene Farben für die verschiedenen Sprachen HTML, CSS und JavaScript benutzt. Ihre Syntaxen sind grundlegend verschieden und sie sollten sie deshalb nicht durcheinander bringen.

Anmerkung: Bedenken sie, dass das Beispiel nur der Weg zum Verständnis von JavaScript dient. Normalerweise binden sie bei ihrem Wissensstand, keinen JavaScript-Code sondern höchstens JavaScript-Funktionen ein.

Externes JS

Etwas komfortabler und noch sicherer ist die Auslagerung der Funktionalität in eine externe Datei. So können sie den JavaScript-Code dann auch auf anderen Webseiten nutzen. Dazu verfrachten sie den Code in eine eigene Datei mit der Endung .js und wandeln ihn in eine Funktion ohne Rückgabewert (Funktion enthält kein "return") um: (Beispiel 12 (beispiele/03c/12_visitenkarte.js))

Anmerkung: In JavaScript umschließen Hochkommas  ''  oder Hochkommatas  ""  eine Zeichenkette (String). Soll jetzt in der Zeichenkette ein ' oder ein " Zeichen erscheinen, muss dieses besonders gekennzeichnet werden. Dazu schreibt man das Escape-Zeichen  \  davor. Weitere Zeichen finden sie im Anhang: JS Escape-Sequenzen

Die externe JS-Datei ist im Header ihrer HMTL-Datei anzugeben. Der Funktionaufruf erfolgt an gewohnter Stelle im HTML-Code:

<html>
  <head>
    …
    <script src="12_visitenkarte.js" type="text/javascript"></script>
  </head>

  <body>
    …
    <p>
      <!-- Script an Stelle des direkten Links -->
      <script language="JavaScript" type="text/javascript">
        insertEmail("nick","domain","de")
      </script>
      <noscript>_nick_at_domain_._de_</noscript> <br />
      …
    </p>
  </body>
</html>

Auf diese Weise binden sie jegliche externe JavaScript-Funktion ein. Normalerweise finden sie im Netz eine entsprechende Funktion mit einer Anleitung, wie diese einzubinden ist. Meist ist dann auch eine externe CSS-Datei dabei:

  <head>
    …
    <script type="text/javascript" src="externe_funktion.js"></script>
    <link rel="stylesheet" type="text/css" href="externe_funktion.css" />
  </head>

Zusammenfassung

• Sie wissen nun wie sie JavaScript in ihre Seite einbauen können.
• Verwenden sie JavaScript Funktionen und binden sie den Code über eine separate Datei ein.
• In diesem Kapitel geht es vor allem um das Einbinden von bestehenden Funktionen (aus dem Web). Sie müssen jetzt noch nicht selbst programmieren können.

DOM

Zuletzt möchte ich noch eine Variante vorstellen, die mehrere Vorteile hat: Sie verwendet normale Links in einer Standardsyntax, welche nur durch einen Namen gekennzeichnet sind. Außerdem benötigt sie keinen <noscript> Teil und ist damit weniger anfällig für Fehler.

Weiterhin lernen sie gleich das wichtige DOM (http://de.wikipedia.org/wiki/Document_Object_Model) (document object modell) kennen. Mit dem DOM greifen sie über JavaScript auf HTML-Dokumente zu. Im modernen Webdesign spielt es eine gewichtige Rolle.

Das DOM stellt eine Webseite als Baumstruktur dar. Für den Zugriff auf diese Hierarchie stellt JavaScript verschiedene Funktionen bereit. Außerdem präsentiert jeder Knoten im Dokumentenbaum auch ein Objekt in JavaScript (deshalb „DOM“).

Anmerkung: Viele in JavaScript geschriebene Erweiterung verwenden das DOM. Zu bearbeitende Elemente werden einfach mit einem bestimmten Attribut gekennzeichnet. Ein weiteres Beispiel dazu finden sie im Kapitel Bildergallerie.

Im Firefox können sie den DOM-Baum auch mit dem DOM-Inspektor (Extras / Webentwickler / DOM-Inspector) erforschen.

Hervorgehoben sind hier die mitttels der Klasse „Email“ gekennzeichneten Adressen. Diese werden von der JavaScript-Funktion gefunden und umgewandelt!

Beispiel

Wie sie sehen, rufen sie die JavaScript-Funktion nicht mehr an einer bestimmten Stelle im Code auf, sondern mit einem Attribut im Tag <body onload="convertEmail('Email')">. Da die Funktion auf das DOM zugreift, fügt sie nicht Text in den HTML-Quelltext ein, sondern verändert seine Struktur direkt.

Anmerkung: Eine der beiden Methoden (Aufruf der Funktion direkt im Quelltext oder mit dem Attribut „onload“ im Body) kommt praktisch immer bei externen JavaScript zum Einsatz.

Erklärung

Erläuterungen zum Progamm (für alle die es hier schon interessiert):

while (document.getElementsByClassName ("Email")[i]) {

Solange ein Element im HTML-Code mit dem Attribut class="Email" existiert, durchlaufe die Schleife. (DOM-Funktion)

anker = document.getElementsByClassName ("Email")[i]

Variable anker zeigt auf i-te Element (Objekt) mit der Klasse „Email“.

adresse = anker.href;

Speichere den Wert des Attributs "href".

temp = adresse.split("_at_"); name = temp[0]; domain = temp[1];

Splitte adresse an Zeichenkette "_at_" in Array temp

temp = domain.split("_dot_"); domain = temp[0]; tld = temp[1];

Splitte domain an Zeichenkette "_dot_" in Array temp

adresse = name + "@" + domain + "." + tld;

Setze die Adresse neu zusammen.

anker.href = adresse;

Speichere die "adresse" wieder im Attribut "href".

anker.firstChild.nodeValue = adresse.substr(7,255);

Speichere die "adresse" ohne "mailto:" auch als Wert des Kindknotens – also als Text.

i++;

Erhöhe den Wert der Variable i (entspricht i = i +1;).

}

Ende der Schleife.

Unterkapitel

n.v.

Einführung

Nachdem wir nun alle grundlegenden Techniken einer Webseite kennengelernt haben, folgt nun ein vertiefendes Beispiel. In diesem werden wir auch weitere Funktionalitäten lernen.

Wir bauen diesmal eine gesamte Webpräsenz (mehrere Seiten) auf. Dazu müssen wir uns erst einmal einige Vorkenntnisse erarbeiten. Zuletzt habe sie damit eine Grundlage für eine eigene Webpräsenz.

Weitere Tags

Eine Webseite besteht aus mehr als nur Text. HTML kann externe Objekte (Bilder, Töne, Videos usw.) einbinden sowie Tabellen und Listen erstellen.

In der folgenden Definitionen sind nur die wichtigsten Attribute und Tags angegeben. Weitere finden sie in ihrer HTML-Referenz. Beachten sie, dass auch für die folgenden Tags CSS zur Formatierung genutzt werden sollte.

Weitere Tags finden sie im Anhang: Wichtige Tags und im Anhang: Semantische Tags. Nur zur Vollständigkeit hier der Verweis zum Anhang: Formatierende Tags.

Anker

<a>

Überschriften

<h1_h6>

Listen

<ul>, <ol>,

Tabellen

<table>

Grafiken

<img>

Seiten

<iframe>

Multimedia-Objekte

<object>

Bilder können sie als <img> oder <object> mit dem entsprechenden Typ einbinden. Auch externe Webseiten können sie als <iframe> oder <object> mit dem Typ "text/html" einbinden. <object> soll in Zukunft alle anderen Tags dieser Art ersetzen. Zumindest zur Zeit funktioniert das noch nicht in jedem Browser.

Beispiele zu den Tags finden sie im weiteren Verlauf dieser Lektion.

Exkurse dazu

Exkurs Grafikformate

Grafikformate (http://de.wikipedia.org/wiki/Grafikformat) in der Wikipedia.

Exkurs MIME-Typen

Wir haben schon bei einigen HTML-Tags das type-Attribut kennengelernt. Dieses gibt den sogenannten MIME-Type (http://de.wikipedia.org/wiki/MIME-Type) (Multipurpose Internet Mail Extensions) einer Datei an. Windows erkennt den Typ einer Datei über die Endung. Im Web regelt das der MIME-Type, welcher ursprünglich aus dem E-Mail Bereich kommt.

Referenz: MIME-Typen (http://wiki.selfhtml.org/wiki/Referenz:MIME-Typen) im selfHTML Wiki.

Tags schachteln

Liste und Tabellen lassen sich auch ineinander schachteln.

Verschachtelte Liste

<ul>
  <li>Morgens
    <ol>
      <li>geh ich nach Haus</li>
      <li>schlaf ich aus</li>
    </ol>
  </li>
  <li>Abends
    <ol>
      <li>geh ich in die Bar</li>
      <li>mach ich mich zuhause rar</li>
    </ol>
  </li>
</ul>

Das sieht dann im Browser folgendermaßen aus:

Verschachtelte Tabellen

<table border="1">
   <tr> <td>1a</td><td>1b</td><td>1c</td> </tr>
   <tr> <td>2a</td><td>2b</td><td>2c</td> </tr>
   <tr> <td>3a</td><td>3b</td><td>3c</td> </tr>
   <tr> <td colspan="3">
          <table>
            <tr> <td>4 1a</td><td>4 1b</td> </tr>
            <tr> <td>4 2a</td><td>4 2b</td> </tr>
          </table>
   </td></tr>
</table>

Das sieht dann im Browser folgendermaßen aus:

Liste in Tabelle

<table border="1">
   <tr> <td>1a</td><td>1b</td><td>1c</td> </tr>
   <tr><td colspan="3">
           <ol>
             <li>Punkt 1</li>
             <li>Punkt 2</li>
           </ol>
   </td></tr>
</table>

Das sieht dann im Browser folgendermaßen aus:

Zusammenfassung

• HTML kann Überschriften, Listen und Tabellen darstellen
• HTML kann andere Objekte (Webseiten, Grafiken, Töne und Videos) einbinden

Erschrecken sie nicht – jetzt kommt alles auf einmal. Gehen wir also Schrittweise vor:

Weitere Seiten

Eine Webpräsenz besteht normalerweise aus mehr als einer Webseite (HTML-Datei). Oder anders gesagt, mehrere HTML-Dateien, eine oder mehrere CSS-Dateien und eine oder mehrere JS-Dateien zusammen, bilden einen Auftritt im Internet (Webpräsenz).

Unsere Visitenkarte wäre beispielsweise eine gute Kontaktseite - wir bräuchten allerdings auch noch weitere Seiten wie Willkommens- oder Startseite, Impressum usw. Diese Seiten sind dann normalerweise über ein Menü verlinkt, das heißt auf jeder Seite stehen Links (<a href="index.html">Startseite</a>) zu den anderen Seiten.

Da alle unsere Seiten allerdings einem Grundaufbau folgen sollen, erstellen wir zunächst eine Seitenvorlage, von der wir die anderen Seiten dann ableiten. Gleichzeitig bringen wir ein wenig Struktur (Unter­verzeichnisse) in unser Webprojekt.

Um unsere Webpräsenz etwas einfacher anpassen zu können, überlegen wir uns noch, wie wir den Kopf und das Menü auch nachträglich noch einfach ändern können, ohne jede Seite dann händisch zu ändern.

Präsenz

Vorlage

Zunächst wählen wir ein Projektverzeichnis und/oder legen dieses an. Dann erstellen wir dort eine Textdatei mit dem Namen Seitenvorlage_zum_Kopieren.html. In diese schreiben wir dann folgendes Grundgerüst:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta content="author" name="Fügen sie hier ihren Namen ein" />
  <title>Fügen sie ihren Seitentitel hier ein</title>

  <link rel="stylesheet" type="text/css" href="css/layout.css" />
  <style type="text/css">
    /* Interne CSS-Formatvorlagen */
  </style>
  <script type="text/javascript" src="js/funktionen.js"></script>
</head>

<body>
  <div id="KopfDiv">
    <iframe src="iframes/kopf.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <h1 class="Kopf">Fügen sie ihren Seitentitel hier ein</h1>
    </iframe>
  </div>

  <div id="MenuDiv">
    <iframe src="iframes/menu.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <a class="Menue" href="iframes/menu.html">Sitemap</a>
    </iframe>
  </div>

  <div id="InhaltDiv">
    <!-- Hier fügen sie das ein, was sie bisher innerhalb des <body>-Tags stehen hatten -->
  </div>
</body>
</html>

Klären wir zunächst die neuen Tags:

<div id="KopfDiv">

<div> ist wie <span> ein Element speziell für CSS-Definitionen. Im Gegensatz zu <span> überspannt <div> nicht nur einen Textbereich, sondern einen oder mehrere Absätze (Blockelement). Hier definiert <div> einen Kopfbereich, den wir mit Hilfe von CSS positionieren. Da es nur einen Kopf geben sollte, verwenden wir als Attribut id="KopfDiv"!

<div id="MenuDiv"> und <div id="InhaltDiv">

Entsprechende <div> für die Bereiche Menü und Inhalt (also der eigentliche Seiteninhalt).

<iframe src="iframes/kopf.html" ...> und
<iframe src="iframes/menu.html" ...>

Wie schon oben besprochen bindet <iframe> eine andere Seite in eine HTML-Seite ein. Hier benutzen wir es, um einen Kopf und ein Menü für die Webpräsenz nur einmal zu hinterlegen.

<h1 class="Kopf">

Dieses <h1> steht innerhalb von <iframe>, es wird also nur angezeigt, wenn der Browser keine Inline-Frames unterstützt. Wir weisen allen Tags innerhalb des Kopfes oder des Menüs eine Klasse (hier Kopf) zu, damit wir sie gegebenenfalls im Stylesheet gesondert behandeln können.

<div id="InhaltDiv">

Innerhalb dieses <div> steht der eigentliche Inhalt der Seite, also das, was sie sonst innerhalb von <body> schreiben würden.

Anmerkung: Prüfen sie im Beispiel (beispiele/03d/index.html) welche HTML-Version gewählt ist.

Unterverzeichnisse

Jetzt legen wir die Unterverzeichnisse bilder/ , css/ , iframes/ und js/ an. Die Namen der Verzeichnisse sind soweit selbsterklärend:

Wenn wir zukünftig eine neue Seite in unserer Webpräsenz anlegen wollen, kopieren wir die Seitenvorlage und benennen sie entsprechend um. Sobald die Datei im Explorer markiert ist, geht das am einfachsten mit der Tastenfolge Strg + C (kopieren), Strg + V (einfügen) und dann F2 (umbenennen). Das Umbenennen können sie übrigens mit Esc abbrechen.

Noch einmal der Hinweis: Das Web ist Unix-basiert und deshalb werden Groß- und Kleinschreibung bei Dateien und Verzeichnissen unterschieden. Außerdem ist der Pfadtrenner  / .

Weitere Dateien

Wir haben innerhalb unseres Gerüstes mehrere Verweise auf Dateien. Diese Dateien müssen wir nun noch anlegen. Folgen sie dazu dem jeweiligen Link und kopieren sie den Quelltext aus der Datei. Bei den HTML-Dateien müssen sie zuvor noch den Seitenquelltext öffnen (Strg + U).

css/layout.css

Genauere Angaben zu den verwendeten CSS-Eigenschaften finden sie im folgenden Unterkapitel.

iframes/kopf.html

Passen Sie den Kopf nach ihren Wünschen an!

iframes/menu.html

Passen Sie das Menü nach ihren Wünschen an! Es müssen hier vor allem Links auf alle ihre Seiten stehen.
In <a href=""> findet sich ein neues Attribut target="". Normalerweise wird ein Verweisziel immer im selben Frame (<iframe>) wie der aufrufende Link dargestellt. target="_top" durchbricht dies und schreibt die neue Seite ins gesamte Fenster. Denken sie auch daran, dass sich die Datei menu.html im Unterverzeichnis iframes/ befindet und die aufzurufenden Webseiten im Projektverzeichnis (../index.html).

js/funktionen.js

Diese JavaScript-Funktion kennen wir schon aus Beispiel 13. Es gibt dazu also nichts weiter zu sagen.

Neue Tags und Eigenschaften

<img class="Kopf" src="…" alt="..."/>

Hier binden wir ein Bild mit einer URI (src="") und einem Alternativtext (alt="") ein. Außerdem bekommt das Bild seine eigene Klasse, kann also wieder direkt mit CSS selektiert werden.

h1 { font-size:x-large; color:darkblue; }
h2 { font-size:large; color:darkblue; }
…

Wenn es um die reinen Textformatierungen geht, schlagen sie bitte in der Referenz nach. Die meisten CSS-Anweisungen sind selbsterklärend.
(Anhang: CSS-Eigenschaften)

Wichtige Formatierungen:

body {font-family:"Arial",Helvetica,sans-serif;

Weist dem gesamten Dokument eine Grundschriftart zu. Als Werte stehen durch Kommata getrennt mehrere Schriftarten. Im Beispiel sind das serifenlose („ohne Füßchen“) Schriften für Windows, Linux/Mac und allgemein.

background-color: #88f;

Farbangabe für den Hintergrund eines Tags.

position: absolute;

Das Tag (hier <div>) soll absolut, das heißt immer gleichbleibend zur linken oberen Ecke des Dokumentes, platziert werden.

position: fixed;

Das Tag (hier <div>) soll fixiert, das heißt immer gleichbleibend zur linken oberen des darstellenden Fenster, platziert werden.

border: 0; padding: 2pt;

Das Tag (hier <div>) hat keinen Rahmen und einen Innenabstand von 2 Punkten zwischen Rahmen und Text.

border: .5em ridge #fff; padding: 1em;

Das Tag (hier <div>) hat einen Rahmen von 0,5 Zeichenhöhen, ist vom Typ „ridge“, hat die Farbe #fff (weiß) und einen Abstand von einer Zeichenhöhe zwischen Rahmen und Text.

left: 2%; top: 0px;

Das Tag (hier <div>) hat 2% Abstand vom linken und 0 Pixel vom oberen Dokumentrand (keinen).

height: 100%; width: 95%;

Das Tag (hier <div>) hat eine Höhe von 100% und eine Breite von 95%.

z-index: 1;

Das Tag (hier <div>) liegt auf der Z-Achse (in den Raum hinein) auf Ebene 1 und ist damit das unterste.

Bitte beachten sie den Anhang: CSS-Einheiten und Farben, den Anhang: CSS-Eigenschaften und den Anhang: CSS-Boxmodell an dieser Stelle.

Hauptseite einer Webpräsenz

Die Hauptseite einer Webpräsenz heißt so gut wie immer index.html. Dies ist eine Vorgabe des Webservers, der eine Seite an den Browser ausliefert. Das heißt, wenn keine Webseite im Browser angegeben wird, liefert der Webserver die Seite index.html (beim IIS früher auch default.htm) zurück.

Zusammenfassung

• Legen sie für ihre eigenen Projekte immer Vorlagen an
• Testen sie die Vorlagen aus, bevor sie eine ganze Webpräsenz erstellen. Diesen Vorgang nennt man auch Webdesign.

Webpräsenz mit Leben füllen

Das war jetzt eine ganze Menge Holz auf einmal. Aber jetzt können wir weitere Seiten für unser Projekt erstellen.

Zunächst zur Übersicht noch einmal die Verzeichnisstruktur (Verzeichnisse enden mit „/“):

Wenn sie eine weitere Seite erstellen wollen, kopieren sie die Seitenvorlage und benennen sie entsprechend um. Vergessen sie nicht, diese Seite im Menü zugänglich zu machen. Als Kontaktseite können sie beispielsweise ihre Visitenkarte benutzen. Für das Impressum benutzen sie eine Impressumsgenerator (googlen (http://www.google.de/search?q=impressumsgenerator)). Auf der Hauptseite (index.html) stellen sie sich beispielsweise selbst kurz vor.

Zu guter letzt können sie die Seite auf einen Webserver kopieren. (Anhang: Benutzung von FTP)

Zusammenfassung

• Übung macht den Meister
• Benutzen sie die Referenz (Anhang)

Kapitel

n.v.

Einführung

Im zweiten Kursteil verfeinern wir unsere Kenntnisse und lernen neue Tipps und Tricks. Nicht zu letzt beschäftigen wir uns auch mit Formularen.

Außerdem kümmern wir uns um die Rahmenbedingungen (Barrierefreiheit, Rechte, Werbung, Datenschutz und Suchoptimierung) einer Webpräsenz. Wir kümmern uns um die neue Heimat unser Webpräsenz (Webserver) und beschäftigen uns kurz mit Projekt­management im Webumfeld.

Unterkapitel

n.v.

Einführung

Hier im Kursteil II erweitern wir unsere Webpräsenz aus Kursteil I um einige fortgeschrittene Methoden. Eine moderne Webpräsenz benötigt nicht nur eine Startseite, eine Kontaktseite und ein Impressum, sondern auch Bildergalerien, Anfahrtskarten und ähnliches.

Außerdem sollten wir die Dateien unserer Webpräsenz auch mal auf einen FTP-Server hochladen: Anhang: Benutzung von FTP

Beispiel analysieren

Diesmal gehen wir etwas professioneller an die Analyse des Beispiels heran. Schauen wir uns aber zunächst erst einmal das erweiterte Beispiel der Webpräsenz (beispiele/04_erweiterte_Webpraesenz/index.html) an. Dazu klicken sie den vorstehenden Link mit der Kombination Strg + '  an, um ihn in einem neuen Tab zu öffnen.

Download: 04_erweiterte_Webpraesenz.zip (beispiele/04_erweiterte_Webpraesenz/04_erweiterte_Webpraesenz.zip)

Wie sie bereits wissen, können sie in Firefox (aber beispielsweise auch Chrome) mit der Strg + U den Quelltext der Seite öffnen. Wenn sie die Web Developer Erweiterung installiert und dort in den Optionen das Anzeigen von Quellcode in einem Tab aktiviert haben, können sie den Quelltext mit Shift + Alt + U in einem Tab anzeigen. Der Übersicht wegen, sollte das unser Standard werden.

Wenn sie jetzt den Quelltext geöffnet haben, können sie mit Strg + '  im Quelltext die weiteren Dateien (layout.css, funktionen.css) in neuen Tabs öffnen. Um auch die Dateien standard.css und erweitert.css zu sehen, benutzen sie die Webdeveloper Funktion "CSS / View CSS" (Shift + Alt + C) jeweils mit umgeschalteten Stylesheet. (s. Anhang: Tastaturkommandos)

Mit dieser Methode können sie den Quellcode einer interessanten Website schnell und einfach analysieren. Das Verwenden von Tabs erleichtert dabei die Übersicht ganz erheblich, da sich die Dateien nicht auf mehrere Fenster verteilen.

Anmerkung: Ab sofort werde ich dieses Vorgehen als bekannt voraussetzen und nur noch anmerken, dass wir beispielsweise den Quellcode oder eine bestimmte Datei anschauen wollen.

Die Erweiterungen

Widmen wir uns jetzt Schritt für Schritt den Neuerungen in unserem Beispiel. Öffnen sie sich dazu zunächst die Dateien des Beispiels, wie oben beschrieben. Alle relevanten Neuerungen sind mit doppelt unterstrichenen Kommentaren versehen, die mit den Überschriften hier im Buch korrellieren.

(Siehe dazu die folgenden Seiten).

Zusammenfassung

• Als Fortgeschrittener sollten sie mit dem Browser und seinen entsprechenden Hilfen umgehen können
• Damit können sie eine Webseite schnell und einfach analysieren.
• Denken sie daran, dass sie weitere Information zu den vorgestellten Lösungen in selfhtml erhalten oder googlen können.

Dateien: layout.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/layout.css)

Drucklayout

Mit dem CSS-Befehl @media können sie Stylesheet auf bestimmt Ausgabemedien optimieren. Entsprechend finden sie die Beispiele auch in der Datei vorlagen/layout.css. Wichtig ist das für die Ausgabe der Seite auf dem Drucker und besonders großen oder kleinen Displays.

Für das Drucklayout wird das Menu versteckt und der Inhalt ganz nach links verschoben, um den ganzen Druckbereich ausnutzen zu können.

/* Drucklayout */
@media print {
  #MenueDiv { display: none; }
  #InhaltDiv { left: 0px; }
}

Mit der Druckvorschau von Firefox, können sie sich dieses Varhalten anschauen.

dynamisches Layout

Das dynamische Layout verändert Poition und Aussehen des Menüs auf Geräten die weniger als 480 Pixel in der Breite haben. Neu sind hier die Umdefinition der <ul> als display: inline;, das heißt aus dem Block-Element wird ein Inline-Element und damit stehen alle Menüpunkt hintereinander.

Außerdem werden die Positionen der <div> nicht mehr position: absolute; oder position: fixed; sondern position: static; definiert. Das bewirkt, dass Kopf, Menü und Inhalte wie normale HTML-Elemente direkt untereinander gestellt werden (wie in unserem Visitenkartenbeispiel die <p>). So wird das kleine Display optimal ausgenutzt.

/* Dynamisches Layout */
@media only screen and (min-width: 481px) {
  ul.Menue { width: 10em; margin: 0; padding: 2pt; }
  li.Menue { list-style: none; margin: 2pt;
             padding: 2pt; border: 1px solid gray;
             background-color: silver; }
}

/* Spezielle Defintionen für Mobilgeräte */
@media only screen and (max-width: 480px) {
  ul.Menue { display: inline; }
  li.Menue { list-style: none; border: 1px solid gray;
             background-color: silver; display: inline; }
}

@media only screen and (max-width: 480px) {
  #KopfDiv { position: static; height: auto; width: 100%; }
  #MenueDiv { position: static; padding: 0; width: 100%; height: 50px; }
  #InhaltDiv { position: static; min-width: 50%; min-height: 50%; }
}

Zusammenfassung

• Der CSS-Befehl @media optimiert Stylesheet für Ausgabemedien.
• Über weitere Parameter von @media passen sie Stylesheets auf Bildschirmbreiten an.

Dateien: index.html (beispiele/04_erweiterte_Webpraesenz/index.html), schmetterling.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/schmetterling.js)

Doppelt animierte Grafiken

Mit doppelt animierter Grafik ist hier gemeint, dass die Grafik selbst ein animiertes GIF (mit transparenten Hintergrund) ist und dieses GIF zusätzlich noch die Position auf der Seite wechselt. Die entsprechenden Stellen sind im Quelltext mit „Animation Schmetterling“ gekennzeichnet.

Position durch CSS

Durchsuchen wir zunächst wieder den Quelltext der Index-Seite des Beispiels: Als erstes finden wir dort mehrere Positionen (.pos0 - .pos9), welche im JavaScript-Teil zur Animation benutzt werden. Hier können sie ihrem Schmetterling also die Flugroute vorgeben.

/* Animation Schmetterling (für function animateButterfly()) */
.pos0 { position:absolute; Left:230px; Top:60px;  }
.pos1 { position:absolute; Left:215px; Top:70px;  }
.pos2 { position:absolute; Left:225px; Top:60px;  }
.pos3 { position:absolute; Left:240px; Top:65px;  }
.pos4 { position:absolute; Left:255px; Top:75px;  }
.pos5 { position:absolute; Left:285px; Top:90px;  }
.pos6 { position:absolute; Left:275px; Top:110px; }
.pos7 { position:absolute; Left:255px; Top:135px; }
.pos8 { position:absolute; Left:270px; Top:170px; }
.pos9 { position:absolute; Left:295px; Top:195px; }

Aufruf JavaScript

Dann finden wir das <img>-Tag des Schmetterlings innerhalb eines <div> (mit der Vorgabepoition .pos1). Interessant ist das neue Attribut onmouseover="", welches die JS-Funktion animateButterfly() startet, wenn die Maus über das Element (hier das Bild) fährt.

<div class="pos1" id="butterflyDiv">
<!-- Animation Schmetterling per mouseover starten -->
  <img id="butterflyImg"
       src="bilder/schmetterling.gif"
       height="80"
       alt="animierter Schmetterling"
       onmouseover="javascript:animateButterfly())"/>
</div>

Ein Stückchen weiter unten wird diese Funktion noch einmal innerhalb eines Links aufgerufen. Der Link bekommt dazu als Schema „javascript:“ angewiesen, damit er weiss, dass er Javascript aufrufen soll.

<p>
<!-- Animation Schmetterling per Link starten -->
  <a href="javascript:animateButterfly()">
    Flieg, Schmetterling, flieg!
  </a>
</p>

Den eigentlichen JavaScript-Code in schmetterling.js werden wir nicht genauer analysieren, da er an dieser Stelle viel zu komplex ist.

Zusammenfassung

Animationen auf Webseiten erreichen sie mittels

• animierten GIFs (Grafiken)
• JavaScript-Code

Dateien: index.html (beispiele/04_erweiterte_Webpraesenz/index.html), standard.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/standard.css), erweitert.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/erweitert.css), switchStyle.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/switchStyle.js)

Stylesheet einbinden

Ein immer wieder interessanter Effekt, ist das Umschalten des Stylesheets im laufenden Betrieb.

Auch hier starten wir wieder im Quelltext der Hauptseite. Zunächst stossen wir da innerhalb der Definition der internen Stylesheets auf die Zeile <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" />. Hier verlinken wir zusätlich zum normalen Stylesheet layout.css ein leeres standard.css.

  <!-- Stylesheet umschalten - Einbinden des Stylesheets
       ================================================= -->
  <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" />

Stylesheet umschalten

Weiter unten findet sich dann nur noch der Aufruf der JS-Funktion changeCSSFile() aus einem Link heraus, wie schon oben beim Schmetterling beschrieben.

    <!-- Stylesheet umschalten
         ===================== -->
      <a href="javascript:changeCSSFile('vorlagen/standard.css', 0);">Style „Standard“</a> /
      <a href="javascript:changeCSSFile('vorlagen/erweitert.css', 0);">Style „Erweitert“</a>

JavaScript

Diese Funktion findet sich in der Datei vorlagen/switchStyle.js. Sie ersetzt die Zeile <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" /> durch <link rel="stylesheet" type="text/css" href="vorlagen/erweitert.css" />.

Zusammenfassung

• Mit JavaScript können sie das aktuelle Stylesheet umschalten.
• Das Umschalten von Stylesheets ist in speziellen Situation (Barrierefreiheit) notwendig.

Dateien: index.html (beispiele/04_erweiterte_Webpraesenz/index.html), toggleDiv.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/toggleDiv.js)

Vorbemerkung

Das Ein- und Ausblenden von Elementen auf Webseiten ist zwar ein interessanter Effekt. Stellt aber für manche Nutzer durchaus eine Barriere dar und sollte deshalb nur sparsam eingesetzt werden.

Absätze ausblenden

Im Quelltext der Hauptseite findet sich dazu zunächst innerhalb der internen Stylesheets zwei Definitionen #Absatz1 {display:none;} und #Absatz2 {display:none;}. Die Eigenschaft display:none; verhindert das Anzeigen des so formatierten Tags. Die Defintion auf der Seite ist durchaus gewollt, da das Verstecken der Absätze ja auch nur für diese Seite gilt!

    /* Absätze einblenden (function toggleDiv(myDiv)) */
    #Absatz1 { display:none; }
    #Absatz2 { display:none; }

Absätze einblenden

Um sie wieder einzublenden, findet sich der Aufruf der JS-Funktion toggleDiv() mit dem Parameter „Absatz1“ oder „Absatz2“ jeweils vor dem versteckten Absatz. Bitte beachten sie, dass der Parameter und die id="" übereinstimmen müssen.

Anmerkung: Hier macht übrigens wieder eine „ID“ Sinn, da sich das Ein-/Ausblenden jeweils nur auf einen bestimmten Absatz auswirken soll.

    <!-- Absatz 1 einblenden -->
      <a href="%%1%%">
        mehr ...
      </a>
    </p>
    <div id="Absatz1">

JavaScript

In der Datei vorlagen/toggleDiv.js ist diese Funktion definert. Sie manipuliert den Wert display: zwischen "" (leer) und block. Der leere Wert provoziert das Standardverhalten (hidden) aus dem Stylesheet und block ist der Standardwert für ein <div> (Blockelement). Damit zeigt block den <div> an.

Zusammenfassung

• Um die übersichtlichkeit einer Seite zu wahren, kann es nötig sein, zunächst nur einen Anriß zu zeigen und erst auf Klick den gesamten Artikel.
• Auch hier verrichtet vor allem wieder JavaScript seinen Dienst.

Dateien: anfahrt.html (beispiele/04_erweiterte_Webpraesenz/anfahrt.html), osm.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/osm.js), osm.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/osm.css)

OpenStreetMap

Für eine Anfahrtsbeschreibung bietet sich heute die Verwendung von OpenStreetMap (http://www.openstreetmap.de) an. Openstreetmap ist die Wikipedia der Landkarten, es stellt also frei Geodaten und Karten zur Verfügung.

Einbindung

Das Beispiel dazu finden sie nicht auf der Hauptseite sondern unter anfahrt.html.

Hier finden sich drei Stellen: im Header das Einbinden von drei zusätzlichen JS-Funktionsbibliotheken und der CSS-Datei, im <body> der Aufruf der darstellenden Funktion drawmap() und im Inhalte-Div ein <div id="map">, der Platz für die Karte schafft (formatiert in osm.css).

Anmerkung: Beachten sie, dass die Reihenfolge der JavaScript-Bibliotheken wichtig ist. osm.js benutzt OpenStreetMap.js und OpenLayers.js, OpenStreetMap.js wiederum benutzt OpenLayers.js. Entsprechend müssen sie zuerst OpenLayers.js dann OpenStreetMap.js und zuletzt osm.js einbinden.

<head>
  …
  <!-- Anfahrt mit Open Source -->
  <link rel="stylesheet" type="text/css" href="vorlagen/osm.css" />
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script type="text/javascript" src="vorlagen/osm.js"></script>
  …
</head>

  <!-- Anfahrt mit Open Source Map darstellen -->
  <body onload="drawmap(13.150072,52.714831,12,'CIS - Ch. Hartnick, Sandweg 10<br/>16727 Oberkrämer OT Bärenklau')">

<body onload="…">
  …
  <!-- Anfahrt mit Open Source Bereich -->
  <div id="map"></div>
  …
</body>

JavaScript

Den eigentlichen JavaScript-Code werden wir nicht genauer analysieren, da er viel zu komplex ist. Allerdings können wir über die Aufrufparameter die Karte beeinflussen.

Für die Parameter können sie unter www.osm.org (http://www.osm.org) auf das Symbol für „Teilen“ (Viereck mit Pfeil) klicken und ihren Kartenausschnitt wählen. Markieren sie „Kartenmarker setzen“. Die Daten für Zoom, Längengrad und Breitengrad erscheinen dann in der Eingabezeile des Browsers (allerdings in umgekehrter Reihenfolge).

Mitmach-Projekt

Openstreetmap ist ein Mitmachprojekt. Sollten sie mitmachen wollen, finden sie alles für den Einstieg auf der Homepage (http://www.openstreetmap.de) unter „Wie kann ich mitmachen“. Auf der Projektseite (http://www.osm.org) können sie mit dem Symbol „Hinweis/Fehler melden“ (Sprechblase) Anmerkungen zur Karte geben.

Zusammenfassung

• Eine Anfahrtsskizze per Landkarte gehört zu jeder modernen Webpräsenz.
• OSM eignet sich dazu sehr gut, zumal sie selbst die Kartendaten beeinflussen können.

Dateien: bilder.html (beispiele/04_erweiterte_Webpraesenz/bilder.html), jquery-1.10.2.min.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/jquery-1.10.2.min.js), lightbox-2.6.min.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/lightbox-2.6.min.js), lightbox.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/lightbox.css)

Allgemein

Moderne Webpräsenzen sind ohne eine animierte Bildergallerie kaum denkbar. Dafür müssen wir JavaScript benutzen. Natürlich programmieren wir eine entsprechende Funktion nicht selbst, sondern nutzen ein bestehende Bibliothek aus dem Netz: LightBox von Lokesh Dhakar (http://www.lokeshdhakar.com/projects/lightbox2/) (Download LightBox 2.6 (beispiele/04_Lightbox/lightbox2.6.zip))

Anmerkung: Auf der Website von Lokesh steht mittlerweile eine neuere Version zur Verfügung. Deshalb ist es sinnvoll alle Dateien/Bibliotheken immer auf die eigene Site zu kopieren.

Lightbox

Sowohl JQuery (http://de.wikipedia.org/wiki/JQuery) als auch Lightbox sind in einer Minimalversion (.min.js) beigelegt, die nicht für Sichtbarkeit, sondern für möglichst kleine Dateigrößen ausgelegt sind. Sie sind also auf Ladezeit optimiert. Sollten sie externes JavaScript verwenden, achten sie immer auf solche Minimalversionen!

Vorbereitung

Die Dateien jquery-1.10.2.min.js, lightbox-2.6.min.js und lightbox.css sind im Header der HTML-Datei eingebunden.

  <!-- LightBox -->
  <link rel="stylesheet" type="text/css" href="vorlagen/lightbox.css" />
  <script type="text/javascript" src="vorlagen/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="vorlagen/lightbox-2.6.min.js"></script>

Im bilder-Ordner finden sie die Dateien close.png, loading.gif, prev.png und next.png, die lightbox.css benötigt. Die Orginaldatei von Lokesh Dhakar sucht sie im Ordner img, das habe ich aber für unser Beispiel angepaßt.

Benutzung

Jedes Bild wird als Link (<a href="">) in der Seite eingebunden. Dieser Link bekommt ein spezielles Attribut (<a href="" data-lightbox="Gruppe">), damit er von Lightbox behandelt wird. Das innerhalb des Links eingebundene Bild selbst sollte ein Thumbnail (Vorschaubild (http://de.wikipedia.org/wiki/Vorschaubild)) des eigentlichen Bildes sein.

Dieses Attribut data-lightbox="" sollte bei einer einzelnen Grafik eindeutig sein:

<a href="bilder/single.jpg" data-lightbox="Einzeln" title="Bildüberschrift"><img src="bilder/thumb_single.jpg" /></a>

Bei einer Diashow sollte er dagegen für alle Bilder gleich sein.

<div class="Bilder">
  <a href="bilder/image-1.jpg" data-lightbox="Gruppe1" title="Bild1"><img src="bilder/thumb-1.jpg" /></a>
  <a href="bilder/image-2.jpg" data-lightbox="Gruppe1" title="Bild2"><img src="bilder/thumb-2.jpg" /></a>
  <a href="bilder/image-3.jpg" data-lightbox="Gruppe1" title="Bild3"><img src="bilder/thumb-3.jpg" /></a>
  <a href="bilder/image-4.jpg" data-lightbox="Gruppe1" title="Bild4"><img src="bilder/thumb-4.jpg" /></a>
  <a href="bilder/image-5.jpg" data-lightbox="Gruppe1" title="Bild5"><img src="bilder/thumb-5.jpg" /></a>
</div>

Anmerkung: Vielleicht ist es ihnen ja aufgefallen. Lightbox wird nicht auf der HTML-Seite aufgerufen (kein Funktionsaufruf). Dies ist (natürlich) kein Fehler, sondern ein Trick im Javascript Code.

Zusammenfassung

• Eine Bildergallerie gehört zu jeder modernen Webpräsenz.
• Lieghtbox eignet sich dazu sehr gut.

Einführung

HTML-Formulare brauchen immer eine „Gegenstelle“ auf dem Server, der sie die eingegebenen Daten übergeben können. Zwar kann man die Formulardaten auch mit JavaScript weiterverarbeiten, doch irgendwann müssen sie gespeichert werden. Deshalb benötigen wir zum Testen des folgenden Beispiels einen lokalen oder entfernten Webserver (s.Anhang XAMPP).

Referenz: Formulare (http://de.selfhtml.org/navigation/html.htm#formulare) in SelfHTML.

Neue Tags

Folgende Tags existieren für Formulare:

Die einzelnen Tags haben recht vielfältige Attribute:

form

GET und POST sind Verfahren um die Werte von Formularen an eine Auswerteseite zu übergeben. GET versendet die Werte in der URI (name.html?variable=wert) und kann so etwa bis zu 200 Zeichen übergeben. GET ist schneller als POST.

POST versendet die Werte über die Standardeingabe (also direkt). Die Werte erscheinen so nicht in der URI und werden damit nicht in den Log-Dateien des Servers gespeichert. Außerdem sind Passwörter nicht zu sehen.

Get und Post in SelfPHP (http://www.selfphp.info/praxisbuch/praxisbuchseite.php?site=183&group=32)

label

<label for="FeldID"> bezeichnet ein Eingabefeld. Dies kann zwar auch mittels normalen HTML erfolgen, aber <label> ist barrierefrei und besser mit CSS zu händeln.

input type="…"

Beispiel

Dateien: kontakt.html (beispiele/04_erweiterte_Webpraesenz/kontakt.html), antwort.php (_show_plain.php?name=beispiele/04_erweiterte_Webpraesenz/antwort.php) formular.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/formular.css)

Beachten sie, dass dieses Beispiel nur auf einem Webserver funktioniert! Sie sehen schon an der Dateiendung ".php (http://de.wikipedia.org/wiki/PHP)", das es sich bei der Antwortdatei (antwort.php) um ein Serverskript handelt.

Ähnlich wie bei Javascript können sie viele freie PHP-Skripte im Netz finden und benutzen. Selbst die meisten großen Webanwendungen wie Conten Management Systeme und Shops sind im Endeffekt PHP-Skripte.

Neben PHP existieren noch andere Sprachen für Server. Klären sie mit ihrem Provider, welche ihr Hostingangebot unterstützt. (s. Webserver)

Kontaktseite

form span input { display:none }

Blendet das <input>-Tag, welches von einen <span> umgeben ist, aus. Dieses erste Feld sollte leer bleiben und ist eine Falle für Spammer, welche über das Formular automatisch Werbung verschicken wollen.

label { display: inline-block; width: 12em;

Wandelt das <label>-Tag in ein gemischtes "inline-block"-Element um, um ihn eine Breite (width) zuordnen zu können. So müssen die einzelnen Eingabefelder nicht in einer formatierenden Tabelle angeordnet werden.

.ak { border-bottom: 0.1em solid blue; }

Formatierung um Tastenkürzel (analog zu Windows) per Unterstreichung hervorzuheben. Firefox ruft die Tastenkürzel mit Shift + Alt + Tastenkürzel auf.

function checkFields ()

Diese JS-Funktion prüft die Eingabefelder Name, Email und Nachricht auf Eingaben und verweigert sonst das Abschicken des Formulars (return false;).

<form name="Contact" action="kform.php" method="post" onsubmit="return checkFields();">

Das Formular ruft beim Abschicken die Datei "kform.php" auf. Vorher prüft die JS-Funktion "checkFields()" die Eingabefelder.

<span><input …>

Markierung für das ausgeblendete Spamfeld (s.o.).

… <span class="ak">N</span>ame … <input accesskey="n"

Hervorheben des Tastenkürzel (s.o.)

maxlength="70" size="47"

Es dürfen höchstens 70 Zeichen eingegeben werden und das Eingabefeld ist 47 Zeichen breit.

<input type="radio" name="rbtn" checked="checked" …>

<input type="radio" name="rbtn"
<input type="radio" name="rbtn" ))
Diese Umschalteauswahl (Radiobutton) mit drei Schaltern erlaubt nur jeweils eine Auswahl. Die Zusammengehörigkeit der Felder erfolgt über den gleichen Namen. Das Attribut checked="checked" belegt diesen Schalter vor.

<input name="cbx[…]" type="checkbox" …>

Diese Mehrfachauswahl (Checkbox cbx[1]-cbx[5]) mit fünf Schaltern erlaubt eine beliebige Auswahl. Die Zusammengehörigkeit der Felder erfolgt über den gleichen Namen. (Anmerkung: Die eckigen Klammern definieren ein Array für PHP).

<select> <option>

Definition einer Auswahlliste.

<textarea cols="56" rows="13">

Definition eines Eingabebereichs mit der Größe 56*13.

<input type="reset" …>

Schalter zum Leeren (reset) und Abschicken (submit) des Formulars.

Antwortseite

PHP-Dateien werden auf dem Server interpretiert. Dieser liefert dann die interpretierte Datei als reine HTML-Datei aus. PHP-Code ist deshalb auf dem Client niemals zu sehen.

Ich gehe hier kurz auf den PHP-Code ein, damit sie eine Vorstellung bekommen, wie dieser Aussieht. Beachten sie das PHP und Javascript zwei völlig verschiedene Sprachen sind, auch wenn hier zur Unterscheidung von HTML die selbe Farbe eingesetzt wird!

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>

Die Kennung "<?php *..* ?>" leitet einen PHP-Skriptteil innerhalb einer HTML-Datei ein. Allerdings muss die Datei dazu vom Webserver als PHP-Datei erkannt werden (Endung: PHP). Da "<?xml … ?>" auch mit "<?" anfängt, wird es hier per echo in die HTML-Datei ausgegeben.

<a href="javascript:history.back();">

Entspricht der Funktionalität des Browser-Schalters "Zurück".

$mymail='buch@example.com';

Hier muss ihre Email-Adresse stehen.

$pname= $_POST['name'];

Variablen beginnen in PHP immer mit "$". Die Funktion $_POST[] übergibt per POST übertragene Werte. Bei der Checkbox wird ein komplettes Array übergeben ($pcheck['1'] - $pcheck['5']).

die('Meldung');

Beendet (die - stirb) das PHP-Skript an dieser Stelle.

$msgbr=nl2br($pmsg);

Die Funktion nl2br() wandelt Zeilenumbrüche in <br /> um.

$mx=<<<cb
…
cb;

Der Operator "<<<" liest die nächsten Zeilen in eine Variable ein, bis er die Endekennung (hier "cb") findet. Die Endekennung muss immer in der ersten Zeile stehen!

mail()

Die Funktion mail() verschickt eine Mail über einen Mailserver (MTA (http://de.wikipedia.org/wiki/Mail_Transfer_Agent)). Wenn ein solcher nicht installiert ist, kommt es zu einem Fehler.

Anpassung

Wenn sie das Mailformular auf ihrer Seite verwenden wollen, benötigen sie sicherlich nicht alle Formularfelder. Wenn sie nun Felder in der HTML-Datei löschen, müssen sie diese auch in der PHP-Datei entfernen.

Suchen sie dazu unter dem Kommentar //Hole alle Inhalte der Formularfelder das entsprechende Feld über das Attribut name="". Merken sie sich die zugehörige Variable. Mit dieser finden sie die entsprechenden Zeilen unter dem Kommentar //Prüfen der Felder und //Zusammenfügen der Mail. Diese Zeilen unter den Kommentaren können sie dann löschen.

Zusammenfassung

• Formulare brauchen praktisch immer ein Serverskript als Gegenstelle.
• Mit nur ein wenig Aufwand werden Formulare barrierefrei.

favicon.ico

Definition

Ein Favicon (Favoriten-Symbol) ist ein 16×16 oder 32×32 Pixel großes Symbol. Es dient der Wiedererkennung einer Webpräsenz. Das Favicon taucht auch in der Lesezeichenliste (Favoriten), bei den Register­karten und unter Windows beim Speichern einer Seite auf dem Desktop auf.

Einbindung

Um ein Favicon einzubinden, existieren zwei Möglichkeiten:

• Die Datei „favicon.ico“ im Basisverzeichnis der Domain speichern. Achtung: ico-Format (http://de.wikipedia.org/wiki/ICO (Dateiformat)) benutzen. Dies wird vom W3C ausdrücklich nicht empfohlen und auch nicht von allen Browsern unterstützt.
• Referenzieren über <link> im Kopf (<head>) einer HTML-Seite.
  <link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon" />

Das Attribut type="" wird bei anderen Formaten als .ico verwendet:

• ICO: image/x-icon,
  
• GIF: image/gif und
  
• PNG: image/png

Die Standardgrößen für .ICO sind 16×16 Pixel oder 32×32 Pixel. Die Farbtiefen können 16 bis 16,7 Millionen Farben (4-16 Bit). Für .GIF und .PNG entsprechend 16×16 Pixel und 256 Farben (8 Bit).

Generator

Die einfachste Art eine Favicon zu erstellen, ist ein Webgenerator:

Favicon Generator (http://www.favicon.cc/)

robots.txt

Robots.txt (http://de.wikipedia.org/wiki/Robots.txt) in der Wikipedia.

User-agent: * Disallow:

• alles klein: "robots.txt".
• im Hauptverzeichnis
• klartext
• FTP ASCII Modus übertragen
• killer-robots.txt

.htaccess

.htaccess (http://de.wikipedia.org/wiki/.htaccess) in der Wikipedia.

Manifest

http://www.mediaevent.de/xhtml/manifest.html

Zusammenfassung

• favicon.ico: Symbol für eine Webseite
• robots.txt: Beeinflussung von Suchrobotern
• .htaccess: Beeinflussung des Webservers (vor allem Zugangsschutz)

Einfacher Generator

Eine Vorlage für eine Webpräsenz haben wir am Ende des letzten Hauptkapitels mit unserem Vorlagensystem kennengelernt. Dieses können wir relativ einfach noch ein wenig erweitern.

Als Vorüberlegung trennen wir eine Webseite aus der Webpräsenz in verschiedene Sektionen auf. Bisher haben wir die Unterseiten seiten_vorlage.html, kopf.html und menu.html. Innerhalb der Seitenvorlage haben wir noch die Sektion für den Inhalt.

Die Idee für unser Mini-Generator ist nun folgende: Unsere Vorlage wird jetzt per Platzhalter (%%menu%% und %%inhalt%%) mit dem automatisch generierten Menu und den Inhaltsdateien (index.source, ….source) befüllt. Der Kopf ist in die Vorlage integriert. Außerdem können beliebige Platzhalter (%%Seitentitel%%, %%Autor%%) mittels der Datei ersetzen.liste ersetzt werden.

Das Generieren des Menüs (cms/_menu.template) und das Ersetzen der Platzhalter übernimmt ein kleines Programm (Windows: generate.bat / Linux: generate.sh). Wobei das Windows-Programm das Linux-Programm mittels einer Windows-Bash (http://de.wikipedia.org/wiki/Bourne-again_shell) einfach aufruft. (Beispiel Generate)

Die eigentlichen Inhalte bekommen jeweils eine eigene Datei mit der Endung .source im Unterverzeichnis cms. Außerdem wird jeder Source-Datei eine Ziffer vorangestellt, die die Reihenfolge des Menüs vorgibt (0index.source, 1anfahrt.source, 2…). Das System verwaltet also höchstens zehn Seiten.

Unser Projekt sieht dann so aus:

Der Vorteil des Mini-CMS besteht darin, das immer alles neu generiert wird - also sich selbst Änderungen in der Datei cms/vorlage.template in den generierten Seiten auswirken. Außerdem müssen sie sich nicht um das Menü kümmern. Darin liegt dann auch gleich der größte Nachteil. Mehr als zehn Seiten lassen sich nicht verwalten und es gibt kein hierarchisches Menü.

Hagen

Hagen (HTML-Generator) funktioniert nach dem selben Prinzip, ist aber um Größenordnungen komplexer. Es unterstützt den Webentwickler bei nahezu alle Aufgaben.

Zu Hagen existiert ein eigenes Handbuch (http://buch.im-ned.de/hagen/).

Zusammenfassung

• Selbst einfache selbstgeschriebene Generatoren können viel Arbeit abnehmen.
• Mit Hagen steht ein freier umfassender Generator zur Verfügung.

Hosting

Der Begriff Hosting (http://de.wikipedia.org/wiki/Hosting) bedeutet „Gastgeber sein“. Wenn sie eine Webpräsenz geschaffen haben, möchten sie diese auch der Allgemeinheit zugänglich machen. Dazu mieten sie normalerweise bei einem Provider (http://de.wikipedia.org/wiki/Provider) oder Webhoster (http://de.wikipedia.org/wiki/Webhoster) Dienstleistungen wie

• Web-Speicherplatz
• Web-Datenbanken (MySQL (http://de.wikipedia.org/wiki/MySQL), PostgreSQL (http://de.wikipedia.org/wiki/PostgreSQL) oder Oracle (http://de.wikipedia.org/wiki/Oracle_(Datenbanksystem)))
• komplette Shop-Systeme oder CMS (TYPO3 (http://de.wikipedia.org/wiki/TYPO3), Drupal (http://de.wikipedia.org/wiki/Drupal) oder Joomla (http://de.wikipedia.org/wiki/Joomla))

Außerdem kümmern sich Webhoster um

• die Registrierung von Domains unter TLDs
• E-Mail-Hosting
• Administration (Verwaltung)

Normalerweise haben Hoster verschiedene Angebote für private Websites, Firmen-Websites und kommerzielle Internetprojekte.

Beispiel: WEBHOSTONE (http://www.webhostone.de)

• Webhosting beim DMOZ (http://www.dmoz.org/World/Deutsch/Computer/Internet/Webdesign_und_-entwicklung/Webhosting/)
• Top 10 Listen Webhoster (http://www.webhostlist.de/top-10/)

Arten von Webservern

Es gibt verschiedene Arten von Webservern. Für den einfachen Einstieg bekommt man Webspace (http://de.wikipedia.org/wiki/Webspace) bei Sharehostern (http://de.wikipedia.org/wiki/Sharehoster). Dort kann man beliebige Dateien im Netz ohne eigenem Domainnamen speichern.

Bei einem Webhoster bekommt man verschieden Angebote wie: Eine eigene Domain auf einem geteilten Server (virtuelle Domain (http://de.wikipedia.org/wiki/Virtual_Hosting) (IP/Name)), eine eigene Domain auf einem virtuellen Server (virtuelle Maschine (http://de.wikipedia.org/wiki/Virtuelle_Maschine)), eine eigene Domain auf einem echten Server (dedicated Server (http://de.wikipedia.org/wiki/Server#Dedizierte_Server) bzw. RootServer (http://de.wikipedia.org/wiki/Host_%28Informationstechnik%29#Einem_Kunden_zugeordnet_.28dedicated_to_customer.29)), oder eine eigene Domain auf einem eigenem Server (Homing (http://de.wikipedia.org/wiki/Homing_%28Informationstechnologie%29)/Eigener Server). Wenn der Server vom Provider gewartet wird, spricht man vom managed Server (http://de.wikipedia.org/wiki/Managed_Server#Managed_Host).

Beispiel: WHO Produkte (http://www.webhostone.de/webspace.html)

Angebote im Webhosting

In einem Hosting-Vertrag sind meist Inklusivdomains enthalten. Man sollte darauf achten das der Traffic (http://de.wikipedia.org/wiki/Datenverkehr) (Datenverkehr) nicht extra berechnet wird (also eine Art Flatrate). Wird die eigene Webpräsenz plötzlich stark frquentiert, könnte es sonst teuer werden.

Die Leistungsfähigkeit wird auch stark durch die Anbindung ans Internet beschränkt. Je nach Anwendungsfall sollte es schon mindestens Fast Ethernet (http://de.wikipedia.org/wiki/Fast_Ethernet) (100MBit) seien. Normalerweise werden sie ein freies Unix (Linux, BSD) als Betriebssystem bekommen, manche Provider bieten allerdings auch Windows. Achten sie auch auf die Rechnerressourcen wie CPU (http://de.wikipedia.org/wiki/CPU) und Speicher (http://de.wikipedia.org/wiki/Arbeitsspeicher).

Fast jedes Webhosting bietet heute auch gleich Email-Dienste an. So können sie gleich vernünftige Adressen auf ihrer Webpräsenz angeben. Weitere Leistungen sind SSL (http://de.wikipedia.org/wiki/Transport_Layer_Security), PHP (http://de.wikipedia.org/wiki/PHP), MySQL (http://de.wikipedia.org/wiki/MySQL), CMS (http://de.wikipedia.org/wiki/Content-Management-System) und ähnliches.

Außerdem sollte es eine Administrationsoberfläche mit Zugriff auf Statistiken, Backups, das eigentliche Angebot (FTP, SSH)und Support geben. Die Verwaltung des Angebots sollte das Anlegen von Subdomains, Zugängen und Mailkonten, den Neustart des Systems, das Verändern der Konfiguration, das Einspielen von Updates und eine virtuelle Konsole (http://de.wikipedia.org/wiki/Kommandozeile) umfassen.

Beispiel: WHO Adminpanel (http://www.webhostone.de/who_adminpanel_einfuehrung.html)

Zusammenfassung

• Für jede Anforderung gibt es den geeigneten Webserver samt Provider.
• Achten sie allerdings auf die Features des Angebots. Erfahrungsgemäß bieten professionelle Provider den besseren Service für's gleiche Geld.

Unterkapitel

n.v.

Einführung

Im Internet bewegt man sich in der Öffentlichkeit. Und eine Präsenz dort ist wie ein Schaufenster in der Realität. Es ist also wichtig auch das drumherum zu beachten.

Standards

Die Web_Accessibility_Initiative (WAI (http://de.wikipedia.org/wiki/Web_Accessibility_Initiative)) ist eine Gruppe innerhalb des W3C, die sich um Standards (WCAG) zum barrierfreien Zugang im Web kümmert.

Auszug aus Wikipedia (cc-by-sa):

WCAG 1.0: Die wichtigsten Punkte

Zur Einhaltung des Standards WCAG 1.0 bedarf es insbesondere der folgenden vierzehn Punkte:

1. Stellen Sie äquivalente Alternativen für Audio- und visuellen Inhalt bereit.
2. Verlassen Sie sich nicht auf Farbe allein (beim Auszeichnen von Struktur/Semantik).
3. Verwenden Sie Markup und Stylesheets und erledigen Sie dies auf korrekte Weise.
4. Verdeutlichen Sie die Verwendung natürlicher Sprache (verwenden Sie beispielsweise das HTML-lang Attribut für das gesamte Dokument und Teile in einer spezifischen Sprache).
5. Erstellen Sie Tabellen, die geschmeidig transformieren (verwenden Sie Tabellen für tabuläre Daten, aber nicht für das Layout allein. Verwenden Sie die entsprechenden Elemente wie <thead> und <tbody> für die Auszeichnung von Tabellenbereichen).
6. Sorgen Sie dafür, dass Seiten, die neue Techniken verwenden, geschmeidig transformieren (und damit auch auf älteren bzw. für Accessibility geeigneten Benutzeragenten lauffähig sind).
7. Sorgen Sie für eine Kontrolle des Benutzers über zeitgesteuerte Änderungen des Inhalts (indem beispielsweise eine Abschaltung oder eine Verzögerung erlaubt wird - gilt im Besonderen auch für den Ablauf der Benutzersitzung oder für den Refresh von Seiten).
8. Sorgen Sie für direkte Zugänglichkeit eingebetteter Benutzerschnittstellen (Applets/Skripts sollten über dieselbe Art und Weise wie die Browserschnittstelle selbst bedienbar sein).
9. Wählen Sie ein geräteunabhängiges Design (unabhängig vom Eingabegerät, sei es Tastatur, Maus, Sprache).
10. Verwenden Sie Interim-Lösungen (bis die Standards in diesem Bereich von allen Eingabegeräten vollständig unterstützt werden).
11. Verwenden Sie W3C-Techniken und -Richtlinien.
12. Stellen Sie Informationen zum Kontext und zur Orientierung bereit.
13. Stellen Sie klare Navigationsmechanismen bereit.
14. Sorgen Sie dafür, dass Dokumente klar und einfach gehalten sind.

WCAG 2.0

WCAG 2.0 wurde am 11. Dezember 2008 als W3C Recommendation veröffentlicht. Während die WCAG 1.0 stark an HTML und CSS gebunden waren, und daher nach einigen Jahren nicht mehr dem Stand der Technik entsprachen, haben die WCAG 2.0 zum Ziel, unabhängig von bestimmten Technologien zu sein.

Die Richtlinien sind in 4 Prinzipien gruppiert:

• Wahrnehmbar (z.B. visuelle Inhalten brauchen eine Textalternative)
• Bedienbar (insbesondere Tastaturbedienung)
• Verständlich
• Robust (Kompatibilität)

BITV

Die Barrierefreie Informationstechnik Verordnung (BITV (http://de.wikipedia.org/wiki/Barrierefreie-Informationstechnik-Verordnung)) ist an WCAG angelehnt. Sie ist für den öffentlicher Bereich verpflichtend, wird aber auch in private Zielvereinbarungen aufgenommen.

Barrieren (25% der Benutzer)

Typische Barrieren für Behinderte im Web sind:

• Sehschwäche (Rot/Grün, Brille, eingeschränktes Gesichtsfeld
  • Hohe Kontraste
  • Große Schrift
  • Übersichtlichkeit
• Blindheit
  • Braillezeile
  • Vorleseprogramme/Screenreader (4x)
• Köperliche Einschränkungen (fehlende/eingeschränkte Gliedmaßen, unbeweglicher Kopf)
  • Tastaturbedienung
  • Spracherkennung
  • Spezielle Eingabegeräte
• Gehörlosigkeit
  • Untertitel
  • Gebärdensprache
• Leichte Einschränkungen (65+, Behinderte, Legastheniker, …)
  • Weniger ist mehr
  • Usability

Barrieren abbauen

• HTML-Tags
  • Abkürzungen per <abbr> kennzeichnen
    (Screenreader)
  • Semantische (logische) Tags
    (Anhang: Semantische Tags)
  • Sprungmarken per <a href="#Markenname">
    bsp. direkt zum Inhalt
• HTML-Attribute
  • Alternativtexte mit Alt-Attribut für Bilder usw.
    (in dekorativen Elementen leer)
  • Reihenfolge für interaktive Tags per tabindex-Attribut
  • Abweichende Textsprache per Lang-Attribut einstellen
    (Screenreader)
• Strukturen
  • Strukturinfos (Anhang: HTML 5)
  • spezielle Captchas (vorlesen, Bilder, …)
  • Sitemap, Breadcrumb
• Multimedia
  • Untertitel
  • Benutzerstyles (http://wiki.selfhtml.org/wiki/CSS/Kaskade)
  • Rot-Grün-Kontrast
• Usability/Gewohnheiten
  • Ruhige Darstellung
  • Kurze Menüs
  • Einfache Texte (Leichte Sprache (http://de.wikipedia.org/wiki/Leichte_Sprache))
  • Schriftgröße im Browser auf Layout testen
  • Maus und Tastatur gleichwertig
  • Formulare: <label>-Tag und merken der Eingaben
  • „Zurück“-Funktionalität aufrecht erhalten
• Validität

Website der Aktion Mensch

www.einfach-fuer-alle.de (http://www.einfach-fuer-alle.de)

Zusammenfassung

• Mit ein wenig Aufwand und Wissen halten sie ihre Webpräsenz barrierefrei.
• Beeinträchtigte Benutzer werden es ihnen danken.

Telemediengesetz

Wer sich im Internet präsentiert, muss das Telemediengesetz (TMG (http://de.wikipedia.org/wiki/Telemediengesetz)) beachtet. Es enthält unter anderen folgende Regelungen:

• zum Impressum für Telemedien­dienste
• zur Bekämpfung von Spam (Verbot einer Verschleierung und Verheimlichung von Absender und Inhalt bei Werbe-E-Mails)
• zur Haftung von Dienst­betreibern für gesetz­widrige Inhalte in Telemedien­diensten
• zum Datenschutz beim Betrieb von Telemedien­diensten und zur Herausgabe von Daten
• zum Providerprivileg (http://de.wikipedia.org/wiki/Providerprivileg)

Namen als Domains

• Marken (in Domains)
  • Bei der Wahl des Domainnamens (Denic (http://denic.de)) unbedingt Markenrecht beachten.
  • Auch bei Suchbegriffen
• Markenrecht bricht Namensrecht
  • Wenn sie wie eine Marke heißen, kann man ihnen eine Domain streitig machen.
• Namesrecht (Städte, Regionen, Personen, ...)
  • Auch viele Städte und Regionen klagen ihre Namen ein
  • hängt aber auch von der TLD ab
• Gattungsrecht (keine Monopolisierung)
  • radfahren.de darf nicht von einer Firma zum Monopol missbraucht werden
• Allgemein: Namen von Firmen und bekannten Personen (vor allem Personen der Zeitgeschichte), Markennamen von Produkten und Dienstleistungen, Unternehmens­kennzeichen, Werktiteln (Zeitschriften, Rundfunk- und Fernsehsendungen, Filme) und geographische Herkunftsangaben

Urheber- und Leistungsschutzrechte

• Urheberrecht (http://de.wikipedia.org/wiki/Urheberrecht) und Leistungsschutzrecht (http://de.wikipedia.org/wiki/Leistungsschutzrecht)
• International sehr unterschiedlich
  • Beispiel: Eiffelturm bei Nacht (Beleuchtung (http://de.wikipedia.org/wiki/Eiffelturm#Beleuchtung_und_Lichtkunst))
  • Deutschland: Panoramafreiheit
• Schutzlandprinzip (http://de.wikipedia.org/wiki/Schutzlandprinzip)
• © und ℗ (http://de.wikipedia.org/wiki/Copyrightzeichen) nicht obligatorisch
• geschützt: Werke der Literatur, Wissenschaft und Kunst, Computerprogramme, Datenbanken, Fotos, Bild- und Tonträger, Musik (Komposition und Interpretation), Filme (inclusive Leistungen der Darsteller und Produzenten), Werke der Baukunst, Darstellungen wissenschaftlicher oder technischer Art, wie Zeichnungen, Pläne, Karten, Skizzen, Tabellen und plastische Darstellungen
• aber: schöpferisches, neues Werk
• Lizenzen (http://de.wikipedia.org/wiki/Lizenz) und Kennzeichungen (Verwertungsrechte (http://de.wikipedia.org/wiki/Verwertungsrecht))
• Privatkopie (http://de.wikipedia.org/wiki/Privatkopie) nicht veröffentlichen!
• Ausnahmen:
  • Schulen
  • Freie Benutzung fremder Ideen
  • Freies Quellenmaterial (Schutzrecht abgelaufen / aber neue Rechte!)
  • Schaffenshöhe fehlt
  • Amtliche Werke
  • Geschütztes, aber freigegebenes Quellenmaterial
  • Zitatrecht
  • Linking (aber deep links, framing, meta tags)

Verantwortlichkeit für Inhalte

• § 5 TDG
• keine geschützten, fremden Werke
• Strafbestimmungen über Volksverhetzung, Anleitung zu Straftaten, Kinder-, Gewalt- und Tierpornographie
• Beihilfe zur illegalen Verbreitung
• Haftungsausschluß (http://de.wikipedia.org/wiki/Haftungsausschluss) (Disclaimer) nur teilweise wirksam
• Informationspflichten (Impressum)

Legale Inhalte

• Eigene Werke (Aber: Recht auf eigenes Bild, ...)
• Freie Werke (http://de.wikipedia.org/wiki/Freie_Inhalte)
• CC-BY-... (http://de.wikipedia.org/wiki/Creative_Commons)
• Immer Quelle nennen!

Abmahnungen

• Impressumspflicht
• Verwendung fremder Texte oder Bilder
• Verlinkung externer Seiten (Deep-Links!)
• Domainregistrierung
• Datenschutz
• Äußerungen von Nutzern
• Online-Shops
  • Preisangaben (Mehrwertsteuer, Versandkosten, Grundpreise, Gegenüberstellung von Preisen, evtl. Preisbindung)
  • Angabe von Lieferzeiten
  • Widerrufsbelehrung
  • Gewährleistung, Mängelhaftung, Garantie
  • Allgemeine Geschäftsbedingungen
  • Markenrecht
  • Wettbewerbsrecht
  • Verpackungsverordnung

Zusammenfassung

• Achten sie unbedingt auf rechtliche Rahmenbedingungen.
• Konsultieren sie im Zweifelsfall einen Rechtsanwalt.

Internetwerbung (http://de.wikipedia.org/wiki/Internetwerbung) in der Wikipedia.

Begriffe

Formen

• Email (Text/HTML), Achtung! SPAM
• Bannerwerbung (AdServer/AdClick) – Bannerblindheit
  • Skyscraper – links/rechts sehr hoch
  • Content Ad – im Inhalt „versteckt“
  • Rectangle – wie Inselanzeigen im Printbereich
• Popup
• Flash/JavaScript
• Targeting
• Google AdWords (Suche)
• Layer Ad (Werbung über der Seite zum Wegklicken) / Prestitials (ganzseitige Werbung mit Zeitablauf) / Interstitials (ganzseitige Werbung zwischen zwei Seiten mit Zeitablauf)
• Site Branding (Werbung sieht wie Website aus)
• Trennung vom Inhalt (Kennzeichnungspflicht)

Akzeptanz

• Vorteil
  • Erfolg messbar
  • Pay per Click
• Nachteil
  • Adblock-Lösungen (Filtertechniken)
  • Lästig/Störend

Kostenlose Werbung

• Mailtausch (E-Mail-Werbung)
• Bannertausch (Werbebannerwerbung)
• Textlinktausch (Austausch von HTML-Textlinks)
• Besuchertausch (http://de.wikipedia.org/wiki/Besuchertausch)

Zusammenfassung

• Um Werbung zu schalten, arbeiten sie am besten mit einem Profi zusammen.
• Wenn sie Werbung einbinden wollen, denken sie daran, dass ihre Seite damit kommerziell wird!

Datenschutz

Datenschutz (http://de.wikipedia.org/wiki/Datenschutz) beruht auf einem Grundrecht (Recht auf informationelle Selbstbestimmung)
(Aber: Ausland)

Bundesdatenschutzgesetz (BDSG)

Bundesdatenschutzgesetz (http://de.wikipedia.org/wiki/Bundesdatenschutzgesetz)

• Datensparsamkeit und Datenvermeidung (Vernichtung)
• Erforderlichkeit
• Zweckbindung
• Datensicherheit
• Recht auf Auskunft

international anerkannte Datenschutzprinzipien

• Prinzip der Zulässigkeit und Rechtmäßigkeit der Erhebung und Verarbeitung der Daten
• Prinzip der Richtigkeit
• Prinzip der Zweckgebundenheit
• Prinzip der Verhältnismäßigkeit
• Prinzip der Transparenz
• Prinzip der individuellen Mitsprache und namentlich der Garantie des Zugriffsrechts für die betroffenen Personen
• Prinzip der Nicht-Diskriminierung
• Prinzip der Sicherheit
• Prinzip der Haftung
• Prinzip einer unabhängigen Überwachung und gesetzlicher Sanktionen
• Prinzip des angemessenen Schutzniveaus bei grenzüberschreitendem Datenverkehr

Zusammenfassung

• Anonymisierung von Nutzerdaten
• Umwandenln statistische Daten
• Zugangsschutz (Hacking!) und Verschlüsselung
• Schweigepflicht (Anwälten, Ärzten, Priestern, Steuerberatern, usw.)
• Datensparsamkeit

Arbeitsweise

• Webcrawler, Robot
• Quelltext
• Suchmaschinenranking
• Algorithmus geheim

Optimierung

• SEO (Search Engine Optimization (http://de.wikipedia.org/wiki/Suchmaschinenoptimierung))
• Barrierefreiheit
• Optimierung der Suchworte
  (nicht nur in den <meta>-Tags sondern auch im Content)
• Metatags richtig (http://www.seo-united.de/blog/seo/meta-tags.htm) setzen
• „Inhalt“ und „Semantik“ statt Flash und Multimedia (vor allem Startseite)
• viele relevante Links auf die eigene Seite
• Online-Tools (http://www.dmoz.org/World/Deutsch/Computer/Internet/Webdesign_und_-entwicklung/Promotion/Anleitungen,_Hilfen_und_FAQs/)
• optimierte Zielseiten (für Eintrag in Suchmaschine) werden heute meist ausgeschlossen
• Achtung! Suchmaschinen Spamming/Linkfarmen
• Hommingberger_Gepardenforelle (http://de.wikipedia.org/wiki/Hommingberger_Gepardenforelle)
• PageRank (http://de.wikipedia.org/wiki/Pagerank)-Algorithmus (Linkpopularität)
• <title>-Tags mit sinnvollem Inhalt
• Ladegeschwindigkeit

Webmastertools

https://www.google.com/webmasters

Kritik

• Handel mit Links
• SEO wichtiger als Inhalt
• Macht der Suchmaschinen

Zusammenfassung

• Für SEO arbeiten sie am besten mit einem Profi zusammen.
• Wenn sie die beprochen Rahmenbedingungen und Standards einhalten, haben sie auch für die SEO schon viel erreicht.

Unterkapitel

n.v.

Einführung

Ein vernünftige Planung erleichtert das Erstellen einer Webpräsenz. Projekt­management ist dafür das probate Mittel.

„Baustellenschilder“ sind verboten! Projekte werden erst nach Fertigstellung online gestellt!

Die Phase der Ideenfindung reicht von der Ideensammlung bis zu einem ersten Ergebnisbericht.

Ideensammlung

• Brainstorming
• Recherche der Möglichkeiten
  • HTML/CSS und JavaScript
  • Flash
  • Server Sprachen (PHP, Perl, ...)
  • Hagen
  • Content Management System
• Besprechung mit Mitarbeitern/Kunden

Ergebnisse

Zusammenfassung der Protokolle als Dokumentation der Ideenfindungsphase.

Dann erfolgt der eigentliche Projektbeginn.

Die Phase Initialisierung verbindet die übergeordnete Ideenfindung mit der operativen Ausführungsebene und schafft für das Projekt eine definierte Ausgangsbasis.

Festlegung der Projektziele

• Kommunikation (Vorstellung der Firma oder Person)
• Interaktion (Umfragen, Bewertungen, Empfehlungen …)
• Transaktion (Shop, …)
• Partizipation (Forum, Wiki, Kommentare, …)
• Dokumentation
• Spaß

Zielgruppen

• Kunden
• Experten
• Kinder
• Verbrauchgruppe
• Touristen
• …

Organisatorischer Rahmen

• Bestimmung der Wirtschaftlichkeit / Realisierbarkeit
  • Angebote einholen
  • Interne Kosten und Betriebsmittel
• Projektplan
  • Termine
  • Ressourcen/Mitarbeiter
  • Beziehungen
  • (Zeit-)Aufwand
• Standards und Richtlinien (s. Rahmenbedingungen)
  • Barrierefreiheit (BITV)
  • Rechtliche Bedingungen
  • Werbung
  • Datenschutz
  • SEO
  • …
• Projektablauf nach PM-Methodik (http://de.wikipedia.org/wiki/Projektmanagement#Standards_und_Normen)

Technischer Rahmen

• Mittelbedarf
  • vorhandene
  • zu beschaffende
• Methoden und Tools
  • für PM
  • für Projekt

Anforderungsdefinition

• Allgemeine Aufgabenstellung
• IST-Analyse

erste Risikoanalyse

(eventuell Abbruch des Projekts)

• Konkurrenz
• Umfeld
• Relevanz
• Pflege
• Fremdvergabe des Projekts

Ergebnisse

• Projekthandbuch (Zusammenfassung aller Protokolle, Analysen und anderer Dokumente)
• Projektplan (Zeitlicher und orgnisatorischer Ablauf)
• Pflichtenheft (Systembeschreibung aus Auftraggebersicht)

Die Phase Analyse ist ein Klärungsprozess, der mit vertretbarem Aufwand eine Entscheidung über die grundsätzliche Art der Systemrealiserung herbeiführt. Unwirtschaftliche oder nicht realisierbare Vorhaben sollen erkannt und rechtzeitig abgebrochen werden.

Situationsanalyse

Die Situationsanalyse ist keine objektive IST-Analyse sondern die Betrachtung der augenblicklichen subjektiven Situation, die zum Projektstart führt.

• Überprüfung der Zielsetzungen
• Überprüfung der Problemstellung
• Überprüfung des Untersuchungsbereichs

Sollanalyse

Die Sollanalyse beschreibt das zukünftige System.

• Methodik der Analyse
  • strukturierte Analyse
  • objektorientierte Analyse
  • …
• Diagramme
  • UML
  • …
• Prototypen
  • auf Papier (Paperprototype)
  • entsprechende Tools wie Kompozer oder Hagen

Lösungsvorschläge

Ergebnisse

• erstes Lastenheft (Systembeschreibung aus Entwicklersicht)
• Projekthandbuch
• Projektplan
• Marktanalyse

eventuell Abbruch des Projekts oder Rückschritt zur „Initialisierung“

Die Konzeptphase dient zur Verfeinerung des gewählten Lösungsvorschlags und ermöglicht eine fundierte Beurteilung des Systems. Das erarbeitete Konzept legt den Rahmen für die nachfolgenden Realisierung und Einführung fest.

Vollständige Darstellung des Systems

• Prototypen
  • funktionsloser
  • vollständiger
• Beurteilung kritischer Teilsysteme
• Konzeptvarianten
• Ausgearbeitete Diagramme
  • für Entwickler
  • für automatische Entwicklung

Ergebnisse

• endgültiges Pflichtenheft
• Systemarchitektur
• Einführungskonzept
• Prototyp

eventuell Rückschritt zur Initialisierung oder Analyse bei definitorischen oder analytische Schwächen.

Die Realisierungsphase dient zur Erstellung des einführbereiten Systems einschließlich Migrationsverfahren und schafft die Voraussetzungen für die nachfolgende Einführung.

Abschluß Spezifikationen

• Festlegung der Anwenderfunktionalität
• Migration- und/oder Einführungskonzept
• Vorbereitung der Migration und Einführung

Implementierung / Prüfen

• Die Implementierung erfolgt auf einem gesonderten System
• Die Programmierrichtlinien und Namenskonventionen, unter denen der Code erzeugt wurde, sind anzugeben.
• Die Größe einer Funktion ist zwar nicht zu begrenzen, aber der Programmcode dürfte in der Regel eine Seite nicht überschreiten.
• Bei Abweichungen der Implementierung vom Design ist dies deutlich begründet anzugeben!
• Implementierungen müssen klar kommentiert werden. Die Kommentierung sollte Blockweise erfolgen, so dass die Kommentare als Extrakt ein Entwurf ergeben könnten. Änderungen mit Datum vermerken!

Testen

Ein Testplan ist anzugeben. Er enthält Testfälle (Eingaben und erwartete Ausgaben) oder auch Testszenarien (z.B. Einfügen, Anschauen, Ändern, Anschauen, Löschen, Anschauen).

Ergebnisse

• Anwenderhandbuch
• Betriebshandbuch (Ausbildungskonzept)
• Organisationshandbuch
• Einführungs-/Migrationshandbuch

eventuell Rückschritt zur Analyse oder zum Konzept bei analytischen oder konzeptionellen Schwächen

Die Phase Einführung dient der Installation des Systems und der Aufnahme des Betriebs. Sie gewährleistet einen sicheren Übergang vom bestehenden System zum neuen System.

Migration/Installation

Durchführung der Migration/Installation nach dem Handbuch.

Kommunikation

• Eintrag in Suchmaschinen
• Pressemitteilungen
• Signaturen

Abnahme und Beurteilung

Entscheid über den Projektabschluss

Ergebnisse

• Projektschlußbeurteilung
• Abnahmeprotokoll

eventuell Rückschritt zur Realisierung zwecks Nachbesserung

Der Betrieb ist wie die Planung kein Teil des eigentlichen Projekts. Allerdings sollten die Projektphasen einen sichern Betrieb ermöglichen (Handbücher, Entwicklung).

Kontrolle

• Server-Logs
• Statistiken (Tools)
• Gästebuch, Umfragen, Feedback
• Alive? (Überwachung des Servers)

Maßnahmen

• IT-Grundschutzhandbuch des BSI
• Webmaster
• Verantwortlicher für die Inhalte (Freigabe)
• Entwicklungs-, Test- und Produktivbetrieb

Kapitel

n.v.

Einführung

Im dritten Kursteil steigern wir unsere fortgeschrittenen Kentnisse zum Profi.

Unterkapitel

n.v.

Einführung

Webtechniken für mehr Pep auf der Seite.

• Position
• Rahmen/Schatten
• Ein-/ausblenden
• Layer

http://www.mediaevent.de/css/display-flex.html

• Schriften umwandeln
• Schriften einbinden

@font-face {
   font-family: WRWestern;
   src: url( images/WesternNormal.eot );
   src: local('Ø'), url( images/WesternNormal.woff) format('woff'), url( images/WesternNormal.ttf) format('truetype');
}

p { font-size: medium; widows:5; orphans:5; text-align: justify; } p+p { text-indent: 1em; }

1. spalten { -moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;
2. moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em;
3. moz-column-rule: 1px dotted gray; -webkit-column-rule: 1px dotted gray; column-rule: 1px dotted gray; }

//li.level1:before { content:counter(kz1) ' '; } li.level2:before { content:counter(kz1) '.' counter(kz2,lower-alpha) ' '; } li.level3:before { content:counter(kz3) ' '; } li.level1 { counter-increment:kz1; counter-reset:kz2; } li.level2 { counter-increment:kz2; counter-reset:kz3; } li.level3 { counter-increment:kz3; }

http://www.mediaevent.de/2012/12/mathml-formeln-in-webseiten-mit-html5/

http://www.mediaevent.de/xhtml/canvas.html http://www.mediaevent.de/javascript/canvas.html

Unterkapitel

n.v.

Einführung

Rezepte für wohschmeckende Webseiten :-)

http://www.mediaevent.de/2013/04/svg-in-html-seiten/ http://www.mediaevent.de/2014/03/svg-in-einem-image-tag/

http://www.mediaevent.de/javascript/filereader.html

Unterkapitel

n.v.

Einführung

Frameworks für besondere Seiten.

http://www.yaml.de

http://www.scriptol.com/html5/frameworks.php http://www.sinnfly.de/web/html-und-css-frameworks/

Kapitel

n.v.

Einführung

Im dritten Kursteil beschäftigen wir uns mit Content Management Systemen (CMS).

Dazu bauen wir selbst ein kleines Content Management System und schauen uns ein professionelles CMS (Joomla) an.

Unterkapitel

n.v.

Einführung

Zunächst besprechen wir den allgemeinen Aufbau eines CMS und danach die Unterschiede zwischen einen client-basierten und einem server-basierten CMS.

Zusammspiel Server und Browser

Nach der Adressauflösung (DNS) sendet der Client (Browser) die Webseitenanfrage an den Server. Sollten weitere Objekte (CSS, JavaScript, Bilder, Text, ...) auf der Seite eingebunden sein, werden auch diese von den entsprechenden Servern angefragt. Die Server liefern dann die Ergebnisse an den Client zurück und dieser stellt sie dar.

Bevor der Browser die Abfragen losschickt, prüft er deren Vorhandensein im lokalen Cache. Sind diese noch aktuell, verwendet er diese. Hat er alle Objekte zusammen, baut er daraus die komplette Webseite auf. Dazu muss er natürlich den HTML-, CSS- und JS-Code korrekt interpretieren. Er bestimmt also, welche Tags und Eigenschaften (Versionen) benutzt werden können.

Die Webserver holen die angefragten Daten aus dem lokalen Dateisystem. Ein Webserver war am Anfang entsprechend sehr einfach gestrickt. Allerdings übernimmt er heute noch viele andere Aufgaben (Server-Skripte, …) und ist entsprechend komplex geworden.

Inhalt erstellen

Wenn wir Inhalte händisch erstellen, entwicken und strukturieren wir sie lokal. Dazu legen wir Dateien und Verzeichnisse an. Das müssen wir dann entsprechend auf dem Server wiederholen (lassen - von einem Programm).

Auf dem Client benutzen wir dazu zwei Programme: Den Webeditor und einen FTP-Client (FTP-Dateimanager oder FTP-Synchronisator). Der Editor erstellt die Inhalte und der FTP-Client kopiert sie auf den Server.

Das Gegenstück zum FTP-Client auf dem Server heißt entsprechend FTP-Server. Auch er ist ein relativ einfach gestricktes Programm. Er sorgt dafür, das wir mit einem FTP-Client mit Dateien und Verzeichnissen wie auf dem lokalen System arbeiten können.

Inhalteverwaltung

Content Management kann man mit Inhalteverwaltung übersetzen. Das ist für uns eigentlich nichts neues - irgendwie müssen wir die Inhalte unserer Webseiten ja erstellen und anordnen. Content Mangement Systeme (CMS) sind Programme die uns dabei helfen. Sie haben vor allen Dingen folgende Funktionalitäten:

• Struktur der Seite erstellen und verwalten
• Inhalte (Texte, Bilder, …) erstellen und verwalten
• Erweiterbarkeit durch Module (Foren, Galerien, ...)
• Benutzerverwaltung

CMS sind Client- oder Serverbasiert.

Baukasten

Darüber hinaus gibt es noch sogenannte Web- oder Homepagebaukästen (http://de.wikipedia.org/wiki/Homepage-Baukasten) wie Jimdo (http://de.jimdo.com/) oder Webnode (http://de.webnode.com/). Sie sind meist Server-basiert.

Mit diesen können sie mit wenigen Klicks eine Webseite zusammenklicken. Vorteile:

• schneller Erfolg
• einfache Bedienung
• Alles aus einer Hand
• Feature-Reichtum
• Sicherheits-Updates
• Integration: Widgets, Google AdSense, Paypal, Formular-Module

Nachteile:

• geringe Fexibiltät
• Beschränkung auf wenige Seiten
• Bindung an einen Provider
• Datenhoheit
• kein Einbau von serverseitigem Code
• keine großen Webprojekte

Zusammenfassung

• Content Management ist der Vorgang Inhalte zu verwalten und zu erstellen.
• Dies kann händisch oder mit Hilfe eines CMS (Content Management System) erfolgen.

Client-CMS

Client-CMS generieren Webpräsenzen auf einem Rechner (siehe Generatoren in Webpräsenz generieren). Im Prinzip funktioniert jedes Client-CMS wie das Beispielsystem dort. Die meisten haben natürlich mehr Komfort und Funtionalität (s. Hagen (http://buch.im-ned.de/hagen/)).

Es gibt einige Desktop CMS: googlen: Desktop CMS. (Weblica, Zeta Producer, BuddyW, …)

Zusammenfassung

• Client-Side oder Desktop CMS können bei kleineren Webpräsenzen viel Arbeit ersparen.
• Sie erlauben aber keine Benutzer und Rechteverwaltung.

Server CMS

Ein Server-Side CMS stellt ein sogenanntes Backend zum Erstellen und Verwalten von Strukturen sowie ein Frontend zur Darstellung der Inhalte (Content) zur Verfügung. Das CMS (meist in PHP oder anderen Serversprachen geschrieben) nimmt die Eingaben des Frontends entgegen und speichert sie (Datenbank).

Beim Seitenabruf holt der Server die Dateien nicht mehr aus dem Dateisystem, sondern aus einer Datenbak, wo er sie besser verwalten kann und zeigt sie im Frontend an.

Während auf der Clientseite alles beim Alten bleibt, geschieht alle Programmlogik jetzt auf dem Server (php). Das System sucht sich aus dem Dateisystem und der Datenbank alle Bestandteile zusammen, fügt sie dann zusammen und liefert sie aus. Wenn das System eine Benutzer-/Rechteverwaltung hat, prüft es vorher noch diese Zugriffsrechte.

Die Seitenerstellung geschieht jetzt auch ganz über den Server im Backend.

Zur Seitenerstelllung zeigt der Server im Browser einen entsprechenden Editor (wysiwyg) an und speichert zuletzt die Inhalte in der Datenbank. Meist können die Inhalte durch Kategorien strukturiert und Medieninhalte (Bilder, Videos, ...) verwaltet werden.

Im Server speichert das CMS die Daten in der Datenbank oder im Dateisystem.

Zusammenfassung

• Ein Server-Side CMS ist für mittlere bis sehr große Webpräsenz Pflicht
• Joomla erfüllt die Anforderungen für mittlere Präsenzen

Unterkapitel

n.v.

Einführung

Joomla ist ein freies CMS, das gerne auf kleineren bis mittleren Webpräsenzen eingesetzt wird.

Ich will das Rad nicht doppelt erfinden. Also folgt hier ein Verweis auf externe Literatur: (PDF unter „Book Details“)

• Joomla! 2.5 - Ein Anfängerbuch (http://cocoate.com/de/j25de) und
• Joomla! 3 - In 10 einfachen Schritten (http://cocoate.com/de/j3de).

Übersicht

Joomla ist einfach zu erlernen, sobald man das Begriffsystem verstanden hat:

Benutzer

Benutzergruppen für das Frontend

• Registriert: Alle registrierten Benutzer dürfen sich einloggen und „registrierte“ Inhalte einsehen.
• Autor: Autoren erstellen Inhalte, die vom Publisher, Manager, Administrator freigegeben werden müssen.
• Editor: Ein Editor darf im Frontend sämtliche Inhalte ändern und erstellen, aber auch nicht publizieren.
• Publisher: Der Publisher veröffentlicht Inhalte, die vom Autor eingereicht wurden und darf diese ändern oder selbst erstellen.

Benutzergruppen für das Backend

• Manager: Ein Manager hat wie der Publisher die Rechte auf alle Inhalte und kann zudem Bereiche, Kategorien und Archive anlegen. Sie haben auch Zugriff auf Menüs und Medien.
• Administrator: In dieser Gruppe kommt die Benutzerverwaltung hinzu. Administratoren dürfen Erweiterungen installieren und konfigurieren.
• Super-Administrator: Der Super-Administrator hat alle Rechte.

Zugriffsebenen

• Öffentlich: Alle Benutzer (Jeder)
• Registriert: Alle angemeldeten Benutzer
• Spezial: Alle Benutzer ab „Autor“ oder „Manager“

Menüs

Joomla kann beliebige viele Menüs verwalten, die Inhalte anzeigen oder Funktionen zur Verfügung zustellen.

Die Menüs werden durch CSS-Klassen formatiert (div class=""): (Die Klassen stammen aus dem Framework „Bootstrap (http://getbootstrap.com/)“ und müssen im Menüklassensuffix eingetragen werden.)

• nav - Navigation
• active - Hervorhaben des aktuellen Links
• disabled - Deaktivierung eines Links
• nav nav-pills - Horizontale „Pillen“
• nav nav-pills nav-stacked - Vertikale „Pillen“
• nav nav-tabs - Tabulatoren
• dropdown - Dropdown

Inhalte und Komponenten

Alle Arten von Inhalten in Joomla können (müssen aber nicht) zur Strukturierung in Kategorien eingeteilt werden.

Sie werden erst durch Menüeinträge oder Module sichtbar.

• Beiträge sind „die“ Inhalte in Joomla.
• Banner sind Plätze für Werbeein­blendungen.
• Kontakte können für Kontaktformulare und ähnliches verwendet werden.
• News binden RSS-Feeds (http://de.wikipedia.org/wiki/RSS-Feeds) ein.
• Weblinks benutzt man für Linksammlungen und Verweise.

und dazu

• Kategorien strukturieren Inhalte.
• Haupteinträge sind eine Kennzeichunung für Beiträge die auf der Homepage angezeigt werden sollen.
• Medien sind Bilder, Videos usw. die Joomla extra verwaltet.
• Die Suche durchforstet die gesamte Webpräsenz ist aber sehr lagsam.
• Der Suchindex indiziert erst die Webpräsenz und durchsucht dann sehr schnell diesen.

Module in Beiträge einfügen:

• {loadposition positionsname [, style]} - Der Positionsname sollte nicht im verwendeten Template vorkommen. Nicht auswählbare Positionsnamen können manuell in das Positionsfeld des Moduls eingetragen werden.
  • {loadposition content-1} - lädt die Module auf der Position content-1 mit dem in den Basisoptionen ausgewählten Style
  • {loadposition content-1,xhtml} - lädt die Module auf der Position content-1 mit dem Style xhtml (mit Div umgeben)
• {loadmodule mod_modulname[,titel][,style]} - Der Titel darf keine Kommata oder Klammern enthalten.
  • {loadmodule mod_login} - lädt ein Anmeldemodul mit dem in den Basisoptionen ausgewählten Style
  • {loadmodule mod_login,Anmelden} - lädt das Anmeldemodul mit dem Titel „Anmelden“ mit dem in den Basisoptionen ausgewählten Style
  • {loadmodule mod_login,Anmelden,rounded} - lädt das Anmeldemodul mit dem Titel „Anmelden“ und umgibt es mit dem Style rounded (mit mehreren Divs umgeben)

Erweiterung

• Erweiterungen erweitern die Funktionalität von Joomla.
• Module verbinden Inhalte und Funtionalitäten mit Positionen im Template.
• PlugIns stellen weitere Funktionen wie Captchas zur Verfügung.
• Templates sind das Seitengrundgerüst, in das Mdule und Inhalte eingefügt werden.
• Sprachen kann Joomla für Frontend, Backend und Inhalte verwalten.

• Das Template definiert Plätze an dem Module (Menüs, Inhalte, Banner, Logos, ...) dargestellt werden.
• Menüs verlinken Beiträge, Kategorie­übersichten und andere Inhalte.
• Beiträge sind der eigentliche Inhalt
• Kategorieren strukturieren Beiträge und fassen diese zusammen.

Einige Beispiele

• Sicherheit
  • AkeebaBackup – komplette Sicherungen der Internetseite
  • AdminTools - Schutz vor Angriffen
• Editoren
  • JCE - JoomlaContenEditor (Einige Plugins kostenpflichtig)
• Downloads
  • PhocaDownload - Downloadverwaltung
  • jDownload - Downloadverwaltung
• Media
  • PhocaGallery - Galerien und Diaschauen
  • SIGE - kleine Galerien in Artikeln
  • AllVideos - Videos in Artikel einbinden
  • JSNImageShow - Diaschau mit Schaukästen und Schaulisten
  • WidgetKit - Videos und Musik
• Karten
  • Google Maps
  • OSModul
  • PhocaMaps - Routenberechnungen
• Kommunikation
  • Acymail - Versenden von Newslettern
  • Community Builder - Anbindung an Social Media
  • Kunena - Foren
  • UddeIM - Privatnachrichtensystem
  • 2ClickSocialButtons - Soziale Netzwerke (Twitter, Facebook, Google+)
• Nützliche Helfer:
  • extplorer - Dateiverwaltung
  • Easy FrontEndSEO - Im Frontend Metadaten und Generator-Tag ändern.
  • Xmap - Sitemap
  • EasyCalCheckPlus - Spamschutz im Kontaktformular

Vorüberlegungen

Zunächst bauen wir uns ein Grundgerüst für ein Layout. Im Beispiel legen wir ein drei­spaltiges Layout mit Header und Footer an. Die Spalten heißen „sidebarLeft“, „sidebarRight“ und „Content“.

Um ein Template zu erzeugen, sollten sie zunächst ein Arbeitsverzeichnis erstellen und dort die Testdatei template_test.html anlegen. Neben dem Verweis auf eine CSS-Vorlage (im Beispiel css/format.css) sollten in der Datei Divisions (<div>) für „header“, „footer“, „sidebarLeft“, „sidebarRight“ und „Content“ stehen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Template Test</title>
  <link rel="stylesheet" href="css/format.css" type="text/css" />
</head>

<body>
<div id="wrap">

<div id="header">
  <img src="images/logo.png" />
</div>

<div id="sidebarLeft"><div class="padd">
  <ul class="nav">
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a></li>
    <li><a href="#">Hyperlink 3</a></li>
    <li><a href="#">Hyperlink 4</a></li>
  </ul>
</div></div>

<div id="content"><div class="padd">
  <h1>Inhalt</h1>
  <p>mit Text und Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec</p>
</div></div>

<div id="sidebarRight"><div class="padd">
  <p>Anmeldung</p>
</div></div>

<div id="footer"><div class="padd">
  <p>Fußzeile</p>
</div></div>

</div>
</body>
</html>

Positioniert und gefärbt wird die Webseite in der CSS-Datei format.css, die im Unterverzeichnis css liegen sollte. Die drei Spalten werden dabei mit der Formatierung „float: left;“ erzeugt. Der zusätzliche <div class="padd"> setzt ein Padding im umgebenden <div> ohne das Layout zu zerstören (s. Boxmodell).

Natürlich ist diese Einteilung für das Joomla- Template nicht maßgeblich und kann beliebig an die eigenen Bedürfnisse angepaßt werden.

body          { background-color: #f0f0f0; }
#wrap         { margin: 0 auto; background-color: lightblue; border:1px solid black; }
#header       { background-color: lightblue; }
#sidebarLeft  { float: left; width: 20%; background-color: aqua; }
#content      { float: left; width: 60%; background-color: silver; }
#sidebarRight { float: left; width: 20%; background-color: aqua; }
#footer       { clear: both; background-color: lightblue; }
.padd         { padding: 1em; }

Perfektionieren sie erst diese Testdateien, bevor sie mit dem Erzeugen des eigentlichen Templates fortfahren.

In Template umwandeln

Um die Datei template_test.html in ein Template umzuwandeln, müssen sie sie zunächst in index.php umkopieren. Wie sie bereits wissen, ist Joomla in PHP programmiert und entsprechend ist das Template auch in dieser Sprache geschrieben.

Fügen sie ganz oben in die Datei die folgenden, roten Zeilen ein und passen sie den HTML-Header entsprechend an:

<?php
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$sitename = $app->getCfg('sitename');
$itemid = $app->input->getCmd('Itemid', '');

JHtml::_('bootstrap.framework');
JHtmlBootstrap::loadCss();
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <jdoc:include type="head" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/format.css" type="text/css" />
</head>

…

Die ersten vier Zeilen holen Objekte und Variablen aus dem Joomla Framework (http://www.joomla-wiki.de/dokumentation/Joomla!_Framework). Die nächsten drei binden das Bootstrap (http://getbootstrap.com/) Framework ein. Beide werden für den Zugriff auf und die Formatierung des Templates benötigt.

<jdoc:include type="head" /> erweitert den HTML-Header durch Joomla-Definitionen und ihre Eingaben in den entsprechenden Konfigurations­feldern (System / Konfiguration / Globale Metadaten). Damit bleibt der Header variabel anpassbar.

Nun müssen im Body noch die Joomla-Platzhalter statt des Beispieltextes eingefügt werden.

…

<body>
  <div id="wrap">
    <div id="header">
      <a href="<?php echo $this->baseurl ?>">
        <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" />
      </a>
      <jdoc:include type="modules" name="banner" style="xhtml" />
      <jdoc:include type="modules" name="position-1" style="xhtml" />
    </div>
    <div id="sidebarLeft"><div class="padd">
      <jdoc:include type="modules" name="left" style="xhtml" />
      <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div></div>
    <div id="content"><div class="padd">
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
      <jdoc:include type="modules" name="position-3" style="xhtml" />
      <jdoc:include type="component" />
      <jdoc:include type="message" />
      <jdoc:include type="modules" name="debug" />
    </div></div>
    <div id="sidebarRight"><div class="padd">
      <jdoc:include type="modules" name="position-7" style="xhtml" />
      <jdoc:include type="module" name="search" style="xhtml" />
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div></div>
    <div id="footer"><div class="padd">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div></div>
  </div>
</body>
</html>

<jdoc:include type="component" /> ist der Platzhalter für den eigentlichen Inhalt wie Beiträge und/oder Kategorie­übersichten. <jdoc:include type="module" name="search" style="xhtml" /> wird vom Suchmodul verwendet. <jdoc:include type="message" /> zeigt System­nachrichten wie eine fehlgeschagene Anmeldung an. Und <jdoc:include type="modules" name="debug" /> gibt Fehlermeldungen aus, sofern dies in der Konfiguration eingeschaltet ist.

Alle anderen Platzhalter können für Modulpositionen verwendet werden. Die Positionen mit den Nummern sind zur Kompatibilität mit dem Protostar Template eingefügt.

Außerdem ist im Header eine Logo-Grafik (logo.png) eingebunden. Diese Datei liegt im Unterverzeichnis „images“. Konstrukte wie <?php echo $this->baseurl ?> (oder ->template) fügen an dieser Stelle den entsprechenden Basispfad (oder Template-Pfad) von Joomla ein.

Modul Stile (Styles)

• none - Kein HTML-Code und kein Titel, aber Überschriften
• html5 - Bootstrap class span[n]
• table - mit Tabelle umgeben
• horz - mit Untertabelle umgeben
• xhtml - mit <div> umgeben
• rounded - nicht mehr zu verwenden
• outline - Anzeige der Modulposition

Vorschau

Damit man sich eine Vorstellung vom Template machen kann, müssen zwei Vorschaubilder erstellt werden. Dazu machen sie eine Bildschirmkopie der Ausgabe des Template-Tests. Diese werden mit der Breite von 400 Pixeln als „template_preview.png“ und mit 200 Pixeln als „template_thumbnail.png“ gespeichert.

Installation

Damit ist das Template praktisch fertiggestellt. Es können noch die Dateien „component.php“ (Funktions­erweiteerung), „error.php“ (Fehlerseite) und „offline.php“ (Offline-Seite) ergänzt und angepasst werden. Diese können sie aus dem Protostar sowie Standard Templates kopieren oder aus der Beispieldatei extrahieren.

Zuletzt legen sie die Datei templateDetails.xml an, welche der Joomla Installation die Information liefert.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">

<name>Simplate</name>
<creationDate>22. November 2013</creationDate>
<description>Simple Template</description>
**Christian Hartnick</author>
<authorEmail>hilfe@hartnick.de</authorEmail>
<authorUrl>http://hilfe.hartnick.de</authorUrl>
<copyright>Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>2.5.0</version>

<files>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>index.html</filename>
  <filename>index.php</filename>
  <filename>offline.php</filename>
  <filename>favicon.ico</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>templateDetails.xml</filename>
  <filename>css/format.css</filename>
  <filename>images/logo.png</filename>
</files>

<positions>
  <position>left</position>
  <position>breadcrumb</position>
  <position>search</position>
  <position>right</position>
  <position>footer</position>
  <position>banner</position>
  <position>position-1</position>
  <position>position-3</position>
  <position>position-7</position>
  <position>position-8</position>
</positions>

</extension>

Wie sie leicht erkennen können, werden hier alle wichtigen Informationen zum Template aufgeführt. Wenn hier Namen und Pfade nicht mit der Realität übereinstimmen, wird die Installation des Templates verweigert!

Zuletzt werden die Dateien und Verzeichnisse gezippt und können dann als Erweiterung installiert werden. (Achtung! Nicht das Verzeichnis sondern alle Dateien und Unterverzeichnisse zippen)

Zusammenfassung

• Templates erstellen sie wie Webseiten mit bestimmten Platzhaltern an den entsprechenden Stellen.
• Achten die bei Templates auf die Flexibilität.

Unterkapitel

n.v.

Einführung

Typo 3 ist ein freies CMS, das gerne auf mittleren bis großen Webpräsenzen eingesetzt wird.

Ich will das Rad nicht doppelt erfinden. Also folgt hier ein Verweis auf externe Literatur: (PDF unter „Book Details“)

• Englische Originaldoku (http://typo3.org/documentation/)
• Deutsche Doku (Mittenwald (http://www.mittwald.de/service/veroeffentlichungen/typo3-dokumentation/))
• PDF (http://www.mittwald.de/fileadmin/pdf/dokus/TYPO3-Doku-v6-v1.pdf)
• Forum (http://webdesign-forum.net/archive/index.php?forum-1.html)
• Videokurs (http://www.youtube.com/watch?v=QCF78RSgtkA&index=1&list=PL1D69sw7eWECaiqIOLhcSnjgTTjLJdd4I)
• Kostenpflichtiger Artikel (veraltet (http://www.heise.de/ct/ausgabe/2012-15-Das-Content-Management-System-Typo3-installieren-und-betreiben-2342919.html))

Übersicht

Joomla ist einfach zu erlernen, sobald man das Begriffsystem verstanden hat:

Einrichtung

• Install-Tool
• Backend auf „Deutsch“ einrichten.
  • admin/passwort
  • Admin Tools (Adminwerkzeuge) / Languages (Sprachen) / German (Deutsch) (+) / Herunterladen (↓)
  • ⛄ Admin / User settings / Language / „Deutsch“
  • System / Backend Benutzer (Backend Users) / „admin“ / editieren (🖉)
    • Passwort
    • Defaut Language (umschalten auf Deutsch)

Achtung! Die Bedienung erfolgt teilweise direkt oder über Rechtsklick.

Backend

Backend-Menü passt sich dem Benutzer an

Aufruf

http://meine-typo3-seite.tld/typo3

Module

Web

redaktionelle Arbeiten

Seite

Struktur (Menüs) und Inhalte

Liste¹

Datensätze anzeigen (aus "Ordnern")

Funktionen¹

Nützliche Funktionen wie das massenhafte anlegen von Seiten

Formulare¹

Formulare (Eingabe, Kontakt, …) erstellen

Template

Template(s) für Verhalten und Design erstellen

Datei

Dateiliste

Dateimanager zum Hochladen von Inhalten (HTML-Templates, JS, CSS, Bilder, …)

Adminwerkzeuge

administrative Aufgaben

Sprachen

Weitere Sprachen installieren

Erweiterungen

Erweiterungen installieren und (de-)aktivieren

System

Typo3 selbst anpassen

Zugriff

Zugriff auf das System einschränken (Backend-Benutzer)

Backend-Benutzer

weitere Backend-Benutzer anlegen

Installation

Das „Install-Tool“ aufrufen

Protokoll

Systemprotokoll

DB-Überprüfung

Überprüfen der hinterlegten Datenbank

Konfiguration

Einsehen von Konfigurationsvariablen

Berichte

Berichte über den Systemstatus

Benutzer

„oben rechts“

Benutzereinstellungen

Email, Sprache, …

¹: von Erweiterungen abhängig

Frontend

Aufruf

http://meine-typo3-seite.tld

Benutzer

Benutzergruppen für das Frontend → Erweiterungen

Inhalte und Komponenten

• Das HTML-Template definiert Plätze an dem Variablen/Ersetzungen (Menüs, Inhalte, Banner, Logos, ...) dargestellt werden.
• TypoScript-Templates füllen die Variable/Ersetzungen
• Menüs basieren auf der Struktur der Inhalte
• Kategorieren strukturieren Beiträge und fassen diese zusammen.

Einige Beispiele

• Frontenduser (Intern)
  • Login als Formular
  • DB in Ordner
  • Zugriff auf Seite über Zugriff / Benutzergruppen
• feedit
  • Artikel im Frontend
  • Abhängigkeit: ExtBase (in neueren Versionen schon installiert)
  • Setup-Skript

              config.admPanel=1
              config.admPanel {
                enable.edit=1
                module.edit.forceDisplayFieldIcons=1
              }
    

• CSS Styled Content (veraltet)
  • Zugriff auf DB mit Inhalten
  • veraltet
• TemplaVoila!
  • Erweiterung hinzufügen
  • https://t3n.de/news/typo3-workshop-templavoila-inhaltselemente-273100/ / https://t3n.de/magazin/workshop-eigene-inhaltselemente-erstellen-flexibler-223986/
• Faceted Search
  • Suchindex in Ordner
  • Suchergebnisse in Ordner
  • Suche als Formular

Vorüberlegungen

Zunächst bauen wir uns ein Grundgerüst für ein Layout. Im Beispiel legen wir ein drei­spaltiges Layout mit Header und Footer an. Die Spalten heißen „sidebarLeft“, „sidebarRight“ und „Content“.

Um ein Template zu erzeugen, sollten sie zunächst ein Arbeitsverzeichnis erstellen und dort die Testdatei template_test.html anlegen. Neben dem Verweis auf eine CSS-Vorlage (im Beispiel css/format.css) sollten in der Datei Divisions (<div>) für „header“, „footer“, „sidebarLeft“, „sidebarRight“ und „Content“ stehen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Template Test</title>
  <link rel="stylesheet" href="css/format.css" type="text/css" />
</head>

<body>
<div id="wrap">

<div id="header">
  <img src="images/logo.png" />
</div>

<div id="sidebarLeft"><div class="padd">
  <ul class="nav">
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a></li>
    <li><a href="#">Hyperlink 3</a></li>
    <li><a href="#">Hyperlink 4</a></li>
  </ul>
</div></div>

<div id="content"><div class="padd">
  <h1>Inhalt</h1>
  <p>mit Text und Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec</p>
</div></div>

<div id="sidebarRight"><div class="padd">
  <p>Anmeldung</p>
</div></div>

<div id="footer"><div class="padd">
  <p>Fußzeile</p>
</div></div>

</div>
</body>
</html>

Positioniert und gefärbt wird die Webseite in der CSS-Datei format.css, die im Unterverzeichnis css liegen sollte. Die drei Spalten werden dabei mit der Formatierung „float: left;“ erzeugt. Der zusätzliche <div class="padd"> setzt ein Padding im umgebenden <div> ohne das Layout zu zerstören (s. Boxmodell).

Natürlich ist diese Einteilung für das Joomla- Template nicht maßgeblich und kann beliebig an die eigenen Bedürfnisse angepaßt werden.

body          { background-color: #f0f0f0; }
#wrap         { margin: 0 auto; background-color: lightblue; border:1px solid black; }
#header       { background-color: lightblue; }
#sidebarLeft  { float: left; width: 20%; background-color: aqua; }
#content      { float: left; width: 60%; background-color: silver; }
#sidebarRight { float: left; width: 20%; background-color: aqua; }
#footer       { clear: both; background-color: lightblue; }
.padd         { padding: 1em; }

Perfektionieren sie erst diese Testdateien, bevor sie mit dem Erzeugen des eigentlichen Templates fortfahren.

In Template umwandeln

Um die Datei template_test.html in ein Template umzuwandeln, müssen sie sie zunächst in index.php umkopieren. Wie sie bereits wissen, ist Joomla in PHP programmiert und entsprechend ist das Template auch in dieser Sprache geschrieben.

Fügen sie ganz oben in die Datei die folgenden, roten Zeilen ein und passen sie den HTML-Header entsprechend an:

<?php
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$sitename = $app->getCfg('sitename');
$itemid = $app->input->getCmd('Itemid', '');

JHtml::_('bootstrap.framework');
JHtmlBootstrap::loadCss();
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <jdoc:include type="head" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/format.css" type="text/css" />
</head>

…

Die ersten vier Zeilen holen Objekte und Variablen aus dem Joomla Framework (http://www.joomla-wiki.de/dokumentation/Joomla!_Framework). Die nächsten drei binden das Bootstrap (http://getbootstrap.com/) Framework ein. Beide werden für den Zugriff auf und die Formatierung des Templates benötigt.

<jdoc:include type="head" /> erweitert den HTML-Header durch Joomla-Definitionen und ihre Eingaben in den entsprechenden Konfigurations­feldern (System / Konfiguration / Globale Metadaten). Damit bleibt der Header variabel anpassbar.

Nun müssen im Body noch die Joomla-Platzhalter statt des Beispieltextes eingefügt werden.

…

<body>
  <div id="wrap">
    <div id="header">
      <a href="<?php echo $this->baseurl ?>">
        <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" />
      </a>
      <jdoc:include type="modules" name="banner" style="xhtml" />
      <jdoc:include type="modules" name="position-1" style="xhtml" />
    </div>
    <div id="sidebarLeft"><div class="padd">
      <jdoc:include type="modules" name="left" style="xhtml" />
      <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div></div>
    <div id="content"><div class="padd">
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
      <jdoc:include type="modules" name="position-3" style="xhtml" />
      <jdoc:include type="component" />
      <jdoc:include type="message" />
      <jdoc:include type="modules" name="debug" />
    </div></div>
    <div id="sidebarRight"><div class="padd">
      <jdoc:include type="modules" name="position-7" style="xhtml" />
      <jdoc:include type="module" name="search" style="xhtml" />
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div></div>
    <div id="footer"><div class="padd">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div></div>
  </div>
</body>
</html>

<jdoc:include type="component" /> ist der Platzhalter für den eigentlichen Inhalt wie Beiträge und/oder Kategorie­übersichten. <jdoc:include type="module" name="search" style="xhtml" /> wird vom Suchmodul verwendet. <jdoc:include type="message" /> zeigt System­nachrichten wie eine fehlgeschagene Anmeldung an. Und <jdoc:include type="modules" name="debug" /> gibt Fehlermeldungen aus, sofern dies in der Konfiguration eingeschaltet ist.

Alle anderen Platzhalter können für Modulpositionen verwendet werden. Die Positionen mit den Nummern sind zur Kompatibilität mit dem Protostar Template eingefügt.

Außerdem ist im Header eine Logo-Grafik (logo.png) eingebunden. Diese Datei liegt im Unterverzeichnis „images“. Konstrukte wie <?php echo $this->baseurl ?> (oder ->template) fügen an dieser Stelle den entsprechenden Basispfad (oder Template-Pfad) von Joomla ein.

Modul Stile (Styles)

• none - Kein HTML-Code und kein Titel, aber Überschriften
• html5 - Bootstrap class span[n]
• table - mit Tabelle umgeben
• horz - mit Untertabelle umgeben
• xhtml - mit <div> umgeben
• rounded - nicht mehr zu verwenden
• outline - Anzeige der Modulposition

Vorschau

Damit man sich eine Vorstellung vom Template machen kann, müssen zwei Vorschaubilder erstellt werden. Dazu machen sie eine Bildschirmkopie der Ausgabe des Template-Tests. Diese werden mit der Breite von 400 Pixeln als „template_preview.png“ und mit 200 Pixeln als „template_thumbnail.png“ gespeichert.

Installation

Damit ist das Template praktisch fertiggestellt. Es können noch die Dateien „component.php“ (Funktions­erweiteerung), „error.php“ (Fehlerseite) und „offline.php“ (Offline-Seite) ergänzt und angepasst werden. Diese können sie aus dem Protostar sowie Standard Templates kopieren oder aus der Beispieldatei extrahieren.

Zuletzt legen sie die Datei templateDetails.xml an, welche der Joomla Installation die Information liefert.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">

<name>Simplate</name>
<creationDate>22. November 2013</creationDate>
<description>Simple Template</description>
**Christian Hartnick</author>
<authorEmail>hilfe@hartnick.de</authorEmail>
<authorUrl>http://hilfe.hartnick.de</authorUrl>
<copyright>Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>2.5.0</version>

<files>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>index.html</filename>
  <filename>index.php</filename>
  <filename>offline.php</filename>
  <filename>favicon.ico</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>templateDetails.xml</filename>
  <filename>css/format.css</filename>
  <filename>images/logo.png</filename>
</files>

<positions>
  <position>left</position>
  <position>breadcrumb</position>
  <position>search</position>
  <position>right</position>
  <position>footer</position>
  <position>banner</position>
  <position>position-1</position>
  <position>position-3</position>
  <position>position-7</position>
  <position>position-8</position>
</positions>

</extension>

Wie sie leicht erkennen können, werden hier alle wichtigen Informationen zum Template aufgeführt. Wenn hier Namen und Pfade nicht mit der Realität übereinstimmen, wird die Installation des Templates verweigert!

Zuletzt werden die Dateien und Verzeichnisse gezippt und können dann als Erweiterung installiert werden. (Achtung! Nicht das Verzeichnis sondern alle Dateien und Unterverzeichnisse zippen)

Zusammenfassung

• Templates erstellen sie wie Webseiten mit bestimmten Platzhaltern an den entsprechenden Stellen.
• Achten die bei Templates auf die Flexibilität.

Kapitel

n.v.

Einführung

Sollten sie noch nie vorher mit der Programmierung von Computern zutun gehabt haben, lesen sie das Kapitel Programme verstehen aus dem ersten Teil.

Zur Wiederholung hier der Aufbau eines Programms. Man unterscheidet einen Definitionsbereich und den eigentlichen Programmablauf. Der Definitionsbereich gibt an was alles benötigt wird und was im Programm vorhanden ist. Der Ablauf gibt dem Computer Anweisungen, die mit Bedingungen und Schleifen kontrolliert werden.

Zusätzlich müssen wir uns noch genauer mit dem DOM und mit Ajax Beispiel beschäftigen.

Unterkapitel

n.v.

Einführung

Traditionell teilt man Computerprogramme in die zwei Bereiche Definitionen und Programmablauf. Der Definitionsteil bindet externe Funktionen ein und deklariert Variablen und Objekte. Oder traditionell gesagt: Was wird benutzt und was brauche ich.

Das entsprach in unserem Bauplan:

Allgemein

Wie man externe JS-Funktionen benutzt und in bestehende Projekte einbindet, steht schon in Kursteil I. Lesen sie dazu das Kapitel Dynamik.

In unserem Bauplan haben wir an dieser Stelle Werkzeuge und Materialien aufgeführt, die wir zusätzlich benötigen. Entsprechendes gilt auch für Programmiersprachen. Vieles müssen wir nicht neu erfinden, sondern finden es schon in externen Funktionen.

Innerhalb von JS ist es nicht vorgesehen, andere Funktionen (http://de.wikipedia.org/wiki/Funktion_(Programmierung)) und Bibliotheken (http://de.wikipedia.org/wiki/Programmbibliothek) einzubinden. Das unterscheidet es von den meisten anderen Programmiersprachen (http://de.wikipedia.org/wiki/Programmiersprache).

Möchten sie JS-Funktionen benutzen, so müssen sie diese im HTML-Header in der richtigen Reihenfolge einbinden. Eine Bibliothek (OpenStreetMap), die eine andere (Openlayers) benutzt, muss nach dieser im HTML-Quelltext eingebunden werden.

Als Beispiel dazu lesen sie Kapitel Anfahrt (OSM).

Zusammenfassung

• JS selbst kann keine externen Funktionen einbinden.
• Dazu verwenden sie HTML:
  <script src="extern.js" type="text/javascript"></script>

Einführung

In unserem Bauplan hatten wir an dieser Stelle beschrieben, was dem Paket (Tisch) beiliegt. Übertragen auf unser Programm hatten wir das auf Konstrukte wie Variablen, Funktionen und Objekte, welche wir selbst schreiben. Das heißt, an dieser Stelle machen wir dem Browser (der JavaScript ausführt) diese Konstrukte bekannt.

Dabei müssen wir zwischen diesen Konstrukten klar unterscheiden: Einfache Variablen werden hier nur deklariert. Objekte und Arrays als Datenstrukturen müssen genauer definiert werden und haben deshalb ein eigenes (nachfolgendes) Kapitel.

Zuletzt müssen auch Funktion definiert sein, da sie aber nur Anweisungen zusammenfassen, besprechen wir sie erst im Ablauf.

Variablen

In unserer Einführung hatten wir eine Variable mit einem Zettel verglichen. Auf den Zettel schrieben wir eine Zahl, um sie uns zu merken. Auch aus der Mathematik kennen wir Variablen (http://de.wikipedia.org/wiki/Variable_(Mathematik)), die Werte speichern. Im Gegensatz zur Mathematik können sie in JS-Variablen (http://de.wikipedia.org/wiki/Variable_(Programmierung)) auch Zeichenketten (http://de.wikipedia.org/wiki/Zeichenkette) und Wahrheitswerte (http://de.wikipedia.org/wiki/Wahrheitswert) speichern.

Deklaration

JS hat eine sehr laxe Syntax und kann Variablen einfach überall ohne Deklaration (http://de.wikipedia.org/wiki/Deklaration_(Programmierung)) verwenden. Eine Deklaration können sie sich wie eine Struktur auf dem Zettel (Variablenspeicher) vorstellen. Es wird auf dem Zettel vermerkt, wieviel Platz und welchen Typ (Zahl, Datum, …) eine Variable annehmen darf.

In anderen Programmiersprachen müssen Variablen immer erst deklariert werden. Dazu wird im Definitionsbereich Name und Typ (Wertebereich) der Variable bekannt gegeben. Auch JS erlaubt dies und wir sollten das auch verwenden, um einfacher Fehler zu finden.

Dazu kennt JS das Schlüsselwort (http://de.wikipedia.org/wiki/Schlüsselwort_(Programmierung)) var und den Aufzählungsoperator ,. var deklariert die Variable (sie wird dem Computer bekannt gemacht) und , erlaubt es mehrere Variablen­deklarationen nacheinander zu schreiben.

var x = 1;
var y = 2;
var Vorname = "Christian", Nachname = "Hartnick";

Zur Bildung von Variabelnamen schlagen sie bitte im Anhang: JS-Bezeichner nach.

Werte und Datentypen

Die Werte, die in einer Variablen gespeichert werden, haben einen (Daten-)Typ (http://de.wikipedia.org/wiki/Datentyp). Diese Typen ergeben sich aus der Verwendung. So besteht der Unterschied zwischen einer Zahl und einem Text darin, dass man Zahlen berechnen kann. Texte dagegen, kann man durchsuchen, zerlegen und zusammensetzen. Am Typ erkennt der Computer also, wie er eine Variable intern speichern und verwenden soll.

Hinweis: Werte, die direkt im Quelltext stehen, bezeichnet man auch als Literale (http://de.wikipedia.org/wiki/Literal#Literale_in_Programmiersprachen).

JS konvertiert automatisch zwischen den verschieden Datentypen. Dass heißt, dass eine Zahl automatisch in eine Zeichenkette verwandelt wird, wenn sie diese als Zeichenkette benutzen. In den wenigen Fällen in denen eine automatische Konvertierung nicht funktioniert, müssen sie entsprechende Funktionen zur Konvertierung verwenden (Anhang: JS-Funktionen und Objekte).

Zahlen

JS kennt im Gegensatz zu anderen Sprachen nur Zahlen (keine Ganzzahlen (http://de.wikipedia.org/wiki/Ganzzahl), Gleitkomma (http://de.wikipedia.org/wiki/Gleitkommazahl), und so weiter).

Zahlen werden - wie im englischen üblich - mit dem Dezimalpunkt „.“ zwischen „Vorkomma“- und „Nachkomma“-Anteil getrennt. Zehner­potenzen schreibt man mit trennenden „e“ oder „E“.

Beispiele:

1E1

entspricht 10

1.2345E4

entspricht 12345

2e-3

entspricht 0.002

Zeichenketten

Eine Zeichenkette repräsentiert Texte, also beliebige Kombinationen von Zeichen, Ziffern und Sonderzeichen. Zeichenketten werden in Hochkommas ('') oder in Hochkommata ("") eingeschlossen. Zeichenketten nennt man auf gut neudeutsch auch Strings.

Zu Zeichenketten beachten sie auch bitte den Anhang: JS Escape-Sequenzen.

Beispiel: "Das ist eine Zeichenkette!"

Wahrheitswerte

Ein Wahrheitswert kann nur die beiden Werte „wahr“ (true) oder „falsch“ (false) annehmen. Wahrheitswerte nennt man auf gut neudeutsch auch boolsche Werte. Man benötigt sie vor allem für Vergleiche. Das Ergebnis eines Vergleichs ist entweder „wahr“ oder „falsch“

Weitere

In JS hat eine Funktion den Datentyp Function. Alle weiteren Daten (Objekte, Arrays, …) sind vom Typ Object. In der Praxis bedeutet das, man kann auch Funktionen und Objekte einer Variablen zuweisen. Dazu später mehr.

Zuweisung

Anmerkung: Zuweisungen gehören eigentlich in den Programmablauf. Da JS aber schon während der Deklaration Zuweisungen erlaubt, sprechen wir sie kurz an. Später folgt dann die genauere Beschreibung.

Bei einer Zuweisung wird einer Variablen ein Wert mit dem Zuweisungsoperator = zugewiesen: x = 5 (x hat jetzt den Wert 5). Steht eine Variable nicht links vom =, repräsentiert die Variable ihren Wert: y = x + 5 (x steht für 5; y bekommt den Wert 10).

Variablen, denen noch kein Wert zugewiesen wurde, gelten als nicht initialisiert (http://de.wikipedia.org/wiki/Variable_(Programmierung)#Initialisierung). Allerdings sorgt die automatische Konvertierung von JS dafür, dass eine leere Variable bei Gebrauch als Zeichenkette den Wert "" (Leerstring), bei Gebrauch als Zahl den Wert 0 und bei Gebrauch als Wahrheitswert den Wert „falsch“ hat.

<script type="text/javascript">
var x = 5, y = x + 5;
var Ergebnis = "x=5 und y=x+5. y=";
alert(Ergebnis+y);
</script>

Beispielskript ausführen

Lokal/Global

Variablen die mit var deklariert wurden, sind innerhalb einer Funktion Funktion(){ Anweisungen; } immer lokal, dass heißt sie sind nur innerhalb dieses Blocks gültig. Ein weiterer guter Grund, Variablen immer zu deklarieren.

Genaueres zu Funktionen lesen sie in den nächsten Kapiteln.

Variablen die sie ohne Deklaration verwenden, sind immer global, also immer überall innerhab eines Dokuments verwendbar. So können sie schnell mit Variablen aus externen Skripten in Konflikt geraten.

Zusammenfassung

• JS hat keinen expliziten Definitionteil.
• Allerdings steht mit var eine Möglichkeit zur Deklaration zur Verfügung, die wir nutzen sollten.
• Variablen sind einfach Datenstrukturen mit Typ, die einen Wert speichern.

Einführung

Im internen Definitionsbereich deklarieren sie neben einfachen Variablen auch komplexe Datenstrukturen wie Arrays oder Objekte.

Komplexere Datenstrukturen kennen sie aus der Realität vor allem als Listen und Tabellen. Aber auch alle Strukturen wie Listen mit Unterpunkten können als Daten benutzt werden. Alle diese Konstrukte können sie in JS mit Arrays und Objekten nachbilden.

Datenstrukturen

Datenstrukturen (http://de.wikipedia.org/wiki/Datenstruktur) (komplexe Variablen) sind in JS vor allen verschiedene Array-Typen aber auch Objektklassen.

Felder (Array)

Arrays können sie sich wie durchnumerierte Schubfächer vorstellen, in denen sie Werte gleichen Typs (Zahl, Zeichenkette) ablegen können.

In JS schreibt man das dann wie folgt:

Allerdings beginnt die automatische Numerierung (der Schubfächer) bei Null und nicht bei Eins. Der Zugriff auf ein Schubfach erfolgt mit tage[Schubfachnumer].

tage[3] → "Donnerstag"

Sie können allerdings Arrays nur über die Elementeanzahl (Bespiel → 10) auch ohne Angabe konkreter Elemente mit

deklarieren oder sogar ganz ohne Anzahl mit

Mehrdimensionale Arrays

Mehrdimensionale Arrays erzeugen wir, in dem wir einen normalen Array-Element wieder ein Array zuweisen (allerdings meist in einer Schleife):

In diesem Fall haben wir also die Schubladen der Spalte 0-3 und der Reihe 0-2.

Der Zugriff erfolg dann mit a[x][y]

Anmerkung: Wenn sie jetzt an Excel und seine Organisation in Zellen denken, liegen sie sicherlich nicht verkehrt.

Assoziative Arrays

In normalen Arrays greifen sie auf die Elemente mit einen Zahlenindex (auch Schlüssel genannt) zu. So ein Schlüssel muss allerdings nicht unbedingt eine Zahl sein, sondern kann auch eine Zeichenkette sein. Dann spricht man vom assoziativen Array.

Da allerdings JS assoziative Arrays nur als Sonderform des Objekts benutzen kann, werden wir diese dort besprochen.

Objektklassen

Objektklassen (auch Objekttypen oder einfach nur Klassen genannt) sind die Definitionen von Objekten (http://de.wikipedia.org/wiki/Objekt_(Programmierung)) (auch (Objekt-)Instanzen). Die Objektorientierte Programmierung (http://de.wikipedia.org/wiki/Objektorientierte_Programmierung) (OOP) versucht das Konzept (http://de.wikipedia.org/wiki/Konzept) eines Objektes der realen Welt in die Welt der Informatik zu übertragen.

Objektorientierung umfaßt:

Eigenschaften

Objekte haben bestimmte Eigenschaften (Attribute und Methoden)

Attribute

Attibute speichern wie Variablen Eigenschaften eines Objekts

Beispiel Mensch

Größe, Farbe, Alter, …

Beispiel HTML-Dokument

Größe, Hintergrundfarbe, Schriftart, …;

Methoden

Führen wie Funktionen Anweisungen zu dem Objekt aus

Beispiel Mensch

er kann laufen, reden, schlafen, …

Beispiel HTML-Dokument

man kann Texte einfügen, Tags auswählen und maipulieren, …

Vererbung

Bei der Verbung werden Eigenschaften von einer Vaterklasse an eine Kindklasse weitergegeben

Beispiel Mensch

Der Vater vererbt seine Eigenschaften an sein Kind. Einzelne Eigenschaften können variieren.

Beispiel HTML-Dokument

Jedes Tag hat bestimmte Eigenschaften, die es erbt. Es kann aber weitere Attribute bekommen.

Da Objekte mit ihren Methoden sich wie Funktionen verhalten, besprechen ich sie ausführlich weiter unten im „Ablauf“.

Zusammenfassung

• JS kennt auch komplexe Datenstrukturen wie Arrays und Objekte.
• Auch sie sind Variablen.

Unterkapitel

n.v.

Einführung

Traditionell teilt man Computerprogramme in die zwei Bereiche Definitionen und Programmablauf. Der Programmablauf ist das eigentliche Programm - also die Funktionalität.

Das entsprach in unserem Bauplan:

Hallo Welt

Um eine einfachen Einstieg in eine Programmiersprache zu schaffen, nutzt man traditionell ein Hello-World-Programm (http://de.wikipedia.org/wiki/Hello_World). In diesem ist die einfachste Form eines lauffähigen Programms verwirklicht. Meist ist das eine Anweisung (http://de.wikipedia.org/wiki/Anweisung_(Programmierung)) die „Hallo Welt“ ausgibt.

Anmerkung: Javascript kennt zwei Arten von Kommentaren. // leitet einen Kommentar bis zum Zeilenende ein. /* und */ umschließen einen Kommentar.

<script type="text/javascript">
'use strict';
// Ausgabe als Meldungsfenster
alert('Hallo Welt');
// Ausgabe im HTML-Dokument
document.write('Hallo Welt');
// Ausgabe in die Log-Datei (gibt es nicht bei allen Browsern)
console.log('Hallo Welt');
</script>

Beispielskript ausführen

Einzelne Anweisungen

Eine Anweisung ist also ein Befehl der den Computer anweist etwas zu tun („Hallo Welt“ ausgeben). In JS trennt man Anweisungen mit einem ; oder einem Zeilenumbruch. Allerdings sollte man übersichthalber, immer dem Semikolon den Vorzug geben.

Beispiele für Anweisungen:

x = 2;

Einer Variablen einen Wert zuweisen.

x = 2 + 2;

Einer Variablen einen berechneten Wert zuweisen.

document.write('Hallo Welt');

Eine Funktion ausführen.

Anweisungsblöcke

An bestimmten Stellen innerhalb von JS muss man Anweisungen zu einem Block zusammenfassen. Für JS ist dann dieser Block eine Anweisung. Einen Anweisungsblock umschließen sie mit geschweiften Klammern {}.

Beispiele für Anweisungsblöcke finden sie in den folgenden Kapiteln unter Funktionen, Bedingungen und Schleifen.

Zusammenfassung

Allgemein

Funktionen (http://de.wikipedia.org/wiki/Funktion_(Programmierung)) fassen Anweisungen zusammen, um diese dann (parametrisiert (http://de.wikipedia.org/wiki/Parameter_(Informatik))) immer wieder aufrufen zu können. Mit solchen Funktionen stellen Programmierer ihre JS-Anwendungen auch der Allgemeinheit zur Verfügung (s. Kursteile I und II).

Stellen sie sich eine parametrisierte Funktion wie eine Bohrmaschine vor, die sie je nach Aufsatz (Parameter) verschieden verwenden können. Bohrmaschine(5,Bohrer) wäre dann eine Bohrmaschine mit einem 5mm Bohrer und Bohrmaschine(10,Fräse) entspräche einer 1cm Fräse.

Eine weitere Besonderheit von JS ist, das nicht innerhalb einer Funktion stehender Code, immer sofort ausgeführt wird. Das ist allerdings nur in den seltesten Fällen erwünscht. Beachten sie dabei, das JS im <head> ausgeführt wird, wenn die Seite noch gar nicht vollständig geladen ist. Im <body> wird der Code an der Stelle ausgeführt, an der er steht. Wenn sie ihn erst ausführen wollen, wenn die Seite geladen wurde, gehört er in <body onload="">.

Funktionen heißen auf gut Deutsch auch Unterprogramme und das nicht zu unrecht. Eine Funktion stellt ein eigenes kleines Programm dar und deshalb sind beispielsweise alle innerhalb der Funktion deklarierten Variabeln lokal. Eine Funktion sollte also wie ein Programm immer mit einem Deklarationsteil beginnen.

Definieren

Bevor man eine Funktion vewenden kann, muss sie (ähnlich wie Variablen) erst definiert werden. In JS ist es üblich alle Funktionen deshalb am Anfang des Quelltexts zu stellen. Wenn eine Funktion eine andere aufruft, muss sich die aufgerufene vor der aufrufenden befinden (sonst wäre sie ja noch nicht definiert!).

Eine Funktion wird formal wie folgt definiert:

function fnname(parameter1,…,parameterN){
  Anweisungen;
  return Wert;
}

Die Syntax (http://de.wikipedia.org/wiki/Syntax) setzt sich dabei wie folgt zusammen:

Hinweis: Eine Funktion kann auch fnname = function (parameter1,…,parameterN) { … } definiert werden.

Hinweis: Ein Schlüsseltwort ist ein reserviertes Wort (s. Anhang: JS reservierte Wörter) welches für die Programmiersprache eine besondere Bedeutung hat.

Zur Bildung von Funktions- und Parameter­namen schlagen sie bitte im Anhang: JS-Bezeichner nach.

Aufrufen

Wenn eine Funktion definiert ist, kann sie dann wie folgt aufgerufen werden:

fnname()

oder bei Funktionen mit Parametern:

fnname(wert1,…,wertN)

oder bei Funktionen mit Parametern und Rückgabewert:

rueckgabewert = fnname(wert1,…,wertN)

Die Syntax setzt sich dabei wie folgt zusammen:

Beispiel

<script type="text/javascript">
function Addiere(param1,param2){
  return param1 + param2;
}

alert(Addiere(2,2));
</script>

Beispielskript ausführen

Parameterübergabe

Wertparameter

Call by value (http://de.wikipedia.org/wiki/Call_by_value): Bei der Übergabe einer Variablen an eine Funktion benutzt diese den Wert der Variablen. Selbst wenn der Variablen innerhalb der Funktion ein neuer Wert zugewiesen wird. Außerhalb der Funktion ändert sich der Wert der Variablen deshalb nicht.

Wenn sie wieder an unseren Zettel denken, wird der Zettel innerhalb der Funktion abgeschrieben. Der ursprüngliche Zettel verändert sich so nicht.

Das ist die Standardübergabe für Zahlen, Zeichenketten und Wahrheitswerte.

Referenzparameter

Call by reference (http://de.wikipedia.org/wiki/Call_by_reference): Wenn sie Objekte als Ganzes übergeben, wird nur eine Referenz auf dieses übergeben. Alle Änderungen am Objekt gelten dann auch außerhalb der Funktion.

Hier wird also nicht innerhalb der Funktion ein neuer Zettel verwendet, sondern der ursprüngliche Zettel direkt.

Vordefinierte Funktionen

Vordefinierte Funktionen finden sie im Anhang Anhang: JS-Funktionen und Objekte.

Funktionen verschachteln – Closures

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures

Anonyme Funktion

Funktionen ohne Namen

Zusammenfassung

Eigene Objekte

Im Definitionsbereich haben wir schon eigene Objekte definiert. Nun wollen wir mit Objekten arbeiten.

Beispiel:

function Benutzer(vn,nn) {
  // Attribute
  this.Vorname = vn;
  this.Nachname = nn;
  this.Name = BenutzerName;
}
// Methoden
function BenutzerName() {
  return (this.Vorname + " " + this.Nachname);
}

var Nutzer1 = new Benutzer("Christian","Hartnick");
var Nutzer2 = new Benutzer("Max","Mustermann");

Anmerkung: Das Schlüsselwort this ist immer eine Referenz auf das aktuelle Objekt. Das funktioniert zum Beispiel auch im HTML-Quelltext bei „on“-Ereignissen: <input type="button" value="OK" onclick="alert( this.form.Feld.value )">.

Eigenschaften: Attribute und Methoden

Der Zugriff auf Attribute und Methoden geschieht über den .-Operator bei Attributen

und Methoden

, also im Endeffekt wie bei einer Variable und bei einer Funktion.

Beispielskript ausführen

with

Zur Vereinfachung kann man Objektebezeichner auch mit dem Schlüsselwort with voraussetzen:

with (Nutzer2) {
  Vorname = "Petra";
  Nachname = "Musterfrau";
  alert (Name());
}

Vordefinierte Objekte

Die große Stärke von JS ist die hohe Anzahl vordefinierter Objektklassen. Diese können sie wie eine eingebaute Funktionsbibliothek einfach benutzen. Innerhalb dieser Objekte müssen wir zwischen JS-Objekten und Browser-Objekten unterscheiden.

s. Anhang: JS-Funktionen und Objekte

von JS

JS-Objekte stellen so etwas wie eine Bibliothek von Basisfunktionen dar. Sie haben mit ihnen Zugriff auf mathematische Funktionen und Datumsfunktionen. Außerdem haben alle Datentypen (Zahlen (Number), Zeichenketten (String), Wahrheitswerte (Boolean)) eigene Klassen. Außerdem gibt es eine Klasse für Reguläre Ausdrücke (http://de.wikipedia.org/wiki/Regulärer_Ausdruck), die wir hier allerdings nicht besprechen.

Das Datumsobjekt (Date) besitzt beispielsweise die Methoden:

getDate()

Holt das aktuelle Datum samt Uhrzeit als Zahlenwert

toLocaleString()

Wandelt einen Datum/Uhrzeit-Wert in einen menschlich lesbaren um

<script type="text/javascript">
var Datum = new Date();
with (Datum) {
  alert(toLocaleString(getDate()));
}
</script>

Beispielskript ausführen

des Browser

Auch der Browser stellt viele Objekte bereit (damit sind sie aber auch abhängig von dem Browser und der Browserversion). Diese Objekte werden aus dem HTML-Quelltext und der Browserkonfiguration dynamisch erzeugt.

Auf diese Objekte werden wir im Kapitel DOM genauer eingehen.

<script type="text/javascript">
var Liste = new Array();
for (var Element in window) {
  Liste.push ( "(" + typeof (window[Element]) + ") " + Element + "\n");
}
alert(Liste.sort().join(""));
</script>

Beispielskript ausführen

Assoziatives Array

Bei assoziativen Arrays erfolgt der Zugriff auf einzelne Elemente mit einer Zeichenkette. Im Gegensatz zu anderen Programmiersprachen gibt es in JavaScript keine assoziativen Arrays. Man kann jedoch mit Objekten ein assoziatives Arrays grundlegend nachbauen.

Alternativ zum .-Operator funktioniert auch der Index-Operator (objekt["attribut"]) bei Objekten. So lassen sich über Attribute beliebige Schlüssel erzeugen.

Anmerkung: Ein solches "unechtes" assoziatives Array besitzt nicht die gewöhnlichen Methoden und Eigenschaften eines Arrays. So können sie nicht über length() die Anzahl der Elemente zu ermitteln. Die Elemente eines solchen „Arrays“ können sie nur über den Namen oder über eine for-in-Schleife ansprechen.

Zusammenfassung

Zuweisungen (http://de.wikipedia.org/wiki/Zuweisung) von Variablen kennen wir schon. Allerdings kennt JS auch an anderen Stellen Zuweisungen, die wir teilweise schon implizit benutzt haben.

Einfache Zuweisungen

Überall wo etwas zugewiesen wird, wird auch ein Ausdruck (http://de.wikipedia.org/wiki/Ausdruck_(Programmierung)) erwartet, der einen Wert bereitstellt. Im einfachsten Fall ist das der Wert einer Variable oder der Rückgabewert einer Funktion.

Berechnete Ausdrücke

Ausdrücke können aber viel komplexer sein. Sie können auch berechnet werden. Dafür existieren in JS verschiedene Operatoren (http://de.wikipedia.org/wiki/Operator_(Mathematik)) und Funktionen.

Mathematische Operatoren

Mit Zuweisung (x = 3):

Bitoperatoren

Bitoperatoren brauchen sie so gut wie nie. Sollten sie sie trotzdem interessieren lesen sie bitte über Bit-Operatoren (http://de.wikipedia.org/wiki/Bitweiser_Operator) in der Wikipedia nach.

Wahrheitsoperatoren

Alle bisherigen Operatoren haben Zahlen manipuliert (Mathematik). Da sie Wahrheitswerte wie Zahlen (wahr=1, falsch=0) benutzen können, gelten sie auch für diese.

Zeichenkettenoperatoren

Zeichenketten haben einen einzigen Operator:

Wenn sie eine Zahl und eine Zeichenkette mit + verknüpfen, wird die Zahl automatisch in eine Zeichenkette gewandelt!

Funktionen für Variablen

JS kennt einige vordefinierte Funktionen, um Variablen auszuwerten:

Rangfolge von Operatoren

1. , (Aneinanderreihung von Variablen und Parametern)
2. = += -= <<= >>= &= ^= |=
3. ?: (Entweder-Oder-Bedingung)
4. ||
5. &&
6. |
7. ^
8. &
9. == === != !==
10. < <= > >=
11. << >> >>>
12. + -
13. * / %
14. ! ~ - ++ --
15. () [] . (Klammerung und Vektoren)

Zusammenfassung

Vergleiche

Vergleichsoperatoren

JS kennt mehrere Operatoren, um Werte miteinander zu vergleichen. Der Rückgabewert einer solchen Operation ist ein Wahrheitswert (wahr/falsch).

Beispiel:

<script type="text/javascript">
var Datum = new Date();
var vormittags = ( Datum.getHours() < 13 );
alert(vormittags);
</script>

Beispielskript ausführen

Achtung: Verwechseln sie nicht den Zuweisungs­operator = und den Vergleichs­operator ==. JS gibt keinen Fehler bei der falschen Verwendung aus, da eine Zuweisung immer „wahr“ ist!

Logische Verknüpfungen

Mit den logischen Verknüpfungen können sie mehrere Wahrheitswerte (also auch Vergleiche) miteinander verknüpfen. So können sie komplexe Vergleiche mit mehreren Variablen erschaffen.

Beispiel:

<script type="text/javascript">
var Datum = new Date();
var tagsueber = ( (Datum.getHours() > 6) && (Datum.getHours() < 18) );
alert(tagsueber);
</script>

Beispielskript ausführen

Bedingter Programmablauf

Bedingter Operator

Mit dem bedingten Operator können sie Vergleiche innerhalb eines Ausdrucks verwenden, da dieser einen Wert zurück gibt.

Beispiel:

<script type="text/javascript">
var Datum = new Date();
var Begruessung = "Guten " + ((Datum.getHours() > 17) ? " Abend." : " Tag.");
alert(Begruessung);
</script>

Beispielskript ausführen

Bedingte Ausführung

Auch den Programmablauf sollten sie mittels Vergleich beeinflussen können. Dazu existiert das if () {} else {} Konstrukt. Wenn (if) der Wahrheitswert des Vergleichs wahr ist, werden die Anweisungen direkt danach ausgeführt, sonst (else) die Anweisungen nach „else“. Allerdings ist der „else“-Teil optional, er muss also nicht geschrieben werden.

if (Wahrheitswert) {
  Anweisungen wenn wahr;
} else {
  Anweisungen wenn falsch;
}

Beispiel:

<script type="text/javascript">
var Datum = new Date();
var Stunde = Datum.getHours();
if (Stunde<17) {
    alert("Guten Tag");
} else {
    alert("Guten Abend");
}
</script>

Beispielskript ausführen

Alternative Ausführung

Wenn sie nicht nur zwischen „wahr“ und „falsch“ unterscheiden wollen, können sie auch per Schalter (switch) die Werte einer Variable auf bestimmte Fälle (case) prüfen. Allerdings ist ein Abbruch (break) dieser Prüfung jederzeit möglich und vielleicht auch nötig. Der Standardablauf (default) wird gewählt, wenn sonst kein Fall eingetreten ist.

switch (Eingabe) {
  case "1":
    alert("Sie haben „1“ gewählt!");
    break;
  case "2":
    alert("Sie haben „2“ gewählt!");
    break;
  case "3":
    alert("Sie haben „3“ gewählt!");
    break;
  default:
    alert("Sie haben weder „1“ noch „2“ noch „3“ gewählt!");
    break;
}

Beispiel:

<script type="text/javascript">
var Datum = new Date();
var Stunde = Datum.getHours();
switch (Stunde) {
  case 4:  case 5:  case 6:  case 7:
    alert("Guten Morgen!");
    break;
  case 8:  case 9:  case 10:  case 11:
    alert("Guten Vormittag!");
    break;
  case 12:  case 13:
    alert("Mahlzeit!");
    break;
  case 14:  case 15:  case 16:  case 17:
    alert("Guten Nachmittag!");
    break;
  case 18:  case 19:  case 20:  case 21:
    alert("Guten Abend!");
    break;
  default:
    alert("Gute Nacht!");
    break;
}
</script>

Beispielskript ausführen

Ereignisse

Zur bedingten Ausführung gehören auch sogenannte Eventhandler. Diese kennen wir schon aus HTML (<body onload="javascript:funktionsname()">. Die Funktion die diesem Handler zugewiesen wird, ruft erst dessen Ereignis auf.

windows.onload = fnname;

http://www.mediaevent.de/javascript/event-handler.html

Exception

try … catch(e) … throw

Zusammenfassung

Schleifen führen Anweisungen mehrfach hintereinander aus, bis eine bestimmte Bedingung erfüllt ist.

Zählschleife

Bei Zählschleifen ist die Bedingung ein Zähler oder eine Elementanzahl.

Über Zählervariable

Die For-Schleife erwartet als Parameter einen Anfangsausdruck (Deklaration und Initialisierung der Zählervariable: var i=0), danach eine Bedingung (Test der Zählervariable: i<10) und zuletzt eine Veränderung (verändern der Zählervariable: i++). Im Gegensatz zu Funktionsparametern werden diese mit Semikolon getrennt.

Der Anfangsausdruck wird vor Schleifenbeginn ausgeführt. Dann werden die Anweisungen im Block ausgeführt. Die Bedingung wird nach jeden Schleifendurchlauf geprüft und die Veränderung zuletzt durchgeführt.

Anmerkung: Für Zählervariablen nimmt man gerne die Variablennamen „i“, „j“, „n“ und „m“.

for (Anfangsausdruck; Bedingung; Veränderung) {
  Anweisungen;
}

Beispiel:

<script type="text/javascript">
var Schleife = "Durchlauf:";
for (var i=0; i<10; i++) {
  Schleife = Schleife + " " + i;
}
alert(Schleife);
</script>

Beispielskript ausführen

Über Elementanzahl

Die For-Schleife über eine Elementanzahl braucht keine Bedingung und Veränderung. Die Zählervariable durchläuft automatisch die Anzahl der Elemente des Objekts, das nach dem Schlüsselwort in angegeben ist.

Beachten sie, dass die Zählervariable numerische Werte enthält. Wollen sie beispielsweise die Elemente eines Arrays durchlaufen, greifen sie auf dessen Elemente mit [Zählervariable] zu.

for (var Element in Array/Objekt) {
  Anweisungen;
}

Beispiel:

<script type="text/javascript">
var Tiere = new Array ('Hund','Katze','Maus');
var Schleife = "Tiere:";
for (var t in Tiere) {
  Schleife = Schleife + " " + Tiere[t];
}
alert(Schleife);
</script>

Beispielskript ausführen

Bedingte Schleifen

Schleifen laufen nicht nur über eine Anzahl, sondern können auch eine allgemeine Bedingung (Ereignis) als Abbruch haben. Dass heißt, es ist vorher noch nicht bekannt, wieviele Durchläufe eine Schleife hat.

Diese Art von Schleifen können anfangs- oder endbedingt sein.

anfangsbedingt

Bei anfangsbedingten Schleifen wird die Schleifenbedingung vor dem ersten Durchlauf der Schleife geprüft. So kann es sein, dass die Schleife auch gar nicht ausgeführt wird. Diese Schleifenart benötigt nur eine Bedingung und einen Anweisungsteil:

while (Wahrheitswert) {
  Anweisungen;
}

Beispiel:

<script type="text/javascript">
var Anzahl = 0;
while (confirm("Nochmal? (" + Anzahl + ")")) {
  Anzahl++;
}
</script>

Beispielskript ausführen

endbedingt

Bei endbedingten Schleifen wird die Schleifenbedingung nach dem ersten Durchlauf der Schleife geprüft. So wird die Schleife immer mindens einmal ausgeführt. Diese Schleifenart benötigt nur eine Bedingung und einen Anweisungsteil:

do {
  Anweisungen;
} while (Wahrheitswert);

Beispiel:

<script type="text/javascript">
var Anzahl = 0;
do {
  Anzahl++;
} while (confirm("Nochmal? (" + Anzahl + ")"))
</script>

Beispielskript ausführen

Kontrollfluss von Schleifen

Um noch flexibler innerhalb von Schleifen auf Bedingungen eingehen zu können, können sie mit break und continue den Schleifenablauf noch besser kontrollieren.

break

Direkter Abbruch der Schleife an dieser Stelle

(Damit ist eine mittenbedingte Schleife möglich!)

continue

Direktes Fortsetzen des Ablaufs am Schleifenanfang

Beispiel:

<script type="text/javascript">
var Anzahl = 0;
do {
  if (!confirm("Nochmal? (" + Anzahl + ")")) break;
  continue;
  Anzahl++;
} while (true)
</script>

Beispielskript ausführen

Zusammenfassung

Unterkapitel

n.v.

Einführung

Document Object Model

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#schichtenmodell

GetElementById

• Zugriff auf das DOM
  • getElementById()
  • getElementsByTagName()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()
• Neue Knoten erzeugen
  • createElement()
  • createDocumentFragment()
  • createTextNode()
  • createComment()
  • createAttribute()
  • cloneNode
• HTML-Attribute manipulieren
  • getAttribute()
  • setAttribute()
  • removeAttribute()
  • setAttributeNode()
  • getAttributeNode()
• Durch den DOM-Baum navigieren
  • parentNode
  • parentNode
  • hasChildNodes
  • firstChild
  • lastChild
  • nextSilbling
  • prevSilbling
• Den Dom-Baum manipulieren
  • insertBefore()
  • replaceChild()
  • removeChild()
  • appendChild()
• Dom-Baum analysieren
  • nodeName
  • nodeValue
  • nodeType

appendChild(dasNeueObjekt)

insertBefore(dasNeueObjekt, BezugsObjekt)

Unterkapitel

n.v.

Einführung

Beispiel Chatbox

Dieses Buch

Über mich

1. Christian Hartnick
2. Diplom-Wirtschaftsinformatiker
3. Freier Berater, Entwickler und Dozent; Journalist
4. über 30 Jahre Beruferfahrung
5. http://hilfe.hartnick.de (http://hilfe.hartnick.de)

Entstehung

Dieses Buch ist im Rahmen meiner Kurse „Webseiten gestalten“ an der VHS Aschaffenburg und der KVHS Oranienburg entstanden.

Es enthält im ersten Teil ein durchgehendes Beispiel von einer (web-)Visitenkarte bis zu einer Webpräsenz (http://de.wikipedia.org/wiki/Webpräsenz). Im zweiten und dritten Teil (Fortgeschrittenen und Profi-Kurs) werden dann neue Techniken sowie Tipps und Tricks eingeführt.

Kursteil 4 beschäftigt sich mit Content Management Systemen (Inhalteverwaltung) und der letzte Teil mit der JavaScript-Programmierung.

Disclaimer

Dieses Buch steht unter der Creative Commons-Lizenz (http://de.wikipedia.org/wiki/Creative_Commons) CC-BY-NC-SA (http://de.wikipedia.org/wiki/Creative_Commons#Die_Rechtemodule)

Aufbau

Beschreibung

Dieses Buch verwendet verschiedene Kennzeichnung, die dem Leser das Leben vereinfachen sollen:

Besondere Formatierungen

Ein ganz wichtiges Wort. Und ein Stück HTML-Code, CSS-Code und JavaScript-Code. Neu eingeführte Syntax (http://de.wikipedia.org/wiki/Syntax) sieht so aus: HTML-Code, CSS-Code und JS-Code.

Übung / Brainstorming

Quelltext

So ist ein Quelltext gekennzeichnet.
HTML: <tag attribut="Wert"> Text </html-tag>
CSS: selektor {color:blue;}
JavaScript: reserviertes Wort, Quellcode, Wert, Bezeichner

Vorraussetzungen

Sie können

1. Mit Windows, Mac OS oder Linux umgehen
2. Einen Dateimanager (Windows Explorer) benutzen
3. Einen Webbrowser (Internet Explorer, Firefox, Chrome, …) benutzen
4. Dateien und Verzeichnisse verwalten

Sie brauchen

1. Einen schnellen USB-Stick
2. Stift/Papier
3. Geduld :-)

Empfehlenswert

1. Firefox
2. Notepad++ oder Notepad2
3. Gimp oder Pinta
4. 7-Zip
5. IrfanView
6. VLC
7. Lynx
8. PortableApps (http://portableapps.com/de)

Windows

Notepad2

Firefox