![Page 1: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/1.jpg)
The Making of a Website
University of North TexasDepartment of JournalismOnline Journalism 3340
February 19, 2008
![Page 2: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/2.jpg)
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.
![Page 3: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/3.jpg)
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
![Page 4: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/4.jpg)
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
![Page 5: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/5.jpg)
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
![Page 6: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/6.jpg)
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?
Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
![Page 7: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/7.jpg)
“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
![Page 8: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/8.jpg)
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
Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
![Page 9: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/9.jpg)
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
Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
![Page 10: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/10.jpg)
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
Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
![Page 11: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/11.jpg)
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….
![Page 12: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/12.jpg)
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>
![Page 13: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/13.jpg)
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
![Page 14: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/14.jpg)
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
![Page 15: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/15.jpg)
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
![Page 16: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/16.jpg)
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
![Page 17: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/17.jpg)
The Home Page
Web 1.0:Navigation
on the Left
![Page 18: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/18.jpg)
The Home Page cont.
Web 2.0:Navigationat Top
Large
Colorful
Photo
Ad
Space
![Page 19: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/19.jpg)
The Home Page cont.
Web 2.0:Navigationat Top
Headlines,
Blurbs, Links
Most Viewed, Most Emailed
![Page 20: 3340 Online Journalism Feb19 Website Inside Out](https://reader033.vdocument.in/reader033/viewer/2022061204/547ff408b4af9f760f8b460d/html5/thumbnails/20.jpg)
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