• Input Elemente
• Select Elemente
• Listenauswahlen
• Checkboxen
• Submit Buttons

Wenn wir uns auf die clientseitige Programmierung beschränken, können wir z.B. mit JavaScript dem Anwender aus seiner passiven Haltung heraushelfen. Jawohl liebe Anwender, bewegt eure müden Hände und füllt Informationen in eure armen Webapplikationen hinein! Das Internet ist nunmal zum Mitmachen und nicht ganz so passiv wie das Fernsehprogramm.

Mögliche Stellen an denen mit JavaScript eine Interaktion erstellt werden kann

Hier eine kleine Auswahl an möglichen Stellen:

Im Body Tag

Sehr begehrt ist dass body Tag. Hier kann eine JavaScript Funktion als Attribut eingetragen werden. Beispielsweise kann hier mit dem Attribut onload eine Funktion aufgerufen werden, die nur beim Laden des HTML Dokuments ausgeführt wird. Wenn du also den Anwender unbedingt mit einer Alert Box nerven willst, ist dies eine sehr geeignete Stelle dafür

In einem Input Tag

Bei jeder Eingabe, sei es eine Texteingabe, eine Checkbox, ein Button, eine Selektion oder was weiss ich noch alles, kann eine JavaScript Funktion als Attribut angegeben werden. Ich habe beispielsweise in der letzten Übung bei der Selection Box des Jahres ein paar Attribute eingeführt um diverse Anwenderaktivitäten abzufangen. Wenn in der Selection Box etwas verändert wird, also ein anderer Wert selektiert wird, dann nehme ich diese Information um dass Alter in Tagen zu berechnen.

In jedem Paragraph oder Header Tag

Auch dass geht. Du kannst deinen Webbrowser zu einer Aktion verleiten, wenn der Anwender mit der Maus über einen Text oder eine Überschrift eiert.

Wie du siehst, kannst du an jeder Stelle in deinem Dokument eine JavaScript Funktion ausführen. Es ist vielleicht nicht immer sinnvoll überall eine Funktion aufzurufen. Es kommt immer auf den jeweiligen Anwendungsfall an.

Aufgabe

Füge in eine HTML Datei an verschiedene Elemente ein onmouseover Attribut ein und generiere eine Alert Box die z.B. “Huhu” ausgibt.

Ähnliche Beiträge

JavaScript

Viele Webbrowser sind in der Lage Programme, die in JavaScript geschrieben wurden, zu interpretieren. In JavaScript können Funktionen geschrieben werden die es dem Webbrowser erlauben auf Aktionen eines Anwenders direkt zu reagieren.
Beispielsweise kann, wenn über eine Überschrift mit der Maus gefahren wird, eine JavaScript Funktion aufgerufen werden, die einen Tooltip darstellt.
JavaScript wird im Normalfall im betroffenen HTML oder SVG Dokument mit eingebunden. Das kann entweder dadurch geschehen, dass die betroffenen Funktionen direkt im Dokument hineingeschrieben werden, oder dass auf eine Datei verwiesen wird. Der Webbrowser lädt die Datei und interpretiert den darin befindlichen Code.

Flash

Auch hier wird dem Webbrowser ein Dokument mit Funktionen übergeben. Bei Flash handelt es sich um ein properitäres Format für dass der Webbrowser ein Plugin benötigt. Erkennt der Webbrowser, dass es sich um Flash handelt, lädt er dass entsprechende Plugin. Das Plugin interpretiert die Informationen, die in dem Flash Dokument übergeben wurden, und generiert die Ein- und Ausgabeelemente.

PDF

Der Webbrowser lädt für PDF ebenfalls eine Erweiterung (ein Plugin) und lässt von diesem Plugin dass PDF Dokument interpretieren. Innerhalb von PDF Dokumenten können Funktionen beschrieben werden, die eine Interaktion mit dem Anwender zulassen.

Java Applet

Auch hier wird ein Plugin benötigt. Wenn ein Java Applet geladen wird, wird dass Dokument an eine Java Virtual Machine (JVM) übergeben und ausgeführt. Der Quellcode ist hierbei eine Java Bytecodierte Applikation, die auf dem Client ausgeführt wird.

Aufgabe

Was für clientseitige Programmiersprachen kennst du noch?
Wie werden die jeweiligen Funktionen in die HTML, PDF usw. Dokumente eingebunden?
Was für Einschränkungen hat die clientseitige Programmierung?

Ähnliche Beiträge

Was solltet ihr bisher gelernt haben?

Webbrowser und andere Webclient Applikationen, sind in der Lage Zeichenketten (Strings) in unterschiedlicher Form entgegenzunehmen, diese zu interpretieren und dem Anwender entsprechend zu präsentieren.
HTML, XML, Textdateien, SVG usw. sind strukturierte Texte die von Webclients angezeigt werden.
Stylesheets können zu den einzelnen HTML, XML usw. Dokumenten hinzugefügt werden und beinhalten Informationen wie die Inhalte der Dokumente dargestellt werden sollen.

Aufgabe

Welche Arten von Stylesheets kennst du? Wie können die in HTML, SVG, PDF usw. eingefügt werden?

Ähnliche Beiträge

Einfache Textdateien

Du kannst eine Textdatei schreiben und mit deinem Webbrowser öffnen. Der Webbrowser wird dir die Textdatei wie ein Notepad, Wordpad oder KWrite Editor darstellen. Nur bearbeiten kannst du den Text im Normalfall im Webbrowser nicht.

Hypertext Markup Language (HTML)

Hierbei handelt es sich um dass wohl bekannteste Format mit dem Webbrowser bedient werden. Die einzelnen Textinhalte werden durch Tags gekennzeichnet. Der Webbrowser kann die unterschiedlichen Tags in unterschiedlicher Form darstellen. So wird ein Absatz mit dem <p> Tag gekennzeichnet. Eine Überschrift mit einem <h1> Tag. Der Text wird so aufbereitet und angezeigt, dass der Anwender ein sauber formatiertes Dokument zu sehen bekommt. Die HTML Datei ist jedoch ein einfacher Text, der an den Webbrowser übertragen wird. Wir werden also, wenn wir eine HTML Seite an den Webbrowser ausliefern, immer nur einen String (Bezeichnung für eine Text-Zeichenkette) generieren.

Extensible Markup Language (XML)

HTML, zumindest XHTML, ist im Endeffekt nichts anderes als ein mit Standardtags beschriebenes XML Dokument. Mit XML werden wir in die Lage versetzt eigene Tags zu kreieren und zu verwenden. Wir können also eine Person beschreiben in dem wir dass Tag <person>Name der Person</person> bestimmen. XML Dateien sind für den Computer und den Menschen relativ einfach zu lesen und zu verstehen. Der Text ist formatiert und die Elemente entsprechend gekennzeichnet.

Scalarable Vector Graphics (SVG)

Ein Grafikformat mit dem man mittels Vektoren die zu zeichnenden Formen beschreiben kann. Dieses Format ist sehr geschickt, wenn man unterschiedliche Darstellungsmöglichkeiten benötigt. Ein Drucker kann ein Bild hiermit sehr sauber ausdrucken. Ein grösserer Bildschirm kann die einzelnen Bilder deutlich größer Darstellen als ein Mobiltelefon.

Was macht der Webbrowser jetzt mit diesen Dokumenten?

Der Webbrowser nimmt die unterschiedlichen Dokumente entgegen und interpretiert diese. Eine Textdatei wird einfach nur dargestellt. Ein HTML Dokument wird entsprechend der darin befindlichen Tags, auch Elemente genannt, formatiert dargestellt. Somit sollte im Normalfall eine HTML Seite für den Menschen am Bildschirm einfacher lesbar sein und die einzelnen Kapitel klar voneinander getrennt sein.
Bei XML und SVG Dokumenten interpretiert der Webbrowser ebenfalls den Inhalt und stellt ihn entsprechen dar.

Aufgabe

Gibt es noch mehr Formate, die ein Webbrowser interpretieren und darstellen kann? Gibt es Einschränkungen bei den Formaten?
Wieso gibt es überhaupt so viele Formate?

Ähnliche Beiträge

Der Webclient

Mit dem Client arbeitet der jeweilige Anwender. Wenn du diesen Artikel liest, ist die Wahrscheinlichkeit dass du einen entsprechenden Client verwendest, sehr hoch. Wenn du in der Lage bist, ohne technische Hilfsmittel diese Webseite lesen zu können, bist du entweder selbst ein Computer Programm oder du hast zu viele Drähte geschluckt und mutierst gerade zu einem Borg. Davon gehe ich im Moment mal nicht aus…
Meistens handelt es sich beim Client um einen Computer auf dem ein Webbrowser installiert wurde. Webbrowser werden von unterschiedlichen Herstellern angeboten. Einige Standard Webbrowser sind hierbei der Internet Explorer, Firefox, Opera, Konqueror, Safari oder Links. Die Webbrowser unterscheiden sich im Funktionsumfang und in der jeweiligen Implementation. So “versteht” ein Firefox Webbrowser im Normalfall dass SVG (Scalable Vector Graphics) Format, während ein Internet Explorer hierfür ein Plugin, also eine Erweiterung des Funktionsumfangs, benötigt. Neben den Webbrowsern gibt es noch weitere Client Komponenten mit denen Webapplikationen kommunizieren können:

Fat Client Applikationen

Diese Applikationen werden auf dem Rechner direkt installiert. Sie kommunizieren unter Anderem mit den gleichen Protokollen wie ein Webbrowser mit dem jeweiligen Server. Die Applikationen können in allen Programmiersprachen, die auf dem jeweiligen Client verfügbar sind, erstellt werden.

PDA

Im Normalfall hat ein Peronal Digital Assistent (PDA) einen Webbrowser installiert über den auf Webseiten zugegriffen werden kann. Die Webbrowser sind entweder die vorher beschriebenen Standard Webbrowser, oder properitäre Webbrowser. Properitäre Applikationen sind Applikationen, die speziell für einen Zweck erstellt wurden. Sie müssen sich nicht an Standards halten und können daher für spezielle Bedürfnisse angepasst werden. Dummerweise bedeutet dass auch, dass wir für properitäre Systeme unsere Webapplikation speziell erstellen müssen. Jaja, alles hat seine Vor und Hinterteile…

Mobiltelefone

Die heutigen Telefone sind ebenfalls mit einem Webbrowser ausgestattet und können somit mit Webservern kommunizieren. Da diese Telefone im Normalfall nicht über einen 19 Zoll Bildschirm verfügen, müssen die Webapplikationen entsprechend an die kleinen Auflösungen der Displays angepasst werden. Es ergibt wenig Sinn ein Bild mit der Auflösung 10000*6000 Pixel auf einem Mobiltelefon darzustellen

Spezielle Eingabegeräte

Für Menschen mit Sehbehinderung gibt es diverse Geräte, wie Beispielsweise Brail Tastaturen. Diese Geräte bieten eine sehr ähnliche Funktion wie ein Standard Webbrowser. Durch die Besonderheit der Aus- und Eingabe können diese Geräte jedoch häufig keine Erweiterungen wie Flash, JavaScript oder Java Applets ausführen.

Jeder Webbrowser, und jedes weitere Werkzeug mit dem Webseiten aufgerufen und gelesen werden können, hat seine Vor- und Nachteile und es herrscht ein regelrechter Glaubenskrieg welcher Webbrowser oder welcher Client eingesetzt werden sollte. Das ist aber eine andere Geschichte mit der wir uns hier nicht beschäftigen wollen.
Wichtiger ist für uns die Frage was dieser Webbrowser eigentlich tut.

Aufgabe

Welche Webclient Typen kennst du? Sind die, die ich aufgelistet habe schon alle oder gibt es da noch weitere?
Was für Eigenschaften haben die jeweiligen Webclients? Wo kann man die einsetzen und wo sollte man lieber davon abraten?

Ähnliche Beiträge