12
Fiche n°5 – Les médias. Sommaire Fiche n°5 – Les médias......................................................................................................... 1 Extranet – Blog.......................................................................................................................1 1- Gérer les images avec NextGen................................................................................... 1 1.1- Préparer les images avant de les « téléverser » sur le blog......................................1 1.2- Préparer le blog pour la gestion des images......................................................... 3 1.2.1- Ajouter une galerie/des images...................................................................... 4 1.2.2- Gérer les galeries............................................................................................4 1.3- Mettre les images à disposition sur le blog............................................................ 5 1.3.1- Insérer la galerie dans un article/une page.................................................... 6 1.3.2- Gérer les albums.............................................................................................7 1.3.3- Gérer le widget................................................................................................8 2- Gérer les vidéos avec Viper's Video Quicktag.............................................................. 9 3- Gérer les fichiers mp3 avec Mp3 Jplayer....................................................................10 3.1- Envoyer le mp3 dans les médias......................................................................... 11 3.2- Insérer le code dans l'article/la page....................................................................11 http://blogs.lyceecfadumene.fr/informatique

Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

Fiche n°5 – Les médias.SommaireFiche n°5 – Les médias.........................................................................................................1Extranet – Blog.......................................................................................................................1

1- Gérer les images avec NextGen...................................................................................11.1- Préparer les images avant de les « téléverser » sur le blog......................................1

1.2- Préparer le blog pour la gestion des images.........................................................31.2.1- Ajouter une galerie/des images......................................................................41.2.2- Gérer les galeries............................................................................................4

1.3- Mettre les images à disposition sur le blog............................................................51.3.1- Insérer la galerie dans un article/une page....................................................61.3.2- Gérer les albums.............................................................................................71.3.3- Gérer le widget................................................................................................8

2- Gérer les vidéos avec Viper's Video Quicktag..............................................................93- Gérer les fichiers mp3 avec Mp3 Jplayer....................................................................10

3.1- Envoyer le mp3 dans les médias.........................................................................113.2- Insérer le code dans l'article/la page....................................................................11

http://blogs.lyceecfadumene.fr/informatique

Page 2: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

Extranet – Blog

1- Gérer les images avec NextGen

NextGen est un module additionnel de Wordpress qui permet de gérer des galeries d'images.

1.1- Préparer les images avant de les « téléverser » sur le blog

1- Redimensionner les images afin de limiter la place qu'elles prendront sur votre espace. Petit rappel, vous disposez de 300 Mo pour votre blog.

Pour visualiser les propriétés des images que vous souhaitez utiliser, ouvrir le logiciel Xnview et afficher les photos comme ci-dessous. (On peut aussi utiliser Paint.NET ou The Gimp. L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.)

Les trois dernières images ont des dimensions (2016x1512 px, 16 millions de couleurs) et des poids (770,35 ko, 793,70 ko et 877,21 ko) trop importants pour être incorporer au blog directement. Il faut les redimensionner.

Page 1/11 - http://blogs.lyceecfadumene.fr/informatique

Page 3: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

Page 2/11 - http://blogs.lyceecfadumene.fr/informatique

1- Sélectionner les images à redimensionner puis faire clic droit « Convertir »

2- Choisir la cible du redimensionnement :- Renommer (garde l'original et créé une copie redimensionnée)- Remplacer (supprime l'original et le remplace par la copie redimensionnée)- Choisir le format : jpg

Les images sélectionnées apparaîssent ici

Onglet « Transformations »

Onglet « Général »

1

2

3

3- Choisir la transformation :- Cliquer sur redimensionner- Cliquer sur « Ajouter »- Choisir la largeur et cliquer sur « Garder les proportions » et sur « Respecter l'orientation inverser »- Cliquer sur « Lancer »

Page 4: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

2- Préparer une archive zip contenant les images que vous souhaitez ajouter à une galerie du site.

1.2- Préparer le blog pour la gestion des images

Page 3/11 - http://blogs.lyceecfadumene.fr/informatique

- Faire un clic droit sur le dossier à compresser (ou passer par le menu « fichier »- Choisir « 7-Zip » puis « Ajouter à nom_du_dossier.zip »

- le logiciel crée l'archive (il existe d'autres logiciels pour faire ce travail : Izarc, Winrar, Winzip...) L'archive contenant les

images retravaillées est prête à être transférée sur votre blog.

Cet extension n'est pas encore traduite en français.Cela devrait être le cas assez rapidement.

Page 5: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

1.2.1- Ajouter une galerie/des images

Menu « Gallery > Add Gallery / Images »

Avant de créer la galerie, il faut avoir préparé une archive (.zip) contenant les images.

Un message vous indique que tout s'est bien déroulé.

On peut aussi envoyer des images pour compléter une galerie existante. Il suffit de la sélectionner dans la liste déroulante « Create a new gallery ».

1.2.2- Gérer les galeries

Menu « Gallery > Manage Gallery

Page 4/11 - http://blogs.lyceecfadumene.fr/informatique

1- Saisir un nom pour la galerie2- Cliquer sur « Add Files » (on peut ajouter des images ou un ensemble d'images sous la forme d'une archive zip.3- Sélectionner les fichiers dans le poste de travail.4- Cliquer sur « Start Upload » pour lancer le téléversement des images.

1

2

3

4

Page 6: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

Cliquer sur la galerie que vous souhaitez paramétrée.

1- Cliquer sur « Ajouter une page », pour créer une nouvelle page sur le blog sur laquelle les images seront présentées à vos visiteurs. On peut gérer l'arborescence des pages dans la liste déroulante au dessus du bouton.

2- Remplir les descriptions de la galerie et des images

3- Cliquer sur « Sauvegarder les modifications » pour sauvegarder vos réglages.

1.3- Mettre les images à disposition sur le blog

Il existe plusieurs façons de mettre les galeries en lignes :

– en créant une page pour la galerie (voir le point précédent)

– en insérant la galerie dans un article

– en utilisant un album

– en utilisant un widget.

Page 5/11 - http://blogs.lyceecfadumene.fr/informatique

1

3 2

Page 7: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

1.3.1- Insérer la galerie dans un article/une page

« Select a display type » : choisir comment la galerie sera présentée dans l'article ou la page.

« What would you like to display ? » : choisir les images à présenter (une galerie, un album, une image)

« Customize the display settings » : paramétrer l'affichage (nombre d'images par page, nombre de colonnes de la galerie, etc.

Page 6/11 - http://blogs.lyceecfadumene.fr/informatique

Page 8: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

« Sort or exclude images » : choisir le tri des images (par date, par nom, par ID) et éventuellement exclure des images de l'affichage de la galerie.

La galerie est insérée dans l'article ou la page. Pour la modifier, il suffit de cliquer dessus.

1.3.2- Gérer les albums

Menu « Gallery > Manage Albums

Un album est constitué de galeries et éventuellement de sous-albums. On peut ainsi constituer une véritable arborescence dans les galeries.

Page 7/11 - http://blogs.lyceecfadumene.fr/informatique

Choisir un album existant ou ajouter un nouvel album en saisissant son nom puis en cliquant sur Ajouter

Aperçu du résultat sur le blog.

Page 9: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

On peut ensuite insérer cet album dans une page ou un article via le même icône que pour les galeries :

1.3.3- Gérer le widget

Page 8/11 - http://blogs.lyceecfadumene.fr/informatique

En bleu, les galeries, en rouge les albums.On peut déplacer les galeries par un simple cliquer-glisser.

Le widget s'appelle « Widget NextGEN ».

Page 10: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

2- Gérer les vidéos avec Viper's Video Quicktag

Un fois l'extension activée, on accède à ces paramètres dans le menu « Réglages ». Je vous conseille de cocher toutes les cases.

Page 9/11 - http://blogs.lyceecfadumene.fr/informatique

Page 11: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

Il reste à utiliser la barre d'outils pour insérer des vidéos dans vos articles et vos pages.

Exemples :

Youtube :

Fichier personnel (il vous faut encoder vos vidéos au format flv et les téléverser dans vos médias via Médias > Ajouter) :

3- Gérer les fichiers mp3 avec Mp3 Jplayer

Après avoir activé l'extension, il y a un paramétrage à faire dans le menu « Réglages – Mp3 Jplayer ».

L'extension est tout de suite utilisation dans vos articles et vos pages pour mettre des mp3 en ligne.

Il n'existe pas de bouton dans la barre d'outils de l'éditeur graphique. Vous devez procéder en deux étapes.

Page 10/11 - http://blogs.lyceecfadumene.fr/informatique

Page 12: Fiche n°5 – Les médias....L'avantage de Xnview, c'est qu'il peut traiter plusieurs images d'un seul coup.) Les trois dernières images ont des dimensions (2016x1512 px, 16 millions

3.1- Envoyer le mp3 dans les médias

3.2- Insérer le code dans l'article/la page

Une fois le fichier téléverser, vous pouvez modifier ses paramètres :

Le code a insérer dans l'article :

[mp3j track="http://blogs.lyceecfadumene.fr/informatique/files/2012/03/LYCEE-_0100.mp3"]

Page 11/11 - http://blogs.lyceecfadumene.fr/informatique

Faire « Ajouter » puis « Parcourir » et sélectionner le fichier au format mp3 sur votre PC.Vous pouvez suivre le téléchargement à l'écran.

Copier l'adresse web du fichier, puis aller dans l'article ou la page dans laquelle vous souhaitez insérer le mp3.