Teddy Payet

LET.archi.fr, millésime 2023

Teddy Payet — 2023-07-06T10:36:21Z

L'un de mes premiers clients en développement Web est le LET de l'ENSAPLV. Nous travaillons en collaboration depuis plusieurs années ensemble. Cette année 2023 a été le souhait et l'engagement pour le laboratoire de mettre à jour le design du site et le faire rentrer dans un monde plus actuel dans son utilisation. La refonte a été mise en ligne ce lundi 3 juillet 2023.
Cette refonte graphique garde l'essence initiale du site mais rafraichit sa lecture sur l'ensemble des supports avec du (…)

- Développement / SPIP, Traitement automatique des images, HTML, CSS, Graphic Design, Web Design, MySQL, École Nationale Supérieure d'Architecture de Paris Lavillette (ENSAPLV), PHP, Développeur Web, Freelance, jQuery, Bootstrap (CSS et JS), PHPStorm, Git

Refonte de l'espace privé de SPIP en Bootstrap

Teddy Payet — 2013-04-09T18:02:53Z

En octobre 2012, Cédric (qu'on ne présente plus dans la communauté SPIP) a publié sur la zone SPIP un plugin permettant de faire du Bootstrap (anciennement connu sous le nom de "Twitter Bootstrap") avec notre outil favori. Il a incorporé dans ce plugin le travail colossale de Tetue sur le respect de la typographie propre à SPIP.
Le temps que je me familiarise avec ce Framework CSS (et javascript) avec différents projets, l'envie m'est venue de refaire l'espace privé de SPIP grâce à Bootstrap…

Préambule

Cette phase n'est pas une refonte ergonomique de l'espace privé mais un portage de l'espace privé sur Bootstrap. Le but étant de retrouver les fonctionnalités de l'ancienne interface et si possible, d'apporter les réflexions et avantages de Bootstrap.
Un groupe de travail pourra être monté à la suite de cette phase de portage pour se pencher sur l'ergonomie de l'espace privé.

Le choix de Bootstrap a été fait pour ma part grâce à l'existence du plugin de Cédric. Des personnes pourraient dire que ce choix n'est pas judicieux. Certes, mais nous avons un plugin existant alors autant en profiter. De plus, les phases de portage vers un framework pourront aider si on décide de partir vers un autre framework CSS (exemple : Foundation, 52Framework, YUI Grids, etc.).

La rédaction du présent article sur mon blog a été fait pour ne pas polluer SPIP Contrib comme l'a très justement noté Cédric ici. Quand tout sera sur une version stable, j'écrirai un article sur SPIP Contrib.

Plus que des mots…

… des images.
Pour que vous vous rendiez compte du rendu, je vous invite à regarder les images ci-dessous d'avant/après.

Page d'accueil

Page d'accueil - avant

Page d'accueil - après

Page accueil - v0.7.1

Page d'accueil - Menu de navigation

Page accueil - Menu navigation - avant

Page accueil - Menu navigation - après

Page accueil - Menu navigation - v0.7.1

Page d'accueil - Menu de navigation au survol

Page accueil - Menu navigation survol - avant

Page accueil - Menu navigation survol - après

Page accueil - Menu navigation survol - v0.7.1

Page d'article

Page article - avant

Page article - après

Page d'article - v0.7.1

Appel à tester

Comme vous pouvez le voir, l'interface a pas mal changé mais il reste beaucoup de travail à réaliser. De ce fait, j'aurais besoin de beta testeur.
Un appel a déjà été fait sur la liste spip-dev. On peut continuer la conversation sur la liste mais vous pouvez aussi poster vos commentaires (appréciations, remontées de bugs, pertes de fonctionnalités, améliorations, etc.) sur l'article ici présent.
Je m'efforcerai à noter chaque bug sur cet article et au moins sur le fichier TODO du répertoire dudit plugin.

Pour tester

Et bien, pour tester, il vous faudra récupérer les fichiers par svn :
svn checkout svn://zone.spip.org/spip-zone/_plugins_/bootstrap_prive
Ce plugin est dépendant de 2 autres plugins :
– Bootstrap : http://zone.spip.org/trac/spip-zone... ;
– LESSCSS : http://zone.spip.org/trac/spip-zone....

Réalisations

10/04/2013 :
Avec le commit http://zone.spip.org/trac/spip-zone..., le bandeau de navigation devient blanc (la classe navbar-inverse a été retirée) et laisse place aux icônes de couleur propre à SPIP. L'interface en est plus légère, plus douce.

01/01/2014
Avec le commit http://zone.spip.org/trac/spip-zone..., le bug sur la page article est réglé.
La pagination est conventionnelle à Bootstrap avec ceci http://zone.spip.org/trac/spip-zone...

Quelques pratiques qu'on doit éviter en web design

Teddy Payet — 2012-10-12T08:52:26Z

De nos jours, il est très facile de créer un site internet. Qu'on soit particulier ou professionnel. L'explosion d'internet a permis surtout aux entreprises de commercialiser leurs produits à un plus large public de façon très simple.
Justement, un site internet doit rester simple pour capter l'attention de votre coeur de cible. Il faut rester sobre et ne pas avoir tout qui clignote à tout moment et qui n'a que le résultat de détourner l'attention de vos visiteurs.

Pour se faire, je vais vous citer quelques exemples de choses à faire ou ne pas faire pour que votre site reste efficace.

Rester sobre dans votre design

Cela peut paraître facile de dire cela mais pourtant c'est une règle à ne jamais omettre. Beaucoup de webdesigners ajoutent à tout va des fonctions sur la page, que cette fonction soit utile ou non. C'est le concours à celui qui en aura le plus (pour ne pas utiliser une autre expression macho bien connu).
Rajouter des fonctions à foison sur un site ne peut que le rendre plus complexe qu'il ne devrait l'être. Le visiteur se perdra dans les méandres de la navigation de votre site. Il ne saura plus où donner de la tête. Le nombre de clics augmentera pour qu'enfin votre visiteur arrive à l'info recherché.

N'utiliser pas de flash ! Ou que très peu

Flash a été très prisé pendant plusieurs années. On peut faire de très belle chose avec Flash, certes. Mais il ne faut pas oublier qu'un site en full flash est totalement opaque pour un moteur de recherche. Et si votre but est d'être dans les résultats des moteurs de recherches, alors flash n'est pas fait pour vous.
Trop de quelque chose tue la chose. :-)
Vous devez utiliser flash uniquement si vous n'avez pas d'autres solutions techniques dans votre besace. Vous pouvez voir ici un exemple de site qui utilise du flash avec parcimonie.
Petit rappel : Apple a été le premier à "abandonner" le flash sur les mobiles. Microsoft et quelques autres, un an plus tard, ont suivi la même voie.

Rester lisible

Grâce à internet, on peut trouver très facilement des polices fantaisistes. Oui, mais cela ne veut pas dire qu'on fait le bon choix en les mettant sur notre site internet. Plus votre police est lisible, plus vous capterez l'attention du visiteur. Plus elle est fantaisiste et compliquée, plus vite l'attention de votre visiteur sera anéantie…
Il faut hiérarchiser l'information de votre page par l'utilisation de 2 ou 3 polices maximum. Une police sans serif est plus lisible pour du long texte qu'une police serif. Vous pouvez utiliser cette dernière pour vos titres par exemple.

Ne pas mettre de musique ou fichier audio à l'insu de votre visiteur

Aujourd'hui, cela semble tomber de sens de ne pas mettre de musique de fond sur votre site internet. Certains webdesigners débutants oublient cette règle d'or. C'est, pour ma part, désuet d'avoir une musique d'ambiance sur un site surtout si je suis sur un site qui n'a rien à voir avec de la musique (tout au contraire de : deezer, myspace, une radio, le site perso d'un musicien, etc.). L'avantage des sites précédemment cités est de donner le contrôle au visiteur pour arrêter la musique. Faites en de même sur votre site si vous êtes contraints de mettre une musique.

Mettre en avant ses liens

Qu'y a-t-il de mieux qu'un lien pour permettre la navigation dans votre site internet ? Rien. Alors il faut qu'on puisse voir clairement vos liens par rapport à votre texte classique, non clicable. Il en va de même pour les liens vers des sites extérieurs au vôtre. Vous pouvez différencier les uns des autres aussi si vous le désirez pour faire comprendre à votre visiteur qu'il sortira de votre site s'il cliques sur tel ou tel lien.
Soyez ergonome. ;-)

Abbat les popups !

Il y a quelques années, lorsque vous arriviez sur un site, une multitude de fenêtre s'ouvrait alors que vous n'aviez encore rien fait ! C'était déconcertant. Cela n'avait que pour effet de cacher votre site alors que votre but est de partager le contenu de votre site.

Ne faites rien à l'insu de votre visiteur

Là aussi, ne soyez pas intrusif envers votre visiteur. Vous ne devez en aucun cas l'inscrire à une quelconque newsletter sans qu'il ne l'ait explicitement demandé.
Ou encore un autre aspect, ne demandez pas à votre visiteur de s'inscrire sur votre site pour pouvoir lire le contenu de votre site… A moins que votre site ne soit confidentiel (un intranet/extranet, un journal sur abonnement, etc.), avortez toutes idées d'inscriptions pour lire votre contenu.

Association Didattica

Teddy Payet — 2012-05-18T13:00:00Z

Présentation de l'association
L'association didattica est un collectif qui travaille à la croisée de l'architecture, de l'éducation et de la démocratie, avec comme mot d'ordre "pour une prise de position de tous et de chacun dans le monde physique, social et mental". Elle rassemble des architectes, des artistes, des chercheurs, des enseignants (du primaire, secondaire et supérieur) et des étudiants de différentes disciplines. Tâches réalisées
– Intégration du nouveau graphisme du site (…)

- Développement / SPIP, Traitement automatique des images, CSS, Web Design, MySQL, Associaiton Didattica, Chef de projet, Développeur Web, Intégrateur, Freelance, Sublime Text, NetBeans

AMP

Teddy Payet — 2012-05-07T09:00:37Z

Site du laboratoire de recherche "Architectures, Milieux, Paysages" de l'École Nationale Supérieure d'Architecture de Paris la Villette.
Voici le 2ème site réalisé dans la refonte des sites des laboratoires de l'ENSAPLV. Le squelette a été enrichi par rapport à la première version (cf. MAP-MAAC) pour répondre à différents critères de classification AERES.
– Utilisation intensive du plugin Compositions 2.0 basé sur le squelette Zpip ;
– Création d'un petit javascript maison pour (…)

- Développement / SPIP, Photoshop, XHTML, CSS, Web Design, MySQL, École Nationale Supérieure d'Architecture de Paris Lavillette (ENSAPLV), PHP, Javascript, Chef de projet, Développeur Web, Freelance, Sublime Text, SVN

Visualiser le wireframe de vos sites préférés !

Teddy Payet — 2012-04-11T06:00:00Z

Je vous ai parlé récemment d'un wireframe. Et pour se perfectionner, il est parfois sympa de pouvoir visualiser nos sites préférés en wireframe pour comprendre la structure, l'agencement de la page. Wirify est fait pour vous.

C'est vraiment un outil webdesigners et/ou développeurs. C'est un outil très simple : placer le lien fourni sur le site pour l'utiliser par la suite.
Il y a une version gratuite, suffisante pour vous faire un idée des blocs de vos sites.
La version payante vous permet d'exporter et d'éditer les wireframes de ces sites.

Voici quelques wireframes de sites que j'apprécie :

SPIP-Contrib.net

Smashing Magazine

Columbia College - Alumni

Blog du Webdesign

Un kit pratique pour réaliser vos Wireframe

Teddy Payet — 2012-04-09T07:00:00Z

On voit beaucoup circuler sur le net des kits pour faire du Wireframe. Il en existe des brassées de ces kits. En voici un que j'ai trouvé très bien.

Définition

Avant de commencer, il est bon de rappeler la définition d'un wireframe. Voici ce que dit Wikipedia :

Le Wireframe (ou maquette fil de fer) en web design consiste à réaliser un schéma définissant les zones d'un site Web, ou d'une page Web. Il peut être réalisé par une personne non technique (client, graphiste, etc.).

The ultimate wireframe UI kit

Un nom prétentieux, mais une palette non négligeable…
Le reproche que je pourrai faire aux kits usuels c'est l'aspect un peu froid des objets. Ce n'est pas le cas de celui-ci. Il est plutôt pas mal graphiquement et reste suffisamment neutre pour ne pas induire en erreur vos recherches graphiques par la suite. À ne pas négliger.

Voici le lien : http://medialoot.com/item/the-ultimate-wireframe-ui-kit/

Il vous permet de disposer d'un peu plus de 60 éléments graphiques pour agrémenter vos maquettes rapidement. Le fichier fournit est un fichier PSD contenant des répertoires correspondant à chaque élément graphique. C'est suffisamment compréhensible pour l'exploiter rapidement. De plus, les formes sont vectorisées, le texte modifiable, donc vous pouvez l'agrandir à souhait.

Amusez-vous bien !

The NounProject, des icônes par centaines…

Teddy Payet — 2012-04-07T12:16:53Z

Lors d'une discussion sur la liste de la zone (si mes souvenirs sont bons) au sujet des l'interface privé de SPIP 3, The Noun Project a été mentionné (je vous en avais parlé ici). Je ne le connaissais pas. L'erreur a été corrigée.

Préambule

The Noun Project (TNP) est une banque d'icônes offerte gratuitement à l'internaute lambda.
Et sincèrement, ces jeux d'icônes sont très belles, modernes.

Tout y est traité graphiquement en "aplat". Pas de reflets, pas d'ombres, pas de volumes. L'univers graphique est simple, sobre. Et moi, personnellement, j'aime ça !

Présentation de The Noun Project par The Noun Project

Voici la présentation, traduite de l'anglais au français, sur leur site :

« Partage, célébrations et l'amélioration du langage visuel du monde"

"The Noun Project" collecte, organise et ajoute des symboles hautement reconnaissables qui forment le langage visuel du monde, afin que nous puissions les partager d'une manière amusante et significative.

Le projet SPIP

On va tout de même revenir à nos moutons…
Comme je vous l'ai dit en introduction, j'ai connu ce site sur la liste de la zone de SPIP. Nous parlions de la réalisation d'un nouveau jeu d'icônes pour l'interface de SPIP.

Le soucis est que ce jeu d'icônes TNP est plus illustrative du quotidien : des icônes de transports (en commun ou "privé", utilitaires, des avions, etc.), la médecine, les loisirs (le foot, le jogging, le vélo, etc.)
Donc, la grosse difficulté est de pouvoir adapter ce jeu d'icônes à l'univers informatique. Ce n'est pas une tâche très complexe mais plus une tâche de longue haleine car il faut trouver une icône de base pour traduire une icône nécessaire à SPIP.

Un exemple sera plus parlant peut-être.
Dans SPIP, on utilise "les cookies de correspondance". L'icône associé : ben, un cookie !
TNP n'a pas d'icônes de cookies… Que cela ne tienne. J'ai trouvé l'icône de la pizza comme motif. Voici le résultat :

Le début des travaux

J'ai publié sur la zone le résultat des premières icônes. Vous pouvez voir ça ici :
http://zone.spip.org/trac/spip-zone...
Je dois continuer ce travail et le terminer.

Je vous tiens au courant. ;-)

MAP-MAACC

Teddy Payet — 2012-03-20T14:59:00Z

MAP-MAACC (Modélisations pour l'Assistance à l'Activité Cognitive de la Conception) est un laboratoire de recherches de l'École Nationale Supérieure d'Architecture de Paris Lavillette (ENSAPLV). Le site a été porté sous SPIP 2.1.12 pour permettre une recherche transversale des différents laboratoires de l'école. La mise en page du site sert de gabarit pour tous les autres laboratoires. Les couleurs changeront selon le laboratoire mais les fonctions restent les même.

- Développement / SPIP, Traitement automatique des images, CSS, Web Design, MySQL, École Nationale Supérieure d'Architecture de Paris Lavillette (ENSAPLV), Javascript, Chef de projet, Développeur Web, Intégrateur, Freelance, jQuery, Sublime Text, NetBeans, SVN

Déclinaison de mon squelette pour smartphone

Teddy Payet — 2011-12-31T15:22:11Z

Vous avez pu lire mon précédent article sur la création d'un squelette sur la base de 960.gs. À partir de ce premier travail, je vais montrer qu'il est très simple d'en faire la déclinaison pour les smartphones.

Préambule : les CSS

En premier lieu, on doit choisir la largeur de notre page, le conteneur plus exactement. 960.gs donne sur son site un lien vers un générateur de grilles personnalisées :
http://grids.heroku.com/
Pour mon besoin, je clique sur « Check to edit the width » pour pouvoir renseigner la largeur de mon conteneur. La définition d'un iPhone est de 480px (l'iPhone 4S est de 960px, mais je préfère partir sur une largeur plus petite pour que mon contenu soit plus lisible sur un petit écran). Voici mes réglages sur le générateur de CSS :

Le générateur de grilles personnalisées de 960.gs

Ayant l'habitude du système sur 12, 16 et 24 colonnes, je choisi ici 12 colonnes.

La gouttière est de 10 px. C'est la « meilleure » valeur pour que la largeur de mon conteneur colle au mieux à la largeur globale de 480px. La largeur d'une colonne (grid_1) est de 30 px. Parfait pour mes plus petites icônes (dans ma barre de navigation secondaire)

Je peux maintenant exporter le fichier CSS pour son exploitation. Je clique sur le premier « Download CSS File ». Je l'enregistre sous le doux nom de « 480.css » en relation à mon précédent 960.css à la racine de mon dossier squelettes dédié aux smartphones.

Le dossier squelettes dédié à ma version smartphone.

Je dois renseigner dans mon fichier mes_options.php un nouveau dossier pour mon squelette qui sera reconnu par l'appel var_skel=smartphone.

Pour plus de reconnaissance si je reprends ce dossier dans 2 ou 6 mois, je crée un dossier « smartphone » dans mon répertoire de squelettes en cours. Je saurais que ça en est la déclinaison et pas celle d'un autre.

Structure des répertoires squelettes sur le serveur.

Je rajoute une ligne dans mon fichier mes_options.php :

$GLOBALS['dossier_squelettes'] = 'squelettes/201201'; // 'nom' => 'chemin du squelette' $squelettes = array( '201104'=>'squelettes/201104', '201201'=>'squelettes/201201', 'smartphone'=>'squelettes/201201/smartphone', ); // Si l'on demande un squelette particulier qui existe, on pose un cookie, sinon suppression du cookie if (isset($_GET['var_skel'])) { if (isset($squelettes[$_GET['var_skel']])) setcookie('spip_skel', $_COOKIE['spip_skel'] = $_GET['var_skel'], NULL, '/'); else setcookie('spip_skel', $_COOKIE['spip_skel'] = '', -24*3600, '/'); } // Si un squelette particulier est sauve, on le definit comme dossier squelettes if (isset($_COOKIE['spip_skel']) AND isset($squelettes[$_COOKIE['spip_skel']])) $GLOBALS['dossier_squelettes'] = $squelettes[$_COOKIE['spip_skel']];

Dans le dossier squelettes/201201/smartphone/, je recopie tous les fichiers du répertoire squelettes/201201/ (sauf smartphone bien sûr).

Voilà, cela fait, reprenons maintenant les même étapes de mon précédent article.

Head.html

Je remplace dans le fichier inclure/head.html « 960.css » par « 480.css » :

Je ne touche à rien d'autre.

Body.html

Ici, je remplace :

par :

Et voilà. On y est pour ce fichier.

Explications toutefois

container_12 : nous ne sommes plus sur un base de 16 divisions de grille mais de 12 ;
grid_12 : mon entête sera sur toute la largeur de ma page et non sur ¼ de la page ;
#bouton : ici aussi, je n'ai plus besoin de l'afficher sur une partie de ma page mais sur toute sa largeur ;

Les fichiers inclure

Je dois vérifier que chaque fichier inclure corresponde à ma nouvelle grille.
Un exemple : inclure/navigation-secondaire.html
Je ne change que 2 lignes dans ce fichier :

par :

Cela me permet de centrer cette barre de navigation dans ma page.
On applique le même principe aux autres fichiers inclure « statiques ».

Le contenu

Je modifie maintenant ma page vitrine : contenu/page-sommaire.html
On remplace :

[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique, id_article, position=#GET{position}, grille=grid_4}

par :

[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique, id_article, position=#GET{position}, grille='grid_6', imglargeur=230, imghauteur=230}

Souvenez-vous : mon fichier article-resume-rubrique.html était customisable par les paramètres qu'on peut lui passer. Ici, je lui renseigne la nouvelle largeur de mes vignettes et leur hauteur : 230px.
Ma mise en page est sur 2 colonnes, soit la classe CSS grid_6 (d'une largeur d 230px).

Déclinaisons

Modifions le fichier contenu/rubrique-services.html
Même procédé.

Premier appel de la boucle article, je remplace :

[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique, id_article, position=#GET{position}, grille=grid_6, imglargeur=340, imghauteur=220}

par :

 #INCLURE{fond=inclure/article-resume-rubrique, id_article, position='alpha omega', grille=grid_12, imglargeur=470, imghauteur=220}

On est maintenant sur une largeur totale de la page, soit grid_12. On lui passe un alpha et un omega aussi. On pourrait se passer de renseigner cette class car nous sommes déjà dans un grid_12. Mais l'avantage est de courtcircuiter les éventuels css des li du fichier habillage.css

Pour le deuxième appel d'articles de sous-rubrique, je remplace :

[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique,id_article,position=#GET{position},grille=grid_4}

par :

 #INCLURE{fond=inclure/article-resume-rubrique,id_article, position='alpha omega', grille=grid_12, imglargeur=470, imghauteur=220}

Et enfin le troisième et dernier appel d'articles (de la rubrique courante) :
#INCLURE{fond=inclure/article-resume-rubrique, id_article, position='alpha omega', grille='grid_10 prefix_1 suffix_1', imglargeur=580}
par :
#INCLURE{fond=inclure/article-resume-rubrique, id_article, grille='grid_10 prefix_1 suffix_1 alpha omega', imglargeur=390}

Voilà ! La version smartphone est prête à l'emploi.

Pré-conclusion

Il vous suffit de mettre un lien dans votre version standard pour que les utilisateurs de smartphone puisse choisir cette version. Mais surtout, surtout ! N'oubliez pas de faire un lien sur la version smartphone pour revenir à la version standard. C'est l'utilisateur qui doit avoir le choix de choisir sa version et pas à nous de forcer la main.

Un ami m'a parlé d'un script qui détecte si vous êtes sur smartphone ou pas (navigator.userAgent). Oui… Mais il y a un bémol à cette méthode…
On arrive sur la page classique du site, on a le message d'alerte, on se dit « pourquoi pas, sympa d'y avoir pensé ». Cool, tout va bien. Je vois la version optimisée.
Mais lorsque je désire revenir sur la version standard, j'ai une nouvelle fois le message d'alerte alors que j'ai déjà répondu. Je ne trouve pas ça agréable…

Conclusion, la vraie

Il est donc très facilement de faire une déclinaison de son squelette pour les smartphones lorsqu'on utilise des « grilles » (aussi bien Z-dist que 960.gs).

Il faut peaufiner un peu les css mais beaucoup moins que si on partait de zéro.
J'ai mis 1 heure pour réaliser la déclinaison.

À votre tour de tester cette méthode. Je voudrais savoir si elle vous convient, quelles ont été les difficultés que vous avez rencontré et leur solution.