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

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
„Jeder sollte JavaScript lernen“: Microsoft-Entwickler Scott Hanselman im Interview
„Jeder sollte JavaScript lernen“: Microsoft-Entwickler Scott Hanselman im Interview

JavaScript, ursprünglich für dynamisches HTML in Webbrowsern entwickelt, soll die neue Assembly-Language für das Internet der Zukunft werden. Dieser Meinung ist zumindest der Amerikaner Scott … » weiterlesen

Dezentrale Apps mit Lisk: Aachener Startup setzt auf JavaScript und Blockchain-Technologie
Dezentrale Apps mit Lisk: Aachener Startup setzt auf JavaScript und Blockchain-Technologie

Mit Lisk sollen JavaScript-Entwickler eigene Blockchains erstellen und für dezentrale Apps nutzen können. Wir verraten euch, was hinter dem ambitionierten Projekt steckt. » weiterlesen

Tooltips ohne JavaScript: Das kann Hint.css 2.0
Tooltips ohne JavaScript: Das kann Hint.css 2.0

Mit Hint.css baut ihr ganz ohne Javascript schicke Tooltips in eure Web-Apps ein. Wir werfen einen kurzen Blick auf Version 2.0 der Library. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?