Comme à peu près tous les 6 mois depuis que je tiens ce blog, j’ai fait une grosse mise à jour du design du blog. Voici une description des différentes modifications.

Pour commencer, j’ai essayé de faire un vrai logo.  Fini le « arnaud-k » en texte avec deux ou trois effets photoshop… Ce logo, avec des proportions plus simple à intégrer, je vais pouvoir m’en servir sur mes divers sites.

J’ai voulu un design plus clair, plus travaillé et mieux fini que le précédent (qui, je dois bien l’avouer, avait été fait à l’arrache). J’ai donc pris mon temps pour faire la maquette (étalé sur 2 semaines), et l’intégration à WordPress (intensif sur un week-end).

J’ai également décidé d’adopter un code couleur pour les principales catégories / principaux mots-clefs pour permettre d’identifier plus rapidement différents articles sur la page d’accueil :

• Bleu pour JQuery
• Jaune pour les Tutoriaux
• Vert pour le Web Design
• Rouge pour les actualités du web

J’ai également utilisé la propriété CSS @font-face pour les différents titres présents sur le site avec la méthode décrite dans mon précédent article.

Je sais qu’il reste encore un ou deux détails à corriger, mais ça sera fait normalement dans la semaine ! Un autre article devrait faire suite à celui, où j’aborderai plus le côté technique pour l’intégration dans WordPress et de ce que j’ai pu utiliser ici. N’hésite pas à donner ton avis / critiquer / faire des compliments.

Sur le même sujet :

1. Le blog, le retour !

Encore un nouveau thème pour le blog, je sais que le dernier datait d’il y a moins de 3 mois… Mais il ne me plaisait déjà pu et j’avais d’autres idées en tête !

Pour celui là, que j’ai également conçu et intégré moi-même, j’ai assayé de faire le plus simple et le plus propre possible. Un fond de page uni, un fond de contenu uni, des icônes monochromes… Les éléments les plus travaillés étant le logo et les titres de la sidebar (que j’ai au passage allégée). Que dire de plus ? A part que j’attends ton avis sur ce design ! Et si vous constatez des bugs graphiques, des portions non traduites, n’hésitez pas à me le signaler dans les commentaires.

Pour parler un peu technique, je suis parti d’un thème WordPress minimaliste, avec le moins de styles différents et le plus simple possible afin de repartir (du plus proche possible) de zéro. Avec la base et le codex WordPress pour personnaliser les éléments, c’est allé plus vite que je ne le pensais. Maintenant j’ai plus qu’à attendre de voir si le nouveau design n’a pas d’impact négatif sur le référencement du blog !

Pas encore de billet sur le même sujet !

Dans l’admin de WordPress (qui utilise JQuery), il y des légers effets de couleurs, d’apparition. Je trouve qu’ils ont un rendu qui fait assez classe.

Je te propose donc un tutorial pour faire plus ou moins le même effet. Pour l’effet de transition de couleur il est nécessaire d’avoir le plugin JQuery.color (dispo ici) et le plugin JQuery.delay pour une meilleure fluidité (au moment de l’appel en Ajax, dispo ici)

Voir la démo

Comme d’habitude, on commence par inporter la librairie JQuery et les plugins nécessaires :

1
2
3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>

Ensuite on prépare la structure HTML des éléments à supprimer. J’ai choisi des paragraphes (balises <p>) pour que ce soit le plus simple possible, mais libre à vous de le changer et par conséquent de changer les sélecteurs JQuery.

1
2
3
4
5
6
7
8
9
10

<p>Premier élément <a href="#" class="supprimer" rel="1">Supprimer</a></p><!-- on place dans l'attribut rel l'id de l'element à supprimer -->
<p>Deuxième élément <a href="#" class="supprimer" rel="2">Supprimer</a></p>
<p>Troisième élément <a href="#" class="supprimer" rel="3">Supprimer</a></p>
<p>Quatrième élément <a href="#" class="supprimer" rel="4">Supprimer</a></p>
<p>Cinquième élément <a href="#" class="supprimer" rel="5">Supprimer</a></p>
<p>Sixième élément <a href="#" class="supprimer" rel="6">Supprimer</a></p>
<p>Septième élément <a href="#" class="supprimer" rel="7">Supprimer</a></p>
<p>Huitième élément <a href="#" class="supprimer" rel="8">Supprimer</a></p>
<p>Neuvième élément <a href="#" class="supprimer" rel="9">Supprimer</a></p>
<p>Dixième élément <a href="#" class="supprimer" rel="10">Supprimer</a></p>

Enfin, la plus grosse partie : le code JQuery. Les commentaires sont directement dans le code (ils sont également dans le code de la page de démo).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(document).ready( function () {
	$('a.supprimer').click(function(e) { // quand on clique sur un lien supprimer
		e.preventDefault(); // annule l'effet du lien pour pas recharger la page
		var id = $(this).attr("rel"); // on recupere l'id de l'element a supprimer (qui est dans l'attribut rel du lien)
		if(confirm('Supprimer cet élément ?')) { // on demande une confirmation
			var parent = $(this).parents("p"); // on recupere le paragraphe parent du lien (qui contient l'element a supprimer)
			$.ajax({ 
				type: "POST", // les variables seront passées en POST (comme d'hab pour les recuperer en php $_POST[id] par exemple)
				url: "suppr.php", // on appelle le fichier php suppr.php qui supprimer l'element de la base de donnees (dans mon cas, ce fichier est vide)
				data: "id="+id+"&act=suppr", // variable que l'on passe au fichier php
				beforeSend: function() {
					parent.animate({'backgroundColor':'#FF3F47'},300); // animation a faire avant l'envoi (on change le fond avec un fondu jusqu'à la couleur #FF3F47)
				},
				success: function(msg){ // en cas de succes
					$(this).delay(1200,function(){ // on attend 1.2 secondes
							parent.slideUp(500,function() { // et on fait disparaitre l'element en l'enroulant
							});
						});
				}
			});
		}
	});
});

Pas encore de billet sur le même sujet !

SiteBuzz est un site permettant à tout le monde de faire un communiqué. Il est principalement utilisé pour annoncer la sortie ou la mise en ligne d’un nouveau site ou un nouveau service en ligne. Je ne sais pas encore ce qu’il peut apporter exactement. Je vais le tester pour annoncer la sortie de php fonctions dès que j’ai fini ce billet. J’éditerai ce message si l’impact a été positif.

En fait SiteBuzz sous la forme d’un blog WordPress sur lequel n’importe qui peut s’inscrire pour y rédiger un ou des articles. Il n’y a pas vraiment de système de classement, donc il reste en une que le temps d’y voir apparaître des articles plus récents.

Pas encore de billet sur le même sujet !

Quand on veut créer un blog, la première question technique qui se pose est : vais-je utiliser une plate-forme de blog ? et si oui laquelle ? Sur le marché deux grosses plate-formes sont disponibles : dotclear et wordpress. Je ne vais pas parler des solutions entièrement en ligne telles blogspot, skyblog, overblog… car celles-ci sont souvent beaucoup plus limitées en fonctionnalités.

J’ai eu l’occasion de découvrir les 2 outils de gestion de blog. J’utilise wordpress pour ce blog et j’utilise dotclear pour le blog de g-ski ou celui d’Awelty. Je vais donc livrer ici les diverses réflexions que j’ai pu me faire. Cette analyse est tout sauf exhaustive et seulement selon mes critères.

Tout d’abord, les 2 sont entièrement traduits en français (c’est, de plus, la langue de base de Dotclear). WordPress a fait de gros progrès dans ce sens ces dernières années. Pour la création du blog, les 2 outils d’installation sont bien faits et bien guidés.

L'accueil de l'interface d'administration de Dotclear

Une fois le blog installé, il faut créer des billets ! Ici, je préfère assez clairement l’outil et l’éditeur que propose WordPress. En effet, l’éditeur de texte sur WordPress propose plus de personnalisation pour la mise en forme du texte. Et c’est peut-être un détail, mais j’ai l’habitude d’utiliser des raccourcis clavier pour mette en gras, italique ou souligné des éléments, et il fonctionnent que sous WordPress. L’outil d’upload de média est aussi mieux fait sous WordPress. Pas de nouvelles fenêtres qui s’ouvre comme sous Dotclear, mais plutôt une « pop-up JQuery » (avec la thickbox) qui s’ouvre dans la même fenêtre. Par contre le sélecteur de média de Dotclear permet de retrouver et d’intégrer facilement des images ou photos que l’on a utilisé précédemment.

la page d'accueil du panneau d'administration de WordPress

Concernant l’interface globale d’administration, les deux sont équivalents pour moi. L’interface de WordPress est peut-être un peu plus claire et j’apprécie particulièrement l’utilisation de JQuery pour des petites animations (mise à jour, enregistrement…). En termes d’extensions, j’aime assez l’outil de d’installation directement en ligne que propose les 2 plate-formes de blog. Une fois de plus, une légère fonctionnalité de WordPress fait la différence : on peut rechercher des extensions directement depuis l’interface d’administration (recherche sur le site de WordPress recensant toutes les extensions).

En terme de personnalisation graphique, les 2 outils sont similaires. On retrouve avec les 2 plate-formes, des formulaires permettant directement d’éditer les fichiers du thème utilisé. Je n’ai pas de préférences particulières sur ce point.

Au final, après cette (mini-)analyse, je peux dire que je préfère WordPress. Même si les deux sont assez proches, WordPress propose systématiquement une petite fonctionnalité supplémentaire qui fait la différence !

Pas encore de billet sur le même sujet !