BUT REALLY... WHAT IS

STRUCTURE PRESENTATION BEHAVIOR

HTML5

A Publication of

YOU REQUEST. WE RESPOND. IT GETS DONE!®

But Really... What Is HTML5? 1 TABLE OF CONTENTS

Introduction 3 Structure 4 Data Attributes 4 Async/Defer Scripts 5 Session History 6 Aria 7 Semantic Elements 8 Micro Data 9 Form Updates 10 Integration 11 Web Notifications 11 Cross Document Messaging 12 Geolocation 13 Device Orientation 14 DOM Elements 15 Get Media/HTML Media Capture 16 Beacon 17 Performance 18 Web Workers 18 Navigation Timing 19 Page Visibility 20 Graphics 21 Canvas 21 WebGL 22 SVG 23 Media 24 Web Audio 24 Web Video 25 Storage 26 Web Storage 26 IndexedDB 27 File API 28 Security 29 Web Components 30

But Really... What Is HTML5? in 2 HTML5 has become a buzzword for everything that is new with the web. Everyone wants it, but most have no idea what it is. In the simplest terms, HTML5 is the 5th official version of the HTML codebase. Its main purpose is to create standards for the new way that we look at websites. The web of today looks much different than the web six years ago. We have the speed and technology to provide some very immersive experiences for our clients, but as always, to quote Spiderman, “With great power comes great responsibility.” As we work on creating these amazing experiences, we need to be mindful of all of our users, especially the ones on mobile devices.

Some new standards for other front-end code bases are grouped with HTML5, which causes confusion as to what exactly makes a website HTML5. HTML provides the structure of a website, CSS is responsible for how it looks and Javascript is used to determine how it behaves. These scripts work together to create what you see on a standard web page and they are the backbone of HTML5.

STRUCTURE PRESENTATION BEHAVIOR

HTML5

An HTML5 site is made up of one or more of the various APIs (application programming interfaces) that are starting to become available for use within the HTML5 official specifications. It is important to remember; however’ that many of the awesome APIs that are going to make HTML5 really powerful may be drafts and not fully supported by legacy browsers. If you plan to use any for your upcoming project, check to make sure the browser requirements meet the scope of the project.

But Really... What Is HTML5? in 3 STRUCTURE

Data Attributes

Data attributes are a seemingly small addition to the HTML toolbelt, but they can be quite helpful. For a long time, developers struggled with the best way to embed data into their HTML. These attributes are now a way for develop- ers to accomplish this while still writing valid HTML code. The specification for these data attributes simply states that any attribute that beings with “data-” will be treated as storage. This data will not affect the layout of the site and the user won’t be able to see it.

...

But Really... What Is HTML5? in 4 STRUCTURE

Async/Defer Scripts

Before HTML5, everything on the page would be downloaded one at a time in the order in which it was listed in the code. This means that anything located in the tag of your page would have to be downloaded and executed before anything on the page would become visible. The webpages of today are generally much more complex and have many more dependencies. Some- times these dependencies aren’t needed right away so we could speed up our perceived load time (the time the user perceives the page to load as opposed to the actual time it takes to load all of the page’s assets) by just having the script load later on or inline with everything else. With HTML5 we can now do just that. Using “async” in the script tag will make that script download along with the HTML parser then pause to execute when the script is fully down- loaded. With “defer” the script will also download the script in parallel with the HTML parser, but wait until the HTML parser is completed before execut- ing the script.

But Really... What Is HTML5? in 5 STRUCTURE

Session History

Web applications have been growing with complexity, and with this new com- plexity, a whole new realm of issues have surfaced. One of which is the way we interact with URLs. Being able to separate resources into different URLs is obviously ideal, but in order to change the URL in the browser, we would have to make a trip to the server and then perform a full page reload. This isn’t desirable if all we need to do is change part the page, especially if the user expects their action to keep them on the current page. With the new HTML5 Session History API, this is no longer an issue. We can now manipulate URLs and the browser history without triggering a full page reload.

window.history.back();

window.history.forward();

window.addEventListener(‘popstate’, function(event) {

var state = event.state;

}); But Really... What Is HTML5? in 6 STRUCTURE

Aria

An important, but unfortunately often overlooked, part of web development is accessibility. Everyone should be able to use your site regardless of any disabilities they may have. Sites can look and work perfectly to users looking at it and using their mouse, but fail miserably when a screen reader tries to decipher the structure. ARIA, which stands for Accessible Rich Internet Ap- plications, defines a way to make web content and web applications more ac- cessible to people with disabilities. The World Wide Web Consortium (W3C) developed standards on how we should define roles within our application to help screen readers and the like figure out how the page is set up. This is spe- cifically useful when using non-semantic tags.

Title of your document

1. alpha
2. bravo
3. charlie
4. delta

Main Content

Important content

Sidebar

Complementary content

Footer

Information about the document

But Really... What Is HTML5? in 7 STRUCTURE

Semantic Elements

This new feature of HTML5 is probably the most written about part of the HTML5 specification because it’s a complete change in how we code a web- site. In the early days, tables were the best way to build your website. Eventu- ally it became obvious that developers needed more control over the struc- ture of their sites that tables just couldn’t handle. To accomplish this, using the

tag became the standard way to build a site. Developers could put a class or id on the

and then style the layout in the CSS. The smart people that are on the W3C team realized that many of the sites were devel- oped in similar ways. So instead of the non-descript

tags, they began to implement semantic tags such as

,

,

,

and

. These make developing for the web more manageable and provide a standard for web structure.

But Really... What Is HTML5? in 8 STRUCTURE

Microdata

Web crawlers, like Googlebot, scrape websites and dissect them to figure out what each page is about. Microdata’s goal is to help this process by provid- ing the meaning of an item. For instance, using Microdata, we can tag content that serves a specific purpose like an address or a product. The content devel- opers can tag falls under markup vocabularies called schemas. These schemas include People, Events, Organizations, Products, Reviews, Breadcrumbs, and Offers. Major search engines use this markup to help improve search results.

To implement properly, you must wrap the content in an itemscope as well as define the schema using itemtype. Then you can tag any content in that scope with properties related to the schema loaded. http://schema.org/ is the library to use when doing this.

100 Main Street
Anytown, PA 19999 USA

But Really... What Is HTML5? in 9 STRUCTURE

Forms

One of the most important parts of a static website is the form. It’s how many companies generate the leads they need to run their business. As customers, we use it as a reliable way to show our interest in a company. For developers, creating web forms with validation has never been fun and usually involved a few hacks to make them work correctly. HTML5 sets out to make the devel- oper’s job a little easier by adding some brand new APIs for input types, vali- dation and interaction. Some new input types include email addresses, urls, color, range, telephone and search. This makes the inputs more semantic and help with validation.

Form validation helps improve the user experience by providing clear guide- lines and feedback. Before HTML5, developers would have to create custom scripts to handle any form validation. To make things easier, the new HTML standard provides easy ways to require fields and validate special data.

//Required Email Input Field

//Number Input But Really... What Is HTML5? in 10 INTEGRATION

Web Notifications

We’re all familiar with notifications from applications on our mobile devices, and now there is a way to provide this same type of functionality for our users on a desktop. The notification allows us to alert the user outside the context of the web page for something like a new email. The Web Notifications API doesn’t specify how and where these notifications need to be displayed, so they look different depending on the browser. Luckily, browsers also imple- mented features so the user can choose which sites can send notifications, otherwise sites would end up taking advantage of this and upsetting the user.

Notify me! function notifyMe() { if (!(“Notification” in window)) { alert(“This browser does not support desktop notification”); } else if (Notification.permission === “granted”) { var notification = new Notification(“Hi there!”); } else if (Notification.permission !== ‘denied’) { Notification.requestPermission(function (permission) { if (permission === “granted”) { var notification = new Notification(“Hi there!”); } }); } } But Really... What Is HTML5? in 11 INTEGRATION

Cross Document Messaging

Developers are starting to build web applications in ways that they need to interact with each other and the postMessage() method was made for just that. Previously, sending messages between windows wasn’t possible unless that window used the same protocol, port and host. The postMessage method acts as cross domain AJAX. To implement, you must first setup the source of the message and then setup the destination. The origin of the message has to be defined in the destination window for security purposes.

//Code on document A var o = document.getElementsByTagName(‘iframe’)[0]; o.contentWindow.postMessage(‘Hello B’, ‘http://example.com/’); //Code on document B function receiver(event) { if (event.origin == ‘http://example.net’) { if (event.data == ‘Hello B’) { event.source.postMessage(‘Hello A, how are you?’, event.origin); } else { alert(event.data); } } } window.addEventListener(‘message’, receiver, false); But Really... What Is HTML5? in 12 INTEGRATION

Geolocation

The HTML5 geolocation API lets you share your location with websites that you trust. The website can use this data to send you information about your surroundings or find you on a map. Privacy is definitely a concern with this new API, so the user must permit the use of this. The website shouldn’t rely on this information in case the user decides not to allow their location to be shared. The coordinates interface specification states that the geographic coordinate reference system used by the attributes in this interface is the World Geodetic System (2d). No other reference system is supported. The geolocation API allows you to access information about the user’s latitude, longitude, altitude, heading and speed. It can also determine how accurate the information is to the meter.

function get_location() { navigator.geolocation.getCurrentPosition(show_map); }

function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // Show a map or do something else with the information }

But Really... What Is HTML5? in 13 INTEGRATION

Device Orientation

The devices that many of us carry around every day come standard with tech- nologies to capture motion and orientation data. These technologies include accelerometers, gyroscopes and compasses. Web browsers allow us to access this information by the HTML5 DeviceOrientation and DeviceMotion events. Developers can use this information to change things on the screen depend- ing on how the device is oriented. This technology is also great for controlling an object like a camera in an interactive walkthrough.

if (window.DeviceOrientationEvent) { document.getElementById(“doEvent”).innerHTML = “DeviceOrientation”; window.addEventListener(‘deviceorientation’, function(eventData) { // gamma is the left-to-right tilt in degrees, where right is positive var tiltLR = eventData.gamma; // beta is the front-to-back tilt in degrees, where front is positive var tiltFB = eventData.beta; // alpha is the compass direction the device is facing in degrees var dir = eventData.alpha // call our orientation event handler deviceOrientationHandler(tiltLR, tiltFB, dir); }, false); } else { document.getElementById(“doEvent”).innerHTML = “Not supported.” } But Really... What Is HTML5? in 14 INTEGRATION

DOM Events

The Document Object Model or DOM is a representation of a webpage in the form of a tree structure that developers use to listen for events and manipu- late the page. HTML5 added and created an official standards for ventse that either never existed before or required the use of a library. With the creation of the new audio/video APIs also came events to control how we can interact with the media. These allow us to run scripts on events such as on play, on pause, on waiting and on playing. Another new HTML5 feature allows us to drag and drop specified items from within a web page. To control this feature we have access to events like on drag, on drop and on drag over. These new events give developers more control to create a customized user experience.

function checkDrag(event){ return event.dataTransfer.types.contains(“application/x-moz-file”); } function doDrop(event){ var file = event.dataTransfer.mozGetDataAt(“application/x-moz-file”, 0); if (file instanceof Components.interfaces.nsIFile) event.currentTarget.appendItem(file.leafName); }

But Really... What Is HTML5? in 15 INTEGRATION

Get Media

Audio and video capture was always a difficult task in web developement and always required some sort of browser plugin such as Microsoft’s Silverlight. HTML5 now provides a standard way to accomplish this task. An example of this in use would be a form that requires a headshot. You could use the ge- tUserMedia() method to get access to the device’s camera and capture an im- age that could be used in the form. This functionality could present a privacy concern for the user, so they must provide permission to use it. This opens up the ability for web applications to utilize the user’s hardware without creating a native application.

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector(‘video’);

if (navigator.getUserMedia) { navigator.getUserMedia({audio: true, video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); }, errorCallback); } else { video.src = ‘somevideo.webm’; // fallback. } But Really... What Is HTML5? in 16 INTEGRATION

Beacon

The beacon is a new, helpful API that allows developers to send data to a serv- er without having to wait for the server to reply back. A great example of this is if we wanted to send analytics information as soon as a user leaves the site or goes to a new page. The only way to do this previously was to make a syn- chronous request on the javascript’s unload event. This would cause a bit of a stutter and would delay the next page from loading causing a poor user expe- rience. The beacon allows for an asynchronous request with a small amount of data from the browser to the server without delaying the unload or affect- ing performance.

function() { window.addEventListener(‘unload’, logData, false); function logData() { navigator.sendBeacon( ‘https://testAppURL.com’, ‘Sent by a beacon!’); } }();

But Really... What Is HTML5? in 17 PERFORMANCE

Web Workers

Web workers provide a simple way for content to run scripts in the back- ground without affecting the performance of the page. This is great for CPU intensive tasks and doesn’t stop other scripts from executing while the web worker is running. The vision for web worker scripts are heavy, long-lived and have a high start-up performance cost. Simple events such as button clicks, select box changes and submits wouldn’t stop any of these scripts from run- ning. These scripts do not have direct access to the DOM, but they can com- municate with the document via message passing, hence creating a multi- threaded javascript program.

var worker = new Worker(‘doWork.js’);

worker.addEventListener(‘message’, function(e) { console.log(‘Worker said: ‘, e.data); }, false);

worker.postMessage(‘Hello World’); // Send data to our worker.

But Really... What Is HTML5? in 18 PERFORMANCE

Navigation Timing

The navigation timing object provides information to accurately monitor a web application’s performance. Other javascript libraries created to do this were not able to provide real end-to-end latency data. This API can help de- termine things like a user’s perceived load time, server response times and many other areas that will provide insight to create the fastest possible expe- rience for the user.

//Calculate the total time required to load a page: var perfData = window.performance.timing; var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

//Calculate request response times: var connectTime = perfData.responseEnd - perfData.requestStart; But Really... What Is HTML5? in 19 PERFORMANCE

Page Visibility

Today’s web browsing experience usually involves switching back and forth between multiple tabs in a browser. The page visibility API allows us to tell if our webpage is currently visible to the user or not. This opens up the pos- sibility to add some functionality to pages that aren’t visible. For instance, our site might want to only display desktop notifications if it’s hidden, or we may want to pause the rotating slider until the page is visible again. This also opens up the ability to track the actual time the site is visible rather than just up in a hidden tab.

document.addEventListener(‘visibilitychange’, function(event) { if (!document.hidden) { // The page is visible. } else { // The page is hidden. } });

But Really... What Is HTML5? in 20 GRAPHICS

Canvas

The official specification of the HTML5 canvas provides scripts with a resolu- tion-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art or other visual images on the fly. It’s strictly 2 dimensional for now, but the documentation suggests that it is likely to change and allow for 3 dimensional objects. Every element has its own drawing context, and you must call that method to get started using the canvas. JavaScript is used to draw anything within this tag.

var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = ‘yellow’; context.fill(); context.lineWidth = 7; context.strokeStyle = ‘black’; context.stroke();

But Really... What Is HTML5? in 21 GRAPHICS

WebGL

The Web Graphics Library is a Javascript API for rendering 3D and 2D graph- ics without the use of any plugins. Of course, this is only applicable for com- patible web browsers. It takes advantage of the HTML element to do this. While extremely powerful, the actual WebGL API is generally too te- dious to use directly. Libraries have been created to aid developers and setup typical views and handle some of the labor intensive work such as Three. js. WebGL is great for extremely immersive experiences such as a 3D walk- through of a space or a creating a digital version of a basic game like jenga.

But Really... What Is HTML5? in 22 GRAPHICS

SVG

The Scalable Vectors Graphic or SVG, is an image format for vector graphics. Vector graphics are unlike raster images in that they can scale up and down without any loss of clarity. Some other benefits of using this image type are small images sizes that compress well. The images will still be crisp on retina screens and the developer can control design elements like color for inter- activity. SVGs can be exported from programs such as Adobe Illustrator and used right on the web. It is suggested to have a backup in .png or .jpg format for graceful degradation purposes.

But Really... What Is HTML5? in 23 MEDIA

Web Audio

Before HTML5 introduced a web audio standard, one of the only ways to embed audio into a website was to use a plugin such as Flash. The

Your browser does not support the audio element

But Really... What Is HTML5? in 24 MEDIA

Web Video

Video, just like audio, required a third-party plugin to work. People looked towards Flash to provide this functionality for a long time, but then mobile devices started to take over. These devices began dropping support for Flash which is why this HTML5 option is so important. Like the audio API, the HTML

But Really... What Is HTML5? in 25 STORAGE

Web Storage

Web storage is a way for developers to store key/value pairs within the client browser. The data persists after the user navigates away from the web page, but this data never gets sent to the remote web server which makes it differ- ent from cookies. The data is always stored as a string, but can be parsed by javascript to be a float or integer. You can even track changes to your storage when a set, remove or clear method is called. A use case for this API could be a video that saves the timecode in case the user navigates away and then back again. That user could pick up where they left off instead of having to find their place again.

localStorage.setItem(‘carType’,’Mustang’);

var car = localStorage.getItem(‘carType’);

But Really... What Is HTML5? in 26 STORAGE

IndexedDB

IndexedDB is another local storage solution that is meant to work with sig- nificantly large amounts of data. The API provides indexes to run basic que- ries on the database and fetch records by looking up their keys in specific key ranges. While this would seem to be the best local storage solution in every case, that’s not necessarily true. The API is much more complicated than that of web storage and requires a basic understanding of how databases work. IndexedDB could provide a great solution for your web application to work offline.

/*Opening The Database*/ milesTech.indexedDB.db = null;

milesTech.indexedDB.open = function() { var version = 1; var request = indexedDB.open(“app”, version);

request.onsuccess = function(e) { milesTech.indexedDB.db = e.target.result; // Do some more stuff in a minute };

request.onerror = milesTech.indexedDB.onerror; }; But Really... What Is HTML5? in 27 STORAGE

File APIs

The HTML5 File API gives developers a way to interact with files stored local- ly on a user’s device via an input tag or from a drag and drop operation. This API could be useful in providing client-side validation on file types or maxi- mum file sizes. A developer can also use this API to create thumbnail images from full sized uploaded images. To accomplish this, files can be accessed indi- vidually, by group/directory or by parts (breaking the file up into byte ranges). Using this, developers can determine the progress of the upload and catch any errors in the process of uploading.

function handleFileSelect(evt) { var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push(‘

’, escape(f.name), ‘ (‘, f.type || ‘n/a’, ‘) - ‘, f.size, ‘ bytes, last modified: ‘, f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’, ‘

’); } document.getElementById(‘list’).innerHTML = ‘

’ + output.join(‘’) + ‘

’; } document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);

But Really... What Is HTML5? in 28 SECURITY

Content Security Policy

The same origin policy is the basis for the web’s security. In a very basic sense, it states that https://myApp.com should only have access to https://myApp. com’s data and https://badSite.com should never have access. It makes sense in theory, but hackers have been able to get around this by using cross-site scripting attacks to bypass this. The browser has no way to determine if a URL is malicious or not if it’s coming from the correct origin. If an attacker can in- ject code into the site, this becomes a serious problem. The Content Security Policy sets out to reduce the risk and impact of these attacks. It works by cre- ating a header that specifies specific whitelisted URLs. Any URLs not on the list will be blocked. Also, any inline script must be contained in separate files. It is the only way to be sure that the scripts running are safe.

But Really... What Is HTML5? in 29 WEB COMPONENTS

Web Components

There are a ton of new features in the HTML5 specifications, but web com- ponents could be one of the most interesting. Web components are standard HTML tags that all have specific jobs. All of the HTML and CSS are encapsu- lated within the tag which means they will be rendered as intended without worrying about external styles or javascript effecting it. An example of a cur- rent standard web component is the image tag which renders an image and allows for some parameters to be set within the tag.

HTML5 gives developers the ability to create custom components that encap- sulate custom code. To prevent this custom code from accidentally interact- ing with anything on the page, the spec utilizes something called the Shadow DOM. The Shadow DOM is a hiding place for the code that is generally invis- ible to non-developers. The functionality is very similar to the iframe without as much bloat.

var host = document.querySelector(‘.container’); var root = host.createShadowRoot(); root.innerHTML = ‘How you doin?‘

But Really... What Is HTML5? in 30 4 ABOUT US

Miles Technologies is an award winning, full service technology company that specializes in online marketing, website design, IT suppoart and custom software development. Founded in 1997, we create innovative and effective solutions to help businesses accomplish more.

Revitalize your website with HTML5! Get in touch with the Web team at Miles Technologies

CLICK HERE

A Publication of

But Really... What Is HTML5? in 31