Clapico's Blog
Autour d'Ubuntu…
Insérer un calcul d’itinéraire Google Maps sur son blog ou sur son site
Je me creuse la tête depuis quelques temps pour insérer un calculateur d’itinéraire sur le site que je suis entrain de construire pour la future activité de mon épouse afin que les clients puissent trouver et imprimer le trajet leur permettant de nous rendre visite.
Je me suis dans un premier temps rendu sur le site calculateur-itineraire.com qui permet sans grande compétence d’éditer le script, qui l’héberge et qui vous communique par mail l’adresse à insérer dans les balises <i frame> afin de faire apparaître le résultat sur votre site.
Si cette solution est pratique, elle présente quelques inconvénients :
- la barre « Annonces Google » que je ne souhaite pas faire apparaitre mais calculateur-itineraire.com est en droit de prétendre à une certaine rémunération en échange du service rendu,
- l’impossibilité d’effectuer tous les paramétrages que l’on peut souhaiter pour une bonne intégration sur son site.
A force de recherches, j’ai trouvé différents scripts que j’ai modifié jusqu’à obtenir le résultat escompté mais l’insertion dans une page WordPress du site de mon épouse ne me satisfaisait pas.
Au final, j’ai crée une page html que j’ai uploadé à la racine de son site puis, dans la page du site prévue à cet effet, j’ai inséré une balise <i frame> qui m’a enfin donnée satisfaction. Vous pouvez testez ci-après ce calculateur qui vous mènera tout droit là où plusieurs personnes se bousculent tous les cinq ans pour y vivre.
Pour pouvoir insérer une carte de ce type sur votre site, il vous faut dans un premier temps avoir un compte Google mais entre Picasa, Gmail et Google+, c’est peut-être déjà le cas. Une fois connecté à ce compte, vous devez récupérer une clé Google Maps API en vous rendant sur la page dédiée. La clé vous est délivrée instantanément, vous n’avez qu’à la copier quelque part pour ne pas l’égarer.
Vous devez ensuite identifier les coordonnées de votre point d’arrivée en recherchant l’adresse dans Google Maps puis en effectuant un clic droit sur l’endroit précis pour choisir « Plus d’info sur cet endroit », ce qui permet l’affichage des coordonnées dans la barre de recherche.
Copiez ces coordonnées, nous en aurons besoin pour la personnalisation de votre script.
Ouvrez un éditeur de texte et copiez le script suivant. Les zones de texte en rouge devront impérativement être modifiées:
<html>
<head>
<title>Calculateur d'itinéraire</title>
<meta http-equiv="Content-Type" content="application/xhtml+html; charset=utf-8" /
<meta name="Identifier-URL" content="http://votre.site.com">
<META NAME="Author" CONTENT="VDC">
<META NAME="OWNER" CONTENT="VDC">
<META name="Rating" content="general">
<META name="revisit-after" content="15 days">
<META name="robots" content="index, follow">
<META name="Robots" content="All">
<META http-equiv= »Content-Language » content= »fr »>
<LINK REL= »SHORTCUT ICON » HREF= »favicon.ico »>
<style type= »text/css »>
body { font-family: Arial, Verdana, sans serif; font-size: 11px; margin: 2px; }
table.iti { background-color: FFFFFF; font-size: 11px; margin: 4px; }
table.directions th { background-color:#C5DDE7; font-size: 15px;}
table.directions td { font-size: 11px;}
img { color: #000000; }
#map_canvas { width: 396px; height: 460px; border: 0px solid #333333 ; margin: 0px;}
#directions { width: 2196px; height: 460px; border: 0px solid #333333 ; margin: 2px; overflow: auto; width: auto; text-align: left; font-size: 9px; }
</style>
<style type= »text/css » media= »print »>
.print { display:none; }
#directions { width: 460px; height: auto; border: 0px solid #333333; margin: 2px; text-align: left; font-size: 9px; }
</style>
<script src= » http://maps.google.com/?file=api&v=2.x&key=ZZZZZZZZZzzZZZZ1zzZZZZz1zZZZZzZzzZZzzZzZZzz1ZzZzzzZZZZZzzZZZZzz1ZzZZZZZzZzz_ZzzzzZzzZZ » type= »text/javascript »></script>
<script type= »text/javascript »>
var map;
var gdir;
var geocoder = null;
var addressMarker;
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById(« map_canvas »));
gdir = new GDirections(map, document.getElementById(« directions »));
GEvent.addListener(gdir, « load », onGDirectionsLoad); <!– Charge la partie pour les distances –>
GEvent.addListener(gdir, « error », handleErrors); <!– Charge la partie pour les messages d erreurs –>
map.setCenter(new GLatLng(48.870897,2.316931), 6);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
var point = new GLatLng(48.870897,2.316931);
map.addOverlay(new GMarker(point));
}
}
function setDirections(fromAddress, toAddress, locale)
{
gdir.load(« from: » + fromAddress + » to: » + toAddress, { « locale »: locale });
}
function handleErrors()
{
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert(« Aucune location géographique correspondante n’a pu être trouvée pour l’une des adresses spécifiées.\nCe qui peut être du à une adresse récente, ou incorrecte.\nN’oubliez pas d’ajouter dans l’adresse le pays (en anglais).\nError code: » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert(« La demande d’itinéraire n’a pu être calculée avec succès, aucune raison de l’échec n’est connu.\n Error code: » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert(« The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert(« La clé (Key) n’est pas valide ou ne correspond pas au nom de domaine. \n Error code: » + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert(« La demande d’itinéraire n’a pu être correctement parsé.\n Error code: » + gdir.getStatus().code);
else alert(« Une erreur inconnue est survenue. »);
}
function onGDirectionsLoad()
{
var reg=new RegExp(« », « g »);
kilometrage = gdir.getDistance().html;
document.getElementById(« km »).value = kilometrage.replace(reg,’ ‘);
}
</script>
</head>
<BODY BGCOLOR= »FFFFFF » TEXT= »#000000″ leftmargin= »0″ rightmargin= »0″ topmargin= »0″ bottommargin= »0″ marginheight= »0″ marginwidth= »0″ onLoad= »initialize(); » onUnload= »GUnload() »>
<form id= »monFormulaire » method= »post » action= »# » onSubmit= »setDirections(this.from.value, this.to.value, ‘fr’); return false »>
<table width= »496″ border= »0″>
<tr valign= »top »>
<td align= »right » width= »40″><strong>Départ:</strong></td><td align= »left » width= »400″><input type= »text » id= »fromAddress » name= »from » size= »40″></td>
<td align= »right » rowspan= »3″ width= »40″ valign= »middle »><input name= »gogogo » type= »submit » value= »Itinéraire » /><br><A href= »javascript:window.print() »><img src= »printer.gif » width= »32″ height= »32″ border= »0″ alt= »Imprimer l’itinéraire » title= »Imprimer l’itinéraire »></A></td>
</tr>
<tr><td align= »right »><strong>Arrivée:</strong></td><td align= »left »><input type= »text » name= »ArriveeAlt » size= »40″ value= »L’Élysée » disabled><input type= »hidden » id= »toAddress » name= »to » value= »48.870897,2.316931« ></td></tr>
<tr><td align= »right »><strong>Kms :</strong></td><td><input type= »text » id= »km » value= »" size= »9″ disabled > N’oubliez pas d’ajouter le pays (en anglais) !</td></tr>
<tr><td colspan= »3″>
<center>
<br>
</table>
<table width= »500″ border= »0″ cellspacing= »1″ cellpadding= »0″>
<tr><th width= »196″>Itinéraire détaillé</th><th width= »296″>Carte</th></tr>
<tr><td><div id= »directions »></td><td><div id= »map_canvas »></div></td></tr>
</table>
</form>
</BODY>
</HTML>
http://votre.site.com est à remplacer par l’adresse de votre site
ZZZZZZZZZzzZZZZ1zzZZZZz1zZZZZzZzzZZzzZzZZzz1ZzZzzzZZZZZzzZZZZzz1ZzZZZZZzZzz_ZzzzzZzzZZ est à remplacer par la clé Google Maps API qui vous a été fournie
48.870897,2.316931 (en trois endroits) est à remplacer par les coordonnées du point d’arrivée
L'Élysée est à remplacer par le nom de la destination tel que vous souhaitez qu’il apparaisse sur le calculateur d’itinéraire.
Vous pouvez également modifier les codes couleurs, rajouter des bordures et choisir l’épaisseur de ces dernières (je les ai mises à « 0″), modifier les dimensions d’affichage, etc.
Enregistrez vote fichier sous le nom gmap.html dans le dossier de votre choix. Enregistrez également dans ce dossier l’image ci-dessous :
Ouvrez votre fichier gmap.html dans votre navigateur internet afin de voir s’il correspond à vos attentes et modifiez vos réglages en conséquence.
Une fois vos réglages terminés, uploadez le fichier gmap.html et l’image printer.gif à la racine de votre site.
Pour insérer ce calculateur dans ce billet de mon blog WordPress, je me suis mis en mode HTML
afin d’entrer mes balises <i frame> indiquant l’adresse de mon fichier gmap.html aux dimensions de mon choix :
<p style="text-align: center;"><iframe src="/gmap.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="500" height="500"></iframe></p>
Je ne sais s’il existe ou non des moyens plus simples pour insérer ce calculateur d’itinéraire mais j’ai enfin obtenu le résultat escompté.
EDIT : Le script ayant subio quelques modifications à cause de la mise en page, vous pouvez le télécharger ICI.
Amusez-vous bien
Une horloge « Ubuntu » sur votre site
Si vous souhaitez afficher l’heure sur votre blog ou site (html ou xhtml) aux couleurs d’Ubuntu, SpreadUbuntu propose une version remaniée sous licence Creative Commons BY-SA de CooclClock (BSD OpenSourceLicence) aux couleurs de votre O.S. de prédilection.
- Dans un premier temps, vous devez télécharger le dossier source.
- Décompressez le dossier.
- Ouvrez le dossier « ubuntu_clock_1_0.1″
- Uploadez le dossier « ubuntu clock » à la racine de votre site
- Copiez entre les balises <head> et </head> de la page où vous souhaitez faire apparaître l’horloge le code suivant :
<script src="ubuntu clock/jquery.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="ubuntu clock/excanvas.js"></script><![endif]-->
<script src="ubuntu clock/coolclock.js" type="text/javascript"></script>
- Copiez entre les balises <body> et </body> de la même page le code suivant :
<canvas style="background-image: url('ubuntu clock/ubuntu.png'); background-repeat:no-repeat; background-position:center"></canvas>
Amusez-vous bien
Comment installer FlatPress, éditeur de blog libre sans base de donnée
FlatPress est un éditeur de blog open-source qui ne nécessite pas l’utilisation d’une base de données pour fonctionner. FlatPress n’a donc pas besoin de MySQL puisque tout les contenus sont gérés au travers de fichiers textes. Il suffit donc de bénéficier d’un espace web supportant au minimum PHP4.Pour installer FlatPress, il suffit de le télécharger sur Sourceforge.net, puis de décompresser l’archive et ensuite de transférer tous les dossiers et fichiers à la racine de votre site (ou dans un dossier spécifique si comme moi vous souhaitez simplement tester cet éditeur de blog).
Une fois tous les dossiers et fichiers transférés, il suffit de renseigner dans votre navigateur l’adresse « http://www.votre_nom_de_domaine.com/setup.php » (ou si vous avez créé un dossier test) « http://www.votre_nom_de_domaine.com/votre_dossier/setup.php ».
La mise en route est très rapide puisqu’il suffit de créer son nom d’administrateur avec mot de passe et adresse courriel.
Une fois que vous avez cliqué sur « Next », votre éditeur de blog est opérationnel.
La preuve en cliquant sur le lien « See how the home page looks like »
Pour se rendre sur la page d’administration, il suffit de rentrer la même adresse que lors de la mise en route en remplaçant « setup.php » par « admin.php »
C’est d’ici que vous pourrez gérer billets, widgets, plugins, thème et maintenance de votre blog.Il convient toutefois de noter que FlatPress n’est pas disponible en Français et que la mise en forme des billets se fait soit en XHTML, soit à l’aide de balises BBCode.
Pour voir de plus près ce que cela donne, je me suis amusé à faire une page test avec un thème différent que celui proposé. Le résultat est visible ICI. Si vous souhaitez vous aussi tester FlatPress, il vous suffit de vous rendre sur le site officiel.
Amusez-vous bien.
Comment mettre à jour son blog WordPress avec un minimum de risques et sans (trop de) gêne pour vos visiteurs ?
Chaque fois qu’une nouvelle mise à jour WordPress est proposée, je suis pris d’angoisses et de sueurs froides car je me demande si tout va bien se passer.
Souvent je suis passé par la réinstallation automatique qui, avouons le a rarement fonctionné du premier coup. J’ai donc réalisée manuellement les mises à jour suivantes mais à cause de mon débit rural, c’était plutôt long et mon site restait inaccessible tant que je n’avais pas fini.
Quand hier soir j’ai vu qu’une mise à jour vers la version 3.0.1, j’ai décidé de procéder de façon légèrement différente.
- Téléchargez la nouvelle version
- Décompressez l’archive
- Ouvrez le dossier wordpress et supprimez le dossier WP-contents
- Lancez votre client FTP et, à la racine de votre site, downloadez tous les fichiers ainsi que le dossier WP-contents (au cas où) et archivez les sur votre PC dans un nouveau dossier.
- Copiez le fichier wp.config-php qui a été downloadé à l’étape précédente dans le dossier wordpress-3.0.1-fr_FR (la nouvelle version de WordPress)
- Toujours dans ce dossier wordpress-3.0.1-fr_FR, renommez les sous dossiers wp-admin et wp-includes (par exemple en mettant « new devant ».
- À l’aide de votre client FTP, uploadez ces deux dossiers renommés à la racine de votre site, ce qui permet tout en ayant commencé sa mise à jour de le laisser visible par vos visiteurs.
- A partir de maintenant, votre site sera momentanément inaccessible. mis pour très peu de temps. Vous pouvez si vous le souhaitez uploader un fichier index.html afin de faire patienter vos visiteurs (ne fonctionne que pour la page d’index) comme celui-ci par exemple :
- Allez sur votre console d’administration WordPress afin de désactiver toutes les extensions
- Avec votre client FTP, à la racine de votre site, renommez les dossiers wp-admin et wp-contents en mettant par exemple « old » devant puis, renommez les deux dossiers new-wp-admin et new-wp-contents précédemment uploadés en wp-admin et wp-contents
- Uploadez tous les fichiers (pas les dossiers) du dossier de la dernière version WordPress (dans mon exemple wordpress-3.0.1-fr_FR)
- Retournez sur votre console d’administration (vous aurez peut-être un message vous demandant de faire une mise à jour de la base de données, faites-le puis réactivez vos extensions.
- à l’aide de votre client FTP, supprimez le fichier index.html que vous aviez créé afin de faire patienter vos visiteurs. Votre blog est à jour et n’aura été indisponible que pendant 2 à 3 minutes.
- Dans votre navigateur internet, entrez l’adresse de votre site pour voir si tout est en place.
Amusez-vous bien
Pour ou contre le captcha dans les commentaires ?
Hier, sur un des commentaires postés sur un des billet de ce blog, j’ai pu lire en fin de phrase et entre parenthèses : « C’est nul ce captcha, il n’y a pas d’autres solutions pour éviter les spams ?«
La réponse est simple : « Si, avec WordPress il y a Askimet ».
Askimet fait bien son travail et filtre les spams en fonction du nombre de liens présents dans le commentaire. Le captcha ne sert donc réellement qu’à l’administrateur du site puisque comme il empêche les robots de spammer, il n’y a (presque) plus de commentaires indésirables et donc plus de nécessité d’aller vider la « file d’indésirables ».
J’ai également choisi de devoir approuver un commentaire lorsqu’il s’agit d’une première afin d’éviter les « kikoulol ». Lorsque le lecteur en postera un second, celui-ci sera automatiquement approuvé.
Depuis la suppression du captcha, plus de vingt spams ont ainsi été filtrés efficacement, charge à moi d’aller de temps en temps les supprimer de cette fameuse « file d’indésirables ».
Je suis prêt à continuer le test sans captcha mais je souhaiterai savoir, d’une manière générale, comment se comporte le lecteur qui souhaite poster un commentaire face à la contrainte du captcha. Merci de me donner votre avis sur la question.
- Taltan.Blog.Bkp: Régler le bug de l'icone Gimp invisible dans le lanceur latéral sous Ubuntu 12.04
- Geek de France: Moi, j’aime le X
- Taltan.Blog.Bkp: Ambiance Dark pour Ubuntu 12.04
- Littlewing: Re schtroumpfer les vidéos schtroumpf (flash) de youtube
- Rom1: Configurer le thème des applications GTK sous KDE
- Taltan : Régler le bug de l'icone Gimp invisible dans le lanceur latéral sous Ubuntu 12.04
- Marien Fressinaud : Open Discussion Day ce 19 mai
- Philippe Scoffoni : Edito vidéo – Microsoft retombe dans ses anciens travers avec Windows 8 RT, Mozilla porte plainte
- Geek de France : Moi, j’aime le X
- dada : Mandriva rendue à sa communauté
- Bonjour April: Bonjour samedis du libre
- Philippe SCOFFONI: Edito vidéo – Microsoft retombe dans ses anciens travers avec Windows 8 RT, Mozilla porte plainte
- Frederic BEZIES: Il est venu le temps des dérivés… Enfin presque :)
- Bonjour April: Bonjour les pin's
- Patrice ANDREANI: L’April interpelle le nouveau gouvernement.
- Cyrille BORNE : Notre enseignement est il parasité par notre propre apprentissage ?
- Jean-Marie GILLIOT : La révolution du Mooc a commencée
- Arnaud Durand : Les « dys »
- Cyrille BIOT : Sortie de N’Autre école n° 31 : « Engagé(e)s ! »
- Jean-Marie GILLIOT : le BYOL – Bring Your Own Learning, conséquence du BYOD #AVAN
Les billets de ce blog sont mis à disposition selon les termes de la Licence Creative Commons Paternité - Partage à l'Identique 3.0 non transposé.
Commentaires