{"id":166,"date":"2012-10-27T17:37:35","date_gmt":"2012-10-27T16:37:35","guid":{"rendered":"http:\/\/jcfrog.com\/blog\/?p=166"},"modified":"2012-10-27T17:40:55","modified_gmt":"2012-10-27T16:40:55","slug":"inserer-un-diaporama-ou-une-video-dun-site-dans-un-autre-hellotipi-flickr","status":"publish","type":"post","link":"http:\/\/jcfrog.com\/blog\/inserer-un-diaporama-ou-une-video-dun-site-dans-un-autre-hellotipi-flickr\/","title":{"rendered":"Ins\u00e9rer un diaporama ou une vid\u00e9o d’un site dans un autre #hellotipi #flickr"},"content":{"rendered":"

Ceci est un petit tuto pour des camarades de la communaut\u00e9 Hellotipi, mais dans l’id\u00e9e \u00e7a vaut pour bien des outils de publication sur Internet.<\/p>\n

Dans le cas pr\u00e9sent nous allons inclure un diaporama Flickr<\/a> dans un article de notre site Hellotipi<\/a>.<\/p>\n

Une page web c’est un peu comme un patchwork, \u00e7a consiste \u00e0 accoler des blocs dans un espace born\u00e9. Que ce soit du texte (donc des caract\u00e8res), une image, une vid\u00e9o, consid\u00e9rons qu’il s’agit de blocs qu’on colle les uns \u00e0 c\u00f4t\u00e9 des autres pour faire joli, on fait du design! \ud83d\ude42<\/p>\n

\"\"<\/a>Certains sites proposent d’exporter un bout de leur contenu, un de leurs blocs, pour pouvoir le coller dans une page d’un autre site. Dans notre exemple, la page d’Hellotipi va afficher pour l’essentiel (en vert) du contenu venant des ordinateurs d’Hellotipi (textes, commentaires, cadre principale, …), \u00e0 l’int\u00e9rieur duquel on va coller une sorte de fen\u00eatre magique fournie par Flickr (en rose) qui va afficher du contenu \u00e0 lui, en\u00a0l’occurrence\u00a0mon diaporama, dont les donn\u00e9es sont stock\u00e9es sur ces ordinateurs \u00e0 lui. On appelle ces ordinateurs des serveurs<\/strong> car ils nous fournissent les donn\u00e9es.<\/p>\n

Le truc c’est que pour permettre cette magie, il faut les formules magiques qui utilisent leur langage. Ce langage c’est le HTML, pas besoin de le comprendre, mais les sites qui sont un peu idiots ne comprennent que \u00e7a. La manip va donc consister \u00e0 ce que le site A, flickr dans notre cas, te donne la formule magique HTML afin que tu la copies et la colles dans le site B, Hellotipi pour nous, sans te poser de question \ud83d\ude42<\/p>\n

On r\u00e9sume et on fait la manip ensemble. Pour pouvoir incruster un contenu d’un site A dans un site B, il faut:<\/p>\n

    \n
  1. que le site A propose un outil pour exporter une fen\u00eatre vers ce contenu. G\u00e9n\u00e9ralement il faut chercher un bouton \u00ab\u00a0Partager\u00a0\u00bb, ou \u00ab\u00a0Exporter\u00a0\u00bb (ou embed en anglais)<\/li>\n
  2. que le site B accepte ce genre de manipulation. Pour cela il faut chercher si l’\u00e9diteur qu’on utilise dans le site B propose un bouton HTML, c’est \u00e0 dire un acc\u00e8s au langage magique o\u00f9 il faudra coller la formule du site A.<\/li>\n<\/ol>\n

    Allons-y, tu vas voir, c’est facile si on va doucement \ud83d\ude09<\/p>\n

    J’ai pr\u00e9alablement charg\u00e9 mes photos sur mon compte flickr, Hellotipi ne les connait donc pas.<\/p>\n

    (cliquer sur les photos pour les agrandir)<\/p>\n

    Dans Flickr, je vais dans mon album<\/a> et je cr\u00e9e mon diaporama avec les outils que Flickr me fournit.<\/p>\n

    \"\"<\/a><\/p>\n

    Dans ce diaporama je rep\u00e8re le bouton \u00ab\u00a0partager\u00a0\u00bb et je clique dessus pour voir si il me propose le code HTML.<\/p>\n

    \"\"<\/a><\/p>\n

    J’aurais pu cliquer directement sur \u00ab\u00a0Copier dans le presse papier\u00a0\u00bb (1) pour copier le code HTML mais ici je peux en plus personnaliser un peu la fen\u00eatre que je vais coller dans le site B: je clique sur \u00ab\u00a0Personnaliser le code HTML\u00a0\u00bb (2) car je voudrais qu’il soit un peu plus grand que la taille propos\u00e9e par d\u00e9faut.<\/p>\n

    \"\"<\/a><\/p>\n

    Une fois cette formule magique dans mon presse papier, je me rends sur le site B, Hellotipi dans notre cas, et j’\u00e9dite mon billet.<\/p>\n

    \"\"<\/a><\/p>\n

    Je positionne le curseur \u00e0 l’endroit ou je veux ins\u00e9rer mon diaporama et je clique sur le bouton HTML<\/strong>.<\/p>\n

    \"\"<\/a><\/p>\n

    S’affiche alors le \u00ab\u00a0vrai contenu\u00a0\u00bbde ce billet, peu importe si on n’y comprend rien, ON NE TOUCHE A RIEN \ud83d\ude09 , on copie juste le code et on sort en mettant \u00e0 jour, bouton \u00ab\u00a0Update\u00a0\u00bb dans le cas pr\u00e9sent.<\/p>\n

    Une fois de retour dans l’\u00e9diteur du billet, ne pas s’inqui\u00e9ter, c’est un rectangle jaune qui repr\u00e9sente l’espace r\u00e9serv\u00e9 pour le diaporama qui sera visible lors de la publication.<\/p>\n

    \"\"<\/a><\/p>\n

    Reste \u00e0 publier et voil\u00e0 \ud83d\ude42<\/p>\n

    \"\"<\/a><\/p>\n

    C’est valable pour des vid\u00e9os, des gadgets divers.<\/p>\n

    Pour ceux qui connaissent un peu plus, attention \u00e0 ce qu’accepte la plateforme d’arriv\u00e9e, par exemple Hellotipi n’accepte pas les iFrames, donc par exemple pour ins\u00e9rer une vid\u00e9o YouTube qui laisse le choix, choisir le \u00ab\u00a0vieux code\u00a0\u00bb avec un \u00ab\u00a0object\u00a0\u00bb.<\/p>\n

    Des questions? Ne pas h\u00e9siter, c’est fait pour.<\/p>\n

    Tiens et d’ailleurs j’en profite pour le coller ici aussi ce joli diaporama \ud83d\ude09<\/p>\n

    <\/object><\/p>\n","protected":false},"excerpt":{"rendered":"

    Ceci est un petit tuto pour des camarades de la communaut\u00e9 Hellotipi, mais dans l’id\u00e9e \u00e7a vaut pour bien des outils de publication sur Internet. Dans le cas pr\u00e9sent nous allons inclure un diaporama Flickr dans un article de notre site Hellotipi. Une page web c’est un peu comme un patchwork, \u00e7a consiste \u00e0 accoler […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[13],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2MSpd-2G","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts\/166"}],"collection":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":10,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":184,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts\/166\/revisions\/184"}],"wp:attachment":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}