2012-10-30   TEST_Cliquez et modifiez le pied de page   1
De quoi on va parler ?⦿Ben du Web…⦿Darchitecture autour du Web⦿De conception de sites pour le Web⦿De conception de sites p...
Et en Buzz Words ?             WOA, SOA, REST, STATELess, HATE                   OAS, HTML5, Mobile                  First...
Disclaimer2012-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 changent2012-10-30           TEST_Cliquez et modifiez le pied de page   6
Les attentes changent⦿Ajax à gogo⦿Animations et transitions léchées⦿Défilements infinis⦿Disparition des popup modales⦿Réac...
Donc le développement change⦿Construire avec les technologies dhier         Les technologies dépassées⦿Construire avec les...
Qui ?2012-10-30           TEST_Cliquez et modifiez le pied de page   9
Et vous ?2012-10-30               TEST_Cliquez et modifiez le pied de page   10
La citation kivabien™          “ Le problème avec le futur,      cest quil narrête pas de devenir le                     p...
2012-10-30   TEST_Cliquez et modifiez le pied de page   12
Commençons par une définition  WEB = HTTP + URI + HTML  HTTP : Transport des données  URI : Identifier et localiser les do...
Et attention…                     Web != InternetWeb : Consultation de documentsInternet : Interconnexion de réseaux      ...
Les dates clefs – Le                                 1er   Age⦿1989 : invention par Tim Bernes Lee⦿1991 : Le projet est re...
Les dates clefs – Le Renouveau⦿2004 : Web 2.0 (basé sur Ajax), Naissance de Firefox⦿2007 : Début des travaux du W3C sur le...
2012-10-30   TEST_Cliquez et modifiez le pied de page   17
Lorigine : 1992-1998                                        Simple et rapide                                        Un peu...
Le sites dynamiques : 1998-2002                                         Simple et efficace                                ...
Les sites Entreprise : 2002-2006                                         Resistant (a quoi ?)                             ...
Les sites Entreprise : 2006-2012                                         Plus simple                                      ...
Les sites Multicanaux : 2010-20??                                         Très flexible                                   ...
2012-10-30   TEST_Cliquez et modifiez le pied de page   23
Lorigine                         Pages Webs statiques2012-10-30                TEST_Cliquez et modifiez le pied de page   24
Le web dynamique                            BDDSession                  Serveur Web                  Pages                ...
Le Web dentreprise                               BDD                  Serveur Applicatif                       communicati...
Service Oriented Architecture                   BDD                  BDD                                        BDD       ...
Le retour à la réalité                                 BDD                     couche métierSession               Couche V...
En restant S.O.A                                                             BDD                                          ...
Arriva le Mobile                                     BDD                       couche métier               Couche Vue     ...
Web Oriented Architecture             BDD                 BDD                                      BDD         Services RE...
2012-10-30   TEST_Cliquez et modifiez le pied de page   32
REST ?⦿REpresentational State Transfer⦿Utiliser le Web pour exposer des données⦿LURI permet didentifier les données⦿Les ve...
Pourquoi REST ?⦿Beaucoup plus simple que RPC ou SOAP⦿Mieux structuré⦿Moins gourmand en mémoire⦿Meilleurs elasticité (scala...
Les verbes HTTP, kézako ?⦿GET : récupération dinfos⦿POST & PUT : création / modification⦿DELETE : suppression⦿Attention le...
Plus concrètement⦿Récupérer la liste des utilisateurs :        GET http://soat.fr/users/⦿Récupérer un utilisateur :       ...
Le résultat en JSONGET http://soat.fr/users/1        HTTP RESPONSE 200 OK        {            name : Mathieu PARISOT,     ...
Différents "niveaux"⦿Niveau 0 : SOAP ou RPC         POST http://soat.fr/userService               Entrée : <addFriend user...
Différents "niveaux"⦿Niveau 2 : Utilisation de HTPP         POST http://soat.fr/users/1/friends/2             Entrée : rie...
HATEOAS ?⦿Hypermedia as the Engine of Application State⦿Découvrir les possibilités à partir dun point dentrée unique⦿Pas d...
Un exemple⦿GET http://soat.fr         <company name="so@t">          <users>           <link rel="users" href="http://soat...
Un exemple la suite⦿GET http://soat.fr/users/         <users>          <user name="mathieu parisot">          <link ref="s...
Un exemple la fin⦿GET http://soat.fr/users/1         <user name="mathieu parisot">          <link ref="self" href="http://...
OpenAPI⦿Vous avez des tonnes de services …⦿… alors exposez les au monde entier !⦿Ou seulement à vos partenaires⦿Et pas for...
Architecture2012-10-30     TEST_Cliquez et modifiez le pied de page   45
2012-10-30   TEST_Cliquez et modifiez le pied de page   46
Natif Vs Web⦿Débat sans fin sur internet⦿Natif :         ⦿Rapide         ⦿Accès au matériel         ⦿Look&Feel natif⦿Web :...
Mais ça bouge⦿Web Devices en HTML5 pour accéder au matériel⦿Moteurs Javascript de + en + rapide⦿API CSS et Javascript pour...
Les problématiques Mobile⦿Taille de lécran⦿Disparité du parc⦿Bande passante (ko/s)⦿Latence (temps minimal de chaque requêt...
La disparité⦿Pensez votre site pour le périphérique cible qui posera le plus de problèmes…⦿Puis activer les fonctionnalité...
Le réseau⦿Taille totale recommandée : 20ko !⦿Réduisez le nombre de requêtes au serveur :             Si 1s de latence et 5...
La puissance⦿Limiter au maximum le Javascript !⦿Pas de setInterval⦿Attention aux modifications du DOM⦿Tester sur les périp...
La navigation⦿Aucun scroll horizontal⦿Eviter les scrolls verticaux⦿Boutons et champs beaucoup + gros⦿Typer les champs de f...
Pour vous épauler⦿JQuery Mobile⦿Sancha⦿JQTouch⦿GWT / PrimeFaces / Wicket⦿PhoneGap⦿Et plein d autres…2012-10-30            ...
Le Web mobile2012-10-30      TEST_Cliquez et modifiez le pied de page   55
2012-10-30   TEST_Cliquez et modifiez le pied de page   56
Le site sadapte à lécran2012-10-30             TEST_Cliquez et modifiez le pied de page   57
Mobile First !⦿Pensez le site pour lécran le + petit⦿Ajouter les éléments en fonction de la place Oblige à se concentrer ...
Comment ça marche ?⦿En CSS !⦿Grille Fluide : tailles en % et en em⦿Images Flexibles : max-width et cropping⦿Media Queries ...
Une exemple de CSS@media (min-width: 481px) and (max-width: 768px) {  #banner { width:740px; }  #banner img { max-width:74...
La compatibilité ?                                  <92012-10-30            TEST_Cliquez et modifiez le pied de page   61
Les autres problèmes⦿Le contenu nest pas forcément commun entre desktop et mobile⦿Taille des pages pas adaptée au mobile⦿N...
Quand lutiliser ?⦿Tout le temps !          Même sur le desktop les écrans sont différents ! ⦿ Si votre contenu est commun...
Responsive Web Design2012-10-30          TEST_Cliquez et modifiez le pied de page   64
2012-10-30   TEST_Cliquez et modifiez le pied de page   65
Le retour du Client - ServeurLa théorie : découpage en couches, n-tiersLa réalité : code vue et métier intriquéAvec le WOA...
Les sites Webs             Structure   Style                        Traitement      Ressources2012-10-30                 T...
Le CSS⦿Langage très limité :         ⦿Pas de variables         ⦿Beaucoup de valeurs prédéfinies⦿Mais très compliqué :     ...
Bonnes pratiques⦿Utiliser un Reset CSS voir un framework         ⦿Eric Meyer, HTML5Reset, etc.         ⦿Twitter Bootstrap,...
Le javascript⦿Très puissant⦿Très compliqué⦿Mais facile daccès pour les débutantsCode buggué et impossible à maintenir2012...
Pourquoi tant de haine ?             42 == "42" true             42 === "42" false             var myInt = parseInt("08");...
Améliorer les choses ?⦿Lire des livres !⦿validation par JSLint⦿TDD en JS : Qunit, jsTestDriver, Jasmine, etc.⦿Frameworks e...
Le Framework : JQuery⦿Utilisé par 60% des sites !⦿Fait pour la manipulation du DOM⦿Efficace, facile, bien documenté⦿Des to...
Les Frameworks MVC en JS⦿Gérer des sites Webs complexes⦿Nombreuses solutions :         Angular.js, Backbone.js, Sprout, sa...
Le Javascript coté Server⦿Explosion du Buzz autours de Javascript⦿Plein de frameworks coté client …⦿… mais aussi coté serv...
Dans tous les cas⦿Minifier         YUI compressor⦿Compresser         Mod_deflate sur apache⦿Utiliser des CDN         https...
Le Web coté client2012-10-30        TEST_Cliquez et modifiez le pied de page   77
2012-10-30   TEST_Cliquez et modifiez le pied de page   78
Kézako⦿Donner du sens aux données du Web         Web de données⦿Lier ces données entre elles         Arbres de connaissanc...
Un exemple 1/2             So@t             104, bis rue de Reuilly 75012 Paris             Téléphone : +33(1) 44 75 42 55...
Un exemple 2/2<div class="entreprise"><span class="name">So@t</span><span class="address">104, bis rue de Reuilly 75012Par...
Donner du sens⦿Plusieurs langages pour le faire :         ⦿Microdata en HTML5         ⦿Microformat         ⦿RDFa         ⦿...
Open Data⦿Libérer vos données !⦿Mise à disposition de données à tous⦿Exemple : http://www.data.gouv.fr/⦿Pas nécessairement...
Qui en fait ?2012-10-30             TEST_Cliquez et modifiez le pied de page   84
Vous arrivez pas à lire ?                  http://fr.dbpedia.org/ http://upload.wikimedia.org/wikipedia/comm ons/3/34/LOD_...
Pourquoi ?http://www.google.com/insidesearch/features/search/knowledge.html   2012-10-30                  TEST_Cliquez et ...
Le Web Sémantique2012-10-30        TEST_Cliquez et modifiez le pied de page   87
2012-10-30   TEST_Cliquez et modifiez le pied de page   88
Scalabilité extrème⦿De + en + de gens connectés⦿De + en + de données⦿Comment tenir la charge ?⦿STATELess pour pouvoir dist...
2012-10-30   TEST_Cliquez et modifiez le pied de page   90
Comment marche un serveur?                         Thread découte                T                        T               ...
Pourquoi ca pose problème ?⦿1 client = 1 thread⦿Grosse consommation mémoire⦿Synchronisation⦿Beaucoup de temps dattente pou...
Comment faire mieux ?                                   Thread découte                 Evènement                          ...
Pourquoi cest mieux ?⦿Nombre de threads fixe⦿Moins de mémoire⦿Gestion par Evens⦿Aucun temps dattente pour rien2012-10-30  ...
2012-10-30   TEST_Cliquez et modifiez le pied de page   95
Le Cloud en 1 minute                                                                        Apps                          ...
Le PaaS pour les développeurs⦿Nouvelles manières de déployer des applications⦿Forte élasticité⦿Rapidité de mise en place⦿A...
Nouveaux défis⦿Déploiement Continue⦿Applications élastiques         ⦿Stateless         ⦿Distribuées         ⦿Répartition d...
Nouveaux problèmes⦿Vendor Locking⦿Données distantes⦿Cadre législatif⦿Gestion des défaillances⦿Nouveaux patterns de dévelop...
2012-10-30   TEST_Cliquez et modifiez le pied de page   100
Kézako ?⦿Not Only SQL⦿a.k.a Big Data⦿Les principes de base : (ni exclusif, ni obligatoire)         ⦿Pas de jointure       ...
Adapter le stockage aux données⦿Les données ne sont pas forcément des tableaux         ⦿clefs/valeur         ⦿graphs      ...
Autour du Web2012-10-30      TEST_Cliquez et modifiez le pied de page   103
2012-10-30   TEST_Cliquez et modifiez le pied de page   104
Ce quil faut retenir⦿Ca bouge sur et autour du Web !⦿Le mobile est entrain de tout changer !⦿Les gens sont beaucoup plus e...
Ce quil faut faire⦿Du REST⦿Du HTML5/Javascript/CSS3⦿Du STATELess⦿Du Cloud⦿Du NoSQL⦿Mettre des microdata2012-10-30         ...
Et surtout …               Vous nêtes pas seul à galérer !               Alors regardez ce que font les                   ...
Cest fini !2012-10-30    TEST_Cliquez et modifiez le pied de page   108
2012-10-30   TEST_Cliquez et modifiez le pied de page   109
Prochain SlideShare
Chargement dans…5
×

Le renouveau du web - Mathieu Parisot

2 590 vues

Publié le

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

0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 590
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 202
Actions
Partages
0
Téléchargements
57
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le renouveau du web - Mathieu Parisot

  1. 1. 2012-10-30 TEST_Cliquez et modifiez le pied de page 1
  2. 2. De quoi on va parler ?⦿Ben du Web…⦿Darchitecture 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. 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. 4. Disclaimer2012-10-30 TEST_Cliquez et modifiez le pied de page 4
  5. 5. 2012-10-30 TEST_Cliquez et modifiez le pied de page 5
  6. 6. Les terminaux changent2012-10-30 TEST_Cliquez et modifiez le pied de page 6
  7. 7. Les attentes changent⦿Ajax à gogo⦿Animations et transitions léchées⦿Défilements infinis⦿Disparition des popup modales⦿Réactivité immédiate⦿Sites + sobres2012-10-30 TEST_Cliquez et modifiez le pied de page 7
  8. 8. Donc le développement change⦿Construire avec les technologies dhier Les technologies dépassées⦿Construire avec les technologies daujourdhui Les technologies matures et rassurantes⦿Construire avec les technologies de demain Les technologies que lon invente aujourdhui pour les usages de demain2012-10-30 TEST_Cliquez et modifiez le pied de page 8
  9. 9. Qui ?2012-10-30 TEST_Cliquez et modifiez le pied de page 9
  10. 10. Et vous ?2012-10-30 TEST_Cliquez et modifiez le pied de page 10
  11. 11. La citation kivabien™ “ Le problème avec le futur, cest quil narrête pas de devenir le présent. ” Bill Watterson2012-10-30 TEST_Cliquez et modifiez le pied de page 11
  12. 12. 2012-10-30 TEST_Cliquez et modifiez le pied de page 12
  13. 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ées2012-10-30 TEST_Cliquez et modifiez le pied de page 13
  14. 14. Et attention… Web != InternetWeb : Consultation de documentsInternet : Interconnexion de réseaux Internet = Web + mail + P2P + IRC + …2012-10-30 TEST_Cliquez et modifiez le pied de page 14
  15. 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 quon le connait⦿2001 : IE6 (Quil soit maudit à jamais!)2012-10-30 TEST_Cliquez et modifiez le pied de page 15
  16. 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 liPhone⦿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 HTML52012-10-30 TEST_Cliquez et modifiez le pied de page 16
  17. 17. 2012-10-30 TEST_Cliquez et modifiez le pied de page 17
  18. 18. Lorigine : 1992-1998 Simple et rapide Un peu sommaire2012-10-30 TEST_Cliquez et modifiez le pied de page 18
  19. 19. Le sites dynamiques : 1998-2002 Simple et efficace Pas facile a maintenir2012-10-30 TEST_Cliquez et modifiez le pied de page 19
  20. 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. 21. Les sites Entreprise : 2006-2012 Plus simple Pas prévu pour le multicanal2012-10-30 TEST_Cliquez et modifiez le pied de page 21
  22. 22. Les sites Multicanaux : 2010-20?? Très flexible Plus de technologies2012-10-30 TEST_Cliquez et modifiez le pied de page 22
  23. 23. 2012-10-30 TEST_Cliquez et modifiez le pied de page 23
  24. 24. Lorigine Pages Webs statiques2012-10-30 TEST_Cliquez et modifiez le pied de page 24
  25. 25. Le web dynamique BDDSession Serveur Web Pages Pages statiques dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 25
  26. 26. Le Web dentreprise BDD Serveur Applicatif communicationSession Serveur Web Pages dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 26
  27. 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ées2012-10-30 TEST_Cliquez et modifiez le pied de page 27
  28. 28. Le retour à la réalité BDD couche métierSession Couche Vue Pages dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 28
  29. 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étier2012-10-30 TEST_Cliquez et modifiez le pied de page 29
  30. 30. Arriva le Mobile BDD couche métier Couche Vue Couche Vue Couche Services MobileSession Web Couche Services Mobile Web Pages Web Mobile App Mobile dynamiques 2012-10-30 TEST_Cliquez et modifiez le pied de page 30
  31. 31. Web Oriented Architecture BDD BDD BDD Services REST Services REST Services REST App Mobile Client Web Mobile Client Web2012-10-30 TEST_Cliquez et modifiez le pied de page 31
  32. 32. 2012-10-30 TEST_Cliquez et modifiez le pied de page 32
  33. 33. REST ?⦿REpresentational State Transfer⦿Utiliser le Web pour exposer des données⦿LURI permet didentifier 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. 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 derreurs, etc.2012-10-30 TEST_Cliquez et modifiez le pied de page 34
  35. 35. Les verbes HTTP, kézako ?⦿GET : récupération dinfos⦿POST & PUT : création / modification⦿DELETE : suppression⦿Attention le DELETE nest pas bien supporté par les navigateurs!2012-10-30 TEST_Cliquez et modifiez le pied de page 35
  36. 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/22012-10-30 TEST_Cliquez et modifiez le pied de page 36
  37. 37. Le résultat en JSONGET 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. 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. 39. Différents "niveaux"⦿Niveau 2 : Utilisation de HTPP POST http://soat.fr/users/1/friends/2 Entrée : rien dautre Sortie : HTTP 200 ⦿ Niveau 3 : HATEOAS !2012-10-30 TEST_Cliquez et modifiez le pied de page 39
  40. 40. HATEOAS ?⦿Hypermedia as the Engine of Application State⦿Découvrir les possibilités à partir dun point dentrée unique⦿Pas de contrat autre que le standard REST⦿Toutes les resources sont liées les unes aux autres2012-10-30 TEST_Cliquez et modifiez le pied de page 40
  41. 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. 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. 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. 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. 45. Architecture2012-10-30 TEST_Cliquez et modifiez le pied de page 45
  46. 46. 2012-10-30 TEST_Cliquez et modifiez le pied de page 46
  47. 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éveloppeurs2012-10-30 TEST_Cliquez et modifiez le pied de page 47
  48. 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. 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. 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érique2012-10-30 TEST_Cliquez et modifiez le pied de page 50
  51. 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 minimal2012-10-30 TEST_Cliquez et modifiez le pied de page 51
  52. 52. La puissance⦿Limiter au maximum le Javascript !⦿Pas de setInterval⦿Attention aux modifications du DOM⦿Tester sur les périphériques les + lents2012-10-30 TEST_Cliquez et modifiez le pied de page 52
  53. 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 popup2012-10-30 TEST_Cliquez et modifiez le pied de page 53
  54. 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. 55. Le Web mobile2012-10-30 TEST_Cliquez et modifiez le pied de page 55
  56. 56. 2012-10-30 TEST_Cliquez et modifiez le pied de page 56
  57. 57. Le site sadapte à lécran2012-10-30 TEST_Cliquez et modifiez le pied de page 57
  58. 58. Mobile First !⦿Pensez le site pour lécran le + petit⦿Ajouter les éléments en fonction de la place Oblige à se concentrer sur lessentiel !2012-10-30 TEST_Cliquez et modifiez le pied de page 58
  59. 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 laffichage (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. 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. 61. La compatibilité ? <92012-10-30 TEST_Cliquez et modifiez le pied de page 61
  62. 62. Les autres problèmes⦿Le contenu nest 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. 63. Quand lutiliser ?⦿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 mobile2012-10-30 TEST_Cliquez et modifiez le pied de page 63
  64. 64. Responsive Web Design2012-10-30 TEST_Cliquez et modifiez le pied de page 64
  65. 65. 2012-10-30 TEST_Cliquez et modifiez le pied de page 65
  66. 66. Le retour du Client - ServeurLa théorie : découpage en couches, n-tiersLa 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. 67. Les sites Webs Structure Style Traitement Ressources2012-10-30 TEST_Cliquez et modifiez le pied de page 67
  68. 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 selecteurs2012-10-30 TEST_Cliquez et modifiez le pied de page 68
  69. 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, Compass2012-10-30 TEST_Cliquez et modifiez le pied de page 69
  70. 70. Le javascript⦿Très puissant⦿Très compliqué⦿Mais facile daccès pour les débutantsCode buggué et impossible à maintenir2012-10-30 TEST_Cliquez et modifiez le pied de page 70
  71. 71. Pourquoi tant de haine ? 42 == "42" true 42 === "42" false var myInt = parseInt("08"); myInt === 0 var myInt = parseInt("08", 10); myInt === 82012-10-30 TEST_Cliquez et modifiez le pied de page 71
  72. 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. 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. 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 cest un peu le bordel ! ⦿ Mais très prometteur et incontournable dans le futur2012-10-30 TEST_Cliquez et modifiez le pied de page 74
  75. 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 terme2012-10-30 TEST_Cliquez et modifiez le pied de page 75
  76. 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, YSlow2012-10-30 TEST_Cliquez et modifiez le pied de page 76
  77. 77. Le Web coté client2012-10-30 TEST_Cliquez et modifiez le pied de page 77
  78. 78. 2012-10-30 TEST_Cliquez et modifiez le pied de page 78
  79. 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ées2012-10-30 TEST_Cliquez et modifiez le pied de page 79
  80. 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 392012-10-30 TEST_Cliquez et modifiez le pied de page 80
  81. 81. Un exemple 2/2<div class="entreprise"><span class="name">So@t</span><span class="address">104, bis rue de Reuilly 75012Paris</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 <spanclass="fund">80.000</span> EurosN° Siret : <span class="siret">433 353 760 000 39</span></div>2012-10-30 TEST_Cliquez et modifiez le pied de page 81
  82. 82. Donner du sens⦿Plusieurs langages pour le faire : ⦿Microdata en HTML5 ⦿Microformat ⦿RDFa ⦿OWL⦿Plusieurs langages pour les requêter : ⦿SPARQL ⦿RDQL ⦿DQL2012-10-30 TEST_Cliquez et modifiez le pied de page 82
  83. 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 cest le cas (Linked Open Data)2012-10-30 TEST_Cliquez et modifiez le pied de page 83
  84. 84. Qui en fait ?2012-10-30 TEST_Cliquez et modifiez le pied de page 84
  85. 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.png2012-10-30 TEST_Cliquez et modifiez le pied de page 85
  86. 86. Pourquoi ?http://www.google.com/insidesearch/features/search/knowledge.html 2012-10-30 TEST_Cliquez et modifiez le pied de page 86
  87. 87. Le Web Sémantique2012-10-30 TEST_Cliquez et modifiez le pied de page 87
  88. 88. 2012-10-30 TEST_Cliquez et modifiez le pied de page 88
  89. 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 à larescousse2012-10-30 TEST_Cliquez et modifiez le pied de page 89
  90. 90. 2012-10-30 TEST_Cliquez et modifiez le pied de page 90
  91. 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 t2012-10-30 TEST_Cliquez et modifiez le pied de page 91
  92. 92. Pourquoi ca pose problème ?⦿1 client = 1 thread⦿Grosse consommation mémoire⦿Synchronisation⦿Beaucoup de temps dattente pour rien2012-10-30 TEST_Cliquez et modifiez le pied de page 92
  93. 93. Comment faire mieux ? Thread découte Evènement Evènement Thread décriture Thread de lecture2012-10-30 TEST_Cliquez et modifiez le pied de page 93
  94. 94. Pourquoi cest mieux ?⦿Nombre de threads fixe⦿Moins de mémoire⦿Gestion par Evens⦿Aucun temps dattente pour rien2012-10-30 TEST_Cliquez et modifiez le pied de page 94
  95. 95. 2012-10-30 TEST_Cliquez et modifiez le pied de page 95
  96. 96. Le Cloud en 1 minute Apps Environnement Matériel2012-10-30 TEST_Cliquez et modifiez le pied de page 96
  97. 97. Le PaaS pour les développeurs⦿Nouvelles manières de déployer des applications⦿Forte élasticité⦿Rapidité de mise en place⦿Administration simplifiée2012-10-30 TEST_Cliquez et modifiez le pied de page 97
  98. 98. Nouveaux défis⦿Déploiement Continue⦿Applications élastiques ⦿Stateless ⦿Distribuées ⦿Répartition des tâches ⦿Asynchronisme ⦿résistance aux pannes2012-10-30 TEST_Cliquez et modifiez le pied de page 98
  99. 99. Nouveaux problèmes⦿Vendor Locking⦿Données distantes⦿Cadre législatif⦿Gestion des défaillances⦿Nouveaux patterns de développements2012-10-30 TEST_Cliquez et modifiez le pied de page 99
  100. 100. 2012-10-30 TEST_Cliquez et modifiez le pied de page 100
  101. 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 performances2012-10-30 TEST_Cliquez et modifiez le pied de page 101
  102. 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. 103. Autour du Web2012-10-30 TEST_Cliquez et modifiez le pied de page 103
  104. 104. 2012-10-30 TEST_Cliquez et modifiez le pied de page 104
  105. 105. Ce quil 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. 106. Ce quil faut faire⦿Du REST⦿Du HTML5/Javascript/CSS3⦿Du STATELess⦿Du Cloud⦿Du NoSQL⦿Mettre des microdata2012-10-30 TEST_Cliquez et modifiez le pied de page 106
  107. 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. 108. Cest fini !2012-10-30 TEST_Cliquez et modifiez le pied de page 108
  109. 109. 2012-10-30 TEST_Cliquez et modifiez le pied de page 109

×