week 5 - interactive news editing and producing

Interactive News Editing and Production Thursday, Feb, 5

• Reflections on breaking news writing• Content rules of engagement• Chart tools• CSS I

Today’s agenda

• Reflections on last week, which was surprisingly topical …

Covering developing news

• Everyone focused on key areas: school closings, stranded motorists, the raw power of the storm

• Struggles were with prioritization due to the volume of information

• Very successful

Covering developing news

Content rules of engagement(How to not be sued)

Fair Use offers limited exemptions to copyright law conferred to the owner of a creative work.

In the media, it has traditionally applied to commentary, criticism, parody and news reporting.

Today, a practical but nuanced understanding is critical, especially as everyone else fails around us.

Fair Use

Four-part Fair Use test:• The purpose and character of the use,

including whether such use is of a commercial nature or is for nonprofit educational purposes

• The nature of the copyrighted work (public interest)

• The amount and substantiality of the portion used in relation to the copyrighted work as a whole

• The effect of the use upon the potential market for or value of the copyrighted work

Fair Use

Text aggregation?Yes, on small non-critical amounts with full attribution and link to original.Photo aggregation?No. Perhaps a tiny, unidentifiable piece of an original. Unlitigated. Embedded videos or social media?Yes, if source provides/allows embed code.

Content ROE

Using external images with <img src> tag?Yes, but it’s poor form and risky.Gif or Vine of a video?Appears to be OK. Currently unlitigated.Meme of a photo?Many variables. Might be protected as parody. But that meme could violate a person’s right to publicity or privacy.

Content ROE

Screenshot/still image from a video?Yes, with attribution and link, because it’s a small part of the original and doesn’t detract value.

Content ROE

Tweeting a story using that site’s image? Untested. Seems common practice with link back to original. Credit is good form.Grabbing pictures from an individual’s social media account?No, regardless of privacy settings.Photos from a publicly owned website?No. They might not hold rights.

Content ROE

Logo for a news story you are writing?Appears to be acceptable under Fair Use’s news reporting provision.Creative Commons images?Yes, but watch licenses closely.Imaged tweeted from a branded public/gov’t account (that you know is legit)?Yes, no different than if it were emailed.

Content ROE

Takeaway: If you don’t own it, don’t take it unless you verify it and get permission to use it.

In this era of sourcing via aggregation, people are trying to trick the media. Don’t fall for it.

More reading: http://bit.ly/1zhYHiC

Content ROE

• Using the multiple sources (AP, Tribune, L.A. Times) provided, write a single story on the controversy surrounding U.S. Rep. Aaron Schock’s “Downton Abbey”-themed office. File: curation.zip

• Instructions are in the main file: aaron-schock-main.txt

• Add your last name to the HTML template file name and email it to me

Homework I: Aggregation and curation

Digital chart tools

• Pros: Web based. Super easy. Free. Responsive. Can take live data.

• Cons: Super limited chart options. Display is a bit gaudy. Doesn’t manage data well. Prefers Chrome.

• Site: http://bit.ly/1zaG636

Infogr.am

• All data will come from charts.zip• Create a regular column chart• For data, upload the file

topsnowstormchicago.csv• Show values• From settings tab, select “display a

single color”• Add a headline; remove dummy text• Publish

Exercise I: Infogr.am snowstorms

• Create a treemap• For data, upload the file

top20chicagotwitter.csv• Expand the height to 500• Add a headline; remove dummy text• Publish

Exercise II: Infogr.am Twitter

• Pros: Clean design. Interprets data well. Customizable. Easy to use. Web based.

• Cons: Awful customer service. Somewhat limited chart tools. Embeds aren’t free.

• Site: http://bit.ly/1ubuAc0

Datawrapper

• Create a new chart from the file chicagowintersnowfall.csv

• Data source: National Weather Service• Visualize as a line chart• Change the color, select fill area below line

and use a curved line model• Add headline: “Winter in Chicago”• Add description: “Annual snowfall total, in

inches, as measured at O’Hare International Airport.

• Publish

Exercise III: Datawrapper snowfall

• Pros: Very quick and easy. Web based. Fully customizable. Can be responsive.

• Cons: Very limited chart tools. Not interactive.

• Site: http://bit.ly/1DzSqy0

Quartz ChartBuilder

• Create a new chart from the file qz-grad-rates.xlsx

• Paste xls data into input window• Select both 4-year and 6-year trends• Use the pulldown to select “bar grid” format• Adjust colors as desired• Title: “Illinois public college graduation

rates”• Source: IBHE• Create Image of Chart/Download Image of

Chart (png)

Exercise IV: ChartBuilder grad rates

• Pros: Vast array of chart tools. Customizable. Takes live data.

• Cons: Slow for one-off projects. No browser interface or embed. Doesn't interpret data well. Not responsive.

• Site: http://bit.ly/1zSVwju

Google Charts

• Create a new chart from the file coldestchicago.csv

• Go to Google Charts gallery and select bar charts• Grab the markup from the first “simple” example

and paste into a blank text editor file. Save as cold.html

• Open in browser to test• Paste the formatted data from data.txt over just

the sample data in var data• Change the title to “Coldest days in Chicago”• Change the vAxis title to “Date” and vAxis color

to #000000

Exercise V: Google Charts coldest days

• Create an appropriate chart with any tool based on this file: chi-area-strikes.xlsx

• Email me a link or a fully functional HTML file

Homework II: Chicago school strikes

• Many Eyes• Visually• Piktochart• Easelly

More chart tools

• Chart Blocks• Tableau• D3• Highcharts

CSS I

• What is CSS?• Styling text with CSS• CSS colors• CSS borders• The CSS box model• More on CSS positioning• Use the file css1.zip

CSS roadmap

When creating an app or site, it’s good form to leave notes as to what each routine does or represents.• In HTML, you can add non-rendering

info to a page with this element: <!-- text goes here -->

• In CSS, use /* text goes here */Other hacks like ‘ ’ or / / can work, but are not recommended

Before we begin …

Up until now, we’ve mostly been using empty HTML5 containers and letting your browser style.

CSS basics

<h1> tags get larger font sizes and <p> tags create block elements.

But, no more of that nonsense.

Cascading Style Sheets is the language that controls the presentation of a document written in HTML.Simply, CSS associates style rules with HTML elements.To control the display, CSS has an inheritance scheme, governed by a strict hierarchy.The goal: Have all your global styling data in a single location.

What is CSS?

When style rules conflict, the more specific rule (lower level) takes precedence over the less specific rule.This is called CSS inheritance .

How CSS cascades

There are three types of CSS styles: inline, internal and external. Inline:• <p style=“font-size: 1.2em;”>Hi</p>Internal:• The CSS data is stored in the page’s <head>External:• CSS data is stored in a separate file

Flavors of CSS

Inline styling is inserted at the point it is needed with the <style> tag. It’s quick, but inefficient for updates and changes.Example:<p style=“color: red;”>I am red text</p>

Inline CSS

Internal styling follows CSS conventions, but all presentation data is found in the <head>. Best used on small projects.Example:<style type="text/css">p {color: red;}</style>

Internal CSS

External styling uses the <link> tag in the <head> to tell the browser where to find presentation data. It’s the easiest to make global changes. You can use multiple external stylesheets.Example:<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

External CSS

Download the class files cascade.css and cascade.html from the class site.Open the html document in a browser, then open both in your text editor.We’ll explore CSS inheritance rules together

Exercise VI: Inheritance

A CSS rule has two main parts, a selector and a declaration.

Each declaration has properties and values, and ends with a semicolon.

CSS structure

Four primary selectors:• Universal: Applies to everything on a

page• Type: Applies to a specific HTML

element (h1, p, nav, article)• Class: Can be applied to many elements• ID: Can be applied to a single elementThere are more, like nth-child, child, parent, but much can be accomplished with those four.

CSS selectors

Even though browsers have default ways of rendering HTML semantic text elements, like <hX> tags, that doesn’t mean you can’t or shouldn’t restyle it.

At right is how Firefox renders <hX> tags. Below it is text styled to match it.

Working with text

Text (<hX> tags or <p> tags) can be expressed in ems, px, pts and percentages.

16px = 1em12px (12/16) = .75em 32px (32/16) = 2em48px (48/16) = 3em

Working with text

Open the fontsize.html document in your browser and then in your text editor.So what do I use?• Fixed pixel sizes are not responsive• Points are for print publications• There’s no wrong answer between em

and percentage.

Exercise VII: Font size

• Serif: Times New Roman, Georgia; Mac-only: Palatino, Times

• Sans serif: Arial, Impact, Trebuchet MS, Verdana; Mac-only: Geneva, Helvetica

• Monospace: Andale Mono, Courier New; Mac-only: Courier, Monaco

• Cursive: Comic SansOther choices: @font-face, Adobe Typekit, Google

Standard web fonts

p {font-family: “Lucida Console”, “Courier New”, monospace;}

Try to display Lucida Console, if not try Courier New, else give generic monospace font.

Font fallback

Font: Sets all the font properties in one declarationFont-family: Sets typeface and familyFont-size: Sets font sizeFont-style: Sets variation like italic, normalFont-variant: Can set variations like small capsFont-weight: Sets font weight, like bold, (100-900)Text-transform: All uppercase, lowercase, caps

CSS font properties

Open the file lesson1.html in your browser and then in your text editor.Follow the commented out instructions.

Exercise VIII: Text styling

HTML and CSS accept full color names, RGB color or hexadecimal colors, both shortened and full.Name: {color: black;}RGB: {color: rgb(0,0,0);}RGBa {0,0,0,1} a = opacityHex: {color: #000000}Hex short: {color: #000}

CSS color usage

• The color property is used primarily for text.h1 {color: #000000;}• The background-color property can be used on any container.p {background-color: #00ff00;}• The border-color property also can be used on any container.p {border-color: #ffffff;}

Color properties

CSS3 also gives us the ability to create gradients on the fly• background: linear-gradient(right, blue,

white);• background: radial-gradient(red, yellow

10%, #1E90FF 50%, white);

Good guide: http://mzl.la/1fB2Wwk

Color properties

A border in CSS is part of an element’s style rather than <hr />, which is an element alone.Border has three properties:• border-style: solid;• border-width: 1px;• border-color: redNote: The “border-width” property does not work without setting “border-style”.

CSS borders

Border values:• border-style; Dotted, dashed, solid• border-width: Set in pixels or by using

one of the three pre-defined values: thin, medium or thick

• border-color: Functions as expectedCan target by area: border-bottom:, border-top, border-left, border-right:

CSS borders

h1 {border-top-style: dotted;border-top-width: 1px; border-top-color: #000000;border-bottom-style: dotted;border-bottom-width: 1px; border-bottom-color: #000000;}

CSS borders

Since borders are set in fixed pixels, you can run into spacing issues. Here are a few fixes:• Can apply to images first• Can use background-color on a

container• Border-outline: http

://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

Responsive borders

When positioning content, it’s critical to understand the CSS Box Model.It’s basically a template to help your determine your spacing and position, whether on a single photo or a <div> holding 10 elements.

Box model

Open the document boxmodel.html in your browser and then in your text editor.Let’s add padding and margin together.

Exercise IX: Box model

float: (left or right)text-align: (left, right, center)margin: (top, right, bottom, left)padding: (top, right, bottom, left)position: (fixed, relative, absolute)top, right, left: (places absolutely positioned elements)z-index: (numeric value for layer placement)clear: (left, right, both, none)

Padding, margins and positioning

Open the file lesson2.html in your browser and then in your text editor.Follow the instructions at the top.

Homework III: Colors and borders

• Deadline: Tuesday, 11:59 p.m.• Aaron Schock full write-through• School strike graphic• CSS lesson 2 colors and borders file• Duckett: Chapter 10-12

Homework recap

• CNN fake hack http://bit.ly/1D0RB35• Ship your enemies glitter: http://bit.ly/

1I6hqnb• Online sourcing: http://bit.ly/1KtNA7W• Bleacher Report sourcing: http://ble.ac/

1zTi7fE

Important reads

• CSS II• Social media• Trending tools

Next up