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...
Tuesday 31 May 2011
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)