Interactive News Editing and Production Thursday, Jan. 8

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

Today

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

Introduce yourself

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 projectGrading: Homework 40%, workshops 40%, engagement 20%

Logistics

• 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

Officially Friday from around 4:30 p.m. in the Loop campus. Doesn’t hurt emailing me as well.kurtgessler@gmail.comkurt.gessler@northwestern.edukgessler@tribune.com

Office hours

“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’

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

• 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

Deep dive into web developmentA long hand-holding-type project you could never replicate away from the classLong-form lamentation of journalism or ivory tower navel-gazing at NYT Innovation Report

What this class isn’t about

How the web works

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

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

• 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.html

Finding your web page

• 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

Two important takeways: case sensitivity and paths

Are these paths the same?www.redeye.com/News/Story.htmlwww.redeye.com/news/story.html

No. Web files and directories are case sensitive.

Finding your web page

In the following example, what does “admissions” represent in the file structure?

http://www.northwestern.edu/admissions/graduate.html

A folder. And graduate.html is an html document.

Finding your web page

• 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

• 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

• 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

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

• 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

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

• 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

• 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

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

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)

• 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

• 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

• View source• Chrome Inspect Element• Firebug app for Firefox

A few tips and tools

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

HTML I

• 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?

• 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?

• 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?

• 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 …

<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

<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

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

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

• 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

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

<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

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

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

<!DOCTYPE html><html><head>META/STYLE/SCRIPT INFO</head><body>CONTENT</body></html>

Simple HTML5 page structure

<!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 translationTells browser "this is an HTML file”Let’s converse in EnglishStarts metadataTranslate characters this wayAppears in your browser tabGet presentation info here

I’m done with the metadataStart main content areaEnd of the main content area“All done with this page”

1. Open the file lesson1.html with your text editor2. Make the changes detailed in the commented out section at the top of the file: <!-- COMMENTS -->3. Save4. Open your file with Safari/Firefox/Chrome to see changes

Lesson I

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

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

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

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

Definition lists

1. Open the file lesson2.html with your text editor2. Format the recipe (with its two lists) as appropriate3. Save4. Open your file with Safari/Firefox/Chrome to see changes

Lesson II

Narrative storytelling

• 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?

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

Times

‘I’d rather have a Snow Fall builder than a Snow Fall.’

Quartz editor Kevin Delaney

Geography of jobsSpot the BallTed LigetyMoore, Okla. tornadoBoston Marathon bombingHarsh Treatment graphic novelsRegional dialectEveryone has a nameCardstacks

Effective storytelling

Google Fusion Tables I

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

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

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

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

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 Area” 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.

• 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

• 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

• Headlines• HTML II• Google Fusion Tables II (polygons)• Likely WordPress

Next week