Wikini:FaviconEtWikiNi

Pour personnaliser un site sous WikiNi, il est possible d'utiliser une "favicon" permettant l'affichage d'une petite icône personnalisée dans les interfaces d'InternetExplorer, MoZilla ou Konqueror.

L'article suivant détaille comment s'y prendre : [fr].
Dans WikiNi, il faut modifier le fichier /actions/header.php en ajoutant à l'intérieur des balises <head></head> :

<link rel="shortcut icon" type="image/x-icon" href="test.ico" />
en remplaçant "test.ico" par le nom de votre icône.

Références

[fr]
Favicon.ico, le raccourci en image vers vos favoris [fr]
[fr]
FavIcon from Pics [en], un service en ligne pour convertir (depuis *.gif, *.jpg, *.png) et prévisualiser vos favicons.

Discussions

A. Modularisation via le fichier de configuration

ParametrerLeHeadDesDocumentsHTMLWikiNi

B. Modularisation via le test de l'existence d'un .ico

Il est possible de "modulariser" l'intégration du fichier .ico de la manière suivante. Dans le fichier /actions/header.php, il suffit de conditionner l'affichage du fichier .ico à son existence dans le répertoire racine du site. Ce qui donne le code suivant :
<?php if (file_exists("favicon.ico")) echo "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\" />\n"; ?>
[Fonctionne correctement mais je n'ai pas testé avec la ReecritureDURL]

Ca peut fonctionner aussi bien avec la ré-écriture (je viens de le mettre sur WikiTeki), mais ça nécessite un code de ce genre : <?php if (file_exists('_style/favicon.ico')) echo '<link rel="shortcut icon" type="image/x-icon" href="'.($this->GetConfigValue('rewrite_mode') ? $this->GetConfigValue('base_url') : '').'_style/favicon.ico" />\n'; ?>. Pour que cela fonctionne parfaitement il faut que la valeur base_url soit correctement auto-déterminée (ou bien fixée en dur dans le fichier de config), ce qui n'est pas le cas actuellement puisque j'avais dû patcher WikiTeki à cet effet. -- ProgFou

Si on devait intégrer cette modification, on pourrait ajouter une favicon pour le site wikini.net (ce qui m'arrangerait bien du fait de mon utilisation intensive des onglets Mozilla). J'ai composé une petit icône avec trois "i" noirs sur fond blanc : "iii" symbolisant les trois "i" de WikiNi ; c'est pas génial mais ça permet au moins de différencier le site des autres... (au moment où j'écris ces lignes je compte pas moins de 31 onglets ouverts dans ma fenêtre Mozilla, ce qui est une situation assez courrante : va savoir où sont les onglets qui concernent WikiNi...)

J'ai mis en place cette solution sur http://wikini.net/dev/wakka.php?wiki=PagePrincipale (commentaires bienvenus)
-- CharlesNepote

Bonne idée le principe, bonne idée les 3 i, j'adopte. -- DavidDelon

A noter que sur certains navigateurs (MS-IE pour ne pas le citer) la favicon ne s'affiche qu'une fois le site mis dans les favoris... -- ProgFou

Idem pour Mozilla Firefox, l'icône apparait dans l'onglet, mais pas dans la barre d'adresse.
Il serait mieux d'écrire :
1. <?php if (file_exists("favicon.ico")) echo "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\" />\n"; ?>
2. <?php if (file_exists("favicon.ico")) echo "<link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\" />\n"; ?>
Dans ce cas l'icone apparait aussi dans la barre d'adresse.
.--GarfieldFr
- Je ne suis pas très chaud pour avoir deux lignes rien que pour gérer des problèmes relatifs à tel ou tel navigateur. Mes tests donnent :
  - sur Mozilla 1.6 : les solutions 1 et 2 donnent séparément des résultats corrects
  - sur Internet Explorer 5.0 : les solutions 1 et 2 donnent séparément des résultats corrects
  - sur Mozilla Firefox 0.8 : 1 et 2 fonctionnent pour les onglets et les signets mais pas pour l'icône de la barre d'adresse ; 1 et 2 utilisés conjointement ne donnent pas mieux. Après recherche, il se trouve qu'il s'agit d'un bogue [en] qui survient lorsque la favicon.ico n'est pas à la racine du site (ce qui est le cas pour wikini.net/dev/). En revanche cela fonctionne parfaitement sur le site http://websemantique.org/
  - sur Konqueror 3.2.2 : 1 fonctionne correctement (barre d'adresse et favoris)
- Je propose donc de ne garder qu'une seule ligne. En revanche, je vais peut-être plutôt utiliser la solution 2 en lieu et place de la 1 car elle semble plus conforme aux standards. Avez-vous testé sur d'autres navigateurs ? Je pense qu'on devrait pouvoir mettre en oeuvre cette solution assez rapidement. -- CharlesNepote
  - Déjà, question standard, l'utilisation d'un .ico n'est pas très standard... Par contre une ligne : <?php if (file_exists("favicon.jpg")) echo "<link rel=\"icon\" type=\"image/jpeg\" href=\"favicon.jpg\" />\n"; ?> me semble plus correct (syntaxe a verifier)--GarfieldFr
    - Oui. L'article suivant détaille la chose. Mais Internet Explorer ne saura pas lire l'image JPEG en tant qu'icône. On a donc deux solutions :
      1. soit on fait dans le propre et standard et Internet Explorer ne profite pas des icônes (perso ça ne m'ennuie pas plus que ça)
      2. soit on fait des concessions et on adopte la solution 2 qui fonctionne pour tout le monde et qui se rapproche le plus de la démarche standard.
    - C'est comme vous voulez. -- CharlesNepote
      - Pour ma part je suis pour le propre et standard dans le code de WikiNi, avec un bout de doc quelque part expliquant comment sortir du standard si on le souhaite vraiment. -- ProgFou

Performances

Je me pose une dernière question. Quelle solution sera la plus performante : A. ou B. ? Il me semble que la solution B. sera un peu moins performante du fait qu'elle va lire à chaque requette si le fichier favicon.ico existe. Alors que dans la solution A., le fichier wakka.config.php est lu quoi qu'il arrive. Cela dit ça doit jouer sur des milisecondes non ? Qu'en pensez-vous ? -- CharlesNepote

Pour ma part je suis pour la solution B dans un premier temps, puis la solution A à terme. À noter que la solution B n'entame probablement pas les performances du que le test d'existence de fichier est très rapide (incomparable avec un accès à une BD) et qu'il sera de toutes façons dans le cache disque du serveur vu que ce sera fréquement appelé. La solution A étant bien meilleure à terme, AMHA. -- ProgFou

Concours de LG pour : favicons

Vendredi 8 octobre 2004

16x16

Vous pouvez voir

wikiWikiniZ.gif : dans la fenêtre de navigation de cette p@ge Web
wikiWikini.gif : dans la fenêtre de navigation de celle ci,
WikiNiFavicon16x16white.gif : dans la fenêtre de navigation de celle là,

du moins si vous voyagez avec Netscape Navigator 7x,

cliquer ce favicon

vous @mènera dans une p@ge Web qui l'affiche dans sa fenêtre de navigation,

cliquer ce favicon

vous @mènera dans une p@ge Web qui l'affiche dans sa fenêtre de navigation,

cliquer ce favicon

vous @mènera dans une p@ge Web qui l'affiche dans sa fenêtre de navigation.

L'un de ces trois gifs, des lettres avec un fond transparent,

.........

pourrait servir de favicon pour WikiNi.

Problématique rencontrée

Un favicon ne mesure que 16 x 16 px ; bien qu'il puisse aussi avoir 32 x 32 px, l'image qui apparaîtra dans la barre de navigation sera compressée à 50%, soit à 16 x 16 px : diviser une ligne d'un pixel en deux en efface certains pixels et le design devient alors embrouillé... Bref, to do a good job, you must make your favicon directly at 16 x 16 px.
Comme le favicon repose toujours(?) sur le fond blanc de la barre de navigation, il est préférable que les ±51 pixels, qui entourent le cercle qui entre dans ce 16 x 16 px, puissent être foncés, afin de bien contraster, ce qui exclut un logo pâle. Bien que le bleu soit une couleur très portée, répandue et habituelle, il n'y a pas de bleu par défaut dans ; bien sûr, le noir tranche le plus et est omniprésent dans ; néanmoins, à mon goût, le rouge bourgogne des liens, est encore plus représentatif de ce qu'est un .
Pour ces raisons, j'estime que le favicon serait le mieux. Bien sûr, il y a aussi cette série, , mais je crois que le mess@ge passe plus effectivement avec ; qui plus est, le W est plutôt surutilisé sur le Web et W peut faire penser à milles et une choses, dont à Wikipedia, et pas nécessairement à ... N'est-ce pas ?
Bien sûr, il reste à démonter que surpasse votre monumentesque,
iii
dont les courbes ne sont ni alambiqués, ni baroques, puis-je pince sans (r-) d-ire...

Pour un WikiNiste, trois iii peuvent faire penser à WikiNi, mais pour un voy@geur qui ne connaitrait pas les WiKis, iii pourrait être une allusion à bikini, bimini, guidzi-guidzi, kwi kwi kwi, ou encore à un rire ou à un cri.
Humblement, il me semble que , uni à , et , modifiés et /ou finalisés, serait un plus pour .

.	Vendredi le 8 octobre 2004 Comme vous pouvez le constater, dans ma deuxième série de LOGOS, Djeault ai débaroquisé le W et le N, en modernisant le W et en "Netscapant" légèrement le N ; j'ai serpentisé, humanisé, et intégré le Ver de MiKi dans le bras de gauche du W et amélioré graphiquement la tour de télécommunication symbolisé par son bras droit. Les trois points des trois i ont la même forme et couleur, suggérant ainsi l'unité trinitaire du Wi, du Ki et du Ni : le Wi pour Web, le ki pour la technologie , laquelle is the key qui permet le transfert de Ki entre les deux hémisphères, de la Terre et du pain burger, et le Ni pour Nous qui b@tissons des nids Wiki, en y tiss@nt nos brindilles : c'est ainsi que le troisième i nous salue. Les gifs de 80 x 80 px révèle le plus clairement la réseautique souterraine qui nous interconnecte nos nids par le Web ; le W uni au N évoque que nous nous reg@rdons par le Web et que le Web nous reg@rde ; ce gif précédent est adapté à un environnement orange. Le Logo que je vous propose a une couleur de fond ±rouge, tel les liens par défaut des Wikis et la croute de pain de seigle. Ce pain burger (de seigle ou...) est volontairement en contraste avec (le meta WiKi) MeatBall, nom qui, selon moi, n'est pas un plus pour attirer les millions d'internautes qui sont végétariens, celà dit sans offense aux ommnivores. Quant aux fèves de luzerne germées de ma première fournée de 36 Logos, je les ai intégrées au Ver de MiKi, maintenant ±"déverrisé", réseautisé, humanisé, serpentisé et luzerné.	.
.	Qui plus est, je me dois de préciser que j'ai intégré mon design dans mon bouton et que j'ai cloné ce bouton officieux dans 68 WiKis , et qu'il y a aussi cette última série de 9 gif : 1. , 2. , 3. , 4. , 5. , 6. , 7. , 8. et 9. , fabriquée pour insérer dans du texte... ~~~*Djeault*~~~	.

--DjO 08sep2004.