Insérer une Visite Virtuelle dans votre Site

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.

Contenu du dossier de la Visite Virtuelle

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

Il contient :

* une page

* un ensemble de fichiers et de dossier

La page index.htm ainsi que les fichiers et dossiers NE DOIVENT PAS être modifiés.

Cette page index.htm, les fichiers et dossiers DOIVENT ÊTRE IMPÉRATIVEMENT placés dans le MÊME RÉPERTOIRE.

La page index.htm peut-être renommée, en prenant soin toutefois, de bien conserver l'extension .htm

La page index.htm "appelant" le contenu des fichiers et dossiers pour s'afficher, ces é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 index.htm, fichiers et dossiers sont placés dans le dossier .../mon_site/demo/Notre-Dame-Fourvierer

Information !!!

La Visite Virtuelle, tel que je vous l'a livre est à considérer comme un site entièrement autonome.

Ce qui signifie que si vous placez l'ensemble des dossier, fichiers et page index.htm à la racine de votre site, celui-ci sera totalement fonctionnel.

Intégration dans votre site internet

Trois options s'offrent à vous afin d'intégrer une Visite Virtuelle dans votre site en HTML.

Ouverture dans une page externe

Il est possible d'afficher votre Visite Virtuelle via l'utilisation d'un bouton cliquable, d'un lien texte ou encore d'une miniature.
Celle-ci pourra 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, 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.

Code HTML

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/vignette" 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 ou une Vignette...

La ligne de code html est :

<ul id="bouton">
<li>
<a href="http://mon_site.com/demo/Notre-Dame-Fourviere/index.htm" title="" target="_blank" >Visite Virtuelle</a>
</li>
</ul>

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

title=""
>> il s'agit du contenu de l'info bulle qui s'affichera lorsque le pointeur de la souris sera sur le bouton

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

 

 

==> Appel via un lien texte...

Découvrez la Visite Virtuelle

La ligne de code html est :

<a href="http://www.mon_site.com/demo/Notre-Dame-Fourviere.htm" target="_blank"> Découvrez la Visite Virtuelle</a>

a href="http://www.mon_site.com/demo/Notre-Dame-Fourviere.htm"
>> 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

Comme précédemment, il est possible d'ouvrir une visite virtuelle dans une box via... un "lien texte" ou un "bouton/vignette".

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/demo/Notre-Dame-Fourviere.htm"i<img src="../../visuel/img/img-Fourviere-interieur-rdc.jpg "alt="" width="300" height="150">

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

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

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

alt="" width="300" height="150"
>> l'attritut "alt" permet de mettre un texte alternatif en cas de problème de chargement de l'image
>> les balises "width" et "height" définissent les dimensions de la vignette

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.

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/demo/Notre-Dame-Fourviere.htm" 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/demo/Notre-Dame-Fourviere.htm"
>> 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.

Personnalisation des balises "HEAD"

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, urquizarphoto, visite virtuelle>
>> 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 "urquizarphoto.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.

 

Stéphane Urquizar | Auteur Photographe - Photographie & Vidéo Immobilière, Commerciale, Institutionnelle, Corporate - Visite Virtuelle - Tirage d'Auteur
Rhônes-Alpes - Annecy, Evian, Thonon-les-Bains, Ferney Voltaire / Suisse - Genève, Lausanne
Brecorens - 74550 Perrignier - Haute-Savoie - +33(0)6.49.31.17.05