Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
2. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
4. Intro
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
5. What is HTML5?
It is an extension of HTML/XHTML 4
• with new more semantically rich elements
– <article>, <footer>, <header>, <nav>, <section>
• deprecating tags & attributes
– <center>, <font>, <frame>, height, width
• introducing new attributes
– placeholder, form
• additional APIs
– geolocalization, video, audio
6. The HTML5 creation rules
• New features should be based on HTML, CSS, and JS
• Reduce the need for external plugins (like Flash)
• Better error handling
– ignore unknown stuff and move on
• More markup to replace scripting
• Avoid device-specific profiling
device-
• Make the process open
8. The HTML5 Doctype
It must be the first thing in your HTML5 document,
before the <html> tag
It is an instruction to the web browser about
what version of HTML the page is written in
HTML 4 Doctype declarations required a reference
to a DTD, because HTML 4 was based on SGML
(Standard Generalized Markup Language)
9.
10. HTML5 VS XHTML 4
• HTML5 will allow both quick-closing of empty tags
but you can use those elements just as well without
quick-closing them
<input type=“text”>
<input type=“text” />
• quotes for attributes are optional
<a href=http://www.google.com>
11. HTML5 VS XHTML 4
• you can use upper-case letters for your element names
<DIV>hello</DIV>
• No need to specify the type of script elements if it is
Javascript
<script src=“test.js”>
• No need to specify the type of style elements if it is
CSS
<link rel="stylesheet" href="style.css“>
12. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
13. 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
14. 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
16. 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
17. 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. In-place Editing
This feature is provided by defining the contenteditable
attribute
Any elements with the contenteditable attribute set will have
a grey outline as you hover
Performed changes can be saved via Javascript
<section id="editable“ contenteditable="true"> hello
</section>
var editable = document.getElementById('editable');
editable.innerHtml
19. Sandbox attribute for iframes
Method of running external site pages with reduced privileges
in iframes
<iframe src=“other.htm" sandbox=""></iframe>
20.
21. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
23. 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
24. Form Input Types
Form input types degrade gracefully
Unknown input types are treated as text-type
http://bit.ly/I65jai
25. 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”>
26. Required
– Method of setting required fields and field types without
requiring JavaScript
Your Name: <input type="text" name="name" required>
Pattern
– Validate form field data to match the specified regular
expression pattern
<input type="text" pattern=“[1-9]+”>
Currently they are supported by few mobile browsers
27. New form elements
<datalist> a list of pre-defined options for input
controls
<keygen> a key-pair generator field (for forms)
When the form is submitted, two keys are generated, one
private and one public
The private key is stored locally, and the public key is
sent to the server
<output> the result of a calculation
a label that can be filled by a Javascript function
28. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
29. 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
31. 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
32. 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
34. 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
35. 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>
36. A note on YouTube videos
These are the PhoneGap options you have to set
MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com
37. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
38. 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
39. 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
IndexedDB,
not supported by most mobile browsers
41. Application Cache
web applications can be cached, and accessible
without an internet connection
<!DOCTYPE HTML>
<html manifest=“home.appcache“>
<body>
contents
</body>
</html>
42. Application Cache
Every page with the manifest attribute specified will
be cached
If the manifest attribute is not specified, the page
will not be cached (unless the page is specified
directly in the manifest file)
App cache is supported by all browsers, except IE
43. The Manifest File
The manifest file has three sections:
• CACHE MANIFEST
– Files listed under this header will be cached after they
are downloaded for the first time
• NETWORK
– Files listed under this header require a connection to the
server, and will never be cached
• FALLBACK
– Files listed under this header specifies fallback pages if a
page is inaccessible
44. Manifest File - Example
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK: The first URI is the
/html5/ /offline.html resource, the second is
the fallback.
http://bit.ly/I6gmAc
45. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
46. 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
47. 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);
}
49. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
• Microdata
50. WebSockets
Bidirectional, full-duplex communication between
full-
devices and server
Specifically suited for
chat, videogames, drawings sharing, real-time info
Requires a Web Socket Server to handle the protocol
We will have a dedicated
lecture to WebSockets on
mobile devices
51. WebSockets - Overview
1. Client notifies websocket server (EventMachine) of an
event, giving ids of recipients
2. The server notifies 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
52. 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)
53. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
54. Server-Sent Events
It setups a persistent http connection
which has to be setup only once
We will have a
It is unidirectional:
unidirectional: dedicated
server client lecture to SSE
on mobile
devices
SSEs are sent over traditional HTTP
it can be easily implemented with standard server-
side technologies (eg PHP)
55. Server-Sent Events
Specifically suited for:
• financial info
• twitters updates
• friends' status updates
• news
If you need to send data to a server, you can still use
XMLHttpRequests via Javascript
56. SSE- Overview
1. Client sends a request to the server via HTTP
2. The server creates a process, which fetches latest state in
the DB and responds back
3. Client gets server response
4. In 3 seconds client automatically sends next request to the
server
http://bit.ly/Ixcupi
57. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
58. 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
59. 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
60. Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
61. Web Workers
Javascript is a single-threaded language
single-
If a tasks take a lot of time, users have to wait
Web Workers provide background processing
capabilities to web applications
They typically run on separate threads
apps can take advantage of multicore CPUs
62. Web Workers
Web Workers can be used to:
• prefetch data from the Web
• perform other ahead-of-time operations to provide
ahead-of-
a much more lively UI.
Web Workers are precious on mobile Web applications
because they usually need to load data over a
potentially slow network
63. Web Workers
Any JS file can be launched as a worker
Example of Web Worker declaration:
var worker = new Worker(“worker.js”);
In order to be independent from other workers, each
worker script cannot access the DOM
64. Web Workers
The main JS script can communicate with workers via
postMessage() calls:
$(‘#button’).click(function(event) {
$(‘#output’).html(“starting”);
worker.postMessage(“start”);
});
worker.onmessage = function(event) {
$(‘#output’).html(event.data);
}
65. Web Workers
The web worker script can post back messages to the
main script:
onmessage = function(event) {
if(event.data === “start”) {
var result;
// do something with result
postMessage(result);
}
}