1 / 47

Mobile web

Mobile web. Sebastian Lopienski IT Technical Forum 29 June 2012. Outline. Mobile development n ative apps m obile web CERN mobile web site a demo Technologies jQuery jQuery Mobile PhoneGap. Why?. What?. How?. Outline. Mobile development n ative apps m obile web

lalasa
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 Lopienski IT Technical Forum29 June 2012

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

  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. 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

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

  7. 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

  8. 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

  9. 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

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

  11. 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

  12. 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

  13. Mobile web sites

  14. Mobile web sites

  15. Mobile web sites

  16. 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 http://m.cern.ch ??? Currently: http://cern.ch/m

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

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

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

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

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

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

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

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

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

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

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

  28. 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)

  29. jQuery examples Change style (css) of all links <a> in list items <li>to bold and red: $("li a").css({ color: "red", fontWeight: "bold" }); Find element(s) with id box and animate to the new marginLeft: $(".box").animate({marginLeft: 10}); (From http://ejohn.org/apps/workshop/intro)

  30. 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)

  31. jQuery going mobile

  32. 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

  33. Supported devices

  34. …widely used…

  35. …and explained

  36. Hello world <html> <head> <link rel="stylesheet" href="jquery.mobile.css"/> <script src="jquery.js"/> <script src="jquery.mobile.js"/> </head> <body> <divdata-role="page"> <divdata-role="header"><h1>My Title</h1></div> <divdata-role="content"><p>Hello world</p></div> </div> </body> </html>

  37. Multiple pages (in a single HTML file) [..] <divdata-role="page" id="home"> <divdata-role="header"><h1>Home</h1></div> <divdata-role="content"><p> Go to <a href="#page2">page 2</a> </p></div> </div> <divdata-role="page"id="page2"> <divdata-role="header"><h1>Page 2</h1></div> <divdata-role="content"><p>Hello world</p></div> </div> [..]

  38. Page header example <divdata-role="header"> <ahref="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="#o" data-icon="check" data-theme="b">Save</a> </div>

  39. 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>

  40. Widgets

  41. 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

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

  43. Supported platforms

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

  45. 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

  46. 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://cern.ch/m • feedback and ideas are welcome: cern-mobile@cern.ch

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

More Related