Fusion Charts Is Now Open Source

Posted on September 3rd, 2009

Today I received some wonderful news . . .  Fusion Charts is now open-sourced!  Now, normally, it wouldnt make much sense to announce something like this, except Fusion Charts just happens to be one of my favorite tools to use to make dashboards for our clients.  Now that it is open source, we will gladly include it in some commercial products as well.

If you would like to get your hands on this wonderful piece of software, head over to http://www.fusioncharts.com/free/and give it a try!

Mega Menus: the Next Web Design Trend

Posted on March 31st, 2009

SitePoint’s Craig Buckler blogged yesterday about what he sees as the next big thing in web design: mega drop-down menus. They’re cropping up everywhere, and best of all, usability guru, Jakob Nielsen thinks they’re quite good — so you can expect to see even more of these very soon. Here’s what he had to say about this new trend:

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

Of course, Nielsen’s article includes some solid advice on the most usable way to implement these. Here’s what he recommends, in a nutshell:

So how would we go about implementing these? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

The Design

Let’s imagine we have a client, Mega Shop. Their designer has sent us a mockup that includes some mega drop-down menus. You can see the relevant part of that mockup below (full sized version here).

Our mockup shows a menu with a mega-drop-down activated.

The Markup

First: the markup. I started out with a fairly simple menu based on an unordered list. The markup looks like this:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Stuff for him</a></li>
  <li><a href="#">Stuff for her</a></li>
  <li><a href="#">Stuff for kids</a></li>
  <li><a href="#">Stuff for pets</a></li>
</ul>

I’ll add a div after each of the drop-down links — these will contain the contents of the menu. Also, I’d like to have a way to indicate that there’s a drop-down choice on those items, so I’ll also add a class, mega, to those list items. Finally, I want to make sure that this menu makes sense when viewed without styles, and since each category will act as a kind of heading, I’ll add some heading markup to the items. Here’s a single list item:

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
    <!-- Contents here -->
  </div>
</li>

Next, let’s add some content to those divs. Here’s one:

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
    <h3>Menswear</h3>
    <p>
      <a href="#">Shirts</a>,
      <a href="#">T-shirts</a>,
      <a href="#">Accessories</a>,
      <a href="#">More...</a>
    </p>
    <h3>Gifts</h3>
    <p>
      <a href="#">Sporting goods</a>,
      <a href="#">Gadgets</a>,
      <a href="#">More...</a>
    </p>
    <h3>Clearance!</h3>
    <p>
      40% off all photo accessories
      this weekend only.
      <a href="#">Don't miss out!</a>
    </p>
    <a href="#" class="more">
      More stuff for him...</a>
  </div>
</li>

Of course, I’ll need to add the markup to represent the site’s heading. Unfortunately, we’re out of time to discuss that in detail, but you can see what I’ve done in our first example, unstyled.html.

Style

Next, I’ll lay on some style. For now, we’ll just concentrate on the most pertinent parts of styling the list elements and the drop-downs. However, if you’re curious to see the entire stylesheet, you can view it in full in our second example, styles.css.

Each mega list item is set to display inline to achieve that nice horizontal bar. We’d like the drop-down menus to overlay the page, immediately under the list item; to achieve this we’ll use position: relative on each mega list item, and later we’ll use position: absolute on the divs:

ul#menu li {
  display: inline;
  position: relative;
}

Each div is styled up to resemble the mockup we received from the designer. I’ve used position: absolute here to align them flush left with each list item, and place them just underneath. I’ve also used display: none as a catch-all for all divs that are descendants of that menu, which will help to hide the one that’s sitting underneath the homepage link:

ul#menu div {
  display: none;
}

ul#menu li.mega div {
  width: 18em;
  position: absolute;
  top: 1.6em;
  left: 0em;
}

I’ll add another class for those list items, hovering, and make its child div elements visible with display: block. Later, using JavaScript, I’ll add the hovering class to the list item when the mouse hovers over it, and remove the class when the mouse leaves the area:

ul#menu li.hovering div {
  display: block;
}

Script

Now, let’s add the JavaScript. I’ve chosen to use jQuery for this example; of course, you’re welcome to write your own scripts or use a different framework. You might be thinking it’s a bit of overkill to use all the overhead of a huge library for one little menu. This is just one part of our hypothetical ecommerce site, however, and I’d almost certainly be planning to use jQuery for other parts of the interface as well.

First, of course, I’ll include the jQuery library. Next, I’ll also include a very nifty plugin called hoverIntent. jQuery has its own hover event, but it fires as soon as the mouse touches the target area. Instead, we want to implement the delayed effect Jakob Nielsen recommended: that is, we’d like to wait for the user to stop moving their mouse. The hoverIntent plugin provides for this by taking the mouse movement speed into account.

First, we’ll need to write a couple of functions to add and remove the hovering class — that’s the class which switches on the display of the mega item:

function addMega(){
  $(this).addClass("hovering");
}

function removeMega(){
  $(this).removeClass("hovering");
}

And then, we’ll use the hoverIntent function to fire off those functions when we hover over an item or leave it. First, we need to set some configuration variables:

var megaConfig = {
  interval: 500,
  sensitivity: 4,

The interval parameter specifies a number of milliseconds (that is, thousandths of seconds) which hoverIntent uses to check on the mouse’s movement. The sensitivity parameter specifies the number of pixels a mouse should have traveled during the interval parameter in order to be considered moving. If the mouse has moved less than that, the mouse is considered to be hovering.

  over: showMega,

The over parameter specifies a function that will be called when the mouse has stopped.

  timeout: 500,
  out: hideMega
};

The timeout parameter specifies how long we’d like to wait in milliseconds before performing the mouse out function. The out parameter specifies what to do once that delay has passed — so in this example, the hideMega function will be called after 500 milliseconds.

Finally, we’ll attach the hoverIntent function to the mega list items, telling it to start looking for hovers and mouseouts, using the configuration we set up:

$("li.mega").hoverIntent(megaConfig)

And that’s about it!

Testing Time

Time to test out our menu! You can see the completed demo with the markup, style, and script in our final example, completed.html.

What Now?

There’s a lot more that can be added here — for example, a drop-down menu can have some accessibility problems, so it’d be good to find a way to also add keyboard actions to this menu. It’d also be nice to add some more interesting design elements to these menus, like icons or column arrangements. For now, though, this newsletter is quite long enough, and what we have here is quite a solid start!

Beagleboard – Initial Impression

Posted on January 31st, 2009

I was using StumbledUpon today and came across a FANTASTIC website today; Beagleboard.org!!  Everyone that knows me knows that I am a technology junkie and this product is right up my alley!

The Beagle Board is an ultra small, linux project board for the low low price of $149.99.  A fantastic deal.  Furthermore, there is a companion product that features a tiny video projector.  Both products can be purchased from Digi-Key!

I will be posting followup articles on these products as I receive them.

Using PayPal with Django

Posted on December 28th, 2008

For several days, I have been seeking a solution for allowing Python to access PayPal or Authorize.net.  Today, I have found a way to allow Django to access PayPal.  You can find the article here.  To utilize Django with Authorize.net you can view the article here.

Turnkey Linux Appliances

Posted on December 5th, 2008

After visiting FreshMeat.net today, I stumbled across Turnkey Linux.  From their website, Turnkey Linux is an opensource project that aims to develop high quality softare applicances that are easy to use, easy to deploy, and free.

They offer a wide variety of packages/appliances from PostgreSQL database appliances to Joomla Appliances.    All of the appliances are based on ubuntu 8.04 LTS.  You can also use the ISO images and run them under VMWare or other solutions or install as a standalone package.

I have installed the PostegreSQL package on a test server and I must say that the installation was painless and extremely simple.  The server is up and running in my test environment and is accessible (with a few tweaks of the firewall) to other servers on my network.  It comes with an easy to use Webmin web based interface.

If you are interested in testing various products on a Linux platform and want a stable system to utilize, give Turnkey Linux a shot!

Password Protection

Posted on October 21st, 2008

Ever wanted to know how easily your password can be cracked?  With fraud on the rise, the need to keep strong passwords on your valuable accounts is imperative.  VIsit this website to see how strong your password combination is.

Something New from MIDS Coming Soon!

Posted on April 8th, 2008

Soon Mega Input Data Services, Inc. will be transitioning to being a part of Mega Input, Inc. Im very excited about this transition because it will allow us to focus our attention to what we want to do now, and in the future. While Mega Input, Inc. will have various properties, each properties expertise makes us extremely agile, lean, and most important, customer oriented.

As part of the transition, one soon to be name division (well, we know the name, but the press release will come soon), which serves as an idea incubator, will be releasing our first new product. Have you ever wanted to plan an event but didnt have the proper software to organize it? Are products currently available too costly? Well, we have the answer!

Test your website in various browsers

Posted on March 16th, 2008

As a web designer and tech guru, we all have our favorite web browsers for personal use. From Flock, to Firefox, to Safari, and the IE one, there are many browsers to choose from. However, when working with sites for clients, it is a good thing to test the website in an assortment of browsers to see if you are getting the effect that you want.  Realistically though, you cannot install all of the major browsers just to test a website; even still, testing the browsers on various operating systems.  Well, you could, but there would have to be a better way wouldnt it?  Of course, Browsershots!

Browsershots allows you to type in your website address and within an hour, display your website in various web browsers and on various operating systems.  It is a tool that every web designer should have in their arsenal.  Give it a shot!

Multi-Touch Screen Interfaces

Posted on March 9th, 2008

A few weeks ago, I had the opportunity to talk politics with a group of colleagues. We were watching one of the 2008 Caucuses on CNN when I noticed something that intrigued me. No, it wasnt the debate over who would come out of the primaries or whether Democratic or Republican views would ultimately prevail. Nope, as a techie, it was the multi-touch screens that were being used by the CNN analysts. Referred to as the “magic wall”, this system allowed the analysts to interact with oversized screen in similar fashion to the users of the iPhone. Check it out below:

So this set me out to find a way for me to have my own “magic wall”. Technology like this, particularly in my line of work, would allow for more powerful presentations and brainstorming sessions. The technology that powered the magic wall came from Jeff Han at Perspective Pixels. There is also use of this technology by a company called Smart Technologies, makers of the SmartBoard. And of course, not to be outdone, Microsoft and its Surface product. However, even with all of these choices, I sought a more cost-effective solution. That was when I came across the Wii Whiteboard Project. For the low cost of programming time and a Wii Remote, I could have nearly the same results as with the other multi-touch product offerings!In an upcoming post, ill showcase a video of my use of the Wii Whiteboard as well as some of the projects and sourcecode used during my trials. Until then, please have a look at the project from Johnny Lee.

Older POSTS