The Web Developer add-on for Chrome tries to complement Chrome’s already-excellent developer tools (Ctrl-Shift-I) with some in-page hints and tools. The garbled output you see above is the result of selecting Information > Display ID & Class Details. Not very graceful, obviously.

The add-on is missing a screen ruler (I’m sure the developer will add it later). Despite lacking a graceful way to show massive amounts of data, it can still come in handy every now and then. For example, you can disable CSS entirely, or just inline style, browser default styles, etc. That’s pretty neat. It’s still a fledgling add-on, so don’t expect too much. But if you find Chrome’s default tools are not enough for you, try giving it a shot.

Their business model is also quite straightforward, which is important for these kinds of things; after all, you don’t want to build a site and find out it’s gone the next day because the company went out of business. In Lifeyo’s case, they work as a web host. You can either host your site for free with an address such as http://omgponies.lifeyo.com, or you can pay them about $50/year for hosting with your own .com domain name. You cannot download the site or manage it with your own tools — you’re locked in to their own platform, but it’s quite comprehensive.

Now that I think of it, the aesthetic is most reminiscent of Tumblr. Looks like they really took a page off Tumblr’s book, but instead of going for microblogging, they added everything needed for a small content website with a blog (optional).

All in all, I’m very impressed with how comprehensive the service is. I took some time testing the various options and took lots of screenshots which you can see after the fold.
Share Note: While following screenshots show only the page editing interface, the system also features a complete blog editor (very similar to Wordpress).

Each page is composed of “elements”. These can be either text, images, or embedded videos. This is a text element, and as you can see, the editor is WYSIWIG:

You can also edit the HTML directly:

Once you click an element out of editing mode you can also edit iyou can edit its contents or “style” (not actual CSS, see the next image).

This is editing the “style” for the textbox above. Basically, you get to choose the background color.

The editing interface has the requisite dropdown menu with a few elementary settings.

You can add images, which are saved.to a “photobank” so you can use them over and over again in various parts of the site.

Your site dashboard features simple analytics — visitor/hit counts and traffic sources.

There are simple How-To explanations for just about any operation:

Bottom line: Lifeyo is one of the most impressive CMSes I’ve seen for the “first website ev4r!” niche. It can also be useful for one-off landing pages and other simple commercial sites. My only gripe with it is that like many other services, it too neglects to support RTL (right-to-left), and so cannot really be used for Arabic nor Hebrew.

Aviary, makers of awesome web graphics applications which recently went free, have now started offering Google Apps integration, via the brand-new Google Apps Marketplace. This means you can create Aviary graphics from within Google Docs, and save your files there as well. This is aimed at Google Apps users (as is the whole marketplace, currently), so you need to be the domain administrator to enable it. But once it’s enabled, all users get to use it, unlimited and free. Office workers now have one more reason to doodle, and management should like it because it saves them money on graphics software.

You can see their intro video after the jump, and read a bit more about it in the Aviary blog. Aviary are seriously rocking recently.

Share

MeasureIt is another one of the simple, single-purpose tools I like because they make it easy for newcomers to develop basic web design skills. It simply lets you measure screen elements in pixels — no more, no less.

Once you install it, you get a tiny icon on the left side of the status bar. Click the icon, click-and-drag anywhere on the page, and get a tiny tooltip showing dimensions. It’s a one-trick pony, and it’s much easier to get comfortable with it than with a massive solution such as Web Developer Toolbar (which also has a built-in ruler).

The only aspect which is a bit too sparse (IMHO) is activating the tool. I could only find one way — by clicking the status bar icon. Some users hide their status bar and may not see it (or may just not notice the tiny icon). There is no “Options” menu for the add-on and no built-in help text (not even a tooltip). Since this add-on is aimed at such novice users, I think it should be easier to activate.
Share

Replacing the color scheme for a site using CSS can be an annoying task. The same color may be used for several elements across the file, and you need to search and replace for it. Color is represented by hex codes, which is not very visual. This is not a problem heavyweight web developers have — they’re usually set up with advanced text editors which feature built-in color pickers.

Users just starting out with CSS, however, often have to struggle with the color codes and with visualizing how the scheme fits together. CSSColorEditor (another great find from MakeUseOf) aims to help with this exact issue. It’s a simple one-purpose tool, which lets you load a local CSS file, change its colors using a visual color picker, and then spews that same file out with different colors. The color swatches are too small for my liking, but they still give you a clue as to what the scheme would end up looking (I’m color-blind, so don’t judge me in the comments!)

Another minor UI niggle is that the picker dialog itself does not have an “OK” button. Where you would expect that button to be, there’s actually a link leading you to another site. That’s kind of weird, too.
Share

The software works by applying ’standard’ rules of ‘good’ photography, such as the rule of thirds. By dividing the image into nine segments, the software moves prominent objects — trees, people, etc. — onto the intersections or ‘power points’. It apparently tweaks the position of ‘prominent diagonal lines’, and moves objects so that they’re more uniformly arranged around the center of the image.

All in all, it’s the beginnings of a very neat tool that I’m sure many people would love to have in their photo editing suite! There’s a brief video of the technology in action after the break.

[via NewScientist]

Share

The best of the best were picked out and featured on the Firefox blog. I thought it was a nice idea to get the community involved even though I’m not totally sure what they were celebrating with the pictures. Just cements the notion that Firefox is awesome and they have really, er, passionate users!

Check out the complete gallery and even some honorable mentions over at the Mozilla blog.
Share

The Personas gallery features a daunting 35,000+ themes already, but I took on the challenge of combing through them to separate the good and usable from the just-plain-ugly. I ruled out Personas that lacked contrast or otherwise made the Firefox toolbar tough to read (note to Personas designers: there were way too many of these), and then picked the most visually pleasing candidates from what was left.

I hope you enjoy these Firefox skins, but my list is by no means definitive. If you find a Persona that puts mine to shame and deserves a top place on the list, leave me a comment!

Take the jump to explore the gallery!

Gallery: Ten Awesome Personas for Firefox 3.6

Share

If the organization is known at all outside techie circles, it is probably best known for the annual SIGGRAPH conference they sponsor. In 2009, the conference attracted over 11,000 artists, research scientists, gaming experts and developers, filmmakers, and academics from around the world. The attendees find the panel discussions, exhibitor presentations and research papers valuable in advancing their art. This is often the first place they hear of new research. The conference also includes courses in state-of-the-art computer graphics topics. And, new devices are showcased each year that use ever more sophisticated visualization and imaging techniques. SIGGRAPH has members all over the world, from Helsinki, Finland to Melbourne, Australia, but the conference is held in the United States as the largest number of members are there. Since 2008, a separate SIGGRAPH Asia conference has been held on that continent.

Their 37th International Conference will be held on July 25-29, 2010 at the Los Angeles Convention Center, in California, the world capital of animation and visual effects. They also host a variety of programs year-round and worldwide to benefit the SIGGRAPH community. If you’re in a computer graphic arts field and are interested in attending a program, check out the 2010 events calendar.

For the rest of us, movies and computer games are the points where SIGGRAPH intersects home technology and where we see the fruits of the members’ work. Movies have been created in 3D for several years, using digital techniques. Recently, gaming has begun to head down the 3D road. Head-mounted, active display goggles instead of the old, two-color glasses make a screen appear more like a window than a flat picture. These new glasses use an active LCD shutter system to actually opens and closes the lenses in synchronization with the screen images, to create the 3D effect. And new 3D monitors enhance the experience, allowing personal immersion in the games. As reported at Joystiq, 3D gaming will even have its own summit this year.

Beyond the home, a technology known as augmented reality (AR) may someday make inroads to other fields. AR is a field of research combining real-world information with computer-generated data. It allows real-time views of the world to incorporate computer graphics objects. It’s expected to find applications in everything from industrial design to architectural visualization. And likely home entertainment too. Imagine having a tactile display that allows you to pick up and “feel” an object that doesn’t exist! If that arrives, thank the folks at SIGGRAPH for that too.

To get started, open up the Linux terminal and download the required font files with this command:

$ wget http://ubuntu-debs.googlecode.com/files/macfonts.tar.gz

Next, you’ll need to extract the files:

$ tar zxvf macfonts.tar.gz

Move the fonts to the /fonts directory:

$ sudo mv macfonts /usr/share/fonts

Then just reload the font cache to start using them:

$ sudo fc-cache -f -v

That’s it. To use or test the fonts, head over to System > Preferences > Appearance > Fonts.

Share