A Mobile Web Framework for the UC System
•Download as PPTX, PDF•
0 likes•405 views
Describes UC San Diego's decision making process to use the Mobile Web framework. Outlines how all University of California schools are also leveraging the framework and contributing to it's development.
Recommended
Recommended
More Related Content
Viewers also liked
Similar to A Mobile Web Framework for the UC System
Similar to A Mobile Web Framework for the UC System (20)
More from Brett Pollak
Recently uploaded
Recently uploaded (20)
A Mobile Web Framework for the UC System
- 1. Mobile Computing A mobile web framework for the University of California System
- 2. 13 years in the Web field 3.5 years working in higher ed. Brett Pollak 2 years experience in mobile @campusweboffice
- 4. Audience participation bit.ly/rm6Vsi
- 5. Where is the web today? bit.ly/rm6Vsi
- 6. Where is the web tomorrow? bit.ly/rm6Vsi
- 7. Where is the web in 6 months? bit.ly/rm6Vsi
- 8. Mobile devices outnumber the US population
- 9. Mobile data traffic rose 111% from this year to last
- 10. Smartphones Today… 33% of the U.S. Population use Smartphones By October, 2012… Asymco, July 2011 Over 50% of the U.S. population will use Smartphones
- 11. 14% of prospective students accessed admissions sites from their mobile device
- 12. 65% of 18-29 year olds have accessed the mobile internet
- 13. The next generation is growing up with it
- 15. How do we do keep up?
- 16. The Higher Ed landscape
- 17. Parents Faculty Students Staff Visitors Alumni
- 18. Students with the latest gadgets
- 19. Staff and faculty with older devices
- 20. Where is our iPhone app?
- 21. Decentralized IT groups that own the data
- 23. Background: UCSD’s iPhone App • June ‘09 UCSD first public university to provide iPhone app • Provided web services and data feeds to TerriblyClever. • Blackberry and generic mobile site launched soon thereafter • In early 2010, TerriblyClever was bought out by Blackboard
- 24. Our investigation begins in the spring of 2010… The mobile web was our target solution Most higher ed packages like MIT and Kurogu needed to be hosted centrally Front end frameworks like Sencha were very JS heavy and were more than what we were looking for. JQuery mobile looked promising but was in alpha UCLA MWF was in the works and provided a light footprint
- 25. UCSD’s Framework Selection 1 Involved Campus IT Groups • Libraries Student Affairs
- 26. UCSD’s Framework Selection 2 Defined Selection Criteria • • Sustainable over 1-2 years • Technology agnostic • Open source or industry standards • Support various mobile devices • Little training for development • Easy to replace in the future
- 27. UCSD’s Framework Selection • 3 Reviewed Mobile Frameworks
- 28. UCSD’s Framework Selection 4 Evaluation criteria & Recommendation • ease of use and learning curve • framework features, • documentation, • cross-platform support, • maturity, • extensibility, and • potential integration with our campus CMS.
- 29. What’s our strategy?
- 30. The UC Mobile Strategy Device Agnostic Technology Agnostic PHP Apps .NET Apps Java Apps MWF (CSS, HTML5, JS) Epic Ruby Apps Apps Python Apps
- 31. MWF Principles Device Agnostic Works on any web-capable device. Federated Architecture Hosted centrally, but used in a distributed manner. Unified UI Presence One outwards presence even in a distributed environment. Language & Environment Independent Compatible with any development language Modern Web Standards Complies with modern web standards.
- 32. What’s the secret sauce? It aint that much… 1. Device detection 2. Dynamic JavaScript & CSS 3. Image compressor
- 33. How UCSD Developers use it Create a mobile view of their app and call these assets… <head> <link href="//m.ucsd.edu/assets/css.php" media="all" rel="stylesheet"type="text/css" /> <script type="text/javascript" src="//m.ucsd.edu/assets/js.php"></script> </head>
- 34. How UCSD Developers use it
- 37. But where is our iPhone app?
- 41. Powered by the UC Mobile Web Framework
- 42. Can I use it? Sure you can!
- 43. Now let’s look at some statistics...
- 44. The UCSD Mobile home page gets about 4,000 pageviews per day. That’s ~17% of the what the campus home page gets It’s been increasing at a rate of ~2% per month so far this year.
- 45. Windows, 2% Blackberry, 1% iPad, 6% iPod Touch, 9% iPhone, 47% Android, 31% Device Breakdown
- 46. Videos, 1% Podcasts, 8% Shuttles, 0% Directory, 5% My Dining, 8% TritonLink, 34% Maps, 15% Welcome Week, 10% Courses, 14% Bookstore, 1% Tours, 4% Top applications: 1 month
- 48. What about our websites? Does it work for that too?
- 51. One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. - W3C Mobile Best Practice Recommendation
- 52. One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. - W3C Web Best Practice Recommendation
- 53. One semantic markup for all devices
- 56. One Web Axiom: Content provider does nothing
- 58. 1. Start with full feature version of content
- 59. 2. Write CSS and JS so less- capable browsers can display core content
- 61. Full Desktop Site + CSS & JS = Responsive Site
- 69. Thank you & Enjoy the video m.ucsd.edu
Editor's Notes
- Mobile devices sure have come a long way haven’t they?
- Really excited to represent the West Coast out here in Austin. From a show of hands can I see who is from the West Coast?The evolution of mobile has transformed us, how we interact with one another, and how we interact with our surroundings.Mobile devices have and will continue to become woven into the fabric of our lives.I feel the mobile revolution has re-energized me and my staff in terms of what do and how we do it.In a way, it almost feels like the beginning of the internet all over again.
- All of us in California are feeling the crunchOur budgets are being cut. We are laying off staff.We know we need to come together and partner more to leverage resources.
- Ok, quick poll. Pull out those smartphones and give this a quick scan. If you don’t know what this is, I believe there is a session going on right now discussing these. But please don’t leave, I promise to make this worth your while.You can also go to the URL below and take the poll.This app was built by UCLA using the mobile web framework that I’ll be talking about shortly. It’s very much a pilot so please forgive any shortcomings.The app is designed to potentially replace the clickers you see in a lot courses these days. Since most every student has a smartphone, we think it makes sense to ditch the clicker hardware and just use this.The URL is on a few of the next slides if you didn’t get it yet.
- Where is the web today? That’s the question we are asking ourselves and each other.Because before you know it…
- This is where the web will be. It’s already happening. And before we know it, the web will look like this.
- Ok, maybe it’s not quite there but it will be soon. Mobility has played a huge part in the web’s transformation.
- What we do know is the number of mobile devices now outnumber the US population. That’s over 307 million devices. Many people now own multiple devices. Maybe one for business, a different device for personal use. Maybe a tablet just for kicks.
- This has vastly increased the amount of data traffic wireless providers have seen.Mobile data traffic — such as surfing the Internet via smart phones — rose significantly to 341 billion megabytes — compared with 161 million a year ago, an 111 percent increase.
- Smartphones have been the biggest driver of that increase.Today, 33% of the US population uses smartphones. In just one year, that number will jump to 50%. Years ago, when smartphones were introduced to the market, they were promoted as devices to help the busy, on-the-go, business professional. It was a tool primarily made available to access one’s email, calendar and contacts when away from the desk or travelling. Today, that is far from the case – they are integrated into the daily lives of all types of consumers this is changing our behavior.
- So how about the demographic we support?14% of prospective students accessed a college website from their mobile device.What kind of experience are these folks getting? How many of us have optimized our admissions site for mobile devices?
- Currently 65% of 18-29 year olds have accessed the mobile internet. By 2013 that will be 90%. This demographic is embracing the mobile revolution like no otherStudents want and expect information real time and in the palm of their hand.
- Next generation are growing up with these devices
- I’d like to show you a short video.It illustrates how kids as young as 1 or 2 years old are interacting with our mobile devices and their expectations of how things operate are forever effected.
- So how do we keep up with this changing landscape?With the proliferation of devices including phones, tablets, e-readers, and who knows what else, how can we keep up with this increasingly fast paced industry given the tight resources we have in a shrinking budget?
- We have to serve many different audiences with vastly different behaviors.
- Not only do we need to support multiple devices, in higher ed. We need to support multiple audiences with different browsing habits
- students who have the latest gadgets
- Staff and faculty that have everything from an iPhone to an old RAZOR (really)Picture of new and old RAZOrBring out Allisa’s RAZOR (I’ve confiscated this phone and refuse to give it back)
- Deans and Vice Chancellors have expectations based on what their kids or other people are telling them.
- Decentralized ITMy group is the most centralized IT group on our campus but we are by no means it.Where does the data reside? Who owns the content(picture of different circles containing student data, course data, directory information, maps, events, news)If each of these groups adopted their own mobile solution. We could be in big trouble in terms of our end user experience.
- This problem didn’t exist just on the UCSD campus. It was the same issue at all the UC campuses.Our goal was to use something that would allow each of our campuses to build mobile apps in a distributed way
- Our goal was to use something that would allow each of our campuses to build mobile apps in a distributed wayWe knew we wanted to use mobile webMost higher ed packages like MIT and Kurogu needed to be hosted centrallyFront end frameworks like Sencha were very JS heavy and proved difficult to work inJquery mobile looked promising but was in alphaUCLA MWF provided a light footprint
- A focus group, consisting of IT-leads across the campus, took part in evaluating and defining the recommendation for a campus mobile framework. The following campus departments were represented in this group:Academic Computing and Media Services (ACMS)Administrative Computing and Telecommunications (ACT)Biological SciencesThe CollegesLibrariesScripps Institution of Oceanography (SIO)Student Affairs
- Selection Criteria:Sustainable over a 1-2 year period of time.Include open source or industry standards.Support various mobile devices. Require little training for development.Easy to migrate to a new technology in the future.
- Reviewed 8 Mobile Frameworks:UCLA Mobile Web Framework, MIT Mobile Web Project, SproutCore, PhoneGap,jQuery Mobile, WebApp.Net, Sencha Touch, iMobileUhttps://spreadsheets.google.com/pub?key=0Akg5Mmp3HZPZdGRzTWtUbTFUUkFZWmQ4RE9qMXEydFE&hl=en&output=html
- Perform in-depth review of proof-of-concepts of chosen platforms. 5 different campus entities (IT/programmers) presented their proof-of-concept mobile applications of UCLA Mobile, and Sencha Touch to the focus group. The following categories were addressed: ease of use, framework features, documentation, cross-platform support, maturity, extensibility, learning curve, and integration with our campus CMS. UCLA MWF provided a light footprint
- (strategy)Given our focus on the mobile web, our strategy has been to develop once and deploy everywhere. In this climate, we feel we have to stick to the mobile web and use platform specific devices that point back to the web.We have a wealth of data on campus that can be unlocked and accessed through your mobile device. And we’ve adopted a framework that will allow us to mobilize it, regardless of the technology used to develop the mobile app.
- This has now become the overall UC strategy.
- We have a documentation site that walks developers through step by step how to use the framework. It allows them do download a web application decorator and kitchen sink file that contains all the UI elements in the framework.For those that build apps, they can ask us questions and submit to have their app added to m.ucsd.edu.
- (My TritonLink Screens)Well now students can access their class schedule on their mobile device through MyTritonLink. Their class locations are plotted on google map that provides them walking directions using GPS. Lost your notes today? no worries, you can pull the podcast of the professors lecture and hear what he had to say.That’s what we’ve focused on for the new UCSD mobile. Our goal is to make life easier for students, staff, faculty, visitors and others no matter what mobile device they are using. Ok, I’d like to set the stage for a video I’m going to show
- Picture of Dean saying “Where are we in the App Store!”
- Picture of mobile siteOverlay with Picture of App
- Since many UC’s are now contributing to the framework, it has been rebranded the Mobile Web Framework.Currently 5 out of the 10 are live with the reminder either very close or in development.
- Since many UC’s are now contributing to the framework, it has been rebranded the Mobile Web Framework.Currently 5 out of the 10 are live with the reminder either very close or in development.
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- But what about these? We have a multitude of websites already in the CMS.
- What is One Web?
- We want to take a step further
- This is our goal: One markup for all devices. We’ve recently converted mobile native app (iphone/blackberry) into one implementation using MWF Mobile Web. At the same time added support for Android. The payoff was huge.The next step: we want to converge all key ACT services (CMS, UXT, Mobile) into one shared front-end delivery mechanism that will render the UI appropriately based on the user’s device. The industry calls this responsive or adaptive design.How can we do this? What are industry best practices when it comes to designing responsive websites?
- The best practice is called “Progressive enhancement”. The idea is that you start from a foundation, and only add things if supported. So user only get what they are capable of digesting, nothing more.Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth, more advanced browser software or more experience an enhanced version of the page.Let’s look into deeper…
- The must-have-if-everything-else-fails-content is your “core content”.
- If CSS and JS is not supported, no big deal, you still have your core content. The concept is that you start from bottom and you ADD capabilities.
- Avoid unnecessary payload.
- This progressive enhancement sounds all good… But won’t work here at ACT. Progressive Enhancements requires we start from core content, but we already have hundreds of websites that has full features. Way too many existing content and web applications to change. It will not be efficient to convert them all.
- ACT’s One Web Axiom.So what do we do now?
- An opposite view from Progressive Enhancement. You offer everything, and tell the client to ignore the things they don’t understand.Let’s take a deeper look.
- This progressive enhancement sounds all good… But won’t work here at ACT. Progressive Enhancements requires we start from core content, but we already have hundreds of websites that has full features. Way too many existing content and web applications to change. It will not be efficient to convert them all.
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- So let’s review. Full site + css + js = responsive site. Yes?Almost, not quite there yet.There is a downside to this approach…
- (80’s stuff)By a show of hands, who was a college student in the 80’s or 90’s? Do you remember what it was like finding your classes on the first day of school back then? You probably pulled out your printed class schedule and overlayed it with your sprawling campus map while trying to carry all your books and it was a nightmare.What about if you lost your notes from your lecture? You probably scoured through the textbook or called your friend on a nearby payphone from the library to borrow theirs.
- (Now)Here we have our Now student. He’s a cool guy. He has an iPhone. When he’s not surfing the internet on his phone, he’s surfing. He’s a multitasker and wants to maximize his time.(Then)And here we have our Then Student. She’s cool too. But she was cool in the 80’s where mobile technology didn’t exist.She’s all of us in college.This concludes my presentation but I’d like to leave you all with a video that shows the difference between now and thenThank you for your time and I hope you enjoy the video.