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/

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
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