HTML5 Up and Running

Marco CasarioCTO – Comtastehttp://casario.blogs.com

Maximizing theUser Experiences

“Bringing Sexy Back to the Enterprise applications”by a clever use of Rich Internet Applications andMultimedia content.Because better information workplaces:make customers happierimprove the quality of work life for employees

In other words:RIAs in enterprise environments dramaticallyincrease staff productivity and responsivecapacityMultimedia 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

ShowcaseComtaste 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 CASEHISTORIES

ShowcaseGoogle UKWe are working with an international team situated mostly in Parisand London aimed to deliver tools as part of a high-profile projectused by all of Google‘s AdWords customers.

ShowcaseMaggioli S.p.A.Maggioli SpA is one of the largest Italian companies thatprovide products and services for LPA, with a particularfocus on production and assistance for governmentalmanagement software.Maggioli immediately perceived the need to builddistributed applications (both resident and web-based) thatwere more usable, interactive and rapid, which were in lineand often anticipated the general evolution of the userbase and the market in terms of user experience.What we’ve done for them: • Training • Mentoring • User Interface Design

Showcase INPDAPWhat we’vedone for them:Development, userinterface design anddeploying of a RIAapplication to archive,distribute, and searchfor documents.

ShowcaseDashboard applications

CLIENTS

Partnership

ShowcaseUBI Bank GroupUBI Banca is the fifth largest Italian banking Group in terms ofbranches with a market share of approximately 6% and asignificant presence in the wealthiest areas of the country.Comtaste supported UBI to create the larget RIA in Europe tooffer more interactive banking services, and enhance thetimeliness and quality of banking services.What we’ve done for them:Development, training, user interface design and deploying.

ShowcaseUBI Bank GroupUBI calculated the ROI measuring execution time andnumber of clicks made by a user to perform an operation(depositing a check on a c/a):

ShowcaseScrewfix Google App

HTML 5 Solutions

We Want You Java & Flex Developersjob@comtaste.com

1 The Semantic Web2 Forms 2.03 Microdata

4 Video and Audio5 Canvas6 Web Sockets and Communication

7 Canvas8 Drag & Drop9 Flash vs. HTML5

HTML 5 and the Semantic WebThe Semantic Web is not a separate Web but an extension ofthe current one, in which information is given well-definedmeaning, better enabling computers and people to work incooperation. Tim Berners-Lee

HTML Timeline

html5test.com

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

Resources

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, itsdropped !

Modernizr: HTML5 Hero

Modernizr: HTML5 HeroModernizr uses feature detection mechanic to establish todetermine what you can and cannot do in the current browser, andModernizr makes it convenient for you in a variety of ways:It tests for over 20 next-generation features, all in a matter ofmilliseconds;It creates a JavaScript object (named Modernizr) that contains theresults of these tests as boolean properties;It adds classes to the html element that explain precisely whatfeatures are and are not natively supported

Modernizr: HTML5 HeroTo install Modernizr, download the file from this page. Then, onyour 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 featuresof your site won‘t work either…), so it‘s good that we have a fallbackfor that case.

Modernizr: HTML5 HeroYou can detect features using Modernizr in your JavaScript, using thissyntax: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 EncodingHTML 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 DIVsMany of the improvements to HTML center around replacingcommon uses of the <div> tag with more semantically precisecommands such as the following:<section><article><aside><hgroup><header><time><footer><nav><figure><figcaption><output><meter><wbr>

No more DIVsThe goal of implementing these commands is to minimize theuse of <div> so that it becomes a "tag of last resort" - used onlyif no other tags are semantically appropriate

The HTML 4 approach

The HTML5 approach

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

Forms 2.0HTML 5 forms introduce a new set of tools to makeform development easier and richer.Here are some of the new form elements introducedby 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.0Even the grammar for the declaration of elements ofform changes with HTML 5. In fact, now you candeclare a form element on any point of the page, andassociate it to a form object by using the formattribute of the element:<form id=”myForm” /><input type=”text” form=”myForm” />

Forms 2.0: the email typeThe <input type=‖email‖> tag creates a form elementthat expects to receive a valid email address from theuser. The form control obviously doesn‘t verifywhether or not the email address actually exists, butonly if the text the user inserts into the field has avalid syntax.<label for=email>Email</label><input id=email name=email type=email><br/>

Forms 2.0: the email type

Forms 2.0: The email typeFor some of these devices, the browser is able to recognize thenew HTML 5 input types and changes the on-screen keyboardto help users for that kind of input.In fact, these devices show the virtual keyboard with the @ andperiod symbols included on the primary screen when focusingon the text input

Forms 2.0: The SpinnerHTML 5 helps developers by adding a spinner control to the toolarsenal.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 displayeach number in the text field

Forms 2.0: The SpinnerSome attributes allow you to customize the control. Theseproperties allow you to set a maximum and minimum value, andthe 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">

Forms 2.0: The SpinnerThere are a couple of interesting methods that can be used bydevelopers 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

Forms 2.0: The SpinnerThe browsers in some tablets howeverbehave differently.The Figure shows how the browserused by the 7-inch Samsung Galaxy Tab,based on Android 2.2, renders the inputcontrol as a simple text input.However it dynamically displays thenumeric on-screen keyboard

Forms 2.0: Sending multiple filesHTML 5, and with the addition of an attribute, makes possible toselect and send more than one file:<input type="file" multiple>This attribute is supported by Safari, Chrome, Firefox, InternetExplorer and Opera.

Forms 2.0: Sending multiple files

Forms 2.0: Sending multiple filesSome programming languages, such as PHP for example,require you to add brackets to the name attribute of the tag tosend multiple files:<input name=filesUploaded[ ] type=file multiple>By doing so, PHP will construct an array data type, which will containthe uploaded files on the server. If you don‘t specify the brackets, theprogramming language would process the files in order and onlyprovide the last file in your script.

MicrodataMicrodata enables you to further structure yourcontent by defining nested groups of name-valuepairs. This can be useful in facilitating the automatedparsing of a document.

MicrodataPotential uses for microdata include the following:• Mark up the date of an event, so a browser can automaticallyoffer to add it to a visitor’s calendar.• Mark up your product information so that a consumer can easilyperform a side-by-side comparison• Mark up your contact information, so a browser can automaticallyoffer 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 automaticallyextract all the information that it needs.

MicrodataHow Google shows a result that uses microdata

MicrodataIt is relatively straightforward to define microdata as it utilizesonly 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#">Authors original URL</a>.</p><p><img src="img/bread.JPG" itemProp="name" /></p>

MicrodataUsing microdata usually requires that you build a specification for howyour data objects will be represented. This process is analogous to buildinga document type definition (DTD) for XML or defining a data table in anSQL database. The vocabulary that you define consists of specific propertyNames.See the Googles project about microdata:http://www.data-vocabulary.org/

MicrodataImplementing microdata may make your site more "Google Friendly" inthe future. Google has publically stated that they will recognize specificdata types for the following:• Your business listing• Events• People• Review Ratings• Products• Recipes• Reviews• Breadcrumb Links

Microdata: custom dataHTML 5 introduces custom data attributes. These are name-value paircombinations that can be added to any HTML tag and then subsequentlyreferenced through JavaScript. They have no effect on the visual output ofan element.The W3C specification states that:• Custom data attributes are intended to store custom data private to thepage or application, for which there are no more appropriate attributesor elements.• These attributes are not intended for use by software that isindependent of the site that uses the attributes.• Every HTML element may have any number of custom data attributesspecified, with any value

Microdata:custom dataCustom data attributes are prefixed with "data-" which ensures they will beignored 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>

VideoHTML 5, publishing a video in a web page has become a truly simpleoperation.All we have to do is declare this markup in the web page, specify thevideo to load, and the browser will do the rest (obviously if it supportsthe video element):<video src="your_video.ogg" />

VideoOther properties that are supported by the video tag are: preload: tells the browser to preload the video content while the page is beingloading. This way the user won‘t have to wait for the video to load when playing thevideo. autoplay: tells the browser to play the video automatically as soon as its available.You need to be careful with this attribute because you aren‘t always sure that the userwill want to use the video. This is especially true if the user is connected via a mobiledevice, which happens more and more frequently, and the use of bandwidth is moreexpensive. 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 suchas play, stop, pause and volume. poster: specifies an image file that the user agent can show when no video data isavailable.

Video Browser Support

Video and mobile devicesIf you use the poster attribute, iOS will ignore the video element. Applehas declared that this bug has been fixed in iOS 4.0iOS only supports the H.264 format. If you use the <source> tag it willonly recognize the first video format.Android devices, on the other hand, don‘t support the native controlsof the browser, and will therefore ignore them. Also, the operatingsystem will get a bit confused on the type attribute, which is used tospecify the video container.

VideoSince different browsers support different video formats it is nowincumbent upon you to supply three different video files in order to supportthe 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 SourcesTo enable the browser to understand which video format itneeds 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 MediaHTML5media project http://code.google.com/p/html5media.This project detects the dual support of the video tag and of the videoformats 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 AdobeFlash Player to provide the same functions of the original video.This is why we use the Flowplayer Javascript library(http://flowplayer.org).

VideoTo enable the HTML5 video tag in all main browsers, all you have todo is recall the jQuery library and the script in the HEAD of thedocument:<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><scriptsrc="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script>Then you can insert the video in an HTML page with the followingcode:<video src="video.mp4" autoplay autobuffer></video>

Video controlsIt‘s simple to insert a video control in a video content. In fact there is acontrols attribute of the <video> tag that takes advantage of thebrowser‘s built-in controls.All you need to de is specify the attribute in the tag to show thecontrollers on the video:<video width="640" height="360" src="comtaste_showreel.mp4"controls />Obviously, every browser will use its own graphic to design the videocontrols.

Full screen videoYou will not be able to launch a video full-screen as the HTML 5 specificationclearly states:User agents should not provide a public API to cause videos to be shownfull-screen. A script, combined with a carefully crafted video file, couldtrick the user into thinking a system-modal dialog had been shown, andprompt the user for a password. There is also the danger of "mere"annoyance, with pages launching full-screen videos when links are clickedor pages navigated. Instead, user-agent-specific interface features may beprovided 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 its WebKit also, but errors out.Firefox said theyre coming out with their own version of fullscreen which willallow any element to go to fullscreen. e.g. CanvasOpera says theyll support it in a later release.Since users want it, and every browser is going to support it, the spec willchange

AudioAs with the <video> tag, and as evidenced by the following table, you willneed to use the <source> tag and supply multiple versions of the samemedia in order to be compatible with all HTML 5 browsers.

CanvasThe canvas element is a rectangular area that you can add in yourHTML5 page, and it offers a wide range of graphic possibilities asyou can control every pixel of it through its drawing 2D API.In itslef the canvas has no drawing abilities of its own andeverything you will draw in it will be drawn programmatically byusing the javascript language.

CanvasSetting the basis and background to be able to draw in htlm5 ispretty 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 lldraw in.<canvas id=‖canvasID‖ width=‖300‖ height=‖200‖></canvas>

CanvasYour <canvas> is initially empty, a plain area so ,except if you put aborder or background color on it through css , it won‘t appear onthe page before you draw anything inside it. In fact a canvas is aplain rectangle which will constitute the environment where you willbe able to draw graphics, make animations etc.<canvas id=‖myCanvas‖ width=‖300‖ height=‖200‖stye=”border:solid 1px #ccc;‖></canvas>

CanvasOnce the canvas is created the first thing you need is to haveaccess to it. And you‘ll do that like with any other element of theDocument Object Model :var myCanvas=document.getElementById(―canvasID‖ );You can then access the canvas rendering context which reallyprovides the access to the drawing api and its methods.

Canvas Type of ContextYou can then access the canvas rendering context which reallyprovides the access to the drawing api and its methods. To retrievethe context object, the canvas element has the DOM methodgetContext(), 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 oneavailable .A 3d context starts to be available but only on few browsers and in their betaversion, but we can fairly expect that this will evolve over the coming years. Howeverwe will see only the 2d’s for now.

CanvasIf the canvas isn‘t supported the canvas object won‘t be able to callthe getContext() method and it will just a return an undefined value.Then you‘ll just use the JavaScript double negative trick to coercethe 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 canvasis supported, otherwise it isn‘t.

Canvas ContextsYou can have several <canvas> elements on the same page but youcan 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 tothe canvas context through the another_context variable.

Canvas Mode RendererOne important point to understand is that the Canvas uses animmediate mode renderer. This means that when you call a method todraw in the Canvas the browser will immediately render that changebefore moving on to the next line of code.This implies that whenever you want to change anything in yourcanvas, you‘ll have to re-issue all the drawing commands used on thatcanvas as well even if the change affected only one element.

Canvas Mode RendererThis being said the Canvas provides two methods to let you store andreset the state of your canvas at any point (the canvas drawing statebeing a snapshot of all the styles, clipping and transformations valuesthat have been applied)save() : will save the current style, clipping and transformationvalues.restore() : will reset the style and transformation values to what theywere was when you called the save() method for the last time on yourcontext. If you havent saved anything, then this method will just donothing.

CanvasOnce you have a pointer to your canvas element you can invoke anumber of methods and properties that fall into the followingcategories:• Line Drawing• Text Drawing• Image placement• Transformation• Undo / Redo Drawing States• Converting the canvas to an image (rasterization)

CanvasTo have a complete list and overview of the 2D context APImethods available you might want to refer to this useful canvas 2dcontext cheat sheet available here:http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf

Canvas DEMO

Communicating using Web SocketUnlike HTTP connections which are severed after a file hascompleted downloading, web sockets establish a persistentconnection to the server thereby enabling near-instantaneousbrowser-server communications.One of the key advantages to using web sockets is that a browsercan respond to data that was initiated by the server (―push‖)whereas AJAX protocols all rely on such communicationsoriginating from the client (usually at a predefined polling interval).

Communicating using Web SocketWebsocket communications are full-duplex – the browser andserver can send and receive data simultaneously.Note, however, that only plain text may be transmitted. Sincebinary data is not yet supported in the API you will need to encodeabstract data types in JSON format prior to transmission.

Communicating using Web SocketThe 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.

Communicating using Web SocketYou can open a web socket connection by using the WebSocketconstructor 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 and1225 is the TCP port that is listening for web socket traffic.

Communicating using Web SocketSince web socket connections are asynchronous you should also define thefollowing 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 + )); }

Communicating using Web SocketYou can send data to the server using the send() method asindicated 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. Inorder to transmit a complex data structure in JavaScript you willneed to stringify it.Note that a JSON parser and JSON stringifier are available at the followingURL: http://www.json.org/json2.js

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

Drag & DropMaking an element draggable is a two step process. First, youmust give the element a draggable attribute.You must also develop an event listener for ondragstart thattypically verifies that a text selection is not being dragged andstores data in the dataTransfer object.

Drag & DropLook 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 & DropThe following example defines a <div> element as a DROP TARGET forthe 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 DataHTML 4 provided very limited resources (cookies) for storing data on theusers local machine. HTML 5 completely changes the game by addingsupport for the following mechanisms:• Web Storage for storing simple stringshttp://dev.w3.org/html5/webstorage/• Web SQL Database for storing structured datahttp://dev.w3.org/html5/webdatabase/• Application Caching for storing an HTML page locally, ensuring thatcontent can be accessed even if http service is interrupted.http://www.w3.org/TR/offline-webapps/

The Flash Platform vs. HTML5 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).© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Flash Platform vs. HTML5 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).© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Flash Platform vs. HTML5 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.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Flash Platform vs. HTML5 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.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Flash Platform vs. HTML5 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).© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Flash Platform vs. HTML5 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.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Flash Platform vs. HTML5 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‖.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Marco CasarioCTO – Comtastehttp://casario.blogs.com

http://jamesonlewis3rd.com	138
http://www.codemotion.it	98
http://2011.codemotion.it	42
http://codemotion.it	22
http://localhost	7
http://webcache.googleusercontent.com	3

HTML5 Up and Running

by Codemotion

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 310

Statistics

HTML5 Up and Running Presentation Transcript