Editing the OLH website

Open a file, write some HTML

Steps

1. Create a text file ending .html.
2. Write text in the file.
3. Mark up your text with HTML tags so that the browser understands the structure of the document: <p> for paragraph, <i> for italics, <li> for bullet list item, and so on
4. Write CSS code to add visual styling.
5. Run a command at the command line to send the files to your web server.

How it works for users

1. Your HTML is saved on your web server.
2. When the user visits a page, the web server sends your HTML document to the user’s browser for display.

Demo of HTML file and browser

Things to notice

• Browsers need markup
• Whitespace in HTML code is not very important
• All the browser is doing is opening the file and rendering the HTML
• Code is saved to the computer as plain text
• You can test any HTML by putting it in a file like this opening it in a browser, just be aware the styling will be very different
• You can write CSS code to transform the visual appearance

Your turn to make a webpage

Take 5 mins and make a webpage!

Steps

1. Open any plain text editor (not a Word processor)
   • Apple TextEdit and Windows Notepad are both good options
2. Give your file a name and save it on your desktop with the .html ending
3. Open the file in your web browser of choice.
   • You might have to right-click and tell it to open with your browser.
4. Put in some text with HTML markup.
   • Try things like <h1>, <h2>, <p>, <a>
   • See “Structuring content with HTML” on MDN Web Docs for pointers
5. Add CSS if you’re feeling adventurous.
6. Refresh the page in the browser to see the output.

Benefits and drawbacks of manual editing

Benefits

• Simple text (code) files
• Lots of flexibility with both structure and style
• You can see the output as you edit

Drawbacks

• Need to write everything by hand
• Manual version control
• Need to know about HTML
• Need to know about servers and hosting

Content management systems

Steps

1. Log into “the system”.
2. Create pieces of content (pages, blocks, etc.) and edit them in the browser.
3. Adjust formatting with menu of options like bold, italic, etc., like in MS Word.
   • What You See Is What You Get (WYSIWYG) editor
4. Save it to “the system”.

How it works for users

1. Your content is saved in a database.
2. When the user visits a page, the web app combines your content with pre-existing HTML templates (nav, footer, etc.).
3. The combined HTML document is sent to the user’s browser for display.

Demo of Janeway’s CMS

Things to notice

• You can control formatting with menu of options like bold, italic, etc., like in MS Word
  • What You See Is What You Get (WYSIWYG) editor
• But ... it’s still HTML in the background!
  • If needed, you can copy-paste it into a file on your computer and edit it there, including formatting.
• You can only work with entire pages, not blocks of content (except on homepage)
• You can only work with one page at a time
  • For example, you can’t do code searches and find-and-replace across all the HTML in the CMS

Benefits and drawbacks of simple CMS

Benefits

• You are not dependent on developers to publish
• You can easily collaborate with others since the content is accessed online
• You do not have to code the whole thing
• You can work in a WYSIWYG editor
• You can see the output as you edit

Drawbacks

• You have to work within the pre-existing structure of the CMS
• You usually have less control over visual display

The OLH website is an awkward combo

Steps

1. Create a CMS page in Janeway that connects to a file in the Hourglass repository on GitHub, using the Template field.
2. Edit the corresponding file in the templates/custom folder of the Hourglass repository.
3. A developer sends the HTML file to the server, making the changes live.

Fear not! These steps are written out in the newly updated Hourglass Content Management Guide

How it works for users

1. Your content that has been edited on GitHub is saved on the server.
2. When the user visits a page, the system (i.e. Janeway) combines the Hourglass file with pre-existing HTML templates (header, footer, etc.), instead of text from the WYSIWYG box.
3. The combined HTML is sent to the user’s browser for display.

Demo of editing the OLH site

Things to notice

• Page name corresponds to template name
• Some straight HTML, some template variables like {{ this }}
• You can always write an issue (i.e. work request) if you run into difficulty
• Saving your work is called committing on GitHub
• We use branches on GitHub for version control
  • Use the copyediting branch for content changes
• Copy-paste your HTML into a file if you need to check the output

Your turn to edit the OLH site

Take 5 mins and edit a template on GitHub.

1. Skip the part about the Janeway CMS, since this is just a practice round.
2. Find the Hourglass repository on GitHub.
3. Find the templates/custom folder.
4. There should be a file named after your initials.
5. Edit the file, using your HTML skills.
6. Commit it to the copyediting branch.

I will remove these files after the workshop.

Benefits and drawbacks of OLH site workflow

Benefits

• Structural and visual creativity
• Version control with Git

Drawbacks

• You are again dependent on developers to publish
• You have to know HTML
• You have to navigate around non-HTML code that Janeway uses to combine data with HTML like {% include 'custom/button-action-blue.html' %}
• You cannot easily see the output as you edit
  • You can if you copy-paste HTML into another file and open it in the browser
  • You can if you run Janeway on your computer like a developer