HTML5 - An introduction

HTML 5 Eleonora Ciceri

[email protected]

Web Applications An introduction

Web Application architecture

Client Executes the requests; receive the responses

Web Server Delivers Web content that can be accessed through the Internet

Application Server Executes efficiently procedures (programs, routines, scripts) for supporting its applied applications

Database Organized collection of data, organized to model relevant aspects of reality

Web Application Standards: HTTP

!  HTTP stands for HyperText Transfer Protocol !  “Application-level networking protocol for the exchange of

multimedia documents”

!  HTTP is a request-response protocol in the client-server computing model

!  HTTP defines the format of !  Resources identification (URL)

!  Requests

!  Responses

Web Application Standards: HTML (1)

!  HTML stands for HyperText Markup Language !  “A markup language used to describe the content and the

structure of an hypertext”

!  First publicly available document: 1991, Tim Berners Lee

!  Key components !  Elements and attributes

!  Data types (character-based)

!  Character references and entity references

Web Application Standards: HTML (2)

<html>!<head>!!<title>The document title</title>!

</head>!<body>!!<h1>Main heading</h1>!!<p>A paragraph</p>!!<ul>!

<li>A list item.</li>!<li>Another list item.</li>!

!</ul>!!<a href="http://www.w3schools.com/">A link</a>!

</body>!</html>

Web Browser

!  A web browser is an application able to: !  Access Internet (using the HTTP protocol) !  Request resources (identified by an URL) to Web servers

!  Interpret resources and send them back to the user

!  Receive input from the user, and send it to the server

HTML5 Introduction

Motivations

!  HTML in common use is a mixture of features introduced by: !  Various specifications

!  Software products (e.g., web browsers)

!  Common practice

!  Syntax errors in existing web documents

What is HTML5? (1)

!  HTML5 is a markup language for structuring and presenting content for the Web !  Fifth revision of the HTML standard

!  Aim: improve the language with support for the latest multimedia, while keeping it:

!  Easily readable by humans

!  Consistently understood by computers and devices

!  Objectives !  Introduce markup and APIs for complex web applications

!  Create cross-platform mobile applications

What is HTML5? (2)

!  HTML5 is more a movement than a unique, identifiable technology !  Standardization effort

!  New features

Semantics New tags

Power Browser as a programming platform (new JavaScript APIs)

Advantages of HTML5

!  HTML5 tags have implicit semantics !  Search engines know where to look

!  Advantages !  Increased expressiveness

!  Machine readability

!  Increased cross-browser compatibility

!  More advanced features delegated to the browser

!  More power to the client

!  More engaging user experience

HTML5 Page structure

New semantics / Structural elements

DocType

Root element

Character encoding

Link relations

New Semantic Elements in HTML5

<!DOCTYPE html>!<html lang="en">!

<head>!<meta charset="utf-8"/>!<title>My HTML 5 Page</title>!<link rel="stylesheet" type="text/css" href="style.css"/>!<link rel="alternate" type="..." />!

</head> !<body>!

<header>...</header> !<article>...</article>!...!

</body>!</html>

DocType

!  There are several doctypes (>70 pages!) that instruct browsers about the right rendering mode that has to be activated !  Quirks mode: technique used by some web browsers for the

sake of maintaining backward compatibility with web pages designed for older browsers

!  Standards mode: technique used by some web browsers for which they are strictly compliant with W3C and standards

HTML4 HTML5 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 String//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd >!

<!DOCTYPE html>!

Root element

!  The root of an HTML page is always <html>!

HTML4 HTML5 <html xmlns:”http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>!

<html lang=“en”>!•  No need for namespaces (all the elements

are always in the HTML5 namespace) •  The lang attribute suffices to define the

language of the HTML5 page

Character encoding

!  Every piece of text in a computer is stored using a given character encoding !  The character encoding provides a mapping between what

the computer manages and what you see

HTML5 <meta charset=“utf-8”/>!

Link relations (1)

!  Link relations explain why a page points to another resource !  Typically specified by browsers and for browsers, blogging

platforms, search engines etc.

!  Types of link !  Link to a file containing CSS rules for the page

!  <link rel=“stylesheet” href=“file.css” type=“text/css”/>!

!  Link to the same content available in other formats !  <link rel=“alternate” href=“/feed/” type=“application/atom

+xml” title=“My Weblog feed”/>!

Link relations (2)

Link Meaning rel = “author”! Link information about the author of the page; it

can be a mailto: address

rel = “icon”! Link to associate a small icon with the page

rel = “license”! License term for the page’s content

rel = “nofollow”! The link is not endorsed by the original author or publisher of the page

rel = “pingback”! Link to specify the address of a pingback server; this is useful for authors to understand who is linking to (or referring) their articles

rel = “search”! The referenced document provides an interface for searching the document and its related resources

New semantic elements in HTML5 (1)

!  Goal: enrich HTML with semantics

!  Advantages !  Ease automatic analysis

!  Factorize best practices into a standard

HTML4 HTML5 <div id=“header”/>!<div id=“footer”/>!<div id=“navigation”/>!

One element for each semantic structure in the page

New semantic elements in HTML5 (2)

Headers

!  A header is a semantic element that defines !  The header of a content: <header>

!  A wrapper for two or more related heading elements: <hgroup>

<header>!<hgroup>!

<h1><a href=“#”>home</a></h1>!<h2><a href=“#”>blog</a></h1>!

</hgroup>!</header>!

Nav

!  The nav is a section of a page that links to other pages or to parts within the page !  Important for people with disabilities (accessible websites)

<nav>!!<ul>!

<li><a href=“#”>home</li>!<li><a href=“#”>blog</li>!<li><a href=“#”>gallery</li>!

</ul>!</nav>!

Article

!  The article is a self-contained composition in a document, page or application, independently distributable or reusable

<article>!!<header>!

<p class=“post-date”>October,22</p>!<h1><href=“#” rel=“bookmark” title=“link to the post”>Travel day</a></h1>!

</header>!Blah blah blah!

</article>!

Section

!  The section element represents a generic document or the application section !  Examples A blob of content that you could store as an

individual record in the database, a thematic grouping of content (chapters / sections in a page)

!  Typically used to group similar information

Aside

!  The aside tag is used for the content that is tangentially related to the page content and that is surrounding it !  Examples related reading links, glossaries, etc

!  It can be used also to hold secondary content (when not nested within an article element)

<aside>!!<h1>Glossary</h1>!!...!

</aside>!

Footer

!  The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element !  It contains information about the section !  When footer elements contains sections, they represent appendixes,

license agreements etc. !  It may also contain navigation elements

<footer>!!<nav>!

<h1>Navigation>!<ul>...</ul>!

</nav>!<section>!

...!</section>!

</footer>!

HTML5 New elements

Schematic structure of a blog post

<article>

Article text

Transcription in HTML5

<article>!<header>!

<h2>Memoirs of a Parisian lion-tamer</h2>!<time datetime=2010-01-24>January 24th, 2010</time>!

</header>!<p>Claude Bottom’s poignant autobiography is this summer’s must-read.</p>!<footer>!

Posted in <a href=“/?cat=3”>Books category</a>.!<a href=“/?p=34#respond”>No comments</a>!

</footer>!</article>!

The <time> element

!  The time element is used for unambiguously encoding dates and times for machines, while still displaying them in a human-readable way

!  This element represents either a time on a 24-hour clock, or a precise date in the Gregorian calendar, optionally with a time and a time-zone offset

!  Parts !  A machine-readable timestamp !  Human-readable text content !  An optional pubdate attribute

!  If the time element is an article: timestamp of the article !  Otherwise: timestamp of the entire document

The <address> element

!  The address element is for contact details of the author !  This is not a generic element for postal addresses

!  You can have multiple addresses in a document, one inside each <article>!!  Each blog post has its address

!  Each comment to that post has its address

Code <address>!

<img src="QRcode.png">!<a href="#">Eleonora Ciceri</a>!

</address>

The <figure> element

!  The figure element wraps: !  An image (or a video, or block of code, or a supporting

quotation)

!  Its caption

Code <figure>!

<img src="Welcome.jpg" width="100px">!<figcaption>Welcome</figcaption>!

</figure>

The <details> element

!  The details element introduces native support for a common behavior: an expanding/collapsing area !  It removes the need for custom JavaScript

Code

<details>!<summary>Photograph details</summary>!<p>Photograph taken on!

<time datetime=2012-12-25>Xmas day 12</time>!</p>!<p><small>Copyright Eleonora Ciceri, !

<address>[email protected]</address>!</small></p>!

</details>

The <mark> element

!  The mark element allows you to do the markup equivalent of using a highlighter pen to bring out some words on a printed page !  This is not the same as emphasis (for this, you use <em>)

Code This is a <mark>marked</mark> text.

The <progress> element

!  The progress element is used to represent a progress meter, to indicate the completion of a task

!  The meter element works in the same way

Code <progress value="5" max="20"></progress>

Redefined element (1)

!  <cite>: user for mark up a work or the name of a speaker

!  <dl>: an association list consisting of zero or more name-value groups; name-value groups may be terms and definitions, metadata topics and values, or any other

!  <em>: it marks up emphasis of the kind that subtly changes the meaning of a sentence

!  <i>: it represents a span of text in an alternate voice or mood

Redefined element (2)

!  <small>: it represents “small print” rather than “a generic text with smaller font”; this characterizes disclaimers, legal restrictions, copyrights

!  <strong>: it represents strong importance for its contents, but, unlike <em>, it does not change the meaning of the sentence

Removed elements

!  Completely obsolete elements: !  <applet>!!  <big>!!  <blink>!!  <center>!!  <font>!!  <marquee>!

HTML5 Forms

New input types (1)

!  The new form fields were the genesis of the spec that became HTML5

!  New values to the type attribute of the input element are added !  New browsers understand them and render them in a proper

way !  Old browsers degrade these new types in the default type:

!  <input type=“text”>!

!  New types: email, url, time, datetime (i.e., date + time), search, tel (i.e., telephone number)

New input types (2)

!  Other fancy types

range

color

date

!  The list attribute creates a list in the input box !  Note: inserting a <select> tag is required for guaranteeing

compatibility with older browsers; HTML5 does not require it

New attributes: list!

Code <datalist id="sources">!

<select name="source” ! !!<option value="Value1">Value1</option>!!<option value="Value2">Value2</option>!

</select>!If other, specify:!

</datalist>!<input id="source" name="source" list="sources">

!  This attribute provides a declarative way to focus a form control when a page is loaded !  Previously written in JavaScript by web developers (at hand)

!  There should be only one autofocused input box in a page

New attributes: autofocus!

Code <input id=”input" name=”default" autofocus>

!  This attribute places text in an input field as a hint for the user: !  Removing the text when the user focuses on the field !  Restoring it when focus leaves the field

!  Previously written in JavaScript by web developers (at hand)

New attributes: placeholder!

Code <input name="q" placeholder="Search Bookmarks"/>

Other attributes (1)

!  required: on textarea and most input fields; it reports an error if the user does not compile it

!  multiple: user when the type is equal to file; it allows to user to upload multiple files

!  pattern: allows you to specify a custom regular expression that the input must match

!  autocomplete: controls the autocomplete behavior that some browsers apply to the input text

Other attributes (2)

!  min and max: applied to a number field, it gives the range of values that can be entered in an input

!  step: controls the level of granularity of input; e.g., if the step is 5, the spinner increments in steps of 5

spinner

Usefulness of new types (1)

!  HTML5 does not mandate any specific UI for new input types, but for instance:

!  Advantages: automatic input validation


!  HTML5 does not mandate any specific UI for new input types, but for instance:

!  Advantages: automatic input validation


!  The automatic input validation was usually performed !  Server-side

!  Client-side with JavaScript

!  Disadvantages !  Cost of additional scripts

!  JavaScript may be disabled in the user browser

!  HTML5 offloads the functionality for standard types to the browser !  Advantage: no additional scripts

HTML5 Canvas

The <canvas> element

!  The canvas is a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics or other visual images on the fly !  Empty rectangle in a page in which one can use JavaScript

to draw everything

!  It has no content and no border of its own

<canvas id=“myCanvas” width=“300” height=“225”/><canvas>!

!  The canvas can accessed by JavaScript: var myCanvas = document.getElementById(“myCanvas”);!

Draw shapes

!  How to draw a shape !  Get a reference to the element

!  Get a reference to the canvas drawing context (2D or 3D)

!  Draw

Code var myCanvas = document.getElementById(“myCanvas”);!var myCanvasContext = myCanvas.getContext(“2d”);!myCanvasContext.<DRAWING_PRIMITIVE>;

Canvas coordinates

!  The canvas is a two-dimensional grid, with origin (0,0) in the upper-left corner

Drawing script (1)

function drawOnCanvas() {!!var c = document.getElementById("myCanvas");!!var context = c.getContext("2d");!! ! ! !!!drawGrid(context);!!drawArrows(context);!!drawLabels(context);!

};

Retrieve the canvas and its 2D context

Drawing script (2)

function drawGrid(context) {!try {!

for (var x=0.5; x<500;x+=10) {!context.moveTo(x, 0);!context.lineTo(x, 375);!

}!for (var y=0.5; y < 375; y+=10) {!

context.moveTo(0, y);!context.lineTo(500, y);!

}!context.strokeStyle = "#eee";!context.stroke();!

}!catch (err) {}!

} Draw the required lines on the canvas

Starting point

Ending point

Drawing script (3)

function drawLabels(context) {!try {!

context.font = "bold 12px sans-serif";!context.fillText("x", 248, 43);!context.fillText("y", 58, 165);!

}!catch (err) {}!

! ! ! !!try {!

context.textBaseline = "top";!context.fillText("(0,0)",8,5);!

}!catch (err) {}!

! ! ! !!try {!

context.textAlign = "right";!context.textBaseline = "bottom";!context.fillText("(500,375)", 492, 370);!

}!catch (err) {}!

}

Write a text on the canvas at the specified position

Vertical alignment (wrt the position specified in fillText)

Horizontal alignment (wrt the position specified in fillText)

Drawing script (4)

function drawArrows(context) {!try {!

context.beginPath();!context.moveTo(0, 40); context.lineTo(240,40);!context.moveTo(260, 40); context.lineTo(500, 40);!context.moveTo(495, 35); context.lineTo(500, 40);!context.lineTo(495, 45);!! ! ! ! !!context.moveTo(60, 0); context.lineTo(60,150);!context.moveTo(60, 170); context.lineTo(60, 370);!context.moveTo(55, 365); context.lineTo(60, 370);!context.lineTo(65, 365);!! ! ! ! !!context.strokeStyle = "#000";!context.stroke();!

}!catch (err) {}!

}

Draw an arrow

Start drawing a line

Other features

!  A gradient is a smooth transition between two or more colors !  createLinearGradient paints along a line

!  createRadialGradient paints along a cone between two circles

!  The canvas drawing context allows the drawing of an image in the canvas !  drawImage takes an image, clips it to the specified

rectangle, scales it to the specified dimensions and draws it at specified coordinates

HTML5 Video embedding

The <video> element

<video width=“320” height=“240” controls autoplay preload poster=“star.png”> <source src=“v1.mp4” type=‘video/mp4; codecs=“mp4a.40.2”’>

</video>

Video size

Show video control commands Play the video as

the page loads

Start downloading as the page loads

Image to be shown while video loading

Define video source

Codec/Container IE FF Safari Chrome Opera iPhone Android

Theora/Vorbis/Ogg

3.5+ (extra plugin)

5.0 10.5+

H264+AAC+MP4 3.0+ 5.0 (to drop)

3.0+ 2.0+

WebM (extra plugin)

6.0 10.6+

Video and HTML/JavaScript

!  The video is not treated as an embedded foreign object !  Focus is on the player

!  Native JavaScript interaction

!  Interaction with other HTML5 primitives

!  Interactions with JavaScript !  Event binding: video.addEventListener!!  Control through API: onclick play, onclick load, onclick

pause, onclick

Video and CSS

!  The <video> tag can be styled using traditional CSS !  Border

!  Opacity

!  …

!  Other properties are from the newer CSS3: reflections, masks, gradients, transforms, transitions, animations

Video and canvas

!  <video> and <canvas> were designed to work together

!  <canvas> has a drawImage method which lets you import images from three different sources !  Image elements !  Another canvas element !  A video element: every time the method is invoked, the

current frame in the video is imported and rendered into the canvas

!  A nice example !  http://html5doctor.com/video-canvas-magic/!

HTML5 APIs

What is an API?

!  An Application Programming Interface is a collection of programming instructions and standards for accessing a software application

!  The HTML5 movement wants to standardize several functionalities that have been introduced over the years !  Interaction with local device

!  Multi-threading

!  Storage

!  Media interaction

Geo-location API

!  Geo-location: finding the geographical location of a user. This is done by analyzing: !  IP address

!  GPS coordinates

!  Wi-Fi hotspot coordinates

!  Why geo-location? !  Customized services

!  Social networks

!  Advertising

Geo-location API: Features (1)

!  Geo-location option has two methods !  getCurrentPosition: returns the current position of the

user

!  watchPosition: called every time the user’s location changes

!  There is no need to actively poll the devices’ position

!  The device will determine the optimal polling interval and it will call the callback function whenever it determines that the user’s position has changed


!  The position object provides the position of the device, which is defined by latitude and longitude !  The timestamp is retrieved too

!  Altitude, accuracy and altitude accuracy may be retrieved too, although they are optional

!  The heading and the speed may be retrieved, since they can be computed by the device


!  Quality constraints can be defined for the position !  enableHighAccuracy specifies if the location has to be

precise, i.e., collected by the GPS

!  timeout specifies the number of ms the application will wait in order to get the postion

!  maximumAge allows the device to answer immediately with a cached position

Geo-location API: Privacy concerns

!  Problem: Privacy concerns !  User agents must not send location information to Web sites

without the express permission of the user

!  Sharing your location must be optional

HTML5 storage: Previous solutions (1)

!  Desktop applications are able to manage and persist their state locally !  Where? Registry, INI files, plist files, XML files, database…

!  The only storage system available for Web clients were cookies !  Included in every HTTP session

!  Problems: security, performance

!  Limited to 4Kb of data

!  Possibly unavailable if cookies are disabled

HTML5 storage: Previous solutions (2)

!  Internet explorer !  User data: 64KB per domain in a XML-based structure

!  Flash !  Local Shared Objects: 100Kb of data per domain (but it

allows users to increase storage size)

!  Google Gears plugin !  Local Relations storage based on SQLlite: unlimited data,

SQL statement

HTML5 storage

!  A standard way for Web pages to store key/value pairs window.localStorage!

!  Data persists page navigation, user sessions and browser session

!  Limit of 5Mb for each origin !  No additional space

HTML5 storage: Usage

!  Data are stored as associative arrays based on named key !  Keys: strings

!  Data: any data type that is supported by JavaScript (strings, booleans, integers, floats), but they are stored as strings

!  Retrieving values require parsing to restore their original type

!  Objects are stored serializing them to JSON

HTML5 storage: Additional events

!  With HTML5 storage one can track changes to the data storage

!  storage is triggered when something changes

!  The StorageEvent object will contain the following properties !  key: string; the named key that was added, removed or

modified !  oldValue: any; the previous value, now overwritten, or null if a

new item was added !  url: string; the page which called a method that triggered this

change

Offline Web Applications: Motivations

!  Why do we need an offline Web application? !  Nomadic usage

!  Network usage

!  Network cost

!  What do we need when offline? !  HTML pages, CSS, JavaScripts

!  Images / videos

!  Local data

Offline Web Applications: Principles

!  Offline is enabled by !  Caching resources

!  Switching from cache to “live” resources (and viceversa) when needed

!  How does it work? !  A flag in the DOM tells the application whether you are

online or offline

!  A dedicated event fires when the status changes

!  The browser switches between online and offline when the status is changed

Offline Web Applications in HTML5 (1)

!  HTML4 !  Browsers typically implement an HTTP cache, which caches

HTTP responses based on HTTP methods and metadata

!  For an application to run offline, all needed resources must be reliably cached

!  HTML5 !  It works in the same way as the traditional browser caching

policy

!  It adds some additional explicit policies


!  The home page of the offline Web application points to the manifest file for the resources to cache !  There is only one manifest file !  All application pages must point to it

!  An HTML5 compliant browser will: !  Read the manifest file

!  Download the resources

!  Cache them locally

!  Automatically update changes


!  A manifest is divided in !  Cache: resources which are explicitly downloaded, cached

locally and used when online

!  Fallback: substitution for online resources that will not be cached

!  Network: an online list of resources that are never cached and are not available offline

!  If the manifest has no header, all the resources are implicitly in the cache section


!  If the manifest file is new, a downloading event is fired and the browser starts downloading resource !  The browser periodically notifies about the download progress !  When all the resources are downloaded, the browser sends an

event of type cached!

!  If the manifest file changed from a previous version, a new downloading event is fired and the browser starts downloading resource !  When the download is finished, the browser triggers an

updateready event !  The new cached resources won’t be used unless the user

refreshes the page

WebSocket: Motivations

!  HTTP is a request-response protocol

!  Problem: many applications need bi-directional communication !  Chat

!  Multiplayer online games

!  Realtime updating of social streams

!  Solution: COMET is an hack that provides server push using standard browser functionality !  Inefficient

WebSocket (1)

!  “WebSocket is a new proposal to provide full-duplex, bi-directional client-server interaction over a single TCP connection”

!  Special socket connections between a Web browser and the server are established !  An open connection between the client and the server can

start sending data at any time

!  Messages can be sent to a server so as to receive event-driven responses without having to poll the server for a reply

WebSocket (2)

!  Goals !  Enabling near real-time push communications !  Increasing web server connection scalability !  Simplifying the coding task

!  Protocol: ws:// and wss:// !  Its own protocol, handshake and headers

!  Support for several browsers (Firefox 6+, Chrome 14+, Opera 11+, Safari 5+, IE 10+)

!  Problem: security issues

References

References (1)

!  http://www.w3schools.com/html/html5_intro.asp

!  Introducing HTML 5, Second edition, Bruce Lawson, Remy Sharp

!  W3C HTML5 Introduction: http://www.w3.org/TR/html5/introduction.html

!  HTML 5 Up and Running – Mark Pilgrim, O’Reilly Google Press – or http://diveintohtml5.org/

!  HTML5 boilerplate - http://html5boilerplate.com/ - “collection of some tricks to get your project off the ground quickly and right-footed”

!  HTML5 Demos - http://html5demos.com/

References (2)

!  HTML5 Rocks - http://www.html5rocks.com/

!  http://slides.html5rocks.com/

!  HTML5 Video - http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

!  HTML5 Foundamentals - https://www.ibm.com/developerworks/mydeveloperworks/blogs/social-media-marketing/entry/html5_fundamentals?lang=en

!  HTML5 Tag Reference - http://www.w3schools.com/html5/html5_reference.asp

Technology

HTML5 - An introduction