Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

29.05.2009

Avec Firefox, étendons le domaine de la lutte...

C'est bien évidemment de la lutte des "class" qu'il s'agit. Puissent les parents que j'ai eu la chance d'avoir ne pas m'imposer d'autocritique en cellule.

J'ai beaucoup plus d'affinités pour les partis qui se drapent de rouge, que pour ceux qui gâchent la forêt de leur arbre bleu. Mais nous ne sommes pas là pour un exposé d'un élémet de la théorie marxiste, pas plus que pour un exposé romancé des possibles influences du libéralisme sur nos vies sexuelles. Sur le sujet, même si Marcel me harcèle, je préfère Iacub. Fin de la digression.

Firefox, navigateur internet ayant sans dogmatisme ma préférence, peut vous rendre bien des services avec ses nombreux add-on.


Comment choisir les bonnes extensions ?

La plupart des bidouilleurs ont un avis, souvent convaincus d'avoir chacun trouvé LA perle, qui entre toutes éclaire les nuits blanches passées devant des écrans balfards d'éblouissants et changeants reflets irisés. Autant dire qu'en écailleur, j'ai une forte marge de progression.

D'autres, bien plus malin que moi partagent leurs découvertes, et je vous suggère de leur rendre visite.

Encore, une fois, la visite régulière du Blog du modérateur vous apportera son lot d'informations utiles et intelligentes. J'en ai déjà dit suffisamment de bien, je n'insiste pas.


Faire confiance aux développeurs ?

Non, l'informaticien n'est pas pour l'homme le loup que les managers techniquement incultes veulent nous décrire pour pallier leurs incompétences. Il y en a de très sympas qui savent rester accessibles. C'est le cas de l'équipe d'Alsacréations, mais non pas les gâteaux...

Dew propose ici sa liste des 20 meilleures extensions pour Firefox. Vous y retrouverez son avis à propos de Firebug, Web Developer Toolbar, Html Validator, IE View, Colorzilla (plébiscité par Lavande), Fireshot, Measure It (présenté par Alexandra), et bien d'autres.

Je vous invite vraiment à lire cete note, utilement complétée par les commentaires des internautes.

Il existe encore une presse informatique en ligne, pas toujours aussi mauvaise qu'on veut bien le dire. Ainsi vous trouverez chez ZDnet cette visite en image des 10 extensions indispensables, après avoir fait la liste des 10 extensions les plus populaires (nuance).


Ça fait pas mal.

Pour finir, à ceux qui n'ont jamais installé d'add-on ou de plug-in, je recommande la lecture de ces pages de la base de connaissances officielle : Personnaliser votre Firefox avec des modules complémentaires.

Vous prenez seulement le risque de multiplier les icones de votre navigateur et de le transformer en tableau de bord de concorde. C'est quand même moins dangereux, et plus facile de revenir en arrière. (Celui qui a dit rentrer à l'hôtel a un gage).

 

10:21 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : firefox, add-on, extensions | |  del.icio.us | | Digg! Digg |  Facebook

28.05.2009

Tout 1 monde en 1 blog ! Avec Kielut

« Je suis ravi de vous proposer une note de Kielut du blog Upset Diray. Nous revisiterons bientôt le concept de l'entrevue inauguré avec Bougrenette et PersonnelJS, pour faire plus ample connaissance.
J'ai sollicité Kielut, comme j'avais auparavant sollicité See Mee. Demain, ce pourrait-être vous si vous vous faites connaître. L'envie de partager est plus importante que la compétence technique.
Gee Mee. »


Aujourd'hui, leçon express!

J'aime l'ordre. Je range donc mes notes par catégorie. Savez-vous que chaque catégorie est un mini-blog à elle seule?

Vous voulez vous inscrire dans une communauté de pêcheurs à la mouche. Au lieu de l'adresse de votre blog qui aborde peut-être d'autres sujets, donnez l'adresse de votre catégorie "Pêche à la mouche".

  1. Dans votre blog, faites un clic droit sur la catégorie concernée.
  2. Cliquez sur Copier l'adresse du lien dans le menu déroulant.
  3. Collez ce lien dans l'adresse de blog/site demandée à l'inscription dans la communauté.

Quand les collègues vous rendront visite, ils afficheront d'abord la liste de toutes les notes relatives à la pêche à la mouche.

De la même façon, quand vous laissez un commentaire sur un blog ami, copier/coller le lien vers une de vos notes dans l'adresse url peut capter les bloggueurs qui participent à la discussion et alimenter les échanges.


Conseil pour gérer les catégories dans les blogs hautETfort

i_black_sm.jpgNe renommez aucune catégorie prédéfinie. A l'affichage, elles conservent leur nom initial.
Quand vous cliquez sur la catégorie "Blogs" de mon blog, le nom "sport" s'affiche dans la barre de statut. Moi, ça me fait rire, mais c'est aussi source de confusion.

Donc ajoutez vos propres catégories.


Plus d'infos terre à-terre ?

marker.gifLa rubrique Catégories - Aide hautETfort

marker.gifHellocoton et un sombrero!

kielut©Upset Diary

08:00 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (5) | Tags : kielut, upset diary, catégories | |  del.icio.us | | Digg! Digg |  Facebook

27.05.2009

Mee musique ?

À tous ceux qui se perdent ici en cherchant Mee Musique, vous trouverez peut-etre là :

musicme_logo_general.gif

09:28 Écrit par Gee Mee dans Musique en ligne | Lien permanent | Commentaires (0) | Tags : music me | |  del.icio.us | | Digg! Digg |  Facebook

26.05.2009

Proposez une version imprimable de vos notes avec PrientFriendly

Si les origines des blogs étaient associées à de courtes informations, vous trouvez aujourd'hui de longues notes que vous souhaitez parfois imprimer ou conserver pour une lecture hors connexion. Ça doit bien vous arriver de déconnecter non ?


A priori, vous n'avez besoin de personne pour imprimer une page vue sur le net. Sauf que parfois, une simple page web prend quatre feuilles de papier pour la pub, la navigation, et le contenu, par ailleurs tronqué. La plupart des journaux en ligne proposent une version imprimable de leurs actualités, sans la navigation, mais pas forcément sans la pub.
En fait, il s'agit d'envoyer le contenu de la page dans une autre feuille de styles. Dans un site dont vous auriez la totale maîtrise, vous pourriez définir plusieurs feuilles de styles. Une "courante", une pour l'impression, une pour des affichages spécifiques tels ceux des écrans de téléphones portables.

PrientFriendly, dont la communication n'est pas exempte de greenwashing, vous propose de générer une version imprimable de la page que vous êtes en train de visualiser. Cette dernière sera non seulement affichée dans une CSS simplifiée, mais la publicité et les éléments de navigation seront neutralisés. Si cela ne devait pas suffire, vous pourrez retirer les images et ou des blocs de texte.

 

Avec PrintFriendly, vous pouvez imprimer ou convertir en PDF.

Cette fonctionnalité pourtant intéressante n'est hélas pas la plus efficace. Une gestion aléatoire des tables de caractères génère des textes rapidement illisibles. Par contre, rien ne vous empêche d'installer une imprimante virtuelle PDF sur votre ordinateur. Si vous n'en avez pas encore après avoir installé un scanner par exemple, vous pouvez récupérer PDFCreator (libre et gratuit, à la différence de PDF Creator).

Attention : Cela ne fonctionnera pas toujours. D'expérience, je constate que les blocs de texte avec des listes se comportent assez mal. Pour mémoire, il vous est toujours possible de sélectionner du texte avant de commander l'impression (qu'elle se fasse sur papier, ou d'abord vers un ficher PDF comme PDFCreator). Avant de valider l'impression, vérifiez dans la "zone d'impression" (là où il a dû vous arriver de limiter  l'impression de la page 1 à la page 2) que vous imprimerez bien la "sélection".

Vous pouvez enregistrer PrientFriendly dans un marque-page / favori / signet de votre navigateur, et ou installer un bouton sur votre site pour que la page vue soit envoyée à PrintFriendly. C'est cette dernière possibilité que j'ai utilisé pour modifier mon pied de note.

Par défaut, le code du bouton est le suivant

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script>
<a href="http://www.printfriendly.com" id="printfriendly" onclick="window.print();
return false;" title="Print an optimized version of this web page">
<img style="border:none;" src="http://cdn.printfriendly.com/pf-button.gif" alt="Print"/></a>

Vous pouvez le personnaliser en ligne, en modifiant l'image notamment.


Du PDF avec le pied ?

Vous retrouverez dans le code ci-dessous les instructions PrientFriendly telles que que je les ai intégrées au pied de note. J'ai retiré l'appel de l'image, utilisé du texte, et personnalisé le titre du lien.

{$post.pubdate|date_format:"`$blog.time_format`"}
{t} Ecrit par {/t}
<a href="http://www.google.fr/search?hl=fr&q=site%3Ageemee.hautetfort.com+%22ecrit par
{$post.user|authorname}%22" target=_blank title="Les autres contributions de
{$post.user|authorname} sur ce blog" name="Les autres contributions de
{$post.user|authorname} sur ce blog" >
{$post.user|authorname}</a> |
<a href="{$post.post_permalink}" id="a{$post.iteration}">{t} Lien permanent {/t}</a>
{if $post.allowcomments!=1} |
<a href="{$post.post_permalink}#comments"> {t} Commentaires {/t} ({$post.commentcount}) </a>
{/if} | {if $blog.blog_type neq 'photoblog'}
<a href="javascript:void(0)" onclick="toggle_emailthis('div_send{$post.post_id}',{$post.post_id});">{t} Courriel {/t}</a>
{/if}
<!-- printfriendly.com -->
<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript">
<!-- // --></script>
<a href="http://www.printfriendly.com" id="pfLink" onclick="window.print();
return false;" title="Obtenez une version imprimable, un PDF"
style="text-decoration: none;" name="pfLink">{t} | Impression {/t}</a>
<!-- /printfriendly.com -->

<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = 'blogspirit';</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '{$post.post_permalink|urlencode}', '{$post.post_title|urlencode}')" onmouseout="addthis_close()" onclick="return addthis_sendto()"> | {t} Partage {/t}</a>
<script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END -->
<br>
<!--cat-->{if $post.categories}{t}Dans :{/t}{foreach name="categories" from=$post.categories item="cat"} <a href="{$cat.url}">{$cat.name}</a>{if !$smarty.foreach.categories.last}, {/if}
{/foreach} |
{/if}<!--/cat-->
{tags post="`$post.post_id`" assign="tag"}{if $tag.first}&nbsp;{t}Tags : {/t}{/if}<a href="{$blog.url}tag/ {$tag.name|urlencode|replace:"%2F":"/"}">{$tag.name}</a>{if !$tag.last}, {/if}{/tags}

Il n'est pas exclu qu'un jour nous disposions sur cette plateforme d'une feuille de style dédiée à l'impression avec une fonction dans le pied de note, au même titre que la fonction "Courriel".

Cette note a été rendue possible par la lecture de celle du "Modérateur"

17.05.2009

Modifier le pied de note, avec ou sans les mains.

[Màj] Dans la terminologie locale, le pied de la note est la ligne habituellement constituée de la mention de la date de publication, et du nombre de commentaires, entre autres choses. Vous pouvez le modifier en semi-automatique, et en manuel avec la configuration avancée.


Changez de pied sans les mains


HF_tableau-de-bord_generalites.jpgDans l'interface d'administration, allez dans Tableau de bord, puis Généralités. Sous Propriétés d'affichage, vous trouverez Pied de la note avec la mention des éléments déjà affichés, et le mot Configurer.
Si vous cliquez, tous les éléments disponibles sont proposés, et il ne vous reste plus qu'à cocher tous ceux qui vous intéressent, ainsi que les services 2.0 Si c'est la première fois que vous en entendez parler, sachez que "Add This" permet d'afficher un bouton qui lui même permettra d'utiliser la plupart des services de partage. C'est facile et sans risque de les ajouter, de les retirer, n'ayez pas peur d'essayer.

HF_tableau-de-bord_generalites_pied-de-la-note.jpgLes quelques lignes qui précèdent ne sont pas seulement destinées aux néophytes. Ceux qui sont en configuration avancée, et s'apprêtent à mettre les mains dans le code doivent d'abord passer par ce configurateur et cliquer sur "Enregistrer" au moins une fois pour voir apparaître le pied de la note dans les modèles.

Lire la suite

10:10 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : pied de note, modifier | |  del.icio.us | | Digg! Digg |  Facebook

12.05.2009

Intégrer le style citation à la feuille de styles

Après avoir jouer à être "border line", puis avoir exploré les espaces intérieurs (et au-delà), nous en sommes arrivés à l'intégration du style citation dans la feuille de styles. Et nous allons enfin aborder la logique de la montre carrée...

Voilà où nous avions laissé notre style citation :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

Lire la suite

11.05.2009

Nos comments - 2

Les plus attentifs l'auront déjà remarqué : Hautetfort permet de suivre le fil de la discussion !

Alexandra ne manquera pas de faire une note complète et didactique, mais vous pouvez d'ores et déjà vous essayer en allant sur Présentation, Propriétés d'affichages et Afficher le fil des discussions. "Répondre à ce commentaire" s'affichera alors sous chaque commentaire de premier niveau.

Si vous avez personnalisé l'affichage des commentaires dans les colonnes, comme moi, il faudra revenir sur le code. Je vous proposerai de le faire bientôt.

18:49 Écrit par Gee Mee | Lien permanent | Commentaires (9) | Tags : commentaires, discussion | |  del.icio.us | | Digg! Digg |  Facebook

10.05.2009

Un style pour les citations avec "margin" et "padding"

Créer un sytle pour les citations nous a déjà permis de revenir sur les bordures, c'est au tour des espaces intérieurs et extérieurs... Voire entre les deux.

J'ai ajouté une couleur de fond à notre style, pour que la démonstration à propos des espace soit plus visible. Cela nous donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="background-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

Le texte colle à la bordure de gauche, ce n'est pas très joli, et la citation se distinguerait plus encore du corps de texte si nous pouvions ajouter un décrochage. Ces deux paramètres se gèrent indépendamment.

Lire la suite

10:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, margin, padding, citation, style | |  del.icio.us | | Digg! Digg |  Facebook

08.05.2009

Voir ses couleurs en grand

Ça y est, vous êtes décidé(e) à personnaliser les couleurs de votre blog ? Vous avez pris soin de lire la note de Gee Mee appliquer des couleurs et en comprendre les codes ? Vous avez tout compris, et vous passez à l'action... mais voilà, la couleur que vous avez sélectionnée dans sa petite case vous déçoit une fois appliquée à une plus grande surface !

Voyons, ne vous arrachez pas les cheveux, j'ai une solution. Enfin, pas moi, mais le petit génie qui a eu cette idée formidable : faire afficher une couleur dans une pleine page web !

Pour cela vous devez avoir noté le code hexadécimal de cette couleur.

Si ce mot vous semble barbare, c'est que vous n'avez pas tout à fait compris la note citée en préambule (très riche, il est vrai : on peut avoir du mal à tout capter !), alors je récapitule le strict nécessaire :

Une couleur peut s'écrire de différentes manières :
- en texte, html (ex. "Red") ou html étendu pour aller au-delà des 16 couleurs de base (ex. "Tomato"),
- en valeurs (ex. R : 178, V : 34, B : 34, écrit 178.34.34),
- ou en hexadécimal (le barbare...), c'est-à-dire avec 3 valeurs chiffrés en base 16 et précédées d'un dièse (ex. #daa520 ou #DAA520).

Cela tombe bien, car c'est justement en hexadécimal que la palette Hautetfort nomme les couleurs, et c'est le code dont vous aurez besoin si vous voulez modifier le template.

Si vous avez repéré quelque part une couleur en RVB voici un petit convertisseur RVB / hexadécimal très pratique (il fonctionne dans les deux sens).

 

Vous l'avez ? Maintenant, cliquez ici pour ouvrir la fenêtre de cet outil magique.

J'ai choisi cette couleur à l'ouverture pour qu'elle s'accorde avec le blog Gee Mee ;-)

C'est bien beau, mais cela n'affiche pas VOTRE couleur. Il reste une petite manip'.

 

Allez au bout de la barre d'adresse et remplacez mon "ebc276" par le code de votre couleur sans le #.

Image 3.png

Maintenant vous pouvez vérifier si elle vous plaît VRAIMENT. De quoi en prendre plein les mirettes...

Elle vous plaît tant que cela ? Alors pensez-y, si vous n'en pouvez plus de l'accumulation de fenêtres sur votre écran et que vous avez besoin d'une soudaine pause relaxante : élargissez la fenêtre et contemplez en plein écran l'élue de votre cœur (je parle toujours de couleur, là) !

Une prochaine fois je vous présenterai un outil intéressant pour marier votre couleur préférée avec d'autres et créer une charte de couleur pour votre blog.

10:30 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : couleur, hexadécimal, blog | |  del.icio.us | | Digg! Digg |  Facebook

06.05.2009

Un style pour les citations avec la propriété « border »

Dans un contexte toujours plus tendu autour de la propriété intellectuelle, il conviendrait de ne pas négliger la bonne présentation des extraits de texte auxquels vous souhaitez réagir, ou que vous utilisez pour illustrer votre propos.

La mise en forme des citations fait parfois partie des styles par défaut proposés dans les éditeurs de note des plateformes de blog, mais pas chez Hautetfort pour l'instant. Comme nous avons créé un style pour le code, nous allons en créer un autre pour les citations en abordant en trois notes : les bordures, les marges, et cette logique bizarre de montre carrée.

En CSS, "border" vous permet de créer une bordure autour de votre texte, vous pouvez très simplement l'utiliser en style attaché à un paragraphe de cette façon.

Exemple de texte avec "bordure".

<p style="border-style:solid; border-width:1px; border-color:#000;">Exemple de texte avec "bordure".</p>


Style de trait, épaisseur et couleur

Il est recommandé de donner ces propriétés dans cet ordre, même si certains navigateurs "supportent le désordre".

Les styles de trait les plus courants sont : continu (solid), avec des tirets (dashed), avec des points (dotted), ou doublé (double). Il en existe d'autres.

La commande de l'épaisseur se fait avec « width », généralement en pixels, mais éventuellement avec des adjectifs (length, thin, medium, thick). Notez qu'il est utile d'avoir au moins 3 pixels d'épaisseur pour avoir deux lignes visibles. De même, pour voir les points passer de « carrés » à « ronds » faut-il leur accorder un minimum de largeur.

La couleur se commande avec « border-color ».

Lire la suite

13:26 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, bordure, cadre, citation, style | |  del.icio.us | | Digg! Digg |  Facebook