An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office...
-
date post
21-Dec-2015 -
Category
Documents
-
view
214 -
download
0
Transcript of An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office...
![Page 1: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/1.jpg)
The Mobile Web Framework
An Introduction to
Eric Bollensebollens AT oit.ucla.edu
Mobile Web Framework ArchitectUCLA Office of Information Technology
August 4, 2011
![Page 2: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/2.jpg)
Overview
1. The Mobile Landscape
2. Framework Overview
3. Leveraging the Framework
4. Demo
5. Reflections on Mobile Web Apps
6. Roadmap for the MWF
![Page 3: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/3.jpg)
A mobile presenceis not just a desire, but an expectation.
![Page 4: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/4.jpg)
The Mobile Trend
• Mobile is soon to overtake the desktop.
• Diverse landscape:
– Devices
– Operating systems
– Browsers
• Rapidly changing technology.
![Page 5: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/5.jpg)
The Mobile Trend
• 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.
![Page 6: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/6.jpg)
Native Applications
+ Billions of app downloads
+ Rich and well-defined features and API
- Device-specific development
- Manual updates for end users
- Diverse environments each requiring development
![Page 7: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/7.jpg)
Web Applications
+ 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
![Page 8: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/8.jpg)
The Mobile Web Framework
is federated, platform-independent and device-agnostic.
![Page 9: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/9.jpg)
Principles
• Device agnostic
• Graceful degradation
• Unified mobile presence
• Technology & platform independent
• Scalable, distributed architecture
• Modern web standards
![Page 10: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/10.jpg)
Device Agnostic
• 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
![Page 11: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/11.jpg)
Graceful Degradation
![Page 12: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/12.jpg)
One Code, Many Devices
• Works on any device with a web browser.
• Markup-driven withsemantic entities.
• Progressive enhancement for a rich user experience on more capable devices.
![Page 13: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/13.jpg)
One Framework, Many Environments
• Framework uses browser-side technologies.
• Compatible with any server-side languages, technologies and environments.
• Use your programming language of choice.
Framework
PHP
Ruby
Python
….NET
Java
Perl
![Page 14: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/14.jpg)
Modern Web Standards
• 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.
![Page 15: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/15.jpg)
Leveraging the framework
in mobile web applications.
![Page 16: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/16.jpg)
Getting Started
• 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
![Page 17: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/17.jpg)
Getting Started
• Include the core handlers in the <head>
<link rel=“stylesheet” href=“http://m.ucla.edu/assets/css.php”>
<script type=“text/javascript”src=“http://m.ucla.edu/assets/js.php”></script>
• Some other scripts are included in <head>.
• Others are included inline such as in <img>.
![Page 18: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/18.jpg)
Style Entities
• Page elements
– Header
– Footer
• Content elements
– Content Areas
– Menus
– Buttons
![Page 19: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/19.jpg)
Interactivity Libraries
• 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.
![Page 20: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/20.jpg)
Standalone Scripts
• 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.
![Page 21: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/21.jpg)
Standalone Scripts
• 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.
![Page 22: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/22.jpg)
Demo
![Page 23: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/23.jpg)
Suggestionsfor the mobile web.
![Page 24: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/24.jpg)
Understand your Audience
• 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
![Page 25: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/25.jpg)
A New Approach to Content
• 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
![Page 26: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/26.jpg)
Keep It Simple
• Design markup with compatibility in mind.
– XHTML MP 1.0
– WCSS
• Keep the user focused
• Keep the experience directed.
• Do not clutter the screen.
![Page 27: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/27.jpg)
Moving forwardinto a richer mobile experience.
![Page 28: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/28.jpg)
The Current Version of MWF
• 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.
![Page 29: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/29.jpg)
The Roadmap for MWF
• 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.
![Page 30: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/30.jpg)
The Roadmap for MWF
• MWF 1.2 – 2012 Q1
– Forms API
– Messages API
– Native Container
– JS Interactivity Libraries
– User-customizable Front Splash Page
• MWF 1.3 – 2012 Q3
![Page 31: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/31.jpg)
Collaboration
• Fast-growing collaborative initiative
• Framework collaboration site:
– http://mwf.ucla.edu
• Source available on Github:
– http://github.com/ucla/mwf
• MWF Conference August 22 & 23
– http://mwf.ucla.edu/conference
![Page 32: An Introduction to Eric Bollens ebollens AT oit.ucla.edu Mobile Web Framework Architect UCLA Office of Information Technology August 4, 2011.](https://reader035.fdocuments.us/reader035/viewer/2022062714/56649d6b5503460f94a4a003/html5/thumbnails/32.jpg)
Thank youfor listening.