Published on

Published in: Technology
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


  1. 1. HTML 5 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Mobile Development Course Technical Trainer
  2. 2. Table of Contents <ul><li>Introduction to HTML 5 </li></ul><ul><li>Changed Old Tags </li></ul><ul><li>New Tags </li></ul><ul><ul><li>Audio and Video Tags </li></ul></ul><ul><ul><li>New Structural Tags ( <header> , <footer> , …) </li></ul></ul><ul><ul><li>New Form Elements and Validation </li></ul></ul><ul><li>New Attributes </li></ul><ul><li>Canvas vs. SVG </li></ul><ul><li>Local Storage </li></ul>
  3. 3. Introduction to HTML 5 What the … is HTML 5?
  4. 4. What is HTML 5? <ul><li>HTML5 – the next major revision of the HTML </li></ul><ul><ul><li>Currently under development </li></ul></ul><ul><ul><ul><li>Far away from final version </li></ul></ul></ul><ul><ul><li>Developed under the HTML 5 working group of the World Wide Web Consortium (W3C) in 2007 </li></ul></ul><ul><ul><li>First Public Working Draft of the specification </li></ul></ul><ul><ul><ul><li>January 22, 2008 </li></ul></ul></ul><ul><ul><li>Parts of HTML5 are being implemented in browsers before the whole specification is ready </li></ul></ul>
  5. 5. HTML – Past, Present, Future <ul><li>1991 – HTML first mentioned – Tim Berners-Lee – HTML tags </li></ul><ul><li>1993 – HTML (first public version, published at IETF) </li></ul><ul><li>1993 – HTML 2 draft </li></ul><ul><li>1995 – HTML 2 – W3C </li></ul><ul><li>1995 – HTML 3 draft </li></ul><ul><li>1997 – HTML 3.2 – “Wilbur” </li></ul><ul><li>1997 – HTML 4 – ”Cougar” – CSS </li></ul><ul><li>1999 – HTML 4.01 (final) </li></ul><ul><li>2000 – XHTML draft </li></ul><ul><li>2001 – XHTML (final) </li></ul><ul><li>2008 – HTML5 / XHTML5 draft </li></ul><ul><li>2011 – feature complete HTML5 </li></ul><ul><li>2022 – HTML5 – final specification </li></ul>
  6. 6. HTML 5 Goals <ul><li>Latest version is HTML5 </li></ul><ul><ul><li>Aimed to have all of the power of native applications </li></ul></ul><ul><ul><li>Run on any platform (Windows, Linux, iPhone, Android, etc.) </li></ul></ul><ul><li>New features should be based on HTML, CSS, DOM and JavaScript </li></ul><ul><li>Reduce the need for external plugins </li></ul><ul><li>Better error handling </li></ul><ul><li>More markup to replace scripting </li></ul>
  7. 7. Designer Outlook What a Designer Should Know?
  8. 8. Changed Old Tags <ul><li>Doctype tag: </li></ul><ul><li>HTML tag: </li></ul><ul><li>Meta tag: </li></ul><ul><li>Link tag: </li></ul><!DOCTYPE html> <html lang=&quot;en&quot; xml:lang=&quot;en&quot;> <meta charset=&quot;utf-8&quot;> <link rel=&quot;stylesheet&quot; href=&quot;style-original.css&quot;>
  9. 9. New Layout Sctucture <ul><li>Better layout structure: new structural elements </li></ul><ul><ul><li><section> </li></ul></ul><ul><ul><li><header> </li></ul></ul><ul><ul><li><nav> </li></ul></ul><ul><ul><li><article> </li></ul></ul><ul><ul><li><aside> </li></ul></ul><ul><ul><li><footer> </li></ul></ul><header> <footer> <nav> <aside> <section> <header> <article> <footer>
  10. 10. New Layout Sctucture (2) <ul><li>Elements like header and footer are not meant to be only at the top and bottom of the page </li></ul><ul><li>Header and footer of each document section </li></ul><ul><ul><li>Not very different from <DIV > tag but are more semantically well defined in the document structure </li></ul></ul>
  11. 11. New Layout Sctucture – Example <ul><li><body> </li></ul><ul><li><header> </li></ul><ul><li><hgroup> </li></ul><ul><li>       <h1>HTML 5 Presentation</h1> </li></ul><ul><li>       <h2>New Layout Structure</h2> </li></ul><ul><li>    </hgroup> </li></ul><ul><li>   </header> </li></ul><ul><li><nav> </li></ul><ul><li>     <ul> </li></ul><ul><li>Lecture </li></ul><ul><li>     </ul> </li></ul><ul><li><ul> </li></ul><ul><li>Demos </li></ul><ul><li>     </ul> </li></ul><ul><li><ul> </li></ul><ul><li>Trainers </li></ul><ul><li>     </ul> </li></ul><ul><li>   </nav>  </li></ul>
  12. 12. New Layout Sctucture – Example (2) <ul><li><section> </li></ul><ul><li>   <article> </li></ul><ul><li>     <header> </li></ul><ul><li>         <h1>First Paragraph</h1> </li></ul><ul><li>       </header> </li></ul><ul><li>  <section> </li></ul><ul><li>  Some text </li></ul><ul><li>  </section> </li></ul><ul><li>    </article> </li></ul><ul><li></section> </li></ul><ul><li>   <aside> </li></ul><ul><li>     <a href=&quot;;> more info</a> </li></ul><ul><li>   </aside> </li></ul><ul><li>   <footer> </li></ul><ul><li>     Done by Doncho Minkov, (c) 2011, Telerik Academy </li></ul><ul><li>   </footer> </li></ul><ul><li></body> </li></ul>
  13. 13. New Layout Structure Tags Live Demo
  14. 14. New Tags <ul><li><article> </li></ul><ul><ul><li>For external content, like text from a news-article, blog, forum, or any other external source </li></ul></ul><ul><li><aside> </li></ul><ul><ul><li>For content aside from (but related to) the content it is placed in </li></ul></ul><ul><li><details> </li></ul><ul><ul><li>For describing details about a document, or parts of a document </li></ul></ul><ul><li><summary> </li></ul><ul><ul><li>A caption, or summary, inside the details element </li></ul></ul>
  15. 15. New Tags (2) <ul><li><mark> </li></ul><ul><ul><li>For text that should be highlighted </li></ul></ul><ul><li><nav> </li></ul><ul><ul><li>For a section of navigation </li></ul></ul><ul><li><section> </li></ul><ul><ul><li>For a section in a document (e.g. chapters, headers, footers) </li></ul></ul><ul><li><wbr> </li></ul><ul><ul><li>Word break. For defining an appropriate place to break a long word or sentence </li></ul></ul><ul><li>Other tags </li></ul><ul><ul><li><command> , <datalist> , <details> , <progress > , etc. </li></ul></ul>
  16. 16. New Media Tags <ul><li>Media Tags </li></ul><ul><ul><li><audio> </li></ul></ul><ul><ul><ul><li>Attributes: autoplay , controls , loop , src </li></ul></ul></ul><ul><ul><li><video> </li></ul></ul><ul><ul><ul><li>Attributes: autoplay , controls , loop , height , width , src </li></ul></ul></ul><audio width=&quot;360&quot; height=&quot;240&quot; controls= &quot;controls&quot; > <source src=&quot;someSong.mp3&quot; type=&quot;audio/mp3&quot;> </source> Audio tag is not supported </audio>
  17. 17. Playing Audio Live Demo
  18. 18. Embed Tag – New Syntax <ul><li><embed> </li></ul><ul><ul><li>Defines embedded content, such as a plug-in </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>src=&quot;url&quot; , type=&quot;type&quot; </li></ul></ul><embed src=&quot;helloworld.swf&quot; />
  19. 19. New Attributes <ul><li>New attributes </li></ul>Attribute Description Autocomplete ON / OFF . In case of “ on ”, the browser stores the value, auto fill when the user visits the same form next time Autofocus Autofocus . Input field is focused on page load Required Required . Mandates input field value for the form submit action Draggable True / false indicates if the element is draggable or not
  20. 20. New <input> Types <ul><li>New <input> type(s) </li></ul>Attribute Description Number/Range Restricts users to enter only numbers. Additional attributes min , max and step and value can convert the input to a slider control or a spin box date, month, week, time, date + time, and date + time - time zone Providers a date picker interface. Email Input type for Email Addresses URL Input field for URL address Telephone Input type for Telephone number
  21. 21. New Form Tags: <input type=&quot;range&quot;> Live Demo
  22. 22. Built-In Forms Validation Live Demo
  23. 23. Canvas vs. SVG
  24. 24. Canvas <ul><li>Allows dynamic, scriptable rendering of 2D shapes and bitmap images </li></ul><ul><li>Low level, procedural model </li></ul><ul><ul><li>Updates a bitmap </li></ul></ul><ul><ul><li>Does not have a built-in scene graph </li></ul></ul><ul><li>Consists of a drawable region defined in HTML </li></ul><ul><ul><li>Has height and width attributes </li></ul></ul><ul><ul><li>Accessible by JavaScript Code </li></ul></ul><ul><li>Used for building graphs, animations, games, and image composition </li></ul>
  25. 25. Canvas Example <ul><li>In HTML: </li></ul><canvas id=&quot;example&quot; width=&quot;200&quot; height=&quot;200&quot;> This is displayed if HTML5 Canvas is not supported. </canvas> <ul><li>Access with JavaScript: </li></ul>var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = &quot;rgb(255,0,0)&quot;; context.fillRect(30, 30, 50, 50);
  26. 26. Canvas Example <ul><li>In HTML: </li></ul><canvas id=&quot;example&quot; width=&quot;200&quot; height=&quot;200&quot;> This is displayed if HTML5 Canvas is not supported. </canvas> <ul><li>Access with JavaScript: </li></ul>var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = &quot;rgb(255,0,0)&quot;; context.fillRect(30, 30, 50, 50);
  27. 27. SVG <ul><li>SVG stands for S calable V ector G raphics </li></ul><ul><ul><li>A language for describing 2D-graphics </li></ul></ul><ul><ul><li>Graphical applications </li></ul></ul><ul><li>Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG </li></ul><ul><ul><li>Internet Explorer users may have to install the Adobe SVG Viewer </li></ul></ul><ul><li>HTML5 allows embedding SVG </li></ul><ul><ul><li>Directly using <svg> ... </svg> </li></ul></ul><ul><li> </li></ul>
  28. 28. SVG Example <!DOCTYPE html> <head> <title>SVG</title> <meta charset=&quot;utf-8&quot; /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;;> <circle id=&quot;redcircle&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;red&quot; /> </svg> </body> </html>
  29. 29. SVG Gradient Example <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;;> <defs> <radialGradient id=&quot;gradient&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;50%&quot; fx=&quot;50%&quot; fy=&quot;50%&quot;> <stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(200,200,200);stop-opacity:0&quot;/> <stop offset=&quot;100%&quot; style=&quot;stop-color:rgb(0,0,255);stop-opacity:1&quot;/> </radialGradient> </defs> <ellipse cx=&quot;100&quot; cy=&quot;50&quot; rx=&quot;100&quot; ry=&quot;50&quot; style=&quot;fill:url(#gradient)&quot; /> </svg>
  30. 30. Canvas vs. SVG Live Demo
  31. 31. Local Storage <ul><li>More persistent than temporary internet files and cookies </li></ul><ul><li>Most useful for (mobile) devices that are not connected to the Internet all the time, or when bandwidth is scarce </li></ul><ul><li>More storage space available - 5MB limit per domain (recommended by W3C), compared to 4KB per cookie </li></ul>
  32. 32. Local Storage Demo HTML <form> <fieldset> <label for=&quot;value&quot;>enter key name:</label> <input type=&quot;text&quot; id=&quot;key&quot; /> <label for=&quot;value&quot;>enter key value:</label> <input type=&quot;text&quot; id=&quot;value&quot; /> </fieldset> <fieldset> <button type=&quot;button&quot; onclick=&quot;setValue()&quot;> store the key value</button> <button type=&quot;button&quot; onclick=&quot;getValue()&quot;> retrieve the key value</button> <button type=&quot;button&quot; onclick=&quot;getCount()&quot;> retrieve the number of keys</button> <button type=&quot;button&quot; onclick=&quot;clearAll()&quot;> clear all key values</button> </fieldset> </form>
  33. 33. Local Storage Demo Script <ul><li>var $ = function (id) { </li></ul><ul><li>return document.getElementById(id); </li></ul><ul><li>} </li></ul><ul><li>function setValue() { </li></ul><ul><li>window.localStorage.setItem($(&quot;key&quot;).value, $(&quot;value&quot;).value); </li></ul><ul><li>} </li></ul><ul><li>function getValue() { </li></ul><ul><li>alert(window.localStorage.getItem($(&quot;key&quot;).value)); </li></ul><ul><li>} </li></ul><ul><li>function getCount() {alert(window.localStorage.length);} </li></ul><ul><li>function clearAll() {window.localStorage.clear();} </li></ul>
  34. 34. End User Outlook What is the Advantage to the End User?
  35. 35. HTML 5 – End User Outlook <ul><li>Provides a very rich user experience without Plug-ins </li></ul><ul><li>RIA replacement? </li></ul><ul><li>Better Performance </li></ul><ul><li>Leverages GPU for better graphical experience </li></ul>
  36. 36. How to Detect HTML5? <ul><li>HTML5 is not a thing someone can detect </li></ul><ul><ul><li>It consists of many elements that can be detected </li></ul></ul><ul><ul><ul><li><canvas> , <video> , etc. </li></ul></ul></ul><ul><li>The HTML5 specification defines how tags interact with JavaScript </li></ul><ul><ul><li>Through the D ocument O bject M odel ( DOM ) </li></ul></ul><ul><li>HTML5 doesn’t just define a <video> tag </li></ul><ul><ul><li>There is also a corresponding DOM API for video objects in the DOM </li></ul></ul><ul><ul><li>You can use this API to detect support for different video formats, etc. </li></ul></ul>
  37. 37. HTML 5 – Showcases and Resources <ul><li>HTML 5 Rocks – Examples, Demos, Tutorials </li></ul><ul><ul><li> </li></ul></ul><ul><li>HTML 5 Demos </li></ul><ul><ul><li>http :// / </li></ul></ul><ul><li>Internet Explorer 9 Test Drive for HTML 5 </li></ul><ul><ul><li>http :// </li></ul></ul><ul><li>Apple Safari HTML 5 Showcases </li></ul><ul><ul><li> / </li></ul></ul><ul><li>Dive into HTML 5 </li></ul><ul><ul><li> </li></ul></ul>
  38. 38. HTML 5 <ul><li>Questions? </li></ul>
  39. 39. Homework <ul><li>Make the following Web Page. </li></ul><ul><ul><li>Note that there should be validators for emails and url (email and url are required fields) </li></ul></ul><ul><li>Using the previously made Web Page, add functionality to check if the text in &quot;email&quot; and &quot;repeat email&quot; fields is equal. If not show warning message and reload the page </li></ul>
  40. 40. <ul><li>Using Canvas draw the following figures </li></ul><ul><li>Try doing the same using SVG </li></ul><ul><ul><li>Hint: Use JavaScript </li></ul></ul>Homework (2)
  41. 41. Homework (3) <ul><li>Build the following Web Page using HTML5 and CSS 2.1 </li></ul><ul><ul><li>Use &quot;Lorem Ipsum&quot; to fill with some sample Content </li></ul></ul><ul><ul><li>Try to make the page look OK when the window is resized </li></ul></ul>