1. 1 Introduction to Web Development

2. Web Basics The Web consists of computers on the Internet connected to each other in a specific way Used in all levels of society –Business, Education, Government…. –Information sharing The Web has a client/server architecture

3. Web Basics Web browser –Client-side to connect to Internet Web servers –Run special Web server software –Listener Component included in Web server software Monitors for messages sent to it from client browsers

4. Web Basics Figure 1-1: Web client/server architecture

5. Web Basics Web page –Usually a file with an.htm or.html extension that contains Hypertext Markup Language (HTML) tags and text –HTML Document layout language (not a programming language) Defines structure and appearance of Web pages Web site –Consists of related web pages and files used to support them

6. Communication Protocols and Web Addresses Communication protocols –Agreements between sender and receiver regarding how data are sent and interpreted –Internet is built on two network protocols: Transmission Control Protocol (TCP) Internet Protocol (IP)

7. Communication Protocols and Web Addresses Packets –Data that can be routed independently through Internet Domain name –Represents an IP address A domain names server maintains tables with domain names matched to their IP addresses –IP = 4 sets of 2 or 3; ie: 141.209.151.119 Internet Service Providers (ISPs) –Provide commercial Internet access

8. Communication Protocols and Web Addresses Hypertext Transfer Protocol –Communication protocol used on the Web Web address –Also called Uniform Resource Locator (URL) Figure 1-2: URL Components

9. Dynamic Web Pages Static Web page –Page content set at the time page is created –Useful for displaying data that doesn’t change Dynamic Web page –Also called an interactive Web page –Page content varies according to user requests or inputs –May interface with database

10. Database Basics Databases store an organization’s data in a central location, using a standardized format Database management system (DBMS) –Program used to manage database data and user access –Reduce redundancy –Many users

11. Dynamic Web Pages Database-driven Web site Architecture

12. User-centered Web Development Designing a Web to meet NEEDS of the USER –Ease of use –Minimum download time May not use “coolest” techniques or graphics –Allow to complete tasks quickly Will return!!!

13. Development Process Define the Users Gather Requirements Involve the User Design the Site Test the Site

14. Who are the USERS? Hard to determine –Different platforms (PC, MAC,…) Monitor size may vary –Different browsers (IE, Netscape, AOL…) –Different connection speeds –No training Various levels of knowledge Ease of use very important

15. Client vs. User User –Person accessing the site –More concerned with content and ease of use Client –Client is paying for development of site –More concerned with looks

16. Lazar’s Lifecycle Model Define Site Mission and Users –Goal of Web Site; Who will come? Collect User Requirements –Speed, Content… Create Conceptual Design –Navigation, Layout, Color, Graphics…

17. Lazar’s Lifecycle Model continued Create Physical Design –Technical development of site Perform Usability Test –Sample target user population Implement and Market –Site goes “live” Evaluate and Improve

18. FrontPage Microsoft product Web development tool Creates HTML code Has FrontPage components –Prewritten program to interface with server FrontPage Server Extensions Search page, data-base interface Dynamic pages

19. Frame Page Divide page into different windows Each window = different page –One as continuous Table of Contents –Each frame has independent scroll –Not suggested for home page

20. Views Page – to create, edit and format a page Folder – to view, create, delete, copy folders Report – to analyze, summarize, and produce reports about site Navigation – to display navigation structure Hyperlinks – to display hyperlinks between pages Tasks – to maintain list of tasks required

22. Creating Web page 1.Entering Text (Spell Check) 2.Navigation Bar 3.Formatting (Bold, Italics…) 4.Headings (H1, H2 … H6 ) 5.Colors (Text, Background..) 6.Graphics, Lines, Sound

23. Web page cont. Marquee – scrolling message Meta tags – for search engines –Keywords –Descriptions –At beginning of document (don’t show) Test Print

24. Case 3: Garden Grill Page 2.48.. Do ALL items –Title: GardenXXX where XXX = your initials –Add “Your Name” to Web page!!! Hand-in (due next week) –Planning Analysis Sheet (2.04) –Printout of # 15 and 16 –Turn in disk – label with name!!!