Alors bien sûr, ces services supposent que vous ayez au moins une couleur de base.

• DHTML Goodies : On commence par indiquer les valeurs de base de notre couleur (RGB / hexadécimal) et le service s’occupe du reste. Il nous présentera ainsi les couleurs complémentaires (triade, tetrade, analogic, monotone…) en quelques secondes. Il suffira ensuite de récupérer le code hexadécimal de la couleur pour travailler dessus.
• Color Scheme Designer : Très populaire auprès des créatifs, ce service vous propose la même chose que le site précédent mais avec beaucoup plus de détails. Très interactif, l’outil vous permettra de jongler très facilement entre les différentes couleurs proposées. Seul bémol, il ne fonctionne que sur des valeurs hexadécimales.
• ColorBlender : Ce service est un peu différent des précédents dans la mesure où il va vous permettre de créer des palettes de couleur. Un peu moins accessible que les autres, il offre cependant plusieurs options d’export intéressantes pour récupérer facilement sa palette sur Photoshop ou Illustrator. Notons qu’il est également possible de recevoir toutes les valeurs RGB des couleurs de sa palette par mail.
• Infohound Color Schemer : Doté d’une interface à la fois très simple et très dépouillée, cet outil se concentre sur l’essentiel. On indique donc la valeur hexadécimale ou RGB de sa couleur et ce dernier nous présente immédiatement les couleurs complémentaires qui s’accorderont le mieux.
• Kuler : Un service bien pratique qui nous vient tout droit des laboratoires Adobe. Avec cet outil, on peut bien évidemment trouver très facilement des couleurs complémentaires mais on peut aussi accéder aux palettes réalisées par les autres utilisateurs du service. Très pratique lorsqu’on manque d’inspiration.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Développer moins pour gagner plus

La plupart des développeurs vous diront qu’il faut tout coder soi-même, quitte à passer des nuits blanches devant son Notepad++. En ce qui me concerne, je pars du principe qu’il ne sert à rien de réinventer la roue et qu’il est préférable d’utiliser une solution fiable et éprouvée plutôt que de se risquer à coder un script tout seul dans son coin tard la nuit.

Cela dit, je ne suis plus webdesigner que développeur, hein…

A l’époque où j’ai souhaité intégré un diaporama sur Weedle, je me suis beaucoup renseigné sur le sujet. Développer un script de ce genre n’est pas difficile en soi. Ce qui est plus délicat, c’est de faire en sorte qu’il soit doté de toutes les fonctionnalités dont on a besoin, qu’il respecte les standards établis et qu’il soit compatible avec tous les navigateurs du marché.

EasySlider réunit justement toutes ses qualités et c’est la raison pour laquelle c’est vers cet outil que je me suis tourné.

2. EasySlider, les fonctionnalités du script

En plus d’être respectueux des normes et d’être compatible avec les différents navigateurs web du marché, EasySlider propose de nombreuses options de personnalisation. Il est ainsi possible de déterminer la rapidité d’exécution des différents slides, d’opter pour deux systèmes de navigation différents (précédent / suivant et contrôles numériques) et bien d’autres choses encore.

Voici d’ailleurs une liste non exhaustive des options du script :

• Deux systèmes de navigation : précédent / suivant, contrôles numériques.
• Possibilité d’afficher / de masquer les différents contrôles.
• Possibilité de choisir l’ID des composantes du système de navigation.
• Deux orientations possible pour le diaporama : horizontale ou verticale.
• Possibilité de choisir la rapidité d’exécution des slides.
• Possibilité de définir un défilement continu ou pas.

Pour avoir plus d’informations sur le sujet, je vous encourage vivement à aller consulter la page dédiée du plugin. N’hésitez pas non plus à aller consulter celles des versions précédentes, elles contiennent de nombreuses informations qui vous permettront de mieux comprendre le fonctionnement de notre EasySlider.

3. EasySlider, l’installer et l’utiliser

Maintenant que les présentations sont faites, nous allons pouvoir passer au vif du sujet et voir comment s’installe et s’utilise EasySlider. Pour se faire, vous aurez besoin d’un minimum de connaissances techniques et maîtriser le HTML ainsi que les CSS. Si ce n’est pas le cas, ce n’est pas grave, vous pouvez garder cet article dans un coin puisque je pense publier dans les semaines qui viennent des guides complets sur les bases du développement web.

3.1. Installer jQuery et  EasySlider :

Pour commencer, il est nécessaire de récupérer la dernière version du plugin sur la page dédiée. Une fois l’archive téléchargée, contentez-vous de la décompresser dans le dossier de votre site. Puis, ouvrez votre éditeur préféré ainsi que le fichier header.php si vous utilisez WordPress ou sinon le fichier de votre site qui va bien.

Placez-vous entre les balise <head> et </head> et insérez les deux lignes suivantes :

1
2

<script src="http://chemin-de-votre-site/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://chemin-de-votre-site/easySlider1.7.js" type="text/javascript"></script>

Deux choses à noter :

1. Il est primordial d’intégrer EasySlider après jQuery. Si vous ne le faites pas, alors le script ne pourra pas fonctionner.
2. Le chemin indiqué soit être complet. Attention, donc, si vous avez tendance à mettre vos fichiers JS dans un sous-dossier.

3.2. La base HTML + CSS :

A présent que jQuery et EasySlider sont bien installés, nous allons pouvoir commencer à préparer notre template HTML. Notons que les scripts qui suivent ont été volontairement allégés au maximum afin d’insister sur l’essentiel. Globalement, donc, vous aurez ensuite encore un peu de travail à faire au niveau de la mise en forme.

Côté HTML, c’est relativement simple puisqu’il suffit d’insérer les lignes qui suivent à l’endroit où vous souhaitez voir apparaître votre diaporama. Précisons juste que notre structure s’appuie essentiellement sur les listes.

1
2
3
4
5
6
7
8
9

<div id="diaporamali">
<ul>
<li >Mon premier slide</li>
<li >Mon second slide</li>
<li >Mon troisième slide</li>
<li >Mon quatrième slide</li>
<li >Mon cinquième slide</li>
</ul>
</div>

Au niveau des CSS, ce n’est guère plus compliqué, il suffit d’insérer ces lignes dans votre feuille de style. Notons le overflow: hidden placé sur nos listes. Sans lui, le diaporama ne pourra pas fonctionner correctement, il est donc indispensable. Notons également que votre conteneur et vos listes doivent avoir les mêmes dimensions.

1
2
3
4
5
6
7

div#diaporamali,div#diaporamali li {
display: block;
width: 500px;
height: 200px;
list-style-type: none;
overflow: hidden;
}

3.3. Le script jQuery :

Maintenant que notre structure est prête, il ne nous reste plus qu’une étape à accomplir : nous allons devoir insérer entre nos balises <head> et </head> le script qui nous permettra d’initialiser et de paramétrer notre diaporama. A toute fin utile, je préfère tout de même préciser un point important : ce script doit obligatoirement être inséré après jQuery et EasySlider.

1
2
3
4
5
6
7
8
9
10
11

<script text="text/javascript">
$(document).ready(function() {
        $("#diaporamali").easySlider({
		speed: 1200,
		pause : 10000,
		auto: true, 
		continuous: true,
		numeric : true
	});
});
</script>

Alors évidemment, libre à vous de personnaliser ce script à votre convenance. Ici, j’ai finalement repris le même script que celui qui anime le diaporama de Weedle : un défilement continu, une pause assez longue et un système de navigation numérique transformé en boutons afin de permettre aux internautes de se promener au travers des différents slides.

4. Et après ?

Voilà, cette courte présentation de EasySlider touche à sa fin. Je tiens à préciser que ce script n’est pas le seul du genre mais il a néanmoins le mérite d’être très simple à intégrer et très rapide à déployer. Et si vous avez des questions ou si vous souhaitez simplement remercier son auteur, n’hésitez pas à aller faire un tour chez lui.

Alors maintenant, il y a sans doute une question que vous devez vous poser, à savoir comment j’ai fait pour intégrer les images de mes articles dans ce diaporama. C’est une bonne question, et c’est la raison pour laquelle j’ai décidé d’insérer ci-dessous mon script complet. Comme vous le verrez, ce n’est pas très compliqué.

Le code HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="diaporamali">
<ul>
<?php
global $post;
$myposts = get_posts('numberposts=5&orderby=post_date&order=DESC');
foreach($myposts as $post) :
?>
<li style="background:url(<?php get_first_image($post->post_content); ?>)">
<a href="<?php the_permalink(); ?>" class="diaporamatitre"><?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>

Le code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

div#diaporamali {
border: 4px solid #dedede;
text-align: left;
}
div#diaporamali ul {
margin: 0;
padding: 0;
}
div#diaporamali, div#diaporamali li {
display: block;
width: 573px;
height: 170px;
list-style-type: none;
overflow: hidden;
}
a.diaporamatitre:link, a.diaporamatitre:visited, a.diaporamatitre:hover {
background: #9dd1eb;
color: #fff;
display: block;
font-size: 14px;
height: 22px; 
margin-top: 67px;
padding-left: 10px;
padding-top: 5px;
width: 358px;
}
a.diaporamatitre:hover {
opacity: 0.9px;
}
/* CONTROLES DIAPORAMA  */
ol#controls {
margin-left: 511px;
margin-top: 2px;
padding: 0;
}
ol#controls li {
background: url(img/bouton_diaporama.png) no-repeat;
display: block;
float: left;
height: 12px;
list-style-type: none;
margin-left: 2px;
padding: 0;
width: 12px;
}
ol#controls li a:link,ol#controls li a:visited,ol#controls li a:hover {
display: block;
text-indent: -9999;
height: 12px;
width: 12px;
}

Le script Javascript :

1
2
3
4
5
6
7
8
9
10
11

<script text="text/javascript">
$(document).ready(function() {
$("#diaporamali").easySlider({
		speed: 1200,
		pause : 10000,
		auto: true, 
		continuous: true,
		numeric : true
	});
});
</script>

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Lorsqu’on crée le design d’un site, on a très souvent recours à des images dans divers formats. Certains préfèrent le JPEG, d’autres le GIF, en ce qui me concerne cela a toujours été le PNG. Le problème, c’est que tous les navigateurs n’interprètent pas de la même manière les informations de colorimétrie de ces formats. Et l’on trouve souvent de grandes disparités entre un rendu sous Firefox et un rendu sous Internet Explorer. Bien heureusement, des solutions existent et PNG Optimizer en fait partie.

Car en effet, cet utilitaire entièrement gratuit (disponible uniquement sur Windows) va compresser vos images PNG et gérer les informations de colorimétrie qu’elles contiennent pour que le rendu soit le même d’un navigateur à un autre.

Une fois lancé, il suffit de glisser / déposer ses images sur la fenêtre du logiciel pour que ce dernier les compresse. Précisons que PNG Optimizer est très rapide et qu’il aura en plus le bon goût de renommer toutes vos images originales afin que vous ne les perdiez pas. En gros, il s’agit là d’un outil dont il ne faut pas avoir peur d’abuser et qui vous rendra de fiers services.

Note : Et n’hésitez pas à le mettre sur une clef USB pour pouvoir en disposer sur n’importe quel ordinateur. Oui, parce qu’il n’a pas besoin de s’installer, en plus…

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Note : Attention quand même parce que certaines de ces polices ne peuvent être utilisées dans le cadre professionnel. Tâchez donc de bien vous renseigner sur le sujet. Normalement, une mention explicite se trouve sur les fiches des polices.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Et on trouve vraiment de tout : des photographies retouchées, des éléments graphiques pour des sites web, des icônes, des modèles de formulaire et ainsi de suite. Globalement, toutes les ressources présentées sont de très bonne qualité. Point intéressant, plusieurs contributeurs participent à ce projet. Parmi eux, on trouve Jonno Riekwel et Jord Riekwel.

Précisons enfin que l’opération 365 PSD ne durera qu’un an.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Photoshop CS 4 de Pierre Labbe, présentation de l’ouvrage

Pour ceux qui ne le connaissent pas encore, Pierre Labbe est l’un des formateurs les plus connus dans l’univers de l’infographie. Il a déjà publié de nombreux livres chez Eyrolles sur Photoshop, Illustrator ou encore XPress et il est également chroniqueur sur Wisibility. Autant dire qu’il maîtrise bien le sujet et c’est ma raison pour laquelle j’ai immédiatement choisi son dernier livre lorsque mon partenaire Alapage m’a proposé cette opération.

En toute franchise, ce livre est l’un des meilleurs que j’ai pu lire sur Photoshop. Une fois de plus, Pierre Labbe a été jusqu’au fond des choses. Le contenu est très précis, très explicite et mis en valeur par une mise en page agréable et aérée. Point positif, les captures écran sont nombreuses, en couleurs, et nous permettent d’appréhender plus facilement les différents outils étudiés.

Concernant le contenu, justement, on peut dire que l’ouvrage est très complet et en voici la table des matières :

Partie 1 : La Creative Suite et Photoshop

1. Les nouveautés et l’interface
2. Les formats d’images
3. La gestion du travail (annuler et automatiser)
4. La gestion des fichiers avec Bridge
5. Le développement avec Camera Raw
6. La gestion des images avec Version Cue

Partie 2 : La préparation des images

1. Le réglage de la résolution
2. Le réglage de la taille de l’image
3. Le nettoyage et les retouches

Partie 3 : Les détourages

1. La réalisation d’une sélection
2. Le détourage avec des pixels (les couches)
3. Le détourage avec un tracé (les vecteurs)
4. Les autres techniques de détourage

Partie 4 : La correction des images

1. La gestion des couleurs
2. Les corrections automatiques et simplifiées
3. Les méthodes de correction avancées

Partie 5 : les calques

1. Le travail avec les calques
2. Les objets dynamiques
3. Les calques 3D
4. Les textes
5. Les effets de calque

Partie 6 : Le traitement des images

1. L’utilisation de couleurs, motifs ou dégradés
2. La création de dessins pixellisés
3. L’application d’un filtre

Partie 7 : la distribution des images

1. La préparation des images pour l’impression
2. La préparation des images pour le web
3. L’impression d’une image

Photoshop CS 4 de Pierre Labbe, le concours

Autant dire que cet ouvrage est vraiment exceptionnel. Je fouine dedans depuis plusieurs jours et j’avoue avoir appris de nombreuses choses sur Photoshop et découvert des fonctionnalités dont je ne soupçonnais même pas l’existence. Concrètement, donc, Photoshop CS 4 de Pierre Labbe est un livre incontournable, un livre monument que tous les graphistes, photographes et autres designers devraient absolument avoir sur leur table de chevet.

Et justement, je vous propose aujourd’hui d’en gagner un exemplaire. Pour se faire, ce n’est pas difficile puisqu’il suffit tout simplement de laisser un commentaire à la suite de cet article. A noter que vous avez également la possibilité de relayer ce dernier sur Twitter afin d’augmenter vos chances. Ensuite, c’est vendredi ou samedi que nous procéderons à un tirage au sort avec Random.org.

Bien évidemment, si vous ne pouvez pas attendre, alors il faut savoir que Photoshop CS 4 de Pierre Labbe est proposé à 42 € chez Alapage. Et je tiens une fois de plus à remercier mon partenaire pour son soutien.

EDIT :

Je viens de procéder au tirage au sort. Félicitations donc à Solène qui remporte cet excellent ouvrage et qui va recevoir en plus un mail de ma part d’ici les dix prochaines minutes. Et merci à tous pour votre participation.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Intégrer des vignettes de ses articles dans son thème WordPress a toujours été délicat. Certains ont opté pour les champs personnalisés, d’autres pour quelques lignes de code, mais le fait est que ces solutions n’ont rien de pratique pour les blogueurs qui débutent. Bien heureusement pour ces derniers, WP-Choose-Thumb change complètement la donne.

Pour en profiter, il suffit simplement de suivre les étapes suivantes :

1. On commence par télécharger et installer le plugin. Rien de bien compliqué. On précisera juste que vous pouvez installer directement WP-Choose-Thumb depuis votre interface d’administration : « Extension » > « Ajouter ».
2. On l’active en cliquant sur le lien qui va bien. Notons que j’ai eu l’occasion de tester ce plugin sur différentes configurations et que je n’ai pas été confronté à un seul problème de compatibilité.
3. On règle la taille de ses vignettes en passant par le menu « Réglages » > « Médias ». Pour se faire, il suffit d’indiquer les dimensions souhaitées au niveau de la taille des miniatures.

A présent que WP-Choose-Thumb est installé, actif et correctement configuré, vous allez pouvoir afficher les miniatures de vos articles n’importe où dans votre thème. Il vous suffira en effet d’utiliser la ligne de code suivante dans votre boucle :

<?php if(function_exists('wct_display_thumb')){ if(!wct_display_thumb()){ /* Optionally add code for no thumbnail. */  } } ?>

Et si vous souhaitez insérer vos vignettes en dehors de votre boucle, alors c’est pour les lignes suivantes qu’il faudra opter :

1
2
3
4
5
6
7
8
9

<?php
if(function_exists('wct_display_thumb')):
    $style = 'style="padding:5px;"'; // extra styling.
    $postId = $post->ID; // the id of the post.
    if(!wct_display_thumb($style, $postId)): 
    /* Optionally add code for no thumbnail. */
    endif;
endif;
?>

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Inspiré par l’application Notes de l’iPhone, le Notepad Theme est à la fois subtil et sobre. Mettant essentiellement l’accent sur le contenu, il mélange des nuances jaunes et marrons. Précisons, en outre, que les réseaux sociaux sont mis à l’honneur puisqu’ils se situent juste en dessous du titre du blog. Il faut bien l’avouer, leur emplacement est plutôt original, on n’a pas vraiment l’habitude de les croiser à cet endroit-là.

Pour le reste, le Notepad Theme est un concentré de plein de bonnes choses. On peut citer, dans le désordre :

• Une charte épurée, classieuse et qui pourra aussi bien convenir aux blogs personnels qu’aux blogs d’entreprise.
• Un menu déroulant mettant l’accent sur les pages et sur les sous pages.
• Des marges spacieuses mettant le contenu en valeur.
• Des icônes très propres pour souligner l’auteur, la catégorie, les tags ou encore le nombre de commentaires des articles.
• Des liens discrets et élégants.
• Un système de commentaire très aéré et parfaitement lisible.
• L’utilisation de propriétés CSS 3 afin d’alléger au maximum le thème.
• Le PSD du thème est fourni.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Précisons, en outre, que j’avais déjà publié à ce sujet avec plus de 200 icônes type web 2.0 à télécharger. D’après mes statistiques, vous avez été nombreux à accrocher à cette sélection et il était donc normal que je vous en propose une nouvelle. En espérant que cette dernière vous plaise, naturellement…

Et pour finir, précisons que cette sélection repose sur celle de Tutorial Freakz, découverte grâce à un très bon article de Blogmotion. Si ces quelques icônes ne vous suffisent pas, vous savez donc ce qu’il vous reste à faire !

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Car en effet, la police d’écriture joue un rôle primordiale dans l’élaboration d’un projet web. Il suffit d’ailleurs souvent d’en changer pour s’en rendre compte. Certains polices d’écriture mettront en valeur le contenu présenté, d’autres auront tendance à lui porter préjudice.

Sauf que voilà, lorsqu’on souhaite tester différentes polices d’écriture dans son navigateur, il est nécessaire de modifier ses CSS et ça veut très vite prendre pas mal de temps pour peu qu’elles soient mal structurées. L’objectif de FontFriend, c’est justement de vous filer un coup de pouce en vous permettant de prévisualiser un site avec la police d’écriture de votre choix.

Concrètement, donc, FontFriend se présente comme un petit bookmarklet à ajouter à votre navigateur. Une fois que c’est fait, il vous suffit de vous rendre sur le site internet de votre choix (les pages locales fonctionnent aussi) et de cliquer dessus. Une fenêtre s’ouvrira alors et vous permettra de changer en quelques clics la police d’écriture utilisée ou encore sa taille et son style. Précisons qu’il est possible en outre de définir le sélecteur qui bénéficiera de ces modifications.

Globalement, FontFriend est un très bon service web 2.0 qui ne manquera sans doute pas de vous rendre de grands services.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.