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.

28.11.2008

Copier un blog n'est pas jouer

Coller n'est pas jouer, nous l'avons vu récemment, et copier ne l'est pas non plus. Parce que c'est du sérieux, c'est même indispensable.

Vous n'imaginiez tout de même pas que j'allais vous faire une leçon de morale à propos du respect des droits d'auteur, et des limites rapidement atteintes du droit à la copie privée ? Je veux bien en reparler à l'occasion, mais j'aime à considèrer que les rares visiteurs de mon blog sont des adultes responsables.

"J'aime aussi les catastrophes qui mettent la vie en apostrophe"

Mais la disparition d'un site internet personnel pour cause de crash machine chez l'hébergeur, ou plantage monstre dans la plateforme, me fait un peu trop froid dans le dos. Et c'est déjà l'hiver. Que ceux qui n'ont jamais été déçus par une promesse d'infaillibilité me jettent la première pierre, avec douceur. Plus simplement, il peut être utile de faire une sauvegarde régulière, et garder une trace de ses contenus en ligne, pour se préserver de ses propres turpitudes informatiques.

A priori, vos textes et vos images sont déjà sur une machine qui vous appartient, une clé si vous êtes un nomade accro des applications portables. Si vous écrivez toujours à la volée, au gré des hôtels connectés et cyber-cafés fréquentés lors de vos pérégrinations IRL, vous n'avez peut-être qu'une trace réduite de ce que contient réellement votre blog.

Comment copier mon blog ?

Nous allons le capturer, en utilisant un "aspirateur". Les spécialistes de la navigation documentaire en connaissent un certain nombre, pour déjà récupérer régulièrement des contenus en ligne afin de les exploiter en local sur une machine. Sans prosélytisme appuyé, je me contenterai de vous parler de Win HTTrack. Vous en trouverez une description détaillée sur le site de Framasoft avec lien vers le site officiel, et quelques tutoriels qu'il est inutile de reproduire ici (mais qu'il est utile de consulter !).

WinHTTrack-accueil.jpg

1. Une fois installé sur votre machine, le logiciel est relativement facile à prendre en main. Pour une première utilisation, cliquez sur [Suivant], parce que vous n'avez pas de "projet" déjà enregistré.

WinHTTrack-project1-A-nommer.jpg2. Vous aurez besoin d'un nom pour votre "projet" que vous pourrez éventuellement ranger dans une catégorie pour vous y retrouver. Vous avez besoin de décider de l'endroit où HTTrack déposera les fichiers récupérés. Si le répertoire par défaut ne vous convient pas, allez en choisir un autre en cliquant sur [...]

WinHTTrack-project1-B-Donner-Adresse.jpg3. Bien sûr, il vous faudra indiquer l'adresse précise du site à copier. Pour un premier essai, je vous conseille de laisser les options par défaut. Il sera toujours temps d'intervenir plus tard.

4. L'écran suivant vous propose des options relatives à la connexion. Il est rarement nécessaire d'intervenir. Cliquez sur [Terminer] pour lancer la copie.

WinHTTrack-project1-C-Copie-en-cours.jpg5. Une fois la copie lancée, vous pouvez vous voir l'évolution du téléchargement des fichiers, et l'arborescence se développer dans le volet de gauche. Mon propre blog, avant cette note, a demandé moins de 4 minutes. Évidemment, plus il y a de contenu, plus c'est long. Surtout si votre connexion est un peu lente.

WinHTTrack-project1-D-Copie-terminée.jpg6. Voilà, c'est terminé, vous pouvez consulter le "Journal" pour voir les éventuelles erreurs de téléchargement. La copie est prête, cliquez sur [Explorer la copie du site] pour qu'elle s'ouvre dans votre navigateur par défaut.

 

Mais alors ?

Seule la partie publique a été copiée ?
Avec les options, l'aspirateur peut parfois aspirer des fichiers vers lesquels aucune note ne pointe. Ne laissez donc pas traîner des fichiers inutiles dans vos répertoires Haut&Fort.

Et la prochaine fois, il faut tout refaire ?
Au prochain lancement de HTTrack, vous retrouver le nom de votre projet dans le menu fichier, et le logiciel vous propose une mise à jour automatique avec les mêmes paramètres. C'est à ce moment qu'il faut les changer si vous avez rencontré des difficultés.

Au secours, ça prend des heures et des giga-octets !
Si vous n'avez pas touché aux options par défaut, c'est que votre site est particulièrement fourni. Sinon vous avez peut-être poussé un peu loin la profondeur d'exploration des liens externes. Avec une profondeur externe de 2, si votre site pointe vers 10 sites, qui pointent vers 10 sites chacun, vous êtes déjà à 100 pages...

Regardez tout de même un peu les conseils qui sont proposés par Framasoft.

Mais cela ne sauvegarde pas ma base de données ?
Effectivement, vous n'obtenez qu'une copie de ce qu'un visiteur verrait, s'il lisait tout votre blog.
N'imaginez pas que vous pourrez injecter cette copie dans un autre blog !

Tout au plus pourrez-vous en faire un site statique après livraison FTP sur un site d'hébergement, mais c'est une autre histoire.

 

12:25 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (6) | Tags : blog, copier, aspirer, sauvegarder, httrack | |  del.icio.us | | Digg! Digg |  Facebook

26.11.2008

Retrouver le code d'une couleur vue sur le web, et ailleurs.

Avouez-le, malgré vos efforts acharnés à maîtriser les parfaits dosages de rouge de vert et de bleu, retrouver la couleur qui vous plaît vous est aussi facile que si vous deviez recomposer votre parfum vous-même. Ce serait tellement plus facile de les piquer ici et là...

Il n'est pas donné à tout le monde de distinguer correctement les couleurs et de savoir les restituer. Aussi, les outils qui permettent de faire des prélèvements rapides et sans douleur sont les bienvenus. Vous connaissez cet outil, vous l'avez vu dans un logiciel de retouche d'image, et déjà dans MS Paint vous l'aviez rencontré sous le nom de "pipette".

Mais quand on a besoin de seulement capturer une couleur pour en obtenir le code, lancer Gimp ou Photoshop paraît bien disproportionné. Des outils qui ne font que cela mais qui le font bien, il en existe de nombreux. J'ai personnellement adopté la solution de Benjamin Chartier.

La boîte à couleurs (v1.6.15)

C'est un logiciel gratuit que je vous incite à retrouver sur le site Pourpre que nous avons déjà évoqué. Cet outil est aussi simple que puissant, et vous permettra la capture facile et indolore des couleurs les plus sauvages et indomptables.


Vous pourrez alors coder en :
• RVB (Rouge Vert Bleu)
• TLS (teinte / luminosité / saturation)
• TSV (teinte / saturation / valeur)
• CMJ (cyan / magenta / jaune)
• CMJN (cyan / magenta / jaune / noir)

Et pour les littéraires, ou les personnes seulement lassées du côté froid des valeurs arithmétiques, on peut utiliser des noms, des vrais, et notamment ceux de la palette de Chroma. Les accros des références d'imprimerie trouveront même des correspondances Pantone (je ne rentre pas dans le débat de leur pertinence...).

La_boite_a_couleurs_nom.jpg

Trop facile ?

Faites donc vous-même votre nuancier préféré en créant un fichier texte avec un nom et un code couleur html par ligne. Enregistré dans le répertoire ColorNames du répertoire d'installation de LaBoiteACouleurs, il sera reconnu et utilisable dans l'onglet "Nom".

P.S. : Sans vouloir jouer les pudibonds, Pourpre diffuse une publicité pour une exposition qui peut en faire rougir quelques uns. Sachez-le avant d'y aller avec des yeux innocents.

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (1) | Tags : blog, html, couleur, palette | |  del.icio.us | | Digg! Digg |  Facebook

24.11.2008

Intégrer un lecteur de vidéo Youtube personnalisé

[màj:02/02/10] L'une des bonnes nouvelles de la semaine dernière, c'est le lancement sur Youtube d'une chaîne Monty Python. Une occasion rêvée pour voir comment intégrer un lecteur YouTube personnalisé sur son blog.

La méthode est la même que pour un lecteur Deezer, et c'est bien normal puisque la solution technique est la même. On "appelle" un lecteur en Flash hébergé comme le contenu à lire sur un serveur externe. On en profite éventuellement pour glisser en quelques paramètres un peu de couleurs.

Pour intégrer un lecteur YouTube :

Connectez-vous à YouTube et lisez la vidéo à installer.
Cliquez sur la roue dentée à droite de la zone "Intégrer une vidéo sur un site"
youtube_lecteur.jpg
Choisissez un jeu de couleurs
Choisissez entre inclure ou pas les vidéos similaires.
Si vous ne souhaitez pas partager vos autres vidéo, ou ne pas conduire vers les sélections de la personne qui a mis en ligne la vidéo que vous voulez diffuser vous-même, il faut choisir "Ne pas inclure".
Choisissez d'afficher ou non le cadre
Une fois vos réglages effectués, cliquez dans la zone
"Intégrer une vidéo sur un site"
Copiez le code
Dans l'éditeur Wysywig de Haut&Fort, cliquez sur "Insérer un fichier multimédia", puis sur l'onglet "code embed".
Collez le code et cliquez sur insérer.

 

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/WlBiLNN1NhQ&hl=fr&fs=1&color1=0xe15154&
color2=0xfcd5cb"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WlBiLNN1NhQ&hl=fr&fs=1&color1=0xe15154&
color2=0xfcd5cb" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Vous pouvez aussi personnaliser les couleurs de votre lecteur "à la main". Dans le code du lesteur ci-dessus, le paramètre color1 qui indique la couleur du filet a une valeur de rose soutenu (e15154), et color2 qui indique la couleur du fond a une valeur de rose pâle (fcd5cb). Cette fois encore, attention à ne pas mettre le #, et à ne rien toucher d'autre.

Par défaut, le lecteur fait 425 pixels de large pour 344 pixlels de haut. Vous pouvez modifier ce réglage, à condition de respecter le rapport hauteur = 0,8094 x largeur, ou largeur = 1,2355 x hauteur selon la dimension prioritaire. Cela peut altérer la qualité d'affichage, mais vos visiteurs pourront toujours afficher le lecteur en plein écran avec la taille maximum acceptable définie par YouTube.

Don't forget : Always Look On The Bright Side of Life.

[màj:02/02/10] Si vous souhaitez personnaliser votre lecteur comme ce dernier, lisez la note : Un lecteur Youtube vraiment personnalisé, sans feuille de styles.


 

11:35 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, lecteur, lecteur exportable, vidéo, youtube | |  del.icio.us | | Digg! Digg |  Facebook

23.11.2008

Gee Mee, I presume ?

Voici une petite note aussi parfaitement dominicale qu'inutile. Quoique.

Quand j'ai choisi le pseudonyme de "Gee Mee" pour ouvrir ce blog, je n'avais pas conscience d'utiliser un pseudonyme, et parfois même un patronyme aussi répandu. Vous avez le droit de ne pas le croire, mais Gee Mee est à peine moins populaire de Barack. En tout cas pour l'instant.

Si parmi les rares visiteurs de ce blog, il s'en trouvait un qui fasse des recherches dans Google ou ailleurs pour en "apprendre" sur Gee Mee, autant qu'il sache qu'il ne s'agira jamais de moi.

Je m'en serai voulu que vous fassiez des reproches à un(e) innocent(e), de ce que vous pourriez trouver ici.

 

12:30 Écrit par Gee Mee dans 1ère visite | Lien permanent | Commentaires (0) | Tags : gee mee | |  del.icio.us | | Digg! Digg |  Facebook

22.11.2008

Insérer du code Html, sans acheter de jumelles (ou la méthode "embed"

Reconnaissons que le code HTML, c'est bien gentil, mais dans l'éditeur de code H&F c'est rapidement illisible. Difficile de retrouver l'emplacement exact d'une intervention.

Retrouver les bonnes balises au bon endroit demande un temps fou, mobilisant une énergie qu'il est incivil de gâcher en ces temps de crise. D'autant que pour un petit bout de code de rien du tout, il va falloir faire défiler l'essentiel de la note sans qu'il soit forcément possible de trouver un raccourci. Heureusement, qu'il en existe un quand même, à condition de détourner un outil disponible.

Vous avez quelques lignes de code à peine à insérer ?

HF_ins_video_son_code_embed_small.jpg • Dans l'éditeur Wysiwyg donc,
• positionnez votre curseur au bon endroit.
• Utilisez la commande "Insérer un fichier multimédia".
• Cliquez sur l'onglet "code embed".
• Tapez ou collez votre code.
• Cliquez sur valider

Cette petite fenêtre vous offre la possibilité d'insérer du code, mais pas de modifier celui qui s'y trouve. Autant dire que vous n'économiserez pas longtemps l'usage de l'éditeur Html sans une préparation soigneuse de votre code.

C'est notamment pourquoi il peut-être utile de repérer ses interventions rapidement, décidément, on y revient. Il existe une possibilité pour écrire des commentaires qui ne seront pas "interprétés".

Marquez donc votre territoire


• Positionnez votre curseur au bon endroit.
• Utilisez la commande "Insérer un fichier multimédia".
• Cliquez sur l'onglet "code embed".
• Tapez ou collez le code <!-- Bob wuz der -->
• Cliquez sur valider

C'est dans le code, et il n'y a que vous pour le savoir. Bien sûr, c'est plus utile si vous utilisez quelque chose comme <!-- Tableau orchidée -->
À vous de faire preuve d'imagination, en gardant à l'esprit qu'un commentaire commence par <!-- et se termine par -->. Si vous voulez une ligne de tiret prévoyez un espace genre <!-- ---- et --- -->. Sinon H&F supprimera les tirets pour les remplacer par des espaces.

Tout ce qui se situe entre ces deux balises <!-- et --> est neutralisé, assimillé à du commentaire et non à une instruction. Autant dire que si vous oubliez de "fermer" votre commentaire, une partie importante du code de la page ne sera plus interprétée ; ce qui lui donnera certainement une touche très personnelle. Cela peut d'ailleurs vous servir à temporairement neutraliser une partie du code, sans le supprimer. Quand on procède par essai/erreur, c'est assez utile.

Je résume

• Utilisez la commande "Insérer un fichier multimédia".
• Cliquez sur l'onglet "code embed".
• Tapez ou collez : <!-- >>>>> Mon code 1 - début >>>>> -->
• Tapez ou collez votre code à faire interpréter
• Tapez ou collez : <!-- <<<<< Mon code 1 - fin <<<<< -->
• Cliquez sur valider

Vous devriez y voir plus clair. Bon ok, c'est relatif. Pour vous entraîner un peu, j'ai inséré des commentaires dans le code de cette note, saurez vous les retrouver ? [Affichage / Code source]

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : blog, html, commentaires, méthode, embed | |  del.icio.us | | Digg! Digg |  Facebook

WYSIWYG

What You See Is What You Get.

Se dit d'un outil qui prétend montrer pendant l'édition, l'apparence de l'état final d'un document. Souvent utilisé pour opposer les logiciels permettant de créer des pages Html, comme dans un traitement de texte traditionnel, aux logiciels qui privilégient l'intervention directe dans le code. Cela serait prétendument plus facile, et much more user friendly.

Pour aller plus loin
Wysiwyg
sur Wikipedia

La plupart des logiciels actuels proposent les deux (le code et l'apparence), montrant ainsi les libertés qu'ils prennent avec une codification orthodoxe reconnue par le W3C.

L'interface de rédaction des notes de blog par défaut, à Haut&Fort comme ailleurs, peut-être considérée Wysiwyg. Encore une promesse qui n'engage que ceux qui veulent bien y croire.

HF_note_wysiwyg.jpg

12:25 Écrit par Gee Mee dans Glossaire | Lien permanent | Commentaires (0) | Tags : html, wysiwyg | |  del.icio.us | | Digg! Digg |  Facebook

21.11.2008

Jetons l'ancre à point nommé avant d'insérer un lien

Insérer un lien dans une note, vous savez le faire. Certainement. Et si je reproduis le mode opératoire ci-dessous, c'est uniquement pour les nouveaux arrivés sur Haut&Fort. Les autres, sûrs d'eux-mêmes, peuvent aller directement à la suite.

Le passage de la "base de connaissances" Haut&Fort traitant de l'insertion de lien mérite d'être mise à jour. Je l'ai fait ci-dessous.

Questions
• Comment insérer un lien dans une note ?
• Je souhaite faire un lien qui ouvre dans une nouvelle fenêtre, comment faire ?

Réponse
Pour insérer un lien dans une note :
1. Sélectionner l'image ou le texte de votre note sur lequel vous souhaitez créer votre lien.
2. Cliquez sur l'icône lien de la barre d'outil de l'éditeur de note.
2.1. La fenêtre "Insérer un lien" s'ouvre en pop-up
3. Dans la zone "URL du lien" saisissez l'adresse Internet de votre lien.
4. Dans la zone "Cible", un menu déroulant vous permet d'indiquer dans quelle fenêtre s'ouvrira le lien
4.1. Par défaut le lien s'ouvrira dans la même fenêtre
4.2. Vous pouvez le confirmer en choisissant "Ouvrir dans la même fenêtre"
4.3. Vous pouvez choisir "Ouvrir dans une nouvelle fenêtre" pour que la fenêtre reste ouverte sur votre blog
5. Renseignez la zone "Titre" pour qu'une "infobulle" puisse s'afficher au survol du lien
6. Cliquez sur le bouton ok.

Voyez, ce n'était pas trop long d'arriver là.

Tout comme Haut&Fort vous permet accéder directement à un commentaire sans avoir à faire défiler la page, vous pouvez créer des liens dans votre note pour gérer ce qui pourrait ressembler à une "note de bas de page"[1]. Vous pouvez aussi envisager des liens vers un emplacement dans une autre note, comme ici quand je vous incite à revoir le code d'un tableau au fond couleur d'orchidée dans une autre fenêtre.

Vous aurez déjà remarqué que la seule différence visible, avec un lien traditionnel, est la présence de ce code ici en gras.
http://geemee.hautetfort.com/archive/2008/11/14/une-lettrine-pour-prendre-le-tableau-a-la-lettre.html#tableau_orchid
Il s'agit de la précision d'un emplacement précis dans le fichier indiqué par le reste de l'URL.

Pour nommer un endroit dans un fichier :

• Dans l'éditeur de note, placez le curseur entre les deux premiers mots de votre paragraphe de destination (là où vous souhaitez pouvoir aller plus tard).
• Cliquez sur "Insérer un fichier multimédia", cela nous permettra d'insérer du code Html plus facilement.
• Tapez : <a name="direct">&nbsp;</a>
&nbsp; est le code html pour un espace insécable
• Cliquez sur [Valider].
Vous voyez maintenant une petite ancre sur fond jaune dans l'éditeur de note entre les deux premiers mots du paragraphe cible, mais rien dans l'aperçu. C'est normal, ce code n'est pas visible. Il a d'ailleurs été converti une fois de plus pour devenir <a name="direct" id="direct">. Le "nom" est libre, et n'est pas lié au texte encadré par la balisage d'ancrage, et vous pouvez le modifier (attention à ne pas supprimer les balises).

D'habitude on met le premier mot du paragraphe cible, ou une image entre les balises d'ancrage. Mais avec MS Internet Explorer, dans l'éditeur wysiwyg d'H&F, le symbole de l'ancre est tronqué, et le contenu encadré devient invisible. C'est encore là, on le retrouve dans l'aperçu, mais ce n'est pas très pratique.

Pour diriger vers ce point il faudra :

- Si vous êtes déjà sur la page, l'adresse #direct suffira au moment d'insérer un lien.
- Si vous dirigez vers ce point à partir d'une autre page, il faudra faire précéder par l'adresse complète:
http://geemee.hautetfort.com/archive/2008/11/19/inserer-un-lien-vers-un-point-dans-une-note.html#direct

 

Avec un peu d'entraînement je suis sûr que vous ferez des merveilles.

 



[1]Voici une note de bas de page. Pour revenir au texte cliquez sur Retour. J'ai effectivement prévu une autre étiquette à l'endroit du premier lien. Entre l'appel de la note de bas de page, et la note de bas de page elle-même, il y a donc une sorte de code "aller" et de code "retour". C'est facultatif, mais cela facilite la navigation.

Code de l'appel de note :
ce qui pourrait ressembler à une "note de bas de page"<a target="_self" title="Note [1]" href="#NoteBasDePage1">[1]</a><a name="Retour1" id="Retour1">.</a>

Code de la note :
<a name="NoteBasDePage1" id="NoteBasDePage1">[1]</a>Voici une note de bas de page. Pour revenir au texte cliquez sur <a target="_self" title="Retour au texte" href="#Retour1">Retour</a>.

***

Ici j'insère du faux texte pour que l'effet "accès direct" dans un long document soit bien visible

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin luctus tristique felis. Maecenas quis purus. Praesent magna metus, interdum sit amet, commodo eget, consectetuer at, est. Mauris leo. Fusce eu metus id enim tincidunt viverra. Ut aliquet mauris. Praesent leo. Praesent eu enim. Sed ac libero. Etiam dapibus dolor ac orci. Suspendisse quis mauris. Praesent vulputate, lacus nec bibendum porttitor, turpis sapien malesuada ligula, nec tempor dolor tellus at nisl. Sed non risus. In semper felis at nulla placerat iaculis. Quisque semper augue at nibh. Etiam lacinia laoreet felis. Aliquam pharetra mauris vel tortor. Cras gravida volutpat arcu. Curabitur in metus sit amet ipsum venenatis rhoncus. Nullam ultrices urna id nisi.

Maecenas orci arcu, fringilla ac, vehicula ut, luctus et, velit. Maecenas ac ipsum. Maecenas elit. Maecenas nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi scelerisque dictum velit. Sed laoreet magna vitae velit. Nullam viverra molestie est. Mauris nec turpis in sapien fermentum porta. Curabitur mi. Sed vel risus non nisl tempus vestibulum. Morbi ac massa. Vivamus tincidunt viverra lacus. Integer at eros.

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : blog, html, lien, ancre | |  del.icio.us | | Digg! Digg |  Facebook

20.11.2008

D'où venez-vous ?

Les statistiques de site web sont à manipuler avec précaution.

D'après Haut&Fort, je devrais pouvoir savoir d'où vous venez. Sauf qu'il n'y a guère qu'un tiers des origines qui soit remonté dans le tableau mensuel, même en comptant le quart de requêtes directes. Et puis cela ne permet pas de distinguer les personnes qui sont venues par accident. Toutes celles qui sont venues parce qu'elles ont cliqué sur "Gee Mee" dans la liste des derniers weblogs mis à jour...

Bref, c'est inutile donc tout à fait indispensable.

Depuis le mois de novembre les visites viennent de :
Requètes directes
Google & avatars
http://attitude.hautetfort.com
http://gicerilla.hautetfort.com
http://www.hautetfort.com
http://bcm.hautetfort.com
http://snep.humantohuman.fr
http://blogocite.canalblog.com
http://chairchampcorp.hautetfort.com
http://elusmonarchistes.hautetfort.com
http://lespeuplesdusoleil.hautetfort.com
http://littleblog.hautetfort.com
http://motslocaux.hautetfort.com
http://omalkora.hautetfort.com/
http://planetejeuvideo.hautetfort.com
http://search.live.com/results.aspx
http://vautmieuxenparler.hautetfort.com
http://yamael.hautetfort.com

 

12:30 Écrit par Gee Mee dans 1ère visite | Lien permanent | Commentaires (11) | Tags : statistiques, referents, origine | |  del.icio.us | | Digg! Digg |  Facebook

19.11.2008

Pour apporter les couleurs du monde, à la portée du monde des couleurs

Nous avons commencé à voir comment appliquer une couleur à un texte, et à une cellule de tableau, mais nous avons négligé une étape essentielle : savoir choisir une couleur.

Il est d'usage de considérer que les goûts et les couleurs ne se discutent pas. Un usage qui ne vaut rien et que nous nous abstenons de respecter à chaque occasion. Si nous n'exprimons pas forcément ce que nous pensons des harmonies des autres, nous n'en pensons pas moins. Soyons honnête et admettons que les couleurs des autres, comme leurs goûts, sont souvent discutables.

D'ailleurs, les difficultés commencent quand nous cherchons à nommer les couleurs. La maîtrise du vocabulaire approprié ne s'improvise pas, et rares seront ceux qui réussiront à se sortir d'un débat autour du nom de ce vieux rose sans boire le calice jusqu'à la lie de vin.

Le site Pourpre.com peut nous aider sur ces deux points notamment.

Dans la rubrique "Chroma" nous trouvons plusieurs dictionnaires : alphabétique, chromatique par teinte ou par champs. Chaque couleur fait l'objet d'une fiche, et propose un code Html en hexadécimal. Il y est aussi question de qualificatifs comme "acidulé" par exemple.
Enfin, il existe un dictionnaire imaginaire qui vaut le détour à lui seul. Les internautes ont la possibilité de proposer une couleur, avec une définition toute personnelle. Certains abuseront de jeux de mots, joueront sur l'écriture du code ou feront preuve de poésie.
C'est un lieu magique dans lequel se retrouveront à leur aise les amoureux des mots comme des couleurs. De l'authentique "cuisse de nymphe" à l'imaginaire "nymphrose", vous en verrez des vertes et des pas mûres. Et même du Verlaine.

Chromafiltre vous aidera à trouver les accords.
C'est un outil en Flash qui vous permet de trouver des harmonies à partir d'une roue chromatique ou de gammes et d'effet recherché. Bien plus que des solutions toutes prêtes, vous y trouverez des méthodes qui vous aideront dans votre quête.

Pourpre.com
Ce site propose des articles consacrés à la couleur: le phénomène physique, la perception des couleurs, la langue française et la couleur, des questions-réponses, un glossaire, une présentation des principaux modèles et nuanciers de couleurs, quelques jeux, une sélection de liens...

Extrait de la page d'accueil

 

10:36 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, couleur, pourpre | |  del.icio.us | | Digg! Digg |  Facebook

16.11.2008

Une lettrine pour prendre le tableau à la lettre (révisée)

Cette note a été révisée le 13 mars, lors de la publication de la note expliquant la modification de la feuille de styles automatisant le passage en lettrine de la première lettre du premier paragraphe. Je joins une capture d'écran avant modification de la CSS. Chez vous, cela peut donner quelque chose de sympathique, vous ne risquez rien à essayer. Ici, mon petit bricolage donne un résultat... que l'on ne saurait poursuivre.

geemee-lettrine-avant-css.jpg

L'adoption du numérique ne doit pas nous faire abandonner toutes les traditions de l'imprimerie, ni même du livre quand il n'était encore qu'aux mains des copistes.

A

dmettons ensemble que la lettrine peut être une chose sympathique pour commencer une note. C'est pourquoi je vous donne un moyen de le faire vous-même. Cet exercice nous donne aussi l'occasion de faire connaissance avec les tableaux en HTML. Si vous trouvez déjà que c'est une vraie galère avec un traitement de texte, c'est que vous n'avez pas encore fait connaissance avec l'un des passages aussi redouté qu'obligé des webmasters.

Vous ne cherchez pas à devenir webmestre ? Je m'en doute, sinon, vous ne seriez pas sur une plateforme de blog. Cela étant, les tableaux rendent bien des services pour structurer la mise en forme de la page. D'ailleurs cette page n'est elle-même qu'un vaste tableau à 3 colonnes.

Comment créer un tableau

Je crains qu'il ne vous faille à nouveau passer en mode HTML, mais pour l'instant continuez ici, si vous le voulez bien. Il nous faudra ouvrir une table, puis le "corps" : ouvrir une ligne, ouvrir une cellule, en donner le contenu. Puis fermer la cellule, la ligne, le corps et le tableau.

• Copiez donc le code :
<table>
<tbody>
<tr>
<td>Archaea</td>
</tr>
</tbody>
</table>
• Passez en mode HTML
• Collez le code
• Cliquez sur [Mettre à jour]

on obtient :

Archaea

Même pas je vois que c'est un tableau... et en plus je suis coincé, je ne peux pas écrire avant ni après. Il est effectivement préférable de taper deux caractères repères, ne serait-ce que "xx", entre lesquels vous collerez le code. Cela vous permettra de reprendre la main sans passer par l'éditeur HTML.

Mettons que j'indique une bordure de 1 pixel d'épaisseur, pour le tableau, et un fond de couleur orchidée pour la cellulle.
Avec le code :
<table border=1 >
<tbody>
<tr>
<td bgcolor="orchid">Archaea</td>
</tr>
</tbody>
</table>

On obtient :

Archaea

C'est moche, mais cela ressemble bien à une cellule de tableau...

Passons au code de la lettrine.

Nous avons besoin d'un tableau "mono-cellulaire".
Sa hauteur doit être suffisante pour afficher la lettrine, mais ne pas créer trop de lignes décalées.
Le texte doit s'aligner autour du tableau sur la gauche.
La lettre doit s'aligner verticalement dans la cellule sur le milieu.
La taille de la lettre doit être suffisante pour créer son effet, en adoptant éventuellement une autre fonte.

Pour la lettrine de cette note, le code est le suivant :
<table style="height: 70px;" align="left" border="0">
<tbody>
<tr>
<td valign="middle" background="http://geemee.hautetfort.com/media/00/00/1795889500.gif"><B><span style="line-height: 70px; font-size: 60px; font-family: verdana,arial;">A</span></B></td>
</tr>
</tbody>
</table>

Pour l'analyser dans le détail :

<table style="height: 70px;" La hauteur spécifiée est de 70 pixels.
align="left" Le texte va s'aligner à gauche de la page contre le tableau.
border="0"> Pour ne pas avoir de bordure, mieux vaut déclarer une épaisseur à "0".
<tbody>
<tr>
On déclare le corps,
puis la première ligne.
<td 
valign="middle"
On ouvre la cellule,
on centre le contenu verticalement.
background="http://
geemee.hautetfort.com/
media/00/00/1795889500.gif">
au lieu d'utiliser un fond de couleur, j'ai téléchargé une image dont j'ai noté l'adresse (clic droit "copier l'adresse du lien" dans Tableaux de bord / Fichiers / Médias).
Si l'image est trop petite, elle sera répétée.
Si elle est trop grande, elle sera tronquée.
<B> Vous retrouvez le B que vous connaissez pour "bold"
<span
style="line-height: 70px;
On commence la mise en forme de la lettre elle même.
Ici on donne la taille de l'interligne.
font-size: 60px; Ici on donne la taille de la police : 60 pixels.
font-family: verdana,arial;"> On donne le nom de la police. Il est plus prudent d'en donner deux. Si "verdana" n'est pas sur le poste, il affichera avec "arial".
A
</span>
</B>
"A" est le seul texte.
On ferme le style,
on ferme "bold".
</td>
</tr>
</tbody>
</table>
On ferme la cellule,
la ligne,
le corps,
puis le tableau.

Vous serez certainement obligés de faire des ajustements successifs pour trouver le bon compromis entre la taille de la cellule et celle du caractère. L'image de fond, ou la couleur, etc.

Ne vous fiez pas à l'aperçu de l'éditeur Haut&Fort, son interprétation n'est pas celle de notre navigateur. Voyez ce qu'il affiche pour cette note.

HF_voir_la_note_lettrine.jpg

Vous devrez faire des allers-retour entre votre éditeur Haut&Fort et la note publiée. Quitte à modifier la date de publication pour la rendre indisponible "un certain temps".

 

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (3) | Tags : blog, html, lettrine, tableau | |  del.icio.us | | Digg! Digg |  Facebook