SlideShare una empresa de Scribd logo

HTML5

•Descargar como PPT, PDF•
•
Doncho Minkov
Doncho Minkov
Tecnología
1 de 41
HTML 5 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it
Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Introduction to HTML 5 What the … is HTML 5?
What is HTML 5? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML – Past, Present, Future ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 Goals ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Designer Outlook What a Designer Should Know?
Changed Old Tags ,[object Object],[object Object],[object Object],[object Object],<!DOCTYPE html> <html lang=&quot;en&quot; xml:lang=&quot;en&quot;> <meta charset=&quot;utf-8&quot;> <link rel=&quot;stylesheet&quot; href=&quot;style-original.css&quot;>
New Layout Sctucture ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<header> <footer> <nav> <aside> <section> <header> <article> <footer>
New Layout Sctucture (2) ,[object Object],[object Object],[object Object]
New Layout Sctucture – Example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Layout Sctucture – Example (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Layout Structure Tags Live Demo
New Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Tags (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Media Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],<audio width=&quot;360&quot; height=&quot;240&quot; controls= &quot;controls&quot; > <source src=&quot;someSong.mp3&quot; type=&quot;audio/mp3&quot;> </source> Audio tag is not supported </audio>
Playing Audio Live Demo
Embed Tag – New Syntax ,[object Object],[object Object],[object Object],[object Object],<embed src=&quot;helloworld.swf&quot; />
New Attributes ,[object Object],Attribute Description Autocomplete ON / OFF . In case of “ on ”, the browser stores the value, auto fill when the user visits the same form next time Autofocus Autofocus . Input field is focused on page load Required Required . Mandates input field value for the form submit action Draggable True / false indicates if the element is draggable or not
New <input> Types ,[object Object],Attribute Description Number/Range Restricts users to enter only numbers. Additional attributes min , max and step and value can convert the input to a slider control or a spin box date, month, week, time, date + time, and date + time - time zone Providers a date picker interface. Email Input type for Email Addresses URL Input field for URL address Telephone Input type for Telephone number
New Form Tags: <input type=&quot;range&quot;> Live Demo
Built-In Forms Validation Live Demo
Canvas vs. SVG
Canvas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Canvas Example ,[object Object],<canvas id=&quot;example&quot; width=&quot;200&quot; height=&quot;200&quot;> This is displayed if HTML5 Canvas is not supported. </canvas> ,[object Object],var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = &quot;rgb(255,0,0)&quot;; context.fillRect(30, 30, 50, 50);
Canvas Example ,[object Object],<canvas id=&quot;example&quot; width=&quot;200&quot; height=&quot;200&quot;> This is displayed if HTML5 Canvas is not supported. </canvas> ,[object Object],var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = &quot;rgb(255,0,0)&quot;; context.fillRect(30, 30, 50, 50);
SVG ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
SVG Example <!DOCTYPE html> <head> <title>SVG</title> <meta charset=&quot;utf-8&quot; /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <circle id=&quot;redcircle&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;red&quot; /> </svg> </body> </html>
SVG Gradient Example <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <defs> <radialGradient id=&quot;gradient&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;50%&quot; fx=&quot;50%&quot; fy=&quot;50%&quot;> <stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(200,200,200);stop-opacity:0&quot;/> <stop offset=&quot;100%&quot; style=&quot;stop-color:rgb(0,0,255);stop-opacity:1&quot;/> </radialGradient> </defs> <ellipse cx=&quot;100&quot; cy=&quot;50&quot; rx=&quot;100&quot; ry=&quot;50&quot; style=&quot;fill:url(#gradient)&quot; /> </svg>
Canvas vs. SVG Live Demo
Local Storage ,[object Object],[object Object],[object Object]
Local Storage Demo HTML <form> <fieldset> <label for=&quot;value&quot;>enter key name:</label> <input type=&quot;text&quot; id=&quot;key&quot; /> <label for=&quot;value&quot;>enter key value:</label> <input type=&quot;text&quot; id=&quot;value&quot; /> </fieldset> <fieldset> <button type=&quot;button&quot; onclick=&quot;setValue()&quot;> store the key value</button> <button type=&quot;button&quot; onclick=&quot;getValue()&quot;> retrieve the key value</button> <button type=&quot;button&quot; onclick=&quot;getCount()&quot;> retrieve the number of keys</button> <button type=&quot;button&quot; onclick=&quot;clearAll()&quot;> clear all key values</button> </fieldset> </form>
Local Storage Demo Script ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
End User Outlook What is the Advantage to the End User?
HTML 5 – End User Outlook ,[object Object],[object Object],[object Object],[object Object]
How to Detect HTML5? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 – Showcases and Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 ,[object Object]
Homework ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],Homework (2)
Homework (3) ,[object Object],[object Object],[object Object]

Recomendados

HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 FundamentalsDoncho Minkov
 
Ajax
AjaxAjax
Ajaxwangjiaz
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 OverviewOwen Williams
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialProdigyView
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5People Strategists
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
HTML5
HTML5HTML5
HTML5Hatem Mahmoud
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overviewJacob Nelson
 

Recomendados

HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 FundamentalsDoncho Minkov
 
Ajax
AjaxAjax
Ajaxwangjiaz
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 OverviewOwen Williams
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialProdigyView
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5People Strategists
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
HTML5
HTML5HTML5
HTML5Hatem Mahmoud
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overviewJacob Nelson
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith
 
HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 OverviewOffir Ariel
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 TutorialAvinash Malhotra
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSBG Java EE Course
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic StructureNiket Chandrawanshi
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New FeaturesAta Ebrahimi
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
 
Html 5
Html 5Html 5
Html 5manujayarajkm
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohanballychohanuk
 
Html 5.0
Html 5.0Html 5.0
Html 5.0Kristof Degrave
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tagsumesh patil
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascriptTrần Khải Hoàng
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5Christopher Schmitt
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & XhtmlDigital Insights - Digital Marketing Agency
 
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptBusiness Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptSalesforce Developers
 
[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript FormsIvan Matiishyn
 
JavaScript
JavaScriptJavaScript
JavaScriptBharti Gupta
 

Más contenido relacionado

La actualidad más candente

Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSBG Java EE Course
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New FeaturesAta Ebrahimi
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohanballychohanuk
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
 

La actualidad más candente (19)

Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
 
HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 Overview
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic Structure
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
 
Html 5
Html 5Html 5
Html 5
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Html 5.0
Html 5.0Html 5.0
Html 5.0
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tags
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 

Destacado

Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptBusiness Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptSalesforce Developers
 
[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript FormsIvan Matiishyn
 
Flex security
Flex securityFlex security
Flex securitychengalva
 
02. input validation module v5
02. input validation module v502. input validation module v5
02. input validation module v5Eoin Keary
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationTodd Anglin
 
Web forms and server side scripting
Web forms and server side scriptingWeb forms and server side scripting
Web forms and server side scriptingsawsan slii
 
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScriptRavi Bhadauria
 
Validation rule, validation text and input masks
Validation rule, validation text and input masksValidation rule, validation text and input masks
Validation rule, validation text and input masksfizahPhd
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkVolker Hirsch
 

Destacado (12)

Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptBusiness Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
 
[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Flex security
Flex securityFlex security
Flex security
 
02. input validation module v5
02. input validation module v502. input validation module v5
02. input validation module v5
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
 
Javascript validating form
Javascript validating formJavascript validating form
Javascript validating form
 
Web forms and server side scripting
Web forms and server side scriptingWeb forms and server side scripting
Web forms and server side scripting
 
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScript
 
Validation rule, validation text and input masks
Validation rule, validation text and input masksValidation rule, validation text and input masks
Validation rule, validation text and input masks
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of Work
 

Similar a HTML5

Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter Lubbers
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shimsreybango
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 todaythebeebs
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overviewreybango
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile WidgetsJose Palazon
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Html5: What is it?
Html5: What is it? Html5: What is it?
Html5: What is it? joeydehnert
 
HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them allStu King
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examplesgopivthmk
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Contentmaycourse
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standardWonsuk Lee
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from AustinLisa Adkins
 

Similar a HTML5 (20)

Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
HTML5
HTML5HTML5
HTML5
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
BluePrint Mobile Framework
BluePrint Mobile FrameworkBluePrint Mobile Framework
BluePrint Mobile Framework
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
 
HTML5
HTML5HTML5
HTML5
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Html5: What is it?
Html5: What is it? Html5: What is it?
Html5: What is it?
 
HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them all
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
HTML 5
HTML 5HTML 5
HTML 5
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standard
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 

Más de Doncho Minkov

HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and FormsDoncho Minkov
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPFDoncho Minkov
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout ContainersDoncho Minkov
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and StylingDoncho Minkov
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and AnimationsDoncho Minkov
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data BindingDoncho Minkov
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModelDoncho Minkov
 

Más de Doncho Minkov (20)

Web Design Concepts
Web Design ConceptsWeb Design Concepts
Web Design Concepts
 
Web design Tools
Web design ToolsWeb design Tools
Web design Tools
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS Presentation
CSS PresentationCSS Presentation
CSS Presentation
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
CSS 3
CSS 3CSS 3
CSS 3
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
 
Slice and Dice
Slice and DiceSlice and Dice
Slice and Dice
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPF
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout Containers
 
WPF Controls
WPF ControlsWPF Controls
WPF Controls
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and Styling
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and Animations
 
Simple Data Binding
Simple Data BindingSimple Data Binding
Simple Data Binding
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
 
WPF Concepts
WPF ConceptsWPF Concepts
WPF Concepts
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModel
 
WPF and Databases
WPF and DatabasesWPF and Databases
WPF and Databases
 

Último

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 

Último (20)

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 

HTML5

  • 1. HTML 5 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it
  • 2.
  • 3. Introduction to HTML 5 What the … is HTML 5?
  • 4.
  • 5.
  • 6.
  • 7. Designer Outlook What a Designer Should Know?
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. New Layout Structure Tags Live Demo
  • 14.
  • 15.
  • 16.
  • 18.
  • 19.
  • 20.
  • 21. New Form Tags: <input type=&quot;range&quot;> Live Demo
  • 24.
  • 25.
  • 26.
  • 27.
  • 28. SVG Example <!DOCTYPE html> <head> <title>SVG</title> <meta charset=&quot;utf-8&quot; /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <circle id=&quot;redcircle&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;red&quot; /> </svg> </body> </html>
  • 29. SVG Gradient Example <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <defs> <radialGradient id=&quot;gradient&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;50%&quot; fx=&quot;50%&quot; fy=&quot;50%&quot;> <stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(200,200,200);stop-opacity:0&quot;/> <stop offset=&quot;100%&quot; style=&quot;stop-color:rgb(0,0,255);stop-opacity:1&quot;/> </radialGradient> </defs> <ellipse cx=&quot;100&quot; cy=&quot;50&quot; rx=&quot;100&quot; ry=&quot;50&quot; style=&quot;fill:url(#gradient)&quot; /> </svg>
  • 30. Canvas vs. SVG Live Demo
  • 31.
  • 32. Local Storage Demo HTML <form> <fieldset> <label for=&quot;value&quot;>enter key name:</label> <input type=&quot;text&quot; id=&quot;key&quot; /> <label for=&quot;value&quot;>enter key value:</label> <input type=&quot;text&quot; id=&quot;value&quot; /> </fieldset> <fieldset> <button type=&quot;button&quot; onclick=&quot;setValue()&quot;> store the key value</button> <button type=&quot;button&quot; onclick=&quot;getValue()&quot;> retrieve the key value</button> <button type=&quot;button&quot; onclick=&quot;getCount()&quot;> retrieve the number of keys</button> <button type=&quot;button&quot; onclick=&quot;clearAll()&quot;> clear all key values</button> </fieldset> </form>
  • 33.
  • 34. End User Outlook What is the Advantage to the End User?
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.