Transcript Web Page - Drexel University

1
Introduction to
<User Centered>
Web
Development
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
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
Web Basics
Figure 1-1: Web client/server architecture
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
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)
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
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
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
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
Dynamic Web Pages
Database-driven Web site Architecture
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!!!
Development Process
•
•
•
•
•
Define the Users
Gather Requirements
Involve the User
Design the Site
Test the Site
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
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
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…
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
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
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
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
Creating Web page
1.
2.
3.
4.
5.
6.
Entering Text (Spell Check)
Navigation Bar
Formatting (Bold, Italics…)
Headings (H1,H2…H6)
Colors (Text, Background..)
Graphics, Lines, Sound
Web page cont.
• Marquee – scrolling message
• Meta tags – for search engines
– Keywords
– Descriptions
– At beginning of document (don’t show)
• Test
• Print
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!!!