Beginning Html 5 Presentation


Published on

Introducing HTML5

  • Be the first to comment

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

No notes for slide

Beginning Html 5 Presentation

  1. 1. Usman Saleem | Web Technology Group | i2c Inc. | 2012 HTML 5 Introduction | Features | DemoTuesday, February 7, 12
  2. 2. TABLE OF CONTENTS • History • HTML5 New Structure Syntax and Semantics • Geolocation in Depth • Web Forms 2.0 • Audio and Video • Drag and Drop • Local Storage and Offline ApplicationsTuesday, February 7, 12
  3. 3. WHAT IS HTML 5 ? • HTML 5 is not a reformulation of previous languages but backward compatible with HTML4 and XHTML 1.1 • Redefinition of existing markup <elements/> and new elements; adding more expression related to semantics • HTML5 is a framework ; wraps new technologies and API(s) e.g. Audio/Video , GeoLocation, Canvas, WebSockets etc.Tuesday, February 7, 12
  4. 4. W3C vs WHATWG W3C Specifications WHATWG Specifications HISTORYTuesday, February 7, 12
  5. 5. HTML 5 HISTORYHTML 4.0 + Strict Rules = XHTML 1.0WHATWG - Web Hypertext Application Technology Working GroupTuesday, February 7, 12
  6. 6. HTML 5 STRUCTURE AND SEMANTICSTuesday, February 7, 12
  7. 7. Doctype for HTML Public Standard Using HTML 4 version; written in English <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "|transitional|strict.dtd"> changed to The link points to the file which defines the standard <!DOCTYPE HTML > <meta http-equiv= “Content-Type content=text/html; charset=UTF-8”> <meta charset=utf-8 /> <META CHARSET=UTF-8 /> <meta charset=utf-8 /> changed to <meta charset=utf-8> <meta charset=”utf-8” /> <MeTa CHARset=utF-8>Tuesday, February 7, 12
  8. 8. HTML 5 BASIC MARKUP <!doctype html> Optional <html lang=en> Optional <head> No Closing tag ; no double quotes surrounding attribute <meta charset=utf-8> <title>Web Technology Group - Presentations</title> </head> Optional <body> <p> Today it was about revolutionary presentational technology HTML 5 future of web No Closing tag; </p> </body> </html> - HTML5 is no more XML LanguageTuesday, February 7, 12
  9. 9. HTML 5 NEW STRUCTURAL ELEMENTSTuesday, February 7, 12
  10. 10. <HEADER>“The header element represents a group of introductory or navigational aids ... Note: A header element isintended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is notrequired. The header element can also be used to wrap a section’s table of contents, a search form, or anyrelevant logos” <header> <hgroup> <h1>i2c Inc. </h1> Group of headings <h2>Conceive, Configure, Commit</h2> </hgroup> <nav> <ul> Header Navigation <li>Home</li> <li><a href=”products.html”>Our Services</a></li> <li><a href=”contact.html”>Contact Us</a></li> </ul> </nav> </header>Tuesday, February 7, 12
  11. 11. <NAV>“The <nav> element is designed to mark up navigation. Navigation is defined as being links around a page(so, for example, a table of contents at the top of an article that links to anchor points on the same page)or within a site” <nav> Unordered List <ul> <li>Home</li> <li><a href=”products.html”>Our Services</a></li> <li><a href=”contact.html”>Contact Us</a></li> </ul> </nav> <nav> <p><a href=”#”>.. </a></p> Paragraphs List <p><a href=”#”>.. </a></p> </nav> <nav> <h2>Recent News</h2> Heading for List <ul>...</ul> </nav>Tuesday, February 7, 12
  12. 12. <FOOTER>“The <footer> element is a footer for its nearest ancestor sectioning content or sectioning root element. Afooter typically contains information about its section such as who wrote it, links to related documents,copyright data, and the like” <footer> <small>&copy;2012 i2c Inc. All rights reserved.</small> </footer> <footer> <nav> <ul> ... </ul> </nav> </footer>Tuesday, February 7, 12
  13. 13. <ARTICLE>“The article element represents a component of a page that consists of a self-contained composition in adocument, page, application, or site and that is intended to be independently distributable or reusable, e.g. ,in syndication”A blog post, a tutorial, a news story, comic strip, or a video with its transcript all fi t perfectly into this definition. <article> <header> <h1> Listen to HTML 5 Intro. <time datetime=2011-12-12>1 December</time></h1> <p>Published on <time datetime=2011-12-8>08 December 2011</time></p> </header> <p> I am going to talk about HTML5 a brief history and new wrapped technologies and APIs within (Venue: Conference Room) </p> <footer> From Usman Saleem </footer> </article>Tuesday, February 7, 12
  14. 14. <!doctype html> <html> <head> <title></title> </head> <body> <header> <h1></h1> <nav> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </nav> </header> <section> <article> <hgroup> <h1>Post title</h1> <h2>Subtitle and info</h2> </hgroup> <p>Content goes here.</p> </article> <article> <!-- Another article here --> </article> </section> <aside> <!-- Sidebar here --> </aside> <footer></footer> </body> </html>Tuesday, February 7, 12
  15. 15. HTML 5 NEW MARKUPTuesday, February 7, 12
  16. 16. <ASIDE>A section of a page that consists of content that is tangentially related to the content around the asideelement, and which could be considered separate from that content. The element can be used fortypographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for othercontent that is considered separate from the main content of the page. <FIGURE>This element that wraps an image (or a video, or block of code, or a supporting quotation) and its caption,which goes in the <figcaption> element <figure> <img src=me.jpg> <figcaption> <time datetime="2009-11-13"> Usman Saleem working for i2c Inc <m>Some Search Text</m> 13<sup>th</sup>November <small>Photo &copy; i2c HR Team</small> </time> </figcaption> </figure> <MARK>The element indicates a part of the document that has been highlighted due to its likely relevance to theuser’s current activity. <TIME>The time element helps browsers and others recognize times in HTML pages.Machine-readable times arepotentially useful for search engines, calendar programs, and the like.Tuesday, February 7, 12
  17. 17. HTML 5 REDEFINED MARKUPTuesday, February 7, 12
  18. 18. <CITE>A person’s name is not the title of a work— even if people call that person a piece of work— and theelement must therefore not be used to mark up people’s names. Now it must be used for title of workdone by person. In HTML4; <CITE>Amir Wain</CITE> once said, Change is constant. <OL>In HTML 4, the start attribute on <ol> was deprecated, as it was deemed presentational. Luckily, HTML5reverts this wrong decision. If you want an ordered list to start at five rather than line one, use <ol start=”five” reversed=”true”>...</ol> <ADDRESS>Element is for contact details of the author of the current <article> or document, not as a generic elementfor postal addresses <EM>,<I>, <STRONG>,<B><em> emphasizes and changes the meaning of sentence. <i> is represents the mood of voice. <strong>adds extra importance to the sentence. <b> adds stylistic value. <SMALL> It typically features disclaimers, caveats, legal restrictions, or copyrights.Tuesday, February 7, 12
  19. 19. REMOVED ELEMENTSThe following element are completely obsolete in HTML5, such as <applet> (use <embed> instead),<big>, <blink>, <center>, <font>, and <marquee>. They will not validate and must not be used byauthors. GLOBAL ATTRIBUTES“The hidden attribute must not be used to hide content that could legitimately be shown in anotherpresentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because thetabbed interface is merely a kind of overflow presentation—one could equally well just show all the formcontrols in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content justfrom one presentation— if something is marked hidden, it is hidden from all presentations, including, forinstance, screen readers.” <div id=”secondTab” hidden=”hidden”>Using a negative integer (by convention, tabindex=”-1”) allows the element to be focusedprogrammatically, but should not allow the element to be reached using sequential focus navigation.Tuesday, February 7, 12
  20. 20. GEOLOCATION APITuesday, February 7, 12
  21. 21. GEOLOCATION API • Not a part of HTML 5 specification. • Created by W3C, not WHATWG. API METHODS • getCurrentPosition(...) • Invokes asynchronously • watchPosition(...) • Uses GPS, IP Address, WiFi to locate • clearWatch(...) • Asks for Permission from user Error: Code watchPosition navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options) MaximumAge: 0 Position: Coords Timeout Lat | Long | AccuracyTuesday, February 7, 12
  22. 22. HTML 5 TEST SCORES www.html5test.comTuesday, February 7, 12
  23. 23. Dec 2011 HTML5 Support 342Tuesday, February 7, 12
  24. 24. Dec 2011 HTML5 Support 342 Chrome 15.x Opera 11.x Mozilla Firefox 8 Apple Safari 5.x Internet Explorer 9 Firefox Mobile i0S5 Android 2.3 Android 4.0 Opera Mobile 0 100 200 300 400Tuesday, February 7, 12
  25. 25. Tuesday, February 7, 12
  26. 26. HTML 5 FORMSTuesday, February 7, 12
  27. 27. NEW FORM AND ELEMENT ATTRIBUTES Name Description autofocus Specifies a element in form which should receive focus on page load autocomplete Indicate that this element’s value must be remembered for future pattern Input must match specified regular expression placeholder Example text that appears in textbox until the user types novalidate , Used on form - indicates that the browser should not validate the form formnovalidate required Indicates that the field value is mandatory TEXT SELECTION API Method Description select() Existing method for selecting all text in input control selectionStart Property that sets and gets the selection start point selectionEnd Property that sets and gets the selection end point setSelectionRange(Start,End) Method that sets the selection start and end pointTuesday, February 7, 12
  28. 28. NEW INPUT TYPES Name Description search Indicates a input field used for searching for content tel Indicates a input field used for containing telephone number url Indicates a input field used for typing absolute URL Address email Indicates a input field used for typing valid email address number Indicates a field that accepts numeric values range Indicates a input field used for specifying range of values time Indicates a input field used for specifying time date Indicates a field that contains date (day,month,year) color Indicates a field that used to mention color value. NEW CSS STYLES Name Description :valid Pseudo-class for styling form elements for valid state :invalid Pseudo-class for styling form elements for invalid state :required Pseudo-class for styling form elements that are required.Tuesday, February 7, 12
  29. 29. EXAMPLE - ATTRIBUTES <input type=”text” id=”text1” name=”text1” autofocus> <input type=”number” id=”AcctNumber” name=”AcctNumber” autocomplete=”off”> <input type=”number” id=”text2” name=”zipCode” placeholder=”Like 94650”> <input type=”text” id=”text3” name=”expText” pattern=”^[0-9]{5}$”> <form method="post" action="" novalidate> <input type="submit" name="save" formnovalidate/><input type="text" name="emailId" required/>Tuesday, February 7, 12
  30. 30. EXAMPLE - NEW INPUT TYPES <input type=”search” id=”text1” name=”text1”> <input type=”email” id=”emailId” name=”emailId” autocomplete=”off ”> <input type=”url” id=”text2” name=”urlAddress” > <input type=”number” id=”text3” name=”age” min=”18” max=”50” step=”1”> <input type="range" name="pay" min=”10” max=”99” step=”1”/> <input type=”date” value=”2011-12-22”> <input type=”time” value=”01:30”> Support in Opera only <input type=”week” value=”2011-W11”> <input type=”month” value=”2011-07”> Browsers with no support <input type=”color” > - JQuery UI/Plugins - WebForms JS LibraryTuesday, February 7, 12
  31. 31. AUDIO AND VIDEOTuesday, February 7, 12
  32. 32. HTML5 AUDIO AND VIDEO • Going to be primary Audio/Video playback Why ? • 2007, Opera developers created a video plugin • Future of Video/Audio playback wrapped within image tag. • Clean code; with fallback strategy • Each browser has its own way of presenting • Player is built-in; performance optimized <video/> element following standard • iOS devices have no flash support • Audio control built on same element; supporting specific formats.Tuesday, February 7, 12
  33. 33. HTML5 AUDIO AND VIDEO<video/> Attributes <video controls> <source src=”file.mp4” type=”video/mp4”> • preload=none|auto|metadata <source src=”file.webm” type=”video/webm”> <source src=”file.ogg” type=”video/ogg”> • autoplay <p>Your browser doesnt support video</p> </video> • loop • poster=”poster.jpg” <audio/> • width | height <audio src="trailer.oga" controls> <p>Your browser doesnt support audio</p> </audio>, February 7, 12
  34. 34. DRAG AND DROPTuesday, February 7, 12
  35. 35. DRAG AND DROP API How to ? • 1999, Microsoft added support in IE5 • Register to draggable events; at least 3 • DOM Event based API • Mention the “dropzone” • Inconsistent implementations by vendors • Apply to all links, text nodes and image elements • Drag elements to external applications e.g. other browser window or Photoshop or a text editor <img draggable=”true” /> Browser Support ondragstart ondrop ondragover <div>Drop Zone</div>Tuesday, February 7, 12
  36. 36. LOCAL STORAGE AND OFFLINE APPSTuesday, February 7, 12
  37. 37. HTML 5 STORAGE TYPES Web Storage • Local / Session storage also called Web/DOM Storage. • Improvement over cookies; like cookies they are NOT sent to server. Limit varies from 5MB-10MB • Local storage (like persistent cookie) is persistent; Session storage (like session cookies) is transient. • Common Interface; Supported by all browsers. Web SQL Storage • Fully relational SQL Interface to SQL Database Engine. • Uses embedded SQLLite database engine. • No support for IE and Firefox.Tuesday, February 7, 12
  38. 38. QCON 2011- PRESENTATIONS • HTML 5 Design and Development Tooling • Building Offline Access to Websites • High Performance HTML 5 BOOKS • HTML 5 Solutions [Essential Techniques for Developers] • Introduction to HTML 5 [2nd Edition]Tuesday, February 7, 12