Unit Verse

Developing for Unify – pt. II

• by Nathan Ford 1 year ago
• 6 Comments

It has been quite a while since I wrote the first part of this series, but Unify has been going through a lot of changes in the last 6 months, and I wanted to make sure to address all of the new features and improvements that have been in development.

Please Note: Every new addition to Unify is rather well debated so that we can allow the app to be as simple and easy-to-use as possible. What follows here are best practices and suggestions to help you [designers & developers] understand how Unify works so that you can create the best experience for yourself or your clients.

So, without further delay: Here is everything else you may want to know when developing a site with Unify in mind.

(The features selected in this article are based on user input, so if you want to know how Unify works with your specific configurations, please peruse the forums or contact us. Thanks!)

Aesthetics

Much of our efforts in recent months have been focused on making Unify work with—or on top of—many possible server configurations (such as IIS and Apache), browsers, and content needs (such as tables and picture galleries). As much as this adds to the power of our app, it doesn’t do much for ergonomics. So as of version 1.2.0, we greatly improved the style rendering in the editor (before & after):

…and improved the HTML editor by adding a full-screen view, syntax highlighting, and allowing tabs:

IMHO: these screen-shots cannot do justice to the improvements. See for yourself in our live demo.

Working Locally

Unify requires a handshake with our server in order to log in, and perform many other tasks. This means that in order to operate Unify, you need a live internet connection. This does not, however, preclude the use of a local environment to develop for Unify. Just set up your local environment, purchase a Unify license for the eventual domain that you will be using Unify on, and install the files in the proper folder. Then alias your localhost to the URL of the destination domain. Done.

Files Permissions & Auto-Update

As of version 1.2.0, Unify can accept and save your FTP Info in the dashboard. This will fix any permissions errors you may be receiving when publishing. FTP info is also required for a nice new feature of Unify: Auto-Update.

With auto-update, you and your clients don’t need to worry about working too hard keeping up with the latest Unify fixes and features. Just go to the dashboard, check to see if you are running the latest version in the update box in the top right corner, and if there is a newer version, click “Update Now!”. To run the Unify Auto-Update, you will need the PHP cURL library on your server as well.

Video & Embedded Content

As of version 1.2.4, the Unify video embed wizard only works with OBJECT and EMBED tags, but we will be adding support for HTML5 video very soon.

To make any video (or EMBED or OBJECT) editable, just add the “unify” class to it. This will allow you or your client to edit the video specs in the video embed wizard. Options include changing the size of the element, or replacing the embed code.

File Uploads & Browsing

Users can easily upload, browse, and link to images or any type of file (besides PHP, HTML, CSS, or JS). Unify will even auto-discover folders to upload to, or you can set specific folders for images and files in the Unify dashboard. Once a file is uploaded, click the search icon next to any link or image source field to browse the available files and create a link.

Working with Lightboxes & Picture Galleries

All lightbox scripts work differently, so we cannot claim support for every one that is out there, but we have taken strides to make Unify flexible enough to cover most of what you would need. Every link prompt will include a “class” and a “rel” attribute, which should give you what you need to create a link that is compatible with most lightboxes.

To adapt a common picture gallery to be editable with Unify, try the following steps when installing Unify:

1. Add the “unifyRepeatArea” class to the gallery container.
2. Add the “unifyRepeat” class to each image (not the link).

Now, you or your client will be able to drag a copy of any thumbnail, and then edit it. In the Unify image wizard, you can create a new lightbox image by following these steps:

1. Through the upload interface in the top-right of the image wizard, upload the large image first by selecting the appropriate folder, and then browsing to the correct image on your hard drive.
2. Go through the same steps to upload the thumbnail. You should now see the thumbnail image in the top-left area of the image wizard.
3. In the fields below the thumbnail image, add the appropriate class, link and rel that your lightbox requires.
4. Hit “done”, and if everything looks correct, hit “Publish”.

Working with Tables

As of version 1.2.3, Unify should work well with most table configurations. Here’s how:

• If you want your table to retain a static number of entries (or rows), just add the “unify” class to the TABLE tag.
• If you or your client will need to create new entries, you can add the “unifyRepeatArea” class to the TABLE tag, and then add the “unifyRepeat” class to your TRs  (or TDs depending on what content you want to be able to replicate… although I would recommend only repeating the TRs).
• In both cases: To prevent any editing anomalies, please make sure to set up your table properly in your CSS. For example, a TABLE should be “display: table;”, a TBODY should be “display: table-row-group;”, a TR is “display: table-row;” and a TD should be “display: table-cell;”. Also, try adding “table-layout: fixed;” to your TABLE for more efficient rendering. IE does not recognize these, but it manages just fine on its own.

Cufon & sIFR

Unify automatically disables Cufon and sIFR in the front-end when loading a page in Unify. This means that your text will look different, but after publishing and logging out, your content will look correct on the live site. This eliminates any incompatibilities between these scripts and Unify.

Tabs & Sliding/Animating/Hidden Content

If it is on the page when the page loads, Unify can edit it. With each mouse click, Unify evaluates which editable elements are visible and hides/displays the edit icons accordingly. It will also adjust the position of the icon, but this is not fool proof.

To make sure that your icons are displayed and in the correct place in Unify after a Javascript change to the page, you only need to add one line to the end of your Javascript function:

    if (top.window.createIcons) top.window.createIcons();

This will fire the Unify “createIcons” function and move the edit icons to the right place.

Working with Dynamic Content

Unify works with what is on the page when it is loaded. If you are bringing in dynamic content, Unify will not be able to edit it properly, so make sure that any content like a twitter feed, del.icio.us feed, or anything else that is brought in through Javascript is not included in a “unify” editable area.

Moving Forward…

We have many great things planned for Unify in the near future, so keep checking in here on our blog, or follow us on twitter: http://twitter.com/unitinteractive . Also, if you have any questions or suggestions, please tell us about it here, or in our forums.