SlideShare uma empresa Scribd logo

HTML5

•Transferir como PPT, PDF•
•
Doncho Minkov
Doncho Minkov
Tecnologia
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 Fundamentals
Doncho Minkov
 
Ajax
AjaxAjax
Ajax
wangjiaz
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
Owen Williams
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 
HTML5
HTML5HTML5
HTML5
Hatem Mahmoud
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 

Recomendados

HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 Fundamentals
Doncho Minkov
 
Ajax
AjaxAjax
Ajax
wangjiaz
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
Owen Williams
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 
HTML5
HTML5HTML5
HTML5
Hatem Mahmoud
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith
 
HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 Overview
Offir Ariel
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
Avinash 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 CSS
BG Java EE Course
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic Structure
Niket Chandrawanshi
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
Ata 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 5
manujayarajkm
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
ballychohanuk
 
Html 5.0
Html 5.0Html 5.0
Html 5.0
Kristof Degrave
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tags
umesh patil
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
Remy Sharp
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
Trần Khải Hoàng
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
Brendan Sera-Shriar
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
Christopher Schmitt
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
Digital 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 JavaScript
Salesforce Developers
 
[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms
Ivan Matiishyn
 
JavaScript
JavaScriptJavaScript
JavaScript
Bharti Gupta
 

Mais conteúdo relacionado

Mais procurados

Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(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 CSS
BG Java EE Course
 

Mais procurados (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
 

Destaque

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
Salesforce Developers
 
Flex security
Flex securityFlex security
Flex security
chengalva
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
Todd Anglin
 
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
fizahPhd
 

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

Semelhante 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-2011
Peter Lubbers
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
maycourse
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
Lisa Adkins
 

Semelhante 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
 

Mais de Doncho Minkov

HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
Doncho Minkov
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPF
Doncho Minkov
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout Containers
Doncho Minkov
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and Styling
Doncho Minkov
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and Animations
Doncho Minkov
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
Doncho Minkov
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModel
Doncho Minkov
 

Mais 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

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Principled Technologies
 
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
Principled Technologies
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
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...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
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
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
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
 

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.