Web Design and Internet Literacy

1. Web Design and Internet Literacy Kathleen Eilers crandall Camille Aidala TIDE at ASD – June 22, 2000

2. Introduction – Presenters Workshop leaders: • Kathleen Eilers crandall, Ph.D. English professor at NTID; develops and uses web technologies for teaching reading, writing, computer technology, and education courses • Camille Aidala Instructional Developer at NTID; provides design and development services for faculty, staff, and administrators

3. Introduction – Objectives Objectives for this workshop: • Understand how a web page works • Design and produce a small web site (2 – 3 web pages) that includes: text, images, links, lists, tables, and communication contact. • Collect resources to assist you with continued skill development

4. Introduction – Participants Survey of Participants Purpose: to assist us in addressing your needs so we can start the hands-on activities at the level of your present needs and skills. • Your Access • Your Audience • Your Experience

5. Introduction – Materials Participants’ bookmark file including: • Materials developed for this workshop • PowerPoint presentation • Directions for producing a basic web site • Supplementary resources • Browsers • Web Development Tools • Lesson Plans • Educational Sites for Students • Research on Internet Use in Education

6. Bookmarks (Favorites) … • Everyone should be at a computer that is connected to the Internet. • Everyone should have their Web Design Workshop disk.

7. Loading Your Bookmarks • Open browser - Netscape • At the top menu bar, click on: Communicator, Bookmarks, and Edit Bookmarks NOTE: Concepts are similar for the IE browser. (You would import favorites to use your bookmark file.)

8. Loading Your Bookmarks • In the bookmarks window, click on: File / Open Bookmarks File • You now see the bookmark file we gave you. • Close the Bookmarks window.

9. Managing Bookmarks • Go to this presentation: http://www.rit.edu/~kecncp/ASD-TIDE/WebDesign.htm • On the Location Toolbar, click the Bookmarks button, and then Add Bookmark, OR drag the location flag to the Bookmarks button. • This new bookmark is now at the bottom of your list.

10. Managing Bookmarks • You can have many bookmark lists, but only one list can be active at a time. • To save a bookmark list, click the Bookmarks button and choose Edit Bookmarks. Then, open the File menu and choose Save As.

11. Managing Bookmarks • You can use Help to learn more about bookmark lists. • Click F1 for Help. Click index and search for bookmarks.

12. How Does the Web Work? • How do you learn best? • Direct exploration and experimentation (student-directed) • Watching, reading, listening to someone else tell you about it (teacher-directed) • A combination of both • How a Web Page Works • What is the internet? (sites accessed June 2000)

15. Essential Terms • As teachers, you realize that understanding is essential for learning. • That means a set of mutually understood terms. • Glossary of Internet Terms • (site accessed June 2000)

17. Terms: Page & HTML • Web page – a text file that contains a set of HTML tags that tell a browser what to do. • HTML (hyper text markup language) – a computer language that tells a web browser how a web page should be displayed. HTML tags do things like change the font color, arrange things in tables, display forms, embed graphics.

18. Terms: Browser & Server • Web browser – a computer program on your computer that knows how to go to a web server, get a web page, and interpret the HTML tags. • Web server – a piece of computer software that responds to a browser’s request and sends a page through the internet to a web browser on your computer.

19. Terms: Homepage & URL • Homepage – the main web page for a business, organization, person or simply the main page out of a collection of web pages. Ex: “check out NTID’s new homepage. • URL – uniform resource locator. The standard way to give the address (location) of any resource on the internet that is part of the world wide web (WWW). Ex: http://www.rit.edu/~418www/new/NTID.html. (sites accessed June 2000)

20. Web Design – Prerequisites Computer skill prerequisites • Managing directories (folders) and files on your computer • Using word processing • Creating/manipulating images • Using email • Searching and browsing the internet

21. Web Design – Prerequisites Planning prerequisites • Knowing what you want users to do at your web site. • Breaking down what you want to do into logical, meaningful parts for display. • Understanding the procedures for creating, displaying, and maintaining a web site.

22. Web Development Cycle 1. Analysis of site’s purpose (objectives) 6. Update 2. Design a site and a test plan 5. Make available to audience 3. Prepare and code material for web display 4. Test and debug the pages

23. 1: Analysis of Site’s Purpose For this analysis, there are three questions to answer: • Who are your potential users? • Why are they visiting your web site? • What do you want users to do at your web site?

24. 1. Analysis of Site’s Purpose Worksheet We will now complete the worksheet questions to illustrate how we planned the web site for this presentation. Participants can recreate this web site, use this site as a model, or create a totally new web site.

25. Example Scenario: Who Who are potential users? • Participants in this workshop • People who would have liked to attend this workshop • People who are curious about this workshop 1. Analysis of site’s purpose (objectives)

26. Example Scenario: Why Why are users visiting the web site? • To complete the workshop activities • To learn how to produce a simple web site 1. Analysis of site’s purpose (objectives)

27. Example Scenario: What What do you want users to do? • Follow the workshop activities • Produce an attractive, functional 2 to 3 page web site • Get resources for continued learning • Be able to contact the workshop leaders 1. Analysis of site’s purpose (objectives)

28. Summary – Analysis of Purpose Example Scenario Purpose: Provide information and directions to the participants of this workshop so they can • Produce a 2 to 3 page web site that includes text, images, links, lists, tables, and a communication contact • Review and continue to learn from this presentation after leaving this conference • Contact the workshop leaders.

29. 2. Design a Site and a Test Plan To accomplish this task, you should consider: • What is a logical flow of information? • How can you facilitate ease of use? • How can you present with visual clarity? • How should your files be arranged? • Will everything work right? (How will you test your site?) 2. Design a site and a test plan

30. Principles: Information Flow Organize your web site on paper. Good plans will: • Help you organize the content that you have. • Indicate where there are gaps or missing pieces. • Avoid time consuming and costly mistakes. • Let you see possible logic problems and design flaws. • Facilitate the sharing of ideas with others. 2. Design a site and a test plan

31. Ease of Use Help your audience: • Write clear directions and information. • Be task centered and concise, not unfocused or wordy. • Display a table of contents or an index to allow users to navigate within your site. 2. Design a site and a test plan

32. Ease of Use (cont.) Follow a consistent design throughout your site: • Use similar logos, banners (headers), and buttons. • Be consistent with margins, spacing, font styles, and positioning. • Use colors and images to convey meaning. Arrange screens in a logical way: • Organize information from left to right, and from top to bottom. • Group similar information visually. 2. Design a site and a test plan

33. Visual Clarity Use color purposefully and sparingly. • Maintain similar color scheme; Don’t confuse users. • Check visibility of the color combinations. Limit number of fonts. • Not all computer have the same fonts available. • Check readability of your fonts and font sizes. 2. Design a site and a test plan

34. File Arrangement Use a project folder (main folder) on your disk for your web site. • Create sub folders as needed. • Give files meaningful names and save files to these folders • When you work on different computers, copy the entire project folder. • Do not just copy files or subfolders. • This practice avoids errors and broken links. 2. Design a site and a test plan

35. Folders and Files Folder  Folder Folders   Files  Files  Files  Files

36. Test Plan Do all the images appear? Do all the links work? Does the site appear correctly on different browsers? Can users accomplish the site objectives? Do pages have good visibility and legibility? 2. Design a site and a test plan

37. 2. Design a Site and a Test Plan Worksheet We will now complete the worksheet questions to illustrate how we designed a site and test plan for the web site for this presentation.

38. Example Scenario: Flow Elements from – Step 1: Summary – Analysis of Purpose Web Design and Internet Literacy Workshop Homepage Workshop bookmarks Workshop presentation Worksheets 2. Design a site and a test plan Pages Linked to Homepage

39. Example Scenario: Ease of Use Web content will come from: • bookmark file • PowerPoint presentation • worksheets First page of site will be a contents page with links to the other three site pages. 2. Design a site and a test plan

40. Example: Ease of Use (cont.) • Design or find a banner (header) for a 640 x 480 screen. • Headings twice as large as other text with color to match banner and ornate type font • White page background • Black, Ariel type font for text • Green links, blue previously accessed links, red active links • Photos of participants and presenters working, not larger than 1/3 height of screen (160 pixels) 2. Design a site and a test plan

41. Example Scenario: Visual Clarity All pages at the site will follow the same: • banner design • color scheme • font scheme 2. Design a site and a test plan

42. Example Scenario: Files Site will have only two folders (directories): • ASD-TIDE (Main folder) • Images (Sub folder of ASD-TIDE) ASD-TIDE folder will have four html files: • Bookmarks-WebDesign.htm • index.htm (This is the homepage.) • Survey of Workshop Participants.doc • Web Design and Internet Literacy.ppt • Worksheets-WebDesign.doc Image folder will contain 5 picture files: • One banner • Five photos 2. Design a site and a test plan

43. Main Folder – ASD-TIDE

44. Image Files • Images are in different files from the html code. • Image files are only referenced in the html file. • This is different than in a word processing file. There images are typically part of the file.

45. Images TIDE-Banner.jpg example-photo1.jpg  example-photo2.jpg Kathy.jpg Camille.jpg

46. Example Scenario: Test Plan Check that all the images appear and test all links. Try the site on IE 5+ and Netscape 4+ browsers and at different screen resolutions. Check objectives: • contents of this workshop are available • resources for further learning exist • users can contact the leaders of this workshop Check visibility and legibility of pages 2. Design a site and a test plan

47. 3. Prepare and Code Material To accomplish this task, you will: • Design or collect and prepare graphics. • Collect and prepare photos. • Collect and prepare text content. • Prepare the html code for each of the web pages in your site.

48. Example Scenario: Materials • Design appropriate banner (header) • Collect and prepare photos of participants and presenters. • Collect and prepare text materials • write content materials (presentation file) • prepare resources (bookmark file) • workshop worksheets (MS Word file) 3. Prepare and code material for web display

49. Design Banner (Header) You can use a pre-existing banner from your school or department. You can design a banner in a graphics program. You can get a free banner from Internet sources. See your bookmark file. • http://www.flamingtext.com • http://www.freewebtemplates.com/banners/index.shtml We will use a TIDE banner that we prepared for this demonstration. (sites accessed June 2000) 3. Prepare and code material for web display