Archive

Posts Tagged ‘design’

Feature – Design Your Own Desktop with KDE 4

kde_splash.png
One of the best things about KDE 4, the newest release of the mainstream Linux desktop manager, is something it doesn’t do—force you to adapt to its way of running a computer desktop. Sure, the desktop environment boasts new 3-D effects, a polished theme, and improved functionality. But what KDE 4 does best is give users the ability to almost completely re-design their desktops, putting their programs, icons, and useful widgets wherever they see fit, on as many desktops as they want, to create their ideal workspace. I spent some time exploring the features of the less-than-week-old system, the results of which are after the jump.

If you wanted to see how KDE 4 looks right now without committing yourself to a new install, you can burn a live CD from the Kubuntu or openSUSE distributions, both of which plan to implement KDE 4 in their next releases. If, after these screenshots, you’re itching to switch for real, I’d recommend upgrading from inside a working KDE system rather than starting fresh, as none of the live CDs are officially supported yet. And there’s a good reason why—this is just the first release of a system that’s in many ways completely re-written, and a few important pieces are still missing from the whole. The developers have stated that KDE 4 is an intentional shift away from the norm, so those who rely on certain key programs to work might want to hold off until at least 4.1

But if you do boot up, the first thing you’ll notice about the new KDE is its clean-looking, ready-to-work interface. It has many of the same components as current KDE setups, but the icons and elements of the new “Oxygen” theme make it seem less like the Cute Lil’ OS That Could and more like a place to get things done (in my opinion, anyways).
https://i0.wp.com/lifehacker.com/assets/resources/2008/01/screen1-thumb.jpg
Before jumping into the new-new stuff, note that the Start-like “K” menu (now named “Kickoff”) has undergone a major overhaul, adding an in-line search function and dividing your programs up into five categories, including a Google-like starred “Favorites” list. The only letdown is the big icon size and having to click to move through sub-menus, although fans of the older mouse-over menu can restore it by adding it as a widget.
screen2.jpg
About those widgets—they’re the heart of KDE’s desktop engine, named Plasma, and they’re a lot more powerful than clocks and mini-feed-readers, although they’re there if you want them. Everything you could put on the taskbar, and anything open source programmers can dream up, can be embedded anywhere on the desktop. After tinkering around a bit, I came up with my own taskbar-less desktop that was a bit crowded, but gave me a lot of functionality from the get-go:
https://i2.wp.com/lifehacker.com/assets/resources/2008/01/full_desktop_3-thumb.png
expose_widgets.jpgThe widgets get covered up once you start opening program windows, but you can bring them to the fore and shade over your windows, Mac-style, with a Ctrl+F12 keystroke. They’re scalable vector graphics as well, meaning you can adjust them to any size, or even angle, and they’ll still look right. One notable widget is the “File Watcher,” which can display text from any file you point it at, making it a great way to track your text-based to-dos.

Mess around a bit, and you can come up with a lot of way to reorder your space in convenient ways. Put custom program launchers together across the screen bottom to create a Dock-like launcher. Move your window switcher to the top or the sides, or eliminate it altogether and stick with Alt+Tab. You can do many of these things in GNOME and in other operating systems, but KDE gives you a fairly blank slate from which to draw your own map to productivity.

KDE 4’s other big change is splitting the tasks of web browsing and file exploring between Konqueor and Dolphin, respectively. Dolphin, the newest kid on the block, brings split-view browsing for easier file transfer, and integrates the multi-format Okular viewing tool (seen in the background below) to view, bookmark and even add notes to files, making it easier to organize and sort them later.
dolphin_okular.jpg
Of course, no new Linux environment is complete without super-powerful, endlessly tweak-able Compiz-ish desktop effects, and KDE 4’s got ’em in spades. If you want your windows or menus to move a certain way, chances are you can do it.
https://i2.wp.com/lifehacker.com/assets/resources/2008/01/desktop_effects-thumb.jpg
There are many more improvements and changes in KDE 4, including improved multimedia handling, easier handling of plug-in devices and re-engineered core programs. What features did I miss that are worth noting? What do you hope to see come up next for KDE, GNOME, or any Linux system? Share your thoughts in the comments.

Categories: News, Open Source, webdesigner Tags:

Adobe’s Development of Thermo – Web App Development for Designers?

Thermo Logo

So I have been at Adobe MAX 2007 in Chicago all week. The whole experience has been really great. What was even better than that was a sneak peek at a new application that Adobe says that it will be releasing sometime in 2008 – code name “Thermo”.

I can not tell you how excited I was about this app. What is Thermo you ask? Well let me tell you from my perspective what Thermo is….

Just a week before MAX I was finally wanting to write my first project completely in Flex Builder. This was a really really frustrating thing from a design standpoint. I would be what the industry is referring to as a “Devigner” Half Designer / Half Developer. I can write some code when it comes down to it and I really enjoy figuring out the functionality of an app but I have always done all my sites or apps in the Flash IDE and laid them out in Photoshop before I move everything over to Flash for animation and coding.

When it comes to doing a project by setting up your design in Photoshop and then getting that design into Flex Builder….. well …. let’s just say it. IT IS A PAIN IN THE ASS! As far as I am concerned.

Now what is this new Thermo app mean to me you might ask? Well imagine combining Flex Builder with a visual design tool. Kind of like Flash with out the drawing tools and such.

In the Demo Adobe showed how they had a really nicely designed Photoshop layered comp. Once they launched Thermo they were able to choose the template they wanted to design there app around. In this case it was a comp from photoshop. Once you choose your PSD file you are able to view the layers in a dialog box just like the import dialog that you get in the Flash IDE. Choose your settings for each layer if you like and Boom all your assets are put on a stage that looks kind of like the design view in Flex Builder. Also over to the right you get a view of all your layers. Kind of like the layers view in Photoshop. We took a photo of the app in it’s present stage of production. Sorry for the image quality. The adobe example was showing the design and development of a music browsing app.

Thermo At MAX

Click for Full Size

When you switch to code view you will see code that is MXML code. Adobe explained that the code view is just like using the Flex Builder interface. You will get all the code hinting and power of editing code that you get by using Flex Builder.

Another really cool example that Adobe gave during it’s demo of Thermo was the ability to click on graphical layers or text layers and change them into functional Flex components on the fly. A great example of this was a graphical scroll bar that they had designed in photoshop. Basically consisted of two layers. You had your background square that looked like the track of the bar and the scrub bar that was also a darker square in photoshop. They where able to select these two layers in Thermo > Right Click and tell Thermo to change these layers into a horizontal scroll bar. As soon as they did this if you switch to code view you where able to see that Thermo had rewritten all of the code to tell the app that these layers are now the functional scroll bar. To spare you more reading there where some other graphic and text areas they where able to click on and convert to other components in the app.

Just a week before I was trying all kids of ways to do this same thing. I was laying out my design in Photoshop, taking it to flash to create my MovieClips, then exporting all my assets as a SWC file to use in Flex Builder. This is a really cool thing being that Flex Builder will treat your assets in the library as Components so that gives you great code hinting. The down side of this for me is you can’t just drag a new “component” out of your SWC file and place it on the stage in Flex Builder. Thermo on the other hand will give you a viual representation of where the button or graphic is located and you can drag it around and move layers how ever you like. As a “Devigner” This totally rocks. I think even hardcore code head developers will find this to save them a lot of time.

Look for Thermo next year sometime at http://adobe.com or you can check back here on my blog. I am so excited about this product that I am sure I will be talking more about it as Adobe relases more information about it.

Nice menu panel in Flex

Hi all!

Recently I had to make an application in Flex that obviously required a menu displaying all the options so I started to think in which menu will be fine or not. Finally I decide that I wanted the menu options in the title of a panel, but when I analyze the API of the panel I didn’t saw anything that allow me to do that.

So after a large series of tests I found a solution to do that, and here is it ) here is the menu running:

So to make this first I create a new component called MenuButton for the menu options and basically it is only a LinkButton with a new attribute called “canvasIndex” (as you can see in the source code), this attribute will be used to show the selection in the panel as we will see later

After I have that new component I create a new one called “MenuPanel” that inherits of a Panel and here is the moho of all this menu :). For this component I added a new attribute called “viewStack” where we will set a view stack later and also I override the createChildren function of the panel and now looks like:

picture-27.png

As you can see here we add two instances of MenuButton in the title bar of the panel, also if you are a good observer ;) you will noticed that there is a function called “changeCanvas”, this function basically change the selected option and the styles associated (you can see the code of the function in the source code).

Finally we have to integrate all this in our application ) this is very straight forward as you will see:

picture-28.png

As you can see I only added the MenuPanel component and inside the menu a ViewStack with two canvas.. really easy right? )

Actually as you will see in the source code we also has to associate the ViewStack with the MenuPanel, but that is not so relevent.. I think )

Obviously there are a lot of improvements to add:

  • get the information to the buttons dynamically from the XML
  • add some listeners
  • hmm I will think in more… )

Here is the code

Categories: Adobe, Flex, RIA Tags: , ,