1 / 24

Introduction to <User Centered> Web Development

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.

jacob
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to<User Centered> 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 • 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

  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. DynamicWeb 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. 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

  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

  21. Creating Web page • Entering Text (Spell Check) • Navigation Bar • Formatting (Bold, Italics…) • Headings (H1,H2…H6) • Colors (Text, Background..) • Graphics, Lines, Sound

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

  23. 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!!!

More Related