CS 102 Lecture 23: Mobile Webcs.ashoka.edu.in/cs102/slides/L23-Mobile.pdf · CS102: Monsoon 2015...
19
CS102: Monsoon 2015 CS 102 Lecture 23: Mobile Web 1
Transcript of CS 102 Lecture 23: Mobile Webcs.ashoka.edu.in/cs102/slides/L23-Mobile.pdf · CS102: Monsoon 2015...
CS102: Monsoon 2015
CS 102 Lecture 23: Mobile Web
1
CS102: Monsoon 2015
UpdatesBoth classes will be held next week
Quizzes: Stats quiz next Monday, Final quiz next Wednesday (covers all the syllabus)
Guest lecture by Ashish Goel (Zomato) 6pm tomorrow
Hackathon this Saturday-Sunday
2 CS102: Monsoon 2015
CS102: Monsoon 2015
Stats recapThings to understand intuitively:
Confidence intervals and p-value, and how sample size affects them
Is a measurement Quantitative vs ranked vs nominal
Is a measurement paired or not
Rank sum and rank difference tests
3 CS102: Monsoon 2015
CS102: Monsoon 2015
Recap: mobile webBrowser rendering engines
Mobile viewports: Layout, visual, ideal
Media queries
Geolocation
Compatibility checking with Modernizr
4 CS102: Monsoon 2015
CS102: Monsoon 2015
Take care of the mobile web
5 CS102: Monsoon 2015
CS102: Monsoon 2015
Watching Location navigator.geolocation.watchPosition(showLocation, errorHandler, options);
Calls showLocation() when location changes
Can be easily used to record waypoints, routes, shapes, etc.
Test different locations using Emulation tab in Chrome inspector
Check: http://cs.ashoka.edu.in/cs102/mobile
6 CS102: Monsoon 2015
CS102: Monsoon 2015
Offline access with Appcache<html manifest=“app.appcache">
app.appcache:
CACHE MANIFEST
CACHE:
app.html
logo.jpg
FALLBACK:
logo2.jpg logo.jpg
Cache needs to be completely invalidated if any resource changes
Check: http://cs.ashoka.edu.in/cs102/mobile
7 CS102: Monsoon 2015http://www.html5rocks.com/en/mobile/workingoffthegrid/
CS102: Monsoon 2015
Offline access with Apache
8 CS102: Monsoon 2015
CS102: Monsoon 2015
srcset
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">
browser chooses the best image size based on viewport size and display resolution
Optimizes data transfer significantly
9 CS102: Monsoon 2015
CS102: Monsoon 2015
Input techniques
10
CS102: Monsoon 2015
Key parametersProperty sensed (position, motion, force, etc.)
Absolute (position) vs. relative (motion)
Number of dimensions
Indirect vs. direct
Device acquisition/homing
Gain
11 CS102: Monsoon 2015Input Technologies and Techniques
CS102: Monsoon 2015
Fitts’ LawMT = a + b log2(A/W + 1)
MT = Movement Time
A = Amplitude (Distance)
W = Width of target
a, b: normalizing constants
IP = 1/b ~ stays relatively constant. e.g ~4bps for mouse
12 CS102: Monsoon 2015
CS102: Monsoon 2015
Fitts’ Law
13 CS102: Monsoon 2015
CS102: Monsoon 2015
Hick’s LawH = log (n+1)
H = decision time
n = number of choices (e.g. on a menu)
14 CS102: Monsoon 2015
CS102: Monsoon 2015
Marking menus
15 CS102: Monsoon 2015https://www.youtube.com/watch?v=dtH9GdFSQaw
CS102: Monsoon 2015
Tapsense
16 CS102: Monsoon 2015https://www.youtube.com/watch?v=-oN96cucBr4
CS102: Monsoon 2015
Minput
17 CS102: Monsoon 2015https://www.youtube.com/watch?v=XYO7Qizs9d8
CS102: Monsoon 2015
Skinput
18 CS102: Monsoon 2015https://www.youtube.com/watch?v=g3XPUdW9Ryg
CS102: Monsoon 2015
Pen + Touch
19 CS102: Monsoon 2015https://www.youtube.com/watch?v=aD6f6z8kDrM
![Pf cs102 programming-8 [file handling] (1)](https://static.fdocuments.in/doc/165x107/58a3269d1a28ab71398b5a39/pf-cs102-programming-8-file-handling-1.jpg)
