lundi 16 mars 2009

Fichier vidéo

Voici un lien vers un :

Fichier vidéo

jeudi 12 mars 2009

Intégrer des cartes Google maps dans un blog

1 – Aller sur Google maps :

Sur I-google, cliquer sur Plus > cartes

Cliquer sur « mes cartes »

Et « créer une nouvelle carte »

Remplissez les différents champs

Lancer une recherche sur votre 1er lieu

Cliquer sur l’outil « repère » (en haut à gauche de la carte)

Et aller cliquer sur la carte pour positionner votre repère

Quand c’est fait, vous avez accès à la fiche de votre repère

Commencez par donner un titre, vous pouvez également rentrer du contenu texte.

Cliquez sur « Texte enrichi » pour passer aux options avancées. Vous pouvez :

- Ajouter une image (même principe que dans Blogger, mais uniquement avec une URL)

- Transformer une partie de texte en hyper lien

- Appliquer des mises en forme de contenu

Vous pouvez également changer le « style » du repère

Une fois ces manipulations finies, cliquer sur « terminer »

Cliquer sur lien (en haut à droite de la carte)

Et cliquer sur « Personnaliser et prévisualiser la carte intégrée »

Configurer la boite de dialogue et copiez le code HTML

2 – A – Lier une carte au Blog avec un gadget « Html/Javascript »

Dans le back-office, Onglet « Mise en page » > sous onglet « Eléments de la page » cliquer sur « Ajouter un gadget » de la sidebar.

Cliquer sur le « + » du gadget « HTML/Javascript »

Rentrer un titre (ie : carte des églises), et coller le contenu du code HTML dans la partie « Contenu », puis cliquer sur « Enregistrer »

Passer sur l’onglet du blog et faites « F5 »

2 – C – Lier une carte au Blog avec un gadget article

Après avoir copié le code HTML sur le site Google maps, aller ensuite dans le back-office, onglet « Publication d’un message », sous-onglet « créer ». Donner un titre à votre article et quelques mots pour le corps du message.


Cliquer sur l’onglet « Modifier le code HTML »du corps du messag


Cliquer à la fin de votre texte, appuyez sur la touche « entrée » et coller votre code HTML.

Cliquer sur l’onglet « Rédiger », patientez un peu, votre carte doit s’afficher.

Cliquer alors sur « Publier le message »

Passez sur votre Blog, faites « F5 »

3 en +

En mettant à jour votre profil Google vous indiquer clairement les liens entre :

votre blog

vos cartes

vos web albums

Pour accéder à votre profil Google, vous pouvez cliquer sur votre nom dans une fiche « repère » de « Google Maps » par exemple.

Google Maps dispose d’autres outils en plus du repère :


L’outil « ligne » permet de tracer des itinéraires.

L’outil « forme » permet de délimiter des zones.

Ajouter des photos directement sur les cartes

En vous inscrivant sur Panoramio (http://www.panoramio.com/) vous pouvez directement mettre en ligne des photos sur google Maps.

Cliquer sur « inscrivez-vous », suivez les instructions et cliquez sur « envoyez vos photos »

Cliquer sur « choisissez un fichier », récupérer votre photo et double-cliquer dessus


Une fois votre photo téléchargée, donner lui un titre et placer la.

Cliquer sur « placer cette photo », taper un nom de lieu et déplacer ensuite le repère. Terminer en cliquant sur « enregistrer la position » et « Terminer »


Vos photos sont maintenant visibles dans Google Maps (après un certain délai)


vendredi 20 février 2009

Intégrer des images dans un message depuis Web Album [2/2]




(Images sur Google Picasa Album Web)
Cet article est la suite de "Intégrer des images dans un message depuis Web Album [1/2]". 
Dans le précedent article nous nous attachions au concept de lien vers les albums, nous allons maintenant traiter des photos elles-mêmes
Sommaire :

4 - Interaction entre les photos d’un Web album et le Blog
o A Lier une photo à un gadget « HTML/Javascript »
o B  Afficher une photo dans un article méthode N°1 «URL »
o C  Afficher une photo dans un article méthode N°2  «HTML »



4 - Interaction entre les photos d’un Web album et le Blog

Cliquez sur une image de votre web album

Vous accéder alors à la gestion spécifique de la photo

 
Cliquer sur « Lien vers cette photo »

 
Vous retrouvez les mêmes possibilités que pour l’album, avec des options supplémentaires :

« Lien ». Il s’agit de l’adresse web de la page.  Reprenez le paragraphe 3 – A et lier un ou plusieurs mots à la page d’une photo (et non plus à la page d’un Web Album).

« Insérer l’image dans une page Web » est un générateur de code HTML qui vous permettre de choisir la taille de l’image à insérer.

4 – A Lier une photo à un gadget « HTML/Javascript »
Sur la page de la photo, copier le code HTML  (clic-droit copier)

 Dans le back-office, Onglet « Mise en page » > sous onglet « Eléments de la page » cliquer sur « Ajouter un gadget » de la sidebar.

Cliquer sur le « + » du gadget « HTML/Javascript »

Rentrer un titre (ie : Photos sous-marine), et coller le contenu du code HTML dans la partie « Contenu », puis cliquer sur « Enregistrer »

 
Dans le back-office, Onglet « Mise en page » > sous onglet « Eléments de la page » cliquer sur «Enregistrer »
Passer sur votre Blog, faites « F5 »
Le résultat est légèrement différent qu’avec un Web Album

 (Le lien en texte sous la photo, ici  « De Photo sous marine » peut être supprimé si vous cochez « Masquer le lien vers l’album » avant de copier le code HTML sur la page de la photo.

 
4 – B  Afficher une photo dans un article méthode N°1 «URL »

Sur la page de la photo, faites un clic-droit sur celle-ci et choisissez « ouvrir l’image dans un nouvel onglet »

Aller sur ce nouvel onglet et copier l’adresse de la page

 
Aller ensuite dans le back-office, onglet « Publication d’un message », sous-onglet « créer ». Donner un titre à votre article et quelques mots pour le corps du message.
Cliquer sur l’outil « Ajouter une image »

 
Dans la boite dialogue, coller l’adresse dans le champ URL, dans la partie « Image provenant du web », puis cliquez sur « Envoyer une image »

 Cliquer sur « Terminer » sur l’écran suivant

Dans votre back-office, cliquer maintenant sur « Publier le message »

 Passer sur votre Blog, faites « F5 »

 

4 – C  Afficher une photo dans un article méthode N°2  «HTML »
Sur la page d’une photo, sélectionnez la dimension choisie pour votre image

 
Copiez ensuite le code HTML
 
Aller ensuite dans le back-office, onglet « Publication d’un message », sous-onglet « créer ». Donner un titre à votre article et quelques mots pour le corps du message.

 

Cliquer sur l’onglet « Modifier le code HTML » du corps du message.

 Cliquer à la fin de votre texte, appuyez sur la touche « entrée » et coller votre code HTML.
Cliquer sur l’onglet « Rédiger », patientez un peu, votre image doit s’afficher.
Cliquer alors sur « Publier le message »

Passer sur votre Blog, faites « F5 »

 

Intégrer des images dans un message depuis Web Album [1/2]

(Images sur Google Picasa Album Web)

Sommaire :
  • 1 – Aller sur Web-Album :
  • 2 – Création d’un Web Album
  • 3 – Interactions entre un Web album et le Blog
  • 3 – A – Lier un Web Album au Blog avec une adresse web
  • 3 – B – Lier un Web Album au Blog avec un gadget « Html/Javascript »
  • 3 – C– Lier un Web Album au Blog avec un gadget « Diaporama »
  • 3 – D – Lier un Web Album au Blog avec un gadget « Flux »
Prochain post : lier les photos des Web Albums au blog.

Le service web-album de Google doit être initialisé lors de la première utilisation.
- Dans votre Firefox, ouvrez trois onglets :
o Un pour votre back office (le panneau de contrôle)
o Un pour votre front office (votre blog)
o Un pour I-google

1 – Aller sur Web-Album :
Sur I-google, cliquer sur Plus ?Photos
 
Votre mail est déjà rentré, mais vous devez indiquer votre mot de passe
 
Si vous avez déjà mis des photos en ligne sur votre blog, il est tout à fait possible que des albums existent déjà sur votre compte d’Albums Web. Si vous déplacez ou  supprimez ces photos, elles seront également supprimées de votre blog. 

2 – Création d’un Web Album
Cliquer sur le bouton « Transférer »


Cliquer sur "Créez-en un"
Remplissez les champs permettant la description de l’album.
Cliquer sur « Continuer »

Choisissez jusqu’à 5 fichiers différents et cliquez sur « Lancer le transfert »
 
Vous disposez d’une jauge qui vous indique l’espace libre dont vous disposez
 
Une fois le transfert fini, vous arrivez dans votre Web Album

Ajouter l’adresse de votre Album Web dans le module favoris de page Igoogle

 
3 – Interactions entre un Web album et le Blog
Cliquer sur « lien vers cet album » pour ouvrir les liens

A - Le 1er lien est une URL qui commence par http://picasaweb.google.fr....
C’est une adresse web que l’on peut coller directement dans un mail, dans la barre adresse d’un navigateur ou que l’on peut utiliser pour créer un lien dans notre blog (cf fiche « Créer des liens entre des articles »)

B - Le 2ème lien est en réalité une séquence de code HTML. Nous allons l’utiliser plutôt dans un gadget « HTML/Javascript » de la sidebar

C - Le 3ème lien est l’adresse d’un flux RSS, nous allons l’utiliser dans un Widget « Flux »

3 – A – Lier un Web Album au Blog avec une adresse web
Sur la page Web Album, copier le 1er lien (clic-droit copier)

Dans le back-office, Onglet « Publication d’un message » > sous onglet « Modifier les messages » cliquer sur « modifier » d’un article contenant du texte.

 Sélectionner le (ou les) mots que vous souhaiter transformer en lien, puis cliquer sur l’outil « lien » 

Collez votre adresse et faites « OK »

 Cliquer sur « Publier le message »

 Passer sur votre Blog, faites « F5 »

 Vous avez correctement transformé un mot de votre article en lien vers votre Album Web.

3 – B – Lier un Web Album au Blog avec un gadget « Html/Javascript »
Sur la page Web Album, copier le code HTML  (clic-droit copier)

 Dans le back-office, Onglet « Mise en page » > sous onglet « Eléments de la page » cliquer sur « Ajouter un gadget » de la sidebar.

Cliquer sur le « + » du gadget « HTML/Javascript »

 
Rentrer un titre (ie : Photos sous-marine), et coller le contenu du code HTML dans la partie « Contenu », puis cliquer sur « Enregistrer »

 
Dans le back-office, Onglet « Mise en page » > sous onglet « Eléments de la page » cliquer sur «Enregistrer »
Passer sur votre Blog, faites « F5 »

 

Vous avez correctement ajouté un gadget qui affiche une des photos de l’album web et qui pointe vers lui.

3 – C– Lier un Web Album au Blog avec un gadget « Diaporama »

Dans le back-office, Onglet « Mise en page » > sous onglet « Eléments de la page » cliquer sur « Ajouter un gadget » de la sidebar.

 
Cliquer sur le « + » du gadget « Diaporama »

 
Configurer la boîte de dialogue du gadget « Diaporama »
Source = Picasa Album Web
Option = Album
Nom d’utilisateur = Entrez votre adresse chez gmail
Album = Choisissez dans le menu déroulant
Cliquez sur « Enregistrer »

 

Passer sur votre Blog, faites « F5 »

Le gadget ressemble à 1ère vue au gadget « HTML/Javascript », mais vous allez rapidement découvrir qu’il s’agit d’un vrai diaporama, avec défilement des photos contenues dans l’album. Si vous passez votre pointeur sur la  photo, vous pouvez le mettre en pose ou passer manuellement à la photo suivante/précédente. Ce gadget pointe également vers l’Album Web.

 

3 – D – Lier un Web Album au Blog avec un gadget « Flux »
Sur la page Web Album, copier l’adresse du flux RSS (clic-droit copier)

 Dans le back-office, Onglet « Mise en page » > sous onglet « Eléments de la page » cliquer sur « Ajouter un gadget » de la sidebar.

 
Cliquer sur le « + » du gadget « Flux »

 Coller l’adresse du flux dans le champ « url du flux » et cliquer sur « continuer »

Configurez la boîte de dialogue du gadget « Flux » et  cliquez sur « enregistrer »

Contrairement aux gadgets précédents, celui-ci n’affiche pas les photos, mais des liens vers les photos.

Toutes ces manipulations concernaient les Albums, nous allons maintenant agir au niveau des photos dans le prochain post...

jeudi 5 février 2009

Recadrage et dimensions avec PhotoScape

Ouvrir PhotoScape et choisir le mode « Edition »







Ouvrir le fichier « mosque_bleue.jpg » du dossier « photos exemple/Dimensions »
(dans la partie supérieure de la colonne de gauche : choisir le bon dossier puis cliquer sur la vignette correspondant dans la partie inférieure / vous disposez en bas d’un curseur de zoom)













Par défaut, PhotoScape ouvre l’image avec un zoom adapté à sa taille. Nous avons ici une image de grande dimension (9529 pixels de large par 4091 de haut)

1er travail : Rognage (crop) de la photo pour éliminer les zones noires.
Cliquez sur l’onglet « découper » puis dessinez un rectangle dans l’image.







(Votre rectangle n’a pas à être parfait du 1er coup, il est facile de le redimensionner en plaçant le pointeur sur les poignées d’angle ou de milieu.)










Quand vous êtes satisfait de la sélection, cliquer sur « Découper ».
(PhotoScape affiche alors automatiquement la nouvelle version de votre image)












Faites une sauvegarde de votre image : cliquer sur le bouton « enregistrer »






PhotoScape vous propose 3 options :

  • « Enregistrer » votre recadrage remplace la photo d’origine avec le même nom de fichier et dans son dossier, MAIS une copie est crée dans un sous-dossier « Originals » avec le même nom
  • « Enregistrer dans dossier désigné » votre nouvelle image est enregistrer un dossier appelé « Outpout » directement situé sur C:/ par défaut
  • « Enregistrer sous » vous ouvre une boite dialogue de type « Enregistrer sous »








2ème travail : Recadrage d’un détail de l’image

Toujours dans l’onglet « découper », choisissez dans le menu déroulant le rapport 3 :4, puis dessinez un rectangle dans l’image.
(PhotoScape vous bloque sur un rapport de type 1.33)










les chiffres dans la barre d’état vous indique :
  • 1ère paire (7741 x 3659) la largeur et la hauteur totale de l’image.
  • 2ème paire (2440, 2471) les coordonnées x et y du pointeur dans l’image
  • 3ème paire (w=1352, h=1014) la dimension de votre sélection













Enregistrer cette 1ère version avec « Enregistrer sous », puis cliquer sur « Annuler » et recommencer l’opération avec un ratio 16/9.




























(A cette étape, vous ne devez pas trop vous soucier de la dimension, vérifiez juste quelle soit supérieur à votre projet)
Si nous voulons transformer cette dernière image en papier peint de 1600 X 900 :
Retournez sur l’onglet « Général »




Puis cliquer sur le bouton « Redimensionner » et choisissez « Ajuster la largeur »






Rentrer la valeur « 1600 »


Recadrage et dimensions avec PhotoFiltre

Ouvrir PhotoFiltre
Ouvrir le fichier « mosque_bleue.jpg » du dossier « photos exemple/Dimensions »












Par défaut, PhotoFiltre ouvre l’image avec un zoom adapté à sa taille. Nous avons ici une image de grande dimension (9529 pixels de large par 4091 de haut)

1er travail : Rognage (crop) de la photo pour éliminer les zones noires.
Vérifier que l’outil « sélection » est actif, puis dessinez un rectangle dans l’image.
(Votre rectangle n’a pas à être parfait du 1er coup, il est facile de le redimensionner en plaçant le pointeur sur les pointillés.)










Quand vous êtes satisfait de la sélection, faites un clic droit dans celle-ci et « copier »











Placer ensuite votre pointeur sur une zone vide de l’espace de travail de PhotoFiltre, faites un clic droit et « coller en tant qu’image »











Faites une sauvegarde de votre image : Menu « Enregistrer sous » > Mosque_bleu_crop.jpg















Régler le curseur au maximum (le bouton « aperçu » vous permet de visualiser le taux de compression), cocher « Format standard »

2ème travail : Recadrage d’un détail de l’image
Vérifier que l’outil « sélection » est actif, puis dessinez un rectangle dans l’image













Les chiffres dans la barre d’état vous indique :

  • 1ère paire (1839,2599) les coordonnées x et y du coin supérieur gauche dans l’image
  • 2ème paire (3408,3778) les coordonnées x et y du coin inférieur droit dans l’image
  • 3ème paire (L=1570, H=1180) la dimension de votre sélection
+ le ratio hauteur sur largeur, ici = 1.33 (rappel : 4/3 =1.33 – 16/9 = 1.77)
(vous pouvez « forcer » un ratio avec la commande « Sélection "> adapter le rapport » et modifier ensuite la taille à la souris en appuyant sur la touche « Shift »)

Procéder comme pour le 1er travail (clic droit « copier » + « coller en tant qu’image ») pour créer une nouvelle image en format 4/3 et une en 16/9
































(A cette étape, vous ne devez pas trop vous soucier de la dimension (3ème paire), vérifier juste quelle soit supérieur à votre projet)
Enregistrer les deux images :
· Mosque_bleu_detail_169.jpg
· Mosque_bleu_detail_43.jpg

Si nous voulons transformer cette dernière image en papier peint de 1024 X 768 :
Menu Image > taille de l’image























Vérifier que « conserver les proportion » est coché, puis passer la valeur « largeur » à 1024 + "OK"














Pour enlever les 2 pixels de trop en hauteur :
Menu Image > taille de la zone de travail
























Passer la valeur « hauteur » à 768

mardi 3 février 2009

Photofiltre et Photoscape

Je commence une série dédiée à la gestion des photos numériques et à cette occasion je délaisse un peu le Web 2.0 pour aller du coté des logiciels libres.

voici deux liens pour télécharger :
Photofiltre portable
Photoscape