Fall 2021 Syllabus (Schedule)
Classes meet M W F 2:30 - 3:20pm in Kochel 77. Attend class wearing a face mask that covers your mouth and nose.
(Until further notice, face masks are required inside all university buildings, regardless of vaccination status.)
Remember: Your mask protects me, my mask protects you.
This contains a detailed explanation of course policies and the basis for grades.
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.
- <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.
- 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 meetings.)
- We will use the Slack chat platform for discussion and for asking questions (see https://slack.com/help/articles/218080037-Getting-started-for-new-members).
Download and install the Slack 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.
- 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.)
- Rusty with coding? Don’t remember anything from DIGIT 110 or 210? Don’t worry! Past students
with very little coding background have designed projects (like these) and even spoken about them at undergraduate conferences!
You will be getting lots of review in this course while learning new methods. Our goal, as ever, is for you to
learn by building and designing.
Class Web Resources:
| Week 1 | Class topics | Do before class |
|---|
M 08-23
|
|
Respond to Dr. B's Poll (see Canvas / Penn State email). |
W 08-25
|
- Review XML structures, well-formedness vs. validity, elements, attributes, comments, escape characters (
&, <, >) and pretty-printing in <oXygen/> (also, how did I make the escape characters appear on this syllabus page?).
- How file systems recognize XML documents (File extension, and XML declaration line). Also, what are namespaces and why are they important
- Discuss XML / Project Code Review Exercise. Semester project concepts / parameters.
- DH Coders Slack and digitProjectDesign-Hub
|
- Install oXygen XML Editor and add our license key so we can
all use this during our meeting today.
- XML / Project Code Review: Exercise 1
|
F 08-27
|
Project stitchwork : @xml:id and special pointer attributes:
|
XML / Project Code Review: Exercise 2 |
| Week 2 | Class topics | Do before class |
|---|
M 08-30
|
- Validity in XML and community standards. Schemas for validating XML.
- Writing your own Relax NG:
- Warming up GitHub again...
|
- XML / Project Code Review: Exercise 3:
Revise earlier code and add a new source document to your file (see Canvas for details).
|
W 09-01
|
Relax NG: how we think about it / organize it / document it. |
- (Learn/Review): Watch my video on Relax NG and how to write it in oXygen
- (Learn/Review/Consult): Read Intro to Relax NG and keep it open to consult while you work on Relax NG Exercise 1
- Relax NG / Code Review 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.
|
F 09-03
|
Reviewing GitHub, Git Bash (Windows) and command line/terminal. |
- Repair your Relax NG Exercise 1 and resubmit if you did not achieve the
green square of validation on your XML document, or if there were problems with your schema.
- git / GitHub Review Exercise 1:
Request to become a collaborator with the class digitProjectDesign-Hub.
- If you don’t have Slack installed, install it and set up your profile using this Slack Guide for New Users :
If you are not already a member, join the DIGIT-Coders Slack (link expires in 20 days), and set up your profile display name so the class can recognize you.
|
| Week 3 | Class topics | Do before class |
|---|
M 09-06
|
Labor Day Holiday: No classes. |
... |
W 09-08
|
- Metaphors for coding: textiles, food? What are we making / serving / consuming?
- Textiles from customized, standard components: Text Encoding Initiatve (TEI) and how it's validated (ODD to Relax-NG XML)
- Mixed content: tossed soup or salad? Why attributes do not belong inside your mixed content plates.
- Datatypes and where we can apply them
|
- Git Exercise 2 (reviewing git commands and git configuration): details on Canvas.
- Project Milestone 1: (by 11:59pm today)
- This is an individual assignment: Each student posts an idea for the class to consider: a project to be managed within a team of 2-4 students.
- Post a proposal for the semester project by opening a new issue on the digitProjectDesign-Hub.
Each new proposal should get its own issue so we can add comments and continue to elaborate on it in a connected way.
- Project proposals should involve XML markup and address a research question that we could study and visualize
more effectively with computers than with human reading and description alone.
- Good project proposals may:
- build substantially on a project you launched last year in a DIGIT class
- build on a past project that no one working on any more (not necessarily yours)
- or be a new project
- Projects must involve XML with web publication and may also incorporate multimedia dimensions built by team-members.
- Please identify a resource which the team can work with to start XML markup. (Provide a link if you can.)
- For ideas and resources, see past projects connected with newtfire.org and our sibling course at the University of Pittsburgh Honors College on obdurodon.org.
|
F 09-10
|
Project Proposals: discussion. Ways to work with TEI. |
- Relax NG / Code Review Exercise 2
Write a Relax NG schema for one of the XML documents you created for the XML homework assignments. Make changes to the XML as necessary to meet the following conditions:
- Your XML must contain more than one attribute.
- Some elements should feature more than one attribute.
- Your XML should include at least one empty (self-closing) element.
- Your XML must include mixed content.
- Your schema must define some content using more than one datatype.
Upload both your XML and your schema file in a zipped (compressed) directory on Canvas.
|
| Week 4 | Class topics | Do before class |
|---|
M 09-13
|
Form project teams! |
- Project Milestone 2 Respond to at least two project proposals by other students. [Details TBA]
|
W 09-15
|
- Project initiation time in class
- Web presence: beyond GitHub Pages: getting started on newtfire.org
|
- Project Milestone 3:
- One team-member launches the project GitHub repo and invites teammates and me to join
(using Settings > Manage settings).
- Post in the Issues board of your new project repo
- Establish lines of communication and meeting times/places via Slack and GitHub.
|
F 09-17
|
- 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.
|
- Install FileZilla (or other SFTP client) if you have not
done so already: we'll use it next class! Follow instructions posted on Canvas for setting up SSH keys to access
your personal webspace on Newtfire.
- Follow our instructions on Canvas to set up SSH keys
- Review our Introduction to HTML.
- Complete/post HTML/CSS Code Review Exercise 1 and push to your GitHub repo and/or the team's GitHub repo in preparation for today's class.
|
| Week 5 | Class topics | Do before class |
|---|
M 09-20
|
- Review Absolute vs. relative links (and file associations).
- Mindful file management: mirroring directory structures on GitHub and the web server
- Apache Server Side Includes vs. Github Pages' Ruby Gems
|
Complete/push/SFTP HTML/CSS Exercise 2 to both your GitHub repo and your newtfire web space |
W 09-22
|
- Designing websites for navigation: creating standard (repeatable) components.
- When to create Server Side Includes for the project.
- CSS Intensive!
Separation of concerns and DRY (Don’t Repeat Yourself).
|
|
F 09-24
|
Information modeling with markup: Designing your project around a schema.
Example: Banksy project: analysis, timeline, map from single code source and schema.
|
Project work in prep for next milestone. |
| Week 6 | Class topics | Do before class |
|---|
M 09-27
|
Relax NG Workshop for projects: In your project teams, review each other's Relax NG and think of how to refine and combine your ideas for the project.
Take notes on your decisions to post on your project repos in markdown.
|
Relax NG Exercise 3
- Find some information relevant to your project to model in XML for your project.
- Concentrate on keeping your information structure clear and easy to access in your XML. Choose element names and attributes to hold information you believe is important to the project.
- Decide on information that is not relevant.
- Design a Relax NG schema that validates the XML, and is also designed to validate other XML your team might create.
|
W 09-29
|
Project focus: Schema review, project research questions review. Agile project management. |
Project Milestone 4a: Refine the previous homework exercise into an efficient, functional schema that could work for your project team. This is for a letter grade. Details on Canvas.
|
F 10-01
|
CSS intensive! Designing for accessibility and variations in web browser displays. Designing (wireframing ) page layouts.
Designing for multiple kinds of devices (touchscreen, wide screen): Flex displays, grid layouts.
|
Project Milestone 4b: - Back end: Schema / planning, aligning code structure to research questions.
- Establish clear file directory structure on the project GitHub repo, including a distinct directory for website files.
- Project Documentation: README.md files guiding organization of files in GitHub, documenting project structure
- Front end: Web / CSS / interface work.
|
| Week 7 | Class topics | Do before class |
|---|
M 10-04
|
Review XPath, introduce eXist-dB. Review of XPath sequences.
Reaching elements and attributes across your project. Functions that work on sequences.
|
Project Milestone 4c: Code new project XML files following the new project schema(s).
|
W 10-06
|
XPath, with XQuery: variables and FLWOR statements.
|
XPath/XQuery Exercise 1 (working in newtfire eXist-dB).
|
F 10-08
|
XQuery FLWOR statements and XPath functions. Understanding cardinality of XPath functions,
and how to use the simple map (!) vs. the arrow operator (=>). Applying XQuery for-loops: Working off the tree with a sequence of distinct values,
finding out where each one is coded in a collection using a predicate expression:
for $i in $distinct-sequence
let $collectionFilter := $coll//item[child::something = $i]
(: or :)
let $collectionFilter := $coll//item[@something = $i]
(: or :)
let $collectionFilter := $coll//item[descendant::something = $i]
- cardinality = 0 or 1: XPath functions that work on one node at a time only.
- cardinality = more than 1: XPath functions that work over sequences:
distinct-values(), count(), and more.
|
XPath/XQuery Exercise 2
|
| Week 8 | Class topics | Do before class |
|---|
M 10-11
|
Writing XQuery to output XML and HTML. HTML refresher. Saving output to eXist-dB.
|
XPath/XQuery Exercise 3 |
W 10-13
|
Strings and Regular Expressions in XPath/XQuery. Functions that work on strings. Regex review.
Resources for regex patterns. Regex crosswords and other regex fun. Most useful regex searches in projects? |
XPath/XQuery Exercise 4 |
F 10-15
|
- XPath refresher, with Schematron
- Taking good care of your project code. Schematron: XPath-based code validation. Where and why your projects need it.
|
- XPath/XQuery Exercise 5
- Project Milestone 5a: XQuery and Web development for the project
|
| Week 9 | Class topics | Do before class |
|---|
M 10-18
|
Intro to JavaScript, the DOM, and interaction (Part 1: We will return to JS later!)
Web development with component parts. Static vs. dynamic content in projects.
Server-side or client-side interaction?
Timeline/comparison of technologies of interest:
- Server Side Includes
- PHP
Frameworks (JS, Ruby, etc.)- Saxon-JS
|
Project Milestone 5b: Reflection on project; prep for project Schematron
|
W 10-20
|
Coordinating JavaScript with CSS on project HTML. Working with variables and for loops in JavaScript.
|
JavaScript Exercise 1 |
F 10-22
|
More JavaScript applications for projects. PHP configuration with eXist-dB.
|
JavaScript Exercise 2: Configure some HTML with @class attributes to work with JS classList toggle
|
| Week 10 | Class topics | Do before class |
|---|
M 10-25
|
PHP Configuration for dynamic queries: eXist-dB and newtfire site integration. JavaScript working with form options.
|
Project Milestone 6 More web development for project site.
|
W 10-27
|
PHP, XQuery, JavaScript.
|
XQuery-PHP Exercise 1: With PHP configured on your newtfire website, write an XQuery script to populate a portion of a PHP file that you create.
|
F 10-29
|
XQuery, PHP, JavaScript continued. Project consultation and review in class. |
XQuery-PHP Exercise 1 (due date extended for debugging!) |
| Week 11 | Class topics | Do before class |
|---|
M 11-01
|
Intro / Review of SVG: XML that makes graphics |
Complete XQuery-PHP Exercise 2: design and work out interactive interfaces for your project.
|
W 11-03
|
XQuery to SVG: Pulling data for visualizing. Hands-on workshop.
|
-
- Project Milestone 6:
- Project team works together to determine an interface for the project that optimizes searching and finding information, redirecting to related information, images, etc.
- New code: team works out bugs in the code, completes more/revises XML markup as needed for the project
- Images: compile and coordinate images that are useful to connect with your data in the project and for the website
- The team works out some new CSS styling and JavaScript to complement interactivity on the site.
|
F 11-05
|
SVG from XQuery, and delivering outputs to the website. Namespace issues!
|
|
| Week 12 | Class topics | Do before class |
|---|
M 11-08
|
Guest lecture by Dr. David J. Birnbaum (University of Pittsburgh) on innovative approaches to SVG visualizations from XML projects.
|
work on XQuery to SVG for projects
|
W 11-10
|
XQuery to SVG: Experiments: stacked bar, radar? |
Watch my recorded video on XQuery to SVG to make hashlines
to help with SVG Exercise 3 (from XQuery).
|
F 11-12
|
JavaScript with SVG! JavaScript, HTML, and CSS working together on a page.
|
Project Milestone 6: Interactive dimensions of the project
- Project team works together to determine an interface for the project that optimizes searching and finding information, redirecting to related information, images, etc.
- New code: team works out bugs in the code, completes more/revises XML markup as needed for the project
- Images: compile and coordinate some images that are useful to connect with your data in the project and for the website
- The team works out some new CSS styling and JavaScript to complement interactivity on the site.
|
| Week 13 | Class topics | Do before class |
|---|
M 11-15
|
Network Analysis: Introduction / Review: - Thinking about your project data as a network of relationships.
- Data format preparation for working with Cytoscape network analysis software
- Reaching into projects for network data:
nodes and edges
|
Catch up on assignments / milestone work.
|
W 11-17
|
Working with Network data in Cytoscape. |
Network Analysis Exercise 1: Output network data from your project
|
F 11-19
|
|
- Network Analysis Exercise 2: processing the network data in Cytoscape; exporting it.
|
|
|
|
M 11-22 - F 11-26
|
Thanksgiving Holiday |
Have a peaceful and productive week! |
| Week 14 | Class topics | Do before class |
|---|
M 11-29
|
Network Analysis Revisited: Fine-tuning networks; embedding interactive network graphs. |
Work toward last project milestones: Embedding SVG and Network Graphs on websites.
Network Analysis Exercise 3: continuing to process network analysis data; preparing filtered exports.
|
W 12-01
|
Project HTML and CSS: Site design work
|
Work toward last project milestones. |
F 12-03
|
Designing websites for user interaction. Revisiting web acccessibility. |
Project Milestone 7: Embedding visualizations on site
- Goal: XML markup is complete.
- Active processing of project data is underway with XQuery / XSLT / Graphing / Mapping / Networking etc.
- Images / multimedia work is mostly prepared for site (as relevant)
- Check Project Completion Guidelines for guidance on improving the project website, updating its organization and navigation.
- Other goals specific each team
|
| Week 15 | Class topics | Do before class |
|---|
M 12-06
|
Catch-up day. Project work / consultation in class |
Debug search query interfaces / Prepare for Project Milestone 8 (presentations) |
W 12-08
|
Project work / consultation in class |
Prepare for Project Milestone 8 (presentations) |
F 12-10
|
Last Day of Classes: Project Milestone 8: FA 21 DIGIT Works Presentations |
Prepare to share your project (nearing completion) with the class |
| Finals Week: (December 13-17) |
Do before class |
H 12-16
|
Semester projects due by 11:59pm.
Finish developing projects, and send a post to me on GitHub and Canvas to indicate your team is finished.
|
