mercredi 17 septembre 2014

Blog 2014 - séance 1



Séance 1 - Cas QR Code

TRAVAIL à FAIRE à 2 ,   avec 2 PC

Affichez le texte du TP (m.a.j. sept. 2014)

Les documents produits lors de cette séance seront utilisés pour le contenu d'un article de votre blog lors de la séance suivante.

Aller plus loin :
  • Ce site www.codactiv.com propose de personnaliser et suivre les QR codes que vous utilisez dans vos campagnes de marketing.
  • Comment insérer une vidéo Youtube dans un diaporama Powerpoint (vs 2007) : cliquer sur l'image :


mardi 16 septembre 2014

Blog 2014 - séance 2

Séance 2 - Créer le blog et vos premiers articles

Nous utilisons le service de blog gratuit BLOGGER proposé par Google. Vous avez donc  besoin d'un compte Google : typiquement celui utilisé en séance 1 pour poster sur Youtube votre vidéo de formation sur Excel.

Créer votre blog
  • Affichez http://www.blogger.com/ et connectez vous avec vos identifiants Google.
  • Créez votre blog en vous aidant des consignes ci-dessous :
    • Titre du blog : Il apparaît quand on fait une recherche sur internet de votre blog. A ce stade, saisir vos deux prénoms, vous pourrez changer de titre très facilement plus tard.
    • Adresse : c'est l'adresse internet de votre blog, son url. Par exemple, dans le cas de ce blog, c'est pjece.blogspot.com. Vous devez saisir une adresse disponible.
      exemple : pierre-martin-blog.blogspot.com
      Vous pourrez facilement changer cette url plus tard.
    • Modèle : Choisir le modèle "Simple". Nous verrons lors d'une séance suivante comment le personnaliser.
TRAVAIL EN GROUPE : Vous avez 3 articles à créer. Comme vous êtes deux par groupe, l'un ou l'une d'entre vous rédige le premier article, et le ou la deuxième rédige le second article en parallèle. En effet, on peut rédiger plusieurs articles distincts en parallèle, mais on ne peut pas rédiger le même article en parallèle.
1er article et 2ème article
Chacun sur un thème libre, et ce qui est imposé dans chacun, ce sont les consignes suivantes :
  • saisir et mettre en forme du texte (évitez les copié/collé, documentez vous via Internet et synthétisez)
  • N'ATTENDEZ PAS DE FINIR VOTRE ARTICLE pour l'enregistrer car si il y a un plantage (et il y en a ...) vous aurez tout perdu. Donc, régulièrement, enregistrez votre travail, et testez le en le publiant et en affichant l'article sur le net pour observer comment il se présente.
  • insérer un lien vers un site web 
    • L'adresse web ne sera pas visible, mais associée à un texte qui le porte comme l'exemple qui suit : Musée du Louvre
    • Le site web devra s'ouvrir dans une nouvelle fenêtre.
  • insérer quelques images
    • Depuis Internet, on le fait par un copié / collé
    • Si l'image est sur le PC, on utilisera l'outil de Blogger "insertion d'image "(mais celui-ci "plante" parfois). Rabattez vous alors sur des images copiées collées depuis Internet.
  • insérer un plan interactif issu de Google Map : La méthode varie suivant la vs de Google Maps utilisée. Parfois avec la vs actuelle, cela ne fonctionne pas, on se rabat alors sur la version classique.
  • insérer une vidéo issue de Youtube 
    • 1ère méthode pour une vidéo qui est répertoriée : utiliser l'outil d'insertion de Blogger (le petit "clap" de film). et saisir les mots clés d'une recherche Youtube pour afficher les vidéos correspondantes et ensuite sélectionner celle à insérer. C'est tout.
    • 2ème méthode si la 1ère méthode plante ou si la vidéo n'est pas répertoriée : on procède comme pour l'insertion d'une carte Google Map. Il faut donc récupérer le pack de code HTML à intégrer en mode HTML dans notre article. Donc allez sur Youtube, affichez la vidéo voulue, et sous la vidéo cliquez sur le "Partager" puis sur "Intégrer" et copiez tout le code "<iframe ...>". Revenez à votre article de blog, saisir le texte "MA VIDEO" là où vous voulez insérer votre vidéo, passez en mode HTML, repérez le texte "MA VIDEO" (si besoin utilisez la commande  de recherche CTRL F sur PC ou cmd F sur MAC pour retrouver le texte MA VIDEO"), sélectionnez ce texte, et collez le pack de code HTML venant de Youtube. Revenez au mode "Rédiger" donc vous quittez le mode HTML et normalement votre vidéo s'affiche. Parfois, ce n'est pas le cas, enregistrez, puis mettez à jour et affichez votre article.
  • insérer un logo, qui portera un lien associé à ce logo (par exemple logo de la Ville de Lyon, et lien vers l'office de tourisme, dans une nouvelle fenêtre).

    Il est parfois difficile d'associer le lien, en particulier si l'image a une disposition spécifique. Dans ce cas, revenir à une disposition simple pour l'image (seule au milieu de sa ligne par exemple) et lui associer le lien, le tester (Enregistrer / Publier / Afficher) puis éventuellement modifier l'article en remettant une disposition spécifique à l'image maintenant qu'elle porte le lien.
  • classer votre article avec le libellé "TP" (Cliquer sur l'image ci-dessous pour la marche à suivre). Un libellé définit une catégorie pour votre article, ce qui pemet de le regrouper quand on a écrit de nombreux articles.
  •  


Explications sur les commandes PUBLIER / ENREGISTRER / METTRE A JOUR :
  • Publier : ceci enregistre, puis ferme votre message, et le rend visible sur Internet :
    • Dans la liste des messages, repérez votre message et cliquez sur "Afficher"
    • Votre message s'affiche, et vous pouvez contrôler sa mise en page et tester si nécessaire les liens créés.
  • Enregistrer : ceci enregistre votre message. C'est donc à faire régulièrement, sans attendre d'avoir fini d'écrire votre message. Cela ne provoque pas la publication sur Internet.
  • Mettre à jour : Pour un message qui a déjà été publié, et que vous êtes en train de modifier, cela enregistre les dernières modifications et publie le message dans sa dernière version.
A propos du mode APERCU
Lorsque vous créez votre article, vous disposez d'un mode APERCU pour observer à quoi il ressemblera une fois sur Internet. Sachez que si la disposition du mode APERCU est fidèle à ce qu'on verra effectivement sur Internet, par contre les liens que vousa vez pu installer ne sont pas actifs dans ce mode. Assez surprenant pour un mode Aperçu, ce qui en limite pas mal l'intérêt.

3ème article
Il reprend le contenu de votre travail sur le QRCode
  • Dans l'article, reprenez succinctement la problématique : vous êtes dirigeants de Computraining, entreprise de formation en informatique, qui voit ses ventes chuter... Expliquez la cause puis la solution que vous envisagez pour redresser les ventes.
Rédigez l'article en étant bref, précis, attractif, sans fautes d'orthographe, et insérez les éléments suivants :
  • l'image de la carte de visite contenant le QR Code
  • la vidéo de démonstration Excel.
    • Cette vidéo n'est pas répertoriée donc elle n'est pas insérable via l'icône proposée par Blogger. Pour l'insérer dans votre article, vous devez procéder comme vous l'avez fait pour intégrer une carte Google Map.
      (Relisez les consignes correspondantes au niveau de Insertion vidéo Youtube / 2ème méthode)
  • le Powerpoint, que vous aurez préalablement déposé sur http://www.slideshare.net/
    • si vous possédez un login Facebook, vous pouvez l'utiliser pour vous connecter sur ce site, sinon vous devrez créer un compte.

    • une fois votre diaporama déposé sur slideshare.net, vous pourrez l'incorporer dans votre blog en copiant le code html que slideshare.net propose via un bouton "embed" ou "Intégrer". A l'invite, copier la ligne de code html ( .. <iframe src="... >, et incorporez ce pack de code html dans votre article comme vous avez fait pour incorporer un plan Google Map.
Classer vos 3 articles
En associant les deux libéllés "TP2" et "TP"" aux 3 articles

lundi 15 septembre 2014

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.
    • 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"

dimanche 14 septembre 2014

Blog 2014 - séance 4

Séance 4
C'est la dernière séance de cours, dans le sens où la séance suivante, la S5, vous permettra de commencer un travail à rendre, que vous terminerez chez vous, par binôme.

Un triangle qui fait du bien

Trikoasana : Le triangle

Cette asana permet de développer la respiration intercostale, et particulièrement de respirer en agissant principalement sur un côté puis l'autre successivement.


C'est un bon moyen pour le débutant, d'apprendre à mobiliser les zones costales.


la posture
  • Au final, les bras sont alignés
  • la tête tournée vers le haut, les yeux regardent la main haute

la respiration
  • Une fois en place, respirer en intercostal, principalement du côté étiré.
  • Placer 5 cycles inspiration / respiration

Le mouvement en mouvement ...




Où pratiquer ?

Pour vous entraîner , un club agréable avec des intervenants professionnels : Club Victor Hugo. Vous y trouverez un professeur de Yoga qui vous donne les clés pour rentrer dans cette discipline.

Emplacement : 4 rue Pravaz – Lyon 3ème





L'incontournable, ou plutôt l'indispensable Salutation au Soleil : Ce schéma rappelle les différentes phases de la salutation au soleil.
Cliquer dessus pour en voir une version vidéo.





mercredi 14 novembre 2012

Tests - Clignotement - Défilement

Certaines mises en forme ne peuvent pas se faire avec intégré.

Il faut écrire soi-même le code HTML.


Exemple de texte clignotant

Feux clignotants ...


Exemple de texte défilant :
Ceci défile ...




mercredi 24 octobre 2012

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.