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.

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

14.11.2008

Appliquer des couleurs et en comprendre les codes

Sur votre télévision, les couleurs sont divisées en trois primaires rouge, vert et bleu. Vous le savez depuis que vous regardiez vos dessins animés préférés d'un peu trop près sur l'écran cathodique parental.

Vous pouviez distinguer les gros points au sein desquels les primaires s'additionnaient pour composer la couleur souhaitée. Aujourd'hui, avec les cristaux liquides, le plasma, inutile de baver dessus, vous ne verrez rien. Pour autant, il y a bien les mêmes composantes.

Et vous le savez aussi depuis que vous avez tenté de régler une couleur pour un graphique, un arrière-plan de tableau dans un tableur, ou de paragraphe dans un traitement de texte. Si les couleurs proposées ne vous conviennent pas, il est toujours possible de la régler vous même. Vous indiquez les proportions de rouge, de vert, et de bleu en glissant dans une palette, une roue chromatique, ou en indiquant une valeur comprise entre 0 et 255. Mine de rien cela fait 256 valeurs par composante, et donc 16 777 216 combinaisons possibles.

La plupart des machines actuelles sont capables de les afficher distinctement, alors que vous n'arriverez pas nécesairement à les distinguer vous-même, mais cela n'est pas toujours le cas. Les graphistes et concepteurs multimédia sont bien obligés de tenir compte des capacités du dernier maillon de la chaîne de diffusion et arbitrent en permanence entre ce qu'ils souhaitent, et ce que peut probablement proposer votre écran. La même image publicitaire n'aura pas la même composition pour la télévision, le web et le web via téléphone mobile. Sur internet, il a longtemps été conseillé d'utiliser la "palette web" composée de 216 couleurs qualifiées de "sécuritaires" auxquelles on ajoutait le noir, le blanc et 6 niveaux de gris.

Pour indiquer une couleur sur le web, vous devez utiliser un code HTML. Il en existe deux sortes.

Il existe des codes couleur HTML en texte

Ils sont en anglais bien sûr, mais ils ne se limitent pas aux 16 couleurs suivantes :

aqua [ • bleu-vert] • 
black [ • noir] • 
blue [ • bleu] • 
fuchsia [ • fuschia] • 
gray [ • gris] • 
green [ • vert] • 
lime [ • citron vert] • 
maroon [ • marron] • 
navy [ • bleu marine] • 
olive [ • vert olive] • 
purple [ • violet] • 
red [ • rouge] • 
silver [ • argent] • 
teal [ • bleu-vert] • 
white [ • blanc] • 
yellow [ • [jaune] • 

Vous trouverez une liste très fournie dans les pages couleurs d'Henri Ruch.


Plus généralement, les couleurs sont codées avec des chiffres

Au lieu de color="orchid" on aura color="#DA70D6".
"DA" représente la part de rouge, "70" la part de vert, et "D6" la part de bleu. Ces codes bizarres sont dus au fait que l'on compte en base hexadécimale (16) et non en decimale. À notre niveau, cela permet de donner 256 valeurs en deux caractères au lieu des 100 possibles en base 10.

Comment mettre de la couleur avec l'éditeur Haut&Fort ?

Il y a la méthode douce avec ses variantes, pour avoir plus de couleurs :
• Dans l'éditeur de note, sélectionner du texte
• Cliquer sur "Choisir la couleur du texte" ou "Choisir la couleur de surlignage"
• Dans la palette qui s'affiche, choisir une couleur.

HF_couleur_base.jpg


• Dans la palette qui s'affiche, cliquer sur "Plus de couleurs".
• Dans chacun des onglets, vous verrez le code HTML s'afficher et suivre vos réglages.
• Vous pouvez aussi directement taper un code HTML que vous connaissez, sans effacer le #
HF_couleur_nuancier.jpg• Dans l'onglet "Nuancier" choisir une couleur dans la zone principale, et régler sa luminosité dans la zone de droite.
HF_couleur_palette.jpg• Dans l'onglet "Palette" choisir une couleur parmi les 216 "sécuritaires". Il n'y a pas les gris.
HF_couleur_noms.jpg• Dans l'onglet "Nom" choisir une couleur dans la palette. Tentez de mémoriser les noms qui vous intéressent, vous ne les retrouverez pas dans le code HTML de votre note

Il y a la méthode dure :
• Dans l'éditeur de note, basculer en mode HTML
• Répérer le texte à mettre en couleur et se placer devant.
• Écrire le code <span style="color: #DA70D6;"> où #DA70D6 est bien le code HTML de la couleur
• Se placer à la fin du texte à mettre en couleur
• Écrire le code </span>, on obtiendra quelque chose comme
<span style="color: #DA70D6;">Orchidée</span>
• Cliquer sur [Mettre à jour]
• Dans l'éditeur de note, le texte est bien en couleur. On obtiendra quelque chose comme Orchidée

Vous pourriez utiliser la syntaxe HTML standard
<font color="#DA70D6">Orchidée</font>, celle ci serait reconvertie automatiquement par Haut&Fort. C'est normal, les notes de votre blog suivant déjà une "feuille de style" la codification est différente.


Il y a une méthode intermédiaire :
• Dans l'éditeur de note, sélectionner du texte
• Cliquer sur "Choisir la couleur du texte" ou "Choisir la couleur de surlignage"
• Dans la palette qui s'affiche, choisir la couleur sous le noir, c'est ce rouge foncé là.
• Dans l'éditeur de note, basculer en mode HTML
• Répérer le texte mis en couleur, on doit avoir quelque chose comme :
<span style="color: #800000;">Lorem ipsum</span>
• Changer la valeur 800000 pour celle qui vous intéresse
• Cliquer sur [Mettre à jour]

Ce détour vers les codes HTML de couleur me paraissait nécessaire avant d'aborder la vraie question : l'harmonie chromatique.

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

10.11.2008

Pour en finir avec les lecteurs audio personnalisés

Mise à jour du 17 avril : Deezer a changé de stratégie fin 2008, les lecteurs exportables pour un seul titre ne sont plus disponibles. Mais il est toujours possible de partager une liste de lecture. La manœuvre est expliquée en image par Lavande de Blogtuto dans sa note "Mettre de la musique sur mon blog avec Deezer". Pour les lecteurs individuels, il y a cette note : Un lecteur exportable Deezer quand même.

Sans doute serait-il encore possible de prolonger l'exploration des lecteurs audio importés, mais nous nous arrêterons après cette note.

Deezer permet d'exporter un lecteur pour une chanson, nous l'avons assez vu, mais aussi pour un album, une liste de lecture personnelle (playlist) ou même pour une "radio". Le principe reste le même, il faut commencer la lecture, puis cliquer sur [paratager / blogger]. Si c'est l'une de vos listes, vous verrez directement apparaître le bouton [copier] à droite du code du lecteur exportable.

On ne peut personnaliser que la couleur d'un lecteur de "radio", puisque c'est Deezer qui maîtrise le flux.

 

Pour une liste de lecture, puisqu'il s'agit d'une sélection et non d'un flux, la navigation entre les titres reste possible, et on peut proposer un mode de lecture aléatoire, comme on le voit ci-dessous.



Je l'ai déjà dit, Gilles m'a fait découvrir Jiwa, avant de me dire qu'existait aussi Imeem (en anglais). Grâce à lui, j'ai découvert une perle que je me dois de partager. C'est aussi l'occasion de vous dire que la personnalisation du lecteur Jiwa, n'est pas plus compliquée que les autres, même si elle offre la possibilité de choisir la couleur de nombreux éléments. Vous trouverez ci-dessous copie de l'écran de réglage et un lecteur pour un album... Je vous laisse découvrir.

jiwa_widget_multi-titre_3sur4.jpg

Mais pourquoi avoir tant insisté sur les lecteurs musicaux importés ?
Vous avez été patient de tout lire, et je vous en remercie, mais vous avez eu raison de faire cet investissement. Une fois que vous serez à votre aise avec les lecteurs de musique, vous verrez que les lecteurs de vidéo n'ont pas un autre fonctionnement. Youtube et autre Dailymotion ne doivent plus vous faire peur.

La personnalisation des lecteurs permet aussi de toucher du doigt les codes de couleur qu'il peut être utile de comprendre. C'est pourquoi nous y reviendrons bientôt.

11:24 Écrit par Gee Mee dans Musique en ligne, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, musique, deezer, jiwa | |  del.icio.us | | Digg! Digg |  Facebook

05.11.2008

Quelle plateforme de musique en ligne choisir ?

Vous aurez certainement remarqué la présence de quelques références de plateformes de musique en ligne dans la rubrique de liens "Musique"...

Après que vous ayez remarqué la pertinence du titre la rubrique, vous vous demanderez peut-être quel peut être l'intérêt d'en référencer plusieurs sans indiquer de préférence, de classement, ou même seulement d'indicateur. Essayons de combler cette lacune, même s'il ne me revient pas de dsitribuer des bonnes notes. Quoique.

Deezer a fait l'objet d'une courte note, et il en sera de même pour les autres dès que j'en aurai le temps. Pour l'instant, notons que Deezer et Jiwa (que Gilles m'a fait découvrir) sont très semblables. Les fonctionnalités sont globalement les mêmes. Recherche par titre, artiste, album... Coups de cœur, "radios", tentative de construction de "communautés d'audiophiles" (après un intensifs brainstorming le marketing a dit non au concept de "groupes d'écoutants" ), et palmarès divers... Enregistrement de listes de lecture, exportation de lecteur...
Les vrais différences tiennent aux fonds. Celui de Jiwa paraît moins pourvu, mais vous constaterez que Deezer propose souvent de nombreux fichiers différents pour une même version d'une chanson... Rien ne vous empêche de passer de l'un à l'autre.

La véritable distinction est dans la liberté.

Deezer et Jiwa propose de la musique gratuitement, à condition de rester en ligne. Vous devez supporter la publicité qui finance le système, sans trop savoir dans quelle mesure elle profite aux artistes que vous écoutez.

Jamendo et Dogmazic (qui fait suite à musique-libre.org) proposent de la musique "libre", gratuite à l'écoute en ligne, et parfois téléchargeable sans plus de frais. Entendons-nous bien, à mon humble avis, un artiste doit être rémunéré pour ce qu'il propose. Ces deux plateformes proposent toutes les formes de financement possibles, et renvoient les "audiophiles" à leurs responsabilités. La technologie permet de faire connaissance avant tout acte d'achat, mais elle ne dispense pas du devoir de soutenir l'artiste, ou tout du moins de le remercier.
Ce parti pris n'empêche pas de proposer les mêmes fonctionnalités que les autres, en particulier pour Jamendo.

Jamendo et Dogmazic, qui ne sont pas les seules à proposer de la musique "libre", vous permettront de découvrir des artistes réellement... différents. On peut comprendre qu'ils ne soient pas tous dans les circuits commerciaux traditionnels.

00:01 Écrit par Gee Mee dans Musique en ligne, Personnaliser son blog | Lien permanent | Commentaires (4) | Tags : musique, deezer, jiwa, jamendo, dogmazic | |  del.icio.us | | Digg! Digg |  Facebook