Teddy Payet

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

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.

Création d'un squelette sur la base de 960.gs

Teddy Payet — 2011-12-30T13:17:08Z

Comme vous avez pu le voir, l'interface de mon site est toute fraiche. Il est basé sur le framework CSS 960.gs. Je l'utilise quasi systématiquement pour la création de mes squelettes persos comme professionnels. Je vais vous expliquer comment j'ai procédé à sa réalisation avec SPIP.

Avant propos

J'ai déjà abordé sur mon blog de certaines astuces que j'ai réutilisé sur mon site :

Je vais aujourd'hui vous parler de la première partie de la réalisation de mon squelette. Nous n'aborderons pas l'étape graphique qui est propre à chacun.

Présentation de 960.gs

Il existe plusieurs frameworks CSS : Blueprint, YUI Grid CSS, 960 Grid System.
Ce dernier (960.gs pour les intimes) est devenu ma référence maintenant. Il me permet de réaliser rapidement mes prototypes mais aussi mes versions de squelettes en production.

Pour mon design, j'ai réalisé ma maquette sous Photoshop grâce à la grille psd mis à disposition sur le site officiel. De ce fait, je peux aisément retrouver mes largeurs de bloc par rapport à un élément de grille (2 grilles, 3 grilles, etc.). Rapide et efficace.

Mon design est basé sur une division de 4 « sections » de la grille de 16. Ce qui correspond à la classe CSS grid_4.

Grille 960.gs appliquée à ma nouvelle interface.

Mise en place des gabarits.

En plus de ma grille 960.gs, mon squelette est basé sur la structure « Z » et le plugin Compositions. Je recrée de ce fait les répertoires de base de ma structure :

contenu
extra
head
images
inclure
lang
navigation

Selon mes besoins, je copierai les fichiers html que je dois modifier de z-dist_v1/ à squelettes/.

Premier élément : head.html

Head.html

Il faut que SPIP arrive à retrouver les fichiers de 960.gs. Je copie les fichiers 960.css, reset.css, text.css à la racine de mon dossier squelettes.
Dans le fichier inclure/head.html, je copie ce code juste avant tous les appels des fichiers css présent dans ce fichier :

[ (#REM) Feuille de style du framework 960.gs ] <link rel="stylesheet" href="[(#CHEMIN{reset.css}|direction_css)]" type="text/css" media="all" /> <link rel="stylesheet" href="[(#CHEMIN{text.css}|direction_css)]" type="text/css" media="all" /> <link rel="stylesheet" href="[(#CHEMIN{960.css}|direction_css)]" type="text/css" media="all" />

Body.html

Mon design n'utilise pas de zone « extra » de base. En tout cas, pas sur la page contenu/page-sommaire.html. L'appel aux extras se fera dans le fichier contenu/type.html (article.html, breve.html, mot.html, etc.)

En voici le code source spipien :

<div id="page"> <div id="culotte" class="wrapper"> <div class="container_16 clearfix"> <div class="grid_4"> <div id="entete"> <INCLURE{fond=inclure/entete,env} /> <div class="clear"></div> </div> <div id="nav"> <INCLURE{fond=inclure/barre-nav,env} /> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="grid_12"> <div id="bouton" class="grid_8 prefix_4 omega"> <INCLURE{fond=inclure/navigation-secondaire,env} /> <div class="clear"></div> </div> <div id="contenu"> <INCLURE{fond=contenu/#ENV{type},env} /> </div> <div class="clear"></div> </div> </div> </div> <div id="pied"> <div class="wrapper"> <div class="container_16"> <INCLURE{fond=inclure/pied,env} /> <div class="clear"></div> </div><!-- fin container_16 --> </div><!-- fin wrapper--> </div> </div>

À noter : la zone de contenu est dans un grid_12. De ce fait, si nous utilisons des grid_X dans cette zone, nous devrons attribuer des alpha et/ou omega selon la position en premier ou dernier dans la colonne. Cela a pour effet d'enlever les margin-left ou margin-right.

J'ai gardé le même principe d'INCLURE pour mes besoins spécifiques : inclure/navigation-secondaire
Ce dernier fait appel à ma petite barre de navigation contenant : le lien vers la page d'accueil, lien vers mon CV, lien vers mes informations générales telles que les conditions générales, la page de contact et enfin ma barre de recherche.

Jusque là, rien de bien « difficile ».

Le contenu

En tout premier lieu, on va commencer par éditer le fichier contenu/page-sommaire.html. Il est la vitrine du site, et conditionnera les autres pages. Ses lignes de codes sont très simple :

<B_articles> <div class="liste articles"> #ANCRE_PAGINATION <ul class="liste-items"> <BOUCLE_articles(ARTICLES){id_secteur=1} {!par date} {pagination 9}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique,id_article,position=#GET{position},grille=grid_4} </BOUCLE_articles> </ul> [<p class="pagination">(#PAGINATION{precedent_suivant})</p>] </div> </B_articles>

Rien de plus.

La subtilité vient de inclure/article-resume-rubrique.html. Vous pouvez voir des paramètres particuliers qui vont me servir selon la page :

[(#SET{imglargeur, [(#ENV{imglargeur}|sinon{220})]})] [(#SET{imghauteur, [(#ENV{imghauteur}|sinon{220})]})] <BOUCLE_articles(ARTICLES) {id_article} {statut?}> <li class="item hentry[ (#ENV{grille})][ (#ENV{position})]" id="art#ID_ARTICLE"> <div class="bordure fdblanc arrondi">[(#SET{alt, [(#TITRE|attribut_html)]})] <div class="logo"><a href="#URL_ARTICLE"><BOUCLE_documents(DOCUMENTS) {id_article}{par date,id_document}{extension IN jpg,gif,bmp,png}{0,1}>[(#LOGO_DOCUMENT**|image_passe_partout{[(#GET{imglargeur})],[(#GET{imghauteur})]}|image_recadre{[(#GET{imglargeur})],[(#GET{imghauteur})],top}|inserer_attribut{'class','spip_logos'}|inserer_attribut{'alt',#GET{alt}})]</BOUCLE_documents></B_documents>[(#LOGO_ARTICLE_NORMAL||image_passe_partout{[(#GET{imglargeur})],[(#GET{imghauteur})]}|image_recadre{[(#GET{imglargeur})],[(#GET{imghauteur})],top}|inserer_attribut{'class','spip_logos'}|inserer_attribut{'alt',#GET{alt}})]<//B_documents></a></div> <div class="titre"><a href="#URL_ARTICLE">[(#TITRE)]</a></div> <div class="info-publi">[<abbr class="published" title="[(#DATE|date_iso)]">(#DATE|nom_mois)[ (#DATE|annee)]</abbr>]</div> [<div class="[(#EDIT{intro})] introduction entry-content">(#INTRODUCTION|couper{150}|replace{' :',' :'})</div>] <div class="lire-la-suite"><a class="lire-la-suite" href="#URL_ARTICLE"><:zpip:lire_la_suite:></a></div> </div> </li> </BOUCLE_articles>

Il y a 2 #SET importants. Ils déterminent la largeur et la hauteur de mes vignettes.

#SET : il est configuré grâce aux paramètres imglargeur et imghauteur. On y met une valeur de sécurité si l'un des paramètres n'est pas renseigné.
[ (#ENV{grille})] : renseigne sur quelle grille va s'adapter mon bloc.
[ (#ENV{position}] : renseigne tour à tour si je suis en début de colonne ou en fin de colonne (alpha ou omega ou rien…). Je le conditionne dans contenu/page-sommaire.html avec un #COMPTEUR_BOUCLE|alterner{…}
image_passe_partout : mon filtre préféré pour les images, couplé à image_recadre. Dans ces 2 filtres, j'applique ma largeur et ma hauteur déterminées par les #SET.

Voilà ! Le site est prêt ! Si si, je vous jure ! On a fait le plus dure. Le reste n'est que la déclinaison de ce même principe…
Pour chaque rubrique, ou presque, j'ai un gabarit spécifique que j'applique grâce au plugin Compositions.

Déclinaisons

Pour ma rubrique Savoir-faire, j'ai un squelette dédié : contenu/rubrique-services.html.
C'est le meilleur exemple pour la réutilisation de mon modèle inclure/article-resume-rubrique.html. Bon… J'avoue, je l'ai un peu modifié en réel car je n'ai pas besoin de la date ni même de l'auteur sur ces pages. Un display:none ne me suffisait pas…

Donc, dans contenu/rubrique-services.html, j'ai fait une boucle pour chaque sous rubrique pour les afficher différemment. Rien de complexe de ce fait, je ne l'illustre pas car un basique en boucle SPIP. Ma première boucle utilise cette inclusion :

<BOUCLE_articlesinternet(ARTICLES){id_rubrique} {!par date}>[(#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} </BOUCLE_articlesinternet>

Explications :

#GET{position} : ça n'a pas changé de sa première utilisation. [(#COMPTEUR_BOUCLE|alterner{' alpha',' omega'})] défini la position de mon bloc ;
Le paramètre grille : je nomme expressément ma grille à grid_6 pour que je sois à l'affichage sur "2 colonnes" ;
Le paramètre imglargeur : je donne la largeur à laquelle mon logo sera redimensionné, 340 px qui correspondent à la largeur d'un grid_6 ;
Le paramètre imghauteur : je donne la hauteur à laquelle mon logo sera redimensionné, 220 px ;

Vous pouvez vérifier ce que ça donne ici

Le deuxième appel
Pour ma 2ème sous-rubrique, je fais l'appel ainsi :

<BOUCLE_articlesdesign(ARTICLES){id_rubrique} {!par date}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique,id_article,position=#GET{position},grille=grid_4} </BOUCLE_articlesdesign>

Là, pas de changement existentiel. On est sur 3 colonnes, soit des grid_4. Pas la peine de renseigner la largeur et la hauteur de ma vignette car les nombres par défaut me conviennent sur cette grille.

Et enfin…
Je fais un 3ème et dernier appel à cet inclure pour les articles de ma rubrique (et plus ses sous-rubriques) :

<BOUCLE_articles(ARTICLES){id_rubrique} {!par date}> #INCLURE{fond=inclure/article-resume-rubrique,id_article,position="alpha omega",grille="grid_10 prefix_1 suffix_1",imglargeur=580} </BOUCLE_articles>

Le but de cet appel est d'afficher sur une plus grande largeur les articles de la rubrique. On est sur un grid_10. Je lui rajoute un prefix_1 et un suffix_1 pour que la colonne soit centrée dans ma zone de contenu.
La position est en alpha ET omega car 10+1+1=12. Les margin-left et margin-right sont alors superflus.

Conclusion

Vous pouvez voir que ce n'est pas compliqué de réaliser un squelette pour SPIP sur les modèles :

Z-dist ;
Compositions ;
et enfin 960.gs.

Pour pousser l'exemple, un autre article sera publié dans peu de temps sur les quelques paramètres à modifier pour en faire un squelette dédié aux smartphones. Cette déclinaison m'a pris 1 heure de mon temps maximum.

Le tout est de bien pensé à votre squelette, comment vous simplifier la tâche par la suite. C'est le conseil que je peux vous donner.

Pour aller plus loin

Voici quelques lectures supplémentaires :

image_passe_partout : http://www.spip.net/fr_article4562.html ;
image_recadre : : dans le paragraphe "Recadrer une image" http://www.spip.net/fr_article3327.html ;
Zpip et la création rapide de pages ;
960.gs : le site officiel ;

Teddy Payet, millésime 2012

Teddy Payet — 2011-12-27T00:45:25Z

Et voilà, avec la nouvelle année approchant, mon site fait peau neuve.
Il était temps qu'un changement arrive sur ce site. Mais ce n'est pas qu'esthétique. En effet, cette nouvelle version apporte une nouvelle rubrique : La Réunion et Spip. Cette dernière est un annuaire des sites internet de la Réunion portés par SPIP, qu'ils soient récents ou non.

- Développement / SPIP, Photoshop, Traitement automatique des images, XHTML, CSS, Web Design, MySQL, PHP, Développeur Web, Intégrateur, Graphiste, Bénévole, SVN

La Finance Pour Tous

Teddy Payet — 2011-04-12T13:02:44Z

La Finance Pour tous est un Institut pour l'Education Financière du Public (IEFP). Ce site a été réalisé par Gaspard de Freelancis.com en SPIP 1.9.2
Ma tâche a été de mettre à jour le site en SPIP 2.1.9 notamment pour l'utilisation du plugin SPIP-Listes pour mieux gérer leu base de données d'abonnés conséquente.

- Développement / SPIP, Traitement automatique des images, XHTML, CSS, Web Design, MySQL, La Finance Pour Tous, PHP, Développeur Web, Intégrateur, Freelance

RAMAU

Teddy Payet — 2011-02-21T09:00:00Z

Pour se travailler, je devais faire un portage du site vers la version SPIP 2 depuis une version 1.9.2 pour pouvoir améliorer les boucles des squelettes. L'aspect graphique était déjà en place, je n'ai fait qu'un petit nettoyage des CSS et du code html. Le serveur étant relativement ancien, nous avons fait la migration vers un serveur plus véloce, plus récent.

- Développement / SPIP, Traitement automatique des images, XHTML, CSS, Web Design, MySQL, RAMAU, Développeur Web, Intégrateur, Bénévole, Freelance, SVN

Squelette Infinity

Teddy Payet — 2011-01-27T11:42:15Z

Cet article est sur le site SPIP-Contrib pour la communauté SPIP.

Préambule

Ce squelette est le portage d'un thème Wordpress vers SPIP. Il a été réalisé par Yushi & Smashing Magazine qui nous ont autorisé son utilisation sous SPIP.

Licence

Ce squelette est publié sous licence CC BY-SA

Présentation

Ce squelette possède 3 colonnes fixes, une présentation des articles par vignettes, l'intégration des derniers messages de votre compte Delicious et/ou Twitter (réglables depuis l'espace d'administration)

Installation

Récupérer le squelette Infinity sur SPIP-Zone ou le zip ci-joint. Le plugin s'installe comme tout plugin.
Cliquer sur l'icône des outils à côté de son nom dans la page de gestion des plugins pour le configurer (cf. explications ci-dessous).

Nécessite

Ce squelette nécessite les plugins suivants :
– Le Squelette Zpip-dist ;
– cfg : références ;
– Menus ;

Il utilise aussi
– Comments 2 pour SPIP 2 ;
– Nuage (de mots-clés) ;

Configuration

Dans les 2 colonnes de droites, il est possible d'avoir les derniers messages de son compte twitter et son compte Delicious. Pour cela, il suffit d'aller à l'adresse ?exec=cfg&cfg=infinity pour renseigner les informations suivantes :
– l'affichage ou non du bloc twitter ;
– son identifiant Twitter ;
– le nombre de messages que nous désirons afficher ;
– l'affichage ou non du bloc Delicious ;
– son identifiant Delicious ;
– le nombre de messages que nous désirons afficher ;

Bien entendu, si vous n'avez aucun de ces comptes, il vous suffit de laisser "non" coché pour l'affichage de chacun.

Les vignettes

Ce squelette affiche les articles grâce au logo de ces articles. De ce fait, il faut respecter une taille minimale de 235 x 150 px. Ainsi, la vignette occupera tout l'espace prévu.

Todo-List

– internationaliser le squelette

Temps-Libre Magazine / phase 1

Teddy Payet — 2010-03-23T08:43:07Z

Temps-Libre est un magazine pour les senior présentant des activités, des bons plans, des voyages, etc.
Le travail, en phase 1, a été de réaliser la mise à jour de SPIP 1.9.2c vers SPIP 2 et ajout de nouvelles fonctionnalités :
– commentaires ;
– flux RSS ;
– Vidéos ;
– envoi d'articles à des amis ;
– enregistrement d'articles en PDF ;
– mise en page simple alternative pour impression ;
– gestion de bannières publicitaires ;
– etc.
Une refonte esthétique a été réalisé en axant (…)

- Développement / SPIP, Traitement automatique des images, XHTML, CSS, Dreamweaver, Graphic Design, Web Design, MySQL, Seniorcom, Développeur Web, Intégrateur, Freelance

Le Fil de la Marianne

Teddy Payet — 2010-01-12T10:14:41Z

Portage et corrections d'un squelette dédié à la syndication d'articles (flux RSS) pour SPIP. Amélioration du squelette initiale : Intégration des plugins : Bannières (Gestion de bandeaux publicitaires), Notation d'éléments ; Squelette d'archives pour retrouver les articles publiés à une date ; Ajout d'un squelette spécifique pour afficher un article syndiqué.

- Plugins / SPIP, Traitement automatique des images, XHTML, CSS, Web Design, Communauté SPIP, Développeur Web, Personnel, SVN

Thème "Pixel 1.9.8" pour Zpip

Teddy Payet — 2009-11-22T12:28:00Z

Portage du thème wordpress vers SPIP grâce au plugin Zpip.
Un thème sombre en 2 colonnes. Menu déroulant par survol. Mise en page avec une largeur fixe de 960px (560px pour la colonne principale et 340px pour la colonne de droite.) Présentation
Adapté de http://wordpress.org/extend/themes/pixel, pour le plugin Zpip par Teddy Payet, sous licence GPL 2.

- Plugins / SPIP, XHTML, CSS, Dreamweaver, Web Design, Communauté SPIP, Intégrateur, Personnel, SVN