- Blog d Aide pour Blogger

samedi 28 avril 2012

Un diaporama avec les derniers Pins de Pinterest

Pinterest est un réseau social qui permet d'épingler (Pins) des photos, classées sur plusieurs tableaux (Boards).

Le Réseau publie un Flux Media RSS des images d'un utilisateur ou des images d'un seul tableau.

Inserer un Gadget Blogger sur son Blog

La méthode est décrite sur le Blog de Prac. Le Gadget Blogger ne peut pas être inséré dans le corps d'un message.

Inserer un Gadget Google dans le corps du message

Un Gadget Google peut être placé dans le html d'un message ou dans un gadget HTML / Javascript. Le Gadget est inséré par un tag iframe. Insérons le Gadget avec titre et légendes des images.

Le code utilisé, à coller sans blanc ni retour à la ligne :

Plus d'informations

Le site de Pinterest

Les trucs de Tomate Joyeuse sur Pinterest

Le Gadget Blogger

Le Gadget Google

Suivre les Pins de son Site ou de son Blog

mercredi 2 mars 2011

Conserver vos vignettes !

Depuis début mars 2011, on observe dans le monde Blogger que les vignettes ne s'affichent plus, ou partiellement, dans les gadgets :

Messages les plus consultés, avec image miniature (vignette)
Les derniers messages consultés avec vignette
Liste des Blogs (Blogroll), avec vignette de l'élément le plus récent

Un peu d'histoire

En septembre 2008, Blogger a introduit une vignette dans le Flux Media RSS des Blogs. Selon la spécification Media RSS, cela consiste à créer un élément xml media:thumbnail dans le Flux Atom et RSS du Blog. Par exemple :

<media:thumbnail
xmlns:media='http://search.yahoo.com/mrss/'
url='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t5XNEplCK1bdKqFRuRwSergbFV_6LsYLEupc_foOkyifOrcZYeV2c-WDbLjkGVYwPNHS_78Z_uAR2ozPzyxta7qN43ZutbwkdxrU-TerNPfq0MppCnVFfzn7z7qttz_IZa3MjkOPdJ8/s72-c/last-post-slideshow-screen.jpg' height='72' width='72'/>

Cet élément définit une image de 72 x 72 pixels, créée automatiquement à partir de la première image du message, et hébergée par Picasa Albums Web.

En janvier 2011, l'accès à Picasa se fait par une connexion sécurisée. Cela entraîne, début mars 2011, une modification des adresses (URL) des images issues de Picasa.

Une image placée sur le Blog à partir du disque dur

L'image est hébergée dans l'album Picasa Albums Web associé automatiquement au Blog.

Domaine du Martheray - Image depuis disque dur

L'adresse de l'image :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtK2H-EwdLMRLYBt0G0ltQlUK4lu2xVkWSbasd9iCVaJ7EbIuhx197N6rbl9fKzFZXO9WynKdIV6u6sjUWqfrqkabjyXg2TgWybVwL3GgkF14G6gNkuH1Lymn9NwOkJShhg8hteDwdV8/s400/02_Martheray.jpg

L'adresse de la vignette (thumbnail) dans le Flux du Blog d'Aide pour Blogger :

Une image placée sur le Blog à partir d'un album de Picasa Albums Web

L'insertion de l'image se fait à partir de l'onglet rédiger, en utilisant le Nouvel Editeur de Blogger. Celui-ci permet d'ouvrir un album Picasa et de sélectionner les images à insérer.

L'adresse de l'image :

https://lh3.googleusercontent.com/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg

C'est une adresse avec une connexion sécurisée, sur le Domaine googleusercontent.com.

Blogger ne va pas générer de vignette (situation mars 2011) dans le Flux Atom et RSS du Blog !

Une astuce pour permettre à Blogger de créer la vignette

Remplacer :

https://lh3.googleusercontent.com/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg

par cette adresse :

http://lh3.ggpht.com/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg

Blogger va alors générer la vignette suivante :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeEYVfWgXGmgN_jQJTsAQi1NhJ3-BZUPbHQ2Ilanr5-R0EPmJgxxsdiR5OcVhWptEQOlA7JMaNT08Z5LxcXqF6NbigMSwnZzfzb9l7Tn7GFJ5KPiIT3GuZbVy6oJ2T18ejqCoMQI9YW0/s72-c/02_Martheray.jpg

Domaine du Martheray - Vignette pour Media RSS

Conclusion

Vérifier l'adresse de la première image d'un message (issue d'un album Picasa), et remplacer https://...googleusercontent.com... par http://...ggpht.com.... Blogger va créer le Flux avec une vignette qui sera affichée par les abonnés à votre Flux.

Gadget de remplacement

Le Gadget Blogger Diaporama des derniers messages d'un Blog n'est pas affecté par ces problèmes. Il n'utilise pas la vignette contenue dans le Flux du Blog.

Plus d'informations

Le Flux Media RSS

© Photos

Association Clos Domaines et Châteaux

mercredi 5 janvier 2011

Ses photos Flickr sur un mur d'images

Le gadget Diaporama de Blogger permettant d'afficher les images d'un compte Flickr utilise un Flux Media RSS. Il existe de nombreux prestataires tiers qui proposent un Diaporama en Flash.

Tiltviewer permet d'afficher un mur d'images. (To tilt : pencher, incliner).
Pour créer le diaporama il faut insérer un script qui appel le lecteur Flash tiltviewer.swf.

L'insertion du diaporama dans un message du blog ou un gadget html / javascript est grandement simplifiée en utilisant un Gadget Google.

Url du gadget

tiltviewer-flickr.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 dans ce message du Blog d'Aide pour Blogger.

Pour ce gadget, les codes sont donnés sur la page Diaporama Flickr avec Tiltviewer.

Le tag iframe

A saisir sans espace ni retour à la ligne :

Affichage plein écran

Faire un clic droit, puis choisir Full screen.

Un exemple

J'utilise le code suivant pour afficher les photos de mon compte Flickr :

Plus d'informations

Un mur d'images avec une galerie en xml

Les vignettes d'un ensemble de photos de Flickr avec un Gadget Google

Les vignettes d'un ensemble de photos de Flickr avec un Gadget Blogger

Un Diaporama de Flickr sur son Blog

Galerie horizontale de photos affichées en accordéon

Les vignettes d'un album Picasa sur son Blog

Insérer un gadget dans le corps du message

Tiltviewer, le site

Crédit photos

Association Clos Domaines et Châteaux

dimanche 3 octobre 2010

Deux nouveautés de Google pour la rentrée

Guide SEO

Google publie une nouvelle version de son guide Optimiser son site pour les moteurs de recherche. Cette version s'enrichit d'un glossaire et de nombreuses références vers les outils Google. Un nouveau chapitre est entièrement consacré à l'optimisation d'un site pour les téléphones mobiles.
Ce guide apporte un complément indispensable à l'article du Blog d'Aide : Améliorer la visibilité de son Blog

Search Engine Optimization Starter Guide

La version française du Guide SEO de Google (*.pdf)

Google Shortener

Depuis le 1er octobre, Google URL Shortener permet de créer une adresse URL raccourcie, ainsi qu'un Code QR. Le Code QR (Quick Response) est un code à deux dimensions permettant à un téléphone mobile d'atteindre directement une adresse URL en photographiant le code.

Pour insérer le Code QR sur son Blog, il fallait utiliser les codes de Google Chart API, ce qui n'était pas toujours simple.

Avec Google URL Shortener, il suffit de se connecter avec son compte Google sur goo.gl, de créer le raccourci et d'adjoindre .qr à l'adresse courte pour obtenir l'image sur son Blog.

En pratique

Nous voulons raccourcir l'Url suivante, créée avec Google Maps :

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

Google URL Shortener nous donne l'URL raccourcie suivante :

goo.gl/0hvD

Et le Code QR s'obtient en ajoutant .qr à cette adresse :

goo.gl/0hvD.qr

Nous pouvons maintenant afficher le Code QR avec un simple tag img :

En savoir plus

A titre d'illustration, les 2 liens ci-dessous sont affichés avec le code QR et l'URL courte fournie par goo.gl.

URL longue : http://googlewebmastercentral.blogspot.com/2010/09/seo-starter-guide-updated.html

URL courte : http://goo.gl/q0zK

Code QR : http://goo.gl/q0zK.qr

QR code - Webmaster Central Blog

URL longue : http://viti-vino.blogspot.com/2010/03/code-qr-liens-telephone-mobile.html

URL courte : http://goo.gl/ToAQ

Code QR : http://goo.gl/ToAQ.qr

Placer un code QR sur son Blog

vendredi 19 mars 2010

Comment insérer un module d'alerte email dans blogger

Bonjour à tous,

J'ai créé il y a quelques temps pour mon blog personnel un tutoriel pour ajouter un module d'alerte email auquel les lecteurs peuvent s'abonner pour recevoir les dernières mises à jour. Je trouvais que c'était assez indispensable pour faciliter le suivi.

J'ai pensé que cette info pouvait intéresser d'autres bloggeurs :)

Nouvellement contributrice sur ce blog d'aide, je souhaitais le partager avec vous.

Seulement, comme l'article est déjà fait, j'avoue qu'il m'est plus simple de vous mettre un lien vers mon blog que de devoir récupérer toutes les photos et les ré-uploader (je peux copier/coller le texte mais pas les photos...).

Je sais que ça n'est pas le plus pratique donc je m'en excuse d'avance et si quelqu'un sait comment transférer un article d'un blog à un autre sans devoir ré-uploader toutes les photos (il y en a souvent beaucoup dans un tutoriel), ça pourrait faire l'objet d'un prochain post ?

D'ici là, voici le tutoriel en question : ici

Enjoy !

mercredi 3 mars 2010

Les Vignettes d'un Album Picasa sur son Blog

Picasa Albums Web est l'hébergeur de photos associé à Blogger. Les photos d'un album peuvent s'afficher dans un Diaporama, ou s'afficher sous forme de vignettes (thumbnails).

Le Gadget Google

Le Gadget Google, Vignettes Picasa, affiche les vignettes d'un album Picasa ou les dernières images ajoutées à un compte Picasa.

Pour insérer ce Gadget sur son Blog, il faut utiliser la technique décrite dans l'article du Blog d'Aide, qui permet d'insérer le Gadget dans le corps du message ou dans la colonne des gadgets. Le code html à insérer est un iframe. Pour le placer dans le corps du message, il suffit de copier le code en utilisant l'onglet Modifier le code HTML, pour l'insérer dans la colonne des gadgets, il faut copier le code dans un gadget HTML / Javascript.

Le code du iframe

Le code doit être saisi sans retour à la ligne.

Les paramètres

Dimensions du gadget : à ajuster en fonction du nombre de vignettes à afficher.

Utilisateur et identifiant de l'album : pour obtenir le nom d'utilisateur et l'identifiant de l'album, ouvrir l'album Picasa. Rechercher le lien RSS (colonne de droite, une fois l'album Picasa ouvert). Celui-ci est de cette forme :

http://picasaweb.google.com/data/feed/base/user
/utilisateur Picasa
/albumid/identifiant album Picasa
?alt=rss&kind=photo&hl=fr

Couleurs : utiliser le code couleur rrggbb.

Des exemples

L'album Picasa Clos Domaines et Châteaux - La noblesse des vins suisses, affiché en utilisant le code suivant : (à saisir sans espaces ni retours à la ligne)

Les 30 dernières images ajoutées à mon compte Picasa :

Plus d'informations

Afficher les vignettes d'un album Picasa avec un Gadget Blogger.

Utiliser un script ou un iframe pour afficher les vignettes d'un Album Picasa sur son Blog.

Avec un Gadget Google, afficher les vignettes d'un ensemble de photos (Photostream) Flickr sur son Blog.

Afficher les vignettes d'un ensemble de photos (Photostream) Flickr sur son Blog, avec un Gadget Blogger.

Placer un Diaporama de Picasa sur son Blog, en utilisant un code iframe.

Un gadget Google pour afficher des photos en accordéon dans une galerie horizontale.

Le Flux Media RSS pour afficher un Diaporama (anglais).

dimanche 10 janvier 2010

Jouer un fichier *.mp3 sur son Blog

Jouer un Mp3 sur son Blog

Pour insérer un son sur son Blog, il faut un lecteur Flash qui joue le fichier *.mp3. Il faut donc héberger un lecteur Flash en plus des fichiers *.mp3.
Pour mémoire, Blogger n'offre pas d'hébergement de fichiers.

L'hébergement gratuit

Google Sites autorise l'hébergement (gratuit) de fichiers Flash (*.mp3) ainsi que de fichiers son (*.mp3). La limite d'un compte gratuit est de 100 Mégas. Les fichiers doivent être téléchargés dans une Page Classeur (File Cabinet). Une restriction cependant, les fichiers doivent être utilisés sur un Blog hébergé sur un Domaine Internet Google (Blogger).

Les lecteurs Dewplayer

Alsacréations a développé plusieurs lecteurs Flash.
Le fichier *.zip disponible en téléchargement contient tous les modèles, pour utiliser le modèle Classic par exemple, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) :

Le résultat (Carl Orff, Carmina Burana, O Fortuna) :

Le lecteur audio de Google

C'est le lecteur intégré dans Google Mail :

https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio.swf

Pour l'utiliser, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) :

Le résultat (Bach BWV 243, Gloria Patri) :

Le lecteur multi-média de Google

Le lecteur multi-média de Google Reader est disponible à l'adresse suivante :

https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio-step.swf

Pour l'utiliser, nous allons l'appeler avec un Gadget Google, selon la technique décrite dans le Blog d'Aide pour Blogger, en utilisant le Gadget suivant :

google-audio-step.xml

Le code du iframe à saisir dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) :

Le résultat (Mozart, Requiem Dies Irae) :

Plus d'informations

Les Lecteurs Flash de Dewplayer pour jouer des fichiers *.mp3

Podcasting et fichiers joints sur Blogger

Des Gadgets pour son Blog

Un Gadget Google pour ajouter le lecteur Flash d'ODEO

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

Sonoriser ses images avec Dewplayer

Une Playlist sur son Site ou son Blog (anglais)

Trucs et astuces pour Google Sites (anglais)

vendredi 11 septembre 2009

Lire la Suite... suite

Un cadeau pour les 10 ans de Blogger

Intégrer le mécanisme Lire la Suite demandait plusieurs modifications importantes du modèle.

Blogger vient d'intégrer ce mécanisme dans l'éditeur de message.

Pour activer l'insertion d'un saut

- Utiliser Blogger in Draft ou avec la version classique de Blogger, le nouvel éditeur : Outil / Insérer un saut

- Plus simplement, avec l'onglet Modifier le code HTML, il suffit d'insérer le commentaire HTML

Pour définir le texte du saut

- Paramètres / Mise en page / Eléments de la page

- Messages du Blog / Modifier

Texte du lien de la page de messages

Problème connu

Depuis janvier 2010, les insertions d'objets Flash (code embed / object) placées avant le "lire la suite..." ne sont pas affichées, dans la version courte du message.

S'agissant de Youtube, il est possible d'utiliser un gadget ou, plus simplement de remplacer le code fournit par YouTube par un tag iframe (à insérer dans le html du message).

Le code fournit par YouTube :

Le même code dans un iframe :

Plus d'informations

- L'article de l'aide de Blogger

- Couper le message : les erreurs fréquentes

mercredi 2 septembre 2009

modération des commentaires (message d'administration)

Bonjour à tous,

En raison des pourriels incessants quoique japonais, j'ai pris la décision (pénible pour vous comme pour les administrateurs...) d'activer la modération des commentaires en attendant une possible intervention de Blogger pour assainir leur truc.

Merci de bien vouloir nous excuser pour ces désagréments. Je crois que vous pouvez éviter la modération de vos commentaires si vous vous abonnez au blog, bouton 'devenir un abonné fidèle' dans la barre supérieure "Blogger".

a+
BB.

mercredi 25 février 2009

Geolocaliser les messages du blog

Le Geotagging pour Blogger

Même si l'insertion d'une carte dans les messages du blog reste une opération simple, il est fastidieux d'ajouter une carte après chaque message si l'on désire géolocaliser son message.

Blogger in draft vient à notre secours en permettant de géolocaliser le message par un simple lien vers une carte de Google Maps.

Modifier le modèle du Blog

S'enregistrer sous Blogger in draft. Cette version Brouillon, ne réalise pas les opérations suivantes qu'il faut (encore) effectuer soi-même.

1 - Effectuer une sauvegarde du modèle, en cliquant sur Télécharger le modèle dans son intégralité.

2 - Modifier le modèle pour enregistrer un espace de noms supplémentaire, l'espace georss

Paramètres / Mise en Page / Modifier le code HTML

Ajouter l'espace de noms georss

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:georss='http://www.georss.org/georss'>

3 - Cliquer sur Développer des modèles de gadgets

4 - Rechercher le pied de message :


<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
           <span class='fn'>
   <data:post.author/>
  </span>
        </b:if>
</span>

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url'
  rel='bookmark' title='permanent link'>
  <abbr class='published'
  expr:title='data:post.timestampISO8601'>
  <data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
</span

 *** INSERER ICI ***

<span class='post-comment-link'>
...

5 - Avant le lien des commentaires (post-comment-link) insérer


<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'>
 <data:post.location.name/></a>
</b:if>
</b:if>
<br/>
</span>

6 - Sauver le modèle

Le geotagging des messages

A partir de l'article de référence, voyons comment géolocaliser un message.

1 - Rester sous la version draft (brouillon), et éditer le message

2 - L'éditeur de message comporte une nouvelle option : Pays/territoire, ajouter un lieu (onglet edition HTML)

3 - Saisir le lieu géographique en effectuant une recherche, de la même manière que dans la grille de recherche de Google Maps

4 - Effectuer les règlages détaillés (centrage, type de carte, niveau de zoom) et modifier éventuellement le libellé qui apparaîtra en regard du texte Pays/territoire

5 - Enregistrer. On a ainsi saisi la latitude et la longitude du point géographique à associer au message

Le résultat

Chaque message géolocalisé va comporter la mention Pays/Territoire et l'indication du lieu géographique.

Le code source du blog comporte un lien vers Google Maps avec les paramètres suivants (exemple, Rolle, Suisse) :

http://maps.google.com/maps?q=Rolle, Suisse@46.4707,6.3360&z=10

Le lien va s'ouvrir dans une fenêtre indépendante, comme dans l'exemple ci-dessous (le pied du message géolocalisé) :

Blogger va modifier les Flux RSS et Atom du blog et ajouter les tags :

<thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">
0
</thr:total>
<georss:point>lat long</georss:point>

Ces tags permettront aux agrégateurs de flux d'associer le message à sa position géographique. Nous allons voir que cela permet de réaliser l'opération inverse, associer un point géographique à un message du blog.

Verifier le nouveau flux avec Google Maps

Le nouveau flux du blog contenant maintenant les coordonnées des points géographiques, nous pouvons l'importer sur une carte de Google Maps

Ouvrir une carte, et cliquer sur Modifier. Choisir l'option Importer et saisir l'adresse du flux RSS du blog :

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

La carte doit comporter tous les géotags définis dans chaque message. Le marqueur donne accès à l'article correspondant du blog.
Nous passons ainsi de la carte sur le blog, à l'inverse, le blog sur la carte !!

Un exemple avec la carte des Découvertes des Liens du Vin :

Le Blog sur la carte

Limitation

Lorqu'un message est géolocalisé selon la méthode décrite ci-dessus, la géolocalisation ne peut pas être supprimée. Pour l'enlever du message il faut supprimer celui-ci et recréer le message sans la géolocalisation.

Un gadget pour créer le blog sur la carte de façon dynamique

Pour générer une carte Google Maps, avec tous les articles geocodés, Blogger propose le gadget :

http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml

L'insertion de ce gadget se fait avec :

Paramètres / Mise en Page / Eléments de la page / Ajouter gadget

Choisir l'option Ajouter votre propre (gadget) et saisir l'adresse URL du gadget.

Pour ajouter le gadget dans un message, suivre les indications de l'article du blog d'aide.

Pour configurer le gadget, saisir l'adresse du flux RSS du blog

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

Une fois le champ Blog's geoRSS feed URL renseigné, cliquer sur Mettre à jour, saisir à nouveau l'adresse du flux et ajuster la carte

Gadget - geotagging

La carte générée par le gadget positionne les marqueurs en fonction de la géolocalisation des messages du blog.
La bulle d'information du marqueur permet d'ouvrir une fenêtre indépendante avec le message intégral.

Plus d'informations

L'article de référence, Blogger in draft, Geotagging

Placer une carte personnalisée dans le message du blog

Géolocaliser rapidement une adresse avec un Google Web Elements

Insérer une carte sur Google Sites

Les vignes vues du ciel

mardi 30 décembre 2008

Videos de YouTube en Haute Qualite

Pour insérer un lecteur YouTube, il suffit d'insérer un tag iframe, selon les indications données par Youtube. Les paramètres du lecteur peuvent être spécifiés, selon les indications de la documentation. L'insertion par un tag iframe, permet la lecture d'une video sur une tablette (iPad) ne supportant pas le format Flash.

Il est possible d'utiliser un Gadget Google. Le code du gadget peut être placé dans le html du message, ou dans un gadget HTML / Javascript. Les paramètres peuvent être précisés simplement, selon les indications données sur la page du Gadget YouTube.

Par exemple, j ai inséré ci-dessous la vidéo d'un dégustation du Château de Châtagneréaz Grand Cru 2010. Le lecteur est clair, le curseur blanc, la taille 425 x 264, la qualité haute et les contrôles ne s'affichent pas pendant le visionnage.

Le code html à insérer (à saisir sans espaces ni retour à la ligne) :

Important : mise à jour d'avril 2012

Les informations ci-dessous sont obsolètes suite à différentes mises à jour de l'API Youtube

Depuis fin 2008, YouTube permet d'enregistrer et de visionner des vidéos en Haute Qualité.

Les formats disponibles :

Les formats YouTube

Visionner une vidéo en Haute Qualité

Pour visionner en Haute Qualité la Vidéo : Dance - Where the Hell is Matt?(2008), il faut indiquer l'adresse normale d'une vidéo YouTube, suivie du paramètre fmt=22 :

http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22

Insérer une vidéo en Haute Qualité sur son Blog

YouTube fournit le code suivant à insérer sur son blog (à insérer sans retour à la ligne) :

L'ajout du paramètres fmt=22 ne permet pas d'insérer la version Haute Qualité de la vidéo sur son blog !
Pour celà il faut ajouter un paramètre caché : ap, avec le paramètre fmt=22 URLEncodé . Ce qui donne :

ap=%2526fmt%3D22

Le code à insérer sur le blog devient donc (toujours sans retour à la ligne) :

On obtient le résultat suivant (lecteur 356 x 228, bordure verte, texte français) :

Dancing - Video YouTube Haute Qualité (fmt=22)

En cas de problèmes

YouTube affiche le message suivant : Désolé, cette vidéo n'est plus disponible (We're sorry, this video is no longer available) si la vidéo n'est pas disponible dans le format indiqué ou si la bande passante est trop faible pour le niveau de qualité demandé. Certains pare-feux limitent également le visionnage en Haute Qualité.

Insérer la Video avec un tag iframe

YouTube autorise depuis juillet 2010 l'insertion d'une video avec un simple tag iframe. L'exemple ci-dessus donne le code html :

Un gadget pour insérer une Video YouTube

Google a développé une API comportant un lecteur Flash. Le gadget suivant utilise ce lecteur et évite l'insertion des codes <object> et <embed> pour afficher un lecteur YouTube sur son blog.

youtube-player.xml

Insérer le Gadget Google lecteur YouTube

Blogger permet facilement l'ajout d'un Gadget dans les éléments de la page : Mise en page / Eléments de la page / Ajouter Gadget / Ajouter votre propre (... Gadget) et saisir l'Url du Gadget à insérer.

Rien n'est prévu pour ajouter un Gadget dans le corps du message. Il faut utiliser la technique décrite dans un message précédent.

Les paramètres du Gadget :

Video : Le code de la Video YouTube, zlfKdbWwruY dans l'exemple ci-dessus
Taille : En pixels, 223 x 142, 425 x 264, 480 x 295, 560 x 345, 640 x 385, 848 x 500 (223 x 142 force Bordure à non)
Couleurs : gris blanc, noir gris, bleu gris, bleu, vert, orange, rose, violet, rouge
Bordure : oui ou non
Recherche : Grille de recherche YouTube, oui ou non (oui n'est valide que si Videosim est à oui)
Videosim : Videos similaires à la fin de la vidéo, oui ou non
Démarrage : Automatique lors de l'affichage de la page, oui ou non
Qualite : Normal, Haute, Haute (iPod), Très Haute
Plein : oui ou non, autoriser l'affichage plein écran
BoxBcol : Code #rrggbb couleur du fond

Note : Indiquer une taille pour le gadget en fonction de la taille choisie pour la Vidéo (par défaut, 860 x 520)

La comparaison

YouTube - Qualité Normale

YouTube - Qualité Très haute

Plus d'informations

Le Player de YouTube dans un message du Blog

Des Gadgets pour son Blog

Les Actualités sur YouTube, avec un Google Web Elements

Utiliser Le lecteur YouTube avec Google Sites

dimanche 23 novembre 2008

Encadrer ses textes

Un cadre pour ses textes

Avec un peu de CSS (Cascading Style Sheets) il est possible d'encadrer ses textes avec des blocs div

Une boîte de texte

Nous allons créer une boîte de texte, avec un bloc div comprenant 3 blocs encastrés (le titre, le contenu et le pied).

Le code html

<div class="textbox">
<div class="textboxtop">Le titre</div>
<div class="textboxcontent">Le contenu</div>
<div class="textboxbottom">Le pied</div>
</div>

Le style CSS

A configurer selon l'aspect que l'on veut donner à sa boîte de texte. L'ordre border: style size color définit le cadre de la boîte. Les autres instructions se comprennent d'elles-mêmes.

.textbox
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
border: solid 2px #de7008;
}

.textboxcontent
{
font-size: 0.75em;
padding: 10px;
}

.textboxtop
{
padding: 5px;
background-color: #f2e9ca;
}

.textboxbottom
{
padding: 5px;
background-color: #f2e9ca;
}

Le résultat

pour centrer la boîte l'encadrer par <div style="text-align: center;"> ... </div>

Viti-Vino *** Liens du Vin ***

Le Blog des Liens du Vin. Le site pour apprécier les vins suisses et découvrir les vins du monde. L'historique du site réalisé avec Google Page Creator (GPC). Les outils Google et le cybermarketing

Les Liens du Vin

Des coins arrondis

L'arrondi est réalisé par une image. Le site Cornershop permet de les réaliser en ligne. Définir la couleur de la boîte ainsi que la couleur de la page. Choisir un arrondi de 10 pixels et Transparent = None.

Les coins arrondis - CornerShop

Sauvergarder les 4 images *.gif obtenues. Elles peuvent être hébergées sur Picasa.

La structure des blocs

Le bloc principal comprend 3 blocs div encastrés. Le contenu viendra dans les blocs marqués en jaune.

Coins arrondis - boîte de texte

Le code html

<div class="box">
<div class="boxtop"><div>Le titre</div></div>
<div class="boxcontent">Le contenu</div>
<div class="boxbottom"><div>Le pied</div></div>
</div>

Le style CSS

Il faut reporter dans les classes CSS boxtop, boxtop div, boxbottom et boxbottom div les 4 images *.gif des coins arrondis.

.box
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
}

.boxtop
{
background: url(URL/ne.gif) no-repeat right top;
}

.boxtop div
{
background: url(URL/nw.gif) no-repeat left top;
height: 10px;
padding: 5px;
}

.boxbottom
{
background: url(URL/se.gif) no-repeat right bottom;
}

.boxbottom div
{
background: url(URL/sw.gif) no-repeat left bottom;
height: 10px;
padding: 5px;
}

.boxcontent
{
font-size: 0.75em;
padding: 10px;
}

Le résultat

Annuaire du Vin

Annuaire du Vin avec Google Sites. Les outils Google et le cybermarketing duVin.

Google Sites : Annuaire du Vin

Faire flotter sa boîte de texte

Une boîte de texte flottante est un bloc div affiché à gauche ou à droite d'un bloc de texte qui s'enroule autour du bloc.

Un exemple

*** Flux Media RSS ***

Des gadgets pour afficher un Diaporama à partir du Flux Media RSS de Picasa, Photobucket, Flickr et Yahoo News. Incorporer ces diaporamas dans le corps du message - l'article du blog d'aide pour Blogger

Gadget Google

Le bloc div ci-contre est flottant à gauche. Il suffit d'ajouter dans le style du bloc style="float:left;". La marge entre le bloc flottant et le texte (marge de droite pour un bloc flottant à gauche) se définit dans le style du bloc flottant.
Pour stopper le flottement, créer un paragraphe avec style="clear:both;".
Si le texte en regard du bloc flottant est plus long que la hauteur du bloc, il s'écoule sous le bloc. Le bloc encadré donne ainsi l'impression de flotter sur le texte.

Modifier le style du blog

Pour incorporer ces nouvelles clauses de style dans le blog, 3 façons

1. Créer une feuille de style externe, qu'il faut héberger ailleurs que chez Blogger, et insérer l'appel de cette feuille entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)

2. Modifier le style du blog et créer une clause style entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)

3. Si le style ne s'applique qu'à un seul message, il est possible d'appliquer la clause de style en utilisant un petit code javascript qui va charger le style lors de l'affichage du message. C'est la méthode retenue pour ce billet, j'ai chargé la feuille de style externe avec ce petit javascript :

Ce script peut être placé au debut du message. Il faut saisir le code sans retour à la ligne (sinon Blogger incorpore la balise <br/> )

Plus d'informations

Créer ses coins arrondis en ligne avec CornerShop

Arrondir ses Photos en ligne avec RoundPic

Les codes couleurs en ligne avec ColorSchemer

Un style pour un seul message, une explication sur le Blog Viti-Vino

Encadrer ses photos, quelques astuces sur le Blog d'Aide pour Blogger

mercredi 19 novembre 2008

Placer des Gadgets dans les éléments de la page

Eléments de la page

Selon le template Blogger utilisé, les éléments de la page ne comportent pas de gadgets (anciennement appelés widgets) dans l'en-tête ou avant et après les messages du blog.

Ajouter des gadgets dans l'en-tête

1. Paramètres / Mise en Page / Modifier le code HTML

2. Avant toute correction, faire une copie du template en cliquant sur le lien Télécharger le modèle dans son intégralité

3. Cocher l'option Développer des modèles de gadget

4. Rechercher dans le code html :

<b:section class='header' id='header' showaddelement='no'>

5. Remplacer par :

<b:section class='header' id='header' showaddelement='yes'>

6. Les nouveaux éléments de la page :

Gadgets dans l'en-tête

Ajouter des gadgets avant ou après les messages du blog

1. Rechercher dans le code html :

<b:section class='main' id='main' showaddelement='no'>

2. Remplacer par :

<b:section class='main' id='main' showaddelement='yes'>

3. Les nouveaux éléments de la page :

Gadgets avant ou après les messages

Les attributs optionnels

<b:section... maxwidgets='n' growth='vertical' ou growth='horizontal' ...>

maxwidgets : n est le nombre maximum de gadgets acceptés dans la section. Pas de limite si l'attribut ne figure pas

growth : Indique comment sont placés les gadgets, l'un sous l'autre (vertical - la valeur par défaut) ou l'un à côté de l'autre (horizontal)

Plus d'informations

Placer des Gadgets Google dans le corps du message blog. Un gadget Blogger (widget) peut contenir un Gadget Google.

Des Gadgets pour son Blog ou son Site. Des lecteurs MP3, des videos et des diaporamas.

Les applications Google sur son Blog, avec les Google Web Elements.

L'aide de Blogger : Balises d'éléments de page pour la fonctionnalité de mise en page

samedi 15 novembre 2008

Inserer un Gadget Google dans le corps du message

Gadget Google

Si Blogger permet facilement l'ajout de Gadget dans les éléments de la page, rien n'est prévu pour ajouter un gadget dans le corps du message.

Un Gadget Google est une page xml dont le code exécutable est hébergé par Google. Ce code reçoit les paramètres du Gadget définis par l'utilisateur.

Sur la page HTML qui contient le gadget, celui-ci est encapsulé dans une balise <iframe> dont l'attribut src (source) donne l'adresse du Gadget avec ses paramètres.

Cette encapsulation est réalisée par Blogger lorsque l'utilisateur ajoute le Gadget dans les éléments de la page. Certaines pages encapsulent le gadget avec un script Javascript.

Malheureusement cette méthode est déconseillée avec Blogger, l'insertion du code entre les balises <script> et </script> devant être réalisée sans retour à la ligne (sinon Blogger insère des balises <br/> qui ne sont pas valides en Javascript - pour le cas où l'option Convertir les sauts de ligne est à Oui).

Où trouver des Gadgets Google

Le répertoire de Google en recense plus de 50'000 (état fin 2008). A la même date l'Unofficial Google Modules en compte plus de 10'000.

Sur un Blog ou une page Web visitée, un Gadget est généralement suivi du bouton Ajouter à Google (Add to Google) :

Ajouter à Google

Un exemple

A la suite de l'article Un Diaporama pour Blogger, j'ai développé un Gadget Google qui regroupe tout le code nécessaire à l'affichage d'un Diaporama dans le corps du message.

Admettons que l'on veuille insérer dans le corps du message le gadget : Diaporama Picasa. Ce Gadget affiche le titre du Diaporama ainsi que la légende des photos.

Obtenir le code du gadget

1. Ouvrir iGoogle (Mon Google) et cliquer sur Ajouter des Modules, puis sur Ajouter un flux ou un gadget et saisir l'adresse du gadget :

http://URL/nomdugadget.xml

ou cliquer sur le bouton Ajouter à Google si vous vous trouvez sur une page qui contient le gadget désiré.

2. Une fois le gadget ajouté à votre page iGoogle, dérouler le menu de la barre de titre et choisir l'option à propos de ce gadget :

Barre de titre du gadget

3. Dans la rubrique Pour webmasters, choisir l'option Insérer ce gadget

4. Ajuster le gadget à la dimension désirée, ignorer les paramètres d'affichage, mais définir les paramètres du Gadget :

5. Cliquer sur obtenir le code. On obtient un script javascript, avec les paramètres URL encodés :

<script src="hebergeur?url=adresse_gadget&parametres ... parametres&w=xxx&h=yyy&title=titre-gadget...output=js"></script>

hébergeur : L'hébergeur du Gadget, en l'occurrence Google à l'adresse http://www.gmodules.com/ig/ifr

adresse_gadget : L'adresse du Gadget, un fichier xml. Dans notre exemple : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml

paramètres ... paramètres : Les paramètres du Gadget, sous la forme de couple up_nom=valeur séparés par le caractère & (ampersand - et commercial) URL encodé par &

w=xxx h=yyy : Les dimensions du Gadget, w pour width (largeur) et h pour height (hauteur).

&title=titre-gadget...output=js : la fin de la source, à ignorer !

Convertir le script en <iframe>

width="xxx" : La largeur du iframe

height="yyy" : la hauteur du iframe

allowTransparency="true" : La couleur de fond de la page hôte prime sur celle du iframe

frameborder="0" : pas de bord

scrolling="no" : pas d'ascenseurs

Le résultat

Intégrons cette iframe sur ce blog, avec un tag <div style="text-align: center;"> pour centrer le cadre (saisie sans retour à la ligne) :

<div style="text-align:center;"><iframe src="http://152.gmodules.com/ig/ifr?mid=152&synd=trogedit
&url=http%3A%2F%2Fhosting.gmodules.com
%2Fig%2Fgadgets%2Ffile%2F108621208120033273647
%2Fpicasa-gadget-blog.xml
&up_File=http%3A%2F%2Fpicasaweb.google.fr
%2Fdata%2Ffeed%2Fbase
%2Fuser%2Fphilippe.chappuis
%2Falbumid
%2F5008507738518598193
%3Fkind%3Dphoto%26alt%3Drss
%26authkey%3D3wuzt3CsXf0%26hl%3Dfr
&up_Link=http%3A%2F%2Fwww.tendance9.com
&up_Titre=tendance9%20-%20light%20wine&up_Textcol=%23f00
&up_TextBcol=%23558866
&up_Bordercol=%23f00
&up_SlideBcol=%23eeeecc
&up_BoxBcol=%23558866" height="342" width="398" allowTransparency="true" frameborder="0" scrolling="no">URL du gadget : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_slideshow-blog.xml</iframe></div>

Et nous obtenons le Diaporama :

Plus d'informations

Placer des Gadgets Blogger (widgets) dans les éléments de la page

Un container pour placer une animation Flash sur son Blog

Créer un Gadget Google

Un Diaporama pour Picasa, Photobucket, Flickr et Yahoo News (Media RSS)

Lire un Diaporama en Flash, pour oublier la balise <embed>

Des Gadgets pour son Blog ou son Site. Des lecteurs MP3, des videos et des diaporamas.

Ajouter une carte Google Maps dans ses messages.

Ajouter des Gadgets iGoogle sur son Site

Blog d Aide pour Blogger

Groupe d'aide Blogger en français