Mobile and the Web 2.0: From Standards to Technical Issues

Francisco de Freitas Mobile Systems Seminar – Fall ‘09 Agenda • What is Web 2.0? • Mobile 2.0 and Web 2.0 • Standards • Mobile Web Best Practices • WML and XHTML MP • Comparison Between Standards • Trends and the Future of Mobile Web 2.0 • Summary • Discussion Topics What is Web 2.0?

` buzzword – meaningless marketing word, a “piece of jargon”.

`(Tim Berners Lee)

` “The next generation of Web sites, applications and processes tied with the Internet.”

`(The general Media)

` “It's a story about community and collaboration on a scale never seen before.”

`(TIME Magazine)

` “It's the Intelligent Web! The more WE use it, the better it is.”

`(Tim O'Reilly)

Principles of Web 2.0

` The Web as Platform ` Medium to share and distribute information

` Harnessing Collective Intelligence ` The read/write Web

` Data is the Next Intel Inside ` Mashups

` End of the Software Release Cycle ` Perpetual Beta / SaaS

` Lightweight Programming Models ` Re-usability - “Some rights reserved”

` Software Above the Level of a Single ` Web is not only on PCs Device

` Rich User Experiences ` GUI-Style user experiences, multimedia

Web 2.0 is not AJAX or vice versa But it gives superior user experience and Web 2.0 is not a design aesthetic either! nice forms of data retrieval/creation The Machine is Us/using us

` Play video.

Mobile Web Approach(es) and Web 2.0

` The Mobile World is new:

` Mobile Web X Desktop

` Can it provide the same Web 2.0 experience?

` Limitations of the Mobile Device/Mobile World

` Device Processing Power, Maturity of Standards, Browser Compatibility, Battery capacity, Screen Size, Network Bandwidth, Network Operator Barriers

` The Mobile Web is still stagnated in the 2G era of Mobile Telecom

` “Device heterogeneity”

` The Mobile user is different (according to Google)

` “Repetitive now” (stocks, weather, news, etc)

` “Bored now” (people with time in airports, train stations, cafes, etc)

` “Urgent now” (directions to the airport, buying tickets, urgent email, etc) Challenges of Web 2.0 in Mobiles

Impacts Richer User Software above Read/Write Mobile Experience the level of a Web Environment Single Device Limited x x x Functionality Different Users x x Different Mobile x x Manufacturers Mobile 2.0 != Mobile Web 2.0

` Forget the Web! ` Mobile 2.0 is the evolution of applications that are available when you turn your phone/mobile device on ` Mobile Widgets ` Local Data Storage ` Reaction to Push Messages ` Location Awareness ` Devices are always changing… ` The form of the device is constantly changing and shifting ` More powerful and capable devices Mobile 2.0 != Mobile Web 2.0

` What is really Mobile Web 2.0 then? ` Leap of the Mobile platform forward to where the Internet is today: ` Mobile Blogging ` Mobile Social Networks ` Mobile RSS Readers ` Location-based Services ` Adaptive Web Sites and Mashups ` Connected applications (e.g. Photo Sharing) ` Services taking advantage of Web Semantics

Going towards to the Web 2.0 (the “perfect” integrated world) Mobile Web Standards

` Q: What to consider when designing Web Apps for Mobiles? ` A: Mobile Web Recommendations! ` Overall Behavior ` Device capabilities ` Navigation and Links ` Navigation Mechanisms ` Access Keys ` Refreshing, redirection, external resources Mobile Web Standards

` Page Layout and Content ` Content: scrolling, graphics, colors ` Page Size ` Page Definition ` Structural Elements ` Tables, Frames, Fonts ` Non-text Items, Image Size, Content Type ` User Input ` Forms, Labels ` Tab order Evolution of the WML and XHTML MP Web Standards

` Wireless ` Evolution from HDML ` XML 1.0 Strict Syntax

` XHTML Mobile Profile + WML2 ` XHTML Basic + iMode (Japan) + WML 1.x + some elements and attributes from the full version of XHTML ` XHTML MP is an XML document (WML)

` With the simplest (WAP) browser, you can: ` Check train timetables ` Check in for a flight ` Look up sports results ` Purchase tickets online ` Do your banking by mobile phone

` WAP Infrastructure: Content Server, Gateway, etc

` “New” Language: Learning effort

` Screen Resolution Size: ~128x160 and smaller (adMob statistics) [4]

` WML card/deck concept ` Not very used [2]

` Focus is on the efficiency in how tasks can be accomplished in Basic Phones ` Trade-off: More Links

` Most used standard: still a large percent of devices are only WML capable Wireless Markup Language (WML)

` Use of images ` Rely very heavily on text and basic HTML formatting (lightweight Kb page size).

` Navigation: ` WAP sites often have numeric shortcuts that trigger actions.

` Sharing Capabilities ` No file upload (browser dependent)

` Content delivery ` Constrained user interface capabilities

` No “Java scripting” ` WMLScript

` Summary for WML only devices: ` Lack of support for some multimedia types (e.g. video) ` Small screen size causes inadequate navigation ` (Possible) Solution: use applications to deliver the same experience (Google, Yahoo!) XHTML Mobile Profile

` With a XHTML browser, you can: ` everything a WAP browser can with a (somewhat) better user experience ` display media content (device dependent)

` XHTML Basic is a simplified version of XHTML devices with limited processing power and capabilities. ` No CSS, frames, and scripting

` XHTML MP supports a simplified version of CSS called WCSS / WAP CSS

` Screen Resolution Size: ~176x220 and larger (adMob statistics)

` Minimum Effort for learning the language

` Why XHTML MP? ` The WML didn't follow device evolution and so, XHTML MP was created to address some WML restrictions ` Provide new content and WML backward compatibility XHTML Mobile Profile

` Use of images ` XHTML MP sites use images much more extensively

` Navigation ` XHTML MP sites are able to have numeric shortcuts as well. (browser dependent) ` Menu features.

` Page Weight: kept low by validating the documents, creation of CSS. ` Keep link resources low (less markup)

` Sharing capabilities ` Allows file upload (it is a work around but it works)

` Content Delivery ` Richer user experiences: Font Styles, Colored Borders, Better Tables

` Support ` HTML / XHTML pages of your web site can be converted to XHTML MP documents with minor changes

` ECMAScripting MP Images and Heading in different browsers

Sony Ericson Sony Ericson Nokia Sony Ericson Nokia T610 T68i Mobile T610 4.0 Browser 4.0 Differences between WML and XHTML MP

WML XHTML MP

Screen Resolution Size 128x160 and smaller 176x220 and larger

Device browser type Micro browser (not full browser) Developing effort High Low

Scripting WMLScript ECMAScript MP

Content Displaying Content and Layout in the Content and Layout in same document (Basic) separate documents (CSS)

Multimedia Delivery No Yes (Limited)

Content Delivery Basic Richer user experience

Markup size Small documents Larger documents

Color Control Support Only Color Images Full Color Control for fonts, backgrounds, borders

Web 2.0 Support Hybrid Support Full Support or Hybrid Trends and the Future of Mobile 2.0 and Mobile Web 2.0 ` The future of Mobile 2.0 and Mobile Web 2.0 depends on ` Flat Rates ` Phone API's access ` Better user experience

` Mobile 2.0 approaches: ` Native applications (e.g. Games) ` Web applications (e.g. Browser, Squirrelfish) ` Hybrid applications (e.g. BONDI Specification, PhoneGap)

` Some technologies already available ` Opera Platform ` Mobile AJAX ` J2ME Trends and the Future of Mobile 2.0 and Mobile Web 2.0 ` How to leverage the device's resources ` Location aware approaches: RFID, GPS ` 2D Barcodes, Camera, Accelerometer ` Ubiquitous Web: Social Tagging, GeoFolksonomies, AwareFolksonomies

` Business View of Web 2.0 ` a “business efficiency enabler” ` consumer behavioural changes ` “word of mouth” marketing in a whole new level [3]

` Web Semantic ` Mobile device taking advantage of web semantics to organize information Summary and Conclusions

` Experiencing Web 2.0 in the Mobile World is still not 100%

` However, users can still “collectively harness intelligence” to the Web

` The majority of phones are still able to only deal with WML (constraint)

` Mobile content providing still needs to consider both markup languages: WML/ XHTML MP

` Although there is a lack of rich user interfaces, devices are becoming powerful

` Bandwidth constraint is no longer considered a wide problem, but users need flat rate data plans

` A lot of device capabilities are not yet fully explored (e.g. location awareness)

` With the advent of devices like the iPhone and Android, it seems that the Mobile 2.0 is moving towards a hybrid browsing/smart clients approach References

` [1] O’Reilly Radar; “Google Announces Support for Microformats and RDFa”. Available at: http://radar.oreilly.com/2009/05/google-announces- support-for-m.

` [2] Timmins et. all, “Characteristics of Mobile Web Content”. http://web.cs.wpi.edu/~cew/papers/hotweb06.pdf

` [3] Topic Overview: Web 2.0, Forrester Research, Inc - © 2007. Available at: http://www.forrester.com

` [4] AdMob Statistics – Mobile Metrics Report Sep ‘09 Discussion Topics

` Social Networks:

When users go to Facebook/Twitter/ Blogger/Flickr from their devices, are they only updating status or also retrieving information from their friends? Or, are they really uploading photos, videos, sharing comments, posting in blogs? What do you think it's missing for users to start doing that? Discussion Topics

` "The browser will fade into the background.“

One way that Web 2.0 companies can similarly adjust their services for mobile devices is by relying less on browser-based applications and more on small software clients that users can download onto their phones. What are the advantages/disadvantages? Discussion Topics

` How to reach a mobile audience?

2D Code, Bluetooth, Geotag and GPS, Location Based Services, MMS, Common Short Code, SMS, Top level domain (.mobi), Mobile URLs, Viral marketing, WURFL (device detection). Discussion Topics

` “Organize the information”

The amount of data produced by mobiles is obviously increasing in the recent years. Another key characteristic of Web 2.0 is the idea to make it widely available (Web Semantics). However, what have been seen is many standards and no adoption of them (e.g. RDF, OWL, RDFa in XHTML). Is the Internet tending to a chaos? Or Google will save us again (“Google announced support for Microformats and RDFa” [1])? But HOW?