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: Friday, 20-Nov-2020 08:22:22 UTC. Powered by firebellies.

Fall 2020 Syllabus (Schedule) Classes meet M W F 10:10 - 11am over Zoom and in Kochel 77. Zoom attendance is required for all students in all class meetings. The classroom is optional, but even in the classroom you will be connecting to Zoom to team up with your classmates. We plan to host Wednesday meetings only in Kochel 77, as long as the class is willing and it is safe. For in-class meetings, we must all wear masks and maintain a safe social distance. Remember: Your mask protects me, my mask protects you.

Read the Course Description

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

Jump Down to the Schedule

This link 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.

All the Tools You Need As We Begin:

Download and install the following software on your own personal computer(s) on or before the first day of class. These software tools are available in our campus computing labs, too.

  1. <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.
  2. Zoom: Make sure your Zoom installation is up-to-date, and you are ready to connect. The Zoom link for our regularly scheduled class meetings is posted in Canvas: Look for the Zoom menu option.
  3. All students require a good means of secure file transfer (SFTP) for homework assignments and projects (also available in the campus computer labs). There are several good options available. We recommend you download and install on your own computers one (or more) of the following, depending on your platform: (Feel free to experiment with these and others!)
    • Windows users: one of the following FTP clients—the functionality is similar:
      • FileZilla (This is our favorite client because it behaves the same way across platforms.)
      • WinSCP (This is one we used for a long time, since the 1990s, but we now use SSH and Filezilla more frequently.)
      • SSH Secure Shell Client
    • Mac users:
    • Linux users: You probably don’t need to install anything, but look at how your system handles secure file transfer (SFTP). (FileZilla or other clients designed for Linux environments.)
  4. Rusty with coding? Don‘t remember anything from DIGIT 110? Don’t worry! Past students in this course who never saw anything like markup or XML code have designed projects (like these) and even spoken about them at undergraduate conferences! You will learn to develop your own digital tools and how to manage digital projects as teamwork.
Class Web Resources:
Week 1 Topics Do before class

M 08-24

Welcome! Introduction to the course. Clay Shirky on Love, Internet Style and the Ise Shrine (9 minutes) What does an ancient wooden shrine have to do with digital projects? Intro to XML in oXygen and some things we can build with it. Respond to Dr. B's Poll (see Canvas / Penn State email). Find the Zoom link for class (on Canvas / Penn State email).

W 08-26

XML coding: a recipe for Whipt Syllabub. Elements, attributes, comments, escape characters, and "pretty-printing" in <oXygen/>. How file systems recognize XML documents (File extension, and XML declaration line). Introduce XML Exercise 1. Install oXygen XML Editor and add our license key so we can all use this during our meeting today. Read my Introduction to XML and experiment with the code in the tutorial: Can you tell what makes markup well-formed or not?

F 08-28

Complete XML Exercise 1
Week 2 Topics Do before class

M 08-31

Discussion of homework (XML Exercise 2). Introduce the Bash shell and GitHub. Complete XML Exercise 2: Revise the code in your XML Exercise 1 to do the following:
  • Add @xml:id attributes to either equipment or food items (or both), and come up with distinct identifier codes.
  • Look for words in the steps that reference the distinct identifiers and apply new markup with attributes that point to or reference the xml:ids
  • Look for historical details of interest and/or action words to code and reference.
  • Revise the code of the Syllabub recipe to match the new code of your Shrewsbury Cake recipe. Consider putting @xml:ids on the recipe root elements, and pointing to those codes from each recipe when it refers to the other one.
  • Submit your revised Syllabub and Shewsbury Cake recipes on Canvas for XML Exercise 2.

W 09-02

Getting started with command line, git, and GitHub. Mindful file management. Markdown vs. markup in GitHub issues: Hands-on work with our class GitHub repo. Git Exercise 1 (setting up your GitHub account). Watch my video introducing the Bash shell and "home" on your computers and practice the shell commands I am introducing.

F 09-04

Adding cp and mv to the shell commands list. Learning git commands and working at command line (hands-on exercise). Building a code repository for a digital project.
Week 3 Topics Do before class

M 09-07 Labor Day, PSU classes in session anyway!

  • Overlapping Hierarchies: Group Exercise with "Ozymandias."
  • User Experience (UX): Launch discussion.
  • Git Shell Practice (starting today for seven days): Make sure your personal repo and the class repo are properly set up and cloned to your computer. Using your Bash shell, practice some basic git commands to build a habit. On alternating days, push to the other repo (if you pushed to your personal repo today, tomorrow you will pull and push a file to our class repo).
  • Complete XML Exercise 3: Mark up a text of your choice (any genre, manageable but reasonable size, any language). Work on applying attributes with your elements in a careful and systematic way.
  • Review feedback on your coding exercises so far and submit revisions if I asked you to.

W 09-09

Hands-on introduction to schemas with Relax NG: How to write the rules for an XML project

F 09-11

Relax NG: data types, mixed content. Document data modeling.

Watch my video on Relax NG and how to write it in oXygen, and complete Relax NG Exercise 1:
  • Make a folder to hold this homework, since it will contain two files. Save the folder using our homework filenaming conventions.
  • Open this ozyMeta.xml file (open the link, and right-click to save on your computer with your homework, then open in oXygen).
  • Open a new Relax-NG Compact syntax file in oXygen, and set your editor in tile view so you can see the ozyMeta.xml file next to your schema file. Delete the code in the Relax NG file so you have a blank slate to start with.
  • Write a Relax NG Schema in Compact Syntax that models the content of this XML file as you study it. (Save the schema in the same directory with your XML file so you can easily find it.)
  • Associate the schema with the XML file (in oXygen go to Document > Schema > Associate Schema, and browse to locate the schema. Click OK and note the new schema line at the top of your XML file.
  • Zip (compress) the file directory holding your XML file and the Relax NG schema file, and submit this on Canvas at the upload point for this assignment.
Review XML syntax and consult the Intro to Relax NG as you work on this, and ask for help on out digitProjectDesign-Hub by opening an issue if you get stuck. Continue GitHub practice!
Week 4 Topics Do before class

M 09-14

Troubleshooting and debugging Relax NG issues. Tour of course projects with strong research questions. Initiate Class GitHub Project Proposals
  • Complete Relax NG Exercise 2: Write a Relax NG schema for one of the XML documents you created for the XML homework assignments (making changes to the XML as you wish). Upload both your XML and your schema file in a zipped (compressed) directory on Canvas.
  • Post in Discussion of student digital projects on digitProjectDesign-Hub

W 09-16

Relax NG and project team management. Work on Relax NG issues. Discuss project ideas, research questions.
  • Complete Relax NG Exercise 3: This time, choose a new text that you haven't marked up before and perform document analysis (study the document's structure and interesting features). Then write a Relax NG schema, mark up the text according to the schema, and upload both your XML and your schema file to Canvas.
  • Post project proposal idea on digitProjectDesign-Hub
    • Beginning from today through F 9-18: Post proposal ideas (each in its own issue) for team projects to work on this semester. Each student should post an idea for the class to consider: a project involving XML markup to be managed within a team of 2-4 students to investigate something we could study and visualize from our markup more effectively with computers than with human reading and description alone. All projects must involve a team of at least two persons, but this first exploratory proposal is an individual assignment.
    • Each student must respond to at least one of the proposed ideas from another student and indicate suggestions or further ideas. You may respond to more than one if you like, and indicate which proposals interest you to work on.
    • Proposal discussions will run until class time on M 9/21 when we will form project teams.

F 09-18

Project ideas and research questions to explore patterns and concepts. Locating your web space using FileZilla. Setting up SSH keys
  • Post / respond to project proposal (now through M 9/21). Each student must respond to at least one proposed idea from another student and indicate suggestions or further ideas.
  • Install FileZilla (or other SFTP client) if you have not done so already: we'll use it in class to find your webspaces! Follow instructions posted on Canvas for setting up SSH keys to access your personal webspace on Newtfire.
Week 5 Topics Do before class

M 09-21

Form project teams! Post a project proposal / respond to another. Each student must respond to at least one proposed idea from another student and indicate suggestions or further ideas.

W 09-23

Review Relax NG: Common issues in homework. Project discussion / initiation time in class.
  • Project Checkpoint 1: Launch the project GitHub repo and invite your teammates and me to join (using Settings > Manage settings). Post in the Issues board of your new project rep your available meeting times to help determine a regular meeting time for your group.

  • Revise and resubmit Relax NG exercises on Canvas if you were asked to do that.

F 09-25

  • Building on the Web: connecting to and finding your web space on a remote web server.
  • Hands-on: Work with FileZilla (or other SFTP client) to connect to the Newtfire web server, and set up SSH key access.
  • What is "index.html" to a web server? Website addresses and file directories on a remote web server.
  • Workflow from GitHub to Website: How to customize SFTP (Filezilla) to work with your GitHub repo.
Read our Introduction to HTML.
Week 6 Topics Do before class

M 09-28

Continue with learning and workshopping HTML / CSS. Develop an index.html page and link to other pages in your web space. Absolute vs. relative links (and file associations). Make a simple CSS page. CSS resemblance and difference from Relax NG (those curly braces). Test / troubleshoot using SSH Keys to access our web server.

W 09-30

  • Working with CSS and HTML for code-based site development.
  • Initiate first take-home test: Relax NG.

F 10-02

HTML and CSS
  • Mindful file management: mirroring directory structures on GitHub and the web server
  • Web browsers and display variations
  • CSS Box Model
  • Introduce Flexboxes (see tutorial)
  • Read and apply Using <span> and @class to style your HTML, and consult our Introduction to Cascading Stylesheets (CSS) to help complete HTML / CSS Exercise 2. (Submit this to personal or project web space).
  • Consult Learn CSS Layout, Flexbox tutorial, and w3 Schools CSS Reference as you code. (Also, check out Paletton (or hunt for other color scheme generators on the web) to help think about choosing a balanced color scheme for your website. Experiment with writing CSS to control font, layout, color, backgrounds.
  • Complete and submit the Relax NG Test
Week 7 Topics Do before class

M 10-05

Slack chat and GitHub project management tools for improving communication, completing tasks. Project web work. Project customizations and boilerplate with Server Side Includes (examples). Decide on project website directory names and URLs. Project Checkpoint 2:
  • Locate all sources for project XML markup
  • Establish a clear flie directory structure on yoru project GitHub, including a distinct directory for website files
  • Make sure all project team members work consistently with the GitHub directory structure (all agree on it, no one changes it without notice)
  • Strong start on a project schema (Relax NG)
  • A good quantity of documentation and/or markup is present in the GitHub repo.

W 10-07

Introducing Regular Expressions and autotagging. Regular patterns in documents. How to start? Read Intro to Regular Expressions

F 10-09

Regular Expressions: thinking algorithmically. Inside-out or outside in. "close-open" strategy. Greedy matching. Work on Regex together.
Week 8 Topics Do before class

M 10-12

Regex: simplifying over-complicated expressions. Selecting for what's not there. Searching over highlighted portions of a document. Regex Exercise 2

W 10-14

Regex: Searching for patterns that include special regex characters. Project review. Issue short Take-home Regex Test (due Monday 10/19).

Repair/complete and resubmit Regex Exercise 1 and Regex Exercise 2 if you were unable to create XML before.

Project Checkpoint 3:

  • Some web development for site; navigation menu, page organization
  • Refined schema
  • XML markup: significantly more progress than the last checkpoint. Everyone's files are working with the project schema

F 10-16

Navigating XML with XPath: Introducing the XPath window in <oXygen/>, functions, axes, path steps /, and predicate filters [ ] Hands-on XPath navigation with Hamlet. Read our Introduction to XPath: Follow the XPath! As you read, try experimenting with the XPath expressions on our page, by downloading the explainXPath.html file, opening it in oXygen, and experimenting in the XPath window with some of our expressions.
Week 9 Topics Do before class

M 10-19

Work on XPath 1 and XPath 2 together. Using XPath axes. Predicate expressions [ ], (grouping).

W 10-21

Go over XPath 2 , start XPath 2 together. XPath Functions, simple map vs. arrow operator. Using functions inside predicates.

F 10-23

Go over XPath Exercise 3. Introduce string functions, and combining regular expressions with XPath. Complete XPath Exercise 3, or get as far as you can
Week 10 Topics Do before class

M 10-26

No synchronous class meeting today (Dr. B is participating in the TEI Technical Council twice-yearly meeting).
  • Complete (or get as far as you can) with XPath Exercise 4: String functions
  • Project Checkpoint 4: due by 11:59pm:
    • Complete most XML markup for your project according to a refined project schema.
    • Review/refine project research question.
    • Make some significant content and/or enhance layout and styling for the website.

W 10-28

Introducing XSLT (eXtensible Stylesheets Language Transformations). XML to XML, XML to HTML. Namespaces. Setting up oXygen to write XSLT and saving as .xsl. Writing your first XSLT stylesheet transformation. Read Introduction to XSLT, and watch one (or both) of the following orientation videos on how to set up oXygen to write XSLT:

F 10-30

How to write XSLT to change XML into HTML XSLT Exercise 1: An Identity Transformation
Week 11 Topics Do before class

M 11-02

Go over XSLT to HTML. XPath in XSLT. XSLT Exercise 2: outputting HTML from XML

W 11-04

Catch-up Day. Work on XSLT Exercise together in class. Troubleshooting and getting help with XSLT. Catch up on assignments, project work. Catch up with writing line-comments on Solution files posted in the digitProjectDesign-Hub.

F 11-06

XSLT: How templates work. Push and pull processing. XSLT Exercise 3
Week 12 Topics Do before class

M 11-09

XSLT for editions: push processing. Styling: working with XSLT and CSS together.

W 11-11

Work together on Modal XSLT in XSLT Ex 5.

F 11-13

Introduce xsl:sort and internal linking in HTML. XML to HTML with CSS. Apply to projects
Week 13 Topics Do before class

M 11-16

XML that makes graphics: SVG (Scalable Vector Graphics: Drawing elements and screen grid coordinates XSLT Exercise 6

W 11-18

XSLT to SVG: working with variables to plot coordinate space

F 11-20

Looking ahead to project completion. XSLT to SVG to make a graph

(before class): SVG Exercise 2: XSLT to SVG

Project Checkpoint 5 (by end of day)

  • Goal: XML markup is mostly complete and ready for active processing with XSLT
  • Work on XSLT to HTML transformations to build content for the project website
  • Improve the project website, update its organization and navigation
  • Project intros: introduce the team members
  • Other goals specific each team
Topics Do before class

M 11-23 - F 11-27

Thanksgiving Holiday Have a peaceful and productive week! See you online. Work on XSLT Test, SVG Exercise 3, and project development
Week 14 Topics Do before class

M 11-30

Integrating SVG and HTML for your website. Introducing simple JavaScript

W 12-02

Associating JavaScript files with HTML, and coordinating with CSS
  • (for class): JavaScript Exercise 1
  • (One Per Project Team): SVG Exercise 4 for projects: options: a timeline?, graph from project data?

F 12-04

Project sites: aplying Creative Commons license, linking GitHub repos, presentations. JavaScript Exercise 2: Toggling @class attributes
Week 15 Topics Do before class

M 12-07

Putting it all together: JavaScript with CSS to interact with SVG. JavaScript Exercise 3: JS over SVG and HTML Project sprint

W 12-09

JavaScript for projects. Project sprint. Prepare for Project Checkpoint 6

F 12-11

Last day: Project Checkpoint 6: Teams present their projects to the class, invite comments and feedback. Classmates from other teams ask questions, offer commentary on project GitHub repos through early next week. Prepare to share your project (nearing completion) with the class
Finals Week: M 12/14 - F 12/18 Due

H 12-17

Projects due by 11:59pm

Finish developing projects on newtfire, and send a post to me on GitHub to indicate your team is finished.