Les outils pour animer votre site web

1 368 vues

Publié le

support de formation pour aborder les outils en ligne qui permettent de préparer ou diffuser des contenus

Publié dans : Formation
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 368
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les outils pour animer votre site web

  1. 1. Les outils en ligne pour animer son siteVoyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   1  
  2. 2. Pixlr.com/editorPixrl  Editor  :  traitement  des  images  en  ligne  et  gratuit  Comme  nous  navons  pas  tous  la  possibilité  davoir  un  logiciel  de  traitements  des  images,  Pixlr  propose  un  logiciel  en  ligne,  gratuit.  Vous  pourrez  facilement  redimensionner  vos  images,  les  recadrer,  éventuellement  changer  le  contraste  et  la  luminosité.  Vous  trouverez  aussi  Pixlr  O-­‐Ma8c  pour  ajouter  des  filtres  tout  fait  à  vos  images.  Voir  sur  le  blog,  notre  didac22el  :  h5p://blog.voyelle.me/webtools/pixlr-­‐editor-­‐le-­‐photoshop-­‐en-­‐ligne   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   2  
  3. 3. Pixlr.com/editorRedimensionner  une  image  Lorsque  vous  arrivez  sur  l’Editor,  un  menu  apparaît  qui  vous  permet  soit  de  créer  une  image,  soit  d’en  récupérer  une  sur  votre  ordinateur,  soit  de  travailler  sur  une  image  en  ligne…  Pour  l’exemple  ,  nous  allons  chercher  une  image  sur  l’ordinateur.  Nous  chargeons  une  image  et  nous  allons  pouvoir  la  modifier.     Vous  trouverez  un  menu  en  haut  à  gauche  un     menu  qui  rappelle  celui  de  Photoshop.  Dans  le     menu  «  image  »  vous  trouverez  toutes  les  op8ons     liées  à  l’image,  dont  le  redimensionnement.  Vous   trouverez  aussi  la  possibilité  de  travailler  avec  des     calques,  de  rajouter  des  filtres  (flous,  pixellisa8on,     …).  Dans  les  «  réglages  »  vous  pourrez  modifier  la     luminosité,  le  contraste.  Nous  retrouvons  aussi  «     éditer  »  avec  la  possibilité  d’annuler  une  ac8on.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   3  
  4. 4. Pixlr.com/editorRedimensionner  une  image  Pour  redimensionner  une  image,  vous  cliquez  sur  le  menu  «  image  »  puis  sur  «  Taille  de  l’image  ».  S’ouvre  alors  une  fenêtre  où  s’affichent  les  dimensions  de  votre  image.  Nous  voyons  dans  cet  exemple  que  l’image  fait  4000  pixels  de  large.  En  gardant  les  propor8ons  pour  ne  pas  déformer  l’image,  nous  allons  modifier  la  largeur.  Vous  remarquez  que  la  hauteur  s’adapte  à  la  largeur  automa8quement  lorsque  «  Conserver  les  propor8ons  »  est  coché.  Vous  validez  la  modifica8ons  en  cliquant  sur  «  OK  ».  Votre  image  est  redimensionnée.  Pour  agrandir  l’affichage  de  votre  image  modifiée,  il  vous  suffit  de  cliquer  sur  le  menu  «  visualiser  »  et  de  sélec8onner  «  Afficher  tout  ».   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   4  
  5. 5. Pixlr.com/editorEnregistrer  une  image  Vous  pouvez  réaliser  d’autres  modifica8ons.  Quand  vous  avez  terminé,  il  vous  suffit  de  cliquez  sur  la  croix  en  haut  à  droite  de  l’image  pour  la  fermer.  Une  fenêtre  s’ouvrira  pour  que  vous  nommiez  le  fichier  puis  pour  l’enregistrer  sur  votre  ordinateur.  Vous  avez  la  possibilité  denregistrer  en  JPG  (à  privilégier  pour  le  web),  PNG  (pour  le  web,  limage  sera  peu  compressée  et  gère  la  transparence,  elle  peut  être  assez  lourde)  ,  BMP  (à  éviter  pour  le  web,  sans  perte  de  qualité),  TIFF  (format  spécifique  à  lédi8on)  ou  en  PXD  (format  spécifique  à  Pixlr  qui  vous  permet  de  garder  les  calques,  de  créer  des  templates  types...).   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   5  
  6. 6. Les applications GoogleLes  applica8ons  Google  sur  Drive  À  par8r  dun  compte  GMAIL,  vous  avez  accès  à  un  certain  nombres  dapplica8ons  en  ligne  qui  tournent  sur  le  Drive,  le  service  de  Cloud  de  Google.  Le  Cloud  est  un  service  qui  vous  permet  de  synchroniser  des  contenus  entre  plusieurs  ordinateurs  et  un  espace  en  ligne.  Cela  vous  permet  daccèder  à  des  contenus  partout  où  vous  aurez  accès  à  internet.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   6  
  7. 7. Les applications GoogleLes  applica8ons  Google  vous  permet  daccéder  à  un  traitement  de  texte,  à  un  tableur,  un  ou8l  pour  créer  des  présenta8ons  (avec  des  slides  comme  sur  powerpoint),  à  des  ou8ls  pour  dessiner  et  à  un  ou8l  de  créa8on  de  formulaires  en  ligne  assez  puissant.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   7  
  8. 8. Les applications GoogleInstaller  Drive  Lintérêt  de  Drive  (comme  aussi  DropBox,  iCloud,  SkyDrive  ou  Wuala)  est  de  pouvoir  accéder  partout  où  vous  avez  un  accès  web  et  à  un  ordinateur,  à  des  données  (fichiers  essen8ellement).  Pour  installer  Drive  sur  vos  ordinateurs  :  htp://goo.gl/eotp7  Le  plus  de  Drive  par  rapport  à  ses  concurrents  est  que  vous  bénéficier  non  seulement  du  mail  mais  des  applica8ons.    La  synchronisa2on  de  vos  fichiers  et  dossier  peut  se  faire  sur  la  totalité  de  vos  contenus  ou  sur  une  par8e  seulement.  Vous  avez  aussi  la  possibilité  de  partager  des  fichiers  ou  des  dossiers  à  dautres  comptes  (gmail)  ou  de  les  rendre  public  via  une  URL  que  vous  pouvez  alors  diffuser.    Les  applica2ons  (traitement  de  textes,  tableur...)  ne  sont  pas  très  éloignées  des  suites  comme  Open  Office  ou  Microsow  Office.  Il  ny  a  pas  toutes  les  op8ons  mais  ils  sont  facilement  partageables.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   8  
  9. 9. IFTTTAutoma8ser  des  ac8ons  (veilles,  réseaux  sociaux...)  IFTTT  est  un  ou8l  assez  simple  du8lisa8on  qui  vous  permet  de  créer  des  ac8ons  automa8ques  entre  plusieurs  services.  Voir  notre  didac88el  en  ligne  :  htp://blog.voyelle.me/veille/xfruits-­‐et-­‐iwt-­‐automa8sa8on   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   9  
  10. 10. IFTTTChannels  –  connecter  IFTTT  à  vos  services  La  première  chose  à  faire  est  de  metre  en  rela8on  vos  services  avec  IFTTT.  Certains  services  sont  par  nature  déjà  en  place  comme  les  flux  RSS,  les  emails.  Vous  pouvez  ajouter  plusieurs  applica8ons  :  §  Delicious  et  Diigo  (archivage  de  liens)  §  Dropbox,  Google  Drive,  Skydrive  (Services  de  Cloud)  §  Facebook  (compte  et  page),  Twiter,  Instagram,  LinkedIn,  Foursquare,  Flickr,  Soundcloud,   Tumblr,  Vimeo,  Wordpress,  Blogger,  Youtube...  (Réseaux  sociaux  et  plus)  §  Gmail,  Google  Agenda,  Google  Reader,  Google  Talk  §  Evernote,  Instapaper  (Services  de  stockage  dar8cles  et  plus)  Certains  services  comme  le  SMS  ne  sont  pas  disponibles  en  France  car  liés  à  des  volontés  des  fournisseurs  dabonnement  téléphoniques.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   10  
  11. 11. IFTTTCréer  une  tâche  Vous  cliquez  sur  Create  pour  lancer  la  créa8on  dune  tâche  qui  va  donc  metre  en  route  un  processus  automa8que.  Vous  voyez  apparaître  une  simple  ligne  avec  la  première  ac8on  cachée  sur  le  lien  "this"  sur  lequel  vous  cliquer.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   11  
  12. 12. IFTTTCréer  une  tâche  Vous  choisissez  ensuite  dans  la  liste  le  canal  de  source  de  contenu.  Par  exemple,  je  choisis  le  canal  Feed  qui  va  me  permetre  de  récupérer  les  données  dun  flux  RSS.  Puis  je  choisis  "New  feed  item"  pour  récupérer  les  prochains  contenus  diffusé.  Je  colle  lurl  du  Flux.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   12  
  13. 13. IFTTTCréer  une  tâche  Il  vous  reste  maintenant  à  iden8fier  lapplica8on  qui  doit  recevoir  linforma8on  en  cliquant  sur  That.  Vous  choisissez  lapplica8on  dans  la  liste.  Par  exemple,  je  veux  que  chaque  nouveau  contenu  du  flux  RSS  aille  directement  sur  ma  page  Facebook  sous  forme  de  lien  et  non  de  statut.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   13  
  14. 14. IFTTTCréer  une  tâche  Il  ne  vous  reste  plus  quà  enregistrer  lac8on  et  à  la  décrire  pour  vous  souvenir  de  ce  quelle  fait.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   14  
  15. 15. SlideShareHéberger  vos  documents  et  en  faciliter  la  lecture  Slideshare,  au-­‐delà  de  son  aspect  réseau  social,  est  un  espace  dhébergement  pour  documents  type  PowerPoint,  Word,  PDF  et  même  vidéo.  Le  double  avantage  de  cete  plateforme  est  que  vous  pourrez  à  la  fois  afficher  vos  documents  sur  votre  site  pour  que  linternaute  puisse  les  lire  simplement  et  élargir  leur  diffusion  hors  de  lespace  de  votre  site  web.    Pour  simplifier  la  démarche,  je  vous  conseille  de  passer  vos  document  au  format  PDF.  Les  personnes  qui  téléchargeront  vos  documents  n’auront  ainsi  accès  qu’au  PDF  et  non  au  powerpoint  ou  document  word,  ils  ne  pourront  pas  les  modifier  (à  moins  de  forcer  le  PDF),  juste  les  imprimer.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   15  
  16. 16. SlideShareRenseigner  le  document  pour  la  diffusion  Pendant  le  téléchargement  et  la  conversion,  vous  avez  un  peu  de  temps  pour  renseigner  les  champs  du  8tre,  des  tags  (mots  clés)  et  de  la  descrip8on.  Si  vous  n’avez  pas  eu  le  temps  de  tout  renseigner,  vous  avez  toujours  la  possibilité  de  les  modifier  par  la  suite.   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   16  
  17. 17. SlideShareAfficher  les  documents  sur  un  site  Sur  la  page  de  votre  document,  vous  trouverez  en  haut  à  droite  du  bloc  le  bouton  «  Intégrer  ».  Il  ouvrira  un  module  pour  copier  le  code  à  insérer  sur  votre  site.  En  cliquant  sur  «  Customize…  »,  vous  accéderez  à  quelques  op8ons  supplémentaires  pour  choisir  une  taille  du  module  plus  ou  moins  grande.  Pour  les  powerpoint  ou  PDF  provenant  de  slides,  vous  aurez  une  op8on  supplémentaire  pour  pouvoir  commencer  l’affichage  sur  une  page  précise.  Il  est  possible  de  le  faire  sur  les  autres  documents  en  rajoutant  dans  le  contenu  de  l’iframe,  sur  l’atribut  src,    ?startSlide=(numéro  de  la  page).   Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   17  
  18. 18. SlideShareIntégrer  le  document  Le  code  que  vous  copiez  en  cliquant  sur  «  Copy  »  comprendra  ce  qui  suit  :  <iframe  src="htp://www.slideshare.net/slideshow/embed_code/13750497"  width="479"  height="511"  frameborder="0"  marginwidth="0"  marginheight="0"  scrolling="no"  style="border:1px  solid  #CCC;border-­‐width:1px  1px  0;margin-­‐botom:5px"  allowfullscreen>  </iframe>    Lorsque  vous  voulez  insérer  ce  code  slideshare  sur  un  site  basé  sur  un  CMS,  le  risque  est  que  vous  vous  retrouviez  avec  le  code  affiché  sur  le  site  au  lieu  de  voir  les  slides  !  Pour  éviter  ce  problème  il  faut  passer  en  visualisa8on  du  code  source.  C’est  un  peu  déstabilisant  quand  on  ne  connait  pas  le  HTML  mais  ça  vous  garan8t  un  bon  fonc8onnement.  Ensuite  il  vous  suffit  de  coller  le  code  là  où  vous  voulez  qu’il  apparaisse.       Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   18  

×