3340 Online Journalism Feb19 Website Inside Out

The Making of a Website

University of North TexasDepartment of JournalismOnline 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 DesignTraditional 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 DesignYesterday & 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:Navigationat Top

Large

Colorful

Photo

Ad

Space

The Home Page cont.

Web 2.0:Navigationat 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

Technology

Transcript of 3340 Online Journalism Feb19 Website Inside Out