Mobile applications Development - Lecture 10

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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 – , , , , • deprecating tags & attributes deprecating tags & attributes deprecating tags & attributes deprecating tags & attributes – , , , 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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

The minimal HTML5 page Title …

Slide 8

Slide 8 text

The HTML5 Doctype It must be the first thing in your HTML5 document, before the tag before the 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)

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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 • quotes for attributes are optional

Slide 11

Slide 11 text

HTML5 VS XHTML 4 • you can use upper-case letters for your element names

hello

• No need to specify the type of script elements if it is Javascript • No need to specify the type of style elements if it is CSS <link rel="stylesheet" href="style.css“>

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

New Structural Tags header region of a page or section footer region of a page or section navigation region of a page or section logical region of a page logical region of a page a complete piece of content secondary or related content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 hello var editable = document.getElementById('editable'); editable.innerHtml

Slide 19

Slide 19 text

Sandbox attribute for iframes Method of running external site pages with reduced privileges reduced privileges reduced privileges reduced privileges in iframes in iframes

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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:

Slide 23

Slide 23 text

Form Input Types for search boxes for spinboxes for sliders for sliders for color pickers for telephone numbers for web addresses for email addresses for calendar date pickers for months for months for weeks for timestamps for precise timestamps for local dates and times

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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: Pattern Pattern Pattern Pattern – Validate form field data to match the specified regular expression pattern expression pattern 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

Slide 27

Slide 27 text

New form elements a list of pre-defined options for input controls 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 the result of a calculation a label that can be filled by a Javascript function

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Audio : a standard way to embed an audio file on a web page a web page Not Supported Multiple sources the browser will use the first recognized format

Slide 30

Slide 30 text

Audio Attributes

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Video : a standard way to embed a video file on a web page web page Not Supported Multiple sources the browser will use the first recognized format

Slide 33

Slide 33 text

Video Attributes

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

A note on YouTube videos 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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Application Cache web applications can be cached, and accessible without an internet connection without an internet connection contents contents

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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); }

Slide 48

Slide 48 text

getCurrentPosition()

Slide 49

Slide 49 text

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 • Web Sockets • Server-Sent Events • Canvas & SVG • Web Web Web Web Workers Workers Workers Workers • Microdata

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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)

Slide 53

Slide 53 text

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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); }

Slide 65

Slide 65 text

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); } }

Slide 66

Slide 66 text

References http://www.w3schools.com/