Beginning Html 5 Presentation

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 Ofﬂine Applications


WHAT IS HTML 5 ?

• HTML 5 is not a reformulation of previous languages but
backward compatible with HTML4 and XHTML 1.1

• Redeﬁnition 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.


W3C vs WHATWG
W3C Specifications
WHATWG Specifications

HISTORY


HTML 5 HISTORY

HTML 4.0 + Strict Rules = XHTML 1.0
WHATWG - Web Hypertext Application Technology Working Group


HTML 5 STRUCTURE AND SEMANTICS


Doctype for HTML Public Standard Using HTML 4 version; written in English

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd|transitional|strict.dtd">

changed to The link points to the ﬁle which deﬁnes 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>


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 Language


HTML 5 NEW STRUCTURAL ELEMENTS


<HEADER>
“The header element represents a group of introductory or navigational aids ... Note: A header element is
intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not
required. The header element can also be used to wrap a section’s table of contents, a search form, or any
relevant logos”

<header>
<hgroup>
<h1>i2c Inc. </h1> Group of headings
<h2>Conceive, Conﬁgure, 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>


<NAV>
“The <nav> element is designed to mark up navigation. Navigation is deﬁned 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>


<FOOTER>
“The <footer> element is a footer for its nearest ancestor sectioning content or sectioning root element. A
footer typically contains information about its section such as who wrote it, links to related documents,
copyright data, and the like”

<footer>
<small>©2012 i2c Inc. All rights reserved.</small>
</footer>

<footer>
<nav>
<ul> ... </ul>
</nav>
</footer>


<ARTICLE>
“The article element represents 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 distributable or reusable, e.g. ,
in syndication”
A blog post, a tutorial, a news story, comic strip, or a video with its transcript all ﬁ t perfectly into this deﬁnition.

<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>


<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1></h1>
<nav>
<ul>
<li><a href="#">link 1</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>

</article>
</section>
<aside>

</aside>
<footer></footer>
</body>
</html>

HTML 5 NEW MARKUP


<ASIDE>
A section of a page that consists of content that is tangentially related to the content around the aside
element, and which could be considered separate from that content. The element can be used for
typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other
content 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 © 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 the
user’s current activity.

<TIME>
The time element helps browsers and others recognize times in HTML pages.Machine-readable times are
potentially useful for search engines, calendar programs, and the like.

HTML 5 REDEFINED MARKUP


<CITE>
A person’s name is not the title of a work— even if people call that person a piece of work— and the
element must therefore not be used to mark up people’s names. Now it must be used for title of work
done 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, HTML5
reverts this wrong decision. If you want an ordered list to start at ﬁve rather than line one, use
<ol start=”ﬁve” reversed=”true”>...</ol>

<ADDRESS>
Element is for contact details of the author of the current <article> or document, not as a generic element
for 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.


REMOVED ELEMENTS
The 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 by
authors.

GLOBAL ATTRIBUTES
“The hidden attribute must not be used to hide content that could legitimately be shown in another
presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the
tabbed interface is merely a kind of overﬂow presentation—one could equally well just show all the form
controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just
from one presentation— if something is marked hidden, it is hidden from all presentations, including, for
instance, screen readers.”

<div id=”secondTab” hidden=”hidden”>

Using a negative integer (by convention, tabindex=”-1”) allows the element to be focused
programmatically, but should not allow the element to be reached using sequential focus navigation.


GEOLOCATION API


GEOLOCATION API
• Not a part of HTML 5 speciﬁcation.

• 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 | Accuracy


HTML 5 TEST SCORES
www.html5test.com


Dec 2011 HTML5 Support
342


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 400


HTML 5 FORMS


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 point


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.


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/>


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 Library


AUDIO AND VIDEO


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 ﬂash support
• Audio control built on same element; supporting
speciﬁc formats.


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>

http://www.dailymotion.com/html5

DRAG AND DROP


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>


LOCAL STORAGE AND OFFLINE APPS


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.

QCON 2011- PRESENTATIONS
• HTML 5 Design and Development Tooling

• Building Ofﬂine Access to Websites

• High Performance HTML 5

BOOKS

• HTML 5 Solutions [Essential Techniques for Developers]

• Introduction to HTML 5 [2nd Edition]


Beginning Html 5 Presentation

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Beginning Html 5 Presentation

Similar to Beginning Html 5 Presentation (20)

Beginning Html 5 Presentation