Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
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