SlideShare une entreprise Scribd logo

Le renouveau du web - Mathieu Parisot

SOAT
SOAT

Le web a beaucoup évolué ces dernières années. Techniquement avec le HTML5, Cloud, NoSQL, REST, le renouveau du javascript Mais également fonctionnellement, avec le web sémantique, l'arrivée des smartphones. Dans cette soirée, nous ferons un tour d'horizon de toutes ces choses et verrons comment elles façonnent la face du web. Pas besoin de prérequis pour cette conférence, qui s'adresse à tous les niveaux. :) La vidéo de la présentation est visible ici : http://youtu.be/vdB8EAXMGXQ

1  sur  109
Télécharger pour lire hors ligne
2012-10-30   TEST_Cliquez et modifiez le pied de page   1
De quoi on va parler ?

⦿Ben du Web…
⦿D'architecture autour du Web
⦿De conception de sites pour le Web
⦿De conception de sites pour le Web Mobile
⦿De Web de données
⦿Et un peu de Cloud et de NoSQL
              Bref du passé, du présent
                et du futur du Web !
2012-10-30            TEST_Cliquez et modifiez le pied de page   2
Et en Buzz Words ?


             WOA, SOA, REST, STATELess, HATE
                   OAS, HTML5, Mobile
                  First, Responsive Web
             Design, Web sémantique, Web de
                      données, Web
                Mobile, Cloud, NoSQL, etc.

2012-10-30             TEST_Cliquez et modifiez le pied de page   3
Disclaimer




2012-10-30            TEST_Cliquez et modifiez le pied de page   4
2012-10-30   TEST_Cliquez et modifiez le pied de page   5
Les terminaux changent




2012-10-30           TEST_Cliquez et modifiez le pied de page   6

Recommandé

English week08
English week08English week08
English week08pallasset
 
United States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHUnited States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHVogelDenise
 
IM France - Avantages d'une mise à niveau vers info sphere datastage 8.7
IM France - Avantages d'une mise à niveau vers info sphere datastage 8.7IM France - Avantages d'une mise à niveau vers info sphere datastage 8.7
IM France - Avantages d'une mise à niveau vers info sphere datastage 8.7Solutions IT et Business
 
Je ne sais comment il fait mais c est beau
Je ne sais comment il fait mais c est beauJe ne sais comment il fait mais c est beau
Je ne sais comment il fait mais c est beauOvidiu Slimac
 

Contenu connexe

En vedette

Nuremberg crimes against humanity-peace (french)
Nuremberg   crimes against humanity-peace (french)Nuremberg   crimes against humanity-peace (french)
Nuremberg crimes against humanity-peace (french)VogelDenise
 
Tech Days Ttc Testing
Tech Days Ttc TestingTech Days Ttc Testing
Tech Days Ttc TestingKingttc
 
Automobiles avant - guerre
Automobiles avant - guerreAutomobiles avant - guerre
Automobiles avant - guerreOvidiu Slimac
 
La formation des enseignants en Grece
La formation des enseignants en GreceLa formation des enseignants en Grece
La formation des enseignants en Greceifigenia1
 
French Right of REVOLUTION & Political CORRUPTION
French   Right of REVOLUTION & Political CORRUPTIONFrench   Right of REVOLUTION & Political CORRUPTION
French Right of REVOLUTION & Political CORRUPTIONVogelDenise
 
Pre%20 assessment[1]
Pre%20 assessment[1]Pre%20 assessment[1]
Pre%20 assessment[1]navat1
 
Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...
Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...
Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...IAU_Past_Conferences
 
L'acte de Protectinvest
L'acte de ProtectinvestL'acte de Protectinvest
L'acte de Protectinvestlesoirbe
 
Interpol bringing the united states to justice (french)
Interpol   bringing the united states to justice (french)Interpol   bringing the united states to justice (french)
Interpol bringing the united states to justice (french)VogelDenise
 
4 4-2 strategie defensive
4 4-2 strategie defensive4 4-2 strategie defensive
4 4-2 strategie defensiveKhaled Haj Ayed
 

En vedette (15)

Nuremberg crimes against humanity-peace (french)
Nuremberg   crimes against humanity-peace (french)Nuremberg   crimes against humanity-peace (french)
Nuremberg crimes against humanity-peace (french)
 
Tech Days Ttc Testing
Tech Days Ttc TestingTech Days Ttc Testing
Tech Days Ttc Testing
 
Pitch1 lumen
Pitch1 lumenPitch1 lumen
Pitch1 lumen
 
Automobiles avant - guerre
Automobiles avant - guerreAutomobiles avant - guerre
Automobiles avant - guerre
 
Synthèse des Solutions Software
Synthèse des Solutions Software   Synthèse des Solutions Software
Synthèse des Solutions Software
 
La formation des enseignants en Grece
La formation des enseignants en GreceLa formation des enseignants en Grece
La formation des enseignants en Grece
 
French Right of REVOLUTION & Political CORRUPTION
French   Right of REVOLUTION & Political CORRUPTIONFrench   Right of REVOLUTION & Political CORRUPTION
French Right of REVOLUTION & Political CORRUPTION
 
Pre%20 assessment[1]
Pre%20 assessment[1]Pre%20 assessment[1]
Pre%20 assessment[1]
 
Paquet plus ecommercelive_20092013
Paquet plus ecommercelive_20092013Paquet plus ecommercelive_20092013
Paquet plus ecommercelive_20092013
 
Renaissance3
Renaissance3Renaissance3
Renaissance3
 
Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...
Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...
Alex. bd iau aucc-ace-chea statement on sharing quality higher education acro...
 
Dompter Google
Dompter GoogleDompter Google
Dompter Google
 
L'acte de Protectinvest
L'acte de ProtectinvestL'acte de Protectinvest
L'acte de Protectinvest
 
Interpol bringing the united states to justice (french)
Interpol   bringing the united states to justice (french)Interpol   bringing the united states to justice (french)
Interpol bringing the united states to justice (french)
 
4 4-2 strategie defensive
4 4-2 strategie defensive4 4-2 strategie defensive
4 4-2 strategie defensive
 

Similaire à Le renouveau du web - Mathieu Parisot

Scroll ou clic | Web-In 2012
Scroll ou clic | Web-In 2012Scroll ou clic | Web-In 2012
Scroll ou clic | Web-In 2012RevSquare
 
Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...
Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...
Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...Jean-Michel Bouffard
 
Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)
Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)
Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)Raffaele Costantino
 
Se réapproprier la gestion BIM avec annexes
Se réapproprier la gestion BIM avec annexesSe réapproprier la gestion BIM avec annexes
Se réapproprier la gestion BIM avec annexesPMI-Montréal
 
Maximisez les bénéfices de votre BI self-service avec la Data Virtualization
Maximisez les bénéfices de votre BI self-service avec la Data VirtualizationMaximisez les bénéfices de votre BI self-service avec la Data Virtualization
Maximisez les bénéfices de votre BI self-service avec la Data VirtualizationDenodo
 
Nouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCADNouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCADprocadconsultants
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
 

Similaire à Le renouveau du web - Mathieu Parisot (9)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Scroll ou clic | Web-In 2012
Scroll ou clic | Web-In 2012Scroll ou clic | Web-In 2012
Scroll ou clic | Web-In 2012
 
Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...
Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...
Web2.0: Les caractéristiques et les technologies qui définissent la nouvelle ...
 
Panorama de l'offre Big Data de Microsoft
Panorama de l'offre Big Data de MicrosoftPanorama de l'offre Big Data de Microsoft
Panorama de l'offre Big Data de Microsoft
 
Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)
Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)
Du Web 2.0 à l’Entreprise 2.0 (Présentation Thèse - Raffaele COSTANTINO)
 
Se réapproprier la gestion BIM avec annexes
Se réapproprier la gestion BIM avec annexesSe réapproprier la gestion BIM avec annexes
Se réapproprier la gestion BIM avec annexes
 
Maximisez les bénéfices de votre BI self-service avec la Data Virtualization
Maximisez les bénéfices de votre BI self-service avec la Data VirtualizationMaximisez les bénéfices de votre BI self-service avec la Data Virtualization
Maximisez les bénéfices de votre BI self-service avec la Data Virtualization
 
Nouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCADNouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCAD
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 

Plus de SOAT

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018SOAT
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libéréeSOAT
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !SOAT
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseSOAT
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESSOAT
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-DurandSOAT
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-DurandSOAT
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-DurandSOAT
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotSOAT
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014SOAT
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014SOAT
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soatSOAT
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...SOAT
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014SOAT
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#SOAT
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatSOAT
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesSOAT
 

Plus de SOAT (20)

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libérée
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entreprise
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
 

Le renouveau du web - Mathieu Parisot

  • 1. 2012-10-30 TEST_Cliquez et modifiez le pied de page 1
  • 2. De quoi on va parler ? ⦿Ben du Web… ⦿D'architecture autour du Web ⦿De conception de sites pour le Web ⦿De conception de sites pour le Web Mobile ⦿De Web de données ⦿Et un peu de Cloud et de NoSQL Bref du passé, du présent et du futur du Web ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 2
  • 3. Et en Buzz Words ? WOA, SOA, REST, STATELess, HATE OAS, HTML5, Mobile First, Responsive Web Design, Web sémantique, Web de données, Web Mobile, Cloud, NoSQL, etc. 2012-10-30 TEST_Cliquez et modifiez le pied de page 3
  • 4. Disclaimer 2012-10-30 TEST_Cliquez et modifiez le pied de page 4
  • 5. 2012-10-30 TEST_Cliquez et modifiez le pied de page 5
  • 6. Les terminaux changent 2012-10-30 TEST_Cliquez et modifiez le pied de page 6
  • 7. Les attentes changent ⦿Ajax à gogo ⦿Animations et transitions léchées ⦿Défilements infinis ⦿Disparition des popup modales ⦿Réactivité immédiate ⦿Sites + sobres 2012-10-30 TEST_Cliquez et modifiez le pied de page 7
  • 8. Donc le développement change ⦿Construire avec les technologies d'hier Les technologies dépassées ⦿Construire avec les technologies d'aujourd'hui Les technologies matures et rassurantes ⦿Construire avec les technologies de demain Les technologies que l'on invente aujourd'hui pour les usages de demain 2012-10-30 TEST_Cliquez et modifiez le pied de page 8
  • 9. Qui ? 2012-10-30 TEST_Cliquez et modifiez le pied de page 9
  • 10. Et vous ? 2012-10-30 TEST_Cliquez et modifiez le pied de page 10
  • 11. La citation kivabien™ “ Le problème avec le futur, c'est qu'il n'arrête pas de devenir le présent. ” Bill Watterson 2012-10-30 TEST_Cliquez et modifiez le pied de page 11
  • 12. 2012-10-30 TEST_Cliquez et modifiez le pied de page 12
  • 13. Commençons par une définition WEB = HTTP + URI + HTML HTTP : Transport des données URI : Identifier et localiser les données HTML : Afficher les données 2012-10-30 TEST_Cliquez et modifiez le pied de page 13
  • 14. Et attention… Web != Internet Web : Consultation de documents Internet : Interconnexion de réseaux Internet = Web + mail + P2P + IRC + … 2012-10-30 TEST_Cliquez et modifiez le pied de page 14
  • 15. Les dates clefs – Le 1er Age ⦿1989 : invention par Tim Bernes Lee ⦿1991 : Le projet est rendu public ⦿1993 : apparition de Mosaic, premier navigateur graphique ⦿1994 : Naissance du W3C pour standardiser tout ça ⦿1995 : 1ere guerre des navigateurs : IE vs Netscape ⦿1997 : HTML 4, le Web tel qu'on le connait ⦿2001 : IE6 (Qu'il soit maudit à jamais!) 2012-10-30 TEST_Cliquez et modifiez le pied de page 15
  • 16. Les dates clefs – Le Renouveau ⦿2004 : Web 2.0 (basé sur Ajax), Naissance de Firefox ⦿2007 : Début des travaux du W3C sur le HTML5 et apparition de l'iPhone ⦿2008 : Seconde Guerre des navigateurs : IE vs Chrome vs Firefox (vs Safari vs Opera) ⦿2011 : Adobe et Microsoft sont les derniers grands du Web a promouvoir le HTML5 2012-10-30 TEST_Cliquez et modifiez le pied de page 16
  • 17. 2012-10-30 TEST_Cliquez et modifiez le pied de page 17
  • 18. L'origine : 1992-1998 Simple et rapide Un peu sommaire 2012-10-30 TEST_Cliquez et modifiez le pied de page 18
  • 19. Le sites dynamiques : 1998-2002 Simple et efficace Pas facile a maintenir 2012-10-30 TEST_Cliquez et modifiez le pied de page 19
  • 20. Les sites Entreprise : 2002-2006 Resistant (a quoi ?) Un peu compliqué 2012-10-30 TEST_Cliquez et modifiez le pied de page 20
  • 21. Les sites Entreprise : 2006-2012 Plus simple Pas prévu pour le multicanal 2012-10-30 TEST_Cliquez et modifiez le pied de page 21
  • 22. Les sites Multicanaux : 2010-20?? Très flexible Plus de technologies 2012-10-30 TEST_Cliquez et modifiez le pied de page 22
  • 23. 2012-10-30 TEST_Cliquez et modifiez le pied de page 23
  • 24. L'origine Pages Webs statiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 24
  • 25. Le web dynamique BDD Session Serveur Web Pages Pages statiques dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 25
  • 26. Le Web d'entreprise BDD Serveur Applicatif communication Session Serveur Web Pages dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 26
  • 27. Service Oriented Architecture BDD BDD BDD BDD Serveur Applicatif Serveur Applicatif Serveur Applicatif Serveur Applicatif communication communication communication communication Serveur Web Serveur Web Serveur Web Serveur Web Pages dynamiques Pages dynamiques Pages dynamiques Pages dynamiques Bus de données 2012-10-30 TEST_Cliquez et modifiez le pied de page 27
  • 28. Le retour à la réalité BDD couche métier Session Couche Vue Pages dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 28
  • 29. En restant S.O.A BDD couche métier Couche Vue Webservices Pages dynamiques BDD couche métier Couche Vue Webservices Pages dynamiques BDD couche métier 2012-10-30 TEST_Cliquez et modifiez le pied de page 29
  • 30. Arriva le Mobile BDD couche métier Couche Vue Couche Vue Couche Services Mobile Session Web Couche Services Mobile Web Pages Web Mobile App Mobile dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 30
  • 31. Web Oriented Architecture BDD BDD BDD Services REST Services REST Services REST App Mobile Client Web Mobile Client Web 2012-10-30 TEST_Cliquez et modifiez le pied de page 31
  • 32. 2012-10-30 TEST_Cliquez et modifiez le pied de page 32
  • 33. REST ? ⦿REpresentational State Transfer ⦿Utiliser le Web pour exposer des données ⦿L'URI permet d'identifier les données ⦿Les verbes HTTP permettent de manipuler les données ⦿HTML, XML et JSON permettent de les réprésenter ⦿Sans session (STATELess) 2012-10-30 TEST_Cliquez et modifiez le pied de page 33
  • 34. Pourquoi REST ? ⦿Beaucoup plus simple que RPC ou SOAP ⦿Mieux structuré ⦿Moins gourmand en mémoire ⦿Meilleurs elasticité (scalable) ⦿Pas de surcouche : utilise directement HTTP ⦿Profite de tous les méchanismes HTTP et URI ⦿cache, authentification, codes d'erreurs, etc. 2012-10-30 TEST_Cliquez et modifiez le pied de page 34
  • 35. Les verbes HTTP, kézako ? ⦿GET : récupération d'infos ⦿POST & PUT : création / modification ⦿DELETE : suppression ⦿Attention le DELETE n'est pas bien supporté par les navigateurs! 2012-10-30 TEST_Cliquez et modifiez le pied de page 35
  • 36. Plus concrètement ⦿Récupérer la liste des utilisateurs : GET http://soat.fr/users/ ⦿Récupérer un utilisateur : GET http://soat.fr/users/1 ⦿Récupérer la listes de ses amis : GET http://soat.fr/users/1/friends/ ⦿Supprimer un utilisateur : DELETE http://soat.Fr/users/1 ⦿ Créé un utilisateur : POST http://soat.fr/users/2 2012-10-30 TEST_Cliquez et modifiez le pied de page 36
  • 37. Le résultat en JSON GET http://soat.fr/users/1 HTTP RESPONSE 200 OK { 'name' : 'Mathieu PARISOT', 'civility' : 'Mr', 'birthdate' : '22/06/1982', 'languages' : ['java', 'php', 'html', 'css', 'javascript'], 'GPS' : { 'link' : { 'rel' : 'groupe GPS', 'href' : 'http://soat.fr/gps/2' } } } 2012-10-30 TEST_Cliquez et modifiez le pied de page 37
  • 38. Différents "niveaux" ⦿Niveau 0 : SOAP ou RPC POST http://soat.fr/userService Entrée : <addFriend userId="1" friendId="2"/> Sortie : <result status="ok"/> ⦿ Niveau 1 : La transition POST http://soat.fr/users/addFriend Entrée : <data userId="1" friendId="2"/> Sortie : <result status="ok"/> 2012-10-30 TEST_Cliquez et modifiez le pied de page 38
  • 39. Différents "niveaux" ⦿Niveau 2 : Utilisation de HTPP POST http://soat.fr/users/1/friends/2 Entrée : rien d'autre Sortie : HTTP 200 ⦿ Niveau 3 : HATEOAS ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 39
  • 40. HATEOAS ? ⦿Hypermedia as the Engine of Application State ⦿Découvrir les possibilités à partir d'un point d'entrée unique ⦿Pas de contrat autre que le standard REST ⦿Toutes les resources sont liées les unes aux autres 2012-10-30 TEST_Cliquez et modifiez le pied de page 40
  • 41. Un exemple ⦿GET http://soat.fr <company name="so@t"> <users> <link rel="users" href="http://soat.fr/users/"/> </users> <customers> <link rel="customers" href="http://soat.fr/customers/"/> </customers> </company> 2012-10-30 TEST_Cliquez et modifiez le pied de page 41
  • 42. Un exemple la suite ⦿GET http://soat.fr/users/ <users> <user name="mathieu parisot"> <link ref="self" href="http://soat.fr/users/1"/> </user> <user name="Jean Dupont"> <link ref="self" href="http://soat.fr/users/2"/> </user> </users> 2012-10-30 TEST_Cliquez et modifiez le pied de page 42
  • 43. Un exemple la fin ⦿GET http://soat.fr/users/1 <user name="mathieu parisot"> <link ref="self" href="http://soat.fr/users/1"/> <customers> <link rel="customer" href="http://soat.fr/customers/1"/> </customers> </user> 2012-10-30 TEST_Cliquez et modifiez le pied de page 43
  • 44. OpenAPI ⦿Vous avez des tonnes de services … ⦿… alors exposez les au monde entier ! ⦿Ou seulement à vos partenaires ⦿Et pas forcément tous ⦿Mais pensez-y même si vous ne le faîte pas ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 44
  • 45. Architecture 2012-10-30 TEST_Cliquez et modifiez le pied de page 45
  • 46. 2012-10-30 TEST_Cliquez et modifiez le pied de page 46
  • 47. Natif Vs Web ⦿Débat sans fin sur internet ⦿Natif : ⦿Rapide ⦿Accès au matériel ⦿Look&Feel natif ⦿Web : ⦿Multiplateforme ⦿Plus de développeurs 2012-10-30 TEST_Cliquez et modifiez le pied de page 47
  • 48. Mais ça bouge ⦿Web Devices en HTML5 pour accéder au matériel ⦿Moteurs Javascript de + en + rapide ⦿API CSS et Javascript pour simuler un look&feel natif Convergence entre les deux ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 48
  • 49. Les problématiques Mobile ⦿Taille de l'écran ⦿Disparité du parc ⦿Bande passante (ko/s) ⦿Latence (temps minimal de chaque requête) ⦿Batterie ⦿Puissance de calcul ⦿Navigation (tactile / flèches / clavier num.) 2012-10-30 TEST_Cliquez et modifiez le pied de page 49
  • 50. La disparité ⦿Pensez votre site pour le périphérique cible qui posera le plus de problèmes… ⦿Puis activer les fonctionnalités avancées en fonction du périphérique 2012-10-30 TEST_Cliquez et modifiez le pied de page 50
  • 51. Le réseau ⦿Taille totale recommandée : 20ko ! ⦿Réduisez le nombre de requêtes au serveur : Si 1s de latence et 5 requêtes en // : 5 secondes pour charger 25 ressources (images, css, js) ⦿ Prévoyez un mode offline minimal 2012-10-30 TEST_Cliquez et modifiez le pied de page 51
  • 52. La puissance ⦿Limiter au maximum le Javascript ! ⦿Pas de setInterval ⦿Attention aux modifications du DOM ⦿Tester sur les périphériques les + lents 2012-10-30 TEST_Cliquez et modifiez le pied de page 52
  • 53. La navigation ⦿Aucun scroll horizontal ⦿Eviter les scrolls verticaux ⦿Boutons et champs beaucoup + gros ⦿Typer les champs de formulaires en HTML5 ⦿Pas de survol ⦿Pas de popup 2012-10-30 TEST_Cliquez et modifiez le pied de page 53
  • 54. Pour vous épauler ⦿JQuery Mobile ⦿Sancha ⦿JQTouch ⦿GWT / PrimeFaces / Wicket ⦿PhoneGap ⦿Et plein d 'autres… 2012-10-30 TEST_Cliquez et modifiez le pied de page 54
  • 55. Le Web mobile 2012-10-30 TEST_Cliquez et modifiez le pied de page 55
  • 56. 2012-10-30 TEST_Cliquez et modifiez le pied de page 56
  • 57. Le site s'adapte à l'écran 2012-10-30 TEST_Cliquez et modifiez le pied de page 57
  • 58. Mobile First ! ⦿Pensez le site pour l'écran le + petit ⦿Ajouter les éléments en fonction de la place  Oblige à se concentrer sur l'essentiel ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 58
  • 59. Comment ça marche ? ⦿En CSS ! ⦿Grille Fluide : tailles en % et en em ⦿Images Flexibles : max-width et cropping ⦿Media Queries : CSS conditionnelles ⦿Taille de l'affichage (min-width, max-height, etc.) ⦿Taille de l'écran (min-width, max-height, etc.) ⦿Résolution (dpi) ⦿Orientation, ratio, couleurs, etc. 2012-10-30 TEST_Cliquez et modifiez le pied de page 59
  • 60. Une exemple de CSS @media (min-width: 481px) and (max-width: 768px) { #banner { width:740px; } #banner img { max-width:740px; max-height:222px; } #main { width:740px; } #main-content { width:450px; float:left; } #widget-container { width:200px; float:right; } .widget-content { width:160px; } } 2012-10-30 TEST_Cliquez et modifiez le pied de page 60
  • 61. La compatibilité ? <9 2012-10-30 TEST_Cliquez et modifiez le pied de page 61
  • 62. Les autres problèmes ⦿Le contenu n'est pas forcément commun entre desktop et mobile ⦿Taille des pages pas adaptée au mobile ⦿Navigation pas adaptée non plus ⦿Fixer des bornes min et max pour la lisibilité 2012-10-30 TEST_Cliquez et modifiez le pied de page 62
  • 63. Quand l'utiliser ? ⦿Tout le temps !  Même sur le desktop les écrans sont différents ! ⦿ Si votre contenu est commun avec le mobile ⦿ Pour préparer une transition vers le mobile 2012-10-30 TEST_Cliquez et modifiez le pied de page 63
  • 64. Responsive Web Design 2012-10-30 TEST_Cliquez et modifiez le pied de page 64
  • 65. 2012-10-30 TEST_Cliquez et modifiez le pied de page 65
  • 66. Le retour du Client - Serveur La théorie : découpage en couches, n-tiers La réalité : code vue et métier intriqué Avec le WOA on sépare complètement la vue ! Serveur : expose des services REST Client : site Web, appli native, client lourd, etc. 2012-10-30 TEST_Cliquez et modifiez le pied de page 66
  • 67. Les sites Webs Structure Style Traitement Ressources 2012-10-30 TEST_Cliquez et modifiez le pied de page 67
  • 68. Le CSS ⦿Langage très limité : ⦿Pas de variables ⦿Beaucoup de valeurs prédéfinies ⦿Mais très compliqué : ⦿Héritage en cascade ⦿Déclarations à plat ⦿Surcharge des selecteurs 2012-10-30 TEST_Cliquez et modifiez le pied de page 68
  • 69. Bonnes pratiques ⦿Utiliser un Reset CSS voir un framework ⦿Eric Meyer, HTML5Reset, etc. ⦿Twitter Bootstrap, Skeleton, etc. ⦿Séparer les CSS par page/composant/etc. ⦿Plus facile a maintenir ⦿Pages plus légères ⦿Utiliser une surcouche ⦿Sass, Less, Compass 2012-10-30 TEST_Cliquez et modifiez le pied de page 69
  • 70. Le javascript ⦿Très puissant ⦿Très compliqué ⦿Mais facile d'accès pour les débutants Code buggué et impossible à maintenir 2012-10-30 TEST_Cliquez et modifiez le pied de page 70
  • 71. Pourquoi tant de haine ? 42 == "42" true 42 === "42" false var myInt = parseInt("08"); myInt === 0 var myInt = parseInt("08", 10); myInt === 8 2012-10-30 TEST_Cliquez et modifiez le pied de page 71
  • 72. Améliorer les choses ? ⦿Lire des livres ! ⦿validation par JSLint ⦿TDD en JS : Qunit, jsTestDriver, Jasmine, etc. ⦿Frameworks et APIs : Jquery, Dojo, YUI, etc. 2012-10-30 TEST_Cliquez et modifiez le pied de page 72
  • 73. Le Framework : JQuery ⦿Utilisé par 60% des sites ! ⦿Fait pour la manipulation du DOM ⦿Efficace, facile, bien documenté ⦿Des tonnes de plugins var link = document.createElement('a'); link.setAttribute('href', 'mylink.htm'); var elem = document.getElementById("myId"); elem.appendChild(link); $('#myId').append('<a href="mylink.htm">'); 2012-10-30 TEST_Cliquez et modifiez le pied de page 73
  • 74. Les Frameworks MVC en JS ⦿Gérer des sites Webs complexes ⦿Nombreuses solutions : Angular.js, Backbone.js, Sprout, sammy, Spine, Emb er.js, batman.js, etc. ⦿ Frameworks très jeunes … ⦿ … donc c'est un peu le bordel ! ⦿ Mais très prometteur et incontournable dans le futur 2012-10-30 TEST_Cliquez et modifiez le pied de page 74
  • 75. Le Javascript coté Server ⦿Explosion du Buzz autours de Javascript ⦿Plein de frameworks coté client … ⦿… mais aussi coté server !  A étudier et voir à long terme 2012-10-30 TEST_Cliquez et modifiez le pied de page 75
  • 76. Dans tous les cas ⦿Minifier YUI compressor ⦿Compresser Mod_deflate sur apache ⦿Utiliser des CDN https://developers.google.com/speed/libraries/devguide ⦿Fusionner vos ressources http://spritegen.website-performance.org/ ⦿Benchmarker Chrome, PageSpeed, YSlow 2012-10-30 TEST_Cliquez et modifiez le pied de page 76
  • 77. Le Web coté client 2012-10-30 TEST_Cliquez et modifiez le pied de page 77
  • 78. 2012-10-30 TEST_Cliquez et modifiez le pied de page 78
  • 79. Kézako ⦿Donner du sens aux données du Web Web de données ⦿Lier ces données entre elles Arbres de connaissances ⦿ Structurer ces données Ontologie ⦿ Enrichir ces données Métadonnées 2012-10-30 TEST_Cliquez et modifiez le pied de page 79
  • 80. Un exemple 1/2 So@t 104, bis rue de Reuilly 75012 Paris Téléphone : +33(1) 44 75 42 55 Télécopie : +33(1) 44 75 05 25 SA au capital de 80.000 Euros N° Siret : 433 353 760 000 39 2012-10-30 TEST_Cliquez et modifiez le pied de page 80
  • 81. Un exemple 2/2 <div class="entreprise"> <span class="name">So@t</span> <span class="address">104, bis rue de Reuilly 75012 Paris</span> Téléphone : <span class"tel">+33(1) 44 75 42 55</span> Télécopie : <span class="fax">+33(1) 44 75 05 25</span> <span class="status">SA</span> au capital de <span class="fund">80.000</span> Euros N° Siret : <span class="siret">433 353 760 000 39</span> </div> 2012-10-30 TEST_Cliquez et modifiez le pied de page 81
  • 82. Donner du sens ⦿Plusieurs langages pour le faire : ⦿Microdata en HTML5 ⦿Microformat ⦿RDFa ⦿OWL ⦿Plusieurs langages pour les requêter : ⦿SPARQL ⦿RDQL ⦿DQL 2012-10-30 TEST_Cliquez et modifiez le pied de page 82
  • 83. Open Data ⦿Libérer vos données ! ⦿Mise à disposition de données à tous ⦿Exemple : http://www.data.gouv.fr/ ⦿Pas nécessairement dans un but Web de Donnée… ⦿… mais très pratique si c'est le cas (Linked Open Data) 2012-10-30 TEST_Cliquez et modifiez le pied de page 83
  • 84. Qui en fait ? 2012-10-30 TEST_Cliquez et modifiez le pied de page 84
  • 85. Vous arrivez pas à lire ? http://fr.dbpedia.org/ http://upload.wikimedia.org/wikipedia/comm ons/3/34/LOD_Cloud_Diagram_as_of_Septem ber_2011.png 2012-10-30 TEST_Cliquez et modifiez le pied de page 85
  • 86. Pourquoi ? http://www.google.com/insidesearch/features/search/knowledge.html 2012-10-30 TEST_Cliquez et modifiez le pied de page 86
  • 87. Le Web Sémantique 2012-10-30 TEST_Cliquez et modifiez le pied de page 87
  • 88. 2012-10-30 TEST_Cliquez et modifiez le pied de page 88
  • 89. Scalabilité extrème ⦿De + en + de gens connectés ⦿De + en + de données ⦿Comment tenir la charge ? ⦿STATELess pour pouvoir distribuer les serveurs  Nouveaux serveurs, Cloud et NoSQL à la rescousse 2012-10-30 TEST_Cliquez et modifiez le pied de page 89
  • 90. 2012-10-30 TEST_Cliquez et modifiez le pied de page 90
  • 91. Comment marche un serveur? Thread d'écoute T T T r r r a a a i i i t t t e e e m m m e e e n n n t t t 2012-10-30 TEST_Cliquez et modifiez le pied de page 91
  • 92. Pourquoi ca pose problème ? ⦿1 client = 1 thread ⦿Grosse consommation mémoire ⦿Synchronisation ⦿Beaucoup de temps d'attente pour rien 2012-10-30 TEST_Cliquez et modifiez le pied de page 92
  • 93. Comment faire mieux ? Thread d'écoute Evènement Evènement Thread d'écriture Thread de lecture 2012-10-30 TEST_Cliquez et modifiez le pied de page 93
  • 94. Pourquoi c'est mieux ? ⦿Nombre de threads fixe ⦿Moins de mémoire ⦿Gestion par Evens ⦿Aucun temps d'attente pour rien 2012-10-30 TEST_Cliquez et modifiez le pied de page 94
  • 95. 2012-10-30 TEST_Cliquez et modifiez le pied de page 95
  • 96. Le Cloud en 1 minute Apps Environnement Matériel 2012-10-30 TEST_Cliquez et modifiez le pied de page 96
  • 97. Le PaaS pour les développeurs ⦿Nouvelles manières de déployer des applications ⦿Forte élasticité ⦿Rapidité de mise en place ⦿Administration simplifiée 2012-10-30 TEST_Cliquez et modifiez le pied de page 97
  • 98. Nouveaux défis ⦿Déploiement Continue ⦿Applications élastiques ⦿Stateless ⦿Distribuées ⦿Répartition des tâches ⦿Asynchronisme ⦿résistance aux pannes 2012-10-30 TEST_Cliquez et modifiez le pied de page 98
  • 99. Nouveaux problèmes ⦿Vendor Locking ⦿Données distantes ⦿Cadre législatif ⦿Gestion des défaillances ⦿Nouveaux patterns de développements 2012-10-30 TEST_Cliquez et modifiez le pied de page 99
  • 100. 2012-10-30 TEST_Cliquez et modifiez le pied de page 100
  • 101. Kézako ? ⦿Not Only SQL ⦿a.k.a Big Data ⦿Les principes de base : (ni exclusif, ni obligatoire) ⦿Pas de jointure ⦿Distribué ⦿Pas ACID ⦿Sacrifice de la consistance des données ⦿Hautes performances 2012-10-30 TEST_Cliquez et modifiez le pied de page 101
  • 102. Adapter le stockage aux données ⦿Les données ne sont pas forcément des tableaux ⦿clefs/valeur ⦿graphs ⦿objets ⦿documents ⦿etc. Pourquoi tout vouloir mettre dans un tableau ? 2012-10-30 TEST_Cliquez et modifiez le pied de page 102
  • 103. Autour du Web 2012-10-30 TEST_Cliquez et modifiez le pied de page 103
  • 104. 2012-10-30 TEST_Cliquez et modifiez le pied de page 104
  • 105. Ce qu'il faut retenir ⦿Ca bouge sur et autour du Web ! ⦿Le mobile est entrain de tout changer ! ⦿Les gens sont beaucoup plus exigeants… ⦿… et beaucoup plus nombreux ! ⦿Le prochain défi du Web est de donner du sens à son contenu ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 105
  • 106. Ce qu'il faut faire ⦿Du REST ⦿Du HTML5/Javascript/CSS3 ⦿Du STATELess ⦿Du Cloud ⦿Du NoSQL ⦿Mettre des microdata 2012-10-30 TEST_Cliquez et modifiez le pied de page 106
  • 107. Et surtout … Vous n'êtes pas seul à galérer ! Alors regardez ce que font les autres ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 107
  • 108. C'est fini ! 2012-10-30 TEST_Cliquez et modifiez le pied de page 108
  • 109. 2012-10-30 TEST_Cliquez et modifiez le pied de page 109