Trends in Online Media

Cindy Royal, Ph.D

Associate Professor

Texas State University

School of Journalism and Mass Communication

croyal@txstate.edu

www.cindyroyal.com

www.onthatnote.com

tech.cindyroyal.net

twitter.com/cindyroyal

facebook.com/cindyroyal

linkedin.com/in/cindyroyal

Milestones in Multimedia

1997Blackhawk Down

1998Drudge ReportGoogle1999BloggerIndyMedia

2001DotCom Bust9/11 TributesWikipedia launched2002Google News

2004Jon Stewart on CrossfireRathergatePress Credentials to BloggersWikiNews, Facebook, Digg 2005YouTubeNews Corporation buys MySpace2006MacacaInvention of the Year -YouTubePerson of the Year - YouGoogle Buys YouTube $1.65B

2003RSSGoogle Buys BloggerMySpace launched

1995Craigslist launchedSlate, Salon, USA Today, Houston Chronicle, Philadelphia Inquirer

2007VA Tech ShootingTwitter tips at SXSWInvention of the Year - iPhoneCNN/ YouTube Debates

Pre-1995Wired Magazine - 1993NY Times on AOL - 1994Nando -1994

1996Washington PostWall Street JournalChicago TribuneLA TimesMSNBC

2008CBS acquires CNETCandidates embrace social mediaEveryBlock.com2009

Hudson Plane Crash photoIran electionsPolitifact wins PulitzerMSNBC purchases EveryblockFoursquare & Gowalla

2000AOL/Time Warner merger

2010iPad releasedWikileaksFacebook -500M Users; Zuckerberg Person of the Year; The Social Network 2011

Egyptian ProtestsCoupon sitesAOL/HuffPo merger

Web Development Categories

Basic HTML design Programming emerges Blog Platforms Content Management Systems Other

Basic HTML Design

HTML – early 90s, language of the Web Became XHTML to add structure, conventions –

early 2000's; next gen is HTML5 Cascading Stylesheets – CSS – 1996; next gen

is CSS3 Javascript (1995), Flash (1996), AJAX Web programming – PHP, ASP, Ruby, Python,

etc.

Web Hosting Domain registration/hosting – lots of options; I've used

doteasy.com; avahost.net, godaddy.com, bluehost.com

FTP Tools Fetch (Mac, free) - fetchsoftworks.com

WS-FTP (PC, free) - ipswitch.com

Net2Ftp – net2ftp.com - Web-based FTP

FireFTP – fireftp.mozdev.org - Firefox Add-on

HTML Tutorials Barebones Guide to HTML - werbach.com/barebones

W3 Schools - w3schools.com/html Beyond the basics there's Flash, Javascript, PHP, audio and

video editing...

Blog Platforms

Started as platform for online journaling; Web sites for people who didn't know html.

Early platforms – Open Diary, LiveJournal late '90s Blogger -started 1999 by Evan Williams (also Twitter) and

Meg Hourihan; purchased by Google 2003 Movable Type – 2001; Six Apart Wordpress – 2003; can host yourself or on their site Posterous and Tumblr – fully featured blog platforms;

social media usage

a

Content Management Systems

Wordpress has often been modified as CMS – free on their site or monthly fee of $< 10/month in most cases on another host

– With WP, pay for domain and access to CSS to customize

– Customization requires knowledge of html/css Drupal Joomla Other hosted

CMS

My.HSJ.org system

Provided by ASNE Simple to use CMS Ability to upload text,

photos & video Have blogs Editing and admin

Other Turnkey Solutions

• School Newspapers Online – schoolnewspapersonline.com

• Wordpress-based, but they design and customize for you

• $400-$600 setup fee depending on theme you choose - includes domain registration, site setup, hosting, and support

• $200 renewal per year - includes domain renewal, hosting, and support

• Instruction manual available at http://docs.google.com/Doc?id=ddpzz8sk_12f9gtwpcc

Other Online Tools YouTube

Facebook or MySpace – set up groups; post content; stay in touch

del.icio.us - social bookmark manager

Niche Social Networks

LinkedIn Flickr/Picasa – photo sharing sites

Animoto/Vuvox – online tools for developing slideshows and video

Second Life – virtual world

Wikipedia - discuss credibility, have students contribute, wisdom of crowd vs. gatekeepers

Twitter – microblog; good way to add new content to a website on a regular basis, breaking news, connect with audience.

Free (or cheap) Software!

SoundSlides – make a photo slideshow

Must be hosted on a Web site

Difficult, but not impossible, to embed on a blog

Soundslides ($39.95) must include audio (you can tweak with a silent file); new Soundslides Plus ($69.95) lets you choose whether or not to have audio

Audacity – free; edit audio, create mp3 files

iMovie (Mac) or Windows MovieMaker (PC) – video editing

SnapZPro (Mac, $69) /Camtasia(PC or Mac, $99) – screen capture; use for developing online tutorials

On The Go...

Rise in mobile technology UStream and Livestream – live stream with

camcorder and laptop Qik.com & Ustream – stream LIVE video from

your phone!

Equipment

You don't need expensive equipment Most students have digital cameras or cell

phones that can shoot photos/video Low-end cameras with video Digital audio recorders Camcorders

Developing An Online News Operation

Integrated with your print operation Digital-first journalism – Web and mobile A Web editor can approve online stories, assignments for Web-only

projects 1 or more Web producers can be responsible for multimedia aspects Integration with print and reporters to add visual interest to stories A content-management system with editor approval that allows

multiple people to post to site A person with design responsibilities to oversee layout and design

issues A social media editor who can oversee and integrate Twitter,

Facebook presence, engage audience Multiple Twitter accounts, staff. Develop a policy with guidelines for

how these accounts/personal accounts should be used.

Use social media to engage audience

• Make it easy for people to share and talk about your content

• Twitter• Facebook – pages or groups• Social bookmarks on posts• Add widget on site• Foursquare or Gowalla –

location-based promotion/events• Flickr/Picasa/Instagram• YouTube

Keeping Up• Google News/Yahoo News - Technology

• NY Times Technology/David Pogue

• Wired News

• Scobleizer

• TechCrunch

• Digg

• Web Strategy by Jeremiah Owyang

• Techmeme

• SensibleTalk.com

• Social Media Today

• Mashable

• Smashing Magazine

• 10000 Words

Resources

SXSW Interactive - www.sxsw.com/interactive Wired Magazine - www.wired.com Fast Company Magazine – www.fastcompany.com Cyberjournalist.net - Great Work Gallery -

www.cyberjournalist.net/category/great-work-gallery Online Journalism Awards - http://www.journalists.org/ Knight Digital Media Center -

www.knightdigitalmediacenter.org Online Journalism Review Archives - ojr.org Interactive Narratives - interactivenarratives.org/ We The Media by Dan Gillmor Convergence Culture by Henry Jenkins The Long Tail and Free by Chris Anderson What Would Google Do? - Jeff Jarvis Journalism Next – Mark Briggs Editor & Publisher Awards -

royal.reliaserve.com/eppy/winners2008.html Journal of Computer-Mediated Communication -

jcmc.indiana.edu

Key Concepts

• New media• Social media• Social network• Convergence• Interactivity• Hyperlinks• Hyperlocal• User-generated content• User experience

Key Terms

• Web 2.0 • Blog• Microblog• Mobile• Mashup• RSS • Tag/ Tag Cloud• Content Management System• Podcast• Wiki• Web-first or

Mobile First Journalism• Programmer/Journalist• Widgets/Plugin/App• Location-based

Search Engine Optimization

• Most important thing – get others to link to you• Google Page Rank algorithm• Link to others, they are more likely to link to you• Participate on comments, forums – tactfully include links to your content• Write meaningful headlines – different than print• Write strong teasers – not necessarily your lead• Use phrases (keywords) frequently that you think people will be using to

search for relevant content• Fresh content – update regularly and often• Use keywords in URLs• Consistently use alt tags for images and videos; put content on

video/slideshow pages• Pages should have meaningful titles• Use social media to spread your content, allow users to share• Monitor your search standings and traffic – Google Analytics or other

services

Why Learn HTML

Regardless of the platform you choose, it is helpful to have a basic understanding of HTML/CSS – the language of the Web

Ability to customize a CMS

Ability to troubleshoot and add advanced functionality

HTML provides the structure

CSS provides the formatting

Control the entire Web site with a single stylesheet; make global changes quickly and easily

Basic HTML

Markup language – surround text with proper markup

Open and close tags properly (i.e. <html></html>

Sample html page<html><head><title>Cindy's Web Site</title></head><body><p>This is a paragraph</p></body></html>

Basic CSS

Use a stylesheet to control the design/layout of a Web page Save sheet with .css extension Insert into the <head> section of each page with the following code:<link rel=”stylesheet” href=”style.css” type=”text/css” />

Styles are defined in this manner:h2 {font-size: 14px;font-style: normal; font-weight: bold; text-decoration: none;}

Use an existing stylesheet that you understand and modify it

Image and Graphic Manipulation

• Web resolution – 72dpi• .jpg for photos; .gif or .png for graphics• Optimize photos for file size; crop and

adjust• Photoshop• Picnik - http://www.picnik.com/• Webresizer -

http://www.webresizer.com/resizer/

Video editing

iMovie – available on Macs for free; easy to learn, use Final Cut Express or Pro – more comprehensive, but

more expensive Other video options include Window Movie Maker,

Adobe Premiere, Pinnacle, etc. Ability to import, crop, add transitions, titles, sound Keep it short Choose your editing software Practice visual storytelling Publish online Start small, but make sure you start

Gear

• Lots of camera choices• High Def?• Accessories – tapes, batteries, microphone,

tripod, headphones, lighting• Focus, zoom, exposure• Solid clips – avoid panning and zooming• Get good audio

Digital Video

• Cheap cameras and editing software• One person can produce high quality• YouTube 20 hours of footage uploaded every

minute• The only way to learn video journalism is by doing it

- Angela Grant (a former student)• Video journalists or backpack journalists• Both broadcast and non-broadcast

Plan Video

• Different approaches for different projects• Storyboarding• Focus story• Choose interview and demonstration

sequences as well as b-roll• Mix your shots – wide angle, medium,

close-ups

Five shots

• Close-up on the hands• Close-up on the face• Prepare your subject• Wide shot• Over-the-shoulder shot• Creative shot

Interviews

• Select a location – think sound and lighting• Have several pre-written questions – some

can be discussed ahead of time• Remain silent• Use a stand-up, just in case• Effective use of voiceover

Great Multimedia – Photos and Video

• New York Times• Statesman• MediaStorm• Washington Post• The University Star – star.txstate.edu• Links and examples at cindyroyal.com/asne

Telling Stories with Data

• New York Times• Texas Tribune• Tools – Google Maps; Charts and Visualization;

Fusion TablesWordle, Chartle

• Links and examples at cindyroyal.com/asne

Student Projects

• Learn skills in XHTML, CSS, Flash, graphic design, photo, audio, & video editing

• Digital Storytelling via integration of tools• Firestation Studios - http://www.jonzmikly.com/final/• Hill Country Concours - http://cars.martin-whitaker.info/• Farm 2 Table - http://farm2table.nicmartinez.com/• NPPA – Future of Journalism Workshop -

http://www.onesonia.com/nppa/index.html• South By Texas State – www.sxtxstate.com• Mass Comm Week – txstatemcweek.com• University Star – star.txstate.edu• Course sites - Web Design – cindyroyal.com/webdesign Social Media at Work – cindyroyal.com/social Advanced Online Media - cindyroyal.com/advanced