SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 221 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 ?

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

  • Le plugin ZotSpip

    28 mai 2012 – 138 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • ScolaSPIP 4

    19 janvier 2016 – 213 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

Ça spipe par là