SlideShare a Scribd company logo
1 of 113
Download to read offline
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)
Anatomy of a Web 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
Roadmap
Anatomy of a web app
HTML5
CSS3
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
W3C final 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
CSS3Multimedia
The minimal HTML5 page
<!DOCTYPE	
  html>	
  
<html>	
  
	
  <head>	
  
	
  <title>Title</title>	
  
</head>	
  
	
  <body>	
  
…	
  
</body>	
  
</html>	
  
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  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 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 figure
<mark> marked/highlighted text
<time> a date/time
<wbr>Defines 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
HTML5 & CSS3 refresher for mobile apps
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web Sockets
•  Canvas & SVG
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 specific form element
<input type="text“ autofocus>
Placeholder
–  Support for placing placeholder text inside a form field
<input type="text“ placeholder=“your name”>
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web Sockets
•  Server-Sent Events
•  Canvas & SVG
Audio
<audio> : a standard way 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>
Multiple sources à the browser will use the first recognized
format
Audio Attributes
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 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>
Multiple sources à the browser will use the first recognized
format
Video attributes
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 file 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>
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web Sockets
•  Canvas & SVG
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
Offline Data
WebSQL Database
relational DB
support for tables creation, insert, update, …
transactional
tied to a specific domain/app
persists across browser sessions
Its evolution is called IndexedDB, but it is actually not fully
supported yet in iOS
Offline data
Mobile browsers compatibility matrix
We will have a dedicated lecture to offline data
storage on mobile devices
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web Sockets
•  Canvas & SVG
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);
}
getCurrentPosition()
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web Sockets
•  Canvas & SVG
WebSockets
Bidirectional, full-duplex communication between devices and
server
Specifically suited for
chat, videogames, drawings sharing, real-time info
Requires a Web Socket Server to 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 and cause increased
network traffic
-  AJAX requests generally have a small payload and relatively
high amount of http headers (wasted bandwith)
Roadmap
•  Intro
•  New Structural Tags and Attributes
•  Forms
•  Audio & Video
•  Offline Data
•  Geolocalization
•  Web Sockets
•  Canvas & SVG
Canvas & SVG
Canvas & SVG allow you to create graphics inside the browser
http://bit.ly/Ie4HKu
Canvas & SVG
Canvas
draws 2D graphics, on the fly
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
Anatomy of a web app
HTML5
CSS3
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
–  no Flash
Better performance
–  fewer HTTP requests
Better Search Engine Placement
–  text as real text, not images or Flash contents
–  speed
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
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
definition
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);
}
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), 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 à final 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 throughtext-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
Other Text Properties
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
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:first-child à every <p> element that is the first 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
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
The Box Model
http://www.adamkaplan.me/grid/
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
http://www.adamkaplan.me/grid/
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;
}
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
The Display Property
It specifies 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 specifies 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 (only for tables), 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 flexible
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
Flex Box main elements
box-pack
Values: start | end | center | justify
Sets the alignment of the box along the box-orient axis
box-orient: horizontal;
box-pack: end;
Flex Box main elements
box-align
Values: start | end | center | baseline | stretch
Sets how the box's children are aligned in the box
box-orient: horizontal;
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 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
http://bit.ly/I8cEaF
Relative Positioning
It is possible to create a coordinate system for child elements
http://bit.ly/I8cEaF
Absolute Positioning
an absolutely positioned element is removed from the normal flow
it won’t affect or be
affected by any other
element in the flow
http://bit.ly/I8cEaF
Fixed Positioning
shares all the rules of an absolutely positioned element
a fixed element does not scroll with the document
http://bit.ly/I8cEaF
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
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
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
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
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
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 specified 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: 100%;
}
$(‘.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;}
}
result 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
Roadmap
•  Intro
•  Basics
•  Selectors
•  Box Model
•  Positioning & Floats
•  Fonts
•  Visual Effects
•  Media Queries
Media Types
Media Queries are based on Media Types
A media type is a specification 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 file
@media screen {
div { color: red; }
}
Media Queries
They allow you to to change style based on specific conditions
For example, they can be about
•  device’s display size
•  orientation of the device
•  Resolution of the display
•  ...
Example
http://bit.ly/I5mR1u
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 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

More Related Content

What's hot

[2015/2016] Require JS and Handlebars JS
[2015/2016] Require JS and Handlebars JS[2015/2016] Require JS and Handlebars JS
[2015/2016] Require JS and Handlebars JSIvano Malavolta
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the webIvano Malavolta
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Railscodeinmotion
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint BeastMark Rackley
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsJames Pearce
 
Cartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery TrainingCartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery TrainingShane Church
 
Modern development paradigms
Modern development paradigmsModern development paradigms
Modern development paradigmsIvano Malavolta
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsMark Rackley
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryAlek Davis
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015Matt Raible
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components EverywhereIlia Idakiev
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideMark Rackley
 
Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017Henry Van Styn
 

What's hot (20)

[2015/2016] Require JS and Handlebars JS
[2015/2016] Require JS and Handlebars JS[2015/2016] Require JS and Handlebars JS
[2015/2016] Require JS and Handlebars JS
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Html5 CSS3 jQuery Basic
Html5 CSS3 jQuery BasicHtml5 CSS3 jQuery Basic
Html5 CSS3 jQuery Basic
 
jQuery
jQueryjQuery
jQuery
 
MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Rails
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
 
Cartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery TrainingCartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery Training
 
Modern development paradigms
Modern development paradigmsModern development paradigms
Modern development paradigms
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
 
Web Components
Web ComponentsWeb Components
Web Components
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
 
Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017
 

Viewers also liked

Curso HTML5 - Temario
Curso HTML5 - TemarioCurso HTML5 - Temario
Curso HTML5 - Temariopastilla5
 
DIAPOSITIVAS HTLM Y HTML 5
DIAPOSITIVAS HTLM Y HTML 5DIAPOSITIVAS HTLM Y HTML 5
DIAPOSITIVAS HTLM Y HTML 5jeilobe
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)Mediacurrent
 
WordPress for the Humanities: Developing a Digital History Course
WordPress for the Humanities: Developing a Digital History CourseWordPress for the Humanities: Developing a Digital History Course
WordPress for the Humanities: Developing a Digital History Coursemichaeljkramer
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of WebMirza Asif
 
Local data storage for mobile apps
Local data storage for mobile appsLocal data storage for mobile apps
Local data storage for mobile appsIvano Malavolta
 
Mobile geolocation and mapping
Mobile geolocation and mappingMobile geolocation and mapping
Mobile geolocation and mappingIvano Malavolta
 
Apache Cordova APIs version 4.3.0
Apache Cordova APIs version 4.3.0 Apache Cordova APIs version 4.3.0
Apache Cordova APIs version 4.3.0 Ivano Malavolta
 
The Mobile ecosystem, Context & Strategies
The Mobile ecosystem, Context & StrategiesThe Mobile ecosystem, Context & Strategies
The Mobile ecosystem, Context & StrategiesIvano Malavolta
 
PhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device CapabilitiesPhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device CapabilitiesIvano Malavolta
 
Mobile Apps Development: Technological strategies and Monetization
Mobile Apps Development: Technological strategies and MonetizationMobile Apps Development: Technological strategies and Monetization
Mobile Apps Development: Technological strategies and MonetizationIvano Malavolta
 
UI Design Patterns for Mobile Apps
UI Design Patterns for Mobile AppsUI Design Patterns for Mobile Apps
UI Design Patterns for Mobile AppsIvano Malavolta
 
Mobile Applications Development - Lecture 0 - Spring 2013
Mobile Applications Development - Lecture 0 - Spring 2013Mobile Applications Development - Lecture 0 - Spring 2013
Mobile Applications Development - Lecture 0 - Spring 2013Ivano Malavolta
 
[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile apps[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile appsIvano Malavolta
 
[2015/2016] Modern development paradigms
[2015/2016] Modern development paradigms[2015/2016] Modern development paradigms
[2015/2016] Modern development paradigmsIvano Malavolta
 
Mobile Applications Development - Lecture 0
Mobile Applications Development - Lecture 0Mobile Applications Development - Lecture 0
Mobile Applications Development - Lecture 0Ivano Malavolta
 
Design patterns for mobile apps
Design patterns for mobile appsDesign patterns for mobile apps
Design patterns for mobile appsIvano Malavolta
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 

Viewers also liked (20)

Curso HTML5 - Temario
Curso HTML5 - TemarioCurso HTML5 - Temario
Curso HTML5 - Temario
 
DIAPOSITIVAS HTLM Y HTML 5
DIAPOSITIVAS HTLM Y HTML 5DIAPOSITIVAS HTLM Y HTML 5
DIAPOSITIVAS HTLM Y HTML 5
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
 
WordPress for the Humanities: Developing a Digital History Course
WordPress for the Humanities: Developing a Digital History CourseWordPress for the Humanities: Developing a Digital History Course
WordPress for the Humanities: Developing a Digital History Course
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Local data storage for mobile apps
Local data storage for mobile appsLocal data storage for mobile apps
Local data storage for mobile apps
 
Mobile geolocation and mapping
Mobile geolocation and mappingMobile geolocation and mapping
Mobile geolocation and mapping
 
Apache Cordova APIs version 4.3.0
Apache Cordova APIs version 4.3.0 Apache Cordova APIs version 4.3.0
Apache Cordova APIs version 4.3.0
 
The Mobile ecosystem, Context & Strategies
The Mobile ecosystem, Context & StrategiesThe Mobile ecosystem, Context & Strategies
The Mobile ecosystem, Context & Strategies
 
PhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device CapabilitiesPhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device Capabilities
 
Mobile Apps Development: Technological strategies and Monetization
Mobile Apps Development: Technological strategies and MonetizationMobile Apps Development: Technological strategies and Monetization
Mobile Apps Development: Technological strategies and Monetization
 
PhoneGap: Local Storage
PhoneGap: Local StoragePhoneGap: Local Storage
PhoneGap: Local Storage
 
UI Design Patterns for Mobile Apps
UI Design Patterns for Mobile AppsUI Design Patterns for Mobile Apps
UI Design Patterns for Mobile Apps
 
Mobile Applications Development - Lecture 0 - Spring 2013
Mobile Applications Development - Lecture 0 - Spring 2013Mobile Applications Development - Lecture 0 - Spring 2013
Mobile Applications Development - Lecture 0 - Spring 2013
 
[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile apps[2015/2016] Local data storage for web-based mobile apps
[2015/2016] Local data storage for web-based mobile apps
 
[2015/2016] Modern development paradigms
[2015/2016] Modern development paradigms[2015/2016] Modern development paradigms
[2015/2016] Modern development paradigms
 
Mobile Applications Development - Lecture 0
Mobile Applications Development - Lecture 0Mobile Applications Development - Lecture 0
Mobile Applications Development - Lecture 0
 
Design patterns for mobile apps
Design patterns for mobile appsDesign patterns for mobile apps
Design patterns for mobile apps
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 

Similar to HTML5 & CSS3 refresher for mobile apps

HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresherIvano Malavolta
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layoutsA brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layoutsTim Wray
 
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Commit University
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
Creating Great Applications in SharePoint 2010 with Silverlight 4
Creating Great Applications in SharePoint 2010 with Silverlight 4Creating Great Applications in SharePoint 2010 with Silverlight 4
Creating Great Applications in SharePoint 2010 with Silverlight 4Boston Area SharePoint Users Group
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User ExperienceMahbubur Rahman
 

Similar to HTML5 & CSS3 refresher for mobile apps (20)

HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Html5
Html5Html5
Html5
 
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layoutsA brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layouts
 
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Html5
Html5Html5
Html5
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Html 5
Html 5Html 5
Html 5
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Web Apps
Web AppsWeb Apps
Web Apps
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
HTML5
HTML5HTML5
HTML5
 
Creating Great Applications in SharePoint 2010 with Silverlight 4
Creating Great Applications in SharePoint 2010 with Silverlight 4Creating Great Applications in SharePoint 2010 with Silverlight 4
Creating Great Applications in SharePoint 2010 with Silverlight 4
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
 

More from Ivano Malavolta

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Ivano Malavolta
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)Ivano Malavolta
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green ITIvano Malavolta
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Ivano Malavolta
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]Ivano Malavolta
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Ivano Malavolta
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Ivano Malavolta
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Ivano Malavolta
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Ivano Malavolta
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Ivano Malavolta
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Ivano Malavolta
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Ivano Malavolta
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Ivano Malavolta
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile developmentIvano Malavolta
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architecturesIvano Malavolta
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design LanguageIvano Malavolta
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languagesIvano Malavolta
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software ArchitectureIvano Malavolta
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineeringIvano Malavolta
 

More from Ivano Malavolta (20)

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
 
The H2020 experience
The H2020 experienceThe H2020 experience
The H2020 experience
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green IT
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile development
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architectures
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languages
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering
 

HTML5 & CSS3 refresher for mobile apps

  • 1. Gran Sasso Science Institute Ivano Malavolta HTML5 & CSS3 refresher
  • 2. Roadmap Anatomy of a web app HTML5 CSS3
  • 3. 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)
  • 4. Anatomy of a Web App
  • 5. 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
  • 6. Roadmap Anatomy of a web app HTML5 CSS3
  • 7. HTML 5 •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  • 8. HTML 5 HTML5 will be the new standard for HTML HTML5 is still a work in progress W3C final recomendation: 2020 Top browsers support many (not all) of the new HTML5 elements http://mobilehtml5.org http://caniuse.com
  • 9. What is HTML5? HTML5 Markup JavaScript CSS3Multimedia
  • 10. The minimal HTML5 page <!DOCTYPE  html>   <html>    <head>    <title>Title</title>   </head>    <body>   …   </body>   </html>  
  • 11. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  • 12. 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
  • 13. 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
  • 15. 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 figure <mark> marked/highlighted text <time> a date/time <wbr>Defines a possible line-break
  • 16. 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
  • 18. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  • 19. Forms Main Goal: reduce the Javascript for validation and format management Example:
  • 20. Form Input Types Form input types degrade gracefully à Unknown input types are treated as text-type http://bit.ly/I65jai
  • 21. 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
  • 22. Form Field Attributes Autofocus –  Support for placing the focus on a specific form element <input type="text“ autofocus> Placeholder –  Support for placing placeholder text inside a form field <input type="text“ placeholder=“your name”>
  • 23. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Server-Sent Events •  Canvas & SVG
  • 24. Audio <audio> : a standard way 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> Multiple sources à the browser will use the first recognized format
  • 26. 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
  • 27. Video <video> : a standard way 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> Multiple sources à the browser will use the first recognized format
  • 29. 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
  • 30. A note on YouTube videos <video> works only if you have a direct link to the MP4 file 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>
  • 31. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  • 32. 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
  • 33. Offline Data WebSQL Database relational DB support for tables creation, insert, update, … transactional tied to a specific domain/app persists across browser sessions Its evolution is called IndexedDB, but it is actually not fully supported yet in iOS
  • 34. Offline data Mobile browsers compatibility matrix We will have a dedicated lecture to offline data storage on mobile devices
  • 35. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  • 36. 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
  • 37. 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); }
  • 39. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  • 40. WebSockets Bidirectional, full-duplex communication between devices and server Specifically suited for chat, videogames, drawings sharing, real-time info Requires a Web Socket Server to handle the protocol
  • 41. 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 traffic -  AJAX requests generally have a small payload and relatively high amount of http headers (wasted bandwith)
  • 42. Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Offline Data •  Geolocalization •  Web Sockets •  Canvas & SVG
  • 43. Canvas & SVG Canvas & SVG allow you to create graphics inside the browser http://bit.ly/Ie4HKu
  • 44. Canvas & SVG Canvas draws 2D graphics, on the fly 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
  • 45. Roadmap Anatomy of a web app HTML5 CSS3
  • 46. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 48. 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
  • 49. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 50. Basics Generic Syntax: selector { property: value; property2: value2, value3; ... }
  • 51. Inheritance If an HTML element B is nested into another element A à B inherits the style of A unless B has an explicit style definition body { background-color: red; } div { background-color: green; }
  • 52. Combining Selectors Selectors can be combined h1, h2, h3 { background-color: red; }
  • 53. 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
  • 54. 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.
  • 55. Background & Colors div { background-color: blue; background-color: rgba(0, 0, 255, 0.2); } RGBA = RGB + opacity
  • 56. 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 à final color
  • 57. 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 throughtext-transform none | capitalize | lowercase | uppercase
  • 58. 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
  • 60. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 61. Selectors Classical ways to select elements in CSS2: •  by type a { color: red; } •  by id #redLink { color: red; } •  by class .redLink { color: red; }
  • 62. 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:first-child à every <p> element that is the first child of its parent
  • 63. 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
  • 64. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 66. 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
  • 68. Borders & dimensions div { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red; }
  • 69. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 70. The Display Property It specifies 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
  • 71. 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
  • 72. The visibility Property It specifies 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 (only for tables), inherit
  • 73. 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; }
  • 74. 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 children be aligned box-direction Values: normal | reverse | inherit sets the order in which the elements will be displayed
  • 75. Flex Box main elements box-pack Values: start | end | center | justify Sets the alignment of the box along the box-orient axis box-orient: horizontal; box-pack: end;
  • 76. Flex Box main elements box-align Values: start | end | center | baseline | stretch Sets how the box's children are aligned in the box box-orient: horizontal; box-align: center;
  • 77. 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; }
  • 79. Static Positioning Elements will stack one on top of the next http://bit.ly/I8cEaF
  • 80. 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 http://bit.ly/I8cEaF
  • 81. Relative Positioning It is possible to create a coordinate system for child elements http://bit.ly/I8cEaF
  • 82. Absolute Positioning an absolutely positioned element is removed from the normal flow it won’t affect or be affected by any other element in the flow http://bit.ly/I8cEaF
  • 83. Fixed Positioning shares all the rules of an absolutely positioned element a fixed element does not scroll with the document http://bit.ly/I8cEaF
  • 84. 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
  • 85. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 86. 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 …
  • 87. 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; }
  • 89. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 90. Visual Effects Three main mechanisms: 1.  Transforms (both 2D and 3D) 2.  Transitions 3.  Animations
  • 91. 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
  • 94. 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 specified CSS property changes value
  • 95. 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
  • 96. Example .imageThumbnail { width; 200px; transition: all ease-in 3s; } .zoomed { position: absolute; left: 0px; top: 0px; width: 100%; } $(‘.imageThumbnail’).addClass(‘zoomed’);
  • 97. 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; }
  • 98. 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)
  • 99. 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
  • 101. 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
  • 102. Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries
  • 103. Media Types Media Queries are based on Media Types A media type is a specification 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
  • 104. 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 file @media screen { div { color: red; } }
  • 105. Media Queries They allow you to to change style based on specific conditions For example, they can be about •  device’s display size •  orientation of the device •  Resolution of the display •  ...
  • 107. 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
  • 108. The Full Media Feature List http://slidesha.re/I5oFHZ
  • 109. The AND operator You can combine multiple expressions by using the and operator @media screen and (max-device-width: 480px){ /* your style */ }
  • 110. The COMMA operator The comma keyword acts as an or operator @media screen and (color), handheld and (color) { /* your style */ }
  • 111. The NOT operator You can explicitly ignore a specific type of device by using the not operator @media not (width:480px) { /* your style */ }
  • 112. 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)