1. Mobile web Sebastian Lopienski IT Technical Forum 29 June 2012

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

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

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

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 5

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

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 7

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 8

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 9

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

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 11

12. Universities’ mobile web sites 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 12 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

13. Mobile web sites 13

14. Mobile web sites 14

15. Mobile web sites 15

16. Universities’ mobile web sites 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 16 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.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 17

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

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

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

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

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

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

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

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

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

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

28. jQuery is 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/http://jquery.com/ What to get a feeling? http://ejohn.org/apps/workshop/introhttp://ejohn.org/apps/workshop/intro 28 (From http://trends.builtwith.com/javascript/jQuery)http://trends.builtwith.com/javascript/jQuery

29. jQuery examples Change style (css) of all links in list items 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}); 29 (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; } } ); 30 (From http://ejohn.org/apps/workshop/intro)

31. jQuery going mobile 31

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 32

33. 33 Supported devices

34. …widely used… 34

35. …and explained 35

36. Hello world <link rel="stylesheet" href="jquery.mobile.css"/> My Title Hello world 36

37. Multiple pages [..] Home Go to page 2 Page 2 Hello world [..] 37 (in a single HTML file)

38. Page header example Cancel Edit Contact Save 38

39. Listview example Mailbox Inbox 12 [..] 39

40. Widgets 40

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

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

43. Supported platforms 43

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

45. Reasons to go web –cross-platform –open standards –easy development –easy deployment 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 Native vs. web? Reasons to go native –access to native features –performance –exposure in app stores –monetization 45 Hybrid approach combines benefits of both native and web Hybrid!

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

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