1 / 59

Mobile web

Mobile web. Sebastian Lopienski CERN HEPiX Workshop Beijing, October 2012. Outline. Mobile development n ative apps m obile web CERN mobile web site a demo Technologies jQuery jQuery Mobile PhoneGap. Outline. Mobile development n ative apps m obile web CERN mobile web site

barth
Download Presentation

Mobile web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile web Sebastian LopienskiCERN HEPiX WorkshopBeijing, October 2012

  2. Outline • Mobile development • native apps • mobile web • CERN mobile web site • a demo • Technologies • jQuery • jQuery Mobile • PhoneGap

  3. Outline • Mobile development • native apps • mobile web • CERN mobile web site • a demo • Technologies • jQuery • jQuery Mobile • PhoneGap

  4. Mobile devices at CERN (as registered in LanDB in June 2012) 3200 devices 150 devices 5200 devices 720 devices 150 devices (including Windows Mobile)

  5. Mobile devices in Beijing metro (as observed in October 2012)

  6. Developing for • Language: Objective-C • Development: • IDE: Xcode • OS: Intel-based Macs only • developer’s fee required for testing on a device • Distribution: • via App Store only • prior review and approval by Apple

  7. Developing for • Language: Java • Development: • IDE: Eclipse • Distribution: • via Google Play (called Android Market before)

  8. Developing for • Language: C#, Visual Basic • Development: • IDE: Visual Studio 2010 • OS: Windows 7 or Vista only • Distribution: • via Windows Phone Marketplace • prior review and approval by Microsoft

  9. Alternatives to native development? • Developing native applications for each platform separately is a big effort • Most apps do simple things, anyway: • displaying information, search, querying a server etc. • as on regular web sites • Why not web, then? • smartphones and tablets have modern browsers • web sites can be optimized for small, touch screens

  10. Developing for (mobile) Web • Language • server side (if needed): whatever you want • client side: HTML5, CSS, JavaScript • Development: • IDE: whatever you want • OS: whatever you want • Distribution: • deploy on a web server, and just advertise the URL

  11. Web – accessing native features • Accelerometer • Barcode scanner • Camera • Compass • Contacts • File • Geolocation/GPS • Media • Network • Notification • alert, sound, vibration • Phone • Storage • Offline mode

  12. Native apps vs. mobile web Reasons to go native • access to native features • performance • exposure in app stores • monetization Reasons to go web • cross-platform • open standards • easy development • easy deployment

  13. Universities’ mobile web sites http://m.mit.edu http://m.ncsu.edu http://m.ox.ac.uk http://m.princeton.edu http://m.sju.edu http://m.stanford.edu http://m.syr.edu http://m.tamu.edu http://m.tufts.edu http://m.ua.edu http://m.uc.edu http://m.ucla.edu http://m.ucsd.edu http://m.ucsf.edu http://m.uiowa.edu http://m.umich.edu http://m.uni.edu http://m.unil.ch http://m.uw.edu http://m.warwick.ac.uk http://m.wayne.edu http://m.wisc.edu http://m.adelphi.edu http://m.asu.edu http://m.berkeley.edu http://m.bristol.ac.uk http://m.columbia.edu http://m.epfl.ch http://m.fiu.edu http://m.glos.ac.uk http://m.harvard.edu http://m.hbs.edu http://m.iu.edu

  14. Mobile web sites

  15. Outline • Mobile development • native apps • mobile web • CERN mobile web site • a demo • Technologies • jQuery • jQuery Mobile • PhoneGap

  16. CERN mobile web site http://m.cern.ch BETA

  17. CERN mobile web site news events services http://m.cern.ch

  18. CERN mobile web site - phonebook http://m.cern.ch

  19. CERN mobile web site - map http://m.cern.ch

  20. CERN mobile web site gatesbuses emergency http://m.cern.ch

  21. Other mobile Web initiatives at CERN • Indico is building a mobile version • read-only interface • Mobile CMS TV • http://cern.ch/mcmstv • others popping up or on the way…

  22. Outline • Mobile development • native apps • mobile web • CERN mobile web site • a demo • Technologies • jQuery • jQuery Mobile • PhoneGap

  23. jQueryis a JavaScript library that simplifies: • HTML document traversing • event handling • animating • AJAX interactions • etc. Extremely popular: 57% of most visited 10k web sites What to learn more? http://jquery.com/ What to get a feeling? http://ejohn.org/apps/workshop/intro (From http://trends.builtwith.com/javascript/jQuery)

  24. jQuery examples Before a form is submitted, show help if name is empty: $("form").submit( function(){ if ($("#name").val() === "") { $("span.help").show(); return false; } } ); (From http://ejohn.org/apps/workshop/intro)

  25. jQuery Mobile Touch-Optimized Web Framework for Smartphones & Tablets http://jquerymobile.com/ A JavaScript & HTML5 framework, based on jQuery and jQuery UI, targeted at all popular mobile devices

  26. Supported devices

  27. Listview example <uldata-role="listview" data-inset="true"> <lidata-role="list-divider">Mailbox</li> <li><a href="#inbox">Inbox <spanclass="ui-li-count">12</span></a></li> [..] </ul>

  28. Widgets

  29. Bridging Web and native together PhoneGap is a tool to create native applicationswith web technologies such as HTML5, JavaScript and CSS • http://phonegap.com • supported by Adobe • aka Apache Cordova: http://incubator.apache.org/cordova

  30. Single code – multiple devices Hybrid applications: developed as web, packaged as native

  31. Supported platforms

  32. Accessing native features • Accelerometer • Barcode scanner • Camera • Compass • Contacts • File • Geolocation/GPS • Media • Network • Notification • alert, sound, vibration • Phone • Storage • Offline

  33. Native vs. web? Hybrid! Reasons to go web • cross-platform • open standards • easy development • easy deployment Reasons to go native • access to native features • performance • exposure in app stores • monetization Reasons to go native • access to native features • performance • exposure in app stores • monetization Reasons to go web • cross-platform • open standards • easy development • easy deployment Hybrid approach combines benefits of both native and web

  34. Summary • Mobile web – the game changer! • trivial to develop and deploy(once you know HTML, CSS, JS) • Hybrid applications – the silver bullet? • develop web, deploy native • Usehttp://m.cern.ch • not an official service  community support • feedback and ideas are welcome: cern-mobile@cern.ch

  35. Thank you Any questions?Sebastian.Lopienski@cern.ch http://www.flickr.com/photos/calavera/65098350

  36. Backup slides

  37. Universities’ mobile web sites

  38. Mobile web sites

  39. Mobile web sites

  40. Mobile web sites

  41. CERN mobile web site

  42. CERN mobile web site BETA http://m.cern.ch

  43. CERN mobile web site - news http://m.cern.ch

  44. CERN mobile web site - events http://m.cern.ch

  45. CERN mobile web site - phonebook http://m.cern.ch

  46. CERN mobile web site - map http://m.cern.ch

  47. CERN mobile web site - transport http://m.cern.ch

  48. CERN mobile web site - gates http://m.cern.ch

  49. CERN mobile web site - services http://m.cern.ch

  50. CERN mobile web site - other http://m.cern.ch

More Related