1. An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011

2. 1.The Mobile Landscape 2.Framework Overview 3.Leveraging the Framework 4.Demo 5.Reflections on Mobile Web Apps 6.Roadmap for the MWF

4. Mobile is soon to overtake the desktop. Diverse landscape: – Devices – Operating systems – Browsers Rapidly changing technology.

5. Over 50% of students have a handheld device. 74% of students either have or intend to buy an Internet-enabled handheld device in the next year. Students are more likely to remember their cell phone than their wallet.

6. + Billions of app downloads + Rich and well-defined features and API - Device-specific development - Manual updates for end users - Diverse environments each requiring development

7. + Broad distribution to wide range of devices + Established paradigms + Scalable architecture + Low maintenance - Limited API and access to device-specific features - New and evolving specifications

9. Device agnostic Graceful degradation Unified mobile presence Technology & platform independent Scalable, distributed architecture Modern web standards

10. Least common denominator – XHTML MP 1.0: GIF, JPG, 256 colors, 120x120 px HTML entities are defined semantically Framework determines best presentation Progressive enhancement – Three tier classification scheme – Deeper device awareness

12. Works on any device with a web browser. Markup-driven with semantic entities. Progressive enhancement for a rich user experience on more capable devices.

13. Framework uses browser-side technologies. Compatible with any server-side languages, technologies and environments. Use your programming language of choice. Framework PHPRubyPython….NETJavaPerl

14. XHTML MP 1.0 and WCSS markup. Dynamic markup from newer standards: – HTML 4.01 & 5 – CSS 2.1 & 3 – ECMA-262-3 Availability of new HTML 5 technology features for deep device functionality.

16. Markup is simple, semantic class definitions. Mobile look and feel is arrived at through dynamic CSS and JS handlers. Additional scripts for special functionality: – CSS & JS Minification – Image Compression and Conversion – Mobile Redirection

17. Include the core handlers in the Some other scripts are included in. Others are included inline such as in.

18. Page elements – Header – Footer Content elements – Content Areas – Menus – Buttons

19. Transitions and Touch Transitions – Markup-driven. – Underlying implementation is CSS 3 and JS. – Degrades gracefully. Geolocation – Common interface for HTML 5 and Google Gears. – Simple detection of device support.

20. CSS and JS Minifiers – Reduce payload size. – Consolidate CSS and JS into one file each. – Deliver assets to single classification levels. – Can minify through standalone script or directly through the CSS and JS handlers.

21. Image Compression and Conversion – Optimize images based on device size. – Convert to a device-supported format. Mobile Redirection – Continuity with device parsing. – Remember redirection preference. – [MWF1.1] Modal prompt for redirection.

24. Desktop browsing is characterized by – page hops – searches – large blocks The mobile experience is characterized as – an integrated experience – short and directed content – rich interaction and movement

25. Don’t create a mini version of a desktop site. Reconsider movement around the site. Keep focus on the current task. Consider the context: – Small screen – Touch interface – Mobility

26. Design markup with compatibility in mind. – XHTML MP 1.0 – WCSS Keep the user focused Keep the experience directed. Do not clutter the screen.

28. Classification and capability management. Base set of CSS entities and JS functionality. Several CSS 3 / JS interactivity libraries. Compression, conversion and minification. Device telemetry available in CSS and JS.

29. Availability of new APIs and functionality. – Page performance – Improved user interfaces – Richer interaction No backwards compatibility issues. – All existing interfaces are maintained. – Semantics remain constant. – Early access to HTML 5 technologies.

30. MWF 1.2 – 2012 Q1 – Forms API – Messages API – Native Container – JS Interactivity Libraries – User-customizable Front Splash Page MWF 1.3 – 2012 Q3

31. Fast-growing collaborative initiative Framework collaboration site: – http://mwf.ucla.edu http://mwf.ucla.edu Source available on Github: – http://github.com/ucla/mwf http://github.com/ucla/mwf MWF Conference August 22 & 23 – http://mwf.ucla.edu/conference http://mwf.ucla.edu/conference