Teddy Payet

Association Didattica, millésime 2024

Teddy Payet — 2024-10-15T07:30:00Z

L'association Didattica se fait un petit lifting et se met au gout du jour en adoptant une interface responsive. Ce remaniement esthétique a été mis en ligne en octobre 2024.
La refonte graphique respecte l'aspect identitaire initiale du site. Nous avons rafraichi sa lecture sur l'ensemble des supports avec du responsive avec l'utilisation de Bootstrap 5 sur un SPIP 4.3. Toutes les pages ont été revues dans leur mise en forme et dans la structure des informations affichées grâce au (…)

- Développement / SPIP, HTML, CSS, MySQL, Associaiton Didattica, PHP, Freelance, Bootstrap (CSS et JS), Lead Developer, Git, VSCode

Socicon, le site internet

Teddy Payet — 2024-04-10T10:00:00Z

Projet de reprise et création du site Internet de la librairie Socicon

Depuis mars 2024, j'ai entrepris la reprise de la librairie Socicon, une ressource précieuse pour l'intégration d'icônes sociales dans les sites web, qui n'était plus activement maintenue. En collaboration avec l'auteur d'origine, coolseed, j'ai non seulement repris la maintenance de la librairie, mais j'ai également recréé un site internet de présentation dédié à Socicon. Je m'engage à respecter l'idée originale de l'auteur de la librairie Socicon, coolseed, et à lui accorder toujours le dernier mot sur sa réalisation et sa vision de la librairie.

Création du site internet avec SPIP

Le site internet de présentation de la librairie Socicon a été créé grâce à SPIP, un système de gestion de contenu (CMS) flexible et puissant. Cette plateforme nous a permis de concevoir un site autonome, capable de télécharger automatiquement la dernière version de la librairie depuis GitHub. Ainsi, les utilisateurs ont toujours accès à la version la plus récente de Socicon, garantissant une expérience optimale.
De plus, j'ai développé la galerie de présentation des icônes de la librairie en utilisant du JavaScript, en consultant le contenu du fichier JSON inclus dans la librairie Socicon. Cette galerie permet aux utilisateurs de visualiser facilement toutes les icônes disponibles, offrant ainsi une expérience immersive et pratique.

Intégration dynamique du CHANGELOG et du README

Une des fonctionnalités clés du site est l'intégration dynamique du CHANGELOG et du README directement depuis la dernière version de Socicon sur GitHub. Cela permet aux utilisateurs de consulter les dernières modifications apportées à la librairie et d'accéder aux instructions d'utilisation et aux informations importantes sans avoir à quitter le site.

Réactivation du générateur de PNG

En collaborant avec coolseed, l'auteur d'origine de Socicon, nous avons pu réactiver le générateur de PNG à partir de la webfont. Cette fonctionnalité permet aux utilisateurs de créer facilement des icônes sociales personnalisées au format PNG, adaptées à leurs besoins spécifiques. Cela ajoute une valeur supplémentaire à la librairie Socicon et renforce son utilité pour les développeurs web et les concepteurs.

Vision et objectifs futurs

Mon engagement envers la librairie Socicon ne s'arrête pas à sa reprise et à la création du site internet de présentation. Je suis déterminé à continuer à maintenir et à améliorer la librairie, en répondant aux besoins de la communauté des développeurs web et en garantissant sa compatibilité avec les dernières technologies. De plus, je m'efforcerai d'explorer de nouvelles fonctionnalités et d'optimiser l'expérience utilisateur sur le site internet de Socicon.

La reprise de la librairie Socicon et la création du site internet de présentation représentent un pas important vers la pérennité et l'amélioration continue de cette ressource essentielle pour les développeurs web. Grâce à la collaboration avec coolseed et à l'utilisation de technologies modernes telles que SPIP et GitHub, nous avons pu offrir une expérience utilisateur enrichie et garantir l'accès à la dernière version de Socicon. Je suis impatient de poursuivre ce projet et de contribuer activement au développement de la communauté des développeurs web.

Socicon

Teddy Payet — 2024-04-08T11:58:21Z

Projet de reprise et maintenance de la librairie Socicon

Dans le cadre de mon parcours professionnel axé sur le développement web et la gestion de projets, j'ai entrepris la reprise et la maintenance de la librairie Socicon. La maintenance de cette librairie s'est arrêtée fin 2019. Cette librairie, créée par Quentin, était précieuse pour l'intégration d'icônes sociales dans les sites web, mais elle n'était plus activement maintenue depuis cette période.

Fort de mon expérience et de mon intérêt pour l'innovation technologique, j'ai contacté Quentin, l'auteur d'origine de Socicon, pour discuter de la possibilité de reprendre et de poursuivre le développement de la librairie. Après des échanges, nous avons convenu d'un partenariat visant à assurer la pérennité et l'évolution continue de Socicon. En mars 2024, Socicon renait.

Création du site internet dédié

Dans le cadre de ce projet, j'ai initié la création d'un site internet dédié à la librairie Socicon. Ce site a été conçu pour présenter les fonctionnalités de la librairie, fournir des instructions d'utilisation et faciliter le téléchargement des ressources nécessaires. L'interface a été pensée pour être conviviale et intuitive, dans le but de rendre l'expérience des utilisateurs aussi fluide que possible.

Hébergement sur GitHub

Afin de garantir une gestion transparente et collaborative du projet, les sources de la librairie Socicon ont été hébergées sur la plateforme GitHub. Cette approche permet non seulement de faciliter le suivi des évolutions de la librairie, mais aussi d'encourager la contribution de la communauté des développeurs. Les utilisateurs ont ainsi la possibilité de signaler des problèmes, proposer des améliorations et participer activement à l'enrichissement de la librairie Socicon.

Vision et objectifs futurs

En reprenant la maintenance de la librairie Socicon, mon objectif est de continuer à la faire évoluer pour répondre aux besoins de la communauté des développeurs web. Cela inclut la mise à jour pour garantir la compatibilité avec les dernières technologies web, l'ajout de nouvelles fonctionnalités et l'optimisation de la performance. À travers ce projet, je souhaite contribuer de manière significative à l'écosystème des outils et des ressources disponibles pour les développeurs web.

Pour finir

La reprise et la maintenance de la librairie Socicon représentent un engagement envers la pérennité et l'amélioration continue des ressources disponibles pour les développeurs web. En collaborant avec l'auteur d'origine et en mettant en place des processus transparents et collaboratifs, nous pouvons assurer la viabilité à long terme de cette librairie essentielle. Je suis déterminé à poursuivre ce travail et à contribuer activement au développement de la communauté des développeurs web.

RAMAU.archi.fr, millésime 2023

Teddy Payet — 2023-10-16T10:00:00Z

Dans la même lignée que le site du LET.archi.fr, l'équipe du RAMAU et moi-même avons travaillé conjointement pour la refonte du site RAMAU.archi.fr. Ce travail a été mis en ligne en octobre 2023.
Cette refonte graphique garde l'aspect graphique initial du site, chère à l'équipe. Nous avons raffraichi sa lecture sur l'ensemble des supports avec du responsive avec l'utilisation de Bootstrap 5. Toutes les pages ont été revu dans leur mise en forme et dans la structure des informations (…)

- Développement / SPIP, HTML, CSS, MySQL, RAMAU, PHP, Javascript, Freelance, Bootstrap (CSS et JS), Lead Developer, Git, VSCode

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

CDC Développement Solidaire

Teddy Payet — 2014-03-21T08:00:00Z

Ce site du groupe de la Caisse des Dépôts présente les actions d'une filiale du groupe dans le monde.
Il a été porté sous SPIP 3.0 et utilise le framework Bootstrap 3.0 (CSS et JS). L'intégration a été assuré par un développeur intégrateur.
J'ai développé un plugin gérant les dons et adhésions à cette filiale. Création de formulaire CVT multi-étapes, création d'empreintes stockées en base de données, envoi et retour d'informations à un webservice bancaire (norme à respecter) qui assure (…)

- Développement / SPIP, HTML, CSS, MySQL, PHP, Javascript, Développeur Web, Salarié, Bootstrap (CSS et JS), Sublime Text, SVN

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

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.