SlideShare una empresa de Scribd logo
1 de 22
A Developers Perspective introducingHTML 5 & CSS 3 S.Santhosh Kumar 9941497246, @santhotech santhosh@systeminsights.com
HTML5 is the next major revision of the HTML standard, currently under development. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004. It all starts with<!DOCTYPE HTML> Keep Updating!!!! Everything Starts with a WIKI… HTML 4.01 ?!?!
In 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire, and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5. A great gateway for the developers to lessen their work What about the previous version?
Important Features of HTML 5 1 3 2 Graphics and Multimedia made Easy New and Advanced Controls, Sockets and Communication capabilities. Better hardware usage and advanced OS integration Make the browser work for you not the other way around
New and Advanced Controls, Advanced Communication Capabilities More flexibility from the browsers. Does most of the work. 1
New controls that has been Added ,[object Object]
Email Field
Pattern attribute
Date Field
Phone number field
 Mandatory Field
Progress BarCommonly needed Controls Features ,[object Object]
No customized control needed
Browser takes care of stuff
Makes developers life a lot easier,[object Object]
Communication Establish two way communications effectively with web sockets in your client browser. Run extremely long scripts without eating away your performance using web workers.
2 Better Hardware Usage and OS integration Make maximum use of your client’s local resources.
Client Side Data Stores, Local Storage Data Persistence
    Local Data Storage Local Storage available with the browsers are extremely helpful  for preserving the data Helps for securing data in case of network failure with server. Local storage can be effectively used side by side with your actual storage while Maintaining the data effectively without any loss due to network problems.
GEO LOCATION Find your visitors location: With GEOLOCATION you can detect your client browsers location. Pinpoint location are services near to your clients browser is detected easily.
Native Drag and Drop Support Drag and Drop is no longer a task by special Libraries. Use the inbuilt API support to perform drag and Drop operations in your applications. document.addEventListener('dragstart', function(event) {  event.dataTransfer.setData('text', 'Customized text');  event.dataTransfer.effectAllowed = 'copy';}, false);
Speech Recognition Made Easy Use the browser’s in-built ability to identify speech patterns Take direct speech inputs from your client. Forget about the speech recognition and concentrate only on usability of the data. Leave the hard work to browser. Special Speech Control Under Dev...

Más contenido relacionado

La actualidad más candente

Developing Windows Phone Apps with the Nokia Imaging SDK
Developing Windows Phone Apps with the Nokia Imaging SDKDeveloping Windows Phone Apps with the Nokia Imaging SDK
Developing Windows Phone Apps with the Nokia Imaging SDK
Nick Landry
 
Silverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use ItSilverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use It
Venketash (Pat) Ramadass
 

La actualidad más candente (20)

Web Content Management with Sitefinity
Web Content Management with SitefinityWeb Content Management with Sitefinity
Web Content Management with Sitefinity
 
Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js
Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.jsAsynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js
Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js
 
Architecting WPF Applications
Architecting WPF ApplicationsArchitecting WPF Applications
Architecting WPF Applications
 
Silverlight vs WPF
Silverlight vs WPFSilverlight vs WPF
Silverlight vs WPF
 
AN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXAN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEX
 
Silverlight
SilverlightSilverlight
Silverlight
 
Open Source examples from Adobe : Oscon kiosk
Open Source examples from Adobe : Oscon kioskOpen Source examples from Adobe : Oscon kiosk
Open Source examples from Adobe : Oscon kiosk
 
Flex vs HTML5
Flex vs HTML5Flex vs HTML5
Flex vs HTML5
 
MikeTaulty_Ux_Update
MikeTaulty_Ux_UpdateMikeTaulty_Ux_Update
MikeTaulty_Ux_Update
 
Apache Flex: Overview
Apache Flex: OverviewApache Flex: Overview
Apache Flex: Overview
 
Developing Windows Phone Apps with the Nokia Imaging SDK
Developing Windows Phone Apps with the Nokia Imaging SDKDeveloping Windows Phone Apps with the Nokia Imaging SDK
Developing Windows Phone Apps with the Nokia Imaging SDK
 
Realtime applications for SharePoint with SignalR and knockout.js
Realtime applications for SharePoint with SignalR and knockout.jsRealtime applications for SharePoint with SignalR and knockout.js
Realtime applications for SharePoint with SignalR and knockout.js
 
Opening the mobile web mozilla and firefox os-chit thiri maung
Opening the mobile web   mozilla and firefox os-chit thiri maungOpening the mobile web   mozilla and firefox os-chit thiri maung
Opening the mobile web mozilla and firefox os-chit thiri maung
 
Migrating to HTML5, Migrating Silverlight to HTML5, Migration Applications t...
Migrating to HTML5,  Migrating Silverlight to HTML5, Migration Applications t...Migrating to HTML5,  Migrating Silverlight to HTML5, Migration Applications t...
Migrating to HTML5, Migrating Silverlight to HTML5, Migration Applications t...
 
Kentico Virtual Roadshow - June 2017
Kentico Virtual Roadshow - June 2017Kentico Virtual Roadshow - June 2017
Kentico Virtual Roadshow - June 2017
 
Building a Rich Social Network Application
Building a Rich Social Network ApplicationBuilding a Rich Social Network Application
Building a Rich Social Network Application
 
Flash: A call for sanity
Flash: A call for sanityFlash: A call for sanity
Flash: A call for sanity
 
Html5 introduction
Html5 introductionHtml5 introduction
Html5 introduction
 
What Is a Cloud-first Headless CMS
What Is a Cloud-first Headless CMSWhat Is a Cloud-first Headless CMS
What Is a Cloud-first Headless CMS
 
Silverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use ItSilverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use It
 

Destacado

Integration of Domestic Passenger Service Charge into Airline Ticket
Integration of Domestic Passenger Service Charge into Airline TicketIntegration of Domestic Passenger Service Charge into Airline Ticket
Integration of Domestic Passenger Service Charge into Airline Ticket
Toteng Tanglao
 
Unprotected Heritage of Travancore, Kerala
Unprotected Heritage of Travancore, KeralaUnprotected Heritage of Travancore, Kerala
Unprotected Heritage of Travancore, Kerala
Binumol Tom
 
Module 3 islamic architecture under imperial rule
Module 3 islamic architecture under imperial ruleModule 3 islamic architecture under imperial rule
Module 3 islamic architecture under imperial rule
Binumol Tom
 
Module 2 indian temple architecture
Module 2 indian temple architectureModule 2 indian temple architecture
Module 2 indian temple architecture
Binumol Tom
 
Gothic architecture
Gothic architectureGothic architecture
Gothic architecture
Binumol Tom
 
Byzantine architecture
 Byzantine architecture Byzantine architecture
Byzantine architecture
Binumol Tom
 
Romanesque architecture
Romanesque architectureRomanesque architecture
Romanesque architecture
Binumol Tom
 

Destacado (13)

Arab2
Arab2Arab2
Arab2
 
Introduction to Design Patterns in Javascript
Introduction to Design Patterns in JavascriptIntroduction to Design Patterns in Javascript
Introduction to Design Patterns in Javascript
 
Binh chon doan nhan - Giai thuong phong cach doanh nhan - Bstyle Award
Binh chon doan nhan - Giai thuong phong cach doanh nhan - Bstyle AwardBinh chon doan nhan - Giai thuong phong cach doanh nhan - Bstyle Award
Binh chon doan nhan - Giai thuong phong cach doanh nhan - Bstyle Award
 
Integration of Domestic Passenger Service Charge into Airline Ticket
Integration of Domestic Passenger Service Charge into Airline TicketIntegration of Domestic Passenger Service Charge into Airline Ticket
Integration of Domestic Passenger Service Charge into Airline Ticket
 
A blueprint for conserving the historic canal precinct of alappuzha town
A blueprint for conserving the historic canal precinct of alappuzha townA blueprint for conserving the historic canal precinct of alappuzha town
A blueprint for conserving the historic canal precinct of alappuzha town
 
Early cultures
Early culturesEarly cultures
Early cultures
 
Unprotected Heritage of Travancore, Kerala
Unprotected Heritage of Travancore, KeralaUnprotected Heritage of Travancore, Kerala
Unprotected Heritage of Travancore, Kerala
 
Architectural education starting from zero
Architectural education    starting from zeroArchitectural education    starting from zero
Architectural education starting from zero
 
Module 3 islamic architecture under imperial rule
Module 3 islamic architecture under imperial ruleModule 3 islamic architecture under imperial rule
Module 3 islamic architecture under imperial rule
 
Module 2 indian temple architecture
Module 2 indian temple architectureModule 2 indian temple architecture
Module 2 indian temple architecture
 
Gothic architecture
Gothic architectureGothic architecture
Gothic architecture
 
Byzantine architecture
 Byzantine architecture Byzantine architecture
Byzantine architecture
 
Romanesque architecture
Romanesque architectureRomanesque architecture
Romanesque architecture
 

Similar a HTML 5 - A developers perspective

Introduction to silverlight
Introduction to silverlightIntroduction to silverlight
Introduction to silverlight
msarangam
 
Introduction to silverlight control 4
Introduction to silverlight control 4Introduction to silverlight control 4
Introduction to silverlight control 4
msarangam
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
Karambir Singh Nain
 

Similar a HTML 5 - A developers perspective (20)

Qnx html5 hmi
Qnx html5 hmiQnx html5 hmi
Qnx html5 hmi
 
Html5 workshop part 1
Html5 workshop part 1Html5 workshop part 1
Html5 workshop part 1
 
Introduction to silverlight
Introduction to silverlightIntroduction to silverlight
Introduction to silverlight
 
Introduction to silverlight control 4
Introduction to silverlight control 4Introduction to silverlight control 4
Introduction to silverlight control 4
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
Tech Stack - Angular
Tech Stack - AngularTech Stack - Angular
Tech Stack - Angular
 
HTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web DevelopmentHTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web Development
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Intel AppUp Day Bologna
Intel AppUp Day BolognaIntel AppUp Day Bologna
Intel AppUp Day Bologna
 
Flutter for Web - A Comprehensive Outline.pdf
Flutter for Web - A Comprehensive Outline.pdfFlutter for Web - A Comprehensive Outline.pdf
Flutter for Web - A Comprehensive Outline.pdf
 
Html5 overview
Html5 overviewHtml5 overview
Html5 overview
 
Top 10 major benefits of html 5
Top 10 major benefits of html 5Top 10 major benefits of html 5
Top 10 major benefits of html 5
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
 
HTML5 Handling Security Issues, Security Threats for HTML5, HTML5 Application...
HTML5 Handling Security Issues, Security Threats for HTML5, HTML5 Application...HTML5 Handling Security Issues, Security Threats for HTML5, HTML5 Application...
HTML5 Handling Security Issues, Security Threats for HTML5, HTML5 Application...
 
Silver Light for every one by Subodh
Silver Light for every one by SubodhSilver Light for every one by Subodh
Silver Light for every one by Subodh
 
Html5
Html5Html5
Html5
 
Silverlight
SilverlightSilverlight
Silverlight
 
10 Mobile Application Framework Must Know to Launch New App
10 Mobile Application Framework Must Know to Launch New App10 Mobile Application Framework Must Know to Launch New App
10 Mobile Application Framework Must Know to Launch New App
 

Último

Último (20)

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
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
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
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 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
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
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...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
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...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 

HTML 5 - A developers perspective

  • 1. A Developers Perspective introducingHTML 5 & CSS 3 S.Santhosh Kumar 9941497246, @santhotech santhosh@systeminsights.com
  • 2. HTML5 is the next major revision of the HTML standard, currently under development. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004. It all starts with<!DOCTYPE HTML> Keep Updating!!!! Everything Starts with a WIKI… HTML 4.01 ?!?!
  • 3. In 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire, and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5. A great gateway for the developers to lessen their work What about the previous version?
  • 4. Important Features of HTML 5 1 3 2 Graphics and Multimedia made Easy New and Advanced Controls, Sockets and Communication capabilities. Better hardware usage and advanced OS integration Make the browser work for you not the other way around
  • 5. New and Advanced Controls, Advanced Communication Capabilities More flexibility from the browsers. Does most of the work. 1
  • 6.
  • 12.
  • 15.
  • 16. Communication Establish two way communications effectively with web sockets in your client browser. Run extremely long scripts without eating away your performance using web workers.
  • 17. 2 Better Hardware Usage and OS integration Make maximum use of your client’s local resources.
  • 18. Client Side Data Stores, Local Storage Data Persistence
  • 19. Local Data Storage Local Storage available with the browsers are extremely helpful for preserving the data Helps for securing data in case of network failure with server. Local storage can be effectively used side by side with your actual storage while Maintaining the data effectively without any loss due to network problems.
  • 20. GEO LOCATION Find your visitors location: With GEOLOCATION you can detect your client browsers location. Pinpoint location are services near to your clients browser is detected easily.
  • 21. Native Drag and Drop Support Drag and Drop is no longer a task by special Libraries. Use the inbuilt API support to perform drag and Drop operations in your applications. document.addEventListener('dragstart', function(event) {  event.dataTransfer.setData('text', 'Customized text');  event.dataTransfer.effectAllowed = 'copy';}, false);
  • 22. Speech Recognition Made Easy Use the browser’s in-built ability to identify speech patterns Take direct speech inputs from your client. Forget about the speech recognition and concentrate only on usability of the data. Leave the hard work to browser. Special Speech Control Under Dev...
  • 23. Excellent Device Compatibility… Special Support for Mobile phones and IPADS. Just develop one app and use the same for web and mob.
  • 24. 3 Multimedia and Graphics This is where it gets interesting!!!
  • 25.
  • 26. It lets you draw directly to your browser
  • 28. Manipulate your PICS any way you want
  • 29. Your imagination is the only limit
  • 30.
  • 31. SCALABLE VECTOR GRAPHICS SVG in short is another great added advantage to HTML 5 arsenal. What is SVG? Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). -wiki No more Pixelation Scale with SVG
  • 32. ? CSS 3The Declarative Devil…  New added advantages in CSS 3 lets designers create cool stuff…
  • 33.
  • 41. TransitionsCSS3 Special Features Trendy styles with CSS 3 You’re just gonna love it! The best changes ever made in css It is totally wicked!!!!!!!!
  • 42. HTML 5 A DEVELOPER’S PERSPECTIVE Any Questions? Thank you. S.Santhosh Kumar 9941497246, @santhotech santhosh@systeminsights.com