La presentazione di Marco Casario per il Codemotion del 5 marzo 2011 a Roma http://www.codemotion.it/
Si parla già molto di HTML5 e delle nuove specifiche che il linguaggio nella sua ultima versione introduce. Ma è davvero il momento giusto di investire su questo standard e migrare le proprie applicazioni? A che punto sono i browsers con il supporto ad HTML5?Il Flash Player scomparirà?Quale sarà il video codec definitivo supportato? Le domande sono molte. Lo scopo di questo speech è quello di cominciare a dare delle risposte analizzando con esempi concreti lo stato attuale del linguaggio HTML5.
3. “Bringing Sexy Back to the Enterprise applications”
by a clever use of Rich Internet Applications and
Multimedia content.
Because better information workplaces:
make customers happier
improve the quality of work life for employees
4. In other words:
RIAs in enterprise environments dramatically
increase staff productivity and responsive
capacity
Multimedia contents add enhanced effectiveness
5. The technologies we use:
J2EE (Java, JSP, Hibernate, EJB3, Struts, Spring)
Ajax
Flash
Flex
AIR
Flash Media Server
6. Who can make it possible
J2EE Developers Flex/Flash Developers Creative UI Designers
7. Showcase
Comtaste Open Source Projects
Pantaste (http://code.google.com/p/pantaste/)
A library to create ActionScript-based personalized
start page or personal web portal much like iGoogle,
My Yahoo!, Netvibes etc
DAO-EXT (http://code.google.com/p/dao-ext/)
an Adobe AIR tool that allows developers to
automatically generate ActionScript Data Access
Objects (DAO) and Value Objects starting from a local
SQLite database.
9. Showcase
Google UK
We are working with an international team situated mostly in Paris
and London aimed to deliver tools as part of a high-profile project
used by all of Google‘s AdWords customers.
10. Showcase
Maggioli S.p.A.
Maggioli SpA is one of the largest Italian companies that
provide products and services for LPA, with a particular
focus on production and assistance for governmental
management software.
Maggioli immediately perceived the need to build
distributed applications (both resident and web-based) that
were more usable, interactive and rapid, which were in line
and often anticipated the general evolution of the user
base and the market in terms of user experience.
What we’ve done for them:
• Training
• Mentoring
• User Interface Design
11. Showcase
INPDAP
What we’ve
done for them:
Development, user
interface design and
deploying of a RIA
application to archive,
distribute, and search
for documents.
15. Showcase
UBI Bank Group
UBI Banca is the fifth largest Italian banking Group in terms of
branches with a market share of approximately 6% and a
significant presence in the wealthiest areas of the country.
Comtaste supported UBI to create the larget RIA in Europe to
offer more interactive banking services, and enhance the
timeliness and quality of banking services.
What we’ve done for them:
Development, training, user interface design and deploying.
16. Showcase
UBI Bank Group
UBI calculated the ROI measuring execution time and
number of clicks made by a user to perform an operation
(depositing a check on a c/a):
30. HTML 5 and the Semantic Web
The Semantic Web is not a separate Web but an extension of
the current one, in which information is given well-defined
meaning, better enabling computers and people to work in
cooperation.
Tim Berners-Lee
37. HTML5 Goals
HTML 5 is in the last call but it started in 2004
Define error handling (finally)
Move the language forward
Learn by others: integrate what has been done with the specs
If a browser-vendor is unwilling to participate in a feature, it's
dropped !
39. Modernizr: HTML5 Hero
Modernizr uses feature detection mechanic to establish to
determine what you can and cannot do in the current browser, and
Modernizr makes it convenient for you in a variety of ways:
It tests for over 20 next-generation features, all in a matter of
milliseconds;
It creates a JavaScript object (named Modernizr) that contains the
results of these tests as boolean properties;
It adds classes to the html element that explain precisely what
features are and are not natively supported
40. Modernizr: HTML5 Hero
To install Modernizr, download the file from this page. Then, on
your site‘s head tag, add a link to the file. For example:
<script src="js/modernizr-1.0.min.js"></script>
The second step is to include on your html tag a class of ―no-js‖:
<html class="no-js">
Why add this tag?
Because that will be the default state of the page. If JavaScript (js)
isn‘t on, then Modernizr won‘t work at all (and probably other features
of your site won‘t work either…), so it‘s good that we have a fallback
for that case.
41. Modernizr: HTML5 Hero
You can detect features using Modernizr in your JavaScript, using this
syntax:
if (Modernizr.geolocation) {
// whatever
}
42. Using the new <DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting Started</title>
</head>
<body></body>
</html>
43. Char Encoding
HTML 4 approach:
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
HTML 5 simplifies this construct to the following:
<meta charset="utf-8">
44. No more DIVs
Many of the improvements to HTML center around replacing
common uses of the <div> tag with more semantically precise
commands such as the following:
<section>
<article>
<aside>
<hgroup>
<header>
<time>
<footer>
<nav>
<figure>
<figcaption>
<output>
<meter>
<wbr>
45. No more DIVs
The goal of implementing these commands is to minimize the
use of <div> so that it becomes a "tag of last resort" - used only
if no other tags are semantically appropriate
48. No more DIVs
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
49. Some JS for IE
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('footer');
</script>
But styling in Internet Explorer isn’t possible because IE handle
those tags as inline elements—they can’t have children.
50. Image container
<body>
<section>
<h1>About Star Trek</h1>
<p>Star Trek is an American science-fiction t.. bla bla bla</p>
<figure>
<img src="EstimatedTrekkerPopulation.jpg"
alt="5000% annual growth of trekker population">
<figcaption>
Growth in Star Trek Viewership, 1966 - 2009
</figcaption>
</figure>
</section>
52. Forms 2.0
HTML 5 forms introduce a new set of tools to make
form development easier and richer.
Here are some of the new form elements introduced
by HTML 5:
The keygen element
the output element
the progress element
the meter element
the email input type
53. Forms 2.0
the url input type
the date picker element
the time, datetime, month and week elements
the number input type
the search input type
the range input type
the tel input type
the color input type
several attributes: list, autofocus, placeholder, required,
multiple, pattern, autocomplete, min and max, and step
54. Forms 2.0
Even the grammar for the declaration of elements of
form changes with HTML 5. In fact, now you can
declare a form element on any point of the page, and
associate it to a form object by using the form
attribute of the element:
<form id=”myForm” />
<input type=”text” form=”myForm” />
55. Forms 2.0: the email type
The <input type=‖email‖> tag creates a form element
that expects to receive a valid email address from the
user. The form control obviously doesn‘t verify
whether or not the email address actually exists, but
only if the text the user inserts into the field has a
valid syntax.
<label for=email>Email</label>
<input id=email name=email type=email><br/>
57. Forms 2.0: The email type
For some of these devices, the browser is able to recognize the
new HTML 5 input types and changes the on-screen keyboard
to help users for that kind of input.
In fact, these devices show the virtual keyboard with the @ and
period symbols included on the primary screen when focusing
on the text input
58. Forms 2.0: The Spinner
HTML 5 helps developers by adding a spinner control to the tool
arsenal.
The spinner control is a text input control with up-down arrows.
The result is a single line text input that can be spun to display
each number in the text field
59. Forms 2.0: The Spinner
Some attributes allow you to customize the control. These
properties allow you to set a maximum and minimum value, and
the unit to use for the increase and decrease functions.
<label>Choose your magic number: </label>
<input type="number" min="0" max="100" step="1" value="1">
60. Forms 2.0: The Spinner
There are a couple of interesting methods that can be used by
developers with Javascript for the number input type.
stepUp(n): it increases the field‘s value by n.
stepDown(n): it decreases the field‘s value by n.
valueAsNumber: it returns the value of the element,
interpreted as a number
61. Forms 2.0: The Spinner
The browsers in some tablets however
behave differently.
The Figure shows how the browser
used by the 7-inch Samsung Galaxy Tab,
based on Android 2.2, renders the input
control as a simple text input.
However it dynamically displays the
numeric on-screen keyboard
62. Forms 2.0: Sending multiple files
HTML 5, and with the addition of an attribute, makes possible to
select and send more than one file:
<input type="file" multiple>
This attribute is supported by Safari, Chrome, Firefox, Internet
Explorer and Opera.
64. Forms 2.0: Sending multiple files
Some programming languages, such as PHP for example,
require you to add brackets to the name attribute of the tag to
send multiple files:
<input name='filesUploaded[ ]' type=file multiple>
By doing so, PHP will construct an array data type, which will contain
the uploaded files on the server. If you don‘t specify the brackets, the
programming language would process the files in order and only
provide the last file in your script.
65. Microdata
Microdata enables you to further structure your
content by defining nested groups of name-value
pairs. This can be useful in facilitating the automated
parsing of a document.
66. Microdata
Potential uses for microdata include the following:
• Mark up the date of an event, so a browser can automatically
offer to add it to a visitor’s calendar.
• Mark up your product information so that a consumer can easily
perform a side-by-side comparison
• Mark up your contact information, so a browser can automatically
offer to add it to a visitor’s address book.
• Mark up your resume, so that when you use a site like LinkedIn,
you can just point it at your resume page and it can automatically
extract all the information that it needs.
68. Microdata
It is relatively straightforward to define microdata as it utilizes
only two tag attributes:
• Use the itemscope attribute to define a data record
• Use the itemprop attribute to define each data field
70. Microdata
Using microdata usually requires that you build a specification for how
your data objects will be represented. This process is analogous to building
a document type definition (DTD) for XML or defining a data table in an
SQL database. The vocabulary that you define consists of specific property
Names.
See the Google's project about microdata:
http://www.data-vocabulary.org/
71. Microdata
Implementing microdata may make your site more "Google Friendly" in
the future. Google has publically stated that they will recognize specific
data types for the following:
• Your business listing
• Events
• People
• Review Ratings
• Products
• Recipes
• Reviews
• Breadcrumb Links
72. Microdata: custom data
HTML 5 introduces custom data attributes. These are name-value pair
combinations that can be added to any HTML tag and then subsequently
referenced through JavaScript. They have no effect on the visual output of
an element.
The W3C specification states that:
• Custom data attributes are intended to store custom data private to the
page or application, for which there are no more appropriate attributes
or elements.
• These attributes are not intended for use by software that is
independent of the site that uses the attributes.
• Every HTML element may have any number of custom data attributes
specified, with any value
73. Microdata:custom data
Custom data attributes are prefixed with "data-" which ensures they will be
ignored by user agents for rendering purposes.
<h1>Contact List</h1>
<div class="contact"
data-firstname="Marco"
data-lastname="Casario"
data-email="m.casario@comtaste.com"
data-position="CTO">
Marco Casario<br />
CTO Comtaste
</div>
74. Video
HTML 5, publishing a video in a web page has become a truly simple
operation.
All we have to do is declare this markup in the web page, specify the
video to load, and the browser will do the rest (obviously if it supports
the video element):
<video src="your_video.ogg" />
75. Video
Other properties that are supported by the video tag are:
preload: tells the browser to preload the video content while the page is being
loading. This way the user won‘t have to wait for the video to load when playing the
video.
autoplay: tells the browser to play the video automatically as soon as it's available.
You need to be careful with this attribute because you aren‘t always sure that the user
will want to use the video. This is especially true if the user is connected via a mobile
device, which happens more and more frequently, and the use of bandwidth is more
expensive.
loop: re-executes the video as soon as it ends.
controls: if it is specified it tells the browser to display a built-in set of controls such
as play, stop, pause and volume.
poster: specifies an image file that the user agent can show when no video data is
available.
78. Video and mobile devices
If you use the poster attribute, iOS will ignore the video element. Apple
has declared that this bug has been fixed in iOS 4.0
iOS only supports the H.264 format. If you use the <source> tag it will
only recognize the first video format.
Android devices, on the other hand, don‘t support the native controls
of the browser, and will therefore ignore them. Also, the operating
system will get a bit confused on the type attribute, which is used to
specify the video container.
79. Video
Since different browsers support different video formats it is now
incumbent upon you to supply three different video files in order to support
the broadest range of user agents.
Typically this involves making the following files available:
• An .ogg file to support Firefox and Chrome
• An MP4 file to support Safari
• An FLV file to support non-HTML 5 compatible user agents
80. Video Sources
To enable the browser to understand which video format it
needs to load, you can use the source element as follows:
<video controls autoplay>
<source src="comtaste_showreel.ogv">
<source src="comtaste_showreel .mp4">
Sorry, your browser does not support the Video element
</video>
81. Video: HTML5 Media
HTML5media project http://code.google.com/p/html5media.
This project detects the dual support of the video tag and of the video
formats by using a an HTML5 multimedia player.
It supports both H.264 (mp4) and Theora (ogy) formats.
If the browser doesn‘t support the HTML5 video tag, it uses Adobe
Flash Player to provide the same functions of the original video.
This is why we use the Flowplayer Javascript library
(http://flowplayer.org).
82. Video
To enable the HTML5 video tag in all main browsers, all you have to
do is recall the jQuery library and the script in the HEAD of the
document:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></
script>
<script
src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5med
ia.min.js"></script>
Then you can insert the video in an HTML page with the following
code:
<video src="video.mp4" autoplay autobuffer></video>
83. Video controls
It‘s simple to insert a video control in a video content. In fact there is a
controls attribute of the <video> tag that takes advantage of the
browser‘s built-in controls.
All you need to de is specify the attribute in the tag to show the
controllers on the video:
<video width="640" height="360" src="comtaste_showreel.mp4"
controls />
Obviously, every browser will use its own graphic to design the video
controls.
84.
85. Full screen video
You will not be able to launch a video full-screen as the HTML 5 specification
clearly states:
User agents should not provide a public API to cause videos to be shown
full-screen. A script, combined with a carefully crafted video file, could
trick the user into thinking a system-modal dialog had been shown, and
prompt the user for a password. There is also the danger of "mere"
annoyance, with pages launching full-screen videos when links are clicked
or pages navigated. Instead, user-agent-specific interface features may be
provided to easily allow the user to obtain a full-screen playback mode.
86. Full screen video
Safari supports it through webkitEnterFullscreen:
video.webkitEnterFullscreen();
Chrome should support it since it's WebKit also, but errors out.
Firefox said they're coming out with their own version of fullscreen which will
allow any element to go to fullscreen. e.g. Canvas
Opera says they'll support it in a later release.
Since users want it, and every browser is going to support it, the spec will
change
87. Audio
As with the <video> tag, and as evidenced by the following table, you will
need to use the <source> tag and supply multiple versions of the same
media in order to be compatible with all HTML 5 browsers.
88. Canvas
The canvas element is a rectangular area that you can add in your
HTML5 page, and it offers a wide range of graphic possibilities as
you can control every pixel of it through its drawing 2D API.
In itslef the canvas has no drawing abilities of its own and
everything you will draw in it will be drawn programmatically by
using the javascript language.
89. Canvas
Setting the basis and background to be able to draw in htlm5 is
pretty straightforward. You just have to define a canvas element,
The canvas tag is really simple and has only 3 attributes :
width ,height,in pixels, and ‗id‘ to identifiy in which canvas we ll
draw in.
<canvas id=‖canvasID‖ width=‖300‖ height=‖200‖></canvas>
90. Canvas
Your <canvas> is initially empty, a plain area so ,except if you put a
border or background color on it through css , it won‘t appear on
the page before you draw anything inside it. In fact a canvas is a
plain rectangle which will constitute the environment where you will
be able to draw graphics, make animations etc.
<canvas id=‖myCanvas‖ width=‖300‖ height=‖200‖
stye=”border:solid 1px #ccc;‖></canvas>
91. Canvas
Once the canvas is created the first thing you need is to have
access to it. And you‘ll do that like with any other element of the
Document Object Model :
var myCanvas=document.getElementById(―canvasID‖ );
You can then access the canvas rendering context which really
provides the access to the drawing api and its methods.
92. Canvas Type of Context
You can then access the canvas rendering context which really
provides the access to the drawing api and its methods. To retrieve
the context object, the canvas element has the DOM method
getContext(), which has only one parameter: the type of context.
var context=myCanvas.getContext(‗2d‘);
At the time of writing the 2d context , standing for 2 dimensional, is the only one
available .A 3d context starts to be available but only on few browsers and in their beta
version, but we can fairly expect that this will evolve over the coming years. However
we will see only the 2d’s for now.
93. Canvas
If the canvas isn‘t supported the canvas object won‘t be able to call
the getContext() method and it will just a return an undefined value.
Then you‘ll just use the JavaScript double negative trick to coerce
the returned value into a Boolean (true or false) :
return !!document.createElement("canvas").getContext;
if it‘s true it means that the context is defined and that the canvas
is supported, otherwise it isn‘t.
94. Canvas Contexts
You can have several <canvas> elements on the same page but you
can have only one context per canvas
<script type="text/javascript" language="javascript">
var canvas=document.getElementById(‗myCanvas‘);
var context = canvas.getContext("2d");
another_context= canvas.getContext("2d");
</script>
The first context variable will now return null and you have access to
the canvas context through the another_context variable.
95. Canvas Mode Renderer
One important point to understand is that the Canvas uses an
immediate mode renderer. This means that when you call a method to
draw in the Canvas the browser will immediately render that change
before moving on to the next line of code.
This implies that whenever you want to change anything in your
canvas, you‘ll have to re-issue all the drawing commands used on that
canvas as well even if the change affected only one element.
96. Canvas Mode Renderer
This being said the Canvas provides two methods to let you store and
reset the state of your canvas at any point (the canvas drawing state
being a snapshot of all the styles, clipping and transformations values
that have been applied)
save() : will save the current style, clipping and transformation
values.
restore() : will reset the style and transformation values to what they
were was when you called the save() method for the last time on your
context. If you haven't saved anything, then this method will just do
nothing.
97. Canvas
Once you have a pointer to your canvas element you can invoke a
number of methods and properties that fall into the following
categories:
• Line Drawing
• Text Drawing
• Image placement
• Transformation
• Undo / Redo Drawing States
• Converting the canvas to an image (rasterization)
98. Canvas
To have a complete list and overview of the 2D context API
methods available you might want to refer to this useful canvas 2d
context cheat sheet available here:
http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_
Sheet.pdf
100. Communicating using Web Socket
Unlike HTTP connections which are severed after a file has
completed downloading, web sockets establish a persistent
connection to the server thereby enabling near-instantaneous
browser-server communications.
One of the key advantages to using web sockets is that a browser
can respond to data that was initiated by the server (―push‖)
whereas AJAX protocols all rely on such communications
originating from the client (usually at a predefined polling interval).
101. Communicating using Web Socket
Websocket communications are full-duplex – the browser and
server can send and receive data simultaneously.
Note, however, that only plain text may be transmitted. Since
binary data is not yet supported in the API you will need to encode
abstract data types in JSON format prior to transmission.
102. Communicating using Web Socket
The web socket protocol defines two new URI schemes:
ws: and wss:
For unencrypted and encrypted transmission.
You may communicate via websockets via any valid TCP port –
including sharing ports 80/443 with your HTTP server.
On the client, the WebSocket object is supported by Firefox 4,
Google Chrome 4, Opera 10.70 and Safari 5.
103. Communicating using Web Socket
You can open a web socket connection by using the WebSocket
constructor as indicated below:
objSocket = new WebSocket("ws://127.0.0.1:1225");
In this example, 127.0.0.1 is the ip address of your server and
1225 is the TCP port that is listening for web socket traffic.
104. Communicating using Web Socket
Since web socket connections are asynchronous you should also define the
following methods:
objSocket.onopen = function(event) {
alert("Connected to Server");
{
objSocket.onclose = function(event) {
alert("connection terminated");
{
objSocket.onerror = function(event) {
alert("An error occurred");
{
objSocket.onmessage = function(event) {
/* decode data in JSON format from server */
var stData = eval('(' + event.data + ')'); }
105. Communicating using Web Socket
You can send data to the server using the send() method as
indicated by the following code snippet:
objSocket = new WebSocket("ws://127.0.0.1:1225");
objSocket.onopen = function(event) {
objSocket.send("We have liftoff"); }
Note that the send() method may only transmit a text string. In
order to transmit a complex data structure in JavaScript you will
need to stringify it.
Note that a JSON parser and JSON stringifier are available at the following
URL: http://www.json.org/json2.js
106. Drag & Drop
Drag and drop is supported by Firefox 3.6, Google Chrome 7, IE 8,
and Safari 5.
107. Drag & Drop
Making an element draggable is a two step process. First, you
must give the element a draggable attribute.
You must also develop an event listener for ondragstart that
typically verifies that a text selection is not being dragged and
stores data in the dataTransfer object.
108. Drag & Drop
Look at thefollowing code example:
<script>
function drag(target, e) {
e.dataTransfer.setData('text', target.id);
{
</script>
<img
src="../images/steak.jpg"
width="400"
height="339"
id="steak"
draggable="true"
ondragstart="drag(this, event)">
109. Drag & Drop
The following example defines a <div> element as a DROP TARGET for
the draggable images defined in the prior code sample:
<script>
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
return false; }
</script>
<div id="droparea"
ondrop="drop(this, event)"
ondragenter="return false"
ondragover="return false"></div>
110. Storing Data
HTML 4 provided very limited resources (cookies) for storing data on the
user's local machine. HTML 5 completely changes the game by adding
support for the following mechanisms:
• Web Storage for storing simple strings
http://dev.w3.org/html5/webstorage/
• Web SQL Database for storing structured data
http://dev.w3.org/html5/webdatabase/
• Application Caching for storing an HTML page locally, ensuring that
content can be accessed even if http service is interrupted.
http://www.w3.org/TR/offline-webapps/