Wiki.cerpeg : Page créée avec «  fichier:home2.png Accueil > WordPress > Les médias == Les médias== Il est impossible d'imaginer un site Web sans médias... Les médias intègrent des fichiers audios, vidéos, images, pdf, etc '''-2-'''. Il est indispensable de télécharger le médias pour le déposer dans une page ou un article. {| border="0" | * '''-1-''' Affichage des médias en vignette ou... »

2022-10-20T20:02:42Z

Page créée avec «  fichier:home2.png Accueil > WordPress > Les médias == Les médias== Il est impossible d'imaginer un site Web sans médias... Les médias intègrent des fichiers audios, vidéos, images, pdf, etc '''-2-'''. Il est indispensable de télécharger le médias pour le déposer dans une page ou un article. {| border="0" | * '''-1-''' Affichage des médias en vignette ou... »

Nouvelle page

[[fichier:home2.png]] [[Accueil|Accueil]] > [[WordPress]] > [[Les médias|Les médias]] 

== Les médias==

Il est impossible d'imaginer un site Web sans médias...
Les médias intègrent des fichiers audios, vidéos, images, pdf, etc '''-2-'''. Il est indispensable de télécharger le médias pour le déposer dans une
page ou un article.

{| border="0"
|
* '''-1-''' Affichage des médias en vignette ou en liste
* '''-3-''' Barre de recherche pour retrouver rapidement le fichier recherché. Attention, le nommage du média est très important pour le trouver facilement.
* '''-4-''' Navigation d'une page à l'autre
* '''-2-''' Tri par nature de fichier et par date
|
[[Fichier:Media7.png|700 px]]
|}

== Les médias "document"==

Des fichiers peuvent être mis à disposition sur le site mais attention au format.
Il sera possible de télécharger des documents ayant pour extension : .pdf, .doc, .docx, .ppt, .pptx, .pps, .ppsx, .odt, .xls, .xlsx, .psd
Ces formats sont intégrer par lien dans le site
{|border="0"
|

* '''-1-''' Sélectionner les médias "documents"
* '''-2-''' Filtrer la recherche pour faire apparaitre la liste des documents
|
[[fichier:media10.png|vignette|Sélection du média "document"]]
|-
|
* '''-3-''' Intégrer un nouveau bloc à l'article
* '''-4-''' Sélectionner le bloc '''Fichier''' pour afficher le document en tant que lien dans l'article (ou la page)
|
[[fichier:media11.png|vignette|Sélection du média "document"]]
|-
|
* '''-4-''' '''Téléverser''' pour récupérer un ficher d'un support externe ou '''bibliothèque de médias''' pour intégrer un média de la bibliothèque
|
[[fichier:media12.png|vignette|Fenêtre d'ajout du média]]
|-
|
* '''-5-''' Filtrer le document par date éventuellement
* '''-6-''' Sélectionner le fichier par un clic
* '''-7-''' Valider la sélection '''Sélectionner'''
|
[[fichier:media13.png|vignette|Upload Media]]
|-
|
* '''-8-''' BLOC FICHIER le document s'affiche comme un lien téléchargeable. Il suffit de lui donner un titre éventuellement et de le positionner dans l'article ou la page
* '''-9-''' FRONT OFFICE Affichage en tant que lien à télécharger du document sur le front office du site
|
[[fichier:media14.png|vignette|Bloc fichier]]
|}
{{#evt:service=youtube|id=https://youtu.be/DHIqN6LonYM|dimensions=380x220}}
 

== Les médias Image ==

Une image trop lourde impacte sur la vitesse de chargement de la page. Il s'agit d'un critère important puisqu'il va non seulement décourager
l'internaute mais aussi les robots (spiders).
Donc, le site sera pénalisé en terme de référencement. WordPress adapte automatiquement l'image au besoin du site (taille, poids, etc.).
La taille maximale par défaut de téléversement d'une image dans WP est de 50 Mb (Méga Bytes ou Méga Octets Mo).
 
OpenSource de gestion de l'image : Xconvert[https://www.xnview.com/fr/xnconvert/], PhotoFiltre [http://www.photofiltre-studio.com/download.htm], Paint.net [https://www.getpaint.net/], Paint pour windows
 

=== Formats, dimension & poids d'images===
{| border="0"
|
3 formats de fichiers sont privilégiés :
* JPEG : format compressé, fichier léger, mais avec perte de qualité de résolution et pas de transparence. '''À utiliser pour les photos'''
* PNG : format recommandé par le W3C (World Wide Web Consortium[https://www.w3c.fr/a-propos-du-w3c-france/la-mission-du-w3c/]). Ce format conserve la transparence de l'image mais il est un peu lourd. '''À utiliser pour les logos en transparence et images avec très peu de couleurs'''
* GIF : moins utilisé que les 2 précédents, il permet de prendre en charge l'animation. '''À utiliser occasionnellement en raison du poids du fichier'''

Si le fichier image est trop lourd, il existe des compresseurs en ligne assez efficaces selon le format de fichier.
* compresser un fichier PNG [https://compresspng.com/fr/]
* compresser un fichier JPEG[https://compressjpeg.com/fr/]
* convertir png en jpeg[https://png2jpg.com/] ou jpeg en png[https://jpg2png.com/]
* I-IMG [https://www.iloveimg.com/fr] : outil en ligne pour travailler l'image (compresser, redimensionner, recadrer, convertir un format jpg en png, etc)
|}
La résolution, les dimensions et le poids du fichier (données indicatives)
{| class="wikitable alternance"

! scope=col | Résolution
! scope=col | Dimension H x L
! scope=col | Poids du fichier
|-
! width="50%" | 100 dpi
| 364 x 559 px
| 596 ko
|-
! width="10%" | 200 dpi
| 728 x 1118 px
| 2,33 Mo
|-
! scope="row" |300 dpi
| 1092 x 1677 px
| 5,24 Mo
|-
! scope="row" |800 dpi
| 2912 x 4472 px
| 37,3 Mo
|}

=== Gestion des images===

* '''résolution d'une image''' : nombre de pixels à savoir sa "dimension informatique". WordPress redimensionne automatiquement les images trop grandes. Il est donc inutile de téléverser une image d'une largeur de 2000 px si la largeur maximale prise en compte par le site est de 720 px en raison de son poids. Le poids d'origine est conservé malgré l'adaptation de l'image : difficulté d'affichage, lenteur.
:: Redimensionner une image avec Paint
:: Redimensionner une image avec Paint.net
:: Redimensionner un lot d'images avec XnConvert[https://www.xnview.com/fr/xnconvert/].

* '''nommage de l'image''' : il ne faut pas négliger le nommage puisqu'il participe activement au référencement du site. Le nommage doit décrire l'image. Le téléversement de fichier impose de bannir : espaces, accents, majuscules et autres caractères exotiques (ex : image_amenagement-du-pres_2020.png)
WordPress propose une extension facilitatrice du nommage des images pour un meilleur référencement et éviter les oublis[https://fr.wordpress.org/plugins/media-file-renamer/]
 
 

=== Quelques astuces techniques ===
{| border="0"
|
* '''Connaitre les propriétés de l'image'''
:: '''clic droit''' sur l'image pour accéder au menu contextuel
:: Sélectionner '''"Propriétés"'''
:: '''-1- Général''' Taille 1,14 Mo. Ce fichier est trop lourd, l'image ne va pas s'afficher correctement c'est-à-dire avec fluidité
:: '''-2- Détails''' cette image est trop grande d'où son poids. Elle fait H (height) 6000 x L (width)4058 px. Il faut modifier ses dimensions
|
[[Fichier:Wp-image proprietes.png|vignette|Propriété d'un fichier]]
|-
|
* '''Modifier les dimensions de l'image H x L''' 
La modification des dimensions peut se faire avec paint très rapidement.
:: '''-1-''' Ouverture du fichier image, '''Redimensionner'''
:: '''-2-''' Pourcentage ou Pixels selon l'action à mener.
:: '''-3-''' 500 px de hauteur en laissant les proportions. Le réglage de la largeur se fait automatiquement
:: '''-4-''' Sélection de la conservation des proportions ou non
:: '''-5-''' Affichage de l'image redimensionnée
:: '''-6-''' Visualisation des propriétés de ce nouveau fichier : 627 Ko et 749 x 500 px
|
[[Fichier:wp-dimension1.png|vignette|Paint - Redimensionner une image]]
|-
|Le fichier est encore un peu lourd 627 ko, il faut le compresser à l'aide d'une compresseur en ligne
:: '''-7-''' Téléversement du fichier dans l'application en ligne permettant la compression (ici, à 75 %)
:: '''-8-''' Poids après '''compression 135 ko'''. Ceci est parfait pour l'affichage sur le site
|
[[Fichier:wp-dimension2.png|vignette|Compression du png]]
|-
|
* Ajouter une transparence à l'image
|}
{{#evt:service=youtube|id=https://youtu.be/c4vphUrkpWE|dimensions=380x220}}
 

===Insertion d'une image===

Les fichiers image (png ou jpeg) sont gérés dans les médias et identifiés en tant que tels. Un bloc "image" dans l'article ou la page intègre ce type
de fichier. Le fichier image doit être téléversé puis renseigné pour sa lisibilité sur le site et son référencement comme un fichier audio ou vidéo
peut l'être.
{| border="0"
|
* '''-1-''' Ajout du bloc '''Image'''. Le choix d'un autre bloc média n'affiche pas l'image
|[[Fichier:wp-image1.png|vignette|Insertion d'une image]]
|-
|
* '''-2-''' Téléversement de l'image dans les médias et insertion dans l'article
* '''-3-''' Alignement de l'image dans l'article ou la page
|[[Fichier:wp-image2.png|vignette|Insertion d'une image]]
|}
{{#evt:service=youtube|id=https://youtu.be/qgW-nils3go|dimensions=380x220}}
 
===VIDEO - Gestion des formats de fichiers image===
Cette vidéo présente quelques astuces pour réduire le poids d'un fichier image, convertir un .png en .jpg, convertir un fichier .jpg en .pdf ou encore fusionner plusieurs fichiers .pdf en un seul.
{{#evt:service=youtube|id=https://youtu.be/xxgfgeFFTCY|dimensions=380x220}}

==Les médias Audio ==

Une bande audio prend de plus en plus de place sur un site puisqu'il permet d'illustrer les articles.

'''''"Cela fait 15 ans que j’ai un blog. Ces dernières années, j’ai remarqué que les internautes lisaient moins. Je me suis toujours concentré sur des '''''
'''''papiers longs formats, pas sur des news ou des articles courts. Les gens n’ont plus le temps pour cela, l’attention à 100% est complètement saturée.'''''
'''''Je travaillais et vivais à l’époque à New York, où j’ai pu voir éclore la tendance des podcasts, et rencontrer des personnes qui s’impliquaient'''''
'''''dans ce nouveau format. Cela m’a poussé à m’y mettre et à aller chercher une audience différente, l’audio m’aidant également à donner un'''''
'''''vrai ton à mes interventions.''''' ''Interview de Grégory Pouy, podcasteur expert en marketing digital''
 
OpenSource de gestion Audio : AUDACITY[https://audacity.fr/]
 
=== Insertion dans les médias===
Les fichiers audios sont gérés dans les médias et identifiés en tant que tel. Un bloc "audio" dans l'article ou la page intègre ce type de fichier.
Le fichier audio doit être téléversé puis renseigné pour sa lisibilité sur le site et son référencement comme un fichier image ou vidéo peut l'être.
{| border="0"
|
* '''-1-''' titre de la bande audio
* '''-2-''' bande audio. Elle peut être jouée en direct.
* '''-3-''' légende
* '''-4-''' affichage de la description du fichier inscrite dans les propriétés
* '''-5-''' ajout d'une image permettant de mettre en avant la bande audio
|
[[Fichier:Wp-audio1.png|vignette|500 px|Téléversement du fichier audio]]
|-
|

=== Insertion dans l'article ou la page===
* '''-6-''' Ajout du bloc SON à l'article
|[[Fichier:Wp-audio2.png|vignette|Ajout d'un bloc audio à un article/page]]
|-
|
* '''-7-''' Sélection dans la bibliothèque des médias du son téléversé. Il n'est pas possible de jouer le son à partir de l'intégration dans le bloc. Il faut le faire à partir du FrontOffice
|[[Fichier:Wp-audio3.png|vignette|Bloc audio|]]
|-
|
* '''-8-''' Affichage du la bande audio en FrontOffice
|[[Fichier:Wp-audio4.png|vignette|Intégration au site|]]
|}
{{#evt:service=youtube|id=https://youtu.be/Kifgt-QK1n8|dimensions=380x220}}
 

==Les médias vidéos==

Les vidéos permettent d'animer un site internet en présentant l'entreprise, les produits, les nouveautés, etc.
Une vidéo captent l'attention et provoque souvent la lecture de l'article s'y rapportant. Le souci est le stockage
du fichier vidéo souvent très lourd. WordPress accepte le stockage dans les médias mais le téléchargement est bloqué
par défaut à 512 Mb. La meilleure façon d'héberger les vidéo est d'utiliser une '''plateforme professionnelle'''
dont c'est la vocation (youtube, Viméo, Animoto, DailyMotion, etc.).

Les vidéos participent au référencement du site, il ne faut pas les négliger. Quelques chiffres concernant les vidéos :
* 80 % du trafic data mondial concerne le visionnage de vidéos sur internet (Cisco[https://www.cisco.com/c/fr_fr/index.html])
* 90 % des usagers trouvent très utile de regarder une vidéo avant d’acheter un produit
* YouTube comptabilise plus de visites que FaceBook en perte de vitesse (SimilarWeb[https://www.similarweb.com/fr])

'''OpenSource de gestion de vidéos''' : OpenShot Vidéo[https://www.openshot.org/fr/], DaVinci Resolve [https://www.blackmagicdesign.com/fr/products/davinciresolve/]

Le site doit obligatoirement intégrer des vidéos, et cette intégration peut se faire de plusieurs manières :
* un téléchargement dans les médias,
* un lien vers une vidéo extérieure au site
* une vidéo embarquée (youtube,etc.). Le code d'intégration de la vidéo est récupéré d'un autre site pour être affichée sur notre site.

===Vidéo issue d'une plateforme dédiée (ex :YouTube, Vimeo, etc)===
{| border="0"
|
* '''Partager / Copier le lien''' Copier le lien du site YouTube pour l'exemple.
* Sélectionner le bloc '''contenu embarqué / YouTube'''
* '''Copier le lien YouTube''' dans le bloc du contenu embarqué.
|-
|
[[Fichier:article3.png|vignette|YouTube - Partage]]
|
[[Fichier:article4.png|vignette|Bloc contenu embarqué YouTube]]
|
[[Fichier:media5.png|vignette|Bloc contenu embarqué YouTube]]
|}

===Vidéo issue des médias===
{| border="0"
|
Une vidéo téléchargée dans les médias peut être affichée sur le site comme un lien ou comme un contenu embarqué. Par défaut, l'affichage se fait en contenu embarqué. Le poids du fichier peut bloquer l'import de la vidéo dans les médias. Dans ce cas, plusieurs solutions sont possibles : compresser la vidéo, couper la vidéo, insérer un lien embarqué, etc.).
|-
|
[[Fichier:article5.png|300 px|vignette|Bloc commun - Vidéo]]
|
[[Fichier:article6.png|300 px|vignette|Intégration de la vidéo]]
|-
|
[[Fichier:media8.png|300 px|vignette|Ajout de la vidéo à partir des médias]]
|
[[Fichier:media9.png|300 px|vignette|Affichage de la vidéo dans l'article]]
|}
{{#evt:service=youtube|id=https://youtu.be/LWnPB6zFw04|dimensions=380x220}}
 

'''Comment créer sa chaine YouTube ?'''
{{#evt:service=youtube|id=https://youtu.be/46lag1_JpZ4|dimensions=380x220}}

 

== L'intégration d'un diaporama ==
 
'''Smart Slider / Ajouter un diaporama''' 

L'intégration d'un diaporama conçu sur LibreOffice "Présentation" ou PowerPoint peut se faire de différente manière. La solution dépend des extensions de WordPress. Nous allons voir plusieurs solutions d'intégration.
 
=== Diaporama PowerPoint basic ===

Le bloc '''Embed Any Document''' "contenu embarqué / Document" permet d'intégrer à la page ou à l'article un document.
Ce bloc est une extension intégrée à WordPress '''Embed Any Document'''.

'''Cette extension fonctionne désormais uniquement avec la version 5.3 de WordPress'''. La solution est de transformer le diaporama en vidéo .mp4
{| border="0"
|
* '''1''' Enregistrer le diaporama au '''format .pptx'''
* '''2''' Sélectionner le Bloc "DOCUMENT" dans le contenu embarqué WP
* '''3''' Téléverser le diaporama dans les médias et le sélectionner
* '''4''' '''ADD DOCUMENT''' choisir dans les options de visionnage '''Google Docs Viewer'''

|[[fichier:document1.png|vignette|Bloc Document embarqué]]
|[[fichier:document3.png|vignette|téléversement du document]]

|-
|
* '''5''' Vérifier l'intégration du diaporama dans la page ou l'article

|[[fichier:document2.png|vignette|Options d'intégration]]
|[[fichier:Document4.png|vignette|Diaporama intégré]]
|}

{{#evt:service=youtube|id=https://youtu.be/tS4BtYTEZxE|dimensions=380x220}}
 

=== Diaporama PowerPoint en format vidéo mp4 ===
Le diaporama est transformé en vidéo au formant .mp4.
{| border="0"
|
* '''1''' PowerPoint - Exporter / Créer une vidéo
* '''2''' WordPress - Insérer un bloc vidéo '''-1-''' et ajuster les paramétrage de lecture (lecture automatique, en boucle, sans son, affichage des commandes de lecture, lancement au clic) '''-2-'''

|[[fichier:document6.png|vignette|Export au format .mp4]]
|[[fichier:document7.png|vignette|Intégration du diaporama vidéo .mp4]]
|}
{{#evt:service=youtube|id=https://youtu.be/RLLfgSVaXuM|dimensions=380x220}}
 

=== Diaporama WordPress ou Slide-Show ===
 
WordPress permet de créer un défilement d'images '''UN SLIDE '''. Ces images sont intégrées à la galerie des médias puis animées dans le contenu du site. Il suffit d'ajouter les paragraphes utiles comme dans un diaporama.
 
{| border="0"
|
|[[fichier:slide1.png|vignette|300px|Aperçu d'un Slide]]
|[[fichier:slide2.png|vignette|300px|Création d'un Slide à partir de Smart Slider]]
|}
 
{{#evt:service=youtube|id=https://youtu.be/DI27AAftyKc|dimensions=380x220}}
 

=== Diaporama/Présentation embarqué(e) ===
 
Prezzy, Genial.ly, etc. permettent de créer facilement des présentations dynamiques qu'il est possible d'intégrer à la page ou à l'article du site en utilisant un lien de partage. Le Bloc '''Contenu embarqué''' intègre le lien au site. Quelle que soit l'application, il faut partager la ressource pour récupérer le lien de partage puis la copier dans le bloc '''contenu embarqué'''.
{| border="0"
|[[fichier:embarque2.png|vignette|Intégration d'un contenu embarqué]]
|[[fichier:embarque1.png|vignette|Lien de partage depuis l'application]]
|[[fichier:embarque3.png|vignette|400px|Création de la présentation]]
|}

== L'intégration d'une carte dynamique ==

=== Carte Google Maps===

L'intégration embarquée d'une carte Google permet de dynamiser la page ou l'article sans faire de lien vers Google Maps.
{| border="0"
|

* '''-1-''' Rechercher sur Google Maps le lieu puis cliquer sur '''Partager'''.
* '''-2-''' Sélectionner '''Intégrer une carte''' et copier le contenu HTML
* '''-3-''' Choisir, dans la page ou l'article, le bloc '''Mise en forme - HTML personnalisé'''
|[[fichier:maps1.png|vignette|Google Maps - Partager]]
|[[fichier:maps2.png|vignette|WordPress - Bloc HTML]]
|-
|
* '''-4-''' Copier le code HTML dans le Bloc
* '''-5-''' Vérifier dans le Front Office la carte embarquée
|[[fichier:maps3.png|vignette|WordPress - Bloc HTML copie du code]]
|[[fichier:maps4.png|vignette|200px|WordPress - Front Office affichage de la carte]]
|}
{{#evt:service=youtube|id=https://youtu.be/8UYLpm7UMZI|dimensions=380x220}}

 

=== Carte avec images interactives===

Les cartes interactives sont des cartes avec incrustation de photos, de vidéos et de liens explicatifs.
{| border="0"
|

* thinglink [https://www.thinglink.com/]
* framacarte [https://framacarte.org]
|[[fichier:wp-link1.png|vignette|WordPress - Front Office affichage de la carte]]
|}

Les médias - Historique des versions