ECT587 Wireless ECommerce

1
ECT587 Wireless E-Commerce

• Session 2
• How to Applications run on Mobile Devices
• CHTML / Palm Clipping

2
Web vs. Mobile Development
3
Mobile vs. Web Development
4
How do Applications run on Devices?

• Three Paths
• Native OS
• Virtual Machine Library over Native OS
• Markup in a Browser

5
1. Native OS

• Palm OS
• Symbian EPOC
• Microsoft Windows CE 3.0
• Linux

6
Palm OS 4 ways!

• Native Palm Applications
• C with ARM compiler
• Hotsync to download
• Java
• J2ME
• Native HTML in a browser
• Multiple vendors
• Palm Clipping up to ver 4.x only
• Compressed file
• Pages
• Graphics
• Internal External links
• Run in "browser

7
Palm OS Newer versions

• Version 5.x (Garnet)
• New faster processors
• Better screens/color depths
• Multimedia capabilities
• Security options
• 128 bit SSL3, RC4, SHA-1
• Wireless connectivity
• 802.11
• Bluetooth
• GSM/GPRS
• cdma95/2000

• Palm OS Cobalt (Version 6.0)
• Complete rewrite
• Better compatibility with Windows
• Outlook
• Multi-threaded
• Multi-tasking
• Memory protection
• Up to 256 MB RAM ROM
• Support for more memory
• Support for larger screens
• Up to 32K x 32K pixels
• System-wide security
• Corporate networks (VPN)
• Emulation to run software written for earlier
  versions.

8
Symbian EPOC

• 4 ways to develop programs/content
• C, Java (J2ME), WAP/WML, Web/HTML
• Integrated services
• Contact Mgt., Scheduling, Messaging, Browsing,
  Telephony
• Communications Protocols
• TCP/IP, WAP, GSM, GPRS, Bluetooth, IrDA, Serial
• Security, incl. certificate mgt.
• Unicode
• Data synchronization
• www.symbian.com

9
Microsoft Embedded Visual Tools

• For developing WinCE 3.0 applications
• Embedded VB, VC, VC
• .NET Compact Framework
• ASP.NET Mobile Controls
• SQL CE
• SDKs
• Pocket PC, Handheld PC, Palm-size PC
• Emulators
• Sample code

10
Linux

• Sharp, Olivetti, Agenda, others
• Palm refused to license to Taiwanese PDA manuf.
• Advantages
• Free
• Full Unix OS
• Multi-tasking
• Processor support
• IPv6 support
• Bluetooth support
• Java support
• Disadvantages
• Custom UI from scratch

• Do consumers care?
• Reliable
• Nice UI
• Lots of applications
• Sync with desktop
• IR beaming support
• Lineo Embedix
• Embedded Linux OS
• www.lineo.com
• Compaq
• Open source research

11
2. VM Library over Native OS

• Virtual Machine
• Intermediate objects/functions
• Facilitate communication between OS and
  applications
• Provide a standard interface
• Allow different processors / OS / device
  capabilities

• Sun Java J2ME
• Qualcomm BREW
• Syclo Agentry
• AppForge

12
Sun J2MEJava 2 Micro Edition

• Java 2, Micro Edition
• 256k runtime environment
• Color and graphic support
• Ability to download apps at runtime
• Compressed JAR files
• Self-updating
• Model
• Configurations define general device types
• Profiles define specific device category
  properties
• Built on top of configurations
• Licensed by every major phone manufacturer
• Vendors have their own class library
• Some have their own VM's!

iMode Java-based phones
13
Qualcomm BREW

• Binary Runtime Environment for Wireless
• Shipped May, 2001
• Now version 2.0
• Applications for CDMA devices
• Runtime environment on the chipset
• Windows development environment with emulator
• Server-side support
• Security / Privacy
• Downloadable apps. / Auto-updates
• http//brew.qualcomm.com

14
AppForge

• Use VB 6.0 to create custom apps
• Runs on Palm, Pocket PC, Symbian
• AppBooster
• Virtual machine installed on device
• Free for Palm Symbian
• 10 for most PocketPC models
• Advantages
• Quick development
• Well-known tools
• Disadvantages
• Apps dont have native look/feel
• Slightly slower due to VM

15
Syclo Agentry

• VM installed on device
• Run-time client
• Workbench
• Custom IDE
• Dialog-driven
• No code
• Server
• Strong in
• CMMS
• Facilities mgmt.
• Asset tracking
• Repairs

16
3. Markup in a Browser

• Browser application on device
• HTML or c-HTML
• Palm Clipping
• HDML
• WAP/WML
• XML and XHTML Basic

17
c-HTML

• Published in 1998 by W3C
• Compact version of HTML
• Reduced version based on HTML 2.0, 3.0 and 4.0
• But supports regular browser
• Japans i-mode uses c-HTML
• More than 34 million users
• 50,000 independent sites creating content

18
c-HTML in general

• Supports
• Head and Body elements
• Title
• Headers
• Anchors
• Images
• GIF only
• Local picture symbols
• Text color alignment
• Lists
• Horizontal rules
• Comments

• Does Not Support
• Image maps
• Tables
• Cookies
• Fonts
• Frames
• JPEG images
• Style sheets
• Client-side scripting

19
c-HTML in i-Mode

• Read handset type
• Server can customize content for handset
• Character support
• Shift-JIS
• Half-width Kana chars.
• Local picture symbols
• Vertical scrolling only
• Automatic line breaking
• iMelody
• Ring tone downloads
• Animated GIFs

• Transfers b/w applications
• To/from email
• To/from phone book
• Make a phone call
• Tel tag
• Max page size 5Kb
• Incl. images and tags
• Page lttitlegt ? Bookmark
• Max of 24 bytes
• Strict limits on form options
• Eg Input Text

http//www.nttdocomo.co.jp/english/p_s/imode/index
.html
20
c-HTML Example
ltHTMLgt ltHEADgtltTITLEgtAlt/TITLEgtlt/HEADgt
ltBODYgt ltDIV align"center"gtEnquirieslt/DIVgt
ltHRgt ltDIV align"center"gtBy
Arealt/DIVgt ltA href "http//url/tko.htm"
accesskey "1"gt63879Tokyolt/AgtltBRgt
ltA href "http//url/kngw.htm" accesskey
"2"gt63880Kanagawalt/AgtltBRgt ltA href
"http//url/chb.htm" accesskey
"3"gt63881Chibalt/AgtltBRgt ltA href
"toiawase" accesskey "4"gt63882Other
Areaslt/Agt ltHRgt ltA name"Enquiry"gtlt/Agt
If you are not in the areas listed above,
please selectltBRgt ltA href
"tel[phone]"gtherelt/Agt for enquiries by
phoneltBRgt ltA href"mailtowebmst_at_www.xxx.co.
jp"gtherelt/Agt for enquiries by e-mailltBRgt
lt/BODYgt lt/HTMLgt
21
Palm Clipping

• Palm OS only
• Versions 4.1 and earlier
• Version 5.x does not need
• PQA Palm Query Application
• aka Web Clipping Application (WCA)
• Simplified HTML pages
• HTML 3.2
• Pre-processor to convert to PQA file
• Multiple pages with internal and external links
• Graphic files embedded
• Downloaded and installed on device
• Suitable for query/search apps e.g. United.com

22
Palm Clipping Model
Proxy servers provideinterface between Web
Clipping Appsand the Internet
23
Proxy Servers

• Convert HTML to CML
• Compressed format
• Strip out unsupported content. E.g.
• Nested tables
• Java applet code
• Cascading Style Sheets
• Convert images
• Based on color depth supported by device

24
Web Clipping .PQA File
Home Page
Detail Page
Internet
Detail Page
Launcher List View Icon
Images
Launcher Icon View Icon
Detail Page link within a page
Images referenced by external web pages using
"local" links
25
.PQA File

• Top level (home) page
• Self contained
• Links within pages
• Links to detail pages
• Links to external pages/scripts
• Embedded graphics
• JPEG or GIF
• Icons for Application Launcher
• List view 15 x 9 pixels
• Icon view 32 x 22 pixels
• JPEG, GIF or BMP

• Compressed by Web Clipping
• Sent to Palm.Net proxy servers (via Mobitex,
  CDPD, GPRS, etc.)
• Translated to HTTP packet
• Sent to referenced Internet address
• Received response is compressed and sent back
• Web Clipping viewer displays the page

26
Creating Palm Clipping Apps

• Author content in HTML
• Text editor or non-WYSIWYG editor
• WYSIWYG editor code must be manually cleaned up
• Create graphics
• Compile with Web Clipping Application Builder
• Test with the emulator
• Install on Wireless-enabled Palm OS device
• Copy to Palm directory on PC
• Hotsync

27
WCAB

• Open Index (top-level) file
• Recurses linked files
• Finds errors
• Bad links
• Missing file names
• Build PQA
• Specify large and small icons
• Auto-install for Palm user

28
Emulator

• Install and load
• Mouse becomes stylus
• Grafitti, hot spots, etc.
• Create a new session
• Specify ROM File
• Links to a device and skin
• See README.TXT for notes on installing skins
• Right click for menu
• Exit
• Options
• Install Application/Database
• Settings / Properties
• Internet Connection (redirect to TCP/IP)

29
HTML Guidelines

• Max page size 63k
• Practical size for whole app is 15k
• Max app size is limited by device memory
• Compiler compresses by 5-60
• Keep variable strings short, 2-3 chars
• Content area 153 x 144 pixels
• Approx. 11 lines visible
• Scrolling
• Vertical only in versions pre 4.0
• Horizontal in version 4.0 but not recommended

30
Supported Not Supported

• Simple tables
• Gray-scale shades
• Some font markup
• Lists ltulgt ltolgt ltdlgt
• Images
• Horizontal rules lthrgt
• Line breaks ltbrgt
• Paragraph breaks ltpgt

• Nested tables
• Named typefaces
• Style sheets
• Image maps
• Frames
• Scripts
• Applets
• Cookies

31
Basic Elements

• Not required, but encouraged
• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• Used in nav bar and history list if META not
  specified
• Keep it short!
• ltBODYgt

32
Palm-specific META tags

• PalmComputingPlatform
• ltmeta namepalmcomputingplatform
  contenttruegt
• Required if you include images in the PQA
• HistoryListText
• ltmeta namehistorylisttext contentYourStringgt
  
• Optional date time variables
• PalmLauncherName
• ltmeta namepalmlaunchername contentXgt
• X name displayed for your app in the
  Application Launcher
• PalmLauncherRevision
• ltmeta namepalmlauncherrevision contentXgt
• X your revision number (displayed in the Info
  window)
• LocalIcon
• ltmeta namelocalicon contentfile.extgt
• Used to store files in a PQA for referencing by
  an app.

33
Fonts

• Palm TD is the only supported typeface
• TD 9 is normal (equivalent to ltfont size3gt )
• Allows for 11 lines of text
• Range is TD 7 through TD 12
• Modifiers
• ltsmallgt ltbiggt ltfont sizexgt
• lth1gt through lth6gt
• ltbgt ltigt ltemgt ltstronggt
• ltkbdgt ltlistinggt ltttgt ltblockquotegt ltplaintextgt
  ltpregt
• ltolgt ltulgt

34
Color

• 2 bit grayscale on all pre v.4 devices
• Black (000000) Gray (808080)
• Silver (C0C0C0) White (FFFFFF)
• 4 bit grayscale
• 000000, 101010 ? F0F0F0
• 8 and 16 bit color
• Netscape web-safe color palette
• ltbody BGColor textgt
• ltfont colorgt
• ltbasefont colorgt

35
Tables

• Simple tables
• No nested tables
• No wrapping
• Wider than 153 pixels is truncated in pre 4.0
  versions
• Table Width
• Pixels only, not percentages
• Best to let viewer handle
• Cell Width
• Pixels or Percentages
• Alignment

36
Hyperlinks

• Name a Bookmark
• lta nametargetgtStringlt/agt
• Reference a Bookmark
• lta nametargetgtStringlt/agt
• Link to a Local Page in the same PQA
• lta hrefPage.htmlgtStringlt/agt
• Link to another Web Clipping Application
• lta hreffileAppName.pqagtStringlt/agt
• Link to a remote Page
• lta hrefhttp//URLgtStringlt/agt

37
Special Links

• Special button tag to create a linking button
• lta hrefpage.html buttongtStringlt/agt
• Palm OS application
• lta hrefpalmcallPCID.applgtStringlt/agt sublaunch
• lta hrefpalmPCID.applgtStringlt/agt launch
• PCID Palm Creator ID 4 chars.
• Use UPPERCASE letters for the PCID

38
Query Form Elements - 1

• Text Field
• ltINPUT TYPETEXT SIZExgt
• ltINPUT TYPEPASSWORDgt
• Unassigned and Assigned
• Text Area
• ltINPUT TYPETEXTAREAgt
• Pop-up Menus
• ltSELECTgt
• Keep length of list in mind
• Allow Value to default to displayed string
• Sort choices to allow Graffiti for selecting

39
Query Form Elements 2

• Radio Buttons
• ltINPUT TYPERADIOgt
• Check Boxes
• ltINPUT TYPECHECKBOXgt
• Submit Button
• ltINPUT TYPESUBMITgt
• Web Clipping unique variables
• DATEPICKER
• TIMEPICKER

40
Images

• Width
• Up to v.4 - 153 pixels
• v.4 and higher widerhorizontal scrolling
• Height
• 144 pixels vertical scrolling is allowed but
  strongly discouraged
• 63k
• Color Depth
• Version 4.0 up to 16 bits
• Earlier versions 2 bits only

• GIF and JPEG for images
• GIF, JPEG and BMP for launcher icons
• ltimggt attributes
• Alt
• Border
• HSpace VSpace
• Height Width
• Images can be stored locally and referenced
• ltmeta LocalIcongt

41
Palm OS 5.x Web Browser

• No longer requires a Palm.net proxy server
• Fully supports HTTP/HTTPS
• Does not support Web Clipping Applications
• Custom user-agent section in Request header
• Fully functional
• HTML 4.01 with extensions
• ECMAScript (262) JavaScript 1.3 or JScript 5.0
• Most aspects of the DOM
• CSS1 and CSS2 style sheets
• Does not support Java, XML, VBScript

42
Palm OS 5.x

• Supports bigger/better screens
• 320 x 320 pixels
• 4, 8 or 16 bit color depth
• Framesets tables
• Horizontal scrolling supported but not encouraged
• Vertical scrolling has hardware assist

43
Reading for Week 2

• Deitel
• Chapter 10, section 10.6
• Chapter 11 Palm and Palm OS
• Chapter 21 Web Clipping
• Web Clipping Users Guide
• On CD

44
Assignments

• 1 Web Clipping Application
• Recreate the DePaul Trading application shown in
  class
• Check the web site for detailed instructions
• Due next week April 15
• 10 of final grade
• Submit to DLWeb
• Major class project
• Teams finalized
• Start working on business problem
• 1 page outline via email by Wed, April 14