Week 5 - Interactive News Editing and Producing

  • Published on

  • View

  • Download


<ol><li> 1. Interactive News Editing and ProductionThursday, Feb, 5 </li><li> 2. Reflections on breaking news writing Content rules of engagement Chart tools CSS I Todays agenda </li><li> 3. Reflections on last week, which was surprisingly topical Covering developing news </li><li> 4. 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 </li><li> 5. Content rules of engagement (How to not be sued) </li><li> 6. 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 </li><li> 7. 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 </li><li> 8. 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 </li><li> 9. Using external images with tag? Yes, but its 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 persons right to publicity or privacy. Content ROE </li><li> 10. Screenshot/still image from a video? Yes, with attribution and link, because its a small part of the original and doesnt detract value. Content ROE </li><li> 11. Tweeting a story using that sites image? Untested. Seems common practice with link back to original. Credit is good form. Grabbing pictures from an individuals social media account? No, regardless of privacy settings. Photos from a publicly owned website? No. They might not hold rights. Content ROE </li><li> 12. Logo for a news story you are writing? Appears to be acceptable under Fair Uses news reporting provision. Creative Commons images? Yes, but watch licenses closely. Imaged tweeted from a branded public/govt account (that you know is legit)? Yes, no different than if it were emailed. Content ROE </li><li> 13. Takeaway: If you dont own it, dont 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. Dont fall for it. More reading: http://bit.ly/1zhYHiC Content ROE </li><li> 14. Using the multiple sources (AP, Tribune, L.A. Times) provided, write a single story on the controversy surrounding U.S. Rep. Aaron Schocks 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 </li><li> 15. Digital chart tools </li><li> 16. Pros: Web based. Super easy. Free. Responsive. Can take live data. Cons: Super limited chart options. Display is a bit gaudy. Doesnt manage data well. Prefers Chrome. Site: http://bit.ly/1zaG636 Infogr.am </li><li> 17. 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 </li><li> 18. 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 </li><li> 19. Pros: Clean design. Interprets data well. Customizable. Easy to use. Web based. Cons: Awful customer service. Somewhat limited chart tools. Embeds arent free. Site: http://bit.ly/1ubuAc0 Datawrapper </li><li> 20. 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 OHare International Airport. Publish Exercise III: Datawrapper snowfall </li><li> 21. 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 </li><li> 22. 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 </li><li> 23. 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 </li><li> 24. 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 </li><li> 25. 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 </li><li> 26. Many Eyes Visually Piktochart Easelly More chart tools Chart Blocks Tableau D3 Highcharts </li><li> 27. CSS I </li><li> 28. 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 </li><li> 29. When creating an app or site, its 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: In CSS, use /* text goes here */ Other hacks like or / / can work, but are not recommended Before we begin </li><li> 30. Up until now, weve mostly been using empty HTML5 containers and letting your browser style. CSS basics tags get larger font sizes and <p> tags create block elements. But, no more of that nonsense. </p></li><li> 31. 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? </li><li> 32. 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 </li><li> 33. There are three types of CSS styles: inline, internal and external. Inline: <p>Hi</p> Internal: The CSS data is stored in the pages External: CSS data is stored in a separate file Flavors of CSS </li><li> 34. Inline styling is inserted at the point it is needed with the </li><li> 35. Internal styling follows CSS conventions, but all presentation data is found in the . Best used on small projects. Example: Internal CSS </li><li> 36. External styling uses the tag in the to tell the browser where to find presentation data. Its the easiest to make global changes. You can use multiple external stylesheets. Example: External CSS </li><li> 37. 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. Well explore CSS inheritance rules together Exercise VI: Inheritance </li><li> 38. 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 </li><li> 39. 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 element There are more, like nth-child, child, parent, but much can be accomplished with those four. CSS selectors </li><li> 40. Even though browsers have default ways of rendering HTML semantic text elements, like tags, that doesnt mean you cant or shouldnt restyle it. At right is how Firefox renders tags. Below it is text styled to match it. Working with text </li><li> 41. Text ( tags or <p> tags) can be expressed in ems, px, pts and percentages. 16px = 1em 12px (12/16) = .75em 32px (32/16) = 2em 48px (48/16) = 3em Working with text </p></li><li> 42. 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 Theres no wrong answer between em and percentage. Exercise VII: Font size </li><li> 43. 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 Sans Other choices: @font-face, Adobe Typekit, Google Standard web fonts </li><li> 44. 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 </li><li> 45. Font: Sets all the font properties in one declaration Font-family: Sets typeface and family Font-size: Sets font size Font-style: Sets variation like italic, normal Font-variant: Can set variations like small caps Font-weight: Sets font weight, like bold, (100- 900) Text-transform: All uppercase, lowercase, caps CSS font properties </li><li> 46. Open the file lesson1.html in your browser and then in your text editor. Follow the commented out instructions. Exercise VIII: Text styling </li><li> 47. 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 = opacity Hex: {color: #000000} Hex short: {color: #000} CSS color usage </li><li> 48. 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 </li></ol>