Week 1. Building a Digital Archive using CollectionBuilder
In this workshop series you will learn how to create a website displaying a digital collection using free, open-source software (CollectionBuilder). Faculty, researchers, students, and staff are welcome. This workshop series is appropriate for anyone who wants to learn to build their own website to display a digital collection, whether for a class, a grant, or a digital humanities project. You can also use this software to create a personal website showcasing your professional portfolio as an architect, designer, or artist. You should be comfortable learning new things, but no prior experience with web design is required.
During the first week’s workshop, we will explore what CollectionBuilder as a platform is good for — making digital collections publicly available online. You will learn how to make a free GitHub account and begin interacting with the digital collections platform. You will learn how to upload digital collections into your CollectionBuilder site and gain experience with the very basics of working with metadata. By the end of the session, you will have a live digital collection to show anyone in the world!
Our sample project (demo version here) replicates an openly licensed digital exhibit, Yōkai Senjafuda, built by the University of Oregon Libraries and the Jordan Schnitzer Museum of Art, with support from The Andrew W. Mellon Foundation.
WORKSHOP RESOURCES
| Resource Type | Links & Materials |
|---|---|
| Instructor Materials | - Internet-connected computer, ideally with video camera. - Zoom account or other virtual meeting tool that has web conferencing features for chat, audio, and video. - Learn Static Workshop Pages - GitHub account - Google account for using Sheets |
| Learner Materials | - Internet-connected computer, ideally with video camera. - Zoom account or other virtual meeting tool that has web conferencing features for chat, audio, and video. - Email account for creating GitHub account during in the session. - Google account for using Sheets Student Materials page, which links to a - Step-by-step guide for today’s session -Materials in the student_resources folder of this GitHub repository, which may be downloaded separately from the entire repository using this link generated via DownGit |
Before Class Participants will be invited (but not required) to set up their GitHub account before class.
Participants will be given images and metadata to build a “demo” project. Participants will be given the option to meet with an instructor directly to develop images and metadata at any point before, during, or after the workshop series.
Lesson 1 of 3: Introduction (20 minutes)
Learning Objectives and Aligned Assessments
| Learning Objectives | Aligned Assessments |
|---|---|
| 1. By the end of this class, you will express how CollectionBuilder is relevant to your digital collections and storytelling project. | 1. You will articulate CollectionBuilder’s relevancy by sharing how you see the tool fitting your digital collection and storytelling needs. |
ALIGNED STANDARDS/FRAMEWORK
ISTE Standards 1.6. Creative Communicator Students choose the appropriate platforms and tools for meeting the desired objectives of their creation or communication.
LEARNING SEQUENCE OUTLINE
| Estimated time | Topic/Material Covered | Activity/Delivery Method |
|---|---|---|
| 1. 5 minutes | Introductions | Learners will introduce themselves individually and answer the following questions: - What is your name? - What are your pronouns? - What are your goals for this workshop? |
| 2. 5 minutes | CollectionBuilder for Storytelling with Digital Collections | Lecture - CollectionBuilder can be used to showcase digital collections, such as University of Idaho Camups History and North Carolina Women - Out of the box,CollectionBuilder incudes maps, timelines, and data downloads. |
| 4. 10 minutes | About Your Digital Collections & Stories | Reflection Ask a few learners to verbally share how they see CollectionBuilder fitting their digital collection needs As learners share instructor should demo an example through a screen share |
Lesson 2 of 3. GitHub (20 minutes)
Lesson 2 of this workshop introduces students to using GitHub via their web browser.
Learning Objectives and Aligned Assessments
| Learning Objectives | Aligned |
|---|---|
| By the end of this class, you will be able to | Workshop leaders will confirm that learners have |
| 1. create a GitHub account and public repository 2. create a commit and a quality commit message 3. view git history to see changes to the repository and git diff to see changes to files |
1. created a GitHub account and repository 2. created a commit and a quality commit message 3. viewed git history to see changes to the repository and git diff to see changes to files |
ALIGNED STANDARDS/FRAMEWORK
Prerequisite skills for ISTE 1.6b, “Students create original works or responsibly repurpose or remix digital resources into new creations.”
LEARNING SEQUENCE OUTLINE
| Estimated time | Topic/Material Covered | Activity/Delivery Method |
|---|---|---|
| 1. 5 minutes | What is GitHub and why use it? | Brief transition/lecture |
| 2. 10-14 minutes | Learn about GitHub while creating our first CollectionBuilder-GH project | Students can follow detailed step by step instructions here; the main outline is as follows: 1. Create GitHub account (be sure to “skip personalization” and choose a free account). 2. Start new project by creating a copy of the code on GitHub by clicking the “Use this Template” button, https://github.com/CollectionBuilder/collectionbuilder-gh 3. Enable GitHub pages, and add a link to your newly enabled page to the “about” part of your website. |
| 4. 1-5 minutes | Final questions/review | Pause to check that students are following along, and answer any questions |
Lesson 3 of 3. CollectionBuilder-gh Demo Project (50 minutes)
Learning Objectives and Aligned Assessments
| Learning Objectives | Aligned Assessments |
|---|---|
| By the end of this class, you will be able to | By the end of class, participants will have |
| 1. identify the elements of a CollectionBuilder-gh project that control images and image descriptions (digital objects and their metadata). 2. use Google Sheets or another spreadsheet editing software to make basic edits to an existing spreadsheet. |
1. created and deployed a demo CollectionBuilder-gh project 2. edited project metadata, images, and configuration files to customize their project |
ALIGNED STANDARDS/FRAMEWORK
ISTE 1.6b, “Students create original works or responsibly repurpose or remix digital resources into new creations.”
LEARNING SEQUENCE OUTLINE
| Estimated time | Topic/Material Covered | Activity/Delivery Method |
|---|---|---|
| 1. 5 minutes | Transition or quick break | |
| 2. 5 minutes | How does this website know what images to display, and how can we change them? | Lecture: brief overview of the contents of the repository, clicking through. - README.md - notice link to instructions for using this template- _config.yml - notice that this controls elements of the site at a high level- _data folder - note the demo-metadata.csv file referenced in _config.yml- docs folder - instructions for using various parts of the website- objects folder - note the images, which correspond to the names in the metadata.csv and to the images on the website, and the readme.md file with instructions on adding images to your project- pages folder - note that the markdown pages here are not the final pages served by Jekyll. Rather, they instruct Jekyll on how to create the final html pages served by GitHub pages. Compare right click “view page source” image of html to the md file. |
| 2. 30 minutes | Students continue developing their CollectionBuilder template | Students can follow detailed instructions here; the brief outline is as follows: 1. Configure your website in the _config.yml file in your new repository. Update URL Variables and Site Settings sections for your new project. 2. Download our sample project metadata and images. These materials are in the student_resources folder of this GitHub repository, which may be downloaded separately from the entire repository using this link generated via DownGit. 3. Upload the images to the images folder. 4. Import metadata to Google Sheets and explore it. Then upload the metadata 5. Update _config.yml to direct the project to your new metadata file, senjafuda-metadata.csv |
| 6. 10 minutes | Editing Metadata | Students can continue to follow detailed instructions here. 1. Check the website, discover there are only 8 images appearing, and that there are text encoding errors for the macron (diacritical mark over the o) in several romanized Japanese words. Note that UTF-8, the encoding Google Sheets uses for saving our CSVs, includes encoding for macrons. However, as this material was cut and pasted, the encoding was lost somewhere along the way. 2. Edit senjafuda-metadata.csv in Google Sheets to fix the errors you found in the website. The errors in the csv are in B10 and E4. In B10, notice that the filename listed in the sheet does not match the filename of the image, and remember, the computer never knows what you really meant to say! Here are instructions to type a macron for Mac and instructions to type a macron for Windows. 8. Re-upload, commit and confirm fix. |
| 7. 10 minutes | Final wrap-up | 3/2/1 Reflection - 3 things you found interesting - 2 things you’ve learned - 1 thing you still have a question about |
After Class
Students will be directed via a follow-up email to the resources listed on the Student Materials page, to the step-by-step guide for today’s session and to CollectionBuilder documentation on how to create and deploy their website, with particular emphasis on how to create image files and accompanying metadata.
Students will also be given the option to meet with an instructor directly to develop images and metadata at any point before, during, or after the workshop series.