SlideShare une entreprise Scribd logo

Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web

Une présentation sur la nouvelle mouture d'Internet Explorer présenté au CUNQ et au groupe d'utilisateurs .NET Montréal.

1  sur  59
Télécharger pour lire hors ligne
Une visite guidée d’Internet Explorer 9 et
       HTML5 pour les développeurs Web
Frédéric Harper
Évangéliste aux développeurs – Microsoft Canada

fredh@microsoft.com
http://twitter.com/fharper
http://linkedin.com/in/fredericharper
rapide
Performance de multisystème
  News Site 5                     Rendering

  News Site 4                     Layout
                                  Block Building
  News Site 3
                                  Formatting
  News Site 2                     Native OM
  News Site 1                     Marshalling
                                  JavaScript
                0%
                     50%          Collections
                           100%
La puissance de tout le PC

              GREETINGS PROFESSOR FALKEN.

              WOULD YOU LIKE TO PLAY A
              GAME OF CHESS?

              █
L’engin JavaScript
Au premier plan
                                Arbre
      Code        Analyseur
                              Syntaxique       ByteCode   Interpréteur
     source        (Parser)
                              Abstrait (AST)
Nouvel engin JavaScript – “Chakra”
Au premier plan
                                     Arbre
      Code             Analyseur
                                   Syntaxique         ByteCode           Interpréteur
     source             (Parser)
                                   Abstrait (AST)


                                   Compilation        Code natif
     En arrière-plan

                                                                   Utilisant plusieurs
       JavaScript compilé           En arrière-plan                   processeurs

Recommandé

Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11Microsoft
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesIppon
 
Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5Microsoft
 
Alphorm.com Formation Docker (2/2) - Administration Avancée
Alphorm.com Formation Docker (2/2) - Administration Avancée Alphorm.com Formation Docker (2/2) - Administration Avancée
Alphorm.com Formation Docker (2/2) - Administration Avancée Alphorm
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 

Contenu connexe

Tendances

Cours services web_fabrice_mourlin
Cours services web_fabrice_mourlinCours services web_fabrice_mourlin
Cours services web_fabrice_mourlinangeeLee
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWSLilia Sfaxi
 
Une (simple) présentation de Apache Maven 2
Une (simple) présentation de Apache Maven 2Une (simple) présentation de Apache Maven 2
Une (simple) présentation de Apache Maven 2teejug
 
Alphorm.com Formation Java, les fondamentaux
Alphorm.com Formation Java, les fondamentaux Alphorm.com Formation Java, les fondamentaux
Alphorm.com Formation Java, les fondamentaux Alphorm
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux ServletsFrançois Charoy
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
Alphorm.com Formation PowerShell : Niveau Initiation
Alphorm.com Formation PowerShell : Niveau InitiationAlphorm.com Formation PowerShell : Niveau Initiation
Alphorm.com Formation PowerShell : Niveau InitiationAlphorm
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache MavenArnaud Héritier
 
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & SassAlphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & SassAlphorm
 
Alphorm.com Formation PostgreSQL, la Haute Disponibilité
Alphorm.com Formation PostgreSQL, la Haute DisponibilitéAlphorm.com Formation PostgreSQL, la Haute Disponibilité
Alphorm.com Formation PostgreSQL, la Haute DisponibilitéAlphorm
 
alphorm.com - Formation Windows 8.1 (70-687)
alphorm.com - Formation Windows 8.1 (70-687)alphorm.com - Formation Windows 8.1 (70-687)
alphorm.com - Formation Windows 8.1 (70-687)Alphorm
 
Alphorm.com Formation Sophos Certified Engineer : EndPoint Protection
Alphorm.com Formation Sophos Certified Engineer : EndPoint ProtectionAlphorm.com Formation Sophos Certified Engineer : EndPoint Protection
Alphorm.com Formation Sophos Certified Engineer : EndPoint ProtectionAlphorm
 
Alphorm.com Formation Microsoft Hyperconvergence
Alphorm.com Formation Microsoft HyperconvergenceAlphorm.com Formation Microsoft Hyperconvergence
Alphorm.com Formation Microsoft HyperconvergenceAlphorm
 
Alphorm.com Formation Active Directory 2016 : Le Guide complet de l'architecture
Alphorm.com Formation Active Directory 2016 : Le Guide complet de l'architectureAlphorm.com Formation Active Directory 2016 : Le Guide complet de l'architecture
Alphorm.com Formation Active Directory 2016 : Le Guide complet de l'architectureAlphorm
 
Intellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server InternalsIntellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server InternalsNeil Armstrong
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Eric SIBER
 

Tendances (20)

Cours services web_fabrice_mourlin
Cours services web_fabrice_mourlinCours services web_fabrice_mourlin
Cours services web_fabrice_mourlin
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
 
Une (simple) présentation de Apache Maven 2
Une (simple) présentation de Apache Maven 2Une (simple) présentation de Apache Maven 2
Une (simple) présentation de Apache Maven 2
 
Salesforce Tooling API
Salesforce Tooling APISalesforce Tooling API
Salesforce Tooling API
 
Alphorm.com Formation Java, les fondamentaux
Alphorm.com Formation Java, les fondamentaux Alphorm.com Formation Java, les fondamentaux
Alphorm.com Formation Java, les fondamentaux
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Alphorm.com Formation PowerShell : Niveau Initiation
Alphorm.com Formation PowerShell : Niveau InitiationAlphorm.com Formation PowerShell : Niveau Initiation
Alphorm.com Formation PowerShell : Niveau Initiation
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & SassAlphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
 
Alphorm.com Formation PostgreSQL, la Haute Disponibilité
Alphorm.com Formation PostgreSQL, la Haute DisponibilitéAlphorm.com Formation PostgreSQL, la Haute Disponibilité
Alphorm.com Formation PostgreSQL, la Haute Disponibilité
 
alphorm.com - Formation Windows 8.1 (70-687)
alphorm.com - Formation Windows 8.1 (70-687)alphorm.com - Formation Windows 8.1 (70-687)
alphorm.com - Formation Windows 8.1 (70-687)
 
Servlets et JSP
Servlets et JSPServlets et JSP
Servlets et JSP
 
Axis2 services fr
Axis2 services frAxis2 services fr
Axis2 services fr
 
Alphorm.com Formation Sophos Certified Engineer : EndPoint Protection
Alphorm.com Formation Sophos Certified Engineer : EndPoint ProtectionAlphorm.com Formation Sophos Certified Engineer : EndPoint Protection
Alphorm.com Formation Sophos Certified Engineer : EndPoint Protection
 
Alphorm.com Formation Microsoft Hyperconvergence
Alphorm.com Formation Microsoft HyperconvergenceAlphorm.com Formation Microsoft Hyperconvergence
Alphorm.com Formation Microsoft Hyperconvergence
 
Alphorm.com Formation Active Directory 2016 : Le Guide complet de l'architecture
Alphorm.com Formation Active Directory 2016 : Le Guide complet de l'architectureAlphorm.com Formation Active Directory 2016 : Le Guide complet de l'architecture
Alphorm.com Formation Active Directory 2016 : Le Guide complet de l'architecture
 
Sonar-Hodson-Maven
Sonar-Hodson-MavenSonar-Hodson-Maven
Sonar-Hodson-Maven
 
Intellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server InternalsIntellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server Internals
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
 

En vedette

Graphic Drawings Proposal
Graphic Drawings ProposalGraphic Drawings Proposal
Graphic Drawings ProposalBetawebsolution
 
Slideshare de gustavo
Slideshare de gustavoSlideshare de gustavo
Slideshare de gustavoHogar
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?Frédéric Harper
 
Golgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okGolgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okHogar
 
Primeiras fotos a cores
Primeiras fotos a coresPrimeiras fotos a cores
Primeiras fotos a coresguest07d190
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
 

En vedette (6)

Graphic Drawings Proposal
Graphic Drawings ProposalGraphic Drawings Proposal
Graphic Drawings Proposal
 
Slideshare de gustavo
Slideshare de gustavoSlideshare de gustavo
Slideshare de gustavo
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Golgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okGolgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. ok
 
Primeiras fotos a cores
Primeiras fotos a coresPrimeiras fotos a cores
Primeiras fotos a cores
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 

Similaire à Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?Quentin Adam
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !matparisot
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Mathieu Parisot
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web MicrosoftChristophe Lauer
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?GreenIvory
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Tugdual Grall
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5Mohamed Nemili
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Microsoft
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Nazih Heni
 
Retours Devoxx France 2016
Retours Devoxx France 2016Retours Devoxx France 2016
Retours Devoxx France 2016Antoine Rey
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopFrédéric Harper
 
Frameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSFrameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSSébastien Ollivier
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinThierry Buisson
 
Quoi de neuf dans Expression Web 3
Quoi de neuf dans Expression Web 3Quoi de neuf dans Expression Web 3
Quoi de neuf dans Expression Web 3Christophe Lauer
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?Microsoft
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptMicrosoft
 

Similaire à Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web (20)

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
Starter Kits
Starter KitsStarter Kits
Starter Kits
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
Retours Devoxx France 2016
Retours Devoxx France 2016Retours Devoxx France 2016
Retours Devoxx France 2016
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
Frameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSFrameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MS
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
 
Quoi de neuf dans Expression Web 3
Quoi de neuf dans Expression Web 3Quoi de neuf dans Expression Web 3
Quoi de neuf dans Expression Web 3
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 

Plus de Frédéric Harper

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)Frédéric Harper
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Frédéric Harper
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04Frédéric Harper
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Frédéric Harper
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...Frédéric Harper
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Frédéric Harper
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30Frédéric Harper
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Frédéric Harper
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Frédéric Harper
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Frédéric Harper
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Frédéric Harper
 

Plus de Frédéric Harper (20)

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
 

Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web

  • 1. Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web Frédéric Harper Évangéliste aux développeurs – Microsoft Canada fredh@microsoft.com http://twitter.com/fharper http://linkedin.com/in/fredericharper
  • 3. Performance de multisystème News Site 5 Rendering News Site 4 Layout Block Building News Site 3 Formatting News Site 2 Native OM News Site 1 Marshalling JavaScript 0% 50% Collections 100%
  • 4. La puissance de tout le PC GREETINGS PROFESSOR FALKEN. WOULD YOU LIKE TO PLAY A GAME OF CHESS? █
  • 5. L’engin JavaScript Au premier plan Arbre Code Analyseur Syntaxique ByteCode Interpréteur source (Parser) Abstrait (AST)
  • 6. Nouvel engin JavaScript – “Chakra” Au premier plan Arbre Code Analyseur Syntaxique ByteCode Interpréteur source (Parser) Abstrait (AST) Compilation Code natif En arrière-plan Utilisant plusieurs JavaScript compilé En arrière-plan processeurs
  • 7. Résultats du WebKit SunSpider v0.9.1 4000 IE8 3500 Firefox 3.6.13 3000 Safari 5.0.3 2500 Firefox 4.0 Beta 10 2000 Chrome 10 Developer 1500 Opera 11 1000 Chrome 9 500 IE9 RC 0
  • 8. Nouvel engin JavaScript – “Chakra”  Plusieurs fonctionnalités ECMAScript 5 importantes sont implémentées dans Internet Explorer 9  Nouvelle méthode de tableau  Modèle d’objet amélioré  Autres méthodes et fonctions de calculs  Pour plus d’informations, lire “ECMAScript 5 Support and More” sur le blogue d’IE (en anglais) : http://blogs.msdn.com/b/ie/
  • 9. Les fonctionnalités du DOM et du JavaScript Support complet des événements du DOM niveau 2 et 3 Nouvelles fonctionnalitésd ‘ECMAScript 5 addEventListener DOM Traversal and Range DOM Style DOMContentLoaded DOM Core HTML5 and XHTML Parsing Enhancements getComputedStyle(element, pseudoElement) getSelection() getElementsByClassName(class)
  • 11. window.msPerformance  Un nouvel ensemble de mesures du rendement intégrées dans l’API du « Document Object Model” (DOM)  Nous travaillons avec le W3C pour créer une façon interopérable de mesurer les performances
  • 12. window.msPerformance <script type="text/javascript"> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart); </script>
  • 13. L’outil F12 pour développeurs  Une interface visuelle intégrée pour visualiser le DOM  Expérimentation rapide  Plusieurs nouvelles fonctionnalités avec IE9  Inspection de réseau  Sélecteur de chaînes User-agent  Onglet console  Support SVG  Formattage du JavaScript
  • 14. demo L’outil F12 pour les développeurs dans IE9
  • 16. Internet Explorer 9: Le site en priorité  Dispose d'une interface propre, simplifiée, plus rapide, qui met l'accent sur les sites des développeurs, plutôt que sur le navigateur lui-même  Amène les applications et tâches en avant-plan  Permet à vos sites de briller
  • 17. Le Canada construit un Web encore plus beau
  • 18. Le Canada construit un Web encore plus beau
  • 19. Le Canada construit un Web encore plus beau
  • 20. demo Les sites pinnés (Pinned Sites) dans IE9
  • 21. Débutez avec les sites pinnés  Le support des sites pinnés ne demande aucun changement cosmétique à votre site  Fournis des notifications à vos utilisateurs  L’ajout se fait avec seulement quelques lignes de code  Personnalisez l’icône et l’expérience utilisateur du même coup  Définissez des listes de tâches (Jump List tasks)  Ajoutez des listes dynamiques  Affichez les boutons dans la barre de tâches
  • 22. Personnalisez votre site pinné <meta name="application-name" content="Site Name" /> <meta name="msapplication-tooltip" content="Start the Pinned Site" /> <meta name="msapplication-starturl" content="http://example.com/start.htm" />
  • 23. Fournissez des notifications window.external.msSiteModeSetIconOverlay( 'http://host/overlay1.ico','Overlay 1'); window.external.msSiteModeClearIconOverlay(); window.external.msSiteModeActivate();
  • 24. Ajouter des listes de tâches (Jump Lists) <meta name="msapplication-task" content="name=Task 1; action-uri=http://host/Page1.htm; icon-uri=http://host/icon1.ico" /> <meta name="msapplication-task" content="name=Task 2; action-uri=http://host2/Page2.htm; icon-uri=http://host2/icon2.ico" />
  • 30. Qu’est-ce que “HTML5”? Candidat à la Premier brouillon public Brouillon de travail Dernier appel Recommendation recommendation
  • 31. Groupes de travail HTML du W3C  40 organisations membres  400+ participants  280+ experts invités  Spécification HTML5  Documents publiés  1100+ pages imprimés  Liste de diffusion >4000 courriels par mois
  • 32. Cycle de vie d’une spécification du W3C Premier brouillon Brouillon de Candidat pour la Recommendation Recommendation public travail recommendation proposée Dernier appel Appel à l’implémentation HTML5
  • 33. Atteindre une recommandation finale  L’interopérabilité demande une suite de tests compréhensive  W3C HTML5 Test Suite  Dirigé par le W3C  Ouvert aux contributions et analyses externes  Microsoft a soumis plus de 500 tests pour le Test Suite Tester n’est pas seulement une affaire de vrai ou faux!
  • 34. HTML5 <canvas>  Permet aux développeurs de dessiner des graphiques 2D à l’aide de JavaScript:  Les méthodes pour dessiner inclus: paths, boxes, circles, text et rasterrized images.  Il existe déjà plusieurs librairies JavaScript qui permettent le dessin dans les canvas, tel que EaselJS.
  • 35. HTML5 <canvas> <canvas id="monCanvas" width="200" height="200"> Votre navigateur ne supporte pas Canvas, désolé. </canvas> <script type="text/javascript"> var exemple = document.getElementById("monCanvas"); var context = exemple.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>
  • 36. Scalable Vector Graphics (SVG)  Créer et dessiner du 2D à l’aide de vecteur graphique utilisant XML  Image composée de formes au lieu de pixels  Basé sur SVG 1.1 2nd édition, spécification complète  Comprends le support pour:  Accès complet au DOM  Structure du document, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking et views.
  • 37. Scalable Vector Graphics (SVG) <svg width="400" height="200"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>
  • 38. HTML5 <video>  Encodage vidéo de l’industrie MPEG-4/H.264  Peuvent être composé de n’importe quoi d’autre sur la page:  HTML, images, graphiques SVG  Accélération matérielle, décompression avec le GPU
  • 39. HTML5 <video> <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <!– Vidéo Flash/Silverlight ici --> </video>
  • 40. HTML5 <audio>  Supporte les standards de l’industrie: MP3 et AAC  Scriptable via le DOM  Attribues  src –> la location du fichier  autoplay –> si la lecture se fait automatiquement (S.V.P.!)  controls –> si présent, des contrôles le seront aussi  preload –> si présent, le chargement de l’audio se fera au chargement de la page
  • 41. HTML5 <audio> <audio src="audio.mp3" id="audioTag" autoplay controls> <!– Audio Flash/Silverlight ici --> </audio> 41
  • 42. Geolocation  Permet aux sites de découvrir votre emplacement géographique  La permission de l’utilisateur est requise
  • 43. Geolocation function getLocation() { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); } } function callBack(position) { var accuracy = position.coords[accuracy]; var latitude = position.coords.latitude; var longitude = position.coords.longitude; }
  • 44. Web Open Font Format  Plus de limitation avec les fonts “Web Safe”  WOFF  Créer pour le Web et utilisé à l’aide de la déclaration @font-face  Un simple “réemballage” des fonts OpenType et TrueType  Proviens du W3C Fonts Working Group
  • 45. WOFF Fonts and @font-face <style type="text/css"> @font-face { font-family: MyFontName; src: url('FontFile.woff'); } </style> <div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff </div>
  • 47. CSS3 Media Queries <link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type="text/css" /> <link href="netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max-width: 1024px)" type="text/css" /> <link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
  • 49. Outils pour HTML5 Visual Studio 2010 SP1 Expression Studio Web 4  Validation et IntelliSense SP1 pour HTML5  Support complet pour  Plusieurs améliorations HTML5 dans le “Code CSS3 Editor” et support significatif dans le “Design View”  Des centaines de nouvelles propriétés provenant du brouillon (draft) de la spécification CSS3
  • 50. Visual Studio HTML5 & SVG Extensions visualstudiogallery.msdn.microsoft.com PAGE
  • 51. Ai2Canvas Exporter visitmix.com/lab PAGE
  • 52. IE9 Dev Unplugged www.beautyoftheweb.com/dev/unplugged  Deux catégories principales  Meilleur jeux  Meilleur expérience musicale  Optenez des mise à jour sur le concours sur Twitter  @IE et #devunplugged
  • 53. Downloadez Internet Explorer 9 RTW Le navigateur de Microsoft le plus rapide Téléchargez et essayez le maintenant! (RTW est là!) Utilisez le nouveau “Site Mode” et les fonctionnalités d’HTML5 Pour en savoir plus, allez à http://msdn.com/ie Nous voulons vos commentaires cdndevs@microsoft.com
  • 57. Médias sociaux relisés à IE  Twitter: @ie  Autres hashtag à considérer: #IE9, #HTML5, #WebDevs, #CSS3  facebook.com/internetexplorer9  youtube.com/internetexplorer
  • 59. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.