Vupar : une démarche d’entreprise au

service de nos clients

Olivier MICHAUD – VUPAR

Nicolas PANAU – UMAN IT

© 2011 KaliTerre. 2

Vupar : une entreprise responsable engagé

Présentation

Agence web créative

création d’expériences digitales innovantes et uniques

Agence à taille humaine

•3 développeurs, 1 webdesigner, 1 chef de projet, 1 community manager

•Une équipe expérimentée : 10 ans d’expérience dans le web en moyenne

Pour une valeur durable et responsable

•Sensibilisation de chaque collaborateur au développement durable

•Partenariat avec une société de recyclage

© 2011 KaliTerre. 3

Agence Vu par... une entreprise responsable engagée

Nos services web

Développement :

•CMS Open Source : Wordpress, Drupal

•Solutions e-commerce : Prestashop, Magento

•Solutions sur mesure Framework Symfony

•Solutions mobile et tablette

Hébergement

Création :

•Webdesign, ergonomie et intuitivité

•Site internet, intranet et extranet

Conseil :

•Stratégie digitale

•Médias sociaux

© 2011 KaliTerre. 4

Agence Vu par... Intégrer l‘éco-conception avec nos clients

Eco-concevoir un site pour nos clients

• Sensibilisation du développement durable et de l’éco-conception à nos

clients

• Travail d’ergonomie pour respecter au maximum l’accessibilité

• Réflexion en amont pour un choix architectural optimal

© 2011 KaliTerre. 5

UmanIT : une entreprise engagée dans l’accessibilité et

l’éco-conception

• Entreprise créée 2010, une 30aine de références (dont Société Générale, Axa, Nantes Habitat, Nantes Métropole, Ademe…)

• Axe qualité et innovation sur tous nos projets. Réalisation de projets R&D chaque année

• Mise en avant des valeurs humaines pour favoriser l’esprit d’initiative et le dynamisme dans une entreprise à taille humaine.

• Intégration de CMS Open source

• Applications web

web

• Applications mobiles

• Sites mobiles

mobilité

• Certification Accessiweb

• Membre du GTA

accessibilité

• Développement durable

• Eco-conception logicielle

green-it

© 2011 KaliTerre. 6

Démarche pragmatique et durable de l’éco-conception

• Sensibilisation des acteurs pour donner du sens à la démarche et rencontrer l’adhésion dans l’entreprise

• Recensement des bonnes pratiques existantes (fondées ou pas ?), pour encourager les initiatives existantes.

• Audit d’une application / site selon un référentiel d’une centaine de bonnes pratiques du Web

• Restitution des résultats et partage d’un référentiel de bonnes pratiques avec les participants et mise en place d’un plan d’actions (CT, MT, LT)

• Mise à jour de l’application / site selon les bonnes pratiques par l’entreprise

• Suivi, validation de la bonne compréhension des pratiques mises en œuvre (diagnostic complémentaire) et de l’inscription du référentiel dans le processus d’ingénierie logicielle de l’Entreprise

• Une démarche pragmatique en 5 jours

• Une démarche soutenue par l’ADEME Pays de la Loire

© 2011 KaliTerre. 7

Périmètre et limites d’un audit

• Objectif : déterminer si le logiciel est conçu de manière durable : • pérennité, évolutivité,

• consommation,

• accès au plus grand nombre.

• Périmètre : • les bonnes règles de développement (documentation, règles de nommage, ...),

• l’evolutivite du code (complexité, redondance, composants et modèles CMS choisis ...),

• la consommation des pages générées,

• la consommation du programme source,

• l’accessibilite du site,

• les pratiques projet (installation, configuration, documentation annexe ...).

• Non évalué : • toutes les pages du site Web

• l’hébergement de l’application,

• la remise en question des choix architecturaux (base de données, choix de Framework et d’extensions associées, ...).

© 2011 KaliTerre. 8

Domaines étudiés

Environnent de développement

Librairies extérieures Définition de l’arborescence

générale

Dénomination des fichiers

Typage des méthodes, objets, ...

Dénomination des variables,

paramètres

Respect de normes de

développement

Structuration de l‘application

Accès aux données

Traçabilité

Tests

Documentation

Présentation du code

Commentaires

© 2011 KaliTerre. 9

Exemples de règles

• Minifier et rassembler les JS et CSS

• Documentation du code source

• Déplacement des commentaires : HTML généré vers code source

• Accessibilité :

• choix de 16 tests pour les audits sur 131 (tous niveaux)

12 JS, 6 CSS 4 JS, 2 CSS

© 2011 KaliTerre. 10

Exemples de règles

• Images :

• Compression (PNG Crush, Yahoo Smush.it, …)

• Utilisation de Sprite si possible

• Impression :

• Présence de la feuille de style (contrôle de la sortie)

© 2011 KaliTerre. 11

VUPAR : retour d’expérience sur la démarche

Comment est-elle vécu pendant ?

•Travail de perfectionnement

•Découverte de nouvelles pratiques, de nouveaux outils

•Avis extérieur sur notre travail

•Discussions instructives et constructives (nombreux conseils et bonnes pratiques)

Comment est-elle vécu après ?

•Expérience très positive et enrichissante

•Un tremplin pour faciliter la mise en place de nouveaux process et le déploiement

de l’agence

•Demande du temps pour mettre en place les outils nécessaires et maitriser les

bonnes pratiques

© 2011 KaliTerre. 12

VUPAR : les gains de cette démarche

Des gains de performance

•Mise en place d’outils de mesure

•Base de connaissance de bonnes pratiques

•Optimisation des sources (optimisation du cache, minimisation et

compression des sources)

•Pérennisation du produit (gestion du code source, gestion des livraisons)

•Amélioration du process de développement : mise en place de Redmine,

automatisation du déploiement des sources

Un + pour l’agence

•Un gain d’image qui peut se traduire en business : Un AO gagné

•Un gain d’organisation, de méthodologie et de qualité

•Une culture de l’éco-conception partagée en interne et en externe

© 2011 KaliTerre. 13

UMAN IT : Mesure des gains

• Mesure Firebug

• Chargement complet d’environ 2.3s à environ 1seconde sur la page d’accueil (écoconception = performance ici)

• Yslow

• Passage de C à B

• Accessibilité (navigation clavier, ancres vides, …)

© 2011 KaliTerre. 14

UMAN IT : Mesure des gains de consommation

• Serveur consacré uniquement au site

Pas de test de charge

Consommation constante à 67W

• Client mesuré avec protocole Green Code Lab / Web Energy Archive

Adresse Navigateur

Energie

consommée

(mWh sur

40s)

Puissance

maximum

(W)

http://192,168,201,106/ CHROME 4,2 30,0

http://192,168,201,106/ FIREFOX 4,7 27,2

© 2011 KaliTerre. 15

UMAN IT : Mesure des gains de consommation

• Mesure juste après amélioration

Adresse Navigateur

Energie

consommée

(mWh sur 40s)

Puissance

maximum (W)

http://192,168,201,106/ Chrome 2,7 27,2

http://192,168,201,106/ Firefox 2,4 28,6

0

5

10

15

20

25

30

35

Energie consommée (mWh sur 40s)

Puissance maximum (W)

Avant (Chrome)

Après (Chrome)

0

5

10

15

20

25

30

35

1 2

Avant (Firefox)

Après (Firefox)

© 2011 KaliTerre. 16

UMAN IT : Mesure des gains de consommation

• Nos conclusions

• Gain significatif

• Nécessité de mesurer en continue

• Obésiciel si l’on applique pas les principes d’éco-conception sur tout le cycle (y compris besoins fonctionnel)

• Gain de consommation : 9 mW 6 mWh

© 2011 KaliTerre. 17

VUPAR – UMAN IT : points clés

• Une démarche vertueuse qui donne du sens pour les dirigeants mais aussi pour les développeurs

• Une démarche facile à mettre en œuvre, d’autant moins contraignante si on l’intègre dans son process (coût 0 car bonnes pratiques à partager)

• Des gains qualitatifs directes pour l’entreprise et ses clients

• Un gain en pérennité (commentaires / documentation) non négligeable, et trop souvent négligé.

• Une première approche sociétale (accessibilité).

• Des gains de consommation et de performance

© 2011 KaliTerre. 18 © SAP 2007 / Page 18

Merci !