Webseiten mit Grafik

Webseiten mit Grafik

Zielgruppe sind interessierte AnwenderInnen und Informatik-Entwicklerinnen.

Es werden keine besonderen Kenntnisse vorausgesetzt.


Medien in Webseiten


Bilder

Das Internet war anfangs weitgehend auf Text beschränkt. Seit den ersten Webseiten (1989) wurden jedoch immer mehr Medien in Webseiten eingebunden. Das war nur für Grafik (Bilder) durch Standards geregelt und verlief bei Audio- und Video-Medien weitgehend chaotisch.

Seit Version → HTML-5 (2014) wurde die Einbettung von Medien in Webseiten neu organisiert. Das wurde zwar von den AnwenderInnen kaum bemerkt, brachte jedoch für die Anbieter von Inhalt und für die Programmierung bedeutende Fortschritte.
Heute kann man Bilder in Webseiten genauso verwenden wie vor 20 Jahren, zusätzlich jedoch die weit größeren Möglichkeiten der modernen Technologien nutzen.

Diese Seite zeigt einige Beispiele zur Verwendung von Bildern in Webseiten und bietet Links zu den jeweiligen Details.
Quelle: Wikimedia Commons (modif.)

Schon die klassischen Möglichkeiten der Gestaltung erlauben es, kleinere Bilder wie Buchstaben in den Text einzubetten oder - wie hier - den Text um das Bild von Vincent van Gogh herumzuführen. (↓ Beispiele im nächsten Kapitel)

Mit → CSS-Technologie kann man Bilder skalieren (vergrößern oder verkleinern), drehen und teilweise sogar mit 'Filtern' verändern.

Die rasch zunehmende Verwendung von SmartPhones hat dazu geführt, dass man heute je nach den technischen Möglichkeiten (z.B. Größe und Orientierung des Bildschirms) Bilder unterschiedlicher Größe oder sogar verschiedenen Inhalts laden kann.


Video

Auch Video-Medien werden heute so programmiert, dass die jeweils optimale Version automatisch aus mehreren verfügbaren Versionen ausgewählt wird.
Derzeit ist gerade der Umstieg von auslaufenden Versionen (Flash) zu neuen standardisierten Video-Formaten im Gange.
Details zu → Video-Medien

Mitlaufende oder umflossene Bilder


Mit diesem SchiebeRegler lässt sich die Breite des blau umrandeten Elements Live einstellen:
Damit kann man selbst ausprobieren, was mit 'Umfließen' und 'Mitlaufen' gemeint ist.

Die Größe (Breite und Höhe) und Anordnung von Elementen in Webseiten war ursprünglich flexibel und wurde später durch die meisten Content Management Systeme (CMS) unnötig eingeschränkt.

Seit der massenhaften Verbreitung von SmartPhones hat ein flexibles Layout wieder an Bedeutung gewonnen.

Details zu diesem Beispiel
Quelle: Wikimedia Commons (modif.)
Dieses Bild von Paul Gauguin ist rechts­bündig ange­ordnet, es schließt daher an den rechten Rand des über­geord­neten Elements an, welches hier mit blauem Rand markiert ist.

Der Text umfließt das Bild auf der freien (hier: linken) Seite. Ein längerer Text nimmt unter­halb des Bildes wieder die volle Breite ein.

Alternativ kann man Bilder so wie Buchstaben oder andere Zeichen im Text mit­fließen lassen. Das ist allerdings nur für Icons, Emojis und andere kleine Bilder sinnvoll.

Bild-Quellen


Ein einfacher lesbarer Text wie HTML kann nur Zeichen (Buchstaben, Ziffern, u.a. Zeichen) enthalten, jedoch keine (binär codierten) Bild-Daten. An Stelle der Bilder fügt man daher Verweise in den HTML-Quelltext ein:

Ein Verweis gibt an, von welcher Quelle die jeweilige Bild-Datei anzufordern ist.
Jedes einzelne Bild wird daher vom Browser erst dann angefordert, wenn 'er' beim 'Lesen' des HTML-Quelltextes auf einen solchen Verweis trifft.


Die Technologie des Javascript-File-API macht es möglich, auch ↓ Bilder vom eigenen Arbeits-PC zu laden. Diese Methode ist relativ neu und wird vornehmlich auf SmartPhones zur Ansicht der eigenen Bilder verwendet.

Objekt-Grafik↓  wird durch ein Programm in der 'Programmiersprache' SVG erzeugt. Wenn man den SVG-Quelltext direkt (→ Inline) in den HTML-Quelltext einbettet, dann braucht man keine externe Grafik-Datei: Die Grafik (das SVG-Programm) ist bereits in der Webseiten-Datei enthalten.

Letzlich kann auch ein Programm als 'Bild-Quelle' dienen:  Man kann sowohl ↓ Objekt-Grafik als auch ↓ Pixel-Grafik Live am eigenen Arbeits-PC zu erzeugen. Dazu wird ein Programm an den Browser geliefert, mit dem man die Grafik interaktiv (nach eigenen Vorgaben) erzeugen und sofort anzeigen kann.

Objekt-Grafik und Pixel-Grafik


Objekt-Grafik

Alternativ kann man eine Grafik aus Objekten zusammensetzen, hier z.B. aus 9 Kreis-Segmenten:

Alle Büro-(Office)-Diagramme sind typische Objekt-Grafik, ebenso technische Zeichnungen usw.
Das Beispiel zeigt die Anteile der 9 Bundesländer an der österreichischen Bevölkerung, nach Daten der Statistik Austria von 2015.


Objekt-Grafik besteht aus Anweisungen in lesbarem Text. Dieser ist entweder direkt (→ Inline) im HTML-Quelltext enthalten oder wird mit ↑ Verweisen aus eigenen Text-Dateien angefordert. Der äußere Kreis der oben gezeigten Grafik ist z.B. mit dieser Anweisung programmiert:
<circle cx="0" cy="0" r="94"/>
Das Browser-Programm 'liest' den Text und erzeugt daraus die sichtbare Grafik.

Mit RechtsKlick in eine Objekt-Grafik kann man deren Quelltext in der 'Programmiersprache' → SVG ansehen, am eigenen Arbeits-PC speichern und mit jedem gängigen Browser-Programm anzeigen.

Mit Klick auf diesen ↗ Link wird die Objekt-Grafik in einem eigenen Browser-Tab geladen, mit diesem Link der ↗ Quelltext (Mini-Webseite mit Inline-SVG).

Live erzeugte (programmierte) Objekt-Grafik


Beide Technologien arbeiten besonders rasch und effizient. Zum Verständnis ist es hilfreich, den ↑ Unterschied zwischen Objekt-Grafik und Pixel-Grafik zu kennen.



Mit Klick auf diesen ↗ Link wird die Objekt-Grafik in einem eigenen Browser-Tab geladen. Das darin enthaltene Programm wird dann allerdings nicht interaktiv gesteuert sondern arbeitet mit seinen Standard-Vorgaben.

Mit disem Link wird der ↗ Quelltext Mini-Webseite angezeigt: Er enthält nur wenig HTML-Code, ein CSS <style>-Element zur Formatieung, ein <script>-Element mit den Programmen zur Steuerung und Animation, zuletzt ein <svg>-Element mit der Objekt-Grafik.

Details zu diesem Beispiel


Bevölkerung von Österreich nach Bundesländern

Stand von 2015.   Quelle: Statistik Austria


Mit Klick auf diesen ↗ Link wird die Objekt-Grafik in einem eigenen Browser-Tab geladen.

Mit diesem Link wird der ↗ Quelltext der Grafik angezeigt, d.h. die vom Server erhaltenen (lesbaren) ↗ XML-Daten

Mit diesem Link wird der ↗ Quelltext des XSL-Programms angezeigt. Für alle hier wählbaren Daten wird das gleiche XSL-Programm verwendet, es wird daher nur 1mal geladen und beliebig oft verwendet.

Das Beispiel ist portabel:  Speichern sie eine oder mehrere der XML-Dateien und zusätzlich die XSL-Datei im gleichen Verzeichnis (Ordner) am eigenen PC. Öffnen sie eine der XML-Dateien mit dem Browser.

Die → Details der XML+XSL-Technologie sind nur für fortgeschrittene EntwicklerInnen interessant.
Für die Anwendung ist es wichtig zu wissen, dass man damit von einem Server stammende Daten besonders rasch, einfach und effizient anzeigen kann.


Alternative: Erzeugung am Server-PC

Es ist möglich und üblich, mit einem Programm am Server-PC einen Text zu erzeugen und mit Hilfe eines Webserver-Programms an die Web-BesucherInnen zu senden.
Dazu werden typisch die Programmiersprachen Java, PHP oder Perl verwendet.

Details zur → Erzeugung von einfachem Text oder von → HTML-Quelltext oder von → SVG-Quelltext mit PHP

Die Programme werden am Server-PC ausgeführt und liefern an Stelle des meist erzeugten HTML-Textes den SVG-Text einer Objekt-Grafik.

Diese Technologie belastet den Server-PC erheblich. Man kann sie daher zwar am eigenen Intranet-Server anwenden, im Internet besteht jedoch Gefahr, dass der Server (auch für alle anderen BesucherInnen) langsam wird.
In diesem Kapitel wird dazu kein Beispiel vorgestellt.

Live erzeugte (programmierte) Pixel-Grafik



Mit Klick auf diesen ↗ Link wird die Pixel-Grafik (ohne Steuer-Elemente) in einem eigenen Browser-Tab geladen.

Mit disem Link wird der ↗ Quelltext der Mini-Webseite angezeigt: Er enthält hauptsächlich die Javascript-Programme zur Steuerung und zum Malen der Grafik.

Details zu diesem → Beispiel und zur → Herstellung von Pixel-Grafik mit Javascript + Canvas


Alternative Erzeugung am Server-PC

Es ist bereits seit langer Zeit möglich, am Server-PC auch ↑ Pixel-Grafik nach variablen Vorgaben zu erzeugen und mit Hilfe eines Webserver-Programms an die Web-BesucherInnen zu senden.
Dazu werden typisch die Programmiersprachen PHP oder Perl sowie die GD-Bibliothek verwendet.

Details zur → Erzeugung von Pixel-Grafik mit PHP

Die Programme werden am Server-PC ausgeführt und liefern an Stelle des meist erzeugten HTML-Textes die binären (nicht lesbaren) Daten der Pixel-Grafik.

Diese Technologie belastet den Server-PC erheblich. Man kann sie daher zwar am eigenen Intranet-Server anwenden, im Internet besteht jedoch Gefahr, dass der Server (auch für alle anderen BesucherInnen) zu langsam reagiert.
In diesem Kapitel wird dazu kein Beispiel vorgestellt.

Inline-Bilder


Wenn man ein Bild mit einem Verweis (URL) ladet (links), dann wird getrennt von der Webseite eine eigene Grafik-Datei mit dem Bild angefordert. Bei der Inline-Methode (rechts) werden die Bild-Daten in lesbare Zeichen umgewandelt und direkt in den HTML-Quelltext eingesetzt.


Verweis

Bild-Daten (die Farb-Daten der Bildpunkte) sind binär codiert. Sie enthalten daher keine lesbaren Zeichen und man kann sie nicht in den HTML-Quelltext einer Webseite einfügen.

An Stelle der Bilder enthält der HTML-Quelltext Verweise, d.h. jene Web-Adressen, von welchen der Browser die binär codierten Bild-Dateien als eigene Dokumente laden kann.

Das Smiley-Icon wurde mit diesem HTML-Quelltext geladen:
<img src="smiley.png"/>
Fast alle Bilder sind so in die jeweiligen Webseiten eingebettet.

Inline

Man kann die binären Bild-Daten mit dem → Base64-Verfahren in 'lesbare' Zeichen umwandeln und danach in den HTML-Quelltext einbetten:

Das Smiley-Icon wurde mit diesem HTML-Quelltext geladen:
<img src="data: image/png;base64, iVBORw0K GgoAAAAN SUhEUgAA AA8AAAAP AgMAAABG uH3ZAAAA CVBMVEVd AAn//wAA AAC7RmZy AAAAAXRS TlMAQObY ZgAAAAFi S0dEAIgF HUgAAAAJ cEhZcwAA CxMAAAsT AQCanBgA AABASURB VHjaY2DQ WsDAwDQ1 ioGBMzS0 gUE1NDSB QXVpZgLD 1KWZEQxT Q0ORiWmh YREMqlMj gUqyliZA dID1gkwB AOr5E/+y Ay9XAAAA AElFTkSu QmCC"/>
Diese Methode kommt für 'manuell' eingesetzte Bilder kaum in Frage, spielt jedoch in der modernen Web-Technologie eine zunehmende Rolle. Die → Web-API-Methoden der Programmiersprache Javascript verwenden u.a. mit Base64 codierte Daten als Drehscheibe, z.B. beim Laden von ↓ Bildern vom eigenen Arbeits-PC.

Details zu Inline-Bildern

Grafik vom eigenen Arbeits-PC



Mit dem folgenden Live-Beispiel kann man eine Datei auswählen und in der Tabelle einige ausgewählte Daten anzeigen. Wenn es sich um eine Bild-Datei handelt, dann wird ein verkleinertes Bild (Thumbnail) angezeigt.


▶  Mit diesem Link wird der ↗ Original-Quelltext des Live-Beispiels angezeigt. Wenn die Zeilen-Nummern mit MausKlick entfernt wurden, kann man den Text in einer Datei *.html am eigenen Arbeits-PC speichern und das Beispiel mit jedem modernen Browser testen, und zwar auch ohne Server, Netzwerk oder Internet.