Publier vos données sur le Web - Forum TIC de l'ATEN 2014

903 views
680 views

Published on

Présentation de Mathieu Leplatre au Forum TIC de l'ATEN 2014

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
903
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Publier vos données sur le Web - Forum TIC de l'ATEN 2014

  1. 1. Publiervosdonnées surleWeb ForumTICdel'ATEN2014 MathieuLeplatre @leplatrem www.makina-corpus.com
  2. 2. Sommaire... ● Fondamentauxetstratégie ● Webmapping ● Architectureetformats ● Outilspourlapublication
  3. 3. Fondamentauxetstratégie
  4. 4. Ex.architectureOGC
  5. 5. WebServer Browser Ex.architecturecarto
  6. 6. Identifiervosbesoins ● Raconterunehistoire(joli,concis) ● Valoriservotreactivité (ludique,simple) ● Présenterunrésultat(efficace,optimisé) ● Partagerdesdonnées(collaboratif) ● Outiluniversel=impossible.
  7. 7. Identifiervoscibles ● Internautes≠mobinautes ● Géomaticiens≠grandpublic ● Scientifiques≠grandpublic ● Contributeurs≠visiteurs ● Toutlemonde=personne.
  8. 8. Stratégie Pourchaquebesoin–cible : ● Trouverlescompromis (précision,rapidité) ● Choisirlesbonsoutils (« Unixphilosophy ») ● Publiervite,publiersouvent (encontinu) ● Outilssimplesetlégers(Libre) ● RespecterlesstandardsduWeb (Formatsouverts)
  9. 9. Webmapping
  10. 10. UnepageWeb ● DocumentHTML(DOM) ● Ressources(images) ● JavaScript(codenavigateur) ● CSS(apparence)
  11. 11. UnepageWebmoderne ● CSS3(animations) ● SVG(vecteur) ● Canvas(raster) ● JSON(données) ● JavaScript(interactions) ● « Mobilefirst » →Navigateurmoderne(<3ans)
  12. 12. CSS3 ● Feuilledestyle(apparence,thème) ● Transitions(apparition,...) ● Animations(rotations,...) ● Effets3D(perspectives,...) →Exemples MozillaDemoStudio
  13. 13. ScalableVectorGraphics ● Résolutioninfinie ● Interprétéparlenavigateur (DOM) ● Événements(survol,clic...) ● Détails volume→ →Exemples http://d3js.org Illustration:LogoParcsNationauxdeFrance
  14. 14. Canvas ● Zonededessin(pinceaux,JavaScript) ● Universel (2D,3D,images,...) ● Pasinterprété(<canvas>) ● Pasd'événementsDOM →Exemples http://babylonjs.com http://ol3js.org Geotrek rando !
  15. 15. Anatomied'unecarte... ● JavaScript+DOM ● Initialisation=remplissage<div> ● <img> (Fondsdecarte) ● Lat/Long pixels→ (SVG,CSS) ● Vecteur SVG→ ● Événements (interactions) (démotuiles)
  16. 16. Architectureetformats
  17. 17. « Laminimaliste» ServeurWeb Navigateur FondsFichiers Vecteur
  18. 18. « Laclassique » ServeurWeb Navigateur PostGIS Python Vecteur FondsFichiers
  19. 19. « Lacomplète» ServeurWeb Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles FondsFichiers
  20. 20. Formats(1/3) ● Imagesraster(PNGouJPG) ● z/x/y.png ● WMTS ● ProjectionEPSG:3857(Google) →Donnéesfroides (fichiers,fournisseur) …→ ouchaudes (moteurderendu) Arborescence de fichiers !
  21. 21. Formats(2/3) ● GeoJSONpourlesdonnéesvecteurs ● ProjectionEPSG:4326(WGS84) →Ponctuel (exportviaQGis…) →Automatique(Talendspatial...) →Dynamique(python,PHP…) ● Vecteur ? Interactivité ?Volume ?Fréquence ?
  22. 22. Formats(3/3) ● MBTilespourlestuiles ● Tuiles+survol+légende(carteassemblée) ● Applicationsmobiles(modedéconnecté) ● Produitspar :Tilemill,Landez... ● Servispar :Apache,TileStache,Tilestream,django-mbtiles... ● Consommés :Leaflet,QGIS,GDAL...
  23. 23. Outilspourlapublication
  24. 24. Leaflet(Cloudmade,2011) ● World-WideWeb (OSM,Foursquare,Flickr...) ● Léger(~120ko) ● APIultra-simple ● Mobile ● Puissant ! <script> var map = L.map('carte') .fitWorld(); L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png') .addTo(map); </script>
  25. 25. Denombreuxplugins...
  26. 26. LizMap(3Liz,2012) ● Cartothèque« générique »(PHP) ● AssemblagedansQGis ● PublicationdepuisQGis (QgisMapServer) ● WMS/WFS(OGC)
  27. 27. TileMill(MapBox,2011) ● Ingestiondemultitudedeformats (vecteur,raster,…) ● Tuilesavecfondtransparent (superposition,…) ● SyntaxeCSS ● Esthétique
  28. 28. Charteetcarte !http://loir-et-cher-2020.makina-corpus.net
  29. 29. mapbox.com stamen.com
  30. 30. Possibilitésinfinies...http://tolosa1680.makina-corpus.com
  31. 31. Conclusion
  32. 32. ● Compromis (projectionGoogle) ● Bonsoutils (Leaflet,TileMill) ● Standards (images+GeoJSON) ● Minimaliste (simple,interchangeable) ● Nepasanticiperàoutrance ● Êtreréactifets'adapter!
  33. 33. ● TopoJSON ● Mapnik ● UTFGrid ● Protobuf ● VectorTiles ● MBTiles ● Clustering ● MapServer ● QGisServer ● … →Besoind'experts ! Illustration:F.Bonifas,MakinaCorpus
  34. 34. MakinaCorpus -FreeSoftware|Cartography|Mobile Questions ? ...etréponses! PostGIS -Leaflet–JavaScript http://makina-corpus.com
  35. 35. Présentations ● http://makina-corpus.com/blog/metier/2013/les-alternatives-libres-a-google-maps ● http://makina-corpus.com/blog/metier/2014/presentation-de-leplatrem-au-petit-dejeuner-les-bases-de-la-cartographie-sur-le-we Tutoriaux ● http://makina-corpus.com/blog/metier/2014/reduire-le-poids-dun-geojson ● http://makina-corpus.com/blog/metier/2013/infrastructure-webmapping-minimaliste-partie-1 ● http://makina-corpus.com/blog/metier/2013/des-cartes-avec-geodjango-et-leaflet Formations ● http://makina-corpus.com/formation/formation-portail-webmapping-leger ● http://makina-corpus.com/formation/leaflet ● http://makina-corpus.com/formation/formation-introduction-webmapping ● http://makina-corpus.com/formation/formation-tilemill Produits ● http://geotrek.fr

×