SlideShare une entreprise Scribd logo
COMMENT ÉVALUER
LA QUALITÉ D’UN SITE SELON
LES TECHNIQUES D’INTÉGRATION WEB
D’ACTUALITÉ




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


                 Renoir Boulanger   | @renoirb
                                http://bit.ly/Yqa6Wl
Utopie?
•   Documents pour communiquer e!cacement
•   Réutilisation du code
•   Balisage constant
•   Séparer les responsabilités de façon optimale
•   Rincer, recommencer
Votre interlocuteur risque d’être incisif dans ses exemples,
   mais son objectif demeure celui d’éviter le gaspillage
                    inutile de ressources



             Avis public!
Sommaire
1.   Introduction
2.   Spéci"cations de projet
3.   Processus de réalisation
4.   Indicateurs de la qualité
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
Plus de 150 sites
(décompte arrêté en 2007)




  •
Et des applications web




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




Projets: eTelefilm, portail interne Téléfilm via TechSolCom, 2008 / Union des artistes, via RED L’Agence/Evocatio, 2009-2012
Sommaire
1.   Introduction
2.   Spéci"cations de projet
3.   Processus de réalisation
4.   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

                           ... Processus de décision (mal informé?)
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
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
Comment évaluer la qualité d'un site web selon les techniques d'intégration web d'actualité
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
«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 demande




f pour «fonctionnalité»
w pour «why» (pourquoi)
h pour «how» (comment)
document de requis logiciels*
                          * FRD
Sommaire
1.   Introduction
2.   Spéci"cations de projet
3.   Processus de réalisation
4.   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.
2013
Suivre TOUS les détails sur tous les
        documents PSD? *

                                * srsly!?
Solution: Utiliser le HTML!
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/
Maintenant en
                                                                                       couleurs!




Crédit: @adacio slides “Patterns in the process”, http://adactio.com/extras/slides/
Comment?
Processus de réalisation en parallèle
•   Structure et conventions

•   «Wireframe» [squelette]

•   Bibliothèque de balisage

•   Thème visuel
Structure et conventions




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

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




* Remplacez par n’importe quel élément qui peut être réutilisable
261 déclarations du bleu
                      «facebook»


http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
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éé
Structure et conventions




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

                                                                                               OOCSS, une autre
                                                                                               méthodologie pour
                                                                                                 structurer le
                                                                                                   balisage.




Exemple «.media» element, version Twitter Bootstrap, originalement proposé par @stubbornella
Structure et conventions

                                Bref:
                           Penser en blocs!
Structure et conventions




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




Exemple «.nav» element, et variantes, provenant de Twitter Bootstrap
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>
Structure et conventions
«Wireframe»




Projet: Actumus, via Evocatio/RED L’Agence, 2012
Wireframe
Wireframe
Wireframe
Wireframe
Bibliothèque de balisage *
                    * «Styleguide»
Bibliothèque de balisage




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




Exemple 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=”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>
$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
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%);
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; }
Outils
•   Espace de travail harmonisé (vagrant)

•   Gestion des con!gurations (Puppet)

•   Déploiement et gestion des paquets (Yeoman)
$ yeoman server
Sommaire
1.   Introduction
2.   Spéci"cations de projet
3.   Processus de réalisation
4.   Indicateurs de la qualité
des indices qui ne mentent pas
Beaucoup de !chiers appelés
                           Compression,
                          combinaison et
                           mini!cation?
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 regénérée spéci!que
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!
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
Le web à beaucoup changé
htmlcsstherightway.org
         htmlcssdelabonnemaniere.org


Rédaction en cours, ouvert aux “pull requests” : )
var contributors = [
  ‘w3c’, ‘microsoft’,    ‘apple’,   ‘nokia’,   ‘intel’
     ‘mozilla-foundation’, ’hp’, ‘adobe’, ‘google’
     ‘facebook’, ‘opera-software-foundation’,
];
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
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
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

Contenu connexe

Tendances

Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
Erwan Tanguy
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
Neovov
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
Raphaël Goetter
 
Aria au pays du Web
Aria au pays du WebAria au pays du Web
Aria au pays du Web
JPVillain
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Fondamentaux des CMS
Fondamentaux des CMSFondamentaux des CMS
Fondamentaux des CMS
Frédéric Simonet
 
Rasez cette moustache guidon
Rasez cette moustache guidonRasez cette moustache guidon
Rasez cette moustache guidon
Benoit Marchant
 
HTML
HTMLHTML
HTML
Neovov
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
bellesmanieres
 
CSS3 - nouveautes
CSS3 - nouveautesCSS3 - nouveautes
CSS3 - nouveautes
Rémy Savard
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Chi Nacim
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
Abdoulaye Dieng
 

Tendances (15)

Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
HTML5
HTML5HTML5
HTML5
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Aria au pays du Web
Aria au pays du WebAria au pays du Web
Aria au pays du Web
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Fondamentaux des CMS
Fondamentaux des CMSFondamentaux des CMS
Fondamentaux des CMS
 
Rasez cette moustache guidon
Rasez cette moustache guidonRasez cette moustache guidon
Rasez cette moustache guidon
 
Crs orm
Crs ormCrs orm
Crs orm
 
HTML
HTMLHTML
HTML
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
 
CSS3 - nouveautes
CSS3 - nouveautesCSS3 - nouveautes
CSS3 - nouveautes
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 

En vedette

10 bonnes raisons d’avoir votre site web
10 bonnes raisons d’avoir votre site web10 bonnes raisons d’avoir votre site web
10 bonnes raisons d’avoir votre site web
Nico Bronckart
 
Ssi
SsiSsi
La sécurité informatique
La sécurité informatiqueLa sécurité informatique
La sécurité informatique
Saber Ferjani
 
Informatique et sécurité du système d'information : guide de bonnes pratiques...
Informatique et sécurité du système d'information : guide de bonnes pratiques...Informatique et sécurité du système d'information : guide de bonnes pratiques...
Informatique et sécurité du système d'information : guide de bonnes pratiques...
polenumerique33
 
Sécurité informatique
Sécurité informatiqueSécurité informatique
Sécurité informatique
oussama Hafid
 
sécurité informatique
sécurité informatiquesécurité informatique
sécurité informatique
Mohammed Zaoui
 

En vedette (7)

10 bonnes raisons d’avoir votre site web
10 bonnes raisons d’avoir votre site web10 bonnes raisons d’avoir votre site web
10 bonnes raisons d’avoir votre site web
 
Piratage informatique
Piratage informatiquePiratage informatique
Piratage informatique
 
Ssi
SsiSsi
Ssi
 
La sécurité informatique
La sécurité informatiqueLa sécurité informatique
La sécurité informatique
 
Informatique et sécurité du système d'information : guide de bonnes pratiques...
Informatique et sécurité du système d'information : guide de bonnes pratiques...Informatique et sécurité du système d'information : guide de bonnes pratiques...
Informatique et sécurité du système d'information : guide de bonnes pratiques...
 
Sécurité informatique
Sécurité informatiqueSécurité informatique
Sécurité informatique
 
sécurité informatique
sécurité informatiquesécurité informatique
sécurité informatique
 

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

Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
laureno
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
Adyax
 
Petal links atlassian unite
Petal links   atlassian unitePetal links   atlassian unite
Petal links atlassian unite
Atlassian
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
laureno
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
guest6d3f53
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
VISEO
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Meilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web DrupalMeilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web Drupal
Suzanne Dergacheva
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Alexandre Marie
 
Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022
Laurent Guérin
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1
Alexandre Paradis
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
Document et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantiqueDocument et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantique
herve.info.unicaen.fr
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
Présentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël LaunayPrésentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël Launay
Technocite
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Raphaël Goetter
 

Similaire à Comment évaluer la qualité d'un site web selon les techniques d'intégration web d'actualité (20)

Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Petal links atlassian unite
Petal links   atlassian unitePetal links   atlassian unite
Petal links atlassian unite
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Meilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web DrupalMeilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web Drupal
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Document et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantiqueDocument et structure : vers un web socio-sémantique
Document et structure : vers un web socio-sémantique
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
Présentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël LaunayPrésentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël Launay
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 

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

  • 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é
  • 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 ...
  • 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
  • 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é
  • 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!?
  • 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/
  • 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>
  • 47. «Wireframe» Projet: Actumus, via Evocatio/RED L’Agence, 2012
  • 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
  • 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)
  • 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!
  • 68. Schéma d’URL bâclé Di"cile à entretenir
  • 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