Northwestern University presentation for Journalism 451 week 1 in the winter 2015 quarter

1. Interactive News Editing and
ProductionThursday, Jan. 8

2. • Talk about ourselves and our focus
• Class logistics
• How the web works
• HTML I
• Narrative storytelling
• First data visualization exercise
• Homework
Today

3. • Your name
• Hometown
• Undergraduate degree
• Personal history
• Previous employment
• Professional passion(s)
• Most want to learn in this class
Introduce yourself

4. Class site canvas (http://bit.ly/1AuuRsH)
Class structure:
• 3-hour class with a 50-minute optional lab
• Mostly hands-on workshops and focused
assignments
• No final project
Grading: Homework 40%, workshops 40%,
engagement 20%
Logistics

5. • Plain text editor like Textwrangler (Macs) or Notepad++
(PCs)
• Newest versions of Chrome and Firefox w/Firebug
• Photoshop or other photo editing software
• Non-NU Google account connected with Google Fusion
Tables
• Twitter account
What you need
• “HTML & CSS: Design and Build
Websites” by Jon Duckett
• “Don’t Make Me Think Revisited”
by Steve Krug

6. Officially Friday from around 4:30 p.m. in the
Loop campus. Doesn’t hurt emailing me as
well.
kurtgessler@gmail.com
kurt.gessler@northwestern.edu
kgessler@tribune.com
Office hours

7. “The purpose of the schools [is] to, as one
teacher argues, ‘Teach carpentry, not hammer.’
We need to teach the whys and ways of the
world. Tools come and tools go. Teaching our
children tools limits their knowledge to these
tools and hence limits their futures.”
- Michael Bellino, an electrical engineer at
Boston University's Center for Space Physics
‘Teach carpentry, not hammer’

8. Journalism 451 is a digital laboratory designed
to arm you with the perspective and essential
skills to be at the epicenter of a digital
newsroom, assessing, sometimes swiftly, what
needs to be done and how and when to do it.
It’s more than just tools, because tools change
and evolve. You need to know why we use
them.
And it’s real.
What this class is about

9. • Fundamental knowledge of how the web works
• HTML5, CSS and responsive web design
• CMS basics
• Digital storytelling and data visualization tools
• Breaking news writing, content curation and writing from
multiple sources
• Headline writing
• SEO and identifying trends
• Analytics and audience analysis
• Social media
Core concepts

10. Deep dive into web development
A long hand-holding-type project you could
never replicate away from the class
Long-form lamentation of journalism or ivory
tower navel-gazing at NYT Innovation Report
What this class isn’t about

11. How the web works

12. The first ARPANET link
was established
between UCLA and the
Stanford Research
Institute on Oct. 29,
1969 …
But that’s not what
we’re talking about. At
all.
How the web works

13. We want to answer the question: “What’s your
browser doing when it displays a page?”
Exploration of that question has many
pragmatic implications as you work on the web.
How the web works

14. • You enter a URL into your browser, such as
Chrome or Firefox.
• Vocab: URL = Uniform Resource Locator
• That URL gets parsed by your browser in this
format: <protocol>://<server>/<path/file>
http://www.northwestern.edu/admissions/graduate.ht
ml
Finding your web page

15. • The protocol defines the how computers will
communicate. In this example, it’s “http” or
Hypertext Transfer Protocol.
• The server tells your computer the name of
the computer serving the requested page.
• The path indicates which page you’re
interested in accessing on the requested
website.
Finding your web page

16. Two important takeways: case sensitivity and
paths
Are these paths the same?
www.redeye.com/News/Story.html
www.redeye.com/news/story.html
No. Web files and directories are case
sensitive.
Finding your web page

17. In the following example, what does
“admissions” represent in the file structure?
http://www.northwestern.edu/admissions/graduate.ht
ml
A folder. And graduate.html is an html
document.
Finding your web page

18. • Now that your browser has chopped up the
URL, it can get down to work, which is
establishing a communication session with
the requested server.
• Vocab: These computers are called “web
servers”, because they respond to (i.e. serve)
requests from “clients,” like your browser.
Finding your web page

19. • Your browser now uses the internet’s phone
book: the Domain Name System (DNS). It’s
how clients, like your browser, convert a
server name into its corresponding IP
address.
• Want to look up a name in DNS? Visit
http://www.webmaster-toolkit.com/dns-
query.shtml
Finding your web page

20. • When you type in chicagotribune.com that
resolves to 184.26.143.177
• These numbers are called IP (Internet
Protocol) addresses. They are generally 10
or 12 digits.
• Want to find your IP address?
http://whatismyipaddress.com
Finding your web page

21. Next, your computer sends something called an
HTTP (Hypertext Transfer Protocol) request.
One of two things happen:
• If it can find the page you requested, it
returns it in an HTTP response
• If the server can’t find the page you
requested, it returns a “404 page not found”
response
Making a connection

22. • If it a successful connection is established,
the actual content starts to be transferred and
presented by your browser
• The format it follows? HTML (HyperText
Markup Language)
• That information may be in one place (on one
server). It, most likely, is not.
Making a connection

24. A web page is controlled by three parts:
• HTML controls the structure of a web page
• CSS controls the presentation
• Javascript controls its behavior (drag and
drop, swipe, dynamic style changes, button
functionality)
Web page structure

26. • How does a browser render a web page?
• It chops up elements to form a Document
Object Model (DOM) tree.
Read more? http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction
Web page structure

28. • OK, you’ve typed a URL, it’s been DNS
resolved to an IP address. We’ve made a
successful connection
• Now, data (web documents, images) are
transferred to your web cache
• A web cache is a mechanism for the
temporary storage (caching) of web
documents to reduce bandwidth usage,
server load and lag
Data caching

29. Why are some webpages slow to load while
others are speedy?
• Too many requests/high traffic
• Too many off-server requests
• HTML/CSS errors
• File sizes, especially images
Web page lag

30. Manage your images properly before you FTP
them to your image or web server.
Web page lag
• Always save for
web and
devices
• Size them
appropriately
(never enlarge)

31. • You told your browser you wanted to visit a
particular URL
• Your browser parsed the URL
• Your browser used the DNS system to
convert the user-friendly name into an IP
address
• You connected to the IP address
• Your browser sent the server an HTTP
request asking for a copy of the HTML
document
Anatomy of a page load

32. • The server found the requested HTML
document and returned it to your browser via
an HTTP response
• Your browser interpreted and displayed the
HTML document, gathering all needed
resources and storing them in your web
cache
Read more: http://www.stanford.edu/class/msande91si/www-
spr04/readings/week1/InternetWhitepaper.htm
Anatomy of a page load

33. • View source
• Chrome Inspect Element
• Firebug app for Firefox
A few tips and tools

34. Takeaways
• Know what a URL means, from the IP
address to the path
• The internet is case sensitive
• Know the parts of the web page
• Know the importance of file sizes
• Remember your debugging tips

36. HTML I

37. • HTML is a language for describing web
pages. It houses and describes content within
sets of tags. It stands for HyperText Markup
Language.
• HTML is not a programming language. It is a
markup language.
• We’ll be using HTML5 with some XHTML
standards.
What is HTML?

38. • HTML controls the structure of a web page.
• CSS controls the presentation.
• Javascript controls its behavior.
Good, clean HTML contains no style
information.
What does HTML do?

39. • HTML uses tags in documents to describe
the structure of pages.
• Most tags will involve both an opening and a
closing tag.
• Each tag tells the browser something about
the data within each container.
How does it work?

40. • HTML is delivered as a “documents.” These
are then parsed, which turns them into the
Document Object Model (DOM) within a web
browser.
• As they are parsed, “elements” are generated
from each “tag.”
• On your HTML document they are “tags;” on
your website, they are “elements.” Move
along.
Super perfectionist alert …

41. <html>Start and end of an HTML document</html>
<head>Metadata, style, script</head>
<body>Main content area</body>
<p>This is a paragraph of normal text</p>
<h1>This is the most important headline</h1>
<h6>This is the least important headline</h6>
<strong>This is bold text</strong>
<em>This is italicized text</em>
<blockquote>Sets this text apart</blockquote>
Basic HTML5 tags

42. <a>Links</a>
<span>Unstyled tag for inline elements<span>
<figure><figcaption> HTML5 image and caption containers
<img /> Image call
<ul><ol><li> List tags and items
<aside><header><footer><hgroup><section><nav><article
> HTML semantic containers
<div>Unstyled container for block-level elements</div>
<hr /> Horizontal rule
<br /> Line break
More HTML5 tags

43. Empty tags are “elements” that contain no
content, such as <hr> or <br>, and are usually
styled <br /> or <hr /> <img /> under XHTML
standards.
<img src=“http://coolpic.jpg” alt=“cool pic” />
Empty tags

44. DON’T USE ALL CAPS FOR TAGS.
It works, but it’s poor (deprecated) form.
In fact, lots of bad things work fine, but don’t do
them.
Speaking HTML

45. • Opening tags contain attributes.
• They give more information about how to
render the information contained in the tag.
<a href=“http://fakelink.edu”></a>
HTML attributes

47. HTML5 is a semantic system, meaning the tags
tell browsers how to interpret them. Not styles,
per se, but presentation clues. This helps with:
• SEO, page maintenance, accessibility
Again, though, styling is left to CSS not HTML
Markup with meaning

48. <strong> not <b>
<em> not <i>
<blockquote>
<address>
<cite>
Browsers will often apply a style as they render
these. But you can override.
Markup with meaning

49. Good HTML structure will allow you to apply
styles to relative positions.
<article>
<h1>header</h1>
<p>CTA ghost trains are <em>very</em>scary</p>
</article>
<article> is the parent of <h1> and <p>. <h1>
and <p> are children from <article>. <p> is the
parent of <em>
Parents and children

50. It’s valid structure. But when you nest tags, you
close the tags in the opposite order that you
opened them.
Yes: <strong>This is <em>right</em></strong>
No: <strong>This is <em>right</strong></em>
Nesting tags

51. <!DOCTYPE html>
<html>
<head>
META/STYLE/SCRIPT INFO
</head>
<body>
CONTENT
</body>
</html>
Simple HTML5 page structure

52. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf‐8" />
<title>TITLE GOES
HERE</title> <link
rel="stylesheet” type="text/css"
href="style.css" />
</head>
<body>CONTENT GOES HERE
</body>
</html>
HTML-to-English translation
Tells browser "this is an HTML
file”
Let’s converse in English
Starts metadata
Translate characters this way
Appears in your browser tab
Get presentation info here
I’m done with the metadata
Start main content area
End of the main content area
“All done with this page”

53. 1. Open the file lesson1.html with your text
editor
2. Make the changes detailed in the
commented out section at the top of the file: <!-
- COMMENTS -->
3. Save
4. Open your file with Safari/Firefox/Chrome to
see changes
Lesson I

54. There are three types of lists: ordered lists
<ol>, unordered lists <ul>, definition lists <dl>.
• Ordered lists are used for sequential lists
like instructions for assembling a box
• Unordered lists used bullet points rather
than characters
• Definition lists really aren’t used much
Lists

55. Note: You can change numbering schema.
<h2>How to create web pages</h2>
<ol>
<li>Write markup</li>
<li>Save file</li>
<li>Preview file in browser</li>
</ol>
Ordered lists

56. Note: You can change bulleting schema.
<h2>Needs for web page building</h2>
<ul>
<li>Text editor</li>
<li>FTP client</li>
<li>Photoshop</li>
<li>Domain</li>
</ul>
Unordered lists

57. <dl>
<dt>HTML</dt>
<dd>HTML is a language for describing web
pages.</dd>
</dl>
Definition lists

58. 1. Open the file lesson2.html with your text
editor
2. Format the recipe (with its two lists) as
appropriate
3. Save
4. Open your file with Safari/Firefox/Chrome to
see changes
Lesson II

59. Narrative storytelling

60. • Many stories that have a strong or entirely
necessary geographic component
• Visualized data often reveals the real story
• Video and audio convey mood and setting
• Documents show authenticity
Words and photos are not enough in 2015.
Why bother?

61. ‘The reward of
data
visualization
comes from
discovery’ Jer Thorp, ex-New York
Times

62. ‘I’d rather have
a Snow Fall
builder than a
Snow Fall.’
Quartz editor Kevin Delaney

63. Geography of jobs
Spot the Ball
Ted Ligety
Moore, Okla. tornado
Boston Marathon bombing
Harsh Treatment graphic novels
Regional dialect
Everyone has a name
Cardstacks
Effective storytelling

64. Google Fusion Tables I

65. 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

66. Select “Tools/Change info window Layout”
(“Configure info window” in classic).
Options: Automatic (checkbox based on your
columns) or Custom (based on column plus open
(inline) HTML)
Customizing map info windows

67. Select “Tools/Change map styles”
Options: Fixed, Column, Buckets
For fixed, you have 10 icons:
https://support.google.com/fusiontables/answer/2679986?hl=en&ref_topic=2575652
You can use custom icons as well:
https://developers.google.com/maps/tutorials/customizing/custom-markers
Customizing marker icons

68. Select Publish, Change visibility/Change/Public on
the web/Done.
Re-select Publish, and specific your embed width
and format (iframe embed or HTML + JS)
Publishing

69. 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

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

72. • Create a map illustrating what areas got the
most snow from the recent winter storm.
• 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.
Lesson I: Snowfall map

73. • Find a visual story to share and explain in a few
grafs why it worked. You might be asked to show
and tell.
• GFT homework: snowfall map
• HTML homework: Read Duckett Chapters 1-3
• Good reading: “The News Mixtape”
(http://bit.ly/1tPQUIl)
• Good reading: “Platforms Not One-Offs”
(http://bit.ly/1tPQWQv)
Week 1 homework

74. • Headlines
• HTML II
• Google Fusion Tables II (polygons)
• Likely WordPress
Next week