Mobile web Sebastian Lopienski IT Technical Forum 29 June 2012

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

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

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)

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

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

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

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

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

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

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

Universities’ mobile web sites

Mobile web sites 13

Mobile web sites 14

Mobile web sites 15

Universities’ mobile web sites ??? Currently:

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

CERN mobile web site 18 BETA

CERN mobile web site - news 19

CERN mobile web site - events 20

CERN mobile web site - phonebook 21

CERN mobile web site - map 22

CERN mobile web site - transport 23

CERN mobile web site - gates 24

CERN mobile web site - services 25

CERN mobile web site - other 26

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

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? What to get a feeling? 28 (From

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

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

jQuery going mobile 31

jQuery Mobile Touch-Optimized Web Framework for Smartphones & Tablets A JavaScript & HTML5 framework, based on jQuery and jQuery UI, targeted at all popular mobile devices 32

33 Supported devices

…widely used… 34

…and explained 35

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

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

Page header example Cancel Edit Contact Save 38

Listview example Mailbox Inbox 12 [..] 39

Widgets 40

Bridging Web and native together PhoneGap is a tool to create native applications with web technologies such as HTML5, JavaScript and CSS – –supported by Adobe –aka Apache Cordova:

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

Supported platforms 43

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

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!

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 –feedback and ideas are welcome: 46

Thank you Any questions? 47