An epic day's work

Wow, the mind boggles.  It's past pumpkin time and I've been working hard all day, but I'm so happy with the site's progress!

How the site looked at midnight

Let's break it down.

Site updates:

• Added painted background, and duplicated same here on the blog
• Cleared out nearly all test pages and images, created final structure
• Updated menus accordingly
• Corrected dynamic content of 'about' page

Slideshow mechanism updates:

• Now starts 'stopped' for the convenience of the user - can play or explore manually
• uses custom menu buttons to better fit the feel of the site

However, creating this chart was the main work of the day.  I created a script, storyboarded it roughly in ever-reliable biro, then worked on the visual style.  After a lot of experimentation, I painted eight frames of animation, looking at views of planetary motion from Aristotle to Newton. 

Turns out it's a tad tricky to illustrate abstract concepts involving the dance of celestial objects using watercolour (at least it is if you're doing it in a hurry).

Frankly, it's rather crude.  It isn't half as pretty as I had hoped, and the transitions in the text are blunt, though to be fair this is a pretty simple case.  I had originally intended to continue toward the present, examining Mars through telescopes, flypasts, and ultimately the rovers, but it seemed more satisfying to end the discussion where I did - far neater, consistent in focus and hopefully within the attention span of an audience.  I think a longer presentation would need to contain more detail.

A key point I need to work on both for modifying this text and for creating the next one, is that the images must be carefully sized and cropped to fit the site.  That frustrating side-bar is my nemesis again, and is driving me barmy.  I might consider, for the next animation, attempting to remove the background paper texture and having animated illustrations grow through the text, as per my original notion.

I do think, however, that this crude demonstration shows the validity of my idea.  It's neat, keys in to familiar visual cues, and I think puts the point across quite neatly.  I'm looking forward to improving on this as I create the next one.

Notes for the creation of the next chart:

• Paint delicate, stand-alone images without backgrounds
• Size images consistently
• Create a custom-sized document - in Photoshop if possible
• Match the text colour to that of the site (explain choices/)
• Ideally, put together in Photoshop instead of OpenOffice Draw!

 Further modifications to be made to the site itself:

• Improve the visual identity by adding a site logo/tagline/image and/or replacing the title
• Add side bar to static pages, if possible
• Make background of posts and pages translucent white to improve readability
• Correct sizing of sidebar
• Populate 'about' pages with stuff I've been drafting

Perhaps most importantly of all, I need to check that this blog is actually telling you what you need to know!

Brush-slave

Well, writing the script was very enjoyable, and designing the images, but painting them was a lot harder than I expected.  The issue is I've far more experience of painting realistic objects from references than of painting abstract concepts!  I had a few material and technique troubles too, but although my paintings aren't as beautiful as I had hope, but hopefully they're consistent enough that I should be able to pull it together.

I've sent the images off to be scanned, and in the mean time, having had some feedback it's time to improve the appearance and accessibility of my site.

Visual style

Having selected a few potential topics for my first chart, I am working on the visual style.  Playing to my strengths and looking for a unique and personal approach, I intend to use watercolours to create paintings to illustrate my necessarily digital text.  I will share some of my inspiration in another post, but for now, it's time for experimentation.

I love the way that watercolour's natural variability adds a great deal of texture and life to a picture, especially when used delicately.  The way that the pigments within a colour separate and migrate on the paper, interacting with the texture and water is so variable the results are always unique.  I'm hoping I can produce something appealing.

I feel watercolours might work very well for most topics, and for the subject of heredity may be relatively straightforward, but for my first chart I have set myself rather a challenge (for a change).  I had thought to explore Mars, and am having some difficulty representing the sky at night in watercolour.  A quick google image search wasn't terribly helpful.  Thanks to having read and implemented quite a few watercolour tutorials in the past, my first few sketches using wax resist, alcohol and salt look quite interesting.  They're drying at the moment, so it's time to do a bit more research.

I want to initially explore Mars as a remote body in the night sky, before telescopes, and the attempts to track its motion and apply laws.  For this, I would like to embellish the image of the sky with tracks and equations, but of course subtlety and beauty are my goals here, so I need to take a lot of care.

Flight 2 by Stephanie Piu-Mun Law

For a long time I've been a fan of the technical sophistication of the work of Stephanie Pui-Mun Law.  In particular, the way in which her work incorporates delicate structures into subtly washed and textured backgrounds.

Moonbathing by Stephanie Piu-Mun Law

Luckily, Ms. Law has been generous enough to share on her blog the process of creating a recent and rather subtle example, entitled Moonbathing.  She discusses various techniques, and emphasises the importance of layering thin washes, with complete drying between.  It's a ludicrously hot day and I have a fan running, so hopefully that will speed things up a little.

Now I have a rough idea of what I want to say, I've storyboarded the points in the timeline I want to cover, it's time to write the script.  Then I'll sketch in more detail, and start the paintings.

Next steps

Hooray! Huzzah! Woo!

The image animation works with the wordpress site!  I also realised that I hadn't given an image of the modified design.  I've removed comment, search and post data from the page style, as it was irrelevant to what I intended to create, which gives the whole thing a much cleaner look.  I can use a single frame as the reference image for the front of the site, and prevent it from being displayed on the image page, in favour of the iframe, linked to the .html page with the image slideshow software.   For the time being this test page can be found here, though I will inevitably delete it as I tidy and populate the final site.

I've also created the overall background image for the site (yay watercolour) and some navigation buttons to replace the ugly grey ones, but some version issues with the scanner mean I haven't been able to digitise them today. 

The next stage is the content!  I need to create some actual animations to give this site purpose, and create and populate about pages, etc.  I still haven't picked a visual style, but I can envision spending quite a bit of time with the scanner and with photoshop soon.  Fun.

Dynamic content revisited

I've largely got the site structure working as I want it, and am fairly happy with the layout.  The next step is to create some dummy content and fit it in, both to try out dynamic mechanisms and to check for bugs in the layout.

I need a nice way of switching between images.  This one looks like it might work, so let's give it a go. 

For starters - let's use an iframe to pull the page into this one. Alas my draft image is too mighty for this blog, so excuse the overload, but it's just a proof of concept.



Another option to save space and loading time might be to use a static background image below the slideshow mechanism, and switch between the content on transparent (yay alpha channel!) slides. However, that means that the basic image needs to remain static.

Aside: For future reference, this lightbox is really nice, as it lets you group multiple images, so you can access an entire group without tediously clicking in and out for each one.

Layout

This image gives an overview of what I'm working with, and what I want to change.  This is the default post layout.  In order for a post to display properly on the main page's gallery feature, it must have defined a 'featured image'.  However, by default, the image page itself has the layout above - lots of gubbins to either side, and a copy of the featured image at the top, duplicating the contents of the post.  I'm currently taking a delve into the .php file which generates the html.  Just by commenting bits out I have removed the left-hand bar.  Such beautifully readable code!

I've got rid of the left-hand 'aside' bar, but the right-hand bar, the 'sidebar', doesn't seem to be disableable in this theme.  I'm having a look through the other .php files to find where it's called from, as just commenting out the contents of 'sidebar.php' leaves it blank, but still in existence. 

Note to self: use "grep sidebar *"  to search all files in the current directory for a word.

Hmm.  Well, some bits are proving easy to remove, and others are a little more tricky.  Some of it's coded directly in the .php files as html, some of it's done entirely in css, and it's all interrelated by a really opaque network of calls and references.  Having prodded it a bit and broken it a lot, I think it's time to delete, reinstall and start again.

Hooray!  Minor victory: figuring out the custom menu feature.  It's pretty nifty!  You can nest links, but the optional 'category' link doesn't expand to a list of posts, rather it links you to another image-slider index page.

I'm using the menu in the footer instead of a header, to keep the look clean.  I'm not sure whether I might later adapt the footer to be fixed to the bottom of the window, rather than the page, but once I've got some content I'll see how it works.  If it doesn't work down there, it should be fairly simple to shift the include which calls the footer menu code into the header bar instead.  Back to trying to slim down the page layouts.

Well, after working on it from 12 to 6, I've now discovered something called "child themes" which allow you to override the parent theme without modifying it and having to delete and reinstall if you muck something up.  Woo.  So!  Now to delete, reinstall, create a child theme and do it all again! 

Half an hour of trying to get the child theme to work, I discover experimentally that the problem was a capital letter.  ARGH.  And two hours later, I discover that the whole thing was a waste of time, and I can't change what I wanted to.

Well, that feels rather like it has all been an exercise in futility, but I have made some useful changes and learned a lot more about exactly how Wordpress's themes work.

8.5 hours of code and grep and hitting refresh... I'm going to go bake a cake. 

Wuv

I love having a huge monitor...

Inspection/diagnosis tool

As just mentioned,  my next task is to disassemble the Wordpress theme I've chosen in order to tweak it to my whim. 

On the recommendation of a friend, I've duly installed the tool Firebug - a firefox extension which allows you to inspect and debug elements of a web-page from within your browser.  It looks ludicrously overpowered for what I'm trying to do, but hopefully it'll help - I'll let you know how I get on!

Pet peeves - layout

It's a relatively small thing, but still something that drives me bonkers.  I love the blog "Wave at the Bus", which documents the costume a Dad wore every day to embarrass his teenage son on the way to school in the morning, but as I'm navigating the archive I'm being repeatedly aggranoyed by a dodgy bit of layout. 

The 'older posts' link is stuck to the bottom of the (very small) number of posts displayed per page, but the navigation bar on the right-hand-side is so full of gubbins that it bloats the page out several more screen-depths.  This means that as you read, you have to ensure that you stop scrolling some indeterminate time before you hit the bottom, so that you can find the 'next' button. 

This can be easily remedied by changing the number of posts displayed by altering the URL, but still, don't default to annoying, people!

The Wordpress saga begins...

As previously mentioned, I'm using Wordpress to "power" my site.  As the label "content management system" might suggest, it manages your content for you.  I've found that this becomes essential as soon as you move beyond the most simple, static websites, as uploading content and editing pages is an epic faff. 

Once installed (theoretically taking you 5 minutes, but I've been assured that's only if your sysadmins are brainless lugs and don't care about security) Wordpress provides a back-end to manage your site and its contents.  This occurs at two levels - the straightforward, everyday content management and layout, and the nitty-gritty of automating the html and css. 

Logging in presents you with a dashboard containing reports on any recent activity on the site, a quick post facility and access to the site's controls over posts, pages, links, media and comments.  This lets you create, upload, edit and rearrange things to your heart's content from within your web browser - such a soothing relief after having to run at least three separate applications (including ssh and ftp) whenever I wanted to modify one of my old sites.  What I'm interested in at the moment,  however is the Themes.

Wordpress allows you - if you so desire - to entirely wash your hands of all things codey.  You can create your contents in a WYSIWYG editor, pick a 'Theme' (layout, widgets, colours, backgrounds etc) and a host of .php will edit everything together for you.

There are countless myriad themes out there, even if you only count the free ones.  After window-shopping a few over the past couple of weeks, I've tentatively selected Minimatica from One Designs, as it has a really interesting gallery structure.  I had hoped to use static pages for much of the content, but it looks like I might need to instead create another kind of blog-post template, and remove some of the date referencing.  There are other changes which I will list later (eg. changing the solid blocks for transparent ones), but for the time-being, I have a page which looks a little like this:

I'll need to get deep in the .php files to isolate the relevant code, but it should be do-able.  Obviously there's a lot of work required to make it look anything like this:

but strangely, I'm looking forward to it!

Looking back into my past....web designs.

As you can probably tell from the lack of posts since last week, becoming and remaining organised hasn't got any easier.  That's not to say I haven't been working on the 'site though!

Before I tell you what I've been doing though, let me explain myself a little.  I'm a bit of an arty-farty type, and have been drawing, painting and creating for longer than I can remember.  I started making websites to share my images in high school, creating simple little html-only sites with tables and the like.

At undergraduate I tried again, learned Perl, and created a new website on my groovy domain 'www.entanglement.co.uk'.  This included writing some nifty perl-powered widgets such as a chat form and notepad.  I also created one which would match up an image with its text discription and create a page to display both, so I didn't have to code every single one by hand.  As you can tell, I decided early on that hand-coding every image gallery page was a mug's game.

Eventually discovering CSS made my layouts a lot prettier, but alas didn't help overly much with the automation - it was still necessary to ssh and ftp into the server to edit pages and upload files.  In the years since, I've worked on-and-off on various incarnations of Entanglement, but I've always been stymied by difficulties with managing the upload and display of large numbers of images, their accompanying descriptions and complex web of interconnections and dependencies.  This added a prohibitive amount of time to every attempted update.

As you might be able to tell from the images so far, I've just been taking a nostaligic stroll through Entanglement using the Wayback Machine (a fabulous resource, check it out any time you want some netstaslgia), cringing at my '03 self's idea of complete sentences, crying over broken links and being vuagely amused by what I thought were appropriate taglines:

• I am the nemesis of the vole
• Premium Cardboard.
• clickclick, little clickers
• A distinct tendency to orange.    

Sadly, the Wayback Machine doesn't hold a copy of my last foray into web design, which took me months of research and development, and which I was incredibly proud of.   It was a clean, simple, dark layout, with simple navbar anchored above, footer below, and a contents box framed by logo and signature.  This contents box paired square images of my jewellery and other creations beside a free box which could containe text, thumbnails etc.  It was beautiful, and perfectly showed off my jewellery photographs, which were improving hugely at the time.  Alas, a server and then laptop crash ate all the files.  Nom, nom, nom, your work is gone.

After this last crushing defeat, and without the time or inclination to recreate my masterpiece and set up a proper content management, I made a simple static page, which links to content which I do update, based around other people's CMSs (blogger and DeviantArt).

As you've probably figured out by now, I didn't take this course to learn HTML and CSS - I've done it before, and I've had more than my fair share of dead-end web projects that don't survive the long slog of manual updating beyond the initial frenzy of setup.  Instead, though I will be using the skills I learned in these areas to control the appearance and behaviour of my site and its contents, my main driver is something a bit more ambitious.  I want to use this project as a goad to myself to set up and use a CMS-based website for both personal and science communication content, including this project.

With this intent in mind, I've spent the past couple of weeks working with my partner to set up Wordpress on his server.  It's been an interative, collaborative process: he installed the thing, I struggled with it for a while then told him what was broken, he cursed and fixed it, rinse, repeat.  I owe him some cookies, I think.  In any case, as of this morning, it is now apparently mostly working!  There was much rejoycing.


Now comes the long, slow process of customising a Wordpress theme, but I think this post is quite long enough for now.

Organisation

I've been finding it difficult to keep track of tasks and time lately, and this disorganisation has been making my work suffer from chaos-creep.  Fortunately my frighteningly motivated Maternal Unit visited yesterday, administered a swift metaphorical kick to the backside and imparted some of the organisation-foo which helped her obtain an A1 grade for her own Masters' dissertation. 

Tom's Planner

While the way we broke the dissertation down isn't really relevant to this module, Gantt charts are.  I briefly test-drove a couple of tools, but I've settled on using Tom's Planner as the interface was simple, it's accessible from everywhere online, and though I can't save offline or print from the free version, print-screen is my friend.  It should be just enough to keep me organised and keep me honest.

The Daily Rind

Another idea which looked useful, though more as a day-planner than for organising a project as such, is this 'daily rind' notion which riffs off a product that Muji came out with a few years ago, the Chrononotebook.  The idea is to take a block of time, represent it as a circle and divide it radially do assigning tasks around the rim.  Again, as a visual thinker and inveterate doodler, this appeals to me - I think it optimises the normally competing ideas of dividing up the day proportionally and sequentially, without restricting the amount of detail you can include.  

Audience and motivations

Perhaps now is the time to outline my motivations and intentions in a little more detail. 

As someone with one foot in science and the other in the visual arts, I frequent blogs and other online islands of information sharing which span both areas, often presenting hugely divergent landscapes.  Something which I find from both angles, however, is a shared love of intelligent beauty, in particular the presentation of data in a meaningful and visually appealing way.  This is most obviously manifest in the widespread sharing of the most elegant and exciting infographics, such as those found on Information is Beautiful. 

One particularly appealing example is this physical sculpture which represents the population density distribution within many of the capital cities of the world.  This installation in the Turbine hall would be just as appreciated by the arty 'set' as the scientific one.  Its cleverness, simplicity and effectiveness appeal across the perceived art/science divide. 

Concepts of attribution, traceability and accountability are increasingly evident in the realm of blogging, in the form of trackbacks and "found via"s.  Similarly, from the other end, ideas of citations and sources (which are now so easy to include in a text) are creeping in from Wikipedia and its ilk. 

Another example of beautiful information, and the one which most inspired this project, was the historic map I mentioned previously. 

An idea which intrigued me again and again during the philosophical 'science and society' module which we did in the first term was the notion of a scientific idea as undergoing a continual process of refinement and revision.  This contrasts sharply to the textbook science and known-outcome experiments we experience in classrooms.  I wish to erode this notion of scientific ideas as ossified facts which spring into being, fully formed and rigidly resistance to change.  In addition, I want to incorporate ideas of accountability and transparency, which shows the antecedents of an idea, its origins, its developments, the path that thinkers took to get to what we have now - our current best guess. 

It is my hope that by creating a beautiful, engaging piece which appeals primarily at a visual level, it will introduce to those of a more artistic bent these notions of science as an ongoing process where everything is questionable, but accountable.  I would also like the piece to appeal to those of a more scientific persuasion that art has something to offer, in giving opportunities of directly and engagingly presenting ideas which become ingrained by practice.

In this project, the medium is not the message but is intended to be the vehicle which will take that message to viewers, to grab their attention just enough that they might just begin to look at science, or the presentation of science, in a new way.

Navigation menu style

I particularly like the function of this neat little menu from the handy site CSSPlay.

Layouts

Unfortunately someone borrowed my camera (this may be the same person that dismantled the scanner), so I'm left with dodgy laptop webcam photos as the quickest way to upload my sketches.  Just recording the layout design I've settled on for my 'chart' site.

The background will be primarily on the left-hand-side of the screen, featuring an admiralty chart style sketch. 

Background

At the top of the screen, the title/tagline.  Below this and toward the rhs of the screen, a text menu (with drop-downs if I manage to make more than one 'chart').  The 'action' will happen in an 800x400px box (a size I've had some success with in the past) in the centre, with a slider below. The action may or may not be strictly divided between two 400px square boxes, depending on how the designs pan out - it could change for different topics.

The sketch in the top-right is a thumbnail of how the 'about' and any other pages will be laid out - similar to the chart page, but with the text allowed to spill downwards (rather than being confined to a height of 400px). 

At the bottom of the screen will be the all-pervasive menu I intend to give to all sub-sites within my personal website, where this will eventually go.

Exciting!