Blog 2014 - séance 3

Rappel : Pour accéder à votre blog, vous devez avant tout ETRE DECONNECTE de votre accès Gmail ECE. Accédez alors à la page www.blogspot.com et connectez-vous.

---

TRAVAIL A RENDRE

Pour les groupes

• 3, 4, 6, 8 :  travail est à rendre au plus tard samedi 27 septembre à 18h00.
• 1, 2, 10 : travail est à rendre au plus tard lundi 29 septembre à 18h00.
• 5, 7, 9 : travail est à rendre au plus tard samedi 5 octobre à 18h00.

Ce qui est noté : Travail demandé dans les séance 1, 2 et 3.

Envoi du mail :

• Destinataire :  pjurain@inseec-edu.com 
• Objet:
• Pour ceux en binôme : ECE2-BLOG-TDXX-NOM1-Prenom1-NOM2-Prenom2
• Pour ceux en solo : ECE2-BLOG-TDXX-NOM-Prénom-SOLO
  (XX est votre numéro de TD, exemple 01, 02, ...)
• Contenu :
• Texte de politesse accompagnant votre envoi
• Adresse de votre blog, du genre http://nom-de-votre-blog.blogspot.com .
• Signature : votre groupe, vos NOM et prénom de chaque participant.

Validation : Votre mail est validé une fois que je vous ai confirmé sa réception.

---

TRAVAIL A FAIRE

Il y a 8 points à traiter. Travailler avec le navigateur FIREFOX.

1. Les points 1 à 5 concernent la mise en page, et peuvent être faits par une même personne.
2. Les points 6 et 7 concernent chacun un nouvel article à créer. La même personne peut se charger de ces deux articles.
3. Le point 8 est à traiter une fois les 7 points précédents réalisés. Ce point 8 consiste en quelques améliorations / réglages.

Point 1 - Insérer le gadget libellé

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

• 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 deux gadgets : Champ de recherche & Liste de liens

• A partir du tableau de bord, choisir "Mise en page". A droite, s'affiche la structure du blog.
• Premier gadget à ajouter : "Champ de recherche"
• Une fois le gadget en place, enregistrer la disposition, puis afficher votre blog et tester le champ de recherche (Il est parfois inopérant, sans que je ne 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) que vous renseignerez par les champs "Nom du nouveau site" et "Nouvelle URL du site".
• Dans l'écran à compléter, le champ "Titre" est un nom pour l'ensemble des liens (par exemple, "Mes liens", "Liens utiles", etc.).
• Ensuite, ajouter successivement 3 liens (en cohérence avec vos articles déjà écrits)
• pour chaque nouveau lien d'un site, renseignez  "Nom du nouveau site" et "Nouvelle URL du site" avant de faire "Ajouter un lien".
• Enregistrez, puis affichez votre blog, et testez le bon fonctionnement du gadget "Liste de liens".

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

• A partir du tableau de bord, choisir "Modèle". Lors de la création de votre blog, vous aviez choisi un modèle "Simple". Vous pouvez maintenant le "Personnaliser" avec le bouton correspondant.
• Une fois dans l'écran de personnalisation, vous avez accès à diverses options via le menu en haut à gauche. Commencez par :
  - "Mise en page" : vous choisissez le nombre de colonnes, leur position
  - puis "Ajuster la largeur" : pour régler la largeur globale du blog, la largeur attribuée aux colonnes
  - puis "Arrière-plan" si vous souhaitez (facultatif) ajouter une image de fond ou changer la couleur d'arrière-plan
  - puis "Avancé pour jouer avec les couleurs des différents éléments du blog, changer l'allure des polices, etc.

Point 4 - Afficher une image dans la bannière supérieure du blog

• Commencer par noter la largeur en pixels de votre blog (nécessaire pour en déduire la largeur de l'image de la bannière)  : Pour cela ... 
• Revenir (voir précédemment) à l'écran de personnalisation de Modèle.
• Activer "Ajuster la largeur". Notez l'information de la largeur de votre blog en pixels.
• Préparer une image qui servira de bannière
• Enregistrer sur le PC une image trouvée sur Internet, ayant une largeur (nbre de pixels) suffisante (au moins égale à la largeur du blog), et pouvant offrir une zone panoramique pour votre bannière.
• Il vous faut une image allongée, comme un bandeau (voici un exemple).
  Eviter donc les photos de girafe ou de Tour Eiffel (voici ce qu'il faut éviter) !
• Ensuite, à partir de l'image, fabriquer la bannière avec le logiciel PAINT :
• si besoin, sélectionner dans l'image une partie qui aura bien la forme d'un bandeau, et alors appliquez la commande Rogner. Vous ne gardez ainsi qu'une zone de type bandeau horizontal
• redimensionner (si besoin) l'image pour que sa largeur finale en pixels soit celle de votre blog (aux marges près). C'est la commande "Redimensionner", en pixels, et en conservant les proportions.
• Votre image est maintenant prête à être intégrée dans votre blog.
• Revenir à votre tableau de bord, activer l'item "Mise en page" : repérer le gadget "Entête" (il se repère car il affiche le titre de votre blog), modifier ce gadget pour y intégrer l'image.
  Vous pouvez régler le fait d'afficher le titre de votre blog au dessus ou non de l'image.
• Vérifier l'affichage de votre blog, et si besoin retournez dans la personnalisation de la mise en page pour ajuster la largeur du blog pour que la bannière ne déborde pas.

Point 5 - Créer des pages

• Créer une page "Contact"
• A partir de votre tableau de bord, accédez à la commande "Pages" sur la gauche. Créer une nouvelle page intitulée "Contact" et la publier.
• Son contenu affichera vos noms et une adresse mail pour vous joindre, ainsi que l'adresse  (35 rue de Marseille, Lyon) et le plan de situation de la nouvelle implantation de l'ECE en septembre 2015. 
• Pour rendre visible votre page "Contact" sous forme d'un onglet en haut du blog (comme c'est le cas dans ce blog) , vous devez mettre en place le gadget "Pages" dans le modèle de votre blog, en le glissant en haut de votre modèle, puis vous devez modifier ce gadget pour que la page "Contact" s'affiche.
• Créer une page "Sommaire"
• Elle contiendra des liens vers les 3 articles que vous avez écrits en séance 2
• Vous avez un exemple dans ce blog avec l'onglet "Cours 2014" en haut du blog, sous la bannière affichant l'image de Lyon.
• Astuce : pour récupérer, l'url d'un article (qui sera associée à votre lien dans le sommaire) , il faut afficher l'article en question  sur Internet après avoir cliqué sur son titre. L'url qui s'affiche dans la navigateur est bien celle précisément de l'article. La lire pour vous en convaincre.

Point 6 - Nouvel article - Proposer un téléchargement de documents

• Avant tout, préparez un document comme suit :
• Il vous faut un document au format PDF, d'au minimum 2 pages. Soit vous en trouvez un sur Internet (au moins 2 pages !), soit vous avez sous la main un document Word de 2 pages vous l'enregistrez au format PDF.
• Déposez ce document aux deux emplacements suivants :
• sur Google Drive.
• sur SlideShare 
• A ce stade, vous disposez de deux documents stockés sur Internet, et prêt à être reliés à un nouvel article dans votre blog.
• Puis, créer un nouvel article intitulé "Documents à consulter" pour tester 2 techniques d'affichage des documents précédents (LES 2 TECHNIQUES SONT A FAIRE):
• 1ère technique : lien direct vers le document, sans affichage direct du document.
• Dans votre article :
• Installer un lien hypertexte (avec la commande "Associer") qui pointera vers le document PDF de Google Drive (dans une nouvelle fenêtre).
• Le lien ne sera pas affiché tel quel, il sera porté par un texte de votre convenance.
• ASTUCE : Pour récupérer le lien du document déposé sur Google Drive :
• afficher le contenu de votre Google Drive,
• repérer le nom du document déposé,
• faire un clic droit sur son nom,
• activer "Partager"  (parfois affiché en double).
• dans l'écran qui s'affiche, activer la commande "obtenir un lien partageable"
• et alors copier le lien proposé.
• Ouf ! Facile à faire, long à écrire.
• 2ème technique : visualisation directe du document dans l'article du blog.
• Se connecter à Slideshare et visualiser à l'écran le document PDF.
  Récupérer le pack de code HTML via la commande "Intégrez". Cette ligne de code HTML est à insérer dans votre article en mode HTML. (comme cela a été fait pack dans l'article précédent où il fallait intégrer un plan Google Map).

Point 7 - Nouvel article - Créer et afficher un document feuilletable :

Il s'agit d'afficher à l'écran un document PDF d'une façon particulière, permettant de feuilleter les pages comme celles d'un livre. Voici un exemple : Catalogue UNICEF.

Ce type de document est appelé en français "document feuilletable" ou "document interactif", en anglais on trouve parfois le nom de "PageFlip".

Vous allez créer un nouvel article (Titre : "Insertion de documents feuilletables"), auquel vous associerez les libellés "TP" et "TP3". Cet article contiendra les éléments suivants :

• Une explication rapide et précise qui explique cette notion de "document feuilletable".
• 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 PDF à partir du contenu de votre blog.
• Pour créer un document PDF (que vous rendrez ensuite feuilletable), vous allez afficher la page d 'accueil de votre blog (page d'accueil = page affichant tous les articles du blog), et une fois cette page affichée, vous en ferez un enregistrement sous forme d'un document pdf. Pour ce faire, deux techniques (parmi d'autres) sont possibles :
• Technique avec les navigateurs FireFox ou Chrome : affichez la page d 'accueil avec le navigateur en question. Lancer la commande "imprimer" (raccourci CTRL P), changer la destination d'impression et choisir "Adobe PDF". Faire l'enregistrement qui conduira à la création d'un document pdf, reprenant tous les articles du blog.
• Puis, vous allez utiliser le service en ligne ISSUU (www.issuu.com) :
• il vous demandera de charger votre document pdf sur le site
• Une fois cela réalisé, vous pourrez récupérer le code html d'intégration (commande Share, puis Embed) pour pouvoir  intégrer votre document dans votre article (comme on l'a déjà fait pour des plans interactifs issus de Google Map)
• Publier votre article et tester la possibilité de feuilleter le document.

Point 8 - Compléter

• La page Sommaire devra contenir aussi des liens vers les articles "Documents à consulter" et "Insertion de document feuilletable".
• Supprimer la possibilité de laisser des commentaires pour la page "Sommaire"
• Les articles "Documents à consulter" et "Insertion de document feuilletable" devront avoir les libellés "TP" et "TP3".
• Dans la mise en page, supprimez les gadgets "Qui êtes-vous ?", "NavBar"