Le Web Inspector de Safari 3

Je découvre le nouveau Web Inspector de Safari 3 (qui vient avec Léopard que j’ai installé récemment), et je dois dire que je suis bluffé. Non content de faire une analyse détaillée de la source des pages, d’en détecter les erreurs, il suggère aussi des solutions. Et comble du luxe graphique, il offre un superbe résumé du temps de chargement des pages en détaillant ce qui “pèse”, le poids total d’une page et d’autres détails utiles. Voici un exemple. Bref, je pense désormais réalisable de me passer de Firefox et de son superbe Firebug…

Pour accéder à cette fonctionnalité, il faut d’abord activer le menu Debug de Safari :

1. Fermez Safari
2. Ouvrez le Terminal
3. Coller la commande suivante dans le Terminal : defaults write com.apple.Safari IncludeDebugMenu 1.
4. Ouvrez Safari et explorez le menu Debug à droite du menu Aide.

Pour désactiver le menu il suffit de procéder à l’identique en remplaçant le 1 par un 0.

Mon tout premier site internet : Creativity & Resistance

Un peu de Google et je retombe sur ma toute première création internet ! Toujours présente : Creativity & Resistance - Maroon Culture in the Americas. On m’avait uniquement demandé de mettre en ligne le Teacher’s guide d’une (très intéressante) exposition ethnologique itinérante créée par Diana Baird N’Diaye pour la Smithsonian Institution qui évoquait l’histoire d’une population d’anciens esclaves éparpillés sur le continent américain. L’objectif était d’apporter aux enseignants les informations nécessaires avant l’arrivée de l’exposition pour préparer la visite avec leurs élèves. Et je crois me souvenir avoir proposé de mettre toute l’exposition en ligne, et la voilà.

C’était l’été 1999, je faisais mes débuts sur internet, j’étais plongé dans un milieu anglophone, accueilli par des gens formidables au sein du Center for Folklife and Cultural Heritage. Mon bureau était une pièce sans fenêtres jouxtant les archives de Folkways Recordings et je passais mes journées rivé à l’écran, ne m’interrompant que pour aller piocher dans les archives musicales pour écouter tout ce qui me tombait sous la main. J’ai dû écouter cet été plus de musique folk que le commun d’un mortel n’en croise dans sa vie entière. Tout y passait, c’était d’une variété étourdissante : musique sacrée, latine, cajun, blues, country, jazz, et surtout les gospels et les chants a capella. J’enchaînais CD sur CD dans une soif de connaître, sans a priori puisque ces enregistrements sont relativement confidentiels. Mais l’ensemble était d’une qualité étonnante. Mon amour pour les voix remonte à cette époque, sur fond de création web. C’est sans doute pour cela que j’aime aujourd’hui travailler sur mes pages web en musique.

Script de création automatique de galerie SimpleViewer

Les instructions qui suivent vous présentent comment préparer une galerie avec SimpleViewer en générant automatiquement les icônes des photos et le fichier XML requis par SimpleViewer. Pour cela il faudra simplement télécharger les images dans un répertoire de votre serveur et lancer un script en PHP.

Suivez les indications qui suivent pour créer une galerie SimpleViewer sur votre site web :

1°) Téléchargez les fichiers de SimpleViewer

Téléchargez et décompressez les fichiers SimpleViewer dans un nouveau dossier.

2°) Téléchargez le script de création

Version PHP (anglais/français) [fichier zip - 3k]. Pour les serveurs web Unix

3°) Ajoutez vos images

Copiez vos images dans le dossier images. Ces dernières doivent être en format JPG et enregistrées sans l’option “progressif”.

4°) Choisissez les options de la galerie (optionnel)

Éditez le fichier avec n’importe quel éditeur de texte (par exemple : NotePad, TextEdit, etc.). Choisissez les options tel qu’indiqué dans le script. Voici une liste des options (en français ou en anglais) XML ainsi que leur description.

Choisissez si vous souhaitez qu’apparaisse un lien de téléchargement pour chaque image dans la légende en positionnant la variable de showDownloadLinks sur “true” ou “false“.

5°) Choisissez la couleur d’arrière-plan (optionnel)

Pour choisir la couleur d’arrière plan, éditez le fichier index.html. Entrez la valeur hexadécimale comme dernier paramètre dans la ligne de code SWFObject :

var fo = new SWFObject("viewer.swf", "viewer",
"100%", "100%", "7", "#ff00ff");

6°) Téléchargez les fichiers sur votre serveur

Téléchargez par FTP tous les fichiers dans un dossier sur votre site web.

7°) Sélectionner les permissions du fichier

Sélectionnez les permission et attributs du fichier de création de galerie, de gallery.xml et du dossier thumbs pour lire/écrire/éxécuter pour tout le monde (777). Vous pouvez faire ceci avec votre logiciel FTP, vérifier comment procéder en étudiant son manuel.

8°) Lancez le script

Dans un fureteur, naviguez jusqu’à l’URI de votre script (par example ‘http://www.mySite.com/myGallery/buildgallery.php‘ ). Le script va vous informer si les icônes et le fichier XML ont été créés avec succès.

9°) Editez les légendes

Si vous souhaitez avoir des légendes sous vos images, vous pouvez télécharger et éditer gallery.xml qui se trouve dans le dossier de votre galerie photo, c’est un simple fichier texte qui peut être édité par n’importe quel éditeur de texte (par exemple : NotePad, TextEdit, etc.). insérez vos légendes sous chaque image entre les tag &elt;caption&egt;.

Mise à jour de la galerie

Pour mettre à jour la galerie avec de nouvelles images, télédéchargez vos nouvelles images dans le dossier images sur le serveur et chargez le script à nouveau (voir étape 8). ATTENTION : vos précédentes légendes seront effacés.

(Source)

Options XML de SimpleViewer

SimpleViewer peut être personnalisé en modifiant les attributs XML au sommet du fichier gallery.xml.

maxImageWidth - largeur de votre image la plus large en pixel. Cela sert à déterminer la meilleure mise en page pour votre galerie.

maxImageHeight - hauteur de votre image la plus large (NDT : haute ?) en pixels. Cela sert à déterminer la meilleure mise en page pour votre galerie.

textColor - Couleur du titre et de la légende (valeur hexadécimale, par exemple : 0xff00ff).

frameColor - Couleur du cadre de l’image, des boutons de naviguation et du cadre des icônes. (valeur hexadécimale, par exemple : 0xff00ff).

frameWidth - Largeur du cadre des images en pixels.

stagePadding - Distance entre les images et les icônes, ainsi qu’autour des bords de la galerie, en pixels.

thumbnailColumns - Nombre de lignes d’icônes (pour ne pas afficher les icônes, mettre 0).

thumbnailRows - Nombre de colonne d’icônes (pour ne pas afficher les icônes, mettre 0).

navPosition - Position relative des icônes par rapport a l’image. Valeur possible : top (haut), bottom (bas), left (gauche) ou right (droite).

title - Titre de la galerie à afficher

enableRightClickOpen - Afficher ou non un dialogue Ouvrir dans une autre fenêtre... (affiché en anglais) quand les internautes feront un clic droit sur une image. Valeur possible : true (vrai) ou false (faux)

backgroundImagePath (optionnel) - Chemin relatif ou absolu à un fichier JPG ou SWF qui sera affiché comme arrière-plan de la galerie. Les chemins relatifs sont relatif au document HTML contenant SimpleViewer.

imagePath (optionnel) - Chemin relatif ou absolu au dossier images. Cette valeur est uniquement nécessaire si vous ne souhaitez pas déposer vos images dans le dossier images. Les chemins relatifs sont relatif au document HTML contenant SimpleViewer. Notez que ce chemin d’accès devra comporter une barre oblique à la fin de l’adresse (par exemple : imagePath="mon_dossier_image/").

thumbPath (optionnel) - Chemin relatif ou absolu au dossier thumbs. Cette valeur est uniquement nécessaire si vous ne souhaitez pas déposer vos icônes dans le dossier thumbs. Les chemins relatifs sont relatif au document HTML contenant SimpleViewer. Notez que ce chemin d’accès devra comporter une barre oblique à la fin de l’adresse (par exemple : thumbsPath="mon_dossier_icone/").

gallery.xml est un simple fichier texte qui peut être édité par n’importe quel éditeur de texte (par exemple : NotePad ou TextEdit).

Voici un exemple de ce à quoi ressemblent les options XML au début du fichier gallery.xml :

<simpleviewerGallery maxImageWidth="800" maxImageHeight="600"
textColor="0xffffff" frameColor="0xffffff" frameWidth="20"
stagePadding="40" thumbnailColumns="3" thumbnailRows="3"
navPosition="left" title="Example SimpleViewer Title"
enableRightClickOpen="false" backgroundImagePath="bkgnd.jpg"
imagePath="my_image_folder/" thumbPath="my_thumb_folder/">

(Source)

Créer une galerie avec SimpleViewer manuellement

Les instructions qui suivent vous présentent comment préparer une galerie avec SimpleViewer en générant manuellement les icônes des photos et le fichier XML requis par SimpleViewer.

Pour faire ceci vous pouvez utiliser l’éditeur de texte et le logiciel de traitement d’image de votre choix. Cette option est recommandée si vous n’avez pas accès à des scripts automatiques sur vos serveurs, ou si vous souhaitez un contrôle plus pointu des options de personnalisation.

Suivez les indications qui suivent pour créer une galerie SimpleViewer sur votre site web :

1°) Téléchargez les fichiers de SimpleViewer

Téléchargez et décompressez les fichiers SimpleViewer dans un nouveau dossier.

2°) Ajoutez vos images

Copiez vos images dans le dossier images. Ces dernières doivent être en format JPG et enregistrées sans l’option “progressif”.

3°) Créez les icônes

Créez les icônes avec un logiciel de traitement d’image (par exemple Photoshop). Placez les icônes dans le dossier thumbs. Les icônes doivent avoir le même nom que les images qu’elles illustrent. Les icônes doivent avoir au minimum une taille de 65×65 pixels (les icônes plus grandes seront coupées).

4°) Éditez gallery.xml

Ce fichier est un simple fichier texte qui peut être édité par n’importe quel éditeur de texte (par exemple : NotePad, TextEdit, etc.). Choisissez les paramètres de votre galerie en modifiant les diverses options du tag simpleviewerGallery au début du fichier. Voici une liste des options (en français ou en anglais) XML ainsi que leur description.

Ensuite, ajoutez un tag <image> pour chaque image de votre galerie :

<image>
	<filename>115-1503_IMG.jpg</filename>
	<caption>Arles old town.</caption>
</image>

<filename> est à la fois le nom de l’image et de son icône.

<caption> est une légende optionnelle de l’image.

5°) Choisissez la couleur d’arrière-plan (optionnel)

Pour choisir la couleur d’arrière plan, éditez le fichier index.html. Entrez la valeur hexadécimale comme dernier paramètre dans la ligne de code SWFObject :

var fo = new SWFObject("viewer.swf", "viewer",
"100%", "100%", "7", "#ff00ff");

6°) Téléchargez les fichiers sur votre serveur

Téléchargez par FTP tous les fichiers dans un dossier sur votre site web.

(Source)

No may 1st reboot in 2007 for me

Pour commencer, malgré ce que j’avais prévu, il n’y aura pas de may 1st reboot cette année en ce qui me concerne. L’idée derrière cette date c’est que tout un petit monde de créateurs de site web, designeurs et autres personnes inspirées mettent à jour leur site pour le premier mai. Ils s’inscrivent sur le site mentionné précédemment, indiquent quelques informations sur eux, sur leur site, déposent une photo avant et après et à partir du 8 mai on commence à voter pour la meilleure création. Avec tout ce que j’ai dû faire auparavant, j’y ai renoncé pour 2007. Pourtant, j’ai toujours le projet de refaire mon site, mais cela se fera hors de cet évènement international d’ampleur.

Dans un tout autre ordre d’idée, j’ai assisté, tout à fait par hasard, aux dernières minutes d’une grande braderie organisée annuellement à Chambéry. Professionnels et particuliers peuvent venir déposer sur un bout de bitume leurs biens et les offrir à la vente. Bon il est entendu que les choses intéressantes sont dans les mains des particuliers, et cette braderie semble s’attirer la passion de la foule. Pour obtenir une place, certain(e)s n’hésitent pas à passer la nuit sur place ! Cela dit, j’ai été frappé de voir à quel point on passait rapidement d’une brocante à une décharge en plein air. Certains particuliers n’hésitant pas à abandonner sur place ce qu’ils ne désiraient pas ramener chez eux de toute façon. Il fallait voir ces places entières jonchées de merdes qui ne semblaient même pas attirer la faveur des clochards pourtant nombreux à errer dans les parages. C’est dommage de ne pas faire l’effort de se déplacer dans une déchetterie ouverte toute l’année et de préférer venir une fois par an vider sa fange sur les places publiques.

Certains journalistes de foot sont peu scrupuleux

Dernièrement en regardant les statistiques de fréquentation de mon site, j’ai remarqué un afflux d’activité en provenance du site football.fr. Ça m’a fait un choc. C’était presque la honte absolue… Mais qu’est ce qu’il y avait ici qui pouvait justifier ce soudain sursaut de consommation bande passante à saveur footeuse ?

C’est un vieil article parlant du footballeur Djibril Cissé qui en était la cause, et notamment cette illustration. Ma foi, j’ai écrit UN article qui parle de foot et il est repris par une grosse société éditrice au capital de plus de 400 000 € (d’après son ours), ne devrais-je pas être flatté ?

En fait, pas vraiment. Le site utilise le portefeuille des propriétaires de tous les sites dont il vole les images (sans citer les sources en plus) en basant son principe d’illustration d’article sur le hotlinking. En gros, il utilise des images affichées par d’autres sites, copie le lien et le colle tel quel pour que l’image s’affiche sur leur propre site. Ce n’est rien d’autre que du vol de bande passante. Car à chaque fois qu’un visiteur va demander l’affichage d’une page avec une telle illustration, l’image (qui constitue le plus gros de la bande passante) va provenir du serveur sur lequel ils ont copié le lien de l’image. Or, la plupart des contrats passés avec les hébergeurs sont justement basé sur la consommation de bande passante. En gros, je paye pour afficher une image sur leur site.

J’avais déjà remarqué de telles pratiques il y a quelques mois, et j’avais prévu une parade. Il y a une protection en place qui empêche qu’on ne vole ma bande passante. Les images demandées sont remplacées par une autre (petite) image informant du vol en cours… Pour constater son efficacité et son application dans le cas présent, vous avez le choix entre la version en ligne, et hors ligne. En revanche je paye toujours la bande passante qui prévient du vol en cours, et avec leur budget je ne trouve pas déraisonnable d’en demander une portion pour mes propres frais de gestion, non ?

Je ne m’explique toujours pas en revanche pourquoi le journaliste n’a pas vérifié le “bon” affichage de son article une fois publié en ligne… A croire que le manque de professionnalisme va de pair avec le manque de déontologie ?

Outil de modification d’images en ligne

Je me suis souvent retrouvé sur différents ordinateurs à essayer de modifier une image (redimensionner, rogner, pivoter, ajuster les couleurs, sauver dans un autre format, etc.) à l’aide des logiciels installés par défaut, et selon les plateformes j’ai eu plus ou moins de succès.

Sur PC, dans la panoplie des outils disponibles, à part Paint qui ne fait pas grand chose, il n’y a souvent rien d’installé par défaut. Parfois quand Office était installé je pouvais utiliser les outils de traitement d’image d’Office, mais c’est loin d’être un outil adapté à mon usage.

Sur Mac OS X, Aperçu permet tout sauf de redimensionner les images. Mais pour redimensionner des images, j’avais déjà découvert les très pratiques commandes en ligne. Bien entendu, iPhoto fait tout cela parfaitement, et il est gracieusement installé avec OS X, mais je n’aime pas ce logiciel, trop lent, trop lourd, gestion des photos disque-durivore, etc.

Bref, ni sur Mac, ni sur PC je n’ai trouvé installé par défaut un logiciel pratique, léger, intuitif et convivial qui me permette de faire des manipulations d’image. Mais sur internet j’ai trouvé SnipShot qui permet tout cela, sans rien avoir à télécharger que la photo modifiée ! Vive Ajax…

Bug dans Wordpress 2.1

Bon alors ça c’était embêtant… Juste après la mise à jour de Wordpress, j’ai remarqué que mes images sur la présente page avaient toutes une large bordure vide alors que ma feuille de style avait prévu que cette bordure soit réduite. En regardant la source de la page j’ai constaté la présence d’une tag <p> après chaque tag <div>. Cette marque de paragraphe était rajoutée par Wordpress automatiquement.

Après quelques recherches sur le forum de support, j’ai identifié la source du problème au fichier wp-includes/formatting.php dont il suffit de commenter la ligne 66 qui se lit comme suit :

$pee = preg_replace( '|<p>(<div[^>]*>\s*)|’, “$1<p>”, $pee );

Cela a permis de régler ce curieux espacement qui a affecté ce site ces dernières 24 heures. En bonus, les vidéos sont maintenant centrées alors qu’elles ne l’étaient plus quand cette ligne était active. Reste à régler quelques problèmes esthétiques résiduels… Mais la nouvelle moutûre de ce site est en route, patience.

Captcha Mashup

Tout le monde ou presque utilise les captcha sur son site pour éviter de se faire spammer. Bon, pas moi parce que j’ai un deux supers plugins (Bad behaviour et Spam karma 2) qui font tout ça très bien pour vous. Mais pour les webmasters qui reçoivent malgré tout du spam, il y a peut être une solution à regarder du côté de Captcha Mashup. En gros, vous cliquez sur trois photos de beaux mecs ou belles femmes tirés du site HOT or NOT (même moi j’y suis, c’est dire !) avant de poster votre commentaire… Si vous avez choisi quelqu’un de pas si HOT que ça (donc de plutôt NOT), vous êtes identifié comme un robot spammeur, puisqu’il est bien connu qu’en matière de goût les robots sont (encore) incompétents !

Il faut juste vous assurer d’avoir des goûts partagés par la moyenne des ours, au risque de ne pouvoir plus jamais donner votre avis…