1

January 18

January 18

In class

  1. Review syllabus
  2. Brief history of the web
  3. Break–
  4. Introductions
  5. What is a website?

For next week

  1. Project 1: Complete Levels 1 and 2
  2. Coding: Read through HTML Basics and CSS Basics
  3. Set up your Github account
  4. Reading: Olia Lialina, Vernacular Web
  5. Research: Find a website that reminds you of a zine for some reason, and add it to Are.na.
  6. If you need some help with coding or want to chat 1-on-1, sign up for office hours Sunday 6-8pm.

2

January 25

January 25

In class

  1. In pairs or alone, brainstorm and add the following to this Figma document:
    • Olia Lialina's text is from 2007. If you were to update it for 2023, what visual trends, elements, or other styles would you add to a list of current web vernaculars? Add a screenshot!
    • The first project is a webzine. What characterizes a printed, analog zine? What opportunities are there to translate a zine to the web? Take a look at Are.na, or at physical zines in the classroom.
  2. Share Project 1: levels 1 and 2. Let's see work from six people today. We'll talk about six other projects next week, and six more the week following.
  3. Break...
  4. Announcements
    • Qiang's Office hours
    • Project 1
    • Topics presentations–when to wrap?
  5. Coding: HTML recap + CSS intro
  6. Exercise: But make it...

For next week

  1. Project 1: Complete Levels 3 and 4
  2. Coding: Read CSS 2: Box model
  3. Reading: Excerpts from Octavia Butler and Samuel Delany, The Value of Literacy
  4. Reading: Frank Chimero, The Web's Grain
  5. Research: Find at least one example of interesting typography online. Add it to Are.na.

3

February 1

February 1

In class

  1. Collective annontation. Review the reading by Octavia Butler and Samuel Delaney: Google Doc. In at least two places, respond to something in the text. Add a note, question, link, or thought directly to the Google Doc. If you open the page in a private window, you can edit anonymously. (20min)
  2. In groups of four, share work in progress on the webzine. Each person should introduce their project with the following. (40min)
    • What is the audience for your webzine?
    • What connects the texts you chose?
  3. Announcements
    • A few updates to the P3, Topics presentations. We'll present in class. This is a group project. Find a partner, and sign up for a topic and a date here.
    • Webzine. We'll present these during Open Studios, April 13 and 14. More on planning that in a few weeks...
  4. CSS Layout Part I (30min)
  5. Break & Exercise: An arrangement of pictures
  6. Look at Typography online examples.
  7. Rosa and Qiang share some work.

For next week

  1. Project 1: Complete Level 5
  2. Coding: Read through CSS 3: Layout
  3. Reading: Close to the Metal: The value of reintroducing friction into our interactions with computers by Emma R. Norton

4

February 8

February 8

In class

  1. In groups, look at the examples of Typograhy on the web. On at least one block (that somebody else added), add a comment that includes:
    • A credit for who designed the site, if you can find it.
    • A description of what makes the typography notable. I'm curious: what effect does the design have on the content? Positive or negative ;)
    • We'll quickly share in 20min.

  2. Housekeeping~~

    • Take a look at the Topics Presentations. I moved a few dates and subjects around. A few people did not choose a subject–can you do that today? If not, I will assign a topic.
    • Does anybody want a Figma demo?
  3. In groups, talk about the webzine project: Groups here. Goals for today:
    • What is the overall concept for your webzine? I'm curious about the content and the audience. Can you find at least 10 pieces of content?
    • Of the pages you've made so far, which version feels most interesting to you? I'm curious how the design choices relate to content and audience. How might you expand and apply this design language to the whole collection?

For next week

  1. Coding: Read CSS animations + transitions
  2. Project 1: complete Level 6. Also, start to collect a few more entries in your zine–the finished project should have at least ten pages.
  3. Exercise: Ambient website
  4. Find two websites with unusual hover states or animations, and add that to Are.na
  5. Read or listen to HTML energy: Neta Bomani & Ritu Ghiya

5

February 15

February 15

In class

  1. Brainstorm: Website as...
  2. Share Ambient websites.
  3. Look through Hover states.
  4. Media queries and responsive design
    Ane then Exercise: Website as...
  5. Second half of class

For next week

  1. Finish Exercise: Website as...
  2. Coding: Read Responsive design & Media Queries
  3. Project 1: Finish levels 7 and 8. Next week we'll talk about Navigation. Heads up... this project should be complete March 7.
  4. Research: Find two websites with interesting navigation, and add those to our Are.na channel.
  5. Read Jill Lepore: Can the Internet be Archived?
  6. Topic presentation #1: Uri

6

February 22

February 22

In class

  1. Navigation: in groups
    • Review examples of navigation on Are.na. Pick a website to share with the class. I'm curious to know: how do you move through the site? Is there more than one way to navigate?
    • Then, share progress on your webzine. How did you think about navigation in this project?
  2. Topic presentation #1: Uri
  3. Break
    • Add a link to your "Website as..." page to this doc.
    • Add any HTML/CSS questions you have to this doc.
  4. Javascript intro: Enzo Mari remix
  5. A few 1-1 meetings: Sign up here

For next week

  1. Finish Exercise: Enzo Mari remix––Make some changes to the sample code. See slides 19-20 for some ideas about what to change.
  2. Class homepage––If you haven't already, make yourself a class homepage with links to each project and exercise. We're going to use this in the Webzine reveiw.
  3. Coding––Read JS1: basics
  4. Project 1: Webzine––Keep refining the webzine. This is due in two weeks, March 7.
  5. Read or check out
  6. Topic presentation #2: Philomena Wu
  7. Topic presentation #3: Gabby Uy & Cleo Maloney

7

February 29

February 29

In class

  1. Anybody need help getting their website on Github pages?
  2. Kickoff: Project 2
  3. If time... Share Enzo Mari Remix and Website as exercise
  4. Meetings
  5. Topic presentation #2: Philomena Wu
  6. Topic presentation #3: Malia Kuo & Alana Liu & Karen Lin

For next week

  1. Finish Project 1: Webzine– We'll critique this project next week.
  2. Reading– Read/watch at least one of the following
  3. Coding– Read JS 2: Functions & how to call them
  4. Topic presentation #4: Gabby Uy & Cleo Maloney
  5. Topic presentation #5: Gabriella N. Báez

8

March 7

March 7

In class

  1. Fill out the mid-semester feedback survey
  2. Lecture by Harsh Patel at 6pm today in the atrium
  3. Topic presentation: Gabriella N. Báez
  4. Guest lecture: Neta Bomani
  5. Review Project 1: Webzine

    There is not enough time to discuss everybody's webzine in class. For those whose work we don't review: I will give written feedback to you over spring break, and organize a way to share your work when we return. We'll have another guest for the last class, 4/25: Tommy Martinez. Anybody who did not share their webzine in class on March 7 will have priority during the second critique at the end of the semester.

    If you wish to state a preference for today's review, please sign up here. This is optional, and it does not guarantee a slot. I will choose randomly from this list during class. In the case that not enough people sign up for today's class, I will choose randomly from the full class roster. In other words, I expect everybody to be prepared to present, but I also want to prioritize anybody with a preference.

For next class

  1. Project 2: Tool for One – Come up with a proposal for this project. Your proposal should include:
    • The person you are going to make this tool for
    • Three sketches that illustrate your idea. You could design three different pages of your website, three different states, propose three different visual skins, or.... something else? Bring something to look at!
    • At least two references: websites or other artist projects that are inspirations for you. Could be a conceptual inspiration, a visual inspiration, a website that is functionally similar to what you want to make, or that has a component that is similar to what you imagine, etc...
  2. Topic presentation: Chris Cole
  3. Topic presentation: Evan Kirkiles
  4. Read/get familiar with the following before the presentations:

9

March 28

March 28

In class

  1. Looking ahead (10min)
    • Expanded office hours
    • Meetings to discuss P2 will be every-other week: Groups here.
      If you are in Group 2, we'll meet in class next week. Email me your proposal for Project 2 today.
    • Open studios April 13-14. Should we present webzines?
  2. Topic presentations: Chris Cole & Evan Kirkiles (60min)
  3. Show and tell: Webzine (45min)
  4. Group 1: proposals (120min)

For next week

  1. Coding: Keyboard Instrument
  2. Project 2: Tool for One.

    For next class, start working on a detailed spec and rough draft of your tool. Bring the following to class:

    • A detailed, written description of your tool's behavior.
    • A visual design for each page or state of your tool.
    • A prototype, in code, of at least one aspect of your project. This could be a test of the single most important interaction. It could be a single page coded in HTML and CSS. Identify the most challenging aspect of your project and start working on its functionality.
  3. Topic presentations: Hongting, Xiwen Zhang, Becca Cheng & Cierra
    4. Read/get familiar with the following:

10

April 4

April 4

In class

  1. Topic presentations
    • Hongting Zhu & Xiwen Zhang & Becca Cheng
    • Cierra Peters
  2. Share Keyboard instrument
  3. Group meetings: Project 2

For next week

  1. Topic presentation: Hasti
  2. Topic presentation: Gabby Uy & Cleo Maloney
  3. Project 2

    For next class, make a rough draft of your project. This should include:

    • A coded, working prototype. At this stage, functionality is more important than visual style.
    • If there's a piece that you can't figure out technically, make a visual sketch, and we can talk about how to implement that.
  4. Coding: Input/Output

11

April 11

April 11

In class

  1. Guest: Jacob Hoving will share his work
  2. Topic presentation: Hasti
  3. Topic presentation: Gabby Uy & Cleo Maloney
  4. Share: Input/Output exercise
  5. Dynamic websites and APIs
  6. Optional 1-1 meetings: Sign up here.

For next week

  1. Topic presentation: Jaamal Benjamin
  2. Topic presentation: Cierra Peters
  3. Topic presentation: Richard Corrente
  4. Exercise: Google Sheets as CMS
  5. Project 2

    For next class, make working draft of your project.

    We have two weeks before the review. The goal for next week is to get the functionality built so you have one more week to test, make changes, and polish the design.

12

April 18

April 18

In class

  1. Topic presentation: Jaamal Benjamin
  2. Topic presentation: Cierra Peters
  3. Topic presentation: Richard Corrente
  4. 1-1 meetings: Sign up here

For next week

  1. Finish project 2

    We'll have a critique with guest Tommy Martinez, who's coming to New Haven.

    If you are late to class, we will not critique your project.

13

April 25

April 25

In class

  1. Project 2 review with Tommy Martinez. Schedule here.

Due May 1, 5pm

  1. Finish your class website. Your site should include links to the following.
    1. Project 1: Webzine
    2. Project 2: Tool
    3. Project 3: Topic presentation PDF
    4. Exercises:
      1. Ambient Website
      2. Website As...
      3. Enzo Mari Remix
      4. Keyboard Instrument
      5. Input/Output
      6. Google Sheet as CMS

Software for People