La création de votre Visite Virtuelle est finie. Je viens de vous remettre l'ensemble des dossiers composant votre Visite Virtuelle.

Afin de rendre votre Visite Virtuelle accessible à vos visiteurs, il est nécessaire de l'intégrer dans votre site internet et de la charger sur votre serveur.
De plus, il est intéressant pour favoriser son référencement par les moteurs de recherche, d'ajouter quelques informations dans les "balises meta".

Un webmaster gère votre site ? Il sait faire,c'est le b.a. BA de la création de sites internet.

Vous gérez votre site vous-même ? Je vais vous accompagner tout au long de l'intégration de votre visite virtuelle au sein de votre site internet. Cette page a été rédigée pour vous guider pas à pas.
En cas d'interrogation, je suis à votre disposition (skype, teamviewer, téléphone) pour vous assister.

Le dossier contenant la Visite Virtuelle se présente ainsi.

Il contient :

* une page .html
(dans le cas présent, elle s'appelle "Notre-Dame-de-Fourviere.html"

* un dossier data portant le même nom

Les noms de la page .html et du dossier data NE DOIVENT PAS être modifiés.

Cette page .html et le dossier data DOIVENT ÊTRE IMPÉRATIVEMENT placés dans le MÊME RÉPERTOIRE.

contenu du dossier "data"

Le contenu du dossier data NE DOIT PAS ÊTRE MODIFIÉ, RENOMMÉ ou SUPPRIMÉ.

La page .html "appelant" le contenu du dossier data pour s'afficher, ces deux éléments doivent impérativement être placés dans le même dossier dans l'arborescence de votre site. L'emplacement du dossier est lui, sans importance.

Dans le cas présent, la page .html et le dossier data sont placés dans le dossier .../mon_site/galerie/basilique-fourviere

 

Trois options s'offrent à vous afin d'intégrer une Visite Virtuelle dans votre site en HTML. Il est également possible de lire une Visite Virtuelle dans un blog/site propulsé par WordPress.

 

Ouverture dans une page externe

Via l'utilisation d'un bouton cliquable, d'un lien texte ou en core d'une miniature, votre Visite Virtuelle va s'afficher à la place de la page actuelle ou dans une page externe (blank).

Cette intégration réclame donc la mise en place d'un bouton cliquable, d'un lien texte ou encore d'un miniature. Un lien hypertexte sera associé à ce bouton, ce texte ou cette miniature, permettant d'afficher votre Visite Virtuelle.

Vous pouvez paramétrer ce lien hypertexte afin que votre Visite Virtuelle s'ouvre à la place de la page actuelle ou dans une page externe.

Cette solution est, selon moi, à proscrire !!!

En effet, lorsque votre visiteur va afficher votre Visite Virutelle, il n'aura plus de visuel sur votre site.
Partant du principe que l'internaute ne réfléchit pas (désolé), ce dernier va spontanément fermer l'onglet contentant la Visite Virtuelle et risque par la même occasion fermer votre site.

ou

Découvrez la Visite Virtuelle

ou

 

Ouverture dans une box

L'ouverture d'une Visite Virtuelle dans une box se fait depuis un lien hypertexte, un bouton cliquable ou encore une miniature (comme précedemment).

Votre Visite Virtuelle va s'ouvrir dans une box, au dessus de la page actuelle. Cette dernière sera visible, mais grisée, en arrière plan. Votre visiteur garde donc un visuel "indirect" sur votre site. Lorsqu'il ferme la Visite Virtuelle, il est de nouveau sur votre site.

L'intégration d'une Visite Virtuelle dans une box, nécessite d'implanter un plugin jQuery sur votre site.

  • Après avoir cherché et essayé moultes plugin, je me suis arrêté sur le plugin JQuery Fancybox. Il est très léger à installer et surtout, il permet d'ouvrir dans une box une multitude de formats, depuis la simple image .jpeg à la vidéo, en passant bien entendu par la Visite Virtuelle grâce à un simple code html iframe.

Vous obtiendrez plus d'informations sur l'intégration de la Fancybox sur le site du développeur

ou

Découvrez la Visite Virutelle

ou

 

Imbriquer dans une page existante de votre site

Cette solution consiste à imbiriquer votre Visite Virtuelle au coeur même de votre site internet.

La Visite Virtuelle étant déjà affichée et active dans la page consultée, l'internaute ne quitte pas votre site. Il peut profiter de toutes les fonctionnalités de la Visite Virtuelle tout en continuant la visite de votre site.

Vous avez la possibilité de redimensionner et de positionner la Visite Virtuelle comme bon vous semble.

 

Récapitulatif des trois options d'intégration, cliquez ici !

 

Insertion dans un blog ou un site propulsé par WordPress

Dans le cas d'un blog ou d'un site propulsé par WordPress, il est possible d'ouvrir votre Visite Virtuelle soit d'une page externe, soit dans une box

L'ouverture dans une page externe se fait de la même manière que pour un site en HTML, en ajoutant un lien hypertexte, un bouton ou une vignette.

Dans le cas d'une lecture dans une box, il est nécessaire d'installer une extension du nom de Panopress.

 

Récapitulatif des trois options d'intégration, cliquez ici !

 

Votre Visite Virtuelle a été copiée dans l'arborescence de votre site et chargée sur votre serveur internet. Il faut désormais la rendre accessible à vos visiteurs. Suivant le choix d'affichage privilégié, le code html à insérer est différent, mais toujours très simple.

 

Ouverture dans une page externe

Cette solution, la plus simple au niveau programmation ne requiert que la mise en place d'un "bouton" ou d'un "lien texte" dans votre site internet.

Un lien hypertexte correspondant à l'adresse internet de la votre visite virtuelle sera associé à ce bouton ou à ce lien texte. Il faudra seulement veiller à renseigner la balise "target" correctement afin que la Visite Virtuelle s'ouvre soit dans la page actuelle, soit dans une nouvelle page.

***

==> Appel via un bouton...

La ligne de code html est :
<a  href="http://mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html" target="_blank"><img src="../../data/visuel/btn/btn-vv.png" width="153" height="40"></a>

a href="http://www.mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html"
>>l'adresse internet de ma visite virtuelle, correspondant au dossier/sous-dossier sur mon site

target="_blank"
>> indiquant que ma visite virtuelle doit s'ouvrir dans une page annexe

img src="../../data/visuel/btn/btn-vv.png" width="153" height="40"
>> le dossier contenant le chemin d'accès à votre bouton ainsi que ces dimensions.

 

==> Appel via un lien texte...

Découvrez la Visite Virtuelle

La ligne de code html est :

<a href="http://www.mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html" target="_blank"> &eacute;couvrez la Visite Virtuelle</a>

a href="http://www.mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html"
>> l'adresse internet de ma visite virtuelle, correspondant au dossier/sous-dossier sur mon site

target="_blank"
>> indiquant que ma visite virtuelle doit s'ouvrir dans une page annexe

 

Insertion dans une box

L'ajout du plugin jQuery Fancybox se fait via le téléchargement des ressources depuis le site du développeur. Toutes les explications de paramétrage sont disponible dans la rubrique "documentation"

La ligne de code html pour l'intégration dans votre site est :

<a   class="fancybox fancybox.iframe" href="http://mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html"><img src="../../visuel/img/Fourviere-interieur-rdc.jpg alt="" width="300" height="150">

a ....... href="http://mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html"
>> l'adresse de ma visite virtuelle, correspondant au dossier/sous-dossier sur mon site

class="fancybox fancybox.iframe"
>> le code appelant l'utilisation de la fancybox, avec l'ouverture d'un iframe

img src="../../visuel/img/Fourviere-interieur-rdc.jpg alt="" width="300" height="150"
>> l'adresse de ma miniature sur mon site

 

Insertion dans une page existante de votre site

Intégrer une Visite Virtuelle à l'intérieur même d'une page internet existante est extrêmement simple. Attention, la méthodologie sera différente, que votre site soit rédigé en HTML ou propulsé par Wordpress.

 
  • site en HTML

Il s'agit d'ajouter un élément html <iframe> afin d'imbriquer du contenu html (votre Visite Virtuelle) dans une page html.
Pas tout compris ??? Imaginez une poupée russe... c'est "presque" pareil.

La ligne de code html est la suivante :

<iframe src="http://www.mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html" width="800" height="300></iframe>

<iframe src=(... l'adresse internet de ma visite)></iframe>
>> élément html permettant d'appeler du contenu externe, ici la Visite Virtuelle

"http://www.mon_site.com/galerie/basilique-fourviere/Notre-Dame-de-Fourviere.html"
>> l'adresse de ma visite virtuelle, correspondant au dossier/sous-dossier sur mon site

width="800" height="300>
>> les balises "largeur" et "hauteur" permettant d'ajuster la dimension d'affichage de ma visite virtuelle au sein de ma page internet.

 
  • insertion dans un site propulsé par Wordpress

L'intégration dans une une page Wordpress nécessite l'installation d'une Extension du nom de Panopress. Cette extension vous permettra de gérer l'affichage et la présentation de votre Visite Virtuelle sur votre site WP.

Depuis le tableau de bord de votre interface "Wordpress", cliquez sur "Extensions" et sélectionnez "Ajouter"

Saississez "Panopress" dans le barre de recherche, et cliquez sur rechercher !

Installez et activez l'extension !

Le menu réglage de l'extension "Panopress" vous permet de paramétrer la présentation de votre visite virtuelle.

L'option "Panobo"x est (selon moi) à cocher, afin d'afficher votre visite virtuelle dans une box, au dessus votre site Wordpress. De cette manière, votre site reste actif en arrière plan.

Les options "Window size" permettent de paramétrer les dimensions de la "Panobox".
Vous avez aussi la possibilité de configurer un affichage pleine page en cochant l'option "Use Fullscreen".

Dés lors que l'extension est installée et paramétrée, il ne vous reste plus qu'a intégrer un "shortcode" indiquant à Wordpress l'emplacement de votre visite virtuelle (dossier sur votre serveur), ainsi que les options d'affichage.

Le "shortcode" se présente ainsi

[pano file="http://virtual-pixs.com/Virtuel/VV/basilique-fourviere/Notre-Dame-de-Fourviere.html" width="500" height="200" title="Notre Dame de Fourvière" preview="http://virtual-pixs.com/Virtuel/VV/basilique-fourviere/Notre-Dame-de-Fourvieredata/thumbnail.jpg"]

[pano file=...]
>> code indiquant à Wordpress comment et avec quelle extension ouvrir l'élément graphique mentionné

"http://virtual-pixs.com/Virtuel/VV/basilique-fourviere/Notre-Dame-de-Fourviere.html"
>>adresse internet de votre visite virtuelle, correspond à l'emplacement d'ou la visite va être lue

width="500" height="200"
>> permet de définir les dimensions de la vignette

title="Notre Dame de Fourvière"
>> titre de la visite virtuelle (présent dans la box)

preview="http://virtual-pixs.com/Virtuel/VV/basilique-fourviere/Notre-Dame-de-Fourvieredata/thumbnail.jpg"
>> adresse internet de la vignette à afficher sur votre site Wordpress

 

Il ne vous reste désormais plus qu'à personnaliser les "balises méta" présentent dans le "header" de votre page internet.

Vous pouvez modifier les balises suivantes :

<title>... - par Stéphane Urquizar | Auteur Photographe</title>
>> permet de donner un titre à votre Visite Virtuelle (remplacer les ...)

<meta name="description" content="...">
>> permet de donner une courte description de votre Visite Virtuelle, afin d'optimiser son référencement (remplacer les ...)

<meta name="keywords" content="..., Stéphane Urquizar, virtual-pixs.com">
>> permet de renseigner une série de mots clef (keywords) afin de faciliter le référencement de votre page (remplacer les ..., séparer les mots clef par des virgules)

 

ATTENTION... la mention "- par Stéphane Urquizar | Auteur Photographe" dans la balise <title> ne doit pas être modifiée ou supprimée.

MERCI... de ne pas suprimer les mots clefs "Stéphane Urquizar" et "virtual-pixs.com" dans la balise <meta name="keywords"

ATTENTION... la balise <meta name="copyright" content="Stéphane Urquizar"> ne doit pas être modifiée ou supprimée.

>> Ceci en respect du droit d'Auteur tel que définit par la loi du 11 mars 1957 et la loi du 3 juillet 1985, codifiées dans le code de la propriété intellectuelle.

Vous pouvez désormais publier votre Visite Virtuelle sur internet en la chargeant sur votre serveur.

 

Et tout ça, résumé en vidéo...

Pour terminer, je vous propose deux vidéos. L'une reprenant les différentes solutions pour insérer une Visite Virtuelle dans un site ou un blog propulsé par Wordpress. La seconde détaillant le codage HTML nécessaire sous Dreamweaver et WordPress.

1ére Partie - Les différentes possibilités d'insertion

2ème Partie - Code HTML et options d'intégration

 
Stephane Urquizar | Auteur Photographe - Visites Virtuelles, Photographies Panoramiques & Commerciales - France - Hatue-Savoie - Thonon-les-bains