ART 3001

Internet Art

OSU Art & Technology

Spring 2021

January 11- April 23

Syllabus

Class Sessions

Tuesdays & Thursdays 11:10AM -1:55AM EST

Remote Delivery Method

Located on ~*~The Internet~*~

Zoom Link | Passcode: 3001

Class Discord Server

Printable Syllabus Here

Recorded Lectures

Instructors

Dalena Tran + + Hirad Sab

tran.878@osu.edu + + sab.1@osu.edu

Office hours by appointment

Description

This studio course introduces students to the World Wide Web. We will explore creative, technical, and critical tools to realize web-based projects. This course is focused on gaining a deeper understanding of the Internet as a medium & platform for creative expression—where did it come from, how does it work, how do you make things for it, and what do you want to say?


Technical workshops on HTML, CSS, JavaScript, and web design support the development of a series of studio projects utilizing a variety of network tools. These projects are framed by seminar-style discussions examining the cultural, social, political, and philosophical implications of the Internet. We’ll consider the roles of race, gender, sexuality, disability, class, and influence within an increasingly networked world, and strategies of response as artists, designers, & technologists.


***The backbone of this website and the curriculum was made possible thanks to Lauren Lee McCarthy

Format & Delivery

Within the current paradigm of physical distancing, this course will be taught entirely online—across the world wide web. This is a process-oriented studio. It is comprised of assignments (exercises, & projects), participatory activities (workshops/exercises & presentations), individual and group discussions, and reviews. Synchronous Zoom and Mozilla Hubs meetings are used to introduce assignments, view screenings, have group critique and discussions, and most importantly do workshops together. The workshops done in class work towards exercises assigned in the course. Students are expected to complete weekly tasks, readings and responses, and Projects asychronously unless it is an open-studio day or unless otherwise noted in the schedule.

Discussions

We will have eight discussions during the quarter. Each week, you are required to read/watch/listen to at least one of the posted media in advance. In addition, each person will be responsible for leading one 30 minute discussion, along with 1-2 other people. You can sign up for your preferred discussion week by posted to DISCUSSIONS ⇒ #init with your top three choices. We will assign based on order received. Your group and discussion assignments can be viewed in the discussion spreadsheet. We will take the liberty of assigning you to a discussion group if you fail to sign up in time.


For the discussion you lead:

  • Consume all posted media
  • Prepare a few slides to focus the discussion. Include key points from the media, and a couple relevant external references or examples. These examples might be artworks, news articles, websites quotes, videos, etc.
  • Prepare a set of questions to guide the discussion
  • Meet with us during office hours in advance of your discussion to review your questions and plan. Reach out to us on Discord in advance to schedule a time to meet.

Weeklies

As the name suggests, weeklies are due every week throughout the semester (between mon-sun at your convenience). Weeklies include ongoing blog entries and contributions to the class web crawl archive via are.na (more details below). Weeklies help keep you actively engaged with the web as a platform and tool for creative expression and exploration. They are meant to be light-hearted while establishing a working methodology around internet practices.


>>Blog Entry

You will maintain a blog throughout the semester. With the exception of the first week, you will write a blog entry every week that responds to our workshops, exercises, readings, discussions, and/or presentations in our course. Though you do not need to touch on everything that may have occurred during class, you should involve your personal thoughts and reflections for that week. This can also include other things happening in your life that you would like to share on the web. They should be at least 3 paragraphs (~400+ words) but feel free to use your web space creatively. Space out your paragraphs, use line breaks, text transformations, and indents expressively. As we learn how to incorporate styling, interaction, and animations, it will broaden your skills to express yourself through the web. You should incorporate a variety of images, audio, and other media forms if they help you formulate your thoughts on the web. Each entry should be written as an .html page with a title and date. Have a look at Laurel Schulst's ellipsis blog for some inspiration. Submit your link to WEEKLIES ⇒ accordingly


>>Web Crawl Archive

We will create a database of websites as a class and we will continue contributing to this database throughout the rest of the semester. Join our are.na group (sign-up for an account if you haven't already). Crawl the web for innovative, creative, or unconventional websites in their interaction, structure, design, purpose, philosophy, or context. Find 10 websites to begin this exercise (week 2). Add each link as a new block in our Web Crawl Archive channel on are.na. In the block's description, give a two+ sentence statement as to why you chose the website and why you think it is innovative, creative, or unconventional. Each week, you should add to the channel by contributing 2+ links & a correlating description. This process and collection will serve as a resource and to broaden our scope and diversify the ways we envision the web as both a medium and platform. Below are some existing are.na channels to begin your search. Interact with a handful of websites before selecting and post only ones that are not already in our archive.

Start Here

ONE ∴ TWO ∴ THREE ∴ FOUR ∴ FIVE ∴ SIX ∴ SEVEN ∴ EIGHT ∴ NINE ∴ TEN

Workshops & Exercises

Workshops and Exercises in class go hand-in-hand. As long as you are present and participating in the class workshops, you should be able to complete each exercise without much time spent outside of class. That means you need to gain access to a second screen to follow along fluidly. Exercises are either completed in one class session or over the course of several workshop class sessions. See the schedule for more information on when workshops are and when exercises are due.

Projects

You will complete two projects in this course. Projects are due at the start of class on the date assigned. Projects may be turned in up to one week late for a one letter grade deduction off the project grade. Work that is more than one week late will not be accepted. If you are absent, you are still expected to turn in projects online by the deadline. Extra time will not be given for work lost due to save issues, software errors, computer crash, etc. You should regularly backup your files on your desktop, online, and/or on an external hard drive or USB stick in case your computer is lost.

Grading

Percentage breakdown is as follows:

Your work will be assessed according to your overall enthusiasm: The amount of time, effort, and thought you contribute to the course; your willingness to explore, take risks, and expand into a new range of experiences; attention to quality of ideas and quality in execution of your ideas; critical thought; skills in craft according to assignment objectives; an understanding of materials presented in class and an ability to relate course materials to discussions, assignments, and your own art practice.

Exercises

Exercise 0: Git Init

Create a git repo that will house the exercises & projects from this class. Display it using GitHub Pages. Submission should include:

  • An index.html that will be your homepage/landing page
  • A title on your page (you can change it later)
  • Using the sitemap we create in our workshop, create a directory structure of html pages that correspond to the Exercises, Projects, & Blog entries we will complete throughout the semester. They should each be titled appropriately.
  • Hyperlinks of each html page listed on your homepage (index.html)
Submit your GitHub Pages link to EXERCISES ⇒ #exercise-0

Resources

What is git?
Github Pages

Exercise 1: Hypertext

Create an interactive hypertext narrative that reveals something about yourself or an experience you've had. It could be a story about yourself, a journey through a topic you're interested in, a mode of navigation that mimics your personality, etc. There should be multiple HTML pages linked together by <a> tags. Each page could contain text and/or images. No styling. Limit your focus to story and interaction.
Submit your link to EXERCISES ⇒ #exercise-1 &

Inspiration

With Those We Love Alive by Porpentine Charity Heartscape ∴ What Time is it Here? by Dalena Tran ∴ http://wwwwwwwww.jodi.org/ ∴ Woman as Place by Angela Washko ∴ Hypertext Gardens ∴ https://umhi.xyz/ ∴ Komron Khojayori ∴ Experiments in Hypertext Thinking by Tom Critchlow ∴ Headgear.pw by Shiraz Gallab & Becca Abbe∴ Cat Petting Simulator by neongrey∴ The Uncle Who Works for Nintendo by Michael Lutz and Kimberly Parker∴ Queers at the End of the World by anna anthropy

Exercise 2: 5 variations

Choose a poem. Using HTML/CSS, give the poem 5 distinct variations.
Submit your links to EXERCISES ⇒ #exercise-2

Inspiration

Theresa Castellucci ∴ Cameron's World ∴ Claire Busby ∴ Komron Khojayori ∴ Aamina Palmer ∴ Tyler Scott

Exercise 3: Project 1 Proposal & Design

You will create a proposal for your upcoming Project 1.


Your proposal should include a mockup. You can sketch it out on paper, in photoshop, using figma, or in any format, software, or process you like. (If you're feeling adventurous, you may even design and prototype directly in HTML/CSS)


Include references to websites that you may have found during your web crawl from the previous exercise. Include a mood board of images, colors, and other relevant material to organize your creative thoughts. See the project description for some inspiration!
Submit as a PDF (or link) to EXERCISES ⇒ #exercise-3

Exercise 4: Community Contact

Create a homepage for a community. It can be for a community that you're involved with, one that you admire, or a fictional community. For instance, a site for a colony of robots that lives on the moon, a nonprofit organization of your choice, or a site for an OSU student group that you're a member of or would like to start. You can imagine that this homepage is part of a larger website, but the links don't needed to lead anywhere. You can write <a href="#">my link</a> to make a link that goes nowhere.


You can try to recreate layout and interface patterns you've seen online, or be more experimental with your design. In any case, your design should be clearly informed by the content it is representing. Just like with print design, how can you use web design to communicate an idea, identity, and community?


Your design does not need to be responsive, but should work on either a standard laptop monitor or a mobile phone (your choice). When you post your project link, also post a screenshot as it looks on your device for reference. See tutorial on device preview to preview your site for mobile.
Submit your link & screenshot to EXERCISES ⇒ #exercise-4

Inspiration

Megan May Daalder ∴ Ai Weiwei, Humanity ∴ Planned Parenthood, Unstoppable ∴ Machine Project ∴ Yung Jake ∴ Petra Cortright ∴ Martine Syms ∴ David Horvitz ∴ Rosa Menkman ∴

Exercise 5: Transformation

Create an webpage that transforms between two distinct perspectives or identities through the user's interaction with it. "Identity" could mean aspects of a personality, political perspectives, moods, cultural backgrounds, or anything else. "User interaction" could encompass click, hover, mouseout (leaving element), doubleclick, keypress, window resize, scroll, or anything else. Basically, your page should start in one mode, and look very different during or after user interaction. It is suggested that you make use of JQuery events and JQuery events, though not all of these will be applicable.

Submit your link to EXERCISES ⇒ #exercise-5

Exercise 6: Explore + Final Project Proposal

This project is about beginning to think about your final project and teaching yourself something new. First, think about some possible ideas for your final project. What new skills might you want to learn to complete this? For example, are you interested in working with scrolling, hovering, 3D graphics, sound, or something else?


Your goal is to learn and explore a new library, web or coding tool, and use it to make a sketch or prototype of something you may want to incorporate into your final project. Begin by scanning through the documentation.

See the project description for some project inspiration!

Submit your PDF document to EXERCISES ⇒ #exercise-6

List of Libraries

p5.js ∴ paper.js ∴ three.js ∴ ml5.js ∴ joy.js ∴ howler.js ∴ tone.js ∴ jquery ui ∴ two.js ∴ d3.js ∴ hover ∴ typed js ∴ anime.js ∴ matter.js ∴ chart.js ∴ scrollreveal ∴ choreographer.js ∴ bindery.js

List of Web, Story, & Game Tools

Twine ∴ LÖVE ∴ Ren'Py ∴ HaxeFlixel ∴ Godot Engine ∴ Luxe Engine ∴ Phaser.io ∴ Pixelbox.js ∴ nCine ∴ Superpowers ∴

Project 1: Class Portfolio

Description

Building off of Exercise 0: git init, you will use HTML/CSS/JS to create your own homepage that will contain links to your exercises, projects, and any other media/materials you so choose. Think about how users will be introduced to the content on your site and how they will navigate between the various pages your website should contain. Let your portfolio speak to who you are or what you would like to represent. Add text, images, sound, and interactions.

Submit the link to your live project to PROJECTS ⇒ #project-1

Inspiration

Emilie Gervais ∴ Cameron's World ∴ cyber nymph garden by alex lucia ∴ Claire ∴ Karina Lopez ∴ Brian Yung ∴ Chris Kim ∴ Stefanie Tam ∴ Rosa Menkman ∴ Martine Syms ∴ Petra Cortright ∴ Primordial Futures ∴ Like Pearls ∴

Final Project

Description

Use exercises 1 / 2 / 4 / 5 / 6 as a prototype for your final project. Continue the work and ideas that you created for one of these projects. Expand the idea beyond the original one-week project into a project that can be completed for the final review.


You should document your final project with a web page that contains:

  • text description as a PDF
  • link to code and/or live project
  • a short video OR a series of images/screen captures OR some combination of video and image

Submit the documentation to this box folder & share the link to live project to PROJECTS ⇒ #project-2

Inspiration

ASCII ∴ Torrents of Sex by Nahee (warning: graphic content) ∴ The Station by Vi Trinh ∴ Ghost City by Jody Zellen ∴ broider by Max Bittker ∴ https://excellent-quarantine-ideas.com/ ∴ https://www.rothko.me/ ∴ Super Uplifting Friendship Simulator ∴ https://www.oursoftesthour.com/clarice-ng ∴ Later Date ∴ Gestural Notation by Karina Lopez ∴

Semester-Long Projects

Description

For repeating students who are pursuing a semester-long project only. Please reach out on Discord to us by the third week of class with a web-based proposal & a set of deliverables to accomplish by the end of the semester

Discussions

We will have eight discussions during the quarter. For each of these weeks, you are required to read/watch/listen to at least one of the posted media in advace. In addition, each person will be responsible for leading one 30 minute discussion, along with 1-2 other people. You can sign up for your preferred discussion week by posted to DISCUSSIONS ⇒ #init with your top three choices. We will assign based on order received. Your group and discussion assignments can be viewed in the discussion spreadsheet. We will take the liberty of assigning you to a discussion group if you fail to sign up in time.


For the discussion you lead:

  • Consume all posted media
  • Prepare a few slides to focus the discussion. Include key points from the media, and a couple relevant external references or examples. These examples might be artworks, news articles, websites quotes, videos, etc.
  • Prepare a set of questions to guide the discussion
  • DM Hirad & Dalena to schedule a 15 minute meeting in advance of your discussion to review your questions and plan.

Discussion 1: World Wide What? (1/21)

Leaders: Sydney, Hirad, & Dalena

Discussion 2: Interface (1/28)

Leaders: Christian, Zehur, & Madalyn

Discussion 3: Identity Online (2/4)

Leaders: Nataly, Aurora, & Trinity

Discussion 4: Crowds, Labor, & The Gig Economy (3/4)

Leaders: Sara & Madison

Discussion 5: Data (3/11)

Leaders: Richard, Heesoo, & Gary

Discussion 6: Memes, Fake News, & Virality (3/18)

Leaders: Zach M, Marina, Jupiter, & Zach U

Discussion 7: Imagined Communities (3/25)

Leaders: Kendall, Lucia, & Lilly

Student Works

To view student works, click the links below or visit the class website @ dalena.github.io/art3001

∴ Madalyn Bunjevac ∴ Marina Demopolis ∴ Zehur Elmi ∴Sydney Kit ∴ Richard Giang ∴ Christian Harris ∴ Gary Isufi ∴ Heesoo Lee ∴ Kendall Mabee ∴ Aurora Marcoux ∴ Zachary Merchant ∴ Sara Miskus ∴ Jupiter Parrish ∴ Lucia Perfumo ∴ Lilly Rakas ∴ Trinity Reeves ∴ Madison Shimborske ∴ Zachary Upperman

Schedule

Exercises
Discussions
Projects
weeklies
Week Date Program
1 1/12

Hello, World!

  • Claim Forms + Distanced Learning Survey
  • Syllabus Overview
  • Logistics & Communication
  • Software & Accounts
⟢❖⟡ Due in Class ⟡❖⟣
1/14
  • Individual Presentation (in class 1/14): Create a 5 minute presentation about yourself. On the first slide, include your full name, an image of your Mozilla hubs avatar, and discord username (i.e. @dalena). This presentation should include previous works you've created and how you want to move forward in your art practice or career. Feel free to include some of your interests, hobbies, and/or inspirations. Just keep in mind you have 5 minutes Bonus: A slide on what you look forward to most when the pandemic is over. Your presentations must be made with Google Slides. Make sure it is publicly avaiable.
    Submit the public link of your presentation to the Discord server: EXERCISES ⇒ #presentations
  • Discussions Preferences (due 1/16) Submit to DISCUSSIONS ⇒ #init
2 1/19
  • Workshop: Intro Git, VSCode, & HTML
Exercise 0: git init (due 1/21)
1/21
  • Workshop: HTML
Discussion 1: World Wide What?
weekly a: Blog Entry & 10 are.na additions
3 1/26
  • Workshop: HTML Divs, Span, & Inspector
1/28
  • Workshop: Intro to CSS Layout/Flexbox/Grid
Discussion 2: Interface
Exercise 1: Hypertext (due 1/31) Exercise 2: 5 Variations (due 1/31)
weekly b: Blog Entry & 2 are.na additions
4 2/2
  • Presentation: Previous student projects
  • Project 1 Overview
2/4 Discussion 3: Identity Online
Exercise 3: Project 1 Proposal (due 2/7)
weekly c: Blog Entry & 2 are.na additions
5 2/9
  • Project 1 Proposals Presentation
  • Workshop: Javascript/JQuery
    		•
    2/11

    Studio Time

    weekly d: Blog Entry & 2 are.na additions
    6 2/16
  • Workshop: Javascript Libraries
    		•
    2/18

    Studio Time

    weekly e: Blog Entry & 2 are.na additions
    7 2/23

    NO CLASS - INSTRUCTIONAL BREAK

    2/25

    Studio Time

    weekly f: Blog Entry & 2 are.na additions
    8 3/2 Project 1 Due
    • Project 1 Presentations & Discussion
    • Exercise 4 Overview
    3/4 Discussion 4: Crowds, Labor, & The Gig Economy
    weekly g: Blog Entry & 2 are.na additions
    9 3/9
    • Workshop & Studio Time
    3/11 Discussion 5: Data
    Exercise 4 Checkpoint (due 3/14)
    Exercise 5 Checkpoint (due 3/14)
    weekly h: Blog Entry & 2 are.na additions
    10 3/16
    • Exercise 5 Overview
    • Watch Party during class: "Feels Good Man" (2020) dir. Arthur Jones
    3/18 Discussion 6: Memes, Fake News, & Virality
    Exercise 4 Checkpoint (due 3/21)
    Exercise 5 Checkpoint (due 3/21)
    weekly i: Blog Entry & 2 are.na additions
    11 3/23
    • Workshop & Studio Time
    3/25 Discussion 7: Imagined Communities & Mutal Aid
    Exercise 4: Community Contact (due 3/28)
    Exercise 5: Transformation (due 3/28)
    weekly j: Blog Entry & 2 are.na additions
    12 3/30

    CLASS OPTIONAL/ STUDIO TIME
    4/1

    NO CLASS - INSTRUCTIONAL BREAK

    weekly k: Blog Entry & 2 are.na additions
    13 4/6
    • Workshop: Hacking @ Code and web-based tools (Twine & RenPy)
    4/8 Exercise 6: Explore + Final Project Proposal (due 4/11)
    weekly l: Blog Entry & 2 are.na additions
    14 4/13

    Studio Time
    4/15

    Studio Time

    weekly m: Blog Entry & 2 are.na additions
    15 4/20 Project 2 Due
    Semester-Long Project Due
    4/22 weekly n: Blog Entry & 2 are.na additions