Week 6 - Interactive News Editing and Producing

  • Published on

  • View

  • Download

Embed Size (px)


  1. 1. Interactive News Editing and ProductionThursday, Feb. 12
  2. 2. Guest: Scott Kleinberg, nationally syndicated columnist and director of social media for Tribune Publishing Social media CSS II Todays agenda
  3. 3. Social media
  4. 4. Average daily social use: 2 hours and 43 minutes 87% of U.S. on internet. Thats 280 million people. There are 186 million people on social.
  5. 5. Our guest today: Scott Kleinberg
  6. 6. Personal pages are still professional pages. Follow sources, but be balanced and be aware of perceptions Be authentic Be valuable. Whats your place? Targeted use of hashtags/account names is encouraged on Twitter and Instagram Social tips
  7. 7. How many hashtags are too many? Twitter: 3+ Instagram: Fewer than 11 Facebook: 1
  8. 8. Be social, even on brand accounts. But respond appropriately Dont just share your own material from personal accounts Respect copyrights and Fair Use Rebroadcast, but echo sparingly. Find a better way. Dont (lightly) delete. For transparency, correct Social tips
  9. 9. Never settle for the headline. Think about what would make you click through Dont RT too swiftly. Be skeptical Uses digits and quotes Use photos or video Dont spam; spread shares out Dont forget to have fun Social tips
  10. 10. The Atlantic and its digital properties expect reporters to promote their own work ProPublica reporters must submit five tweets along with each story they file A Huffington Post story cannot be published unless it has a photo, a search headline, a tweet and a Facebook post NYT Innovation Report best practices
  11. 11. Break into teams of 4-5 Study the three Simply Measured reports on Twitter and Facebook (simplymeasured folder). Focus on the keywords and Top Posts areas. Discuss. What common threads exist? Did Facebook differ from Twitter? What content, by topic or genre, got the most engagement? Based on the observations, what should the Tribune focus on? Exercise I: Simply Measured
  12. 12. Twitter Analytics Facebook Insights Simply Measured Muckrack Who Shared Lists and Tweetdeck Storify Scribblelive Example: Jackie Robinson West Social toolbox
  13. 13. Find at least 5 memes or parody photos of Brian Williams on Twitter. Instructions in file williams- template.html, where you will embed them. Note: Exercise II: Brian Williams
  14. 14. Twitter blog on engagement: http://bit.ly/1AdE0Xt Buffer blog on hashtag use: http://bit.ly/1uH7fzk Social news consumption: http://bit.ly/1IXHnpg 75 percent of journalists say that they feel pressured to think about their storys potential to get shared on social platforms. Good reading
  15. 15. Web Summit on social media: http://bit.ly/1ChUhbi NYT Twitter advice: http://bit.ly/1uH7U3V Generally good, but theres one example of poor advice: But there are also a significant number of instances where we shouldnt try too hard to write a great tweet when other skilled journalists in our newsroom have already written one in the form of a headline. Good reading
  16. 16. Simply Measured study on Instagram Simon Kemps global digital report New York Times Innovation Report (Promotion, pages 43-48) If you have extra time reading
  17. 17. Select a media brand with a large enough social presence to answer the follow questions: List all channels you can find (Facebook, Twitter, Google+, Instagram, Youtube, Tumblr, Soundcloud, Foursquare, Pinterest, Linkedin, Vine etc). Who are the top users/most influential users? Who appear to be the media outlets competitors? Is branding consistent between accounts? Too many or too few channels? How frequently are the channels updated? A few good examples of social shares/posts List areas for improvement. What would you do if you were in charge? Homework I: Social media audit
  18. 18. Tweet a total of two news, sports or business content items (note: only two total) Include the hashtag #4hw (for homework, get it?) at the end Email me your Twitter account Homework II: Tweets
  19. 19. CSS II
  20. 20. CSS inheritance CSS selectors CSS pseudo selectors CSS shortcuts CSS layers Background images CSS agenda
  21. 21. Inheritance is a way of propagating property values from parent elements to their children. Some CSS properties are inherited by the children of elements by default. For example, if you set the body tag of a page to a specific font, that font will be inherited its other elements. Not all properties are inherited, but you can force ones to be by using the inherit value. Smashing: http://bit.ly/18rfHFg CSS inheritance
  22. 22. How CSS cascades
  23. 23. 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 descendant, child, but much can be accomplished with those. CSS selectors
  24. 24. Targets all elements on a page. Example: * { color: black; } This sets to black every element affected by the color property. Universal selector
  25. 25. These apply styles to all kinds of HTML elements, from text (h1, p) to layout (nav, article) Example: h1, h2 { font-size: 1.2em, color: black; } This sets all and elements to black and increases the size by 20 percent. Type selector
  26. 26. These are developer-defined selectors that can apply to an unlimited number of elements. .bodytext { font-size: .9em; color: black; } This affects any element whose class attribute is bodytext:

    Im text

    Class selectors
  27. 27. ID selectors also are developer-defined selectors. But, unlike class, they only can be used to identify a single element. #italictext { font-style: italic; } This allows the text of a single element to be italic: Im italicized ID selectors
  28. 28. The most effective markup usually involves selecting elements by context. Example 1: Direct selection p.centerClass {text-align:center;}

    Im centered


    elements with class of centerClass should be center aligned. Does not inherit. Combining selectors

  29. 29. Example 2: article span {color: red;}

    This is the color red

    Any span tags that are a descendant (within) of an article should be red. Combining selectors
  30. 30. Pseudo-selectors is a general term used to cover both pseudo-classes and pseudo-elements. Pseudo-classes are used to select elements according to information that you can't otherwise express using attributes, IDs or classes. Examples: :first-child, :last-child, :hover Pseudo-elements allow you to apply styles to selectively as part of other actual elements. Examples. First-letter, first-line, before, after Classes: http://mzl.la/H0Xfcw Elements: http://mzl.la/1gQ3e1k Pseudo-selectors
  31. 31. property: {value value value value;} margin: {top right bottom left;} TRBL (I remember it as TRouBLe) CSS shortcuts