Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2010/12/12

Une galerie pour afficher des images en accordéon

L'affichage en accordéon se réalise simplement avec quelques lignes de CSS. La méthode est décrite dans l'article de Stu Nicholls : Sliding Photograph Galleries.

J'avais utilisé cet exemple pour utiliser une feuille de style pour un seul message.

Un Gadget Google permet d'insérer une galerie horizontale, avec les photos affichées en accordéon.

URL du gadget

Galerie horizontalegadget-slide-horizontal.xml



Insertion du gadget

Le gadget peut être inséré dans le html d'un message de Blogger ou dans un gadget HTML / Javascript. Pour obtenir le code du tag iframe ou la source du script, il faut utiliser la méthode décrite sur le Blog d'Aide pour Blogger.

Pour le gadget, les codes sont donnés sur la page galerie horizontale.

Le tag iframe

A saisir sans espace ni retour à la ligne :


<iframe style="width: 540px; height: 260px;"
src="
http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml

&up_Pic1=URL image 1 (taille 320 x 240)
&up_Title1=Titre image 1
&up_Pic2=URL image 2
&up_Title2=Titre image 2
&up_Pic3=URL image 3
&up_Title3=Titre image 3
&up_Pic4=URL image 4
&up_Title4=Titre image 4
&up_Pic5=URL image 5
&up_Title5=Titre image 5
&up_Pic6=URL image 6
&up_Title6=Titre image 6
&up_Pic7=URL image 7
&up_Title7=Titre image 7
&up_BackPic=URL image de fond (taille 488 x 240)

&up_BorderCol=%23rrggbb couleur bordure
&up_BackCol=%23rrggbb couleur fond
"
allowTransparency="true"
frameborder="0"
scrolling="no">
Gadget Google - Galerie horizontale de photos affichées en accordéon</iframe>




Un exemple

J utilise le code suivant pour afficher les images des Clos Domaines et Châteaux


<iframe style="width: 540px; height: 260px;"
src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml&up_Pic1=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-maison-blanche.jpg&up_Title1=Ch%C3%A2teau%20Maison%20Blanche&up_Pic2=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-manoir.jpg&up_Title2=Domaine%20du%20Manoir&up_Pic3=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-vufflens-c-d-c.jpg&up_Title3=Ch%C3%A2teau%20de%20Vufflens&up_Pic4=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-allaman.jpg&up_Title4=Ch%C3%A2teau%20d'Allaman&up_Pic5=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-chatagnereaz.jpg&up_Title5=Ch%C3%A2teau%20de%20Ch%C3%A2tagner%C3%A9az&up_Pic6=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-martheray.jpg&up_Title6=Domaine%20du%20Martheray&up_Pic7=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-autecour.jpg&up_Title7=Domaine%20de%20Autecour&up_BackPic=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fback-slide-brown.jpg&p_BorderCol=%239e5205&up_BackCol=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Galerie horizontale de photos affichées en accordéon</iframe>






Plus d'informations

Ses photos Flickr sur un mur d'images

Les vignettes d'un album Picasa sur son Blog

Un style pour un seul message de Blogger

Insérer un gadget dans le corps du message

Crédit photos

Association Clos Domaines et Châteaux

2010/10/19

Colorer le Bouton Partager de Blogger

Modifier le Bouton Partager

Blogger utilise la technique du Sprite CSS, pour afficher 5 liens sur 1 image et modifier le fond au survol de la souris.
Le coeur de la méthode consiste à définir la grande image comme image de fond, et à se positionner sur celle-ci à des endroits différents. Le positionnement change grâce à la clause CSS background-position.

L image de départ utilisée par Blogger



Elle comporte 4 rangées de 5 icônes (5 x 22 x 22 pixels). Le bouton standard utilise la première rangée pour les liens, et affiche la dernière ligne (transparente) au survol par la souris.

Le bouton Partager standard





Le bouton Partager en couleur

Nous allons afficher la troisième rangée de l'image de base. Au survol (pseudo-classe a:hover), nous allons afficher les icônes de la deuxième rangée (haut du bouton clair).



Le CSS à placer dans le Blog, redéfinit la clause background-position. -44px correspond à la rangée 3 (2 x 22) et -22px à la rangée 2 (1 x 22). La mention !important indique que cette clause CSS prime sur toute autre.


/* bouton de partage en couleur */

a.sb-email {background-position: 0px -44px !important;}
a.sb-blog {background-position: -21px -44px !important;}
a.sb-twitter {background-position: -42px -44px !important;}
a.sb-facebook {background-position: -63px -44px !important;}
a.sb-buzz {background-position: -84px -44px !important; width: 24px;}

a.sb-email:hover {background-position: 0px -22px !important;}
a.sb-blog:hover {background-position: -21px -22px !important;}
a.sb-twitter:hover {background-position: -42px -22px !important;}
a.sb-facebook:hover {background-position: -63px -22px !important;}
a.sb-buzz:hover {background-position: -84px -22px !important;}



Le bouton Partager transparent

L'image de base comporte une quatrième rangée transparente. Nous allons l'afficher pour les liens, et au survol, nous ferons apparaître les icônes de la troisième rangée (bas du bouton clair).





Le CSS à placer dans le Blog, redéfinit la clause background-position. -66px correspond à la rangée 4 (3 x 22) et -44px à la rangée 3 (2 x 22). Il faut ajouter width: 22px pour afficher le bord de l'icône au survol.


/* bouton de partage transparent */

a.sb-email {background-position: 0px -66px !important;}
a.sb-blog {background-position: -21px -66px !important;}
a.sb-twitter {background-position: -42px -66px !important;}
a.sb-facebook {background-position: -63px -66px !important;}
a.sb-buzz {background-position: -84px -66px !important; width: 22px;}

a.sb-email:hover {background-position: 0px -44px !important; width: 22px;}
a.sb-blog:hover {background-position: -21px -44px !important; width: 22px;}
a.sb-twitter:hover {background-position: -42px -44px !important; width: 22px;}
a.sb-facebook:hover {background-position: -63px -44px !important; width: 22px;}
a.sb-buzz:hover {background-position: -84px -44px !important; width: 22px;}



Correction du style

Dans les 2 cas (bouton en couleur et bouton transparent), ajouter ceci au style du Blog, pour éviter un décalage vers le bas du dernier bouton de la rangée, au survol de la souris :


.post-share-buttons
{
width: 112px !important;
}



Adaptation du style pour les modèles personnalisés

Depuis mars 2011, les modèles personnalisés doivent avoir cette correction pour afficher les boutons partagés : 


.post-share-buttons a
{
position: relative;
display: inline-block;
}



Nouveau bouton de partage (25 mars 2011)

Depuis le 25 mars 2011, Blogger a introduit un nouveau bouton de partage dans la feuille de style associée au Blog.

Version 2 : bouton de partage


Cette image de 120 par 60 pixels comprend le partage sur Orkut. Les petites icônes sont réduites en largeur par rapport à la version 1 (20 x 30 pixels au lieu de 22 x 22 pixels).

Important : Les modifications ci-dessus ne s'appliquent pas à ce nouveau bouton de partage !


En savoir plus

Sprite CSS pour afficher jusqu'à 50 Profils de Réseaux sociaux.

Le bouton de Partage de Blogger.

2010/10/17

Profils des Réseaux Sociaux avec Sprite CSS

Profils des Réseaux Sociaux avec Sprite CSS

Sprite CSS est une technique permettant d'utiliser une seule image pour afficher plusieurs icones ou effets graphiques


Sprite CSS : Afficher vos Profils dans 50 Réseaux Sociaux

La méthode décrite ici est appelée Sprite CSS, par analogie avec la méthode utilisée par les premiers jeux vidéos (Sprite en anglais : le lutin, le farfadet). Ces jeux affichaient un personnage animé à partir de pixels pris sur une seule image, par souci d'économie de ressources.

La base de cet article est un Plugin pour Wordpress, Cute Profiles : Free WordPress Plugin To Show Vertically Floating Social Profiles.

Le CSS background-position

La clause CSS background-image permet de définir l'image de fonds d'un bloc. La position de cette image est fixée par background-position. Nous allons utiliser 2 coordonnées, l'axe horizontal et l'axe vertical en pixels pour afficher une partie de l'image de fonds.
Partons d'une image de 120 x 90 pixels, et divisons cette image en 4 cadrans (haut / bas et gauche / droite).

Image de fonds - 120 x 90


Un lien avec une image

En utilisant la clause background-image nous pouvons créer un lien sur une image. Le tag a (ancre) doit normalement contenir le texte du lien. Nous supprimons l'affichage du lien par la clause CSS display: none;


div.test1
{
border: 0px;
margin: 0px;
padding: 0px;
}

div.test1 a
{
display: inline-block;
width: 60px;
height: 45px;
padding: 0px;
margin: 0px 0px 4px;

background-image: url(http://www.liens-du-vin.ch/ascreen.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;

}

div.test1 a.haut_gauche
{
background-position: 0px 0px; /* CADRAN HAUT GAUCHE */
}

div.test1 a.haut_droite
{
background-position: -60px 0px; /* CADRAN HAUT DROITE */
}

div.test1 a.bas_gauche
{
background-position: 0px -45px; /* CADRAN BAS GAUCHE */
}

div.test1 a.bas_droite
{
background-position: -60px -45px; /* CADRAN BAS DROITE */
}

div.test1 a span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}



Le code HTML, place les liens sur les 4 cadrans, dans un bloc div :


<div class="test1">

<a class="haut_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Gauche"><span>Liens Du Vin<</a>
<a class="haut_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Droite"><span>Liens Du Vin</span></a>
<a class="bas_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Gauche"><span>Liens Du Vin</span></a>
<a class="bas_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Droite"><span>Liens Du Vin</span></a>

</div>



Ce qui donne le résultat suivant :


Haut Gauche (0 0)Haut Droite (-60 0)
Liens Du VinLiens Du Vin
Bas Gauche (0 -45)Bas Droite (-60 -45)
Liens Du VinLiens Du Vin



Changer le fonds au survol

Nous allons utiliser une peudo-classe CSS a:hover pour modifier le fonds du lien au survol de celui-ci.
Affichons le cadran Haut Gauche sur le lien, et affichons le cadran Bas Droite lorsque le curseur survole le lien. Il suffit de définir la clause CSS hover (à placer après la clause a:link) :


div.test1 a.haut_gauche:hover
{
background-position: -60px -45px;
}



En pratique, l'image change pour le cadran Bas Droite au survol par la souris :



La Mise en oeuvre avec les icônes de Profil

L'image *.png des Profils des Réseaux Sociaux (50 icônes) ainsi que la feuille de style complète pour toutes les icônes peuvent être obtenues à l'adresse du Plugin Wordpress citée plus haut.

L'image de base comprend 50 icônes de 32 pixels, sur 2 rangées. La première rangée est l'image du lien, la deuxième comporte l'image à afficher au survol du lien.

Profils sur 50 Réseaux sociaux


Les coordonnées de background-position pour le lien

Par exemple, nous voulons afficher comme lien, l'icône no 3 de la première rangée (facebook). Le CSS du lien sera :


div.profil_sprite a.facebook
{
background-position: -64px 0px;
}



En généralisant, le lien pour l'icône n, -32 * (n - 1). Par exemple, l'icône YouTube (no 9, donc -32 * (9-1) = -256) :



div.profil_sprite a.youtube
{
background-position: -256px 0px; /* ICONE 9 : -32 * (9 - 1) */
}



Les coordonnées de background-position pour le survol de la souris

Nous devons changer la coordonnée y de background-position, en nous déplaçant de 32px vers le bas. Pour Facebook (icône no3) :


div.profil_sprite a.profil_facebook:hover
{
background-position: -64px -32px;
}



Et pour YouTube (icône no 9) :


div.profil_sprite a.youtube:hover
{
background-position: -256px -32px;
}



Un exemple complet avec mes profils

Le CSS :


div.profil_sprite /* LE BLOC DIV CONTENANT LES LIENS */
{
text-align: center;
border: 0px;
margin: 0px;
padding: 0px;
}

div.profil_sprite a /* LE LIEN DANS LE BLOC DIV */
{
width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}

/* LES ICONES QUI DOIVENT FIGURER */

div.profil_sprite a.profil_twitter
{
background-position: -32px 0px; /* ICONE NO 2 */
}
div.profil_sprite a.profil_twitter:hover
{
background-position: -32px -32px; /* ICONE NO 2 */
}
...
...
div.profil_sprite a.profil_google
{
background-position: -160px 0px; /* ICONE no 6 */
}
div.profil_sprite a.profil_google:hover
{
background-position: -160px -32px; /* ICONE no 6 */
}

.profil_sprite span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}



La barre horizontale de mes Profils :



Le html de l'exemple :


<div class="profil_sprite">
<a href="URL profil Google" title="Profil Google" class="profil_google"><span>Profil Google</span></a>
...
</div>



Afficher la barre des profils verticalement

Il suffit de définir les liens comme étant display: block;


div.profil_sprite_v a
{

display: block;

width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}





Plus d'informations

Une introduction aux Sprite CSS, par alsacréations.

Jouer avec l'opacité et la transparence pour ses images.

Utiliser les filtres d'opacité pour ses images.

Colorer le Bouton Partager de Blogger.

2010/07/20

Ombrer ses Boîtes avec box-shadow

Ombrer ses Boîtes avec box-shadow

Les nouveaux modèles de Blogger utilisent la propriété CSS3 box-shadow. Celle-ci permet de créer des effets d'ombrage et de dégradé pour les boîtes html


Créer une ombre portée pour ses boîtes avec box-shadow

Les nouveaux modèles de Blogger utilisent la propriété CSS3 box-shadow. Celle-ci permet de créer des effets d'ombrage et de dégradé pour les boîtes html.

L'élément de style box-shadow

La propriété CSS box-shadow fait partie de la norme CSS3. Elle permet d'ajouter une ombre portée sur un élément HTML (span, div, img, ...).

La propriété s'applique sur la boîte de l'élément et non sur sa bordure. Blogger utilise cette propriété avec les nouveaux modèles.

En regardant la source du modèle Filigrane (Watermark) de Josh Peterson nous trouvons ce code CSS :


.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img
{
padding: 5px;
background-color: #fff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}



La propriété box-shadow n'est pas encore implémentée par l'ensemble des navigateurs (juillet 2010). Il faut donc utiliser un préfixe CSS pour qu'un navigateur spécifique la reconnaisse.


-moz-box-shadow : Mozilla (FireFox)
-webkit-box-shadow : Webkit (Safari et Chrome)
-goog-ms-box-shadow : Chrome sous Internet Explorer (?)



Internet Explorer (IE), version 8 incluse, ne reconnaît pas la propriété box-shadow. Il existe un filtre propriétaire Microsoft permettant d'obtenir un résultat similaire. Il s'agit du filtre Shadow dont nous verrons l'utilisation plus loin.


La syntaxe de box-shadow


box-shadow: décalage-horizontal décalage-vertical dégradé taille couleur inset;

décalage-horizontal : obligatoire
décalage-vertical : obligatoire
dégradé : facultatif,par défaut 0. Une valeur positive augmente le flou de l'ombre. On parle de rayon de flou pour cette propriété (blur)
taille : facultatif. Par défaut 0, ce qui donne une ombre à la même taille que l'élément ombré. Une valeur positive augmente l'ombre, une valeur négative la diminue
couleur : facultatif
inset : facultatif. Si inset est mentionné il s'applique à toutes les couleurs utilisées comme fond




La couleur

La couleur peut-être indiquée selon un code couleur #rrggbb ou en notation rgb(r,g,b). Nouveauté de CSS3, la notation rgba (a pour filtre alpha) permet d'indiquer un degré d'opacité entre 0 et 1. L'opacité (la transparence d'une couleur) est définie par la propriété CSS opacity. Si opacity s'applique à un élément html et à tous ses descendants, la notation rgba ne s'applique elle qu'à une seule propriété de l'élément sélectionné.


Principe de la notation rgba

La notation rgba est identique à la notation rgb(r,g,b) mais comporte un dernier paramètre qui indique l'opacité de la couleur. L'opacité se défini par un nombre compris entre 0 et 1. A titre d'exemple, appliquons un filtre orange (#ff4500 rgb(255,69,0)), à cette photo en noir et blanc :



Nous voulons une opacité de 20% (autrement dit 20% d'opacité correspond à 80% de transparence).

Opacité - Orange 100% et 20%


Le résultat obtenu sur la photo d'origine :

Filtre sépia


Le CSS utilisé pour le filtre


background-color: rgba(255,69,0,.2);

/* fond orangé : #ff4500 rgb(255,69,0) */
/* opacité : 20% (.2) */



Le filtre spécifique à Internet Explorer

La notation rgba n'est pas reconnue par IE. Il faut donc utiliser un filtre alpha spécifique, suivi de la couleur de fond en notation rgb. Ces 2 éléments sont à placer avant la définition rgba :


filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20); /* filtre IE */
background-color: rgb(255,69,0); /* couleur de fond pour IE; FF et Chrome vont appliquer rgba */

background-color: rgba(255,69,0,.2);



Ce qui donne le code complet suivant :


<div style="background-image: url(http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg); width: 240px; height: 207px; margin: auto;">

<div style="width: 240px; height: 207px; filter:alpha(opacity=20); background-color: rgb(255,69,0); background-color: rgba(255,69,0,.2); ">
</div>

</div>



Une ombre portée légérement floue

Créons une ombre portée décalée de 10px, avec un flou de 3px. L'ombre possède la même taille que l'élément ombré. Le CSS utilisé :


box-shadow: 10px 10px 3px #044eff; /* ombre de couleur bleu #044eff = rgb(4,78,255) */
-moz-box-shadow: 10px 10px 3px rgba(4,78,255, .8); /* opacité 80% */
-webkit-box-shadow: 10px 10px 3px rgba(4,78,255, .8);
-goog-ms-box-shadow: 10px 10px 3px rgba(4,78,255, .8);



ce qui donne l'image suivante :

Ombre portée - Château de Vufflens


Note : L'affichage de cette page avec Internet Explorer ou FireFox fait apparaître une légère différence.


Simuler l'ombre portée sous IE

IE ne supportant pas box-shadow, il faut utiliser un filtre alpha. Le CSS pour Internet Explorer :


filter:progid:DXImageTransform.Microsoft.Shadow(color='#044eff', Direction=120, Strength=10);




Un effet d'halo

Créons une ombre portée centrée sur l'élément ombré. Donnons à l'ombre un rayon de flou important (12px) et agrandissons l'ombre de 5px. Le CSS utilisé :




box-shadow: 0 0 12px 5px #c00; /* pas de décalage de l ombre */
-moz-box-shadow: 0 0 12px 5px #c00; /* rayon de flou : 12px */
-webkit-box-shadow: 0 0 12px 5px #c00; /* l'ombre dépasse de 5px de l'objet ombré */
-goog-ms-box-shadow: 0 0 12px 5px #c00;



Le résultat, qu'il faut afficher sous FF et IE pour visualiser les différences :


Effet d'halo - Château de Vufflens



L'effet d'halo sous Internet Explorer

L'image ci-dessus ne possède pas d'halo sous Internet Explorer. Pour l'afficher, la solution retenue est la même que celle utilisé dans Blogger pour les nouveaux modèles. Un fond de couleur est défini pour l'élément, et une valeur de padding positive fait apparaître un cadre coloré.

Cadre coloré - Château de Vufflens


Le CSS, compatible IE et FF :


background-color: #c00;
padding: 3px;



On peut aussi utiliser la technique du cadre semi-transparent. Mais, contrairement à l'emploi de box-shadow, le cadre semi-transparent empiète sur l'image.

En utilisant un Gadget Google, cette technique permet de rapidement insérer une photo avec un cadre semi-transparent :





L'utilisation de box-shadow dans le modèle Filigrane

Le code utilisé par Blogger pour le modèle Filigrane (Watermark)est le suivant 


border: solid 1px #c00;
padding: 5px;
background-color: #fff;
-moz-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);



Ce code produit une légère ombre portée, dont le rayon de flou est de 5px. Le décalage est de 1px. L'opacité de 50%. Le padding de 5px crée un cadre blanc (background-color: #fff;) autour de l'image. Pour afficher une ombre portée avec Internet Explorer il faut ajouter un filtre alpha comme ceci 


filter:progid:DXImageTransform.Microsoft.Shadow(color='#cc0000', Direction=120, Strength=3);



L'image obtenue :

Ombre portée - modèle Filigrane



En savoir plus

Un Gadget Google pour afficher une photo avec un cadre semi-transparent

Opacité et transparence, animer ses images

Opacité et transparence, appliquer un filtre

Encadrer ses photos avec du CSS

Des cadres pour ses photos avec du CSS en ligne sous Google Sites

Des cadres pour ses photos sur Blogger


© Photos : Diapo.ch, Clos Domaines et Châteaux et Les Liens du Vin

2010/03/07

Un code QR sur ses pages - Créer des liens pour son téléphone mobile

Un code QR sur ses pages - Créer des liens pour son téléphone mobile

Le QR-Code (Quick Response) est un code-barres à 2 dimensions permettant d'accéder à un contenu numérique sur son mobile, simplement en le photographiant. Pour que cela fonctionne, il faut que le téléphone mobile soit équipé de l'application qui scanne le code.

Le QR-Code (Quick Response) est un code-barres à 2 dimensions permettant d'accéder à un contenu numérique sur son mobile, simplement en le photographiant. Pour que cela fonctionne, il faut que le téléphone mobile soit équipé de l'application qui scanne le code. Le tableau suivant indique les lecteurs à télécharger selon le type de téléphone mobile :

TéléphoneLecteur
iPhoneI-nigma
SmartphoneQuickmark
AutresKaywa


Une fois le logiciel téléchargé et installé, on peut photographier le QR-Code. Celui-ci est traduit s'il s'agit d'un texte, ou ouvre la page Internet s'il s'agit d'une adresse URL.

Utiliser Google Chart API

Google Chart API met à disposition les outils nécessaires à la création d'objets graphiques.
Le principe de fonctionnement de ces outils est de créer une URL avec les paramètres du graphique. Cette adresse génère une image qu'il suffit d'afficher sur le Blog. Prenons l'exemple d'un graphique en gâteau :

Encépagement : vins rouges 2008


source : Site Salvagnin, Encépagement Canton de Vaud, 2008


L'url du graphique


http://chart.apis.google.com/chart?
cht=p3
&amp;chs=520x208
&amp;chd=t:43.0,37.0,10.0,8.0,2.0
&amp;chl=43%%7C37%%7C10%%7C8%%7C2%
&amp;chdl=Pinot+Noir%7CGamay%7CGamaret%7CGaranoir%7CAutres
&amp;chtt=Enc%C3%A9pagement+:+Vins+rouges+2008
&amp;chco=4f81bd,c0504d,9bbb59,8064a2,4bacc6



Les paramètres


cht=p3 : Le type de graphique (Pie Chart - 3D)
chs=520x208 : la taille du graphique
chd=t:43.0,37.0,10.0,8.0,2.0 : les valeurs à représenter (43, 37, 10, 8 et 2)
chl=43%%7C37%%7C10%%7C8%%7C2% : les étiquettes du graphique séparées par le caractère pipe (%7C)
chdl=Pinot+Noir%7CGamay%7CGamaret%7CGaranoir%7CAutres : les légendes séparées par le caractère pipe (%7C)
chtt=Enc%C3%A9pagement+:+Vins+rouges+2008 : la légende du graphique (URL encodée)
chco=4f81bd,c0504d,9bbb59,8064a2,4bacc6 : les couleurs du graphique (selon le code rrggbb)



Le QR Code avec Google Chart API

Pour créer un QR-Code il suffit d'utiliser un graphique de type qr


Les paramètres du QR-Code


cht=qr : le type du graphique
chs=150x150 : la taille du QR-Code
chl=le contenu du QR-Code
choe=UTF-8 : l'encodage utilisé
chld=Q : niveau de la correction d'erreurs (Q permet de traduire un QR-Code dont 25% de la surface est illisible)



Un QR-Code avec du texte

Le QR-Code suivant encode la description du Blog : Viti-Vino. Le Blog de Prac - Les Outils Google. Pour personnaliser son blog. Un complément de l'aide en ligne. Les trucs et astuces pour Blogger. Les exemples du Forum d'Aide pour Blogger

QR code - Texte Blog de Prac



Le code html du QR-Code avec du texte


<img src="http://chart.apis.google.com/chart?chs=150x150&amp;cht=qr&amp;chl=Viti-Vino. Le Blog de Prac - Les Outils Google. Pour personnaliser son blog. Un complément de l'aide en ligne. Les trucs et astuces pour Blogger. Les exemples du Forum d'Aide pour Blogger&amp;choe=UTF-8&amp;chld=Q" style="border: 1px solid #000; padding: 5px;" alt="QR code - Texte Blog de Prac" title="QR code - Texte Blog de Prac" />




Un QR-Code avec une adresse URL

Le QR-Code suivant encode l'adresse Internet du gadget Etiquettes de Vin

QR code - Wine label



Le code html du QR-Code avec une adresse URL



<img src="http://chart.apis.google.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://www.liens-du-vin.ch/_wine-pictures/wine-label-iphone.htm&amp;choe=UTF-8&amp;chld=Q" style="border: 1px solid #000; padding: 5px;" alt="QR code - Wine label" title="QR code - Wine label"/>



Un QR Code avec Google URL Shortener

Depuis le 1er octobre 2010, le service de raccourcissement d'URL de Google, goo.gl (gl est l'extension du Groenland) permet de créer une URL courte, de la forme http://goo.gl/vBqG.

Une fois connecté sous son compte Google, le service information donne accès aux statistiques d'utilisation de l'URL abrégée, ainsi qu'au code QR de l'URL raccourcie.

En pratique, Google URL Shortener permet de raccourcir l'URL suivante : 


maps.google.ch/maps/ms?hl=fr
&ie=UTF8
&t=h
&msa=0
&msid=102376698569738400439.00049087972194c5318f2
&ll=46.325831,6.962242&
spn=0.082979,0.145912
&z=12
&output=embed




Nous obtenons l'abrégé :


goo.gl/0hvD



la page d'information de cet abrégé, sous Google Shortener, affiche un QR Code, disponible à cette adresse :


goo.gl/0hvD.qr



C'est l'image du QR code qu'il suffit d'afficher à l'aide d'un tag img :


<img src="http://goo.gl/0hvD.qr" style="border: 1px solid #000; padding: 5px;" alt="QR code - Google Maps - Badouxthèque" title="QR code - Google Maps - Badouxthèque" />



QR code - Google Maps - Badouxthèque


Plus d'informations

Le Code QR sur Wikipédia

Les outils graphiques de Google

Raccourcir ses URL avec Google URL Shortener


2010/01/16

Fichiers joints et Podcasting avec Blogger

Fichers joints et Podcasting avec Blogger

Le podcasting est un moyen de diffusion de fichiers (audio, vidéo ou autres) sur Internet appelés podcasts. En s'abonnant aux flux RSS ou Atom, le podcasting permet à l'internaute l'écoute ou le téléchargement automatique des documents joints. Blogger permet le podcasting de n'importe quel fichier, à la condition que celui-ci soit hébergé sur Internet.

Activer le Podcasting

Sur Blogger (ancienne interface), il faut Afficher les Champs Liens, par Paramètres / Général : 

Afficher les Champs Liens

Lors de la saisie du message, il faut cliquer sur Afficher les liens vers les pièces jointes pour définir les pièces jointes au message : 


Afficher les liens vers les pièces jointes

Avec la nouvelle interface de Blogger (2012), il faut mettre Oui pourLiens vers des contenus RSS, par Paramètres / Autre : 

Liens vers des contenus RSS

Lors de la saisie du message, il faut cliquer sur Lien vers une pièce jointe pour définir les pièces jointes au message : 


Lien vers une pièce jointe

La fenêtre des pièces jointes comprend l'URL du document et le type MIME. Blogger détecte automatiquement le type MIME des fichiers audio et video.


Le flux RSS

Blogger génère un Flux RSS pour le Blog à l'adresse suivante : 


http://NOMDUBLOG.blogspot.com/feeds/posts/default?alt=rss



Pour respecter la norme RSS, le flux RSS ne comprend que le premier fichier incorporé : 

Flux RSS avec fichier incorporé

Par contre, le flux comprend bien l'ensemble des fichiers joints, incorporés par la balise <enclosure>. Ainsi cet article crée les balises suivantes : 


<enclosure
type="audio/mpeg"
url="http://sites.google.com/site/annuairevin/files/bach_243_gloria_patri.mp3"
length="0" />

<enclosure
type="application/pdf"
url="http://www.liens-du-vin.ch/_files/Plaquette_07_2008_F.pdf"
length="0" />

<enclosure
type="image/tiff"
url="http://www.liens-du-vin.ch/_files/terravin.tif"
length="0" />

<enclosure
type="application/mspowerpoint"
url="http://www.liens-du-vin.ch/_files/vins-du-valais-chine.ppt"
length="0" />



Si le Flux est lu par Google Reader, l'ensemble des fichiers joints figure. Et, cerise sur le gâteau, le Reader permet l'écoute directe des fichiers mp3, grâce à son lecteur incorporé : 


Google Reader - Flux avec fichiers joints


Fichiers joints dans le message

Après avoir inséré des fichiers joints, on constate que ceux-ci ne figurent pas dans le message. Blogger ne traite pas dans les variables du Blog, les balises enclosure. Si cette balise n'est pas documentée, il est néanmoins possible de l'utiliser dans le HTML du Blog :


data:post.enclosures : Toutes les balises enclosure du message

data:enclosure.mimeType : Le type MIME du fichier joint

data:enclosure.url : l'URL du fichier joint




Afficher une pièce jointe

Prenons l'exemple d'un fichier *.mp3 (audio) à afficher apres le message. Dans le HTML du Blog (Paramètres / Mise en Page / Modifier HTML - Cocher développer des modèles de Gadget), le message est indiqué par : 


...
<div class='post-body entry-content'>
<data:post.body/>
...



Plaçons le code suivant après <data:post.body/>


<!-- DEBUT ENCLOSURE -->

<br/><i><b>Fichier(s) joint(s) : </b></i>

<b:loop values='data:post.enclosures' var='enclosure'>

<b:if cond='data:enclosure.mimeType == &quot;audio/mpeg&quot;'>

<a expr:href='data:enclosure.url' expr:title='&quot;Ecouter le son &quot; + data:enclosure.url' rel='enclosure' target='_blank'> Ecouter le son <img src='http://URL/icone-musique.gif' style='display:inline; border: 0 none;'/></a>

</b:if>

<!-- AUTRE TYPE MIME -->

</b:loop>

<!-- FIN ENCLOSURE -->




Visualiser les fichiers joints

Nous allons utiliser le lecteur de documents de Google Documents.

Celui-ci permet de visualiser les fichiers *.pdf, *.ppt et *.tif.
Les types Mime sont respectivement application/pdf, image/tiff et application/mspowerpoint.

Le lecteur de document est appelé avec l'URL suivante : 


http://docs.google.com/viewer?url=URL du fichier



Le code à ajouter à la place du commentaire (<!-- AUTRE TYPE MIME -->) ci-dessus est le suivant : 


<b:if cond='data:enclosure.mimeType == &quot;application/pdf&quot;'>
<a expr:href='data:enclosure.url' expr:title='&quot;Fichier PDF &quot; + data:enclosure.url' rel='enclosure' target='_blank'> Fichier PDF <img src='http://URL/icone-pdf.png' style='display:inline; border: 0 none;'/></a>
</b:if>

<b:if cond='data:enclosure.mimeType == &quot;image/tiff&quot;'>
<a expr:href='"http://docs.google.com/viewer?url=" + data:enclosure.url' expr:title='&quot;Voir l&amp;#39;image tif &quot; + data:enclosure.url' rel='enclosure' target='_blank'> Voir l'image tif <img src='http://URL/icone-document.png' style='display:inline; border: 0 none;'/></a>
</b:if>

<b:if cond='data:enclosure.mimeType == &quot;application/mspowerpoint&quot;'>
<a expr:href='"http://docs.google.com/viewer?url=" + data:enclosure.url' expr:title='&quot;Voir présentation &quot; + data:enclosure.url' rel='enclosure' target='_blank'> Voir Présentation Power-Point <img src='http://URL/icone-document.png' style='display:inline; border: 0 none;'/></a>
</b:if>



Note : Attention à la syntaxe pour le titre du lien, afin de saisir un apostrophe : 


Voir l'image tif devient Voir l&amp;#39;image tif



Conclusion

Blogger se transforme facilement en outil de Podcasting. Il est possible d'ajouter des fichiers joints, comme des documents PDF ou des Présentations Power-Point et de les afficher avec le lecteur de documents de Google Documents.


Plus d'informations

Un modèle de Blog pour l'insertion de fichiers multimedia. L'approche de Soraya Lamprechts. Créer des widgets spécifiques pour chaque type de fichier multimedia.

Jouer un fichier *.mp3 sur son Blog

Des lecteurs multi-média pour son Site ou son Blog (anglais)

Des Gadgets pour son Blog

Le lecteur de documents de Google Documents

Afficher une feuille Excel sur son Blog - Google Viewer


Insérer un aperçu de Google Livres sur son Blog


Fichier(s) joint(s) :   Ecouter le son   Fichier PDF   Voir l'image tif   Voir Présentation Power-Point 


Rechercher sur le Blog de Prac avec Google CSE