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

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.

Blog 2013 - Séance 4

Séance 4

Point 1 - Mise en page

• Afficher la mise en page de votre site, et alors ajouter un gadget de type "HTML/Javascript" pour y insérer le code HTML d'une "horloge parlante". Pour des indications, voir ICI

---

Intermède
Avant de passer au point 2, vous aurez besoin d'une rapide introduction au HTML.

Certaines mises en forme ne sont pas proposées par Blogspot quand vous créez votre message. Pour ces mises en forme, vous êtes alors obligé de passer en mode HTML, et de connaître un minimum ce langage.

Principe :
Je veux écrire un mot en gras en utilisant le langage HTML.

On passe en mode HTML et on écrit la séquence suivante :

<strong>quelques mots</strong>

La séquence <strong> s'appelle une balise, elle signale qu'on doit afficher en gras. La séquence </strong> est une balise de fin, qui signale qu'on doit arrêter d'écrire en gras.

De la même façon, la séquence <i>quelques mots</i> indique d'écrire en italique.

Notez bien deux choses à ce stade :
- Le texte à mettre en forme est encadré par deux balises identiques,
- Dans la deuxième balise, le caractère "/" indique d'arrêter la mise en forme.

Parfois la balise est complétée par un paramètre :
** Exemple :
La séquence <font size="3" color="red">quelques mots</font> indique qu'il faut que la police soit de taille 3 et en rouge.
La balise initiale est font, et elle admet des paramètres comme color et size. Ensuite, quand un paramètre est utilisé, c'est avec la syntaxe  nom_parametre="valeur".

Notez la forme générale d'une instruction HTML :
<nom_balise   parametre_1="x"   parametre_2="y" ...>texte_à_mettre_en_forme</nom_balise>

---

Point 2 : Nouveau message mixant 3 activités

• Créer un message "Tests divers" dans lequel vous ferez 3 parties (reprendre les sous-titres soulignés ci-dessous) pour :
• insérer des mots clignotants  : Indications ... voir ICI
  Cette insertion, comme les 2 suivantes, se fait en mode HTML.
  ** Le clignotement fonctionne avec le navigateur Mozilla FireFox, mais pas avec Internet Explorer, ni avec Safari. Vous pouvez le tester chez vous si vous avez Mozilla Firefox. En salle info, venez utiliser le pupitre du prof qui est équipé de Mozilla Firefox.
• insérer des textes défilants :  voir ICI 
• un défilement simple, sans réglage particulier,
• un défilement qui va de gauche à droite, sur fond rouge.
• insérer une musique venant de Deezer : Voir ICI
  

---

Intermède (suite)
Avant de passer au point 3, vous aurez besoin de quelques compléments sur le HTML.

Rappel : La  forme générale d'une instruction HTML :
<nom_balise parametre1="x" parametre2="y" ...>texte_à_mettre_en_fome</nom_balise>

** Autre exemple expliquant comment créer un lien hypertetxe  associé à quelques mots.
La séquence <a href="www.google.fr">Allez à Google</a> signifie que les mots "Allez voir Google" porteront un lien (a=balise de lien) et que ce lien pointera vers la référence www.google.fr

On retrouve la structure d'une instruction html, à savoir  un texte "Allez à Google" qui est encadré par la balise <a> et </a>. Cette balise <a> est complétée par le paramètre href="..." .

Si on rajoute le paramètre target="_blank" alors le lien s'ouvrira dans une nouvelle fenêtre.
Ce sera alors la séquence <a href="www.google.fr" target="_blank">allez voir google</a>

---

Point 3 - Nouveau message comportant une FAQ (Foire aux questions)

Voilà un exemple concret de ce qu'il faut faire (sommaire avec liens directs dans la page) :

  Le Monde / modèle purement texte - B&You / modèle avec images

• Pour créer votre message, le texte à récupérer est ICI :
• Copiez ce texte dans un nouveau message, dont le titre est "Ancres - Loi Hadopi"
• Ensuite, dans ce nouveau message, pour créer les liens entre les questions et les réponses, lire ci-dessous :

• 

  Remarque : Cette technique est très utile pour créer des foires aux questions (FAQ).

Point 4 - Divers

1. Dans votre page "Sommaire" (page créée à la séance précédente), intégrer des liens vers les 2 posts que vous avez créés précédemment . Rappel : dans cette page de somamire les liens restent ouverts dans le site.
2. Associer le libellé "TP" à ces deux nouveaux messages.
3. Pour chaque message, paramétrer le pour que les commentaires ne soient pas autorisés. C'est un réglage accessible via le bouton "Options" lorsque vous êtes en édition de votre post.
4. En mode Mise en page, supprimez si ils y sont les gadgets "Membres" et "Qui êtes-vous ? ".

Point 5 - Vérification de la  bonne réalisation de vos posts

1. Les images, les vidéos, les affichages divers ont des alignements uniformes.
2. Les posts ont bien les libellés demandés
3. La bannière a bien une forme de bandeau et est adaptée à la largeur de votre blog
4. Vos posts ont du corps et présentent les éléments qui y sont intégrés;
5. Les fautes d'orthographe, de frappe sont supprimées (pénalité sinon)
6. Vos liens vers des sites extérieurs s'ouvrent dans de nouvelles fenêtres (à l'exception de ceux qui sont lancés via le gadget "Libellés")
7. Vérifiez que tous les liens du post "Hadopi" fonctionnent bien.
8. La page "Sommaire" n'a pas de commentaire autorisé.
9. La page "Contact" a bien des commentaires autorisés.

Cours - Idées de thèmes à aborder

Futurs thématiques pour les cours d'informatique

Améliorations des tp existants

• QR code : exemple site Noviderm

Compléments pour un blog Google

• Syndication
• Connecteur Facebook, Twitter
• Tags imagés ou nuages de liens en images
• Droits sur les images affichées dans un blog
• Cartes géographiques INTERACTIVES avec photos, etc...
• A tester : Chat vidéo intégré (oovoo)

Sa communciation sur le net via les réseaux sociaux
pas mal pour les M2 marketing, et même pour tous les M2.
Un exemple  sur www.ecole-management-numerique.com/ de diaporamas sur les réseaux sociaux, les ruisques des réseaux informatiques en entreprise.

• Carte de visite numérique (vCard)
• Soigner son Linkeldn, son Viadeo
• Création d'un e-portfolio (voir le site www.scoop.it, ...)

Technique :  enquêtes, mailing, campagne de communication

• enquête via Google,
• e-mailing
• newsletter en ligne (splio ...)

Au délà de Powerpoint pour des présentations plus attrayantes

• Outil type Momindum (finalement screen-o-matic avec audio/webcam le fait à peu près)
• outil pour des présentations animées (type Isabelle Bornet)
• insertion de vidéos dans un powerpoint

Quelques bases de création et montage vidéo

• outils simples et/ou gratuits
• opérations de base de montage

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"

Les traboules de Lyon

Connaissez-vous les Traboules de Lyon ?

Ce sont des petites rues, parfois d'un mètre de large seulement qui relient des rues plus imortantes. Ellles permettent de circuler rapidement, en empruntant ces raccourcis.

Voici quelques photos :

Parfois publiques, certaines traboules sont privées car elles passent à l'intérieur d'un immeuble.

L'office de tourisme d eLyon vous donnera de nombreuses indications.

Sur votre IPHONE !
Depuis peu, l'office de tourisme de Lyon propsoe une application a charger sur son Iphone.

Plan

Agrandir le plan
Plan


Inserer une VIDEO

SON

SON

Blog 2013 - séance 2

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

Si vous êtes connecté, déconnectez-vous de votre messagerie Google-ECE.

1/ Créer votre blog chez http://www.blogspot.com/ avec les consignes ci-dessous.

TRAVAIL EN GROUPE : Vous avez 3 posts à créer. Comme vous êtes deux par groupe, l'un ou l'une d'entre vous rédige le premier post, et le ou la deuxième rédige le second post en parallèle. En effet, on peut rédiger plusieurs posts distincts en parallèle, mais on ne peut pas rédiger le même post en parallèle.

2/ Créer votre 1er post (post = message), sur le thème des Traboules de Lyon. Dans ce post, vous intégrerez les éléments suivants :

• saisie et mise en forme de texte (évitez les copié/collé, documentez vous via Interent et synthétisez en quelques lignes des inforamtions sur les traboules)
• insertion d'un lien vers un site web (lien associé à un texte, et qui s'ouvre dans une nouvelle fenêtre)
• insertion d'images (préalablement stockées sur le PC)
• insertion d'une vidéo prise sur Youtube ,
• insertion d'un plan interactif issu de Google map [Explications vidéo]
• insertion d'un logo, avec 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)
• classement de votre post avec le libellé "TP" (Cliquer sur l'image ci-dessous pour la marche à suivre).
  Un libellé définit une catégorie pour votre post, ce qui pemet de le regrouper quand on a écrit de nombreux posts.
 

Explications sur les commandes PUBLIER / Enregistrer :

• Publiez : 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.

3/ Créer un 2ème post, sur un sujet que vous choisissez et qui concerne Lyon, avec les mêmes types d'éléments que dans le post précédent.

4/ Créer un 3ème post, qui reprend le contenu de votre travail sur le QRCode

• Reprenez succinctement la problématique (vous êtes deux formateurs, qui présentent leur société et les services qu'ils apportent)
• Insérez l'image de la carte de visite contenant le QR Code
• Insérez la vidéo de démonstration Excel.
• Vous devez l'afficher sur votre compte Youtube, et copier (via la commande Share) le code HTML à intégrer dans votre post
  (même méthode que l'insertion d'un plan Google Map).
• Insérez votre 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. Pour cela, afficher votre diaporama dans Slideshare.net et sur la gauche de l'écran, repérez et cliquez l'icône de Wordpress. A l'invite, copier la ligne de code html ( .. <iframe src="... >, et incorporez ce pack de code html dans votre post comme vous avez fait pour incorporer un plan Google Map.

5/ Associer le libellé "TP" aux 3 posts, et aussi le libellé "Lyon" aux 2 premiers.

ancres-faq Hadopi sans lien

Texte pour faire votre exemple

Consignes :

• Recopier le texte ci-dessous (à partir des ----------- et jusqu'au bas de la page) dans le message que vous devez créer, en vérifiant que vous êtes bien en mode "Rédiger".

-----------------------------------------------------

QUESTIONS 
1/ Qu'est-ce que l'Hadopi ?
2/ Qu'est-ce qu'une Autorité Publique Indépendante ?
3/ Mon identité est-elle confidentielle ?
4/ L’Hadopi recueille-t-elle mon adresse IP ?
5/ Quelles informations me concernant sont détenues par l'Hadopi si je fais l'objet d'une procédure de réponse graduée ?
6/ Combien de temps l'Hadopi a-t-elle le droit de garder les informations me concernant ?

REPONSES

1/ Qu'est-ce que l'Hadopi ?
L'Hadopi est la Haute Autorité pour la diffusion des oeuvres et la protection des droits sur Internet.
C’est une " Autorité Publique Indépendante ", dotée de la personnalité morale.
Elle a été instituée par la loi du 12 juin 2009 et ses missions sont définies aux articles L. 331-12 et suivants du code de la propriété intellectuelle.
Ses missions sont de 3 ordres :

-- encourager le développement de l'offre légale et observer l'utilisation licite et illicite des œuvres sur internet;
-- protéger les œuvres à l'égard des actes de contrefaçon en ligne;
-- réguler l'usage des mesures techniques de protection et d'information. Au titre de ces missions, l’Hadopi peut recommander toute modification législative ou réglementaire.
Elle est également investie d’un rôle consultatif auprès du Gouvernement ou des Commissions parlementaires.

2/ Qu'est-ce qu'une Autorité Publique Indépendante ?
Une AAI est une autorité administrative indépendante (AAI) dotée de la personnalité morale.

C'est une institution de l’État, chargée par le législateur d'une mission de service d'intérêt général, en l'occurrence celle de la protection des oeuvres sur internet.

3/ Mon  identité est-elle confidentielle ?
Les recommandations de l’Hadopi sont adressées directement au titulaire de l’accès à internet.
Seuls les agents habilités et assermentés de l’Hadopi ont accès aux données à caractère personnel des internautes.

4/ L’Hadopi recueille-t-elle mon adresse IP ?

Non. L’Hadopi ne collecte pas directement les adresses IP. En fait, ce sont les organismes représentant les titulaires des droits qui observent les œuvres circulant sur les réseaux qui collectent ces informations. Ces organismes ont reçu les autorisations nécessaires de la CNIL pour effectuer ces démarches.

5/ Quelles informations me concernant sont détenues par l'Hadopi si je fais l'objet d'une procédure de réponse graduée ?
L'Hadopi reçoit les saisines des sociétés de perception et de répartition des droits et des organismes de défense professionnelle ayant reçu une autorisation de la CNIL.
Les saisines comportent notamment la date et l'heure des faits, l'adresse IP de l'abonné, les informations sur les œuvres et le nom du Fournisseur d'accès à internet (FAI).
Lorsque la Commision de protection des droits de l'Hadopi décide d'enclencher la réponse graduée, elle demande au FAI concerné de lui communiquer les coordonnées d'identité de l'abonné (nom de famille, prénom, coordonnées téléphoniques et électroniques et son adresse d’installation téléphonique).
Les données à caractère personnel ne sont traitées que par les membres ou agents habilités et assermentés de la CPD.

6/ Combien de temps l'Hadopi a-t-elle le droit de garder les informations me concernant ?
La durée de conservation des données dépend du nombre de recommandations envoyées.
Elles sont effacées deux mois après leur transmission à la Commission de protection des droits, sauf s'il y a une première recommandation.
Elles sont effacées quatorze mois après l’envoi de la première recommandation sauf s'il y a une réitération.
Elles sont effacées vingt mois après la date de présentation de la deuxième recommandation sauf s'il y a une nouvelle réitération.

Haut de page (Créer un lien qui renvoie vers le haut de la page)