marco rosella

Interactive Designer & Developer.




Ch-Ch-Changes

vlogit.gifLast weeks without connection, in Central Scrutinizer‘s home.
Without losing my mind I taked advantage of the free time for: 1) to begin a new project based on an old idea; 2)to buy an to scarcely leaf through this beautiful and rich volume; 3) to tidy up the vlog.it‘s look.
About the last point prepare your cushions, because I’ll tell you about all the little changes.
The initial situation is presented in this screenshot.

First step, naturally, was the rewrite of the HTML code to retrieve the lost
validity and semantics.
I know that I’ve knock out many of the exceding divs but I was forced to insert new ones to support the backgrounds, so the size remained the same.
About the layout I maintened the 2 colums structure, widther then some pixels, and drawn them near the central one. I erased a box on the left and two boxes on the right, leaving intact only the two archives ones, the search space and the italian box.
The first time I thinked to shift the survided boxes in the footer, but the more rounded header and the slim width of the central column
could be a cause of not desidered link to strange shapes. (see also that I used the word “footer” instead of “bottom”…)

Colours: it’s the case of a monomochromatic scheme, so the starting point has been the container’s orange background, dilute then in various gradations.
I take the old web-safe
#ff8800 (#f80 for the friend), and modified it more time with the trusted Color Blender having at the end in my hands a more “real” #f29c19. After, always with Color Blender, I obtained ten light colours inserting in the second input that you see a black colour code, and then ten darker one inserting the white: a 20 colours palette from black to white (that I’ll never use, naturally) passing throught my orange in only two shots of javascript.

About the images, I only needed a 2 pixel extern shadow, so I used my friend Fireworks that (for me) in this works is more immediate than the ex- contender Adobe (as the Notepad with the Word, for example). I conformed all the shadows and add a menu under the header with a maxi-tab effect: a limping mix between the fast CSS rollover and the mini-tab menu.

To complete the roundness, in forms that are in the comment space and in the submit page I thinked to use the (over-cited in this blog) CSS + javascript technique Nice Forms, that has unfortunately a problem with select, not usable with keyboard: there will be a solution? Next week I take a look at the articles “Taming Select” and “Select Something New”.

Last but not least, in the new page dedicated to the videoblogging resources, I used a technique that I wanted experiment some time ago: the smooth scrolling with javascript for the navigation between the anchors in the page.
[note: the anchors can be inserted in two ways: <a name="anchor-name"/> or with a simple id attribute to an element, for example a div: <div id="anchor-name"/>. In both the cases the links to the anchor will be as: <a href="#nomeancora">Link</a>]
Looking at the techniques suggested in this post from italian blog <edit>,
I tried for the first time this script by Stuart Landgridge, that has the “defect” to know as destination only the anchors with the “name” attribute and not all the elements with an “id”, as the solutions from moo.fx and from Squidfingers.
A good example is the script proposed by Frequency Decoder in this comment from this post on web-graphics , that is a revision of the Beckham code in a unobtrusive way.
Starting by the ones presented below, I tried to make a more compact scrolling script that I’ll show you in the next post.