![Page 1: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/1.jpg)
WEB TECHNOLOGIES FOR MOBILE APPSRoberto Beraldi
![Page 2: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/2.jpg)
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)
![Page 3: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/3.jpg)
Web browser Web server
HTTP, C/S
Web page
’Execute’Web page
Static web (no server-side computation)
Web server is just a ‘dispatcher’
![Page 4: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/4.jpg)
«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
![Page 5: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/5.jpg)
Browser as a VM
• Single thread• Event-driven• Web worker (HMTL5)
Sandbox (restrict device access)Secure mechanism (JS is external, untrusted code…)
![Page 6: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/6.jpg)
JS and multithreading• Web worker:
• Allows to run parallel JS code• Only one MAIN thread that access to DOM
• Service worker:• Much more flexible
![Page 7: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/7.jpg)
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
![Page 8: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/8.jpg)
Hybrid app architecture
OS/MW
Starter
Web rendering engine(e.g.,webkit)
Web page
HW
Native codeJSàNative mapping
(device specific)
APPLICATION
![Page 9: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/9.jpg)
![Page 10: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/10.jpg)
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)
![Page 11: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/11.jpg)
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
![Page 12: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/12.jpg)
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/)
![Page 13: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/13.jpg)
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
![Page 14: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/14.jpg)
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
![Page 15: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/15.jpg)
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
![Page 16: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/16.jpg)
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
![Page 17: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/17.jpg)
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
![Page 18: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/18.jpg)
Some example of screen sizes
iPhone xs, XsPixel 2: 5’’,6’’
![Page 19: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/19.jpg)
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
![Page 20: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/20.jpg)
Smartphone’s screen size
See: http://screensiz.es/
![Page 21: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/21.jpg)
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
![Page 22: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/22.jpg)
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)
![Page 23: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/23.jpg)
More on the Aspect Ratio
![Page 24: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/24.jpg)
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)
![Page 25: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/25.jpg)
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
![Page 26: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/26.jpg)
An aside: Vertical movie
![Page 27: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/27.jpg)
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
![Page 28: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/28.jpg)
Question: what is the PPI of thesescreens?
![Page 29: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/29.jpg)
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?
![Page 30: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/30.jpg)
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
![Page 31: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/31.jpg)
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)
![Page 32: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/32.jpg)
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)
![Page 33: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/33.jpg)
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
![Page 34: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/34.jpg)
An example (iphone 5/s)
![Page 35: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/35.jpg)
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
![Page 36: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/36.jpg)
A simple example--- = block__ = inline
![Page 37: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/37.jpg)
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
![Page 38: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/38.jpg)
A simple CSS3 example (style)
![Page 39: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/39.jpg)
CSS Box model
widthheight eg. 100px, or % wrt container..And much more..
Content
![Page 40: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/40.jpg)
Layout
CSS allows for define how to layout box.CSS template (from frameworks, e.g., BS 4 , 3WCSS,) are more roboust
![Page 41: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/41.jpg)
CSS selectors
![Page 42: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/42.jpg)
Media-query• Allows to use disserent CSS styles depending on the
’media’
Content
CSS
screen with mìn-width=..
printer.
![Page 43: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/43.jpg)
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
![Page 44: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/44.jpg)
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
![Page 45: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/45.jpg)
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)
![Page 46: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/46.jpg)
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
![Page 47: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/47.jpg)
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
![Page 48: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/48.jpg)
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
![Page 49: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/49.jpg)
Some example of viewports
Credits: mediagenesis See also: https://www.gsmarena.com/320--1280
![Page 50: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/50.jpg)
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
![Page 51: WEB TECHNOLOGIES FOR MOBILE APPSberaldi/MACC_19/02_Bootstrap_OK_09.pdf · Detect CSS rules Detect layout directive s CSS = Cascade Style Sheets Define how to display the content (e.g.,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dd335ccc393316e50fb28/html5/thumbnails/51.jpg)
BS4 Breakpoints