google programmers are doing work on mobile applications...
TRANSCRIPT
![Page 1: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/1.jpg)
![Page 2: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/2.jpg)
Google programmers are doing work on mobile applications first because they are better apps and that what top programmers want to develop.
Eric Schmidt
![Page 3: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/3.jpg)
Growth = Opportunity
Constraints = Focus
Capabilities = Innovation
![Page 4: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/4.jpg)
Multiple screen sizes and densities
Performance optimization
Touch targets, gestures and actions
Location systems
Device capabilities
![Page 5: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/5.jpg)
![Page 6: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/6.jpg)
In next years up to 90% of the mobile market will be smartphones
![Page 7: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/7.jpg)
Mobile web growth has outpaced desktop web growth 8x
![Page 8: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/8.jpg)
People come online on mobile first on new markets.
![Page 9: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/9.jpg)
![Page 10: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/10.jpg)
Screen size ◦ Focus on core actions
◦ Know your users
◦ Use scalable design
![Page 11: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/11.jpg)
Create a product!
Don’t just reimagine one for small screens.
Great products are created from scratch never ported!
Brian Fling
![Page 12: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/12.jpg)
My goal was initially just to make a mobile companion, but I became convinced that it was possible to create a version of FB that was actually better than the website.
Joe Hewitt
![Page 13: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/13.jpg)
![Page 14: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/14.jpg)
The main function should be immediately apparent !!
![Page 15: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/15.jpg)
![Page 16: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/16.jpg)
![Page 17: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/17.jpg)
![Page 18: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/18.jpg)
60 menu items on the actual website
9 items on the mobile version
![Page 19: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/19.jpg)
![Page 20: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/20.jpg)
Users are expecting a well designed mobile experience
![Page 21: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/21.jpg)
Iphone 3G ◦ 320x480 3,5in 164ppi
Motorolla Droid, Nexus One ◦ 480x854 3.7in 264ppi
Iphone 4 ◦ 960x640 3,5in 326ppi
![Page 22: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/22.jpg)
![Page 23: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/23.jpg)
![Page 24: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/24.jpg)
Define device groups
Create a default reference design
Define rules for content and design adaptation
Opt for web standards and flexible layout
![Page 25: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/25.jpg)
![Page 26: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/26.jpg)
Keep performance on top of mind ◦ Reduce requests and file size ◦ Eliminate redirects ◦ Use css sprites to serve multiple images ◦ Consolidate css and js into a single file ◦ Minify your code
Take advantage of HTML5 ◦ Load content lazily ◦ Use application cache for local content storage ◦ Use css 3 and canvas tag instead of images where
possible.
![Page 27: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/27.jpg)
100ms delay results in 1% sales loss
500ms delay drops search traffic by 20% According to study if you do it consistently over a period of 2 weeks you lose the users permanently.
400ms delay results in 5-9% drop in full page traffic
![Page 28: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/28.jpg)
Quick bursts everywhere
One handed interactions !!
![Page 29: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/29.jpg)
During a typical day
84% at home
80% during misc times throughout the day
74% waiting in lines
64% at work
![Page 30: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/30.jpg)
Social ◦ Facebook, Twitter
Entertainment ◦ Angry Birds
Communication ◦ Email, Skype
Local ◦ Yelp, Maps
Information ◦ Google search, Wiki
Utilities ◦ Calendar, Flashlight
![Page 31: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/31.jpg)
25% of documents displayed for less than 4s
52% of all visits were shorter than 10s
Peak value was located between 2 and 3 sec
![Page 32: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/32.jpg)
Simplify UI
Big buttons
![Page 33: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/33.jpg)
![Page 34: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/34.jpg)
![Page 35: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/35.jpg)
Apple recommends a minimum target size ◦ 29px wide
◦ 44px tall
![Page 36: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/36.jpg)
Apple recommends a minimum target size ◦ 29px wide
◦ 44px tall
![Page 37: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/37.jpg)
Add room for error
![Page 38: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/38.jpg)
Tap (multi)
Double tap
Drag (multi)
Flick
Pinch (multi)
Spread (multi)
Press
Press & tap
Press & drag
Rotate
![Page 39: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/39.jpg)
![Page 40: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/40.jpg)
![Page 41: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/41.jpg)
![Page 42: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/42.jpg)
![Page 43: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/43.jpg)
![Page 44: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/44.jpg)
![Page 45: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/45.jpg)
![Page 46: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/46.jpg)
Maybe good because of hover overload ◦ Hover is not an intentional user action
![Page 47: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/47.jpg)
![Page 48: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/48.jpg)
![Page 49: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/49.jpg)
GPS ◦ Best quality ◦ High battery consumption
Wifi
◦ 100m accuracy
Cell tower triangulation ◦ Minimal battery consumption ◦ Good for most cases
IP address ◦ Only good on a country level. Maybe city.
![Page 50: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/50.jpg)
Being in a place provides context ◦ What can you infer now ?
Throw time in the mix ◦ How about now?
![Page 51: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/51.jpg)
Application cache for local storage CSS 3 & Canvas for performance optimization Multitouch sensors Location detection
Device positioning & motion: Accelerometers Orientation: Digital compass Audio: Microphone Video & Image: Camera Push real-time notifications Peer to Peer connections: Bluetooth or WiFi Ambient light: light/dark environment awareness RFID reader: identify & track objects with broadcasted identifiers Haptic feedback: feel different surfaces on a screen Biometrics: retinal, fingerprints, etc.
![Page 52: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/52.jpg)
![Page 53: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/53.jpg)
![Page 54: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/54.jpg)
![Page 55: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/55.jpg)
Native ◦ Objective C, Java Android
Web ◦ HTML5,CSS3, Javascript
Hybrid? ◦ PhoneGap, Titanium, Rhodes
![Page 56: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/56.jpg)
![Page 57: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/57.jpg)
![Page 58: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/58.jpg)
What is AJAX ?
How to make asynchronous Web requests ?
Using jQTouch to set up touch events.
Animations with jQTouch.
![Page 59: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/59.jpg)
$("#hello"); //id:hello
$(".hello"); //class:hello
$("div"); //all divs
$("div", "#main"); // all divs inside main
$("div").each(function(){ $(this).doSomething();
}); // act on every div
$("#hello").css("background-color", "black");
![Page 60: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/60.jpg)
![Page 61: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/61.jpg)
GET vs POST
Asynchronous vs Synchronous
XML vs JSON
![Page 62: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/62.jpg)
GET http://example.com/index.html?hello=yes&goodbye=no
◦ No message body
◦ Query is in the URL
◦ Shouldn't change data on server
POST http://example.com/index.php
◦ Message body has parameters
◦ Can have side-effects, change data on server
◦ Can carry more data
◦ This is an action
![Page 63: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/63.jpg)
fetch using GET
change using POST
![Page 64: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/64.jpg)
Asynchronous
Javascript
And
XML
![Page 65: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/65.jpg)
In context of network connections: let other stuff happen while a network request is going on
![Page 66: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/66.jpg)
![Page 67: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/67.jpg)
![Page 68: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/68.jpg)
Many people use JSON instead of XML ◦ easier to build/parse than XML
![Page 69: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/69.jpg)
JavaScript Object Notation ◦ Takes the array, object, and string notation from JS
& makes it a transport format (can send around a string that evaluates to JSON)
![Page 70: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/70.jpg)
{ classes: [{
"name":"SAE",
"location": "Ampth 1”
},{
"name":"Diktia",
"location": ”Aith 2”
}
]}
![Page 71: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/71.jpg)
{ classes: [{
"name":”SAE",
"location": ”Ampth 1”
},{
"name":”Diktia",
"location": ”Aith 2”
}
]} // this is an object with an array inside that contains two objects
![Page 72: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/72.jpg)
Takes JSON data, encoded in a string
Returns an object you can use in JS
![Page 73: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/73.jpg)
>> var a = "[5,4,3,2,1,\"hello\"]"
>> var b = JSON.parse(a);
>> a.length
6
>> a[5]
"hello"
![Page 74: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/74.jpg)
Takes a Javascript Array, Object, or String, and turns it into JSON
![Page 75: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/75.jpg)
var a = {"dog":"bark", "cat":"meow"};
>> JSON.stringify(a);
"{\"dog\":\"bark\", \"cat\":\"meow\"}"
![Page 76: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/76.jpg)
overall function: .ajax() ◦ Shortcuts: .get, .post, .getJSON
![Page 77: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/77.jpg)
var options = {
data: {
"animals":["dog", "cat", "cow"]
},
dataType: "json",
error: onError,
success: successFn,
url: "/postAnimal.php”
};
$.ajax(options);
![Page 78: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/78.jpg)
response: {'dog':'bark', 'cat':'meow', 'cow':'moo’}
function onSuccess(data) { $.each(data, function(i, item) { $("<div>" + i + " says " + item + "</div>") .appendTo("#animals"); }) } function onError(function(request, settings) { $("#status").append("<div>Error fetching " +
settings.url + "</div>") })
![Page 79: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/79.jpg)
$.get(url, data, successCallback);
// no error callback
// grabs HTML or XML
$.getJSON(url, data, successCallback);
// also no error callback
// but grabs & parses JSON
![Page 80: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/80.jpg)
<form id="mainform" method="POST" action="server.php”>
<td>Your name</td>
<td>
<input type="text" name="name"/>
</td>
<td>E-mail</td>
<td>
<input type="text" name="email"/>
</td>
<td colspan="2">
<input type="submit" value="send form"/>
</td>
</form>
![Page 81: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/81.jpg)
$("#mainform").submit(function(event){
var keyvals = {};
$("input[type!=submit]", "#mainform").each(function(i,el){
el = $(el);
keyvals[el.attr("name")] = el.val();
})
$.post($(this).attr("action"), keyvals, function(response){
$("#response").html(response);
})
return false; //prevents normal submit event from firing
})
![Page 82: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/82.jpg)
jQTouch Basics & Workflow
Changing list input style
Overriding styles
Setting up animations
Swipes & Touches
![Page 83: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/83.jpg)
Include it after jQuery gets loaded
There's also a “jQuery Touch”, that's a different project
![Page 84: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/84.jpg)
<head>
<style type="text/css" media="screen">@import "../jqt/jqtouch.css";<style>
<style type="text/css" media="screen">@import "../jqt/theme.css";</style>
<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../jqt/jqtouch.js" type="text/javascript" charset="utf-8"><script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch();
</script>
</head>
![Page 85: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/85.jpg)
<div id="example" class="current"> <ul class="rounded"> <li><a href="#one">Page 1</a> <li><a href="#two">Page 2</a> </ul> </div> <div id="one"> <div class="toolbar"> <h1>Page 1</h1> <a class="back">Back</a> </div>This is page one. </div> <div id="two"> <ul> <li>This is another page. <a href="#two">go to page 1?</a></li> </ul> </div>
![Page 86: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/86.jpg)
Add divs to your page with meaningful IDs
Set up links to those ids with anchors inside LIs: ◦ <ul><li><a href="#yourid">your link</ a></li></ul>
jQTouch handles the animations
target=_blank on external links
![Page 87: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/87.jpg)
Just specify a URL instead of a hash
![Page 88: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/88.jpg)
<div id="example" class="current">
<ul class="rounded">
<li><a href="#one">Page 1</a>
<li><a href="jqtouch-loadme.html">Page 2</a>
</ul>
</div>
<div id="one">This is page one. </div>
![Page 89: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/89.jpg)
var jQT = new $.jQTouch({
statusBar: 'black',
icon: 'cs.png',
addGlossToIcon: true, // defaults to true startUpScreen: ’my-start.png’
});
![Page 90: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/90.jpg)
Change class of <ul>
Default theme options: rounded, edgetoedge, plastic, metal
![Page 91: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/91.jpg)
![Page 92: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/92.jpg)
Include basic jqtouch.css
Optionally include theme.css
Add your own styles by overwriting
Use Web Browser tools to check what styles are active
![Page 93: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/93.jpg)
Specify class on your <a> link
![Page 94: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/94.jpg)
slide
slideup
dissolve
fade
flippop
swap
cube
![Page 95: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/95.jpg)
<div id="example">
<ul class="rounded">
<li><a class="flip" href="#one">Page 1</a>
<li><a class="swap" href="#two">Page 2</a>
</ul>
</div>
![Page 96: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/96.jpg)
jQuery will set an “active” class on touch&hover for anything with a ".touch" class
Will take off the active class if the touch ends up not being a tap (if you move your finger)
And if you swipe sideways, will fire .swipe
![Page 97: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/97.jpg)
<script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({}); $(document).ready(function(){ $(".touch").swipe(function(){ alert("SWIPE"); }) $(".touch").bind("touchstart", function(){ $(".touch").unselect(); }) }) </script>... <div id="example"> <div class="touch cta">Touch this.</div> <div class="touch cta">Or touch that.</div> </div>
![Page 98: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/98.jpg)
navigator.geolocation.getCurrentPosition (callback)
![Page 99: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/99.jpg)
navigator.geolocation.getCurrentPosition(handlePosition)
function handlePosition(position) {
$("#lat").html(position.coords.latitude);
$("#lon").html(position.coords.longitude);
}
![Page 100: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/100.jpg)
// event name: orientationchange
// using jQuery:
$("body').bind("orientationchange", function(event) {
react()
}
![Page 101: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/101.jpg)
function setOrientation() {
var orientation = (window.innerWidth < window.innerHeight) ? 'portrait' : 'landscape';
$("#orientation").html(orientation);
}
$(document).ready(function(){
setOrientation();
$("body").bind("orientationchange", function(event){
setOrientation();
}
})
![Page 102: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/102.jpg)
![Page 103: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/103.jpg)
Brainstorming ◦ Go for quantity in the beginning not quality
Do your homework ◦ Check references to learn from previous attempts in
the same area
Follow users ◦ Yes I mean stalk them
![Page 104: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/104.jpg)
![Page 105: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/105.jpg)
![Page 106: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/106.jpg)
![Page 107: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/107.jpg)
HTML Mockups ◦ Create a minimal design that will allow you to test
user flows
Minimum Viable Product (MVP) ◦ Launch a product with the minimum features and
iterate
![Page 108: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/108.jpg)
A/B Testing is king ◦ Metrics, metrics, metrics
Gather user feedback
![Page 109: Google programmers are doing work on mobile applications ...users.sch.gr/psiachos/web-class.gr/slides/17_mobile.pdfGoogle programmers are doing work on mobile applications first because](https://reader033.vdocuments.net/reader033/viewer/2022052019/60337fd39766a6295c3e82e8/html5/thumbnails/109.jpg)