WEB TECHNOLOGIES FOR MOBILE APPSRoberto Beraldi

Introduction• The goal of this lesson is twofold:

• Basic notion of Responsive Web Design, RWD • understand how web technologies may be used to

develop mobile apps

• The goal is not to design a website

• Roadmap• Images and Screens • Plain HTML|CSS|JS• Mobile website and native looking App (BS4,jQuery)• Web App and Hybrid App (later in the course)

Web browser Web server

HTTP, C/S

Web page

’Execute’Web page

Static web (no server-side computation)

Web server is just a ‘dispatcher’

«Executing» a web page• HTML5

• Content + Structure via a fixed set of tags

• CSS3:• How to display an element (colors, fonts, borders..)• How to layout elements wrt each other• Selector + declaration

• JavaScript: • How to react to an ‘event’

• Changing the style of an element (e.g., onMouseOver)• Trigger some computation• Change the content of the page

Browser as a VM

• Single thread• Event-driven• Web worker (HMTL5)

Sandbox (restrict device access)Secure mechanism (JS is external, untrusted code…)

JS and multithreading• Web worker:

• Allows to run parallel JS code• Only one MAIN thread that access to DOM

• Service worker:• Much more flexible

Mobile web apps architecture• Idea: just avoid fetching page from the site• Store the web page locally (of course no local web-server!)

OS/Middleware

Starter

Web rendering engine(e.g.,webkit)

Web page

HW

Browser is sand-boxed

1. Run web renderingengine, e.g., androis’swebview

2. Load webpage in the engine

Native code

APPLICATION

Hybrid app architecture

OS/MW

Starter

Web rendering engine(e.g.,webkit)

Web page

HW

Native codeJSàNative mapping

(device specific)

APPLICATION

Native looking web apps• Disable web related user interaction

• Like scrolling, zooming, hide web browser controls (e.g., back button, address, url etc.)

• Enable native looking widgets• E.g., Navigation

• Enabling native related features• E.g., Working w/t internet connection (service worker)

Mobile web site

• Why?• How to solve this problem?• Change layout• Use images suitable to screen resolution• (Optionally) display less content

A Website designed for desktop may provide a bad UX

Digital images• An image is a W x H matrix of pixels (Width, Height)

• A pixel is the smallest visual unit that can be controlled, e.g., its colors, and displayed

• The pixel resolution of an image is the number of pixels, e.g., 2048×1536, sometimes given as the result of the product (usually in Mpixels)

• The Aspect Ratio is W/H (e.g., 4:3 or 16:9)

• (https://medialoot.com/blog/high-resolution-web/)

Some marketing name

• 1280 x 720 - HD or “HD Ready” High Definition

• 1920 x 1080 - FHD or “Full HD” (1.5 x HD)

• 2560 x 1440 - QHD or Quad HD

• 3840 x 2160 - 4K, UHD or Ultra HD (2 x FHD)

• 7680 x 4320 - 8K

• What is the AR?

• 1.77… à 16:9

Vector images• Describe the image in terms of points, which are connected by lines

and curves to form polygons and other shapes

• The most popular format are: PDF,SVG and EPS

• SVG (Scalable Vector Graphics) is a Web graphics language allowingfor creating static or dynamic images

Android >= 5

iOS supports PDF

Scalar vs vector• Vector is preferred as they may be of any size• Scalar has its own (pixel) size, rendering problem may

arise

Screen PPI > Image PPI

Images and screen• Images are rendered on a screen• Screens have they own characteristic, similar to the image

• In particular:• Pyshical size à diagonal (in inches)• (Spatial) resolution à Pixel Per Inch

• Issues related to display an image on a screen

Screen size

• The smartphone touch screen is a X x Y surface • The diagonal is D= #$ +&$• The Aspect Ratio is AR=Y:X• Note: The first number is the highest • The screen size is commonly given as the diagonal

length in inches [1 in = 2.54 cm]• For example: 4.2’’,4.7’’,5’’,..

• Other physical units : • Point (pt) = 1/72 in• Pixel (px) = 1/96th of 1in (warning: this is CSS pixel)• So: 1 in = 96 px and 72 pt

• https://toolstud.io/

X Y

D

Some example of screen sizes

iPhone xs, XsPixel 2: 5’’,6’’

Example• D=4.7’’ and AR=16:9, what is the physical size?• Y=X x AR• D= !" + (! %&)" = ! (1 + %&")• ! = *

(+,-./)

• ! = 0.2

(+,+.23/)= 0.2

0.+4= 0.2

".54~2.399 or 5.9cm, or 166 pt ,

• Y = 2.3 x 1.78 ~ 4.199 10.4 cm

• 1 inch = 2.54 cm

Smartphone’s screen size

See: http://screensiz.es/

More on the Aspect Ratio• Since the commercialization of the television in the 1940s, 4:3

or 1.33:1 was the standard aspect ratio • It was also used in the first cinema movies• When the cinema audience numbers dropped, various widescreen formats was proposed (close to 16:9 or 1.78:1), in order to "enhance" the viewing experience and entice more customers

• (1.78-1.33)/1.33 = 1.78/1.33 -1 = 33 % wider

More on the Aspect Ratio• How to display the same image on screens with different Aspect

Ratio?

• The TV solution from 16:9 to 4:3

?

• The goal is to preserve the shape of the objects

• Scale (homothety) 16:9 to 4:3 till same width, center the image and then

add two horizontal bars (letterbox)

More on the Aspect Ratio

More on the Aspect Ratio: 9:16 à 16:9• A common smartphone screen AR is 16:9, well actually 9:16• When displayed on a 16:9 TV two vertical lines are shown to the

left an to the right • This is similar to the letterboxes (they are named pillarbox)

Aspect Ratio and orientation• An image is displayed in portrait mode is taller than it is

wide. • Conversely, a page or image displayed in landscape

mode is wider than it is tall

An aside: Vertical movie

Screen resolution (spatial resolution)• The resolution of the screen is how many pixels are

displayed per inch (how close pixels can be rendered), or pixel density

• Expressed as: Pixels Per Inch (PPI) or Dots Per Inch (DPI)• DPI is more properly referred to printing…• Spans from 50 to 800• For example, • Consider a 4.7’’ screen with AR=16:9 and PPI = 326• The Pixel resolution is (Y and X were computed earlier):• W = Y x PPI = 4.1 x 326 = 1336• H = X x PPI =2.3 x 326 = 750

Question: what is the PPI of thesescreens?

Question: what is the PPI of thesescreens?• We have to know the psychical size!• For example, Iphone 5/S: D = 4.0’’, 640 x 1136 (pixels)• ! = #

(%&'())= +

(%&%.--.))= +/.01 = 1.97’’

• 223 = 456789 :8;<= >> = ?+0

%.@- ~324

Size 4.0 inches, 44.1 cm2 (~60.8% screen-to-body ratio)Resolution 640 x 1136 pixels, 16:9 ratio (~326 ppi density)

Datasheet

What do you think the Screen-to-body ratio is?

PPI and image resolution• In general given an W x H image, we cannot say nothing

about its (spatial) resolution

• This is because spatial resolution depends on the screensize X x Y, where the image will be displayed

Another example• What is the PPI of a Full HD 40’’ screen? (TV)• Full HD = 1920 x 1080 pixels• Pixels along the diagonal = (1920& +1080&) = 4852800

• PPI = +,-&,..+. ~00 (only?)

• Using 4K (3840×2160) àPPI = 110 (in fact, 2160 = 2 x 1080)

• But… Full HD on a 5’’ screen smartphone means

• PPI ~ 440 (much higher)

How big can the PPI be at most?• Can it make sense to trying increase PPI?• Is there any limit to the spatial resolution?• Answer: the human eye has its own maximum resolution,

so that it makes no much sense to go beyond this limit…• And if fact, high PPI screens map one ‘software’ or CSS

pixel to many ‘hardware’ pixels (!)• The Device Pixel Ratio indicates how many hw pixels are

used to render one software pixel (just a copy?) (like,2,3,4)

An aside• Roughly, two points are perceived separately if

they hit two different ‘cells’ on the retina, separated by a not hit cell, this occurs for two rays forming no less than a critical angle

• Rays should came from an object not closer than F=15-20 cm (focus)

• The minumum distance among the points is about 100 μm from each other

• Now, 100 μm = 0.01cm• 1’=2.54cm à• 2.54/0.01 = 254 dots are seen as separated at

most…• Roughly, PPI>300 makes no sense

• Retina© resolution hits the eye resolution limit

Retina

An example (iphone 5/s)

Website for mobile phones• Web today: document , SaaS• Web technologies:

• Client-side or front-end (HTML/CSS/JS)• Server-side or Backend

• Can a “web-site” look like an app? • Desktop apps, yes -à SPA (Single Page Applications)• Mobile -à yes

A simple example--- = block__ = inline

HTML• Use the w3c school site for a list and tutorial in html• A list of all tags can be found here:• https://www.w3schools.com/tags/ref_byfunc.asp

A simple CSS3 example (style)

CSS Box model

widthheight eg. 100px, or % wrt container..And much more..

Content

Layout

CSS allows for define how to layout box.CSS template (from frameworks, e.g., BS 4 , 3WCSS,) are more roboust

CSS selectors

Media-query• Allows to use disserent CSS styles depending on the

’media’

Content

CSS

screen with mìn-width=..

printer.

Browser rendering processParse HTML Create the DOM tree

DOM = Document Object ModelEach HTML tag (detected via parsing) is mapped to an object (DOM tree)HTML describe only the content (e.g., this is a heading, this is a paragraph, etc..)

Parse CSS Detect CSS rulesDetect layout directives

CSS = Cascade Style SheetsDefine how to display the content (e.g., which font, colors, and many more…) ofHTML elementsRule: which style apply to which element(s) (CSS rules)

hmtl

headbody

h1 p

h1 à {properties}p à {properties}

hmtl

headbody

ph1

CSS properties are ‘attached’ to DOM objectsThe result is a render tree

Layout the render tree• Once the render tree is created, it is rendered according to

a layout process • This process assigns a ‘physical’ position to every render

element• Positions are computed based on the available viewport,

namely the available displaying area on the screen

Normal layout flow • Each element is rendered as a block or inline• Normal flow (default rendering) • Blocks appear stacked up on top of one another (top to bottom), they

appear vertically• Inlines appear one after the other (left to right)

Rendering process• Each HTML element is render inside a box (CSS box model)• The dimensions of a box are computed wrt to the parent box (container)• The topmost container size is the viewport• It is the size of the whole available area where to display the page

Layout on a mobile device• A web site rendered using the real device viewport, may

look bad or break; rendering is done using a wider virtual viewport, an let a user see all the page, pan and zoom to see different areas of the page.

• http://matanich.com/test/viewport-width

Setting the viewport• Most of the broswers support the viewport meta tag• It allows to set the view port for the rendering process• In particular, it allows to pass the real current viewport, so that

redering is done on the real size• A tag as simple as the following one solves the previous problem

Some example of viewports

Credits: mediagenesis See also: https://www.gsmarena.com/320--1280

Dealing with different viewports• At a high level there are two main solutions to deal with different

viewport or media characteristics

1. Create a CSS for every different screen (media). . In general it needs server side processing (used in CMS sw)

2. Define per-screen CSS on the client side: responsive web.

• The proper layout is determined through CSS media query

• One can define its on CSS layout or use a framework

• For example, the BS4 framework defines media 4 breakpoitns

BS4 Breakpoints