SlideShare una empresa de Scribd logo
1 de 37
M i c r o s o f t | O p e n D o o r
•
•
•
•
• www.EmadAshi.com
• www.DotNetArabi.com
•
M i c r o s o f t | O p e n D o o r
M i c r o s o f t | O p e n D o o r
HTML5&IE
M i c r o s o f t | O p e n D o o r
•
•
•
•
M i c r o s o f t | O p e n D o o r
W3C
WHATWG
Web Hypertext Application Technology Working Group
World Wide Web Consortium
M i c r o s o f t | O p e n D o o r
HTML
CSS3
JS
SVG
M i c r o s o f t | O p e n D o o r
Platform
Independent
Standards
Rich
User Experience
Less Bandwidth
Semantically Connected
Content
The Next Web
Device
Independent
M i c r o s o f t | O p e n D o o r
Candidate Recommendation
2012
W3C Recommendation
2022
M i c r o s o f t | O p e n D o o r
Site-ready HTML5 IE9
CTP’s IE10
Test Cases to W3C
HTML5 Lab
M i c r o s o f t | O p e n D o o r
•
•
•
•
•
•
M i c r o s o f t | O p e n D o o r
M i c r o s o f t | O p e n D o o r
Semantic Web
<footer>
M i c r o s o f t | O p e n D o o r
Video & Audio
•
•
•
•
•
•
M i c r o s o f t | O p e n D o o r
Demo
Video & Audio
M i c r o s o f t | O p e n D o o r
•
•
•
•
•
SVG
M i c r o s o f t | O p e n D o o r
Demo
SVG
M i c r o s o f t | O p e n D o o r
Canvas
<canvas id="myCanvas" width="400" height="200" >
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75);
</script>
M i c r o s o f t | O p e n D o o r
Canvas
Demo1
Demo2
M i c r o s o f t | O p e n D o o r
Geolocation
Microsoft Location Service
M i c r o s o f t | O p e n D o o r
Geolocation
navigator.geolocation.getCurrentPosition(foundIt, failed);
Function foundIt(pos)
{
pos.coords.latitude;
pos.coords.longitude;
}
Function failed()
{
alert(‘Hahahaaaawz!’);
}
M i c r o s o f t | O p e n D o o r
Geolocation
Demo
M i c r o s o f t | O p e n D o o r
•
•
•
•
•
•
•
•
Web Storage
M i c r o s o f t | O p e n D o o r
Web Storage
localStorage.getItem(‘key’)
localStorage.setItem(‘key’)
sessionStorage.getItem(‘key’)
sessionStorage.setItem(‘key’)
M i c r o s o f t | O p e n D o o r
Web Storage
Demo
M i c r o s o f t | O p e n D o o r
•
•
•
•
•
CSS3 MediaQuery
@media screen and (min-width: 400px) and (max-width: 800px) { … }
M i c r o s o f t | O p e n D o o r
CSS3 MediaQuery
Demo
M i c r o s o f t | O p e n D o o r
HTML5
<!DOCTYPE html>
M i c r o s o f t | O p e n D o o r
Graphic Accelerator
M i c r o s o f t | O p e n D o o r
•
•
•
•
JavaScript Engine
Chakra
M i c r o s o f t | O p e n D o o r
M i c r o s o f t | O p e n D o o r
IE10
•
•
•
•
•
•
•
•
•
M i c r o s o f t | O p e n D o o r
M i c r o s o f t | O p e n D o o r
•
•
•
•
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
M i c r o s o f t | O p e n D o o r
•
•
•
•
M i c r o s o f t | O p e n D o o r
• beautyoftheweb.com
• caniuse.com
• ietestdrive.com
• html5labs.com
• html5demos.com
• html5rocks.com
• html5readiness.com
• Internet Explorer 10 Guide for Developers
M i c r o s o f t | O p e n D o o r
• http://msdn.microsoft.com/en-us/magazine/hh335062.aspx
• http://msdn.microsoft.com/en-us/magazine/hh394148.aspx
• http://www.w3schools.com/html5/default.asp
• The Architecture of Full Hardware Acceleration of All Web Page Content
• http://html5doctor.com/
•
M i c r o s o f t | O p e n D o o r
www.EmadAshi.com
www.DotNetArabi.com

Más contenido relacionado

Similar a HTML5 & IE

VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 WorkshopDavid Manock
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Boris Stoyanov - some new features in Apache cloudStack
Boris Stoyanov - some new features in Apache cloudStackBoris Stoyanov - some new features in Apache cloudStack
Boris Stoyanov - some new features in Apache cloudStackShapeBlue
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScalePatrick Chanezon
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) betaKirk Yamamoto
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with CanvasJason Harwig
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5Roy Clarkson
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup EvolvedBilly Hylton
 

Similar a HTML5 & IE (20)

VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Boris Stoyanov - some new features in Apache cloudStack
Boris Stoyanov - some new features in Apache cloudStackBoris Stoyanov - some new features in Apache cloudStack
Boris Stoyanov - some new features in Apache cloudStack
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
 
Vector Graphics in Xamarin
Vector Graphics in XamarinVector Graphics in Xamarin
Vector Graphics in Xamarin
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 

Más de Emad Alashi

RBAC in Azure Kubernetes Service AKS
RBAC in Azure Kubernetes Service AKSRBAC in Azure Kubernetes Service AKS
RBAC in Azure Kubernetes Service AKSEmad Alashi
 
Am I a Good Developer
Am I a Good DeveloperAm I a Good Developer
Am I a Good DeveloperEmad Alashi
 
Basic Intro to WinDbg
Basic Intro to WinDbgBasic Intro to WinDbg
Basic Intro to WinDbgEmad Alashi
 
Acquiring knowledge
Acquiring knowledgeAcquiring knowledge
Acquiring knowledgeEmad Alashi
 
Owin, Katana, and Helios
Owin, Katana, and HeliosOwin, Katana, and Helios
Owin, Katana, and HeliosEmad Alashi
 
OAuth in the new .NET world (OWIN)
OAuth in the new .NET world (OWIN)OAuth in the new .NET world (OWIN)
OAuth in the new .NET world (OWIN)Emad Alashi
 
ASP.NET Routing & MVC
ASP.NET Routing & MVCASP.NET Routing & MVC
ASP.NET Routing & MVCEmad Alashi
 
Software Life Cycle, Humans & Code
Software Life Cycle, Humans & CodeSoftware Life Cycle, Humans & Code
Software Life Cycle, Humans & CodeEmad Alashi
 
ASP.NET MVC One Step Deeper
ASP.NET MVC One Step DeeperASP.NET MVC One Step Deeper
ASP.NET MVC One Step DeeperEmad Alashi
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCEmad Alashi
 
Introduction To NHibernate
Introduction To NHibernateIntroduction To NHibernate
Introduction To NHibernateEmad Alashi
 

Más de Emad Alashi (11)

RBAC in Azure Kubernetes Service AKS
RBAC in Azure Kubernetes Service AKSRBAC in Azure Kubernetes Service AKS
RBAC in Azure Kubernetes Service AKS
 
Am I a Good Developer
Am I a Good DeveloperAm I a Good Developer
Am I a Good Developer
 
Basic Intro to WinDbg
Basic Intro to WinDbgBasic Intro to WinDbg
Basic Intro to WinDbg
 
Acquiring knowledge
Acquiring knowledgeAcquiring knowledge
Acquiring knowledge
 
Owin, Katana, and Helios
Owin, Katana, and HeliosOwin, Katana, and Helios
Owin, Katana, and Helios
 
OAuth in the new .NET world (OWIN)
OAuth in the new .NET world (OWIN)OAuth in the new .NET world (OWIN)
OAuth in the new .NET world (OWIN)
 
ASP.NET Routing & MVC
ASP.NET Routing & MVCASP.NET Routing & MVC
ASP.NET Routing & MVC
 
Software Life Cycle, Humans & Code
Software Life Cycle, Humans & CodeSoftware Life Cycle, Humans & Code
Software Life Cycle, Humans & Code
 
ASP.NET MVC One Step Deeper
ASP.NET MVC One Step DeeperASP.NET MVC One Step Deeper
ASP.NET MVC One Step Deeper
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Introduction To NHibernate
Introduction To NHibernateIntroduction To NHibernate
Introduction To NHibernate
 

Último

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 FMESafe 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 businesspanagenda
 
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 SavingEdi Saputra
 
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 organizationRadu Cotescu
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
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 educationjfdjdjcjdnsjd
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
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 CVKhem
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
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...Neo4j
 
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 2024Rafal Los
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 

Último (20)

+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
 
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
 
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
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
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
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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...
 
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
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

HTML5 & IE

  • 1. M i c r o s o f t | O p e n D o o r • • • • • www.EmadAshi.com • www.DotNetArabi.com •
  • 2. M i c r o s o f t | O p e n D o o r
  • 3. M i c r o s o f t | O p e n D o o r HTML5&IE
  • 4. M i c r o s o f t | O p e n D o o r • • • •
  • 5. M i c r o s o f t | O p e n D o o r W3C WHATWG Web Hypertext Application Technology Working Group World Wide Web Consortium
  • 6. M i c r o s o f t | O p e n D o o r HTML CSS3 JS SVG
  • 7. M i c r o s o f t | O p e n D o o r Platform Independent Standards Rich User Experience Less Bandwidth Semantically Connected Content The Next Web Device Independent
  • 8. M i c r o s o f t | O p e n D o o r Candidate Recommendation 2012 W3C Recommendation 2022
  • 9. M i c r o s o f t | O p e n D o o r Site-ready HTML5 IE9 CTP’s IE10 Test Cases to W3C HTML5 Lab
  • 10. M i c r o s o f t | O p e n D o o r • • • • • •
  • 11. M i c r o s o f t | O p e n D o o r
  • 12. M i c r o s o f t | O p e n D o o r Semantic Web <footer>
  • 13. M i c r o s o f t | O p e n D o o r Video & Audio • • • • • •
  • 14. M i c r o s o f t | O p e n D o o r Demo Video & Audio
  • 15. M i c r o s o f t | O p e n D o o r • • • • • SVG
  • 16. M i c r o s o f t | O p e n D o o r Demo SVG
  • 17. M i c r o s o f t | O p e n D o o r Canvas <canvas id="myCanvas" width="400" height="200" > Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.fillRect(0,0,150,75); </script>
  • 18. M i c r o s o f t | O p e n D o o r Canvas Demo1 Demo2
  • 19. M i c r o s o f t | O p e n D o o r Geolocation Microsoft Location Service
  • 20. M i c r o s o f t | O p e n D o o r Geolocation navigator.geolocation.getCurrentPosition(foundIt, failed); Function foundIt(pos) { pos.coords.latitude; pos.coords.longitude; } Function failed() { alert(‘Hahahaaaawz!’); }
  • 21. M i c r o s o f t | O p e n D o o r Geolocation Demo
  • 22. M i c r o s o f t | O p e n D o o r • • • • • • • • Web Storage
  • 23. M i c r o s o f t | O p e n D o o r Web Storage localStorage.getItem(‘key’) localStorage.setItem(‘key’) sessionStorage.getItem(‘key’) sessionStorage.setItem(‘key’)
  • 24. M i c r o s o f t | O p e n D o o r Web Storage Demo
  • 25. M i c r o s o f t | O p e n D o o r • • • • • CSS3 MediaQuery @media screen and (min-width: 400px) and (max-width: 800px) { … }
  • 26. M i c r o s o f t | O p e n D o o r CSS3 MediaQuery Demo
  • 27. M i c r o s o f t | O p e n D o o r HTML5 <!DOCTYPE html>
  • 28. M i c r o s o f t | O p e n D o o r Graphic Accelerator
  • 29. M i c r o s o f t | O p e n D o o r • • • • JavaScript Engine Chakra
  • 30. M i c r o s o f t | O p e n D o o r
  • 31. M i c r o s o f t | O p e n D o o r IE10 • • • • • • • • •
  • 32. M i c r o s o f t | O p e n D o o r
  • 33. M i c r o s o f t | O p e n D o o r • • • • Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
  • 34. M i c r o s o f t | O p e n D o o r • • • •
  • 35. M i c r o s o f t | O p e n D o o r • beautyoftheweb.com • caniuse.com • ietestdrive.com • html5labs.com • html5demos.com • html5rocks.com • html5readiness.com • Internet Explorer 10 Guide for Developers
  • 36. M i c r o s o f t | O p e n D o o r • http://msdn.microsoft.com/en-us/magazine/hh335062.aspx • http://msdn.microsoft.com/en-us/magazine/hh394148.aspx • http://www.w3schools.com/html5/default.asp • The Architecture of Full Hardware Acceleration of All Web Page Content • http://html5doctor.com/ •
  • 37. M i c r o s o f t | O p e n D o o r www.EmadAshi.com www.DotNetArabi.com

Notas del editor

  1. WHATWG: 2004, Apple, Mozilla, and Opera W3c: 2007 Microsoft is a member of W3C
  2. Usually when you say HTML5 it means the group, not only HTML
  3. The whole features and specifications together make the next web, look at the whole picture
  4. W3C Recommendation: two 100% complete and fully interoperable implementations
  5. Deliver the best site-ready HTML5 today via Internet Explorer 9. (Canvas, Geolocation, Audio, Video,…etc) IETestDrive.com Expose upcoming features to developers via Internet Explorer Platform Previews CTP: Internet Explorer 10 Guide for Developers: http://msdn.microsoft.com/en-us/ie/gg192966.aspx. Invest in interoperability through tests submitted to the W3C (IE Testing Center : http://samples.msdn.microsoft.com/ietestcenter). Prototype unstable standards via HTML5 labs (HTML5Labs.com). Reference: http://msdn.microsoft.com/en-us/magazine/hh335062.aspx
  6. You can use the attribute “controls” to display controls, you can control the video through API’s
  7. http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all
  8. created and edited with any text editor searched, indexed, scripted, and compressed printed with high quality at any resolution zoomable
  9. Compiled Type optimized Fast Interpreter Library Optimizations