Picture Manager - redimensionner et rogner une image

Ce mode opératoire explique comment changer la taille d 'une image ou comment recadrer une image avec le logiciel Microsoft Picture Manager.

Rappel : Ce logiciel est fourni avec Microsoft office.

• Ouvrir l'image dans Picture Manager
• Ouvrir le poste de travail, et accéder au dossier qui contient votre image
• Clic droit sur l'image, et choisir "ouvrir avec", puis "MS Picture Manager".
• Dans Picture Manager, cliquer sur "Modifiez l'image"
• Manipulation pour la recadrer :
• A droite, cliquez sur "Rogner"
• Avec la souris, déplacer les marques noires encadrant l'image) pour choisir la zone qui vous convient.
• Valider par OK
• Puis faire Fichier / Enregistrez-sous, et donner un nouveau nom à l'image pour ne pas détruire l'image originale.
• Manipulation pour changer sa définition (donc son nombre de pixels)
• A droite, cliquer sur "Redimensionner".
• Observer quelle est sa taille d'origine (affichage en bas à droite)
• Dans la zone "Rapport largeur x hauteur personnalisé", saisir la nouvelle largeur. :
• observer la nouvelle taille (toujours en bas à droite)
• Si cela convient, valider par "OK"
• Puis faire Fichier / Enregistrez-sous, et donner un nouveau nom à l'image pour ne pas détruire l'image originale.

Faire défiler du texte

But : Faire défiler du texte comme dans l'exemple ci-dessous

... Voici un texte qui défile ...

Marche à suivre

• Dans votre message, saisir le texte qui doit défiler
• Puis, passer en mode html, et encadrer votre texte avec la balise marquee comme suit :
  <marquee>votre texte qui défile...</marquee>
• Revenir à "Rédiger", puis PUBLIER et vérifier que cela fonctionne

Des effets variés

• En rajoutant des paramètres à la balise <marquee>, vous pourrez changer la vitesse de défilement, la direction (vers la gauche, vers le haut, etc.), la couleur du fond, le bouclage ou non du défilement, etc., etc. :

Un texte qui défile verticalement, sur un fond de couleur grise, avec une largeur de 250 pixels.

Pour en savoir plus et jouer avec cette balise, aller voir ce site

Tableau en HTML

BlogSpot ne prévoit pas de créer un tableau !!! On va s'en sortir avec l'une ou l'autre des techniques suivantes :

1. soit en se plaçant en mode HTML en écrivant le message, et en saisissant directement le code HTML correspondant au tableau à insérer, ce qui suppose de connaître toutes les balises associées à la création de tableaux (voir ICI ), ce qui est rapidement une source d'erreurs et qui est vite fastidieux et technique. méthode réservée aux intrépides... aux geeks ... aux amateurs de codes ...
2. soit en créant le tableau avec DREAMWEAVER, et en copiant ensuite le code HTML généré par DREAM, et en le collant en mode HTML dans le message  que vous rédigez dans BlogSpot.

Création de tableau dans Dreamweaver CS4

• Lancer Dreamweaver CS4
• Fichier / Nouveau, puis chosir " Page vierge"/ Type de page= HTML /mise en forme=aucune, puis Créer.
• L'écran affiche deux parties,
• en haut le code HTML, ce que vous allez créer s'insèrera automatiquement entre les balises <body> et </body>
• en bas, la visualisation de ce que vous créez
• Activer la commande Insertion / Tableau
• Paramétrer le tableau, sachant que la largeur peut s'exprimer en pixels ou en %. Un pourcentage de 100 signifie que le tableau occupera une taille la plus large possible, correspondant à la largeur d'écriture de vos messages dans BlogSpot.

Ci-dessous un tableau créé avec Dreamweaver et dont le code HTML a été copié dans ce message en mode HTML :

Ville	Température minimale	Température maximale
Lyon	- 18degrés	42 degrés
Moscou	- 33 degrés	38 degrés

Voici le code HTML correspondant :

<

Astuce : Dans DREAMWEAVER, pour copier le code HTML correspondant au tableau que vous avez créé, cliquez sur la mention <table>, ce qui a pour effet de sélectionner très précisément le tableau (ni plus ni moins), et passez, si vous n'y êtes pas déjà,  en affichage "Fractionné". Dans ce mode, copiez la partie sélectionnée en bleu (elle commence par la balise <table ...> et se finit par la balise </table> ).

Mise en forme du tableau

• Une fois le tableau créé dans dreamweaver, vous avez avec ce logiciel de nombreuses possibilités  de mise en forme (alignement, colorisation du texte, du fond des cellules, redimensionnement).
• Toutes ces commandes de mise en forme du tableau sont présentes dans une barre d 'outils en bas de l'écran.
• ATTENTION : il y a 2 barres d'outils possibles :
• si vous cliquez dans une cellule du tableau, vous avez la barre d'outils suivante, permettant de modier le contenu des cellules du tableau.

• si vous cliquez sur la mention <table>, vous obtenez une autre barre d'outils, permettant cette fois-ci de modifier les propriétés du tableau global, comme la couleur générale du fond, ou sa largeur en pixels ou en pourcentage.

 ...

Choisir le modèle de page du blog

Il s'agit de choisir, modifier, paramétrer l'allure générale du blog. C'est ce qu'on appelle le modèle de page ou encore le template si on utilise le mot anglais.

Le modèle de page permet de définir si il y aura une photo en bannière, le nombre de colonnes affichées dans le blog, les couleurs du blog, le fond ou l'image en fond, etc.

On a par exemple le choix parmi plusieurs dispositions comme suit :

• nombre de colonnes : 0, 1 ou 2
• position des colonnes : à gauche, à droite, des deux côtés 

Une fois un modèle choisi, on revient dans l'onglet "Présentation", afficher les "Eléments de la page".
On peut alors "ajouter un gadget" en choisissant dans quel élément l'ajouter.

  

Marche à suivre pour définir le modèle de mise en page

• Se connecter à BlogSpot, Onglet "Présentation"
• Accèder à "Outils de création de modèles"
• Vous pouvez choisir votre modèle, puis le régler avec les actions sur la gauche Modèle / Arrière-plan / Mise en page / Ajuster la largeur / Avancé.
• Par exemple, l'action :
• "Mise en page" : pour chosir la présence et position des colonnes
• "Avancé" : pour régler les couleurs
• "Arrière-plan" : pour choisir, changer l'image de fond
• Une fois les changements effectués, il faut les enregistrer :
• Activer en haut à droite l'action "Appliquer au Blog"
• Puis, activer "Retour sur Blogger"

A vous de jouer...

Ouvrir une vidéo dans une nouvelle fenêtre

Nous avons vu comment afficher une vidéo issue de Youtube ou d'un autre site d'hébergement.

La vidéo est intégrée dans la page web, comme ci-dessous :



Nous allons voir une technique qui permet de visualiser la vidéo dans une nouvelle fenêtre, ce qui permet de continuer de se ballader sur le blog, de parcourir d'autres articles, tout en ayant la vidéo ouverte.

Il faut :

• copier le code HTML de la vidéo hébergée, le code qui permet son intégration dans un message
• ouvrir le bloc-notes de Windows, copier ce code, et enregistrer le fichier sous le nom par exemple ma_video.html
• héberger ce fichier sur un site comme MyDataNest présent à www.mdn.fm, dans un dossier public, et récupérer l'url d'accès à ce fichier
• dans votre message, invoquer ce fichier via le lien précédent, avec pour la balise <a ...>  du lien le paramètre suivant :
• onclick="window.open(this, 'Des liens dans Powerpoint', 'width=640,height=400'); return false;"

VOIR la vidéo

Appliquer un nouveau template

La mise en page de votre blog se change facilement en changeant le modèle de mise en page, c'est ce qu'on nomme le template. Vous pouvez trouver sur internet des templates gratuits(ou payants) spécialement adaptés à Blogspot. C'est le cas de ce site http://theblogtemplates.com .

Pour appliquer un nouveau template :

• Choisir un nouveau template sur Internet, et il sera plus simple de le faire rapidement dans le processus de création de votre blog, de sorte que toutes les rettouches que vous eez amené à faire seront déjà prsentes ans le template final.
• Télécharger le template sur votre Pc. Le fichier est généralement une archive .zip (un pack compressé deun ou plusieurs fichiers)
• Décompresser le'archive dans l'explorateur, en faisant un clic droit sur le ficier zip, puis "Extraire" et suivez la procédure d'extraction qui au final vous affichera la présence d'un fichier .XML
• Se connecter sur sur son compte Blogspot
• Choisir l'onglet "Présentation", puis "Modifier le code HTML"
• ESSENTIEL : Sauvegarder votre modèle existant par "Télécharger le modèle dans son intégralité"
• Puis, transférer votre nouveau modèle, pour cela parcourir votre PC et sélectionner le fichier XML de votre nouveau modèle, puis cliquer sur "Transférer"
• Enfin, "Enregistrer le modèle", et afficher le blog pour voir son nouveau look.

Si vous faites cette manipulation après avoir déjà travaillé le modèle initial, vous serez surement amené à faire des retouches, comme par exemple la taille de la photo en bannière qui varie souvent d'un modèle à l'autre.

Créer un SOMMAIRE d'accès à vos messages

But : Permettre un accès simplifié aux messages du blog, par le biais d'un SOMMAIRE des messages

Exemple : Dans ce blog, cette technique est mise en oeuvre via l'onglet "Cours BlogSpot" dans le menu horizontal supérieur.

Principe : Créer le sommaire dans une Page et non pas dans un message

Gadget PAGES pour accéder à une page de contact

But : Accéder à une page de contact depuis un menu affiché sur le blog. C'est le cas dans ce blog, avec la page de contact accessible depuis le menu horizontal supérieur.

Cela se fait en deux étapes, décrites ci-dessous :

Etape 1 :  Créer la page de contact

• Dans votre espace BlogSpot, accéder à "Publication d'un message"
• Puis "Modifier les pages", puis "Nouvelle page"
  Il faut bien comprendre que l'on va créer une page qui ressemble en tous points à un message, mais la différence c'est qu'elle n'est pas liée dynamiquement au blog. Elle n'apparaît donc pas automatiquement dans la liste des messages, lors de l'affichage de l'accueil du blog. Pour voir cette nouvelle page, la seule solution est de créer un lien direct vers cette page. Blogspot pemet de créer 10 pages de message ayant cette caractéristique.
• Saisir le contenu de votre page de contact avec des informations de mail, d'adresses, de plan (ne pas mettre vos coordonnées réelles !)

Etape 2 : Publier la page

• Là, vous publiez votre page : Il vous est alors proposé 3 choix ...
• si vous souhaitez intégrer un gadget page en mode horizontal (1), ou vertical (2), ou ne pas utiliser de gadget (3).
• Si vous avez choisi d'utiliser le gadget page, celui-ci est automatiquement intégré dans votre structure de blog.
• A vous de choisir son emplacement, en haut horizontalement ce qui crée une ligne d'onglets, ou en colonne verticalement ce qui crée un menu vertical.
• La position du gadget se retouche via l'onglet "Présentation" par un simple cliqué-glissé du gadget vers la zone d'accueil qu'on souhaite.

• Si vous n'avez pas choisi d'utiliser ce gadget, votre page est inaccessible, tant que vous n'aurez pas créé un lien vers elle. Ceci est expliqué dans les lignes qui suivent.

Accès à une page sans utiliser le gadget "Pages"

• On peut accéder à une page de message, sans passer par le gadget "Pages"
• Pour cela, il faut créer dans un message par exemple, un lien direct vers l'url de la page
• C'est faciles achant que l'url d'une page est formée de la façon suivante :
           nom_du_blog.blogspot.com/p/nom_de_page.html
• Ainsi, dans ce blog, la page de contact, a pour adresse :
     pjece.blogspot.com/p/contact.html
     et voici un exemple de lien pour y accéder : Nous contacter
• Pour déterminer sans erreur l'adresse d'une page, on l'affiche au moins une fois via le gadget "PAGES", puis lorsque le blog est affiché sur Internet, on survole à la souris dans le menu des pages l'onglet qui permet d'y accéder et on lit en bas de l'écran l'url qui s'affiche.

--- --- --- compléments --- --- ---

Pour information, sachez qu'il existe d'autres techniques pour créer des pages de contact. Comme par exemple, en créant une page avec un formulaire de contact et une page de remerciement pour l'internaute qui vous a contacté. Voir la technique.

Gadget CHAMP de RECHERCHE en page principale

But : Permettre à l'internaute de retrouver les messages dans votre blog, sur la base de mots clés qu'il saisit dans une zone de recherche.

Méthode 1 : Prévu par BlogSpot, c'est donc très simple.

• Il suffit de rajouter dans la présentation de votre blog le gadget "Champ de recherche".

Méthode 2 : Insérer un code HTML spécifique dans un gadget HTML/JAVASCRIPT

• Sur cette page, vous trouverez l'exemple d'un code HTML à intégrer.
• Vous le copiez, et vous rajoutez dans la présentation de votre blog, un gadget HTML/JAVASCRIPT dans lequel vous collez le code HTML en question, après l'avoir personnalisé.

A vous de jouer...

Gadget LIBELLES pour classer les messages

But : Organiser les messages que l'on écrit dans le blog, en les classant par catégories, appelées libellés.

Préambule : Il faut bien comprendre qu'un blog peut rapidement contenir des dizaines de messages, et qu'il est difficile pour l'internaute de s'y retrouver. Donc, le principe des "libellés" va permettre de classer ces messages par catégorie (c'est à dire par libellé). Ensuite, on proposera sur le blog une liste de tous les libellés, l'internaute pourra alors en choisir un, et le blog affichera la liste de tous les messages correspondant à ce libellé.

Impératif : Il faut associer un libellé à chaque message que l'on crée. Pour cela :

• Lors de la création du message, ou lors de sa modification
• Accéder, sous le message, à la zone "Libellés"
• Saisir un nouveau libellé, ou afficher les libellés et en choisir un (ou plusieurs, ce qui est possible)
• Publier

Ajouter le gadget "Affichage des libellés"

• C'est ce gadget qui se charge d'afficher la liste des libellés pour l'internaute
• Dans Blogspot, accéder à l'onglet "Présentation"
• Choisir un élément dont l'emplacement vous convient, et faire "Ajouter un gadget"
• Choisir le gadget "Libellés", nommer le et paramétrer le
• Enregistrer le gadget, puis enregistrer la structure de la présentation
• Tester son fonctionnement
• Le clic d'un libellé provoque l'affichage de tous les messages ayant ce libellé
• L'affichage va du plus récent au plus ancien

Pourquoi plusieurs libellés pour un même message ?
Tout d'abord, on peut associer plusieurs libellés à un même message, tout simplement en les séparant par une virgule.
A quoi cela sert ? Cela permet d'accéder à un même message par plusieurs critères. En effet, il est parfois difficile de classer un message qui peut concerner deux thèmes différents. En associant à ce message 2 libellés correspondant chacun à un thème, on se donne plus de facilité pour retrouver le message.

Url associée à l'ensemble des messages d'un même libellé

• Pour information, l'url associée à un libellé donné est du type :
  nom_du_blog.blogspot.com/search/label/nom_du_libelle

Cette url permet d'afficher l'ensemble des messages ayant le libellé en question. Les messages sont afffichés en commençant par le plus récent en terme d'ordre de publication.

Les libellés sont-ils obligatoires ?

• Il n'est pas obligatoire d'associer un libellé à tout message.
• MAIS un message sans libellé ne pourra pas être accessible via le gadget "Affichage des libellés".
• Par contre, il reste accessible par le gadget "Archives du blog"

Gadget HTML pour l'heure exacte

But : Insérer l'heure de l'horloge parlante,

• pour la rendre visible sur la page d'accueil de votre blog
• comme vous pouvez l'observer sur mon blog http://pjece.blogspot.com 

Manipulations :

• Récupérer le code HTML de l'applet (applet = petite application web, ici celle qui affiche l'heure)
• Accéder au site http://www.horlogeparlante.com/
• Dans le menu de gauche, accéder à "Heures et services" puis "L'horloge sur votre site"
• Configurer l'horloge : étapes 1 à 4 en s'aidant de l'aperçu proposé
• Obtenir le code : Etape 5, et copier le code proposé.

• Revenir à votre blog, en conception, et accéder au lien "MISE EN PAGE"
• Choisir la zone où sera le gadget de l'horloge et alors activez "Ajouter un gadget"
• Choisir le gadget "HTML / JAVASCRIPT",  qui permet d'insérer du code HTML.
  Très pratique, car  on peut mettre tout ce qu'on veut dès lors que c'est du langage HTML
• Saisir un titre (non obligatoire) qui apparaîtra au dessus du gadget sur la page.
• Coller dans la zone "Contenu" le code HTML copié depuis le site de l'horloge parlante
• Enregistrer le gadget, puis enregistrer la structure de la présentation
• Tester en affichant la page d'accueil de votre blog.
• SI L'AFFICHAGE EST TRONQUE,
• En LARGEUR : ajuster la largeur de votre blog, via la personnalisation de votre modèle
• En HAUTEUR :  en mode conception, à partir de la mise en page, vous pouvez "modifiez" le gadget Horloge que vous avez inséré.
  Dans l'écran du gadget, dans la zone de code HTML, repérez information height : "...px" qui traduit la hauteur en pixels de votre horloge à l'écran. Changez cette valeur en saisissant par exemple 100 ou  plus. Testez.

Gadget LISTE de LIENS en page principale

But : Il s'agit d'afficher quelques liens que vous jugez utiles. Ils figureront sur une colonne du site (si vous avez choisi une présentation avec colonnes).

Marche à suivre

• Dans Blogspot, onglet "Présentation"
• Choisir dans la structure de la page une zone et activer "Ajouter un gadget"
• Choisir le gadget "Liste des liens"
• Compléter l'écran avec les liens que vous jugez utiles
• Valider, tester.

Petit défaut de ces liens, obligeant à faire de la haute couture ...

• Comme vous le remarquez, ces liens ne s'ouvrent pas dans une nouvelle fenêtre.
• Il va falloir compléter le code HTML avec la mention target='_blank'. Votre oeil de lynx a sûrement remarqué que ce sont des apostrophes qui encadrent le mot _blank alors que dans ce type de complément Html, nous avions jusqu'à maintenant toujours utilisé des guillemets. BRAVO, quelle acuité visuelle ! Il se trouve que dans la page de code Html où nous devons intervenir, ce sont les apostrophes qui sont utilisées et non les guillemets, et on s'adapte donc.

Allons-y ... et soyez précis, rigoureux, juste, attentif, concentré, ... comme d'habitude quoi !

• Dans BlogSpot, onglet "Présentation", puis "Modifier le code HTML"
• ESSENTIEL : Cocher la petite case carrée nommée "Développer des modèles de gadget"
• Dans la grande page HTML, il faut retrouver la zone correspondant au gadget "Liste des liens", (se dit widget linklist en anglais )
• Pour cela, rechercher le mot "linklist" (utiliser la commande CTRL F et ses boutons associés Précédent / Suivant pour vous approcher de la bonne ligne)
• Ca y est vous avez repéré la ligne <b: widget id='Linklist' ...qui signale le gadget recherché
• 6 ou 7 lignes dessous, repérer l'instruction
  <a expr:href='data:link.target>
• Compléter l'instruction comme suit
  <a target='_blank' expr:href='data:link.target'>
  , en notant que le rajoût en rouge est encadré par des espaces de chaque côté.

• Puis "Enregistrer le modèle" et tester la bonne ouverture des liens.

Insérer un lecteur de radio

But : Permettre à vos visiteurs d'écouter la radio, en intégrant un lecteur de radio dans un gadget HTML

Marche à suivre

• Rien de difficile, le principe étant d'intégrer le lecteur de radio dans un gadget HTML/JAVASCRIPT.
• Où trouver le code HTML du lecteur de radio ?
• On peut accéder à un site de radio en ligne. En général, ces sites propsent d'intégrer un lecteur dans votre blog, et pour cela proposent le code HTML à incorporer.
  Ce n'est pas toujours facile de trouver ce gadget dans un site de radio
• Vous pouvez aussi aller sur le site http://www.radios-direct.fr/, qui propose des lecteurs permettant d'écouter plusieurs radios en direct.

TEST

• Tester votre lecteur, qui nécessite parfois l'installation d'un codec ou autre applicatif en complément de votre navigateur.

LECTEUR issu de www.radios-direct.fr

Téléchargement de documents

But : Permettre le téléchargement depuis votre blog de documents WOrd, PDF, etc.

Dans Blogger, ce n'est pas possible directement!

Il faut que votre document soit présent sur un espace disque sur Internet. Ainsi, vous pouvez vous inscrire chez Mydatanest, à l'adresse http://www.mdn.fm/, qui est un service d'hébergement de documents. Vous pourrez y déposer vos documents word et pdf, récupérer leur adresse internet (lien url).  Ensuite, dans Blogspot, vous insérerez un lien vers ces documents en pensant bien à faire une cible de type nouvelle fenêtre.

Exemple

• Vous pouvez télécharger la déclaration des droits de l'homme
   ... Version au format Word - Version au format PDF

Marche à suivre

• Etape 1 : Disposer d'un document Word (en format 2003 au plus !!!) et d'un document PDF sur votre PC
• Sur votre PC, créez ou utilisez un document Word existant
• Convertissez le en format PDF
• Office 2007, Office 2010 permet d'enregistrer en format Adobe PDF
• Ou utiliser un service web comme http://www.con2pdf.com/ qui vous permet de convertir des documents dans le format pdf.
• Etape 2 : Accédez au site Mydatanest, et créer un compte gratuit
• Dans ce compte, créer un nouveau dossier (via New Folder) et le nommer "Doc_pour_blog". TRES IMPORTANT lui attribuer des permissions d'accès publcis
• Etape 3 : Déposez (=Upload) les 2 documents WORD et PDF sur votre nouvel espace MyDataNest
• Accèder à votre dossier
• Sélectionnez successivement chaque fichier et pour chacun affichez et copiez le code HTML du lien qui définit l'emplacement du fichier.
• Etape 4 : Intégrez les documents dans un message BlogSpot
• Associez ces deux liens à deux textes dans votre message dans BlogSpot
• Et finalisez en rajoutant l'ouverture du lien dans une nouvelle fenêtre, comme cela a été souvent expliqué dans d'autres messages.
• Publiez votre message

TEST

• Affichez votre blog, faire le test de téléchargement des deux documents, en ayant pris soin auparavant de vous déconnecter de Mydatanest si vous étiez encore connecté.
• C'est tout l'interêt d'avoir précédemment créé un dossier avec des permissions publiques, ce qui rend le téélchargement possible pour des internautes qui eux ne seront pas logués sur votre compte Mydatanest.

BUG de Mydatanest

• Le téléchargement de documents Word en version 2007 ne fonctionne pas sur cet hébergeur. Le document une fois chargé sur Mydatanest devient un document zippé ! Il faut donc stocker sur Mydatanest des documents en version 2003.

--- --- --- Compléments --- --- ---

Conseils sur les formats des fichiers proposés en téléchargement

• C'est dommage, mais d'un autre côté, lorsqu'on souhaite mettre à disposition des documents, il est préférable de les proposer dans une version un peu ancienne, car tous les internautes ne sont pas équipés de la dernière version de logiciel. Si le format peut poser problème, il faut indiquer clairement le format du document proposé en téléchargement, et si besoin indiquer l'outil de lecture nécessaire.

Exemple : Voici un plan autocad (fichier au format ...).

Pour lire ce fichier vous avez besoin du logiciel Autocad, ou d'un lecteur multi-format (on appelle ce type d 'outil un viewer), comme par exemple l'excellent logiciel XXXX que vous pouvez télécharger ici.

Retouches de photos en ligne

But : Opérer quelques retouches de base sur les photos (colorisation, cadrage, taille, ajout de texte) en utilisant des outils en ligne, donc accessibles facilement et simples d'utilisation.
Bien sûr, pour des retouches plus complexes, les habituels produits de retouche gratuits (PhotoFiltre, Gimp, etc.) ou payants (Adobe PhotoShop, PainShop Pro, etc.) seront nécessaires mais sont plus complexes à utiliser.

Bonne nouvelle : Google propose un stockage en ligne des photos : PICASA WEB ALBUMS

• Avec votre compte Google utilisé pour accèder à BlogSpot, vous bénficiez de différents services, dont le service d'hébergement de photos en ligne nommé Picasa Album Web à l'adresse http://picasaweb.google.com/ 
• Se connecter à cette adresse, s'identifier, et vous avez la surprise de voir qu'un dossier portant le nom de votre blog est présent, qu'il renferme des images que vous avez inclus dans votre blog.
• Picasa Album Web héberge les photos, pemet de les transfrer dans les deux sens PC<->Internet,  les organise en dossiers (encore appelés albums), permet de les partager avec des amis, à qui vous envoyez par mail des invitations à consulter vos dossiers (vos albums) en totalité ou en partie.
  
  Remarque : L'outil pour "Ajouter des photos" entre votre PC et votre espace Picasa Web oblige d'installer un contrôle Active X. Vous pouvez vous en passer en choisissant l'outil de transgert simplifié, qui pemet des chargements par pack de 5 photos au mieux.

Retouche des photos en ligne

• Sur vos photos hébergées sur Picasa Album Web, vous avez accèdé via la rubrique "Modifier" à l'application PicNik, qui fournir un atelier de retouches.
• Vous utilisez ces outils, vous appliquez les modifications, et les enregistrez sur la photo en ligne ou vous en faites une nouvelle copie.

Exemples de retouches

• Changement des dimensions
• Rognage (c'est à dire recadrage par le choix d'une partie de la photo)
• Coins arrondis, avec couleur de fond sur les coins

PNG - Redimensionné de 800 px de large à 400 de large, avec proportions respectées

PNG - Recadrage en 310 px de large et 180 de haut - Rajout de texte

Coins ARRONDIS - ORANGE

Coins arrondis - BLANC

Remarques sur la transparence : image avec un format spécifique

Lorsqu'on demande des coins arrondis sur un photo, bien souvent l'outil de retouche le fait facilement, mais une fois la photo affichée sur un fond dans votre blog, on constate que les coins sont visibles sous la forme d'une couleur de fond. ils seraient invisibles si on n'avait la possibilité dans l'outil de retouches de choisir la couleur de fond du coin une fois arrondi, et de la chosir identique à la couleur du fond dans lequel on intègre la photo arrondie.

Si l'outil de retouches propose de créer des coins arrondis avec fonds transparents, alors l'image se fondra dans le décor de fond, et les coins arrondis seront parfaits, sans fond désagréable.
Mais, pour cela, il faut utiliser un format d'image qui gère cette transparence. Typiquement, le format JPEG ne le fait pas, et par contre le format PNG le fait.

Vous devrez donc travailler avec des photos dans ce format PNG. Si votre photo initiale est une photo au format JPEG, l'outil PAINT présent nativement avec Windows vous permettra de l'enregistrer sous le format PNG

Insertion d'un plan Google Map

But : Insérer dans un message une carte interactive issue de Google Map

Marche à suivre pour un PLAN

Exemple : Insérer le plan ci-dessous

Agrandir le plan

Accèder à Google Map (http://maps.google.fr/)

Saisir l'adresse d'un lieu (exemple "place Bellecour, Lyon")

Vous avez le plan sous les yeux, cliquer sur l'icône du lien (2 petits maillons) à gauche de la carte

Sélectionner la ligne "Code HTML pour site web" et copier tout le texte

• Accèder à Google Map (http://maps.google.fr/)
• Saisir l'adresse d'un lieu (exemple "place Bellecour, Lyon")
• Vous avez le plan sous les yeux, cliquer sur l'icône du lien (2 petits maillons) à gauche de la carte
• Sélectionner la ligne "Code HTML pour site web" et copier tout le texte

XXXXXXXXXXXXXXXXXX







IMAGE




... Si besoin, aller dessous sur Personnaliser pour pouvoir préciser la taille de la carte)

• Revenir dans votre message BlogSpot
• Passer en "Modifier le code HTML"
• Coller le code que vous avez copié précédemment
• Le code HTML est dans une balise <iframe ...>. Vous pourriez modifier certains paramètres comme ceux de la taille.
• Revenir à "Rédiger"
• Publier votre message pour visualiser le plan

Marche à suivre pour un lien d'accès

• Ce n'est pas un plan, mais un lien d'accès dans une nouvelle fenêtre :
• exemple : Accès à la Place Bellecour
• Pour cela, accéder à Google Map (http://maps.google.fr/), saisir l'adresse du lieu (exemple "Place Bellecour, Lyon"), vous avez le plan sous les yeux, cliquer sur la mention lien en haut à droite de la carte.
• Sélectionner la première ligne et copier tout le texte

• Revenir dans votre message BlogSpot
• Saisir le texte qui portera le lien, ici "Accès Place Bellecour"
• Activer la commande "Associer" et coller le lien précédement copié.
• Dernier réglage : le lien tel qu'il est construit ne s'ouvre pas dans une nouvelle fenêtre. Il vous reste :
• à passer en mode HTML
• à repérer la balise <a href="http://maps.google.fr/maps?... .... ...>Accès Place Bellecour</a>
• à compléter comme suit <a target="_blank" href="http://maps.google... ... ...>
• Revenir à "Rédiger"
• Publier votre message pour tester le lien et son ouverture dans une nouvelle fenêtre

Remarques

1. Sous Google Map, lorsque la carte du lieu est affichée, l'adresse url en haut du navigateur ne correspond pas au lieu en question. C'est pourquoi il faut passer par la mention "lien".
2. Avec d'autres sites cartographiques, comme Mappy, ViaMichelin, la méthode est analogue. Il faut rechercher le code embed.

Insertion d'une vidéo

But : Afficher l'écran d'une vidéo dans le message, et pouvoir lancer sa lecture.


La vidéo à intégrer est sur Youtube

• C'est très simple depuis que Google a racheté YouTube
• Dans le message, activer la commande "Insérer une vidéo" de l'éditeur (Petit clap de film)
• Choisir :
• Soit "Depuis YouTube", puis saisir un mot clé pour afficher des vidéos correspondantes et sélectionner une vidéo proposée
• Soit "Mes vidéos YouTube" et sélectionner dans votre liste personnelle de vidéos une vidéo à intégrer
• Quelques instants après, la vidéo s'affiche dans votre message. C'est fait.
• La vidéo est intégrée dans une balise <object ...>, elle-même intégrée dans une balise <div...>
• Redimensionner  : on intervient sur les paramètres height="..." et/ou width="..." A PLUSIEURS ENDROITS.

La vidéo est sur un site d'hébergement comme DailyMotion

• Cette situation fournit de nombreux réglages d'affichage de la vidéo
• Accèder à Dailymotion, et visualiser la vidéo qui vous intéresse
• Cliquer sur le bouton </>Code Embed  (en anglais "to embed" = incorporer)
• Vous obtenez un écran pour personnaliser l'affichage de votre vidéo dans votre message, à savoir régler la taille, les couleurs, la compatibilité Ipad, Iphone, etc.
• Faire les réglages adéquats
• Copier le code HTML embed
• Revenir dans votre message BlogSpot
• Passer en "Modifier le code HTML"
• Coller le code que vous avez copié précédemment
• Le code HTML est dans une balise <iframe ...>. Vous pourriez modifier certains paramètres comme ceux de la taille.
• Revenir à "Rédiger"
• Publier votre message pour visualiser la vidéo intégrée

BORN TO BE WILD, CHAINSAW & BRUCE SPRING
envoyé par runawaydream. - Regardez la dernière sélection musicale.

La vidéo à intégrer est sur votre PC
Dans ce cas, vous pourriez la déposer sur YouTube, sachant que votre compte Google donnant accès à BlogSpot est aussi un compte donnant accès à YouTube.
Mais si vous ne souhaitez pas la charger sur Youtube, l'intégration dans le message se fera sans avoir besoin de charger la vidéo sur un site d'hébergement comme Youtube, Dailymotion, etc.

• Dans le message, activer la commande "Insérer une vidéo" de l'éditeur
• Choisir "Sélectionner une vidéo à importer
• La sélectionner dans un dossier de votre PC et cliquer sur "Importer"
• Quelques instants après, elle s'affiche dans votre message.
• C'est fait.
• La vidéo est intégrée dans une balise <object ...>
• Redimensionner  : on intervient sur les paramètres height="..." et/ou width="..."

Rque : L'internaute ne peut pas télécharger la vidéo depuis votre message sur internet.

Insertion d'image

Insertion d'image et changement des dimensions

• Directement par un copié / collé depuis une image prise sur le web
• C'est le cas de l'image suivante, trouvée via Google Image, puis une  fois affichée en taille réelle, elle a été copiée puis collée dans le message Blogspot.
• ATTENTION :
• Le collage est simple et sans autre action. C'est à dire :
• pas de retouche de taille
• pas de retouche d'alignement
• pas d'essai de déplacement de l'image

Code html minimal pouvant être associé à l'insertion d'une image

• <img src="emplacement/nom_image">
• C'est le cas de l'image précédente, suite à un collage simple.

Code html général associé à l'insertion d'une image

• <img src="emplacement/nom_image" param1="valeur1" param2="valeur2" ...>

• Exemples de paramètres
• title="Cliquer pour agrandir" .......... légende bulle associée à l'image
• height="200"................ hauteur de l'image en pixels
• width="400" ................ largeur de l'image en pixels
• border="2" ................. bordure de l'image en pixels
• align="left" ................... image positionnée à gauche du texte

• Plus de détails ICI

Redimensionner l'image

• Méthode 1 : Dans le message, sélectionner l'image insérée et agir sur les commandes de taille proposées
• Cela a pour effet de rajouter les paramètres height="..." et width="..." dans le code HTML de l'image.
• C'est le cas ci-dessous, l'image précédente a été demandée en mode "Petit"

• Méthode 2 : après avoir inséré l'image par un simple copié/collé
• Passer en "Modifier le code HTML",
• Rajouter ou modifier le paramètre height=... ou width=...
• SI UN SEUL des paramètres est mentionné, le deuxième est calculé automatiquement en fonction des proportions de l'image d'origine.
• Si les deux paramètres sont mentionnés, il faut veiller à ce que les modifications des deux paramètres se fassent dans le respect des proportions d'origine, sans quoi l'image sera redimensionnée mais surtout déformée.

Alignement de l'image sans déplacement à la souris

• Après un collage simple, on sélectionne l'image et on agit sur les commandes d'alignement proposées
• Cela a pour effet d'encadrer l'image par la balise
  <div style="text-align: valeur;"> et </div>,
  ... avec valeur=left ou center ou right.
• C'est le cas ci-dessous, l'image précédente a été demandée en mode "Centrée"

Autre technique de positionnement

• Après un collage simple, on passe en mode HTML et
• On rajoute le paramètre align="valeur" dans la balise < img src="..." > qui devient
  <img align="valeur" src="...">
• C'est le cas ci-dessous, l'image précédente a été positionnée avec align="right"

Créer un lien vers un site web

But : Créer un lien vers un site web, et ouverture du lien dans une nouvelle fenêtre si besoin.

Exemple

• Créer un texte comme  le suivant : Voir le site du Louvre, texte qui porte un lien vers le site web du musée du Louvre

Comment le faire ?

• Saisir le texte « Voir le site du Louvre », et le sélectionner
• Activer la commande « Associer » de l’éditeur, et saisir l’adresse www.lelouvre.fr, 
• Si besoin, cocher la case "ouvrir ce lien dans une nouvelle fenêtre".
• Valider.

Comment le tester ?

• Le bouton APERCU en bas du message permet de voir le message, sa disposition, mais ne permet pas  de tester le lien.
• Il faut PUBLIER le message, puis demander d’afficher le message. Là, le lien est testable.

Nouvelle fenêtre ou nouvel onglet ?

• Ce choix ne se fait pas par le code HTML. C’est un réglage du navigateur utilisé par l’internaute.
• Exemple dans Firefox Mozilla : Menu Outils / Options / Onglets

Saisie du premier message

But : Saisir un message et le mettre en forme

• Hélas, ne pas s’attendre aux possibilités de Word.

La mise en forme permet principalement de changer :

• la taille, la couleur, la police, le gras, l’italique, souligné, et de faire des énumérations

Énumérations

• On peut créer des énumérations avec des listes à puces ou des listes numérotées.
• On ne peut pas facilement changer les puces ou les formats de numérotation.
• On peut créer des listes hiérarchisées, à plusieurs niveaux de puces ou de numéros.
• Créer les différents éléments de la liste et leur appliquer une puce ou un numéro
• Pour décaler vers la droite, cliquer dans la ligne et au clavier activer la touche Tabulation
• Pour un décalage vers la gauche, utiliser les touches MAJ et Tabulation

Choix de l’éditeur

• L’éditeur permet la saisie et la mise en forme de votre message.
• Blogspot propose deux éditeurs au choix : Pour choisir :
• Accéder à la zone « Paramètres »
• Puis paramètres Globaux, puis « «Sélectionner un éditeur de messages»
• Puis choisir « Éditeur mis à jour »recommandé

Enregistrement du message

• PUBLIER pour une mise en ligne immédiate sur Internet
• Enregistrer en mode brouillon : sauvegarde du message, mais il n'est pas visible sur Internet. Il faudra le réouvrir, et activer "Publier" pour le rendre accessible.

Classement / Repérage du message par les libéllés

• Saisir un libellé (ou en choisir un existant) pour classer le message dans une catégorie. Un message peut être repéré par plusieurs libellés.

Options

• Commentaires : permet les réactions des internautes
• date et heure de message : par défaut la date est celle de création. On peut changer de force la date, ce qui permet des reclassements des messages.