Catalyst – Drupal Content Managers – The Web

View Github Repository Open presentation in a new window

Juterpillar

See all presentation from Juterpillar

Catalyst – Drupal Content Managers – The Web

0 0

drupal-content-managers

Reveal.js slide set for the Catalyst Drupal Content Managers course

On Github Juterpillar / drupal-content-managers

Catalyst

Drupal Content Managers

Presented by Julia Larsen

Hi! I'm Julia.

  • Drupal dev 1.5 years
  • Worked on nzpost stamps website, ministry of health, IRD, LINZ, Catalyst website
  • In other lives I've been a Art Consultant, Travel Consultant and Project Manager
  • Outside of work: Jet, drawing/painting, motorbikes, wine

Housekeeping

Follow along at http://memoirdiem.com/drupal-content-managers/

  • Toliets, fire alarms
  • Breaks
  • Style of the day
  • Questions

Agenda

  • Overview of the web
  • HTML / CSS
  • Writing for web
  • Accessibility
  • Drupal & WYSIWYG
    • Overview
    • Content editing
    • Useful modules
    • Users and roles
  • Your topic here
  • Overview of the web, what it's made of and the basics of how it works
  • HTML / CSS: content and presentation. key elements, semantics
  • The fundamentals of writing for web: tone, jargon
  • Accessibility: why, how
  • Drupal
    • Overview
    • Content editing
    • Useful modules
    • Users and roles
    • Do some exercises and play in a test environment
  • Your topic here: extra time. We can discuss at lunch

The Web

What is it?

Start with a techical background

The Web is made of...

  • Content (HTML), including:
    • Text
    • Multimedia (images, audio, video)
    • Embedded content (iframes, flash)
  • Presentation - layout and style (CSS)
  • Dynamic fancy stuff (Javascript)
  • Request mechanism (HTTP)
  • Address mechanism (URL)
  • Text: paragraphs, headings, lists
  • Multimedia (images - png/gif/jpegs/svg, audio, video)
  • Embedded content (iframes: youtube videos, flash)

HyperText Markup Language (HTML)

Open standard for representing semantic web content

HTML has been through a number of different iterations over the past 20 years. It's currently on version 5. It's an open web standard, which makes it the natural choice for all web content - there're no dominant proprietary interests involved in changing the definition of the markup format - it's determined by a multi-vendor committee.

Useful links

Each HTML element tells the browser something about the information that sits between its opening and closing tags.

Jon Duckett

Some fundamental tags

<p>paragraph</p>
<h1>Heading 1</h1>  <h2>Heading 2</h2>  <h3>Heading 3</h3>
<ul>Unordered list</ul>
<ol>Ordered list</ol>
<li>list item</li>
<img src="path/to-image.jpg" alt="img example">
<a href="/path-to-link">Anchor or link</a>

Useful HTML resources

Cascading Style Sheets (CSS)

Open standard for layout and presentation

Cascading Style Sheets (CSS)

The main reason for CSS: Separating "content" from "presentation"

See CSS Zen Garden for a taste.

Why do that:

  • same content to different media devices: browser, tablet, phone, TV, fridge, braille.
  • machine readability

Javascript

Scripting language built into all modern browsers used to program the behavior of web pages

Some examples:

HyperText Transfer Protocol (HTTP)

You might recognise

http://...

Increasingly you should be seeing:

https://...

HTTP and HTTPS are used to request a URL from a remote location.

for more info, http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Uniform Resource Locator (URL)

Your request in your browser:

http://www.somehost.com/path/file.html

Your browser asks your computer to get the IP address corresonding to www.somehost.com

Your browser sends that IP this request:

GET /path/file.html HTTP/1.0 From: someuser@jmarshall.com User-Agent: HTTPTool/1.0

If the server is listening, your browser gets a response from www.somehost.com:

HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354

... and your browser gets a bunch of HTML which it turns into a web page.

Further information on this.

Write for your audience!

The basics of web writing

  • Visitors have (approximately) zero patience
  • Less is more
  • Lists are great
  • Simple, short, sections
  • how long do people stay on web pages? 10-20 seconds seems to be the general consensus

Tone

  • Be authentic
  • Be consistent
  • Be appropriate
http://www.smashingmagazine.com/2012/08/21/finding-tone-voice

Compare

Casual example: http://www.powershop.co.nz

Formal example: http://www.justice.govt.nz

  • Powershop: light hearted "fight the power", fun "geeks", casual "no drama", kiwi "yarn"
  • Justice: formal, factual, straight to the point, jargon, official sounding

Style guide

  • A style guide is a set of guidelines to ensure an appropriate tone and consistency.
  • It can be very basic or very detailed.
  • It can be used as a basis for auditing.
  • It can be documented in the website itself - Drupal book module

Jargone / Hemingway Editor

Jargone is a bookmarklet for highlighting jargon words on any page.

Hemingway app makes your writing bold and clear

Some other useful links

Accessibility

dsc001.jpg, image

Too many images online are read by screen readers like this. It gives no value or insight into the image being display.
This is how sighted viewers would see the same image.

Text equivalents for images

<img src="img/dsc001.jpg" alt="3 girls and a cat flying out of sea biscuit">
  • "Alt text" is alternative text if the image isn't displayed
  • Provide alt text for all content images
  • Make the alt text succinct, 4-6 words, avoid use of "image of"
  • Image links: alt text describes the function of the image
  • Decorative images: no alt text eg alt=""

Use correct (semantic) html markup

  • Heading tags for headings 
    <h2>This is a heading</h2>
  • List tags for lists 
    <ol>
  <li>This is an ordered (numbered) list</li>
</ol>

<ul>
  <li>This is an unordered list</li>
</ul>
Heading tags are particularly important because they are an effective means for screen readers to tab/skim through a page. If you are using bold text or color/size to distinguish headings, they will not be identified properly be screenreaders.

Descriptive links

Link text should:

  • Describe the link's purpose
  • Be consistent
  • Never just be "Click here" (or similiar)
Visually impaired web users often shortcut all the links of the page to navigate. The link text is then pulled out of context. Imagine having 10 links listed that say 'click here'. It's not very useful.

Videos

  • Provide a transcript, captions, and/or sign language translation for all audio and video with speech
  • Provide a “described” version of a video when description is necessary for unsighted users to understand content.
(The described audio track can either be distributed with the video content, or as an audio only file.) eg: https://www.makingtaxsimpler.ird.govt.nz/

Do not rely on visual cues for meaning

  • Do not require users to perceive font, color, or other styling changes in order to understand meaning
For instance, don’t say, “The highlighted word in the previous paragraph is the most important,” or “Items marked in red are errors and need to be corrected,” unless the word or items are indicated in some other way.

Useful accessibility resources

Color contrast checker

Do the Accessibility course!

Julius Serrano - Accessibility Expert

http://bit.ly/1EcsVBb

WYSIWYG

What you see is (kind of) what you get

WYSIWYG: Reasons to love

  • Reminds us of Microsoft Word
  • Clicking buttons is easy
  • Hides the html

WYSIWYG: Reasons to hate

  • The web is not Microsoft word
  • Can (and often does) produce less than ideal HTML
  • Does not teach you anything
Intro video

Here's one I prepared earlier...

http://test-ccmc.pantheon.io
  • Create accounts
  • Log in
  • Add a page

WYSIWYG in action

  • Initial ckeditor configuration
  • button layout
  • paste from word
  • embedding media
  • spell checkers
  • Full vs Filtered
  • Source
  • Headings
  • Bold
  • Italics
  • Tables
  • Blockquote
  • Remove format
  • Alignment
  • Anchor
  • Links
  • Images
  • Videos
  • Pasting from word
  • Tables
  • EXERCISE: take some content and recreate in WYSIWYG

Your turn!

  • Headings
  • Bold
  • Italics
  • Tables
  • Blockquote
  • Remove format
  • Alignment
  • Anchor/Links
  • Images
  • Videos
  • Pasting from word

More editing:

  • Menus
  • Blocks
  • Taxonomy

Users and roles

  • User: An individual that is assigned one or more role/s
  • Role: A set of permissions
  • Permissions: The ability to view, add, change, delete, administer aspects fo the site

Advanced

What interests you?

  • Views?
  • Panels?
  • Bootstrap?
  • Rules?
  • Honeypot?
  • Webform?
  • Linkit?
  • Pantheon?

Learn more

Ask questions!

Thanks to:

  • Julius Serrano (Accessibility Expert)
  • Sean Hamlin (Drupal Dev)
  • Dave Lane (Drupal Dev)
  • This open source browser-based presentation software (Reveal.js) created by Hakim el Hattab.

open source technologists

Catalyst Drupal Content Managers Presented by Julia Larsen