HTTPoetics

< Mondays 1pm-4pm ET and Thursdays 10am-1pm ET >
< Todd Anderson with Kayla Drzewicki and Tyler Yin>
< todd@sfpc.study >
< @toddwords, @coolgroceries (kayla) and @tylryn on Discord >
~~~~~~~~~~~~~~~~~~~~~~

A website is a poem that is already in everyone's pocket, a house built from photos of other houses, a book where every chapter is another book where every chapter is another book. In this class we will be studying the poetics of the web: the raw material of HTML, the systemic visuals of CSS, the endless interactive possibilities of Javascript and the browsers, servers, protocols, and infrastructure that holds it all together. Each week we will make websites. We will make small websites that only convey a single, tiny idea. We will make large websites whose clutter and convoluted interlocking pages feel like exploring an abandoned mansion. We will make websites that speak, websites with secrets, and websites that tell one perfectly executed joke. And as we build the web we will also learn its history from the early geocities days to the ways we tried to be fully present over the pandemic, and all the wonderful and useless websites artists have made in between.

~*~ This syllabus is subject to change ~*~

Homework

Weekly websites: Each week, you will be asked to create a website based on a prompt related to the topics from the previous class. The first hour or so of each class will be spent looking at these websites (with your permission) and saying things about them. The course isn't graded and you can of course skip a week, but the progression of the course assumes an hour or two of work spent outside of class each week to build familiarity with the technologies we're using.

Final Anthology: At the end of the class we'll be putting together an anthology of websites created during the class. For homework on the final week you will be asked to revisit one of your earlier weekly websites, revise and expand on it (if you so choose), and submit it to the class anthology. As we go, think about what you might like to come back to.

Places to find interesting websites

see the httpoetics class anthology for examples of student work

Week 1: Making Websites

< 1/22 | 1/25 >

Topics:Introductions, Syllabus, Intro to Glitch, HTML/CSS
Slides: What is Website?
For Next Week:

Prompt: Make a bad website. Make a website that is ugly. Do it on purpose. Break an unwritten rule. Set yourself free.
Read: The Handmade Web - J.R. Carpenter
Read: Enshittification - Cory Doctorow
Read: The Internet is About to Get Weird Again - Anil Dash

Websites to Check Out:

Resources:

Week 2: Collage and Scale

< 1/29 | 2/1 >

Topics:Layout, Absolute positioning, Sizing, Audio/Video
Slides: What is Website?
For Next Week:

Prompt: Make a website that is way too big (6000px x 4000px at least). Imagine a giant sheet of paper you can only see part of at any one time. Fill it with secrets and things to find. It's ok to leave space.
Read: My Website is a Shifting House Next to a River of Knowledge

Websites to Check Out:

Resources

Week 3: Websites as Places

< 2/5 | 2/8 >

Guest Lecture: Chia Amisola
Topics: Links, Hypertext, Multi-page websites, Domain Names
For Next Week:

Prompt: Make a multi-page website with non-traditional navigation. Is it a building? A story? An archive? A dream? How is a space defined by the way you move through it?
Explore: Spend at least 5 minutes exploring each of the following sites:

Websites to Check Out:

Resources:

Week 4: Interactivity

< 2/12 | 2/15 >

Topics:Javascript, Jquery Keyboard and Mouse, Buttons
For Next Week:

Prompt: Create a website that changes when you press a button. The button could be a or a keyboard key. Is it a slideshow? A reading machine? A divination system? A place that changes over time?
Read: Intro to Eloquent Javascript
Read: Espen Aarseth on Ergodic Literature

Websites to Check Out:

Resources:

Week 5: Playing with the Mouse

< 2/19 | 2/22 >

Topics:Mouse events, P5.JS, Tools and toys,
For Next Week:

Prompt: Make a website that changes as you move the mouse. Are you drawing? Reading? Revealing?
Watch:Complicating the Computer Mouse (11 minute video) - Emma Rae Bruml (script and additional notes)

Websites to Check Out:

Resources:

Week 6: Sound and Time-Based Websites

< 2/26 | 2/28 >

Topics:Web Audio, p5.Sound, CSS & p5 Animations
For Next Week:

Prompt: Create a website for listening to a song

Websites to Check Out:

Code Examples:

Resources:

Week 7: Connecting

< 3/4 | 3/7 >

Topics:Websockets, Networking
For Next Week:

Prompt: Website for being together with someone else

Websites to Check Out:

Resources:

Week 8: A Visit from Everest Pipkin

< 3/11 | 3/14 >

Guest Lecture: Everest Pipkin

Topics:HTML as a Game Engine, Data Storage, Interface, Dynamic Interface
For Next Week:

Prompt:Revisit a past project and build on it. Bring it back to share.

Websites to Check Out:

Resources:

Week 9: Collaboration and Chaos

< 3/18 | 3/21 >

Guest Lecture: The Parks Staff (creators of dumpling.love)
Topics:Large shared projects, revision
For Next Week:

Choose one of your previous web sites from earlier in the class. Revisit, revise, and optionally expand it for inclusion in the class anthology.

Websites to Check Out:

Resources:

Week 10: Final Presentations and Anthology

< 3/25 | 3/28 >