1. The WWW and Web Page Design Kin 260 Jackie Kiwata

2. Overview ► The WWW  How it works  Terminology  Domains ► Designing Websites  In general  WYSIWYG  Steps

3. What is the World Wide Web? ► Internetwork that uses TCP and IP  From Intro Lecture ► An architectural framework for accessing linked documents spread over millions of machines ► Began in 1989 at CERN, the European center for nuclear research

4. How the Web Works 1.User opens web browser and clicks on calstatela.edu hyperlink 2.Browser follows the hyperlink by sending request to web server at calstatela.edu 3.Web server returns requested page, which is displayed in client’s browser

5. Terminology ► Browser: fetches page requested, interprets text and displays formatted page on the screen ► Hyperlink: A string of text that contains the address to another page  Also known as a Uniform Resource Locator (URL) ► Web Server: a computer running software that stores pages of a website and handles requests from clients

6. DNS ► Domain Name System ► Handles the naming of websites on the WWW ► The network understands only numerical addresses in the form of xxx.xxx.xxx.xxx  Called an IP address  e.g. 128.66.721.24 ► But 12-number addresses are hard for people to remember, so use DNS to assign meaningful names and match to numerical address

7. Domain ► A name that identifies a computer on the WWW ► Every domain name ends in a Top-Level Domain  3 or more character generic name or 2 character country code  e.g..com,.org,.net,.jp,.au ► Immediately to the left of the TLD is the Second- Level Domain  E.g. calstatela.edu, where calstatela is SLD ► An address may also contain Subdomains, which are left of the SLD  e.g. get.calstatela.edu ► Domain levels are always separated by periods

8. Anatomy of a URL http://www.calstatela.edu/faculty/jkiwata2/index.html second-level domain Top-level domain Folder path HTML page Example:http://cs.ucla.edu/csd/people/graduates.html

9. Website Design Basics ► The Golden Rule: Usability  Visitors are looking for answers  Design your website to give your visitors an answer quickly! ► All other design elements are secondary ► If a visitor’s needs are not filled quickly, they will look elsewhere

10. Creating Websites ► Create in one of two ways:  Code pages by hand  Use a What You See is What You Get (WYSIWYG) editor ► Today, we will use a WYSIWYG (Google Sites)  Web authoring tool  a user interface that allows the user to view something very similar to the end result while the document is being created  e.g. a user can view on screen how a web page will look while it is being created in the WYSIWYG

11. Steps to creating a website 1. Plan site architecture 2. Plan page layout 3. Prepare content 4. Pick typography & color schemes 5. Publish 6. Test We’ll use the example of creating a personal website for professional use.

12. Site Architecture ► How pages are linked relative to one another within a website ► Needs of target audience should guide the organization of pages ► Draw architecture by hand or in Word

13. Planning Page Layout ► How navigation and content are arranged on a page ► Organize layout so that  content is clearly communicated  navigation is thoughtful and intuitive  e.g. Navigation is traditionally located at the top of the page and/or on the left ► If put elsewhere, users may get confused and frustrated

14. Prepare Content ► Web design adage: content is king ► Website should clearly communicate content to target audience ► Content should:  Be appropriate for target audience  Focus on the core message ► Content should not:  Be cluttered  Be without purpose ► Albert Einstein: “Everything should be as simple as possible, but no simpler”  Communicate only as much to get the message across

15. Pick Text & Color ► Guidelines are similar to picking the design scheme for PowerPoint slides  Use simple, logical color palettes  No flashy graphics or annoying animations  Text should be easy to read

16. Testing ► Proofread content for grammatical or spelling errors ► Test all links to ensure integrity of site navigation and external links ► Access site by typing in URL rather than viewing page through site editor

17. In short According to http://www.webpagesthatsuck.com, don’t commit the following mistakes: http://www.webpagesthatsuck.com 1. We've designed our site to meet our organization's needs (more sales/ contributions) rather than meeting the needs of our visitors. 2. It takes longer than four seconds for the man from Mars to understand what our site is about. 3. Our site looks like we've never seen another web site. 4. We use design elements that get in the way of our visitors. 5. Our site doesn't make us look like credible professionals.

18. Examples of websites that suck http://www.alternativetransportservices.co.uk http://www.tallyhouniforms.com/ http://www.kcthecatalog.com/ Can you figure out why?

19. Using Google Sites

20. 1. Access ► Log into Gmail account ► Use top menu bar to access Sites

21. 2. Create Site Give your site a name See the actual web address here This section can be changed later

22. 3. Managing your site Home base looks like this:

23. 4. Adding pages From the Site Manager, click on Create New Page Select Web Page as type of page We won’t use the other 4 types of pages in the lab

24. 4a. Assign folder path ► Choose the directory according to site architecture ► Notice the differences between the two

25. 5. Navigation & Layout From the Site Manager, click on Site Settings > Change Appearance Get the Appearance page, where you can edit Navigation, Layout, Colors and Themes

26. 5a. Appearance Site Layout Navigation – click edit to add links Sidebar Items

27. 5b. Navigation Shows pages currently in navigation Changes order displayed Removes navigation link Adds another navigation link

28. 5c. Layout Conventional layout as default Modifies conventional layout

29. 6. Creating content From Site Manager, 1. Click on page to edit 2. Edit Page button

30. 6a. Links Four types: 1. Internal Page  Your website pages  Link to these pages from your website navigation or from internal page links 2. External URL  Offsite web address 3. Email Address  Instead of http://, uses mailto: 4. Uploaded File  Files without markup (non-html, -xhtml, -css files)  e.g..doc,.pdf,.xls,.ppt

31. 6b. Creating Links 1. Highlight content 2. Insert > Link

32. 6c. External vs. Internal Links External Link options Internal Link options

33. 6d. Email Address 1. Highlight text containing email address (must have ‘@’). 2. Insert > Link 3. Editor will automatically create email address link

34. 7. Colors & Themes Access from Appearance Menu

35. 8. Testing View website without editor by logging out and typing in web address No Editor Editor

36. References ► WWW Tanenbaum, A. S. (2003). Computer Networks. Upper Saddle River, NJ: Prentice Hall ► Web Design Mumaw, S. (2002). Simple: Websites. Gloucester, MA: Rockport ► Google Sites Help Files http://sites.google.com/support/?hl=en