Online Journalism: Theory and Practice Week 10 Lecture 1 Summer 2011 G. F Khan, PhD Dept. of Media &...
54
Online Journalism: Theory and Practice Week 10 Lecture 1 Summer 2011 G. F Khan, PhD Dept. of Media & Communication, YeungNam University, South Korea [email protected]
-
Upload
alexander-hodges -
Category
Documents
-
view
213 -
download
0
Transcript of Online Journalism: Theory and Practice Week 10 Lecture 1 Summer 2011 G. F Khan, PhD Dept. of Media &...
Online Journalism: Theory and Practice
Week 10
Lecture 1
Summer 2011
G. F Khan, PhDDept. of Media & Communication, YeungNam University,
South [email protected]
Last lecture…
--Organizing data and information
This lecture…
--Web design basics
Mostly lecture notes are taken from the book:Journalism Next:Chapter 11: Building a Digital Audience for News by Mark Briggs
We Are All Web Workers Now
• The days of turning over digital duties to a team of super geeks are gone
• Need an understanding of tech terms and processes
• You can create your webpage/blog using online tools without knowing the code
• Code is scary, but• Learning it open opportunities• knowing about the code (i.e. web design
language i.e. HTML) will enable you to trouble shoot and customize your webpage
Tech terms and concepts
• Bits and Bytes• Difference between Internet and Web• Web server/client • URL• Domain name• Browsers• RSS• FTP
What is a good Web site from a design standpoint?
Five basic concepts
AlignmentProximity RepetitionContrast Spelling
Results: Professional looking pages
How do users think?
In order to use the principles properly we first need to understand:How users interact with Web sites.How they thinkWhat are the basic patterns of users’ behavior
How do users think?
Users don’t read, they scan.Web users are impatient and insist on
instant satisfaction.Users don’t make optimal choices.Users follow their intuition.Users want to have control.
http://www.youtube.com/watch?v=lo_a2cfBUGc
Basic Design Principles
AlignmentItems on the page should be lined upNothing should be placed on the page randomlyPick an alignment and stick to it
Right, Center, Left
Don’t leave “orphans”
Example 1
Example 2
Basic Design Principles
ProximityThe relationship items develop when they are close
togetherGrouping for identityThe eye should not have to “jump around” the page,
nor have to search for related information.Be conscious of the space between elements.
Group togetherSpace them apart
Difference between a paragraph and a break: <P> and <BR>
Example
Repetition
Repeating certain elements that tie all the parts together
Repetition elements that unify the entire site: Navigation buttons Colors Style Illustrations Format Layout Typography
Example 1
Example 2
Basic Design Principles
ContrastWhat draws your eyes to the pageMaking things VERY different
Use color, size,contrasting backgrounds, etc.
Example 1
Example 2
Spell it Right!
Bad spelling and bad grammar can destroy the professional effect of your web site
Use spell checkerhttp://checkdog.com/?sp=1
Combine the principles
Applying any one of these principles will radically improve the design of your web pages, you will generally find yourself applying more than one principle, and probably all four.
Summary of the principles:SpellingContrastRepetitionAlignmentProximity
http://www.youtube.com/watch?v=mF_mWi6r-9I
What is HTML?
What is HTML?
HTML=Hypertext Markup LanguageSimply, it is a collection of tags that tell a web
browser how to display information on a webpage.
Hypertext:Allows for non-linear linking to other documents
Markup Language:Content to be displayed is “marked up” or
tagged to tell the browser how to display it.
History of HTML
HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland.
It was designed to allow scientists to display and share their research.
HTML Basics
HTML is primarily composed of two types of markup:
Elements or tags<html></html>
Attributes that modify an element
Elements
Elements are the fundamental building blocks of HTML.
They are the tags that tell the browser what the enclosed text is.
<title>My first HTML page</title>The title element tells the browser that this is
the title of the page.Elements must be terminated, but not all
HTML
HTML tag: <> angle bracketsHTML tags: come in pairs called tag setsHTML tags: starting tag or opening tag
and an ending tag or closing tagHTML tag sets tell the browser where
formatting should start and end.
HTML
Some HTML Tags come in pairsA HTML Tag that requires just an opening
tag is called an empty tag
<BR> - add a line break
<HR> - insert a horizontal line
<IMG> - insert an image
Elements
General format of an element:
<startTag>Target content</endTag>
HTML is NOT case sensitive…
Common Elements
<html></html>All markup must be placed within HTML tags
<head></head>Contains information about the page as well as
other non-display content
<body></body>All display content should go inside these tags
Example
<html>
<head><title>My 1st Web Site</title></head>
<body>
<h1>Welcome to my site</h1>
<p>This is my first Web site</p>
</body>
<html>
Common Elements
<p></p>Tells the browser that the enclosed text
should be set off in a paragraph.
<h1></h1>This is a heading – the number can range
from 1 to 7 for different sizes
Text Display Elements
<b></b> or <strong></strong>Bolds the tagged text
<em></em> or <i></i>Italicizes the tagged text
<pre></pre>Preserves white space and breaks and
stands for “preformatted”
Common Tags
<br>Inserts a line break This is an empty tag – it does not have a
closing tag.
<hr>Inserts a horizontal rule (line)This is another empty tag
HTML Comments
An HTML Comment which is NOT displayed in the page is done like this:
<!-- This is a comment -->
Attributes
Sometimes we need more information for an element in order to control the way the content displays
We provide this information with attributes stated within the element start tag
Attributes
The generic way of using an attribute looks like this:
<elementName attribute=“value”>Target content</elementName>
Single or double quotes may be used to hold attribute values
Attribute examples
<p align=“center”>This will appear centered</p>
<img src=“mypicture.jpg”>This tag inserts the image “mypicture.jpg”
into the page.Make sure to use the right path!
Hyperlinks
Hyperlinks are created using the <a> tag, which stands for “anchor”. The format looks like this:
<a href=“uri_to_document”>Content to click on for the link</a>
The uri can also be a mailto: link
Tables
Tables require three different tags:
<table></table>Defines the table itself
<tr></tr>Defines a table row
<td></td>Defines a table cell (table data)
Tables-example
<table border cellspacing="5" cellpadding="10"> <caption>People on the team</caption> <tr> <th>Name</th> <th>Position</th> </tr> <tr> <td>Kim</td> <td>Analyst</td> </tr> <tr> <td>Park</td> <td>Technician</td> </tr> </table>
Lists
Two main types:Unordered list
<ul></ul>
Ordered List<ol></ol>
List items are indicated by <li></li>
Lists
Unordered lists (bulleted lists) <ul> <li>One</li> <li>Two</li> </ul>Ordered lists (numbered lists) <ol> <li>One</li> <li>Two</li> </ol>
Font
You can modify more exactly the way text looks by using the <font></font> tag:
<font color=“red” size=“3” face=“Garamond”>
This is red, size 3, and in Garamond!
</font>
Entities
Some content characters may not show up properly if simply placed inside tags.
How would you mark up the following:
Is 3<4 ?
Entities
In order to display these characters, we use entities to represent them:
Character: Entity:
< <
> >
& &
[space]
CSS – Cascading Style sheets
•HTML is limited in making website look cool• CSS Overcomes the limitation of HTML
•CSS enables you to modify existing website
•Universal style sheet: can be applied to any
website
•Adds design to HTML structure
• Separates design and structure
CSS – ExampleBody {Font-family: verdana, arial, sans-serif;Font-size:14px;Line-spacing:2em;}h1 {color: #69887d;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36px; font-style: normal; font-weight: bold;text-decoration: none;}
Note: Write this code in a notepad and save it with extenstion .cssFor example style.cssYou can call (apply) the above setting using the code:
<link rel="style" href="style.css">
Place it between <head></head> tag
HTML editors
Specialized SoftwareFrontPage – MicrosoftGoLive – AdobeDreamweaver – Macromedia
HTML Tutorialswww.j-learning.orghttp://webdesign.about.comwww.w3.org./markup/guide
Problems With HTML
Competing versions of browsers introduced features beyond the standards
Inconsistent implementations of display engines and scripting
Content and presentation mixed togetherLayout often done with tablesEach element had many presentation attributes,
resulting in laborious maintenance
XHTML
XHTML is a version of HTML modified to conform to the XML standard
Designed to separate content from presentation Content in XHTML Presentation controlled by Cascading Style Sheets (CSS)
Extensible – Additional elements can be definedXML Compatible – Other XML based languages can be
embedded in XHTML documents
For more: http://www.w3schools.com/html/html_xhtml.asp
Thank YouQuestions & Comments
