Embedding JavaScript in a Markup Document
JavaScript scripting is supported in XHTML-MP 1.1 and 1.2 using the same markup syntax as XHTML. Mobile Web documents containing scripting must use a doctype for the appropriate XHTML-MP version to ensure that the markup is valid. Here are the doctypes used for XHTML-MP 1.1 and 1.2, respectively. lt DOCTYPE html PUBLIC - WAPFORUM DTD XHTML Mobile 1.1 EN lt DOCTYPE html PUBLIC - WAPFORUM DTD XHTML Mobile 1.2 EN Chapter 3 contains more detailed information about doctypes and XHTML-MP versions. In...
AJAX in Mobile Browsers
AJAX is commonly used to create dynamic web pages by updating just one portion of the web document, without a complete page reload. This is done by a background process that asynchronously obtains additional data from the web server. A JavaScriptintensive web page with AJAX functionality is commonly referred to as a Rich Internet Application RIA , where the term application indicates that the page's user interface and functionality are dynamic and driven using scripting logic rather than static...
Testing AJAX Support in Mobile Browsers
A device database can help you determine whether AJAX is supported by a mobile browser. Additionally, two public web sites provide Mobile Web tools that test whether a mobile browser supports AJAX. The Frost AJAX tests http pwmwa.com frost , http frostlib.org and the AJAX tests from MobileTech http ajax.mobiletech.mobi exercise mobile browsers and provide visual results of AJAX compatibility tests. The MobileTech test site saves mobile browser information and test results to include in...
Examples of Mobile JavaScript
The following two mobile JavaScript examples illustrate embedding client-side interactivity into a Mobile Web document in XHTML-MP. Listing 5-1 is a simple, annotated example of using EcmaScript MP in an XHTML-MP 1.1 Mobile Web document. The listing uses JavaScript to randomly assign a new background color to the lt div gt element with the ID of theBox when the document loads. The colors array is a list of six possible background images. The handleOnLoad event handler function is executed after...
JavaScript Fragmentation in Mobile Browsers
JavaScript implementations in mobile browsers suffer from three types of fragmentation proprietary API extensions, differences in DOM methods and properties, and varying sets of supported events. Proprietary APIs extend the JavaScript virtual machine with new functions and objects. In addition to complying with ECMAScript standards, many desktop and mobile browsers implement extra JavaScript functionality in the form of proprietary APIs. This practice is specifically allowed in the...
Updated and MobileSpecific Features in XHTMLMP
XHTML Mobile Profile simplifies some XHTML elements. However, it also introduces new syntax for mobile-specific language features. This section describes syntax differences between XHTML-MP and XHTML and new additions to the markup language targeting mobile browsers and mobile use cases. Mobile browsers that support XHTML-MP also allow mobile-specific URI schemes as link targets in the href attribute of the lt a gt tag. These schemes enable common mobile use cases in Mobile Web content. The tel...
Caching Directives in HTTP Response Headers
The HTTP 1.1 standard defines headers that specify whether you can cache certain Web documents and indicates when cached documents expire. To optimize the delivery of Mobile Web content, you can control the response headers sent from a Web server to a browser or proxy server client that specify whether and for how long a Web document should be cached by the browser. Caching headers by server and client properly reduces the number and size of expensive network round-trips required to display a...
O
lt object gt tag, 59 ol.menu a style, 128 onblur JavaScript event, 141 onchange JavaScript event, 142 onclick JavaScript event, 140 ondoubleclick JavaScript event, 140 lt onevent gt tag, WML, 74 onfocus JavaScript event, 141 onkeydown JavaScript event, 142 onkeypress JavaScript event, 141 onkeyup JavaScript event, 142 onload JavaScript event, 140 onmousedown JavaScript event, 141 onmousemove JavaScript event, 141 onmouseout JavaScript event, 141 onmouseover JavaScript event, 141 onmouseup...
Using HTTP Request Headers to Identify Mobile Devices
Device awareness identifies mobile devices and browsers by inspecting the metadata in the HTTP headers of a Web request. Three request headers are especially important in identifying a device The User-Agent header identifies the mobile browser and almost always also identifies the mobile device manufacturer and model. The X-Wap-Profile header provides a URL to a User Agent Profile in Resource Description Framework RDF file format an XML dialect used for W3C specifications . The User Agent...
Minimize External Resources
The first and most basic optimization for Mobile Web markup documents is to reduce the number of linked external resources. A linked external resource is a style sheet, JavaScript library, image, or any other type of file that is embedded into the markup document by linking to the remote file. Each external resource requires an expensive and frequently slow mobile network connection to retrieve the content. Once retrieved, each resource requires browser memory to render and in some cases, file...
Info Eud
Figure 2-11. Live HTTP Headers adding Headers to Firefox s Page Info dialog box The Small Screen Renderer add-on creates a view in Firefox that displays web pages on a very small screen, similar to that of a mobile device. This add-on is designed to provide an approximation of how a web page might be displayed on the small screen of a mobile device. Mobile Web developers use the add-on as a sanity check, so they can have a reasonable degree of confidence that their page layouts are adequate for...
Tips for Developing Mobile Web Pages
Start with a basic version for older mobile phone browsers and then add extra features for the smartphone version. This helps you identify the core features of the desktop web site that need to be ported to the mobile version. Use the 80 20 rule 80 percent of the results comes from 20 percent of the features to identify the top 20 percent of features. Create only two mobile versions, one for the basic phone and one for smartphones, and then optimize the richer version according to your...