XHTML vs. HTML - Which is the Best for You?

Transcription

1 Concepts, Technology, and Applications of Mobile Commerce Robert Nickerson Professor and Chair Department of Information Systems Director, Center for Electronic Business College of Business San Francisco State University San Francisco, California USA Robert C. Nickerson, 2009 Agenda E-commerce 1. E-commerce systems: Characteristics and functions 2. E-commerce systems: Case study 3. E-commerce systems: European analysis M-commerce 4. M-commerce systems: Characteristics and functions 5. M-commerce technology 6. M-commerce applications 7. M-commerce application development 8. M-commerce trust, security, and payment 9. M-commerce issues Beyond m-commerce: 10. U-commerce: The next step after m-commerce? 1

2 Ancient Chinese Proverb I hear... and I forget I see...and I remember I do...and I understand Lecture 7 M-commerce application development Objectives: To understand the interaction between the client side of an m-commerce application, the server side of the application, and WAP To use a mobile phone simulator to demonstrate a simulated m-commerce application To create the user interface of the client side (mobile phone) of an m-commerce application using XHTML To set up web server software for communication with a mobile phone simulator To examine server side capabilities required for m- commerce applications To examine user interface design for small devices 2

3 M-commerce: Model Three main parts Mobile client (terminal) M-commerce service (server) Wireless communications link Client side of application WAP Server side of application Software for m-commerce applications Mobile client Browser (example: Mobile Browser) Receives HTML from server Displays pages on client screen WAP Provides communications protocol between mobile client and server Server Web server software (example: Apache) Sends HTML to client Sends language code to language processor Language processor (example: PHP) Receives language code from web server Sends SQL to database management system (DBMS) Database management system (example: MySQL) Receives SQL from language processor Performs queries and updates on database Sends results to language processor 3

4 Software for m-commerce applications Mobile client Server Mobile Browser Markup language (XHTML) Apache PHP PHP processor SQL MySQL WAP Phone simulators Mobile phone simulator allows applications to be developed and tested on PC Mobile phone simulators are available from several sources Openwave Nokia Openwave mobile phone simulator Runs under Windows Includes Openwave Mobile Browser 4

5 Installing Openwave phone simulator Download Openwave phone simulator >Tools and SDK >Phone Simulator >Download Phone Simulator V7 >Download V70 Simulator.exe Register Install phone simulator (double click.exe file) Installation demo Documentation >Tools and SDK >SDK documentation >Client SDK 7.x XHTML tutorial and demos >Client SDK 7.x >XHTML Tutorial Mobile phone markup languages imode: chtml (compact HTML) Pre-WAP: HDML (Handheld Device Markup Language) WAP 1.0: WML (Wireless Markup Language) WAP 2.0: XHTML (extensible HTML) imode is moving to XHTML XHTML is becoming the standard markup language for small devices XHTML HTML reformulated in XML Used for web sites on all devices History of XHTML HTML 1-> HTML 4 -> XHTML 1 XHTML for mobile devices XHTML Basic: subset of XHTML XHTML Basic 1.1: current version (adopted July 2008) 5

6 Differences between XHTML and HTML All tags and attributes must be in lower case Documents must be well formed End tags cannot be omitted Example: <p>text</p> Empty elements can end with / and do not require an end tag Example: <br /> (Note: put space before / for compatibility) Tags with attributes can end with / Example: <img src= image.gif /> Tags cannot overlap (elements must be correctly nested) Example: CORRECT: nested elements. <p>here is an emphasized <em>paragraph</em>.</p> INCORRECT: overlapping elements <p>here is an emphasized <em>paragraph.</p></em> Attributes must be in quotation marks Example: <img src= image.gif /> XHTML Basic tags Module Element Structure body, head, html, title Text abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Hypertext List Forms a dl, dt, dd, ol, ul, li button, fieldset, form, input, label, legend, select, optgroup, option, textarea Basic tables Image Object Presentation Metainformation caption, table, td, th, tr img object, param b, big, hr, i, small, sub, sup, tt meta Link Base link base 6

7 XHTML document format <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " <html xmlns=" xml:lang="en"> <head> <title> </head> </title> <body> </body> </html> XHTML example:restaurant Application: Restaurant locator Demo with phone simulator: restaurant/restaurant.html Requires location technology to be functional Application documents (6): restaurant.html find.html address1.html map.html address2.html more.html Application documents discussion 7

8 XHTML example:restaurant Tags used in Restaurant application: <html>.. </html> : html document <head>.. </head> : document heading <title>.. </title> : document title <body>.. </body> : document body <p>.. </p> : paragraph <img src=.. /> : image <b>.. </b>, <strong>.. </strong> : bold face <br /> : line break <table>.. </table> : table <tr>.. </tr> : table row <td>.. </td> : table data <a href=.. >.. </a> : anchor <h#>.. </h#> : heading # (#=1(largest),2,3,4,5,6(smallest)) Application: Movie guide Demo with phone simulator: movielife/index.html Application documents (15): index.html (index2.html) quick.html theaterlist.html buyticket.html result.html sure.html top5.html movie.html findmovie.html movielist.html theater.html theaterlist2.html map.html moviesattheater.html about.html Application documents discussion XHTML example: MovieLife 8

9 XHTML example: MovieLife New tags used in MovieLife application: <i>.. </i>, <em>.. </em> : italics <ol>.. </ol> : ordered list <li>.. </li> : list item <form action=.. method= get >.. </form> : form <span>.. </span> : text delimiter for applying style <input type=.. name=.. /> : input control <div>.. </div> : section divide <select name=.. >.. </select> : selection list <option>.. </option> : pull-down list option <hr /> : horizontal rule XHTML example: Peer2Park Application: Parking spot selling and buying Demo with phone simulator: peer2park/index.html Requires location technology to be functional Application documents (14): index.html buynow.html buyoffer.html waitforpush.html sell.html yes.html different.html sellerformreceiver.html current.html about.html alertinbox.html parkingalert.html yes2.html map.html Application documents discussion 9

10 XHTML example: Peer2Park New tags used in Peer2Park application: <pre>.. </pre> : present text as shown without formatting Cascading style sheet Defines style in a document Identified in <head> with <link> tag: <link href= style.css /> Gives style for different elements Defines regular class that can only be used within an element Defines generic class that can be used anywhere in document 10

11 Using Openwave phone simulator with a remote server Openwave phone simulator looks for application files at URL of remote server Modify href in XHTML for each page reference to: href= Example: isstrategy server at SFSU href=" Upload application files to server Use SSH file transfer Create public_html folder on server Create folder (foldername) within public_html on server Upload application files to folder Demo Open home page of application with Openwave phone simulator: Example Restaurant: Part of restaurant.html on isstrategy server <table> <tr class="blue"> <td><p class="nowrap">1 <a accesskey="1" href=" n (2 Restaurants)</a></p></td> </tr> <tr> <td><p class="nowrap">2 <a accesskey="2" class="bluetext" href=" (2 Restaurants)</a></p></td> </tr> Upload demo (SSH file transfer) Host name: isstrategy.sfsu.edu User ID: xxxxxxxx Password: ******** Application demo 11

12 Installing Apache on a local host Local host is Windows based PC Download Apache >HTTP Server >Apache Released Download >Win 32 Binary (MSI installer) Install Apache (double click.msi file) Domain Name: anything.com Server Name: anything.com Address: admin@anything.com Click: Start manually Setup type: Typical Installed at default location Installation demo Using Openwave phone simulator with Apache on a local host Openwave phone simulator looks for application files in htdocs folder of Apache2 folder Modify href in XHTML for each page reference to: href= Example: href= Copy folder (e.g., foldername) with application files to: C:Program Files\Apache Software Foundation\Apache2.2\htdocs Open home page of application with Openwave phone simulator 12

13 Restaurant: Part of restaurant.html on local host <table> <tr class="blue"> <td><p class="nowrap">1 <a accesskey="1" href=" (2 Restaurants)</a></p></td> </tr> <tr> <td><p class="nowrap">2 <a accesskey="2" class="bluetext" href=" (2 Restaurants)</a></p></td> </tr> Application demo Example Server side capabilities What capabilities are needed on the server side for m- commerce applications? Database Application functionality Database capabilities: Server must store data needed for application Application functionality: Server must provide functionality needed by application 13

14 M-commerce system functions Electronic catalog Electronic shopping cart Customer Product presentation Order entry Electronic payment Order fulfillment = mobile connection Customer service Data acquisition Product support Data warehouse Data analysis Management Server side capabilities: Restaurant application Product: Restaurant information Restaurant database entities Restaurant entity Map entity (map may be attribute of restaurant entity) Restaurant application functionality Product presentation Determine user s location Query restaurant database for number of restaurants of each type within 1 or 3 miles of user s location and present to user Query restaurant database for names of restaurants of the type selected by user and present to user Order fulfillment Query database for information about user selected restaurant Query database for map 14

15 M-commerce system functions: User interaction Product presentation Limited screen for presentation of product Best if product is either known to user or is very simple Order entry Best if minimal keystrokes are required Best if know information about user is used to pre-populate order Electronic payment Best if minimal keystrokes are required Best if known information about user is used to pre-populate payment Order fulfillment Electronic order fulfillment limited to items that can be used on mobile device, e.g., information, ringtones, music, games, small applications Customer support Best by phone Product support Best by phone User interface design for small devices Wired internet interface Wireless interface 15

16 User interface design for small devices Small devices create special problems for user interface design Mobile phones (focus of this lecture) PDAs Some problems with mobile phone user interface: Screen: Small: limited number of lines and short line length Low resolution Keyboard: Limited keys Multiple times must be pressed for most characters: high level of attention and proficiency required Input entry is slow Some devices have pen input, but not all Navigation: Navigation keys vary by device; some are good, some are not so good Limited menus on screens: Users must remember what keys are used for what actions Mobile use means device can be used in difficult locations: Low light locations, noisy locations, while moving (walking, driving), social situations (quiet) User interface design for small devices How to design the user interface for m-commerce applications on mobile phones Solution: Four factors to consider: User Context Information presentation Data entry method 16

17 User interface design for small devices: User considerations User preferences: Allow user to customize according to preferences Provide user selected content prioritization Provide user selected display format User cognitive load: Reduce cognitive load because users often perform multiple tasks when using mobile device Provide for limited and split attention by user Reduce information overload Put most important content first Provide screen elements (e.g., boarders, bold face) that guide user to important parts of screen User disabilities: Provide features that aid users with different disabilities Use audio feedback (visually impaired) Do not rely on color (color blind) Use tactile feedback such as vibration (hearing impaired) User interface design for small devices: Context considerations Context: Characteristics of situation in which user utilizes the application Location, proximity to other entities (e.g., stores) User personal characteristics: age, gender, education, etc. Characteristics of co-located people Physical environmental: noise, light level, weather, etc. Context-aware application: Adjusts services and information according to context Example: Advertise according to location (location-based advertising) Example: Adjust light level of screen based on light conditions Considerations: User control: Provide user control of context-aware services and information (turn on/off) User privacy: Provide user control of visibility of context-aware services and information 17

18 User interface design for small devices: Presentation considerations Problem: Cannot display large amount of information on small screen How to utilize the space effectively Considerations: Visualization Adaptive interface Multimodal presentation Visualization: Display data in meaningful and useful way Place most important content near top Use succinct and meaningful labels Avoid horizontal scrolling Limit graphical content Use consistent layout among pages Limit depth of menu structure Design for shortest path to reach destination page User interface design for small devices: Presentation considerations Adaptive interface: Design application to reconfigure based on user action Provide additional information based on user actions Customize presentation based on user preferences Multimodal presentation: Present information in multiple ways Visual: requires visual attention Audio: useful in situations where user cannot pay attention to visual content, where noise is not an issue Tactile: useful in situation where users cannot pay attention to visual or audio content, where light level and/or noise are problems 18

19 User interface design for small devices: Data entry method considerations Problem: Mobile devices have limited keyboard and limited navigation keys Considerations: Limit input required: Require minimal input from user Use user identity to pre-populate input data Provide simple navigation: Use minimum menu depth Provide the shortest path to the desired page Provide for reversal of action Other input options: Soft keyboard on screen: difficult with small screens, requires high visual attention by user Handwriting: requires training, careful attention by user Voice: hands free but limited by voice recognition technology Multimodal: provide use of multiple devices (e.g., keyboard, voice, pen) simultaneously M-commerce trust, security, and payment How are trust, security, and payment handled in m- commerce applications? 19