Your SlideShare is downloading. ×
Html5 Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5 Introduction

381
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
381
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML 5 – Introduction HTML5 is here, and the Web will never be the same Manoj Kumar Sr. Technical Consultant manoj.kumar@neudesic.com 29 Aug, 2011The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 2. Agenda • HTML5 Features: Main features it has and how are we going to cover them in coming sessions • HTML5 Semantic Markup • HTML5 Audio and Video • Next session sneak peekThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 3. What is exactly HTML5? – HTML5 = HTML + CSS + JavaScript – How developers use improved markup, richer style capabilities and new JavaScript APIs to make the most of new Web development features? – W3C: all 100-plus of these specifications under the moniker “HTML5” – A unifying concept for that change – So: HTML5 is about changes to HTML, CSS and JavaScript. Rather than worrying about all 100-plus specificationsThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 4. Main Features • HTML5 Semantic & Markup, Forms 2.0 • HTML5 Audio and Video Multimedia • HTML5 Canvas • Scalable Vector Graphics (SVG) • HTML5 FileSystem APIs, Geolocation, Speech Input • Web Storage, Microdata, Server-Sent Events • Web Workers, Web Sockets, Notifications • Cascading Style Sheets, Level 3 (CSS3): Media Queries, 2D/3D transforms, Grid System, Web fonts etc. • ECMAScript5The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 5. HTML5 Semantics & MarkupThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 6. HTML5 Semantics & Markup • Not as XHTML, HTML5 has lots of flexibility and would support the followings: – Uppercase tag names. – Quotes are optional for attributes. – Attribute values are optional. – Closing empty elements are optional. • Some rules for HTML5 were established: – New features should be based on HTML, CSS, DOM, and JavaScript – Reduce the need for external plugins (like Flash) – Better error handling – More markup to replace scripting – HTML5 should be device independent – The development process should be visible to the publicThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 7. Shorter Markups Old way HTML5 way <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" /> <link rel="stylesheet" href="style-original.css" type="text/css" /> <link rel="stylesheet" href="style- original.css" /> <script type="text/javascript" src="scriptfile.js"></script> <script src="scriptfile.js"></script>The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 8. HTML5 Semantics – Elements, attributes, and attribute values in HTML : Have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content. – Correct HTML5 markup allow it to be used in wide variety of context. – Simple example: Same Web page written by an author who only considered desktop computer Web browsers can be viewed by a small browser on a mobile phone. [Because HTML conveys meaning, rather than presentation] – Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 9. New Semantic Elements in HTML5 HTML5 is not just about making existing markup shorter. <section> The section element represents a generic document or application section. Examples: A Web sites home page could be split into sections for an introduction, news items, contact information. <div> vs semantic elements (???) <nav> Represents a section of a page that links to other pages or to parts within the page: — only sections that consist of major navigation blocks In particular <article> A component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently reusable Examples: Forum post, a magazine article, a user-submitted comment <aside> A section of a page that consists of content that is tangentially related to the content Examples: pull quotes or sidebars, for advertising, for groups of nav elementsThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 10. New Semantic Elements in HTML5 <figure> and <figcaption> A unit of content, optionally with a caption, and that can be moved away from the main flow of the document without affecting the document’s meaning. <figure> vs <aside> : If the content is simply related and not essential, use <aside>. If the content is essential but its position in the flow of content isn’t important, use <figure>. <hgroup>Heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines <header>The header element represents a group of introductory or navigational aids. <footer> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. <time> The time element represents either a time on a 24 hour clock, or a precise date <mark> The mark element represents a run of text in one document marked or highlighted for reference purposes.The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 11. Semantic Elements and div: How to select?The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 12. New Semantic Elements in HTML5: Article Scenario: HTML5:The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 13. New Semantic Elements in HTML5: Dates and Times Scenario:The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 14. New Semantic Elements in HTML5: Navigation One of the most important parts of any web site is the navigation bar. Scenario:Use cases:- Motion is limited: a browser add-on allows you to jump to (or jump past) major navigation links- Sight is limited: Using “screenreader” to go thru the document (screenreader to jump over the navigation bar and start reading the main content)SO: Being able to determine navigation links programmatically is importantThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 15. New Semantic Elements in HTML5: Footer Scenario: HTML5: Contents: Its section such as who wrote it, links to related documents, copyright data, and the like. Fat footers: A rage these daysThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 16. HTML5 Markup – Other enhancements – Markup for applications: <datalist>, <progress>, <meter>, <details>, <summary> – Descriptive link relation:The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 17. Semantics and Markup: DemoThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 18. HTML5 - Web Forms 2.0 : New input types datetime year, month, day, hour, minute, second, fractions of a second. Encoded- ISO 8601. time zone-UTC. datetime-local Same but with no time zone. date date (year, month, day) month date consisting of a year and a month week date consisting of a year and a week number time time (hour, minute, seconds, fractional seconds) number only numerical value. The step attribute specifies the precision, defaulting to 1 range contain a value from a range of numbers email accepts only email value. Format - email@example.com url Should contain a URL address. Format- http://www.example.com or http://example.comThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 19. HTML5 - Web Forms 2.0: Other enhancements – <output> element – Attribute (**attribute is supported by latest versions of Mozilla, Safari and Crome browsers only) • placeholder: • autofocus • required – Custom Attributes • A custom data attribute starts with data- and would be named based on your requirement. Works with JavaScript APIs or CSS in similar way. • Access: – Dom: getAttribute("data-subject") – Dataset: dataset.subjectThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 20. Web Form: DemoThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 21. HTML5 Multimedia – Audio & VideoThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 22. HTML5 - Audio – No plugin (Even with plugin, not all browser has same plugin) – Audio formats: • Ogg • Mp3 • Wav – Example: – Attributes: autoplay, controls, loop, preload, src – Media Events (Audio+Video): abort, canplay, ended, error, loadeddata, loadstart, pause, play, progress, ratechange, seeked, seeking, suspend, volumechange, waitingThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 23. HTML5 - Video – No plugin required – Video Formats • Ogg : Ogg files with Theora video codec and Vorbis audio codec • MPEG4 : MPEG 4 files with H.264 video codec and AAC audio codec • WebM : WebM files with VP8 video codec and Vorbis audio codec – Example: – Attributes: audio, autoplay, controls, loop, poster, preload, src – Video Support:The Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 24. Audio & Video: DemoThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 25. HTML5 – Video codec support in browsersThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services
  • 26. Thank You Manoj Kumar manoj.kumar@neudesic.comThe Trusted Technology Partner in Business InnovationProducts | Consulting Services | Managed Services