Customizing for mobile devices (lập TRÌNH WEB SLIDE)

Server-side Web Programming Lecture 16: Customizing for Mobile Devices Mobile Devices • Web access increasingly performed on mobile devices • Characteristics: – Small screens – Limited power – Different markup languages • XHTML MP (current standard) • CHTML (compact HTML) • WML (wireless markup language) • Problem: These characteristics are very different for different devices Need for Customization • Screen sizes – Width may vary between 100 and 200 pixels – No horizontal scroll bar • Content outside of range may not be visible! – Could just restrict all pages to no more than 100 pixels in width • Would waste the little screen area available! – Must customize to device screen width • Example: column table on wide screen column table on small screen Need for Customization • Image types – Not all image types supported by all devices • Unlike screen browsers which all support jpg, gif – Only common format: wbmp (wireless bitmap) • Binary black/white • Very low resolution – Unacceptable for color devices with more powerful screens Need for Customization • Markup language – All screen-based browsers understand HTML – Most are tolerant of minor syntax errors – Not true for mobile devices! • Wireless markup language types: – XHTML MP • “Mobile Profile” HTML • Current standard for new devices • Not present on most older devices – Unlike normal computer, no way to load a new browser! – CHTML (Compact HTML) • Simplified HTML developed in Japan Need for Customization • Wireless markup language types: – WML (Wireless Markup Language) – Very different syntax from HTML Need for Customization • • Not possible to create single page understood by all devices! Simple example: break tag – XHTML MP: – CHTML: • XHTML browsers don’t render • CHTML browsers don’t render – No way to a simple break tag understood by all devices! • Not a problem for screen based browsers – All work in HTML – All are tolerant of syntax variations • Both and understood Server-side Customization • Customization can only be done at server side – No client-side scripting on mobile devices! “I am a Motorola E398” Server • Detects device properties •Screen size •Markup language •Etc Response page with appropriate markup for this device • Generates appropriate response page for device Server-side Customization • Goal: Write JSP code that renders markup based on specific properties • Example: Generating either or based on what type of markup language the device supports Server-side Customization • Problem: Only device type ID sent over with request – SEC-SGHV200 – BlackBerry/2 – Nokia6590 • No information about capabilities of device • Would need a giant table of device capabilities to look this up in for thousands of devices! Device Markup Screen Width SEC-SGHV200 WML 128 BlackBerry/2 WML 160 Nokia6590 XHTML MP 162 WALL Form Tags Note that forms rendered differently on different devices WALL-Specific Tags • Designed specifically for mobile devices – No analogous tag in HTML • Example: Menu tag – Usually list of URLs between and tags Special CSS for menus WALL-Specific Tags • Tomcat translates into a simple HTML table – CSS used to set line colors WALL-Specific Tags Note that use of different colors on different lines very important for readability on small devices Phone Emulators Testing mobile web sites: • Emulators – Programs that simulate operation of browser or phone type – Often available from company • Openwave browser http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/ • Motorola devices https://developer.motorola.com/docstools/motodevstudio/ • Nokia devices http://www.forum.nokia.com/main/resources/tools_and_sdks/ • Actual phones – Most reliable way for final testing Openwave Browser Emulator Displays appearance of page on this device Can direct to specific web page to test Working controls for phone (to test scrolling, autonumbering, etc.) Openwave Browser Emulator • Usually display html received by device • Important since this is not the same as the WALL tags on the server! JSP and WURFL • What if WALL tags not powerful enough – Example: Need to base number of columns in table on screen width – Need to get screen width and use in conditional statement • Can directly access device capabilities from WURFL file – Use in JSP code Get user-agent ID from request object Translate to WURFL device ID using UA manager Use CapabilityMatrix object to get specific capabilites for that device Must import net.sourceforge.wurfl.wurflapi.* libraries Full API at http://wurfl.sourceforge.net/java/api2docs/index.html JSP and WURFL • Example: Displaying brand name JSP and WURFL • Import WURFL classes: • Get the user-agent from the header of the request: • Create a UAManager and a CapabilityMatrix as objects – UAManager translates user-agents into WURFL device IDs – CapabilityMatrix = table of device capabilities usable by JSP JSP and WURFL • Get Device ID from user-agent: • Get the desired capability from the CapabilityMatrix: – Need device ID, capability name • Use the information in the JSP WURFL Capabilities • Complete list at http://wurfl.sourceforge.net/help_doc.php Cool Menu Example • WALL supports “cool menu” tag – Table of icons for links • Syntax: image/text for link image/text for link … Cool Menu Example • Goal: Have number of columns depend on screen width – Width < 110 pixels  column – Width >= 110 and < 160  columns – Width >= 160  columns • Will need to extract resolution_width property for device Cool Menu Example Extract the resolution_width property Use it to set a gridsize variable Insert that gridsize value into the tag .. .Mobile Devices • Web access increasingly performed on mobile devices • Characteristics: – Small screens – Limited power – Different... Unacceptable for color devices with more powerful screens Need for Customization • Markup language – All screen-based browsers understand HTML – Most are tolerant of minor syntax errors – Not true for mobile. .. errors – Not true for mobile devices! • Wireless markup language types: – XHTML MP • ? ?Mobile Profile” HTML • Current standard for new devices • Not present on most older devices – Unlike normal computer,