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

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

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

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

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

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

12. Example 1

13. Example 2

14. 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: and

15. Example

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

17. Example 1

18. Example 2

19. Basic Design Principles Contrast  What draws your eyes to the page  Making things VERY different  Use color, size,contrasting backgrounds, etc.

20. Example 1

21. Example 2

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

23. 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 http://www.youtube.com/watch?v=mF_mWi6r- 9I

24. What is HTML?

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

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

27. HTML Basics HTML is primarily composed of two types of markup: Elements or tags  Attributes that modify an element

28. Elements Elements are the fundamental building blocks of HTML. They are the tags that tell the browser what the enclosed text is. My first HTML page The title element tells the browser that this is the title of the page. Elements must be terminated, but not all

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

30. HTML Some HTML Tags come in pairs A HTML Tag that requires just an opening tag is called an empty tag - add a line break - insert a horizontal line - insert an image

31. Elements General format of an element: Target content HTML is NOT case sensitive…

32. Common Elements All markup must be placed within HTML tags Contains information about the page as well as other non-display content All display content should go inside these tags

33. Example My 1 st Web Site Welcome to my site This is my first Web site

34. Common Elements Tells the browser that the enclosed text should be set off in a paragraph. This is a heading – the number can range from 1 to 7 for different sizes

35. Text Display Elements or Bolds the tagged text or Italicizes the tagged text Preserves white space and breaks and stands for “preformatted”

36. Common Tags Inserts a line break This is an empty tag – it does not have a closing tag. Inserts a horizontal rule (line) This is another empty tag

37. HTML Comments An HTML Comment which is NOT displayed in the page is done like this:

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

39. Attributes The generic way of using an attribute looks like this: Target content Single or double quotes may be used to hold attribute values

40. Attribute examples This will appear centered This tag inserts the image “mypicture.jpg” into the page. Make sure to use the right path!

41. Hyperlinks Hyperlinks are created using the tag, which stands for “anchor”. The format looks like this: Content to click on for the link The uri can also be a mailto: linkmailto:

42. Tables Tables require three different tags: Defines the table itself Defines a table row Defines a table cell (table data)

43. Tables-example People on the team Name Position Kim Analyst Park Technician

44. Lists Two main types: Unordered list  Ordered List  List items are indicated by

45. Lists Unordered lists (bulleted lists) One Two Ordered lists (numbered lists) One Two

46. Font You can modify more exactly the way text looks by using the tag: This is red, size 3, and in Garamond!

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

48. Entities In order to display these characters, we use entities to represent them: Character:Entity: << >> && [space]

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

50. 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: Place it between tag

51. HTML editors Specialized Software FrontPage – Microsoft GoLive – Adobe Dreamweaver – Macromedia HTML Tutorials www.j-learning.org http://webdesign.about.com www.w3.org./markup/guide

52. Problems With HTML Competing versions of browsers introduced features beyond the standards Inconsistent implementations of display engines and scripting Content and presentation mixed together  Layout often done with tables  Each element had many presentation attributes, resulting in laborious maintenance

53. 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 defined XML Compatible – Other XML based languages can be embedded in XHTML documents For more: http://www.w3schools.com/html/html_xhtml.asp For more: http://www.w3schools.com/html/html_xhtml.asp

54. Thank You Questions & Comments