Week 2 - Interactive News Editing and Producing

Interactive News Editing and
ProductionThursday, Jan. 15

• Recap
• HTML II
• Web headlines
• First data visualization exercise
• Homework
Today’s agenda

NYT’s El Capitan’s Dawn Wall:
http://nyti.ms/1zfzK8v
Victory Journal’s El Duque: http://bit.ly/1u8tx7p
WaPo’s Refuge: http://wapo.st/1yjM9qF
NYT’s Field Goal: http://nyti.ms/14ZCVVc
Narrative storytelling

In 2015, you’ll a lot of focus on the curated news
experience. One goal: How do you bring order to
digital info?
Social
Personalization
Customization
Location
Expertise
The ‘News Mix Tape’ reading

On Wednesday, we explored what HTML was
and how it’s used.
• CSS vs. HTML
• Structure of an HTML page
• Applied core HTML tags like <p>, <h1>,
<body>, <strong> and <head>
• Played a bit with lists
• Any lingering questions?
Recap

• Links
• Images
• Pathing
• Non-semantic tags (<div> <span>)
Today’s HTML agenda

• Links simply are the web
• In HTML, you create a links using the <a>
tag, which has the attribute of href.
• The value of the href attribute is the
destination link/page.
Anchor tags

• Link to page on same site: <a
href=“otherpage.html”>Another page</a>
• Offsite link: <a
href=“http://www.coolpage.com”>Cool web
page</a>
• Link opened in new window: <a
href=“http://www.coolpage.com”
target=“_blank”>Cool web page</a>
• Link launching email client: <a
href=“mailto:kgessler@tribune.com”>Email
Kurt</a>
Anchor tags

With a little CSS, the <a> tag also can be used
to link to places on the same page.
ID is a CSS selector. More later.
<h1 id=“return”>This is our main hed</h1>
<a href=“#return”>Return of top of page</a>
Anchor tags

<html>
<body>
<h1 id=“return”>This is our main hed</h1>
<p>Huge story on something long and
important.</p>
<a href=“#return”>Return of top of
page</a>
</body>
</head>
Anchor tags

• Open the file lesson3.html
• Make the title of the page “Breakfast recipes”
• Add a link near the bottom of the story which opens a new
window and takes you to the following page:
http://www.marthastewart.com/326883/bacon-pancakes via the
text “full recipe”
• Add a link at the very bottom of the page that takes you back to
the top using the ID #top
• Extra I: Add a link below the “Makes 8 pancakes” text that allows
a reader to email you if they have questions or comments.
• Extra II: Add links right above the prep time text that take you to
the ingredients and instructions sections using the following IDs:
#ingredients and #instructions
Lesson 3

Two types of paths: absolute and relative
• Absolute paths start with the protocol and
server (the domain name) and end with
path/file.
• Relative paths are HTML shorthand to finding
a document, image etc.
Pathing

Absolute or relative?
• fiskheatstroke.html
• http://www.fisk206heatstroke.com
• ./images/fisk206heatstroke.jpg
• images/fisk206heatstroke.jpg
• #pagetop
Pathing

• A very important part of each project is
determining where data will live.
• Then, when you create a folder structure, you
can put everything (images, audio,
documents) in the right folders from the
onset.
• Using relative URLs makes moving servers
easy, germane if you’re developing on a
staging server.
Pathing

• Download and unzip the Lesson 4 file
• We’ll together explore the image pathing in
the HTML document
Lesson 4

Types of images you’ll use for your site/app:
• .jpeg/.jpg: Can be a smaller file size (save for
web); good all-purpose choice for content.
• .png: Small file size; full transparency; older
browsers gag on them
• .gif: Small file size; some transparency;
supports animation
Don’t use .tiff, .bmp, .svg
Images

• To add an image to your page (as content, in
HTML) you need to use an <img> tag
• You must use two attributes: src and alt
• src tells your browser the location of your
image
• The alt attribute provides a text description
Images

Note: You also can add images to your pages
in other ways, like through CSS and JS, but
that tends to be considered style data not
content.
CSS: background-image:url(‘heat.gif’);
Images

In HTML5, you should wrap your <img> tags in
<figure> tags and use <figcaption> if
appropriate.
<figure>
<img src=“Baconpancakes2.jpg” alt=“bacon
pancakes” />
<figcaption>Pancakes cooking</figcaption>
</figure>
Images

• Download the file lesson5.html
• Add the photo baconpancakes1.jpg above the
“Ingredients” hed. Use the <figure> and <figcaption>
tags. Set alt text.
• Add the photo Baconpancakes2.jpg above the
“Instructions” hed using <figure> and <figcaption> and
alt text.
• Extra I: Get the embed code from this video and put it
anywhere on our page:
http://www.youtube.com/watch?v=TrcT7sseLZI
• Extra II: Make one of the images link to another recipe
for bacon pancakes, opening a new window.
Lesson 5

Non-semantic tags have no defined meaning.
• <div> tag allows you to group a set of block-
level elements together. Block level elements
render on different lines
• <span> tags allow you to group inline
elements. Inline elements render on the
same line
Non-semantic tags

<div>
<h1>This is an article’s headline</h1>
<p>This is the text of an article, with a link to
the <a href=”story1.html”>full story</a>.</p>
</div>
<p>Is there just <span>part of the text</span>
you’re worried about?</p>
Non-semantic tags

• Open lesson5.html again
• Put <div> tags around your <ol>, starting
below your <h3> Instructions hed and ending
after </ol>
• Put <span> tags around the text “30 minutes”
• Save
• What happened to your document?
Lesson 5.1
Nothing

<div> and <span> tags are empty elements.
They have no styling unless you apply it.
Let’s add a dash of inline CSS:
<div style=“font-size: .8em;”>
<span style=“color: red”>
Non-semantic tags

Complete for homework. Instructions are within
the cleverly named file lesson6.html.
Lesson 6

Writing effective web headlines
• The headline is the first, and likely only,
shot you have at attracting a reader.
• Unlike a printed publication, you most
likely do not get a subhead, pullquote,
graphic or even a photo.
• You probably get 6-8 words.
• How can you pick the right ones?

How well do
these print
headlines
translate
online?

Without a good headline, you
render as inconsequential the
words that follow.
Those words, that story, might as
well not exist.

Headlines I’ve inherited while
running chicagotribune.com.

• Putting Chicago’s violence on the table
• ER in the line of fire
• Basketball courts trouble AND Basketball takes
bad bounce in blame game
• Just a lease, but in Illinois it’s complicated
• Cheater, cheater
• Zombie government
• Eat this!
Ineffective web headlines

Old: Farrell grateful for Gabel apology but wants him out of
sports
New: Victim wants ex-Olympian banned after speedskating
sex scandal
Old: Redflex expanding investigation into its conduct
New: Chicago's red light camera firm expanding bribery
investigation
Old: Jeb Bush says he is not thinking about presidential bid
New: Jeb Bush calls media 'crack addicts' after more
presidential pestering

Old: U.S. agents tapping servers of leading Internet
companies: report
New: U.S. spy program snooping into Americans' searches,
emails, calls
Old: Man charged in Uptown shooting that wounded boy,
14
New: Suspect in Uptown shooting has gun tattoo on face
Old: Two charged in death of man buried on Southwest
Side
New: Dad, daughter charged in dismemberment death

Old: Trump testifies in Chicago about condo deal
New: Trump takes stand on condo deal: ‘I don't want to be
braggadocious’
Old: Rare A5 wagyu at Roka Akor
New: Some of world’s most expensive beef on sale at River
North restaurant
Old: Death toll from earthquake in Pakistan rises to 327
New: New island formed after massive Pakistan quake

Old: As a math problem, Wallenda wire walk was
complicated
New: Wire fraud? High school students double-check Nik
Wallenda's math
Old: Faith, trust and the Willis family
New: Remembering the deaths that exposed corruption in
Illinois
Old: Made from scratch in Chicago
New: Chicago firm crafts guitars for U2, Black Sabbath

Old: Governor opposes tax incentives without pension fix
New: Gov. Quinn to lawmakers: No ADM tax break without
pension deal
Old: 7 months later, a gift to mom
New: Man charged with murder of aspiring chef in Logan
Square
Old: Jumbo-size hitch in Wrigley talks
New: Cubs want giant video screen in Wrigley: source

Within 5 minutes,
traffic to this story
tripled. By the
second hour, it
tracked 6 times
higher.

This story went from not even tracking on
real-time metrics to a top 5 story for the day.

This story went from not even tracking on
real-time metrics to top 10 on the site.

• First few words are critical: front load
• Be focused and literal
• Have an active voice
• Favor proper nouns (names, teams, locations)
• Minimum 40 characters; max 77 characters
• How-to’s, lists and tips CAN make compelling heds
• Specific or vague? Both have a place
• Heds with 8 words perform best. These received a
21% higher CTR than average.*
*Outbrain
Headline tips

• How are people seeing your headlines? There’s
often less context with RSS, readers, social media
• Clarity > clever
• Is the writer important?
• Ask a critical question
• Pique a reader’s curiosity (but don’t clickbait)
• Does it focus on impact and implications?
• Have a great quote? Use it
• Use metrics (Chartbeat/Outbrain) but trust yourself
Headline tips

Most puns suck.
You assume the reader gets the joke.
You assume there are no language
barriers.
You assume originality, that your pun
hasn’t been used dozens of times
already.
And worst, you assume there’s
nothing more interesting in the

Toxic headline words:
• Parcel
• Zoning
• Ordinance
• Interim
• Incident
• Issue
• Protocol

But the most important tip isn’t hard to
understand.
Make absolutely sure the most
interesting, most important part of the
story is conveyed in your headline.
And that sometimes takes time.

a) We’ll miss you, Michael
b) ‘King of Pop’ dies at 50
c) World mourns loss of controversial pop
icon Jackson
d) Michael Jackson dies on eve of
comeback tour
Quick quiz

a) Zorn: It’s all about the money
b) Sleight of cam
c) Red light cameras out; speed cameras in.
Coincidence?
d) Zorn: Timing suspicious in Chicago’s
speed camera swap
Quick quiz

Improve these headlines (I already had to):
1. Think twice before buying breast milk online:
study (http://trib.in/1xinnlo)
2. Uber Expects to Cha-Ching in the New Year
with 2 million rides (http://trib.in/1xVMuPG)
You have 10 minutes. In a newsroom, you’d
have 2.
File: headline-workshops.docx.
Exploration I

• Google Fusion maps are one of the quickest and
easiest spatial visualizations.
• Plot data based on raw addresses, geopoints
(lat/long), KML information.
• Customizable, but only to a point.
• To create based on external data, select “New”
then “More/Google Fusion Tables”
Google Fusion Tables

Create a Google Fusion document based on the
the file chicagospeedcameras.csv.
This is a simple file with predetermined geopoints
(lat/long) and marker_icons.
We’ll import, customize the info window and
marker icons, and publish.
Exploration I: GFT geopoints

Toggle over to the map tab
Select “Change info window”
Options: Automatic (checkbox
based on your columns) or
Custom (based on columns +
inline HTML)
Ex.: <div class='googft-info-
window' style='width:250px;
height:100%'>
Customizing the info windows

For fixed, you have 10 basic icons …
https://support.google.com/fusiontables/answer/2679986?hl=en&ref_topic=2575652
or 200 more advanced ones.
https://support.google.com/fusiontables/answer/2679986?hl=en
You can use custom icons as well:
https://developers.google.com/maps/tutorials/customizing/custom-markers
Customizing marker icons

Select “Change feature styles”
Your options? Fixed, Column, Buckets:
• Fixed: Specify a single style to be used for all
elements on the map.
• Column: Provide a specification for each row's
display in one of your table's data columns..
• Buckets: Specify two or more number ranges,
and give each range a style. Style is assigned to
each row based on the value in a numeric data
column.
Customizing marker icons

• Select Tools/Publish, Change
visibility/Change/Public on the web/Done
• Re-select Publish, and specific your embed
width and format (iframe embed or HTML + JS)
• Paste embed code onto your page
Publishing

Create a Google Fusion document based on the
the file bibgourmand2014.xlsx.
This file only contains addresses not geopoints.
We’ll import how Google manages this process
and what adjustments we need to make.
Exploration II: addresses

To select which column is plotted, toggle over to
Map of Area, click on “Map of …” and select
“Select Location” and the column desired.
Exploration II: addresses

• Create a map illustrating what areas got the
most snow from the recent winter storm.
• Use “buckets” to plot by the data by colors.
• Follow one of two paths listed at the top of
snowfall-template.html in the mapping folder,
using the files town-coords.xlsx, snowfall-
template.html and snowfall-20150106.xlsx or
nws-rawdata.docx.
• Paste the embed code into the file snowfall-
template.html.
Lesson I: Snowfall map

• Headlines (headline-homework.docx)
• HTML (lesson6.html)
• Google Fusion Table: snowfall map
• Duckett, chapters 4 and 5
• Good reading: “Finishable” news experiences:
http://bit.ly/1x6rouj AND http://bit.ly/1x6rouj
• Good reading: Data Driven ebook on class site
Week 2 homework

Deadline: Tuesday, Jan. 20, 11:59 p.m.
Rename files, appending your last name, add as
an attachment and email to
kurtgessler@gmail.com
• gessler-headline-homework.docx
• gessler-lesson6.html
• gessler-snowfall-template.html
Week 2 homework

• Breaking news writing
• HTML III
• Google Fusion Tables II (polygons)
• WordPress CMS
Next week

Week 2 - Interactive News Editing and Producing

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (8)

Similar to Week 2 - Interactive News Editing and Producing

Similar to Week 2 - Interactive News Editing and Producing (20)

Recently uploaded

Recently uploaded (20)

Week 2 - Interactive News Editing and Producing