Archive pour la catégorie ‘Linux et logiciels libres’

PNGCrush ou quand Y! Smushit ne suffit plus

Dimanche 26 septembre 2010

Ce soir, pour la première fois depuis que j’utilise Smushit pour optimiser mes images, je suis tombée sur un cas d’image PNG qui, bien qu’elle ait bien un problème d’affichage de couleurs chez moi, Smushit n’a trouvé aucun octet à enlever.

Je me retrouvais donc devant un problème puisque c’était le seul outil d’optimisation que j’utilisais jusqu’à maintenant.

La ligne de commande salvatrice

Je me souvenais que PNGCrush pouvait enlever les profils ICC qui sont sources de ces problèmes que j’ai, mais je n’avais pas trouvé dans le man quelles options taper pour enlever toutes les infos inutiles.

Mais puisqu’il me restait que ça comme solution, je me suis mise à faire une recherche sur Google en tapant « enlever profil ICC pngcrush » pour finalement tomber sur cet article de blog qui, bien qu’elle parle surtout du gamma et de Safari, donnait LA commande à taper pour enlever les informations colorimétriques superflues dans les images PNG !

Donc si vous êtes sur Linux et que vous faites vos images avec Gimp, installez d’abord pngcrush (pour Ubuntu – à adapter à votre distro) :

sudo apt-get install pngcrush

Ensuite, vous n’avez qu’à taper cette commande pour chacune de vos images PNG fraîchement enregistrée avec Gimp :

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB ancien_fond.png nouveau_fond.png

Et hop, plus de problème !

phpBB2, le phénix

Vendredi 17 septembre 2010

Les vétérans de l’utilisation de phpBB qui se tiennent moindrement au courant savent que phpBB 2.x.x n’est plus maintenu depuis le 1er février 2009. Or, on voit encore beaucoup de forums phpBB2 qui ne veulent pas migrer, notamment à cause des nombreux MODs installés, même si la compatibilité de cette version avec les futures versions de PHP est incertaine.

Face à ce constat, l’équipe de la jeune communauté phpBB France dont je viens de joindre les rangs en tant que Responsable graphiste, a pris l’initiative de continuer le développement de cette branche, et donc de moderniser l’ensemble de son code pour que phpBB2 puisse fonctionner sur les versions actuelles et futures de PHP. Puisque le Groupe phpBB ne sera pas impliqué dans le développement même s’il est d’accord avec le projet, il s’agit donc d’un fork et, de ce fait, son nom changera pour EzBB, contraction de Easy Bulletin Board

» Voir l’annonce publiée sur phpBB France

Mon rôle dans le développement

Puisque je n’ai pas encore une maîtrise solide du langage PHP, je me suis proposée pour m’occuper de la partie HTML et CSS, qui sera revue en profondeur, et je compte y appliquer plusieurs choses que j’ai apprises sur Alsacréations. Quant au JS, je ne m’en occuperai pas, puisque mon niveau dans ce langage est très faible.

C’est donc pour moi la première fois que je participe aussi directement au développement d’un logiciel Open Source.

Et Connectix Boards alors ?

Même si je participe au développement d’EzBB, je n’abandonnerai pas Connectix Boards pour autant. Je continuerai de contribuer à ce projet, que ce soit en documentation, en MODs ou en styles ou encore en bêta-tests ou en proposition de bouts de code.

Autres nouvelles en vrac

En dehors de phpBB-France, je donne quelques nouvelles, en commençant par mon big-tuto Gimp qui déjà, a vite soulevé l’enthousiasme des membres du SDZ et qui n’a pas tardé à être cité sur Gimpfr.org, l’annonce postée sur GA aidant. Cela n’a pas tardé que j’ai été contactée par le Community Manager du SDZ pour m’informer que le cours allait être soumis à la zCorrection et donc, que je n’allais pas pouvoir y toucher tant que ce n’est pas terminé.

Cela me laisse donc le temps de travailler sur d’autres tâches et d’ailleurs, je me suis replongée dans la commande pour le forum Terraburg, et j’ai aussi codé un petit générateur pour phpBB-France.

Et parlant de phpBB, j’ai enfin fini la mise à jour des thèmes phpBB2 de Solitude et il ne me reste donc qu’à les mettre en ligne. Pour l’un de ces thèmes, je suis présentement en train de tester une technique d’arrière-plan étirable ainsi qu’un hack pour simuler position:fixed; sous IE6, mais le hic c’est la difficulté à trouver du monde qui a encore IE6, car les tests demandent de faire défiler la page. Et le hack en question utilise des expression CSS spécifiques à IE et dans ce cas, je ne sais jamais si le résultat est vérifiable sur les versions standalone (Multiple IEs – qui d’ailleurs ne fonctionne plus chez moi) ou émulées (via Wine).

Donc si quelqu’un passe par ici et a IE6, il peut laisser une réponse dans les commentaires.

[EDIT le 09/02/11] Suite à un échange de MPs entre moi et le fondateur de support-phpbb2, je considère maintenant que je suis prête à tourner la page, et pour lui prouver cela, je retire le paragraphe parlant de cette épisode, en plus d’avoir mis hors-ligne un article de mon ancien blog et édité les posts dont je me souvenais d’avoir parlé de cette épisode sur -fr.com et .biz

Nouvelles en vrac : Roulotte de camping et big-tuto GIMP

Mardi 7 septembre 2010

Je me rends compte que ça fait déjà trois semaine depuis mon dernier billet où j’annonçais mes vacances. J’aurais pu publier entre-temps, mais d’autres absences se sont ajoutées en plus que j’étais plutôt occupée. J’en viens maintenant aux nouvelles.

Geekette la semaine, campeuse le WE

Suite à la semaine passée au camping, dans la vieille roulotte que la soeur de ma marraine nous a prêtée, nous (mes parents + moi) avons assez aimé l’expérience qu’avant même de finir la semaine de vacances, nous commencions déjà à faire le tour des roulottes en vente. La soeur de ma marraine était même prête à nous vendre la sienne si son conjoint avait dit oui.

Je ne parle pas des tentes des tente-roulottes ni des hybrides (ces deux types ne nous intéressaient pas), mais bien d’une caravane aux parois rigides (extérieur en tôle ou en fibre de verre) avec les commodités élémentaires (salle de bains, cuisinette et lits dont une table abaissable pour faire un lit avec les banquettes, trappes d’aération) et d’autres commodités qui peuvent s’ajouter dans les modèles récents ou de luxe. Il n’était pas question non plus d’un motorisé de type Winnebago dont la voiture et la caravane ne font qu’un. Nous voulions une caravane qui puisse s’attacher à un véhicule au besoin, que ce soit une fifthwheel (ou caravane à sellette) qui ne peut s’attacher qu’à une boîte de camion, ou une roulotte qui s’attache à n’importe quelle voiture qui a une boule de trailer en arrière.

La tournée des roulottes

Dès que nous avons commencé à faire la tournée, nous avions d’abord vu une petite Dauphine 71 en bon état, mais le prix était franchement exorbitant pour son âge et son propriétaire ne voulait pas du tout négocier, ce qui nous a refroidis même si la roulotte était en bon état. Ensuite, nous avons repéré une fifthwheel Bonair 2000 de 24 pieds sur le bord de la plage, au même prix que la Dauphine. Bien qu’elle semblait intéressante avec sa chambre d’enfant, elle était étroite avec ses 7 pieds de large : il n’y avait de l’espace entre la table et le comptoir que pour laisser passer un adulte. Nous l’avions quand même gardé dans notre liste, sans nous douter qu’une autre fifthwheel que nous allions visiter par après serait notre coup de coeur.

Et le coup de coeur arriva

Alors que nous étions sur le point d’acheter la Bonair, mon parrain nous parle d’une Terry 97 de 27 pieds à vendre qu’il a repérée, mais lui et sa femme pensaient qu’il s’agirait d’un modèle pour couple. Eux et mes parents sont allés quand même voir, pour en revenir littéralement emballés : Au même prix que la Dauphine et la Bonair, la Terry est plus spacieuse et a un petit salon avec un divan convertible en lit, ce qui, avec le lit queen de la chambre des maîtres (dans le nez de la fifthwheel) et la table abaissable, permet de coucher 4 adultes. Il y a aussi un poêle avec four, un évier double, une salle de bains avec douche, une fournaise au gaz, un climatiseur, un système de son intégré, un auvent et du rangement à profusion. Et autre élément intéressant : la déco est dans des tons clairs (ce qui est parfait pour ma vision) et les tapis ont été remplacés par du stratifié (parfait pour ma mère qui est asthmatique).

Notre décision était donc prise : Dès la première occasion d’aller faire un tour à la maison, ma mère a fait sa demande de prêt, puis deux jours après, après beaucoup de tension causée par la peur que l’occasion nous échappe une autre fois, nous avons filé direct au camping le soir même où ma mère a eu sa réponse pour signer les papiers, et nous voilà propriétaires !

Je n’ai pas les photos, mais par contre, j’ai trouvé via Google Images une photo du même modèle de la même année avec les mêmes couleurs. Voici de quoi elle a l’air :
caravane identique à la mienne - Terry 97 de 26.5 pieds

Ma marraine nous dit que nous commençons déjà avec presque du camping de luxe, mdr !

Et le camion pour la tirer ?

Nous n’en avons pas encore, mais ce n’est pas grave puisque dans l’immédiat, nous ne bougerons pas du terrain que la soeur de ma marraine nous a laissé, et c’est l’ex-propriétaire qui s’est chargé de la placer. Mais il n’est pas exclu qu’à moyen terme, qu’on puisse voyager avec si mon père s’achète un camion. Pourquoi pas, surtout si je dois recommencer à aller à Québec pour mes examens en basse vision ? J’ai d’ailleurs eu de très bons retours au sujet du Camping de la Joie.

Et l’impact sur ma geekitude ?

J’avais déjà pensé à l’idée de m’équiper d’un ordi portable, mais puisque ma mère ne veut pas voir d’ordi entrer dans la roulotte, je ne peux donc que me résoudre à m’organiser autrement pour m’assurer que mes sites tournent sans anicroche lorsque je dois m’absenter pendant plus de 2 jours lorsque le camping rouvrira au début de l’été prochain. Pour ma todo-list aussi, ça change la donne et de ce fait, il faudrait bien que je me donne un coup de pied pour me lever tôt pour pouvoir travailler en journée lorsque je suis à la maison.

Par contre, je peux apporter mon Gameboy et mes livres fantasy.

L’autre nouvelle : le big-tuto GIMP

Je ne me souviens pas si j’en avais parlé sur le blog, mais ça fait plusieurs mois que je travaille sur un big-tuto GIMP, et ça faisait depuis le 30 juin que j’avais envoyé les premiers chapitres à la validation. Ce n’est finalement qu’hier, le jour même où je revenais d’un WE de 4 jours au camping, qu’il a enfin été validé ! Mettons que le déluge d’emails de notifications sur mon Yahoo et les 28 nouveaux MPs (24 de notifs de commentaires, 1 annonçant la validation, trois normaux) m’ont mis la puce à l’oreille alors que d’habitude, mon nombre de MPs par jour se comptaient sur les doigts d’une main quand j’en avais.

Vous pouvez le consulter sur ce lien : Apprenez à créer avec GIMP 2.6

Ce que je compte faire dans l’immédiat, c’est de mettre à jour les traductions, puisque j’avais su trop tard qu’il y a eu pas mal de changements dans la traduction française de la 2.6. J’aimerais aussi profiter du fait que j’ai upgradé Ubuntu cet été pour changer les captures et ainsi pouvoir peaufiner un peu plus la forme, en particulier pour le chapitre 6 qui n’a d’ailleurs pas été validé et qui a justement le plus besoin d’être retravaillé. Une fois les retouches faites, là je me mettrais à ajouter de nouveaux chapitres.

Bref, la saison froide s’annonce chargée, mdr !

Enfin sur Ubuntu 10.04 LTS !

Mardi 20 juillet 2010

Cela faisait au moins un mois et demi que je le disais que j’avais hâte de pouvoir upgrader ma Ubuntu à la nouvelle version LTS. Dimanche soir, j’ai enfin eu le temps de le faire et cela fait donc une journée complète que mon ordi ronronne sous la version du lynx lucide… tiens, c’est peut-être pour ça que mon gros ballon de chat (une femelle en passant) est venu se coucher en avant de mon écran le soir même pendant que je bossais, XD

Les raisons de la mise à niveau

Bon, pour revenir à Ubuntu, cela commençait à presser, puisqu’étant auteure d’un cours sur GIMP, je veux quand même garder une uniformité dans les captures, surtout que je comptais les retravailler de toutes façons. De plus, je sentais Jaunty montrer des signes de fatigue puisque les premiers mois, la connexion automatique marchait tout le temps alors que c’était rendu qu’il ne marchait qu’une fois sur deux, puis la dernière fois que j’ai retranscrit quelquechose sur openoffice (une recette de mousse au chocolat), OOo a planté au moment de l’impression, et il replantait lorsque je manipulais le fichier en question, comme si le fichier était corrompu. Aussi, j’avais fait plusieurs installations depuis des dépôts-tiers (surtout les dépôts PPA) et mettons qu’un ménage du printemps s’imposait.

Mais la raison principale reste que la version Jaunty Jackalope n’a plus que 3 mois à vivre et que j’avais de toutes façons l’intention de mettre à niveau à la nouvelle version LTS qui m’assurerait la paix pour au plus 3 ans.

Comment j’ai fait

Bien que l’on puisse faire une simple mise à niveau avec le gestionnaire de paquets, il est toujours préférable d’opter pour une réinstallation pure et simple du système, afin de s’assurer de repartir avec des systèmes de fichiers sains, sans erreurs provenant des installations précédentes. Et tant qu’à partir sur de bonnes bases, j’ai décidé de formater les deux partitions ext4 comme j’avais fait la dernière fois.

Donc si vous voulez réinstaller Ubuntu en formatant les partitions ext3/ext4, voici comment, ainsi que mes conseils :

Sauvegardez votre /home, et vérifiez deux fois plutôt qu’une !

Si vous avez un deuxième disque, déplacez-y tout le contenu de votre dossier personnel sur ce disque. Pour cela, ouvrez Nautilus en tant que superutilisateur :

sudo nautilus

Une fois Nautilus ouvert, sélectionnez l’ensemble des fichiers et dossiers contenus dans votre dossier personnel, pour ensuite les copier à l’endroit où vous voulez les sauvegarder. Si vous pouvez sauvegarder sur disque dur externe, sur clé USB ou sur DVD, c’est encore mieux, puisque ça diminue encore plus les risques d’accidents en cas de mauvaise manipulation.

Si vous avez un message indiquant qu’un fichier n’a pu être copié et qu’il s’agit d’un simple fichier de configuration d’un paquet, vous pouvez l’ignorer.

ATTENTION : Assurez-vous que tous vos dossiers et fichiers personnels se sont bien copiés, car il se pourrait que le copiage soit incomplet la première fois ! Revérifiez donc, et s’il manque des dossiers, copiez-les, pour être certain de tout sauvegarder !

Sauvegarder vos bookmarks Firefox

N’oubliez pas de sauvegarder vos bookmarks Firefox ! Pour cela, depuis Firefox, allez dans Marque-pages > Organiser les marque-pages Allez dans Importation et sauvegarde puis faites Sauvegarder pour avoir une copie au format .json, et Exporter en HTML pour sauvegarder une copie en HTML C’est toujours mieux d’avoir deux sauvegardes différentes, question d’être certain de toujours pouvoir restaurer depuis l’un ou l’autre des deux fichiers.

Enregistrez ces deux fichiers au même endroit que celui où vous sauvegardez votre /home

Sauvegarder vos projets Web

Si vous développez en PHP, ou que vous testez vos sites en local, il est aussi important de sauvegarder toutes les données relatives à vos sites locaux ! Pour cela, il faut non seulement sauvegarder les fichiers des sites, mais aussi les bases de données. Que ce soit via PhpMyAdmin ou en ligne de commande (avec la commande mysqldump), sauvegardez TOUTES vos bases de données, excepté les bases information_shema, mysql et phpmyadmin

Il est toujours mieux de procéder de cette façon, car ça ne marche pas toujours avec la simple sauvegarde du contenu du répertoire /mysql/. Je l’ai appris à mes dépends, puisque quand Ubuntu 8.04 avait crashé, je n’avais pas pu faire les sauvegardes avant que ça n’arrive, ce qui fait que pour certains projets Web (ceux utilisant le moteur de stockage InnoDB notamment), j’ai dû me rabattre sur des anciennes sauvegardes que j’avais sur une clé USB ou sur Wampserver.

Une fois les sauvegardes terminées

Vous avez sauvegardé vos fichiers, vos bookmarks ainsi que vos bases de données, vous pouvez maintenant insérer votre CD d’Ubuntu 10.04 LTS et redémarrer pour lancer l’installation. En passant par le partitionnement manuel, vous refaites simplement les points de montage et formater la partition racine du système, et la partition /home.

Si vous n’êtes pas certain quelles partitions correspondent à / et /home, lancez un sudo fdisk -l dans le terminal ou consultez le moniteur système (Système > Administration > Moniteur système) et notez vos partitions et leurs correspondances, avant de vous lancer dans l’installation. De cette façon, vous risquerez moins de vous tromper.

Vous pouvez vous aider avec cette partie de tutoriel même si celle-ci est basée sur une version 8.10 au moment d’écrire ces lignes. Mais cela devrait bientôt être mis à jour puisque je viens de voir que l’auteur du cours a commencé à mettre à jour les chapitres en vue d’une adaptation en livre.

Le mot de la fin

Pour le moment, il est encore trop tôt pour faire réellement un bilan, puisque je n’ai pas encore fini de préparer mon poste de travail pour reprendre mes activités normales. Pour le moment, LAMP est installé et fonctionnel, mais je n’ai restauré que la base de données de mon forum Connectix Boards modifié dans le but de vérifier la compatibilité du forum avec PHP 5.3. Il me reste encore 8 bases de données à restaurer, dont une que j’aurai à envoyer par morceaux en raison de sa taille (si je n’arrive pas le restaurer en ligne de commande).

GIMP, Emesene et Inkscape ont été parmi les premières applis à être installées, et il y a quelques heures, j’ai installé Meld, dont mathedit m’en a parlé suite à mon billet sur l’utilisation de hdiff, afin de le tester pour ainsi proposer une solution plus intuitive pour les Linuxiens qui veulent mettre à jour mes styles phpBB3 sur leur forum moddé.

Il me reste encore à installer Getting Things Gnome! pour organiser ma todo-list, ainsi que d’autres applis que j’oublie.

Je vous ferai un compte-rendu dans un mois ou deux.

[Linux] Comparer deux dossier récursivement avec hdiff

Mardi 6 juillet 2010

En voulant écrire ma news annonçant la mise en ligne de la nouvelle version de mes styles phpBB3, j’ai voulu donner le lien de la page de FluxBB.fr sur l’utilisation de WinMerge et hdiff. Or, ils sont en train de migrer et cette page n’est plus disponible, mais par contre, à l’heure où j’écris ces lignes, la page est encore en cache sur Google. J’en profite donc pour écrire ce billet afin de garder une page explicative à porter de main, ce qui sera autant utile à moi qu’à d’autres Linux-users non-familiers avec Perl qui veulent mettre à jour leur forum ou style sans se péter la yeule, en bon Québécois.

Préparer le terrain

Commencez par aller télécharger le script sur ce lien

Hdiff est à exécuter où vous le voulez.

Si votre hébergement vous permet un accès en ssh, vous pouvez exécuter le script sur votre site. Sinon, vous pouvez le faire en local.

Pour cela, sous Linux (ou Windows, avec Cygwin ou ActivePerl), décompressez d’abord les deux dossiers à comparer si besoin :

unzip dossier1.zip

puis

unzip dossier2.zip

Un petit coup de ls -l vous indiquera que vos deux dossiers sont bien décompressés.

caroline@caroline-desktop:~$ ls -l | grep dossier
drwxrwxrwx 6 caroline caroline 4096 2010-07-05 05:31 dossier1
-rw-r--r-- 1 caroline caroline 1198101 2010-07-05 05:34 dossier1.zip
drwxrwxrwx 6 caroline caroline 4096 2010-07-05 05:30 dossier2
-rw-r--r-- 1 caroline caroline 1103539 2010-07-05 05:34 dossier2.zip

Maintenant, exécutez hdiff récursivement comme suit :

~/hdiff -r -o hdiff-dossier1_to_dossier2.html dossier1 dossier2

Si hdiff et vos fichiers ne sont pas dans le dossier racine de votre /home, indiquer le chemin relatif du script à partir de la racine du dossier personnel ! Ainsi, si hdiff et vos dossiers sont situés dans le dossier test qui se trouve à l’intérieur de /home/toto, vous devez donc faire comme ceci :

~/test/hdiff -r -o hdiff-dossier1_to_dossier2.html dossier1 dossier2

Ce n’est pas obligatoire de mettre les noms exacts des dossiers pour le nom du fichier généré, du moment que vous pouvez vous y retrouver avec les versions. :)

Sinon, je suis toujours ouverte à une proposition d’un soft graphique pour Linux qui fait la comparison récursive du code de chacun des fichiers d’un dossier, et non juste soit un seul fichier ou juste la liste des fichiers. Si quelqu’un en connaît un qui permet de faire une chose similaire à ce que fait WinMerge, je suis ouverte, car c’est vrai que c’est pas évident pour quelqu’un qui n’est pas familier avec les scripts Perl.

Sources : FluxBB.fr

Tâches à faire – Je commence à avoir le dessus !

Mercredi 30 juin 2010

Ces derniers mois, j’ai eu pas mal de boulot à faire. Cela allait au point où j’ai été quelques temps où j’avais même du mal à m’avancer, même de quelques lignes, dans mon big-tuto GIMP que j’écris depuis plusieurs mois.

Hors-internet, j’avais à jongler entre renouveler les biscuits maison, mes entraînements au gym (bien que j’ai pris une pause le temps de laisser mon genou récupérer après un claquage lors d’un step-up), mes rendez-vous divers avec mes intervenantes, ainsi que plus récemment, les sorties avec ma nouvelle amie.

Mais il reste que j’ai quand même pas mal de boulot à faire sur le PC aussi : Avec la découverte du problème de couleurs des PNGs de mes styles sous Firefox 3.6, cela m’amène donc beaucoup de boulot à faire. Puis vient une commande où l’on me demande plusieurs variantes de mon style phpBB3 « Pro_Ubuntu » pour un phpBB-SEO, ce qui implique qu’en plus de faire les variantes de couleur, il faut que je modifie ce qui est à personnaliser dans ce qui a été ajouté par les modules de la prémod. Puis avec le problème de bots qui devenait de plus en plus difficile à gérer sur mon ancien blog, il a fallu que je déménage et donc, que je me familiarise avec WordPress pour pouvoir mettre en place et personnaliser ce blog où vous êtes présentement en train de lire ce billet. Et c’est sans compter tous les imprévus qu’il peut y avoir.

Avec tout ça, j’en venais à en avoir même de la misère à me trouver du temps pour travailler sur mon cours. Mais avec la demande croissante d’un cours de graphisme ainsi que les questions concernant une date de sortie du cours, il fallait bien que je fasse un choix, d’autant plus que j’aimerais bien pouvoir passer à la toute dernière version d’Ubuntu qui est sortie vers fin avril de cette année.

S’organiser

Même si j’avais une grosse commande et que les mises à jour des styles étaient à faire, le cours de GIMP pressait de plus en plus. Je me suis donc lancée dans un blitz de rédaction durant le mois de juin pour au moins finir le chapitre 6 et faire des retouches sur le cours. J’ai finalement même eu le temps de réorganiser le chapitre 4 dont la structure ne me satisfaisait plus. Je remercie au passage m@tteo78 pour son aide précieuse en tant que gimpeur expérimenté pour certains points.

Entre-temps, en allant sur le blog de Simple IT, je tombe sur ce billet sur l’organisation qui m’a permise d’apprendre quelques trucs pour organiser mes tâches, dont une application pour les gérer.

En effet, jusqu’à maintenant, j’utilisais une simple note où j’écrivais les tâches à faire, mais je ne mettais pas de délai, ni de division selon la priorité : tout était pêle-mêle ! Cela avait pour résultat que certaines tâches pouvaient traîner pendant plus d’un an !

En lisant le billet, j’ai donc découvert Getting Things Gnome!, un utilitaire Linux s’intégrant parfaitement dans l’environnement Gnome pour gérer ses tâches. Pour un cas comme moi, cela fait parfaitement l’affaire et ainsi, j’ai migré tout ce que j’ai noté. Ce qui est le fun, c’est que :

  • On peut définir un délai pour chaque tâche, en utilisant le petit calendrier. Ainsi, une tâche urgente aura un délai plus court qu’une tâche qui presse moins.
  • Le système d’arborescence fait que l’on peut ajouter des tâches-enfant dans une tâche-parent. Ainsi, par exemple, ma tâche parent est Mettre à jour mes styles phpBB3, et dans cette tâche, il y a plusieurs sous-tâches (ou tâches-enfants), chacun désignant un style à mettre à jour. La profondeur de l’arborescence peut aller à l’infini !

Ainsi, j’ai mis dans les tâches urgentes le big-tuto ainsi que la commande à faire. Ensuite, comme tâches qui viennent après, ce sont mes styles à mettre à jour. De cette façon, si j’ai un trou de libre, je peux mettre à jour un style, avant de replonger dans les tâches urgentes.

Au final, j’ai déjà quelques tâches mis en Terminé : trois styles phpBB3 que j’ai mis à jour lorsque j’ai eu des trous libres. Quant aux tâches urgentes, la finition de mon big-tuto Gimp pour la première publication viendra bientôt rejoindre la liste, puisque j’ai pu faire les dernières retouches (dont compléter les annexes) à temps, et au moment d’écrire ce billet, le cours sera envoyé à la validation dans quelques heures..

Le sentiment d’avancer vite tout d’un coup

Maintenant, dans les tâches urgentes, il ne reste que la grosse commande de styles pour le forum phpBB-SEO. Déjà, j’ai commencé à travailler dessus à fond, en commençant par compléter les modifications là où il y a les modules, pour au moins que le portail soit dans les bonnes teintes de couleurs. Et lorsqu’arrive un trou, j’update un style !

Donc, dès le moment où j’ai terminé la réorganisation du chapitre 4 de mon cours (incluant le transfert des images), j’ai senti tout d’un coup que ça s’est mis à avancer vite et que je ne stagne plus dans les tâches à faire ! Même si je me couche très tard ces temps-ci, le fait que j’ai terminé quelquechose de gros à faire fait que je me couche avec le sourire, en pensant au boulot que je viens de terminer et que je n’aurai pas à reprendre le lendemain.

Je commence donc à être confiante à terminer mes différentes tâches à temps selon le délai donné, voire même de prendre un peu d’avance. Enfin… du moins ça dépend encore de la date à laquelle la version 1.0 de Connectix Boards sortira, puisque je ne veux pas me lancer dans les travaux majeurs sur mon site tant que cette version ne sortira pas, puisque j’aimerais réorganiser l’architecture de mon site pour en faire un vrai CMS utilisant le moteur du forum, et non plus un simple site maison qui ne fait qu’utiliser les sessions du forum pour l’espace membre. D’après les dernières nouvelles, il y a des possibilités que ça puisse sortir en septembre, mais ça dépend toujours des imprévus qui sont inévitables en développement Web.

Mais d’ici-là, j’ai encore deux gros mois pour tout le boulot que je compte faire avant septembre.

[Critique design Web] Quand un site ne rend pas justice au produit offert

Jeudi 3 juin 2010

Ayant eu peu de temps dernièrement pour trouver d’autres sujets pour mes articles, j’y vais donc pour une première republication d’un ancien billet que j’avais publié sur l’ancien blog, mais qui reste d’actualité. Il s’agit d’une critique de design Web que j’avais faite après avoir découvert un site d’un logiciel commercial dont l’ergonomie et l’esthétique laissait vraiment à désirer, et puisque on est en pleine Semaine québécoise des personnes handicapées, ça tombe pile puisque je fais justement mention de quelques principes d’ergonomie et d’accessibilité dans ce billet.

En même temps, j’apporte quelques retouches à la mise en forme et j’ajoute quelques précisions.

Enjoy !
———————–
(Originalement posté le 21 août 2009)

D’habitude, les sites offrant un logiciel commercial (Adobe par exemple) ont une structure et une esthétique bien travaillées et sont faciles à naviguer, ce qui les rendent invitants pour le client potentiel. Mais il y a des exceptions…

Il y a quelques jours, en faisant ma ronde quotidienne sur QuébecOS, je tombe sur un post où l’un des membres est venu faire découvrir un shareware de captures vidéo pour Linux qu’il a découvert et dont il a été impressionné par la fluidité des vidéos créées pendant ses tests.
-> lien du post en question

Il a donc donné le lien vers le site, en mentionnant que le site est bordélique. Je suis allée voir et je comprends totalement le choix du terme.

Vous pouvez le voir par vous-mêmes : http://www.demorecorder.com/

Je vous livre donc ma critique, que j’avais d’abord postée sur Gimp-Attitude, mais que je reposte ici sur le blog :

Les points négatifs

En regardant le code-source, on remarque que l’ordre logique n’est pas du tout respectée. Une page respectant l’ordre logique doit avoir cette suite : header -> menus -> contenu principal -> footer.

Mais dans le cas du site cité, on a ceci : Colonne centrale contenant le logo central, le contenu principal et le footer. Ensuite, on a la colonne de gauche, avec la partie gauche du header (une simple image de la boîte juste "là" sans aucune intégration graphique) et le menu de gauche. Puis vient en dernier la colonne de droite, contenant les blocs de droite.

Donc, au final, le footer n’est même pas en bas de la page, et le menu est placé après le contenu principal ! Donc, on ajoute à ça l’absence de skiplinks pour avoir comme résultat que tous les sans-souris fuient car ils n’ont pas envie de s’abîmer les tunnels carpiens à user la touche « Tab » pour avoir le menu… j’ai déjà mal à mon épaule droite rien qu’à y penser, déjà que je viens tout juste de reprendre mes traitements de physiothérapie pour soigner mon épaule en vue de retourner sur le marché du travail… ouch !

TOUT est en Times New Roman ! Et comme on sait que ce type de police n’est pas très adapté pour les écrans, où sa lecture n’est pas très aisée… ça on réserve ça à l’imprimé !

La page d’accueil : Mettre les questions fréquentes dans la page d’accueil, ça allonge inutilement la page d’accueil qui doit être la première page sur laquelle le visiteur tombe. Or, une page d’accueil surchargée rendra le visiteur mal à l’aise. Ces questions et réponses, je les aurais vu dans la page FAQ.

Le design : J’ai beau faire dans le le style épuré, mais ce design, on dirait qu’il n’est pas fini, il est trop brouillon. Le logo de côté, où l’on montre la boîte, n’est pas du tout intégré au reste, son fond est d’une couleur complètement différente et donc, ça tranche sur le fond turquoise. Il y a aussi un manque d’homogénéité entre les pages. Pendant que le fond de la page d’accueil est turquoise, le fond des autres pages est blanc, ce qui fait sauter aux yeux la fausse transparence du logo central.

Et niveau CSS (Vive Web Developer Toolbar !), je vois un party de position:absolute;, ce qui explique donc le fait que sur ma résolution de 1280*1024, la page n’est pas centrée et donc, semble optimisée pour du 1024*768… et ça peut fatiguer certains internautes quand une page n’est pas centrée… je pense notamment à mon père, qui avait déjà baissé sa résolution à 800*600 car ça le fatiguait de voir les pages alignées à gauche avec un gros rien à droite, sur les sites à largeur fixe qu’il visitait fréquemment. Le positionnement absolu est à éviter autant que possible pour cette raison !

Les seuls points positifs

En analysant le poids, on remarque que malgré tout, la page d’accueil fait 145571 octets, ce qui est quand même loin du millon d’octets que j’avais déjà vu sur d’autres sites. Les éléments les plus lourds sont surtout l’animation Flash et les deux images d’en haut (qui ne sont pas des grosses images redimensionnées, heureusement).

Ensuite, j’ai vu peu de tableaux dans le code HTML, comparativement aux pages bourrées de tableaux mur à mur qu’on rencontre encore régulièrement.

Conclusion

La structure est à repenser, et le design est à retravailler, afin de mettre des chances de son côté, pour rendre le site plus attractif et ainsi attirer davantage de Linuxiens modérés, en améliorant son ergonomie et sa présentation visuelle pour que le site ait l’air plus « pro ». Qu’il n’hésite pas à faire appel à un webdesigner-intégrateur s’il le faut, pour réaliser le travail !

Ceci était ma première critique, mais peut-être pas la dernière, ça dépendra sur quoi je pourrais tomber.

On n’est jamais à l’abri d’une erreur niaiseuse !

Mardi 25 mai 2010

Dans le précédent billet, je vous parlait de mon problème de connexion au serveur qu’on venait de me prêter. Je viens vous donner des nouvelles sur ça, puisque j’ai réussi à me connecter sans avoir à passer à Ubuntu Lucid !

À force de tester…

En faisant des recherches sur le « bug » sous Jaunty dont j’en avais entendu parler dans une page de la doc Ubuntu sur l’utilisation de VNC, je remarquais que ceci n’était pratiquement pas documenté pour PuTTY sous Jaunty. C’était donc signe que quelquechose clochait.

Je me disais donc « et si je lançais un dpkg-reconfigure sur le paquet putty ? » C’est donc ce que j’ai fait après avoir sauvegardé une copie de mon dossier .putty (je ne savais pas si ça allait l’effacer ou non).

En réessayant, au lieu de recharger la session que j’avais enregistrée, je ré-rentrais les infos pour la connexion à partir du courriel que celui qui m’a prêté le serveur m’a envoyé, puis cette fois… Bingo ! J’arrive à me connecter !

Mais après, restait la question suivante : « Où c’est que ça a coincé ? »
Soit c’était le dpkg-reconfigure qui a réglé le problème, soit c’était le fait d’avoir laissé les effets graphiques désactivés, soit c’était autre chose.

J’essayais donc en réactivant les effets graphiques, puis en me connectant avec la nouvelle session qui fonctionne : j’arrive à me connecter.

Un petit détail fait toute la différence !

Il ne restait donc qu’un dernier détail à vérifier : Qu’est-ce qui différait ces deux sessions ?
Puisque les infos sont stockés dans des fichiers texte, je lance donc TkDiff et compare le fichier de l’ancienne session avec celle de la nouvelle pour me rendre compte que l’IP stockée était différente !

En effet, pour les premières tentatives, j’avais pris l’IP qui avait été posté dans le message privé envoyé depuis le forum QuébecOS. Puis pour les tentatives qui ont marché, j’avais pris l’IP contenu dans le courriel, et je n’avais pas remarqué du tout que ces deux IPs étaient différentes sur les deux dernières valeurs !

Comme quoi il suffit de pas grand chose pour que ça ne marche pas, et qu’il faut être attentif au moindre changement d’IP ! Je viens donc de l’apprendre à partir de cette erreur niaiseuse et du coup, je peux maintenant respirer en sachant que le passage vers le lynx devient moins pressant !

Quand l’appel du lynx se fait insistant

Lundi 24 mai 2010

Voilà maintenant presqu’un mois qu’Ubuntu 10.04 LTS « Lucid Lynx », la dernière mouture de la célèbre distribution Linux éditée par Canonical, est sortie en version stable, mais je n’ai pas encore fait la mise à niveau puisque je voulais premièrement attendre que les premiers bogues soient corrigés, mais aussi parce que j’étais surchargée par ce que j’avais à faire.

Tout d’abord, j’ai une commande qui piétine parce que je pogne tous les pépins possibles avant même de pouvoir installer les foutus styles phpBB3 (sur le forum récupéré) que je venais de cloner pour ladite commande en vue de les modifier. Ensuite, j’ai un gros update de fou de tous mes styles et webdesigns qui font suite à la découverte d’un problème de rendu de mes PNGs sous Firefox 3.6 qui vient de la présence d’informations de couleurs superflues qui se règlent en les optimisant avec smushit par exemple. Puis j’ai mon big-tuto Gimp dont je n’ai pas encore fini le 6e chapitre, que je veux terminer avant une première validation.

Un événement inattendu qui chamboule tout

Mais dernièrement, un autre projet s’est pointé et vient chambouler mes plans : Étant un membre habitué de QuébecOS, un autre membre habitué m’a offert de me prêter un serveur pour que je puisse m’exercer à la gestion d’une plateforme LAMP. J’ai évidemment accepté, puisque je n’avais pas exclu l’idée de me mettre à l’administration d’un serveur Linux, voire d’en faire une profession. On m’a donc donné l’IP et la clé pour me connecter avec PuTTY, mais j’accumulais les problèmes de connexions. Après la première tentative, le mec en question a fait des ajustements, mais après ça, je n’arrivais toujours pas.

En faisant des recherches, j’ai alors vent d’un bug présent dans la version 9.04 d’Ubuntu qui cause des problèmes de connexion à un serveur distant. Suite à cette info, je prends donc mon LiveCD de Lucid afin de démarrer dessus et tester pour voir si j’arrive à me connecter au serveur sous cette version. Comme de fait, ça fonctionnait cette fois-ci !

Cela signifie donc que si je veux commencer à travailler sur mon serveur, il me faudra devancer ma migration vers Lucid !

À venir

Il y a quelques heures, avant d’aller au feu que mon père avait allumé dans notre cour arrière, j’ai imprimé le document qu’un autre membre de QOS m’avait envoyé pour me donner les instructions sur la création d’un backup du système avec SystemRescueCD, puis j’ai téléchargé et gravé l’ISO de ce liveCD. Il ne reste plus qu’à faire le backup puis lancer l’upgrade vers Lucid. Avec un backup, si l’upgrade foire, je pourrai toujours revenir en arrière.

Il reste quelques petites affaires à régler – notamment sur les captures de mon big-tuto Gimp – avant de faire le saut. Dans un futur billet, je ferai un compte-rendu de tout ça.

Firefox 3.6 et les PNGs assombris – Dénouement !

Vendredi 7 mai 2010

Jusqu’à la fin mars, j’étais encore sur Firefox 3.0 qui était installé par défaut sur ma Ubuntu 9.04. Or, en parcourant les articles de Branchez-vous.com, je tombe sur un article annonçant la fin du support de Firefox 3.0 le 30 mars cette année.

Jusque là, je n’osais pas mettre à niveau mon Firefox, car je n’étais pas sûre si ça allait bien se passer, surtout que je n’avais jamais fait de mise à niveau d’un logiciel sur une version donnée d’Ubuntu depuis mon passage vers Linux. Mais face à l’annonce, je me suis finalement décidée de le faire et je retranscrirai d’ailleurs l’article que j’avais écrit à ce sujet sur l’ancien blog.

Une fois les données sauvegardées et Firefox 3.0 enlevé pour laisser la place à Firefox 3.6 après deux tentatives avant de pogner le bon dépôt, tout est maintenant en place, mais lorsque je m’en vais visionner un de mes propres styles phpBB3, là c’est le drame : Tous mes PNGs étaient assombris ou avaient une couleur bizarre, et ça paraissait encore plus sur les images avec fausse transparence et les images ayant une couleur moyenne ! De ce fait, le cadrage que j’avais fait pour le tour de la page de mon style Provalentina était assombri, tandis que le fond de page d’un thème Forumactif que j’ai fait récemment était plus clair que la couleur qui était censé prolonger ce fond ! Ce problème n’apparaissait ni sur Opera, ni sur Internet Explorer.

Étant donné le fait que les PNG s’assombrissent sous Internet Explorer si on enregistre nos PNGs avec le gamma, j’ai donc l’habitude de toujours enregistrer sans gamma. Lorsque je me suis aperçue de ce problème sous Firefox 3.6, je me suis mise à tester en enregistrant le gamma et… ô surprise, les images ne s’assombrissaient pas sous FF, mais l’étaient sous IE.

Pour mieux vous monter, je vous ai fait un petit montage des captures que j’avais prises de mon style ProValentina. Dans ces captures, le bout de cadre du haut est enregistré avec gamma, et le reste du cadrage est enregistré sans gamma. Vous pourrez constater que le haut est assombri sous IE et que le reste est assombri sous FF 3.6. Juste au cas où votre configuration d’écran rende cette perception très difficile, j’affiche à la fois la version non modifiée du morceau de capture à gauche, et une version où j’ai renforcé le contraste à droite.

Assombrissement des PNG sous IE et FF - Comparatif

Cela me mettait donc dans un dilemme : Soit je prenais en compte IE, soit je prenais en compte FF, soit je sacrifiais tous mes PNGs. Je me mettais donc à faire ma petite enquête en allant demander à d’autres Firefox-users sur Alsacréations, phpBB-fr, Québec, puis finalement Geckozone, pour me rendre compte que certains avaient le problème, d’autres pas, suivant l’OS, voire même la distribution (dans le cas de Linux), la version et même le Service Pack utilisé ! Je pus moi-même le remarquer en démarrant Windows XP SP2 pour pouvoir tester sur la version Windows de Firefox 3.6 : Les PNGs n’étaient pas assombris avec le SP2, tandis que chez ceux qui ont la SP3, ils sont assombris !

Sur Geckozone, j’avais pu avoir une solution qui consistait à désactiver la gestion du mode des couleurs sous Firefox 3.6, mais cela ne réglait le problème que chez moi. Puis plusieurs jours plus tard, je tombe sur une réponse dans mon sujet que j’avais posté sur Alsacréations, où ça parlait d’encodage des images et où on me disait que mes images étaient en TrueColor.

Une histoire de profils

Suite à cela, puisque j’ai entendu parler des profils ICC dont vous pouvez en savoir plus dans cet article Wikipédia, j’ai fait des recherches pour finalement trouver de la documentation concernant l’utilisation de ces fichiers dans Gimp, et sur le fait que l’utilisation du mode sRGB est recommandée pour les éléments de design pour sites Web. Je cherche donc dans la documentation de Gimp pour finalement trouver ce lien où j’ai trouvé le fichier que j’utilise maintenant. Par contre, je ne me souviens plus trop lequel j’avais pris parmi les deux premiers puisque je l’ai renommé, mais il me semble que c’était le premier. En tout cas, les gimpeurs pourront tester, mais dans mon cas, une fois que j’ai chargé le fichier dans mes préférences de la gestion des couleurs, j’ai testé en assignant ce profil à l’un des morceaux du cadrage du style ProValentina tout en enregistrant sans gamma. Le résultat : Plus aucun assombrissement, que ce soit sous IE ou FF, comme vous pouvez le voir dans la partie gauche du cadrage ProValentina sur mon forum phpBB3 de tests.

Puisque j’ai fait le design de ce blog après la découverte, ce design en a donc bénéficié !

Cette aventure m’a aussi fait réaliser que je devrais utiliser plus souvent le GIF ou le PNG indexé pour les images ayant peu de couleurs afin de réduire le poids des images.

Maintenant, avec tout ça, il me faudra mettre à jour tout mes styles et designs pour corriger ce problème de couleurs, ouille !