Web journalism
Download
Report
Transcript Web journalism
Web journalism
A newbie’s guide
Michael Farr
[email protected]
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
[email protected]
• 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
[email protected]
Web coding
• HTML (HyperText Markup 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
[email protected]
Basics of Web publishing
Michael Farr
[email protected]
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>
<img src="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
[email protected]
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
[email protected]
CMS (Content management system)
• Blogger, WordPress, TypePad, Tumblr
• Django (Chimes)
• Assembler / P2P (LA Times / Tribune Co.)
Django admin screen
Basics of Web publishing
Michael Farr
[email protected]
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 <img src=“IMAGE LOC HERE”> code
• Save document as “practice-code.html” to desktop
• Open file again
Your turn
Michael Farr
[email protected]
Michael Farr
[email protected]
http://Michaeljfarr.com
Work number: 213-473-2459
Done
Michael Farr
[email protected]