SITE (OU BLOG)AVEC WORDPRESS
TO UT PO U R BIE N CO M M E NC ER
CARNET D E L’ATELIER BLOG
Une production WAP 1 © Claude Rou...
L ES ATOU T S DE WO RD P RESS
•Une	
  interface	
  conviviale.	
  
•Lisible	
  sur	
  toutes	
  les	
  
plateformes	
  et	...
CRÉ E R SO N COM PTE G R AT UIT
Une production WAP 3 © Claude Rouah 2015
Créez une adresse mail dédiée à votre site
Patron...
UNE INTERFACE CONVIVIALE
Une production WAP 4 © Claude Rouah 2015
P R IS E EN M AIN
Avec un menu rétractable, des possibilités d’options pour chaque écran, une aide en ligne contextuelle, ...
L’INTE RFACE ALTE RNATIVE DE WO RD P RESS. COM
Une production WAP 6 © Claude Rouah 2015
CRÉER UN PREMIER ARTICLE
Une production WAP 7 © Claude Rouah 2015
Une production WAP 8 © Claude Rouah 2015
Une production WAP 9 © Claude Rouah 2015
CÔTÉ SCÈ N E
Une fois votre article
publié ou mis à jour, un
bandeau au dessus du...
Une production WAP 10 © Claude Rouah 2015
CÔTÉ CO UL IS S ES
Pour reprendre votre
article que vous voyez
en ligne, cliquer...
INSÉRER UNE IMAGE
Une production WAP 11 © Claude Rouah 2015
Une production WAP
UNE IMAGE EN 1 MINUTE
Cliquez dans votre article
pour activer le curseur à
l’endroit où vous voulez
int...
UNE IMAGE EN 1 MINUTE
Le fichier ainsi envoyé est
maintenant dans la
Bibliothèque de médias.
Si l’image correspond à
votre ...
Une production WAP 14 © Claude Rouah 2015
UNE IMAGE EN 1 MINUTE
L’image vue ici en grossi a été
intégrée dans l’article.
O...
Une production WAP 15 © Claude Rouah 2015
Wordpress enregistre
automatiquement une
image en 3 tailles :
★ Originale
★ Moye...
Une production WAP 16 © Claude Rouah 2015
INSÉRER UN INTERTITRE
Une production WAP 17 © Claude Rouah 2015
UN INTER EN 30 SECONDES
Pour insérer un intertitre,
saisissez le à l’endroit où il
doit figurer. Sélectionnez le
et cliquez...
UN INTER EN COULEUR
Pour colorer un intertitre,
sélectionnez le et cliquez sur
le menu déroulant : A
pour choisir la coule...
INSÉRER UN LIEN HYPER TEXTE
Une production WAP 20 © Claude Rouah 2015
UN LIEN EN 30 SECONDES
Pour insérer un lien,
sélectionnez un mot ou un
groupe de mots dans votre
article.
Quand les mots s...
Une production WAP 22 © Claude Rouah 2015
CHANGER LE THÈME DE PRÉSENTATION
Une production WAP 23 © Claude Rouah 2015
Une production WAP 24 © Claude Rouah 2015
Une production WAP 25 © Claude Rouah 2015
Un survol de souris permet
d’afficher les Détails du thème
ou de cliquer sur le b...
DES REGLAGES S’ IMPOSENT
Une fois le nouveau thème activé
on constate les différences
d’affichage : le changement de
typogr...
Une production WAP 27 © Claude Rouah 2015
Une production WAP 28 © Claude Rouah 2015
Après quelques ajustements
on obtient un aspect plus
satisfaisant.
Utiliser uniq...
INSTALLER DES WIDGETS DANS LA BARRE
DE NAVIGATION LATÉRALE
Une production WAP 29 © Claude Rouah 2015
Une production WAP 30 © Claude Rouah 2015
Une production WAP 31 © Claude Rouah 2015
Les réglages des
Widgets s’enregistre un
par un.
Après avoir défini les
paramètre...
METTRE UNE IMAGE À LA UNE
Une production WAP 32 © Claude Rouah 2015
Une production WAP 33 © Claude Rouah 2015
Cliquer sur Mettre une image à la Une, choisir l’image
dans la Bibliothèque de m...
Une production WAP 34 © Claude Rouah 2015
INSÉRER UNE VIDÉO
Une production WAP 35 © Claude Rouah 2015
Créer un nouvel article, et pour l’illustrer d’une vidéo, cliquer sur le bouton : Ajouter un média, ensuite choisir
Intégr...
SOLUT IO N N° 2
Cliquer à nouveau sur le bouton : Ajouter un média, ensuite choisir Insérer à partir d’une adresse web. Co...
DEUX LIGNES DE CODE
La première en haut du
texte correspond à la
solution N° 2.
La seconde en bas du
texte correspond à la...
Une production WAP 39 © Claude Rouah 2015
Les vidéos sont bien lisibles
depuis le site.
Il n’a jamais été aussi
simple d’i...
Une production WAP 40 © Claude Rouah 2015
INSÉRER DU SON DANS UN ARTICLE
Une production WAP 41 © Claude Rouah 2015
Comme pour les vidéos, les sons doivent être hébergé sur un site prévu à cet eff...
Une production WAP 42 © Claude Rouah 2015
CLIQUER sur Embed , puis choisir un
style de présentation comme ci-contre.
Vous ...
Une production WAP 43 © Claude Rouah 2015
Recopier	
  le	
  code	
  à	
  l’endroit	
  où	
  l’on	
  veut	
  insérer	
  le	...
Une production WAP 44 © Claude Rouah 2015
Une production WAP 45 © Claude Rouah 2015
CRÉER UNE PAGE
Une production WAP 46 © Claude Rouah 2015
Sélectionner Pages et Ajouter, on peut maintenant intégrer le contenu de la page...
Une production WAP 47 © Claude Rouah 2015
Le Thème précédemment choisi ne
permettait pas d’éditer des pages en
pleine larg...
Une production WAP 48 © Claude Rouah 2015
Pour la section blog intégrer son contenu
dans Articles.
Pour la section site in...
Une production WAP 49 © Claude Rouah 2015
GE STI ON D U CONTENU DANS WORDP RESS
CONTENU D U SITE
CONTENU DU BLOG
M I S E E...
Une production WAP 50 © Claude Rouah 2015
CRÉER UN MENU
Une production WAP 51 © Claude Rouah 2015
Une production WAP 52 © Claude Rouah 2015
Une production WAP © Claude Rouah 201553
ANNEXES
Une production WAP 54 © Claude Rouah 2015
http://www.presselivre.fr/pl2/?p=160
Une production WAP 55 © Claude Rouah 2015
http://presselearning.syfadis.com
Une production WAP 56 © Claude Rouah 2015
Site Afdas des possibilités pour
les demandeurs d’emploi, voir
les conditions.
Une production WAP 57 © Claude Rouah 2015
Télécharger GIMP pour PC
Télécharger GIMP pour Mac
Documentation gratuite
UNE SO...
Une production WAP 58 © Claude Rouah 2015
GIF
Le format gif convient pour les couleurs en aplat ou pour un logo par exempl...
Les utilisateurs de Photoshop n’auront aucun problème pour enregistrer leurs images dans l’un des 3 formats: il suffit
d’en...
L IE NS UTI L ES
Une production WAP 60 © Claude Rouah 2015
TUTORIELS VIDÉO GRATUITS
http://wpchannel.com/podcasts-­‐videos...
Une production WAP 61 © Claude Rouah 2015
http://format-­‐factory.softonic.fr/	
  	
  
http://www.dvdvideosoft.com/fr/prod...
Prochain SlideShare
Chargement dans…5
×

Blog et Site gratuit avec Wordpress.com comment faire étape par étape

1 834 vues

Publié le

Prise en main de Wordpress pour non initiés. Facile et sans connaissances techniques, il est possible d'avoir un site ou un blog qui a de la tenue. Découvrez pas à pas un outil convivial qui deviendra vite familier.

Publié dans : Internet
1 commentaire
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
1 834
Sur SlideShare
0
Issues des intégrations
0
Intégrations
25
Actions
Partages
0
Téléchargements
30
Commentaires
1
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Blog et Site gratuit avec Wordpress.com comment faire étape par étape

  1. 1. SITE (OU BLOG)AVEC WORDPRESS TO UT PO U R BIE N CO M M E NC ER CARNET D E L’ATELIER BLOG Une production WAP 1 © Claude Rouah 2015 Mise à jour du 10/03/2015
  2. 2. L ES ATOU T S DE WO RD P RESS •Une  interface  conviviale.   •Lisible  sur  toutes  les   plateformes  et  tout  format   d’écran.   •Gratuit  et  sécurisé.   •Automatiquement  référencé   pour  les  moteurs  de   recherche.   •Une  communauté   francophone  active.   •Mises  à  jours  fréquentes.   Etre connecté à Internet, posséder un navigateur récent sur son ordinateur, sont les seuls éléments indispensables pour commencer son site ou blog. Se connecter à : fr.wordpress.com Une production WAP 2 © Claude Rouah 2015
  3. 3. CRÉ E R SO N COM PTE G R AT UIT Une production WAP 3 © Claude Rouah 2015 Créez une adresse mail dédiée à votre site Patronyme ou pseudo
  4. 4. UNE INTERFACE CONVIVIALE Une production WAP 4 © Claude Rouah 2015
  5. 5. P R IS E EN M AIN Avec un menu rétractable, des possibilités d’options pour chaque écran, une aide en ligne contextuelle, l’interface d’administration de Wordpress ou Tableau de bord va vous permettre de progresser rapidement dans la réalisation de votre site ou blog. Une production WAP 5 © Claude Rouah 2015
  6. 6. L’INTE RFACE ALTE RNATIVE DE WO RD P RESS. COM Une production WAP 6 © Claude Rouah 2015
  7. 7. CRÉER UN PREMIER ARTICLE Une production WAP 7 © Claude Rouah 2015
  8. 8. Une production WAP 8 © Claude Rouah 2015
  9. 9. Une production WAP 9 © Claude Rouah 2015 CÔTÉ SCÈ N E Une fois votre article publié ou mis à jour, un bandeau au dessus du titre vous invite à Afficher l’article
  10. 10. Une production WAP 10 © Claude Rouah 2015 CÔTÉ CO UL IS S ES Pour reprendre votre article que vous voyez en ligne, cliquer en bas sur Modifier
  11. 11. INSÉRER UNE IMAGE Une production WAP 11 © Claude Rouah 2015
  12. 12. Une production WAP UNE IMAGE EN 1 MINUTE Cliquez dans votre article pour activer le curseur à l’endroit où vous voulez intégrer votre image. Puis cliquez sur le bouton : Ajouter un média Une fenêtre s’ouvre en avant - plan, choisissez : Envoyer des fichiers Sélectionner des fichiers vous permet d’indiquer l’emplacement de votre image sur votre ordinateur, le fichier ainsi envoyé est installé dans la Bibliothèque de médias.
  13. 13. UNE IMAGE EN 1 MINUTE Le fichier ainsi envoyé est maintenant dans la Bibliothèque de médias. Si l’image correspond à votre choix, cliquez sur le bouton : Insérer dans l’article . Une production WAP 13 © Claude Rouah 2015
  14. 14. Une production WAP 14 © Claude Rouah 2015 UNE IMAGE EN 1 MINUTE L’image vue ici en grossi a été intégrée dans l’article. On peut la redimensionner en agissant sur les poignées qui apparaissent lorsque l’image est sélectionnée. Les icônes au dessus de l’image permettent de régler son positionnement par rapport au texte. Pour de plus amples réglages cliquer sur le crayon, une nouvelle fenêtre va s’ouvrir…
  15. 15. Une production WAP 15 © Claude Rouah 2015 Wordpress enregistre automatiquement une image en 3 tailles : ★ Originale ★ Moyenne ★ Miniature Les options avancées permettent d’ajouter une bordure (largeur, couleur) et de définir les marges.
  16. 16. Une production WAP 16 © Claude Rouah 2015
  17. 17. INSÉRER UN INTERTITRE Une production WAP 17 © Claude Rouah 2015
  18. 18. UN INTER EN 30 SECONDES Pour insérer un intertitre, saisissez le à l’endroit où il doit figurer. Sélectionnez le et cliquez sur le menu déroulant : Paragraphe pour choisir sa mise en forme. Une production WAP 18 © Claude Rouah 2015
  19. 19. UN INTER EN COULEUR Pour colorer un intertitre, sélectionnez le et cliquez sur le menu déroulant : A pour choisir la couleur. Une production WAP 19 © Claude Rouah 2015
  20. 20. INSÉRER UN LIEN HYPER TEXTE Une production WAP 20 © Claude Rouah 2015
  21. 21. UN LIEN EN 30 SECONDES Pour insérer un lien, sélectionnez un mot ou un groupe de mots dans votre article. Quand les mots sont en sur brillance, les icônes de liens sont actives. Cliquez sur l’ icône du lien, une fenêtre s’ouvre en avant plan comme page suivante, copiez l’adresse de votre lien dans le champ réservé à cet effet, vous pouvez indiquer un titre à votre lien, et surtout indiquer qu’il doit s’ouvrir dans une nouvelle fenêtre pour permettre de revenir facilement sur votre site. Ensuite, cliquez sur Ajouter un lien. Une production WAP 21 © Claude Rouah 2015
  22. 22. Une production WAP 22 © Claude Rouah 2015
  23. 23. CHANGER LE THÈME DE PRÉSENTATION Une production WAP 23 © Claude Rouah 2015
  24. 24. Une production WAP 24 © Claude Rouah 2015
  25. 25. Une production WAP 25 © Claude Rouah 2015 Un survol de souris permet d’afficher les Détails du thème ou de cliquer sur le bouton : Aperçu pour visualiser la nouvelle Apparence de votre site avant de décider de l’ Activer si cela correspond à votre choix. Ces icônes en bas de l’écran permettent de visualiser l’aspect de votre site sur : écran d’ordinateur, tablette ou smartphone.
  26. 26. DES REGLAGES S’ IMPOSENT Une fois le nouveau thème activé on constate les différences d’affichage : le changement de typographie, l’apparence des liens et de la légende photo, l’intertitre est en capitales. L’aspect général semble trop clair. Une production WAP 26 © Claude Rouah 2015 Aller dans Thèmes et cliquer sur le bouton Personnaliser du thème activé
  27. 27. Une production WAP 27 © Claude Rouah 2015
  28. 28. Une production WAP 28 © Claude Rouah 2015 Après quelques ajustements on obtient un aspect plus satisfaisant. Utiliser uniquement les options gratuites est suffisant pour personnaliser l’apparence de votre site. Il reste à construire la barre de navigation latérale.
  29. 29. INSTALLER DES WIDGETS DANS LA BARRE DE NAVIGATION LATÉRALE Une production WAP 29 © Claude Rouah 2015
  30. 30. Une production WAP 30 © Claude Rouah 2015
  31. 31. Une production WAP 31 © Claude Rouah 2015 Les réglages des Widgets s’enregistre un par un. Après avoir défini les paramètres, cliquer sur le bouton: Enregistrer le widget
  32. 32. METTRE UNE IMAGE À LA UNE Une production WAP 32 © Claude Rouah 2015
  33. 33. Une production WAP 33 © Claude Rouah 2015 Cliquer sur Mettre une image à la Une, choisir l’image dans la Bibliothèque de médias ou l’importer puis Mettre à jour.
  34. 34. Une production WAP 34 © Claude Rouah 2015
  35. 35. INSÉRER UNE VIDÉO Une production WAP 35 © Claude Rouah 2015
  36. 36. Créer un nouvel article, et pour l’illustrer d’une vidéo, cliquer sur le bouton : Ajouter un média, ensuite choisir Intégration You Tube et rechercher sa vidéo. Sélectionner la vidéo choisie et cliquer sur le bouton : Insérer dans l’article SOLUT IO N N° 1 Une production WAP 36 © Claude Rouah 2015
  37. 37. SOLUT IO N N° 2 Cliquer à nouveau sur le bouton : Ajouter un média, ensuite choisir Insérer à partir d’une adresse web. Copier l’adresse de la vidéo choisie dans le champ prévu à cet effet et cliquer sur le bouton : Insérer dans l’article en bas à droite de la fenêtre (non visible ici). Une production WAP 37 © Claude Rouah 2015
  38. 38. DEUX LIGNES DE CODE La première en haut du texte correspond à la solution N° 2. La seconde en bas du texte correspond à la solution N° 1. Il faut cliquer sur Publier et ensuite sur Afficher l’article pour aller voir le résultat. Une production WAP 38 © Claude Rouah 2015
  39. 39. Une production WAP 39 © Claude Rouah 2015 Les vidéos sont bien lisibles depuis le site. Il n’a jamais été aussi simple d’intégrer des vidéos. C’est le bonus des actualisations de Wordpress. Diffuser de courtes vidéos, évite d’attendre un long moment pour leur chargement.
  40. 40. Une production WAP 40 © Claude Rouah 2015 INSÉRER DU SON DANS UN ARTICLE
  41. 41. Une production WAP 41 © Claude Rouah 2015 Comme pour les vidéos, les sons doivent être hébergé sur un site prévu à cet effet, dans cet exemple, il s’agit de SoundCloud qui s’intègre parfaitement à Wordpress. Choisir le son que l’on veut partager, cliquer sur le lien Share.
  42. 42. Une production WAP 42 © Claude Rouah 2015 CLIQUER sur Embed , puis choisir un style de présentation comme ci-contre. Vous pouvez sélectionner des options : Couleur du lecteur Lecture automatique Les choix étant faits, Il faut surtout cocher la case : Wordpress code et recopier l’intégralité du code ainsi généré dans le champ qui précède cette case.
  43. 43. Une production WAP 43 © Claude Rouah 2015 Recopier  le  code  à  l’endroit  où  l’on  veut  insérer  le  lecteur  de  son  dans  l’article,  valider  et  ensuite,  visualiser  le   résultat.  
  44. 44. Une production WAP 44 © Claude Rouah 2015
  45. 45. Une production WAP 45 © Claude Rouah 2015 CRÉER UNE PAGE
  46. 46. Une production WAP 46 © Claude Rouah 2015 Sélectionner Pages et Ajouter, on peut maintenant intégrer le contenu de la page même fonctionnement que dans Articles pour le texte et les médias. Certains thèmes proposent différents modèles de pages que vous pourrez choisir dans Attributs de la page.
  47. 47. Une production WAP 47 © Claude Rouah 2015 Le Thème précédemment choisi ne permettait pas d’éditer des pages en pleine largeur, il était nécessaire d’en changer pour un qui le permet. Les Pages seront présentées sans la barre de navigation latérale que l’on réservera aux Articles de la partie blog.
  48. 48. Une production WAP 48 © Claude Rouah 2015 Pour la section blog intégrer son contenu dans Articles. Pour la section site intégrer son contenu dans Pages. BLOG SITE
  49. 49. Une production WAP 49 © Claude Rouah 2015 GE STI ON D U CONTENU DANS WORDP RESS CONTENU D U SITE CONTENU DU BLOG M I S E E N PA G E S , T Y P O , C O U L E U R S P RÉSENTATION ET FONC TIONNA LITÉS TOUS LES MÉDI AS N A V I G AT I O N D U S I T E N A V I G AT I O N D U B L O G Vidéos ou Sons hébergés sur d’autres sites en ligne
  50. 50. Une production WAP 50 © Claude Rouah 2015 CRÉER UN MENU
  51. 51. Une production WAP 51 © Claude Rouah 2015
  52. 52. Une production WAP 52 © Claude Rouah 2015
  53. 53. Une production WAP © Claude Rouah 201553 ANNEXES
  54. 54. Une production WAP 54 © Claude Rouah 2015 http://www.presselivre.fr/pl2/?p=160
  55. 55. Une production WAP 55 © Claude Rouah 2015 http://presselearning.syfadis.com
  56. 56. Une production WAP 56 © Claude Rouah 2015 Site Afdas des possibilités pour les demandeurs d’emploi, voir les conditions.
  57. 57. Une production WAP 57 © Claude Rouah 2015 Télécharger GIMP pour PC Télécharger GIMP pour Mac Documentation gratuite UNE SORTE DE PHOTOSHOP GRATUIT !
  58. 58. Une production WAP 58 © Claude Rouah 2015 GIF Le format gif convient pour les couleurs en aplat ou pour un logo par exemple.Il est souvent utilisé pour créer de petites animations qui ont fait les beaux jours du web du temps du bas débit. Ce format permet également d’utiliser une couleur en transparence. JPG jpg ou jpeg le format conseillé pour les photos ou les images qui comportent des dégradés attention de ne pas trop altérer l’image en général une compression de qualité 80 est acceptable. PNG png est un format plus récent qui est performant pour les couleurs en aplat ou pour les images en dégradé en plus il comprend une option de couleur transparente. FORM AT S IMAGE S PO UR LE WEB
  59. 59. Les utilisateurs de Photoshop n’auront aucun problème pour enregistrer leurs images dans l’un des 3 formats: il suffit d’enregistrer pour le web dans le menu fichier. Sur Pc un logiciel : Jpeg Compression que vous pouvez télécharger ici : http://www.01net.com/telecharger/windows/ Multimedia/photo_numerique/fiches/33494.html . Pour Mac je vous recommande ImageOptim à télécharger ici : http://imageoptim.pornel.net/ . Ces logiciels sont gratuits ! FO RM AT S IM AGE S PO U R L E WEB : OUTIL S Une production WAP 59 © Claude Rouah 2015
  60. 60. L IE NS UTI L ES Une production WAP 60 © Claude Rouah 2015 TUTORIELS VIDÉO GRATUITS http://wpchannel.com/podcasts-­‐videos/   CODEX ET FRANCOPHONES http://codex.wordpress.org/fr:Accueil   http://www.wordpress-­‐fr.net/category/blog POUR AGIR DANS LA LÉGALITÉ http://www.presse-­‐citron.net/votre-­‐blog-­‐est-­‐illegal-­‐et-­‐vous-­‐ne-­‐le-­‐savez-­‐ pas-­‐voici-­‐pourquoi/   http://www.wipo.int/sme/fr/e_commerce/design_issues.htm
  61. 61. Une production WAP 61 © Claude Rouah 2015 http://format-­‐factory.softonic.fr/     http://www.dvdvideosoft.com/fr/products/dvd/Free-­‐Avi-­‐Video-­‐Converter.htm#.VGPa0NaGmV4   http://www.clubic.com/telecharger-­‐fiche42151-­‐handbrake.html   http://www.clubic.com/telecharger-­‐fiche42147-­‐handbrake.html   http://kigo-­‐video-­‐converter.softonic.fr/mac   CONVERTISSEUR EN LIGNE: http://www.videograbber.net/fr/convertisseur-­‐video-­‐en-­‐ligne.html   CO N VE RT IS SE U RS VIDÉO FORMATS DES FICHIERS VIDEO .flv (FLASH) ou .mp4 qui a l’avantage d’être lisible sur les tablettes & smartphones.

×