SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 220 visiteurs en ce moment

Accueil > Documentation > Tutoriels pour webmasters > SPIP et les API’s Google

SPIP et les API’s Google

15 mars 2010 – par Bernard Blazin

5 votes

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Vous connaissez tous Google maps et les applications qui peuvent en découler sur SPIP ?

Mais savez-vous qu’il existe une ribambelle d’API Google applicables à SPIP.

Procédons par étapes

  • Les Google Maps
  • Les Graphes ( camemberts, courbes, histogrammes, gauges)
  • Les geo maps
  • Les gadgets

Les Google Maps

Elles présentent souvent un aspect ludique dans un site internet et bien pratique pour géolocaliser un lieu ou pour proposer un itinéraire.
L’API Google Maps est connu sous trois versions : V1, V2 (la plus utilisée) et enfin la V3 en cours de développement et qui ne nécessitera plus de clé.

Le plugin SPIP le plus connu étant GIS Escoitar

Il est bien entendu possible de faire des tas d’autres choses avec Google Maps et SPIP comme ces exemples :

Lieux intéressants

Itinéraires

Ou encore des Street Views

Accompagné d’un fichier xml, il est également possible de faire passer des tas d’informations dans les markers, les positionner, ajouter des images, du son, etc..
Couplé avec un fichier kml, on peut créer des zones de couleurs, des tracés, des cercles, des polylignes etc..

Les Graphes

Un autre API bien pratique est celui qui permet de faire des graphes dynamiques comme celui-ci :

Camembert. Cliquez un peu partout pour voir des effets intéressants. Dans cette exemple on affiche la popularité relative et absolue des dix derniers articles déposés sur le site. Il n’est pas necessaire d’avoir de grandes connaissances en javascript pour obtenir ces jolis graphiques.

<script type="text/javascript"
    src="http://www.google.com/jsapi">
   </script>
   <script type="text/javascript">
     google.load('visualization', '1',
       {packages: ['piechart']});
   </script>
   <script type="text/javascript">
     function drawVisualization() {
       // Create and populate the data table.
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'titre');
       data.addColumn('number', 'popularité');
       data.addRows([
       <BOUCLE_a(ARTICLES){tous}{par date}{inverse}{0,10}> ['#TITRE',{v:#POPULARITE_ABSOLUE, f:'#POPULARITE\u00a0#TITRE'}],</BOUCLE_a>
               
         
       ]);
     
       // Create and draw the visualization.
       new google.visualization.PieChart(
         document.getElementById('visualization')).
           draw(data, {width: 400, height: 240, is3D: true, title: 'Popularité des 10 derniers textes'});  
     }
     google.setOnLoadCallback(drawVisualization);
   </script>

 </head>
 <body style="font-family: Arial; border: 0 none;">
   <div id="visualization"  style="width: 400px; height: 300px; border: 1px solid black;">
   
   </div>
       
 </body>

Un Histogramme :
exemple

Le principe est le même que pour le camembert

Géo Maps et Gadgets

D’autres exemples ( certains étant des gadgets pas toujours très utiles )
Sur la page des API’s Google

Dernière modification de cette page le 20 mars 2010

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Des jeux dans vos articles !

    9 décembre 2006 – 567 commentaires

    Le plugin « Jeux » permet d’insérer dans vos articles des jeux ou des exercices de toute sorte.

  • Plugin Modèles media

    25 avril 2011 – 181 commentaires

    Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

  • Qrcode

    3 novembre 2010 – 46 commentaires

    Les QrCodes sont des codes barres lisibles essentiellement par les téléphones portables et permettent d’échanger avec ceux-ci diverses informations, et en particulier des liens. Ce plugin à pour objet de permettre à spip d’utiliser des QrCodes pour (...)

  • Speedsyndic pour SPIP 2 et SPIP 3

    11 octobre 2010 – 27 commentaires

    Ce plugin est une version compatible spip 2.0.x / 2.1 / 3.1 du plugin Speedsyndic Note : Une bonne partie du texte ci-dessous a été pompé de cet article, expliquant la version précédente du plugin. je n’ai fait qu’adapter le code pour spip 2, (...)

  • LIM : alléger l’espace privé

    20 avril 2015 – 41 commentaires

    Ce plugin permet de désactiver l’affichage de blocs ou de boutons, présents par défaut dans SPIP mais qui peuvent devenir inutiles dans le cadre de votre projet. Il allège du coup l’interface d’édition et supprime d’éventuels risques de confusion (...)

Ça spipe par là