Interactive Information

This course embraces the web as a versatile and expressive medium for creating information-rich and dynamic interfaces. From buttons and boxes to events and animation, students will learn the basic building blocks for prototyping interactive web pages for diverse audiences and platforms. Covering the interlocking layers of markup, style, and code, course topics include semantic tags, accessibility features, multimedia elements, media queries, transitions, event handling, and dynamic graphics. Each week, students adapt small examples that demonstrate key features of interactive web pages. The course is structured to foster a supportive learning atmosphere where students exchange feedback and inspiration, making happy little accidents along the way. We focus on single-page web projects that do not rely on any third-party frameworks or libraries. Following a vanilla approach to web design, students progress from simple exercises to sophisticated experiments.

🖥️ Examples

Basics: dictionary with cat entry
Color: assigning, blending, dark mode
Images: formats, figure caption, filters
Layouts: normal flow, floats, position, flexbox, grid, media queries
Scrollytelling: overflow, progress, parallax, reveal, illustration
Media: audio, video, embed
Graphics: canvas, animated canvas, SVG, editable SVG, SVG triangles
Input: form, slider, keys

🧪 Experiments

Adapt the weekly example to cause 😊 delight and 😲 surprise.

Start with the web page that is not yet interactive, e.g., 1_basics.html
Copy the file from experiments/ to your own directory student/ (your first name or nickname)
Learn how to incorporate interactive features during live coding and co-working
Make your additions directly in <style> and <script> blocks

Your weekly challenge: Add delightful and surprising interactivity until Friday!

Make sure to include explanatory comments in your source to help us understand what you did:

    <!-- HTML --> 
    /*   CSS  */ 
    //   JS

1. Basics

The box model is an article from MDN.
Take a look at its source and add style to make the sections pop and let the viewer's presence shine!
Consider using pseudo classes and transitions to shift colors and shades based on the viewer's movements.

2. Color

Colors in motion
Shift any colors according to the changing position of the mouse pointer.
Be careful with any drastic color changes and do not overdo it. How could subtle adjustments pique interest?

3. Images

Images of a haunted solar system
Take a peek into our spooky solar system! Use filters to face the darkness of the universe.
Consider supporting the dark mode.

4. Scrollytelling

Scroll away!
Adjust one or more scrollytelling techniques from this week's examples to use scrolling action to make magic happen!
Consider starting to use elements for your one-pager. Be creative and focus on crafting a fluid and engaging experience!

5. Media

Scrolling a video (simple)
Offer an animated experience of visual and textual elements!
Consider the interaction between the page elements and the progression of the video.

6. Graphics

A colorful instrument
Copy any of this week's examples into your directory and adjust anything to turn it into a colorful drawing instrument!
Consider generating other shapes than circles.