Below is most everything we'll need to style our theme (check the source code to see all the embedded elements). We'll start with headings, levels 1–6:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
H2s and H3s also appear below amongst paragraphs, so we can check their spacings. Often the separation between sections (above the heading) is set greater than between a section's heading and its first text.
Links (and their states)
A great reference making styling decisions is Practical Typography. Link-test is are best identified in at least two ways (for accessibility). Browsers underline link-text and color it blue, then purple once a link has been visited (this link cannot be visited so stays the same). Mouseover a link to see its hover styles (if any); click/touch it to see it active. All the states of a link can be styled: default, visited, hover, and active.
Text styles
This text has strong emphasis compared to this with regular emphasis. Emphasis can be different than bold and italic text, or a cite, as in A Magazine Name.
Let's not forget to style subscripts, like H2O, and the superscripts in E = MC2 or an endnote.1
We should check that an abbreviation, like HTML, has styling (maybe with a "?" cursor on hover). We may want to define what code looks like with a variable. We may use one style for deleted text and anothe for insertions. And here's some big text next to some text in a small tag.
We should determine the characters-per-line of our paragraphs: a CPL of 50-90 is considered optimum. It's wise to decide on the spacing between lines, usually a 1.25–1.5 multiple of font-size.
The above are two-line paragraph breaks. This is after a single line break. And below is a heading rule.
List types
Unordered list
List items are usually indented.
And start a list-style character, like a disc.
Nested lists are often further indented.
With a different list-style, like a open circle.
And here's a second-level of nested list.
With a different list-style, like a square.
Decide on the vertical spacing between list items.
Check vertical spacing between list items.
And check vertical spacing between nested lists.
Ordered list
The ordered list might also be indented.
And have a number as its list-style.
With more indention for a nested list.
And a different numbering style (e.g., letters or roman).
We'll likely never need a deeper nested ordered list.
But if we ever do, it should have some style.
Again, specify margins and spacings.
Definition list
The definition list has a term then its description, which is often indented under the other or side by side with the term emphasized.Definition List TitleThis is a definition list division.DefinitionAn exact statement or description of the nature, scope, or meaning of something:
our definition of what constitutes poetry.
Blockquotes
Take care to style our quote blocks differently than regular body text. Common choices are margins and a different font:
Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you. — HAL 9000
Note this quote's last line is within a <cite> tag, indicating the quote's attribution — again, often styled differently that the quote itself.
Form elements
This form code come straight from the WebAIM accessibility site, so it has the proper labels, legends, and fieldsets.
Test and textarea
Checkboxes
Radio buttons
Select menus
This menu groups the options (<optgroup>):
Form control buttons
Table
A basic default table with caption, headings, body, and footer (no colgroups, scopes, or spacings specified):
Table caption
Column 1 Heading
Column 2 Heading
Column 3 Heading
Footer (with a colspan of 3)
Row 1 cell 1 data
Row 1 cell 2
Row 1 cell 3
Row 2 cell 1
Row 2 cell 2
Row 2 cell 3
Preformatted Text
Typographically, preformatted text is not the same as code. For instance, poetry is often rendered with a <pre> tag.
"Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!"
Most browsers default render preformatted text in a monospace font like Courier.
Code
Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block:
This is: an abbrev. This sentence is within a q tag with cite and title attributes.
This sentence is italic. This sentence has emphasis. This sentence is bold. This sentence has strong emphasis. This sentence is small. This sentence is big.
This number is superscript1. This number is subscript2.
To make news more inclusive we need to diversify the people making news stories. The TOW (transmedia online workshop) is an net-based environment for learning the art and craft of multimedia storytelling. Our test TOWs had learners from a cross-section of cultures, countries (20 timezones), ages, abilities, and languages (20% were ESL).
International organizations helped identify participants, including Global Voices (Netherlands), Transom.org (USA), and the Community Media Training Organisation (Australia). We taught professionals (a Voice of Nigeria news anchor, a Cairo university journalism professor, a National Geographic story editor) and beginners. Most had never made an audio or video program.
Our goal was to quickly stimulate learners to produce quality work. Their work impressed us and others. Several of their pieces aired nationally in the United States (NPR Living on Earth, Here Be Monsters podcast) and Australia (All the Best).
The workshop was adaptive. Every assignment asked for learner feedback. Every workshop asked learners to leave tips for the next class. The TOW continually evolved into a remarkably effective tool for teaching complex tasks. We hope to continue these multimedia storytelling workshops, and add new topics including fact checking and sound design. https://hearingvoices.com/tow/
Data Visionaries and Multi-mediators:
Make any post Sing with Scripts.
Make it Splendid with Styles.
All from within WordPress. Post content before PostscriptNo more shoehorning stylesheets and JavaScripts into the post content box.
No more loading scripts on every post that only a few use.
Postscript lets you easily add libraries or single-post script and style files post-by-post.
Post content after PostscriptThe Postscript plugin tapes into the built-in WordPress “enqueue” methods. This means you can:
mprove site performance:
Clean up the post content box.
Improve site performance.
Control dependencies (when registering scripts).
Load styles in the head and scripts in the footer.
Eliminate loading multiple copies of the same library (jQuery, I’m looking at you).
What it does
Enqueue registered styles and scripts (by handle)
Use the Postscript meta box (Edit Post screen) to enqueue registered of styles and scripts (listed in checkboxes by handle.).
Enqueue unregistered styles, scripts, and data files (by URL)
For each post, you can also enqueue unregistered files, by entering in the meta boxes text fields for:
A stylesheet URL.
Two JavaScript URLs, e.g, one JSON data file and one script file.
Add post and body classes
And for each post, you can add:
Body class(es), to the HTML <body< tag (requires body_class() in theme).
Post class(es), to class="post" list (inserted by WordPress, requires post_class() in theme).
Only handles you register via the wp_enqueue_scripts hook list on Postscript’s Settings screen. This list also has handles registered by your active theme and plugins and the defaults registered by WordPress itself.
WordPress ships with a modified ThickBox jQuery library, used to make modal lightbox windows. The add_thickbox() function enables this feature, but it also loads Thickbox’s CSS and JS files on every Post, whether or not the post needs it.
This plugin improves site performance by only enqueuing scripts only when speficially requested for an individual post, by checking the Thickbox Script and Styles handles in the Postscript box. See the screenshots.
Contribute
Postscript is now on GitHub. Pull Requests welcome.
I do have a name for my RJI Fellowship project, it’s Storytelling Tools. But I don’t yet have a decent description — one that’s engaging, or even understandable.
I spout phrases like: “putting big media tools in the hands of smaller newsrooms,” “plugins that aid and enhance the digital workflow,” and “lean startup user-surveys”…
See? My explanation stinks. But I do know it’s explainable.
So I consulted a company called Tadpull, run by Jake and Eulalie Cook, a husband-wife team of UI/UX specialists. They’re good at comprehending and communicating complicated ideas. I told them everything I thought the project was, then asked them for a good way to describe it.
Tadpull distills Storytelling Tools
MS Word:
Does your media organization use WordPress? We need your help
Subhead: RJI Fellow is developing new plugins for journalists
By Barrett Golding
Large media organizations have teams and tools to help with daily tasks, all the way from finding images to fact-checking. During my nine-month RJI Fellowship at the Donald W. Reynolds Journalism Institute, I’ll adapt some of these tools for use by smaller newsrooms and freelancers.
As both a public radio producer and a Web developer, I’ve seen how a little programming can automate chores like adding pull-quotes or interacting with editors. This RJI Fellows project will create a suite of WordPress plugins — we call them Storytelling Tools — designed for journalists.
Rather than guess what people want, we’ll ask them. In August we’ll be surveying journalists, journo-coders, broadcasters, podcasters, freelancers and student media staff. The goal is to better understand writers’ digital workflows, answering questions such as:
Do writers compose in Microsoft Word or input text directly into their content management systems (CMS)?
Do editors run all articles through a fact-checking process?
How do designers, developers and authors collaborate on long-form multimedia work?
We’ll suggest potential tools and invite suggestions for others. If you’d like to take the survey, please contact us or watch the RJI site for more information.
Potential plugins for producers and writers
Mobile Preview
See how your article displays on a phone, while you enter content, without leaving the CMS. (Based on the Atavist preview feature.)
Version Vault
For audio and video producers: Use WordPress to keep track of successive versions of your media productions, and your editor’s comments on each one. (Expands on the WP Document Revisions plugin.)
[Draft of TOW Presentation to Knight Fdn; Matter, SF 2014-03-31]
Thanks to Knight. Thanks to Matter for having us here. I’m Barrett Golding of the public media website, Transom.org.
Knight invests in the future of journalism. Our project is an investment in future journalists.
Everyone with a smartphone has a journalist’s field-kit in their pocket — camera, recorder, notepad. Every computer can be a multimedia production suite. People have the journalist’s tools, but not the skills. So how do we reach across the globe to turn media consumers into media producers?
The Transom Online Workshop — we call it the TOW. It’s an online environment for learning the art and craft of multimedia storytelling. The TOW lives at Transom, with all our public media resources, used by thousands every day — we’re the first website to win a Peabody Award.
[~1min]
Our prototype is tested and validated by users. We’re ready to take what we know, and make the product: a new type of online courseware, designed to train people in complex, creative, communication-based skills.
[Start video. Numbers below refer to slide in video.]
Here’s what we did and what we learned. We ran three workshops, about six weeks each. We had 60 learners from six continents in 20 timezones. What they made impressed us, and others: Some stories already aired nationally in Australia. One woman used hers to get an internship at KPCC in L.A..
[1] They did fundamental exercises: Go out, interview strangers with this question: “What are you afraid of?”
Then make a story: with a beginning, middle, and end.
[2] First week, they take a photo and three sentences from their best interview. A French learner living in Mexico made this one. [pause]
[3] A news anchor for the Voice of Nigeria made this. English was a second language for some learners, so we got to test that too. [pause]
[4] The next week, more interviews, same question, but for a radio piece. This was by a university professor in Russia. [pause]
[~2min]
[5] Then, a video. This is about a guy who got shot, and ended up in a wheelchair. The producer had never made a video story before.
[Video (w/ audio) plays for 13sec.]
I’ll post the URL so you can see the rest.
[6] There’s people from four continents is this one conversation.
A Lebanese learner said her fear was “interviewing strangers.” But soon she’d talked to “Philipinos, Indians, Europeans, and Arabs.”
[Video over.]
Conversation is King. We knew from the start we’d need an immersive discussion tool. And we knew learners preferred to have everything in one place.
But the Learning Management Systems we tested had forums that couldn’t embed media, and the discussions that silo-ed, separate from the rest of the course.
[~3min]
That’s not like a real conversation, and it’s not like a real class.
So, Plan B, just for the prototype, we used a free, billion-dollar tool: Facebook.
This saved us weeks of dev time and thousands of dollars. In a month we had fully functional prototype. We hired a UX firm to do user interviews, and collected real-time data: not just surveys after the class, but during, weekly, while the experience was fresh.
We found out what worked, what didn’t work, and what needed work.
One thing that worked was Project-Based Learning. These stories the learners made were the core of the class, and became the learner’s portfolio.
And we used their best stories as assignment examples, made by their peers — we know that’s effective. How? From the surveys.
[~4min]
The surveys told us we had holes in our learning materials. Like beginners didn’t get video “b-roll”, and there was no good tutorial, so we commissioned one. Boom: learner videos got better. Our tutorial got picked up by filmmaker blogs; in a week, it had 10,000 views.
One class helps the next, and helps people outside the class. It’s education evolution. Right now, TOW alums are in a new discussion group. Anyone can join; they all help each become better journalists.
We have a successful prototype. It’s time for the product: an online courseware built to train people in complex, creative skills; built from the discussion up — so it all happens in one place, like in a face-to-face class; courseware that produces better stories, and better storytellers, all over the world.
[~5min]
Thalia
Honestly, this assignment shows and reflects one of the fears we have. We could have interviewed ourselves and answered: “I am afraid of reaching out to people and interviewing them.”
November 1, 2013
Ben Thalia, I know it’s scary, but what’s the worst that could happen.
Brock You can do it, Thalia! Maybe think about where you are going, and try to catch people who are in places that they are more likely to pause (e.g. parks). Yesterday as I was at the university where just about everyone I approached was happy to talk. Try to increase you chances before you start.
Kate Hang in there, Thalia! I spent yesterday evening in a shopping centre and it was brutal: the amount of people who wouldn’t talk to me. But then some people did and it was ok! This assignment feels like an exercise in bravery as much as it is about finding a story.
Thalia Thanks for your support. I finally did it. I happened to be outside my country, Lebanon, on a vacation in Dubai, so that was also another challenge. But the good thing is Dubai is a cosmopolitan city, so I’ve interviewed Philipinos, Indians, Europeans, and Arabs.
Thalia, I know it’s scary, but what’s the worst that could happen.
You can do it, Thalia! Maybe think about where you are going, and try to catch people who are in places that they are more likely to pause (e.g. parks). Yesterday as I was at the university where just about everyone I approached was happy to talk. Try to increase you chances before you start.
Hang in there, Thalia! I spent yesterday evening in a shopping centre and it was brutal: the amount of people who wouldn’t talk to me. But then some people did and it was ok! This assignment feels like an exercise in bravery as much as it is about finding a story.
