Transcript
Page 1: Week 5 - Interactive News Editing and Producing

Interactive News Editing and Production Thursday, Feb, 5

Page 2: Week 5 - Interactive News Editing and Producing

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

Today’s agenda

Page 3: Week 5 - Interactive News Editing and Producing

• Reflections on last week, which was surprisingly topical …

Covering developing news

Page 4: Week 5 - Interactive News Editing and Producing

• 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

Page 5: Week 5 - Interactive News Editing and Producing

Content rules of engagement(How to not be sued)

Page 6: Week 5 - Interactive News Editing and Producing
Page 7: Week 5 - Interactive News Editing and Producing

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

Page 8: Week 5 - Interactive News Editing and Producing

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

Page 9: Week 5 - Interactive News Editing and Producing

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

Page 10: Week 5 - Interactive News Editing and Producing

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

Page 11: Week 5 - Interactive News Editing and Producing

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

Page 12: Week 5 - Interactive News Editing and Producing

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

Page 13: Week 5 - Interactive News Editing and Producing

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

Page 14: Week 5 - Interactive News Editing and Producing
Page 15: Week 5 - Interactive News Editing and Producing

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

Page 16: Week 5 - Interactive News Editing and Producing
Page 17: Week 5 - Interactive News Editing and Producing

• 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

Page 18: Week 5 - Interactive News Editing and Producing

Digital chart tools

Page 19: Week 5 - Interactive News Editing and Producing

• 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

Page 20: Week 5 - Interactive News Editing and Producing

• 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

Page 21: Week 5 - Interactive News Editing and Producing

• 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

Page 22: Week 5 - Interactive News Editing and Producing

• 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

Page 23: Week 5 - Interactive News Editing and Producing

• 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

Page 24: Week 5 - Interactive News Editing and Producing

• 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

Page 25: Week 5 - Interactive News Editing and Producing

• 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

Page 26: Week 5 - Interactive News Editing and Producing

• 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

Page 27: Week 5 - Interactive News Editing and Producing

• 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

Page 28: Week 5 - Interactive News Editing and Producing

• 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

Page 30: Week 5 - Interactive News Editing and Producing

CSS I

Page 31: Week 5 - Interactive News Editing and Producing

• 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

Page 32: Week 5 - Interactive News Editing and Producing

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 …

Page 33: Week 5 - Interactive News Editing and Producing

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.

Page 34: Week 5 - Interactive News Editing and Producing

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?

Page 35: Week 5 - Interactive News Editing and Producing

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

Page 36: Week 5 - Interactive News Editing and Producing

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

Page 37: Week 5 - Interactive News Editing and Producing

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

Page 38: Week 5 - Interactive News Editing and Producing

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

Page 39: Week 5 - Interactive News Editing and Producing

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

Page 40: Week 5 - Interactive News Editing and Producing

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

Page 41: Week 5 - Interactive News Editing and Producing

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

Page 42: Week 5 - Interactive News Editing and Producing
Page 43: Week 5 - Interactive News Editing and Producing

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

Page 44: Week 5 - Interactive News Editing and Producing

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

Page 45: Week 5 - Interactive News Editing and Producing

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

Page 46: Week 5 - Interactive News Editing and Producing

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

Page 47: Week 5 - Interactive News Editing and Producing

• 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

Page 48: Week 5 - Interactive News Editing and Producing

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

Page 49: Week 5 - Interactive News Editing and Producing

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

Page 50: Week 5 - Interactive News Editing and Producing

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

Exercise VIII: Text styling

Page 51: Week 5 - Interactive News Editing and Producing

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

Page 52: Week 5 - Interactive News Editing and Producing

• 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

Page 53: Week 5 - Interactive News Editing and Producing

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

Page 54: Week 5 - Interactive News Editing and Producing

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

Page 55: Week 5 - Interactive News Editing and Producing

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

Page 56: Week 5 - Interactive News Editing and Producing

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

Page 57: Week 5 - Interactive News Editing and Producing

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

Page 58: Week 5 - Interactive News Editing and Producing

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

Page 59: Week 5 - Interactive News Editing and Producing
Page 60: Week 5 - Interactive News Editing and Producing

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

Page 61: Week 5 - Interactive News Editing and Producing

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

Page 62: Week 5 - Interactive News Editing and Producing

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

Page 63: Week 5 - Interactive News Editing and Producing

• 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

Page 64: Week 5 - Interactive News Editing and Producing

• 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

Page 65: Week 5 - Interactive News Editing and Producing

• CSS II• Social media• Trending tools

Next up


Recommended