HTML5 and CSS3 refresher

Gran Sasso Science Institute
Ivano Malavolta
HTML5 & CSS3 refresher

Roadmap
Anatomy of a web app
HTML5
CSS3

What is a Web App?
A software built with web technologies that is accessible via a mobile
browser

The browser may be either
the standard device browser
or an embedded browser
(Hybrid app)

Data
Usually mobile apps do not talk directly with the database

à do not even think about JDBC, drivers, etc!
à They pass through an application server and communicate via:
•  standard HTTP requests for HTML content (eg PHP)
•  REST-full services (XML, JSON, etc.)
•  SOAP

Data
•  Data can be stored in any classical way:
– Relational
– Graph
– Key-value
– Document-based

Latest trend à backend-as-a-service

BaaS
1.  Developers build a visual model of
their DB

2.  The service generates APIs and
client-side libraries(compatible
with Android, Windows Phone,
etc.)
3.  The data produced/consumed in
the app can be pushed/pulled to
their DB
–  Communication is handled via
REST-based APIs

Example of Baas software: BaasBox

Main features:
•  User management
–  ACL
–  Friendships
–  Authentication via Facebook and Google+
•  Document-based data manegement (via OrientDB)
•  Assets management (fotos, documents, or ﬁles)
•  Push notiﬁcations
The “Box” in BaasBox means that all the features
are in a standalone server, just like a box.

No Application Server, no Database Server, just
a JVM and nothing more
Rest API
Web
dashboard
http://www.baasbox.com/

HTML 5
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Ofﬂine Data
•  Geolocalization
•  Web Sockets
•  Canvas & SVG

HTML 5

HTML5 will be the new standard for HTML

HTML5 is still a work in progress

W3C ﬁnal recomendation: 2020

Top browsers support many (not all) of the new HTML5 elements
http://mobilehtml5.org
http://caniuse.com

What is HTML5?
HTML5
Markup
JavaScript
CSS3
Multimedia

The minimal HTML5 page
<!DOCTYPE
html>

<html>

<head>

<title>Title</title>

</head>

<body>

…

</body>

</html>

Roadmap
•  Intro
•  Forms
•  Web Sockets
•  Canvas & SVG

New Structural Tags
Main Goal: separate presentation from content

•  Poor accessibility
•  Unnecessary complexity
•  Larger document size

Most of the presentational features from earlier versions of
HTML are no longer supported

New Structural Tags
<header> header region of a page or section

<footer> footer region of a page or section

<nav> navigation region of a page or section

<section> logical region of a page

<article> a complete piece of content

<aside> secondary or related content

New Structural Tags
http://bit.ly/JCnuQJ

Other Structural Tags
<command> a command button that a user can invoke
<details> additional details that the user can view or hide
<summary> a visible heading for a <details> element
<meter> an amount within a range
<progress> shows real-time progress towards a goal
<figure> self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<figcaption> caption of a ﬁgure
<mark> marked/highlighted text
<time> a date/time
<wbr>Deﬁnes a possible line-break

Custom Data Attributes
Can be used to add metadata about any element within an
HTML5 page

They are ignored by the validator for HTML5 documents

They all start with the data- pattern

They can be read by any browser using Javascript via the
getAttribute() method

Forms
Main Goal: reduce the Javascript for validation and format
management
Example:

Form Input Types
Form input types degrade gracefully
à Unknown input types are treated as text-type
http://bit.ly/I65jai

Form Input Types
<input type="search"> for search boxes
<input type="number"> for spinboxes
<input type="range"> for sliders
<input type="color"> for color pickers
<input type="tel"> for telephone numbers
<input type="url"> for web addresses
<input type="email"> for email addresses
<input type="date"> for calendar date pickers
<input type="month"> for months
<input type="week"> for weeks
<input type="time"> for timestamps
<input type="datetime"> for precise timestamps
<input type="datetime-local"> for local dates and times

Form Field Attributes
Autofocus
–  Support for placing the focus on a speciﬁc form element
<input type="text“ autofocus>
Placeholder
–  Support for placing placeholder text inside a form ﬁeld
<input type="text“ placeholder=“your name”>

Roadmap
•  Intro
•  Forms
•  Web Sockets
•  Server-Sent Events
•  Canvas & SVG

Audio
<audio> : a standard way to embed an audio ﬁle on a web page

<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Not Supported
</audio>
Multiple sources à the browser will use the ﬁrst recognized
format

Audio Javascript API
HTML5 provides a set of Javascript APIs for interacting with an
audio element

For example:

play() pause() load() currentTime ended
volume…

à http://www.w3.org/wiki/HTML/Elements/audio

Video
<video> : a standard way to embed a video ﬁle on a web page

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Not Supported
</video>
Multiple sources à the browser will use the ﬁrst recognized
format

Video Javascript API
HTML5 provides a set of Javascript APIs for interacting with a
video element

For example:

play() pause() load() currentTime ended
volume…

à http://www.w3.org/wiki/HTML/Elements/video

A note on YouTube videos
<video> works only if you have a direct link to the
MP4 ﬁle of the YouTube video

If you have just a link to the YouTube page of your video,
simply embed it in your page

<iframe width="560" height="315" src="http://
www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0"
allowfullscreen></iframe>

Offline Data
LocalStorage

stores data in key/value pairs

it is tied to a specific domain/app

persists across browser sessions

SessionStorage

stores data in key/value pairs

it is tied to a specific domain/app

data is erased when a browser session ends

Ofﬂine Data
WebSQL Database

relational DB

support for tables creation, insert, update, …

transactional

tied to a speciﬁc domain/app

persists across browser sessions

Its evolution is called IndexedDB, but it is actually not supported
by most mobile browsers

Ofﬂine data
Mobile browsers compatibility matrix
We will have a dedicated lecture to ofﬂine data
storage on mobile devices

Geolocalization
Gets Latitude and Longitude from the user’s browser

There is also a watchPosition method wich calls a JS function
every time the user moves

We will have a dedicated lecture to
geolocalization on mobile devices

Example
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log(‘no geolocalization’);
}
}
function showPosition(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
}

WebSockets
Bidirectional, full-duplex communication between devices and
server

Speciﬁcally suited for

chat, videogames, drawings sharing, real-time info

Requires a Web Socket Server to handle the protocol

WebSockets - Overview
1.  Client notiﬁes websocket server (EventMachine) of an event,
giving ids of recipients
2.  The server notiﬁes all the active clients (subscribed to that type
of event)
3.  Clients process event

when given recipient Id

matches the client’s one
http://bit.ly/Ixcupi

Alternative - Polling via AJAX
+ Near real-time updates (not purely real-time)
+ easy to implement
+ no new technologies needed

-  they are requested from the client and cause increased
network trafﬁc
-  AJAX requests generally have a small payload and relatively
high amount of http headers (wasted bandwith)

Canvas & SVG
Canvas & SVG allow you to create graphics inside the browser
We will have a dedicated
lecture to canvas & SVG
on mobile devices
http://bit.ly/Ie4HKu

Canvas & SVG
Canvas

draws 2D graphics, on the ﬂy

you use Javascript to draw on the canvas

rendered pixel by pixel

SVG

describes 2D graphics in XML

every element is available within the SVG DOM

JavaScript event handlers for an element

Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries

Intro
Let’s imagine Flipboard without CSS3

CSS3 Main Drivers
Simplicity
–  less images
–  less markup
–  less Javascript
–  less Flash
Better performance
–  fewer HTTP requests
Better Search Engine Placement
–  text as real text, not images or Flash
–  speed

Basics
Generic Syntax:

selector {
property: value;
property2: value2, value3;
...
}

Inheritance
If an HTML element B is nested into another element A
à B inherits the style of A unless B has an explicit style
deﬁnition

body {
background-color: red;
}
div {
background-color: green;
}

Combining Selectors
Selectors can be combined

h1, h2, h3 {
background-color: red;
}

Lists
div {
list-style-image: url(image.png);
list-style-position: inside;
list-style-style: circle;
}

Position
inside | outside
Style
disc | circle
square | decimal
lower-roman |
upper-roman |
lower-alpha |
upper-alpha |
none

Backgrounds
You can style a background of any element

div {
background:url(img.png), url(img2.png);
background-size:80px 60px;
background-repeat:no-repeat;
background-origin:content-box;
}

repeat
no-repeat | repeat
repeat-x | repeat-y
origin
top left | top center | top right | center left
| border-box | content-box etc.

Background & Colors
div {
background-color: blue;
background-color: rgba(0, 0, 255, 0.2);
background-color: hsla(240, 100%, 50%, 0.2);
}

RGBA = RGB + opacity
HSLA = HSL + opacity
HSL
hue
saturation
lightness

Gradients
They can be used in every place you can use an image

div {
background: -webkit-gradient(linear, right top,
left bottom, from(red), green));
}
linear à the type of gradient (also radial, or repeating-linear)
right-top à start of the gradient
left-bottom à end of the gradient
from à starting color
to à ﬁnal color

Text
p {
color: grey;
letter-spacing: 5px;
text-align: center;
text-decoration: underline;
text-indent: 10px;
text-transform: capitalize;
word-spacing: 10px;
}
text-align
left | right
center | justify
Text-decoration
none
underline
overline
line through
text-transform
none | capitalize |
lowercase | uppercase

Text Effects
p {
text-shadow: 2px 10px 5px #FF0000;
text-overflow: ellipsis;
word-wrap:break-word;
}
2px à horizontal shadow
10px à vertical shadow
5px à blur distance
#FF0000 à color

Selectors
Classical ways to select elements in CSS2:

•  by type
a { color: red; }

•  by id
#redLink { color: red; }
•  by class

.redLink { color: red; }

Other Selectors from CSS1 & CSS2
•  div p à all <p> elements inside a <div>
•  div>p à all <p> elements where the parent is a <div>
•  div+p à all <p> elements that are placed immediately after
<div>
•  [target] à all elements with a target attribute
•  [target=_blank] à all elements with target= "_blank“
•  p:ﬁrst-child à every <p> element that is the ﬁrst child of its
parent

Some selectors introduced in CSS3
•  a[src^="https"] à every <a> element whose src attribute
value begins with "https”
•  a[src$=".pdf"] à every <a> element whose src attribute value
ends with ".pdf”
•  a[src*=“mobile"] à every <a> element whose src attribute
value contains the substring “mobile“
•  p:nth-child(2) à every <p> element that is the second child of
its parent
•  p:nth-last-child(2) à every <p> element that is the second
child of its parent, counting from the last child
•  :not(p) à every element that is not a <p> element

The Box Model
http://www.adamkaplan.me/grid/

Tip

Tells the browser not to include borders and padding in the
width of your content

à  you have more control on the layout of your app

Tip

Borders & dimensions
div {
width: 100px;
height: 40px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px red;
}

Images as borders
div {
border-image:url(border.png) 30 30 round;
}

The Display Property
It speciﬁes if and how an element is displayed

div {
display: none;
}
The element will be hidden, and the page will be displayed as if the
element is not there

The Display Property
Other usual values:

block
•  a block element is an element that takes up the full width
available, and has a line break before and after it

inline
•  an inline element only takes up as much width as necessary
•  it can contain only other inline elements

inline-block
•  the element is placed as an inline element (on the same line
as adjacent content), but it behaves as a block element
–  you can set width and height, top and bottom margins and paddings

The visibility Property
It speciﬁes if an element should be visible or hidden

div.hidden {
visibility: hidden;
}
The element will be hidden, but still affect the layout
It can also be set to
visible, collapse, inherit

Flex Box
It helps in styling elements to be arranged horizontally or
vertically
box:
•  a new value for the display property
•  a new property box-orient

#div {
display: box;
box-orient: horizontal;
}

Flex Box main elements
display: box

opts an element and its immediate children into the ﬂexible
box model

box-orient

Values: horizontal | vertical | inherit

How should the box's children be aligned?

box-direction

Values: normal | reverse | inherit

sets the order in which the elements will be displayed

box-pack

Values: start | end | center | justify

Sets the alignment of the box along the box-orient axis

box-pack: end;

box-align

Values: start | end | center | baseline | stretch

Sets how the box's children are aligned in the box
box-align: center;

Flex Box Children

by default child elements are not ﬂexible

à their dimension is set according to their width
box-flex can be set to any integer
It sets how a child element occupy the
box’s space

#box1 {
width: 100px;
}
#box2 {
box-flex: 1;
}
#box3 {
box-flex: 2;
}

Positioning
•  Static
•  Relative
•  Absolute
•  Fixed
•  Inherit

Static Positioning
Elements will stack one on top of the next

http://bit.ly/I8cEaF

Relative Positioning
Elements behave exactly the same
way as statically positioned elements

we can adjust a relatively positioned
element with offset properties:
top, right, bottom, and left

Relative Positioning
It is possible to create a coordinate system for child elements

Absolute Positioning
an absolutely positioned element is removed from the normal ﬂow

it won’t affect or be
affected by any other
element in the ﬂow

Fixed Positioning
shares all the rules of an absolutely positioned element

a ﬁxed element does not scroll with the document

Float

A floated element will move as far to the left or right as it can

Elements are floated only horizontally

The float CSS property can accept one of 4 values:
left, right, none, and inherit

Fonts
Before CSS3, web designers had to use fonts that were already
installed on the user's device

With CSS3, web designers can use whatever font they like

@font-face {
font-family: NAME;
src: url(Dimbo.ttf);
font-weight: normal;
font-style: normal;
}

font-style
normal
italic
oblique
font-weight
normal
bold
100
200
…

Fonts Usage
To use the font for an HTML element, refer to the name of the
font (NAME) through the font-family property
div {
font-family: NAME;
}

Some Fonts Sources...
www.dafont.com
www.urbanfonts.com
www.losttype.com

Visual Effects
Three main mechanisms:

1.  Transforms (both 2D and 3D)
2.  Transitions
3.  Animations

Transforms
A transform is an effect that lets an element
change shape, size, position, …

You can transform your elements using 2D or 3D transformations
http://bit.ly/IroJ7S

Transforms
http://bit.ly/IrpUnX

Transitions
They are used to add an effect when changing from one style to
another

The effect can be gradual

The effect will start when the speciﬁed CSS property changes
value

Transition syntax
A transition contains 4 properties:

•  property
–  the name of the CSS property the transition effect is for (can be all)
•  duration
–  how many seconds (or milliseconds) the transition effect takes to
complete
•  timing-function
–  linear, ease, ease-in, ease-out, ease-in-out
•  delay
–  when the transition effect will start

Example
.imageThumbnail {
width; 200px;
transition: all ease-in 3s;
}
.zoomed {
position: absolute;
left: 0px;
top: 0px;
width: 480px;
}
$(‘.imageThumbnail’).addClass(‘zoomed’);

Animations
An animation is an effect that lets an element gradually change
from one style to another

You can change style in loop, repeating, etc.

To bind an animation to an element, you have to specify at least:
1.  Name of the animation
2.  Duration of the animation
div {
animation: test 5s ease-in;
}

Animation Definition
An animation is defined in a keyframe

It splits the animation into parts, and assign a specific style to
each part

The various steps within an animation are given as percentuals

0% à beginning of the animation (from)
100% à end of the animation (to)

Example
@keyframes test{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
results in
http://goo.gl/kFZrLs

Animation Properties
http://bit.ly/IrpUnX

Transitions VS Animations
•  Trigger
–  Transitions must be bound to a CSS property change
–  Animations start autonomously
•  States
–  Transitions have start and end states
–  Animations can have multiple states
•  Repeats
–  Transitions can be perfomed once for each activation
–  Animations can be looped

Media Types
Media Queries are based on Media Types

A media type is a speciﬁcation of the actual media that is being
used to access the page

Examples of media types include
•  screen: computer screens
•  print: printed document
•  braille: for Braille-based devices
•  tv: for television devices

Media Types
There are two main ways to specify a media type:

•  <link> in the HTML page

<link rel=“stylesheet”
href=“style.css” media=“screen” />
•  @media within the CSS ﬁle

@media screen {
div { color: red; }
}

Media Queries
They allow you to to change style based on speciﬁc conditions

For example, they can be about
•  device’s display size
•  orientation of the device
•  Resolution of the display
•  ...

Media Queries
A media query is a boolean expression

The CSS associated with the media query expression is applied
only if it evaluates to true

A media query consists of
1.  a media type
2.  a set of media features

@media screen and orientation: portrait

The Full Media Feature List
http://slidesha.re/I5oFHZ

The AND operator
You can combine multiple expressions by using the and operator

@media screen and (max-device-width: 480px){
/* your style */
}

The COMMA operator
The comma keyword acts as an or operator

@media screen and (color),
handheld and (color) {
/* your style */
}

The NOT operator
You can explicitly ignore a speciﬁc type of device by using the not
operator

@media not (width:480px) {
/* your style */
}

Examples
Retina Displays
@media only screen and -webkit-min-device-pixel-ratio: 2
iPad in landscape orientation
@media only screen and
(device-width: 768px) and (orientation: landscape)
iPhone and Android devices
@media only screen and
(min-device-width: 320px) and (max-device-width: 480px)

References

http://www.w3schools.com
https://developer.mozilla.org/en-US/docs/Web/CSS

+ 39 380 70 21 600
Contact
Ivano Malavolta |
Gran Sasso Science Institute
iivanoo
ivano.malavolta@univaq.it
www.ivanomalavolta.com

HTML5 and CSS3 refresher

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to HTML5 and CSS3 refresher (20)

More from Ivano Malavolta (20)

Recently uploaded (20)

HTML5 and CSS3 refresher