1 / 54

Online Journalism: Theory and Practice

Online Journalism: Theory and Practice. Week 10 Lecture 1 Summer 2011 G. F Khan, PhD Dept. of Media & Communication, YeungNam University, South Korea g ohar.feroz@gmail.com. Last lecture…. --Organizing data and information. This lecture…. --Web design basics.

tynice
Download Presentation

Online Journalism: Theory and Practice

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Online Journalism: Theory and Practice Week 10 Lecture 1 Summer 2011 G. F Khan, PhD Dept. of Media & Communication, YeungNam University,South Korea gohar.feroz@gmail.com

  2. Last lecture… --Organizing data and information

  3. 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

  4. 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

  5. Tech terms and concepts • Bits and Bytes • Difference between Internet and Web • Web server/client • URL • Domain name • Browsers • RSS • FTP

  6. What is a good Web site from a design standpoint?

  7. Five basic concepts • Alignment • Proximity • Repetition • Contrast • Spelling • Results: Professional looking pages

  8. How do users think? • In order to use the principles properly we first need to understand: • How users interact with Web sites. • How they think • What are the basic patterns of users’ behavior

  9. 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

  10. Basic Design Principles • Alignment • Items on the page should be lined up • Nothing should be placed on the page randomly • Pick an alignment and stick to it • Right, Center, Left • Don’t leave “orphans”

  11. Example 1

  12. Example 2

  13. Basic Design Principles • Proximity • The relationship items develop when they are close together • Grouping for identity • The eye should not have to “jump around” the page, nor have to search for related information. • Be conscious of the space between elements. • Group together • Space them apart • Difference between a paragraph and a break: <P> and <BR>

  14. Example

  15. 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

  16. Example 1

  17. Example 2

  18. Basic Design Principles • Contrast • What draws your eyes to the page • Making things VERY different • Use color, size,contrastingbackgrounds, etc.

  19. Example 1

  20. Example 2

  21. Spell it Right! • Bad spelling and bad grammar can destroy the professional effect of your web site • Use spell checker • http://checkdog.com/?sp=1

  22. 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: • Spelling • Contrast • Repetition • Alignment • Proximity • http://www.youtube.com/watch?v=mF_mWi6r-9I

  23. What is HTML?

  24. What is HTML? • HTML=Hypertext Markup Language • Simply, 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.

  25. 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.

  26. HTML Basics HTML is primarily composed of two types of markup: • Elements or tags • <html></html> • Attributes that modify an element

  27. 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

  28. HTML • HTML tag: <> angle brackets • HTML tags: come in pairs called tag sets • HTML tags: starting tag or opening tag and an ending tag or closing tag • HTML tag sets tell the browser where formatting should start and end.

  29. HTML • Some HTML Tags come in pairs • A 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

  30. Elements General format of an element: <startTag>Target content</endTag> HTML is NOT case sensitive…

  31. 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

  32. 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>

  33. 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

  34. 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”

  35. 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

  36. HTML Comments An HTML Comment which is NOT displayed in the page is done like this: <!-- This is a comment -->

  37. 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

  38. 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

  39. 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!

  40. 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

  41. 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)

  42. 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>

  43. Lists Two main types: • Unordered list • <ul></ul> • Ordered List • <ol></ol> • List items are indicated by <li></li>

  44. 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>

  45. 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>

  46. Entities Some content characters may not show up properly if simply placed inside tags. How would you mark up the following: Is 3<4 ?

  47. Entities In order to display these characters, we use entities to represent them: Character: Entity: < &lt; > &gt; & &amp; [space] &nbsp;

  48. 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

  49. CSS – Example Body { 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 .css For example style.css You can call (apply) the above setting using the code: <link rel="style" href="style.css"> Place it between <head></head> tag

More Related