Pixelgrafik und Referenzen für Webseiten

Um Pixelgrafiken (auch als Rastergrafiken bekannt) in Ihre Webseiten einzubinden, referenzieren Sie die Grafikdateien an gewünschten Stellen im HTML-Quelltext. Geeignete Dateiformate für Web-gerechte Grafiken sind GIF, JPEG und PNG. Bei Grafiken für Webseiten sollten Sie darauf achten, dass sie nicht zu groß sind, denn aufwendige Grafiken verursachen lange Ladezeiten...

Image-Maps (verweissensitive Grafiken)

Image-Maps bzw. verweissensitive Grafiken sind Grafiken, bei denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten. Das Beispiel enthält eine Grafik mit einem Kartenausschnitt von...

SVG-Grafikreferenzen im HTML -Dokument

HTML selbst bietet kein spezielles Element für Vektorgrafik an. Seit HTML5 gibt es jedoch Möglichkeiten, Vektorgrafik in HTML einzubinden. Die einfachste besteht darin, SVG-Dateien als Grafikreferenz einzubinden. HTML5 erlaubt außerdem, SVG direkt in HTML einzubinden. Eine weitere basiert auf einem in HTML5 neuen Element, namens canvas. Dieses Element ermöglicht das...

SVG-Grafiken im HTML-Dokument

XML-Formate, die sich in der Praxis bereits verbreitet haben und das Portfolio möglicher Dokumentdaten sinnvoll ergänzen, können direkt in HTML5 eingebunden werden, und zwar ohne die XML-typische Namensraum-Deklaration. Neben MathML für mathematische Formeln gehört auch das Vektorgrafikformat SVG zu den XML-Formaten, die Sie direkt in HTML einbinden...

Basisfunktionen von SVG-Grafiken

Einfache SVG-Grafiken, zum Beispiel Balkengrafiken für statistische Verteilungen, lassen sich mit ein paar Grundkenntnissen auch ohne Grafikeditor direkt erzeugen. Deshalb sollen die wichtigsten Gestaltungsfunktionen von SVG hier kurz vorgestellt werden. Mit SVG können Sie Rechtecke, Kreise, Ellipsen, Polygone (z. B. für Dreiecke, Vielecke, Sterne), Linien, Polylinien (Zickzack-Linien) und...

Vektorgrafik mit dem canvas-Element

Das mit HTML5 neu eingeführte canvas-Element ist neben SVG die andere Möglichkeit, um Vektorgrafik in HTML einzubinden. Das canvas-Element ist dabei allerdings nur ein Behälter, eine Aktionsfläche mit definierten Ausmaßen. Was innerhalb davon geschieht, wird durch Scripting, also durch Programmierung erreicht. Bislang gab es jedoch in ECMA/JavaScript keine geeigneten...

Funktions-Set für Canvas-2D-Rendering

Beim Generieren einer Grafik im 2D-Rendering-Context kommen immer wieder die gleichen Anweisungsfolgen vor. Es bietet sich daher an, diese Anweisungsfolgen in eine kleine Funktionsbibliothek zu packen und dann beim Generieren der Grafik vorzugsweise diese Funktionen aufzurufen. Nachfolgend wird eine solche Funktionsbibliothek vorgestellt. Sie ist bewusst...

Funktionen des Canvas-2D-Rendering

Nachfolgend werden die Funktionen des Funktions-Set für Canvas-2D-Rendering-Context näher beschrieben. Eigentlich ist es mit der Methode fillRect() ganz einfach, ein Rechteck direkt zu erzeugen. Um jedoch die aus dem rect-Element von SVG her bekannte Möglichkeit der runden Ecken nachzubilden, ist etwas mehr Aufwand erforderlich. Das Rechteck wird innerhalb der...

Eingebettete Audio-Ressourcen in HTML5

In HTML 4.01 gab es zwar die Möglichkeit, beliebige Multimedia-Objekte in generischer Form einzubinden. Dabei gab es jedoch keine Konventionen dafür, welche Dateiformate und - was bei Audio und Video noch wichtiger ist - welche sogenannten Codecs verwendet werden sollten. Es gab also keine vergleichbare Konvention wie etwa die akzeptierten Dateiformate beim...