L’usage en production du plan du site

Pour de la production d’un site, comme son nom l’indique, un plan du site fait office de plan de site. Il constitue la structure, le squelette, l’arborescence des pages. Il est donc indispensable de le communiquer au plus vite aux développeurs afin qu’ils aient une idée de l’organisation mais aussi du volume.

Étant une représentation du site, ce plan, cette carte, du site permet aussi de suivre la production en notant les parties en cours de réalisation, finies, livrées ou à faire dans la version suivante. Il s’agit donc d’un document hautement stratégique pour la gestion de projet.

Bizarrement, je n’ai jamais vu une politique d’uniformisation de plan de site dans les agences que j’ai fréquenté. Je trouve ça étrange que des personnes dont le métier est de suivre des projets ne se soient jamais penchées sur les outils nécessaire à leur activité. Ma métaphore du chef de projet, guide de montagne/chef de cordée naviguant à vue (sans carte ni connaissance du terrain) prend toute son ampleur.

Les modes de représentations de plans de site

Nous avons différentes possibilités pour représenter un plan du site aujourd’hui.

1. Le tableur
2. La carte mentale :: xmind
3. La solution en ligne :: slickplan – Jumpchart
4. Une page HTML/CSS

Je vais vous parler de la quatrième solution qui me semble la plus pratique (même si elle peut être couplée avec une autre pour la phase de préprojet avec le client).

Réaliser une page HTML du plan de site

La compréhension de la manière dont fonctionne un CMS permet de se rendre compte qu’un plan du site peut être intégré dès le début de la réalisation du site.

A condition que le plan du site soit validé dans ses grands ensembles, il est très facile d’aller dans l’administration du site (CMS) et de créer toutes les pages correspondantes à ce plan du site. On crée tout simplement une arborescence. On a notre squelette dans le CMS.

J’irai plus loin, pour peu qu’on connaisse la technologie (Drupal, WordPress…) assez tôt, on peut se servir du CMS pour construire son arborescence. Reste la représentation visuelle me dirait vous. Rien de plus simple.

Un plan du site est une grande liste de page avec des sous niveaux (listes imbriquées). Je ne crois pas qu’il soit compliqué de générer l’arborescence d’un site en HTML de nos jours.

Réaliser la CSS du plan du site

Pour la mise en forme, rien de plus simple, prenons un petit fichier CSS qui va mettre en forme cette grande liste imbriquée.

Chez David Legglett, vous pourrez trouver cette fameuse CSS de mise en forme d’un Grand Sitemap.

Si vous avez le courage, vous pourrez aussi ajouter ce petit JS permettant de déployer/refermer des bouts d’arborescenses : jQuery Organisation Chart.

Gérer l’avancée de votre projet grâce à ce plan du site réaliste

Avec ce plan du site à jour et visuellement très compréhensible, vous pouvez imaginer ajouter différents paramètres pour gérer l’avancer de votre site.

Par exemple une page peut avoir différents paramètres (publié, dépublié, ou autres) ; ces paramètres peuvent permettre d’ajouter des classes correspondantes dans votre fichier HTML et ainsi de générer des couleurs : page en cours, finie, à faire en V2…

Conclusion

Une manière très simple de créer et générer un plan du site grâce à un CMS peut permettre d’avoir une vision claire, réaliste et à jour d’un site.

Articles similaires :

1. Le plan Besson et l’accessibilité
2. Construire sa page HTML sans ID ni Class
3. Ava 7 Patterns : des fonds de page pour site web
4. TYPO3 – exemple de site : Screenteam
5. Easy, un FrameWork CSS/HTML/JavaScript

L’apparition du concept de séparation

Durant la première guerre des navigateurs (dans les 90′s), face aux problèmes d’interopérabilités et d’homogénéités du code des sites web, le W3C s’est mobilisé afin de définir des standards. Pour gagner la bataille, il a défendu les technologies comme CSS et xHTML qui concernent pour l’une la présentation et pour l’autre la structure. c’est actuellement de cette manière qu’on code les sites.

Dans les années 2000, cette idée de « séparation » s’est affirmée dans la rédaction de la spécification xHTML 2. L’idée était de défendre une pureté fonctionnelle entre la structure (HTML), la présentation (CSS) et le comportement (JS). Sauf que…

Les couches ne sont pas vraiment séparées

Quand, on rédige une feuille CSS, on dispose de comportement comme :hover (changement de propriété au survol de la souris) ou encore :before & :after (ajout d’un élément dans le document avant ou après une zone de contenu).

Il s’agit donc d’1 élément de comportement & de 2 éléments de structure présents dans la CSS => la séparation n’est pas stricte.

Comment cela ce fait-il que les couches ne soient pas séparées ? Tout simplement parce que les constructeurs de navigateurs l’ont décidé, ce n’est pas (plus) un objectif. Ils pensent que cela n’a pas lieu d’être. Et les spécifications le prouvent ; xHTML 2 est morte.

La divergence

Prenons l’exemple d’un lien avec un effet visuel lors du survol de la souris. Vous avez le choix entre passer par la CSS pour un effet :hover et/ou utiliser une petite pincée de JavaScript pour la gestion d’un comportement plus complexe.

Avec un changement de couleur géré en CSS et un effet (une opacité par exemple) en JavaScript, le comportement du lien est spécifié dans deux couches différentes : c’est ce qu’on appelle la « divergence ». Ce lieu de gestion subtile de l’effet de survol par deux couches différentes.

Avec la logique de « séparation », on est dans le noir&blanc ; avec la logique de « divergence », il y a du noir&blanc mais aussi un peu de gris.

L’intégration n’est pas la collage grossier de différentes couches mais plutôt l’emboîtement subtile de plusieurs technologies (ce qui définit, à mon avis, le principe de l’artisanat).

Conclusion

L’idée de « séparation » a été indispensable pour la défense des standards du web. Cette idée a permis de passer outre les soupes de tags (HTML), les CSS ou JavaScript en lignes. Cependant, l’expérience montre qu’il existe des zones de chevauchements entre ces couches ; qu’on peut nommer « Divergence ».

Si on doit encore défendre les standards avec fougue, il est réaliste d’accepter ce concept de « divergence ». Accepter la tournure prise par les technologies du web, c’est aussi comprendre pourquoi un intégrateur n’arrive à exprimer ses difficultés, pourquoi il faut avoir codé pour les comprendre…

Encore une fois le métier d’intégrateur n’est pas simple. Il faut de l’expérience et de la rigueur pour dompter la « divergence ». Après quelques années, il sera compétent pour faire de la conception d’interfaces à partir de ces principes. C’est pour cette raison qu’il doit devenir concepteur.

Je vous laisse lire l’article en anglais, bien plus complet que celui-ci : The separation of structure, presentation and behavior is dead.

La génèse

Une des première dans le genre (à ma connaissance) fut bien évidemment « Ben the bodyguard », dont voici la vidéo :

On se servira de ce genre de présentation pour mettre en avant un contenu scénarisé avec des étapes bien déterminées.

Le principe

Techniquement, comment cela marche-t-il ? On met en place une grande page, avec un décor statique (fond) et des éléments animés. On place dans cette page des ancres, comme autant d’éléments de votre scénario : étape 1, étape 2, étape 3… Puis à chaque ancre, on associe une animation (ou plusieurs animations).

Donc pendant que vous descendez dans la page, votre navigateur détecte des bornes (ancres), à chaque borne une fonction permet d’activer un événement. Visitez la page de Google green – Better web. Better for the environment..

Les plugins

Je vous propose de regarder deux plugins jQuery

1. jQuery waypoints :
Un plugin qui permet de détecter l’activation d’ancres et de pouvoir lancer un événément JavaScript de son choix. Peut-être utile pour du scroll infini, la détection de bas de page…
jQuery Waypoints

2. jQuery scrollorama :
Un peu plus fin, il pointe directement un élément et permet d’appliquer un événement d’animation sur cet élément. Il semble plus destiné à des effets visuels.
jQuery scrollorama

Articles similaires :

1. jQuery : 5 nouveaux plugins de novembre
2. jQuery Accessible RIA : fonctionnalités jQuery accessibles
3. Galerie d’images avec bxGallery sous jQuery
4. ColorBox, plugin lightbox pour jquery
5. jQuery : plugin ARIA

Concernant les sites d’informations

Un journal papier comporte les informations relatives à une journée. Ces informations perdent de la valeur avec le temps. Ainsi, les lecteurs ont tendance à se tourner de plus en plus vers les applications mobiles pour avoir des informations fraîches.
Le besoin d’interface « responsive » se fait sentir.

Les trois ingrédients d’un graphisme adaptable sont :

• Une grille flexible
• Des images/media flexibles
• Des media queries

Cependant ces trois éléments se rapportent à la structure ; la structure n’est constitue pas la conception. La conception est un rapport entre la forme et le contenu.

Comment peut on se pencher sur des sites adaptables ?

Travailler adaptable

Le travail de production se résume souvent à une succession de tâches. Une après l’autre de manière linéaire.
Pour un site adaptable, la procédure ne peut pas être similaire étant donnée la multiplicité des supports de visualisation (mobile, tablette…). Le process doit être différent.

Pour le site du Boston Globe, la phase de conception a été ponctuée de nombreuses questions de la part des développeurs à propos de la manière de naviguer : à quoi ça sert ? comment le contenu s’adapte ? Si je navigue au doigt ?… Un travail collaboratif.
L’équipe s’est principalement penchée sur la question de l’affichage sur mobile : importance des zones et contenus affichés…

En anglais dans le texte : Mobile First

Mobile First

Pourquoi le mobile avant tout ?

• Le trafic a explosé
• Nouvelles manière de naviguer
• Ecran étroit oblige à aller à l’essentiel

La question de contexte de pose-t-elle vraiment ? A-t-on de réelles volontés différentes sur un mobile ou sur un ordinateur de bureau ? A vrai dire, pas forcément, la question de contexte peut être (presque) éludée.

En effet, sur un ordinateur de bureau, les utilisateurs cliquent sur certaines zones d’un site tout simplement parce qu’ils sont perdus.
Sur un mobile, on s’approprie directement le contenu, tout est là.

Le contenu va déterminer ce que la conception doit mettre en valeur. La vision « mobile first » est une façon de simplifier l’expérience à son maximum.

Maquettage

Une étape à ne pas négliger est certainement celle du maquettage afin de pouvoir apprécier ses idées. Utiliser les dernières techniques de redimensionnement automatique des contenus.

Vérifier le résultat de son travail.. Comment le contenu s’adapte ? Comment un élément peut être mis en valeur ?
Tester, vérifier, refaire, répéter, et corriger.

La fondation flexible

L’orientation graphisme adaptable permet d’affiner les points bloquants d’une page. Cela signifie surtout, moins de code à écrire et une meilleure conformité.
Le web mobile permet de discuter de l’ajout d’éléments de manière progressive. Ce qui signifie une meilleur intégration au projet pour chacun.

Les choix d’un concepteur en chef se rapproche d’une certaine forme de tyrannie. Ses décisions pour une conception adaptable pourraient ne pas correspondre aux attentes des utilisateurs.
S’orienter vers la conception adaptable c’est en grande partie laisser à une équipe la possibilité de l’expérimentation.

Lire An Event Apart: The Responsive Designer’s Workflow.

Articles similaires :

1. 5 astuces pour la conception d’interfaces mobiles
2. TYPO3 : créer une version mobile de son site
3. Comment ruiner un design Web
4. ColorBox, plugin lightbox pour jquery
5. Trousse à outils pour commencer HTML5

1. La simplicité
2. Découverte progressive des fonctionnalités
3. Vitesse
4. Libellé et organisation des éléments
5. Lisibilité
6. Beauté, esthétique

Ce qui est marrant, c’est que depuis que je fais du web, on commence toujours par le dernier critère ; et encore c’est un assez subjectif.

Lire Comment les visiteurs jugent votre site : 6 facteurs liés à l’intuition et aux émotions

Articles similaires :

1. Magento SEO – optimisez le référencement de votre site E-commerce
2. 8 outils pour tester l’accessibilité de votre site
3. Plugin jsPlumb, diagrammes avec éléments HTML liés
4. Comment ruiner un design Web
5. Ava 7 Patterns : des fonds de page pour site web

Question fonctionnalités, Agile Carousel est bien fourni : play/pause, pagination, transitions multiples, retardateur… mais personnellement je n’aime pas beaucoup comment il fonctionne.

Tout d’abord, l’insertion de données à l’aide JSON peut se révéler intéressante pour récupérer des données extérieures, mais ces données ne font pas partie du document à son chargement ; elles sont ajoutées en JavaScript. Ainsi, si l’utilisateur n’active pas JavaScript, les données sont inexistantes, on n’a donc que des divisions ou zones vides.

Ensuite, la librairie oblige à définir les tailles du diaporama dans la configuration JavaScript. Ce que je trouve très contraignant au niveau de la maintenance. On mélange à la fois la configuration fonctionnelle du diaporama et ses dimensions. Ce genre de fonctionnement n’est pas pour faciliter le travail de l’intégrateur.

Bien que je comprenne la volonté de vouloir insérer des données externes, je ne comprends pas cette manie de placer toute la configuration du côté JS. Tant que je n’aurai pas compris l’avantage, je resterai sur des librairies comme bxSlider, bien plus cohérentes.

Voir Agile Carousel.

Articles similaires :

1. 15 Carrousels d’images en Javascript
2. L’avenir de l’information : le web de données
3. TYPO3 : la conception agile
4. Les institutions doivent construire des données réutilisables, pas des sites web
5. Listes de 10 CMS stockant les données en XML

Ils sont fort chez wpml, pour obliger les gens à acheter une licence pour l’année, ils rendent les anciennes versions incompatibles avec WordPress 3.1. On va quand même pas sacrifier une mise à jour pour une traduction.

Ainsi, en cette fin de semaine, je vais m’en remettre à Amaury Balmer qui semble avoir un avis tr!ès pointu sur la question :

WPML fait plein de choses. Le problème se résume en 3 points :

1. On ne peut pas désactiver la traduction sur les articles WP
2. Le code source est imbuvable, pourri et j’en passe. (il m’est arrivé de désactiver des fonctions PHP complètes, le plugin fonctionnait mieux…)
3. Il vient récemment de passer en mode payant

Ok, ça nous rassure, au moins on a des chances de ne pas perdre au change. Sinon, quoi ? Sinon, Amaury, propose d’essayer son petit plugin : Simple Punctual Translation.

Comme son nom l’indique, ce plugin permet de faire des traductions ponctuelles sur son site WordPress, ponctuel dans le sens nous n’allons traduire que certaines pages du site.

J’ai pas grand chose à dire de plus puisque je ne l’ai pas testé, pour le reste…

Lire Simple Punctual Translation.

Articles similaires :

1. Drupal et WordPress : deux logiques proches, mais différentes
2. Des billets WordPress dans du TYPO3
3. Employer une langue simple et claire favorise une communication efficace.
4. GetSimple – le CMS le plus simple possible
5. Tuner son WordPress avec SEO Super Comments

Le FrameWork mb.ile permet aussi de mettre en forme des applications pour le mobile. Si on fait un tour sur les pages proposées, on trouve des exemples d’intégration très intéressants : mb.ile.

• Menu – menu déroulants, big menu, menu recherche avancée…
• Video player – lecteur vidéo en fond de zone de contenu
• Vertical slider – menu déroulant vertical de style carrousel
• Extruder – menu latéral fixe, rétractable

Articles similaires :

1. TYPO3 : créer une version mobile de son site
2. OpenFaces, un FrameWork ajax
3. Instant Blueprint, FrameWork CSS express
4. Easy, un FrameWork CSS/HTML/JavaScript
5. CSS FrameWork : Scaffold pour le développement rapide

CarouFredSel est un petit plugin jQuery permettant de faire défiler les images de manières infinies (retour au début de la liste d’images). Un défilement automatique, de la navigation clavier, compatibilité lightbox, l’auteur a implémenté quelques fonctionnalités importantes.

Ce carrousel semble très fluide et aisé à mettre en place sur un site.

Voir carouFredSel.

Articles similaires :

1. Calendrier d’insertion de date en JavaScript avec raccourci clavier
2. TYPO3 – carrousel d’images en javascript
3. ColorBox, plugin lightbox pour jquery
4. La navigation au clavier sur les sites d’images
5. Galerie d’images avec bxGallery sous jQuery

Non car il existe sur le web ou dans ton éditeur de CSS des fonctions te permettant de reformater tes sélecteurs. A ce propos, va voir ProCSSor, le reformateur le plus complet actuellement.

Il te permettra à partir de code collé, d’un fichier ou encore d’un URL (d’un feuille de style) de recomposer les lignes selon ta convenance :

• Disposition des sélecteurs
• Disposition des propriétés
• Indentation des propriétés en colonne (toutes propriétés à la même distance) ou indentées

La disposition en colonne n’est pas idéale car les propriétés passent sur la ligne de dessous en cas de sélecteurs trop long, mais en cas de reprise de projet ou d’un besoin d’analyse d’un code, proCSSor est ton ami.

Voir proCSSor.

Articles similaires :

1. Hacker IE, forcer l’interprétation CSS3
2. Construire sa page HTML sans ID ni Class
3. Les outils indispensables pour le HTML5 et le CSS3
4. Trousse à outils pour commencer HTML5
5. 8 outils pour tester l’accessibilité de votre site