HTML5 Fundamentals

36
HTML 5 HTML 5 New Tags, New Attributes, New New Tags, New Attributes, New JavaScript APIs, Forms, Validation, JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Audio, Video, SVG, Canvas Doncho Minkov Doncho Minkov Telerik Telerik Academy Academy academy.telerik academy.telerik .com .com Technical Trainer Technical Trainer http://www.minkov.it http://www.minkov.it

description

Descriptive presentation about the HTML5

Transcript of HTML5 Fundamentals

Page 1: HTML5 Fundamentals

HTML 5HTML 5New Tags, New Attributes, New New Tags, New Attributes, New

JavaScript APIs, Forms, Validation, JavaScript APIs, Forms, Validation, Audio, Video, SVG, CanvasAudio, Video, SVG, Canvas

Doncho MinkovDoncho Minkov

Telerik Telerik AcademyAcademyacademy.telerikacademy.telerik.com .com

Technical TrainerTechnical Trainerhttp://www.minkov.it http://www.minkov.it

Page 2: HTML5 Fundamentals

Table of ContentsTable of Contents Introduction to HTML 5Introduction to HTML 5 Changed Old TagsChanged Old Tags New TagsNew Tags

Audio and Video TagsAudio and Video Tags Semantic Tags (Semantic Tags (<header><header>, , <footer><footer>, ,

…)…) New Form ElementsNew Form Elements

Forms ValidationForms Validation New AttributesNew Attributes Canvas vs. SVGCanvas vs. SVG 2

Page 3: HTML5 Fundamentals

Introduction to HTML Introduction to HTML 55

What the … is HTML 5?What the … is HTML 5?

Page 4: HTML5 Fundamentals

What is HTML 5?What is HTML 5? HTML5 – the next major revision of the HTML5 – the next major revision of the

HTMLHTML Currently under developmentCurrently under development

Far away from final versionFar away from final version

Developed under the HTML 5 working Developed under the HTML 5 working group of the World Wide Web Consortium group of the World Wide Web Consortium (W3C) in 2007(W3C) in 2007

First Public Working Draft of the First Public Working Draft of the specificationspecification January 22, 2008January 22, 2008

Parts of HTML5 are being implemented in Parts of HTML5 are being implemented in browsers before the whole specification is browsers before the whole specification is readyready 4

Page 5: HTML5 Fundamentals

HTML – Past, Present, HTML – Past, Present, FutureFuture

1991 – HTML first mentioned – Tim Berners-Lee – 1991 – HTML first mentioned – Tim Berners-Lee – HTML tagsHTML tags

1993 – HTML (first public version, published at 1993 – HTML (first public version, published at IETF)IETF)

1993 – HTML 2 draft1993 – HTML 2 draft 1995 – HTML 2 – W3C1995 – HTML 2 – W3C 1995 – HTML 3 draft 1995 – HTML 3 draft 1997 – HTML 3.2 – “Wilbur”1997 – HTML 3.2 – “Wilbur” 1997 – HTML 4 – ”Cougar” – CSS 1997 – HTML 4 – ”Cougar” – CSS 1999 – HTML 4.01 (final)1999 – HTML 4.01 (final) 2000 – XHTML draft 2000 – XHTML draft 2001 – XHTML (final)2001 – XHTML (final) 2008 – HTML5 / XHTML5 draft2008 – HTML5 / XHTML5 draft 2011 – feature complete HTML52011 – feature complete HTML5 2022 – HTML5 – final specification2022 – HTML5 – final specification 5

Page 6: HTML5 Fundamentals

HTML 5 GoalsHTML 5 Goals Latest version is HTML5Latest version is HTML5

Aimed to have all of the power of Aimed to have all of the power of native applicationsnative applications

Run on any platform (Windows, Run on any platform (Windows, Linux, iPhone, Android, etc.)Linux, iPhone, Android, etc.)

New features should be based on New features should be based on HTML, CSS, DOM and JavaScriptHTML, CSS, DOM and JavaScript

Reduce the need for external Reduce the need for external pluginsplugins

Better error handlingBetter error handling More markup to replace scriptingMore markup to replace scripting

6

Page 7: HTML5 Fundamentals

Tags in HTML5Tags in HTML5What should we keep in mind with What should we keep in mind with

HTML5?HTML5?

Page 8: HTML5 Fundamentals

Changed Old TagsChanged Old Tags

Doctype tag:Doctype tag:

HTML tag:HTML tag:

Meta tag:Meta tag:

Link tag:Link tag:

<!DOCTYPE html><!DOCTYPE html>

<html lang="en" xml:lang="en"> <html lang="en" xml:lang="en">

<meta charset="utf-8"> <meta charset="utf-8">

<link rel="stylesheet" href="style-original.css"><link rel="stylesheet" href="style-original.css">

Page 9: HTML5 Fundamentals

New Layout New Layout SctuctureSctucture

Better layout structure: Semantic Better layout structure: Semantic tagstags <header> = <div id="header"><header> = <div id="header">

<nav> = <div id="nav"><nav> = <div id="nav">

<section><section>

<article><article>

<aside><aside>

<footer><footer>

Page 10: HTML5 Fundamentals

New Layout Sctucture (2)New Layout Sctucture (2)

Elements like header and footer Elements like header and footer are not meant to be only at the are not meant to be only at the top and bottom of the pagetop and bottom of the page

Header and footer of each Header and footer of each document section document section Not very different from Not very different from <DIV<DIV> tag > tag

but are more semantically well but are more semantically well defined in the document structuredefined in the document structure

Page 11: HTML5 Fundamentals

New Layout Sctucture New Layout Sctucture – – ExampleExample

<body><body>

<header><header> <hgroup><hgroup>            <h1>HTML 5 Presentation</h1><h1>HTML 5 Presentation</h1>            <h2>New Layout Structure</h2><h2>New Layout Structure</h2>        </hgroup></hgroup>    </header></header>

<nav><nav>        <ul><ul> LectureLecture        </ul></ul> <ul><ul>

DemosDemos        </ul></ul> <ul><ul> TrainersTrainers        </ul></ul>    </nav> </nav> 

Page 12: HTML5 Fundamentals

New Layout Sctucture New Layout Sctucture – – Example (2)Example (2)

<section><section>      <article><article>          <header><header>                <h1>First Paragraph</h1><h1>First Paragraph</h1>            </header></header>    <section><section>    Some textSome text    </section></section>        </article></article> </section> </section>

    <aside><aside>        <a href="http://academy.telerik.com"> more <a href="http://academy.telerik.com"> more info</a>info</a>    </aside></aside>

    <footer><footer>        Done by Doncho Minkov, (c) 2011, Telerik Done by Doncho Minkov, (c) 2011, Telerik AcademyAcademy    </footer></footer></body></body>

Page 13: HTML5 Fundamentals

Semantic TagsSemantic TagsLive DemoLive Demo

Page 14: HTML5 Fundamentals

New TagsNew Tags <article><article>

For external content, like text from a For external content, like text from a news-article, blog, forum, or any other news-article, blog, forum, or any other external sourceexternal source

<aside><aside> For content aside from (but related to) For content aside from (but related to)

the content it is placed inthe content it is placed in <details><details>

For describing details about a document, For describing details about a document, or parts of a documentor parts of a document

<summary><summary> A caption, or summary, inside the details A caption, or summary, inside the details

elementelement

Page 15: HTML5 Fundamentals

New Tags (2)New Tags (2) <mark><mark> For text that should be highlightedFor text that should be highlighted

<nav><nav> For a section of navigationFor a section of navigation

<section> <section> For a section in a document (e.g. For a section in a document (e.g.

chapters, headers, footers)chapters, headers, footers) <wbr><wbr> Word break. For defining an appropriate Word break. For defining an appropriate

place to break a long word or sentenceplace to break a long word or sentence Other tagsOther tags <command><command>,, <datalist><datalist>, , <details><details>,, <progress<progress>>, etc., etc.

Page 16: HTML5 Fundamentals

New Media TagsNew Media Tags Media TagsMedia Tags

<audio><audio> Attributes: Attributes: autoplayautoplay, , controlscontrols, , looploop, , srcsrc

<video><video> Attributes: Attributes: autoplayautoplay, , controlscontrols, , looploop, , heightheight, , widthwidth, , srcsrc

<audio width="360" height="240" controls= <audio width="360" height="240" controls= "controls" > "controls" > <source src="someSong.mp3" type="audio/mp3"> <source src="someSong.mp3" type="audio/mp3"> </source></source> Audio tag is not supportedAudio tag is not supported</audio></audio>

Page 17: HTML5 Fundamentals

Playing AudioPlaying AudioLive DemoLive Demo

Page 18: HTML5 Fundamentals

Embed Tag – New SyntaxEmbed Tag – New Syntax <embed><embed>

Defines embedded content, Defines embedded content, such as a plug-in such as a plug-in

AttributesAttributes src="url"src="url", , type="type"type="type"

<embed src="helloworld.swf" /><embed src="helloworld.swf" />

Page 19: HTML5 Fundamentals

New AttributesNew Attributes New attributesNew attributes

AttributeAttribute DescriptionDescriptionAutocompleteAutocomplete ONON//OFFOFF. In case of “. In case of “onon”, the ”, the

browser stores the value, browser stores the value, auto fill when the user auto fill when the user visits the same form next visits the same form next time time

AutofocusAutofocus AutofocusAutofocus. Input field is . Input field is focused on page loadfocused on page load

RequiredRequired RequiredRequired. Mandates input . Mandates input field value for the form field value for the form submit actionsubmit action

DragabbleDragabble TrueTrue//falsefalse indicates if the indicates if the element is dragabble or notelement is dragabble or not

Page 20: HTML5 Fundamentals

New <input> TypesNew <input> Types New New <input><input> type(s)type(s)

AttributeAttribute DescriptionDescriptionNumber/RangeNumber/Range Restricts users to enter only Restricts users to enter only

numbers. Additional numbers. Additional attributes attributes minmin, , max max and and step step and and valuevalue can convert the can convert the input to a input to a sliderslider controlcontrol or a or a spinspin boxbox

date, month, date, month, week, time, date week, time, date + time, date + + time, date + time - time zone, time - time zone, datetime-local datetime-local

Providers a Providers a datedate pickerpicker interface.interface.

EmailEmail Input type for Input type for EmailEmail AddressesAddresses

URLURL Input field for Input field for URL addressURL address

TelephoneTelephone Input type for Input type for TelephoneTelephone numbernumber

Page 21: HTML5 Fundamentals

New <input> TypesNew <input> Types New New <input><input> type(s)type(s)

AttributeAttribute DescriptionDescriptionColorColor Specifies that its input Specifies that its input

element is a color-well element is a color-well control, for setting the control, for setting the element’s value to a string element’s value to a string representing a simple colorrepresenting a simple color

FileFile Specifies that its input Specifies that its input element represents a list of element represents a list of file itemsfile items

SearchSearch Has a Has a patternpattern = = patternpatternSpecifies a regular Specifies a regular expression against which a expression against which a UA is meant to check the UA is meant to check the value of the control value of the control represented by its elementrepresented by its element

Page 22: HTML5 Fundamentals

New Form Tags:New Form Tags:<input <input

type="range">type="range">Live DemoLive Demo

Page 23: HTML5 Fundamentals

Built-In Forms Built-In Forms ValidationValidation

Live DemoLive Demo

Page 24: HTML5 Fundamentals

Canvas vs. Canvas vs. SVGSVG

Page 25: HTML5 Fundamentals

CanvasCanvas Allows dynamic, scriptable rendering Allows dynamic, scriptable rendering

of 2D shapes and bitmap imagesof 2D shapes and bitmap images Low level, procedural model Low level, procedural model

Updates a bitmapUpdates a bitmap Does not have a built-in scene graphDoes not have a built-in scene graph

Consists of a drawable region defined Consists of a drawable region defined in HTML in HTML Has height and width attributesHas height and width attributes Accessible by JavaScript CodeAccessible by JavaScript Code

Used for building graphs, animations, Used for building graphs, animations, games, and image compositiongames, and image composition

Page 26: HTML5 Fundamentals

Canvas ExampleCanvas Example In HTML:In HTML:

26

<canvas id="example" width="200" height="200"><canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not This is displayed if HTML5 Canvas is not supported.supported.</canvas></canvas>

Access with JavaScript:Access with JavaScript:

var example = var example = document.getElementById('example');document.getElementById('example');var context = example.getContext('2d');var context = example.getContext('2d');context.fillStyle = "rgb(255,0,0)";context.fillStyle = "rgb(255,0,0)";context.fillRect(30, 30, 50, 50);context.fillRect(30, 30, 50, 50);

Page 27: HTML5 Fundamentals

Canvas ExampleCanvas Example In HTML:In HTML:

27

<canvas id="example" width="200" height="200"><canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not This is displayed if HTML5 Canvas is not supported.supported.</canvas></canvas>

Access with JavaScript:Access with JavaScript:

var example = var example = document.getElementById('example');document.getElementById('example');var context = example.getContext('2d');var context = example.getContext('2d');context.fillStyle = "rgb(255,0,0)";context.fillStyle = "rgb(255,0,0)";context.fillRect(30, 30, 50, 50);context.fillRect(30, 30, 50, 50);

Page 28: HTML5 Fundamentals

SVGSVG SVG stands for SVG stands for SScalable calable VVector ector GGraphics raphics A language for describing 2D-graphics A language for describing 2D-graphics Graphical applicationsGraphical applications

Most of the web browsers can display Most of the web browsers can display SVG just like they can display PNG, SVG just like they can display PNG, GIF, and JPGGIF, and JPG Internet Explorer users may have to Internet Explorer users may have to

install the install the Adobe SVG ViewerAdobe SVG Viewer HTML5HTML5 allows embeding allows embeding SVGSVG

Directly using Directly using <svg><svg>......</svg></svg>28

Page 29: HTML5 Fundamentals

SVG ExampleSVG Example

29

<!DOCTYPE html><!DOCTYPE html><head><head> <title>SVG</title><title>SVG</title> <meta charset="utf-8" /><meta charset="utf-8" /></head></head><body><body> <h2>HTML5 SVG Circle</h2><h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200" <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" <circle id="redcircle" cx="50" cy="50" r="50" r="50" fill="red" />fill="red" /> </svg></svg></body></body></html></html>

Page 30: HTML5 Fundamentals

SVG Gradient ExampleSVG Gradient Example

30

<svg id="svgelem" height="200" <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">xmlns="http://www.w3.org/2000/svg"> <defs><defs> <radialGradient id="gradient" cx="50%" cy="50%" <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">r="50%" fx="50%" fy="50%"> <stop offset="0%" <stop offset="0%" style="stop-color:rgb(200,200,200);stop-style="stop-color:rgb(200,200,200);stop-opacity:0"/>opacity:0"/> <stop offset="100%" <stop offset="100%" style="stop-color:rgb(0,0,255);stop-style="stop-color:rgb(0,0,255);stop-opacity:1"/>opacity:1"/> </radialGradient></radialGradient> </defs></defs> <ellipse cx="100" cy="50" rx="100" ry="50" <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />style="fill:url(#gradient)" /></svg></svg>

Page 31: HTML5 Fundamentals

Canvas vs. SVGCanvas vs. SVGLive DemoLive Demo

Page 32: HTML5 Fundamentals

End User OutlookEnd User OutlookWhat is the Advantage to the End What is the Advantage to the End

User?User?

Page 33: HTML5 Fundamentals

HTML 5 – End User HTML 5 – End User OutlookOutlook

Provides a very rich user Provides a very rich user experience without Plug-insexperience without Plug-ins

RIA replacement?RIA replacement? Better PerformanceBetter Performance Leverages GPU for betterLeverages GPU for better

graphical experiencegraphical experience

Page 34: HTML5 Fundamentals

How to Detect HTML5?How to Detect HTML5? HTML5 is not a thing someone can detectHTML5 is not a thing someone can detect

It consists of many elements that can be It consists of many elements that can be detecteddetected <canvas><canvas>, , <video><video>, etc., etc.

The HTML5 specification defines how tags The HTML5 specification defines how tags interact with JavaScriptinteract with JavaScript Through the Through the DDocument ocument OObject bject MModel (odel (DOMDOM))

HTML5 doesn’t just define a HTML5 doesn’t just define a <video><video> tag tag There is also a corresponding DOM API for There is also a corresponding DOM API for

video objects in the DOMvideo objects in the DOM You can use this API to detect support for You can use this API to detect support for

different video formats, etc.different video formats, etc.34

Page 35: HTML5 Fundamentals

HTML 5 – HTML 5 – Showcases and Showcases and

ResourcesResources HTML 5 Rocks – Examples, Demos, HTML 5 Rocks – Examples, Demos,

TutorialsTutorials http://www.html5rocks.com/http://www.html5rocks.com/

HTML 5 DemosHTML 5 Demos http://html5demos.com/http://html5demos.com/

Internet Explorer 9 Test Drive for HTML 5Internet Explorer 9 Test Drive for HTML 5 http://ie.microsoft.com/testdrive/http://ie.microsoft.com/testdrive/

Apple Safari HTML 5 ShowcasesApple Safari HTML 5 Showcases http://www.apple.com/html5/http://www.apple.com/html5/

Dive into HTML 5Dive into HTML 5 http://diveintohtml5.org/http://diveintohtml5.org/

35

Page 36: HTML5 Fundamentals

HTML 5HTML 5

Questions?Questions?