week 6 - interactive news editing and producing
TRANSCRIPT
• Guest: Scott Kleinberg, nationally syndicated columnist and director of social media for Tribune Publishing
• Social media• CSS II
Today’s agenda
Average daily social use: 2 hours and 43 minutes
87% of U.S. on internet.That’s 280 million people.
There are 186 million people on social.
• Personal pages are still professional pages. • Follow sources, but be balanced and be
aware of perceptions• Be authentic• Be valuable. What’s your place?• Targeted use of hashtags/account names
is encouraged on Twitter and Instagram
Social tips
• Be social, even on brand accounts. But respond appropriately
• Don’t just share your own material from personal accounts
• Respect copyrights and Fair Use• Rebroadcast, but echo sparingly. Find a
better way.• Don’t (lightly) delete. For transparency,
correct
Social tips
• Never settle for the headline. Think about what would make you click through
• Don’t RT too swiftly. Be skeptical• Uses digits and quotes• Use photos or video• Don’t spam; spread shares out• Don’t forget to have fun
Social tips
• 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
• 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
• Twitter Analytics• Facebook Insights• Simply Measured• Muckrack Who Shared• Lists and Tweetdeck• Storify• Scribblelive– Example: Jackie Robinson West
Social toolbox
• 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: <script async src=“http://platform.twitter.com/widgets.js" charset="utf-8"></script>
Exercise II: Brian Williams
• 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 story’s potential to get shared on social platforms.”
Good reading
• Web Summit on social media: http://bit.ly/1ChUhbi
• NYT Twitter advice: http://bit.ly/1uH7U3V– Generally good, but there’s one example of
poor advice: “But there are also a significant number of instances where we shouldn’t 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
• Simply Measured study on Instagram• Simon Kemp’s global digital report• New York Times Innovation Report
(Promotion, pages 43-48)
If you have extra time reading
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 outlet’s 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
• 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
• CSS inheritance• CSS selectors• CSS pseudo selectors• CSS shortcuts• CSS layers• Background images
CSS agenda
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
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
Targets all elements on a page.Example:* {color: black;}
This sets to black every element affected by the color property.
Universal selector
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 <h1> and <h2> elements to black and increases the size by 20 percent.
Type selector
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: <p class=“bodytext”>I’m text</p>
Class selectors
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: <span id=“italictext”>I’m italicized</span>
ID selectors
The most effective markup usually involves selecting elements by context.• Example 1: Direct selectionp.centerClass {text-align:center;} <p class=“centerClass”>I’m centered</p>
All <p> elements with class of “centerClass” should be center aligned. Does not inherit.
Combining selectors
Example 2:article span {color: red;}<article><p>This is the color <span>red</span></p></article>
Any span tags that are a descendant (within) of an article should be red.
Combining selectors
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
property: {value value value value;}
margin: {top right bottom left;}
TRBL (I remember it as “TRouBLe”)
CSS shortcuts
Margin and padding shorthand:margin-top: 0;margin-right: 0;margin-bottom: 1%;margin-left: 2%;
=margin: 0 0 1% 2%;
CSS shortcuts
Fonts shorthand:font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 1em;line-height: 140%font-family: “Arial”, sans-serif;
=font: italic small-caps bold 1em/140% “Arial”, sans-serif;
CSS shortcuts
Borders shorthand:border-width: 1px;border-style: solid;border-color: #000000
=border: 1px solid #000000;
CSS shortcuts
Background colors and images shorthand:background-color: #ffffff;background-image:url(‘file.jpg’);background-repeat: no repeat;background-attachment: fixed;background-position: 0 0;=background: #ffffff url(‘file.jpg’) no-repeat fixed 0 0;
CSS shortcuts
Open the document z-index.html in your browser, then in your text editor.Adjust the z-index value and see how layers respond.
Exercise III: z-index
Open the document background-image-exercise.html from the background-images folder in your browser, then in your text editor.Let’s see how background images respond.
Exercise IV: Background images
Grab css2.zip, select a layout appropriate to your skill level and create a web page to match.Use layoutlab.html and layoutlab.css and follow the instructions in the Layout.docx file.
Homework III: Layout
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
• Deadline: Tuesday, 11:59 p.m.• Tweets• Social media audit• CSS page layout• Duckett: Chapters 13-14
Homework