I need a flexible content layout tool that will, in turn, display content flexibly. This tool will be used to create single page designs each with several embeded nodes. The interface should be similar to working with a group of photos on a table. Think of this as a very, very simple Adobe Photoshop or Illustrator.
The closest analogy you may have seen online, aside from the photos-on-the-table example, is a children's game which allows a plain doll to be dressed in various clothes, chosen from a closet. Once saved, some simple actions and animations allow the creator to interact with their creation. Or a puzzle game with a box for the pieces. This project is simpler because it doesnt require any sort of collision detection or element pairing.
The following components will be needed:
- Javascript-based asset lookup tool (to find items to place in the layout).
- Javascript-based asset creation tool (to create a node on the fly when it does not yet exist).
- Javascript-based content placement tool (to arrange items on a canvas).
- Javascript-based content display tool (to allow readers to interact with the individual elements of the page).
- Javascript-based font selection & text placement tool.
.. and Drupal modules to tie these elements together.
In an alternate analogy, this could be a "free form layout tool" for panels (like the way pre-adobe GoLive used to work for table-based html layouts). Panels isn't required, and the interface is too complicated for the immediate use; so, because it will take a lot of hacking to reduce the complexity of panels, I'd rather not use it as a base. That said, panels everywhere seems like it could work as a base:
http://drupal.org/project/panels_everywhere
Project specifications:
First: I need a way to lookup items to be placed onto the canvas. Nodes will be chosen from a view or searched for by name (using a node reference autocomplete). These nodes will have field with a PNG with transparent backgrounds to allow for them to be placed in a 'disorganized' manner on the canvas. The intention is to allow elements on one layer show through to the next. This lookup should be on the same page of the canvas so that items can be dragged and dropped onto the canvas (rather than in a panels style popup).
Second: For items that don't yet exist, I'd prefer to be able to add these inline once a "layout" node has already been started. This is akin to a inline node reference creation (in a popups API / jquery UI style). Once created, the new node would show in the users toolbox of recent nodes (view). This same interface would allow for inline node editing.
Third: I need to create a canvas (may or may not be the HTML5 "canvas", by this I simply mean blank-slate) where other nodes can be placed. The canvas is a defined area of a page made either by setting pixel sizing (WxH) or by choosing pre-set "styles" (wide, square, etc). Assets can be positioned either based on pixel / absolute or percentage (ideal). Using percentage-based layouts would allow the items to scale (a larger monitor would get the next larger image cache sized image, a smaller monitor would get the next smaller, but all would get the same relative placement). -- This variable layout is not a must for phase 1, but it is the end goal so should be planned for.
Possible Imagecache size selection: http://www.marcofolio.net/webdesign/browser_size_aware_content_scaling.html
I need to be able to arrange these elements on the page with drag and drop. There would need to be "send back" & "bring to front" layout buttons to order elements (or a drag and drop field on the side to set order, like the layers panel in photoshop/illustrator). There would also need to be a simple and logical way to rotate and scale each element (handles).
http://css-tricks.com/drag-n-drop-cards/
http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_wit...
http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/
http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin
http://wilq32.googlepages.com/wilq32.rollimage222
http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-fire...
http://www.fernando.com.ar/jquery-puzzle/
http://www.tripwiremagazine.com/2010/01/15-jquery-plugins-giving-web-int...
http://github.com/yui/yui3/tree/master/build/dd/
Fourth: I would like to be able to set animation effects on the individual elements. Each node should be separate so that it can be rotated or "zoomed" when the mouse goes over (or on other interactions / time delays) to make it pop. All items will have titles and other metadata that will show in a standard format.
This fourth line item is the main purpose of making the nodes separate items (instead of just using an image map). I'd like to be able to add pre-set animations (wiggle, zoom, spin, pulse, etc). Ideally, this "logic" tool could also be used to set the visibility of an element based on some field (or computed field) of the referenced node --- or based on some rule or action firing.
http://webdev.stephband.info/parallax.html
Fifth: Finally, being able to place text in a WYSIWYG format would be great (using cufon or similar as an eventual renderer). More than likely only a few (2) fonts will be used, but they need the same flexibility as the other node-based item placement (scale, rotation, layers). Again, I'm going for a 'messy' look, so pixel perfection is not needed (tolerance of ~5px). As a fallback, I can create the text locally and upload as a PNG with transparent bg (pre-rotated) - not ideal. Text can be written to a png if need be before display -- cufon not a requirement.
Effectively, beyond tying this to Drupal, you are creating an interface to control z-index, div positioning and rotation, and setting presets on jQuery UI effects and animations for individual divs. The remainder of the display elements are more common existing libraries.
As in the type layout note above, I'm fine with all elements being rotated by a user with a more modern browser and then displayed to a user with a less modern browser by way of server-side "rendering". In other words, the tech used for the editing interface doesnt need to be the same tech used for the output... We might just have to show IE PNGs until 9 comes out (or build an ActiveX version of HTML 5). The target audience for this will have modern (CSS3-ready) browsers. For those that do not, we'll just show them a flat rendered jpg with an imagemap.
I've seen this done in flash well, but I need to get a sense if it can be done in jQuery, using Drupal as the framework.
Javascript is getting good.. see: http://raphaeljs.com/ & http://mootools.net/forge/ or http://processingjs.org/
To Bid
Send me a few jQuery libraries that you think could work to create this type of interaction (both on the input and on the output side), or if there are none close, tell me so. I'd really prefer to not start from scratch, so if there is a library that can be extended for this use, that would be ideal.
Send also a budget for creating this and a timeline to have an alpha up and running. I'm willing to set a budget and timeline for you once you give me a sense of how much "glue code" it will take to get this done beyond what is already in place.
I'm willing to support an existing Drupal Module(s) or jQuery project and also to contribute to an open source version where applicable.
I have 4 years of Drupal experience, so please be detailed with your solutions / responses. I understand that this is a complicated undertaking and I already plan to use a phased approach whereby initially all layout will be done locally and then made clickable with an imagemap. I'm looking for a somewhat aggressive yet realistic timeline to getting this in testing.
PS, if you know someone who would be good to approach for this project, please send me a link or drop their name here.
