Website screenshots shown as an HTML presentation

Posted by

    Entrance monitor

    Styling and animation on the web has matured a great deal lately. Since the beginning of the web in the early 90's, new technologies such as HTML5, CSS3, JavaScript, Flash, Silverlight, and so forth have all contributed to improving our visual web experience. How could the latest technology be used to showcase a number of screenshots taken from live websites?

    The basic idea: A self-running presentation written in HTML

    If the end solution needs to work across multiple platforms and devices, HTML5 is the perfect place to start. As long as the device is using a relatively modern browser, then the solution should be able to run on any device. Of course, there are exceptions to this rule, and the desire to create awesome visuals may put further pressure upon using cutting-edge technologies that are not fully supported. Sadly, there are a number of CSS3 features that are still unsupported on common browsers. For the sake of simplicity, let's assume that at some point in the future, the CSS3 features that are currently supported by the Google Chrome browser have become established as the de facto standard.

    It's time to Impress

    One way of assuring that you get a flying start and at the same time stand on solid ground, is to start out with a well-tested framework. Impress.js is one JavaScript framework that seems to offer some intriguing CSS3 features. It seems to be inspired by the features behind prezi.com, and is fairly simple to set up. You simply provide a number of attributes on the DOM elements that are to be part of your presentation, and the rest is handled by the framework.

    In order to create a presentation of website screenshots in Impress, a series of images will have to be in an HTML document, and these images need to be tagged with the proper attributes. A typical set up for Impress slides is like this:

    NOTE: At the time of writing, Impress.js needs to be included as a <script> tag in the bottom of the <body> in order to work. In other words, it will not work if you put the script inside the <head>, and you may not initialize the script inside of a onready-function either. So the lesson here is to follow the instructions exactly as they are written in the source.  

    Customizing

    On its own, Impress is lightweight and simple, and it's up to you to use your leet web developer skills to improve upon the default. Fortunately, this is a very simple process.

    Automatic next slide

    Impress is meant to be viewed as an presentation where the presenter or viewer can manually move to the next slide. But in this case, these slides should increment automatically. To make Impress do this, you can set up a timer function to call itself after a certain amount of time, in this case 5 seconds:

    function nextMainContentInterval() {
    
    setTimeout(function () {impressApi_mainContent.next(); nextMainContentInterval();}, 5000);

    }

     

    With all the functionality done, all that remains is simply to add some CSS3 shadows and reflections, and the presentation suddenly comes to life!

    Screenshotter

    One of the challenges when having screenshots of webpages is to have these updated at all times. A typical workflow would be that a person would have to manually go to a webpage, take the screenshot, maybe do some editing on the image and finally upload the image to the CMS and publish it. This would typically lead to images being outdated, and not actually reflect the current state of a site.

    The idea was to make a simple tool where you could simply pass in an url, and a screenshot of that webpage would be automatically available.

    How it was done

    Trying out node.js was one of the goals when starting to make the tool. That meant that a JS framework that could take screenshots would be needed. The choice fell on phantom.js ( http://phantomjs.org/ ). It is a headless WebKit scriptable with a JavaScript API. It was easy to get it up and running, and between 20-30 lines of code was needed for the whole process of grabbing a screenshot. The code for the project can be seen on github ( https://github.com/daa1/screenshotter ).

    In addition Express ( http://expressjs.com/ ) was chosen as a framework for the web application. This was chosen because it made it easy to set up routes and templating. An example of setting up two routes and binding them to a template can be seen below. Jade templating was used for the project.

    The actual storage of the images was done using Amazon webservices. S3 (Simple Storage Service) was used, and a bucket was created which containted all the generated images. This was very easy to achieve, since there was an AWS SDK available for Node.js.

    A very simple interface was made, basically consisting of the pages. A form page and list page.

    Webpage screenshotter list Webpage screenshotter form

     

    In addition a simple json output page was made, so that the data needed for grabbing the generated images could easily be used in the presentation framework.

     

    Testing and deploying app with Heroku.

    Testing out Heroku was one of the goals when starting out the project, it is easy to get started with and a great solution if you don't have a webserver available to test out your application or just if you don't like to think about server stuff too much. Short and sweet, Heroku is a polyglot/multilanguage cloud application platform, which offers easy deployment of code to server with a little configuration and the command "$>git push heroku master"

    Heroku quickstart.

    We log in to our Heroku account via the terminal.

    Node.js and Heroku.

    Heroku recognizes an app as Node.js by the existence of a package.json. Even if your app has no dependencies, you should still create a package.json that declares a name, version, and empty dependencies in order that it appear as a Node app. Read more about Heroku and Node.js here .

    package.json:

     

    Environment variables in Heroku

    We wanted to work with the Amazon S3 bucket API and push the code to Heroku and git, without pushing our secret credentials remotely, for this you may define environment config vars in Heroku in the same manner on both client and server, and use these directly in our code.

     

    Testing app locally and pushing remote to Heroku with Foreman

    It’s important when developing and debugging an application that the local development environment is executed in the same manner as the remote environments.  Foreman is a command-line tool for running Procfile-backed apps. It’s installed automatically by the Heroku Toolbelt. For this to work you must create a Procfile in your project root.

    You may now:

     

    To test your application, log in to Heroku and create one web-app dyno to run your code, and you will get an automatically generated url  on the form http://yourapp.herokuapp.com where you may test your app.

    We cannot cover all details of using Heroku here, but if you read Heroku's great quickstart , it is quite straight forward - especially if you are already familiar with git, and it is free as long as you only run one web dyno.

    Conclusion

    Getting a working prototype up and running was an enjoyable experience, and was easier that first anticipated. There are many improvement areas, but as a proof of concepts it was a success, and could be built in a short time.

    Possible improvements

    Possible extensions and improvements of this project could be the following:

    • Impersonate a mobile device such that screenshots of mobile pages could be taken
    • Easier updating and deletion of existing screenshots

    Comments