introduction to user centered web development n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to <User Centered> Web Development PowerPoint Presentation
Download Presentation
Introduction to <User Centered> Web Development

Loading in 2 Seconds...

play fullscreen
1 / 24

Introduction to <User Centered> Web Development - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Introduction to <User Centered> Web Development

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web basics
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 basics1
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 basics2
Web Basics

Figure 1-1: Web client/server architecture

web basics3
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 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 addresses1
Communication Protocols and Web Addresses
  • Packets
    • Data that can be routed independently through Internet
  • Domain name
    • Represents an IP address
  • Adomain names server maintains tables with domain names matched to their IP addresses
    • IP = 4 sets of 2 or 3; ie:
  • Internet Service Providers (ISPs)
    • Provide commercial Internet access
communication protocols and web addresses2
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
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
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 pages1
DynamicWeb Pages

Database-driven Web site Architecture

user centered web development
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
Development Process
  • Define the Users
  • Gather Requirements
  • Involve the User
  • Design the Site
  • Test the Site
who are the users
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

Person accessing the site

More concerned with content and ease of use


Client is paying for development of site

More concerned with looks

Client vs. User
lazar s lifecycle model
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
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
  • 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
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
  • 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
Creating Web page
  • Entering Text (Spell Check)
  • Navigation Bar
  • Formatting (Bold, Italics…)
  • Headings (H1,H2…H6)
  • Colors (Text, Background..)
  • Graphics, Lines, Sound
web page cont
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
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!!!