You are reading an article. Lots more of these in the archives. Karsten Januszewski Meet Karsten Arrow

Articles

62Comment Retweet

Glimmer: a jQuery Interactive Design Tool

Apr 27, 2009 In Design By Karsten Januszewski

Glimmer: a jQuery Interactive Design Tool is a prototype from the Mix Online Labs which makes jQuery accessible through a visual tool. The objective for Glimmer is pretty simple: to enable the power of jQuery through an interactive design surface. If jQuery is the "write less, do more” JavaScript library, then Glimmer is the “write none, do more” jQuery design tool. Glimmer has three core audiences: power users, designers and developers

The Genesis of Glimmer

Like many software projects, Glimmer was born during a conversation. Tim Aidlin and I were having dinner together.  We’d just recently finished up Oomph: A Microformats Toolkit and we were reflecting on our experiences with that project and what we’d learned.

In building Oomph, we used jQuery extensively, which was a new experience for both of us.  The ability to so easily manipulate the DOM on the fly, slinging CSS around at will, was a revelation in terms of what we could do with the standards-based web as a  designer and developer.  We had a pretty good workflow going, with Tim drafting up HTML and CSS while I realized his vision programmatically through jQuery. In some ways it was akin to the workflow we had with WPF. (See The New Iteration, Tim’s post on workflow and this Channel9 interview for more on Tim and my own thoughts on the topic of developer/designer workflow.)

While we had a good workflow, it wasn’t perfect because, if Tim wanted to make a change to the look or feel, he would have to either (1) modify the JavaScript himself or (2) have me make the change.  Like many designers, Tim is comfortable in visual tools like PhotoShop and Blend,and is good at writing HTML and CSS,but is not excited about writing lots of JavaScript code.  He can write code and adapt example code when necessary, but doesn’t want coding to be his primary job.

This is when we had the following realization: what if there were a tool for designers to create amazing web experiences in HTML, CSS and JavaScript without having to write code? Thus was born Glimmer: a jQuery Interactive Design Tool, a new prototype from the Mix Online Labs which makes jQuery accessible through a visual tool.

Here’s a screenshot of the Glimmer Welcome Page:


Want the quick-and-dirty on Glimmer? Watch the video:


Or read on to find out more about the goals and vision of Glimmer.

The Goals of Glimmer

The objective for Glimmeris pretty simple: to enable the power of jQuery within a tool.  If jQuery is the “write less, do more” JavaScript library, then Glimmer is the “write none, do more” jQuery design tool.

Glimmer has three core audiences: power users, designers and developers.

First, Glimmer is optimized for the power user or web author who wants to use step-by-step wizards to create common web experiences like image sequences, animating dropdown menus and tooltips.  For these scenarios, Glimmer makes it super simple, generating HTML, CSS and jQuery and packaging it all up, ready to be slapped on a server.

Here’s a screenshot of Glimmer’s Image-Sequence Wizard:

Second, Glimmer is targeted at the designer who is fluent in HTML and CSS. For this person, who has an understanding of how HTML and CSS are used to build web pages, Glimmer provides a way to create web animations and experiences entirely through a tool.  Any HTML file can be opened in Glimmer and then the elements inside that HTML file can be visually selected and manipulated, creating effects based on events that happen on the web page like load, mouseover, mouseout, submit and more.  These effects might include opacity fades, position movement, scaling of items and manipulation of the HTML, both through appending/removing HTML and through modifying the page’s CSS on the fly.  With these effects, web designers can add interactivity to their web pages without writing code.  There is also the ability to run timers and to chain actions sequentially. Using these two techniques, a kind of simple key frames can be established. Consider the web comic at the top of the lab page that Tim created with Glimmer.  He built this by chaining together a series of animations. It is a great example of what a creative designer can build with the tool.

Third, Glimmer may be of interest to jQuery developers, both beginners and experts. For people just learning jQuery, Glimmer can function as a teaching tool, a WYSIWYG editor that generates code which can be inspected, analyzed and then potentially tweaked or modified. Using a tool in such a way is an excellent path to learning. I think about tools like Microsoft Expression Blend, which helped me to learn XAML, or Microsoft Expression Web, which helped me to learn CSS.  For jQuery experts, Glimmer can help bootstrap a project, allowing for rapid development by generating boilerplate code that may then be tweaked.  It is worth noting that because the tool generates code, it may not be as optimized as what an experienced jQuery developer might write.

Here’s a screenshot of Custom Mode in Glimmer, which is how designers and developers can use Glimmer to create custom scripts:

The Future of Glimmer

As we built Glimmer, we realized we’d taken on a pretty ambitious project. We knew we couldn’t cover every scenario. As such, from the start, we designed it for extensibility and plug-ins. jQuery itself was inspirational in this regard, given how vibrant the community is around building plug-ins for jQuery. We wanted to do something similar for Glimmer.

There are two main points of extensibility for Glimmer. First are the wizards.  Anyone can write a wizard that plugs into Glimmer. For example, someone could write an image gallery wizard which would generate HTML, CSS and jQuery based on a series of prompts. Second, anyone can write a Glimmer effect.  Currently, Glimmer ships with 8 effects, which include things like opacity animation, x position animation, add CSS class, etc. But this only scratches the surface in terms of other effects that could be written. For example, someone could write an effect that uses a feature from a jQuery plug-in.

It is worth noting that Glimmer was entirely architected to separate the Glimmer UI from the underlying algorithms and architecture that handle all the jQuery code generation, JavaScript serialization and JavaScript deserialization. What this means is that it is entirely conceivable someone could take the Glimmer library (GlimmerLib.dll) and create a whole different UI, perhaps a alternate UI in WPF or one in Silverlight or ASP.NET. We choose to use WPF because we wanted the tool to have access to the local file system as well as work offline.  In our experience, web designers and developers build their sites locally first, which is why we built Glimmer as a desktop application. (And we love WPF.)

With this release of Glimmer, we are excited to share what we’ve built.    We look forward to your feedback about Glimmer. Download it today!

Follow the Conversation

62 comments so far. You should leave one, too.

liammcmullen said on Apr 28, 2009

looks like a brill idea - have you though about making it a visual studio Add on?

Karsten Januszewski said on Apr 28, 2009

Hi Liam -- Yes, I started working on both a Visual Studio Add-in and an Expression Web Add-in but ran out of time on both fronts. Turns out that, at least for me, getting at the DOM from the Visual Studio HTML design surface was pretty tricky. And the Add-in model for Expression Web is also a little tricky, as it is COM-based. I''d still like to do both at some point. And if anyone out there is interested in working on something like that, let me know...

ST said on Apr 28, 2009

You don''t mention it anywhere but this appears to be Microsoft only, is that correct? Is the source code usable in any other environment?

noob said on Apr 29, 2009

You''re using Silverlight to showcase jQuery? That''s like seeing a tiger in a Zoo cage.

Completely and utterly unnatural.

D Halley said on Apr 29, 2009

I can''t get this to work. It crashes as soon as I open the application.

Clare said on Apr 29, 2009

i love the idea ... but system requirements seems to be missing from this post! i am a mac user, this is only for pc it would seem?

Nikita Polyakov said on Apr 29, 2009

This is awesome project, great professional feel tool.

Works as expected.

Lorenzo said on Apr 29, 2009

Complimentti. Andate avanti cosi.

Boooo said on Apr 29, 2009

booo, sorry but never would code on Microsoft technologies.

ty (Crssp) said on Apr 29, 2009

An Expression Web Add-in would be just killa''.
I''m excited about this. Currently I still run version 1 of Expression Web, hopefully it could work with that, if it were made available.
Thanks for such a cutting-edge jQuery tool!

Karsten Januszewski said on Apr 29, 2009

@ST -- Not sure if you mean the source code for the Glimmer tool itself (which is C# and XAML) or the source code that Glimmer outputs (which is JavaScript, HTML and CSS). In the latter case, you can do what you will with that JavaScript, HTML and CSS -- host it on any web server/platform.

Karsten Januszewski said on Apr 29, 2009

@noob -- Glimmer is a desktop Windows application that generates jQuery, HTML and CSS. Think of it as a tool in your bag of tricks when doing web development. In many ways, it was the suite of tools for designers and developers, such as the Adobe suite or the Microsoft Expression suite, that was our inspiration. As I discuss in the post, we chose WPF (Window Presentation Foundation) to build Glimmer because we wanted the tool to have access to the local file system as well as work offline. In our experience, web designers and developers build their sites locally first, which is why we built Glimmer as a desktop application.

Karsten Januszewski said on Apr 29, 2009

@Clare -- Thanks for feedback. Indeed, it is a Windows application. As far as operating systems, it requires Windows XP or Windows Vista. It also needs the .NET Framework 3.5 SP1 (http://msdn.microsoft.com/en-us/netframework/aa569263.aspx) to be on the machine, which the setup program will install automatically if it isn''t already there.

Karsten Januszewski said on Apr 29, 2009

@D Halley -- Hmm, sounds almost like the .NET Framework 3.5 SP1 didn''t get installed. Will ping you directly to resolve. If others are having issues, please post to the issue tracker here: http://code.msdn.microsoft.com/glimmer/WorkItem/List.aspx

Steven said on Apr 29, 2009

I installed the application and restarted my computer but when I logged on, I was a TEMP user. I restarted the computer again and I was back on my user but I can''t find the application at all.

Where is it installed by default?

Steven said on Apr 30, 2009

Got it working.

I didn''t realise that it installed .net 3.5 SP1 first then you have to run the setup again to install the application.

Karsten Januszewski said on Apr 30, 2009

The installer is supposed to start again after the reboot, but looks like that didn''t happen. Thanks for letting us know. I''ve logged it as an issue here: http://code.msdn.microsoft.com/glimmer/WorkItem/List.aspx

André said on Apr 30, 2009

Hi, Karsten!
I''ve installed the app but I don''t understand how to use it with the asp.net mvc pages I''ve developed. I can only load HTML pages.
How can I work with aspx or ascx pages?
Thanks!

rajram said on May 2, 2009

I just installed the tool and created a few pages using the existing wizards.
It is definitely cool. I would love to see it integrated with Visual Studio.
Great work!

digish digish said on May 3, 2009

HI,

I used it and found that this is the most awaited thing for me. JQuery always used to laugh at me, saying I am too high for you guys.

Annoying things about Glimmer: During the image slidings, buttons apears with one two and all. There is not option to remove the numbering and buttons.

2. I would love to have vertical menus and color options in the menu. I agree it is a drop down memnu option, but it would be nice if we could get an option for vertical too.

3. Atlast, hopefully for atleast one year make this program free, as microsoft, the minute they understand the program is good, they will start charging the users.

Thanks for such nice program.

Raghuraman Kanchi said on May 3, 2009

Excellent.. Keep up the good work and Thank you.

Karsten Januszewski said on May 6, 2009

@Andre: Using Glimmer with .ascx and .aspx (or .php for that matter) isn''t supported at this time. Your best bet is to render your page and then save the output (maybe like page.php.html) and open it in Glimmer, make your script, then retrofit it into the .ascx, .aspx or .php file.

@digish: Thanks for the suggestions. Will keep them in mind for a future version...

FranckW said on May 6, 2009

Like D Halley, Glimmer crashes as soon as I launch it. Can''t go further than the splash screen.
I report the issue in this page : http://code.msdn.microsoft.com/glimmer/WorkItem/List.aspx

Thanks for this great work. Glimmer sounds really great.

Digish said on May 7, 2009

Hi,

Thanks, for the response, and Yes, it would be really nice if you could bring up that second version of glimmer very fast (I used to think like this when ubuntu first came to market). It is so good to have a Glimmer for making menu( it is like zillion times easy game), I use SoThink at times which has its own parameters. It would be nice if new featured version is available.

Yes, only if you people have enough time.

Thank you.

Digish said on May 7, 2009

Hi,

Thanks, for the response, and Yes, it would be really nice if you could bring up that second version of glimmer very fast (I used to think like this when ubuntu first came to market). It is so good to have a Glimmer for making menu( it is like zillion times easy game), I use SoThink at times which has its own parameters. It would be nice if new featured version is available.

Yes, only if you people have enough time.

Thank you.

Karsten Januszewski said on May 8, 2009

Hi FranckW - I responded to this issue on the thread you started over at http://code.msdn.microsoft.com/WorkItem/View.aspx?ProjectName=glimmer&WorkItemId=3

CaptSaltyJack said on May 20, 2009

Instant thumbs down for not supporting Mac, which is a popular platform for web design.

David said on May 23, 2009

I agree, very bad move being Windows only. Such a shame.

Karsten Januszewski said on May 26, 2009

@CaptSaltyJack @David

Thanks for letting us know. If the demand is there, perhaps we''ll do this one of these days.

Jesse P said on Jun 8, 2009

Yeah, put together a Mac OS X version, and I''d sign up in a heartbeat. Looks good from the outside, though.

Tim Gummer said on Jun 14, 2009

godspeed with the the mac-ification of what seems like a great app. Don''t want to fuel any flamewars here, but as a crossover designer/developer.. even I''m somewhat amazed how the once pc-centric dev community seems to have largely shifted to OS X. If you want a market for yr product... its gotta worth focusing on the mac / nix end of things. Not only is it populous, but its also where the influencers are. Best of luck.

sal said on Jul 7, 2009

i found this through http://tools.mozilla.com/ but it is a bit of a misnomer to call it open source if it only works on a pee cee

sad

Gemini23 said on Jul 18, 2009

Hi, this looks a pretty good tool for someone like me who is just starting out with Jquery etc... the question was asked previously.. but not answered... the buttons that appear on images.. how to get rid of those? They are just plain annoying!

Karsten Januszewski said on Aug 5, 2009

@gemini23 -- Getting rid and/or changing the button images is a matter of modding the css...

dmc said on Sep 1, 2009

Any news on a version for Mac? This looks great, but have to agree, such a shame that it''s A: Windows only, and B: Built on Microsoft technology, which, as a web designer, I''ll never use. Ever.

Vanlen said on Sep 23, 2009

Well for getting into Jquery this is a no brainer. Well done!

Cheers

????? ??????? said on Dec 29, 2009

@Andre: Using Glimmer with .ascx and .aspx (or .php for that matter) isn’t supported at this time. Your best bet is to render your page and then save the output (maybe like page.php.html) and open it in Glimmer, make your script, then retrofit it into the .ascx, .aspx or .php file.

Ezrad Lionel Ezrad Lionel said on Feb 7, 2010

VVED - Very Versatile Electronic Document is better. Jquery has a large community but for customized apps, VVED has too many built in tools. You''d have to get several JQuery ''plugins'' to equal the out of box functionality of VVED. Granted it''s slightly bigger, and an animation engine.

Bosun Odeyemi Bosun Odeyemi said on Feb 11, 2010

This is a promising application. But not useful beyond the wizard that ships with the software. Whenever you import an html and save animation, it crashes! Too bad. I give it a thumb down amongst others mention by earlier contributors.

Rizky Syazuli Rizky Syazuli said on Feb 22, 2010

darn, so it''s a Win only tool eh? too bad, love to try it out though.. keep up the good work guys. hopefully there will be a cross-platform version soon.

Papillion Papillion said on Mar 4, 2010

Most interesting project. Will cross fingers for a Mac version soon.

jim said on Mar 15, 2010

Silverlight? really? sigh....

Ghaida Zahran Ghaida Zahran said on Jun 23, 2010

Looks great! Hope you guys release a Mac version soon :)

Devin Walker Devin Walker said on Sep 9, 2010

This is a tool for noobs, great idea though.

Phil said on May 12, 2011

This idea was promising, is there a second version?

Joshua Allen said on May 12, 2011

@Phil -- I'm afraid not. There is no V2 planned.

chris said on Jun 6, 2011

wonderful.msn contact:ylyn99@live.cn

Grace said on Jun 6, 2011

Hello,

I'm currently working on a commercial site and have found Glimmer to be quite a useful tool. Could you let me know if there are any legal restrictions to my use of the software?

Thanks!

karstenj said on Jun 7, 2011

@Grace - No there are no legal restrictions beyond the standard EULA.

Homa said on Jun 13, 2011

Hi,

Download link doesn't work.

Homa

karstenj said on Jun 14, 2011

@Homa - Thanks for the heads up -- I've fixed the link: http://visitmix.com/work/glimmer/

Portal de Imóveis said on Jun 20, 2011

Thanks a lot for this tool.

Really amazing!!!

mike said on Jul 26, 2011

how do you change the position of the buttons

karstenj said on Jul 26, 2011

@mike -- not following -- can you elaborate?

Andy said on Jul 29, 2011

Is this available for Macs?

karstenj said on Aug 1, 2011

@Andy - I'm afraid not.

Gaurav Mishra said on Aug 2, 2011

Very nice and a faster tool!

Gitarre Lernen Online said on Oct 12, 2011

Wow, Glimmer seems to be the tool I've always been waiting for! Like Tim, I'm comfortable with writing HTML and CSS but as soon as I see any Javascript, my brain just seems to switch itself off. Strange thing.
I can't wait to build my first screen animations (fading and moving) that is even standards compliant.
Thank you!

Theatre Tickets said on Dec 6, 2011

Nice tool, I thought it was designed by the punchtab team...Very impressive anyway.

Atit said on Jan 6, 2012

Tried using this... Application crashes as soon as it starts.

Looks like it is not working. I am using win 7, 64 bit.

h said on Mar 27, 2012

h

Dan said on Apr 17, 2012

Hello, I just want to thank you for providing this great tool. It is very helpful!