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)

Intro to html
Intro to htmlIntro to html
Intro to html
 
Html
HtmlHtml
Html
 
Html introduction
Html introductionHtml introduction
Html introduction
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
 
HTML
HTMLHTML
HTML
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Jquery
JqueryJquery
Jquery
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html
HtmlHtml
Html
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 

Viewers also liked

Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
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
 
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜VivliostyleプロジェクトTeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜VivliostyleプロジェクトShinyu Murakami
 

Viewers also liked (20)

Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
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
 
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜VivliostyleプロジェクトTeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
 

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

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsZilliz
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 

Recently uploaded (20)

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.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