Archive pour la catégorie ‘Gestion de projet’

Guide à destination de nos amis graphistes… vu par un développeur

Publié le 19 December 2011, par Babozor

Oui ami graphiste, tu es beau svelte et musclé, tu manie la tablette graphique comme personne et tout ta famille te surnommes “photoshop”… mais voilà, parfois quand tu nous transmets tes jolis PSD et ben ça va pas.
Voici donc un petit guide pour calmer la guerre Dev VS Graphiste et te permettre de connaître les attentes des devs, les trucs qui vraiment nous énervent ou juste nous font perdre un temps infini.

Vilain psd

Design Général
Tu es plein de bonnes idées et c’est tout à ton honneur, mais autant cela semble un concept original et novateur, autant à mettre en place c’est juste un cauchemard…

Pleins de typos pas système
Oui certes cette police rend très bien sur tous les titres de tes créas, cette variante de “stencil” lui donne un air très martial, mais tu dois aussi prendre en compte que ce n’est pas un police système, donc il faudra soit créer physiquement les images et les inclure dans le site web, ou alors tenter de faire monter cette police de caractères dans les navigateurs nouvelle génération. Dans les deux cas une galère qui pourrait sans doute être évitée avec un peu de créativité et sans tomber dans la facilité d’une police bien funky mais qui n’est pas un standard

Des designs ronds
Peu importe la spécialité, si quelqu’un a déjà monté une page web, il te dira que la pire des chienlit est de tenter de monter un design bourré de courbes et de ronds. C’est certes esthétiquement très plaisant, mais vraiment galère à mettre en place. Si vraiment c’est “indispensable” penses à le rendre un minimum flexible, en le collant plus ou moins en image de fond, ou un truc du genre (ou même tentes simplement de laisser tomber cette idée lamantable)

Des câlages bizarres
Le langage utilisé sur le web est interprété, c’est à dire que le moteur de rendu le lit ligne après ligne et le rend au fur et à mesure. Cela rend le câlage de certains éléments dynamiques en hauteur pour le moins compliqué. Penses donc soit à limiter ou à fixer la taille en hauteur, soit à en discuter directement avec un dev si tu a un doute sur la faisabilité de ton design.

Ne pas penser et designer dans le sens inverse
C’est plus ou moins le même thème, mais par exemple faire un slider en jquery de haut en bas nécessite 2 includes et un appel… ultra simple. Tenter de faire ce même slider de bas en haut complique beaucoup les choses… donc penses-y au moment où tu design l’espace et les mouvements.

Les images en fond d’écran “fullsize”
C’est certes très joli (je connais quelques exemples qui rendent super bien) mais cela pose pleins de problématiques qui parfois peuvent emmener des tas d’emmerdes, en fonction de la taille du navigateur, de la hauteur du contenu, etc… et passer d’un dev trivial à un dev chaud avec plein de code javascript bizarre qui risque de ralentir de façon considérable le projet

Mettre le design dans son contexte
C’est très souvent oublié par beaucoup de graphistes, on nous rend un projet, une page, mais qui n’est pas remis dans son contexte. Quand le navigateur est très grand (1600 pixels de large par exemple) comment viens se câler le design de 990 pixels de large? Centré, câlé à gauche, à droite? Avec une marge sur le côté, en haut? Pensez-y…

Les PSD
Tel un gros orc bourrin ton arme favorite est le PSD de 40 Mo, voici donc quelques tips pour ne pas te faire haïr par les devs avec qui tu risque de travailler

Anti aliasing

un PSD fourre-tout
On y trouve tout et surtout n’importe quoi, des calques non utilisés ou vides, qui ont tendance à nous embrouiller lors des tentatives de découpage et d’export… j’ai déjà vu plusieurs version de design sur le même PSD, bref un galère pour savoir quoi garder et quoi mettre à la poubelle

les calques pas nommés ou avec des nommages inutiles
Je pense qu’on a tous vécu ça, un PSD de 30 Mo, avec 200 calques, aucun groupe et surtout des claques qui s’appellent de façon très originale “calque 1″, “calque 2″, etc.. Allez retrouver le bon morceau du design à exporter avec ça.
Comme pour les dev qui mettent des variables “prout” dans leur code, le mieux (même pour toi ami graphiste) pour s’y retrouver est encore de tenter de nommer les calques de façon correcte et compréhensible par tous.

des groupes de groupes de groupes, de groupes…
Grouper les calques c’est bien, en faire trop, ça ne sert pas à grand chose et cela à même tendance à compliquer le tout. Si un groupe a un seul calque, ce n’est plus un groupe (puisque la définition d’un groupe c’est que y’a plusieurs éléments à l’intérieur), donc tentez là aussi de grouper les calques sous un même thématique. Pas besoin de grouper comme des psychopathes, si les calques sont bien nommés ils parleront d’eux même.

Le web c’est 72 dpi pas 300
je sais que ça peut paraître bizarre, mais il m’arrive encore de temps en temps de recevoir des fichiers conçus en centimètres ou en pouces avec un définition print pour un montage web. Cela peut paraître anodin et vous allez me dire “Oh arrêtes de faire ta chochote t’a juste à le redimensionner”… certes, mais toutes les tailles des typos, les espacements, etc… s’en trouvent chamboulés, et puis c’est le travail du graphiste de nous remettre un fichier exploitable.

Penser à l’antialiasing
Le Gaming OldSchool j’adore ça, j’aime aussi beaucoup l’art 8bit, mais sorti de son contexte c’est moyen. Faites donc attention à l’antialiasing, sinon toutes vos polices, dégradés, ombres ou courbes risquent de rendre super moche, voir juste inexploitables.

Fournir les polices manquantes (ou pas système)
Si vous utilisez des polices non systèmes (qui ne sont pas inclus dans les principalement plateformes) ou exotiques, vous avez deux choix: rasteriser toutes les polices (si les textes ne changent pas) ou nous fournir des fichiers exploitables pour pouvoir utiliser correctement vos PSD. Si ce n’est pas le cas, vous courrez le risque de voir vos polices substituées par des polices système et donc votre design être dégradé.

Penser au découpage et à l’export
Vous savez utiliser des fonctions super funky de masquage de calque sur Photoshop c’est très bien, mais moi je sais pas l’utiliser, et ce que j’ai besoin c’est de pouvoir exporter votre travail en optimisant le temps passé dessus. Pensez donc qu’il peut y avoir deux versions de votre fichier: celui sur lequel vous travaillez (avec vos masques et tous vos trucs bizarres de graphistes) et la version pour export, plus simple et beaucoup plus basique.

Non mon but n’est pas ici de relancer la sacro-sainte guéguerre Dev contre Graphiste, mais justement de donner des clefs aux uns et aux autres pour comprendre pourquoi les graphistes râlent sur les Dev qui eux même râlent sur les Graphistes (et les Chefs de projet, les marketteux et globalement tout le monde)

Quelques conseils pour finir:
– n’hésitez pas à poser des questions à votre dev préféré: il n’y a aucune honte à poser des questions, aucune question n’est idiote, surtout si ça vous fait économiser du temps (ainsi qu’au dev) donc n’hésitez pas. Est ce que c’est faisable, chiant à monter, est ce que tu es capable de le faire, est ce que ça va pas nous mettre hors-budget? Just ask (damn it!)
– nettoyez vos PSD: rien n’est plus insupportable pour un dev que de devoir passer une demi journée à nettoyer le PSD qu’un graphiste viens de lui remettre (c’est d’autant plus désagréable quand il s’aperçoit que ce n’est pas la version finalisée du projet). L’état de votre PSD est très caractéristique de l’estime que vous avez de lui… faites un peu le ménage et il vous en sera très reconnaissant.
– demandez ce que le dev a besoin: sans tomber non plus dans l’exagération, vous pouvez échanger un peu sur les préférences sur le nommage des calques ou les éléments à exporter, cela facilitera la vie à tout le monde.

Voilà j’espère que nos joyeux amis graphistes ne se seront pas offusqués, et je suis sûr que pleins de dev ont des histoires de psd horribles à raconter, donc je vous laisses les commentaires pour le faire.

Ce que 3 ans de LaGrotteDuBarbu m’a appris

Publié le 7 November 2010, par Babozor

Voilà un peu plus de trois ans que j’ai lancé un projet un peu barjot: LaGrotteDuBarbu, un podcast vidéo plus ou moins régulier avec comme point central le DIY et ce que j’appèles le “casual hacking”. Une caméra, un peu de temps (et des soirées/nuits un peu réduites), quelques idées, un peu de matériel et c’est parti… et contre toute attente ça dure depuis presque trois ans, avec en moyenne entre 10 et 15 000 vues par épisode et une bonne cinquantaine d’emails reçus chaque semaine (au dernier comptage j’ai plus que 280 emails à répondre, désolé si les réponses sont parfois super longues).

Que m’a donc appris cette aventure? Pleins de choses, en fait:

IMG_0415.jpg
Un projet un peu fou: le casque de DarthVader en Pepakura

1. Des remords plus que des regrets
Vous avez une idée, mais vous ne savez pas si ça va marcher? Et bien tentez l’aventure plutôt que de toujours reculer, même si vous n’avez pas tout le matos, toutes les connaissances, etc… mieux vaut tenter et se planter, que ne rien faire et regretter quelques mois après.

SANY0011.jpg
Leçon retenue: meuleuse + short = mauvaise idée

2. Trouver les bons outils, indispensable…
Que ce soit pour découper du plexiglas, percer des trous, monter un pc, fabriquer un casque de clonetrooper, ou encore pour produire un podcast vidéo, si vous trouvez les bons outils, les bons process, c’est déjà 50% gagné (et on voit sans trop de mal le rapport avec TravailleursDuWeb)

IMG_0326.jpg

3. Donnez, et vous recevrez
C’était déjà le principe pour ce blog, ça a aussi été celui, fondateur pour LaGrotteDuBarbu: basé sur le beerWare (vous faites ce que vous voulez du podcast, si ça vous plait et que vous me croisez, payez moi une bière) et sur le fait que si on se base sur l’intelligence collective on va plus loin. Une réponse démentielle au projet, du monde qui regarde ma vilaine tête et mes projets un peu débiles (c’était déjà la première surprise) et beaucoup beaucoup de réponses: des conseils, des encouragements, des insultes (très peu soyons honnêtes), des propositions de projets cools ou bizarres…

IMG_0269.jpg

4. Du fun, du fun, du fun
Balancer pas loin de 80 épisodes (d’une petite demi heure en moyenne) c’est beaucoup de boulot, donc si vous vous enmmerdez ou que vous ça pour le fric (ah ah ah elle est bonne celle là… pour le fric) vous êtes mal parti. Votre première motivation doit donc impérativement faire des trucs qui vous plaisent, sur lesquels vous vous éclatez, sinon les 5-6 heures de montages par épisode vous sembleront bien longs.

IMG_0274.jpg
Le setup un peu sommaire de prod de LaGrotteDuBarbu: une caméra, un ordi, un mirco

5. Partager sa passion, toujours une bonne idée
Peu importe votre passion (cela peut être la reproduction des crustacés, le crochet ou encore le catch cambodgien) vous pouvez vous adonner seul à cette passion dévorante, ou bien échanger avec d’autres afficionados de cette même passion. Que ce soit clair, plus on est plus c’est fun et surtout cela à tendance à décupler votre passion, en vous ouvrant de nouveaux horizons, ou de nouvelles voies. Mon conseil, partagez (même si votre projet vous semble bancal ou foirreux, les autres vous aideront à recadrer tout ça)

IMG_0180.jpg
Mon nouveau pied d’écran… en légo

6. Etre à l’écoute
Pour qu’un échange soit fructueux il doit aller dans les deux sens (ça paraît con dis comme ça, je sais), donner mais aussi recevoir et donc être à l’écoute des autres, de leurs avis, de leurs suggestions, de leurs projets, de leurs difficultés, de leurs succès. Il faut aussi être à l’affut de tout ce qui passe dans votre communauté, que ce soit via une mailing list, un forum, 237 flux rss…

IMG_0317.jpg
Une tentative (plus ou moins désespérée) de rangement de ma grotte

7. Apprendre de nouvelles choses, de nouvelles techniques, de nouveau matériaux
C’est sans doute la partie que je préfère: être devant un problème, trouver une piste quelque part, mais cela nécessitera d’apprendre quelque chose de nouveau. Que ce soit un nouvel outil (j’ai récemment ré-appris à utiliser correctement un pied à coulisse non numérique), un nouveau procédé, un nouveau logiciel, un nouveau matériau, une nouvelle technique, je me comporte comme un éponge, j’emmagasine, j’enregistre et j’essayes, j’apprends… et c’est toujours passionnant.

IMG_0287.jpg
Ma SuperNES qui est tombée par terre… et réparation imminente prévue

8. On apprend plus des Fail que des réussites
Là non plus ce n’est pas une surprise, que ce soit de comprendre que porter des gants et des lunettes de protection c’est indispensable (avec un presque Fail fatal pour un de mes yeux, pas cool du tout j’avoues, mais leçon apprise), ou encore que certaines choses ne se comportent pas comme on l’espérait, les erreurs sont élément indispensable dans le processus d’apprentissage. Même quand les choses en apparence se passent bien, on peut toujours mieux faire, faire plus efficace, ou d’une autre façon, des micro-fail en quelque sorte… et même de ça on apprend beaucoup.

SANY0568.jpg
Mon casque de CloneTrooper… trop petit comme d’hab mais du bon fun et un résultat plutôt pas mal du tout

9. Une bonne préparation est indispensable
Vous voulez un résultat pas trop dégueulasse? Une des leçons de ces heures passées dans ma grotte, c’est que prévoir un minimum, réfléchir et préparer aussi bien un sujet qu’une plaque de MDF pour être peinte vous évitera beaucoup d’ennuis. Y aller à la bourrin c’est bien, se renseigner et préparer c’est beaucoup mieux.

SANY0286.jpg
Mario et son clône

10. Rien n’est impossible (c’est juste parfois long et/ou couteux)
C’est la dernière leçon, sans aucun doute la plus gratifiante. Peu importe le domaine, le niveau de complexité plus ou moins apparent, rien n’est impossible, il vous suffit de vous renseigner, d’apprendre les différentes techniques, de foirrer, de foirrer encore et encore, de découper ça en morceaux plus accessible et RIEN n’est IMPOSSIBLE. J’ai touché à des domaines que je pensais franchement inaccessibles, j’ai démonté (et réussi plus ou moins à remonter) des objets que je pensais intouchables, et fais bien plus que ce que je pensais pouvoir faire.

Voilà presque trois ans et (bientôt dès que l’épisode Saison 03 Episode 0F sera en ligne) 81 épisodes de casual hacking, beaucoup de travail, d’énergie, énormément de fun, une réponse de la communauté hallucinante et une expérience juste démentielle. Beaucoup de leçons apprises, encore bien plus à choper…

Passage de TravailleursDuWeb en WordPress 3.0.1 – histoire d’une migration (un peu) prise de tête

Publié le 7 November 2010, par Babozor

A part quelques erreurs présentes de façon temporaires (et tout de suite remontées via Twitter et corrigées au plus vite) je suis passé le week end dernier de la version 2.3 (avec toutes les failles qu’on lui connaît) à la dernière version (la 3.0.1) de wordpress

wp_ajour.jpg

Pourquoi avoir tant attendu?
La dernière mise à jour datait de plusieurs années (un an et demi je penses au moins) et j’avoues que mes expériences de migration de blogs sous WordPress (avant la 2.5 en tout cas) m’avaient laissées de mauvais souvenir, plantage général, thème inutilisable… et donc j’ai toujours repoussé la mise à jour fatidique qui ne manquerais pas de mettre à mal mon blog.
Mais bon au vu de toutes les failles critiques présentes dans la 2.3, je me suis dit qu’il était grand temps de faire un peu de ménage et de mettre à jour la bête.

Backuper et préparer
La première chose à faire est donc de backuper tout, d’abord votre base de données… ensuite vos plugins et contenus (aussi bien vos thèmes que vos images) dans le répertoire wp-content, et quelques fichiers ici et là (en particulier le config.php histoire de pas perdre votre connexion à la base de données)
Je désactive tous les plugins et c’est parti… (cette étape est très importante)

Jouer un peu au bourrin
Tout est backupé, c’est parti pour l’écrasage de fichier… en gros je copie tous les fichiers du zip trouvable sur wordpress.org, sauf le répertoire wp-content (qui contient tous les plugins, le thème de mon wordpress, etc…) et j’attends sagement que le transfert se termine.
Comme je l’ai dit plus haut il est important de désactiver les plugins et TOUS les plugins, pas juste ceux qui semblent plus ou moins inutiles.
Moi j’avais décidé de garder Akismet actif (celui qui lutte contre les commentaires de spam) ce qui a causé à mon install quelques erreurs. J’ai été obligé de passer via MySQL pour le désactiver (un article de référence btw à lire ici) et tout roule plus ou moins (après un update de la base de données pour la remettre au niveau de la nouvelle release).

Réparer
Maintenant que vous avez de nouveau accès au BackOffice de WordPress, vous ré-activez vos plugins et vous regarder les erreurs sur le front, vous nettoyez les différentes erreurs (soit de plugins qui ne marchent plus, soit de ceux désactivés) et vous êtes bon

Hop c’est reparti…
En conclusion, un petit flip, une petite heure d’indisponibilité, mais un blog remis au niveau (et que je vais tenter de garder plus ou moins à jour)

Pourquoi avoir updaté mon wordpress?
Voilà pourquoi:

C’est bon vous êtes calmé? plus d’infos ici et

GTD – TodoList toujours synchro avec TaskPaper sur Mac et iPhone

Publié le 2 November 2010, par Babozor

Si comme moi vous avez un trillions de choses à faire par jour (que ce soit pour le boulot et pour des trucs perso) vous avez besoin d’une méthode et surtout d’outils performants. Des outils vous en trouverez pleins différents, mais voici l’outil que j’utilise le plus: TaskPaper

taskpaper.jpg

Gestion des TodoList simple et efficace
J’ai dû déjà en parler, mais mon application favorite pour gérer toutes mes todo-list est une petite application développée par HogbaySoftware et qui s’apparente à un fichier texte un poil amélioré. Un environnement graphique très simple, un fichier, des groupes de tâches, des tâches, des contextes, la possibilité de biffer des tâches, de rechercher des termes, de regrouper les tâches par contexte…
C’est simple, c’est efficace, ça marche bien (ça bouffe rien que CPU et comme RAM) et ça coûte 30 dollars.

taskpaper_iphone.jpg

Version iPhone
La version iPhone est similaire à la version Mac, aussi simple, j’avoues on cherches parfois les menus (pour supprimer une liste ou un item par exemple) mais après quelques minutes on retrouves nos petits et c’est tout aussi simple.
Je m’en sers très très souvent, comme par exemple pour faire mes courses et ne rien oublier, mais aussi noter des choses sur mes divers todo list, sans avoir à ouvrir mon laptop.
Ca coûte 8 euros sur l’AppStore (ouais c’est un poil cher mais ça vaut vraiment le coup)

taskpaper_sync.jpg

Synchro entre iPhone et Mac via SimpleText
Alors on a deux applis (payantes) sur deux plateformes différentes, c’est bien, mais ce qui rajoute un élément carrément démentiel, c’est la synchronisation entre les deux via un petit soft à installer sur votre Mac qui s’appele SimpleText (et gratos).
Quand vous installez l’application il crait un répertoire sur votre Mac et synchronise tous les fichiers de ce répertoire avec le serveur en ligne (vous avez besoin d’un compte google pour le faire, histoire de vous authentifier facilement).
Dès que vous avez installé l’application, vous pouvez synhcroniser dans les deux sens, de votre Mac vers votre iPhone et inversement, et ça c’est carrément démentiel, de pouvoir biffer ou rajouter des tâches depuis l’un des deux terminaux et de toujours avoir vos listes à jour.

taskpaper_folder.jpg

Une application simple, certes pas gratuite (mais il faut aussi savoir récompenser le travail de développeurs indépendants), disponibles sur Mac et iPhone et avec un système de synchronisation… pour moi c’est le gestionnaire ultime pour mes TodoList.

Guerre des navigateurs, pour les développeurs, en 12 ans rien n’a changé…

Publié le 19 October 2010, par Babozor

Cela fait maintenant un peu plus de 12 ans que je suis développeur web, une grosse décennie, et ce qui me navrais à l’époque est malheureusement toujours d’actualité.

Nestcape contre Internet Explorer
Au tout début de ma carrière de développeur web, je travaillais pour une agence web spécialisée dans les technologies microsoft (ouais je sais le côté obscur est toujours le plus tentant surtout au début), on développais en ASP sous SQL Server (pour ceux qui se souviennent avec les extensions FrontPage et ce genre de crottes) et à cette époque notre bête noire était Netscape… pleins de trucs ne marchaient pas dessus, et sur beaucoup de pages et de fonctionnalités on devait faire un développement spécifique pour ce navigateur.

Internet Explorer contre les autres
Je vous passes les détailles de ces douzes dernières années, mais aujourd’hui la situation n’a paradoxalement pas bougé des masses… on a toujours d’un côté Internet Explorer qui s’entête avec son moteur merdique et de l’autre Mozilla, Webkit et Opéra qui respectent globalement les standards. Toujours la même situation (plus ou moins inversée si on considère la situation particulière dans laquelle je me trouvais), on développe ça marche nickel et puis on test sous IE et là le double dev commence.

Des différences dans le CSS d’un navigateur à un autre
Je ne parlerais pas ici des propriétés pas pris en compte par tel ou tel navigateur, mais de l’écart qui commence à se former entre les différents navigateurs au sein même du groupe qui respecte les standards du web. Certaines propriétés comme border-radius nécessitent un préfixe -moz pour un code spécifique pour Mozilla, alors que d’autres le sont pour -webkit et d’après mon expérience ça n’augure rien de bon au contraire…
(je ne parlerais pas du fait que la plupart de ces propriétés ne sont pas présentes dans IE, c’est censé être prévu dans la version 9, wait and see)

Le problème de persistance des navigateurs
Outre ces combats inter-navigateurs, le principal problème est que la nouvelle version d’IE même si elle est censé respecter beaucoup mieux les standards ne se payera pas une part significative de présence en remplacement de la précédente avant des années… pour exemple la part des utilisateurs d’IE6 semble s’effriter mais est toujours belle et bien présente (quand on sais à quel point ce navigateur est merdique, il a de quoi se faire des sueurs froides en pensant au pourcentage de présence d’IE7 et 8 dans les années à venir).

La solution? Respecter les normes et bannir les vieilles versions d’IE
Pour ma part j’ai trouvé une solution qui n’en est pas vraiment une.
La première partie est de tenter de respecter au plus près les standards et normes du web, cela permettra à votre code d’être beaucoup plus portable d’un navigateur à un autre, d’un OS à l’autre.
La deuxième partie est d’annoncer clairement les conditions de support des différents navigateurs, pour ma part c’est Mozilla, Webkit (donc Safari et/ou Chrome) Opera et IE7 et supérieur, avec les précisions suivantes: support complet pour IE8, partiel pour IE7 et pas de support pour IE6. En gros si ta mère à son travail regarde ton site sous IE6 et bien c’est dommage pour elle.

A quand une vraie harmonisation des navigateurs web?
Même si beaucoup d’efforts ont été faits (et pour ça je me dois de baisser bien bas mon chapeau à Mozilla qui pousse toujours les autres dans la bonne direction) pour des moteurs de navigateurs plus rapides, mais surtout plus respectueux des standards, certains (que je pointes du doigt: cf Microsoft Internet Explorer qui sont obligés de faire de la pub à la téloche pour redorer leur blason) restent à la traîne et continuent à jouer les poils à gratter pour nous autres pauvres développeurs web.

Et vous c’est quoi vos expériences de galère de développement Cross-Browser?