SlideShare a Scribd company logo
1 of 86
@HatemMahmoud ExpressionLab.com April 21, 2011
Agenda ,[object Object]
History
Features
Conclusion
References
Introduction
HTML ,[object Object]
With HTML, authors describe the structure of Web pages using markup  <tags> *HyperText Markup Language
HTML5 ,[object Object]
Improves  interoperability
Introduces markup and APIs for  Web applications
History
1989 ,[object Object],*Conseil Européen pour la Recherche Nucléaire
1990 ,[object Object]
Tim wrote the  first Web browser
Tim wrote the  first Web server
1991 ,[object Object],*Internet Engineering Task Force
1994 ,[object Object],*World Wide Web Consortium
1995 ,[object Object]
1997 ,[object Object]
HTML   4.0  was published as a W3C Recommendation
1999 ,[object Object]
2000 ,[object Object]
Because XHTML is an  XML  application, other XML tools can be used (for example, XSLT for transforming XML content)
2001 ,[object Object]
2004 ,[object Object]
Most major browser vendors were unwilling to implement the new features
2004 ,[object Object],*Web Hypertext Application Technology Working Group
2007 ,[object Object]
Since then, both groups have been working together on the development of the  HTML5  specification
2009 “ While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it”
2011
2011 ,[object Object]
Features
Syntax ,[object Object]
Backward compatible  with common parsing of older versions of HTML *Standard Generalized Markup Language
DOCTYPE ,[object Object]
SGML-based DOCTYPE required a reference to a DTD* *Document Type Definition
HTML 4.01 Strict ,[object Object]
Framesets are  not  allowed <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
HTML 4.01 Transitional ,[object Object]
Framesets are  not  allowed <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;>
HTML 4.01 Frameset ,[object Object]
Framesets are allowed <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;>
Browser Mode ,[object Object]
Quirks Mode DOCTYPE doesn't exists or invalid
HTML5 DOCTYPE ,[object Object],<!DOCTYPE html>
Example <!doctype html> <html> <head>   <meta charset=&quot;UTF-8&quot;>   <title> Example document </title>   </head>   <body>   <p> Example paragraph </p>   </body> </html>
 
Semantics ,[object Object]
Authors  must not  use elements, attributes, or attribute values for purposes other than their intended semantic purpose
 
 
 
 
Input Types
Input Types
Validation
Absent Elements basefont big center font strike tt u  frame frameset noframes acronym applet isindex
 
Audio <audio id=&quot;audio&quot; src=&quot;sound.mp3&quot; controls> </audio> <script> document.getElementById(&quot;audio&quot;).muted=false; </script>
Video <video id=&quot;video&quot; src=&quot;movie.webm&quot; autoplay controls> </video> <script> document.getElementById(&quot;video&quot;).play(); </script>
 
2D Canvas <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script>  var canvasContext =  document. getElementById(&quot;canvas&quot;). getContext (&quot;2d&quot;);  canvasContext. fillRect (250, 25, 150, 100);  canvasContext. beginPath ();  canvasContext. arc (450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);  canvasContext. lineWidth  = 15;  canvasContext. lineCap  = 'round';  canvasContext. strokeStyle  = 'rgba(255, 127, 0, 0.5)';  canvasContext. stroke (); </script>
2D Canvas
3D Canvas (Web GL) <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script> var gl = document. getElementById(&quot;canvas&quot;). getContext (&quot;experimental-webgl&quot;); gl. viewport (0, 0, canvas.width, canvas.height); ... </script>
3D Canvas (Web GL)
SVG <svg> <circle id=&quot;myCircle&quot;    cx=&quot;50%&quot;    cy=&quot;50%&quot;    r=&quot;100&quot;    fill=&quot;url(#myGradient)&quot;   onmousedown=&quot;alert('hello');&quot;/> </svg>
SVG
 
Web Storage ,[object Object]
Value: any JavaScript type
Web Storage <script>  storagesaveButton.addEventListener('click',  function (){ window. localStorage.setItem ('value',  area.value);   window. localStorage.setItem ('timestamp',  (new Date()).getTime()); }, false);  textarea.value =  window. localStorage.getItem ('value'); </script>
Web Storage <script> sessionStorage .firstname=&quot;Hatem&quot;; document.write( sessionStorage .firstname); </script>
Web SQL Database var db = window. openDatabase (&quot;DBName&quot;, &quot;1.0&quot;, &quot;description&quot;, 5*1024*1024); db. transaction (function(tx) { tx. executeSql (&quot;SELECT * FROM test&quot;, [], successCallback, errorCallback); }); Deprecated! “ All interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardization path.”
Indexed Database API ,[object Object]
Each  object store  has a list of records
Each  record  consists of a  key  and a  value
Indexes  allows looking up records in an object store using properties of the values
Cursors  used to iterate on records of an index or object store
Indexed Database API var idbRequest = window. indexedDB . open ('Database Name'); idbRequest.onsuccess = function(event) {   var db = event.result ;   var transaction = db. transaction ([], IDBTransaction.READ_ONLY );   var curRequest = transaction. objectStore ('ObjectStore Name'). openCursor ();   curRequest. onsuccess  = ...; };
Offline Web applications ,[object Object]
Cached resources load faster
Only download resources that have changed
Offline Web applications <html  manifest=&quot;cache.appcache&quot; > window. applicationCache .addEventListener ('updateready', function(e) {   if (window.applicationCache. status  == window.applicationCache. UPDATEREADY ) {   window.applicationCache. swapCache() ;   if (confirm( 'A new version of this site is available. Load it?' )) {   window.location.reload();   }   } }, false);

More Related Content

What's hot (20)

HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
CSS
CSSCSS
CSS
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Jquery
JqueryJquery
Jquery
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Css3
Css3Css3
Css3
 
Html
HtmlHtml
Html
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Java script
Java scriptJava script
Java script
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Html basics
Html basicsHtml basics
Html basics
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
1. HTML
1. HTML1. HTML
1. HTML
 

Viewers also liked

Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLMayaLisa
 
ECMAScript 6 — будущее JavaScript
ECMAScript 6 — будущее JavaScriptECMAScript 6 — будущее JavaScript
ECMAScript 6 — будущее JavaScriptAlexey Simonenko
 
International Journal of Network Security & Its Applications (IJNSA)
International Journal of Network Security & Its Applications (IJNSA) International Journal of Network Security & Its Applications (IJNSA)
International Journal of Network Security & Its Applications (IJNSA) IJNSA Journal
 
3 Steps to Better Web Governance
3 Steps to Better Web Governance3 Steps to Better Web Governance
3 Steps to Better Web GovernanceShane Diffily
 
The Product Owner Playbook - Introduction
The Product Owner Playbook - IntroductionThe Product Owner Playbook - Introduction
The Product Owner Playbook - IntroductionCprime
 
A SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKS
A SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKSA SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKS
A SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKSIJNSA Journal
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...
Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...
Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...МЦМС | MCIC
 
W3C Digital Publishing Interest Group Update
W3C Digital Publishing Interest Group UpdateW3C Digital Publishing Interest Group Update
W3C Digital Publishing Interest Group UpdateIvan Herman
 
W3 c日本語組版ノートとepub3
W3 c日本語組版ノートとepub3W3 c日本語組版ノートとepub3
W3 c日本語組版ノートとepub3Makoto Murata
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
Pace it custom-configurations_sw_nm
Pace it custom-configurations_sw_nmPace it custom-configurations_sw_nm
Pace it custom-configurations_sw_nmEdward Sargent
 
Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...
Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...
Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...LeadingAgile
 
The Product Owner Role
The Product Owner RoleThe Product Owner Role
The Product Owner RoleNigel Thurlow
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Sayed Ahmed
 

Viewers also liked (20)

Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
ECMAScript 6 — будущее JavaScript
ECMAScript 6 — будущее JavaScriptECMAScript 6 — будущее JavaScript
ECMAScript 6 — будущее JavaScript
 
International Journal of Network Security & Its Applications (IJNSA)
International Journal of Network Security & Its Applications (IJNSA) International Journal of Network Security & Its Applications (IJNSA)
International Journal of Network Security & Its Applications (IJNSA)
 
creative commons
creative commonscreative commons
creative commons
 
3 Steps to Better Web Governance
3 Steps to Better Web Governance3 Steps to Better Web Governance
3 Steps to Better Web Governance
 
The Product Owner Playbook - Introduction
The Product Owner Playbook - IntroductionThe Product Owner Playbook - Introduction
The Product Owner Playbook - Introduction
 
A SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKS
A SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKSA SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKS
A SURVEY ON SECURITY IN WIRELESS SENSOR NETWORKS
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
JEPAと他団体の交流
JEPAと他団体の交流JEPAと他団体の交流
JEPAと他団体の交流
 
グーテンベルクからVivliostyleへ
グーテンベルクからVivliostyleへグーテンベルクからVivliostyleへ
グーテンベルクからVivliostyleへ
 
Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...
Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...
Извештај за овозможувачката околина за развој на граѓанскиот сектор во Македо...
 
W3C Digital Publishing Interest Group Update
W3C Digital Publishing Interest Group UpdateW3C Digital Publishing Interest Group Update
W3C Digital Publishing Interest Group Update
 
W3 c日本語組版ノートとepub3
W3 c日本語組版ノートとepub3W3 c日本語組版ノートとepub3
W3 c日本語組版ノートとepub3
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
Pace it custom-configurations_sw_nm
Pace it custom-configurations_sw_nmPace it custom-configurations_sw_nm
Pace it custom-configurations_sw_nm
 
Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...
Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...
Product Owner Team: Leading Agile Program Management from Agile2015 by Dean S...
 
The Product Owner Role
The Product Owner RoleThe Product Owner Role
The Product Owner Role
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 

Similar to HTML5

Flex_rest_optimization
Flex_rest_optimizationFlex_rest_optimization
Flex_rest_optimizationKhou Suylong
 
Modern JavaScript Programming
Modern JavaScript Programming Modern JavaScript Programming
Modern JavaScript Programming Wildan Maulana
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyChristian Thilmany
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)Performics.Convonix
 
HTML5 and web technology update
HTML5 and web technology updateHTML5 and web technology update
HTML5 and web technology updateDoug Domeny
 
Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVCAlan Dean
 
Speed up your developments with Symfony2
Speed up your developments with Symfony2Speed up your developments with Symfony2
Speed up your developments with Symfony2Hugo Hamon
 
Itemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integrationItemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integration{item:foo}
 
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
 
GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009marpierc
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web PerformanceAdam Lu
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2Geoffrey Fox
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductionbeforeach
 
Introducing Struts 2
Introducing Struts 2Introducing Struts 2
Introducing Struts 2wiradikusuma
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesOry Segal
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop NotesPamela Fox
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentationipolevoy
 

Similar to HTML5 (20)

Flex_rest_optimization
Flex_rest_optimizationFlex_rest_optimization
Flex_rest_optimization
 
Processing XML with Java
Processing XML with JavaProcessing XML with Java
Processing XML with Java
 
Modern JavaScript Programming
Modern JavaScript Programming Modern JavaScript Programming
Modern JavaScript Programming
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian Thilmany
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)
 
HTML5 and web technology update
HTML5 and web technology updateHTML5 and web technology update
HTML5 and web technology update
 
Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVC
 
Speed up your developments with Symfony2
Speed up your developments with Symfony2Speed up your developments with Symfony2
Speed up your developments with Symfony2
 
Itemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integrationItemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integration
 
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
 
GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Introducing Struts 2
Introducing Struts 2Introducing Struts 2
Introducing Struts 2
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript Vulnerabilities
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
 

Recently uploaded

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 

Recently uploaded (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 

HTML5

  • 2.
  • 8.
  • 9. With HTML, authors describe the structure of Web pages using markup <tags> *HyperText Markup Language
  • 10.
  • 12. Introduces markup and APIs for Web applications
  • 14.
  • 15.
  • 16. Tim wrote the first Web browser
  • 17. Tim wrote the first Web server
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. HTML 4.0 was published as a W3C Recommendation
  • 23.
  • 24.
  • 25. Because XHTML is an XML application, other XML tools can be used (for example, XSLT for transforming XML content)
  • 26.
  • 27.
  • 28. Most major browser vendors were unwilling to implement the new features
  • 29.
  • 30.
  • 31. Since then, both groups have been working together on the development of the HTML5 specification
  • 32. 2009 “ While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it”
  • 33. 2011
  • 34.
  • 36.
  • 37. Backward compatible with common parsing of older versions of HTML *Standard Generalized Markup Language
  • 38.
  • 39. SGML-based DOCTYPE required a reference to a DTD* *Document Type Definition
  • 40.
  • 41. Framesets are not allowed <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
  • 42.
  • 43. Framesets are not allowed <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;>
  • 44.
  • 45. Framesets are allowed <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;>
  • 46.
  • 47. Quirks Mode DOCTYPE doesn't exists or invalid
  • 48.
  • 49. Example <!doctype html> <html> <head> <meta charset=&quot;UTF-8&quot;> <title> Example document </title> </head> <body> <p> Example paragraph </p> </body> </html>
  • 50.  
  • 51.
  • 52. Authors must not use elements, attributes, or attribute values for purposes other than their intended semantic purpose
  • 53.  
  • 54.  
  • 55.  
  • 56.  
  • 60. Absent Elements basefont big center font strike tt u frame frameset noframes acronym applet isindex
  • 61.  
  • 62. Audio <audio id=&quot;audio&quot; src=&quot;sound.mp3&quot; controls> </audio> <script> document.getElementById(&quot;audio&quot;).muted=false; </script>
  • 63. Video <video id=&quot;video&quot; src=&quot;movie.webm&quot; autoplay controls> </video> <script> document.getElementById(&quot;video&quot;).play(); </script>
  • 64.  
  • 65. 2D Canvas <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script> var canvasContext = document. getElementById(&quot;canvas&quot;). getContext (&quot;2d&quot;); canvasContext. fillRect (250, 25, 150, 100); canvasContext. beginPath (); canvasContext. arc (450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext. lineWidth = 15; canvasContext. lineCap = 'round'; canvasContext. strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext. stroke (); </script>
  • 67. 3D Canvas (Web GL) <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script> var gl = document. getElementById(&quot;canvas&quot;). getContext (&quot;experimental-webgl&quot;); gl. viewport (0, 0, canvas.width, canvas.height); ... </script>
  • 69. SVG <svg> <circle id=&quot;myCircle&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;100&quot; fill=&quot;url(#myGradient)&quot; onmousedown=&quot;alert('hello');&quot;/> </svg>
  • 70. SVG
  • 71.  
  • 72.
  • 74. Web Storage <script> storagesaveButton.addEventListener('click', function (){ window. localStorage.setItem ('value', area.value); window. localStorage.setItem ('timestamp', (new Date()).getTime()); }, false); textarea.value = window. localStorage.getItem ('value'); </script>
  • 75. Web Storage <script> sessionStorage .firstname=&quot;Hatem&quot;; document.write( sessionStorage .firstname); </script>
  • 76. Web SQL Database var db = window. openDatabase (&quot;DBName&quot;, &quot;1.0&quot;, &quot;description&quot;, 5*1024*1024); db. transaction (function(tx) { tx. executeSql (&quot;SELECT * FROM test&quot;, [], successCallback, errorCallback); }); Deprecated! “ All interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardization path.”
  • 77.
  • 78. Each object store has a list of records
  • 79. Each record consists of a key and a value
  • 80. Indexes allows looking up records in an object store using properties of the values
  • 81. Cursors used to iterate on records of an index or object store
  • 82. Indexed Database API var idbRequest = window. indexedDB . open ('Database Name'); idbRequest.onsuccess = function(event) { var db = event.result ; var transaction = db. transaction ([], IDBTransaction.READ_ONLY ); var curRequest = transaction. objectStore ('ObjectStore Name'). openCursor (); curRequest. onsuccess = ...; };
  • 83.
  • 85. Only download resources that have changed
  • 86. Offline Web applications <html manifest=&quot;cache.appcache&quot; > window. applicationCache .addEventListener ('updateready', function(e) { if (window.applicationCache. status == window.applicationCache. UPDATEREADY ) { window.applicationCache. swapCache() ; if (confirm( 'A new version of this site is available. Load it?' )) { window.location.reload(); } } }, false);
  • 87.  
  • 88. WebSocket var socket = new WebSocket ('ws://html5rocks.websocket.org/echo'); socket. onopen = function(event){ socket. send ('Hello, WebSocket'); }; socket. onmessage = function(event){ alert(event.data); } socket. onclose = function(event){ alert('closed'); }
  • 90.  
  • 91. Native Drag & Drop document.addEventListener(' dragstart ', function(event) { event. dataTransfer . setData ('text', 'Customized text'); event. dataTransfer . effectAllowed = 'copy'; }, false);
  • 92.
  • 93.
  • 94. Geolocation API if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latLng, map: map}); map.setCenter(latLng); }, errorHandler); }
  • 96.  
  • 97. Web Workers //main.js var worker = new Worker ('task.js'); worker. onmessage = function(event){ alert(event.data); }; worker. postMessage ('data'); //task.js self.onmessage = function(event){ // Do some work self. postMessage (&quot;got: &quot; + event.data); };
  • 99.  
  • 100.
  • 106.
  • 114.
  • 115. You can’t detect “HTML5 support,” but you can detect support for individual features
  • 116.
  • 117. You don’t need to throw anything away