SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 93 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

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Galleria (fr)

    16 novembre 2011 – 192 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)

  • ScolaSPIP 4

    19 janvier 2016 – 371 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 (...)

  • Newsletters

    16 janvier 2013 – 474 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 16 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)