Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 14 Animationen
Pfeil 14.1 Animationen mit CSS
Pfeil 14.1.1 »hover«-Effekte mit CSS3-Transitions
Pfeil 14.1.2 CSS3-Transform – Verzerren, Skalieren und Drehen
Pfeil 14.2 Animationen und Interaktivität mit JavaScript
Pfeil 14.2.1 JavaScript-Bibliotheken
Pfeil 14.3 Interaktive Elemente
Pfeil 14.3.1 Bildergalerie
Pfeil 14.3.2 Tabs
Pfeil 14.3.3 Accordion
Pfeil 14.3.4 Content-Slider
Pfeil 14.3.5 Header-Slideshow
Pfeil 14.3.6 Modalboxen
Pfeil 14.3.7 Tooltip
Pfeil 14.3.8 Weitere Animationen und Effekte
Pfeil 14.4 Audiovisuelle Elemente
Pfeil 14.4.1 Das HTML5-Videoelement
Pfeil 14.4.2 Das HTML5-Audioelement
Pfeil 14.5 Fazit
 
Zum Seitenanfang

14.2    Animationen und Interaktivität mit JavaScript Zur vorigen ÜberschriftZur nächsten Überschrift

JavaScript ist eine Skriptsprache, die eigens dafür entwickelt wurde, HTML-Entwicklern erweiterte Möglichkeiten zu geben. JavaScript kann auf Benutzeraktionen reagieren, Inhalte verändern, austauschen und nachladen.

Im Gegensatz zu Programmiersprachen wie PHP wird JavaScript erst im Browser des Anwenders ausgeführt, sodass dieser JavaScript auch deaktivieren kann. In den frühen Jahren des Webdesigns war DTHML (dynamisches HTML) ein gängiger Begriff und meinte die Veränderung/Erweiterung der Seite durch JavaScript zusammen mit HTML. Ähnlich wie Flash wurde DHTML (zu) oft genutzt, um Effekte und Animationen umzusetzen, deren Nutzen für den Anwender nicht klar erkennbar war und diesen bei der Bedienung auch eher störten. Dazu kam, dass DHTML oft nicht browserübergreifend kompatibel bzw. Kompatibilität nur sehr aufwendig zu erreichen war. So verlor JavaScript über die Jahre wieder an Bedeutung.

Verwendung von JavaScript

Kommt JavaScript auf Ihrer eigenen Webseite zum Einsatz und ist kaum verzichtbar, dann sollten Sie dieses Skript einbinden, das dem User erklärt, wie er JavaScript in seinem Browser aktivieren kann:

enable-javascript.com/de

 
Zum Seitenanfang

14.2.1    JavaScript-Bibliotheken Zur vorigen ÜberschriftZur nächsten Überschrift

Mitte der Nullerjahre erlebte JavaScript ein Comeback. Techniken wie AJAX und verschiedene JavaScript-Bibliotheken führten dazu, dass JavaScript heute wieder ganz selbstverständlich zur Webentwicklung dazugehört. Um nicht immer wieder den gleichen Code schreiben zu müssen, zu testen und erneut zu debuggen (Fehler zu entdecken und zu verbessern), wurden Programmierbibliotheken entwickelt. So muss das Rad beim Programmieren nicht immer wieder neu erfunden werden, sondern man kann auf vorhandene und ausreichend getestete Funktionen zurückgreifen, die auch mit den unterschiedlichen Browsern kompatibel sind.

JavaScript-Bibliotheken

Zu den bekanntesten und beliebtesten JavaScript-Bibliotheken gehören neben jQuery:

  • MooTools

  • Prototype

  • AngularJS

  • script_aculo_us

  • YUI

  • Dojo

Die verbreitetste JavaScript-Bibliothek ist wohl jQuery, die 2006 veröffentlicht wurde. Es gibt aber noch einige andere (siehe Kasten). Mit jQuery lassen sich einer Webseite recht einfach zahlreiche Funktionen hinzufügen. Inzwischen gibt es auch jede Menge Erweiterungen, sogenannte Plug-ins, die den Funktionsumfang noch einmal vergrößern bzw. ein großes Repertoire an nützlichen Funktionen bereitstellen. Typische Anwendungsfälle von jQuery sind Slider, Bildergalerien (Lightbox) und Formularüberprüfungen.

Bei jquery.com gibt es alle Infos zu jQuery und die Download-Möglichkeit.

Abbildung 14.13    Bei jquery.com gibt es alle Infos zu jQuery und die Download-Möglichkeit.

Wer einzelne Bibliotheken einsetzen will, kann diese auf den einzelnen Webseiten downloaden, in sein Projekt einbinden und hochladen. Alternativ bietet Google die Option, die Bibliotheken direkt von Google einzubinden. Das nennt sich dann Google Hosted Libraries – Developer’s Guide und findet sich unter developers.google.com/speed/libraries/devguide.

Im head-Bereich der Webseite sollte dann exemplarisch folgender Code eingesetzt werden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

Listing 14.11    jQuery-Einbindung über Google

So sieht das typische jQuery-User-Interface aus. Es ist dezent in Grautönen gehalten.

Abbildung 14.14    So sieht das typische jQuery-User-Interface aus. Es ist dezent in Grautönen gehalten.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern