Les nouvelles de l'atelier

Bienvenue dans la boîte à outils de l'atelier.

Cette semaine dans mes lectures beaucoup d'optimisation, et un cadeau.

Optimisation matérielle tout d'abord, la semaine dernière, nous parlions d'optimiser la vitesse de chargement de site internet (je vous présentais même un site pour vous aider dans votre diagnostic), cette semaine, c'est sur le blog du E-tourisme qu'on trouve une liste de bonnes raisons d'optimiser la vitesse de téléchargement de son site :

• La prise en compte de cette vitesse de chargement par Google,
• La prise en compte par les visiteurs de cette vitesse de téléchargement (si c'est trop lent, je zappe le site);
• et surtout la démocratisation des smartphones et des périphériques mobiles dont le débit de chargement est (largement) plus faible que celui des réseau ADSL.

Puisqu'on parle mobiles et optimisation (vois ami lecteur cette élégance dans les transitions), cette semaine Apple a publié un ensemble de recommandations à l'attention des développeurs webs qui souhaitent optimiser leur site pour l'Ipad, la tablette graphique de la marque à la pomme : le guide en anglais est ici.
Dans le même esprit (but in ze langue of Molière) le JDN avait publié deux articles sur l'optimisation des interfaces web pour l'Iphone. On y trouve de nombreux conseils utiles, tant sur la structure du site ici, que sur sa forme là.

Pour faire la transition entre technique et contenu, Ramenos listait ses 20 réflexes (tics) de spécialiste SEO à son arrivée sur une page web. Dans les commentaires de son article s'ajoutent les réflexes d'autres professionnels, en tout une trentaine de règles à garder en tête dans la phase d'optimisation du site.

Mais si le contenant a son importance, le contenu est la base de tout (attention petit Padawan c'est la citation de la semaine):

« le design et la structure d'une page web ne sont que l'écrin du message qu'on souhaite y faire passer ».

Afin d'optimiser vos messages je vous conseille la lecture de l'article de Sylvaine Pascual : Les ratés de la communication: non demandes et petites manipulations qu'on pourrait résumer par : « demandez clairement ce que vous voulez».
Pour sa par mon complice David fait une magnifique traduction/adaptation d'un article américain : Comment BIEN écrire (des articles de blogs et des romans d’amour, entre autres choses). Si j'en crois le nombre de retweets c'est une perle d'humour et de bon sens à imprimer et à garder sous les yeux. (il va falloir que je vire ces parenthèses quand même non ?)

Et pour finir LE cadeau !
(je ne parle bien sur pas de celui que vous pouvez gagner en votant pour ce site au concours RégionsJob, ceci est une autre affaire)

Le cadeau dont souhaite vous parler aujourd'hui, c'est le magazine PHP solutions qui vous l'offre :  à partir de son numéro d'avril, PHP solutions devient téléchargeable gratuitement. Au programme du numéro d'Avril on trouve entre autre un article sur Les Google WebmasterTools, un préprocesseur CSS, un tutorial sur la manipulation les cookies avec PHP,Un comparatif de forums PHP et bien d'autres choses. Le site du journal est là , le numéro d'avril est ici.

Bonne lecture et à la semaine prochaine pour la suite

J'ai parfois du mal avec l'affirmation contenue dans le titre de ce billet, et c'est généralement l'opinion de la plus part des communicant.

En effet, il n'est pas rare (et c'est encore plus vrai dans le cas de la création d'un site web)  que le client arrive avec des exigences concernant les détail, alors qu'il néglige complétement l'objectif de sa communication.

Cependant on aurait tord de prendre ces exigences pour des lubies, à travers les affirmations des clients  se cachent souvent des informations qu'il est important de décoder;

Il y a quelques temps, un client m'expliquait avec force détails qu'il voulait pour son site du flash de lightbox et des dégradés web2. (le dégradé est très heureux d'être 2.0), et des effet de coveflow pour les diaporama qui rappelle l'I-phone ... la liste etait longue et finalement très technique, par contre, rien (ou presque sur le contenu).

Et puis au détour de la réunion une phrase : "il faut que les jeunes aient envie de venir sur le site"

Comme quoi il est très important de bien écouter, en fait derrière cette débauche de technologies tape à l' œil , se cachait le besoin de de toucher un public jeune a partir du site.

Tout de suite, avec cette information, il est devenu plus simple de proposer un site au client, qui réponde a son besoin : parler aux jeunes.

La dernière fois que j'ai vu ce projet, il n'y avait pas une seule animation Flash dedans, par contre le client était ravi.

Sinon, il arrive vraiment que les clients aient  une idée très précise de la manière dont il veulent vous voir faire votre travail. c'est ce que j'ai pu voir aujourd'hui dans une chronique de Wow effect qui m'a rappelé excellente série de vidéos virales de l'Agence Web  Fusion sur la  crème qui fait grossir votre logo

[youtube=http://www.youtube.com/watch?v=5rSkOZy7nmU]

L'idée du blog Les nouvelles de l'atelier a pris forme il y a quelques mois. j'étais déjà blogueur depuis quelques années avec un blog au contenu éclectique, J'y fais des calembours douteux, je parle de musique de vie quotidienne de geekeries diverses et parfois de mon boulot.
C'est a ce moment que tout ce corse (comme le dit Napoléon) , Dès que je publie un article un peu technique, j'effraie certains de mes amis lecteurs.

En effet, ce qui a attrait à la création web fait un peu peur. Tout le monde a une petite idée de ce qu'est un site Internet mais ce n'est pas pour autant qu'on a envie de le voir les tripes à l'air le corps démembrés : avec d'un coté sa structure, de l'autre le JavaScript et les feuilles de style, Les serveurs et des langages de programmation, des stratégies de référencement l'accessibilité.

J'ai donc décidé de mettre de l'ordre dans tout ça d'un coté un blog perso, et de l'autre un espace plus pro, ou je parle de ce que je fais au quotidien (et de ce que je ne fais pas obligatoirement mais que d'autre travailleurs du web font).

Comme certains de mes lecteurs on l'air de trouver mes conversations d'atelier intéressantes, je me suis permis d'inscrire ce blog au concours des blogs emploi qu'organise Régions Job.
 avec le soutien d'Alapage Si toi aussi tu trouve le blog intéressant :
je t'invite :

• à aller sur cette page, 
• à sélectionner les nouvelles de l'atelier ,
• à indiquer tes coordonnées,
• et à valider ton vote,

Cela me permettra (peut être) de gagner un lot sympa, de plus il semble qu'en votant tu peux ami visiteur gagner des lots aussi.

Pour voter, tu peux suivre ce lien

Bonjour ami lecteur (trice) et bon week-end.
Cette semaine je te propose une boîte a outils éclectique et allégée. éclectique parce que contrairement à la semaine dernière, je ne me soucierai même pas d'y mettre un semblant de cohérence et allégé car même si je n'y présente que deux outils, c'est du lourd. commençons.

Utiliser des caractères exotiques dans ses mises en page

Je vais tout d'abord te parler de polices de caractères et de Google. Comme tu le sait sans doute sur Internet les polices de caractères définies par le concepteur s'affichent uniquement si elles sont présentes sur l'ordinateur de celui qui consulte la page.

Ainsi si tu veux utiliser une police comme par exemple  IM Fell english tu peux :

• soit prier pour que le visiteur du site ai installé la police sur son ordinateur
• soit essayer de trouver une méthode alternative, 

ces méthodes alternatives sont :

L'utilisation d'une Image : ce qui est très simple a mettre en oeuve, mais pas du tout dynamique , en effet, impossible d'écrire (proprement) un titre a la collée avec cette méthode.

L'utilisation de Facelift qui fonctionne sur le même principe mais pour sa part génère les images à la volée à l'aide de PHP c'est on peut voir quelques exemples ici.

L'utilisation de Sifr qui croise le JavaScript, Flash et les CSS pour permettre l'emploi de n'importe quelle police (en effet il existe un générateur de polices capable de créer une police compatible avec Sifr Ici tu peux voir des exemples de résultats sur cette page.

Il existe aussi des alternatives qui travaillent à partir d'une image, de JavaScript et de CSS comme Fontjazz, ou s'appuie sur le rendu vectoriel du navigateur comme la librairie Typeface.

Cette semaine Google se lance dans le créneau de la police dynamique, avec son moteur de rendu Google Font API et un catalogue de polices compatibles, le Google font directory (qui devrait s'étoffer dans les semaine à venir) qui présente un double avantage : l'utilisation des serveurs de données de Google (ce qui vous permet de limiter l'utilisation de votre bande passante) et une mise en oeuvre assez simple. Le revers de la médaille étant de rendre chaque jour l'Internet un peu plus dépendant du géant du web.

Dans la pratique, cette méthode permet en 2 lignes de codes ( Typeface et Fontjazz ne demandent pas beaucoup plus de code) d'utiliser une police exotique pour ces titre, tu peux en voir un exemple en regardant les titres de ce blog. Pour arriver à cet effet, il suffit deux étapes :
ajouter un lien vers la police entre les balise de ta page, comme ceci

1. IM+Fell+English' rel='stylesheet' type='text/css'>

et définir ta police de titrage dans la feuille de style en indiquant que tu souhaite utiliser la police IM Fell English

1.  h2 { font-family: 'IM Fell English', arial, serif; }

ce qui permet de jouer sur tes titres comme tu le vois sur ceblog, si l'on en crois Google, le système est compatible avec tous les navigateurs (y compris IE6, ce qui n'est pas une mince affaire).

Jouer sur la vitesse de chargement de son site.

Il y a quelques semaines, Google (Qui ça ?) annonçait que la vitesse de chargement d'un site devenait l'un des paramètres de classement de son site. ainsi pour deux sites à contenus informatifs équivalents (pour les algorithmes de Google) le plus rapide sera classé en premier dans les résultats de recherche.

Cette semaine, c'est le Blogueur Gularu qui faisait le bilan des démarches d'optimisation de la vitesse de son blog, non pas par rapport aux moteurs de recherches mais par rapport a ses utilisateurs (ce qui est quand même le principal) son bilan : si le site est plus rapide, le trafic augmente.

Une bonne raison d'auditer la vitesse de son site (et d'améliorer ses performances) et une ocasion pour moi de te présenter un outil en version Beta, GTmetrix qui audite une page web  (et peut comparer deux pages dans le cadre d'une optimisation) , et indique les points fort et les points faible de la conception de votre page en matière de vitesse. à titre d'exemple tu peux voir le test de l'atelier ici.

Un peu de lecture pour le week-end

Je parlai à l'instant de Google et de son omniprésence, cette semaine se tenait une conférence qui présentait les outils et les stratégie de la marque , l'une de ses annonces a fait beaucoup de bruit, elle concernait la télévision  et je voudrai partager avec vous cet article de Véronique Rabuteau dont j'ai bien aimé l'analyse (qui m'a fait un peu froid dans le dos) j'en profite pour te faire une sortie avec une belle phrase bien creuse de chef de projets pour alimenter ta réflexion de petit padawan (ou de padawanette, c'est toi qui vois) :

«On fait des sites web avant tout pour ceux qui les consultent, pas pour les moteurs de recherche.»

à ce propos, que pense tu du site en police 16 Px ?
à bientôt pour la suite

Mes petits camarades de chez Corporatement votre ont relayé ce matin initiatives de Make it Green :

En un mot si vous êtes l'heureux possesseur d'un blog et que vous faites un billet sur l'initiative, cette association allemande s'engage à planter un arbre en votre nom dans le parc des Plumas au Etats-Unis,Ce faisant vous contribuez à réduire l'empreinte écologique de votre blog.

Cette sympathique initiative m'incite vous parler des hébergeur verts. il y a quelques mois dans le cadre d'un projet de site web sur le développement durable sur lequel j'ai travaillé pour une fédération de pays touristiques la question de l'hébergement vert c'est posée, le projet ayant une importante consonance environnementale.

Sur ce sujet l'excellent blog GreenIT  propose 3 ressources intéressantes

• Un annuaire des hébergeurs verts,
• Une liste des critères permettant de définir un hébergeur vert,
• Et un petit guide pour alimenter sa réflexion sur des sites web à l'empreinte écologique réduite.

C'est assez intéressant à lire, et ça donne un autre angle de vision sur la conception et le suivi de projet web

La boîte a outils de l'atelier revient en deuxième semaine. merci a ceux et celles qui on lié ou twitté son contenu.

le hasard (dont on dit qu'il fait bien les choses) me pousse à vous parler typographie. avec un article très intéressant relevé sur le blog Le Typographe, on y parle de lisibilité sur les site web en particulier avec l'utilisation des polices de caractère en format 100% (soit a peu près 16px) avec quelques exemple de site ayant adopté ce format. je vais peut être me pencher sur la feuille de style de ce blog qui sort largement du cadre...

Polices toujours chez les toulonnais d'Emob qui proposaient cette semaine (et la semaine dernière) deux sélections de polices de caractères gratuites c'est là pour la première partie et là pour la seconde, j'en profite aussi pour ajouter une ressource essentielle pour tout ce qui a trait aux polices de caractères sur le site de Luc Devroye qui propose une page de ressources et d'information sur la typographie  avec une selection de sites proposant des polices de caractères libres, en freewares ou en sharewares qui est tout simplement fabuleuse.

Puisqu'on a des polices, pourquoi ne pas se saisir de papier pour les utiliser (vous avez ici un exemple de transition pitoyable) Dezignus proposait mardi un ensemble de textures de papiers très sympas.

Enfin, dans l'esprit de Geocitizer qui permet a votre site d'avoir l'aspect d'un site de 1998  (oui ça fait peur) on trouvait chez techi.com les 13 règles du site au top en 98 (c'est en anglais, mais je vous résume en quelques mots) :

1- Avoir un hébergeur gratuit (et pas avare sur la pub)
2 - Avoir un nom de site bien geek (et impossible à retenir)
3 -Avoir plein de pages vides avec un beau visuel "en construction" ou "en chantier".
4 -  Utiliser une image de fond de pages bien visible (et super flashi)
5 - Mettre en avant son contenu en utilisant de multiple police de caractères (en priorité du Comic Sans MS, c'est ben ça le Comic Sans)
6 - bien entendu utiliser un service de redirection d'url (pour compenser le fait d'être chez un hébergeur gratuit, voir plus haut)
7- Avoir une page d'entrée avec une bien grosse image dessus et un bouton "cliquez pour entrer dans le site), les gens adorent les splash screen avec un modem 33K)
8 - proposer un livre d'or (ou les gens se doivent de dire comme vous êtes doué)
9 - metre pleins de bouton (Made with mac, Microsoft IE, Netscape...) c'est vachement amusant
10 - Mettre une popo-up a l'ouvertutre du site (ou un outon alert) ça fait pro qui maitrise le javascript
11 - proposer un compteur de visiteur ( ce qui permet avotre grand mêre de savoir qu'elle est votre seule visiteuse)
12 - n'oubliez pas de mettre de nombreux Gifs animés
13 - Et un fichier midi en boucle en fond sonore

ne riez pas, j'en ai vu des sites comme ça, j'ai même du en faire un ou deux...
l'intégrale de l'analyse est chez techi.com

à la semaine prochaine

Il vous est sans doute déjà arrivé pour un projet d'avoir besoin (ou envie) d'utiliser d'une police de caractère, aperçue dans un logo ou une publication.

Cependant trouver la police correspondant a ses besoin est assez complexe.

deux outils permettent cependant de vous guider dans vos recherches

http://www.identifont.com/ vous aide à définir la police de caractère que vous cherchez  grâce a des questions sur l'aspect des différents caractères qui la compose (position de la barre du T, présence d'empattements, etc.)

Pour sa part WhatTheFont propose à partir d'une image téléchargée (ou récupérée sur internet) de découvrir les polices utilisée  dans un texte ou un logo.

J'ai beaucoup de mal a séparer mes activités sur le web. certes j'utilise Viadeo pour bosser et copains d'avant pour retrouver (ou essayer de me cacher de mes ex  petits camarades de classe). par contre il y a des outils ou cette séparation est moins nette.

Mon google reader, mon compte facebook et ma ligne twitter mélangent allégrement les genres, on y parle politique, apéros, Bretagne, famille ou boulot. et dans tous les cas de figure on y trouve des gens fabuleux et des propos plein de bon sens.

Cette profusion d'informations et d'écrits de qualité m'incite à vous livrer ici quelques liens vers des outils et articles découvert dans la semaine et qui  au fil du temps viendront compléter la boîte à outils de l'atelier. (si je ne suis pas un trop gros feignant).

Cette semaine au fil d'un article sur Partageons l'addiction (ou l'on découvre qu'on peut monter au Wikio parce que les autres descendent et que peu a peu les Tweets remplacent les commentaires ... bon je résume, mais tu lira l'intégrale chez lui) j'ai découvert  backtweets.com , un outil  qui permet à un bloggeur de suivre comment ses articles ont étés twitté.

Seb Sauvage pour sa part nous livre ses extensions Firefox préférées,  j'utilisait déja quelques unes d'entre elles, mais j'ai énormément apprécié Lazarus qui permet de récupérer le contenu d'un champ de formulaire, après une fausse manip ou une expiration de session. et Fireshot qui fait de bien belles copie de pages web (a inclure par exemple dans les briefs et les présentations clients), a voir aussi chez Seb Sauvage la liste des nominés aux  Big Brother Awards.

On apprend chez Oseox les bienfaits des boutons rouges (cet article n'est  pas sur l'acné) ;o).

il y aurait bien deux trois autre trucs, mais si je vous dis tout maintenant, de quoi on parle dans le chapitre 2