Web-Oberfläche aufmotzen

JavaScript-Framework YUI Library

Gestalten Sie Ihre Website dynamischer. Mit dem Open Source Framework YUI Library nutzen Sie professionelle JavaScript- und CSS-Techniken sehr einfach für Ihre Seiten.

internet, webdesign, javascript, framework, yui library, css

© Volker Hinzen, Daniela Schrank

internet, webdesign, javascript, framework, yui library, css

Bieten Sie bei Ihren Web- Oberflächen einen ähnlichen Komfort, wie ihn die Besucher auch von der Windows- Bedienung gewohnt sind. Lassen Sie Objekte frei verschieben sowie per Maus größer und kleiner ziehen. Mit Tab-Registern bringen Sie umfangreiche Inhalte auf möglichst kleiner Fläche unter. Sie erstellen diese und viele weitere dynamische Funktionen mit einer geschickten Kombination aus JavaScript und CSS. Mit Techniken wie DOM-Scripting, DHTML und Ajax lassen sich Seitenelemente direkt ansprechen und unmittelbar ändern, ohne dass die jeweilige Seite neu geladen werden muss.Sie müssen den Quellcode für diese Lösungen jedoch nicht mühsam selbst programmieren. Machen Sie sich das Entwicklerleben mit vorgefertigten Skriptbausteinen leichter. Zahlreiche frei verfügbare Frameworks bieten ausgereifte Module, die sich ohne großen Zeitaufwand in die eigenen Projekte einbauen lassen. Yahoo stellt Webdesignern beispielsweise den Skriptbaukasten YUI Library (developer.yahoo.com/yui/ ) unter Open Source BSD Lizenz zur Verfügung. Gestalten Sie damit interaktive Oberflächen, die browserübergreifend funktionieren und ohne langwierige Tests sofort einsetzbar sind.

Version 2 oder 3?

Yahoo nutzt seine Skriptbibliothek auch selbst für die Seiten seiner eigenen Webdienste. Sie können daher auf einen ausgereiften und vor allem sehr schlanken Code vertrauen. Entwickler haben die Wahl zwischen den beiden Versionen YUI 2 und YUI 3. Die noch weiter gepflegte Version 2 ist bereits seit mehreren Jahren im Einsatz und wird von zahllosen Projekten genutzt.

internet, webdesign, javascript, framework, yui library, css

© Volker Hinzen, Daniela Schrank

Der YUI Configurator hilft bei der Zusammenstellung der Links für eine direkte Einbindung der Module.

Entsprechend reichhaltig ist das Angebot an sogenannten Utilities und Widgets. Mit der im letzten Jahr gestarteten Version 3 hat Yahoo das Framework auf eine technisch komplett neue Basis gestellt. Die Neuimplementierung verwendet CSS-Selektoren zur Auswahl von DOM-Elementen und bietet ein übergreifendes Datenmodell.Das System ist zudem deutlich modularer und damit ressourcenschonender angelegt. Sie müssen sich jedoch nicht strikt für eine der beiden Versionen entscheiden. Dank eines unterschiedlichen globalen Namensraums ist daher ein paralleler Einsatz problemlos möglich.YUI 3 besteht im Kern aus einem lediglich 6,9 KByte großen Loader, der alle übrigen Module bei Bedarf dynamisch einbindet. Laden Sie das zentrale Skript YUI Seed von der Website developer.yahoo.com/yui/3/ herunter und binden Sie es mit

<script type="text/
Javascript" src=
"yui-min.js"></script>

in den Kopfbereich Ihrer Webseiten ein. Über die Funktion YUI().use geben Sie dann jeweils die weiteren Module an, die Sie in den konkreten Fällen benötigen.

internet, webdesign, javascript, framework, yui library, css

© Volker Hinzen, Daniela Schrank

Mit wenigen Zeilen Code erstellen Sie ein flexibel anpassbares Tab-Register

Wenn es die besonderen Umstände Ihrer Website erfordern oder wenn Sie die Module bewusst einzeln zum Projekt hinzufügen möchten, dann lassen sich die Skripts auch statisch in Ihre Seiten einbinden.Stellen Sie die Verknüpfungen, die Sie für Ihren Quelltext benötigen, mit dem YUI Configurator (developer.yahoo.com/yui/3/configurator/ ) zusammen. Sämtliche Dateien des Frameworks stehen als Full Developer Kit zum Download bereit. Die Grundgestaltung übernehmen die unter "CSS-Komponenten" beschriebenen Formatierungsdateien. Binden Sie diese per Link-Befehl in den <head>-Bereich Ihrer Seiten ein. Die Grundschrift geben Sie beispielsweise mit

<link type="text/css" rel=
"stylesheet" href="fonts-min.css" />

vor. Erweitern Sie das <body>-Tag, bevor Sie einzelne Funktionen nutzen, schließlich noch um die beiden folgenden Klassen:

<body class="yui3-skin-sam yui-skinsam">

Tab-Register

Auf vielen Websites finden Sie kleinere, abgegrenzte Bereiche mit einer eigenen Registernavigation. Mit dieser Technik lässt sich der zur Verfügung stehende Platz effizienter nutzen. In Yahoos User Interface Library finden Sie das Modul Tabview, mit dem sich die gewünschte Navigation sehr einfach umsetzen lässt.

internet, webdesign, javascript, framework, yui library, css

© Volker Hinzen, Daniela Schrank

Sparen Sie mit dem beliebten Akkordeon- Effekt Platz auf Ihren Seiten.

Bei der Tabview- Funktion haben Sie die Wahl, die Struktur des Registers entweder selbst mit HTML-Befehlen in die Seite zu schreiben, oder dies dynamisch durch JavaScript erledigen zu lassen. Wir zeigen Ihnen ein Beispiel für die erste Variante. Legen Sie mit

<div id="demo"></div>

einen Abschnitt an, der das komplette Register enthalten soll. Geben Sie diesem über den id-Parameter einen eindeutigen Namen. Fügen Sie in diesen Container zuerst die Bezeichnungen der einzelnen Tabs als Liste nach dem folgenden Muster ein:

<ul><li><a href="#tab1">Tab 1</a></li><li><a href="#tab2">Tab 2</a></li><li><a href="#tab3">Tab 3</a></li></ul>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…