Since I started work on IP.Dynamic back in January this year I had only a limited knowledge of javascript and thus the interface was pretty much your old school (that’s like, sooo 2004) PHP + HTML with the menu being the only fancy scripted item.
My work with Invision Power Board has expanded my javascript knowledge and with the sudden explosion of the recently slow burning “Ajax” technology has led to me to rethink the main content interface.
The movie below is the culmination of three days work. This seems rather excessive; and indeed it is for the results but I’ve written all of the javascript code as OOP classes which can be re-used with any output just as long as all the ID names are specified correctly.
This outlines just how young this technology is. There are no shortcuts available. You have to code everything from the group up: the dragging functions, collision detection functions, highlighting functions, original row colour changing functions; everything. You also have to fight through browser bugs and limitations and different proprietry methods of attaching events, etc. It’s a long haul and a huge time vacuum and definitely not for the faint hearted.
However, now that I have my “drag-drop-move” class and my “inline-edit” class, it’ll be very easy to build the same functionality to the content blocks and template areas. The key to a good interface is consistency and building trust with the user. There’s little point in letting them drag and drop to move when working with pages but not so when working in other areas.
Check out the movie and notice how the row which is being dragged fades out (semi-transparent CSS layer using a semi-transparent PNG image for non-IE and IE filters for IE (yay for PNG support in IE7)) and how it won’t let you move a child into its existing parent.
ipd-pages.mov (Quicktime .mov 780k)
{ 35 comments… read them below or add one }
Just one word: Great !
Oh, and one sentence: Bring IP.dynamic out, we all need it !! As fast as possible …
I’ve been waiting for the next IPD update eagerly,
this latest update looks amazing. At least as far as interfaces go. One of my biggest annoyances with other CMS is the interface/organisation.
Looking good!
I’m a little disapointed, that this close to an IPB release, we are hearing of IPD news.
O stop your complaning. Look at the screenshots/other things at: http://www.invisiondynamic.com/.
Really cool.
It’s just like the MSN Space.
“I’m a little disapointed, that this close to an IPB release, we are hearing of IPD news.”
IPS isn’t a one product company, they can’t spend all their time on IPB. Although i also would like to see 2.1 asap, I like to know that they are still making progress on their other products.
And, for what it’s worth… what Matt has done with IPD, will probably feature in some form in IPB as has been noticed with other IPB/IPD updates (what happened to IPA and IPC???).
“What happened to IPA and IPC???”
India Pale Ale and Instructions per Clock?
What are these though? I’ve never heard wind of them.
IPA? I think I know IPC – InvisionPower Chat.
“IPS isn’t a one product company, they can’t spend all their time on IPB. Although i also would like to see 2.1 asap, I like to know that they are still making progress on their other products.
And, for what it’s worth… what Matt has done with IPD, will probably feature in some form in IPB as has been noticed with other IPB/IPD updates (what happened to IPA and IPC???).”
I’m aware of that, but so close to a release, IMO Im disapointed at that. Im not saying its not good work, there are other developers, and IPD has been stated that it wont be released for a while
IPA / IPC? I don’t recall any projects named as those.
Matt, this is looking great. Just wondering, whats happening with the whole design of it?
Now, if only that can be done for re-ordering forums.
Lee,
That would be awesome!
I love this feature! This may encourage me to take javascript a bit more seriously
Thanks for the inspiration.
I am trying to start my own blog and I’m trying to learn how this works.
My site looks like this online slots
http://www.slots-guide.com
Looks like your blog is being targeted by spam bots. o.O
Oh by the way visit nothing.nothing.nothing!
Slots? Someone said slots?
Three phrases should be among the most common in our daily usage. They are: Thank you, I am grateful and I appreciate.
Of course they are Mr Spam Bot.
However, now that I have my “drag-drop-move” class and my “inline-edit” class, it’ll be very easy to build the same functionality to the content blocks and template areas. The key to a good interface is consistency and building trust with the user. There’s little point in letting them drag and drop to move when working with pages but not so when working in other areas”
Matt your right he is a fucxxxx spam bot dell his post
Keep up the good work. Greetings
can anyone delete this big link-collection in the comments…
Matt – Can I add link to this article on my site? In my opinion is very helpful article
Time to IPD!
It will be released a beta of the IPD in March, i trust
Fantastic article! Very useful informations. I really love it, can I recommend it to my friends?
Great article, can I translate it and put on my site?
I am trying to start my own blog and I’m trying to learn how this works.
Very good work.Congrats.
Hello
Nice one. good explanation of the topic
Greetings
Thanks for very interesting article.
Thanx a lot! This is very useful.
Three phrases should be among the most common in our daily usage.
“[IP.D] Dynamic Interface” – Good work. Cogratulations
Very nice looking project, keep us updated!
Very good work.Congrats.Keep up the good work. Greetings
It’s crazy when you log on to these old blogs and see how things have developed since the blog was first written. So much is going on now, three years later, that it’s weird that we had so little just three years ago. The video was still interesting to look at, though; especially as you realise how much we probably take for granted now. However, that’s what progress is all about and I love reading some of these old blog posts.
{ 1 trackback }