Moins pour les sites webs qui ont vocation d’être ouverts au plus grand nombre d’internautes, mais plus pour les blogs qui peuvent avoir un usage plus intime, il est possible de verrouiller l’accès à un site ou à quelques articles ciblés.

Un blog pouvant être le support d’un journal intime, de réflexions personnelles que l’on désire garder pour soi ou pour un cercle confidentiel de visiteurs, la méthode la plus efficace d’en protéger l’accès est de mettre en place un mot de passe. Une protection gratuite et facile à mettre en place, c’est vraiment trocool, car l’extension que nous vous proposons a tout pour vous séduire.

Pourquoi bloquer l’accès du contenu de mon site internet ?
Les internautes viennent de toute part, et des informations sensibles peuvent ainsi être lues par des personnes mal intentionnées. Sans parler de secret défense, une certaine confidentialité peut être nécessaire. Des bloggueurs désirant publier un journal quotidien de leur vie de famille, qui postent régulièrement des photos de leurs enfants, des amis de leurs enfants, divulguent sans s’en rendre compte des détails pratiques de leur vie privée. Noms des écoles, horaires et lieux des établissements périscolaires fréquentés… tout ceci peut être sensible.

Des webmasters voulant donner leurs opinions politiques ou religieuses, évoquer des hobbies ou des activités de manière discrète vis-à-vis de leurs collègues ou de leur famille, ont eux aussi la nécessité de brider l’accès de leur site à un public averti.

Comment bloquer l’accès à mon site pour filtrer les visiteurs
Il existe de multiples moyens avec les technologies actuelles, de verrouiller la diffusion de son site vis-à-vis du premier venu. Nous avons choisi la méthode que nous qualifions de plus simple, rapide, radicale et immédiate à mettre en application.

Cette méthode est dédiée aux blogs développés par WordPress, qui a l’heure actuelle fait partie des leaders des techniques de blogging. Il s’agit tout simplement d’une extension, que nous avons testé et approuvé.

Il faut rechercher l’extension Password Protect, gratuite et compatible avec toutes les versions de WordPress. Une fois téléchargée, il suffit de l’activer. Après, c’est un jeu d’enfant : il suffit de saisir un mot et de lancer la protection, et c’est l’ensemble du site qui se verrouille instantanément.

Il vous suffit de communiquer à vos proches le mot de passe pour qu’ils aient accès à votre site internet.

C’est du simple et du fonctionnel, l’efficacité est garantie ! L’éditeur de l’extension propose des versions plus abouties qui permettent de personnaliser l’interface de la page d’accueil, mais dans ces cas-là il faut mettre la main à la poche.

La version gratuite procure pour un blogger lambda une sécurité très appréciable, qui éloignera les intrus.

Nous avons listé un grand nombre d’extensions utiles
pour WordPress que nous avons détaillées.

La communication pour les entreprises est en constante évolution, et grâce aux media actuels et les outils mis à disposition, il est dorénavant possible d’acheter des images à des prix vraiment dérisoires pour illustrer l’ensemble des supports qui permettent aux sociétés à communiquer. Tout en achetant des visuels légaux et non pas volés sur internet, pour quelques euros vous pouvez acquérir des photos pour vos brochures commerciales, plaquettes institutionnelles ou site internet à des prix très compétitifs. Bienvenue au royaume des images de Microstock Libres de Droits.

Jusqu’en 2005 environ, il fallait débourser de grosses sommes d’argent pour acheter des visuels. Qu’il s’agisse de photos corporate (photos business, scènes de travail, réunion, logistique…), photos concept ou images dédiées à la publicité, il fallait compter à peu près 400 euros pour une image en libres de droits.

Depuis 2005, l’existence des microstock a complètement démocratisé l’achat de visuels et a permis aux entreprises, PME, collectivités, associations, fédérations de pouvoir s’offrir des images de bonne qualité pour des sommes très modiques, tout en restant dans la légalité.

Ainsi, si vous avez besoin d’illustration visuelle pour l’iconographie de votre compagnie, n’hésitez pas à acheter des images pas chères, vous ferez des économies intéressantes dans votre budget d’achat d’art. Comme ce sont des photos libres de droits, le même visuel pourra être utilisé pour une plaquette institutionnelle, une annonce-presse, une newsletter ou le blog de votre société que des graphistes mettront en page.

Une photo discount réutilisable à souhaits sur plusieurs supports, c’est vraiment trocool de faire de telles économies et de pouvoir se payer des visuels de photographes de qualité.

Nous vous recommandons Fotolia, une banque d’images leader sur le marché de la photothèque pour la communication des entreprises ou des particuliers.


Comment acheter ces images vraiment pas chères ?
Une fois votre compte créé (ça va vraiment très vite), il vous suffit de faire une recherche par mot-clef du type d’image recherchée. Si vous désirez acquérir des photos relativement précise, entrez les mots-clefs à la suite les uns des autres. Dans les cases à cocher vous pouvez préciser si vous voulez acheter des illustrations (dessins, 3D…), de la photographie traditionnelle, des vecteurs (achat de logo ou de pictos) ou même des fichiers video (pour des présentations powerpoint, des animations flash ou du montage video).

Vous pouvez choisir des options de recherches par rapport aux formats (visuels portraits = horizontal – ou paysages = vertical), des photos vendues souvent (qui ont fait leurs preuves) ou au contraire très peu vendues (donc plus exclusives). Un choix de présentation d’images par date est aussi proposé (photos récemment proposées à la vente ou images plus anciennes).

Une fois la photo trouvée, cliquez dessus pour l’afficher en grand, puis cliquer sur « ajouter au panier ». Vous pouvez acheter plusieurs images, puis quand votre iconographie est prête à être achetée, rendez-vous dans le panier. Là vous choisissez les formats d’images qui vous intéressent (du XS pour le web au XL ou plus grand pour du print).

Quand vous avez déterminé les formats, validez vos achats et vos fichiers se téléchargent immédiatement sur votre disque dur. Ils sont prêts à être utilisés tout de suite !

Internet est vraiment trocool pour chercher et surtout trouver tout ce dont on a besoin pour beaucoup de choses. L objet de ce post est de centraliser ici des liens qui nous sont fort utiles pour dénicher les bons outils au bon moment. Typos, logos de clients, brushes pour Photoshop, photos libres de droit, tutoriels, voyons quels sont les meilleurs sites pour télécharger tout ce qui nous sera utile pour l’édition, quelle soit online ou off-line.

Télécharger gratuitement des polices d’écriture Mac ou PC
www.1001fonts.com
www.dafont.com
www.larabiefonts.com
www.google.com/webfonts

Images Libres de Droits pas chères
Notez que pour ces sites il vous faut bien sur ouvrir un compte – gratuitement – pour acheter les photos
Différentes licences sont disponibles selon votre utilisation. A titre d’information consultez notre petite histoire des banques d’images en ligne pour bien comprendre ce dont il s’agit.
www.fotolia.com
www.iStock.com
www.deviantart.com

Brushes Photoshop
De très bonnes ressources pour les graphistes… de tout poil
www.chezplumeau.com

Logos d’entreprises et de marques
Cela peut paraître surprenant, mais il existe des sites internet où l’on peut trouver les logos à télécharger gratuitement au format vectoriel de grandes marques de sociétés ou de produits. Cela peut être utile quand vos clients ont du mal à vous fournir leurs propres sources. Cependant attention : les identités visuelles étant toujours en constante évolution, prenez garde à bien vérifier que vous avez les versions actuelles de leur image de marque.
www.lalogotheque.com
www.webchantier.com

Tutoriels
www.tuto.com
www.gfxartist.com
www.thegnomonworkshop.com

Blogs
Bien sûr l’incontournable et trocool : wordpress.com, plateforme de blogs sur laquelle est développé notre site !
www.freewpthemes.com pour avoir un choix intéressant de thèmes gratuits à télécharger.

Trocool.com est développé sur la plate-forme de WordPress, pour des choix d’ergonomie, de convivialité et de simplicité dans la mise à jour du site. Nous ferons très certainement un article pourquoi notre stratégie de développement utilise WordPress.

L’objet de ce post est de synthétiser les extensions les plus utiles que nous avons découvertes sur WP, d’une part pour notre usage personnel, à savoir un bloc note qui nous permet de nous rappeler comment installer telle ou telle extension et quels sont les paramètres principaux à configurer. D’autre part, bien entendu, nous considérons ces extensions vraiment trocool pour donner un contenu dynamique en terme de graphisme ou d’ergonomie à un site ou un blog, c’est pourquoi nous voulons partager avec vous nos découvertes.

Soyons clairs, nous ne sommes pas des techniciens du web : notre objectif est avant tout d’animer un blog en termes de contenu, pas de trifouiller du code, sans quoi nous n’aurions pas choisi WordPress comme solution.

Afin de nous aider dans le développement de notre site, nous nous sommes fortement appuyés sur ce livre consacré à WordPress que nous vous recommandons de vous procurer sur Amazon au meilleur prix. Que vous soyez un expert ou un novice dans l’univers de la blogosphère, tant sur le fond que la forme, ce livre consacré à WordPress 3 est une réelle bible !

Tout ceci pour expliquer que ce simple constat a influencé notre manière de chercher les extensions. En effet, ne voulant toucher qu’au minimum du code, nous avons voulu chercher les plug-ins les plus simples et intuitifs qu’ils soient.

Loin de vouloir des usines à gaz avec pléthore de paramètres à régler, nous voulions du simple et de l’efficace.

Dans la navigation de gauche, aller dans la rubrique « Extensions » et cliquer sur « Ajouter ».
Dans la fenêtre qui apparait, il suffit de taper précisément ce que l’on cherche, c’est-à- dire soit la catégorie de plug in, soit la dénomination exacte de l’extension.

Les catégories de plug ins les plus utiles
Nous recherchions deux types d’extensions : le premier dédié aux posts (derniers posts mis en ligne), le deuxième dédié aux images afin de faire vivre l’iconographie et d’animer le site visuellement.

Les deux dénominations les plus précises pour rechercher ces extensions, sont le caroussel et le slider. Les deux signifient globalement la même chose : faire défiler successivement dans une zone donnée, un contenu spécifique qui pointe sur une page ou un article.
Une fois ce type d’extensions trouvées, nous ne voulions encore une fois pas d’installation compliquée en terme d’intégration dans la page. Beaucoup de ces plug ins nécessitent une intervention dans les codes des fichiers .php, nous avons préféré pour des extensions qui puissent s’intégrer par un shortcode par un souci de grande facilité.

Qu’est-ce qu’un shortcode ?
Il s’agit d’une très courte phrase de code fournie par le plug in, une fois celui-ci paramétré, que l’on peut copier ou bon nous semble dans une page ou un post. C’est d’une simplicité enfantine et sur les quelques extensions que nous avons testées, cela fonctionne parfaitement !

Voilà donc ci-dessous les extensions utilisées sur trocool.com et qui nous donnent pleinement satisfaction :

Easing Slider
De toute beauté, cette extension fait défiler dans une zone définie jusqu’à 10 visuels.
Tout y est paramétrable : la taille (en largeur et hauteur), les liens attribués à chaque slide, le temps et le type de transition (défilement, fondu…), la pagination (en chiffres ou en points).

Voilà un exemple concret d’Easing Slider :

Recent Posts Slider
Le nom parle de lui-même : c’est un slider qui publie les derniers postes écrits et mis en ligne.
Le paramétrage est un peu trop succint à notre goût. Il est possible de configurer la taille (largeur et hauteur), le nombre des derniers posts (avec la possibilité d’en exclure si on le désire), de régler la couleur du titre du dernier article, la vitesse d’affichage des posts et le style de pagination (points ou chiffres).

L’intégration de Recent Posts Slider nécessite de modifier le fichier .php, ce que nous ne voulions pas, en revanche il est tout-à-fait possible de l’utiliser en tant que widget, c’est donc pour cet usage que nous l’avons choisi.

Malheureusement nous n’avons pas réussi à afficher les photos en miniature des articles, aussi ce n’est qu’un contenu textuel qui défile.
Il est également regrettable de ne pas pouvoir avoir plus d’options sur l’affichage des photos, ni de choisir une couleur de fond de bloc, malgré tout ça permet quand même d’animer correctement une petite zone de la sidebar et ainsi de mettre en avant les derniers posts.

L’inconvénient de cette extension, est qu’une fois mise en place on peut la considérer comme de la pub Google AdSense, alors qu’il ne s’agit que d’une autopromotion en interne pour nos propres articles !

1-click Retweet / Share / Like
Partager un article de blog sur les réseaux sociaux principaux. Cela faisait longtemps que nous cherchions une extension de qualité simple à mettre en place pour diffuser un billet sur Facebook ou Tweeter. Simple à installer, facile à configurer, c’est de loin le meilleur plug-in que nous ayons trouvé pour faire le buzz sur internet en répandant sur les murs de nos amis des articles ciblés. Il n’y a qu’une installation à faire pour que s’affichent sur l’ensemble des pages les icônes de partage, ce qui évite de pénibles paramétrages article après article. Vraiment trocool !

Mettre un mot de passe sur son site internet
Protéger son site ou son blog peut être primordial pour qui veut un accès raisonné à l’ensemble de son contenu. Découvrez notre article détaillé sur l’extension Password Protect.

Rotating Posts
Il s’agit d’une extension permettant l’affichage des derniers articles WordPress de manière aléatoire. Nous l’utilisons sur la page d’accueil. Cela nous permet de mettre en avant n’importe quel sujet sur la home et de faire ainsi présenter nos archives en mettant le focus sur un post au hasard de notre base de données.

Très facile à configurer, là aussi ce n’est qu’un shortcode à intégrer dans une page ou un article. Il est possible de paramétrer une catégorie d’articles en particulier, et de délimiter combien de posts vont défiler à l’écran. En l’occurrence, nous avons choisi de n’en faire circuler qu’un seul, pour ne pas nuire à la lecture. Ainsi, dès qu’un internaute arrive sur notre page d’accueil, il a toujours un nouvel article sous les yeux. Ceci permet de varier le contenu et d’enrichir l’intérêt du blog.

Nous avons décidé de faire une synthèse de l’histoire de la vente d’images en ligne sur internet, afin de développer par la suite quelques articles sur ce nouveau commerce et vous permettre d’arrondir vous aussi vos fins de mois, en mettant vos propres images en ligne.

Pendant des années il n’était pas possible d’acheter des images d’illustration (on parle d’image de stock), sans débourser quelques centaines d’euros pour l’utilisation d’une image dans des conditions bien définies (pendant une durée définie, une zone géographique délimitée et une taille de reproduction déterminée).
Selon que l’on modifie tel ou tel de ces paramètres, le tarif de la licence d’utilisation était modifié. On parle ainsi d’images en droits gérés.

Au début des années 2000, un nouveau type de banque d’images a vu le jour, avec une licence spécifique de visuels libres de droits. Ainsi, ces contraintes d’utilisation ont été assouplies et pour un seul achat de droits d’images, il était désormais possible d’utiliser les photos comme bon semblait à l’acquéreur (sous réserve bien sûr de contraintes spécifiques comme des notions d’éthique). Cette arrivée sur le marché de l’image libre de droits a été une révolution dans le secteur de la vente d’images.
La taille de l’image n’est plus devenue que le seul critère de l’établissement des tarifs (généralement 4 tailles possibles – petit format pour le web ou une utilisation print en médaillon – moyen format pour une demi-page en print – grande taille pour du A4 en print, et enfin très grande taille pour de grandes impressions).

Depuis 2004-2005, un nouveau type de banque d’images a vu le jour avec Fotolia : le microstock.
Quelques entrepreneurs ont eu alors l’idée suivante : n’importe qui est capable de prendre des photos, et ainsi pourquoi ne pas les mettre sur le marché ?
Au départ les exigences étaient simples, la photo devait être bonne en termes de qualité (pas de flou, exposition correcte), suffisamment intéressante pour susciter l’achat de la part d’acheteurs potentiels, et pas d’éléments reconnaissables sans autorisation écrite (droit à l’image pour les personnes identifiables sur les photos, pas de logo de société, autorisation d’architecte pour des bâtiments très identifiables).

Ainsi quelques photographes amateurs sont devenus « contributeurs » de ces microstocks. Ils ont commencé à vider leurs disques durs pour mettre à disposition leurs images de vacances ou de la vie quotidienne en cédant leurs droits à ces photothèques, qui ne sont ni plus ni moins que des distributeurs d’images.

Nous avons rédigé un article pour vous aider à optimiser vos ventes sur Fotolia, de la mise en ligne à votre politique tarifaire, en passant par des conseils d’indexation.

Le succès a vite été au rendez-vous : ces pionniers des microstocks ont vu leurs images se vendre à des coûts extrêmement modestes, certes, mais à très grande échelle.
Les acheteurs ont sauté sur cette offre très alléchante : au lieu d’acheter une image plusieurs centaines d’euros, il leur suffisait de quelques euros (voire par la suite de quelques centimes d’euros)  pour acquérir ces licences libres de droits.

Afin de diversifier l’offre, les microstocks ont élargi leurs gammes de fichiers disponibles à la vente. Ainsi, en plus des photos traditionnelles, il est possible de trouver sur ces places de marché des visuels réalisés par des graphistes de type vectoriel (illustration, logos ou pictos), et depuis 2009 des formats audio et video. Ces deux derniers types servant pour de l’habillage sonore de présentation, du montage de films, des films institutionnels d’entreprise.

Bien sûr, les photographes professionnels et le milieu de l’image au sens large, ont vu d’un très mauvais œil cette concurrence « déloyale » qui a mis sur le marché des centaines de milliers d’images pour des coûts aussi modiques.
Pour contrer ces microstocks, des agences traditionnellles ont ainsi créé leurs propres banques d’images en ligne discount pour prendre des parts de marché à ces nouveaux venus, avec en plus un argument de taille : leurs visuels sont réalisés par des pros, donc une garantie de vendre de l’image de très grande qualité pour des prix imbattables.

Plus tard, le niveau d’exigence pour accepter ces images a été revu à la hausse vu la quantité d’images disponibles. Les validateurs ont été plus critiques sur les cadrages, le bruit des images, la netteté, l’exposition, l’intérêt des photos… le microstock s’est ainsi professionnalisé pour offrir des images de meilleure qualité aux acheteurs.

Justement, qui sont les acheteurs des banques d’images en ligne ?
Il y a bien entendu en premier lieu les acteurs de la communication (agences de publicté, de communication), bien entendu le secteur de la presse (achat d’art, service d’iconographie), bien entendu le secteur du net (webmasters, bloggers), et bien entendu les annonceurs directs qui ont besoin d’illustrer leurs brochures commerciales, plaquettes ou flyers à moindre coût. Ces derniers ont besoin de trouver des photos au meilleur coût pour leurs supports de communication.

Depuis 2009, un nouveau mode d’achat d’images en libre de droit a été proposé : l’abonnement. Ainsi les gros consommateurs de visuels (essentiellement groupe de presse et webmasters de sites d’actus) peuvent acheter un forfait mensuel ou annuel, et peuvent ainsi acheter des centaines ou des milliers d’images pour à peine quelques centimes, leurs volumes d’achat permettant d’avoir des tarifs dégressifs.

Quels sont les principaux microstocks, et quelles sont leurs spécificités ?
Sans rentrer dans les grandes lignes, il existe donc plusieurs banques d’images vendant du libres de droits, qui ont chacune leurs caractéristiques.

Fotolia
Le véritable pionnier du microstock.
Atouts majeurs : déploiement mondial défini par une traduction instantanée des mots clefs mis en ligne par les contributeurs. Ceci permet ainsi une diffusion dans un nombre très important de pays (France, Espagne, Italie, Allemagne, Royaume-Uni, mais également Turquie, Chine, Pologne, Russie, Brésil…)

Inconvénients : réellement orienté aux photographes amateurs, la qualité des photos est convenable, mais la majorité des photos proposées n’est pas exceptionnelle. Même si depuis 2009 le niveau d’exigence a été revu à la hausse.

iStock
Atout majeur : microstock de Getty Images. Profitant du soutient du Groupe, de milliers de contributeurs professionnels. Les photos sont irrépochables.

Inconvénients pour les contributeurs : le niveau d’acceptation est très élevé et peut-être rebutant pour un amateur.

CitizenSide (lire notre article sur CitizenSide.com)
Atouts majeurs : communauté très active de citoyens-reporters proposant leur images d’actualité aux médias.

Inconvénients : dédié uniquement à l’image d’information ou de presse

Merci de noter que cette petite histoire des banques d’images en ligne est rédigée à caractère purement informatif, ceci afin de compléter des plans trocool que nous vous soumettrons pour vendre soi-même des images en ligne à ces banques d’images libres de droits.

Petit truc auquel je pense pour mettre un logo ou un picto en aplat de couleur dans Photoshop. En effet, le premier réflexe que l’on a pour teinter un logo dans Photoshop, on pense à le sélectionner et à le remplir de la teinte de son choix.
Ca fonctionne, certes, mais le résultat n’est pas très propre car on récupère des pixels parasites autour de l’image.

Bien entendu, la meilleure solution est d’intervenir dans Illustrator, mais souvent d’une part on n’a pas le fichier source, d’autre part c’est plus long d’ouvrir le fichier dans Illustrator, le modifier, l’enregistrer et le réimporter dans Photoshop.

Pour quelle utilisation avons-nous besoin de passer un logo dans une seule couleur ?
Il s’agit le plus souvent d’encarts ou l’on a besoin de lister des partenaires/fournisseurs/sponsors d’une société. La diversité des logos (tailles, formes, couleurs et typos différentes) est telle qu’il est recommandé de les unifier visuellement pour ne pas polluer la mise en page avec une multitude d’images disparates. C’est justement le rôle des graphistes de veiller à assurer une mise en page homogène.

Voilà ma recette qui garantit une colorisation sans dégradation d’image.
1 – on importe les logos dans le document, ce peut être un picto, un texte, peu importe. Chaque logo génère automatiquement un nouveau calque.

2 – on aplatit tous les calques

3 – dans la fenêtre de calque on choisit l’effet « incrustation couleur ».

4 – on détermine la couleur et on applique l’effet.

Ca parait évident, mais quand je vois dans la presse ou sur la toile le nombre de logos abîmés, je me dis que ce n’est pas du luxe !

Pour faire simple, on enregistre essentiellement une image pour le web au format JPG, GIF ou PNG.
JPG : pour les photos avec des nuances de couleurs plus fines
GIF : pour les logos, pictos et lettrages, avec des couleurs en à-plat, avec la particularité de faire des animations.
PNG : pour les deux, mais avec la spécificité de gérer la transparence (préférence pour le PNG-24 qui gère mieux antialiasing).
Aliasing : aspect crénelé autour des images qui ne fait pas très propre.

Partant de ce constat, Photoshop propose la fonction « enregistrer ses images pour le web », sur laquelle j’ai détaillé les spécificités ici.

Le nerf de la guerre pour les graphistes fut un temps la rapidité d’affichage du fait de générations de modems 56k, l’ADSL étant loin d’être aussi démocratisée que maintenant. Cependant, comme j’en parle dans mon article sur la préparation des images pour le web, il est primordial d’optimiser l’iconographie du web.
Certes, le taux d’équipement des ordinateurs des foyers, entreprises et écoles est indiscutablement conséquent, et beaucoup ont souscrit une offre ADSL à gros débit, aussi on peut considérer qu’on peut se permettre de mettre des fichiers plus lourds en ligne…
Oui… mais non. Il y a des cas de figures pour lesquels le poids est une contrainte majeure, je pense à une utilisation bien particulière : les e-mailings.

Un e-mailing, s’il est lourd, soit ne passera pas le seuil acceptable d’un poids limite, soit sera considéré par le logiciel de messagerie comme du spam et sera traité comme indésirable, soit tout simplement la lenteur pour ouvrir la pièce jointe (ou insérée) va décourager le destinataire qui le mettra illico à la corbeille.

Il est donc important de veiller à gagner des octets là où l’on peut.
Fort de ce constat, j’ai étudié pas mal de paramètres pour l’enregistrement des images gif.
Pour le jpg ou le png, il n’y a pas 36 options, c’est très simple. En revanche le gif a énormément plus d’options, de paramètres complémentaires qui peuvent détériorer la qualité d’image ou l’alourdir considérablement.

Eh oui, il y a un équilibre à trouver, un compromis redoutable qui s’offre au graphiste : privilégier la qualité ou la taille de l’image.

Le gif animé peut être désespérant au niveau de l’enregistrement : lors de sa conception on n’a aucun souci de couleurs, les dégradés et nuances restent subtils, par contre le gif peut vraiment abîmer le rendu final.
Déjà on n’a pas le choix du format, car le jpg et le png sont pour les images fixes, pour l’animation, à moins de faire du flash, pas d’alternative !
Pour le coup où l’on a des photos faisant partie intégrante du projet, bonjour la dégradation d’image !

Je mets donc en ligne le meilleur réglage auquel je suis parvenu pour le traitement des gifs animés, qui n’altère pas trop l’image et prépare un fichier de taille optimale :

Depuis quelques temps, même si j’adore Flash pour la fluidité exemplaire des animations, je délaisse ce logiciel pour la réalisation de sites web pour plusieurs raisons :

Compatibilité
Même si Flash est une technologie incontournable du web, je suis toujours surpris d’avoir des échos d’internautes qui n’ont pas le plug in requis, et beaucoup rechignent à l’installer. Quand il s’agit de particuliers c’est juste dommage, mais ce n’est pas dramatique. En revanche, lorsqu’il s’agit de sites internets pros et que les clients de mes clients ne peuvent lire les anims, là c’est catastrophique !
Même si elle n’est qu’illustrative, c’est toujours rageant d’avoir une icône brisée ou un lego à la place de l’animation, mais lorsqu’il s’agit d’une navigation à part entière qui ne s’affiche pas, c’est impardonnable.
Les utilisateurs finaux n’étant pas des graphistes chevronnés de la technique, ils ne vont pas s’amuser à télécharger des plug-in (des quoi ?) sur l’ordinateur de leur société. Ils n’ont qu’une trouille, que plus rien ne fonctionne après, et cette crainte est tout à fait légitime !

Référencement
Flash permet des jeux typographiques fabuleux : titrages animés, effets spéciaux, les panoplies d’habillage de textes sont nombreuses.
Le gros intérêt de Flash est aussi d’être sûr qu’une police spécifique utilisée sera respectée et s’affichera comme définie par l’auteur du webdesigner.
Le souci, lorsque l’on s’intéresse au référencement, est que Flash est réellement un frein pour aider Google à balayer le contenu d’un site. En effet, si tous les textes sont intégrés dans une anim, les robots ne les prendront pas en considération car il ne pourra pas indexer le contenu textuel.
Il vaut donc mieux choisir de rester en HTML. Ce sera moins esthétique mais plus efficace. Le talent du webdesigner est justement de jongler avec les contraintes techniques, et les contraintes de typos sont importantes à prendre en compte.

Maintenance
Si le site doit être mis-à-jour avec une fréquence régulière, Flash est nettement plus contraignant. En effet, il faut entrer dans le .fla, faire les modifs, exporter le .swf et remettre en ligne… pas très souple.

iPhone/iPad
Certes, ça peut sembler dérisoire, mais vu le taux de progression de vente d’iPhone et d’iPad, force est de constater qu’une quantité considérable d’internautes adopte un nouveau support pour surfer. Jusqu’à l’arrivée de l’iPad je ne prêtais guère attention à cette observation, mais quand je vois l’engouement des consommateurs envers la tablette d’Apple, je me dis que je dois au maximum me passer de Flash afin d’avoir des projets consultables de la manière la plus universelle possible.
Au fait, quelle est la raison de cette lacune sur ces iPhone et iPad ? L’ego de Steve Jobs qui en gros a dit à Adobe que Flash était de la m…

Solution : retour au bon vieux gif animé
Pour habiller de manière dynamique les interfaces, j’ai de plus en plus recourt au GIF animé. Je suis en fait de plus en plus séduit par ce format d’image qui existe depuis les balbutiements du web. Longtemps considéré comme un peu « cheap » à cause d’utilisations intempestives, le gif a eu mauvaise presse et fait toujours un peu ringard. Malgré tout, c’est un format que j’affectionne car il a beaucoup évolué dans sa conception.
Avant qu’Adobe ne l’intègre dans Photoshop, il fallait utiliser ImageReady. Maintenant qu’il est sous l’égide de Photoshop, les choses se sont nettement simplifiées ! Les paramètres sont très subtils, il est possible d’avoir la main sur tout ce qui peut concerner une animation (le timing de chaque image, combien de fois la séquence globale doit être jouée..).
Bien sûr il faut comparer ce qui est comparable, on ne peut faire en gif l’équivalent de flash en terme de fluidité de précision graphique (flash utilisant des données vectorielles et le gif du bitmap il y a forcément pixellisation avec ce dernier), mais pour de l’animation illustrative le gif est un bon palliatif.

Depuis la sortie de l’iPad, je préfère concevoir des sites de manière plus traditionnelle en HTML que de faire des effets de styles dans Flash qui ne seront pas visibles sur certains supports et rendront le référencement naturel plus délicat.

Après avoir eu vent de l’info, un petit tour s’imposait pour vérifier cette évolution Googuelienne : adieu la page blanche, il est désormais possible de personnaliser sa page d’accueil !

OK, on ne peut pas dire que ce soit le scoop du siècle, mais tout de même, chaque évolution chez Google n’est pas anodine, car c’est tout de même l’un des premiers sites de la Toile en termes de fréquentation !
Une des forces de Google avait justement été l’intelligence du dépouillement de la page de recherche. Un peu de texte, un logo, 2 boutons. That’s all, folks !
Ainsi, même avec les connexions les plus pourries, Google a toujours été le plus rapide à s’afficher face à la concurrence.

Une page se tourne, forcément avec le taux d’équipement des internautes du monde entier (ordinateurs plus véloces et débit fortement amélioré par rapport aux prémisces de Google), et d’autre part je pense que Bing (le moteur de Microsoft) apporte une interface plus flatteuse avec tous les jours de nouvelles photos.

Là où Google se distingue (une fois de plus), est qu’il permet la personnalisation des photos qui habilleront la home page. Effectivement, un vaste choix de visuels est proposé, mais de plus il est possible d’uploader ses propres images.
Il suffit d’être inscrit et d’avoir un compte Gmail.
On ne peut pas dire que la fonction soit mise en avant : la fonctionnalité est proposée mais clairement planquée en bas à gauche de l’écran. Pas de souci sur un petit moniteur, en revanche sur grand écran on n’y prête pas forcément attention.

Toutefois je nuance fortement mon enthousiasme en lisant la mention du site, qui indique que OK, tu mets ton image sur la home page, mais en retour ton image sera proposée à la base d’images Picasa. Sympa pour les droits, et surtout ça n’engage pas à mettre en ligne la photo de ses gamins qui peut être utilisée pour habiller des pages d’accueil Google chez n’importe qui…

Que sont les CSS ?

Les Cascading Style Sheets sont une avancée révolutionnaire, qui permettent d’un coup d’un seul pour un graphiste de modifier l’apparence d’un site internet. Tout logiciel de mise en page permet de concevoir et d’appliquer des feuilles de style, et permet ainsi d’automatiser l’ensemble des attributs graphiques d’un texte.

La hiérarchie d’un article

Il est important d’avoir plusieurs niveaux lectures dans un texte, qu’il s’agisse d’un magazine, d’une brochure institutionnel, d’un site ou même d’un blog.
Le contenu proprement dit d’un article est le texte courant. A celà s’ajoute un titre d’appel qui donne au lecteur en quelques mots la synthèse de ce qu’il va lire. C’est la formule minimale : titre + texte courant.

Ensuite, il est important de multiplier les entrées de lecture par des procédés divers et variés. Souvent un nom de rubrique permet d’indiquer à quel domaine fait référence le sujet de l’article.
Avant d’entrer dans le vif du sujet, au chapeau introduit la lecture en quelques lignes. Le lecteur peut ainsi comprendre les tenants et aboutissants de l’article.

Une porte d’entrée est également l’illustration qui aura intérêt à être légendée.
Enfin, pour casser la densité d’un article qui peut s’avérer rébarbatif car très long, des exergues sont les bienvenues. Ce peut-être une citation d’un interlocuteur, une expression mise en avant, par des guillemets ou autre astuce graphique.

Pour résumer les entrées :
Nom de rubrique
Titre
Sous-titre
Chapeau
Légendes de photo
Exergues
Texte courant

Avec tout cet arsenal de « titraille », même si votre sujet n’est pas lu complètement, le lecteur aura saisi d’un coup d’œil le sujet et l’esprit de votre message.

Les feuilles de styles

Pour bien marquer leur différence, le fond et la forme de ces composants de texte ont leur importance, c’est justement ce qui crée une hiérarchie contextuelle.

Un titre sera par défaut l’élément le plus visible, un nom de rubrique sera habituellement mis en retrait de manière discrète, un chapeau en gras italique, une légende en maigre italique, et le texte sans fioriture. Ce ne sont bien sûr que des généralités, après c’est justement au graphiste de jouer. Evidement, le support même ainsi que les sujets traités donnent l’esprit graphique à apporter. Un blog sur un groupe de muisque et un rapport instituionnel n’auront pas les mêmes codes, mais cependant intrinsèquement ils auront malgré tout une hiérarchie de contenu à respecter.

Les feuilles du style pour le web

Il y a évidement beaucoup moins de choix de styles de textes pour le web que pour le print. Il faudra se débrouiller avec un arsenal moindre, mais c’est justement un bon challenge de concevoir une mise en page avec peu de moyens.
Pour commencer, le choix des polices est des plus limités, il faudra se cantonner avec des polices très usuelles.

Ensuite concernant les tailles de textes, la précision est beaucoup moins fine que pour le papier : taille des caractères, approches et interlignes ne sont pas très flexibles.
On peut donc jouer avec une ou deux familles de caractères, des solutions classiques de regular, gras ou italique et des gammes de couleurs.

Les CSS

Les CSS consiste donc à déterminer des emplois types de style en fonction d’une utilisation donnée, nous retrouvons les titres, rubriques, chapeaux, légendes et textes courants, ainsi que les liens.

Le but est de créer un fichier CSS, qui permet d’attribuer très précisément à tous ces composants de textes les styles désirés. Plus que les textes, il est possible de définir le fond de couleur des pages du site.

Personnellement je trouve le système vraiment facile et agréable à l’utilisation, d’autant que le CSS peut être interne à la page (auquel cas il n’est appliquée qu’à celle-ci), ou extérieur et dans ce cas de figure les performances sont prodigieuses.

En effet, il est possible sur l’intégralité d’un site de modifier instantanément tous les attributs. D’un coup la couleur de tous les titres, la taille des noms de rubriques, l’aspect des légendes et le graphisme des liens changent sur l’intégralité des pages.

Force est de constater que la plupart des blogs sont conçus en CSS, ainsi il est courant de voir chez les hébergeurs de blogs des thèmes entiers de skins complètement personnalisables. Dès que l’on choisit un thème graphique, l’ensemble du blog change ainsi immédiatement de look de manière automatique.

Comment créer les CSS

Chaque élément de texte correspond à un code source spécifique. Il suffit donc d’indiquer précisément pour chacun de ces éléments quelle est la police, la taille, la couleur et le style (gras, italique…) désiré.

Pour ce faire il vous faut un éditeur CSS, ou alors connaître le développement et entrer directement en mode source les codes des attributs.

Tous ces éléments sont listés dans votre fichier CSS (qui a pour extension .css), et il suffit de faire une liaison entre votre page (ou votre site entier) avec ce fichier css pour appliquer partout les feuilles de styles.

Un exemple concret est ce blog sur lequel vous surfez. A la base j’ai essayé un hébergeur de blogs, puis comprenant les grandes lignes du procédé, j’ai appris à mettre en application les feuilles de styles pour gérer la mise en page de manière entièrement automatisée.