Ziel des Kurses Web Basics! war es den Umgang mit HTML und CSS zu erlernen und auf Basis des erlernten ein großes Projekt mit Hilfe der zuvor erarbeiteten Techniken umzusetzen. Es entstand eine auf HTML, CSS und JavaScript basierende PowerPoint/Keynote-Alternativ zur interaktiven Darstellung von Präsentationen.

Präsentationen begleiten uns fast täglich im Unialltag. Programme zur Erstellung dieser sind meist teuer und proprietär. Warum sollte man seine Präsentationen nicht mit Hilfe von neuen Techniken wie HTML5, CSS3 und JavaScript erstellen, welche frei zugänglich sind und in der Gestaltung keinerlei Grenzen setzen?

WebNote funktioniert in der Darstellung ähnlich wie [prezi](http://prezi.com „prezi“), indem die einzelnen Folien in einer Matrix angeordnet sind und sich somit auf einer riesigen Grundfläche befinden.

Auf dieser Grundfläche scrollt das Tool hin und her und stellt somit beim Stop die gewünschte Folie dar. Jeder Link in der Präsentation kann auf eine beliebige Folie verlinken und diese somit anzeigen. Dies funktioniert mit Hilfe eines einmaligen Ankers, den jede Folie aufweist.

Die eigentliche Präsentation besteht aus ganz normalem HTML-Content der wie folgt aussieht:

„line“ ist eine horizontale Reihe von Folien „page“ ist die einzelne Folie „content“ ist der eigentliche Inhalt

Ein jQuery Script führt dann folgende Schritte chronologisch aus

1. Zählung der Anzahl von Folien innerhalb einer Folie
2. Gesamtbreite der Folien festlegen
3. Breite der einzelnen Folie festlegen (Anhand der Größe des Viewports)
4. Überprüfung ob zu erst horizontal oder vertikal gescrollt werden soll
5. Das eigentliche Scrollen wird durchgeführt
6. ein „Landungseffekt“ setzt beim erreichen der Folie in Form von „wackeln“ ein.

Copyright

©Laurids Düllmann

Natürlich ist es auch möglich mit CSS3 räumliche Tiefe oder Rotationseffekte auf die Folien anzuwenden.

Entstanden an der FH Potsdam, Studiengang Interfacedesign Im Kurs 1.162 Interaction Design - Web Basics! bei Tina Deiml-Seibt Wintersemester 2011/12 http://fh-potsdam.de