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
![Page 1: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/1.jpg)
Mobile web
Sebastian LopienskiCERN
HEPiX WorkshopBeijing, October 2012
![Page 2: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/2.jpg)
Outline
• Mobile development– native apps– mobile web
• CERN mobile web site– a demo
• Technologies– jQuery– jQuery Mobile– PhoneGap
2
![Page 3: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/3.jpg)
Outline
• Mobile development– native apps– mobile web
• CERN mobile web site– a demo
• Technologies– jQuery– jQuery Mobile– PhoneGap
3
![Page 4: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/4.jpg)
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)
![Page 5: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/5.jpg)
Mobile devices in Beijing metro
5
(as observed in October 2012)
![Page 6: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/6.jpg)
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
![Page 7: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/7.jpg)
Developing for
• Language: Java
• Development:– IDE: Eclipse
• Distribution: – via Google Play (called Android Market before)
7
![Page 8: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/8.jpg)
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
![Page 9: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/9.jpg)
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
![Page 10: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/10.jpg)
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
![Page 11: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/11.jpg)
Web – accessing native features
× Accelerometer
× Barcode scanner
~ Camera
× Compass
× Contacts
× File
Geolocation/GPS
Media
Network
× Notification
• alert, sound, vibration
Phone
Storage
Offline mode11
![Page 12: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/12.jpg)
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
![Page 13: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/13.jpg)
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
![Page 14: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/14.jpg)
Mobile web sites
14
![Page 15: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/15.jpg)
Outline
• Mobile development– native apps– mobile web
• CERN mobile web site– a demo
• Technologies– jQuery– jQuery Mobile– PhoneGap
15
![Page 16: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/16.jpg)
CERN mobile web site
16
BETAhttp://m.cern.ch
![Page 21: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/21.jpg)
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
![Page 22: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/22.jpg)
Outline
• Mobile development– native apps– mobile web
• CERN mobile web site– a demo
• Technologies– jQuery– jQuery Mobile– PhoneGap
22
![Page 23: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/23.jpg)
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)
![Page 24: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/24.jpg)
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)
![Page 25: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/25.jpg)
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
![Page 26: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/26.jpg)
26
Supp
orte
d de
vice
s
![Page 27: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/27.jpg)
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
![Page 28: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/28.jpg)
Widgets
28
![Page 29: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/29.jpg)
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
![Page 30: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/30.jpg)
Single code – multiple devices
30
Hybrid applications:
developed as web,
packaged as native
![Page 31: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/31.jpg)
Supported platforms
31
![Page 32: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/32.jpg)
Accessing native features
Accelerometer
Barcode scanner
Camera
Compass
Contacts
File
Geolocation/GPS
Media
Network
Notification
• alert, sound, vibration
Phone
Storage
Offline32
![Page 33: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/33.jpg)
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!
![Page 34: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/34.jpg)
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
![Page 36: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/36.jpg)
Backup slides
36
![Page 37: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/37.jpg)
Universities’ mobile web sites
37
![Page 38: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/38.jpg)
Mobile web sites
38
![Page 39: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/39.jpg)
Mobile web sites
39
![Page 40: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/40.jpg)
Mobile web sites
40
![Page 41: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/41.jpg)
CERN mobile web site
41
![Page 51: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/51.jpg)
jQuery
51
![Page 52: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/52.jpg)
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)
![Page 53: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/53.jpg)
jQuery Mobile
53
![Page 54: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/54.jpg)
jQuery going mobile
54
![Page 55: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/55.jpg)
…widely used…
55
![Page 56: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/56.jpg)
…and explained
56
![Page 57: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/57.jpg)
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 58: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/58.jpg)
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
![Page 59: Mobile web](https://reader036.vdocuments.us/reader036/viewer/2022062520/56815e60550346895dccdc01/html5/thumbnails/59.jpg)
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)