Interactive News Editing and Production Thursday, Feb. 12

• Guest: Scott Kleinberg, nationally syndicated columnist and director of social media for Tribune Publishing

• Social media• CSS II

Today’s agenda

Social media

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.

Our guest today: Scott Kleinberg

• 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

How many hashtags are too many?

• Twitter: 3+• Instagram: Fewer than 11• Facebook: 1

• 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 II

• 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

How CSS cascades

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

• CSS III• SEO• Trending tools• Maybe WordPress or timelines

Next up