Blog 2013 - Séance 3

Rappel : Pour accéder à votre blog, vous devez être déconnecté de votre accès gmail ECE.

Point 1 - Classer les posts avec des libellés (Vidéo)

Rappel : Les libellés permettent de classer les articles et ensuite d'y accéder plus rapidement.

La gestion des libellés se fait en deux temps :

1. Associer un libellé à chaque article,

• Si ce n'est fait, associer le libellé "TP" à vos 3 messages faits en séance précédente, et le libellé "Lyon" aux 2 messages parlant de Lyon.
  Pour cela, éditez vos messages, et sur la droite de l'écran, complétez la zone "Libellés"

2. Insérer le gadget Libellés.

• Afficher le tableau de bord, et cliquez (sur la colonne de gauche), sur la mention "Mise en page" : vous avez alors à droite la structure de votre blog, avec la disposition par bloc des différents éléments d'information.
  Repérer une mention "Ajouter un gadget", cliquez, et choisir le gadget "Libellés".
  Une fois le gadget inséré dans votre mise en page, vous pouvez très simplement changer son emplacement en le déplaçant à la souris. Une fois satisfait, vous devez enregistrer la disposition.
• Vérifiez le bon fonctionnement de ce gadget dans votre blog

Point 2 - Insérer des gadgets

• A partir du tableau de bord, choisir "Mise en page". Ceci affiche à droite la structure de votre blog.
• Premier gadget à ajouter : "Champ de recherche"
• Tester le (Il est parfois inopérant, sans que je sache pourquoi !)
• Deuxième gadget à ajouter : "Liste de liens". donner un titre, puis successivement, ajouter trois liens (choisir des sites cohérents avec votre blog).
  Dans l'écran à compléter, le champ "Titre" est un nom pour l'ensemble des liens (par exemple, "Mes liens", "Liens utiles", etc.). Ensuite, saisir pour chaque nouveau site son url et le nom du site, puis cliquer sur "Ajouter un lien".
  Affichez votre blog, et testez le bon fonctionnement des liens.

Point 3 - Régler la mise en page du site

• A partir du tableau de bord, choisir "Modèle" et puis "Personnaliser"
• Vous pouvez choisir le nombre et la position des colonnes via "Mise en page", puis changez les différentes couleurs via "Avancé, régler la largeur du blog via "Ajuster la largeur", etc.

Point 4 - Afficher une image dans la bannière supérieure du blog (Explications vidéo, pas de son)

• Commencer par noter la largeur de votre blog :
• Revenir (voir précedemment) à l'écran de personnalisation de votre modèle.
• Activez "Adjust width". Vous avez l'information de la largeur de votre blog en pixels.
• Notez-la.
• Préparez une image qui servira de bannière
• Commencez par enregistrer sur le PC une image trouvée sur Internet, ayant une largeur suffisante (au moins égale à la largeur du blog), et pouvant offrir une zone panoramique. On a besoin d'une image allongée, comem un bandeau. Evitez les photos de girafe ou de tour Eiffel!
• Si besoin, faire une ou des deux des manipulations suivantes : (Mode opératoire de ces manipulations avec Picture Manager)
• rogner cette image pour n'en garder qu'un bandeau horiontal
• redimensionner l'image pour que sa largeur finale soit celle de votre blog (aux marges près).
• Votre image est maintenant prête à être intégrée dans votre blog
• Via "Mise en page", et le gadget "entête", intégrer cette image.

Point 5 - Créer des pages (Vidéo, pas de son)

• Créer la page "Contact" et la rendre visible en affichant les pages sous forme d'onglets en haut du blog. Pour son contenu, inspirez vous de la page "Contact" de ce blog.
• Créer une page "Sommaire" qui contient des liens vers les différents articles que vous avez écrits.
• Vous avez un exemple dans ce blog avec l'onglet "Cours 2013" en haut du blog, sous la bannière affichant l'image de Lyon.

Point 6 - Permettre le téléchargement de documents

• Préparez les documents suivants :
• 2 documents PDF distincts (l'un au moins d'entre eux fera au minimum 2 pages) : vous disposez surement de documents Word (cv, travail scolaire, etc.). Vous en faites une copie au format pdf. Si vous n'avez pas de document Word sous la main, créez en un rapidement par exemple sur les traboules, en reprenant des textes et images de votre article de blog.
• Déposez :
• sur SlideShare le document pdf qui fait au moins deux pages,
• et sur Google Docs (qui s'appelle Drive maintenant) l'autre document pdf. Veillez à ce que ce document soit partagé en mode "Accessible à ceux qui connaissent le lien".
• Créer un nouveau post "Documents à consulter" pour tester 2 techniques d'affichage des documents précédents :
• 1ère technique : lien direct vers le document, sans affichage direct du document
• Dans votre message :
• Faire un lien hypertexte (avec la commande "Associer") qui pointe vers le document PDF de Google Doc.
• Faire ensuite un autre lien hypertexte, qui pointe cette fois-ci vers le document PDF de SlideShare.
• Mettre un peu de commentaire qui annonce ces deux liens.
• 2ème technique : visualisation du document directement dans le message du blog
• Faire en sorte de visualiser le document PDF déposé sur SlideShare.
  Pour cela, affichez le doc. dans Slideshare et récupérez le pack de code HTML à intégrer dans votre article. Attention, l'intégration de ce pack de code html se fait en mode HTML.

• Faire de même avec le document déposé sur Google Doc. Pour récupérer le code html à intégrer dans votre post (en mode HTML), affichez le document dans votre Google Drive, et passez par le menu Fichier / Intégrez dans ... .

Point 7 - Créer et afficher un document feuilletable : Affichage d'un PDF avec défilement des pages à l'écran
Cette technique d'affichage s'appelle "PageFlip" en anglais

Vous allez créer un nouvel article (Titre : Exemple de PageFlip), auquel vous associerez le libellé "TP". Cet article contiendra les éléments suivants :

• Une explication rapide mais précise qui explique cette notion de "PageFlip".
• Un lien vers une page web (à vous d'en chercher une) sur laquelle on trouve un exemple de document feuilletable. A ce sujet, de nombreuses grandes enseignes commerciales proposent leur catalogue sous forme d'un tel document.
• Et enfin, un exemple (que vous allez créer vous-même) de document feuilletable dans votre blog. Pour cet essai, vous devez disposer d'un document  PDF de plusieurs pages, et vous allez créer vous même ce document. Pour cela vous devez afficher votre blog, à partir de l'accueil, puis imprimer avec l'imprimante "PdfCreator" votre blog (Faire Fichier / Imprimer / choisir alors l'imprimante PdfCréator) . Cela va vous demander d'enregistrer puis de nommer et créer un fichier pdf. C'est ce document qui devra être visualisable sous forme de page feuilletable.
  Pour cela, vous allez utiliser le service en ligne ISSUU (www.issuu.com), qui vous demandera de charger votre document pdf. Une fois cela réalisé, vous pourrez récupérer le code html d'intégration pour pouvoir feuilleter votre document dans votre post.

Point 8 - Compléter

• La page Sommaire contiendra aussi des liens vers les articles "Documents à consulter" et "Exemple de PageFlip".
• Supprimer les commentaires pour la page"Sommaire"
• L'article "Documents à consulter" aura aussi le libellé "TP"