1 / 10

Web journalism

Web journalism. A newbie’s guide. 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”

carolyn-kirkland
Download Presentation

Web journalism

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web journalism A newbie’s guide Michael Farr michael.farr@latimes.com

  2. 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

  3. 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

  4. 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

  5. Basics of Web publishing Michael Farr michael.farr@latimes.com

  6. 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

  7. 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

  8. 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

  9. http://Michaeljfarr.com • 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

  10. Michael Farr Michael.farr@latimes.com http://Michaeljfarr.com Work number: 213-473-2459 Done Michael Farr michael.farr@latimes.com

More Related