Join 3,494 readers in helping fund MetaFilter (Hide)


How did these web sites get so pretty and dynamic? (e.g. HealthMonth, NirvanaHQ)
August 5, 2011 12:59 PM   Subscribe

How did these web sites get so pretty and dynamic? (e.g. HealthMonth, NirvanaHQ)

I've programmed on the web before with PHP and mySQL, so I understand how dynamic websites get data. But these very pretty websites are beyond me even when I look over Ruby on Rails tutorials (it just looks like a standard programming language!).

How are tasks dragged and dropped in Nirvana HQ?
What makes the goal boxes in health month sort of swing into view and resort? Are these simple things to do?

Would love to see a tutorial or a WYSIWYG editor for either.
posted by jander03 to Computers & Internet (8 answers total) 19 users marked this as a favorite
 
How are tasks dragged and dropped in Nirvana HQ?
What makes the goal boxes in health month sort of swing into view and resort? Are these simple things to do?


The dynamic front-end stuff (drag and drop, etc) will be done with Javascript, and likely something along the lines of Jquery to make it less painful than pure JS. They're not difficult, necessarily, but certainly not easy on a WYSIWYG editor kind of scale.

But these very pretty websites are beyond me even when I look over Ruby on Rails tutorials (it just looks like a standard programming language!).

Ruby is a standard programming language, Rails is a framework. It would be useful for the backend and serving/generating the HTML, but it won't be where the dynamic interface things you mentioned would live.
posted by ndfine at 1:22 PM on August 5, 2011 [1 favorite]


There's two big frameworks which help with doing desktop style UI's, (more Nirvana then healthmonth) one is SproutCore the other is Cappuccino. Both provide standard Desktop UI widgets. Healthmonth looks more home grown
posted by bitdamaged at 1:38 PM on August 5, 2011 [2 favorites]


Oh it looks like NirvanaHQ uses the Jquery UIwhich is another option.
posted by bitdamaged at 1:39 PM on August 5, 2011 [2 favorites]


Ah, this makes sense!

So it looks like I could stick to the PHP I'm used to if I wanted to start using something like JQuery, right?
posted by jander03 at 1:48 PM on August 5, 2011


Both those sites definitely use jQuery.

If you use Firefox, you might like to install the Firebug extension; it's very useful for debugging your own work, and it's also an easy way to get a closer look at the JavaScript and CSS that other pages use. It shows me that, for example, one of the JS files used by NirvanaHQ is called jquery-1.3.2.min.js - a dead giveaway that they're using jQuery.
posted by ManyLeggedCreature at 1:52 PM on August 5, 2011 [1 favorite]


And yes, to answer your second question, you can use jQuery for dynamic UI magic irrespective of the language you're using at the back end. Here's a basic jQuery tutorial - but if you haven't used JavaScript at all, you'll want to find a JS tutorial first. I'm afraid I don't have a go-to source for those; Google is your friend.
posted by ManyLeggedCreature at 2:05 PM on August 5, 2011 [2 favorites]


Perfect, I think that's everything I need to know to get started!
posted by jander03 at 2:08 PM on August 5, 2011


Javascript can be... well confusing, especially if you are already used to a C-like language (whihch PHP is to some extent). And there are a lot of turorials etc. out there which give a very deceptively superficial introduction to the language--which is especially bad with JS. Get Douglas Crockford's book "Javascript: The Good Parts", it was very useful to me in really understanding the esoteric truth behind the deceptive surface I thought I knew as JS.

Also, wow that's a lot of tutorials: http://docs.jquery.com/Tutorials
posted by thefool at 9:31 AM on August 6, 2011


« Older Is there such thing as a backp...   |  Sunscreen in a Tracfone - do I... Newer »
This thread is closed to new comments.