Archive pour la catégorie ‘Tutoriels’

J’ai profité de quelques jours de congé pour tester un outil web qui permet de créer un magazine en ligne, lisible dans une interface simple et efficace (technologie flash ou Adobe Air apparemment / Note : NON, du pur html : voir commentaire du créateur de Madmagz ci-dessous).

Je suis resté en version gratuite pour créer le n°1 d’une (peut-être) longue série de magazines autour de la photo et des outils informatiques : « bpmultimedia » (c’est aussi le nom de mon blog personnel, consacré à mes « balades photo »:  www.bpmultimedia.fr).

En une demie-journée environ, j’ai ainsi créé un magazine de seize pages, dont je ne suis pas pas mécontent ;-)  Vous pouvez le voir ici : http://madmagz.com/fr/magazine/137362

Voici en quelques mots comment cela fonctionne :

  • vous vous rendez sur le site http://madmagz.com/fr et vous créez un compte d’utilisateur (c’est gratuit)
  • vous cliquez sur Créer un magazine et choisissez un modèle : en version gratuite, un seul modèle disponible
  • l’interface de création s’ouvre

Tout à gauche, une barre d’outils, pour ajouter / supprimer des pages – modifier l’ordre des pages – avoir un aperçu de votre magazine dans l’interface web / en pdf – sauvegarder le travail en cours – publier votre magazine

Ensuite les vignettes des pages : cliquer sur une page pour qu’elle apparaisse dans la zone de travail à droite

Quand vous cliquez sur un élément (photo ou texte), les outils de modification apparaissent : charger une image ou modifier le texte (police, taille pour l’ensemble de la zone de texte – gras ou italique + couleur pour le texte sélectionné.

  • n’oubliez pas de sauvegarder très régulièrement votre travail en cours (j’ai perdu le contenu de deux pages lors de mon test et j’ai dû les refaire).
  • ATTENTION ! Une fois votre magazine publié, vous ne pouvez plus rien modifier, seulement le supprimer. Vérifiez donc bien que tout est OK avant de le publier (mon conseil : utilisez l’aperçu pdf pour vérifier. Cet aperçu pdf est inexploitable hormis cette fonction de vérification, car il présente un tatouage madmagz, mais il est très pratique pour vérifier en grand format que tout est ok dans les moindres détails.
  • si vous le souhaitez, en payant une dizaine d’euros, vous pourrez obtenir une copie pdf non tatouée ; et si vous êtes un pro pour une centaine d’euros vous obtiendrez un pdf haute définition avec traits de coupe pour envoyer à un imprimeur.
  • notez que Madmagz vous propose également de vous envoyer une version papier du magazine, un devis est établi en ligne avant commande (à titre indicatif, mon magazine de 16 pages me couterait 12,50 € frais d’envois compris). Et si vous pensez pouvoir vivre de votre prose (!), vous pouvez proposer votre magazine à la vente en ligne sur le site, si si ! Mais à mon avis il faut en vendre beaucoup, car vous touchez un pourcentage sur chaque vente, mais il faut que vous atteigniez au moins 100 € pour qu’on vous paye…
  • en payant une vingtaine d’euros, vous obtenez une version en ligne « premium » : vous pourrez alors mettre le logo de votre institution ou société à la place de logo Madmagz dans le lecteur web et un lien vers un site de votre choix. Vous aurez aussi accès aux statistiques de consultation. Enfin, c’est la seule façon de pouvoir insérer des vidéos dans votre magazine en ligne, en sachant que vous ne pourrez insérer que des vidéos déjà mises en ligne sur Youtube.

L’interface est bien conçue, la création assez fluide, mis à part le temps de chargement des images dans le système, ce qui est cependant tout à fait normal dans tous les systèmes en ligne.

Madmagz : un outil pédagogique

Ce peut-être à mon avis un très bon outil pédagogique :

- pour faire s’exprimer par écrit sur le web, avec l’avantage sur le blog qu’il peut s’agir d’une parution unique, sans obligation de poursuivre le projet dans le temps,
- pour apprendre à soigner une mise en page graphique de style magazine (dans le cadre d’une sensibilisation à la presse ou d’un projet multidisciplinaire)
- pour faire connaitre au grand public sa production (projet de classe, rapport de stage, TPE…) ou le compte-rendu d’un événement sans passer par un site web dédié (j’ai trouvé sur le site un journal de voyage de classe en Allemagne) et pourquoi pas proposer à chaque participant d’en garder une trace papier.

Voir quelques exemples.
Voir ce blog.
Et celui-ci (Madmagz et les Travaux personnels encadrés)

Quelques remarques et regrets, dans un bilan globalement positif (version gratuite) :

  • de nombreux modèles de page sont disponibles, mais on ne peut pas ajouter / retirer d’éléments (images ou zones de texte) à la page, seulement les modifier
  • une fois insérée, une image ne peut pas être déplacée d’une zone image à l’autre : il faut en réinsérer une nouvelle et attendre donc pendant le téléversement
  • impossible de redimensionner ou déplacer les zones image ou texte ; si vous ne souhaitez pas d’une zone de texte proposée dans le modèle, il faut effacer le texte lorem ipsum (texte bidon destiné à remplir la zone de texte), mais vous ne pouvez rien mettre à la place. Par contre, pas moyen d’effacer les images de la page modèle, il faut absolument les remplacer par une image de votre cru
  • vous pouvez sélectionner du texte et le mettre en gras, en italique, en couleur. Par contre si vous modifiez la police ou la taille, cela modifie l’ensemble du texte de la zone de texte. Pas moyen de justifier le texte
  • en version gratuite, une seule et même disposition des photos dans les pages portfolio, ce qui les rend un peu monotone. Mais si vous savez bien utiliser un logiciel de montage photo, vous pouvez très bien créer un photomontage de votre choix, en respectant le rapport hauteur / largeur d’une page de magazine et l’insérer en pleine page. Par contre pas d’importation possible à partir de Word ou de Publisher
  • j’ai essayé sur ma tablette : très bien en lecture (on feuillette le magazine avec le doigt), mais galère en création, surtout quand le clavier virtuel recouvre la zone de texte où on voudrait écrire et qu’on ne peut pas bouger la page.

Mais bon, il ne faut pas trop en demander ! C’est déjà un très bel outil dans sa version gratuite. je crois que pour le n°2 de mon magazine, je tenterai la version payante, et s’il y a des différences notables, je vous en ferai part.

Ajout (13.03.2012) : je viens d’acheter la version pdf de mon magazine ; comme annoncé par le site Madmagz, les photos sont en basse résolution, mais c’est tout à fait acceptable à l’affichage.

IMPORTANT : une fois en ligne il est facile de récupérer le code d’intégration de votre magazine, pour l’ajouter dans votre blog ou site web (je ne l’ai pas fait ici, car l’article est déjà bien long et fourni, mais vous pouvez voir ce que cela donne sur mon blog perso). On obtient le code à partir d’une icone </> présente sur le player : après publication, lancer la lecture du magazine à partir de la rubrique Archives de votre compte Madmagz.

Site officiel et tutoriel en ligne :

Le tuto vidéo Madmagz (nouvelle version)

bparmentierifp et scénario pédagogique / e-learning / TUICE / IFP Nord Pas de Calais dans Bruno PARMENTIER (bparmentierifp)

Ce que vous voyez ci-dessus, c’est ma page « PEARLTREES »… mes « arbres à perles »…un outil que j’ai découvert en juin et qu’il me tardait de vous présenter, tant il me semble intéressant pour son usage personnel et pour un usage pédagogique.

PEARLTREES

La problématique : j’accumule sur mon PC des signets vers des pages web intéressantes, pour pouvoir les retrouver par la suite et les utiliser dans mes cours et stages… mais je suis le seul à en profiter et je ne profite pas des pages trouvées par d’autres internautes. Pearltrees permet d’organiser ces signets de façon visuelle et surtout de les partager et de profiter des trouvailles des autres, voire de collaborer en équipe sur une thématique.

« CONTENT CURATION »

C’est le concept de CONTENT CURATION (désolé pour l’anglicisme, je ne connais pas le terme français correspondant) : un moteur de recherche web humain, élaboré par des experts (attention, système ouvert comme Wikipédia, pas de gage de qualité des dits experts) et pas basé sur un scan systématique des pages et un traitement par algorithme comme chez Google et consorts. Il existait déjà des annuaires spécialisés, des sites de partage de signets (Delicious par ex.), des représentations graphique des résultats de recherche… Pearltrees, c’est tout cela à la fois…

DECOUVRIR, EXPERIMENTER (TUTORIEL)

N’hésitez pas à parcourir mes Pearltrees professionnels. Et si vous souhaitez vous y mettre, consultez le tutoriel vidéo que je vous ai préparé (n’oubliez pas de mettre le son sur votre PC quand vous le consultez) : voir le tutoriel Pearltrees.

En savoir plus sur Pearltrees (article Wikipedia)

Carte conceptuelle, carte mentale, carte heuristique (mindmap en anglais) : une (autre) façon de travailler, en usage depuis longtemps, mais à mon sens pas encore suffisamment dans les écoles, collèges, lycées et même à l’université ou dans les centres de formation.

C’est quoi ?

C’est une façon de mettre en forme, pour soi et/ou pour les autres la présentation d’un concept, d’un processus, d’un projet : on part d’un « noeud central » et on lui ajoute des sous-noeuds, reliés par des branches. On peut établir des liaisons entre les noeuds ou sous-noeuds, en plus des branches tracées automatiquement, on peut regrouper des noeuds ou sous-noeuds, leur adjoindre des icônes, des images, des liens etc…

Un exemple : définition du mindmapping
( source : Matthieu Polet – la carte heuristique expliquée à mon chef )
Modification 02.04.2012 : le site www.mapping-experts.fr n’existe plus… retrouvez Matthieu Polet sur Twitter ici : https://twitter.com/#!/eurekamap )

Cliquez pour agrandir

Une carte conceptuelle : pour quoi faire ?

  • Pour présenter à un auditoire (étudiants, stagiaires, collaborateurs…) une notion, un concept, un processus, un projet : tout ce qui peut se présenter sous la forme d’un « arbre » ou d’une « carte », avec des embranchements. En général les outils vous proposent plusieurs structures ; il est en général possible de partir d’une carte minimale, puis de déployer les branches au fur et à mesure de la présentation. On peut ainsi, sur une même carte passer du général au particulier (ce que ne peut pas faire aussi bien Powerpoint par ex., qui a une structure linéaire dans le temps et propose difficilement ce passage d’une vue générale à une vue détaillée et vice-versa).
  • Pour faire travailler un groupe (étudiants, groupe de travail) sur une notion, un concept, un processus, un projet : structurer une carte permet de décortiquer et structurer la notion, le concept, le processus, le projet ; cela favorise à la fois la recherche d’exhaustivité (évoquer tous les aspects), de structuration (rechercher et caractériser les liens entre les différents aspects) et de synthèse (recherche de lisibilité)
  • Pour une prise de notes structurée : si on maîtrise bien l’outil (et ce n’est pas hypercompliqué), on peut construire la carte « à la volée » lors d’un brainstorming, par exemple ; en fin de travail, chacun ayant la carte sous les yeux pourra la discuter, la valider ; la carte constituera une excellente trace de la discussion ou de la prise de décision.
  • et bien d’autres usages : voir sur cette page web 27 façons d’utiliser les cartes heuristiques

Des outils :

Papier et crayons de couleur, tableau et craies ou feutres, bien sûr, mais il existe des outils informatiques gratuits et puissants.

J’en citerai trois :

  • Freemind : l’ancêtre ; puissant mais pas très « fun » et graphique
  • Freeplane : issu de Freemind, il semble prometteur (mais je ne l’ai pas encore vraiment testé)
  • XMind : celui que j’utilise personnellement et pour lequel je vous ai préparé un tutoriel

Voir mon tutoriel XMind

Pour aller plus loin :

Des sites ou blogs spécialisés sur la question (liste non exhaustive) :

Sites sur les logiciels et sites officiels des logiciels

TUTORIEL VIDEO : les bases de XMind

Voir le tuto

Un exemple de carte réalisée avec XMind

Voir la carte (partagée sur le site xmind.net – téléchargeable / toutes les fonctions ne sont pas actives sur la version en ligne –> si vous possédez XMind, téléchargez-la)


Le tutoriel et la carte exemple sont sous licence Creative Commons

Vous êtes enseignant ou formateur, vous utilisez Powerpoint (et cela ne rend pas idiot, contrairement à ce qu’on peut lire suite à la parution d’un bouquin sur le sujet aux USA… tout dépend de l’usage qu’on en fait !)… Vous souhaitez utiliser ce Powerpoint en ligne (ou localement d’ailleurs) et l’enrichir, pour servir de support à une séquence de formation à distance, ou tout simplement le mettre en ligne en permettant aux visiteurs de votre site de le voir confortablement, sans le télécharger.

AUTHOR POINT est l’outil qu’il vous faut. Je l’utilise depuis plusieurs années et je le trouve toujours aussi efficace. La version « Lite » est téléchargeable et gratuite : il vous faudra seulement laisser une adresse mail.


Vous téléchargez le logiciel, vous l’installez. Il est léger et l’opération est rapide. L’installation ajoutera au logiciel Powerpoint (2007) un onglet dans le ruban ; vous pourrez donc générer votre fichier flash directement depuis Powerpoint.

Author Point Lite respecte les animations de votre diaporama, la narration (audio) et le minutage, s’ils existent. Vous pouvez indiquer qui vous êtes et ajouter un logo ; en modifiant un fichier xml (voir mon tuto), vous pourrez franciser un peu l’interface de présentation, mais en version gratuite le fichier flash source est protégé, donc vous ne pourrez pas aller très loin dans la personnalisation… il ne faut pas non plus demander la lune ! Authorgen est déjà généreux en nous proposant cet outil gratuitement et en n’ajoutant qu’un tout petit logo discret en bas à droite de votre présentation.

Pour l’enseignement et la formation, je vous conseille de choisir l’interface « e-learning standard », qui ajoutera deux fonctions intéressantes : un sommaire, construit automatiquement à partir des titres de vos diapos et un outil de recherche plein texte (et oui, et tout cela est gratuit… merci Authorgen !).

Vous récupérez un dossier contenant l’animation swf, la page html de lancement et d’interface et des fichiers de script. Vous mettez en ligne et faites un lien vers la page index.html et le tour est joué.

Voir une démonstration ici

Tutoriel vidéo

Licence Creative Commons (Paternité – Non commercial – Pas de modification)

Depuis ce mercredi, le site Gallica de la Bibliothèque Nationale de France propose un nouvel outil : un lecteur exportable (voir cette page). Il vous permet d’afficher un livre, un manuscrit, une partition numérisés directement sur votre site, dans un lecteur flash « feuilletable ». Vous pourrez personnaliser l’affichage : taille, présentation, couleur de fond, page affichée au départ…

Un exemple avec ce manuscrit du XVème siècle : Le livre du Coeur d’amour épris, par le roi René d’Anjou.
Au passage de la souris sur le lecteur, vous aurez accès aux fonctions de partage (en haut), mais surtout (en bas) à l’affichage en plein écran et au lien vers le document sur le site de Gallica (logo Gallica).

Attention, ce lecteur n’est pas proposé pour tous les types de documents et il l’est uniquement pour les documents numérisés par la BNF elle-même.
Pour le vérifier, affichez le document et cherchez en bas le lien « lecteur exportable »

en cliquant sur le lien [Personnaliser le lecteur], vous aurez à droite un aperçu du lecteur avec le document choisi et à gauche les options pour le personnaliser N’oubliez pas de cliquer sur le bouton [Rafraichir l'aperçu] à chaque modification. Quand le résultat vous satisfait, copiez le code html proposé et collez-le dans votre page (en mode html bien sûr).

Voir un petit aperçu ci-dessous (Cliquez pour agrandir).

Si vous souhaitez un affichage plus léger, vous avez toujours la possibilité d’insérer un lien vers le document numérisé (ou vers une page précise du document) : copiez-insérez le code dans le champ [permalien vers le document] (ou vers cette page après avoir affiché la page souhaitée). Voir la première copie d’écran dans cet article.

voir le document sur le site de Gallica

ou d’afficher une vignette vers le document, qui servira de lien : copiez-insérez le code dans le champ [Vignette exportable]. Dans ce cas, la vignette affiche la couverture du document, vous n’avez pas le choix.

Le livre du Coeur d amour épris, par le roi René d Anjou.
Le livre du Coeur d amour épris, par le roi René d Anjou.
Source: Bibliothèque nationale de France

ATTENTION ! Assurez-vous de bien copier TOUT le code à partir du site de Gallica, sinon cela ne fonctionnera pas ! Mon conseil : cliquez dans le champ à copier et tapez au clavier ctrl+a pour tout sélectionner, puis ctrl+c pour copier la sélection… et bien sûr insérez les lignes de code en mode html dans votre site, sinon c’est le code qui apparaitra sur votre page et pas le document  :-(

Astuce : vous souhaiterez peut-être que le site Gallica s’affiche dans un nouvel onglet du navigateur, pour que votre propre site reste accessible à votre visiteur… Il vous faudra ajouter ce bout de code (en mode html): target="_blank" dans le lien ; le lien commence par la balise html <a. Par exemple :