Web Docs, Monday 2:10pm-5pm, Ricardo Miranda

Office Hours: M 5:30-7PM, Tu 10AM-12PM @ (347)450-1677

This production course explores how activists and artists employ the web browser as a platform for social engagement and as a creative medium. The course employs popular code-based techniques for web production including HTML, CSS, and JavaScript to present a clear understanding of how they interrelate to produce creative web content. Documentary-related media forms will be generated (including research, photography, audio and video content) to consider creative and documentary processes for web dissemination. Throughout the semester readings relating to internet history and critical analysis, net culture, and net art will be required.

Due to COVID-19, this course is entirely online. The first half of each class will be live demonstration and discussion. The second half of each class may be asynchronious - I will remain online, available to work with students individually or in groups. Students may elect to log off and work independently.

Students who participate in this class with their camera on or use a profile image are agreeing to have their video or image recorded solely for the purpose of creating a record for students enrolled in the class to refer to, including those enrolled students who are unable to attend live. If you are unwilling to consent to have your profile or video image recorded, be sure to keep your camera off and do not use a profile image. Likewise, students who un-mute during class and participate orally are agreeing to have their voices recorded. If you are not willing to consent to have your voice recorded during class, you will need to keep your mute button activated and communicate exclusively using the "chat" feature, which allows students to type questions and comments live.

Expected Learning Outcomes:

  1. Create media-rich websites with a text editor
  2. Compose pseudocode to think through problems and create site maps and wireframes to map out project development
  3. Apply JavaScript libraries and API’s for web development
  4. Apply design concepts with CSS, HTML and JavaScript
  5. Distinguish important characteristics of the browser as a creative and documentary medium

Method of Evaluation:

1. Course Blog and Participation (20% of grade): Using a blog publishing platform such as WordPress or Medium maintain a weekly blog (one entry per week of the session) that relates directly to the course readings. Blog entries should be brief 1-3 paragraphs that disect assigned readings or non-techinical material presented in class.

Reading Partners - read the other person's blog entry and comment:
  Gigi / Sage
  G-man / Crystal
  Chris / Poojith
  Audrey / Dylan
  Jojnsy / Sophia


2. Technical Exercises (60% of grade) will be executed through the semester by following in class demonstrations, online tutorials and assigned readings. These exercises will be essential for learning markup and coding and to successfully complete more complex projects.
  1. Text and image, due 9/14
  2. Audio, image and text, due 9/21
  3. Video, due 10/14
  4. Gathering data, due 10/19
  5. Explicit Interactivity, due 11/2
  6. Brainstorm, Diagram and Mapping, due 11/9

3. Final Project (20% of grade) due 12/14
    Full Project Proposal - Abstract and 1000-2000 Word Description, due 11/16
    For websites and applications hand in Wireframe and Sitemap, 11/16

Course Projects will be evaluated by three components equally: Creativity, Technical Breadth, Professional Presentation. Completed projects should reflect a sense of ambition and dedication toward realization.

Please arrive to class on time. Please do the assigned readings and come to class prepared to share your reflections - active and informed discussion makes the course more interesting for everyone. Active participation to all classes is required.

Materials and Texts

Required Materials:

USB flash drive or external hard drive. BACK UP ALL YOUR WORK!

Required Viewing/Reading:

Required chapters and essays will be provided from the following books:
Net Works: Case Studies in Web Art and Design edited by xtine burrough 2011
The Rise Of the Network Society by Manuel Castells
The Social Media Reader, edited by Michael Mandiberg 2012
Race After Technology, by Ruha Benjamin 2019
Ours To Hack and To Own, edited by Scholz & Schneider 2016
A selection of other short stories, articles and essays from various sources will be provided.

Recommended Viewing/Reading for those new to web production:

Recommended Viewing/Reading for those who wish to develop programming skills:

Other Recommended Texts:

JavaScript for Cats
p5.js Tutorials - JavaScript, HTML, and CSS
DIVE INTO HTML5 by Mark Pilgrim

Hunter Assistance & Policies

Academic Integrity Statement
Academic integrity is a guiding principle of the Hunter College learning community because all students should have the opportunity to learn and perform on a level playing field. Academic dishonesty includes, but is not limited to, cheating, plagiarism, obtaining an unfair advantage, and falsifying records or documents whether intentional or not.
Hunter College upholds the right to promote academic integrity on its campus as an educational institution of the City University of New York. The College has the responsibility to review all charges of academic dishonesty and implement sanctions, including, but not limited to, failing the course, official transcript notation, suspension or expulsion from the College when it has been determined that academic dishonesty did occur..

ADA Statement
In compliance with the American Disability Act of 1990 (ADA) and with Section 504 of the Rehabilitation Act of 1973, Hunter College is committed to ensuring educational parity and accommodations for all students with documented disabilities and/or medical conditions. It is recommended that all students with documented disabilities (Emotional, Medical, Physical, and/or Learning) consult the Office of Accessibility located in Room E1124 to secure necessary academic accommodations. For further information and assistance, please call (212) 772-4857 or (212) 650-3230. If you have registered with the Office of Accessibility, please let me know at the start of the term.

Hunter College Policy on Sexual Misconduct
In compliance with the CUNY Policy on Sexual Misconduct, Hunter College reaffirms the prohibition of any sexual misconduct, which includes sexual violence, sexual harassment, and gender-based harassment retaliation against students, employees, or visitors, as well as certain intimate relationships. Students who have experienced any form of sexual violence on or off campus (including CUNY-sponsored trips and events) are entitled to the rights outlined in the Bill of Rights for Hunter College.
a. Sexual Violence: Students are strongly encouraged to immediately report the incident by calling 911, contacting NYPD Special Victims Division Hotline (646-610-7272) or their local police precinct, or contacting the College's Public Safety Office (212-772-4444).
b. All Other Forms of Sexual Misconduct: Students are also encouraged to contact the College's Title IX Campus Coordinator, Dean John Rose (jtrose@hunter.cuny.edu or 212-650-3262) or Colleen Barry (colleen.barry@hunter.cuny.edu or 212-772-4534) and seek complimentary services through the Counseling and Wellness Services Office, Hunter East 1123. CUNY Policy on Sexual Misconduct

Emergency/Crisis Info: A division of Student Affairs Counseling & Wellness Services provides resources aimed at enhancing student quality of life, including crisis counseling. Counseling Services is operating remotely for counseling services at no cost to all Hunter students. You can make an appointment or via email at PersonalCounseling@hunter.cuny.edu.


Course Syllabus

The schedule and course outline is subject to change.

Class 01 - August 31

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:

  • Blog (due next class): Create a CMS website using WordPress or tumblr or SquareSpace, Wix or Drupal... (Please email me your link at least a day before next class.)
  • Blog Entry: Reflections on or more readings
  • Create text and image essay with a minimum of 10 original images. Two options for this assignment:
    a. Create a textual and visual interpretation of the assigned readings
    b. Create a text and photo essay on a social issue of interest, such as living during COVID, Systemic Racism, Politics, Find Your Subject, be creative and inspired consider the framing of your images...
  • On Friday September 11th, zip your working web-ready files with a classmate, by Monday September 14th rework (remix) the received web files by adding or replacing images or text or any of the content generated by the classmate. Post to your server space.

NOTE: HTML5 does not require the forward slash for empty elements. For example <br /> is simply <br> in HTML5. The same goes for meta, img, hr... Use of foward slash to close empty tags follows XML rules and is used by frameworks such as React.


Class 02 - September 14

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:

  • Blog Entry: Reflections on "As We May Think"
  • Create a header image for your course index page (not the blog). Export the header image for the web using Photoshop at the following widths: 1280, 960, 480. Use either the picture tag or the img tag & srcset & sizes
  • Create a work that combines - audio, image and text. Feel free to rework the demonstration files or discard them. Due next week. Optional - did you enjoy remixing a classmates work, invite to a classmate to do so again, try someone new.

Class 03 - September 21

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:
  • Using the template created in class - create one or more videos accompanied by textual explanation as webvtt. The video may be aesthetically or conceptually informed by the week 1 photo essay or a work inspired by assigned reading (how is technology affecting human behavior) or follow your own inspiration. Technical challenges: style .vtt; create a video playlist; employ videojs.
  • Inspiration: Weather Diary 1 by George Kuchar, 1986; Dina Kelberman

Class 04 - September 29

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:
  • from Learning Web Design: Part III: ch. 11 through 13
  • OR
  • CSS Essential Training 1
    1. Getting Started
    2. CSS Core
    3. Typography

Assignment:
  • Continue video series with VTT

Class 05 - October 5

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:

Class 06 - October 14 (WED)

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:
  • Blog Entry: Reading reflection
  • Read introductions to css grid linked at the bottom of CSS Grid intro
  • Continue Gathering Data exercise (try CSS Grid layout)

Class 07 - October 19

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:
  • Blog Entry: Reading Reflections
  • Explicit Interactivity

Class 08 - October 26

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:
  • Blog Entry: Reading reflection
  • Work on Explicit Interactivity Exercise, due 11/2
  • Brainstorm, Diagram and Mapping (begin thinking about final project)

Class 09 - November 2

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:

Class 10 - November 9

Due by Next Class

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:
  • Blog Entry: Reading Reflections

Class 11 - November 16

Due by Next Week

Analytical Reading/Viewing: Technical Reading/Viewing:

Assignment:
  • Blog Entry: Reading reflection
  • Work on Final Projects

Class 12 - November 23

Due by Next Week

Analytical Reading/Viewing: Technical Reading/Viewing:

Class 13 - November 30

Due by Next Week


Assignment:
  • Blog Entry: Reflections on semester-long readings - are there particular readings that you enjoyed, are there common themes that you found in the readings, were you already familiar with these themes?

Class 14 - December 7

  • Meet as a class for project feedback/updates. Possibly the presentation of a completed project or two.
  • Like using the web, food for thought - ReactJS Roadmap for Developers

Final Crit - December 14

  • Final Project Crits. Have your final site online and clearly linked from your class homepage. Everyone must be paying attention to one another, put away your phones, get off the screen and focus on the presenter.
  • Please take a few minutes to evaluate the class: Teacher Evaluation