Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Brief on Device Awareness and Content Adaptation

128 views

Published on

Brief on Mobile device awareness and content adaptation

Published in: Education
  • Be the first to comment

  • Be the first to like this

Brief on Device Awareness and Content Adaptation

  1. 1. Mobile Website Development Brief on Device Awareness & Content Adaptation Facilitated by: Michael Wakahe Tawi Commercial Services Ltd July 2011
  2. 2. Table of Contents  XHTML MP  CSS  JSP Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  3. 3. XHTML MP Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  4. 4. WURFL  XHTML MP = XHTML Mobile Profile  XHTML uses the tag set of HTML and enforces the rigorous syntax requirements of XML  XHTML-MP is currently considered the de facto standard language for Mobile Web development Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  5. 5. XHTML MP  XHTML 1.0 Reference (not XHTML MP 1.0): http://www.w3.org/TR/2000/REC-xhtml1-20000126/ • XHTML MP 1.0 Document Type Definition (DTD): http://www.wapforum.org/DTD/xhtml-mobile10.dtd Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  6. 6. XHTML MP <?xml version="1.0" encoding="UTF-8"?> <!-- XML Declaration, above. XHTML-MP is XML.--> <!-- DOCTYPE declaring that this document is XHTML-MP. --> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <!-- The rest of this document looks a lot like desktop HTML. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Externally Linked Stylesheet--> <!-- <link rel="stylesheet" href=“css/style1.css" type="text/css" /> --> <title>Annotated XHTML Example</title> </head> <body> <div class="hdr">Annotated XHTML Example</div> </body> </html> Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  7. 7. XHTML MP XHTML Element Reason for Exclusion frame, frameset, iframe, noframes Frames have significant browser memory requirements, including new DOM instances. Frames are not usable on small screens. applet Java applets are not supported in mobile browsers or natively on mobile devices. Java SE is not supported on mobile devices. area, map Image maps are not supported nor easy to use on mobile devices. basefont Specify default font styles using CSS. XHTML Elements Unsupported in XHTML-MP Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  8. 8. XHTML MP XHTML Element Reason for Exclusion bdo Bidirectional text is not supported. button Use <input type="submit"> for push buttons. center Use CSS to align page elements. col, colgroup Only basic tables are supported. See the next section for details. del, ins, s, strike Use CSS to style text to appear as deleted from, inserted into, or struck from the document. dir, menu Use CSS to style text to appear as directory or menu lists. font Use CSS to specify font styles. legend Basic forms are supported. Legends are not supported in fieldsets. noscript, script Supported only in XHTML-MP 1.1 and later. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  9. 9. XHTML MP XHTML Element Reason for Exclusion sub, sup Mobile devices provide limited fonts. Subscripts and superscripts are supported. tbody, tfoot, thead Basic tables are supported. Grouping table header, body and footer elements is not supported. tt Use CSS to style text to appear as teletype text. u Underlining is a universal indicator of link labels. Underlined text that is not a link is not usable on small screens and strongly discouraged. However, if underlining is absolutely required, it may be accomplished using the text-decoration: underline; CSS directive. xmp Use CSS or the pre element to style text to appear preformatted. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  10. 10. XHTML MP  The tel: URI schemes allow mobile users to click a link to initiate a phone call.  Format of a tel: URI is tel:<phone number>  Example: Call <a href="tel:+254-722–321- 1212">+254-722–321-1212</a> for Information Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  11. 11. XHTML MP  The wtai: scheme is used to initiate phone calls and add contact phone numbers to the mobile device’s address book  Uses a different URI format for each task Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  12. 12. XHTML MP  Format for initiating a phone call from the mobile device: wtai://wp/mc;<phone number>  To add a contact into the mobile address book: wtai://wp/ap;<phone number>;<name> Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  13. 13. XHTML MP  Examples: Call <a href="wtai://wp/mc;+254728321987">+254-728– 321-1987</a> for Information <a ref="wtai://wp/ap;+254728321987;Information">Add to Address Book</a> Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  14. 14. XHTML MP  XHTML-MP 1.1 adds support for the <script> and <noscript> tags  The markup snippet below imports an external JavaScript file into an XHTML-MP document: <script type="text/javascript" src="js/library.js" /> Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  15. 15. XHTML MP  An example of a JavaScript function declared inline in a XHTML-MP 1.1 document: <script type="text/javascript"> function handleOnClick() { // Get the new image URL var newSrc = "img/michael_icon.png"; // Update the image URL document.getElementById("theImg").src = newSrc; } </script> Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  16. 16. XHTML MP  Below, an XHTML-MP image tag associates the inline JavaScript function above with its onclick event: <img id="theImg" src="/logo.png"width="140" height="50" alt="Logo“ onclick=“handleOnClick();"/>  The MIME type text/javascript must be used to identify JavaScript and ECMAScript MP in XHTML-MP 1.1 markup documents.  XHTML-MP 1.2 is a new standard, adopted in March 2008 Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  17. 17. XHTML MP  Other topics in XHTML MP (see examples): Forms, Tables, Links and Access Keys  Many examples at the following link: http://www.developershome.com/wap/xhtmlmp Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  18. 18. CSS Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  19. 19. Wireless CSS /* This is a Wireless CSS file. */ h1 { color: blue } p { font-style: italic } Sample Wireless CSS Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  20. 20. Wireless CSS  CSS = Cascading Style Sheets  Used to define presentation including layouts, colours & fonts  Can use either Wireless CSS or CSS Mobile Profile Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  21. 21. Wireless CSS  Both mobile CSS subsets support core CSS syntax and properties including selectors, inheritance, the box model, shorthand properties, generic font families, and absolute and relative font sizes.  Both mobile dialects comply with existing CSS syntax standards and can be validated with a CSS validator. Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  22. 22. Wireless CSS  A CSS statement is consisted of a selector, a property, and a property value: selector {property: property_value}  Example: p {text-align: right}  Multiple properties are separated with a semicolon: selector {property1: property_value1; property2: property_value2; ... propertyN: property_valueN} Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  23. 23. Wireless CSS  Example of multiple properties: p {text-align: right; color: blue} Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  24. 24. Wireless CSS  CSS Mobile Profile 1.0 Specification: http://www.w3.org/TR/2002/CR-css-mobile-20020725  CSS 2 Specification: http://www.w3.org/TR/2008/REC-CSS2-20080411/ Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  25. 25. JSP and Servlets Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  26. 26. XHTML MP  You can also introduce JSP and servlet technology to XHTML MP similar to the way we did it in WML.  Remember to save files as .jsp as well as to specify the MIME type: application/vnd.wap.xhtml+xml  Sample in next slide Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  27. 27. XHTML MP <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <% response.setContentType("application/vnd.wap.xhtml+xml;charset=UTF-8"); %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- <link rel="stylesheet" href="css/style1.css" type="text/css" /> --> <title>Annotated XHTML Example</title> </head> <body> <p>An XHTML JSP Example</p> <% out.println("<p>My name is Michael</p>"); %> </body> </html> Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
  28. 28. The End Michael Wakahe E-mail: michael@tawi.mobi Phone: +254 (0) 20 239 3052 Website: www.tawi.mobi Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.

×