Introduction to user centered web development
Download
1 / 24

- PowerPoint PPT Presentation


  • 316 Views
  • 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.

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

PowerPoint Slideshow about '' - jacob


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
Introduction to user centered web development

Introduction to<User Centered> Web Development


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: 141.209.151.119

  • 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

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

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


Frontpage
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
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
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
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!!!


ad