CS 102 Lecture 22: Mobile Web CS102: Monsoon 2015 1 Updates - - PowerPoint PPT Presentation

▶

Jul 19, 2023 495 likes •669 views

CS 102 Lecture 22: Mobile Web CS102: Monsoon 2015 1 Updates Stats quiz next Monday, Final quiz next Wednesday (covers all the syllabus) Final reading assignment posted: Choose between Aardvark and Skinput papers (Due next Wednesday Dec. 9)

SLIDE 1

CS102: Monsoon 2015

CS 102 Lecture 22: Mobile Web

SLIDE 2

CS102: Monsoon 2015

Updates

Stats quiz next Monday, Final quiz next Wednesday (covers all the syllabus) Final reading assignment posted: Choose between Aardvark and Skinput papers (Due next Wednesday Dec. 9) Guest lecture by Ashish Goel (Zomato) on Thu (Dec. 10, 6pm) Final expo Dec. 18 Friday morning 9.30-12.30am

2 CS102: Monsoon 2015

SLIDE 3

CS102: Monsoon 2015

Recap

ICTD Lecture: comments?

3 CS102: Monsoon 2015

SLIDE 4

CS102: Monsoon 2015

Mobile web

SLIDE 5

CS102: Monsoon 2015

Browser rendering engines

Rendering engines are the core of a browser: execute HTML, CSS, Javascript A browser = rendering engine + more Webviews can embed web pages in native apps

5 CS102: Monsoon 2015

SLIDE 6

CS102: Monsoon 2015

Browser rendering engines

Rendering engines Webkit (Safari, Android, etc) Blink, a fork of Webkit (Chrome, Silk, etc) Gecko (Mozilla) Trident (Microsoft/IE) All native iOS browsers use the Safari/Webkit rendering engine

6 CS102: Monsoon 2015

SLIDE 7

CS102: Monsoon 2015

Proxy browsers

e.g., Opera Mini A server first receives the page on a user’s behalf The page is transcoded or even rendered before passing

nto the mobile client in a compressed fashion

Can be much faster and saves data bytes (but less secure, and requires server infrastructure)

7 CS102: Monsoon 2015

SLIDE 8

CS102: Monsoon 2015

Pixels and viewports

CSS Pixels (Logical - used in HTML/CSS) Device pixels (Physical) Usually device pixels scaled linearly into CSS pixels Can be different due to display resolution (e.g. retina display) or zoom factor

8 CS102: Monsoon 2015

SLIDE 9

CS102: Monsoon 2015

Viewports

9 CS102: Monsoon 2015 The mobile web handbook

Layout viewport Visual viewport

Browser renders according to layout viewport Device displays what is in visual viewport

SLIDE 10

CS102: Monsoon 2015

2 types of zoom

10 CS102: Monsoon 2015 The mobile web handbook

Page zoom changes layout viewport Screen zoom changes only visual viewport

SLIDE 11

CS102: Monsoon 2015

Sizing content for mobile

“Ideal viewport” is the best viewport dimension for the given device (usually ~ 300px width (CSS) or lines of 25-30 characters on mobile screens) Use this directive for ideal viewport: <meta name="viewport" content=“width=device-width”> Without the ideal viewport directive, mobile devices may use a viewport size of ~980px Check: http://cs.ashoka.edu.in/cs102/mobile

SLIDE 12

CS102: Monsoon 2015

Best practices

Try to not use (large) absolute width blocks Do not depend on a particular viewport width; test at different widths (use a mobile/responsive web design testing plugin) Can find layout viewport width/height in JS with document.documentElement.clientWidth

SLIDE 13

CS102: Monsoon 2015

Media queries

@media all and max:width: 400px { /* do something */ } Check: http://cs.ashoka.edu.in/cs102/mobile

SLIDE 14

CS102: Monsoon 2015

Geolocation

navigator.geolocation.getCurrentPosition gets current location (with permission of user) returns lat/long/accuracy high resolution can be requested timeouts can be specified Can also watch for changes in position with navigator.geolocation.watchLocation

SLIDE 15

CS102: Monsoon 2015

Compatibility checking

Use Modernizr library in Javascript <script src="path/to/modernizr.js"></script> if ( Modernizr.websockets ) { /* code that depends on web sockets */ } Or use device databases like WURFL