3340 Online Journalism Feb19 Website Inside Out

The Making of a Website University of North Texas Department of Journalism Online Journalism 3340 February 19, 2008

Today’s Lineup
Today’s News
Making of a Website
Discussion of Today’s Homework
Homework for Thursday
Go to DigitalMediaCrashCourse.com/unt
Read the Poynter Institute’s Eye Track Study – 2007.
Based on the study’s findings, write up to 400 words words on your blog about your recommendations to newspapers on how they should change to attract readers in print or online.

Elements of Basic Design Traditional v. Web
Traditional
Modular
Balance
Fonts
Headlines, subheads, bylines
Lead story, off lead, display feature
Charts/boxes
Hi-res images
Digital Media
Balance
Simple, clean
Colorful
Headlines
Photos with captions
Interactive graphics
Animation, flash
Low res, fewer pixels

Web Design Yesterday & Today
Yesterday
QuarkXpress, Adobe Pagemaker
HTML code
Hyper Text Markup Languague
FTP: File Transfer Protocol
Today
Dreamweaver
Adobe EnDesign
Flash, Shockwave
WYSIWYG (What You See Is What You Get ) Content Management Systems

Basic Elements of Design
Balance:
No obscured elements
Big elements shouldn’t obscure small ones
Dark elements should not obscure light ones (e.g. black background, orange font)
Contrast & Focus
Using white space wisely
http://www.statesman.com/?r=t
http://www.cleveland.com/
Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten

Basic Elements of Design
Readability
See and read stories on the website
No more than two clicks from HomePage
Simplicity
Avoid lots of complicated graphics, animation
Consistency
Throughout website, particularly on article pages
Variety
Be creative, but not obtrusive
Purpose:
Always ask: What’s the purpose of this website?

“ You have to say, How do I take the same basic information and tell the story in a way that works on a Webpage? You have to take the information and turn it on its head – actually, you have to turn the method of storytelling on its head – then tell the story taking advantage of the new technology. You can’t approach it in the same way if you want o be effective.”
Retha Hill, Director, New Media Innovation Lab
Walter Cronkite School of Journalism
Formerly VP Content, BET & executive producer, WashingtonPost.com

Organizing the New Website
Basic pages
Home page
News: Local, Regional, National, Int’l
Sports
Business
Lifestyle
Opinion/Editorials
Classified Ads: Cars, Jobs, Real Estate

Organizing the New Website Cont.
Within each story
Byline
Reporter’s email address
Audio, video links
Slideshow: photo and/or video
Related links
Comments section

Organizing the New Website Cont.
Within each section front
Consistency is key
Controlled by content management system, in many cases
Links to other sections
Links to related articles

Some HTML Basics
WebMonkey .com
A basic ‘web page’
<html> <head> <title>Summer</title> </head> <body> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short. <p>How many days till Christmas? </body> </html>
How does this look? Let’s see ….

Some HTML Basics
Common HTML Tags:
Header (Headlines) <H1></H1>, <H2>
FONT: <FONT>
Paragraph: <p></p>
Hyperlink: <a href= [link] </a>
Character Properties:
#FFFFFF is white
#80080 is purple
Image Source <img src>

Beyond HTML
JavaScript
JavaScript is a programming language that is loosely based on Java. Instead of being referred to in an HTML document, as Java applets are, JavaScript code is embedded in the document itself, using the SCRIPT element.
A programming language designed for use with web pages to add 'functionality' eg to create drop-down menus, process information input by users.
Basic: The Calendar
Sophisticated: Pop up windows
Flash: Creates animation on your site (without being an animator)
Very simple: Martini Glass
Complicated: Clouds

Style Sheets - CSS
Used for creating templates
Embeds fonts, links, colors, images, backgrounds into a page so it remains consistent throughout the website
Keeps design clean
Makes it easier for reader to find content
Simplifies publishing process, particularly sites with numerous pages
Examples

Images
From .GIFs (Compuserve) to .JPEGs (or .JPG)
File size of photo crucial:
Evolution of Resolution
Traditional Print: 300 dpi (dots per inch)
Web Design: 72 dpi

Home Pages
Your Front Page: index.html or default.html
As a web editor:
Compelling headlines
Compelling photos
Related links to:
Other stories on website today or archive
Slideshows, audio, video
Mix of stories: Local v. Regional v. National v. International
Editing ‘print’ and/or TV versions to HomePage blurbs – then linked to full length stories within website

The Home Page
Web 1.0:
Navigation
on the Left

The Home Page cont.
Web 2.0:
Navigation
at Top
Large Colorful Photo Ad Space

The Home Page cont.
Web 2.0:
Navigation
at Top
Headlines, Blurbs, Links Most Viewed, Most Emailed

Standard Ad Sizes/Formats
Static banners to animated .gifs
Animated .gifs to ‘rich media’
Random sizes of banners and buttons to “IMUs” – Internet Measuring Units
Creation of the Internet Advertising Bureau: http://iab.net
Rectangles and pop-ups: 300 x 250 IMU
Banners & Buttons : 468x60 or 120x60
Skyscrapers: 160x600

3340 Online Journalism Feb19 Website Inside Out

by Neil Foote on Mar 09, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

3340 Online Journalism Feb19 Website Inside Out — Presentation Transcript