1. Web Development 311 Fall 2003

2. 311: Fall 20032 Why web pages? Most companies have intranets, extranets, and web sites Content can be changed quickly and easily –Make sure all links are still updated More and more people are putting up personal pages –E.g. blogs

3. 311: Fall 20033 Developing and managing a web site Web server Intranet server Extranet server Internet Web developer Business manager Access, publish Publish (FTP)

4. 311: Fall 20034 Web basics HyperText Transfer Protocol (HTTP) –Browser sends server an HTTP request –Server sends browser an HTTP response –No established connection between the two computers HyperText Markup Language (HTML) –Ordinary text files, but “marked up” with code that the browser interprets Hyperlinks –Jump from page to page – Search at Google Search at Google

5. 311: Fall 20035 You need this to develop web pages HTML editor –Text-based Can be very powerful at editing HTML code Tedious –WYSIWYG (e.g. FrontPage) Means of publishing files –FTP program or built into editor Web server –IIS or Apache are most popular –IIS can have FrontPage extensions –Where is it hosted? Domain name –Some ISPs will let you have your own domain name –www.gardenrocks.com vs. www.myISP.com/users/webs/gardenrockswww.gardenrocks.com www.myISP.com/users/webs/gardenrocks

6. 311: Fall 20036 Web Development Basics Planning the site User centered design –Who are the users? Different user groups? –What should they get out of visiting the site? –Example www.uwosh.eduwww.uwosh.edu Planning the content –Draw a flowchart –E.g. 311 website

7. 311: Fall 20037 Partial 311 Flowchart Welcome SyllabusAssignments IT Problem 1IT Problem 2 ScheduleGrades Not always hierarchical structure: Page 1 Page 2 Page 3

8. 311: Fall 20038 Navigation through the Site Site identity –Each page needs to clearly identify where it belongs –Good example: Most corporate web sites –Bad example: UWO Calendar of events and TitanWeb Knowing where you are –Give clues on where you are and how to get out of there –Good example: www.about.comwww.about.com –Bad example: 311 web site Navigational tools –Persistent Menu (710-Osh web site using frames) –Sitemap or Index (www.kelloggs.com)www.kelloggs.com –Logo that leads to homepage More guidelines –Top Ten Guidelines for Homepage UsabilityTop Ten Guidelines for Homepage Usability

9. 311: Fall 20039 10-minute exercise Define the purpose for your web site –Is there more than one purpose? Determine possible audiences for your personal web site What would be each group’s reason for visiting your site? Draw a flowchart for some of the pages that might be on your site –Hierarchical? Sequential? Sketch the welcome page. How do you give each group information about where to go? What basic navigational structure would you use?

10. 311: Fall 200310 FrontPage Tutorial Startup File location –Develop and test web on local machine. When it’s ready to go, post it to the server –A Frontpage web is a directory that has some special files in it. To copy/move a web you just copy/move the entire folder

11. 311: Fall 200311 FrontPage Tutorial - 2 Entering information –Create a single-page web –Entering text –Adding images –Hyperlinks to text, images, and email addresses –Using tables to set up layout

12. 311: Fall 200312 FrontPage Tutorial - 3 Managing a web site –Multiple pages, folders –Navigation –Shared borders, frames Publishing to web server –UWO server does not have FrontPage extensions –Must publish using FTP

13. 311: Fall 200313 Coding in HTML Every HTML file must begin and end like this

14. 311: Fall 200314 Coding in HTML My first Web page Appears in browser title bar Nothing inside HEAD appears on actual page

15. 311: Fall 200315 Coding in HTML My first Web page Page content goes inside BODY tags

16. 311: Fall 200316 Coding in HTML My first Web page Top Level Heading A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. A simple paragraph of text. A new bold paragraph. Search Hyperlink Picture

17. 311: Fall 200317 Hyperlink from image Put image inside the tags instead of text:

18. 311: Fall 200318 More detail about HTML Tags Structure of every tag: – –Example Centered Heading <img src=“../images/mypic.img” –Different tags have different possible attributes

19. 311: Fall 200319 FrontPage and HTML Don’t use Frontpage to handcode HTML –It’ll mess up everything –Can use it to view source Use Notepad or other text editor –Not Word or WordPad –Save with.html or.htm extension Save file and open in browser (refresh)

20. 311: Fall 200320 Coming up Thursday –Lab: DB Project or Problem 4 Tuesday: TBD Thursday –Gobble-gobble, thank you