100 likes | 327 Vues
In this guide, Michael Farr shares essential insights for new web journalists, particularly focusing on skills that help fulfill daily production needs for digital platforms. Covering crucial aspects like headline writing, web coding, photo editing, and social media competence, this resource aims to equip budding producers with fundamental web publishing knowledge. Explore the building blocks of HTML and CSS, and discover effective ways to engage audiences through visually appealing content and timely breaking news alerts.
E N D
Web journalism A newbie’s guide Michael Farr michael.farr@latimes.com
Associate Web producer, Los Angeles Times • Fulfill the daily production needs of LATimes.com, especially as it relates to the homepage • Build photo galleries • Make links to stories • Build themed “modules” • Make sure stories on homepage have photo and related links • Send breaking news email alerts • Upload wire stories • I’m the Web equivalent of a newspaper layout designer My Job Michael Farr michael.farr@latimes.com
Journalism fundamentals • Headline-writing • Caption-writing • News judgment • Design elements • Photo editing • Web coding • Social media competence • Multi-platform publishing • Familiarity with a wide variety of Web publishing tools Skills I use Michael Farr michael.farr@latimes.com
Web coding • HTML (HyperTextMarkup Language) • It’s the building blocks of a website • You start with this • <b> <p> <i> <a href=“http://latimes.com”></a> • CSS (Cascading Style Sheets) • This is the nice paint and accents you add on once it’s built • Adds “style”, a.k.a., design to text • <p style=“font-family:Georgia; font-size:12px; color: blue;”> Basics of Web publishing Michael Farr michael.farr@latimes.com
Basics of Web publishing Michael Farr michael.farr@latimes.com
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Michael Farr's lovely little experiment</title> <link rel="stylesheet" href="mystyle.css"> </head> <imgsrc="logo.jpg"> <body> <!-- Site navigation menu --> <ul class="navbar"> <a href="csstest.html"style="background:blue;"> Home page</a> | <a href="musings.html"> Musings</a> | <a href="articles.html"> My articles</a> | <a href="jobs.html"> My Job</a> </ul> <!-- Main content --> <h1>This is my CSS experiment</h1> <p>Welcome! I hope you enjoy <p>This is me practicing my CSS. I really want to learn how to be a l33t Web coder. <!-- Sign and date the page, it's only polite! --> <address>Made 14 June 2010<br> by <a href="http://michaeljfarr.com"target="_blank">Michael Farr</a>.</address> </body> Basics of Web publishing Michael Farr michael.farr@latimes.com
CSS body { padding-left: 11em; padding-top: 5em; font-family: Georgia, "Times New Roman",Times, serif; color: white; background-color: white; text-align:center;} p { color: black; } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color: yellow; text-decoration: underline;} .navbar { font-size: 20px; padding: 1em; margin: 0; position: absolute centered; top: 2em; left: 39em; width: none; background: red} .navbar a { color:black; text-decoration: none;} .navbar p { color:black} address { color:black; padding-top: 1em; border-top: solid red; } Basics of Web publishing Michael Farr michael.farr@latimes.com
CMS (Content management system) • Blogger, WordPress, TypePad, Tumblr • Django (Chimes) • Assembler / P2P (LA Times / Tribune Co.) Basics of Web publishing Django admin screen Michael Farr michael.farr@latimes.com
http://michaeljfarr.com/2011/05/09/biola-journalism-class/ • On latest post, download “Practice-code” • Open file in Notepad • Find story online • Plug in headline, subhead, byline • Plug in photo • right click and go to “Copy Image Location” • Paste that URL into the <imgsrc=“IMAGE LOC HERE”> code • Save document as “practice-code.html” to desktop • Open file again Your turn Michael Farr michael.farr@latimes.com
Michael Farr Michael.farr@latimes.com http://Michaeljfarr.com Work number: 213-473-2459 Done Michael Farr michael.farr@latimes.com