A creative blog,

with reason.

Posts Tagged ‘ Web ’

SXSW Interactive Tweets – What should I do?

Saturday, February 6th, 2010

Do you have an opinion on whether I should create a separate twitter account for my live-tweeting from panels / keynotes at SXSW?


Competitive Product Ad Placement

Monday, January 18th, 2010

I know most of these are keyword driven but I always love it when an ad for a product shows up on an article for a competitors product.

This was on mashable article on iPhone 4.0 software and I see two Google Nexus ads.

awesome-ad-placement

I Like Google Wave… But…

Wednesday, December 2nd, 2009

There is never anyone else on it when I am.

I’m a member of 6 or 7 big public waves, each with hundreds of users. Other than when I first got my invite (and when a few of my friends got theirs) have I seen another person actively using the same wave as me.

If you zoom in on the picture below you should see green dots next to people online (unless I’m missing something) and there are none. Most of the public waves I go to haven’t been updating in a couple days (if that recently).

In order for Wave to be truly effective, it needs to be an interactive experience. Once my team at Spoke get their invites, we can give it a run for collaboration, but until then, it’s a ghost town, and it bores me.

Category Thumbnail View for Magento

Saturday, November 21st, 2009

Background

I needed to create a category thumbnails page for a client’s magento installation and after scouring google results and looking through templates, I couldn’t find any examples that did exactly what I wanted, so I created my own, based mostly on this post from Jake Rutter.  I figured I should share this in case someone had a similar need to mine.

I ran into a few problems one of which I solved, one of which I didn’t:

  1. Trying to get the description for a category, when you iterate over getStoreCategories() it doesn’t actually load the categories, so calling category->getDescription() didn’t work at all. I had to actually load each category to do this.
  2. Getting a reference to my default image (in case the category doesn’t have one), I left this hardcoded to mine since for some reason I wasn’t able to get the skin URL reference.

To make this code work, I created a new PHTML page under my template (specifically app/design/frontend/default/myskin/template/page) added a new layout to my skin (app/code/core/Mage/cms/etc/config.xml or if you prefer your own local.xml)
and made a static page use this template. That was it.

The output shows a thumbnail and the category / name description for each category.

Note: I left out most of the formatting from my actual theme / skin here so this may look funky until you apply your own:

<?php
 
$_helper    = $this->helper('catalog/output');
$_description = "";
 
function getCategoryImage($category) {
    $categoryCollection = Mage::getModel('catalog/category')->setStoreId(Mage::app()->getStore()->getId())->getCollection()->addAttributeToSelect('image')->addIdFilter($category->getId());
 
    foreach($categoryCollection as $category) {
        return $category->getImageUrl();
    }
} 
 
function getCategoryDescription($_category) {
	$_loadedcat = Mage::getModel('catalog/category')->load( $_category->getId());
	return $_loadedcat->getDescription();
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body <?php echo $this->getBodyClass()?'class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div id="main">
  <div class="wrapper">
        <h3>All Categories</h3>
        <?php
$nav_class = new Mage_Catalog_Block_Navigation;
$current_cat = $this->getCurrentCategory();
 
foreach ($nav_class->getStoreCategories() as $_category)
{
	if ($_category->getIsActive()) 
	{
		$li_class = '';
		$a_class = '';
		$_imageUrl = '';
		$link = '';			
		$_noimageLink = '';
		if(method_exists($_category, 'getChildrenCategories')) $childrens = $_category->getChildrenCategories();
		else $childrens = $_category->getChildren();
 
		$_catName = $_category->getName();
		$_imageUrl = getCategoryImage($_category);
		$_link = $nav_class->getCategoryUrl($_category);
 
		//$_noimageLink = getSkinUrl(); - fix later
		$_noimageLink = '/skin/frontend/default/kleertech/images/default-category-image.jpg';
 
		if (trim($_imageUrl) == '') {	
			echo('<div class="category-box"><div class="category-image-box">');
			echo('<a href="');
			echo($_link);
			echo('"><img src="');
			echo($_noimageLink);
			echo('" alt="No image available" /></a>');
			echo('</div><div class="category-name"><p><a href="');
			echo($_link);
			echo('">');
			echo($_catName);
			echo('</a></p>');
			echo('<p>');
			echo(getCategoryDescription($_category));
			echo('</p>');
			echo('</div></div>');
			} 
		else  {
			echo('<div class="category-box"><div class="category-image-box">');
			echo('<a href="'.$_link.'"><img src="'.$_imageUrl.'" alt="'.$_catName.'" /></a>');
			echo('</div><div class="category-name"><p><a href="'.$_link.'">');
			echo($_catName.'</a></p>');
			echo('<p>');
			echo(getCategoryDescription($_category));
			echo('</p>');
			echo('</div></div>');
		}
	}
}
?>
</div>
<?php echo $this->getChildHtml('footer') ?> <?php echo $this->getChildHtml('header') ?> <?php echo $this->getChildHtml('before_body_end') ?> <?php echo $this->getAbsoluteFooter() ?>
<?php $layer->setCurrentCategory($_maincategorylisting);  ?>
</body>
</html>

Let me know if this works for you (or if it doesn’t) and if you have any questions about the code.

Hello. Out There.

Sunday, September 13th, 2009

So I’m switching things up. This site is now blog.creativereason.com, new site is live at www.creativereason.com and I’m in the midst of a redesign.

Soon the blog will look like the new site and I’ll add some new features to the new site (recent posts, tweets, etc.).  It’s possible I’ll make the whole thing wordpress, right now it’s handcoded xhtml.

I’d love to hear what you think. Consider this a soft launch.

No Comments

Category Web/Tech | Tags: Tags: ,

Social Networks : Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

Are mouseovers a thing of the past?

Thursday, August 13th, 2009

Lately, I’ve been using jQuery and similar libraries whenever possible, instead of flash. Besides the fact that these libraries usually kick butt and make sites more usable and interactive, by not using flash these sites still work on phones.

I like this little garage door effect, and I’ve seen it on some sites and was thinking about using it for a new version of a site I’m working on (hint, it rhymes with smoke), but when reviewing it on the iphone, it occurred to me that it didn’t work*.

Since the iPhone is a growing percentage of web audiences, and the long-rumored Apple table is supposedly about to be released, which will surely use a multi-touch interface, should developers stop using mouseover effects on normal sites (ie non web-apps)?

What do you think small dedicated reading audience of this blog**?

Should web designers stop using mouseovers?

View Results

Loading ... Loading ...

*Or at least not with a click, which defeats the cool UI experience
**Readership numbers are a pure guess, I’m too busy to go check google analytics at the moment.

How to run multiple Firefox instances on Mac OSX Leopard

Monday, July 20th, 2009

Whew… Long title.

So I do some web development and there are instances where I need to test on multiple browsers (and multiple versions of browsers). It was pretty easy to install multiple instances of Firefox on my Mac (running OS X Leopard):

  1. Go to Mozilla and download the dmg.
  2. Mount the dmg file
  3. Instead of dragging and dropping the version into your applications from the mounted image, go to your applications folder and create a new folder for the version you want. firefox-fun
  4. Drag the application into your newly created folder
  5. Drag the app from your folder into the dock (or run the app and choose to keep in dock).

Voila. You’ll be able to test sites on different versions of Firefox.  Have fun.

firefox-on-my-dock

UPDATE: One more step I forgot about to make your life easier. Go here and learn how to create a profile for each of your accounts (like I did below) and then you won’t be prompted for updates each time you open that version of Firefox. I just saved mine into the version folder for each version.

firefox-profile-manager

1 Comment

Category Web/Tech | Tags: Tags: , , , ,

Social Networks : Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.

Death to IE6

Thursday, July 16th, 2009

As I’ve pointed out twice (my plea to corporate America here & during a poll here), I’m on the bandwagon of those trying to kill IE6. As a web developer it hurts every time you’re forced to support it. It adds hours of frustrating wasted time to every project and as I point out in my plea to corporate America: It’s old, really old and full of holes.   I’ve gone as far as prompting IE6 visitors to this site to download an upgrade by use of a modal popup.

Now more than ever, this movement is gaining steam:

  • There is now an article at Mashable about killing IE6
  • News that Youtube will kill it’s support for IE6
  • And Digg wanted to, but realized that the reason people use it is because they have no choice (locked down XP computers without being able to upgrade).

But by far the funniest of all I’ve seen yet is this – IE6ify any website. This tool will make the site look likes it being shown in IE6 (to a developer). Basically it breaks your page.  Enjoy the fun that I and so many have experienced trying to use CSS on IE6 in this replicator. (H/T to Logan)