Soluo, mise en place de plateformes de blogs WordPress MU et intranets métier » Technique http://soluo.fr Soluo est spécialisée dans le déploiement de la plateforme de blogs WordPress MU, sites WEB2.0 ainsi que dans la réalisation d’intranets métiers riches. Thu, 12 Jan 2012 15:53:10 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Faire varier le format d’une date avec CSS et les media-queries http://soluo.fr/2011/08/faire-varier-le-format-dune-date-avec-css-et-les-media-queries/ http://soluo.fr/2011/08/faire-varier-le-format-dune-date-avec-css-et-les-media-queries/#comments Thu, 11 Aug 2011 13:01:26 +0000 raphaelle http://soluo.fr/?p=372 Nous allons voir comment dans un blog « responsive » on peut afficher un format de date différent, comme par exemple avoir tantôt le mois en toutes lettres (ex : Septembre), tantôt l’abréviation du mois (ex : SEP), le tout en gardant une syntaxe HTML propre. Voir l’exemple Rappel sur le design « responsive » (ou « réactif ») : il s’agit [...]]]>

Nous allons voir comment dans un blog « responsive » on peut afficher un format de date différent, comme par exemple avoir tantôt le mois en toutes lettres (ex : Septembre), tantôt l’abréviation du mois (ex : SEP), le tout en gardant une syntaxe HTML propre.

Voir l’exemple

Rappel sur le design « responsive » (ou « réactif ») : il s’agit d’utiliser les media-queries pour s’adapter à la taille du device et/ou du navigateur de manière intelligente et ergonomique. Pour plus d’infos, voir cet article sur les media-queries par Alsacréations.

Nouveau site, nouveaux challenges

Cet été nous préparons la refonte du site de soluo.fr. En fait, plus qu’une refonte, nous refaisons tout !

Notre nouveau site sera « responsive » (ou réactif), comme le site de Secri Gestion dont nous avons parlé dans des articles antérieurs.

Pour le nouveau site, nous avons choisi de séparer le blog. Il reprendra la charte graphique du site mais aura une structure et un design différent.

Tout blog qui se respecte contient des articles, auxquels certaines données « meta » sont associées. En général il y a au moins une date de publication et un auteur. L’article peut aussi être catégorisé et taggué par exemple.

Concentrons nous sur la date de publication d’un article. Notre blog sera lui aussi réactif, c’est à dire que son interface va s’adapter à la taille du navigateur et de l’appareil utilisé pour le visualiser.

Dans mon design « grand format », c’est à dire pour écrans d’ordinateurs classiques, j’ai choisi de montrer la date comme sur un petit bloc-calendrier. Je veux que l’abréviation du mois en 3 lettres s’affiche en haut, au dessous duquel on verra le jour en gros, puis l’année en plus petit, comme sur cette image :

date d'un article en format bloc-calendrier

Facile, sauf que dans le design pour petits formats (pour les smartphones par exemple) je veux montrer la date d’une autre manière. Le tout s’afficherait sur une ligne avec jour, mois, année, comme ceci :

date d'un article sur une ligne

Positionner les mêmes éléments de manières différentes ne me fait pas peur. Avec les media-queries, c’est facile. Dans le premier cas on peut se servir des positions absolute / relative, et dans le second cas, on laisse les éléments inline se positionner les uns après les autres naturellement.

Le problème : le format de la date

Je ne suis pas développeuse, mais je me doute que si je demande à mon collègue développeur de me fournir 2 formats de date différents selon que certaines media-queries sont déclenchées ou pas, il va me regarder de travers.

Une solution serait d’avoir la date 2 fois dans le code, dans 2 formats différents. Dans un cas on masque l’un, ou l’autre.

Cette solution ne me satisfait pas car j’aime que mon code reste propre.

J’ai posé la question sur Twitter et on m’a suggeré le pseudo-element :after et la propriété content de CSS.

Même si je n’ai pas tout à fait compris la suggestion car je ne souhaitais pas utiliser de lien, cela m’a donné une bonne piste.

J’ai aussi demandé l’avis de la communauté de Sitepoint sur leur forum, et j’y ai posté ma solution (English)

La solution : utiliser l’attribut TITLE

La solution qui me parait la meilleure est de générer la date dans 2 formats différents, du moins pour le mois, qui est l’élément problématique ici.

La balise contiendra le nom entier du mois, et l’attribut TITLE contiendra l’abréviation en 3 lettres.

Après il suffit d’un peu de CSS avec des media-queries pour afficher l’un ou l’autre.

Voici le code que j’ai écrit assez rapidement. Je ne suis pas contente de la manière dont je cache le mot « juillet », je pense qu’on peut mieux faire. Mais ça marche !


<head>

<style type="text/css">

.dateBox {
	font-family: trebuchet ms, helvetica, arial;}

@media screen and (min-width: 800px) {
.dateBox {
	-moz-box-shadow: 2px 2px 0 #dcdcdc;
	-webkit-box-shadow: 2px 2px 0 #dcdcdc;
	box-shadow: 2px 2px 0 #dcdcdc;

	background: #eee;
	color: #000;
	font-size: 14px;
	overflow: hidden;
	padding: 15px 2px 2px;
	position: relative;
	text-align: center;
	width: 50px; }

.day {
	font-family: georgia, serif;
	font-size: 34px; }

.month {
	color: #eee;
	left: 3px;
	margin-top: -15px;
	position: absolute;
	text-transform: uppercase;
	top: 3px;
	width: 50px; }

.month:after {
	color: #000;
    content: attr(title);
    display: block; }
}

@media screen and (max-width: 800px) { 

.dateBox {
	color: #666;
	font-size: 12px;
	font-style: italic;}

}

</style>
</head>
<body>

<div class="dateBox">
	<span class="day">12</span>
	<span title="JUL" class="month">juillet</span>
	<span class="year">2011</span>
</div>

Pour voir comment ça marche, redimmensionnez la fenêtre de votre navigateur.

Voir l’exemple

N’hésitez pas à me faire part d’améliorations éventuelles, notamment pour la manière de cacher le contenu de la balise « month ».

Note sur la compatibilité

Cet exemple ne fonctionnera que sur les navigateurs modernes, qui comprennent les media-queries. C’est un petit essai que j’ai fait rapidement, sans me soucier de la compatibilité avec mon très cher Internet Explorer (6, 7 et 8). Cependant il est tout à fait possible de faire fonctionner tout ça sur IE en utilisant un outil tel que 320 and up qui inclut des fichiers javascript.

Credits : merci à IconSweets pour l’icône Calendrier.

]]> http://soluo.fr/2011/08/faire-varier-le-format-dune-date-avec-css-et-les-media-queries/feed/ 5 Installer WordPress MU en 5 étapes http://soluo.fr/2009/03/installer-wordpress-mu-en-5-etapes/ http://soluo.fr/2009/03/installer-wordpress-mu-en-5-etapes/#comments Mon, 16 Mar 2009 15:00:45 +0000 Thibaut http://soluo.fr/?p=237 Il y a beaucoup d’articles sur WordPress MU notamment sur les plateformes de blogs qui utilisent WordPress MU. Certaines des installations faites deviennent des plateformes multi-sites, d’autres des plateformes multi-blogs, comme celle sur l’entrepreneuriat féminin, ou ce site communautaire. Mais les ressources sur l’installation d’une instance de WordPress MU ne sont pas légion. Il existe [...]]]>

Il y a beaucoup d’articles sur WordPress MU notamment sur les plateformes de blogs qui utilisent WordPress MU. Certaines des installations faites deviennent des plateformes multi-sites, d’autres des plateformes multi-blogs, comme celle sur l’entrepreneuriat féminin, ou ce site communautaire. Mais les ressources sur l’installation d’une instance de WordPress MU ne sont pas légion. Il existe peu de documentation en anglais, encore moins en français. Voici donc les 5 étapes d’installation de WordPress MU. Je partirai du principe que vous êtes sur un serveur dédié, avec accès SSH.

Télécharger WordPress MU sur le site officiel

La dernière version de WordPress MU est disponible en téléchargement sur le site officiel de WordPress MU.

Extraire les fichiers du package WordPress MU

Maintenant que vous disposez de la dernière version (passée depuis peu en 2.7, comme celle de WordPress), vous pouvez la copier sur votre serveur. Soit par FTP, et dans ce cas je vous conseille FileZilla. Soit en ligne de commande :

scp packageWPMU.zip user@mondomaine.tld:/monrépertoire

Votre package téléversé (version française de « uploadé ») sur votre serveur, vous pouvez l’extraire.
Ne pas créer de fichier wp-config.php, l’installateur s’en chargera plus tard dans notre procédure.

Configurer la zone DNS de votre domaine

Si vous comptez installer WordPress MU sur le domaine mondomaine.tld, alors la zone DNS de votre domaine (mondomaine.tld) doit avoir un champ A avec comme valeur l’adresse IP de votre serveur. Jusque là, tout est normal. Si vous souhaitez réaliser une installation de WordPress MU en sous-domaine (blog1.mondomaine.tld, blog2.mondomaine.tld, …), ce qui est conseillé, alors vous devrez insérer dans votre zone DNS un second champ A, indiquant que tous les sous-domaines de mondomaine.tld pointent également vers mondomaine.tld. J’ai pu constater que cet ajout n’est pas possible chez tous les hébergeurs, notamment chez OVH. Pas de problème en revanche sur Gandi :

La propagation DNS peut prendre jusqu’à 48h. Pour ne pas à avoir à attendre ce délai, vous pouvez modifier votre fichier hosts (fichier qui permet de forcer la conversion nom de domaine <=> Adresse IP). Sous Linux/Mac, c’est le fichier /etc/hosts , et sous windows, il s’agit du fichier c:\windows\system32\drivers\etc\ :
127.0.0.1 mondomaine.tld

Configurer son serveur Apache pour qu’il redirige correctement les requêtes de votre domaine

Configuration avec les hôtes virtuelles de Apache

Une fois la configuration de votre zone DNS faite, les requêtes sur http://mondomaine.tld arrivent bien sur votre serveur. Mais celui-ci doit être configuré pour écouter ce nom de domaine et aller chercher dans le répertoire de l’installation de WordPress MU correspondant. Même si cette configuration peut être faite via le fichier central d’Apache (httpd.conf), nous conseillons d’utiliser le fichier des hôtes virtuels d’Apache (qui consiste à faire une simple inclusion de ce fichier dans httpd.conf). Dans ce fichier des hôtes virtuels, nous conseillons la configuration suivante :

<VirtualHost *:80>
 ServerAdmin wordpressMU@mondomaine.tld
 DocumentRoot /repertoire/de/mon/installation/wordpress/mu
 ServerName mondomaine.tld
 ServerAlias *.mondomaine.tld
 ErrorLog logs/mondomaine.tld-error_log
 CustomLog logs/mondomaine.tld-access_log common
</VirtualHost>
<Directory "/repertoire/de/mon/installation/wordpress/mu">
 Options Indexes MultiViews FollowSymLinks
 AllowOverride All
 Order allow,deny
 Allow from all
</Directory>

Tester la configuration de Apache puis redémarrer

En root, tester la nouvelle configuration puis redémarrer :

apachectl configtest
apachectl restart
# ou
apachectl graceful

Créer la base de donnée

Se connecter à son interface PhpMyAdmin et créer la base WordPress MU.

Ne pas créer le fichier wp-config.php !!

Pour poursuivre l’installation, accédez à la racine de votre site via votre navigateur (http://mondomaine.tld). Contrairement à WordPress où il faut copier le fichier wp-config-sample.php en le nommant wp-config.php, l’installateur de WordPress MU prend en charge cette opération. Attention, l’installation ne fonctionnera pas si vous avez créé vous même ce fichier. La suite de l’installation vous demande des informations comme les paramètres de connexion à la base de données ou le nom de la plateforme de blogs. Si toutes les étapes précédentes ont été réalisées, WordPress MU devrait maintenant être installé correctement.
Bonne installation de WordPress MU !

Quelques ressources :

]]> http://soluo.fr/2009/03/installer-wordpress-mu-en-5-etapes/feed/ 20