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.

27.11.2009

Pourquoi et comment adapter des feuilles de styles pour l'impression et les mobiles ?

Vous considérez peut-être avoir assez de difficultés comme cela avec une feuille de styles pour ne pas vous ennuyer avec plusieurs. Avez-vous essayé d'imprimer l'une de vos notes, d'en lire une sur un écran de téléphone portable ? Si certains services existent pour vous faciliter la tâche, vous pouvez tenter d'améliorer les différents rendus de votre blog par vous-même. Voyons d'abord le principe.

 



Un site, plusieurs médias.

On oublie trop rapidement qu'un blog n'existe pas seulement sur son propre écran. Quand on alterne entre équipement personnel et professionnel, sans risquer sa carrière à surfer au bureau, on peut déjà constater des différences. Résolutions d'écran, rendus des couleurs, polices disponibles, et autres contraintes techniques permettent de comprendre que l'on propose, et que le lecteur dispose.

Et le lecteur, veut parfois lire sur papier, pour avoir le temps, pour partager, ou parce que c'est souvent plus pratique de laisser une feuille de papier sur la table de la cuisine que de rendre son portable cookingproof.

Non content d'imprimer, le lecteur accro voudra parfois que vous le transportiez sur son JEphone du rire aux larmes personnellement, bien plus efficacement que les équipements collectifs n'arrivent à le faire en commun. Ce sera plus facile d'adapter votre blog que de faire débloquer les crédits nécessaires à l'amélioration des TER, RER et autres hères. Mais vous en êtes aussi responsables, faut pas croire.


Prenons Duchamp

Il existe des « ready-made », ou quasi, qui vous faciliteront la tâche. Ainsi, pour imprimer un blog, vous pouvez recourir à PrintFriendly qui neutralise la feuille de styles du site et en propose une aussi simple qu'efficace. Quand cela fonctionne, c'est-à-dire très souvent mais pas toujours, vous pouvez aussi choisir les blocs de texte et les images à imprimer. Cela peut se révéler très pratique, et si c'est d'un fichier à conserver ou envoyer dont vous avez besoin, vous pouvez générer un PDF. J'en avais déjà parlé dans « Proposez une version imprimable d vos notes avec Printfriendly » et la fonctionnalité est intégrée en pied de note.

Pour l'adaptation aux écrans de portables, Vous pouvez utiliser des services comme Andanza remarqué par le toujours excellent Modérateur. Cela n'a pas fonctionné quand j'ai essayé, mais cela ne saurait être définitif.

Il existe aussi Mobify trouvé dans un site consacré aux techniques pour le développement agricole. Et pour les utilisateurs de WordPress qui se seraient perdus ici, vous pourrez lire l'article d'Iphone Killer.


Faisons-le nous même.

Après tout, il ne s'agit « que » de modifier la feuille de styles pour retirer des éléments, adapter des spécifications. Cela ne va quand même pas vous faire peur ?

Reconnaissons que Hautetfort ne nous facilite pas la tâche en interdisant le téléchargement de fichiers au format CSS. Il nous faudra donc trouver un hébergement externe qui accepte des accès directs. Ce qui exclue l'hébergement d'un compte GoogleDocs.

Si vous croyez ne pas avoir d'espace où stocker des fichiers, comme un répertoire quelque part sur un site perso, vérifiez donc ce que vous propose votre fournisseur d'accès à internet. Ils proposent tous des espaces personnels. Ou presque. Vous aurez tout de même à gérer des transferts de fichiers, et cela pourrait vous incommoder si vous n'envisagez pas le FTP autrement qu'en traction.

Ne reste plus qu'à créer un autre compte chez Hautetfort qui ne vous servira qu'à disposer d'une feuille de styles externe. Osmany ne va pas être content, mais il n'a qu'a se servir de cette dissidence pour faire avancer l'idée des CSS multiples sur un blog.


Et après ?

Une fois la CSS alternative crée, il « suffit » d'intervenir dans l'en-tête des pages. Pour l'instant, je ne l'ai fait que dans le modèle de la page lien permament. Vous retrouverez ci-dessous le code source, l'original ayant été passé en commentaire.

<!-- <link rel="stylesheet" href="{$blog.url}style.css" type="text/css" /> -->
<link rel="stylesheet" media="screen, handheld" href="{$blog.url}style.css" type="text/css" />
<link rel="stylesheet" media="print" href="http://geemee.ouvaton.org/geemee-css-print.css" type="text/css" />

Vous le voyez, seule une feuille de styles « print » est pour l'instant disponible. Et cette dernière est perfectible. Reste que mes notes peuvent maintenant être imprimées correctement. Et les vôtres ?

Continuez donc avec "Créez une feuille de styles dédiée à l'impression"...

09:50 Écrit par Gee Mee dans Configuration avancée, Modèles, images et CSS | Lien permanent | Commentaires (2) | Tags : css, media, imprimer, handheld, iphone, blog, mobile | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

Si Andanza n'a pas fonctionné, tu peux essayer d'autres services du genre. Le problème avec ces webwares gratuits, c'est que souvent leur période de "validité" est limitée dans le temps, vu qu'ils ne tirent pas de bénéfices de leur activité... Un équivalent donc :
http://www.mofusepremium.com/

Et pour les utilisateurs Wordpress :
http://www.wordpress-fr.net/blog/plugins/mobilepress-pour-rendre-accessible-son-blog-depuis-un-iphone

Écrit par : Flav | 27.11.2009

Répondre à ce commentaire

Merci "Flav" pour cet intéressant complément. La volatilité des services web gratuits est une donnée importante à prendre en considération au moment de faire son choix.

Écrit par : Gee Mee | 27.11.2009

Les commentaires sont fermés.