5

Developing with HTML5

view full story
linux-howto

http://linuxers.org – HTML4 has served us for more than 10 years now and there hasn't been any major update in it, there is XHTML that has done a little more by making code more strict, if at all you are concerned with HTML compliance. Work on HTML5 was started in 2004 by a group called WHATWG founded by Apple, Mozilla and Opera. Most new browsers are now supporting new HTML5 tags. In this article, we will have a look at some HTML5 features which will make your web development easier and organized. Structure of HTML5 Tags The one thing that I like very much about HTML5 is that its designers caught the web trends pretty well. Consider this example of the 'div' tags in HTML4. If you have used them you would know how we use ids and classes to define the structure of a page and identify parts of the page as article, header, footer, section etc. Looking at the repititive use and popularity of some of the ids, namely, header, footer, nav, article etc. the developers made proper tags out of them. Canvas Canvas was first implemented by Apple for OS X Dashboard widgets. Now, its a formal part of HTML5 <canvas width=".." height=".." > </canvas> Uses of Canvas Dynamic and interactive Graphics Draw images using 2D drawing API (lines, circle, fills, shapes) Useful for graphs, applications, puzzles and games. Canvas Example graphs Plotkit: http://www.liquidx.net/plotkit/ JavaScript library, Draws graphs from any data source, such as a table. Canvas Example applications: Yahoo Pipes: http://pipes.yahoo.com/pipes/ Interactive, drag and drop interface CanvasPaint: http://canvaspaint.org/ Clone of MS Paint built with Canvas. Could be used to build a Shared Whiteboard application Canvas Example Games: Canvex: http://canvex.lazyilluminati.com/ Experimental First-Person Shooter Game, 3D Graphics Canvas standard API for drawing. ctx = canvas.getContext("2d"); ctx.fillRectI(x, y, width, height); ctx.beginPath(); ctx.moveTo(x, y); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2); and loads of exciting functions There's no IDE needed for canvas and no plugins required. Canvas gives you an option of making your site high graphics without using flash. It has some performance issues, but its getting better with faster javascript and rendering engines. Try out some canvas demos Video and Audio Due to no support for video in HTML4, many sites relied on flash for audio and video. And it had become a defacto animation standard. HTML5 supports both video and audio tags, its now possible to custom design user interface, start, stop, pause, seek and adjust volume. It provides DOM Api's to control the video and audio playbacks. We can include audio and video using simple tags: <video src="video.mp4" width="320" height="480" posters="screenshot.jpg" controls /> or <video id="video" width="640" height="480" volume=".7" controls autoplay>   <source src="video.mp4" type="video/wmv"></source> (For Browser supporting H.264 codec)    <source src="video.ogg" type="video/ogg"> </source> (For Browser supporting Theora codec) </video> <audio>    <source src="music.oga" type="audio/ogg">    <source src="music.mp3" type="audio/mpeg"> </audio> Based on the Codec which your browser support you can specify alternate video and audio formats. HTML5 progress and meter tag. Progress and meter <progress> tag is used as a conjection to javascript to measure progress of a task. This shows completion progress of a task, used for indicating loading progress of ajax application. <meter> Representing scalar measurements or fractional values Useful for: User Ratings (e.g. YouTube Videos)  Seach Result Relevance Disk Quota Usage <progress value="600" max="1000"></progress>   <meter min="0" max="5" value="3"> </meter> <meter> 2/10</meter> <meter> 200 out of 1000</meter> Keygen <keygen> is used for generating a private/public certificate keypair. The browser keeps the private one, and the server gets the public one which it signs and then sends back to the browser. This is extremely useful for secure verification. Netbanks and other heavy security sites should/are using this. <form method="post" action="action.htm"> <keygen name="encryptedInfo" challenge="1234512312" /> </form> Internet explorer doesn't support this tag, read more. Mark This tag should be used as a reference to indicate text as marked/highlighted. Not to be confused with <em>. This tag is userful in indicating relevance and point of interest. Useful for: We can highlight relevant code in the sample. Highlighting seach keywords in a document (example forums, and google cache). <p>The <mark>mark</mark> tag is used for getting your reader attentions.</p> Time This tag is used to display date and time within an HTML document. Microformats datetime-design-pattern in HTML4 has accessibilities issues as they expose machine data to humans by misusing the HTML4 abbr tag. These problems led to the BBC removing Microformats from their site. <abbr class="datetime"       title="2007-08-02T23:30Z">   Fri, Aug 03 2007 at 09:30 </abbr> This problem goes away in HTML5 as it introduces a time tag which is better than abbr for marking up date and time. Linuxers was launched in <time datetime="2009-10-07">October</time>. Our Office close at <time>09:00</time>PM IST. This solves Accessibility Issue and Can be used in Microformats like hCalendar Command <menu type="toolbar">   <command onclick="insert(0);" icon="bold.gif">   <command onclick="insert(1);" icon="italic.gif">   <command onclick="insert(2);" icon="link.gif"> </menu> Device The <device> tag allow the user to give access to a device example video camera. <p>Start chatting, Select your video camera: <device type=media onchange="update(this.data)"></p> <video autoplay></video> <script> function update(stream) { document.getElementsByTagName('video')[0].src = stream.URL; } </script> Form Controls In HTML4 controls are too limited, several new input types are added in HTML5 to remove repeated use of some input types like checkbox and select. <input type="datetime"> <input type="date"> <input type="time"> <input type="number"> <input type="range"> <input type="email">   <input type="url">   <input list="title-list"> <datalist id="title-list">   <option value="..."> </datalist> Form Validation HTML5 has new validation tags to validate a form for the expected input required, pattern, min, max, etc. New DOM API allow script to detect and deal with user error more easily. HTML5 and Microformats HTML5 non-visible data-* attribute is used for embedding data on a page. Many Microformats can make use of these HTML data-* attributes for embedding custom hidden data. An element in HTML5 can have any no of data-* attributes. <div class="product" data-id="328" data-type="laser" data-shields="20%" data-x="15" data-y="40" data-z="30"> There are many tags that i havent discussed. <datalist>, <details>, <dialog>, <embed>, <figure>, <output> (General)