Wednesday 30 September 2015

Electricomics sans iPad - a (fairly non-techie) How-To

If you're following news about Electricomics, and want to see what the fuss is all about, but you don't have an iPad, you can still read the comics, with a little extra work, in a web browser. Thankfully, most of the work's one-off, so once you're set up, it'll be easier for subsequent reads.

Reading them in this way is not in any sense going against the project, by the way. The project is an open, extensible platform for reading comics. The official iPad app is the only supported reader at present, but the system's designed from the ground up to support other readers.

NB: This won't let you read the official electricomics by Moore, Doran, Ennis et al., those are ipad-only for now. You can use it to read Electricomics you've made yourself, or third-party ones, including mine

Theory

Electricomics are built using HTML and Javascript, and run in a web browser. The iPad app displays the comics inside an "embedded" web browser.

The URL you enter into the ipad App will download a ".elcx" file, which is a zip file containing HTML, javascript and images in a web-friendly format. To read them in a browser, you simply unzip the file manually, and look at it through a web browser.

Practice

Here's an example tweet, pointing to a really good Electricomic by Lars Schwed Nygård and Torgeir Trapnes:




Click the link in your web browser/twitter app, and it'll download a .elcx file to your computer.

Change the suffix of the file to ".zip", and your system (Windows, Mac, Linux) ought to recognise the file as a zip file, and open it up for you. Once opened, you'll have the following sort of folder structure:


The highlighted file, index.html, is the one you want to view in your web browser.

Double-clicking the file will sometimes work, but sometimes the javascript will only work if the pages are served up by a web server, rather than directly from the filesystem. Fortunately, there are plenty of small easy-to-setup web servers that you can use. Here are a couple of suggestions to get you started.

Windows and Mac (GUI) - Fenix Web Server 


Fenix is a user friendly web server with a graphical user interface. After installing it, run the app, and set up a new web server with whatever name you like, and pick a "port number" - I've gone for the whimsical '54321' (if you don't know port numbers, stick with that, it's probably OK on all systems). The server needs a folder too - point it at the folder you unzipped your Electricomic into. Start the server you've created,  and then open a web browser, at http://localhost:54321 (you can bookmark/favourite this to avoid typing it in every time). Here's Fenix and the web browser running side by side.


If there is no "index.html" file in the folder, Fenix will show a file listing (see above), so you can click down to the electricomic, at which point, you ought to see the "Tap to Start" message. (You're on a proper computer, so "tap" means "click"). Happy reading!


When you're done reading, stop the Fenix server, or close the Fenix app.

Mac or Linux (Command Line)


You probably have python installed on your computer. Open a command prompt/terminal, cd to the Electricomic folder, and type the following:

$ python -m SimpleHTTPServer 54321

(thanks to https://gist.github.com/willurd/5720255, which has several recipes of this type). Now open the web browser, go to http://localhost:54321 as above, and you're ready to read.

When you're done, close the terminal window, or hit Ctrl-C to stop the server.

No comments:

Post a Comment