$30 off During Our Annual Pro Sale. View Details »

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

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

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.

Pour voir le billet qui decrit la présentation, c'est ici: https://renoirboulanger.com/blog/2013/02/conference-comment-evaluer-la-qualite-dun-site-web-selon-les-techniques-dintegration-web-dactualite/

Renoir Boulanger

February 21, 2013
Tweet

Other Decks in Programming

Transcript

  1. Renoir Boulanger | @renoirb http://bit.ly/Yqa6Wl COMMENT ÉVALUER LA QUALITÉ D’UN

    SITE SELON LES TECHNIQUES D’INTÉGRATION WEB D’ACTUALITÉ
  2. Renoir Boulanger | @renoirb http://bit.ly/Yqa6Wl ... RENDRE LE PROCESSUS AGRÉABLE

    POUR TOUS
  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. Votre interlocuteur risque d’être incisif dans ses exemples, mais son

    objectif demeure celui d’éviter le gaspillage inutile de ressources Avis public!
  5. Sommaire 1. Introduction 2. Spéci"cations de projet 3. Processus de

    réalisation 4. Indicateurs de la qualité
  6. Qui [ Développeur web, contractuel chez Ericsson, Passionné des standards

    web, Reçu formation par AccessibilitéWeb en 2008, A travaillé avec plusieurs agences web, Natif de Québec, Métalleux qui écoute du Chopin ] Renoir Boulanger | @renoirb
  7. Plus de 150 sites (décompte arrêté en 2007) •

  8. Et des applications web Projets: Namminik.com et Beebox, 2008, pour

    TechSolCom Groupe Informatique
  9. Et des applications web Projets: eTelefilm, portail interne Téléfilm via

    TechSolCom, 2008 / Union des artistes, via RED L’Agence/Evocatio, 2009-2012
  10. Sommaire 1. Introduction 2. Spéci"cations de projet 3. Processus de

    réalisation 4. Indicateurs de la qualité
  11. Le nœud.

  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. Une petite histoire Client: Microsite «iPad» advisor.ca, pour Rogers Media

    Publishing via Équisoft, 2011 Stockage provenant de !ls RSS Interface pour lecture hors-ligne > dundee.advisor.ca
  14. Imprévus «Il me semble que ça devrait être inclus»

  15. Modi!er des pages («CMS») Référencement Mise en page Stratégie ...

  16. Le client demande

  17. Application!!1

  18. None
  19. 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 +
  20. Rôle/Acteur “use-case” «Use case» [Cas de Figure]

  21. «Mindmap»

  22. Dépendances fonctionnelles et non-fonctionnelles

  23. • Par type de tâche • Conserver questions potentielles •

    Prévoir trois scénarios • Séparer en phases Évaluation
  24. f [5(w + h)] pour chaque demande f pour «fonctionnalité»

    w pour «why» (pourquoi) h pour «how» (comment)
  25. document de requis logiciels* * FRD

  26. Sommaire 1. Introduction 2. Spéci"cations de projet 3. Processus de

    réalisation 4. Indicateurs de la qualité
  27. duplication des e!orts

  28. Une petite histoire... Projet: Entretien site Ville de Sherbrooke, via

    Tatou Communication Visuelle, 2003-2005
  29. Le «far west» Transfert par disquette 3 1/4 dans les

    bureaux de l’hôtel de ville.
  30. 2013 Suivre TOUS les détails sur tous les documents PSD?

    * * srsly!?
  31. Solution: Utiliser le HTML!

  32. Crédit: @adacio slides “Patterns in the process”, http://adactio.com/extras/slides/ Exemple de

    projet développé en même temps que le design
  33. Crédit: @adacio slides “Patterns in the process”, http://adactio.com/extras/slides/ Maintenant en

    couleurs!
  34. Comment?

  35. Processus de réalisation en parallèle • Structure et conventions •

    «Wireframe» [squelette] • Bibliothèque de balisage • Thème visuel
  36. Structure et conventions Source: http://onlyhdwallpapers.com/nature/lego-minimalistic-blocks-rainbows-reflections-black-background-color-rainbow-desktop-hd-wallpaper-400038/

  37. Redé!nir un «.pager»* di"érent pour chaque projet?! * Remplacez par

    n’importe quel élément qui peut être réutilisable Structure et conventions
  38. 261 déclarations du bleu «facebook» http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

  39. Crédit: Yandex, Image provenant de la documentation décrivant la méthodologie

    qu’ils ont créé BEM [ Block Element Modifier ] Structure et conventions usage: communiquer dans tous les corps métiers
  40. Structure et conventions Méthodologie pour structurer les balises introduite par

    @snookca
  41. Exemple «.media» element, version Twitter Bootstrap, originalement proposé par @stubbornella

    Structure et conventions OOCSS, une autre méthodologie pour structurer le balisage.
  42. Structure et conventions Bref: Penser en blocs!

  43. Exemple «.nav» element, et variantes, provenant de Twitter Bootstrap Structure

    et conventions
  44. Exemple «.nav» element, et variantes, provenant de Twitter Bootstrap Structure

    et conventions
  45. 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> <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> «data-api»
  46. Structure et conventions

  47. «Wireframe» Projet: Actumus, via Evocatio/RED L’Agence, 2012

  48. Wireframe

  49. Wireframe

  50. Wireframe

  51. Wireframe

  52. * «Styleguide» Bibliothèque de balisage *

  53. Projet: Union des artistes, via RED L’Agence/Evocatio, 2009-2012 («Styleguide») Bibliothèque

    de balisage
  54. Bibliothèque de balisage Exemple de librarie utilisant KSS

  55. Thème visuel + compilateurs CSS

  56. 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>
  57. $mainColor: #0982c1; .nav { .nav-header { color: $mainColor; } }

    @mixin error($borderWidth: 2px) { border: $borderWidth solid $mainColor; color: darken($mainColor, 90%); } #main .messages { .error { @include error; }} @mainColor: #0982c1; .nav { .nav-header { color: @mainColor; } } . error(@borderWidth: 2px) { border: @borderWidth solid @mainColor; color: darken(@mainColor, 90%); } #main .messages { .error; } voir Article SASS vs LESS sur CSS-Tricks donne une comparaison plus en profondeur .nav .nav-header { color: #0982c1; } #main .messages .error { border: 2px solid #0982c1; color: #999999; }
  58. couche «thème» /*fichier: assets/projet.less*/ @include “variables.less” // Fichiers originaux bootstrap

    en less @import "bootstrap/less/mixins.less"; @import "bootstrap/less/reset.less"; // ... @include “projet/modules.less” @include “projet/blocs.less” // etc... /*fichier: assets/variables.less*/ @import "bootstrap/less/variables.less"; @themeAlphaColor: #cc5200; // ... autres couleurs spécifiques projet @bodyBackground: #000; @textColor: #FFF; @linkColor: @themeAlphaColor; @linkColorHover: lighten(@linkColor, 15%); <!-- 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>
  59. 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; }
  60. Outils • Espace de travail harmonisé (vagrant) • Gestion des

    con!gurations (Puppet) • Déploiement et gestion des paquets (Yeoman)
  61. $ yeoman server

  62. Sommaire 1. Introduction 2. Spéci"cations de projet 3. Processus de

    réalisation 4. Indicateurs de la qualité
  63. des indices qui ne mentent pas

  64. Compression, combinaison et mini!cation? Beaucoup de !chiers appelés

  65. Celui-ci l’est! Aucun code compressé

  66. Répétition de code

  67. Répétition de code

  68. Schéma d’URL bâclé Di"cile à entretenir

  69. Données tabulaires en image

  70. Impression avec vue regénérée 2. Popup vue regénérée spéci!que 1.

    Clic «imprimer»
  71. 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!
  72. 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
  73. Le web à beaucoup changé

  74. htmlcsstherightway.org htmlcssdelabonnemaniere.org Rédaction en cours, ouvert aux “pull requests” :

    )
  75. var contributors = [ ‘w3c’, ‘microsoft’, ‘apple’, ‘nokia’, ‘intel’ ‘mozilla-foundation’,

    ’hp’, ‘adobe’, ‘google’ ‘facebook’, ‘opera-software-foundation’, ];
  76. 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 Merci! Des questions?
  77. Méthodologies Ressources • BEM ★ SMACSS • OOCSS • Terri!cally

    • Styletyl.es ★ Twitter Bootstrap • InuitCSS • Zurb Foundation «Framework» CSS Outils de travail ★ Yeoman ★ StyleDocco • Roughdraft.js • Dabblet + GitHub • Compass Compilateurs • LESS CSS • SASS • HAML
  78. Sources sûres Bibliographie Méthodologies • About HTML semantics • CSS

    architecture and continuous deployment • Introduction BEM • LESS/SASS best practices • Our best practices are killing us • CSS for grown-ups Styleguide • Future friendly styleguides • Oli.jp: Styleguides • GitHub • Google Futur • Modular frontend components • The CSS of tomorrow • Move the web forward Ne pas manquer! • CSS Selectors (W3C) • CSS Inheritance • WebPlatforms.org • Mozilla developer network • w3fools: intervention contre w3Schools