+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Html5 Introduction
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, 2011
The Trusted Technology Partner in Business Innovation
Products | 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 peek
The Trusted Technology Partner in Business Innovation
Products | 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 specifications
The Trusted Technology Partner in Business Innovation
Products | 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.
• ECMAScript5
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services
5. HTML5 Semantics & Markup
The Trusted Technology Partner in Business Innovation
Products | 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 public
The Trusted Technology Partner in Business Innovation
Products | 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 Innovation
Products | 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 Innovation
Products | 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 site's 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 elements
The Trusted Technology Partner in Business Innovation
Products | 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 Innovation
Products | Consulting Services | Managed Services
11. Semantic Elements and div: How to select?
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services
12. New Semantic Elements in HTML5: Article
Scenario:
HTML5:
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services
13. New Semantic Elements in HTML5: Dates and Times
Scenario:
The Trusted Technology Partner in Business Innovation
Products | 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 important
The Trusted Technology Partner in Business Innovation
Products | 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 days
The Trusted Technology Partner in Business Innovation
Products | 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 Innovation
Products | Consulting Services | Managed Services
17. Semantics and Markup: Demo
The Trusted Technology Partner in Business Innovation
Products | 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.com
The Trusted Technology Partner in Business Innovation
Products | 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.subject
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services
20. Web Form: Demo
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services
21. HTML5 Multimedia – Audio & Video
The Trusted Technology Partner in Business Innovation
Products | 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, waiting
The Trusted Technology Partner in Business Innovation
Products | 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 Innovation
Products | Consulting Services | Managed Services
24. Audio & Video: Demo
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services
25. HTML5 – Video codec support in browsers
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services
26. Thank You
Manoj Kumar
manoj.kumar@neudesic.com
The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services