[2015/2016] 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 webtechnologies 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 directlywiththe database
à do not even think about JDBC, drivers,etc!
àThey pass through an applicationserver and communicate via:
• standard HTTP requests forHTML content (eg PHP)
• REST-fullservices (XML, JSON, etc.)
• SOAP

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

HTML 5
HTML5 will be the new standard for HTML
HTML5 is still a work in progress
W3Cfinal recomendation: 2020
Top browsers supportmany (not all)of the new HTML5 elements
http://mobilehtml5.org
http://caniuse.com

What is HTML5?
HTML5
Markup JavaScript
CSS3Multimedia

The minimal HTML5 page
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
…
</body>
</html>

Roadmap
• Intro
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• 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 pageor 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 commandbutton 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 figure
<mark> marked/highlighted text
<time> a date/time
<wbr>Definesa possible line-break

Custom Data Attributes
Can be used to add metadataabout any element within an
HTML5 page
They are ignored by the validatorfor HTML5 documents
They all startwith the data- pattern
They can be read by any browser using JavaScriptviathe
getAttribute() method

Forms
Main Goal: reduce the JavaScriptfor validation and format
management
Example:

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 datepickers
<input type="month"> for months
<input type="week"> for weeks
<input type="time"> for timestamps
<input type="datetime"> for precisetimestamps
<input type="datetime-local"> for local dates and times

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

Form Field Attributes
Autofocus
– Supportfor placingthe focus on a specific form element
<input type="text“ autofocus>
Placeholder
– Supportfor placingplaceholder text inside a form field
<input type="text“ placeholder=“your name”>

Roadmap
• Intro
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas& SVG

Audio
<audio> : a standardway to embed an audio file on a web page
<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Not Supported
</audio>
Multiplesources à the browser will use the firstrecognized
format

Audio JavaScript API
HTML5provides 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 standardway to embed a video file 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>
Multiplesources à the browser will use the firstrecognized
format

Video JavaScript API
HTML5provides a set of Javascript APIs for interactingwith 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 havea direct link to the
MP4 file of the YouTube video
If you havejust 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 datain key/valuepairs
it is tied to a specific domain/app
persists across browser sessions
SessionStorage
stores datain key/valuepairs
it is tied to a specific domain/app
data is erased when a browser session ends
We will havea dedicated
lecture to offline data
storage on mobile devices

Offline Data
WebSQL Database
relationalDB
support for tables creation,insert, update,…
transactional
tied to a specific domain/app
persists across browser sessions
Its evolutionis called IndexedDB, but it is actuallynot fully
supported yet in iOS

[2015/2016] HTML5 and CSS3 Refresher

Geolocalization
Gets Latitudeand Longitude from the user’s browser
There is also a watchPositionmethod wich calls a JS function
every time the user moves
We will havea dedicated lecture to
geolocalizationon 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 communicationbetween devices and
server
Specificallysuited for
chat,videogames, drawings sharing, real-timeinfo
Requires a Web Socket Serverto handle the protocol

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 à increased networktraffic
- AJAX requests generally havea small payloadand relatively
high amountof httpheaders (wasted bandwith)

Canvas & SVG
Canvas & SVG allowyou to creategraphics inside the browser
http://bit.ly/Ie4HKu

Canvas & SVG
Canvas
draws 2D graphics, on the fly
you use JavaScriptto draw on the canvas
rendered pixel by pixel
example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path
SVG
describes 2D graphics in XML
every element is availablewithin theSVG DOM
JavaScriptevent handlers for an element
example:
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_circle

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

Intro
Let’s imagine FlipboardwithoutCSS3

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

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

Inheritance
If an HTML elementB is nestedinto anotherelementA
àB inheritsthe style of A unlessB has an explicit style
definition
body {
background-color: red;
}
div {
background-color: green;
}

Combining Selectors
Selectors can be combined
h1, h2, h3 {
background-color: red;
}

Lists
ul {
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 backgroundof any element
div {
background: url(img.png), url(img2.png);
background-size: 80px, 60px;
background-repeat: no-repeat, no-repeat;
background-origin: content-box, top left;
}
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);
}
RGBA = RGB + opacity

Gradients
They can be used in every place you can use an image
div {
background: -webkit-gradient(linear, right top,
left bottom, from(red), to(green));
}
linear à the type of gradient (also radial,or repeating-linear)
right-top à startof the gradient
left-bottom à end of the gradient
from à startingcolor
to à finalcolor

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

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

Selectors
Classical waysto 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 parentis a <div>
• div+p à all <p> elements that are placed immediatelyafter
<div>
• [target] à all elements witha target attribute
• [target=_blank]à all elements with target= "_blank“
• p:first-childà every<p> element that is the firstchild of its
parent

Some selectors introduced in CSS3
• a[href^="https"]à every <a> element whose src attribute
value begins with "https”
• a[href$=".pdf"]à every <a> element whose src attributevalue
ends with ".pdf”
• a[href*=“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 thatis the second
child of its parent,counting from the last child
• :not(p) à every element thatis 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 havemore control on the layoutof 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;
}

The Display Property
It specifies if and how an element is displayed
div {
display: none;
}
The element willbe hidden, and the page will be displayed as if the
element is not in the DOM

The Display Property
Other usual values:
block
• a block element is an element thattakes up the full width
available,and has a line break before and afterit
inline
• an inline element only takes up as much width as necessary
• it can containonly otherinline elements
inline-block
• the element is placed as an inline element (on the same line
as adjacentcontent), but it behaves as a block element
– you can set width and height, top and bottom margins and paddings

The visibility Property
It specifies if an element should be visible or hidden
div.hidden {
visibility: hidden;
}
The element willbe hidden, but still affectingthe layout
It can also be set to
visible, collapse (only for tables), inherit

Flex Box
It helps in stylingelements to be arrangedhorizontallyor
vertically
box:
• a new value for the display property
• a new propertybox-orient
#div {
display: box;
box-orient: horizontal;
}

Flex Box main elements
display: box
opts an element and its immediate children into the flexible
box model
box-orient
Values: horizontal| vertical| inherit
How should the box's childrenbe 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 alignmentof 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 flexible
à 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

Static Positioning
Elements will stackone on top of the next
http://bit.ly/I8cEaF

Relative Positioning
Elements behaveexactly 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 coordinatesystem for child elements

Absolute Positioning
an absolutely positioned element is removed from the normal flow
it won’t affector be
affected by any other
element in the flow

Fixed Positioning
shares all the rules of an absolutely positioned element
a fixed element does not scroll with the document

Float
A floated element willmove as far to the left or right as it can
Elements are floated only horizontally
The floatCSS propertycan acceptone of 4 values:
left, right,none, and inherit

Fonts
Before CSS3,web designers had to use fonts thatwere already
installed on the user's device
With CSS3,web designers can use whateverfont 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 foran HTML element, refer to the name of the
font (NAME) throughthe font-familyproperty
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 thatlets an element
change shape, size, position,…
You can transform yourelements 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 startwhen the specified CSS propertychanges
value

Transition syntax
A transitioncontains 4 properties:
• property
– the name of the CSS property the transition effect is for (can be all)
• duration
– how many seconds (or milliseconds)thetransition 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: 100%;
}
$(‘.imageThumbnail’).addClass(‘zoomed’);

Animations
An animationis an effect thatlets an element graduallychange
from one style to another
You can change style in loop, repeating, etc.
To bind an animationto 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 animationis definedin a keyframe
It splits the animationinto parts, and assign a specific style to
each part
The various steps within an animationare givenas percentuals
0% à beginningofthe 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;}
}
result in
http://goo.gl/kFZrLs

Animation Properties
http://bit.ly/IrpUnX

Transitions VS Animations
• Trigger
– Transitions mustbe bound to a CSS property change
– Animations startautonomously
• States
– Transitions havestartand end states
– Animations can havemultiplestates
• Repeats
– Transitions can be perfomed once for each activation
– Animations can be looped

Media Queries
They allow you to to change style based on specific conditions
For example, theycan be about
• device’s displaysize
• orientationof the device
• Resolution of the display
• ...

Media Types
Media Queries are based on Media Types
A media type is a specificationof the actualmedia thatis being
used to access the page
Examples of media types include
• screen: computerscreens
• print:printed document
• braille: forBraille-based devices
• tv: for televisiondevices

Media Types
There are two main waysto specify a media type:
• <link> in the HTML page
<link rel=“stylesheet”
href=“style.css” media=“screen” />
• @media within the CSS file
@media screen {
div { color: red; }
}

Media Queries
A media query is a boolean expression
The CSSassociated withthe 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 explicitlyignore a specific 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

LAB
1. develop a simple HTML pagefor showing a list of
products in Loveitaly
– HTML, CSS
2. develop a simple HTML pageshowing the details about a
specific product in Loveitaly

[2015/2016] HTML5 and CSS3 Refresher

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to [2015/2016] HTML5 and CSS3 Refresher (20)

More from Ivano Malavolta (20)

Recently uploaded (20)

[2015/2016] HTML5 and CSS3 Refresher