HTML5: An Introduction To Next Generation Web Development


Published on

This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5: An Introduction To Next Generation Web Development

  1. 1. HTML5: Next Generation Web Development Tilak Joshi Senior Web Architect NASA Goddard Space Flight Center (Contractor) August 17th 2011
  2. 2. What is HTML5?“HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997[1]) and as of August 2011[update] is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.[1]” – Wikipedia
  3. 3. What is HTML5?HTML5 is the up and coming standard for next generation web development. It reduces focus on syntax andincreases focus on features. It was created by developers and browsers to facilitate web programming and increasefocus on more dynamic content.Included Features• New Elements ( <article>,<section>,<aside>,<nav>, etc.)• Native Audio/Video Support• Drawing APIs (Canvas, SVG, MathML, WebGL)• Geolocation• Drag and Drop• Web Forms 2.0• Microdata• Local Storage• Web Sockets• Web WorkersFun Facts• HTML5 is the brainchild of WHATWG and was adopted by the W3C after much hesitation• Apple’s ongoing battle with Adobe was sparked by Apple choosing to support HTML5 over Flash• Contrary to popular belief, almost all current browsers provide support for most HTML5 features Official HTML5 Logo
  4. 4. New Elements in HTML5All new tags maintain the same style and element properties as <div> but have special meaning and possiblyspecial interpretations by markup readers (crawlers) or browsers. When declaring these tags, in order to maintainbackwards compatibility, style them as display:block in your stylesheet or internal style.These are most of the more important tags:• <article> – external content (news articles, blogs, etc)• <section> – sections of the web page (can contain multiple <article> tags)• <aside> - content related to, but not part of, the primary content• <nav>,<menu> - the primary navigation, any subnavigation• <header> - section before body, at the beginning of the page• <footer> - section after body, at the end of the page• <hgroup> - a group of headers (<h1> to <h6> tags)• <time> - a date or time• <figure>,<figcaption> - a figure and a caption describing it (could be a video or image)
  5. 5. Native Audio/Video SupportCurrent versions of browsers support audio/video, basic controls, a poster for video, duration hint, and more. Theyallow VP8, H.264, and OGG formats depending on browser, and allow you to specify a codec in the declaration.Code (Video):<video id="video1" width="480" height="260" poster=”firstframe.jpg" durationHint=”59" > <source type="video/webm" src=“vid.webm" /> <source src=“vid.mp4"/> <source src=“vid.ogv" /> <p>Error: video not supported</p></video>Code (Audio):<audio src="song.ogg" controls="controls"> Your browser does not support the audio element.</audio>Supported Formats (video; audio):Mozilla Firefox – OGG, VP8; OGG, WAVInternet Explorer – H.264 natively, OGG and VP8 with manual install; MP3 WAVGoogle Chrome – OGG, H.264 (to be discontinued), VP8; OGG, WAVApple Safari – H.264 natively, OGG and VP8 with manual install; MP3, WAVOpera – OGG, VP8; OGG, WAV
  6. 6. Drawing APIHTML5 supports many different APIs for drawing, eliminating the need for Flash, SilverLight, or other third-partytools. Currently supported APIs include Canvas and SVG. Partially supported APIs include MathML and WebGL.Canvas:HTML<canvas id=”canvas1" width=”600" height="200"> </canvas>JavaScriptwindow.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.moveTo(100, 150); context.lineTo(450, 50); context.lineWidth = 10; context.strokeStyle = "#ff0000"; // line color context.stroke();};SVG:HTML<svg id=”svg1” xmlns=""> <circle id=”circle1" cx="50" cy="50" r="50" fill="red" /></svg>
  7. 7. GeolocationGeolocation provides the user’s location. This is the closest position the User Agent can obtain, which in the case of a GPSenabled device is exact, and in the case of non-GPS enabled device is the location from the IP address, closest cell phonetower, or wireless network connection.Code:function get_location() { navigator.geolocation.getCurrentPosition( handlePosition );}function handlePosition(position){ var longitude = position.coords.longitude; var latitude = position.coords.latitude; // use this info}Properties:coords.latitude – decimal degreescoords.longitude – decimal degreescoords.altitude - meterscoords.accuracy - meterscoords.speed – meters/secondcoords.altitudeAccuracy - meterscoords.heading – degrees clockwise from true northtimestamp – Date() ObjectWarning:User has to allow the browser to share their location. It is good practice to not to depend on this data.
  8. 8. Drag and DropDrag and Drop is natively allowed by overriding the default browser event of objects snapping back in place.Code:HTML<div id=‘drag1’ draggable=‘true’>I’m Drag1</div><div id=‘drag2’ draggable=‘true’>I’m Drag2</div><div id=‘dropArea’ ></div>JavaScriptfunction allowDrop(e){ if(e.preventDefault){ e.preventDefault(); } return false;}var dropArea = document.getElementById(‘dropArea’);dropArea.ondragenter = allowDrop;dropArea.ondragover = allowDrop;New Events:ondragstart – when the draggable item begins to get draggedondragenter – when the draggable item enters the droppable areaondragover – when the draggable item is in the droppable areaondrop – when the draggable item is dropped
  9. 9. Web Forms 2.0HTML5 has taken the more common recent input fields and officially standardized them. It provides browser built-in GUI and basic validation as required.New Input Types:email – current validation checks for ‘@’ sign and ‘.’url – current validation checks for ‘.’number – provides up and down arrows on the gui, and validates for a numberrange – provides a slider on the gui, and validates for a numberdate (date, month, week, time, datetime, datetime-local) – shows a pickersearch – currently behaves like a regular ‘text’ fieldcolor – provides a color picker on the guiNew Input Type Attributes:min – min for the number (works for number and range types)max – max for the number (works for number and range types)step – step increment for the number (works for number and range types)Notes:Support is currently limited, but coming soon. It is encouraged to use it with shims and polyfills as support comes soon. There will bevariation in the GUI and validation as each browser can handle the look and feel of the additional displayed features and the exactvalidation.
  10. 10. Additional FeaturesMicrodata, Local Storage, and Web Workers are some of the additional features available in HTML5.Microdata:Specifies additional markup language, as per the specified namespace, to identify reviews, recipes, authors, businesses, products, and otherinformation. This is most useful for screen readers like Google’s crawler to read and identify your content more accurately.Local Storage:Information can be stored in the browser without using cookies. This is less overhead and easy access to a lot of data in JSON format but itis not safe for secure data.Web Workers:This is a method for running javascript concurrently and making use of multiple processor CPUs.Additional Features:WebSockets, native JSON functions, Cross Domain Requests using AJAX
  11. 11. Backwards CompatibilityPolyfills or polyfiller or shim, is a piece of code (or plugin) that provides the technology that you, the developer, expect thebrowser to provide natively. Flattening the API landscape if you will. They can use third party technologies like Flash, SilverLight,or JavaScript and JQuery libraries.Modernizr:Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js});WebShims:WebShims is a JavaScript library built on JQuery that provides polyfills for the most commonly used HTML5 features.$.webshims.setOptions(canvas, { type: flashpro //excanvas | flash | flashpro });Notes:There are polyfills available for every feature that I have covered and many more. These polyfills support browsers starting from IE6+,Firefox 3+ and more. This is a quick and easy method that increases browser compatibility until all browsers have full support for HTML5.Future versions of Modernizr 2.0 will have WebShims built in.
  12. 12. 508 ComplianceHTML5 does not hinder 508 compliance as everything that is visual does not apply, and everything that is not hassimilar fallbacks as HTML4 or XHTML (i.e. title tags, labels for inputs). The more descriptive tags and microdataallow a possibility for many 508 enhancements in the future.•All new elements available in HTML5 are the equivalent of HTML divs and can handle the ‘title’ attribute• The media-rich enhancements are just that, ‘enhancements.’ There should be text counterparts for functionality• Microdata offers better compliance options in the future• Better tag structure offers more options for future screen readers for compliance
  13. 13. Extras: CSS3 AdditionsNew attributes:• border-image• border-radius• @font-family• box-shadow• text-shadowBrowser specific attributes:• -moz (Mozilla Browsers)• -o (Mozilla Browsers)• -webkit (Mozilla Browsers)
  14. 14. Questions?