Vorheriger Artikel Nächster Artikel

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

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

    "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:25Uhr)

    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:39Uhr)

    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
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

TypeScript 1.0: Microsofts JavaScript-Alternative jetzt offen für alle Entwickler
TypeScript 1.0: Microsofts JavaScript-Alternative jetzt offen für alle Entwickler

TypeScript, die JavaScript-Alternative von Microsoft, ist in Version 1.0 erschienen – ab jetzt können sich Entwickler daran beteiligen. TypeScript soll vor allem für größere JavaScript-Projekte … » weiterlesen

JSter: Riesige Datenbank mit 1.536 JavaScript-Libraries und Tools für Entwickler
JSter: Riesige Datenbank mit 1.536 JavaScript-Libraries und Tools für Entwickler

JSter versammelt 1.536 JavaScript-Libraries und sortiert sie nach verschiedenen Kategorien. Wir stellen euch die hilfreiche Seite vor. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen