After a busy week, with a lot of things happening, Apple and their iPhone, the tons of gadgets and hi-def stuff at CES, see, it was almost impossible to be up to date with all of that. Anyway, as usual, while surfing on the web, I found a really cool article. It was a tutorial explaining how to create a dashboard widget with a tool called Dashcode Beta, which can be downloaded for free. Then I thought to myself, that is a cool thing to do here for my blog, I had 2 feeds, and why not? Following the article and using the dashcode makes the process really smooth. Basically you choose what sort of widget you want (RSS, Podcast, Gauge...), and then you start editing. The interface is pretty simple, I don't want to explain in details how to do everything because the tutorial already does that. The only think that I want is to show what I did. Choosing what widget you want Essentially what I did was change the basic model with images and CSS. My idea was a widget with a cool header, like the forecast one, where the images of the sun and clouds extrapolate the borders of the widget. Looking for inspiration I searched the word "abduction" at google images and got some images to fresh my mind. Searching images for inspiration With the subject of abduction in mind and tons of images seen, I started doing the image of the header. The header's design, with alpha transparency The basic idea of the widget is show my blog's content, so it must follow the design of the site. To achieve that it uses the same background and shares the same color palette and typography. Abduzeedo's design Another thing that I was willing to do was to create an option where the user would be able to choose the feed that he would like to read, in my case the Blog and the Sideblog's feed. Messing around with some "js" files I came up with a solution, if you are a ninja, probably, you will feel far more comfortable than I doing that. Clicking on that button and it will show the blog's feed, instead of the sideblog's After a couple of hours the result was pretty satisfactory, below you can see the abduweedget among the others in my dashboard, you can even download it as an example and, perhaps, sometime do yours. The Abduweedget in my dashboard Below a list of links related to this article: Developing Dashboard Widgets Build a Dashboard Widget Sample Code: Apple Applications: Dashboard How to make your own Dashboard Widget with Dashcode
Here we go again, continuing the creation of my brother's blog, Blackbelt. Fixing some design issues and creating the XHTML and CSS template. Design Changes My brother had asked for some minor changes on the design of the blog, mainly in the sidebar, where he hadn't liked the round corners tha I had done, although he said he really liked the feeds' box which was black. Feeds' box, darker and with round corners The new sidebar was created using the same style of the feeds' box, but lighter. Using different style for visited links, however IE6 doens't do that. XHTML and CSS Using the basic XHTML generated by the Apache Roller, the blog engine that my brother uses, I started creating the CSS. After a couple of hours everything was pretty much done and working fine, however there were some problems to be fixed with .png images and the box model under Internet Explorer 6. With everything fixed, the template is done, working fine in all the major browsers: IE 6 &7, Firefox, Safari and Opera. If you want to take a look you can download all files that I have used so far.
Throughout this article I will illustrate the creation of a weblog with the web 2.0 style. From the briefing to the CSS development. Guidelines The blog will be created to my brother who had asked me to do that, besides, he gave me some guidelines of some design aspects that he would like to have in his blog: Dark background; big font sizes; some round corners; a place to put some logos; Also he send me some links of site that he thinks are really cool, below there are some of them. Research With the guidelines and some references in mind I started my research and found some good links about designing web 2.0 style sites such as this Web 2.0 how-to design style guide, which explains really well the web 2.0 features showing examples of sites, concepts and what not to do. After reading a lot of site and got some good insights I became the creation of the layout, first the idea of columns, where the navigation will be, the main content, and stuff like that. Talking to my brother, he said that he would like to have a vertical navigation with a sidebar where he could add his favorite links, search, the blog's navigation, flickr photos, delicious bookmarks and etc... so I came up with a pretty simple wire frame. Wireframe of the blog, liquid layout Layout creation With the wire frame done I knew where to put the content, so I had to start adding loren ipsun content there. One thing that I think is really cool on the web 2.0 trend is the gradients, they create a really cool visual effect of difference on planes, elevating some parts and put some in a lower level. Another cool effect that I have already used on a personal project and I thought would be cool is that "emboss effect" in lines that divide content as Bartelme uses in his site. The dark color and the variation of them are a feature to be exploited. For the header I thought that would be nice to add an illustration or a photo like Veerle does. I start thinking which photo would be cool, looking for the right shot I remember that my brother had taken one pretty cool in Philadelphia in front of that Metropolitan Art Museum where Rocky Balboa always finished his training, as my brother loves Rocky and with the new movie coming to the theaters, I thought that image would fit like a glove. After all of that and several hours in front of my computer using Macromedia Fireworks I came up with the layout below. Click here to open the real size version in a new window The layout, round corner in some parts, gradients, pretty much everything Showing to my brother, he said that he liked it a lot but that there were some issues to be fixed. However he hasn't told me them yet. So the only thing that I can do now is wait, and as soon as he point the issues and we fix them, I will continue this article until the CSS is done.