HTML5 Solutions - Essential Techniques for HTML5 Developers PDF
HTML5 Fundamentals
-
Upload
doncho-minkov -
Category
Technology
-
view
2.158 -
download
0
description
Transcript of 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
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
Introduction to HTML Introduction to HTML 55
What the … is HTML 5?What the … is HTML 5?
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
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
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
Tags in HTML5Tags in HTML5What should we keep in mind with What should we keep in mind with
HTML5?HTML5?
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">
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>
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
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>
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>
Semantic TagsSemantic TagsLive DemoLive Demo
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
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.
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>
Playing AudioPlaying AudioLive DemoLive Demo
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" />
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
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
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
New Form Tags:New Form Tags:<input <input
type="range">type="range">Live DemoLive Demo
Built-In Forms Built-In Forms ValidationValidation
Live DemoLive Demo
Canvas vs. Canvas vs. SVGSVG
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
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);
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);
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
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>
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>
Canvas vs. SVGCanvas vs. SVGLive DemoLive Demo
End User OutlookEnd User OutlookWhat is the Advantage to the End What is the Advantage to the End
User?User?
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
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
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
HTML 5HTML 5
Questions?Questions?