SlideShare una empresa de Scribd logo
1 de 39
Presentation On  HTML5 By: Debidatta Regd. No: 0711012073
What is HTML? Hyper Text Markup Language Text: A sequential form of  characters  in human understandable form Hyper Text: Which is not constrained to be linear
What is Markup? ,[object Object],other symbols  ,[object Object],or word processing file, which can be  displayed. ,[object Object],[object Object]
        Geolocation               Graphics       Speed  Storage
HTML 5: A Chance to Do Things Differently HTML 5: A Chance to Do Things Differently HTML 5: A Chance to Do  Things Differently : A Chance to Do Things Differently
Canvas/                 Video         Geolocation    App Cache &        Web SVG Database        Workers
Until Recently, You Couldn’t Draw on the Web
Graphics are not Interactive
The Usual Options Do This...          VML                Flash         Silverlight
What is SVG? ,[object Object]
Provides user to draw any graphics in the web,[object Object]
Canvas Element The canvas element provides a straight and powerful way to draw arbitrary graphics in a web page using java script.
Advantage 3-D view in the web Big in texture-Game Graphics The graphics loaded into the CPU in less than 10% time
When Canvas or SVG? SVG ->  –High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects Canvas ->  –Low level –No mouse interaction –High Animation –JS Centric –More Bookkeeping –Pixels
HTML 5 Support  Chrome             Firefox             Safari                Opera canvas/SVG video geolocation app cache database workers
Canvas/                 Video         Geolocation    App Cache &        Web SVG Database        Workers
Video is Complicated, and Outside Your Control
// HTML 5 makes <video> as easy as <img>
What’s about video ,[object Object]
 YouTube running entirely using the video tag .No Flash required. ,[object Object]
Canvas/                 Video         Geolocation    App Cache &        Web SVG Database        Workers
Life’s Better with Location Places 2.8 mi Social Ads CRM Games Photos 2.1 mi 1.1 mi 500 ft 20 ft 75 ft
But GPS & IP aren’t good enough… Too slow Too constrained Too fuzzy
Geolocation ,[object Object]
They’ve mapped really the entire world. Again all the browsers but IE support this now. ,[object Object]
HTML 5 Support    Chrome             Firefox             Safari                Opera canvas/SVG video geolocation app cache database workers
Canvas/                 Video         Geolocation App Cache &        Web SVGDatabase        Workers
Web cache & Database Store what you need locally to make applications faster.
// database and app cache store user data and app resources locally
Web Apps Need to Work Everywhere
Database
HTML 5 Support  Chrome             Firefox             Safari                Opera canvas/SVG video geolocation app cache database workers
Canvas/                 Video         Geolocation    App Cache &        Web  SVG Database        Workers
A More Powerful Web == More Powerful Apps
But More Power == More Responsibility I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript
HTML 5 Support  Chrome             Firefox             Safari                Opera canvas/SVG video geolocation app cache database workers
QUESTIONS
An introduction to html5 by Devs
An introduction to html5 by Devs

Más contenido relacionado

La actualidad más candente

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Chris Love
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
KMS Technology
 

La actualidad más candente (20)

Backend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websocketsBackend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websockets
 
Amp up your Site with Accelerated Mobile Pages
Amp up your Site with Accelerated Mobile PagesAmp up your Site with Accelerated Mobile Pages
Amp up your Site with Accelerated Mobile Pages
 
Ember
EmberEmber
Ember
 
Ajax World West
Ajax World WestAjax World West
Ajax World West
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery Mobile
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
React & Redux, how to scale?
React & Redux, how to scale?React & Redux, how to scale?
React & Redux, how to scale?
 
Web Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaWeb Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @Cygnismedia
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Learning Single page Application chapter 1
Learning Single page Application chapter 1Learning Single page Application chapter 1
Learning Single page Application chapter 1
 
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps TipsPhonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
 
Ember Overview in 5 Minutes
Ember Overview in 5 MinutesEmber Overview in 5 Minutes
Ember Overview in 5 Minutes
 
Charity Hound - Serverless, NoOps, The Tooth Fairy
Charity Hound - Serverless, NoOps, The Tooth FairyCharity Hound - Serverless, NoOps, The Tooth Fairy
Charity Hound - Serverless, NoOps, The Tooth Fairy
 
How To Work Faster & More Profitably With Client Site Starter Templates
How To Work Faster & More Profitably With Client Site Starter TemplatesHow To Work Faster & More Profitably With Client Site Starter Templates
How To Work Faster & More Profitably With Client Site Starter Templates
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster
 

Similar a An introduction to html5 by Devs

Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
Critical Mass
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 

Similar a An introduction to html5 by Devs (20)

Html ppts
Html pptsHtml ppts
Html ppts
 
HTML
HTMLHTML
HTML
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
 
HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)
 
Html5 workshop part 1
Html5 workshop part 1Html5 workshop part 1
Html5 workshop part 1
 
Practical html5
Practical html5Practical html5
Practical html5
 
Html5
Html5Html5
Html5
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
Blurring the difference between native and web apps with HTML5 & IE9
Blurring the difference between native and web apps with HTML5 & IE9Blurring the difference between native and web apps with HTML5 & IE9
Blurring the difference between native and web apps with HTML5 & IE9
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Introduction to Microsoft Silverlight
Introduction to Microsoft SilverlightIntroduction to Microsoft Silverlight
Introduction to Microsoft Silverlight
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 

Último

+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...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
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
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

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
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
+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...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
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
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
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
 

An introduction to html5 by Devs

  • 1. Presentation On HTML5 By: Debidatta Regd. No: 0711012073
  • 2. What is HTML? Hyper Text Markup Language Text: A sequential form of characters in human understandable form Hyper Text: Which is not constrained to be linear
  • 3.
  • 4. Geolocation Graphics Speed Storage
  • 5. HTML 5: A Chance to Do Things Differently HTML 5: A Chance to Do Things Differently HTML 5: A Chance to Do Things Differently : A Chance to Do Things Differently
  • 6. Canvas/ Video Geolocation App Cache & Web SVG Database Workers
  • 7. Until Recently, You Couldn’t Draw on the Web
  • 8. Graphics are not Interactive
  • 9. The Usual Options Do This... VML Flash Silverlight
  • 10.
  • 11.
  • 12. Canvas Element The canvas element provides a straight and powerful way to draw arbitrary graphics in a web page using java script.
  • 13. Advantage 3-D view in the web Big in texture-Game Graphics The graphics loaded into the CPU in less than 10% time
  • 14. When Canvas or SVG? SVG -> –High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects Canvas -> –Low level –No mouse interaction –High Animation –JS Centric –More Bookkeeping –Pixels
  • 15. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers
  • 16. Canvas/ Video Geolocation App Cache & Web SVG Database Workers
  • 17. Video is Complicated, and Outside Your Control
  • 18. // HTML 5 makes <video> as easy as <img>
  • 19.
  • 20.
  • 21. Canvas/ Video Geolocation App Cache & Web SVG Database Workers
  • 22. Life’s Better with Location Places 2.8 mi Social Ads CRM Games Photos 2.1 mi 1.1 mi 500 ft 20 ft 75 ft
  • 23. But GPS & IP aren’t good enough… Too slow Too constrained Too fuzzy
  • 24.
  • 25.
  • 26. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers
  • 27. Canvas/ Video Geolocation App Cache & Web SVGDatabase Workers
  • 28. Web cache & Database Store what you need locally to make applications faster.
  • 29. // database and app cache store user data and app resources locally
  • 30. Web Apps Need to Work Everywhere
  • 32. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers
  • 33. Canvas/ Video Geolocation App Cache & Web SVG Database Workers
  • 34. A More Powerful Web == More Powerful Apps
  • 35. But More Power == More Responsibility I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript
  • 36. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers

Notas del editor

  1. So why web &amp; why HTML5?
  2. 4 basics objective of modern web techs?
  3. Normal bit
  4. &lt;Scriptable image tag&gt;Can use java script to draw2D &amp; 3D context r used…