![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](https://image.slidesharecdn.com/html5-cropped-180119223008/85/HTML5-An-Introduction-To-Next-Generation-Web-Development-2-320.jpg)
HTML5: An Introduction To Next Generation Web Development
- 1. HTML5: Next Generation Web Development Tilak Joshi Senior Web Architect NASA Goddard Space Flight Center (Contractor) August 17th 2011 Platform Product Manager
- 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. What is HTML5? HTML5 is the up and coming standard for next generation web development. It reduces focus on syntax and increases focus on features. It was created by developers and browsers to facilitate web programming and increase focus 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 Workers Fun 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. New Elements in HTML5 All new tags maintain the same style and element properties as <div> but have special meaning and possibly special interpretations by markup readers (crawlers) or browsers. When declaring these tags, in order to maintain backwards 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. Native Audio/Video Support Current versions of browsers support audio/video, basic controls, a poster for video, duration hint, and more. They allow 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, WAV Internet Explorer – H.264 natively, OGG and VP8 with manual install; MP3 WAV Google Chrome – OGG, H.264 (to be discontinued), VP8; OGG, WAV Apple Safari – H.264 natively, OGG and VP8 with manual install; MP3, WAV Opera – OGG, VP8; OGG, WAV
- 6. Drawing API HTML5 supports many different APIs for drawing, eliminating the need for Flash, SilverLight, or other third-party tools. Currently supported APIs include Canvas and SVG. Partially supported APIs include MathML and WebGL. Canvas: HTML <canvas id=”canvas1" width=”600" height="200"> </canvas> JavaScript window.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="http://www.w3.org/2000/svg"> <circle id=”circle1" cx="50" cy="50" r="50" fill="red" /> </svg>
- 7. Geolocation Geolocation provides the user’s location. This is the closest position the User Agent can obtain, which in the case of a GPS enabled device is exact, and in the case of non-GPS enabled device is the location from the IP address, closest cell phone tower, 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 degrees coords.longitude – decimal degrees coords.altitude - meters coords.accuracy - meters coords.speed – meters/second coords.altitudeAccuracy - meters coords.heading – degrees clockwise from true north timestamp – Date() Object Warning: User has to allow the browser to share their location. It is good practice to not to depend on this data.
- 8. Drag and Drop Drag 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> JavaScript function 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 dragged ondragenter – when the draggable item enters the droppable area ondragover – when the draggable item is in the droppable area ondrop – when the draggable item is dropped
- 9. Web Forms 2.0 HTML5 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 number range – provides a slider on the gui, and validates for a number date (date, month, week, time, datetime, datetime-local) – shows a picker search – currently behaves like a regular ‘text’ field color – provides a color picker on the gui New 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 be variation in the GUI and validation as each browser can handle the look and feel of the additional displayed features and the exact validation.
- 10. Additional Features Microdata, 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 other information. 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 it is 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. Backwards Compatibility Polyfills or polyfiller or shim, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser 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. 508 Compliance HTML5 does not hinder 508 compliance as everything that is visual does not apply, and everything that is not has similar fallbacks as HTML4 or XHTML (i.e. title tags, labels for inputs). The more descriptive tags and microdata allow 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. Extras: CSS3 Additions New attributes: • border-image • border-radius • @font-family • box-shadow • text-shadow Browser specific attributes: • -moz (Mozilla Browsers) • -o (Mozilla Browsers) • -webkit (Mozilla Browsers)
- 14. Questions?