Well, It's the end of the project! Officially, at least. I haven't blogged what I've been doing today because from the moment I woke up, I've been working on assembling the second chart. I really wanted to get this piece done as I feel it really expresses the potential of my idea, and I wanted the final animation to do justice both to the idea, and to the research and painting that I had done so far.
As with all such projects, it has expanded to fill the time available, and heredity turned out to be rather a large topic to tackle. I found it very interesting though, and greatly enjoyed making the scripts, with their changes in space and time.
I was inspired by the title screen for the flash game Samorost 2, where the vines which grow into the title flex and straighten with mouseover, and by the Monet 2010 project, which has the most beautiful spreading watercolour effects.
Alas, even for an animation student something along either of those lines is somewhere of the mangnitude of a major project, and so I haven't been able to live up for my dreams. It does the job though, and given that I was restricted to using open-source software that'd run on Ubuntu, I'm very proud of what I've achieved in such a short space of time.
Only for those interested in the process: I drafted the script by hand, created it on multiple pages in OpenOffice Draw, and exported to html which created .png for each page as a by-product. I used Gimp to change the white background of each of these to an alpha transparency. I also used Gimp to clean and separate my scans. I then assembled the project in Pencil (which I heartily wish was further along in development, and could actually export any kind of animation instead of stand-alone image frames). First I added the frames of the script, then added interleaving frames, added and removed the scribbles (there are a couple of errors I haven't had time to fix), added and edited the backgrounds, and added a transparency layer to fade the image behind the text (much, much harder than you'd think it would be). I then exported the animation to a series of .png files, uploaded them, and used a bash script to create entries for each of the 85 frames in the html/javascript files which display the final animation.
I wish I'd had a single piece of software to do all that... I wish you could get Flash for Linux for $cheap...
It may still be crude, but I love it dearly.
I'm also immensely glad that I've created the website to hold these Charts in an expandable, future-proof way. The concept I've tried to convey is a message close to my heart, and the medium one which is very useful to know. I think that expanding this project further will be a good way to practice and hone animation skills as I acquire them. I also feel that the design and layout of the site suit the content quite well.
I don't believe the project has yet grown to achieve my goal of self-dissemination through beautiful, elegant simplicity, but I've taken a major step in the right direction, and it's something I hope to pursue in future.
It's no Information Is Beautiful, but it's an accessible look at the history of an idea, and I hope it will inspire people to think about science in a new way.
Monday 4 July 2011
Sunday 3 July 2011
Pigments and proteins
Today's been... long.
I've been working on my second chart, and this one is so far beyond the last there will hopefully be little comparison. I researched it in the morning (learnt rather a lot!, spent all afternoon writing the script (25 stages, compared to about 8 for the last one!) and since about 5pm I've been painting. It's now... nearly 1.30am. They're not the most complex, finished images in the world, and they're prone to my usual fault of over-working, but I'm so proud of these 8 little watercolours. My glamorous assistant is going to scan them in the morning (a version clash means the scanner won't work with my machine), then it's non-stop editing, layering, animating and coding until I can share it all with you.
Fingers crossed I can do it without exploding...
I've been working on my second chart, and this one is so far beyond the last there will hopefully be little comparison. I researched it in the morning (learnt rather a lot!, spent all afternoon writing the script (25 stages, compared to about 8 for the last one!) and since about 5pm I've been painting. It's now... nearly 1.30am. They're not the most complex, finished images in the world, and they're prone to my usual fault of over-working, but I'm so proud of these 8 little watercolours. My glamorous assistant is going to scan them in the morning (a version clash means the scanner won't work with my machine), then it's non-stop editing, layering, animating and coding until I can share it all with you.
Fingers crossed I can do it without exploding...
Saturday 2 July 2011
Polish
Chart display lightbox - now smallinated!
Some user-testing (thanks Phish, Pippa!) helped my fatigue-addled brain realise that my beautiful in-line lightbox didn't entirely solve the problem of my stupidly huge slideshow. On a screen smaller than my gargantuan one, the 'play' button is pushed off the bottom of the screen, and you can't move the lightbox around.
Remastered 'naked' frame
As a result, I'm working on replacing the images in the Mars chart, and I thought I'd take the time to use the Gimp's Curves tool to remove the paper texture and prominent edges which annoyed me about the rough slideshow. It's tedious but simple work, but I think it'll make a big difference to the feel of the piece. Similarly to abstracting the content from the page, I hope that abstracting the art from the physical bit of paper will be another step towards making the message immersive, absorbing, and stand-alone.
Friday 1 July 2011
Sharing
As sharing is a critical part of my site's idea, I've added a neat little sharing widget to the sidebar - when clicked, it offers up a menu with all sorts of sharing means. I would like to have it a little more prominently displayed, but I think there's an issue with the buttons.
Revamped content display
It's complete! Well, the display pages are. I'm really happy with the massive improvement to the content display which has come from separating the charts into a lightbox display.
I've made a few modifications to the 'post' page layout: giving it a dark background similar to the slider on the front page, changing the text to white (though I might need a heavier font, shall user-test that) and linking the chart via a centered thumbnail image.
This shot gives you an idea of how I have the chart set up to display at the moment in a lightbox. Similarly to iframe, it grabs external content and displays it in an overlay window. The slideshow player works!
I'm very happy with using Thickbox - it's straightforward to use (just add some extra code to a link to open in a lightbox instead of the same/another page), and 'just worked', which is what I'm looking for right now! There is also an addition to the WYSIWIG post editor which makes everything easier and gives straightforward access to its more powerful features, but as the WYSIWYG editor isn't working right now, it's just as well I don't need it!
New 'post' page
I've made a few modifications to the 'post' page layout: giving it a dark background similar to the slider on the front page, changing the text to white (though I might need a heavier font, shall user-test that) and linking the chart via a centered thumbnail image.
The chart displayed in a lightbox
This shot gives you an idea of how I have the chart set up to display at the moment in a lightbox. Similarly to iframe, it grabs external content and displays it in an overlay window. The slideshow player works!
I'm very happy with using Thickbox - it's straightforward to use (just add some extra code to a link to open in a lightbox instead of the same/another page), and 'just worked', which is what I'm looking for right now! There is also an addition to the WYSIWIG post editor which makes everything easier and gives straightforward access to its more powerful features, but as the WYSIWYG editor isn't working right now, it's just as well I don't need it!
Battle of the lightboxes
Well, after quite a few hours of wrestling with code, testing, re-testing, and an exciting interlude in which I accidentally installed every application available with '5' somewhere in the details (the hyperventilating was mighty),, I have switched to using Thickbox plugin for wordpress, which does the same thing, but actually works and isn't ugly. I highly recommend Thickbox! It is also available
Hoorray for study-buddies too, my friend managed to diagnose a z-layering problem and suggest the solution in 10 minutes, which would otherwise have taken me another few hours. Phew.
Now that works, it's time to improve the look of chart supporting pages.
Hoorray for study-buddies too, my friend managed to diagnose a z-layering problem and suggest the solution in 10 minutes, which would otherwise have taken me another few hours. Phew.
Now that works, it's time to improve the look of chart supporting pages.
Lightbox!
I got some useful feedback from the presentations on Tuesday, and have been mulling them over since.
One thing which I really did not like about my site was the way in which the charts operate as an object within a page. Maria solidified this for me, and after some discussion with Pippa we worked out that the best way around this would be to have the charts displayed in a stand-alone way, which will prevent the website from distracting the user while the display is in progress. It will also mean I can design the charts to optimise the user's experience, rather than having those needs compete with the factors which constrain the site's design.
A friend found me a very nice Lightbox plugin for Wordpress - Lightbox Plus - which allows you to display any kind of content in a modal window overlaying your current page. Modal windows are child windows, which appear over the usual graphical interface of a program, and disable interaction with the parent until the modal is dealt with (eg. error messages). In website design, the most familiar implementation of this is a Lightbox, traditionally a javascript-implimented window which overlays the current page in order to display highlighted content - usually high-resolution versions of photographs.
I love lightboxes - they allow you to explore visual content in all their glory, without being restricted by fitting within a website's design. By fading the website behind the content their location and route back to the website is clear, but all that 'spatial' information fades as the user is invited to concentrate on experiencing the content which they have selected.
I had been using iframes anyway, and this plugin purports to work with them, so it's time to give it a go, using these demos.
One thing which I really did not like about my site was the way in which the charts operate as an object within a page. Maria solidified this for me, and after some discussion with Pippa we worked out that the best way around this would be to have the charts displayed in a stand-alone way, which will prevent the website from distracting the user while the display is in progress. It will also mean I can design the charts to optimise the user's experience, rather than having those needs compete with the factors which constrain the site's design.
A friend found me a very nice Lightbox plugin for Wordpress - Lightbox Plus - which allows you to display any kind of content in a modal window overlaying your current page. Modal windows are child windows, which appear over the usual graphical interface of a program, and disable interaction with the parent until the modal is dealt with (eg. error messages). In website design, the most familiar implementation of this is a Lightbox, traditionally a javascript-implimented window which overlays the current page in order to display highlighted content - usually high-resolution versions of photographs.
I love lightboxes - they allow you to explore visual content in all their glory, without being restricted by fitting within a website's design. By fading the website behind the content their location and route back to the website is clear, but all that 'spatial' information fades as the user is invited to concentrate on experiencing the content which they have selected.
I had been using iframes anyway, and this plugin purports to work with them, so it's time to give it a go, using these demos.
Monday 27 June 2011
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!
Let's break it down.
Site updates:
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:
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
- 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
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!
- 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
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.
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.
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.
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.
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.
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.
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.
Wednesday 22 June 2011
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.
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.
Tuesday 21 June 2011
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.
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.
Thursday 16 June 2011
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.
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!
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 '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!
Tuesday 14 June 2011
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!
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:
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.
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.
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.
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.
Tuesday 7 June 2011
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.
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.
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.
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.
Sunday 5 June 2011
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.
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.
Wednesday 1 June 2011
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.
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!
Tuesday 31 May 2011
Solutions
Ok, I need to revamp my personal website - it's been languishing for far too long, and I want to create something which is actually useful, and which will give me an attractive place to showcase all the things I do - why let them go to waste? This web module project is a prime example. I do however need a half-decent CMS system - I've discovered in the past, over and over again, that hand-coding websites isn't feasable or sustainable.
I'm mulling over various layouts, but in the meantime I'm going to go with Wordpress, as it's very widely used and I've seen some very cool sites which are coded with it. The CMS Designs website has a few very good cases in point, and I'm really looking forward to, once all the hard design work is out of the way, having a relatively code-free way of adding things to the site. Now, I just need to wait for my sysadmin to install it...
I'm mulling over various layouts, but in the meantime I'm going to go with Wordpress, as it's very widely used and I've seen some very cool sites which are coded with it. The CMS Designs website has a few very good cases in point, and I'm really looking forward to, once all the hard design work is out of the way, having a relatively code-free way of adding things to the site. Now, I just need to wait for my sysadmin to install it...
Good design
For some reason, I really like the design of this site. It could be that I'm hungry, though... It's clean and spacious, very well interlinked and with neat product pages. The site nagavation is clearly separated from the content in a way that makes it take secondary importance to the content, and the use of cut-out images enhances the importance of the products.
I also think a lot of the "Robie House Interior Restoration Project". I'm particularly impressed by the design of the restoration tour, with desaturated photographs of entire rooms which upon hovering a node highlights a feature of interest. Clicking then brings up a hovering image box with details, and links to similar items.
I also think a lot of the "Robie House Interior Restoration Project". I'm particularly impressed by the design of the restoration tour, with desaturated photographs of entire rooms which upon hovering a node highlights a feature of interest. Clicking then brings up a hovering image box with details, and links to similar items.
Recommended viewing: Roderick Coover
Maria recommended taking a look into the work of Roderick Coover. Unfortunately his website isn't accessible from within the university, but we can see his work "Voyage into the Unkown". It's not displaying properly on this monitor so I'll have to take a look from another machine, but an initial glimpse it looks interesting: a story is spread out over a landscape and accompanied by text and images.Definitely one to look into more.
Lorem Ipsum...
This tool is very useful when mocking up websites with text: a Lorem Ipsum generator. You can define exactly how many words, paragraphs,etc. you want, and it'll generate realistic-looking text which is completely non-readable, so it won't distract the viewer.
Monday 30 May 2011
Techniques: image slider
I was so dazzled by this delightful piece of image manipulation from Román Cortés, I decided to take a closer look.
Firstly, the piece in question is included in the page via an iframe or inline frame, which allows you to incorporate the contents of another page as if they were an object. Before I discovered css, I used a 'server side include', creating my webpages as .shtml files, with repeated blocks of code replaced by references to an external file containing the code in question. Similarly to CSS, this allows you to keep your repeated elements separate and edit them once rather than many times. These techniques both have advantages and disadvantages which I'll have to look into when creating my final site, but for now iframes might come in handy for incorporating or referencing demonstration pages.
In any case, taking a closer look, we find that Román's bird piece can be found here.
This allows us to take a look at the code. The css is contained within the .html, rather than being in a separate file, so you can see it all at once. The concept is beautifully simple, and the execution elegant but hard to tease out. A single .jpg contains a grid of photographs, each corresponding to a certain set of lighting conditions.
A div called 'paperbird' which is the size a single bird image is set up so that if its contents exceed it size, the correct response (eg. rather than ignoring the excess) is to allow the user to scroll around this base div, as if it were a small window into a large box.
What happens then might be a bit clearer with some formatting:
This is a nested series of divs, laid out in much the same way as elements within a table. Paperbird acts as the table itself, and each of the y divs acts as the tr or table row. Within each of these is an x div, which acts as a td or table cell, and within these are a fourth layer of divs, where the image frame is held.
Paperbird is small, but within this the rows are 30,000px wide, the cells are each 5,000px square. By floating to the left, they stack up on top of each other to form a horizontal row - overcoming the natural tendency of divs to sit below the previous one.
(When you break the 'float' function of the cell divs, all the divs are stacked in one long column. If you then scroll vertically, you access all of the images in each of the six rows in sequence, thus indicating that by passing through each cell you access various parts of the image.)
As paperbird contains a series of large but empty and transparent divs, the user is able to scroll around the entire table without noticing. The only change is that when they move from one div to another, the id of the new cell dictates that the background image should change by referencing a new set of co-ordinates within it. As the background image is fixed in relation to the webpage as a whole, the effect is that after a certain amount of scrolling, the image jumps.
I've sketched out a schematic of how the whole thing works. This is mostly for my own reference, but it might clarify things if you're almost following up to this point!
Finally, the framing .png image occupies each of the innermost divs. Its transparent window allows us to see the correct section of the bird below, while hiding the excess. Interestingly, disabling its fixed status does not kill the effect, while disconnecting the image does. This might be a feature designed to cope with the different implementations of css found in different browsers.
All in all, a very interesting way of doing things, I'm glad I took the couple of hours to take it apart.
Firstly, the piece in question is included in the page via an iframe or inline frame, which allows you to incorporate the contents of another page as if they were an object. Before I discovered css, I used a 'server side include', creating my webpages as .shtml files, with repeated blocks of code replaced by references to an external file containing the code in question. Similarly to CSS, this allows you to keep your repeated elements separate and edit them once rather than many times. These techniques both have advantages and disadvantages which I'll have to look into when creating my final site, but for now iframes might come in handy for incorporating or referencing demonstration pages.
In any case, taking a closer look, we find that Román's bird piece can be found here.
This allows us to take a look at the code. The css is contained within the .html, rather than being in a separate file, so you can see it all at once. The concept is beautifully simple, and the execution elegant but hard to tease out. A single .jpg contains a grid of photographs, each corresponding to a certain set of lighting conditions.
A div called 'paperbird' which is the size a single bird image is set up so that if its contents exceed it size, the correct response (eg. rather than ignoring the excess) is to allow the user to scroll around this base div, as if it were a small window into a large box.
What happens then might be a bit clearer with some formatting:
<div id="paperbird">...
<div id="y1">
<div class="x1">
<div></div>
</div>
<div class="x2">
<div></div>
</div>
This is a nested series of divs, laid out in much the same way as elements within a table. Paperbird acts as the table itself, and each of the y divs acts as the tr or table row. Within each of these is an x div, which acts as a td or table cell, and within these are a fourth layer of divs, where the image frame is held.
Paperbird is small, but within this the rows are 30,000px wide, the cells are each 5,000px square. By floating to the left, they stack up on top of each other to form a horizontal row - overcoming the natural tendency of divs to sit below the previous one.
(When you break the 'float' function of the cell divs, all the divs are stacked in one long column. If you then scroll vertically, you access all of the images in each of the six rows in sequence, thus indicating that by passing through each cell you access various parts of the image.)
As paperbird contains a series of large but empty and transparent divs, the user is able to scroll around the entire table without noticing. The only change is that when they move from one div to another, the id of the new cell dictates that the background image should change by referencing a new set of co-ordinates within it. As the background image is fixed in relation to the webpage as a whole, the effect is that after a certain amount of scrolling, the image jumps.
I've sketched out a schematic of how the whole thing works. This is mostly for my own reference, but it might clarify things if you're almost following up to this point!
Click to embiggen. Not an accurate representation - the background image is included to show how each section of the table references a particular position within the image.
Finally, the framing .png image occupies each of the innermost divs. Its transparent window allows us to see the correct section of the bird below, while hiding the excess. Interestingly, disabling its fixed status does not kill the effect, while disconnecting the image does. This might be a feature designed to cope with the different implementations of css found in different browsers.
All in all, a very interesting way of doing things, I'm glad I took the couple of hours to take it apart.
Tuesday 24 May 2011
Mapping past meanders
One of my favourite blogs, Bioephemera, recently highlighted a map of the historic routes taken by the Mississippi river.
This beautifully illustrates the kind of idea which I'm trying to get across in my web concept, of a graphically represented history of changes.
Vintage map of the Mississippi via Bioephemera
This beautifully illustrates the kind of idea which I'm trying to get across in my web concept, of a graphically represented history of changes.
Lack of flash
Well, it would appear that the university doesn't supply us with a copy of flash, so it looks like I'll have to seek some alternative.
Spritely is the first thing which answered my search for 'animation without flash', and seems to have some interesting applications.
This example has an interesting navigation mode: clicking a link swooshes you to a different part of the same page, and large spaces between are punctuated by fluffy clouds drifting by in the background. It's a little gimmicky and annoying, but cute.
This example is hideously ugly, but the change in the sky intimates that some kind of fading between images is possible.
Yuck, most of the examples are gimmicky, but this one has just enough subtle movement to give depth.
This one is amazing though! Beautifully done, and I love the illustration style.
An interesting tool, though perhaps there are less bloaty ways to do it.
Spritely is the first thing which answered my search for 'animation without flash', and seems to have some interesting applications.
This example has an interesting navigation mode: clicking a link swooshes you to a different part of the same page, and large spaces between are punctuated by fluffy clouds drifting by in the background. It's a little gimmicky and annoying, but cute.
This example is hideously ugly, but the change in the sky intimates that some kind of fading between images is possible.
Yuck, most of the examples are gimmicky, but this one has just enough subtle movement to give depth.
This one is amazing though! Beautifully done, and I love the illustration style.
An interesting tool, though perhaps there are less bloaty ways to do it.
Dynamic content resource
I've just come across an awesome site - Dynamic Drive - which seems to offer a large number of useful little dynamic content widgets, such as gallery structures, dynamic menus, and all kinds of cute little functions.
This is nice, blowing up an link image on mouseover and adding a nicely rendered caption.
This one fades a main image between selected thumbnails or other links
Had a nifty idea for using this zoom tool: as the zoom image is different from the preview image, you can hide clues in the image which only show up when you mouseover the right place. For an example application, in a forensic drama: from a selection of chemicals, 'apply' one and look under UV. This will take you to a different page, where the , which takes you to a different page.
This is a great gallery slideshow thingummy.
There's loads more in there for me to go through, depending on the idea selected.
Need to look at this too: http://www.mariaclaudiacortes.com/
This is nice, blowing up an link image on mouseover and adding a nicely rendered caption.
This one fades a main image between selected thumbnails or other links
Had a nifty idea for using this zoom tool: as the zoom image is different from the preview image, you can hide clues in the image which only show up when you mouseover the right place. For an example application, in a forensic drama: from a selection of chemicals, 'apply' one and look under UV. This will take you to a different page, where the , which takes you to a different page.
This is a great gallery slideshow thingummy.
There's loads more in there for me to go through, depending on the idea selected.
Need to look at this too: http://www.mariaclaudiacortes.com/
Loathed elements of website design
OK, for all the old stuff, many people have already done it, so let's just get this out of the way first.
Image change on mouseover.
Long ribbon style image galleries, which scroll depending on where your mouse is over them, making it impossible to track anything or click.
Image galleries which open pictures in separate windows.
Image galleries which open an image in a slow-to-open flash overlay, with no way of accessing the previous or seque
Large image galleries where the thumbnails menue resets to the start when you return to it, even if you've had to scroll several pages to find the image you want.
I'm sure this rant will get longer...
Image change on mouseover.
Long ribbon style image galleries, which scroll depending on where your mouse is over them, making it impossible to track anything or click.
Image galleries which open pictures in separate windows.
Image galleries which open an image in a slow-to-open flash overlay, with no way of accessing the previous or seque
Large image galleries where the thumbnails menue resets to the start when you return to it, even if you've had to scroll several pages to find the image you want.
I'm sure this rant will get longer...
Monday 23 May 2011
Concept: Swap
This concept uses a non-diegetic frame to present options to the viewer. Through a central section, an object is examined and explored through the viewpoint of whichever observer the viewer has selected. The external frame can carry further commentary on the concepts being explored within.
Pros:
- An opportunity to fully explore and contrast a set of worldviews
- Provides opportunity for commentary
- An interesting layout and content challenge
- Stilted and inorganic
- Frustrating to a viewer to have to click through options and play spot-the-difference to find where views diverge
- Freezes snapshots of an idea and navigates through discrete points in time - no fluidity or real feeling of time and evolution, rather of abrupt change
- Combines the worst parts of interactive and passive modes
- Restricts examination to the viewpoints of concrete individuals
- Could feel overly education
- Users would have to make a considerable investment of time to get anything out of it
Snippet - diegesis
One idea I've wanted to play with is the use of fixed elements in a web page. This can be extremely annoying for netbook and other users with limited screen real estate, but it could be interesting to explore what can be done with non-diegetic elements which are distanced by their behaviour from other elements within a site or page. This is of course limited in usage to pages which have sufficient content to necessitate scrolling, which can itself be undesirable. However, if you want to incorporate with elements which behave in unexpected ways, this could be a good technique.
Concept: Evolve
A layout similar to a news or comment article. A static text passage, illustrated with static images is presented in a simple, familiar, linear way, continuing downwards out of the viewing frame.
The content of the text deals with aspects of a single topic, from the evolving point of view of a narrator whose position in scientific history changes as they write the text. Essentially, the piece is an essay written by an initially ancient observer, who progresses through enlightenment and so on until they reach the present day, at which point the essay rounds up.
This layout is technically straightforward, following well established conventions of layout and structure. The form has potential to be made into more of a pastiche by consciously aping cues which viewers use to identify sites such as BBC News, though this may be annoying.
The actual content of this piece would be the most critical element, as it would require careful writing both to make it clear enough to follow in itself, and for it to be apparent to the viewer what is going on. Perhaps illustrations would help to maintain clarity by illustrating the instrumentation or personalities involved.
Pros:
- Technically straightforward to implement
- Plays with known conventions of reporting
- Light-hearted
- A good demonstration of web knowledge, of producing a functional and usable website within normal conventions
- Tricky to write
- A high likelihood that it would be unclear to a casual audience what was going on
- Requires readers to have some kind of idea of the progression of ideas to identify the changes in the text
- Likely to be awkward and mawkish
- A bit dull
Concept: Change
Image of an item accompanied by a text description. Initially, the image is very simple, the text description basic, perhaps Aristotelean. Once triggered by the viewer, the text gradually evolves through historic scientific insights until it reaches a current, modern picture. The piece would create a tale of perceptions, as if charting changes in a document, watching 'live' as old ideas are overwritten and fade a way.
The evolution of the text is gradual and piecewise, and each change in the text of text is illustrated, embroidered, and persists for a time, if not to the final version.
Possible modes:
- Fade
- Overwrite
- Cross out
- Scribble
- Cross-out
- Write over and over until one idea wins
- Smear
Examples of image types:
- Sketches
- Charcoal
- Watercolour
- Photographs
- Botanical illustrations
- Microscope drawings/photographs
- SEM pictures
- Telescope images
- Mission images from space probes
- etc.
Pros:
- Could be made beautiful and compelling
- Flash is broadly compatible
- Fairly complete control over the viewing experience including pacing
- Elegantly and clearly conveys the desired concept
- Provided the creation is carefully sized, should be cleary and simply viewable on all sizes of screen
- Gradual fading of discarded ideas shows mutability of scientific ideas
- Can show false starts which are abandoned
- Largely passive
- Linear
- Flash limits compatibility somewhat, though not much
- Does not allow an audience to pick and choose, or influence pace
Saturday 21 May 2011
Concept
I've been wrestling with a few potential website ideas for this project: a repository of tried and tested home science demos, with accompanying explanations; a 'dating' service for researchers interested in communicating science and schools who want them to visit; a repository of geeky science posters; a site for organising science flashmobs; an expansion the physics of sailing - for pirates...
None of these struck me as particularly inspired or inspiring, but then a little idea attacked. It's significantly more arty, and I believe it could have good potential for exploring the medium. It's a continuation of some concepts which I explored in an essay for the Science and its Social Contexts module, which focused around the idea of different perceptions, of seeing and "seeing as", and can be read here.
I'm fascinated by the idea of fluidity in ideas and the influence of knowledge on perception, by the process of upgrading knowledge, of venturing further by continual testing and examination.
The site idea was triggered by a few words I read on Open Reflections, regarding the concept of 'liquid books'. Stepping away from traditional methods of publication, which freeze manuscripts at the moment they are sent for print, platforms such as wikipedia "challenge the essentialist notions underlying the perceived stability of scholarly works" and reject authority and fixity in favour of a more biological approach, where a living text can adapt in the face of new knowledge.
Critical to this process is making the revisions transparent and evident, revealing the presence of previous ideas and the history of updates and changes. I feel that rather than undermining the authority of the presented piece, change-history lends a refreshing air of frankness and transparency, and the lack of finality signals an openness to new developments.
What I'd like to create in my site is a work which reveals, highlights and embroiders the history of a scientific notion or view of a particular subject, and shows how one way of looking at it may flow into the next in a process of refinement and revision. I want to illustrate that scientific knowledge is not doctrine, but an evolving constellation of best theories where everything can be questioned.
Most importantly to me, the site must do this in an elegant, beautiful and accessible way.
I'll make a few separate posts to discuss ideas.
None of these struck me as particularly inspired or inspiring, but then a little idea attacked. It's significantly more arty, and I believe it could have good potential for exploring the medium. It's a continuation of some concepts which I explored in an essay for the Science and its Social Contexts module, which focused around the idea of different perceptions, of seeing and "seeing as", and can be read here.
I'm fascinated by the idea of fluidity in ideas and the influence of knowledge on perception, by the process of upgrading knowledge, of venturing further by continual testing and examination.
The site idea was triggered by a few words I read on Open Reflections, regarding the concept of 'liquid books'. Stepping away from traditional methods of publication, which freeze manuscripts at the moment they are sent for print, platforms such as wikipedia "challenge the essentialist notions underlying the perceived stability of scholarly works" and reject authority and fixity in favour of a more biological approach, where a living text can adapt in the face of new knowledge.
Critical to this process is making the revisions transparent and evident, revealing the presence of previous ideas and the history of updates and changes. I feel that rather than undermining the authority of the presented piece, change-history lends a refreshing air of frankness and transparency, and the lack of finality signals an openness to new developments.
What I'd like to create in my site is a work which reveals, highlights and embroiders the history of a scientific notion or view of a particular subject, and shows how one way of looking at it may flow into the next in a process of refinement and revision. I want to illustrate that scientific knowledge is not doctrine, but an evolving constellation of best theories where everything can be questioned.
Most importantly to me, the site must do this in an elegant, beautiful and accessible way.
I'll make a few separate posts to discuss ideas.
Tuesday 10 May 2011
Possible 'site ideas (quick crappy note)
Science demos (Science on a stick?): Open-source instructions for cool science demos. Test-drive demonstrations, create video content of trialling demos, review science demo sites,
Non-science site development ideas, to practice design and generation:
Entanglement jewellery website, preferably with some kind of CMS, though no idea what (This is something to research!)
Fiction fragment recording site. Perhaps make fragments interlinkable, include chronological element. Include display output according to interlinks? (Ordering: before/after/independent, Framework interlinking? Visual representation of network?)
Non-science site development ideas, to practice design and generation:
Entanglement jewellery website, preferably with some kind of CMS, though no idea what (This is something to research!)
Fiction fragment recording site. Perhaps make fragments interlinkable, include chronological element. Include display output according to interlinks? (Ordering: before/after/independent, Framework interlinking? Visual representation of network?)
Subscribe to:
Posts (Atom)