Le blog de Christophe Pierrot

Retour sur le Paris Web 2009

J'ai eu l'opportunité d'assister pendant 2 jours au Paris-Web 2009 et j'avoue avoir été séduit malgré mes appréhensions (non fondées, certes).

ParisWeb 2009 est une association qui organise une conférence annuelle dans le but de promouvoir les bonnes pratiques des métiers du web.

Cette conférence réunit à Paris les experts français et internationaux venus partager leur savoir-faire dans leurs domaines d'expertise.

Le thème principal de cette conférence porte sur l'accessibilité, la qualité et le design et donc "comment concilier ces trois approches dans une optique de production de sites web, avec les contraintes et les exigences liées à des processus « industriels » ?"

Aucune solution n'a été donné biensûr mais plutôt des pistes à suivre, des bonnes pratiques

Voici les différentes conférences auxquelles j'ai pu assister :

  1. Intégrateurs, montez au front !
    Présenté par : Stéphane Deschamps (France Télécom)
    http://www.nota-bene.org/Integrateurs-montez-au-front-Paris

    Classification de 4 écosystèmes dans lesquels peut évoluer un intégrateur et analyse.
    Recommandation d'anticiper au maximum les problèmes d'intégration et de les annoncer clairement dès la découverte d'une charte. Puis de faire constater ces problèmes par la suite afin à l'avenir d'être consulter en amont.
     

  2. Un seul Web
    Présenté par : Daniel Glazman (Disruptive Innovations)
    http://www.slideshare.net/glazou/paris-web2009-one-web

    Avec les nouveautés de CSS 3 et HTML 5, il est désormais aisé de n'avoir qu'un seul site Web, qu'il soit accédé par des navigateurs de bureau ou des clients mobiles.
    Très grosse préconisation de ne plus faire du développement spécifique pour ie6 (coût : environ 20%) donc accepter qu'un site sous ie6 soit dégradé mais lisible, correct  => ie6 doit mourir !
    Ne pas réinventer la roue => utilisation des Yahoo Grids et des CSS Media Queries.
    "Intégrer" les intégrateurs avec l'équipe "Créa" plutôt que l'équipe de développement. Les contraintes et informations apportées par les intégrateurs pourraient rendre encore plus créatifs les graphistes.

    Quelques stats :
    http://gs.statcounter.com/#browser_version-FR-monthly-200809-200910
    http://www.w3schools.com/browsers/browsers_stats.asp

     

  3. HTTP pour les naïfs et les brutes
    Présenté par : Karl Dubost (Pheromone — Montréal, Canada)
    http://www.slideshare.net/karlcow/http-pour-les-nafs-et-les-brutes

    Métaphore qui apportait un regard d'enfant sur les conversations clients/serveurs, un peu de poésie ne fait pas de mal dans ce monde de brutes !
    => Je ne suis pas sûr d'avoir tout saisi :)

     

  4. Un Web ouvert
    Présenté par : Eric Daspet (SQLI)

    Définition d'un site web => des liens vs un site internet (isolé, vitrine)
    - Forte recommandation d'utiliser les flux RSS, ATOM, les microformats, le RDFa
    - Forte recommandation d'utiliser l'OpenId : solution pour oter le frein en ce qui concerne l'authentification/Identification
    - communication entre applications par OAuth, exploration par YQL, SPARQL ou BOSS

    => Utiliser c'est bien, partager c'est bien mais utiliser et partager c'est mieux ! (cf: creative commons)

     

  5. Webdesign et qualité
    Présenté par : Florent Verschelde (O2Sources), Benjamin De Cock

    Constat d'un manque de qualité sur les applications web et en particulier en France
    Les sites classiques s'enrichissent de fonctionnalités, profusion d'applications web "type desktop" (aussi dans les réseaux sociaux)

    5 règles à respecter pour assurer une qualité :
    - Se calquer sur le modèle de pensée de la cible
    - Employer un langage simple, court et direct
    - Réduire le nombre de fonctionnalités
    - Opter en amont pour les bons choix d'options par défaut
    - Créer un cadre visuel réconfortant

    Un bon design s'appuie sur :
    - une grille de mise en page
    - des actions claires
    - où suis-je
    - réconfortez-moi
    - soyez sympas
    - portez attention au détail qui tue (feuille de style pour impression, page 404, appli iphone automatique...)
    ...

     

  6. Référencement & Standards Web : La même destination
    Présenté par : Thierry Régagnon (RESONEO)
    http://www.slideshare.net/ThierryR/rfrencement-standards-web-la-mme-direction

    Le référencement naturel se positionne sur 3 axes :
    - la sémantique
    - le netlinking
    - la technique

    "Web 1.0" => Read
    "Web 2.0" => Read/Write
    "Web 3.0" => Learn

    Le Websémantique c'est maintenant !

    - le microformat : ses avantages sont sa simplicité, qu'il se base sur HTML et c'est un ensemble de formats arrétés (hCard, hReview, hResume, hCalendar, XFN, rel-atg, rel-licence...)
    - le RDFa : ses avantages sont qu'il est puissant, très souple, c'est une initiative du W3C. Un petit temps d'apprentissage tout de même mais pas sorcier.

    Descriptions enrichies des résultats : http://www.webrankinfo.com/dossiers/techniques/rich-snippets

    Le moteur de recherche est le cœur de notre activité web

     

  7. De l'ergonomie pour mon e-commerce
    Présenté par : Amélie Boucher

    L'ergonomie c'est des méthodes avec des gens !

    L' A, B testing est le seul vrai instrument de mesure de la bonne ergonomie d'un site :

    S'adapter au gens, à la cible

    A => faire confiance à quelques personnes representant mes internautes
    B => Faire confiance aux actes de tous mes internautes

    Dans le cas d'une refonte, elle prône le versionning d'une page produit par exemple pour tester l'efficacité. Donc on a une version de controle + un version A + une version B

    => superbe conférence et une amélie rigolote, pas déagréable du tout donc je suis convaincu... :)

     

  8. CSS3 : Future Style Now
    Présenté par : Molly Holzschlag (Opera Software)

    Démonstration des différentes possibilités en css3... de la balle !!!


  9. Concevoir un produit web c'est bien, faire en sorte qu'il soit accepté c'est mieux !
    Présenté par : Gautier Barrère, Alain Vagner
    http://www.slideshare.net/avagner/acceptation

    Une démonstartion sous forme de combat de boxe entre un techos et un ergonome !! pour definir l'accepation, la comprendre, les techniques de manipulation et savoir anticiper.

    Il en résulte qu'il faut avoir une approche pluridisciplinaire dans notre conception de site web.
    Ce qui implique une gestion des différences, des complémentarités, et de savoir apprendre à communiquer et à travailler ensemble.

    CAST IZNOGOOD !!

     

  10. Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
    Présenté par : Tristan Nitot (Mozilla Europe), Paul Rouget (Mozilla Europe)
    http://www.slideshare.net/nitot/les-nouveaux-standards-et-leur-implmentation-dans-les-navigateurs-modernes

    Présentation des nouvelles versions de Firefox (3.5 actuellement, 3.6 pour bientôt et 3.7), CSS, JS accéléré et HTML5.
    La puissance des standards, l'Open Web unis contre Adobe Air, Flash, Silverlignt (cela est maintenant possible maintenant !)

    L'implémentation de nouveaux standards :

    - multimédia (canvas 2D, canvas 3D/WebGL, audio, video, SVG)
    - accès aux périphériques (accéléromètre, webcam, GPS, multitouch, pression de la souris)
    - APIs pour applications (off-line, drag & drop, nouvelle API pourles fichiers, cross XHR, géolocalisation)
    - performance (JIT [trace Monkey] => des applis web trop lentes jusqu'a présent deviennent possible, Web Worker Threads)

    Il est possible de manipuler de la vidéo en utilisant JS accéléré, de styler 1 vidéo avec du css, appliquer des filtres SVG, d'avoir de la vidéo plein écran !!!

    des petits exemples : http://people.mozilla.com/~prouget/demos/

--------------------------------------------------------------------------------------------

 

J'aurais aimé voir ces conférences mais il a fallu faire un choix :

CSS peut-il être orienté objet ?
Présenté par : Nicole Sullivan (Indépendante) 

=> il y a en effet du bon à vouloir utiliser des composants réutilisables en CSS autour d'une sémantique visuelle qui pourra être distincte de la sémantique du contenu dans certains cas

Being Agile, Being Good
Présenté par : Stephanie Troeth (Book Oven)

--------------------------------------------------------------------------------------------
Voici des liens où sont mis à disposition les slides de présentation des différents orateurs des conférences :

Slides en français
http://www.slideshare.net/search/slideshow?lang=fr&submit=post&q=+parisweb2009&commit=search

Slides en anglais
http://www.slideshare.net/search/slideshow?q=+parisweb2009&submit=post&searchfrom=header

Atelier Eye Tracking (non vu)
http://vimeo.com/7008859

 

Je suis demandeur pour le prochain Paris-Web 2010, où il est prévu me semble t'il une conférence sur le wireframing, le zoning, le prototypage...
 

Les Thèmes sous Magento

Un thème est n'importe quelle combinaison de fichier, de template et/ou de skin qui créent l'expérience visuelle de votre site e-Commerce. Magento a la capacité de charger des thèmes multiples en même temps, et distingue donc les thèmes sous deux catégories

  • Le thème par Défaut
    Chaque interface vient avec un thème appelé par "défaut" qui est le thème principal d'une interface. Quand vous assignez une interface à votre boutique, l'application recherche automatiquement ce thème par "défaut" et charge ce thème dès l'entrée sur la boutique. Afin de personnaliser la conception de votre boutique, vous pouvez éditer ou modifier ce thème, ou créer un autre thème et le charger à côté de celui par défaut. Le thème par défaut doit contenir toutes les Paginations requises, les Templates et les Skins pour que votre boutique soit exempte d'erreurs et est par conséquent le thème prioritaire dans la hiérarchie de chargement des thèmes.

  • Les autres thèmes
    Selon vos besoins, un autre thème peut contenir autant de fichiers que bon vous semble. Ce type de thème est destiné à apporter des modifications provisoires, vous pouvez créer une présentation saisonnières sans devoir créer un nouveau thème par défaut complet avec seulement quelques images et en mettant à jour une partie du CSS, vous pouvez facilement transformer votre boutique en véritable stand de Noël pour une courte durée.

Maintenant jetons un coup d'œil aux composants d'un thème :

  • (Layouts) Paginations
    Des fichiers XML basics définissent la pagination des blocs pour les différentes pages, aussi bien que contrôler les informations des balises META et l'encodage des caractères dans la page. Les fichiers de pagination sont séparés sur la base d'un par module, chaque module apporte avec lui son propre fichier de pagination.

  • Templates
    Les Templates sont des fichiers PHTML qui contiennent des marqueurs (X)HTML et qui sont nécessaires à PHP pour créer une présentation visuelle logique des informations et des fonctionnalités.

  • Skins
    Les Skins sont des Block spécifiques de Javascript, de CSS et de fichiers Images qui complètent votre code (X)HTML. Quels sont ces blocs me direz-vous? Bonne question, et ne vous inquiétez pas, nous avons presque fini de définir les composants de Magento.

Les Blocks

Les Blocs sont un moyen par lequel Magento distingue la gamme de fonctionnalités dans le système et crée une façon modulaire pour gérer cette gamme d'un point de vue visuelle et à la fois fonctionnelle. Il existe deux types de blocs et ils travaillent ensemble à créer la sortie visuelle.

  • Blocs Structuraux
    Ce sont des blocs dont l'objectif unique est de définir la structure visuelle d'une page de votre boutique. Les exemples seraient l'en-tête, la colonne de gauche, la colonne principale et le pied de la page.

Structure des blocs d'une page dans Magento
#Header
#Left
#Main
#Footer

  • Les Infoboxes
    Ce sont des blocs qui affichent le contenu réel à l'intérieur de chaque bloc structurel. Chaque éléments représentent une fonctionnalité dans la page et ils utilisent des templates pour générer du code (X)HTML à insérer dans le bloc structurel parent. Les exemples sont la liste des catégories, le mini panier, les tags de produit et la liste des produit, le comparateur...

#Header
Category
List
Callout
Product
Tags
Compare
products
Product Listing
Sub Category List
Newsletter
Signup
Footer Links
Callout