A few years ago, me and four of my friends were doing an university project, which was basically a web portal. While designing our application we needed a tool for creating mock-ups and screen prototypes. There are a lot of options like Wireframe Sketcher, Cleverlance Petra, but finally we ended up with Axure RP. Now I’m not sure why, but at least we had the motivation to finish the prototype early (trial period was only 30 days :D).
Today, I was again looking for the alternatives and found - Pencil. No, I don’t mean the office aid, but the Pencil Project. It lacks some important features like creating hyper-links between the components and thus exporting to HTML pages, but these are planned and I can say that I really like this tool. And not to forget - it is open source! You can install it as a Firefox extension or download it as a standalone application. Unfortunately upstream tarball contains the whole XULRunner, so I decided to create a package for openSUSE. It is available from our Contrib repository and is only 330kB large! (Big thanks goes to Wolfgang Rosenauer for helping me to tame XULRunner.)
Pencil right now supports common shapes like rectangles or bitmaps, annotations, GTK widgets and Windows XP widgets. The widgets (or rather stencils) are simple SVG files, so if we help Duong Thanh An, the author, we might see Qt, iPhone or Yahoo stencils as a part of the Pencil in the future! Wouldn’t that be sweet? :)
Update: I just found Graffletopia - with hundreds of stencils (or so-called graffles) for Mac OS X tool OmniGraffle and some of them are really great. How about a converter ? :)
On Wednesday I attended the biggest Linux event in the Czech Republic called LinuxExpo (more particularly its first day). I also took some photos for your viewing pleasure :) Comments for each photo are under the enlarged versions shown after clicking on the thumbnails.
This is very simple to achieve, if only applications followed the XDG Base Directory Specification. Unfortunately, lots of them don’t. When you start using the following piece of code in your new awesome applications:
W3C added nice new options for creating rounded corners of elements to their CSS3 working draft. Engines like Gecko, KHTML and WebKit already implemented these functions, but they use vendor prefixes in the keywords (-moz-border-radius, -khtml-border-radius and -webkit-border-radius respectively), because the feature is not yet fully standardized. That’s also the reason why Opera and Internet Explorer decided not to implement this extension for now.
I was playing with the rounded corners and I like this feature a lot, but I also hit one problem (in all 3 engines). When you use the border-radius with an img element, the image is drawn above the border, so it isn’t rounded (top example). Fortunately, the effect could be easily achieved by rounded div, setting its dimensions exactly to the image size and using the image as the div’s background (bottom example).