Choisissez le lien permanent de vos notes avec adresse

Réfléchir à juste titre, pour avoir des liens permanents qui durent, et rendre un hommage discret à l'une des dernières notes d'Alexandra.

Dans Choisir l'adresse URL de sa note notre Community Manager préférée¹ nous annonçait qu'il était désormais possible de modifier l'adresse d'un "lien permanent". Revenons sur le fonctionnement de base et ses enjeux.

Le lien permanent est établi à partir de l'adresse de votre blog, de la date de primo-enregistrement, et du contenu de la zone "Titre". Si je crée le 4 août 2009 une note dont la zone de titre ne contient que "zorglub", l'adresse sera "http://geemee.hautetfort.com/archive/2009/08/04/zorglub.html".

Quand est-ce que c'est-il le primo-enregistrement ? Naïfs, vous pensiez en avoir la maîtrise en cliquant sur le bouton [Enregistrer]. C'est partiellement faux : le premier enregistrement peut-être celui qui sera automatiquement effectué par la plateforme pour vous éviter de perdre vos brouillons. Et si la zone de titre est vide ? La sauvegarde se fera tout de même avec "Sans titre", malgré l'avertissement que vous connaissez déjà pour vous rappeler que votre note doit avoir un titre.

Le titre d'un brouillon devenant LE titre de la note, il est utile d'y réfléchir au début de la rédaction dans l'éditeur. Du moins, si l'on ne veut pas avoir à passer par la configuration avancée de la note pour le modifier. Chez vous non plus le titre ne vient pas en premier ? Indiquez donc seulement des mots clés, avant de trouver la bonne idée, vous n'obtiendrez qu'un meilleur référencement de votre note. C'est là qu'est le véritable enjeu : des mots bien choisis, débarrassés des articles et autres pronoms améliorent l'indexation de votre contenu.

En parlant de référencement, Alexandra le rappelait, la modification du lien permanent doit se faire aussi vite que possible. Les robots qui indexent le web, finiront bien par repasser sur votre note et l'enregistreront avec le nouveau lien permanent. Les internautes qui auraient déjà tirés des liens vers notre note, c'est beaucoup moins sûr. Et puis rappelons-nous que l'erreur 404 (page non trouvée) est celle de la plateforme et ne permet même pas d'arriver à la page d'accueil de votre blog. C'est très désagréable.

Peut-on connaître un lien permanent à l'avance ?

Oui à condition de parfaitement maîtriser la syntaxe, et de connaître le moment précis de la césure. Si le lien permanent reprend le contenu de la zone de titre, il y a tout de même une limite au nombre de caractères (61 en l'occurence).

Le plus sûr étant de publier pour noter le lien permanent, et revenir dans l'éditeur pour modifier la date de publication souhaitée.

Et pour le choix de la date ?²

Lors de l'enregistrement de la note, la date s'inscrit, par exemple "http://geemee.hautetfort.com/archive/2009/08/04/zorglub.html". Quand bien même "Zorglub" ne serait publié que le 21 janvier 2010, dans l'URL on en restera au 4 août. Pas de quoi en perdre la tête, même si le privilège de l'anticipation se verrait un peu trop. Notez bien que cela ne change rien pour les visiteurs, "Zorgloub" sera dans les archives du mois de sa publication, quelle que soit la date de rédaction.

Pour anti-dater, il faut publier votre note à la date révolue choisie, avant le premier enregistrement automatique, puis repasser en mode brouillon. Autant dire qu'il faut réfléchir à juste titre...

 

1- Osmany sera notre Community Manager préféré quand il arrêtera de nous regarder de haut ;-)

2 - Silence dans les rangs, j'ai réussi à rester sage ici, ce n'est pas pour craquer maintenant.

Comment rechercher dans un blog Hautetfort, avec le moteur de recherche de la plateforme

C'est l'une des dernières notes de Lavande sur BlogTuto saluant l'arrivée d'un moteur de recherche chez Canablog qui m'a convaincu de vous parler de celui que propose Hautetfort. Il s'installe très simplement depuis décembre 2008, et rend service à vos lecteurs qui souhaitent utiliser leurs mots pour s'y retrouver dans les vôtres.

Installez le moteur chez vous...
Le mode d'installation pour "Un moteur de recherche sur chacun de vos blogs"  nous a été donné par Alexandra.
Dans l'administation du blog, il faut choisir l'onglet PRÉSENTATION, puis Contenu des colonnes, et dans la liste des Éléments en face de "Rechercher" cliquer sur Ajouter à gauche ou Ajouter à droite. Remonter sur la page puis ajustez l'emplacement de cet élément avec les flèches et , éventuellement ou pour changer de colonne. N'oubliez pas de cliquer sur [ Mettre à jour ces informations ] avant Ajouter un élément personnalisé en bas de page pour que les changements soient pris en compte.

Curieusement, l'article la rubrique contenu des colonnes de la base de connaissances ne mentionne pas le moteur de recherche parmi les éléments disponibles. On aurait pourtant apprécié d'obtenir des précisions sur son fonctionnement. L'on m'a déjà précisé que le moteur n'indexe que le contenu des notes, et pas celui des commentaires. Si la richesse des interventions de vos visiteurs n'est pas exploitable en interne, il faut reconnaître que cela mobiliserait beaucoup de ressources ; tant au moment de l'indexation (volume des bases de données) que lors des recherches (temps de réponse).

... et utilisez-le aussi chez les autres.
Vous pouvez assez simplement sonder le contenu d'un blog sans que le moteur n'y soit en place. Les contenus sont déjà indexés et il suffit de savoir écrire une URL pour lancer une recherche. À l'adresse du blog Hautetfort que vous explorez, ajoutez-donc /search/ puis un mot et validez, vous obtiendrez une liste de résultats. La preuve : http://geemee.hautetfort.com/search/zorglub

Pour rechercher une expression composée de plusieurs mots, comme "élément de colonne", alors que le moteur n'est pas en place, c'est à peine plus compliqué. Il faut remplacer les espaces par %20. La preuve http://geemee.hautetfort.com/search/élément de colonne ne donnera rien, alors que http://geemee.hautetfort.com/search/élément%20de%20colonn... donnera les résultats du moteur.

C'est plus simple que d'utiliser la recherche avancée de Google sur laquelle nous reviendrons plus tard.

Nous verrons d'abord comment personnaliser le moteur interne.

Lectures conseillées :
- La rubrique contenu des colonnes de la base de connaissances Hautetfort
- Gérer le contenu des colonnes de votre blog, ici-même

Personnaliser l'apparence du moteur de recherche Hautetfort

Nous avons vu comment rechercher dans un blog Hautetfort, voyons maintenant comment le faire avec du style.

L'austérité de l'apparence par défaut ne doit pas vous rebuter. Google lui-même a fait sa place en proposant une mise en forme réduite à presque rien. Cela ne nous empêche pas de vouloir un module qui soit plus conforme à l'image de notre blog. Nous pouvons nous contenter de modifier la feuille de styles, ou aller plus loin en récupérant le code de l'élément de colonne pour modifier les textes, voire remplacer le bouton par une image.

Modifier la feuille de styles

Les styles appliqués au moteur de recherche ne commande normalement que la largeur du champs de saisie (110 pixels) et du bouton de validation (40 pixels). Le code par défaut de la feuille de styles d'un template de base :

#box-search form input.search_button {
width: 40px;
}
#box-search form input {
width: 110px;
}

Je vous conseille d'inverser l'ordre des deux éléments pour garder à l'esprit la cascade des styles. Ce qui est appliqué au formulaire s'applique au bouton, sauf style contraire. Dans le code suivant, une couleur de fond a été appliqué au formulaire, mais une image a été appliquée en plus au bouton, masquant la couleur de fond visible dans le champs de saisie.

#box-search form input {
width: 110px;
background-color: #DDB866;
}
#box-search form input.search_button {
width: 40px;
background:url("http://geemee.hautetfort.com/images/aspire/content-bg.jpg") repeat scroll 0 0;
}

Vous pouvez modifier l'apparence du champs en supprimant les bordures, soit effectivement avec border:0px; ou visuellement en attribuant la couleur de fond pour préserver l'alignement (ce qui est le cas ci-dessous). Pour l'exemple nous passeront celle du bouton en pointillés.

#box-search form input {
width: 110px;
background-color: #DDB866;
border:1px solid #FFFFFF;
}
#box-search form input.search_button {
width: 40px;
background:url("http://geemee.hautetfort.com/images/aspire/content-bg.jpg") repeat scroll 0 0;
border:1px dotted #663300;
}

Modifier le code s'avère nécessaire si l'on veut changer le texte du bouton de validation et ou le changer pour une image.

 

Récupérer le code du moteur de recherche

Il y a la méthode « faites le vous-même » qui consiste à :

- activer l'élément de colonne « Rechercher » dans PRÉSENTATION, Contenu des colonnes
- cliquer sur Configuration avancée, puis sur
- Modifier le template à droite de Modèle de la colonne gauche ou Modèle de la colonne droite
- identifier la portion de code commençant par <form method="post" action="{$blog.url}" et finissant par </form>
- copier cette portion, et la coller dans un éditeur de texte (genre bloc note ou notepad).

Sinon, vous pouvez copier le code ci-dessous :

<form method=" action="{$blog.url}" name="search" onsubmit="return false;"><input type="text" name="keyword" value="" />
<input type="button" name="submit" value="{t}Ok{/t}" onclick="if(this.form.elements['keyword'].value)window.location = '{$blog.url}search/'+this.form.elements['keyword'].value;return false;" class="search_button"/>
</form>

Vous devez faire une première modification avant de créer un élément de colonne personnalisé, au niveau de la troisième ligne. En fait, le « moteur » crée une adresse avec le mot clé que vous entrez, mais le déplacement du script va « provoquer » une adresse du type http://geemee.hautetfort.com/{$blog.url}search/zorglub ce qui ne fonctionne évidemment pas. Le code utilisable est donc :

form method=" action="{$blog.url}" name="search" onsubmit="return false;">
<input type="text" name="keyword" value="" />
<input type="button" name="submit" value="{t}Ok{/t}" onclick="if(this.form.elements['keyword'].value)window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="search_button"/>
</form>

Maintenant, dans PRÉSENTATION, Contenu des colonnes, vous pouvez Ajouter un élément personnalisé, et en l'occurrence Ajouter le code HTML / Javascript.

Que pouvez-vous personnaliser dans le formulaire du moteur de recherche ?

• Si vous voulez un contenu par défaut dans le champs de saisie, il faut modifier la deuxième ligne comme suit :

<input type="text" name="keyword" value="Rechercher...">

Pour que ce texte par défaut disparaisse d'un clic de l'utilisateur, il faut compléter le code de la façon suivante :

<input type="text" name="keyword" onBlur="if (this.value == '') {this.value = 'Rechercher...';}" onFocus="if (this.value == 'Rechercher...') {this.value = '';}" name="keyword" value="Rechercher..." />

• Si vous voulez changer le texte du bouton « Ok » par « Et hop! » (c'est un exemple) vous modifiez la troisième ligne pour avoir :

<input type="button" name="submit" value="Et hop!" onclick="if(this.form.elements['keyword'].value)window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="code><p><input type=">

• Si vous voulez une image pour remplacer le bouton « Ok » par une image.

- Créez une image d'une vingtaine de pixels de haut maximum.
- Téléchargez là sur votre blog via TABLEAU DE BORD , Fichiers, Répertoire images/ puis Ajouter un fichier
- Modifiez la troisième ligne comme suit (en admettant que l'image s'appelle bien bouton-ok.gif et qu'elle se trouve à l'emplacement spécifié :

<input type="image" name="submit" src="http://votreblog.hautetfort.com/images/bouton-ok.gif" onclick="window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="code><p><input type=">

Le code ci-dessous a permis de générer la capture ci-contre. Vous noterez que les styles ont été passés en direct plutôt que d'être appelés par la feuille de styles. Il n'est pas toujours facile d'obtenir un résultat satisfaisant compte tenu des styles déjà en place. Les alignements sont à surveiller de près entre les différents navigateurs. Je vous accorde que remplacer un bouton Ok par une image Ok...

<form method=" action="{$blog.url}" name="search" onsubmit="return false;">
<input type="text" name="keyword" onBlur="if (this.value == '') {this.value = 'Rechercher...';}" onFocus="if (this.value == 'Rechercher...') {this.value = '';}" name="keyword" value="Rechercher..." / style="background-color: #EFE6C5; border:1px solid #DDB666;height:14px;">
<input type="image" style="vertical-align: top;" name="submit" src="http://geemee.hautetfort.com/images/aspire/ok-button.gif" onclick="window.location = 'search/'+this.form.elements['keyword'].value;" class="search_button"/ >
</form>

Vous n'avez plus qu'à réviser vos propriétés de bordure et d'arrière-plan en Css, puis faire une belle image pour avoir un formulaire qui vous convienne sur la forme.

La prochaine fois nous verrons comment ajouter et personnaliser un moteur de recherche Google.