COMMENT ÉVALUERLA QUALITÉ D’UN SITE SELONLES TECHNIQUES D’INTÉGRATION WEBD’ACTUALITÉ                      Renoir Boulanger...
... RENDRE LE PROCESSUS  AGRÉABLE POUR TOUS                 Renoir Boulanger   | @renoirb                                h...
Utopie?•   Documents pour communiquer e!cacement•   Réutilisation du code•   Balisage constant•   Séparer les responsabili...
Votre interlocuteur risque d’être incisif dans ses exemples,   mais son objectif demeure celui d’éviter le gaspillage     ...
Sommaire1.   Introduction2.   Spéci"cations de projet3.   Processus de réalisation4.   Indicateurs de la qualité
Qui[ Développeur web, contractuel              chez Ericsson,Passionné des standards web,                Reçu formationpar...
Plus de 150 sites(décompte arrêté en 2007)  •
Et des applications webProjets: Namminik.com et Beebox, 2008, pour TechSolCom Groupe Informatique
Et des applications webProjets: eTelefilm, portail interne Téléfilm via TechSolCom, 2008 / Union des artistes, via RED L’Age...
Sommaire1.   Introduction2.   Spéci"cations de projet3.   Processus de réalisation4.   Indicateurs de la qualité
Le nœud.
• Spéci!cation absente• Spéci!cation comme un «roman»• Détails dans une pile de !chiers PSD                           ... ...
Une petite histoire Stockage provenant de !ls RSSInterface pour lecture hors-ligne                         > dundee.adviso...
Imprévus«Il me semble que ça devrait        être inclus»
Modi!er des pages («CMS»)     Référencement      Mise en page        Stratégie            ...
Le client demande
Application!!1
Guider le client pour obtenir•   «Qui peut faire quoi»•   Le résultat désiré•   Ce qui apporte de la valeur   +           ...
«Use case» [Cas de Figure]               “use-case”      Rôle/Acteur
«Mindmap»
Dépendances fonctionnelles et     non-fonctionnelles
Évaluation•   Par type de tâche•   Conserver questions potentielles•   Prévoir trois scénarios•   Séparer en phases
f [5 (w + h)]                          pour chaque demandef pour «fonctionnalité»w pour «why» (pourquoi)h pour «how» (comm...
document de requis logiciels*                          * FRD
Sommaire1.   Introduction2.   Spéci"cations de projet3.   Processus de réalisation4.   Indicateurs de la qualité
duplication des e!orts
Une petite histoire...Projet: Entretien site Ville de Sherbrooke, via Tatou Communication Visuelle, 2003-2005
Le «far west»Transfert par disquette 3 1/4 dans  les bureaux de l’hôtel de ville.
2013Suivre TOUS les détails sur tous les        documents PSD? *                                * srsly!?
Solution: Utiliser le HTML!
Exemple de projet                                                                                      développé en même  ...
Maintenant en                                                                                       couleurs!Crédit: @adac...
Comment?
Processus de réalisation en parallèle•   Structure et conventions•   «Wireframe» [squelette]•   Bibliothèque de balisage• ...
Structure et conventionsSource: http://onlyhdwallpapers.com/nature/lego-minimalistic-blocks-rainbows-reflections-black-back...
Structure et conventions   Redé!nir un «.pager»* di"érent   pour chaque projet?!* Remplacez par n’importe quel élément qui...
261 déclarations du bleu                      «facebook»http://www.stubbornella.org/content/2011/04/28/our-best-practices-...
Structure et conventions     BEM                                                                                         u...
Structure et conventions       Méthodologie pour      structurer les balises          introduite par            @snookca
Structure et conventions                                                                                               OOC...
Structure et conventions                                Bref:                           Penser en blocs!
Structure et conventionsExemple «.nav» element, et variantes, provenant de Twitter Bootstrap
Structure et conventionsExemple «.nav» element, et variantes, provenant de Twitter Bootstrap
Structure et conventions<!-- fichier html --><div class=”tabbable variant-alpha”>    <div class=”tab-content”>        <div...
Structure et conventions
«Wireframe»Projet: Actumus, via Evocatio/RED L’Agence, 2012
Wireframe
Wireframe
Wireframe
Wireframe
Bibliothèque de balisage *                    * «Styleguide»
Bibliothèque de balisageProjet: Union des artistes, via RED L’Agence/Evocatio, 2009-2012 («Styleguide»)
Bibliothèque de balisageExemple de librarie utilisant KSS
Thème visuel+ compilateurs CSS
couche «thème»<!-- fichier html --><div class=”tabbable variant-alpha”>    <div class=”tab-content”>        <div class=”ta...
$mainColor: #0982c1;                                             @mainColor: #0982c1;.nav {                               ...
couche «thème»<!-- fichier html --><link rel="stylesheet/less" type="text/css" href="assets/projet.less" /><script>less={e...
couche «thème»/** * Attention! **//* Noms de couleur */.red-text { color: blue; }/* Sur-spécifité, et aux éléments anonyme...
Outils•   Espace de travail harmonisé (vagrant)•   Gestion des con!gurations (Puppet)•   Déploiement et gestion des paquet...
$ yeoman server
Sommaire1.   Introduction2.   Spéci"cations de projet3.   Processus de réalisation4.   Indicateurs de la qualité
des indices qui ne mentent pas
Beaucoup de !chiers appelés                           Compression,                          combinaison et                ...
Aucun code compressé                       Celui-ci l’est!
Répétition de code
Répétition de code
Schéma d’URL bâclé                     Di"cile à entretenir
Données tabulaires en image
Impression avec vue regénérée                                          1. Clic «imprimer»                     2. Popup vue...
Tag-Soup<li onmouseover=”$(‘#sub_website’).show()” onmouseout=”$(‘#sub_website’).hide()”><ol class=”dates” style=”margin-l...
Autres articles de revue de code•   A list of quality indicators we could !nd on a requirement    document•   Ma revue du ...
Le web à beaucoup changé
htmlcsstherightway.org         htmlcssdelabonnemaniere.orgRédaction en cours, ouvert aux “pull requests” : )
var contributors = [  ‘w3c’, ‘microsoft’,    ‘apple’,   ‘nokia’,   ‘intel’     ‘mozilla-foundation’, ’hp’, ‘adobe’, ‘googl...
Merci! Des questions?renoirb.canonical = {     seeAlso: [ github, twitter, forrst, stackOverflowCareers, speakerdeck ],   ...
RessourcesMéthodologies   «Framework» CSS       Outils de travail• BEM           ★ Twitter Bootstrap   ★ Yeoman★ SMACSS   ...
BibliographieMéthodologies                Styleguide                        Futur•   About HTML semantics     •   Future f...
Comment évaluer la qualité d'un site web selon les techniques d'intégration web d'actualité
Prochain SlideShare
Chargement dans…5
×

Comment évaluer la qualité d'un site web selon les techniques d'intégration web d'actualité

546 vues

Publié le

La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps. Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?

Nous allons couvrir des techniques clé qui permettent d'optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le niveau d'expérience.

L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
546
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Comment évaluer la qualité d'un site web selon les techniques d'intégration web d'actualité

  1. 1. COMMENT ÉVALUERLA QUALITÉ D’UN SITE SELONLES TECHNIQUES D’INTÉGRATION WEBD’ACTUALITÉ Renoir Boulanger | @renoirb http://bit.ly/Yqa6Wl
  2. 2. ... RENDRE LE PROCESSUS AGRÉABLE POUR TOUS Renoir Boulanger | @renoirb http://bit.ly/Yqa6Wl
  3. 3. Utopie?• Documents pour communiquer e!cacement• Réutilisation du code• Balisage constant• Séparer les responsabilités de façon optimale• Rincer, recommencer
  4. 4. Votre interlocuteur risque d’être incisif dans ses exemples, mais son objectif demeure celui d’éviter le gaspillage inutile de ressources Avis public!
  5. 5. Sommaire1. Introduction2. Spéci"cations de projet3. Processus de réalisation4. Indicateurs de la qualité
  6. 6. Qui[ Développeur web, contractuel chez Ericsson,Passionné des standards web, Reçu formationpar AccessibilitéWeb en 2008, A travaillé avecplusieurs agences web, Natif de Québec,Métalleux qui écoute du Chopin ] Renoir Boulanger | @renoirb
  7. 7. Plus de 150 sites(décompte arrêté en 2007) •
  8. 8. Et des applications webProjets: Namminik.com et Beebox, 2008, pour TechSolCom Groupe Informatique
  9. 9. Et des applications webProjets: eTelefilm, portail interne Téléfilm via TechSolCom, 2008 / Union des artistes, via RED L’Agence/Evocatio, 2009-2012
  10. 10. Sommaire1. Introduction2. Spéci"cations de projet3. Processus de réalisation4. Indicateurs de la qualité
  11. 11. Le nœud.
  12. 12. • Spéci!cation absente• Spéci!cation comme un «roman»• Détails dans une pile de !chiers PSD ... Processus de décision (mal informé?)
  13. 13. Une petite histoire Stockage provenant de !ls RSSInterface pour lecture hors-ligne > dundee.advisor.ca Client: Microsite «iPad» advisor.ca, pour Rogers Media Publishing via Équisoft, 2011
  14. 14. Imprévus«Il me semble que ça devrait être inclus»
  15. 15. Modi!er des pages («CMS») Référencement Mise en page Stratégie ...
  16. 16. Le client demande
  17. 17. Application!!1
  18. 18. Guider le client pour obtenir• «Qui peut faire quoi»• Le résultat désiré• Ce qui apporte de la valeur + http://www.alliancenumerique.com/guideweb.html
  19. 19. «Use case» [Cas de Figure] “use-case” Rôle/Acteur
  20. 20. «Mindmap»
  21. 21. Dépendances fonctionnelles et non-fonctionnelles
  22. 22. Évaluation• Par type de tâche• Conserver questions potentielles• Prévoir trois scénarios• Séparer en phases
  23. 23. f [5 (w + h)] pour chaque demandef pour «fonctionnalité»w pour «why» (pourquoi)h pour «how» (comment)
  24. 24. document de requis logiciels* * FRD
  25. 25. Sommaire1. Introduction2. Spéci"cations de projet3. Processus de réalisation4. Indicateurs de la qualité
  26. 26. duplication des e!orts
  27. 27. Une petite histoire...Projet: Entretien site Ville de Sherbrooke, via Tatou Communication Visuelle, 2003-2005
  28. 28. Le «far west»Transfert par disquette 3 1/4 dans les bureaux de l’hôtel de ville.
  29. 29. 2013Suivre TOUS les détails sur tous les documents PSD? * * srsly!?
  30. 30. Solution: Utiliser le HTML!
  31. 31. Exemple de projet développé en même temps que le designCrédit: @adacio slides “Patterns in the process”, http://adactio.com/extras/slides/
  32. 32. Maintenant en couleurs!Crédit: @adacio slides “Patterns in the process”, http://adactio.com/extras/slides/
  33. 33. Comment?
  34. 34. Processus de réalisation en parallèle• Structure et conventions• «Wireframe» [squelette]• Bibliothèque de balisage• Thème visuel
  35. 35. Structure et conventionsSource: http://onlyhdwallpapers.com/nature/lego-minimalistic-blocks-rainbows-reflections-black-background-color-rainbow-desktop-hd-wallpaper-400038/
  36. 36. Structure et conventions Redé!nir un «.pager»* di"érent pour chaque projet?!* Remplacez par n’importe quel élément qui peut être réutilisable
  37. 37. 261 déclarations du bleu «facebook»http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
  38. 38. Structure et conventions BEM usage: communiquer dans tous les corps métiers[ Block Element Modifier ] Crédit: Yandex, Image provenant de la documentation décrivant la méthodologie qu’ils ont créé
  39. 39. Structure et conventions Méthodologie pour structurer les balises introduite par @snookca
  40. 40. Structure et conventions OOCSS, une autre méthodologie pour structurer le balisage.Exemple «.media» element, version Twitter Bootstrap, originalement proposé par @stubbornella
  41. 41. Structure et conventions Bref: Penser en blocs!
  42. 42. Structure et conventionsExemple «.nav» element, et variantes, provenant de Twitter Bootstrap
  43. 43. Structure et conventionsExemple «.nav» element, et variantes, provenant de Twitter Bootstrap
  44. 44. Structure et conventions<!-- fichier html --><div class=”tabbable variant-alpha”> <div class=”tab-content”> <div class=”tab-pane” id=”tab-1”>Contenu tab 1</div> <!-- .... --> </div> «data-api» <ul class=”nav nav-tabs”> <li class=”active”><a href=”#tab-1” data-toggle=”tab”>Tab 1</a></li> <li><a href=”#tab-2” data-toggle=”tab”>Tab 2</a></li> </ul></div>
  45. 45. Structure et conventions
  46. 46. «Wireframe»Projet: Actumus, via Evocatio/RED L’Agence, 2012
  47. 47. Wireframe
  48. 48. Wireframe
  49. 49. Wireframe
  50. 50. Wireframe
  51. 51. Bibliothèque de balisage * * «Styleguide»
  52. 52. Bibliothèque de balisageProjet: Union des artistes, via RED L’Agence/Evocatio, 2009-2012 («Styleguide»)
  53. 53. Bibliothèque de balisageExemple de librarie utilisant KSS
  54. 54. Thème visuel+ compilateurs CSS
  55. 55. couche «thème»<!-- fichier html --><div class=”tabbable variant-alpha”> <div class=”tab-content”> <div class=”tab-pane” id=”tab-1”>Contenu tab 1</div> <!-- .... --> </div> <ul class=”nav nav-tabs”> <li class=”active”><a href=”#tab-1” data-toggle=”tab”>Tab 1</a></li> <li><a href=”#tab-2” data-toggle=”tab”>Tab 2</a></li> </ul></div>
  56. 56. $mainColor: #0982c1; @mainColor: #0982c1;.nav { .nav { .nav-header { .nav-header { color: $mainColor; color: @mainColor; } }} }@mixin error($borderWidth: 2px) { . error(@borderWidth: 2px) {  border: $borderWidth solid $mainColor;   border: @borderWidth solid @mainColor;  color: darken($mainColor, 90%);   color: darken(@mainColor, 90%);} }#main .messages { .error { @include error; }} #main .messages { .error; }.nav .nav-header { color: #0982c1; }#main .messages .error { border: 2px solid #0982c1; color: #999999; } voir Article SASS vs LESS sur CSS-Tricks donne une comparaison plus en profondeur
  57. 57. couche «thème»<!-- fichier html --><link rel="stylesheet/less" type="text/css" href="assets/projet.less" /><script>less={env: ‘development’};</script><script src="less.js" type="text/javascript"></script>/*fichier: assets/projet.less*/ /*fichier: assets/variables.less*/@include “variables.less” @import "bootstrap/less/variables.less";// Fichiers originaux bootstrap en less @themeAlphaColor: #cc5200;@import "bootstrap/less/mixins.less"; // ... autres couleurs spécifiques projet@import "bootstrap/less/reset.less";// ... @bodyBackground: #000; @textColor: #FFF;@include “projet/modules.less” @linkColor: @themeAlphaColor;@include “projet/blocs.less” // etc... @linkColorHover: lighten(@linkColor, 15%);
  58. 58. couche «thème»/** * Attention! **//* Noms de couleur */.red-text { color: blue; }/* Sur-spécifité, et aux éléments anonymes */div#myWarning div div { color: purple; }
  59. 59. Outils• Espace de travail harmonisé (vagrant)• Gestion des con!gurations (Puppet)• Déploiement et gestion des paquets (Yeoman)
  60. 60. $ yeoman server
  61. 61. Sommaire1. Introduction2. Spéci"cations de projet3. Processus de réalisation4. Indicateurs de la qualité
  62. 62. des indices qui ne mentent pas
  63. 63. Beaucoup de !chiers appelés Compression, combinaison et mini!cation?
  64. 64. Aucun code compressé Celui-ci l’est!
  65. 65. Répétition de code
  66. 66. Répétition de code
  67. 67. Schéma d’URL bâclé Di"cile à entretenir
  68. 68. Données tabulaires en image
  69. 69. Impression avec vue regénérée 1. Clic «imprimer» 2. Popup vue regénérée spéci!que
  70. 70. Tag-Soup<li onmouseover=”$(‘#sub_website’).show()” onmouseout=”$(‘#sub_website’).hide()”><ol class=”dates” style=”margin-left:20px;list-style-type:disc”><div id=”But_Save” class=”button_medium” onclick=”parent.doCheckAll();” datafld=”save_settings”>Save settings</div> Histoire vraie!
  71. 71. Autres articles de revue de code• A list of quality indicators we could !nd on a requirement document• Ma revue du site a25.com• Some steps you can look for if you feel your web application is slow• A quick overview on the advantages to architect your HTML in a Object Oriented approach• [Snippet] Con!rm before submitting in a modal window using Twitter Bootstrap
  72. 72. Le web à beaucoup changé
  73. 73. htmlcsstherightway.org htmlcssdelabonnemaniere.orgRédaction en cours, ouvert aux “pull requests” : )
  74. 74. var contributors = [ ‘w3c’, ‘microsoft’, ‘apple’, ‘nokia’, ‘intel’ ‘mozilla-foundation’, ’hp’, ‘adobe’, ‘google’ ‘facebook’, ‘opera-software-foundation’,];
  75. 75. Merci! Des questions?renoirb.canonical = { seeAlso: [ github, twitter, forrst, stackOverflowCareers, speakerdeck ], delicious: “http://del.icio.us/inexisdotnet/”, slides: “http://bit.ly/Yqa6Wl”, pdf: “http://renoirboulanger.com/files/201302-slides.pdf” href: “http://renoirboulanger.com/”,};// Resources disponibles dans les prochaines pages Renoir Boulanger | @renoirb
  76. 76. RessourcesMéthodologies «Framework» CSS Outils de travail• BEM ★ Twitter Bootstrap ★ Yeoman★ SMACSS • InuitCSS ★ StyleDocco• OOCSS • Zurb Foundation • Roughdraft.js• Terri!cally • Dabblet + GitHub Compilateurs • Compass• Styletyl.es • LESS CSS • SASS • HAML
  77. 77. BibliographieMéthodologies Styleguide Futur• About HTML semantics • Future friendly styleguides • Modular frontend components• CSS architecture and • Oli.jp: Styleguides continuous deployment • The CSS of tomorrow • GitHub• Introduction BEM • Move the web forward • Google• LESS/SASS best practices Sources sûres• Our best practices are killing us Ne pas manquer! • WebPlatforms.org • Mozilla developer network• CSS for grown-ups • CSS Selectors (W3C) • CSS Inheritance • w3fools: intervention contre w3Schools

×