Recherche sur le blog

lundi 21 février 2011

[JavaScript] Google Maps API version 2

Vous êtes dans une phase où votre site commence à prendre de l'ampleur et vous décidez de l'agrémenter en rajoutant une carte pour, par exemple, indiquer où se trouvent plusieurs points de ventes de votre société. Cela permettra à l'utilisateur de mieux situer ceux-ci pour plus tard générer un itinéraire de trajet. Il vous faudra donc au préalable une table qui contient la localisation GPS de chacun des bâtiments, afin qu'ils soient placés sur la carte lors de la génération. Mais ne brûlons pas les étapes, nous parlerons des marqueurs plus tard.

Nous allons utiliser principalement des exemples de la version 2 de Google Maps API (Application Programming Interface, pour "interface de programmation"), tout en montrant la correspondance dans la troisième version qui est apparue il y a déjà quelques mois. Pour rappel, les versions précédentes sont considérées comme dépréciées, même si on peut toujours les utiliser, ce qui est fortement déconseillé (pour des raisons de performances, de sécurité, et de fonctionnalités).

Générer la clé d'API

Il était nécessaire, avant l'arrivée des nouvelles interfaces, de générer une clé pour utiliser l'API. Celle-ci était valable pour un domaine uniquement, et devait être changée à partir du moment où l'adresse IP du serveur changeait. Il était donc possible de générer cette clé sur le site officiel de Google Maps.

Le canevas HTML

Pour notre exemple nous pouvons utiliser une page XHTML 1.0. classique ou bien HTML 4.0. Cependant si l'on suit l'évolution des navigateurs et des langages, nous utiliserons une page HTML5, dans laquelle on devra spécifier le tag "doctype" qui, notons-le, s'avère être bien plus simple syntaxiquement parlant. La structure d'une page ressemblera alors à :

<!DOCTYPE html>
<html>
<head>
...</head>
<body onload="...">
  ...
</body>
</html>
Une page sans "doctype", ce qu'il y a de plus classique, ressemblera à ceci :
<html>
<head>
...
</head>
<body>
   <div id="..." style="...”></div>
</body>
</html> 
Inclure l'API dans la page
Il est donc temps d'inclure et de charger l'API de Google dans notre page HTML.
Il existe plusieurs méthodes. On peut, avec la version 2, charger dynamiquement ou statiquement le script. 

Version 2
    
Dans cette version, une chose importante à noter : la variable API_KEY correspond à la clé générée précédemment. De plus, le script est chargé dynamiquement, en utilisant de l'AJAX (du JavaScript asynchrone).
    
 <script type="text/javascript" src="http://www.google.com/jsapi?key=API_KEY"></script>

Le script suivant permet un chargement statique. La page sera chargée entièrement une fois le script totalement chargé. Encore une fois, il est nécessaire de spécifier la clé reçue lors de l'inscription.

<script src="http://maps.google.com/maps?file=api&v=2&key=API_KEY&sensor=false" type="text/javascript">
</script>

Version 3
   
Dans la version 3 de l'API, on peut spécifier tout d'abord dans le tag "meta" si la carte doit être affichée en plein écran, ou si elle peut être redimensionnée par l'utilisateur. Ensuite, on charge le script de la même manière que ci-dessus, mais cette fois sans spécifier de clé. Quant au senseur, il permet de déterminer la localisation de l'utilisateur si on le place sur la valeur "vrai". Remarque : cette nouvelle version a introduit un paramètre "libraries" supplémentaire qui permet de charger des bibliothèques supplémentaires.
<meta name="viewport" content="initial-scale=1.0, 
user-scalable=no" />
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?
sensor=set_to_true_or_false">
</script>

Intégrer la carte à la page

Après avoir éventuellement défini un style pour le conteneur de votre carte, vous devez spécifier ce même conteneur. Idéalement, il faut utiliser une balise "div". On va donc lui spécifier un identifiant particulier qu'on réutilisera pour définir les options de la carte et pour l'initialiser.

<div id="map" style="width: 700px; height: 400px;”></div>

On crée donc un conteneur d'une taille de 700 pixels de large et 400 pixels de hauteur. Dans notre cas, il n'y a pas de feuille de style définie, puisque ceux-ci sont définis dans la balise. Bref, maintenant que le conteneur est défini, il faut initialiser la carte afin qu'elle s'affiche dans cet espace pour le moment vide.

Initialiser la carte

Version 2

Si le chargement se fait dynamiquement, il faut appeler une fonction avant d'initialiser la carte. On précise l'API à charger et la version de celle-ci, ensuite on indique qu'il faut lancer la procédure d'initialisation de la carte uniquement quand l'API est entièrement chargée en mémoire (callback).

<script type="text/javascript"> /* AJAX Loader */
    google.load("maps", "2");
    google.setOnLoadCallback(initMap);
    function initMap() { ... }
</script>

Ensuite, la procédure "initMap()" est chargée. Celle-ci est directement appelée quand on utilise l'appel classique. On initialise donc la carte dans son conteneur. Le code en commentaire est déprécié, il faut alors préférer la première solution ("new google.maps.Map2") qui est plus appropriée. La fonction "setCenter" permet de recentrer la position en spécifiant la longitude et la latitude, ainsi que le niveau de zoom.

function initMap()
{
   var map = new google.maps.Map2(document.getElementById('map'));
     // var map = new GMap2(document.getElementById('map'));
   map.setCenter(new GLatLng(50.6113123, 5.5104172), 15);
}


Version 3

On exécute une fonction appelée initMap(), qu'on peut éventuellement appeler directement depuis le corps de la page (grâce à la propriété onLoad). Dans celle-ci, on initialise les options puis la carte. Remarque : la version de l'API n'est plus indiquée dans le nom de la classe. On a donc une unification des noms pour les futures mises à jour à venir. Nous devons obligatoirement définir le type de la carte dans la version 3 si l'on veut bénéficier des contrôles associés par défaut. Nous utilisons ici le type "ROADMAP", en 2D (classique), avec un zoom de 8 et un recentrage sur la latitude et la longitude spécifiées dans la variable myLatlng, qui est un objet spécifique de l'API.

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map"), 
myOptions);

Dans l'article suivant, nous verrons comment rajouter des marqueurs, des contrôles, et comment associer le tout avec un popup créé avec l'API Dojo, fournie par... Google ! En attendant, effectuez quelques tests avec des coordonnées différentes pour voir comment se comporte votre carte.

jeudi 10 février 2011

[Utilitaires] Les outils pour programmer aisément

Ami(e)s développeurs, nous allons nous pencher un moment sur les différents logiciels existants, gratuits ou payants, qui sont destinés à vous aider dans cette tâche ardue qu'est la programmation. Le but est d'en dresser une liste, non-exhaustive cela s'entend. Tout d'abord sachez qu'il existe aussi bien des ateliers de génie logiciels (AGL) que des environnements de développement intégrés (EDI), voire de simples éditeurs de texte mais pensés pour manipuler la plupart des types de code. Nous allons commencer par ceux-ci :

Les éditeurs de code sous Linux

Il existe des éditeurs intégrés à Linux qui permettent déjà d'éditer du code, dont un bien connu mais plutôt austère au niveau de l'interface : il s'agit de "Vi". Celui-ci est présent sur toutes les distributions Linux et a pour seule interface l'invite de commandes. Impossible donc de positionner le curseur avec la souris, et les férus du terminal en seront ravis. Pour le côté historique de la chose, ce programme a été écrit en 1976 par William N. Joy, alias Bill Joy, l'un des co-fondateurs de la société Sun Microsystems, qui a été rachetée par Oracle, dans les alentours d'avril 2009. 


Sachez qu'il existe aussi l'éditeur "gedit" qui formate la syntaxe du code et permet l'indentation automatique ainsi que l'affichage des numéros de ligne. Il est cependant nécessaire de bien choisir l'encodage lors de l'enregistrement sous peine d'obtenir des erreurs lors de la compilation de code C, par exemple.


Enfin, il existe un éditeur avancé au doux nom d' Emacs. Logiciel sous licence GNU GPL, il vous offrira notamment la coloration syntaxique du code pour un large panel de langages comme HTML, PHP, C++, Java,... ainsi que le support Unicode, la possibilité d' ajouter des extensions, de programmer, compiler et débugger du code, et même de jouer lorsque vous souhaitez faire une pause. Le plus intéressant pour apprendre à l'utiliser est de lire la documentation détaillée sur le site officiel. Pour l'histoire, Emacs (pour Editor MACroS) a d'abord été implémenté au "MIT AI Lab's Incompatible Time Sharing System". La version GNU Emacs, a, quant à elle, été écrite en 1984. Et si vous ne voulez pas vous aventurer dans le monde du pingouin, sachez que les développeurs ont pensé à vous : télécharger une version pour votre système.


Les éditeurs de code sous Windows

Pour l'instant, un seul a été retenu parmi tant d'autres. Il s'agit d'un projet déposé sur SourceForge... Toujours pas deviné ? L'acronyme "NPP" devrait vous faire avancer dans vos recherches. Sans plus de suspense, il s'agit bel et bien de Notepad++. Logiciel également sous licence GPL, écrit en C++, et totalement gratuit, il saura vous convaincre grâce à ses multiples fonctionnalités : présence d'onglets pour ouvrir simultanément plusieurs fichiers, coloration syntaxique du code avec personnalisation, mémorisation des sessions, compléments, mise à jour automatique, choix de l'encodage du texte, plugin TextFX, et bien d'autres. Sans compter qu'il est léger et rapide. Rendez-vous sur le site officiel pour choisir l'une des nombreuses versions. Il est temps de remplacer le bon vieux bloc-notes!


Ateliers de génie logiciel

Ces logiciels, intégrant un bon nombre d'autres programmes, permettent de développer un projet sous plusieurs aspects : analyse (création de diagrammes UML suivant le formalisme MERISE et rédaction du cahier des charges, répartition des tâches, gestion budgétaire), gestion du temps, développement de l'interface (création de fenêtres, d'états imprimables,...), programmation (définition d'actions pour les boutons, gestion d'événements, accès aux bases de données grâce aux fonctions natives,...), tests (automatisés ou non, audit et statistiques, performances des applicatifs développés), création des procédures d'installation et compilation d'exécutables pour diverses plate-formes, ou pour une plate-forme définie.

Le logiciel le plus répandu en France dans cette gamme est WinDev, de PC SOFT. Chaque année, une nouvelle version fait son apparition avec son lot de nouveautés et de correctifs. Il offre de nombreuses activités et fonctionnalités citées précédemment, et permet aussi des accès natifs à des bases de données AS/400, Oracle, SQL Server. Il dispose aussi de son propre langage, le "WLangage". Si vous avez du temps, consultez aussi l'article de présentation de WinDev.


Développement Java et PHP via EDI

Un nom bien connu revient toujours sur les langues de tous les développeurs : NetBeans. Longtemps critiqué pour sa lenteur, surtout au lancement, mais réputé pour sa fiabilité et sa facilité d'utilisation, il vous permettra d'écrire du code Java, mais aussi PHP ! Il intègre notamment deux serveurs, Apache Tomcat et GlassFish, deux serveurs pour faire tourner des applications J2EE (Web services, EJB, sites web en JSP/servlets ou créés avec le framework Struts). NetBeans peut aussi être complété par différents modules, tel que Subversion, pour permettre de travailler sur des projets placés sous contrôle de version (c'est-à-dire qu'il est possible de cataloguer chacun des changements effectués sur chaque fichier, à chaque modification, et par la suite de restaurer une version si nécessaire). NetBeans est sponsorisé par Oracle et a son propre site officiel où vous pourrez trouver les différents bundle (certaines versions contiennent par exemple les fichiers nécessaires au développement pour les mobiles, d'autres non), pour Windows et Linux.

Une alternative efficace et tout aussi fiable : Eclipse. Ici encore, plusieurs versions s'offrent aux utilisateurs. Il permet lui aussi d'éditer du code PHP ou Java, peut être complété par des modules supplémentaires (par exemple, permettant de créer des diagrammes UML de manière assez basique), possède un système de mise à jour automatique, des aides à la saisie lors de la frappe, etc. En guise de conclusion à propos de ces deux environnements, on peut dire que l'un fait indéniablement concurrence à l'autre. Enfin... c'est une histoire de goût.

Développement en .NET

Inutile de faire tout un historique sur Visual Studio, ni d'expliquer les nombreuses possibilités de cet environnement plus que complet, et ce encore plus dans sa version 2010. Développement en C++, C#, VB, voilà en résumé ce qu'il vous permet de faire, mais comme vous vous en doutez, ce n'est rien comparé à ce qui se cache derrière tous les menus et toutes les options du géant.


Les étudiants peuvent disposer, grâce au site de MA3D, d'une version complète de Visual Studio 2005 ou 2008, pour autant que l'établissement scolaire ait fourni un accès. Notez également qu'on trouve sur ce portail des versions de Windows (mise à jour, ou complètes) à des prix assez attractifs.

Télécharger ces utilitaires

Si vous avez été attentif, des liens se cachent dans cet article. Mais n'hésitez pas à faire un tour dans la section prévue sur ce blog, où vous trouverez également des logiciels de bases de données, ou des utilitaires pour créer votre site web en local. Sur ce chers internautes, bon développement et bonne continuation dans vos projets actuels, quels qu'ils soient !

mardi 8 février 2011

[Info] Programmer oui... Mais avec quoi ?

Afin de vous aider dans vos développements, j'ai pensé à rédiger une liste d'utilitaires et outils pouvant être directement téléchargés. Il vous suffit de vous rendre sur la page "Utilitaires" et de sélectionner l'un d'eux en fonction de vos besoins. Notez que cette page est actuellement en construction mais surtout n'hésitez pas à revenir scruter tout changement (cela ne trainera pas à arriver). Bon développement !

[Web] PHP & Zend : Utiliser Eclipse pour vos développements !

Pour les codeurs purs et durs qui préfèrent utiliser un IDE (Integrated Development Environment), c'est-à-dire un logiciel offrant des outils avancés pour la gestion de votre code (comme les aides instantanées suggérant les fonctions couramment utilisées lors de la saisie, ou bien la documentation intégrée), pour la compilation, ainsi que des fonctionnalités pour améliorer l'aperçu de votre travail, il existe Eclipse qui est un environnement gratuit décliné en plusieurs versions : alors que l'une vous permet d'écrire du PHP, une autre sera utilisée pour développer et compiler du Java. Dans notre cas nous allons nous intéresser à la version disponible pour PHP, à savoir "Eclipse for PHP". Note : Bon nombre d'entre vous ont sans doute déjà entendu parler de "Zend Studio", qui est en fait une version améliorée et bien plus complète de l'EDI (acronyme français pour IDE, signifiant alors Environnement de Développement Intégré), mais qui est malheureusement payante. Pour d'autres ce nom n'évoque sans doute rien.

                           
Tout n'est pas perdu. Sachez qu'il est possible de développer un projet Zend grâce à Eclipse mais cela requiert au préalable quelques manipulations, somme toute très simples  rassurez-vous ! Énumérons d'abord les pré-requis :
  • Posséder une version d'Eclipse PDT. Vous ne la possédez pas encore ? Alors vous pouvez la télécharger librement sur le site d'Eclipse Foundation, la communauté open-source à l'origine du projet "Eclipse IDE".
  • Posséder une version quelconque du Zend Framework et l'avoir décompressée à un emplacement facile d'accès sur votre disque dur. Vous trouverez la version la plus récente sur le site officiel. Inutile de rappeler que la communauté Zend est très active : vous trouverez donc d'autres informations sur ce site ainsi qu'une documentation détaillée sur l'utilisation des divers objets.
Première étape : la création d'un projet Zend

Vous désirez partir de zéro en créant un projet flambant neuf ? Il existe de petits outils sous forme d'exécutables, qui se cachent dans les dossiers du framework, dont notamment "zf", qui permet de créer une structure basique, contenant les fichiers de base pour partir du bon pied.

Nous allons, dans l'exemple, créer un projet vide dans un répertoire nommé "zfproject" à la racine du disque dur. Le nom étant choisi arbitrairement, vous êtes libre de nommer le dossier comme bon vous semble. Ensuite, il faut lancer une ligne de commandes. Pour effectuer cela, trois choix : 
  • Sous Windows XP et supérieur, allez dans le menu démarrer, exécuter, et tapez "cmd" puis cliquez sur OK.
  • Toujours sur le même système, utilisez la combinaison "Windows + R" pour ouvrir la fenêtre "Exécuter" et saisissez la même ligne de commandes.
  • Menu démarrer, tous les programmes, accessoires, invite de commandes. L'emplacement de ce raccourci peut différer selon les différentes versions de Windows.
Saisissez les commandes suivantes (utilisez les répertoires de votre installation de Zend Framework). Dans notre cas, les dossiers sont situés dans le répertoire "share" de ZendServer :

cd C:\Program Files\Zend\ZendServer\share\ZendFramework\bin
zf create project c:\zfproject

Le résultat obtenu est : "Creating project at C:/zfproject". L'opération est terminée lorsque la ligne de commandes est à nouveau en saisie.

Deuxième étape : intégrer les bibliothèques dans Eclipse

  • Dans l'interface d'Eclipse, choisissez l'option "Préférences"  du menu "Fenêtre".
  • Dans l'arbre de gauche, déroulez le nœud qui a pour libellé "PHP" puis cliquez une seule fois sur l'option "Librairies PHP". 
  • Cliquez sur "Nouveau", donnez un nom au hasard à la librairie (celui-ci n'est pas important) puis cochez la case pour intégrer celle-ci à l'environnement.
  • Ensuite sélectionnez la librairie et cliquez sur le bouton "Ajouter un dossier externe".
  • Sélectionnez le dossier où se trouvent tous les fichiers nécessaires au bon fonctionnement du framework (exemple : "library", du dossier Zend Framework). Ce dossier se trouve là où vous l'avez décompressé.
  • Eclipse peut alors être redémarré pour prendre en compte tous les changements.
Troisième étape : créer un projet Eclipse et intégrer les fichiers créés par l'utilitaire "zf"
  • Toujours dans Eclipse, choisissez le menu "Fichier", puis "Nouveau", "Projet PHP".
  • Donnez un nom quelconque à votre projet. 
  • Cliquez sur suivant, puis dans l'onglet "librairies" cliquez sur "Ajouter une librairie". Sélectionnez "User library" puis cochez celle précédemment créée et confirmez.
  • Copiez les fichiers du répertoire "zfproject" dans le répertoire du nouveau projet et redémarrez Eclipse pour que le changement soit pris en compte.
            
           
Le tour est joué : vous savez désormais comment développer votre projet avec cet environnement, il ne vous reste plus qu'à bien vous familiariser avec celui-ci. Petite astuce supplémentaire : n'hésitez pas à activer les options d'aide à la saisie pour faire apparaître les suggestions lorsque vous tapez des noms de fonctions : cela peut s'avérer utile.

mercredi 2 février 2011

[JavaScript] Fun : comment détruire sa page Facebook ?

C'est en regardant mes notifications Facebook et les messages publiés par mes amis que j'ai découvert un petit code JavaScript qui vous permet d'afficher un vaisseau sur votre page d'accueil (où s'affichent toutes les actualités récentes de vos groupes, connaissances, pages,...) et ainsi de détruire tout se trouvant sur votre passage : amis connectés, flux récents, suggestions des personnes que vous êtes susceptible de connaître, etc. Pour que cela fonctionne, saisissez ceci dans la barre d'adresses du navigateur puis appuyez sur la touche "Entrée" pour charger le script :
javascript:var s = document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0);
Remarque : La source du code peut être visualisée en cliquant sur ce lien.

Contrôles : Le vaisseau, qui apparait sur votre gauche, peut être contrôlé avec les flèches : haut pour le faire avancer, gauche et droite pour changer la direction. La barre d'espace permet de faire feu !