Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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É

    View full-size slide

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

    View full-size slide

  3. Utopie?
    • Documents pour communiquer e!cacement
    • Réutilisation du code
    • Balisage constant
    • Séparer les responsabilités de façon optimale
    • Rincer, recommencer

    View full-size slide

  4. Votre interlocuteur risque d’être incisif dans ses exemples,
    mais son objectif demeure celui d’éviter le gaspillage
    inutile de ressources
    Avis public!

    View full-size slide

  5. Sommaire
    1. Introduction
    2. Spéci"cations de projet
    3. Processus de réalisation
    4. Indicateurs de la qualité

    View full-size slide

  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

    View full-size slide

  7. Plus de 150 sites
    (décompte arrêté en 2007)

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  10. Sommaire
    1. Introduction
    2. Spéci"cations de projet
    3. Processus de réalisation
    4. Indicateurs de la qualité

    View full-size slide

  11. • Spéci!cation absente
    • Spéci!cation comme un «roman»
    • Détails dans une pile de !chiers PSD
    ... Processus de décision (mal informé?)

    View full-size slide

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

    View full-size slide

  13. Imprévus
    «Il me semble que ça devrait
    être inclus»

    View full-size slide

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

    View full-size slide

  15. Le client demande

    View full-size slide

  16. Application!!1

    View full-size slide

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

    View full-size slide

  18. Rôle/Acteur
    “use-case”
    «Use case» [Cas de Figure]

    View full-size slide

  19. Dépendances fonctionnelles et
    non-fonctionnelles

    View full-size slide

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

    View full-size slide

  21. f [5(w + h)]
    pour chaque demande
    f pour «fonctionnalité»
    w pour «why» (pourquoi)
    h pour «how» (comment)

    View full-size slide

  22. document de requis logiciels*
    * FRD

    View full-size slide

  23. Sommaire
    1. Introduction
    2. Spéci"cations de projet
    3. Processus de réalisation
    4. Indicateurs de la qualité

    View full-size slide

  24. duplication des e!orts

    View full-size slide

  25. Une petite histoire...
    Projet: Entretien site Ville de Sherbrooke, via Tatou Communication Visuelle, 2003-2005

    View full-size slide

  26. Le «far west»
    Transfert par disquette 3 1/4 dans
    les bureaux de l’hôtel de ville.

    View full-size slide

  27. 2013
    Suivre TOUS les détails sur tous les
    documents PSD? *
    * srsly!?

    View full-size slide

  28. Solution: Utiliser le HTML!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Processus de réalisation en parallèle
    • Structure et conventions
    • «Wireframe» [squelette]
    • Bibliothèque de balisage
    • Thème visuel

    View full-size slide

  32. Structure et conventions
    Source: http://onlyhdwallpapers.com/nature/lego-minimalistic-blocks-rainbows-reflections-black-background-color-rainbow-desktop-hd-wallpaper-400038/

    View full-size slide

  33. Redé!nir un «.pager»* di"érent
    pour chaque projet?!
    * Remplacez par n’importe quel élément qui peut être réutilisable
    Structure et conventions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Structure et conventions
    Bref:
    Penser en blocs!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Structure et conventions



    Contenu tab 1



    Tab 1
    Tab 2


    «data-api»

    View full-size slide

  42. Structure et conventions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Thème visuel
    + compilateurs CSS

    View full-size slide

  48. couche «thème»



    Contenu tab 1



    Tab 1
    Tab 2


    View full-size slide

  49. $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; }

    View full-size slide

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


    less={env: ‘development’};

    View full-size slide

  51. 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; }

    View full-size slide

  52. Outils
    • Espace de travail harmonisé (vagrant)
    • Gestion des con!gurations (Puppet)
    • Déploiement et gestion des paquets (Yeoman)

    View full-size slide

  53. $ yeoman server

    View full-size slide

  54. Sommaire
    1. Introduction
    2. Spéci"cations de projet
    3. Processus de réalisation
    4. Indicateurs de la qualité

    View full-size slide

  55. des indices qui ne mentent pas

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. Répétition de code

    View full-size slide

  59. Répétition de code

    View full-size slide

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

    View full-size slide

  61. Données tabulaires en image

    View full-size slide

  62. Impression avec vue regénérée
    2. Popup vue regénérée spéci!que
    1. Clic «imprimer»

    View full-size slide

  63. Tag-Soup


    class=”button_medium” onclick=”parent.doCheckAll();”
    datafld=”save_settings”>Save settings
    Histoire vraie!

    View full-size slide

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

    View full-size slide

  65. Le web à beaucoup changé

    View full-size slide

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

    View full-size slide

  67. var contributors = [
    ‘w3c’, ‘microsoft’, ‘apple’, ‘nokia’, ‘intel’
    ‘mozilla-foundation’, ’hp’, ‘adobe’, ‘google’
    ‘facebook’, ‘opera-software-foundation’,
    ];

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide