Agenda

Topics

• Introductions
• Class Overview
• Slides: Hello & Welcome
• Software Setup
• Slides: (Mostly) Gestalt Principles

Exercises

• Fill out the start of term survey if you haven't already.
• Sketchbook: Collect, Curate, Design
  1. Collect 30 artefacts, physical or digital. Take photos of them if physical.
  2. Choose 10. Write about your selection process. You won't submit the writing, but you will discuss.
  3. Sketch 5 different ways of presenting these 10 artefacts.

Readings

• Perspectives: Negotiating the Archive, Sue Breakell
• What Is Code?, Paul Ford

Topics

• Housekeeping & QotD
• Reading Discussion
• Exercise Pair Share
• HTML
• In-Class Exercise
• CSS Syntax

Exercises

• Complete your Wikipedia page from class. Submit here.
• Begin conceptualizing / thinking about your Project 1: Digital Translation (due Week 6, Feb 27).

Readings

• Diagrammatic Writing, Johanna Drucker
• Making and Breaking the Grid, Timothy Samara (Introduction Only, pp 1-70). Most of these pages are image-heavy.

Topics

• Housekeeping & QotD
• Exercise & Reading Share
• File Organization
• CSS Syntax Continued
• Box Model
• CSS Sizing

Exercises

Inside your repository for this class, create a folder called layout-exercises. Inside that folder, create three folders, one for each of the following three exercises. Each exercise folder should include one index.html file and one style.css file. Submit a link to your layout-exercises folder.

• #1: Simple Layout: Create a two-column layout where:
  • The left column takes up 30% of the page width.
  • The right column takes up the remaining 70%.
  • Add some text content in each column with some padding for space.
  • Add a background color to each column to visualize the structure.
  • (You may encounter the position property if looking up how to do this, but I ask that you complete this exercise with only sizing and the box model. Try using different display values.)


• #2: Nested Containers
  • Create four nested containers inside each other.
  • The outermost container should span almost the full width of the page (apply some margin).
  • Each subsequent container should be 50% of its parent’s width.
  • Give each container a different background color for visualization.


• #3: Flexbox Rows & Typography Hierarchy
  • Make 4 rows of 5 elements using display: flex
  • Inside each of the 20 elements, add a heading, subtitle, and paragraph.
  • Use a web-safe font for font-family and use the property font-size to assign each element different values, establishing a visual hierarchy.


• Come to class with an idea for your digital translation project, i.e. what is it that you want to digitize and some ideas for how you plan on translating it to a digital interface.

Readings

• None. Instead, Briefly look over Max and Shelby's work before we hear them speak next week. Here is their latest piece on century-scale storage.

Topics

• Housekeeping & QotD
• Review Slides for HTML & CSS (so far)
• display: flex
• display: grid
• The position property
• Brief Project Discussion
• Guest Lecture: Max Neely-Cohen & Shelby Wilson

Exercises

• Complete the CSS Layout Worksheet by making a copy ("forking") the CodePen. Submit your completed worksheet via this form.
• Make progress on your digital translation project. Think through the layout using the properties learned in class. Bring your progress to class.

Topics

• Housekeeping & QotD
• Typography
• Arena — reminder to browse & add
• Work Session & One-on-Ones

Topics

• Housekeeping & QotD
• CSS Wrap Up: Variables, Pseudo-Classes Transitions, & Responsive Design
• Exercise: Make your Digital Translation Project responsive.

Readings

• Read the provided excerpt from Umberto Eco's The Infinity of Lists. Think about the piece in relation to both archiving and programming.
• Read the introduction of Eloquent JavaScript Don't worry about the specific syntax just yet.

Topics

• Housekeeping
• Pair Share: Readings & P1 Debrief
• Are.na Examples
• P2 Introduction
• Introduction to JavaScript
• Basic JavaScript Exercises (Data Types, Variables, Arrays, Random)
• Manipulating the Document Object Model
• (Time Permitting): Listening for Events

Exercises

• Complete the Introduction to JavaScript Worksheet by making a copy of the CodePen.
• Write a one-paragraph idea for your visual collection
• Submit both via this Google Form.

Topics

• Housekeeping & Examples
• Review JavaScript We've Learned So Far
• JavaScript Demos: Repetition, Functions, Objects, Selections, Listeners
• In-Class Exercises

Reading

• Read pages 19-29 (from part of Chapter 1) and pages 137-161 (from part of Chapter 4) from Wendy Chun's Programmed Visions: Software and Memory Take your time with this reading and come prepared to discuss.
• Take a look at Casper Lam's work before his visit next week.

Exercises

• Create a new repository for your Visual Collection. Add a README file outlining the goal of your project.
• Use a spreadsheet (digital or paper) to collect relevant data and metadata you want to explore.
• Using your knowledge of CSS, sketch 3–4 different layout ideas for displaying this information. Your sketches can be on paper or digital.
• Practice applying JavaScript concepts in class (including loops, objects, functions, and events), as we will build on them next week with more complex event behavior.

Topics

• Guest Lecture: Caspar Lam, Synoptic Office
• Group Reading Discussion
• Housekeeping
• JavaScript Review
• JavaScript: Filtering, Sorting, & JSON with Functions & Events

Exercises

• Submit your Visual Collection repository and reflection via this Google Form. Deadline extended to April 8.
• Prepare a five-minute presentation on one of your projects and think about specific questions you have when requesting feedback.

Topics

• Feedback Presentations

Exercises

• Submit your Visual Collection repository and reflection via this Google Form by April 8.

Exercises & Readings

• Read one piece of your choice from Archive Stories. Come prepared to discuss.
• Look through Revolutionary Papers and The Last X Years. What do each of these archives attempt to do differently from others? Do they succeed? Next class, we will talk about what they choose to include and how they present information.
• Choose an API you would like to work with for our in-class exercises. Here is a brief introduction on APIs from a Digital Humanities student perspective, with a few links that should give you some ideas.
• Start thinking about Project 3: This is either a continuation of Project 1 or 2, or a new project of your choosing. I will not require JavaScript for this last project, and you are also free to use an existing platform, like WordPress or Cargo (as long as you insert some custom code).

Topics

• Housekeeping
• Reading Discussion
• README.md & GitHub Pages (Custom Domain)
• JavaScript Review: Working with Data (Nested Objects and Arrays)
• APIs and Promises
• Demos and Exercises: Basic APIs, Working with Google Sheets, Read & Write. Look for pens that begin with "API" and "GoogleSheets."

Exercises & Readings

• Work on Project 3 (to present May 8 May 1, and submit May 13).
• Read: "The Future of Knowledge in the Public" from Safiya Umoja Noble's Algorithms of Oppression.
• Read: "Digital sources and digital archives: historical evidence in the digital age" (Trevor Owen, Thomas Padilla).
• Identify a JavaScript library you would like to explore next class. Some examples: p5.js, Mapbox, Leaflet, Chart.js, Three.js, D3.js, Day.js, Matter.js, Timeline JS, etc. Note: we may not have time for this, but it's still helpful to look at what's available to you.

Topics

• Housekeeping
• Reading Discussion
• Sketch Exercise
• Demos with PapaParse.js, Fuse.js and Vanilla JS Search Look for folders that begin with C_.
• Work Session

Exercises

1. Your data
2. A paper or digital sketch of your expected interface
3. Your development plan (next steps)

Topics

Assignment