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.

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"