t3n News Entwicklung

Webseiten-Elemente mit Javascript fokussieren und erklären

Webseiten-Elemente mit Javascript fokussieren und erklären

Will man eine Webseite vorstellen oder erklären gibt es dazu schönere und praktischere Wege als reinen Fließtext. Wir stellen hier zwei kostenlose Javascript-Tools vor, mit denen sich einfach und elegant Anmerkungen, Beschreibungen und Tooltipps für eine Webseite erstellen lassen: intro.js und Chardin.js.

Webseiten-Elemente mit Javascript fokussieren und erklären

Wenn eine Webseite erklärt oder vorgestellt werden soll

Prinzipiell sollte eine Webseite zwar immer selbsterklärend sein, um den User nicht zu überfordern, nichtsdestotrotz kann es Situationen geben, in denen eine kleine Vorstellung oder Einführung für den User hilfreich ist. Genau in diesem Fall sind die beiden Javascript-Tools Intro.js und Chardin.js hilfreiche Werkzeuge.

Intro.js hilft beim Erstellen sogenannter Javascript-Intros. Dabei werden einzelne Bereiche einer Webseite fokussiert und erklärt.

Intro.js: Einfache Kennzeichnung von HTML-Elementen

Mit Intro.js lassen sich auf simpelste Weise HTML-Elemente für ein Javascript-Intro markieren. Beim Aufrufen der Webseite werden dann die vorher gekennzeichneten Bereiche hervorgehoben, indem der Rest der Seite abgedunkelt wird, außerdem können die Bereiche mit nützlichen Tooltips versehen werden. Mithilfe einer kleinen Navigation kann zwischen den einzelnen Bereichen und ihren Tooltipps hin- und her navigiert werden. Intro.js ist das Projekt eines 20-jährigen, iranischen Programmierers und über github kostenlos und frei verfügbar.

intro.js: Mit kleinen Tooltips und Navigations-Buttons kann die gesamte Webseite erkundet werden.

Chardin.js: Minimalistisches jQuery-Plugin

Optisch noch etwas minimalistischer kommt das jQuery-Plugin Chardin.js daher. Hier wird die gesamte Seite abgedunkelt, und lediglich die kleinen Tooltipps stehen im Zentrum der Aufmerksamkeit. Eine Navigation zwischen mehreren Elementen ist bei Chardin nicht vorgesehen. Auch dieses Script ist kostenlos auf github erhältlich.

Chardin.js ist bei der Optik noch etwas minimalistischer als Intro.js.

Weiterführende Links

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 563

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von DerFreeman am 08.04.2013 (14:49 Uhr)

    "Selbsterklärend" ist ein Mythos! Nach meinen Erfahrungen gitb es IMMER jemanden, der selbst dagegen resistent ist.

    Antworten Teilen
  2. von Thomas am 08.04.2013 (15:25 Uhr)

    Nette Spielerein! Allerdings find ich solche overlays zum Teil eher abschreckend! Vorallem wenn sie dazu genutzt werden, sich mit jener Seite auf FB zu "vernetzen"

    PS: kleiner Typo im Link von "Chardin.js auf gIthub"

    Antworten Teilen
  3. von SeV am 08.04.2013 (16:39 Uhr)

    Hab Intro.js letztens auch schon mal eingesetzt und muss sagen es ist ein tolles Plugin mit dem man schnell Ergebnisse darstellen kann. Leider hakt hier und da die Bedienung und man sollte immer die Position der Overlays nachkontrollieren.

    Ich nutze es primär als interaktive Bedienungsanleitung auf meinen Webtools und habe es in mein Portfolio mit aufgenommen.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
JavaScript.com: Hilfreiche Quelle für Einsteiger und Entwickler
JavaScript.com: Hilfreiche Quelle für Einsteiger und Entwickler

JavaScript.com bietet euch neben einem interaktiven Anfänger-Tutorial verschiedene Entwickler-Ressourcen und aktuelle News rund um die Skriptsprache. » weiterlesen

Drag-&-Drop in einfach: Das kann die JavaScript-Library Dragula
Drag-&-Drop in einfach: Das kann die JavaScript-Library Dragula

Dragula ist eine Javascript-Library mit der ihr auf einfache Art und Weise Drag-&-Drop-Funktionalität in eure Web-Apps integriert. Das müsst ihr darüber wissen. » weiterlesen

JerryScript: Samsungs quelloffene JavaScript-Engine für das Internet der Dinge
JerryScript: Samsungs quelloffene JavaScript-Engine für das Internet der Dinge

Mit JerryScript hat Samsung eine leichtgewichtige JavaScript-Engine für das Internet der Dinge unter einer Open-Source-Lizenz veröffentlicht. Mit IoT.js gibt es auch eine abgespeckte … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen