mobile web
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
Mobile web
Sebastian LopienskiCERN
HEPiX WorkshopBeijing, October 2012
Outline
• Mobile development– native apps– mobile web
• CERN mobile web site– a demo
• Technologies– jQuery– jQuery Mobile– PhoneGap
2
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)
Mobile devices in Beijing metro
5
(as observed in October 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
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/GPS
Media
Network
× Notification
• alert, sound, vibration
Phone
Storage
Offline mode11
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 siteshttp://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.edu13
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
Mobile web sites
14
Outline
• Mobile development– native apps– mobile web
• CERN mobile web site– a demo
• Technologies– jQuery– jQuery Mobile– PhoneGap
15
CERN mobile web site
16
BETAhttp://m.cern.ch
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…
21
Outline
• Mobile development– native apps– mobile web
• CERN mobile web site– a demo
• Technologies– jQuery– jQuery Mobile– PhoneGap
22
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/What to get a feeling? http://ejohn.org/apps/workshop/intro
23
(From http://trends.builtwith.com/javascript/jQuery)
jQuery examples
Before a form is submitted, show help if name is empty:
$("form").submit(function(){
if ($("#name").val() === "") { $("span.help").show(); return false;
} }
);
24
(From http://ejohn.org/apps/workshop/intro)
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
25
26
Supp
orte
d de
vice
s
Listview example
<ul data-role="listview" data-inset="true"> <li data-role="list-divider">Mailbox</li> <li><a href="#inbox">Inbox <span class="ui-li-count">12</span></a></li> [..]</ul>
27
Widgets
28
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
29
Single code – multiple devices
30
Hybrid applications:
developed as web,
packaged as native
Supported platforms
31
Accessing native features
Accelerometer
Barcode scanner
Camera
Compass
Contacts
File
Geolocation/GPS
Media
Network
Notification
• alert, sound, vibration
Phone
Storage
Offline32
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
33
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 http://m.cern.ch – not an official service community support– feedback and ideas are welcome: [email protected]
34
Backup slides
36
Universities’ mobile web sites
37
Mobile web sites
38
Mobile web sites
39
Mobile web sites
40
CERN mobile web site
41
jQuery
51
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});
52
(From http://ejohn.org/apps/workshop/intro)
jQuery Mobile
53
jQuery going mobile
54
…widely used…
55
…and explained
56
Hello world<html> <head> <link rel="stylesheet"
href="jquery.mobile.css"/> <script src="jquery.js"/> <script src="jquery.mobile.js"/> </head> <body>
<div data-role="page"> <div data-role="header"><h1>My Title</h1></div> <div data-role="content"><p>Hello world</p></div> </div>
</body></html> 57
Page header example
<div data-role="header"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="#o" data-icon="check" data-theme="b">Save</a></div>
58
Multiple pages
[..]<div data-role="page" id="home"> <div data-role="header"><h1>Home</h1></div> <div data-role="content"><p>
Go to <a href="#page2">page 2</a> </p></div></div>
<div data-role="page" id="page2"> <div data-role="header"><h1>Page 2</h1></div> <div data-role="content"><p>Hello world</p></div></div>[..]
59
(in a single HTML file)