Thursday, March 3, 2016

How to display HTML5 applications from Github Gist to bl.ocks.org?

The http://bl.ocks.org is a simple viewer for HTML/CSS/JavaScript code examples hosted on Github Gist, which is built by Mike Bostock. In other words, blocks.org is a tool which will convert the Gist code into the format you see in bl.okcs.org allowing you to view HTML/ CSS / JavaScript applications directly from GitHub/Gist. GitHub is a web based version control and source code repository and Gists are a great way to share your source code among the peers.

Gists could be anything, but in HTML/JavaScript perspective, it could be a beautiful visualization using d3.js, interactive web map using Leaflet or Openlayers or ESRI Javascript API, and web map with WMS layers etc. Gists can share single files, parts of files, or full applications.

If you have built a beautiful visualization using HTML/JavaScript and want to view on blocks.org. 
Here is how to do this.


1.     Go to https://gist.github.com
2.     Create a new PUBLIC gist (just need a Github account).
3.     Create an ‘index.html’ file and paste the HTML/JavaScript/CSS source code for your                            visualization in ‘index.html’


4.     If you have codes separated in multiple files you can include all files using ‘Add file’ button
5.     You have created a Gist, now check the URL, along with your username an id will be generated          for your gist as in the example below.



6.     Just change the URL. Replace https://gist.github.com by http://bl.ocks.org





GitHub

0 comments :

Post a Comment

 

© 2011 GIS and Remote Sensing Tools, Tips and more .. ToS | Privacy Policy | Sitemap

About Me