Unit Verse

Developing For Unify – pt. I

• by Nathan Ford 3 years ago
• 12 Comments

Until recently, the bulk of thought towards managing a site’s content has weighed on the side of more options and more control. With this has grown more headaches, indecipherable usability, and more opportunity for the misguided destruction of otherwise well-considered designs and/or mark-up. The guiding principle of Unify has been to put the power back in the hands of designers and developers by creating a content editing option with dead-simple, customizable implementation, limited-yet-permissive content control, and a polished, intuitive UX.

Unify is not a complicated system; in fact it is not a system at all. This two-part series will illuminate some of the unique aspects of Unify, allowing any website designer/developer the most opportunity capitalize on its potential. Unify is the closest to a plug-and-play content editor available at this time, and these tips should help make your next Unify install as quick and effortless as possible.

How Unify Works

The Unify UI is built on the jQuery library and jQuery UI. Through javascript and CSS, Unify gives a constant and accurate depiction of the changes being made to the HTML. Therefore, when manipulating items through the Unify UI, you are editing only what the browser sees. Publishing changes, on the other hand, deals with the actual HTML/PHP written in your files (more on this later). The Unify text editor is a custom build of tinyMCE, sharing all of its triumphs and tribulations. We have taken great pains in smoothing out some of tinyMCE’s eccentricities, and will continue to do so, but those with tinyMCE experience will recognize some of its hiccups.

When the changes are completed in the interface, and it comes time to publish these changes, we get to the core of what makes Unify unique. On publish, Unify will pick up the HTML/PHP page that you are publishing to (and any includes), find the elements you have edited, replace their content with the updated content, and then save those files back down on your server. This eliminates the need for a database, as your HTML/PHP files are, in a sense, storing your content. During this process, Unify also creates backups of your files, allowing for previously saved states to be “restored.”

Before all of this can take place, though, you must install Unify on the root of your website. There are some server requirements you may need to look in to at this point, but given that you have a common PHP setup, Unify should just drop on to your server and work. You should then be able to define the editable content throughout your site by adding the class of “unify” to elements. You can also use the “unifyRepeatArea” and “unifyRepeat” classes to really make your content dynamic. More on these Unify Repeatables later.

It is important to note here: Unify elements do not nest. Any “unify” or “unifyRepeat” elements within other “unify” or “unifyRepeat” elements will be ignored both by the interface and the publishing functions.

Development Environments

We have given serious consideration to how to set up development environments for Unify. In order for Unify to work, you must have purchased a license and registered your copy of Unify for a specific domain or sub-domain. Seems simple enough until you want to develop on one domain/sub-domain, and then deploy in another, right?

Unify was not designed to be a complicated solution that would require a lengthy testing period or any development area. It either works, or you will need to sort out some PHP config issues, and then it works. If you want to give it a test run, though, before deploying, we suggest one of these three options:

• Purchase a license for a sub-domain/domain specifically for Unify installs, e.g. unify.yoursite.com. This will be a one time fee, and will allow you to use Unify in any folder in this sub-domain. You could copy fifty Unify folders in to fifty site folders for fifty clients, and they would all work in that sub-domain on one license for a one-time purchase.
• Purchase a dev license and a live license for your client as part of your project with them, rolling this in to the cost of your project. This would allow you to develop in a sub-domain.
• As of 07/15/10: You can now transfer any license one time. See here for more details.
• Simply develop in a sub-folder of the domain on which you wish to use Unify.

For Unify to work, it must be installed and running on a live, licensed domain or sub-domain. This means you will need a live connection to the Internet to use Unify. It also regrettably eliminates the ability to develop in a local environment. Please see Developing for Unify pt. II for info on developing locally.

Efficiency Through Unify Repeatables & PHP Includes

Unify works with PHP includes. The UI cannot recognize if content has been brought in through a PHP include statement, but when publishing, Unify loops through all the includes called on your PHP page, and replaces the appropriate content in each. So, if you have recurring content throughout your site—e.g. in a site header—you need only make the change once and it will populate throughout the site.

Another important to note: do not put any PHP (or PHP includes) inside of a Unify element. As mentioned before, the Unify UI only knows to save what the browser sees, so this could destroy some of your server-side code when publishing. Your included Unify element must be within the include, not surrounding it.

Unify Repeatables are an all together different tool that allow you to rearrange and duplicate complex sets of elements. For example, say you have an element whose inner HTML is a little bit complicated, like so:

<div>
   <img class="fancy" src="images/fancyimg.jpg" alt="Fancy" />
   <h4>Caption Header</h4>
   <p>Some more caption content goes here</p>
</div>

If this element will need to be duplicated, you could just wrap it in a “unify” element and hope that your client is savvy enough to grab all the appropriate tags when copying. We know this is a scary thought to most developers, and this is why we created Unify Repeatables. Now you can create a “unifyRepeatArea” container, and make the original element a “unifyRepeat” element, like so:

<div class="unifyRepeatArea">
   <div class="unifyRepeat">
      <img class="fancy" src="images/fancyimg.jpg" alt="Fancy"
      »» />
      <h4>Caption Header</h4>
      <p>Some more caption content goes here</p>
   </div>
</div>

Line wraps marked “»»”. -ed.

The “unifyRepeatArea” defines a boundary. Within that boundary, “unifyRepeat” elements can be duplicated and rearranged. There can also be non-editable elements within the “unifyRepeatArea”, but these will be static, and will only be moved as nudged by other arrangeable content. “unifyRepeat” elements outside of “unifyRepeatArea” elements will be ignored by the UI and publishing functions.

By combining Unify Repeatables and PHP includes, you can create fairly dynamic and functional site modules that are easily updated through Unify.

What’s Up in Pt. II?

In part two of this series, we will look at how Unify works with dynamic content, like Twitter feeds, and how you can better implement Unify to be friendly with page behaviors such as tabs and lightboxes. Plus, we will take a look at the future of what Unify will have to offer.