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.

1. COMMENT ÉVALUER
LA QUALITÉ D’UN SITE SELON
LES TECHNIQUES D’INTÉGRATION WEB
D’ACTUALITÉ
Renoir Boulanger | @renoirb
http://bit.ly/Yqa6Wl

2. ... RENDRE LE PROCESSUS
AGRÉABLE POUR TOUS
Renoir Boulanger | @renoirb
http://bit.ly/Yqa6Wl

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
Stockage provenant de !ls RSS
Interface pour lecture hors-ligne
> dundee.advisor.ca
Client: Microsite «iPad» advisor.ca, pour Rogers Media Publishing via Équisoft, 2011

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

21. «Mindmap»

22. Dépendances fonctionnelles et
non-fonctionnelles

23. Évaluation
• Par type de tâche
• Conserver questions potentielles
• Prévoir trois scénarios
• Séparer en phases

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. Exemple de projet
développé en même
temps que le design
Crédit: @adacio slides “Patterns in the process”, http://adactio.com/extras/slides/

33. Maintenant en
couleurs!
Crédit: @adacio slides “Patterns in the process”, http://adactio.com/extras/slides/

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. Structure et conventions
Redé!nir un «.pager»* di"érent
pour chaque projet?!
* Remplacez par n’importe quel élément qui peut être réutilisable

38. 261 déclarations du bleu
«facebook»
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

39. 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éé

40. Structure et conventions
Méthodologie pour
structurer les balises
introduite par
@snookca

41. Structure et conventions
OOCSS, une autre
méthodologie pour
structurer le
balisage.
Exemple «.media» element, version Twitter Bootstrap, originalement proposé par @stubbornella

42. Structure et conventions
Bref:
Penser en blocs!

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

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

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

46. Structure et conventions

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

48. Wireframe

49. Wireframe

50. Wireframe

51. Wireframe

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

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

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

58. 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%);

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. Beaucoup de !chiers appelés
Compression,
combinaison et
mini!cation?

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

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
1. Clic «imprimer»
2. Popup vue regénérée spéci!que

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

77. Ressources
Mé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

78. Bibliographie
Mé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