Développer en CSS 3 est un choix qui appartient à chaque webmestre. Comme je l’ai dit un peu plus haut, tous les navigateurs du marché ne sont pas capables de les interpréter. Concrètement, si la plupart de ces derniers font de gros efforts, c’est encore et toujours Internet Explorer qui reste à la traîne. Même sa dernière version, Internet Explorer 8, n’est pas capable de gérer la plupart des nouvelles propriétés introduites par les CSS3.

Globalement, donc, il est préférable de ne pas baser tout son site sur les CSS 3. En revanche, ceux qui ont un vrai navigateur seront les premiers à en profiter et c’est finalement ça qui compte. Pour le reste, comme dirait l’autre, OSEF !

Le Word-Wrapping : la césure du texte

D’un certain sens, le texte est assez paradoxal. C’est l’élément le plus important d’un site (sans contenu, un site n’est rien) mais c’est aussi le plus difficile à mettre en forme. On doit choisir le bon contraste, c’est un fait, mais on doit également s’assurer de bien présenter ses paragraphes pour qu’ils soient aérés et qu’ils incitent nos visiteurs à passer un peu plus de temps chez nous.

En la matière, les propriétés CSS ne manquent pas. En dehors de l’éternel « text-align », on peut aussi citer le « letter-spacing » ou encore le « line-height » qui nous permettent de faire pas mal de choses. Cela dit, le vrai problème, ce sont les longs mots (ou les URL) qui ont tendance à semer la zizanie dans notre mise en page et l’objectif de la propriété « word-wrap » est justement de nous filer un coup de main :

1
2
3

p {
word-wrap: break-word;
}

Compatibilité :

• Internet Explorer : à partir de la version 5.5
• Opera : ?
• Safari : à partir de la version 1.0
• Firefox : à partir de la version 3.5
• Chrome : ?

Web Fonts : toutes les polices que l’on aime

Les webmestres le savent, tous les navigateurs ne sont pas capables d’interpréter toutes les polices d’écriture. En réalité, ces dernières varient même selon le navigateur, bien sûr, mais aussi et surtout selon le système d’exploitation de l’internaute. On est donc souvent obligé de troquer notre chouette police ultra hyper qui rend super bien sur Photoshop avec des polices plus traditionnelles.

Bien entendu, des méthodes existent pour tromper le navigateur, comme de transformer certains éléments en images, mais les CSS 3 le permettent également grâce à la règle « @font-face » dont voici un exemple :

1
2
3
4

@font-face { 
font-family: 'Nom de ma police hype'; 
src: url('url de ma police hype');
}

Compatibilité :

• Internet Explorer : Embedded OpenType uniquement
• Opera : à partir de la version 10
• Safari : à partir de la version 3.1
• Firefox : à partir de la version 3.5
• Chrome : ?

Text-Shadow : de l’ombré sur ses textes

En réalité, cette propriété a été introduite dans les CSS 2 mais je la compte quand même dans cette liste car je la trouve très orientée CSS 3. Elle permet ainsi d’ajouter un effet ombré à n’importe quel texte. On précisera en outre que l’effet est entièrement personnalisable et qu’il peut ainsi s’adapter à n’importe quelle charte.

1
2
3

.monelement {
text-shadow: 2em 2em 0.2em red;
}

C’est donc un bon moyen de mettre en valeur certains éléments de son texte et par conséquent d’attirer l’attention des internautes. Pour certains, ce n’est qu’un effet « gadget » mais vous aurez sans doute compris que je ne suis pas de ceux-là.

Compatibilité :

• Internet Explorer : non
• Opera : à partir de la version 9.5
• Safari : à partir de la version 1.1
• Firefox : à partir de la version 3.1 (ombres multiples à partir de la version 4.0)
• Chrome : à partir de la version 1

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.

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.

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.

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.

Il n’aura pas fallu longtemps aux développeurs pour se jeter dans l’arène et proposer des plugins pour Wordpress facilitant l’intégration de Google Buzz sur son blog. Notez bien que c’est une bonne chose, cela permettra sans doute au service de se faire de nouveaux adeptes.

1. Intégrer un bouton Google Buzz à ses articles

Permettre à ses lecteurs de partager leurs articles préférés sur les réseaux sociaux du moment, c’est un bon moyen de toucher un nouveau public. Oui et nous avions déjà consacré un article complet sur le sujet pour Twitter et il est donc normal que nous en fassions de même pour Google Buzz.

Pour ajouter un bouton de ce type, il suffit donc de télécharger et d’installer le plugin Google Buzz Button. Il vous permettra de placer automatiquement un bouton dans chacun de vos articles.

A noter que si vous préférez opter pour une intégration manuelle, alors il suffira de vous rendre sur la page de configuration du plugin, de le spécifier et d’ajouter à votre thème la ligne suivante à l’endroit précis où vous souhaitez insérer le bouton :

<?php if ( function_exists( ‘add_google_buzz_button’ ) ) { add_google_buzz_button();} ?>

Précisons juste que cette ligne devra nécessairement être insérée dans la boucle de vos articles sur la page single.php.

2. Afficher ses Google Buzz sur son blog

Si vous observez attentivement la barre latérale de Weedle, alors vous verrez que le compte Twitter du site a été intégré. C’est une bonne manière pour moi de partager facilement de l’information puisque ma liste de partage Google Reader est automatiquement ajoutée à ce dernier.

Bien évidemment, il est possible d’en faire de même pour Google Buzz, et ce au travers d’un plugin dédié : Google Buzz ER.

Là encore, vous pouvez vous contenter de l’insérer directement dans les widgets de votre site mais il est également possible d’opter pour une intégration manuelle en insérer la ligne suivante à l’endroit de son choix :

<?php GoogleBuzzEr(); ?>

Alors, qu’est ce que vous attendez pour vous rapprocher de vos lecteurs ?

Via Geekeries

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.

L’histoire du Stop Motion

C’est en 1908 que le premier court-métrage en Stop Motion a vu le jour : Les Allumettes animées d’Emile Cohl. Quelques années plus tard, c’est le cinéaste Willis O’Brien qui a utilisé cette technique pour réaliser certains des effets spéciaux de King Kong (1933) et du Monde Perdu (1925). En 1938, le Stop Motion franchit un nouveau pas. Le réalisation Jean Painlevé et le sculpteur René Bertrand s’associent pour créer un court-métrage réalisé entièrement en pâte à modeler. On précisera, au passage, que cette technique a inspiré bien plus tard le créateur de Wallace & Gromit.

Si le Stop Motion a pendant longtemps été l’apanage des réalisateurs / cinéastes / créateurs amateurs, il a tout-de-même trouvé sa place dans le cinéma traditionnel. On peut ainsi citer Les Noces Funèbres de Tim Burton, L’Etrange Noël de Monsieur Jack ou encore Coraline.

D’une manière plus globale, le Stop Motion peut mettre en scène des êtres humains, des animaux, des dessins, des marionnettes, des figurines en pâte à modeler et n’importe quel autre objet de votre choix.

Le fonctionnement du Stop Motion

Globalement, le principe du Stop Motion est de créer un mouvement à partir d’éléments immobiles. Il s’agit donc de photographier toutes les images d’une scène et de les faire défiler à une certaine vitesse afin de leur donner une impression de mouvement. Le concept est assez proche des dessins animés, mais il possède également ses propres caractéristiques, comme nous allons le voir tout au long de cet article.

Attention tout-de-même car si le Stop Motion convient tout-à-fait pour « filmer » des plans fixes, il est nécessaire d’utiliser une autre technique pour les scènes plus rapide. Cette dernière, qui porte le nom de Go Motion, consiste à bouger légèrement les éléments dynamiques entre chaque prise de vue. Le résultat est simple, les scènes sont du coup beaucoup plus fluides et nettement moins saccadées.

Les contraintes techniques du Stop Motion

Le Stop Motion exigeant une prise de vue entre chaque image, il est bien entendu nécessaire d’avoir en sa possession un appareil photo numérique (APN, Bridge ou Reflex). Évidemment, ce dernier devra rester immobile durant vos prises de vue et il faudra également faire en sorte que la lumière ambiante reste la même (Nda : Enfin tout dépend de votre composition, bien sûr). A noter que ce dernier point est sans doute le plus difficile à mettre en œuvre, surtout chez soi. Cela dit, il existe désormais  des studios photo portables qui sont assez bon marché (comptez 50€ environ).

De la même manière, pour travailler vos images, il vous faudra un logiciel dédié. Là encore, il en existe un certain nombre, on peut citer Stop Motion Animator (Windows / gratuit), Monkey Jam (Windows / gratuit), Stop Motion Pro (Windows / à partir de 250€), Dragon Stop Motion (Mac OS / à partir de 200€) ou encore StopMotion (Linux / gratuit). Attention tout-de-même parce que tous ces logiciels ne vous permettront pas forcément d’ajouter une bande son à votre court-métrage. Il vous faudra donc peut-être opter pour un logiciel de montage vidéo en plus.

Quelques exemples de Stop Motion

En la matière, les exemples ne manquent pas. Il suffit de fouiner un peu sur YouTube ou Dailymotion pour en trouver un certain nombre. Cela dit, les vidéos qui suivent vous permettront de vous rendre compte de ce qu’il est possible de faire en utilisant cette technique d’animation.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Comme vous pouvez le constater, ce ne sont pas les idées qui manquent. En réalité, il est possible de tout faire en Stop Motion : « filmer » des gens, des animaux, des légo, des dessins, des fleurs, des insectes, des voitures, une ville ou même un monument… Finalement, cette technique d’animation n’a pour limite que votre imagination.

Des ressources pour le Stop Motion

A présent que nous savons ce qu’est le Stop Motion, nous allons pouvoir passer au vif du sujet et commencer à potasser sur le sujet. Là encore, ce ne sont pas les tutoriels qui manquent sur le web et la liste que je vous ai dressé est par conséquent loin (très loin même) d’être exhaustive. Quoi qu’il en soit, ils vous permettront de vous initier tranquillement avec tous les aspects de cette technique. Bien entendu, si vous avez de votre côté de bonnes adresses, n’hésitez pas à vous manifester dans les commentaires qui suivent cet article.

• Un tutoriel basique pour apprendre le Stop Motion (en).
• Un autre tutoriel basique pour apprendre le Stop Motion (en).
• Un autre tutoriel basique pour apprendre le Stop Motion (en).
• Un tutoriel vidéo basique pour apprendre le Stop Motion (en).
• Quelques astuces pour apprendre le Stop Motion (en).
• Un tutoriel vidéo pour découvrir le logiciel StopMotion (en).
• Des tutoriels vidéo pour prendre en main Dragon Stop Motion (en).
• Un tutoriel vidéo pour réaliser un film en Stop Motion avec Windows Movie Maker (en).
• Un autre tutoriel vidéo pour réaliser un film en Stop Motion avec Windows Movie Maker (en).
• Un tutoriel pour réaliser un film en Stop Motion avec iMovie (en).
• Des tutoriels complets dédiés au Stop Motion pour les Lego (en).
• Un tutoriel vidéo dédié au Stop Motion pour les Lego (en).

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.

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.