Aller à : navigation, rechercher

Panotour - Notions - Publication Web


Introduction

Une visite virtuelle n'est pas une simple image ou un fichier, c'est un groupe de fichiers et dossiers qui doivent tous être hébergés sur un serveur.
Bien que Panotour inclut un client FTP pour charger votre visite virtuelle sur votre serveur, un minimum de connaissances en édition web est nécessaire. Cependant, le lancement d'une visite virtuelle à partir de votre site web est assez simple une fois que les fichiers ont été téléchargés, il suffit de lancer le fichier .html depuis votre navigateur.

Example d'une visite virtuelle générée


Notes:




Code standard pour la publication Web (iFrame)

Pour afficher votre visite virtuelle sur votre site, vous pouvez utiliser ce code standard:

<iframe src="http://WWW.MY-DOMAIN.COM/VIRTUAL_TOUR/MY-TOUR.html" width="800" height="600" allowFullScreen></iframe>
  • Vous devez faire le lien vers le fichier .html de votre visite, qui est hébergé sur votre serveur web avec le reste des fichiers comprenant la visite virtuelle.
  • Vous devez remplacer les mots écrits en lettres capitales par vos propres paramètres.
  • Vous pouvez également modifier les dimensions d'affichage (en pixels ou en pourcentage), en modifiant la largeur et la hauteur à deux endroits dans le code.
  • L'attribut "allowfullscreen" est obligatoire si vous souhaitez permettre à votre visite de passer en plein écran.
  • Lors de l'intégration iFrame sur un site web responsive, suivez les étapes de cette page pour rendre l'iFrame responsive aussi.



Publication sur un blog Wordpress

Pour une intégration réussie de vos visites sur un blog Wordpress, vous pouvez:

  • Utiliser le plugin wordpress appelé "PanoPress" développé par Sam Rohn et Omer Calev. Vous trouverez ce plugin, plus d'informations sur son utilisation et leur forum de support ici: http://www.panopress.org/
    • Note - Kolor ne fournit pas de support pour le plugin PanoPress.
  • Utiliser une iFrame , si vous cherchez une solution plus simple, mais PanoPress offre plus de possibilités avancées pour l'intégration.



Partage d'une visite sur Facebook

À propos du partage sur Facebook

  • Facebook étant un réseau social très "vivant", les méthodes d'intégrations d'une page dans un billet sont susceptibles de changer à tout moment.
  • Contrairement à une vidéo, une visite virtuelle ne peut pas être installée/téléchargée dans Facebook.
  • Après avoir partagé votre page, Facebook la met en cache. Si vous avez remarqué une erreur (pas d'aperçu, mauvais titre, etc...) depuis votre premier partage, tout prochain changement ne s'affichera pas. Pour que vos prochains partages reflètent vos modifications, supprimez votre page du cache Facebook en saisissant l'URL de la page que vous souhaitez dans l'outil Facebook Debugger.
  • Lisez Recommandations en matière de partage pour les sites web et les applications mobiles
  • Les informations ci-dessus sont valables à partir du moment où ils ont été écrits. Nous ne garantissons donc pas le bon fonctionnement de cette méthode au moment où vous lisez ce document.


Seulement la vignette et informations, avec un lien externe vers la visite virtuelle

Ajoutez ces balises dans le fichier HTML de la visite virtuelle et remplacez les données par vos propre données:

<meta charset="utf-8" />
<meta name="medium" content="mult"></meta>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
<meta name="apple-mobile-web-app-capable" content="yes"></meta>
<meta name="apple-mobile-web-app-status-bar-style" content="default"></meta>

<title>VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano</title>
<meta content="VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano" property="og:title"></meta>
<meta name="description" content="VIRTUAL_TOUR_DESCRIPTION"></meta>
<meta content="VIRTUAL_TOUR_DESCRIPTION" property="og:description"></meta>
<meta name="keywords" content="VIRTUAL_TOUR_TITLE,Virtual tour generated by Panotour and Livepano"></meta>
<meta name="generator" content="Panotour Pro V2.2.0 + Livepano"></meta>
<meta content="AUTHOR_NAME" name="Author"></meta>
<meta content="COPYRIGHTS" name="copyright"></meta>

<meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" name="url"></meta>
<meta content="http://URL/" property="og:site_name"></meta>
<meta content="PATH/" name="directory"></meta>
<meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" property="og:url"></meta>
<meta content="article" property="og:type"></meta>

<link href="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" rel="image_src"></link>
<meta content="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" property="og:image"></meta>



Notes:
Facebook a placé des limitations sur l'utilisation des vignettes :

  • Sur desktop, la vignette fera 484 x 252 pixels sur un aperçu.
  • Sur mobile, la vignette fera 560×292 pixels.
  • Si votre image n'est pas assez grande, alors ne sera rendu que 154 x 154 pixels ou 90 × 90 pixels, donc préférez des dimensions pour fichier thumbnail.jpg d'au moins 600 x 315 pixels (ou mieux 1200 x 630 pixels).



La version Flash de la visite intégrée dans le post Facebook avec un bouton play

Ajoutez ces balises dans le fichier HTML de la visite virtuelle et remplacez les données par vos propre données:

<meta charset="utf-8" />
<meta name="medium" content="mult"></meta>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
<meta name="apple-mobile-web-app-capable" content="yes"></meta>
<meta name="apple-mobile-web-app-status-bar-style" content="default"></meta>

<title>VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano</title>
<meta content="VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano" property="og:title"></meta>
<meta name="description" content="VIRTUAL_TOUR_DESCRIPTION"></meta>
<meta content="VIRTUAL_TOUR_DESCRIPTION" property="og:description" /></meta>
<meta name="keywords" content="VIRTUAL_TOUR_TITLE,Virtual tour generated by Panotour and Livepano"></meta>
<meta name="generator" content="Panotour Pro V2.2.0 + Livepano"></meta>
<meta content="AUTHOR_NAME" name="Author"></meta>
<meta content="COPYRIGHTS" name="copyright"></meta>

<meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" name="url"></meta>
<meta content="http://URL/" property="og:site_name"></meta>
<meta content="PATH/" name="directory"></meta>
<meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" property="og:url"></meta>
<meta content="article" property="og:type"></meta>

<link href="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" rel="image_src"></link>
<meta content="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" property="og:image"></meta>
<meta content="https://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" property="og:image:secure_url"></meta>

<meta content="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.swf?xml=http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.xml" property="og:video"></meta>
<meta content="https://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.swf?xml=https://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.xml" property="og:video:secure_url"></meta>
<meta content="application/x-shockwave-flash" property="og:video:type"></meta>
<meta content="480" name="video_height"></meta>
<meta content="640" name="video_width"></meta>
<meta content="480" property="og:video:height"></meta>
<meta content="640" property="og:video:width"></meta>


Limitations

  • Vous devez avoir un hébergement avec un certificat SSL (votre propre ou un certificat SSL partagé) pour autoriser les connexions https: //.
  • Facebook affiche uniquement les applications Flash donc ces plugins Panotour : PanoramaMenu, PanotourMaps, Description, SocialShare, Website Viewer, Pdf Viewer, WebVideo Viewer, Gallery, Projection Menu qui sont des plugins HTML5 ne pourront pas être affichés dans le post Facebook.
  • Les options "Cible" Appareils > Bureau et Lecteur > Flashde l'onglet Génération doivent être cochés lors de la génération de la visite.



HTML et XML + tuiles sur des domaines différents, sans iFrame

1. Ajoutez un fichier .htaccess dans le dossier data avec vos fichiers XML contenat ce code :

Header set Access-Control-Allow-Origin *

2. Dans le fichier KolorBootstrap.js changez tous les chemins avec "yourProjectdata / ..." en URLs absolues. Par exemple :

http://192.168.1.201/test/yourProjectdata/...

3. Dans le fichier yourProject.xml ajouter ces lignes où YOURDOMAIN est le domaine où se trouve la visite :

<security cors="">
<crossdomainxml url="http://YOURDOMAIN/crossdomain.xml" />
<allowdomain domain="*" />
</security>

4. Ajoutez un fichier crossdomain.xml dans le répertoire racine du serveur web où est hébergé trouve la visite (htdocs / www / ... répertoire) qui contient :

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

5. Dans le fichier HTML situé sur un autre serveur, changez toutes les URL pour appeler le serveur distant qui héberge la visite :

Par exemple : http://192.168.1.201/test/yourProjectdata/...
Info: Urls are into <script>, <link>, <object>, <param> tags and embedpano() javascript method.

Cela devrait fonctionner.


Notes:

  • Seuls deux plugins présentent des problèmes, et ainsi les URLs doivent être changés dans le fichier yourProject.xml et/ou le fichier yourProject_skin.xml. Ceci vaut pour le plugin Galerie pour ses images internes et le lecteur DF pour sa méthode de openPDF.










RETOUR : Documentation / Documentation Panotour