Mobile applications Development - Lecture 10

HTML5 Refresher Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta

Roadmap • Intro Intro Intro Intro • New New New
New Structural Structural Structural Structural Tags Tags Tags Tags and and and and Attributes Attributes Attributes Attributes • New New New New Structural Structural Structural Structural Tags Tags Tags Tags and and and and Attributes Attributes Attributes Attributes • Forms Forms Forms Forms • Audio & Video Audio & Video Audio & Video Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Web Web Web Workers Workers Workers Workers

Intro HTML5 is potentially the first true cross cross cross
cross- - - -platform platform platform platform app technology app technology app technology app technology app technology app technology app technology app technology

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

What is HTML5? It is an extension of HTML/XHTML 4
• with new more semantically rich elements with new more semantically rich elements with new more semantically rich elements with new more semantically rich elements – <article>, <footer>, <header>, <nav>, <section> • deprecating tags & attributes deprecating tags & attributes deprecating tags & attributes deprecating tags & attributes – <center>, <font>, <frame>, height, width • introducing new attributes introducing new attributes introducing new attributes introducing new attributes • introducing new attributes introducing new attributes introducing new attributes introducing new attributes – placeholder, form • additional additional additional additional APIs APIs APIs APIs – geolocalization, video, audio

The HTML5 creation rules • New features should be based
on HTML, CSS, and JS HTML, CSS, and JS HTML, CSS, and JS HTML, CSS, and JS • Reduce the need for external external external external plugins plugins plugins plugins (like Flash) • Better error handling error handling error handling error handling – ignore unknown stuff and move on • More markup to replace scripting replace scripting replace scripting replace scripting • More markup to replace scripting replace scripting replace scripting replace scripting • Avoid device Avoid device Avoid device Avoid device- - - -specific specific specific specific profiling • Make the process open process open process open process open

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

The HTML5 Doctype It must be the first thing in
your HTML5 document, before the <html> tag before the <html> tag It is an instruction to the web browser instruction to the web browser instruction to the web browser instruction to the web browser about what version of HTML the page is written in HTML 4 Doctype declarations required a reference HTML 4 Doctype declarations required a reference to a DTD, because HTML 4 was based on SGML (Standard Generalized Markup Language)

HTML5 VS XHTML 4 • HTML5 will allow both quick-closing
of empty tags • 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>

HTML5 VS XHTML 4 • you can use upper-case letters
for your element names <DIV>hello</DIV> <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“>

New Structural Tags Main Goal: separate separate separate separate presentation
presentation presentation presentation from from from from content content content 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 <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 <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. 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 metadata
metadata metadata about any element within an HTML5 page an HTML5 page They are ignored by the validator for HTML5 documents They all start with the data- pattern They They They They can can can can be be be be read read read read by by by by any any any any browser browser browser browser using Javascript via the getAttribute() method

In-place Editing This feature is provided by defining the contenteditable
attribute 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

Sandbox attribute for iframes Method of running external site pages
with reduced privileges reduced privileges reduced privileges reduced privileges in iframes in iframes <iframe src=“other.htm" sandbox=""></iframe>

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

Form Input Types <input type="search"> for search boxes <input type="number">
for spinboxes for sliders <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="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 Input Types Form input types degrade degrade degrade degrade
gracefully gracefully gracefully gracefully Unknown input types are treated as text-type Unknown input types are treated as text-type http://bit.ly/I65jai

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

Required Required Required Required – Method of setting required fields
required fields required fields required fields and field types without requiring JavaScript requiring JavaScript Your Name: <input type="text" name="name" required> Pattern Pattern Pattern Pattern – Validate form field data to match the specified regular expression pattern expression pattern <input type="text" pattern=“[1-9]+”> Currently Currently Currently Currently they they they they are are are are supported supported supported supported by by by by few few few few mobile mobile mobile mobile browsers browsers browsers browsers

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

Audio <audio> : a standard way to embed an audio
file on a web page a web page <audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Not Supported </audio> </audio> Multiple sources the browser will use the first recognized format

Audio Attributes

Audio Javascript API HTML5 provides a set of Javascript Javascript
Javascript Javascript APIs APIs APIs APIs for interacting with an audio element 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 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> </video> Multiple sources the browser will use the first recognized format

Video Attributes

Video Javascript API HTML5 provides a set of Javascript Javascript
Javascript Javascript APIs APIs APIs APIs for interacting with a video element 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 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" <iframe width="560" height="315" src="http://www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>

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 *.ytimg.com

Offline Data LocalStorage LocalStorage LocalStorage LocalStorage stores data in key/value
pairs stores data in key/value pairs it is tied to a specific domain/app persists across browser sessions SessionStorage SessionStorage SessionStorage SessionStorage SessionStorage SessionStorage SessionStorage 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 WebSQL WebSQL WebSQL Database Database Database Database
relational DB relational DB support for tables creation, insert, update, … transactional tied to a specific domain/app persists across browser sessions Its evolution is called IndexedDB IndexedDB IndexedDB IndexedDB, but it is actually not supported by most mobile browsers

Mobile browsers compatibility matrix We will have a dedicated lecture
to offline data storage on mobile devices

Application Cache web applications can be cached, and accessible without
an internet connection without an internet connection <!DOCTYPE HTML> <html manifest=“home.appcache“> <body> contents contents </body> </html>

Application Cache Every page with the manifest attribute specified will
be cached 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

The Manifest File The manifest file has three sections: •
CACHE MANIFEST CACHE MANIFEST CACHE MANIFEST CACHE MANIFEST – Files listed under this header will be cached after they will be cached after they will be cached after they will be cached after they are downloaded for the first time are downloaded for the first time are downloaded for the first time are downloaded for the first time • NETWORK NETWORK NETWORK NETWORK – Files listed under this header require a connection to the server, and will never be cached will never be cached will never be cached will never be cached – Files listed under this header require a connection to the server, and will never be cached will never be cached will never be cached will never be cached • FALLBACK FALLBACK FALLBACK FALLBACK – Files listed under this header specifies fallback pages if a if a if a if a page is inaccessible page is inaccessible page is inaccessible page is inaccessible

Manifest File - Example CACHE MANIFEST # 2012-02-21 v1.0.0 #
2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: The first URI is the FALLBACK: /html5/ /offline.html http://bit.ly/I6gmAc The first URI is the resource, the second is the fallback.

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 We will have a dedicated lecture to geolocalization on mobile devices

Example function getLocation() { 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()

New Structural Structural Structural Structural Tags Tags Tags Tags and and and and Attributes Attributes Attributes Attributes • New New New New Structural Structural Structural Structural Tags Tags Tags Tags and and and and Attributes Attributes Attributes Attributes • Forms Forms Forms Forms • Audio & Video Audio & Video Audio & Video Audio & Video • Offline Data • Geolocalization • Web Sockets • Web Sockets • Server-Sent Events • Canvas & SVG • Web Web Web Web Workers Workers Workers Workers • Microdata

WebSockets Bidirectional, full Bidirectional, full Bidirectional, full Bidirectional, full- -
- -duplex communication duplex communication duplex communication duplex communication between devices and server devices and server Specifically suited for chat, videogames, drawings sharing, real-time info Requires a Web Socket Server to handle the protocol Requires a Web Socket Server to handle the protocol We will have a dedicated lecture to WebSockets on mobile devices

WebSockets - Overview 1. 1. 1. 1. Client notifies Client
notifies Client notifies Client notifies websocket websocket websocket websocket server server server server (EventMachine) of an event, giving ids of recipients event, giving ids of recipients 2. The server server server server notifies all the active clients notifies all the active clients notifies all the active clients notifies all the active clients (subscribed to that type of event) 3. 3. 3. 3. Clients process event Clients process event Clients process event Clients process event when given recipient Id matches the client’s one http://bit.ly/Ixcupi

Alternative - Polling via AJAX + Near real-time updates (not
purely real-time) + easy to implement + 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)

Server-Sent Events It setups a persistent http connection persistent http
connection persistent http connection persistent http connection which has to be setup only once We will have a which has to be setup only once It is unidirectional unidirectional unidirectional unidirectional: : : : server client We will have a dedicated lecture to SSE on mobile devices SSEs are sent over traditional HTTP SSEs are sent over traditional HTTP SSEs are sent over traditional HTTP SSEs are sent over traditional HTTP it can be easily implemented with standard server- side technologies (eg PHP) devices

Server-Sent Events Specifically suited for: • financial info • financial
info • twitters updates • friends' status updates • news If you need to send data to a server, you can still use XMLHttpRequests via Javascript

SSE- Overview 1. Client sends a request sends a request
sends a request sends a request to the server via HTTP 2. The server creates a process, which fetches latest state in 2. The server creates a process, which fetches latest state in the DB and responds back responds back responds back responds back 3. Client gets server response gets server response gets server response gets server response 4. In 3 seconds client automatically sends next request sends next request sends next request sends next request to the server http://bit.ly/Ixcupi

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

Canvas & SVG Canvas Canvas Canvas Canvas draws 2D graphics,
on the fly draws 2D graphics, on the fly you use Javascript to draw on the canvas rendered pixel by pixel SVG SVG SVG SVG SVG SVG SVG SVG describes 2D graphics in XML every element is available within the SVG DOM JavaScript event handlers for an element

Web Workers Javascript is a single single single single- -
- -threaded threaded threaded threaded language language language language If a tasks take a lot of time, users have to wait If a tasks take a lot of time, users have to wait Web Workers provide background processing background processing background processing background processing capabilities to web applications They typically run on separate threads run on separate threads run on separate threads run on separate threads apps can take advantage of multicore CPUs

Web Workers Web Workers can be used to: • prefetch
prefetch prefetch prefetch data from the Web • perform other ahead ahead ahead ahead- - - -of of of of- - - -time operations time operations time operations time operations to provide a much more lively UI. Web Workers are precious on mobile Web applications Web Workers are precious on mobile Web applications because they usually need to load data over a potentially slow network slow network slow network slow network

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 worker script cannot access the DOM

Web Workers The main JS script can communicate with workers
via postMessage() calls: postMessage() calls: $(‘#button’).click(function(event) { $(‘#output’).html(“starting”); worker.postMessage(“start”); }); }); worker.onmessage = function(event) { $(‘#output’).html(event.data); }

Web Workers The web worker script can post back messages
to the main script: main script: onmessage = function(event) { if(event.data === “start”) { var result; // do something with result // do something with result postMessage(result); } }

References http://www.w3schools.com/

Mobile applications Development - Lecture 10

Mobile applications Development - Lecture 10

More Decks by Ivano Malavolta

Other Decks in Technology

Featured

Transcript