Last week when I checked my email I saw an email from the Joost guys accepting me to be part of the testers of The Venice Project, now called Joost. Joost™ is a new way of watching TV on the internet, which uses new and established technologies to provide the best of both the internet and TV worlds I was really excited with the opportunity to use it, mainly because a lot of people have been talking about it, fellows like Leo Laporte on his podcasts TWIT and Macbreak Weekly. Well I’ve played with it a lot, I have to say that it’s a promising idea, you can choose channels, then programs, pretty much like a regular tv but on your computer. Joost™ uses secure peer-to-peer technology to stream programmes to your computer. Unlike other TV and video-based web applications, it does not require users to download any files to their computers or browse through complicated websites. The interface is really beautiful, although I didn’t like their icons too much. However it works great, you can keep watching a show while surfing through new channels. There is the My Joost icon where you open the notice board, the chat, clock, the instant messaging, and the Rate it box. The list of channels and programs is really well done, however the looping that they use on the list annoys me a lot, sometimes there are like 3 programs but it looks like there are many more. Now the quality of the image, well we can watch the programs in full screen, what is really cool, but the image’s quality is not that good. Maybe my internet connection is not fast enough or that will improve with the release of the final version.The most imporant thing about Joost is that if it can do and become what Skype has become, we will have a really great tool. But that will depend on what shows they will have available on it. Lets wait and see. The Interface Joost Widgets The list of programs, the same for the channels Watching in full screen is really awesome, though the quality is not that great. It's still in beta
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.