SlideShare une entreprise Scribd logo
1  sur  31
TD Multimédia :
cours 1
Année 2012-2013
Groupe C
Objectifs du TD Multimédia
 Se familiariser avec les grands
principes à respecter pour réussir son
site internet
 Connaître les grandes étapes de la
création de sites internet
 Découvrir un logiciel CMS
 Préparer votre avenir professionnel
(confrontation probable à la
création/maj de site internet)
Evaluation
 Ce TD s’articule avec le cours de
Sophie Gosselin
 Dossier de présentation du projet
culturel
Détail des cours
 Cours 1 (2h)
Découverte du logiciel
Veille et réflexion sur votre menu
 Cours 2 (2h)
Point sur les grands principes du web
Début de conception du site
 Cours 3 (3h)
Conception du site
 Cours 4 (2h)
Démonstration de votre site
Evaluation du site
Un projet de communication
La création d’un site web s’articule
généralement dans un projet global
de communication :
• Quel est mon message ?
• Quelles sont mes cibles ?
Un site internet : pour quoi
faire ?
 Exister, assurer une présence sur
Internet
 Diffuser des informations relatives à
sa structure, son projet, son
événement
 Valoriser l’image de sa structure, de
son projet, de son événement
Que communiquer ?
1 - Définir et hiérarchiser son contenu
Création de sites
internet
Démonstration d’un logiciel CMS
Création d’un site sous wordpress
C’est quoi un CMS (1/2)
 CMS = Content management system
 En français : système de gestion de contenus
 Logiciel CMS = permet de créer et de mettre à
jour son site web
 Une des grandes nouveautés introduites par
les logiciels CMS = la séparation contenu des
pages / forme générale du site internet
> Le concepteur du site se centre sur le contenu et
plus sur les aspects techniques
Contributeurs
/
Rédacteurs
Internautes
Back office
du site internet
=
Module
d’administration
Accès à la création et à la
modification du contenu
Front office
Le contenu est mis en forme
selon le gabarit
Login
Mot de passe Gabarit
Publication
Un CMS : comment ça
marche ?
Contributeurs
/
Rédacteurs
Internautes
Back office
du site internet
=
Module
d’administration
Accès à la création et à la
modification du contenu
Front office
Le contenu est mis en forme
selon le gabarit
Login
Mot de passe Gabarit
Publication
Exemple 1 : le site de
l’Université de Nantes
Contributeurs
/
Rédacteurs
Internautes
Back office
du site internet
=
Module
d’administration
Accès à la création et à la
modification du contenu
Front office
Le contenu est mis en forme
selon le gabarit
Login
Mot de passe Gabarit
Publication
Exemple 2 : un site créé
sous wordpress
C’est quoi un CMS (2/2)
 Un CMS se compose d’une interface
d’administration (back office) simple à utiliser
avec laquelle on organise et on publie le
contenu du site (front office)
 Accessible via navigateur internet (pas
d’application à télécharger)
 Les CMS intègrent généralement un éditeur
html (WYSIWYG) évitant au rédacteur du
contenu de travailler directement en html =
une révolution !
• WYSIWYG : What You See Is What You Get
Les CMS = une révolution
 La conception de sites et de leurs
contenus n’est plus l’apanage des
informaticiens
 Ce travail devient logiquement l’affaire
des « communicants »
 Et l’affaire de tous
Les CMS = une révolution
Sites web créés
par des informaticiens
Sites web créés
par des communicants
Tout le monde peut
intervenir sur le web
Il devient « participatif »
Web 1.0 Web 2.0
Invention du CMS
Exemples d’outils CMS
 Spip
 Joomla
 Wordpress
 Blogger (racheté par google en 2003)
Démonstration d’un CMS
propriétaire (Ksup)
 http://admin.univ-nantes.fr
Pourquoi Wordpress ?
 Une plateforme de blog avant tout
 Possibilité de créer avec Wordpress des
sites internet qui ne ressemblent pas à
des blogs
 Exemple :
 http://news.harvard.edu/gazette/
 http://www.campuscommunication.fr/
 http://www.sport-upmc.fr/
 http://inksie.com/
Avantages de Wordpress (1/2)
 Outil CMS
 Libre (open-source) et gratuit
 Respectueux des standards du web
 Communauté active
 Rapide à installer
Avantages de Wordpress (2/2)
 Simple d’utilisation, ergonomique
 Fonctionnalités :
• Gestion des rôles des utilisateurs
• Personnalisation de l’apparence (thème)
• Ajout d’extensions (plugins)
• Référencement du site
• Flux rss disponibles
Personnalisations originales
 http://www.thehorizontalway.com/
 http://blogsolid.com/
 http://www.deliciousdays.com/
 http://news.harvard.edu/gazette/
 Des dizaines de milliers d’exemples
de sites créés sur wordpress :
http://wordpress.org/showcase/
Wordpress : 2 possibilités
 1 - Utiliser Wordpress en se créant un
compte basique sur
http://fr.wordpress.com/
• Facilité, mais pas d’url propre
(http://testacs.wordpress.com/) pour votre site et
options limitées
 2 - Installer wordpress sur un serveur
(+ hébergement)
• Plus d’options, url personnalisable, mais
coût à prévoir et installation un peu
technique
Option n°2 : hébergement
par vos propres moyens
Hébergement = mise à disposition d’un
espace sur un serveur web vous
permettant de bénéficier de plus
d’options au niveau de wordpress :
• installation de thèmes,
• Installations d’extensions,
• url propre
 Nécessité d’installer un logiciel FTP
(File Transfert Protocol) vous permettant
d’accéder à votre serveur web distant
Le coût d’un hébergement
 Ex : Hébergeurs OVH, 1and1,
heptoweb, planethoster
 Coût : prestation maximale à 60€/an
Démo de wordpress (1/3)
 http://blogspedago.univ-nantes.fr
 Tableau de bord
 Notion d’articles (= posts)
• Catégories, mots-clés
 Notion de pages
 Notion de commentaires
Démo de wordpress (2/3)
 Bibliothèque de médias
• Images, vidéos, audio, fichiers divers…
 Changement rapide de l’apparence
d’un site
 Gestion des utilisateurs
• Ajouts d’utilisateurs disposant de rôles
différents sur un même site
Démo de wordpress (3/3)
 Gestion du workflow
 Système de validation de contenu
 Possibilité de suivre les versions
successives d’une page
 Possibilité de revenir sur une version
antérieure d’une page en cas d’erreur
A votre tour !
Par groupe projet, découvrez la
plateforme et les fonctionnalités de
Wordpress : exercices
http://blogspedago.univ-
nantes.fr/testvincent2/wp-admin/
Exercice 1
Créer un article avec :
Titre : titre du projet
Noms/prénoms
Master
Exercice 2
Réflexion sur votre projet :
L’objet du site
Les publics cibles
Type de site
Ligne éditoriale
Rubriquage

Contenu connexe

Tendances

Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3
robinparisi
 

Tendances (20)

Les systèmes de gestion de contenus des sites Internet ou CMS
Les systèmes de gestion de contenus des sites Internet ou CMSLes systèmes de gestion de contenus des sites Internet ou CMS
Les systèmes de gestion de contenus des sites Internet ou CMS
 
Cms
CmsCms
Cms
 
Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3
 
Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
 
Initiation à WordPress
Initiation à WordPressInitiation à WordPress
Initiation à WordPress
 
Presentation cms
Presentation cmsPresentation cms
Presentation cms
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
 
Choix strategique d'un CMS
Choix strategique d'un CMSChoix strategique d'un CMS
Choix strategique d'un CMS
 
Développer son site internet et optimiser son référencement
Développer son site internet et optimiser son référencementDévelopper son site internet et optimiser son référencement
Développer son site internet et optimiser son référencement
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
 
Le web dynamique
Le web dynamiqueLe web dynamique
Le web dynamique
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
 
Webdesign
WebdesignWebdesign
Webdesign
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
Construire son site avec un CMS
Construire son site avec un CMSConstruire son site avec un CMS
Construire son site avec un CMS
 
Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?
 
Mon parcours formatif
Mon parcours formatifMon parcours formatif
Mon parcours formatif
 
Cms Podcamp 2009
Cms Podcamp 2009Cms Podcamp 2009
Cms Podcamp 2009
 

Similaire à Cours1

WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Chi Nacim
 
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiagoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
Lionel Pointet
 
Journalisme plurimedia - Deuxième Partie
Journalisme plurimedia - Deuxième PartieJournalisme plurimedia - Deuxième Partie
Journalisme plurimedia - Deuxième Partie
yannbelloir
 
Wordpress final
Wordpress finalWordpress final
Wordpress final
cne1droit
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
Laurent Moccozet
 

Similaire à Cours1 (20)

WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiagoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
 
2018 Cours projet web collaboratif Partie1
2018 Cours projet web collaboratif Partie12018 Cours projet web collaboratif Partie1
2018 Cours projet web collaboratif Partie1
 
2015 Projet Web Collaborartif, Introduction au cours
2015 Projet Web Collaborartif, Introduction au cours2015 Projet Web Collaborartif, Introduction au cours
2015 Projet Web Collaborartif, Introduction au cours
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
Journalisme plurimedia - Deuxième Partie
Journalisme plurimedia - Deuxième PartieJournalisme plurimedia - Deuxième Partie
Journalisme plurimedia - Deuxième Partie
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Formation Créajeunes - Simplon.co par Michel Lubac
Formation Créajeunes - Simplon.co par Michel LubacFormation Créajeunes - Simplon.co par Michel Lubac
Formation Créajeunes - Simplon.co par Michel Lubac
 
Wordpress final
Wordpress finalWordpress final
Wordpress final
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
 
CMS WordPress.docx
CMS WordPress.docxCMS WordPress.docx
CMS WordPress.docx
 
Créer son site web avec WordPress
Créer son site web avec WordPressCréer son site web avec WordPress
Créer son site web avec WordPress
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Web content management wcm
Web content management wcmWeb content management wcm
Web content management wcm
 
Wordpress - Ateliers pratiques Webassoc - 14 avril 2015
Wordpress - Ateliers pratiques Webassoc - 14 avril 2015Wordpress - Ateliers pratiques Webassoc - 14 avril 2015
Wordpress - Ateliers pratiques Webassoc - 14 avril 2015
 
Livre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPressLivre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPress
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
 

Cours1

  • 1. TD Multimédia : cours 1 Année 2012-2013 Groupe C
  • 2. Objectifs du TD Multimédia  Se familiariser avec les grands principes à respecter pour réussir son site internet  Connaître les grandes étapes de la création de sites internet  Découvrir un logiciel CMS  Préparer votre avenir professionnel (confrontation probable à la création/maj de site internet)
  • 3. Evaluation  Ce TD s’articule avec le cours de Sophie Gosselin  Dossier de présentation du projet culturel
  • 4. Détail des cours  Cours 1 (2h) Découverte du logiciel Veille et réflexion sur votre menu  Cours 2 (2h) Point sur les grands principes du web Début de conception du site  Cours 3 (3h) Conception du site  Cours 4 (2h) Démonstration de votre site Evaluation du site
  • 5. Un projet de communication La création d’un site web s’articule généralement dans un projet global de communication : • Quel est mon message ? • Quelles sont mes cibles ?
  • 6. Un site internet : pour quoi faire ?  Exister, assurer une présence sur Internet  Diffuser des informations relatives à sa structure, son projet, son événement  Valoriser l’image de sa structure, de son projet, de son événement
  • 7. Que communiquer ? 1 - Définir et hiérarchiser son contenu
  • 8. Création de sites internet Démonstration d’un logiciel CMS Création d’un site sous wordpress
  • 9. C’est quoi un CMS (1/2)  CMS = Content management system  En français : système de gestion de contenus  Logiciel CMS = permet de créer et de mettre à jour son site web  Une des grandes nouveautés introduites par les logiciels CMS = la séparation contenu des pages / forme générale du site internet > Le concepteur du site se centre sur le contenu et plus sur les aspects techniques
  • 10. Contributeurs / Rédacteurs Internautes Back office du site internet = Module d’administration Accès à la création et à la modification du contenu Front office Le contenu est mis en forme selon le gabarit Login Mot de passe Gabarit Publication Un CMS : comment ça marche ?
  • 11. Contributeurs / Rédacteurs Internautes Back office du site internet = Module d’administration Accès à la création et à la modification du contenu Front office Le contenu est mis en forme selon le gabarit Login Mot de passe Gabarit Publication Exemple 1 : le site de l’Université de Nantes
  • 12. Contributeurs / Rédacteurs Internautes Back office du site internet = Module d’administration Accès à la création et à la modification du contenu Front office Le contenu est mis en forme selon le gabarit Login Mot de passe Gabarit Publication Exemple 2 : un site créé sous wordpress
  • 13. C’est quoi un CMS (2/2)  Un CMS se compose d’une interface d’administration (back office) simple à utiliser avec laquelle on organise et on publie le contenu du site (front office)  Accessible via navigateur internet (pas d’application à télécharger)  Les CMS intègrent généralement un éditeur html (WYSIWYG) évitant au rédacteur du contenu de travailler directement en html = une révolution ! • WYSIWYG : What You See Is What You Get
  • 14. Les CMS = une révolution  La conception de sites et de leurs contenus n’est plus l’apanage des informaticiens  Ce travail devient logiquement l’affaire des « communicants »  Et l’affaire de tous
  • 15. Les CMS = une révolution Sites web créés par des informaticiens Sites web créés par des communicants Tout le monde peut intervenir sur le web Il devient « participatif » Web 1.0 Web 2.0 Invention du CMS
  • 16. Exemples d’outils CMS  Spip  Joomla  Wordpress  Blogger (racheté par google en 2003)
  • 17. Démonstration d’un CMS propriétaire (Ksup)  http://admin.univ-nantes.fr
  • 18. Pourquoi Wordpress ?  Une plateforme de blog avant tout  Possibilité de créer avec Wordpress des sites internet qui ne ressemblent pas à des blogs  Exemple :  http://news.harvard.edu/gazette/  http://www.campuscommunication.fr/  http://www.sport-upmc.fr/  http://inksie.com/
  • 19. Avantages de Wordpress (1/2)  Outil CMS  Libre (open-source) et gratuit  Respectueux des standards du web  Communauté active  Rapide à installer
  • 20. Avantages de Wordpress (2/2)  Simple d’utilisation, ergonomique  Fonctionnalités : • Gestion des rôles des utilisateurs • Personnalisation de l’apparence (thème) • Ajout d’extensions (plugins) • Référencement du site • Flux rss disponibles
  • 21. Personnalisations originales  http://www.thehorizontalway.com/  http://blogsolid.com/  http://www.deliciousdays.com/  http://news.harvard.edu/gazette/  Des dizaines de milliers d’exemples de sites créés sur wordpress : http://wordpress.org/showcase/
  • 22. Wordpress : 2 possibilités  1 - Utiliser Wordpress en se créant un compte basique sur http://fr.wordpress.com/ • Facilité, mais pas d’url propre (http://testacs.wordpress.com/) pour votre site et options limitées  2 - Installer wordpress sur un serveur (+ hébergement) • Plus d’options, url personnalisable, mais coût à prévoir et installation un peu technique
  • 23. Option n°2 : hébergement par vos propres moyens Hébergement = mise à disposition d’un espace sur un serveur web vous permettant de bénéficier de plus d’options au niveau de wordpress : • installation de thèmes, • Installations d’extensions, • url propre  Nécessité d’installer un logiciel FTP (File Transfert Protocol) vous permettant d’accéder à votre serveur web distant
  • 24. Le coût d’un hébergement  Ex : Hébergeurs OVH, 1and1, heptoweb, planethoster  Coût : prestation maximale à 60€/an
  • 25. Démo de wordpress (1/3)  http://blogspedago.univ-nantes.fr  Tableau de bord  Notion d’articles (= posts) • Catégories, mots-clés  Notion de pages  Notion de commentaires
  • 26. Démo de wordpress (2/3)  Bibliothèque de médias • Images, vidéos, audio, fichiers divers…  Changement rapide de l’apparence d’un site  Gestion des utilisateurs • Ajouts d’utilisateurs disposant de rôles différents sur un même site
  • 27. Démo de wordpress (3/3)  Gestion du workflow  Système de validation de contenu  Possibilité de suivre les versions successives d’une page  Possibilité de revenir sur une version antérieure d’une page en cas d’erreur
  • 28. A votre tour ! Par groupe projet, découvrez la plateforme et les fonctionnalités de Wordpress : exercices
  • 30. Exercice 1 Créer un article avec : Titre : titre du projet Noms/prénoms Master
  • 31. Exercice 2 Réflexion sur votre projet : L’objet du site Les publics cibles Type de site Ligne éditoriale Rubriquage

Notes de l'éditeur

  1. 1
  2. 2
  3. 3
  4. 4
  5. 6
  6. 8
  7. 9
  8. 10
  9. 11
  10. 12
  11. 13
  12. 14
  13. 15
  14. 16
  15. 17
  16. 18
  17. 19
  18. 20
  19. 21
  20. 22
  21. 23
  22. 24
  23. 25
  24. 26
  25. 27
  26. 28
  27. 30
  28. 31