HTML5 Up and Running

Marco Casario
CTO – Comtaste
http://casario.blogs.com

Maximizing the
User Experiences

“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

In other words:

RIAs in enterprise environments dramatically
increase staff productivity and responsive
capacity

Multimedia contents add enhanced effectiveness

The technologies we use:

 J2EE (Java, JSP, Hibernate, EJB3, Struts, Spring)
 Ajax
 Flash
 Flex
 AIR
 Flash Media Server

Who can make it possible

J2EE Developers Flex/Flash Developers Creative UI Designers

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.

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.

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

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.

Showcase

Dashboard applications

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.

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):

We Want You

Java & Flex
Developers

job@comtaste.com

1 The Semantic Web

2 Forms 2.0

3 Microdata

4 Video and Audio

5 Canvas

6 Web Sockets and Communication

7 Canvas

8 Drag & Drop

9 Flash vs. HTML5

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

Web Designers' HTML5 & CSS3 Checklist published by
http://www.findmebyip.com

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 !

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

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.


You can detect features using Modernizr in your JavaScript, using this
syntax:

if (Modernizr.geolocation) {

// whatever

}

Using the new <DOCTYPE>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting Started</title>
</head>
<body></body>
</html>

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">

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>

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

No more DIVs

<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

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.

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>

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

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

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” />

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/>

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

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

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">

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

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

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.

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.

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.

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.

Microdata
How Google shows a result that uses microdata

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

Microdata

<section itemscope itemtype="http://www.data-vocabulary.org/Recipe">

<h1 itemProp="name">
Ciabatta Bread
</h1>
<p>
<a itemProp="author"
href="http://groups.google.com/group/alt.bread.recipes/browse_thread/thread/
ad0e477790ef4f03/a644f520f4b3cd48?rnum=2#">Author's original URL</a>.
</p>

<p><img src="img/bread.JPG" itemProp="name" />
</p>

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/

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

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

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>

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" />

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.

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.

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

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>

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).

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>

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.

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.

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

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.

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.

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>

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>

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.

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.

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.

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.

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.

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.

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)

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

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).


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.


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.


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.


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


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

Drag & Drop

Drag and drop is supported by Firefox 3.6, Google Chrome 7, IE 8,
and Safari 5.

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.

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)">

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>

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/

The Flash Platform vs. HTML5

WebApocalypse Now



WebApocalypse Now

HTML5 is the future of the Web, but that future could
take a very long time.

The HTML5 is large and complex, and current projections by
the people working on the spec (Ian Hickson of Google and David Hyatt of Apple)
are for all parts to be finished in the year 2022,
some 18 years after the process began (in 2004).



WebApocalypse Now

The working subset of HTML5 is nowhere near the power
of Flash.

There are many advanced effects that are only available in Flash or Silverlight or
Java. For example, Google, which is driving HTML5, relies on Flash in Google
Maps (for the Streetview) and in YouTube (for the video and video controller).



WebApocalypse Now

It’s not just about features, but also about deployed
infrastructure.

This benefits Flash.
A pragmatic perspective should look at the numerous tools, ad engines, business
processes, infrastructure and platforms that support and/or enable Flash-based
advertising.



WebApocalypse Now

Apple’s resistance to Flash is irrational and long-
standing.

The comments about performance and security are hypocritical given that iPhone
OS versions are regularly jailbroken through security flaws in Quicktime, Safari
and other parts of the stack, and that there are many thousands of apps in the
App Store written by semi-skilled programmers, or those who are in it for a quick
buck.



WebApocalypse Now

Flash has a long record of being light, fast and
(reasonably) secure.

Which is why it is found in 98% of Internet connected PCs, and why it succeeded
while other approaches failed in the market (client-side Java, ActiveX, WPF, etc).



WebApocalypse Now

There is a portion of the Web that requires richer
interaction.

Your applications might require extensive offline processing, direct manipulation
of graphics, real-time notifications and alerts, high-speed binary communication
protocols, tight integration with local devices, and so on.



WebApocalypse Now

The choice among these technologies is not “all or
none”.

One approach that many, if not most, organizations might end up pursuing is a
hybrid approach — sometimes known as ―islands of RIA‖ or supporting ―hot spots
of interactivity‖.


HTML5 Up and Running

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Ähnlich wie HTML5 Up and Running

Ähnlich wie HTML5 Up and Running (20)

Mehr von Codemotion

Mehr von Codemotion (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML5 Up and Running