Module 5 Exercises (OPTIONAL)

In this module, you will begin with an introduction to web design concepts and finish by creating your own online exhibit. While we will not explore every possibility here, I do not want to leave you thinking that all digital history work is necessarily text based. To that end, if you are looking for a challenge or for exposure to something rather different, I suggest you at least bookmark my series of tutorials on augmented reality, games, and 3d models for history and archaeology.

Image showing Ukrainian Parliament fist fight three times: 1 the original; 2 the photo with the Fibonnaci Golden spiral overlayed; 3 the photo as a Renaissance painting

'Accidental Renaissance: the photos that look like Italian paintings'.

The exercises in this module cover:

  • Design with colour and font
  • Layout
  • Manipulating graphics
  • Creating digital exhibits

Exercise 1: Layout

'Layout' can mean different things in different contexts. A general overview on issues in layout is covered by 'What makes a design great', Lynda.com and 'Exploring principles of layout and composition'. The Slideshare on effective layouts gives you a sense of things to watch out for as well.

For academic posters in particular, consider these poster design suggestions from the APA.

In essence, good layout makes your argument legible, intuitive, and reinforces the rhetorical points you are trying to make. You should take into account 'principles of universal design' — consider design issues with PowerPoint and websites (although some of the technical solutions proposed in those two documents are a bit out of date, the general principles hold!).

In this exercise, you will design a new poster or modify an existing poster. You can use either Inkscape or PowerPoint.

Inkscape

View the Inkscape exercise in our supporting materials for a gentle introduction to the software.

  1. Download one of the scientific poster templates from Ugo Sangiorgi (These are developed from Felix Breuer's blog post; note his discussion on design).
  2. Open it in Inkscape.
  3. Make notes in your open notebook from the point of view of layout: what elements of the design work? What aren't working? How would you repurpose this poster to fit the requirements of the assessment exercise (remember, the details in the syllabus)?
  4. Visit Inkscape's website for help with the basics of Inkscape.
  5. Modify the poster, and upload the SVG, PDF, or PNG version to your repository.

PowerPoint

There's a lot of information out there on making posters with PowerPoint.

  1. Read parts 1, 2, and 3 of the Make Signs tutorial and then consider Colin Purrington's advice. Once you've read and digested the material, pick a poster from Pimp My Poster that sticks out to you.
  2. Make notes in your open notebook: from the point of view of layout what elements of the design work? What aren't working? How would you repurpose this poster to fit the requirements of the assessment exercises (remember to visit GitHub for the details)?
  3. Grab a template from from Colin Purrington's website, and use it to prototype a poster that works.
  4. Upload the poster as a PDF to your repository.

If you want to explore layout in the context of webpage creation, I would point you to the the roster of lessons at Codeacademy. Same instructions: find an existing site that you will consider from the point of view of what works, what doesn't, and use that reflection to guide the construction of your own.


Exercise 2: Typography

Typography plays an important role in visual communication. It can do everything from reduce eyestrain (do a search for 'easiest fonts to read on screen') to communicate power and authority. Is it any wonder that strong bold capitals come to be known as 'Roman'? But first: are you a comic sans criminal?

NB Serif fonts are sometimes not as accessible as sans-serif fonts. Older screens and monitors can have a difficult time rendering serif fonts. Sans-serif fonts can be more readable across different screens. However, this does not mean you should throw away serif fonts — many serif fonts can be quite accessible and add to your design goals if used properly. For more information on accessible fonts, check out WebAIM's article on the topic.

In this exercise,

  • I want you to read and understand the section on font choices from the Owl at Purdue.
  • Then, play some rounds of Typeconnection. Pay attention to why — or why not — various pairings work.
  • Then, I want to consider the document you will be preparing for me that accounts for your learning in this course — the document where you choose your best exercises from the modules and explain how your approach to history, data, the digital, etc, has changed over this course. What typographic pair would work best for you?
  • Finally, you'll make a webpage that uses those fonts and explains why they work.

The first part of this exercise then is to find a pair of fonts and to understand why they work best for you.

  1. Read the materials above, and once you're done with the Typeconnection site, go to Google Fonts and search for a pair that are suitable for your purpose.

  2. When you find a font you like, click the 'Add to collection' button.

  3. At the bottom of the screen, you'll see a link for 'use'. Click on this — Google will ask you if you want to use any of the variants of the font. Tick off accordingly.

  4. Do you see the embed code that Google provides, and the code to integrate the font into your CSS (stylesheet)? Leave this window open — we're going to use it in a moment.

  5. Make a new repository for this exercise.

  6. In your repository, click the button beside 'branch'.

  7. In the search box that opens, type in gh-pages. This will create a version of your repository that can be served as a website. You're now in the gh-pages branch.

  8. Click on the + sign (plus sign) beside the repository name. This will create a new file in your gh-branch of your repository. Call it myfontchoice.html (the .html file name is important to specify; otherwise your browser will not know how to render your page).

  9. You now need to put some HTML in there. I've written a simple webpage that will use two fonts from Google Fonts, and then applies the font to my text depending on whether or not it is a header, which you specify like this: <h1> this is a header in between header tags </h1> or a paragraph, which you specify like this: <p>blah blah blah a paragraph of text blah blah blah</p>. Right-click and open in a new tab my webpage on GitHub. Copy the HTML into your new HTML document. Commit your changes (ie. save).



  10. Let's see what we've got. To see the website version of your gh-pages branch, you go to <yourusername>.github.io/<reponame>/myfontchoice.html (ie. the final part of the URL is the name of the document in your repo). Do that now. You should see a simple webpage, with two very distinctive fonts.

  11. Now let's slide your font choices into the HTML. Go to your HTML page in your gh-pages repo (ie. not the github.io version, but the github.com/<yourusername>/<repo>/myfontchoice.html version).

  12. Hit the edit button. Look closely at line 6. Do you see my two fonts? Do you see the pipe character (the | symbol) between them? That tells Google you want both fonts.

  13. Navigate to the Google Fonts page again to grab the exact name for your fonts (uppercase letters make a difference!) and paste them into line 5 appropriately.

  14. Lines 8 and 14 specify which font to use for headers, and which font to use for body text. Change the lines appropriately.

  15. Change my silly text for a paragraph that explains what the fonts are, and why they work for this purpose. Commit your changes.

  16. Go to the github.io version of your repository (if you forget the address, you can find it under the 'Settings' tab on your normal repository page when you're in the gh-pages branch).

  17. Reload the page several times to clear the older version you've already looked at and to replace it with your version. Ta da! Not only have you thought carefully about typography and fonts, you've also learned how to serve a webpage from a GitHub repository.



Hint You could use this as the basics of your submission for assessment, for your exercises. Build a webpage, link to your evidence, and embed your images. For basic HTML, W3schools has a really good guide to keep around.

Going further with GitHub pages

Now that you have learned the basics of creating a simple website using GitHub, you have the ability to go further. Using the DH Box, you can build a simple website through GitHub pages using the MkDocs static site generator. Navigate to the static site generator exercise using GitHub pages in the supporting materials.


Exercise 3: Colour

There's a lot of bumpf out there on the 'pyschology of colour'. Google it to see what I mean (Youth Designer has a good example). A lot of what you see here isn't so much psychology as it is associations (and indeed, western associations, at that). Associations are important of course; you don't want to undermine your message by making some unfortunate connections.

In this exercise, I want you to take the webpage you developed in the previous exercise, and make two versions of it:

  1. One where the colours support the broader message of the page (a prototype for your exercises assessment piece, remember?).
  2. And the other where the colours undermine that broader message.
  1. Explain, in both cases, how your colour choices enhance and/or detract.
  2. Alternatively, you can make a one page slide in PowerPoint doing the same thing.



Resources

Below is a graphic and a video tutorial from Lynda.com to help with the theoretical side of things:

Image showing color theory graphic

Visit the tutorial Understanding the rules of color, Lynda.com

To learn how to style your webpage appropriately, you can follow this tutorial on CSS from codeacademy.com.

Below is a graphic that presents how colours are perceived in different cultures:

Image showing colours in other cultures


Exercise 4: Creating an online exhibit with Omeka

Omeka is an open source Content Management System (CMS) for sharing digital collections and creating media-rich online exhibits. A CMS is a web program that manages web content including graphics, text, videos, and more. A CMS allows users to upload their content via a Graphical User Interface (GUI) and organizes it into appropriate folder structures. Traditional websites are programmed from the ground up — everything from structure, to styling, to creating folders and specifiying where multi-media content is located.

The main advantage of using a CMS is that it requires little to no actual, background-level programming. That being said, anyone can edit a CMS's source code files, add their own, or modify them to fit their needs. Most CMSs are built with PHP, a web scripting language used to dynamically create content. However, most CMSs are also accompanied by massive native and third party plugin libraries that allow users to modify their website without touching any source code. Examples of CMSs include Wordpress, Drupal, Grav, Known, Joomla, and many more.

Unlike many popular CMSs, Omeka is not a blogging platform. Omeka is used to create online exhibits. Today we are going to create a simple online exhibit.

Our overall steps are as follows:

  1. Create a subdomain of your website where Omeka will live. This will allow you to host Omeka as an entity of its own on your website, keeping your main website separate.
  2. Install Omeka through cPanel on Reclaim Hosting.
  3. Create an online exhibit with several historical items.
  4. Change the style of our Omeka site by modifying the CSS of our theme.

Creating a subdomain

  1. Login to your Reclaim Hosting account through the Reclaim Hosting login page.

  2. In the client area, select the cPanel tab.

    Image showing cPanel

  3. Under the Domains section, select Subdomains. Typically, a subdomain divides your overall website into distinct portions. For instance, you could have your landing page at mysite.com, your blog at blog.mysite.com, and your class work at hist3814.mysite.com. That way each subdomain could have different styles and serve different purposes, but still be connected to your overall domain. You can add as many subdomains to your site as you'd like.

    Subdomains are essentially just an easier way of organizing your files and showing distinct differences from your main domain. You could technically also do mysite.com/blog or mysite.com/hist3814. In that case, however, it seems expected they would all be styled similarly to mysite.com. Furthermore, it might cause file structure issues to have, for example, Wordpress running your mysite.com and Omeka running mysite.com/Omeka. It's best to stick with your free subdomains.

    Image showing Subdomains section of cPanel

  4. Enter the name of your online exhibit in the Subdomain field. You could simply put omeka, omeka-test, etc. or get more descriptive and say gatineau-fire-maps. Choose a title relevant to your Omeka site's purpose.

  5. Leave the Domain field set to your domain.

  6. The Document Root will be automatically created (an advantage of adding a subdomain!). I would not recommend changing this, but if you want to further organize your folder structure, you are able to change the location.

    Image showing how to create a subdomain in cPanel

  7. Click the Create button. It will take a moment, but your new subdomain will be approved.

    Image showing successful subdomain creation in cPanel

NB Since the subdomain has nothing in it, if you navigate to it now, you will see 'Index of/' showing the file structure. This is normal.

Installing Omeka

  1. Navigate back to your cPanel home page.

  2. Under the Applications section, select Omeka.

    Image showing web applications available to install in cPanel

  3. On the right side, click the '+ install this application' button.

    Image showing the Omeka application in cPanel

  4. Under the Location section, select the subdomain you created in the previous instructions. Do not choose your main mysite.com domain. Choose your omeka.mysite.com domain or your variant of it. You can choose the https or http version. Note, however, that https is more secure.

  5. Delete cms under Directory (Optional). We want Omeka installed to the root of our subdomain, not in a folder called cms. If you were installing Omeka to your main site, then you'd want a subdirectory called cms.

    Image showing how to set up Omeka domain

  6. Under the Version section, leave the settings as they are. Make sure 'I accept the license agreement' is selected. It's also good practice to allow it to update as needed and to allow backups.

  7. Under the Settings section, either create a new Administrator Username and Administrator Password or securely record the Administrator Username and Administrator Password generated for you. (You can click Show Password to show it.) REMEMBER YOUR LOGIN INFORMATION! You NEED the username and password to make changes to your Omeka site.

  8. Add an Administrator Email.

  9. Change the Website Title to a fitting and appropriate title.

    Image showing Omeka login and admin information

  10. Under Advanced, leave the default settings.

  11. Click the Install button. You will be redirected to 'My Applications'. The installation may take a minute to process.

    Image showing where to access Omeka appication in cPanel

  12. Select the middle link of your new Omeka application that says omeka.mysite.com/admin or your variant of the subdomain.

    Image showing how to access Omeka admin in cPanel

  13. Login using your Administrator Username and your Administrator Password.

    Image showing how to log in to Omeka admin

  14. At the top of the admin page, click on Settings.

  15. Scroll down to the bottom. In the ImageMagick Directory Path field, type /usr/bin. Reclaim Hosting comes with ImageMagick preinstalled. ImageMagick resizes and generates thumbnails of your images.

    Image showing ImageMagick file path

  16. Click Save Changes.

Uploading content to Omeka

For the purposes of this exercise, we will use the Gatineau Valley Historical Society fire insurance maps used in Module 4, Exercise 8. You are also allowed to use any historical sources to create an exhibit. Maybe you want to choose historical newspapers that have been digitized from the Library and Archives or the war diary from Module 2, Exercise 2. Just make sure to note where you got your sources and, preferably, that you can download them as images.

  1. On the left side, select Collections.

    Image showing Collections panel in Omeka

  2. Click Add a Collection.

    Image showing how to Add Collection in Omeka

  3. My new collection will be fire insurance maps. Under Title, add Maps of the Gatineau Valley Fire Insurance Plans.

  4. Go through each metadata field and fill in as much information as you can about your collection.

  5. Under Add Collection, click Public to make your collection publicly viewable. Click Add Collection.

    Image showing how to fill out collections details in Omeka

  6. On the left side, select Items.

  7. Click Add an item.

    Image showing how to add an Item in Omeka

  8. Navigate to the Gatineau Valley Historical Society Fire insurance maps or your own source of historical files.

  9. Using the information provided with first map, fill in as much information as you can about your item.

  10. Click on the map image.

  11. Right click and save the image somewhere handy like your desktop.

  12. Select the Files tab.

    Image showing how to upload file to an Item in Omeka

  13. Click Browse and choose your image file (note you cannot upload a single image larger than 128MB).

  14. On the right side under Collection, select your Collection and make sure it is set to Public.

    Image showing how to add the Item in Omeka

  15. Click Add Item. It may take a few minutes to upload.

    Image showing successful upload of Item in Omeka

  16. On the right side, click the middle, blue View Public Page button.

    Image showing Item page in Omeka

  17. Go ahead and upload several exhibit items. If you can find other items related to your collection elsewhere, that'd be great too.

  18. Go to your variant of the omeka.mysite.com subdomain to view how the page looks to the public.

Styling our exhibit (and making it more accessible!)

  1. At the top of the admin page, click Appearance. The default theme is 'Thanks, Roy'. You can choose any theme you want. They are all different and each has different advantages and disadvantages for editing.

  2. For this exercise, we will use the 'Thanks, Roy' theme.

    NB If you choose a different theme to modify, you may see different options. Proceed at your own intent.

  3. Click the blue Configure Theme button. Each theme configuration allows you to change basic style and content settings.

    Image showing how to configure default theme in Omeka

  4. With the configuration page open in one tab, open your omeka.mysite.com to view the public page. Whenever you make an update, simply refresh the public page to view it.

  5. Notice the Browse Items and Browse Collections links on the left of your public page are a bit light and hard to read. In the configuration, copy the text colour hex code #444444.

  6. Navigate to the Color Hex website and search #444444. Hex codes are an internet convention where a series of numbers or numbers and letters correspond with a unique colour.

  7. Scroll down to Shades of #444444. I think #1b1b1b looks dark enough for a solid contrast.

  8. Navigate back to the Omeka configuration page and replace the Text and Links fields hex codes of #444444 with #1b1b1b.

    Image showing how to replace colour codes in default theme configuration in Omeka

  9. On the right side, click Save Changes.

  10. Refresh the public page and notice the text darkens. This will help make your website more readable.

Using the browser inspector to make design easier

  1. Navigate to your public Omeka page.

  2. Right click on the "Featured Item" text.

  3. Select Inspect Element. The browser inspection tool allows you to view the code behind a website.

    NB Chrome and Firefox have great inspector tools. Not all browsers have these tools, however, notably Safari.

    Image showing how to access inspector tool in Firefox browser

  4. The font is not that easy to read either. We will change it, but first let's find the current font. Scroll down on the right side under the Rules tab until you see the body CSS. This rule shows the font is called PT serif, written like the following:

    body {
        font-family: "PT Serif", Times, serif;
    }
    

    Image showing inspector tool to access element style

  5. Go to Google Fonts to choose a new, more readable font.

  6. Search Roboto. Roboto is a clean, easy to read font.

  7. Click the red plus sign to select the font. It will add to a queue below.

  8. Click the black queue bar.

  9. Scroll to where it says Specify in CSS.

  10. Copy the text that says font-family: 'Roboto', sans-serif;. We will add this rule to our CSS file.

    Image showing Roboto font style rule in Google Fonts

  11. Navigate to your cPanel home page and select File Manager at the top of the page.

    Image showing where to access File Manager in cPanel

  12. On the left side click on the folder for your Omeka site. The folder should have the same name as your domain. For instance, if your site is called omeka.mysite.com, the folder will be called omeka.mysite.com unless you changed the name earlier.

  13. Double click each folder until you are in the css folder: Themes >> Default >> css

  14. Right click style.css and select Edit. Reclaim Hosting has some great editing tools within the cPanel so you don't have to make updates within your desktop text editor and then reupload the files.

    Image showing how to edit style css file

  15. Search font-family by hitting ctrl-f (Windows) or cmnd-f (Mac). We ONLY want to change the rules that say font-family: "PT Serif", Times, serif;.

    Image showing default font rule in style css file

  16. Use the search to replace each instance of font-family: "PT Serif", Times, serif; with font-family: 'Roboto', sans-serif;.

    Image showing updated Roboto font in style css file

  17. Click the blue Save Changes button at the top right of the editor.

  18. Navigate to your Omeka site and refresh the page. Notice the font changes from PT Serif to Roboto.

    Before (default PT Serif font) Image showing Omeka public page before font change

    After (updated Roboto font) Image showing Omeka public page after font change

  19. Use your browser's inspector to find out the style rules of any specific element on a web page.

  20. If you make any major mistakes and want to start from scratch, you can copy the original style.css file from GitHub, paste it into your file, and save the changes. This will revert it back to the original style.

NB It is important to note that for our purposes, we edited the default style.css file directly. This was to introduce you to CSS and making changes to the source code. Typically, you'd want to add a new file called, for example, custom.css and specify the path to that file in our source code. That way you keep your own changes distinct from the default source code files. However, that would involve editing different PHP rules which is beyond the scope of this exercise. This is very important for making upgrades. If your theme ever upgrades, you will lose all your changes if you only edited the default style.css. This applies to any file type. Therefore, you may want to keep a copy of your changes somewhere handy, like on your desktop.


More

Below are more resources, tutorials, and things to explore.

Accessibility and Design

While most of this applies to websites, think also about how the general principles apply to other ways and means of telling our data stories.

Infographics and Storytelling

Infographics

Storytelling

ManyLines

ManyLines is an application that allows you to create narratives from network graphs. In essence, you upload a network file in .gexf format (which you can export from Gephi) and it renders it on the screen. There are some layout options to make the graph more intelligible. Then, you take a series of snapshots zoomed in on the graph in different places, and add text to describe what it is that's important about these networks. The app puts a Prezi-like wrapper around your snapshots, and the whole can then be embedded in a website or be used as a standalone website. Check out my first attempt on medialab.

You can also embed nearly anything in the narrative panels — Youtube videos, timeline.js — as long as you know how to correctly format an iframe.

To give this a try, why not use the Texan Correspondence network we generated in earlier modules? Export it in .gexf format from Gephi, import to ManyLines, and go! The interface is fairly straightforward. Just follow the prompts.

Caveat Utilitor I don't know how long anything made with ManyLines will live on their website. But, knowing what you know about wget and other tools, do you see how you could archive a copy on your own machine? ManyLines is available on GitHub so you can certainly use it locally.

Leaflet

Maps can be created through a variety of services (TileMill, Carto and mapbox for instance). These can then be embedded in your webpages or documents. Often, that's enough. But sometimes, you'd like to take control, and keep all the data, all the map, under your own name, in your own webspace. Visit the gentle introduction to using leaflet.js in our supporting materials to make, style, and serve your maps. Also visit a template on my GitHub repository for mapping with leaflet, drawing all of your point data and ancillary information from a CSV file. Leaflet also has a list of background maps you can use.

Leaflet in the field: Pembroke Soundscapes Project

View the Pembroke Soundscapes Project for an example of an academic historical project using Leaflet. This project uses an interactive map with sound clips to explore the industrial history of Pembroke, Ontario.

Designing Maps with Processing and Illustrator

Nicolas Felton is a renowned designer. Watch his 90 minute workshop on Skillshare.

NB I do not use Processing or Illustrator, but Processing is free and Inkscape can do many of the things that Illustrator does.