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.

1. Penser et optimiser son thème à la source

Lorsqu’on réalise un site, on est très souvent tenté d’en faire le plus possible. Il n’est ainsi pas rare de succomber à la tentation et d’agrémenter ses pages d’animations flash, de vidéos ou d’images. Ces différents éléments doivent être utilisés avec parcimonie dans la mesure où ils consomment de la bande passante et qu’ils peuvent par conséquent ralentir considérablement l’affichage de vos pages. Alors bien entendu, vous pouvez parfaitement utiliser ces technologies, mais ce n’est pas pour autant que vous devez les accumuler. Ajouter des scripts en AJAX pour le plaisir d’en ajouter, cela ne rime à rien.

De la même manière, il est primordial de toujours se méfier des scripts externes, qu’il s’agisse de régie publicitaires ou de widgets communautaires. Là encore, le blogueur est très souvent tenté d’en faire trop, de passer par plusieurs régies différentes, d’ajouter des widgets à sa sidebar pour la rendre plus vivante. Et là encore, il convient de se montrer très prudent. Optimiser ses pages, son serveur, c’est une chose, mais vous ne pouvez pas intervenir sur ces scripts externes. Par conséquent, vous en êtes tributaire.

Cela dit, ce n’est pas pour autant que vous devez proscrire ces différentes technologies. Sur Weedle, par exemple, la galerie de photographies générées à partir de FlickRSS qui se trouve dans ma barre latérale est l’un des éléments qui ralentit le plus l’affichage de mes pages. Si je l’enlevais, je gagnerais sans doute 1 ou 2 secondes sur leur chargement. Cependant, dans la mesure où j’estime que cette fonctionnalité peut vous être profitable, j’ai préféré la laisser. Le tout est donc de faire ses choix avec le plus grand soin.

Pour calculer le « poids » de vos pages, il existe deux outils que tous les webmestres devraient connaître : Firebug et YSlow. Utilisés conjointement, ils vous permettront de corriger vos pages et de gagner ainsi quelques précieuses secondes. En ce qui concerne les images constituant votre thème, n’hésitez pas non plus à les optimiser en mettant en place des CSS Sprites.

Concernant WordPress, nous préciserons enfin que ce qui vaut pour les scripts, animations flash et autres vaut également pour les plugins que vous utilisez. Votre objectif doit toujours être d’en utiliser le moins possible et, là encore, il convient de faire son choix avec le plus grand soin.

2. Les astuces pour optimiser WordPress

Il suffit de faire une simple recherche sur Google pour trouver des milliers de résultats sur l’optimisation WordPress. Mon objectif n’étant pas de dresser une énième liste d’astuces sur le sujet, je vais me contenter de vous parler de ce que je connais et de ce que j’ai fait sur Weedle. Pour vous donner une idée de ce que valent ces différentes astuces, il faut savoir que ma page d’accueil mettait initialement 16 secondes pour charger. A présent, j’en suis à une moyenne de 3 ou 4 secondes. Un gain non négligeable.

2.1. Optimiser sa base de données :

On l’oublie souvent mais il est nécessaire d’optimiser régulièrement sa base de données afin qu’elle reste aussi réactive qu’au premier jour. Pour se faire, plusieurs options s’offrent à vous. Au choix, vous pouvez passer directement par PHPMyAdmin ou bien installer un plugin dédié pour WordPress. Là encore, il en existe un certain nombre mais, en ce qui me concerne, j’ai opté pour WP DB Manager. Outre le fait de s’intégrer à merveille à l’interface d’administration, il présente comme principal avantage de vous permettre de programmer des tâches pour qu’elles s’exécutent automatiquement.

Concernant la fréquence d’optimisation, vous êtes libre de faire comme bon vous semble mais pour un blog mis à jour régulièrement, un nettoyage hebdomadaire semble être la meilleure option. En tout cas, c’est ainsi que je l’ai paramétré.

2.2. Installer un système de cache pour sa base de données :

De mon point de vue, la base de données est toujours le point faible d’un site et c’est d’autant plus vrai avec WordPress. Surtout si vous êtes hébergés sur un serveur mutualisé. C’est la raison pour laquelle il est nécessaire de faire en sorte de la solliciter le moins possible et c’est aussi la raison pour laquelle il est préférable d’installer un système de cache pour sa base de données.

Là encore, on trouve de nombreux plugins dédiés pour WordPress. Celui que j’utilise, c’est DB Cache. Configurable en un clic, il est à la fois très accessible et très simple à mettre en fonction. Entre autres choses, vous allez avoir la possibilité de paramétrer la durée du cache (par défaut, 5 minutes par requête) ou encore afficher des statistiques directement dans votre thème.

2.3. « Minifier » ses CSS et son Javascript :

L’autre point faible des sites web, ce sont les requêtes HTTP. Chaque image, chaque script, chaque fichier CSS entraine une requête lorsque la page charge. Et plus on a de requêtes, plus la page met du temps à charger. En diminuant le nombre de requêtes HTTP, vous gagnerez quelques précieuses secondes supplémentaires. Pour se faire, de nombreuses méthodes existent. Sur ce point, j’ai sans doute encore du travail à faire mais, pour le moment, je me suis contenté de compresser mes CSS et mon Javascript.

Pour se faire, certains optimisent directement leur serveur, d’autres passent par leur fichier .htaccess mais, en ce qui me concerne, j’ai préféré opter pour un plugin dédié : WP Minify. Ce dernier ajoute le moteur Minify a WordPress, le tout en quelques clics. Inutile de configurer votre serveur, la procédure est complètement automatisée (mais certaines options sont paramétrables par l’intermédiaire de l’interface d’administration).

Attention tout-de-même car si vous utilisez un thème personnel, WP Minify est susceptible de planter. Si vous rencontrez une erreur, je vous invite à récupérer le « header » du thème par défaut et de le coller dans votre propre thème (en l’adaptant si nécessaire).

2.4. Installer un « super » cache :

Si l’on parle de WordPress et de cache dans la même conversation, on pense immédiatement au plugin Super Cache. En effet, sur le sujet, ce dernier reste le plus connu, et pour cause… En effet, il va très loin en créant, pour chaque page, un fichier HTML. Lorsqu’un internaute vient sur votre site, c’est ce fameux fichier HTML qui sera appelé. Du coup, seul Apache sera utilisé pour afficher vos pages, votre base de données n’intervenant qu’en cas de mise à jour de votre contenu (publication d’un nouveau billet et/ou d’un nouveau commentaire).

Seul bémol, pour que Super Cache fonctionne correctement, il faut que votre hébergeur supporte la réécriture d’URL par l’intermédiaire du fichier .htaccess. A ce sujet, je vous conseille de bien lire toutes les informations présentes sur la page de configuration du plugin. Il vous faudra en effet mettre votre fichier .htaccess à jour pour que le cache fonctionne correctement.

En conclusion

Ces quelques astuces d’optimisation sont très loin d’être exhaustives mais elles présentent le mérite d’être compatibles avec tous les hébergeurs, du dédié au mutualisé en passant par le virtualisé. En préparant cet article, j’ai en effet effectué quelques recherches sur le web et la plupart des conseils glanés demandaient l’utilisation d’un serveur dédié. Évidemment, si vous avez d’autres astuces, n’hésitez pas à vous manifester dans les commentaires de ce billet.

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.

PSD TUTS

Abduzeedo

Tutorial9

PSHero

PSD Fan

DeviantArt

PSDFan

Computer Arts

Outlaw Design Blog

PVM Garage

DesignBlurb

Talk Mania

X24D

EyesOnTutorials

UBLTuts

Online Photoshop Tutorials

Worth1000

Vileworks

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.

• Made by Simple Slideshow : Comme son nom l’indique, ce plugin va vous permettre de gérer très facilement des diaporamas d’images que vous pourrez positionner ensuite dans vos pages comme bon vous semble.
• WP Smart Image : Même si WordPress intègre de puissants outils pour gérer efficacement sa bibliothèque d’images, il est néanmoins difficile d’affecter des propriétés spécifiques à certaines d’entre elles uniquement. Ce plugin va vous permettre une gestion plus souple de vos médias.
• Blogroll Links Favicons : Ce plugin permet d’afficher automatiquement les favicons des sites ou blogs liés. C’est donc un bon moyen d’agrémenter sa blogroll et de la rendre beaucoup plus visuelle et présentable.
• WP Smush.it : Il est toujours un peu tentant d’insérer de nombreuses images dans ses billets afin de les rendre plus agréables visuellement. Avec ce plugin, vous allez pouvoir compresser et optimiser vos images afin de les rendre plus légères et plus faciles à afficher.
• Lightbox Plus : Limités par le gabarit de leur thème, il n’est pas rare que les blogueurs se contentent d’afficher des miniatures pour illustrer leurs billets. Avec ce plugin, en cliquant sur une image, l’internaute pourra l’agrandir et l’afficher dans une fenêtre dédiée.
• WP Super Cache : Surtout utilisé par les blogs à fort trafic, ce plugin permet de mettre en cache les images et accélère dont l’affichage des pages tout en soulageant considérablement la base de données. A noter qu’il intègre également un mode spécifique pour mettre en cache l’intégralité d’un blog et donc le préserver en cas d’importants pics de trafic.
• NextGen Gallery : Les possibilités offertes par ce plugin sont nombreuses et vous permettront de gérer au moins l’affichage de votre galerie d’images. Dans le lot, on peut quand même citer l’envoi de fichiers zip, l’ajout de watermarks ou encore l’intégration d’effets javascript.
• Vertical Scroll Image Slideshow Gallery : Ce plugin permet d’ajouter très facilement un slideshow dans la sidebar de son blog.
• WP Carousel : Comme son nom l’indique, ce plugin permet d’ajouter un carrousel à son blog. Idéal pour mettre en valeur certains de ses billets.
• Visual Recent Post : Ce plugin permet d’afficher ses derniers billets dans un style magazine.
• Twitter Grid : De tous les services présents sur le web, Twitter est sans doute l’un de ceux qui rencontrent le plus de succès auprès des blogueurs. Ce plugin vous permettra d’afficher le portrait de tous vos amis sous la forme d’un widget à ajouter en quelques clics.
• Gravatar Grid : Très sympathique, ce plugin permet d’afficher l’avatar des derniers commentateurs dans une grille.
• Image Shadow : Histoire d’éviter de passer par la case « Photoshop », ce plugin vous permet d’ajouter un effet d’ombre à toutes vos images.
• WP Image Flow : Très impressionnant, ce plugin vous permet d’afficher une galerie d’images directement inspirée du mode Cover Flow d’Apple.
• Photo Dropper : Quand on fait les choses dans les règles, il est toujours important de bien vérifier les droits des images que l’on intègre dans ses billets. Et, parfois, la recherche peut être longue. Ce plugin ajoutera un moteur de recherche à la fenêtre de création de vos billets et vous permettra de chercher des images dans un catalogue libre de droit tout droit issu de Flickr.
• WP Decoratr : Pourquoi ne pas exploiter toute la puissance de Flickr et utiliser cette fabuleuse banque d’images pour agrémenter vos billets ? Ce plugin va justement vous permettre d’inclure des images en provenance de ce célèbre service.
• Picasa Widget : Si vous fréquentez assidument Picasa, alors ce plugin est fait pour vous puisqu’il va vous permettre d’afficher les dernières photos de vos albums sur votre blog en quelques clics.
• Picasa Photo : Complémentaire au plugin précédent, celui-ci va vous offrir la possibilité d’afficher une image au hasard en provenance de vos albums Picasa.
• Deviant Thumbs : Là encore, c’est un plugin pratique puisqu’il permet d’afficher des images en provenance de Deviant Art dans un carrousel du plus bel effet.
• ImageShack Uploader : Si vous appréciez ce service, alors ce plugin risque de vous intéresser. En effet, il permet d’envoyer une image sur son compte ImageShack et de l’intégrer ensuite dans ses billets.

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.

1. DesignFreak RSS Icons (2 sets)

Les premières icônes ont été réalisées pour le célèbre magazine en ligne Smashing Magazine qu’il n’est plus nécessaire de présenter. Des créations très organiques, qui pourront facilement être détournées de leur contexte d’origine. On remarquera d’ailleurs qu’il en va de même pour la seconde icône qui s’avère tout aussi originale.

Télécharger le premier pack d’icônes rss

Télécharger le second pack d’icônes rss

2. Garcya RSS Icons (2 sets)

Traditionnelles, les premières icônes rss de Garcya peuvent d’adapter à n’importe quelle charte graphique. Elles misent avant tout sur le quotidien en détournant les objets de la vie de tous les jours afin d’en faire des icônes rss qui ne manqueront sans doute pas d’interpeller les internautes. Notons d’ailleurs qu’elles tranchent tout particulièrement avec les autres icônes du même auteur.

Télécharger le premier pack d’icônes rss

Télécharger le second pack d’icônes rss

3. Hat RSS Icons

C’est sur DeviantArt que l’on retrouve ce chapeau rss qui risque de ne pas pouvoir s’intégrer à toutes les chartes graphiques mais qui présente la palme de l’originalité.

Télécharger l’icône rss

4. RSS ?

A la fois simple, épurée, toute en rondeur et très aérée, cette icône rss plaira sans doute à de nombreux blogueurs et/ou webmestres. Encore une création trouvée sur DeviantArt.

Télécharger l’icône rss

5. IconTexto RSS Icons

Cette fois, c’est tout un set que vous pouvez télécharger sur DeviantArt. Il regroupe pas mois de 200 éléments, tous réalisés sur la même idée. A noter que les icônes proposées le sont en deux formats : le format PNG (pour toutes vos créations graphiques) et le format ICO (pour votre ordinateur).

Télécharger le pack d’icônes rss

6. Web 2.0 RSS Icons

C’est toujours sur DeviantArt que l’on trouve ce pack d’icônes fort sympathiques. Attention cependant car le fichier fourni comprend ces trois icônes, il vous faudra donc les découper pour en profiter dans vos projets personnels. On regrettera donc l’absence d’un fond transparent, ce qui aurait considérablement facilité les choses.

Télécharger le pack d’icônes rss

7. Grunge Style RSS Icons

Très connu, ce set s’intégrera à merveille dans toutes les chartes un peu grunge. Point négatif, le fond de ces icônes n’est pas transparent (mais blanc). Point positif, les icônes du set sont disponibles en trois couleurs (bleu, vert, rose) de trois tailles chacune (32×32, 64×64 et 128×128).

Télécharger le pack d’icônes rss

8. Alternative RSS Icons

Très douces, ces icônes sont directement inspirées de ce que l’on retrouve dans le web 2.0 : des dégradés, des effets de transparence et des reflets sont ainsi donc au rendez-vous. Si ces icônes ne sont pas disponibles en plusieurs formats différents, on peut toutefois noter que leur fond est transparent et qu’elles peuvent donc facilement être intégrées dans n’importe quelle charte graphique.

Télécharger le pack d’icônes rss

9. Floral RSS Icons

Sortir des sentiers battus, c’est toujours agréable. D’ordinaire, les icônes de flux rss sont carrées ou rondes, celles-ci jouent la carte de l’originalité avec leur forme florale. Et comme elles sont en plus déclinées en une dizaine de couleurs, on peut dire qu’elles constituent un set fort appréciable.

Télécharger le pack d’icônes rss

10. RSS News

Très sympathique, ce set vous offre deux icônes rss plutôt soignées. La première possède une bordure glossy très sympathique alors que la seconde mise plutôt sur une bordure mate. Dans tous les cas, ces deux icônes sont sur fond transparent, ce qui vous permettra de les intégrer sans encombre à votre thème.

Télécharger le pack d’icônes rss

11. 30 Free Vector RSS Buttons (2 sets)

C’est chez Snap2Objects que l’on trouve ces deux étonnants packs de 70 icônes rss, toutes de couleur différente. De quoi trouver chaussure à son pied, quelles que soient les couleurs dominantes de son thème : vert, bleu, rose, mauve, gris et ainsi de suite…

Télécharger le premier pack d’icônes rss

Télécharger le second pack d’icônes rss

12. RSS Reader Icon

Cette icône très originale intéressera sans doute les blogueurs ou webmestres adeptes de thèmes traditionnels, comme ceux des grands quotidiens. A noter que l’icône est disponible en 4 tailles : 16×16, 32×32, 48×48 et 128×128.

Télécharger le pack d’icônes rss

13. Free Glass Style RSS Icons

Encore un très gros pack d’icônes que voilà. Au total, ce ne sont pas moins de 8 icônes rss que vous allez pouvoir trouver, chacune avec des couleurs et des tailles différentes (pour un total de 64 icônes). Très conventionnelles, ces icônes se marieront avec toutes les chartes graphiques. Un « must have » !

Télécharger le pack d’icônes rss

14. Drink RSS

Un pack très original et dédié aux buveurs de bières. On peut dire que les icônes rss présentées dans ce set n’ont rien à voir avec celles que l’on peut habituellement voir circuler sur le web. Evidemment, tous les webmestres / blogueurs n’opteront pas forcément pour ce genre d’icônes.

Télécharger le pack d’icônes rss

15. Paper Feed Icons

Là encore, voici un pack très original qui risque de plaire à pas mal de monde. Chacune des icônes est déclinée en quatre tailles différentes et toutes sont proposées sur fond transparent. Là encore, il s’agit d’un de mes sets préférés, du moins pour cette sélection.

Télécharger le pack d’icônes rss

16. RSS Icons Orb v2

Très connues, ces icônes jouent la carte de la rondeur et elles le font bien. Déclinées en quatre teintes, elles trouveront facilement leur place dans n’importe quelle ambiance graphique.

Télécharger le pack d’icônes rss

17. RSS Icons

Très traditionnelles, ces icônes n’en sont pas moins réussies sur le plan visuel. Comme pour la plupart des packs de cette sélection, elles sont déclinées en trois couleurs et en trois tailles.

Télécharger le pack d’icônes rss

18. Toast Feed Icon

Encore une icône rss très originale que celle-ci… Et du coup, elle ne s’adaptera sans doute pas à toutes les chartes mais elle séduira sans doute les adeptes des designs « réalistes ». Au passage, on notera que le fond de l’icône est transparent, ce qui est plutôt une bonne chose puisque cela vous évitera le traditionnel détourage.

Télécharger l’icône rss

19. RSS Icons (encore)

Là encore, il est possible que vous ayez déjà croisé ce pack d’icônes au cours de vos pérégrinations numériques mais peu importe car elles sont plutôt réussies. On précisera que ces icônes sont déclinées en quatre couleurs différentes et qu’elles sont toutes disponibles sur un fond transparent. J’insiste peut-être souvent sur ce dernier point mais il me semble tout-de-même important à signaler.

Télécharger le pack d’icônes rss

20. RSS 2008

Cette icône est sans doute la plus moderne du lot. Point positif, elle est moins connue que les autres. Point négatif, elle ne fait que suggérer le flux rss et les internautes néophytes pourraient facilement s’y perdre. Quoi qu’il en soit, il s’agit là d’un travail vraiment remarquable.

Télécharger l’icône rss

21. RSS Icons par Jinsona Design

Je dois bien avouer que j’ai eu un petit coup de coeur pour ce pack particulièrement original. Fortement inspiré des tendances du web 2.0, il n’en reste pas moins novateur quant à la forme des icônes. On précisera d’ailleurs qu’elles sont proposés en différentes couleurs et sur un fond transparent.

Télécharger le pack d’icônes rss

22. Feed Me Animals

Proposé par le Smashing Magazine, ce pack d’icônes rss est sans doute l’un des plus sympathiques du lot. L’idée de mettre en scène de petits animaux est tout simplement géniale. Seul bémol, ces icônes ne conviendront sans doute pas à toutes les chartes.

Télécharger le pack d’icônes rss

23. RSS Feed Buttons

Reposant sur une idée très novatrice (intégrer les flux rss à la vie quotidienne), ce pack est à la fois très pertinent et très séduisant. Les icônes contenues dans le set sont toutes de qualité, on regrettera juste que l’auteur n’ait pas pensé à mettre un fond transparent. Il vous faudra donc les détourer (ou adopter le blanc) pour en profiter.

Télécharger le pack d’icônes rss

24. RSS Icons (encore)

Très sobres, ces icônes se marieront avec toutes les chartes. Que vous ayez opté pour un visuel travaillé ou minimaliste, elles vous permettront de mettre en valeur votre flux rss dans pour autant choquer vos visiteurs. Malheureusement, plutôt que de fournir des PNG transparents, l’auteur s’est contenté d’une simple image sur fond blanc.

Télécharger le pack d’icônes rss

25. StickerFeed

Sobre et minimaliste, le StickerFeed risque de vous plaire. Discret, il mettra tout-de-même en valeur votre flux rss et parviendra à capter l’attention de vos visiteurs. Une très bonne création.

Télécharger l’icône rss

26. devi.RSS

Très glossy, ces icônes rss sont parmi les plus séduisantes de cette sélection. Parvenant à concilier élégance et originalité, elles font aussi partie des moins connues. Dans tous les cas, ce sont 4 icônes que vous pourrez trouver dans ce pack.

Télécharger le pack d’icônes rss

27. RSS Cheese

Très particulières, ces icônes rss risquent de ne pas plaire à tout le monde. Cela dit, elles présentent au moins le mérite de faire preuve d’originalité.

Télécharger le pack d’icônes rss

28. RSS Icons (encore)

Là encore, le concepteur de ces icônes s’est inspiré de la vie de tous les jours pour les réaliser. On trouve donc dans ce pack de 15 icônes rss très originales et qui risquent notamment de plaire à de nombreux blogueurs.

Télécharger le pack d’icônes rss

Attention tout-de-même car certaines de ces icônes sont peut-être protégées et ne peuvent donc être utilisées dans un cadre commercial. Prenez donc le temps de bien vous renseigner avant de les utiliser dans vos projets.

(Crédit 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.

La nourriture a toujours suscité l’imagination des peintres. Des tableaux mettant en scène des pommes ou d’autres fruits, on en compte par milliers. Oui, seulement Daniel Spoerri a été le premier artiste à fonder l’art sur la nourriture. Un choix par ailleurs très intéressant. L’art, censé transcender l’homme, l’arracher à sa condition animale, se place généralement comme l’antagoniste de la nourriture, cette dernière correspondant davantage à un besoin primaire, élémentaire, indispensable à sa survie.

Depuis les années 60, le Eat Art a fait beaucoup de chemin. D’un certain sens et pour schématiser la chose, on peut dire qu’il se décline en deux mouvements majeurs. D’un côté, nous avons le Eat Art « gastronomique », cher aux grands chefs et qu’il est possible de manger. De l’autre, ce que nous nommerons de manière malhabile le Eat Art « artistique », qui détourne la vocation première des aliments pour en faire des oeuvres d’art.

Mais attention, ce n’est pas pour autant que le Eat Art « gastronomique » doit être pris avec légèreté. On trouve de ce côté-là aussi un bon nombre de créations saisissantes qui offrent le mérite de nourrir aussi bien le corps que l’esprit. Et on terminera donc sur ce point, avec quelques illustrations supplémentaires.

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.

C’est une bonne nouvelle pour pas mal de gens, Internet Explorer 6 est en train de vivre ses derniers jours. Il aura fallu attendre plusieurs années mais une nouvelle page est donc actuellement en train de se tourner. Oui, mais de nombreux internautes continuent encore d’utiliser ce navigateur vétuste et c’est la raison pour laquelle j’ai décidé de lister les différents « hacks » que je connais (et que j’ai souvent utilisé) pour ce navigateur.

1. Les hacks CSS pour Internet Explorer 6

Pour commencer, nous allons nous intéresser à quelques règles CSS qui vont nous permettre de choisir les propriétés à interpréter selon le navigateur utilisé. Cela peut vous paraître confus, mais nous allons voir qu’il n’en est rien. En réalité, nous allons jouer avec les défauts intrinsèques d’Internet Explorer 6 afin de le prendre à son propre piège.

1.1. La règle « !important » :

Cette règle peut s’appliquer à toutes les propriétés CSS. Globalement, une propriété accompagnée de la règle « !important » ne sera pas interprétée par Internet Explorer 6, uniquement par les autres navigateurs du marché. En la jouant finement, il est donc possible de rendre certaines propriétés invisibles aux yeux de ces derniers et donc de régler la plupart des bogues honteux du navigateur de Microsoft. L’exemple suivant vous permettra de mieux comprendre ce dont je parle :

div#mon_calque {
background-color:blue !important; background-color:green;
}

Dans cet exemple, nous définissons deux couleurs de fond pour notre calque. Dans ce cas, puisque Internet Explorer 6 est incapable de comprendre la règle « !important », il affichera un fond vert. Les autres navigateurs, eux, afficheront un fond bleu. En jouant avec les propriétés CSS les plus problématiques (je pense notamment aux « padding » et « margin »), il sera donc possible de résoudre la plupart des erreurs d’interprétation d’Internet Explorer 6.

Note : Il est aussi possible de noter « !background-color:green; » à la place de « background-color:green; !important » mais il faut savoir que seule cette dernière expression est valide W3C.

1.2. Le hack * html :

Toujours dans le même ordre d’idée, Internet Explorer 6 est totalement incapable de comprendre le marqueur « * ». Pour les autres navigateurs, il pointera tous les éléments se trouvant au-dessus de la balise « html ». Comme il n’y en a pas, les propriétés se trouvant à cet endroit ne seront pas interprétés. Internet Explorer 6, quant à lui, se laissera prendre au piège et interprétera donc tout ce qui se situera à cet endroit. Là encore, je vous propose l’exemple suivant :

* html body { background-color:blue; }
html body { background-color:green; }

Une fois de plus, nous avons défini deux couleurs de fond. Sachant que Internet Explorer 6 est incapable de comprendre le marqueur « * », il affichera la couleur bleue pour notre page. Les autres navigateurs, quant à lui, l’afficheront en vert.

1.3. Le hack underscore :

Même principe, il est également possible d’utiliser des caractères spéciaux pour rattacher des propriétés CSS à un navigateur spécifique. On notera d’ailleurs que cette méthode fonctionne aussi bien pour Firefox que pour Internet Explorer 6 ou encore Internet Explorer 7. L’exemple suivant parle de lui-même :

div#mon_calque {
width:400px; height:250px; margin:0 0; padding:0 0;
background-color:red; /* Pour tous les navigateurs */
/background-color:blue; /* Pour IE 7 seulement */
_background-color:green; /* pour IE6 seulement */
}

Note : Il est également possible d’utiliser ce « hack » pour Internet Explorer 7. En revanche, il faudra écrire « *+html {} » à la place de « * html {} ».

En jouant avec ces deux méthodes, il est possible de corriger la plupart des erreurs d’affichage d’Internet Explorer 6. Cela dit, si les CSS sont relativement puissantes, il arrive parfois qu’elles ne soient d’aucun secours. C’est la raison pour laquelle nous allons à présent nous intéresser aux « hacks » HTML.

2. Les hacks HTML pour Internet Explorer 6

Les astuces HTML pour Internet Explorer 6 fonctionnent sur le même modèle que les astuces CSS. Il s’agira en effet de faire en sorte qu’une partie de notre code ne soit compréhensible que de ce dernier, et pas des autres. Pour se faire, il existe plusieurs méthodes mais, la plus connue d’entre elles, c’est le commentaire conditionnel.

2.1. Le commentaire conditionnel :

Le commentaire conditionnel n’est pas vraiment un « hack », il s’agit plutôt d’un commentaire spécial qu’Internet Explorer 6 va interpréter volontairement. C’est à croire que les développeurs du programme avaient prévu le coup. Ces commentaires vont en effet nous permettre de faire passer du code qui ne sera compris que de leur navigateur. Là encore, un exemple vaut mieux que mille discours :

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="style_ie.css" mce_href="style_ie.css" />
<![endif]-->

Concrètement, cet exemple nous permet de définir une feuille de style spécifique pour Internet Explorer 6 et une autre feuille de style spécifique pour les autres navigateurs du marché. Attention par contre, parce qu’il est nécessaire d’appeler d’abord la feuille de style générale et ensuite la feuille de style pour IE.

Note : Il est possible d’utiliser les commentaires conditionnels pour les différentes versions d’Internet Explorer. Un « <!–[if IE 6]><![endif]–> » visera exclusivement Internet Explorer 6 alors qu’un « <!–[if IE 7]><![endif]–> » visera plutôt Internet Explorer 7.

2.2. La transparence PNG :

Là encore, il s’agit d’un bug auquel nous avons tous été confronté au moins une fois dans nos vies de développeur. Si tous les navigateurs sont capables d’interpréter la transparence des images au format PNG, il n’en est rien pour Internet Explorer 6 qui n’y entend rien du tout. Heureusement pour nous, il existe une méthode éprouvée (HTML+CSS)  qui nous simplifie grandement la vie.

Pour la partie HTML, à mettre dans le header de votre page :

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="style_png_fix.css" mce_href="style_png_fix.css" />
<![endif]-->

Et dans votre fichier « style_png_fix.css » :

* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src="transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Pour avoir déjà essayé plusieurs solutions, cette dernière reste à mon sens la plus simple et la moins hasardeuse à mettre en place. Cela dit, en ce qui me concerne, je préfère tout simplement éviter les PNG transparents et m’assurer que mes images conviennent à tous les navigateurs du marché. C’est sans doute un peu plus long (on s’arrache parfois les cheveux) mais ça évite les mauvaises surprises.

Pour conclure, on peut rappeler que cette liste n’est certainement pas exhaustive mais que ce sont des astuces éprouvées qui m’ont souvent sauvé la vie. Alors bien sûr, les développeurs se posent pas mal de questions sur le sujet. Certains se demandent même s’il n’est pas préférable de ne pas se préoccuper d’Internet Explorer 6 afin de pousser les internautes à changer, ou mettre à jour, leur navigateur. En ce qui me concerne, je sais au moins une chose : lorsqu’on bosse sur un projet pour un client, on ne peut pas se permettre de se poser ce genre de questions. Le client paye pour un site, il faut donc s’assurer qu’il s’affiche de la même manière quel que soit le navigateur utilisé.

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.

1. Les banques d’images gratuites :

Pour commencer, voici une liste de banques d’images gratuites. Afin que les choses soient plus claires, j’ai mis en gras les banques d’images qui ne nécessitent aucune inscription. Plus simples, plus rapides, elles méritaient en effet d’être mises en valeur. Précisons également que toutes ces banques d’images ont été testées par mes soins et que ces services sont presque tous en anglais (sauf mention contraire).

• Studio 25 : Simple et efficace.
• Stock.XCHNG : Très grosse base de données.
• MorgueFile : Un incontournable que j’utilise souvent.
• Photl : Prometteur.
• PhotoXpress : Peu de choix.
• Woophy : Intègre la géolocalisation pour les photos.
• FreeRange Stock : Navigation peu évidente.
• Image After : Très grosse base de données.
• About Pixel : Site en allemand.
• Free Photos Web : De nombreuses galeries sont présentes.
• ISFTIC : Site en espagnol.
• TwicePics : Intéressant.
• Big Foto : Surtout des photos de paysages.
• Font Play : Navigation peu évidente.
• Pixelio : Site en allemand.
• Free Images : Peu de choix.
• Public Domain Photo : Peu de choix.
• FreePhotoBank : Très grosse base de données.
• Image Base : Site relativement lent.
• FreePhotosBank : Très grosse base de données.
• FreeJPG : Site en espagnol.
• DNS : Site en portugais.
• CarPictures : Surtout des photos de voitures.
• Cepolina : Navigation peu évidente.
• Visipix : Surtout des photos de paysages.
• Burning Well : Peu de choix mais navigation intuitive.
• Tofz : Prometteur.
• Diwiesign : Peu de choix.
• Orange Trash : Navigation peu évidente.
• UnProfound : Navigation par couleurs.
• Unices : Navigation par date. Site très intuitif.
• Amygdela : Surtout des photos de paysages.
• Vyonyx : Surtout des photos de personnes.
• Indisain : Navigation intuitive.
• StickStock : Très grosse base de données.
• DieBlen : Site en allemand.
• PhotoGEN : Grand choix de photos.
• OpenPhoto : Très grosse base de données.
• Vintage Pixel : Peu de choix.
• ImageBlowOut : Photos de qualité.
• Jakota : Site en allemand.
• PhotoRack : Très grosse base de données.
• Animal Photos : Surtout des photos d’animaux.

2. Les moteurs de recherche d’images gratuites :

Très utiles, les moteurs de recherche spécialisé peuvent s’avérer efficaces et redoutables. On trouve ainsi très facilement un grand nombre d’images thématiques. Seul bémol, les résultats renvoient souvent vers des sites nécessitant une inscription.

• EveryStockPhotos : Moteur de recherche très bien conçu. Des millions de photos indexées.
• Google Image (recherche avancée) : En utilisant correctement la recherche avancée de Google Image, il est possible de filtrer les résultats en fonction de l’utilisation que l’on peut faire des images indexées.
• Flickr (recherche avancée) : De même, en utilisant correctement la recherche avancée de Flickr, il est possible de n’afficher que les images sous licence Creative Commons.

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.

Alors attention tout-de-même car tous ces différents tutoriels n’en sont pas forcément. Loin de moi l’envie de vous piéger, mais je préfère vous prévenir : certains d’entre eux sont simplement des modèles à reproduire. Si on ne devient forgeron qu’en forgeant, il en va de même pour le dessin. Cela dit, rassurez-vous car vous trouverez également dans cette sélection des guides très bien faits qui vous permettront de comprendre comment se dessinent certains éléments.

1. Apprendre à dessiner les personnages

Ces différents tutoriels et modèles vous permettront d’apprendre à dessiner des corps. Certains d’entre eux insisteront sur des zones bien spécifiques comme les yeux ou les mains, d’autres resteront plus généralistes et s’attacheront à vous expliquer comment produire un dessin dynamique.

1.1. Apprendre les proportions

Même si les mangaka exagèrent souvent les proportions de leurs personnages, ils obéissent toutefois à de nombreuses normes en la matière. Et justement, les tutoriels qui suivent vont vous permettre de vous familiariser avec ces dernières.

1.2. Apprendre à dessiner les visages

Lorsqu’on dessine un personnage, il est nécessaire de bien insister sur les éléments du visage. En effet, un visage bien réussi, c’est presque un dessin de gagné. Certes, le visage ne fait pas tout mais un personnage possédant un beau regard sera toujours plus agréable.

1.3. Apprendre à dessiner les expressions des visages

Apprendre à dessiner des visages, c’est une chose, mais il est important aussi d’insister sur les expressions. En effet, ce sont ces dernières qui rendront vos dessins plus réalistes, plus humains et donc plus convaincants.

1.4. Apprendre à dessiner les cheveux

Là encore, la place des cheveux dans une composition est très importante. Généralement, ils permettront de rendre un dessin plus dynamique, ce qui se remarque par ailleurs dans toutes les scènes d’action de Gunnm.

1.5. Apprendre à dessiner les membres

Lorsqu’on demande à un dessinateur ce qui est le plus difficile à dessiner, il répond généralement toujours la même chose : les mains et les pieds. Justement, ces tutoriels et ces modèles vous permettront de travailler sur ce point.

2. Apprendre à dessiner les vêtements

Là encore, les mangaka ont une manière très particulière de dessiner les vêtements de leurs personnages. Ces différents tutoriels vous donneront toutes les pistes nécessaires pour parfaire vos créations ou vous familiariser avec ce style.

3. Apprendre à créer un manga

Maintenant que nous savons comment créer des personnages et comment les habiller (c’est important), nous allons nous intéresser à la création d’un manga à proprement parlé. Là encore, ces tutoriels vous permettront d’en savoir plus et d’apprendre à vous organiser pour être le plus productif possible.

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.