Detection Techniques

There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex: #1:Check if a certain property exists on a global object (such as window or navigator).For an example of testing for geolocation support. #2:Create an element, then check if a certain property exists on that element.For an example of testing for canvas support. #3:Create an element, check if a certain method exists on that element, then call themethod and check the value it returns.For an example of testing which video formats are supported. #4:Create an element, set a property to a certain value, then check if the property hasretained its value.For an example of testing which <input> types are supported.

Modernizr is an open-source JavaScript library that helps you build the next generation
of HTML5 and CSS3-powered websites.

Why use Modernizr?

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers.When it runs, it creates a global object called Modernizr that contains a set of Boolean properties for each feature it can detect. For example if (Modernizr.feature) { // return true if your browser support feature like canvas, video } else { // return false if your browser dosent support feature }

Canvas
HTML5 defines the<canvas> element as a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly..and defines a set of functions (the canvas API) for drawing shapes, defining paths, creating gradients, and applying transformations You can check for canvas support using this function: function supports_canvas() { return !!document.createElement(canvas).getContext;

} or we can use Modernizr for check if your browser support canvas. if (Modernizr.canvas) { // lets draw some shapes! } else { // no native canvas support available }

Video
HTML5 defines a new element called for embedding video in your web pages.Checking for video support uses detection technique #2.if your browser dosent support video there is a solution called Video for Everybody! This solution uses no JavaScript whatsoever, and it works in virtually every browser, including mobile browsers. You can check for video support using this function: function supports_video() { return !!document.createElement(video).canPlayType; } or we can use Modernizr for check if your browser support Video.

Video Formats
Video formats are like languages.The language of a video is called a codec.Checking for video format support uses detection technique #3. function supports_h264_baseline_video() { if (!supports_video()) { return false; } var v = document.createElement(video); return v.canPlayType(video/mp4,ogg or webm; codecs=avc1.42E01E, mp4a.40.2,theora, vorbisorvp8, vorbis); } The canPlayType() function doesnt return true or false. In recognition of how complex video formats are, the function returns a string:
probably

If the browser is fairly confident it can play this format.

maybe

If the browser thinks it might be able to play this format.

(an empty string)

If the browser is certain it cant play this format. or we can use Modernizr for check if your browser support Video Formats

Local Storage
HTML5 Storageprovides a way for websites to store information on your computer and retrieve it later. Checking for HTML5 Storage support uses detection technique #1.You can check for local storage support using this function: function supports_local_storage() { return (localStorage in window) && window['localStorage'] !== null; } Instead of writing this function yourself, you can use Modernizr.

Web Workers
Web workers provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple threads that all run at the same time,more or less.Checking for web workers uses detection technique #1.This function checks for web worker support: function supports_web_workers() { return !!window.Worker; } Instead of writing this function yourself, you can use Modernizr.

Geolocation
Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. Checking for geolocation support uses detection technique #1 Heres how to checkfor geolocation support: function supports_geolocation() { return !!navigator.geolocation; } Instead of writing this function yourself, you can use Modernizr

Input Types
Checking for HTML5 input types uses detection technique #4. function supports_Input_Type() { if (!supports_Input_Type()) { return false; } var i = document.createElement(input); i.setAttribute(type, color); return i.type !== color; } Instead of writing this function yourself, you can use Modernizr.

Placeholder Text
Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears

. Checking for placeholder support uses detection technique #2.Heres how to check for placeholder support: function supports_input_placeholder() { var i = document.createElement(input); return placeholder in i; } Instead of writing this function yourself, you can use Modernizr.

Form Autofocus
use to focus the first input field of a web form automatically.

Checking for autofocus support uses detection technique #2. You can detect autofocus support with this function: function supports_input_autofocus() { var i = document.createElement(input);

return autofocus in i; } Instead of writing this function yourself, you can use Modernizr.

Q5.

HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow better input control and validation. This chapter covers the new input types: color date datetime datetime-local email month number range search tel time url week

Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.

Input Type: color

The color type is used for input fields that should contain a color.

Example
Select a color from a color picker:

Select your favorite color: <input type="color" name="favcolor">

Try it yourself

Input Type: date

The date type allows the user to select a date.

Example
Define a date control:

Birthday: <input type="date" name="bday">

Try it yourself

Input Type: datetime

The datetime type allows the user to select a date and time (with time zone).

Example
Define a date and time control (with time zone):

Birthday (date and time): <input type="datetime" name="bdaytime">

Try it yourself

Input Type: datetime-local

The datetime-local type allows the user to select a date and time (no time zone).

Example
Define a date and time control (no time zone):

Birthday (date and time): <input type="datetime-local" name="bdaytime">

Try it yourself

Input Type: email

The email type is used for input fields that should contain an e-mail address.

Example
Define a field for an e-mail address (will be automatically validated when submitted):

E-mail: <input type="email" name="email">

Try it yourself Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).

Input Type: month

The month type allows the user to select a month and year.

Example
Define a month and year control (no time zone):

Birthday (month and year): <input type="month" name="bdaymonth">

Try it yourself

Input Type: number

The number type is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted:

Example
Define a numeric field (with restrictions):

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

Try it yourself Use the following attributes to specify restrictions: max - specifies the maximum value allowed min - specifies the minimum value allowed step - specifies the legal number intervals value - Specifies the default value

Try an example with all the restriction attributes: Try it yourself

Input Type: range

The range type is used for input fields that should contain a value from a range of numbers. You can also set restrictions on what numbers are accepted.

Example
Define a control for entering a number whose exact value is not important (like a slider control):

<input type="range" name="points" min="1" max="10">

Try it yourself Use the following attributes to specify restrictions: max - specifies the maximum value allowed min - specifies the minimum value allowed step - specifies the legal number intervals value - Specifies the default value

Input Type: search

The search type is used for search fields (a search field behaves like a regular text field).

Example
Define a search field (like a site search, or Google search):

Search Google: <input type="search" name="googlesearch">

Try it yourself

Input Type: tel

Example
Define a field for entering a telephone number:

Telephone: <input type="tel" name="usrtel">

Try it yourself

Input Type: time

The time type allows the user to select a time.

Example
Define a control for entering a time (no time zone):

Select a time: <input type="time" name="usr_time">

Try it yourself

Input Type: url

The url type is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted.

Example
Define a field for entering a URL:

Add your homepage: <input type="url" name="homepage">

Try it yourself Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

Input Type: week

The week type allows the user to select a week and year.

Example
Define a week and year control (no time zone):

Select a week: <input type="week" name="week_year">

Try it yourself

HTML5 <input> Tag

Tag <input> Description Defines an input control

New Media Elements

HTML5 offers new elements for media content: Tag <audio> <video> <source> <embed> <track> Description Defines sound content Defines a video or movie Defines multiple media resources for <video> and <audio> Defines a container for an external application or interactive content (a plug-in) Defines text tracks for <video> and <audio>

Embedding media in your HTML document is trivial:

1 2 3
site.

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Your browser does not support the <code>video</code> element. </video>

This example plays a sample video, with playback controls, from the Theora web

Here is an example for embedding audio into your HTML document

1 <audio src="/test/audio.ogg"> <p>Your browser does not support the audio element.</p> 2 </audio> 3 The src attribute can be a URL of the audio file or the path to the file on the local
system.

1 <audio src="audio.ogg" controls autoplay loop> <p>Your browser does not support the audio element </p> 2 </audio> 3 This code example uses attributes of the <audio> element:

controls : Displays the standard HTML5 controls for the audio on the web page. autoplay : Makes the audio play automatically.

loop : Make the audio repeat (loop) automatically.

<audio src="audio.mp3" preload="auto" controls></audio> 1 The preload attribute is used in the audio element for buffering large files. It can

take one of 3 values:

"none" does not buffer the file "auto" buffers the media file "metadata" buffers only the metadata for the file Multiple source files can be specified using the <source> element in order to provide video or audio encoded in different formats for different browsers. For instance:

1 2 3 4 5

<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video>

This plays the Ogg file in browsers supporting the Ogg format. If the browser doesn't support Ogg, the browser uses the MPEG-4 file. See also the list of media formats supported by the audio and video elements in different browsers. You may also specify which codecs the media file requires; this allows the browser to make even more intelligent decisions:

1 2 3 4

<video controls> <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> Your browser does not support the <code>video</code> element. </video>

localStorage and sessionStorage

There are two new objects for storing data on the client: localStorage - stores data with no expiration date sessionStorage - stores data for one session

Before using web storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example
localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;

Try it yourself Example explained: Create a localStorage key/value pair with key="lastname" and value="Smith" Retrieve the value of the "lastname" key and insert it into the element with id="result"

Tip: Key/value pairs are always stored as strings. Remember to convert them to another format when needed. The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example
if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; }

else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

Try it yourself

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. The following example counts the number of times a user has clicked a button, in the current session:

Example
if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

Try it yourself

What is Canvas?
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element. Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Create a Canvas
A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element. Note: By default, the <canvas> element has no border and no content. The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. Tip: You can have multiple <canvas> elements on one HTML page.

<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas>

</body> </html>

Example for drawing circle

<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

</script>

</body> </html>

MIME TYPES
This book is about HTML5, not previous versions of HTML, and not any version of XHTML. But to understand the history of HTML5 and the motivations behind it, you need to understand a few technical details first. Specifically, MIME types.

Every time your web browser requests a page, the web server sends headers before it sends the actual page markup. These headers are normally invisible, although there are web development tools that will make them visible if youre interested. But the headers are important, because they tell your browser how to interpret the page markup that follows. The most important header is called Content-Type, and it looks like this: Content-Type: text/html

text/html is called the content type or MIME type of the page. This header is the only thing that determines what a particular resource truly is, and therefore how it should be rendered. Images have their own MIME types (image/jpeg forJPEG images, image/png for PNG images, and so on). JavaScript files have their own MIME type. CSS stylesheets have their own MIME type. Everything has its own MIME type. The web runs on MIME types.

Of course, reality is more complicated than that. The first generation of web servers (and Im talking web servers from 1993) didnt send the Content-Type header because it didnt exist yet. (It wasnt invented until 1994.) For compatibility reasons that date all the way back to 1993, some popular web browsers will ignore the Content-Type header under certain circumstances. (This is called content sniffing.) But as a general rule of thumb, everything youve ever looked

at on the web HTMLpages, images, scripts, videos, PDFs, anything with a URL has been served to you with a specific MIME type in theContent-Type header.

Tuck that under your hat. Well come back to it.

Locate the User's Position

The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.

Browser Support

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation. Note: Geolocation is much more accurate for devices with GPS, like iPhone.

HTML5 - Using Geolocation

Use the getCurrentPosition() method to get the user's position. The example below is a simple Geolocation example returning the latitude and longitude of the user's position:

Example
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }

else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
Example explained: Check if Geolocation is supported If supported, run the getCurrentPosition() method. If not, display a message to the user If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition ) The showPosition() function gets the displays the Latitude and Longitude

The example above is a very basic Geolocation script, with no error handling. Errorhandling

HTML4 supports what is called tag soup, this is, the ability to write malformed code and have it corrected into a valid document. But the problem is that rules for doing this arent written anywhere, so developers just have to test malformed documents in various browsers (especially Internet Explorer) to handle any errors. Also, HTML4 lacks rules for parsing, which makes it more difficult to handle errors. HTML5 is attempting to solve this, so that browser developers can standardize and save time and money. It is also more flexible to handle inaccurate syntax, and it specifies the rules related to the parsing and lexing.

What is W3C?
W3C W3C W3C W3C W3C W3C W3C W3C Stands for the World Wide Web Consortium was created in October 1994 was created by Tim Berners-Lee was created by the Inventor of the Web is organized as a Member Organization is working to Standardize the Web creates and maintains WWW Standards Standards are called W3C Recommendations

How it Started
The World Wide Web (WWW) began as a project at the European Organization for Nuclear Research (CERN), where Tim Berners-Lee developed a vision of the World Wide Web. Tim Berners-Lee - the inventor of the World Wide Web - is now the Director of the World Wide Web Consortium (W3C). W3C was created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission.

Standardizing the Web

W3C is working to make the Web accessible to all users (despite differences in culture, education, ability, resources, and physical limitations) W3C also coordinates its work with many other standards organizations such as the Internet Engineering Task Force, the Wireless Application Protocols (WAP) Forum and the Unicode Consortium. W3C is hosted by three universities: Massachusetts Institute of Technology in the U.S. The French National Research Institute in Europe Keio University in Japan

W3C Members
Because the Web is so important (both in scope and in investment) that no single organization should have control over its future, W3C functions as a member organization. Some well known members are: IBM Microsoft America Online Apple Adobe Macromedia

Sun Microsystems

The Full List of Member Organizations includes a variety of software vendors, content providers, corporate users, telecommunications companies, academic institutions, research laboratories, standards bodies, and governments.

W3C Recommendations
The most important work done by the W3C is the development of Web specifications (called "Recommendations") that describe communication protocols (like HTML and XML) and other building blocks of the Web. Each W3C Recommendation is developed by a work group consisting of members and invited experts. The group obtains its input from companies and other organizations, and creates a Working Draft and finally a Proposed Recommendation. In general the Recommendation is submitted to the W3C membership and director, for a formal approval as a W3C Recommendation.

HTML5 is a Revolution
By Max On November 25, 2012 Leave a Comment In Codiqa, html5

HTML5 is a semi-buzzword that is thrown around quite a bit these days. What exactly does it mean, and why does it matter? Technically, the term has a simple definition: HTML5 is the 5th revision of the HTML standard that Web Browsers use to display web pages. This provides a convenient way for browser developers like Mozilla, Google, Microsoft, and Opera to produce browsers that generally behave in a similar, standardized fashion (though the reality is less perfect). The 5th revision of the HTML standard, or HTML5, introduces many new features that make browsers more powerful and capable of providing modern web experiences. But what makes HTML5 truly interesting is not just the list of technological advancements. HTML5 is a revolution for the open web. HTML5: the empowerment of open web technologies.

With HTML5, our web browsers can do increasingly amazing things that were once the domain of locked-down proprietary platforms like iOS and Adobe Flash. We can access the camera on a mobile device, get the users current location through GPS, display video and play audio, or render complex 3D scenes. That, all with open web technologies that we can all use, generally for free, and with very open licenses. HTML5 is all about giving our open platforms more power to deliver increasingly amazing and complex products and experiences, in a way that is accessible to the largest number of people, and not controlled by corporate interests. Reducing Barriers to Entry Previously, developing for the web or mobile had to be done through proprietary systems, often for a decent cost. For example, if you want to build traditional iOS apps, you need a Mac (say, for $1500) and a $99/yr developer license just to build and release your app. If you were building Flash applications to provide animated content or stream video to a website, you had to purchase Adobe Flash Professional for $699. Today, you can build amazing mobile and desktop applications with HTML5 and open web technologies. All you need is a text editor and a browser, both of which are free. HTML5 is the Future As it stands, more companies and developers stand to gain through the greater adoption of HTML5 than with proprietary platforms like iOS. As such, investment and development is increasing for HTML5 tools, services, and products. Its this movement that excited us enough to build Codiqa and join the growing ecosystem of HTML5-based development tools. We want to help move more mobile development over to HTML5 technologies and frameworks, such as jQuery Mobile. Looking into the future, we strongly believe that HTML5 and open web technologies will increasingly become the standard for mobile and desktop development. We dont recommend betting against the open web.

Getting Started To get started with HTML5 as fast as possible, we recommend Dave Woods short HTML5 Tutorial. Once youve got the basics down, one of the best resources for really digging into HTML5 is Dive Into HTML5 by Mark Pilgrim. To get started with HTML5 development for mobile, we recommend the great HTML5 mobile framework jQuery Mobile which Codiqa is based on (our tool helps you visually build mobile apps with jQuery Mobile). Are you new to HTML5, a novice, or an expert? What exciting things has HTML5 enabled you to do, or what are you interested in doing?

New Elements in HTML5

The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999. Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. These elements are removed or re-written in HTML5. To better handle today's internet use, HTML5 also includes new elements for better structure, better form handling, drawing, and for media content.

New Semantic/Structural Elements

HTML5 offers new elements for better structure: Tag <article> <aside> <bdi> <command> Description Defines an article Defines content aside from the page content Isolates a part of text that might be formatted in a different direction from other text outside it Defines a command button that a user can invoke

<details> <dialog> <summary> <figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp>

Defines additional details that the user can view or hide Defines a dialog box or window Defines a visible heading for a <details> element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a <figure> element Defines a footer for a document or section Defines a header for a document or section Groups a set of <h1> to <h6> elements when a heading has multiple levels Defines marked/highlighted text Defines a scalar measurement within a known range (a gauge) Defines navigation links Represents the progress of a task Defines a ruby annotation (for East Asian typography) Defines an explanation/pronunciation of characters (for East Asian typography) Defines what to show in browsers that do not support ruby annotations

HTML5 Audio
HTML5 provides a standard for playing audio files.

Audio on the Web

Until now, there has not been a standard for playing audio files on a web page.

Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> element. Note: Internet Explorer 8 and earlier versions, do not support the <audio> element.

HTML5 Audio - How It Works

To play an audio file in HTML5, this is all you need:

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
The control attribute adds audio controls, like play, pause, and volume. You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element. The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

HTML <img> Tag

Complete HTML Reference

Example
How to insert an image:

<imgsrc="smiley.gif" alt="Smiley face" height="42" width="42">

Browser Support

The <img> tag is supported in all major browsers.

Definition and Usage

The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

HTML <base> Tag

Definition and Usage
The <base> tag specifies the base URL/target for all relative URLs in a document. There can be at maximum one <base> element in a document, and it must be inside the <head> element.

HTML5 Form Elements

HTML5 New Form Elements
HTML5 has the following new form elements:

<datalist> <keygen> <output>

Note: Not all major browsers support all the new form elements. However, you can already start using them; If they are not supported, they will behave as regular text fields.

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element. The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input> element's list attribute to bind it together with a <datalist> element.

Example
An <input> element with pre-defined values in a <datalist>:

<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> tag specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

Example
A form with a keygen field:

<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

Example
Perform a calculation and show the result in an <output> element:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>