NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {dh}
Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu) Creative Commons License Last modified: Thursday, 12-Sep-2024 15:47:53 UTC. Powered by firebellies.

Fall 2024 Syllabus (Schedule) Classes meet T H 3:05 - 4:20pm in Kochel 77.

Read the Course Description

This contains a detailed explanation of course policies and the basis for grades.

Jump Down to the Schedule

The button jumps to the closest day to today's date. Review the schedule as we get started to get a sense of how this course will work on a daily basis.

Tools and Resources

Download and install the following software on your own personal computer(s) as we start the course. These software tools are also available in our campus computing labs.

  1. Jetbrain’s Webstorm: code editor optimized for working in JavaScript web development, has free access for students.
  2. <oXygen/>. The DIGIT program has purchased a site license for this software, which is installed in Kochel 77 and the Lilley Library computers. The license also permits students enrolled in the course to install the software on their home computers (for course-related use only). When installing this on your own computers, you will need the license key, which we have posted on our course Announcements section of Canvas.
  3. Zoom: Make sure your Zoom installation is up-to-date, and you are ready to connect. (We will use Zoom when we need it for office/project meetings.)
  4. Slack: https://slack.com/help/articles/218080037-Getting-started-for-new-members). Download and install the Slack chat client, configuring your account to use use your Penn State email address (the official address, which looks like xyz123@psu.edu, and not an alias based on your name that you may have set up), so you can join our Slack workspace: DIGIT-coders. When you receive an invitation to join this workspace you should accept.
  5. Be prepared to install other software as announced as we experiment with website infrastructures in this class
Resources for class:
Week 1Class topicsDo before class

T 08-27
  • First Day! Welcome and introduction to the course.
  • Overview of the kinds of projects (including Open Lab projects) that we’ll be working on and the first assignment on POUR principles.
  • Jetbrains Webstorm installation check in K-77.
  • Join the DIGIT 400 class Hypothes.is group (link posted in Canvas).
  • Introduce the first assignment on POUR principles.
  • Feature: Clay Shirky on Love, Internet Style on what lasts and matters in project design.

H 08-29

 POUR and user-experience (UX) design in-class discussion. Read and annotate with Hypothes.is WebAIM’s Constructing a POUR Website. Review a past student project and post your notes in the Canvas discussion, for a past project website (yours or anothers). This is meant to be educational! We produce semester projects in a rush and they provide good starting points for review and new development! What could be done to make a site better conform to POUR principles?
Week 2Class topicsDo before class

T 09-03

 Preparation for Open Lab Project: Workshop with Wireframing Technologies: Miro, Mural, and more Discussion assignment previewing wireframing software

H 09-05

 Welcome to our Open Lab partners: Lauren Harrington, MaryJo Ingalls, and Stephanie Krepps from Erie Insurance visit the class and introduce the project. ...
Week 3Class topicsDo before class

T 09-10

 Lauren Harrington returns for more detailed service design project launch. This begins Week 1 of our 5-week period. Dr. B is attending a University Senate meeting. TBD: Site Redesign planning / Career Prep / Open Lab session

H 09-12

 Open Lab prep session for Research unit with the DIGIT 100 class next week Open Lab Project Milestone 1
Week 4Class topicsDo before class

T 09-17
  • Rebecca Maguda from of Behrend Career Services visits: presentation/preparation for the Career Fair.
  • Open Lab project: Preparation of service design research questions for the DIGIT 100 class.
Résumé prep assignment, part 1

H 09-19

 Career Resume Workshop: stage 2
  • Open Lab Project Milestone 2: working with the DIGIT 100 class
  • Résumé prep assignment, part 2: Prepare a resumé for review: paper and digital, paper linked to digital
Week 5Class topicsDo before class

T 09-24
  • Julie Gardner, WebFX recruiter presents and holds Q and A
  • Career Fair preparation
 ...

H 09-26

 Class attends Fall Career and Internship Fair ...
Week 6Class topicsDo before class

T 10-01

 Open Lab Project Development Open Lab Project Milestone 3

H 10-03

 Open Lab Project Development Open Lab Project Milestone
Week 7Class topicsDo before class

T 10-08

 Erie Insurance team returns to review and offer guidance on Open Lab Projects underway, with Prof. Hartung. Dr. B is attending the TEI Conference in Buenos Aires this week Open Lab project develpment

H 10-10

 Open Lab project: Preparation to present next week Open Lab Project Milestone 4
Week 8Class topicsDo before class

T 10-15

 Open Lab Milestone 5: Presentation day 1 for Dr. B and Open Lab Erie Insurance representatives Teams prepare presentations of Open Lab projects

H 10-17

 Open Lab Milestone 5: Presentation day 2 for Dr. B and Open Lab Erie Insurance representatives Teams prepare presentations of Open Lab projects.
Week 9Class topicsDo before class

T 10-22
  • Introduce next design project unit: JavaScript with Node.js and Eleventy. Set up Jetbrains Webstorm.
  • Orientation to vanilla JavaScript. Newtfire introductory examples: Small JS files that work with HTML and CSS to control simple user interactions.
  • Event listeners and functions. How to associate with HTML.
  • Completion of Open Lab Projects for final evaluation
  • Configure Jetbrains Webstorm

H 10-24

 Accessing HTML elements in the DOM. for and this in JavaScript. classList toggle JavaScript Exercise 1
Week 10Class topicsDo before class

T 10-29

 JavaScript interactions with SVG

H 10-31

 SVG, JS, and CSS. Introducing SVG Animations tutorial JavaScript Exercise 3: with SVG and CSS
Week 11Class topicsDo before class

T 11-05

 Election Day: Asynchronous Class
Node.js and things you can do with JavaScript libraries

H 11-07

 Node orientation project: Node with Three.JS for 3D animations in the browser Mia's SVG Animation Exercise: Apply SVG Animations tutorial to your own designs
Week 12Class topicsDo before class

T 11-12

 Introduce React/Tic Tac Toe tutorial(?) or go straight to Eleventy: options for adapting existing projects Complete Three.JS project

H 11-14
  • How to write web components, working with React and Eleventy
  • Project redesign options
 [?] Work through React.JS Quick Start and Tic-Tac-Toe tutorials
Week 13Class topicsDo before class

T 11-19

 Dr. B is attending a University Senate meeting. Web components / Eleventy structural prep assignment due

H 11-21

 Experimental development workflow: Pulling / processing data/images. Packaging data for React components. Data exploration and packaging assignment
Week 14 Class topics Do before class

Sun 11-24 to Sat 11-30

 Thanksgiving Holiday Have a peaceful and productive week!
Week 15Class topicsDo before class

T 12-03

 Project development debugging Project Milestone: JS Frameworks

H 12-05

 Interactivity / navigation / search features for project sites Project sprint milestone
Week 16Class topicsDo before class

T 12-10

 Document the project workflow. Accessible Design check. Preparing to present the revamped project! ...

H 12-12

 Last Day! Prep for DIGIT Works Presentations (slated December 13) ...

H 12-19

 Final assignment: due by 11:59pm