Documentation Vidati.fr Ce document comportera quelques éléments qui permettrons aux futurs développeurs du site vidati.fr de pouvoir se mettre en situation rapidement ainsi que de comprendre le code précédemment édité. Site repris par Jean-Pierre SOU TIENG (développement), Maxime GAUL (développement), Timothée- Junior BIBOMBE (développement & intégration). Sommaire 1 La structure générale :... 2 2 - Bref descriptif par pages :... 3 3 Perspectives d évolution :... 7 Jeudi 3 juin 2010 1
1 La structure générale : Nous avons opté pour une structure commune à chaque page du site vidati.fr : Seul le corps sera différent. Au niveau de la programmation le code de cette page est basé sur des tableau (balises <table>,<td>,<tr>,<th>) dans lesquels nous avons inclus les différentes parties d un site (header, menu de gauche, menu du haut, pied de page). Chaque page à plus où moins été commentée lorsque le code parait complexe mais sur certaines ce n est pas le cas, car cela est probablement déjà fais sur une autre page. 2
Le contenu de chaque page (donc entre les balises du corps) est séparé et est présents dans le dossier prévu à cet effet («contenu»). Le texte est encadré par une balise «div» pour pouvoir donner n importe quel attribut à ce texte et aussi par une balise «blockquote» qui permettra d avoir un texte bien structuré visuellement parlant. 2 - Bref descriptif par pages : Nos Agences : BUT -> Cette page permet au navigateur de repérer les différents centres vidati en France et aux USA. PARTIE CODE -> utilisation de l api google maps. * <a href="mailto:paris@vidati.fr">paris@vidati.fr</a><br/><br/> <center><iframe src="http://quikmaps.com/ext2/111542?t=1&ln=0&sn=1&zb=0&d=1&o=0&lat=48.8652935 020671&lng=2.35231876373291&zl=17&mt=2" frameborder="0" scrolling="no" width="90%" height="250" marginwidth="0" marginheight="0"></iframe></center><br><br> Lexique : BUT -> L internaute recherche un mot dans le jargon de l immobilier? il chosi la lettre correspondant au mot recherché et tombe dans la tranche des mots commencant par le mot recherché. PARTIE CODE -> Classes et div utilisées, avec le fichier style.css pour parvenir sur la catégorie de lettre. <div id="basic-accordian"> <center> <a href="#a">a</a> - <div id="a" class="accordion_headings" >Achat en indivision <div id="test-content"> <div class="accordion_child"> L'achat en indivision est un acte permettant à des personnes *.+. Infos Pratiques : 3
Infos Pratiques : BUT -> L internaute souhaite consulter des informations selon ses besoins, il peut les lire dans cette section. Sur le clic d un titre le contenu se déroule avec un effet ascenseur. PARTIE CODE -> Encadrement du texte entre des balises <div> ayant une classe «ascenseur» appelée dans le code javascript «ascenseur.js» ce code est modifiable et peu être changé avec d autres effets. <h4 class="ascenseur">le mandat de recherche</h4> <div><!--contenu du titre--> <h3>vous achetez?</h3> <p>notre agence vous donne acces à des milliers de biens en exclusivité.</p> Votre démarche est simplifiée: <br /> <ul> News : BUT -> Consulter les informations mises à jour grâce à des flux RSS ou XML trouvé sur internet PARTIE CODE -> Code Javascript généré sur internet. (Gratuit) Ce qu il faut remplacer ou ajouter c est le lien rss ou xml <h1 class="ascenseur">lesblogsimmobiliers.com</h1> <div> <blockquote> <script language="javascript"> var member=""; //optionnel si vous etes inscrit sur la plateforme actifpub le parametrage se fait dans votre espace membre var fichier="http://www.lesblogsimmobiliers.com/flux/a_la_une.xml"; //http://feeds.feedburner.com/lesiteimmo var limite="1"; // sujets compris entre 1 var limite1="8"; // et plus var aspect="1"; // 0 ou 1 (1 permet d'afficher lien + description, 0 que les liens) var minute="1"; // 0 ou 1 (1 permet d'afficher date et heure, 0 pas de date et heure) 4
Podcast : BUT -> Permet à l internaute de visionner des vidéos. PARTIE CODE -> Importation des liens des vidéos hébergées sur dailymotion.com. Organisation dans des tableaux. <div class="videos"><table cellpadding="3" cellspacing="8"><!--tableau qui contiendra les vidéos --><!--Vidéos de la ligne 1--> <tr> <td> <object width="480" height="360"> <param name="movie" value="http://www.dailymotion.com/swf/video/x1svv1_appartement-avendre"></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/x1svv1_appartement-a-vendre" width="350" height="250" allowfullscreen="true" allowscriptaccess="always"></embed> </object> </tr> </td> Les formulaires on été repris sur la version précédente Partenaires : BUT -> Permet à l internaute de consulter le site web d entreprises liées à vidati PARTIE CODE -> Ajout de liens vers les sites avec une propriété «target» permettant d ouvrir ce lien directement dans un autre onglet (ça évite que le lien s ouvre à la place du site vidati.fr) <h4>partners</h4> <table> <tr> <td> <p><h2>axa BANQUE</h2><br/>> <a href="http://www.xabanque.fr" 5 target="_bank">www.axabanque.fr</a></p>
Location à Prix immobilier : C est du texte avec des liens, pas de code particulier. Presse : BUT -> Permet de recevoir des newsletters par l envoi de son adresse mail par l intermédiaire d un formulaire. PARTIE CODE -> Le code intégré n est pas fonctionnel à ce moment, il génère une erreur interne au serveur. Guide de la vente : BUT -> Quelques informations au sujet de la vente de biens PARTIE CODE -> Texte entouré de balises <div> et <blockquote> et les titres appartenant à la <class= «ascenseur»> pour un gain de place sur la page. Diagnostique Qui sommes-nous? BUT -> Consulter des informations en rapport aux sujets exposés en titre des liens. PARTIE CODE -> Texte structurés. Immobilier résidentiel : BUT -> Permet de faire une recherche sur les lieux d habitation dispo selon certains critère à l aide d un formulaire. PARTIE CODE-> Formulaire. Immobilier neuf : BUT -> L internaute consulte des informations. PARTIE CODE -> Texte structuré. Immobilier d entreprise : BUT -> Permet de consulter des infos PARTIE CODE -> texte structuré, et possibilité de changer de texte selon le sujet à sélectionner dans une combobox. 6
<FORM> <SELECT NAME="ListeUrl" SIZE="1" onchange="changeurl (this.form)"> <OPTION SELECTED VALUE="">-Changer d'onglet - <OPTION VALUE="immobilier entreprise.php">immobilier d'entreprise <OPTION VALUE="immobilier entreprise(2).php">bailes commerciaux <OPTION VALUE="immobilier entreprise(3).php">les métiers </SELECT> </FORM> Crédit Immobilier : BUT -> Consulter des informations à ce sujet. PARTIE CODE -> Textes structuré. Saisie de Banque à Miami : BUT -> Consulter une liste de logement, buildings sur un large panel. PARTIE CODE -> Liste de building avec leurs informations et une photo. Choix par critères (lieux). <h3 class="ascenseur">hallandale/hollywood</h3> <div> <a href="catalogue9.php">beach Club I</a><br/> <a href="catalogue9.php">beach Club II</a><br/> <a href="catalogue9.php">beach Club III</a><br/> 3 Perspectives d évolution : Général : Images à re-disposer, redimensionner, et mise d un espace entre le texte et l image (page viager par exemple). Lexique : N afficher que les mots dont la lettre à été sélectionné dans l alphabet. Presse : Contrôle Javascript (regex) sur la forme des adresses mail entrées dans la textbox pour l envoi de mails. News : Trouver des flux rss/xml et les incorporer selon leur sujet et pertinence. Mieux disposer cette page. 7
Podcast : Avoir des vidéos quotidiennement de la part de Vidati ou même des flux podcast traitant sur l actu immobilière. 8