Results tagged “jquery”

The coolest thing I know about right now is jQTouch, a jQuery framework for implementing mobile web apps. I first saw this at SXSW when its creator showed it off to a crowd that had just finished watching a demo of how to build iPhone apps in Objective-C. Which each step of his demo, the crowd in the room literally cheered as they saw how jaw-droppingly simple building slick iPhone apps just became.

Here is a recently released demo of some of the amazing things the relatively young jQTouch is capable of, which in this case is a fully HTML, CSS and Javascript powered version of the iPhone's iCal application.

So what makes this so smooth and seamless? Mainly that CSS3 is hardware accelerated on the iPhone making CSS and Javascript powered transitions and animations super smooth - just as smooth as any native application in fact.

So while you perhaps marvel at how amazing jQTouch is, let me bring this back to something that makes this framework so relevant in light of the recent hullabaloo associated with Apple's changes to its SDK Agreement which essentially forbids the use of flash enabled apps on the iPhone and iPad.

Flash is a Shim

I would prefer to say "Flash is a hack," but I think Flash is too elegant to risk maligning it with such a word. Make no mistake though, as ubiquitous and well implemented that Flash is, it is just a shim, which evolved to address a major short coming on the web, mainly that the underlying specifications and browser creators could not adopt or drive adoption fast enough the technology to make animation and richer application development possible.

Amazingly, Apple is poised to unwedge this shim that we have all become so unwittingly dependent upon. By refusing to put Flash on the iPhone and iPad they are going to force the market and technology developers who want to play in that market to learn and embrace the bleeding edge in web standards. They are going to do in just a few short years, what even the largest and most well intentioned companies like Google, in all of their open-sourcey-goodness, could never do: force market adoption of the technologies that will render Flash obsolete.

And thank god. The web has too many crutches like Flash, which solve a problem just well enough that they stifle developer communities from addressing problems at a lower level.

So while some express their ire at Apple for not supporting Flash, like my wife who just wants to play a damn Flash-powered movie on Hulu on her iPad, I applaud Apple for the courage it took to make what it must have known would be the unpopular decision it did. Because in just a few short years, when the gap Flash helped bridge is finally closed by well implemented and broadly adopted web standards, and the world of application development is expanded to include not just Objective-C and Flash programmers, but the entire world of HTML/CSS and Javascript programmers, hopefully a number of us will look back at this moment and say, "I can't believe I cared so much about this."

In a project I have been working on I have had the need to revisit an old plugin of mine: the Contact Form plugin. When designing the inquiry management screen the plugin I thought it would be a nice user experience to mimic Outlook as much as possible thinking that a familiar interface for a similar activity would be ideal. This is what I came up with:

The theory was a good one, but in practice the constraints of the Movable Type user interface often made the interactions a little awkward. A UI model like the split pane browser in this context really needs a lot more screen real estate to work effectively, otherwise the user spends too much time scrolling for no logical reason.

So in returning to this plugin, I wanted to improve upon this user experience. So the first thing I did was start to look at how others are managing a similar user experience: comment management. Let's take a look:

Drupal

Two words: God Awful. Next!

WordPress

True to form WordPress delivers a highly functional interface. All the actions a user is likely to want to perform are clearly visible. Although one criticism I have heard (although poorly illustrated by the above screenshot), is that the UI in displaying the full comment often overwhelms the visual experience. This is a problem shared by Movable Type as well.

The fact that WordPress also let's you expand the table to the full width of the page also helpful in that it removes distractions from the UI allowing users to more easily focus on the task they are engaged in.

On the downside, the tabular layout seems to be a UI constraint that is not easily dealth with. It forces whitespace into several columns which is not needed and results in a UI that lacks polish.

Movable Type

Movable Type is not bad, but it is far from good. Mainly the links users most want to click on, like "Reply" and "Edit" are hard to see, not to mention the fact that a single click "Report as Spam" and "Delete" actions aren't offered at all. Plus, the content on the page feels really dense - not an effective use of whitespace at all.

Also the lack of userpics forces users to scan more intensely for who comments are from.

TypePad

TypePad by far has the most polished UI for managing comments visually. It is a very effective use of space, especially considering that the comment listing table is a fixed width.

I like the fact that the table has no table header -- because let's be honest, it is simply not needed. The data makes the subject of each column obvious - labels are simply unnecessary. Second, I like the fact that actions have been differentiated from the comment's status and that the current status of a comment is very clear without having to spell it out "Published" or "Reported as Spam," etc.

Although it suffers from the same problem as WordPress in that a single long comment can easily dominate the page. Also, the help text is nice, but as you become more familiar with the UI is becomes unnecessary and distracting. It would be nice to be able to dismiss it all together and let the UI claim that space for the table.

Final Observation

One final observation: I was shocked to see the use of AJAX almost entirely absent from every platform. This is 2010 folks. Can we at least handle deleting comments and reporting them as spam via a process that is not disruptive to my primary activity: processing and triaging comments?

Contact Form Inquires

Considering all of the user experiences, I endeavored to take what I liked about each and fix what I thought was broken to come up with a user interface for managing comment form inquiries, which could easily be applied to comments. This is what I came up with.

And because screenshots don't illustrate these things, here are some details:

• No one comment can dominate the page, but any long comment can easily be expanded or collapsed if you want.

• Replying to comments, deleting inquires and reporting them as spam are handled via AJAX so that users never have to wait for the page to reload to go on to processing the next comment.

• I got rid of the iframe-powered dialog of Movable Type because it simply took too long to load. I converted it to a pure-jQuery dialog so that it appears almost instantaneously.

• I added the polish of animation so that elements fade and ease quickly into or out of view. This helps the page transition more easily from one state to another without the user feel the jarring effect of the page shifting up and down as elements disappear or appear.

• I am tracking the state of inquiries to know whether you have read them or not, whether they have been replied to or not, etc. That way you can at a glance see what is new and what requires action.

• I got rid of the table column headers.

• All actions one might want to take are clearly visible and accessible via a single click.

Technically this screen is for processing contact form inquiries, but it would be trivial to apply to main comment listing so it is only a matter of time.

In the meantime, I would be curious to hear feedback from Movable Type users, and the thoughts from others about what makes a good comment management experience. Is there a tool you use and love that I have not taken a look at, but should?

I have been doing a lot of work in jQuery as of late and stumbled across the popular jQuery plugin called "Thickbox" which works similarly to Lightbox, but is more fully featured.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

There were a couple of problems with the plugin though when I started using it. For one, the plugin has not been updated in a long time and was not compatible with the latest version of jQuery: 1.3.1. It also used a rather non-standard way of configuration and was completely non-extensible. In fact, it required users to edit CSS and Javascript files in order to point the library at the right images to use. That's no good at all because it makes it possible for a simple upgrade to break a site, granted in a minor way, but still.

No doubt the original author of the plugin has a million other things on his plate, so I thought I would chip in, upgrade the plugin, and contribute them back to the author and community, and if necessary take over maintenance of the plugin.

Download

• Thickbox 1.3-byrne
• Source

Documentation

Installation Instructions

1. Upload the thickbox files to your web server.

2. In your web page using thickbox, import the javascript like so:

   <script type="text/javascript" src="jquery.thickbox-byrne.js"></script>
   

3. In your web page, import the CSS like so:

   <link rel="stylesheet" href="thickbox.css" type="text/css" />
   

4. Read the rest of this documentation and initialize thickbox according to your needs.

Options/Settings

The following options can be used when initializing Thickbox.

• macFFBgHack - default: '../images/macFFBgHack.png'. A path to the image "macFFBgHack.png" on your web server.

• loadingImage - default: '../images/thickbox-loading.gif'. A path to the image "thickbox-loading.gif" on your web server.

• modal - boolean (true|false), default: false. Determines whether or not the dialog that appears is modal or not.

• iframe - boolean (true|false), default: false. Determines whether or not the dialog will be iframed content.

• inlineId - string, default: ''. Sets the DOM id that contains the content that will be displayed in the thickbox.

• width - default: 600. Sets the size (width obviously) of the thickbox.

• height - default: 400. Sets the size (height obviously) of the thickbox.

Usage

    $('a.thickbox').thickbox({
            macFFBgHack: 'images/macFFBgHack.png',
            loadingImage: 'images/thickbox-loading.gif'
    });

Demo

Click me

Changes between 1.3 and 1.3-byrne

The version described here is '1.3-byrne' which is a fork of the original Thickbox plugin versioned 1.3. Here is a list of the changes I have made in my fork:

• thickboxes can be instantiated on any element ID now. It is no longer hard-coded to $("a.thickbox").
• thickboxes are now configured using a more standard settings/options array.
• The plugin itself now utilizes more a more up-to-date coding standard for jQuery plugins.
• The plugin is now compatible with jQuery 1.3 and greater.

In yet another example of just how flexible Movable Type can be, I have assembled this simple tutorial which can help you make more compelling and interesting pop-ups for the images you insert into your blog posts. This simple recipe calls for the following ingredients:

• Movable Type 4.x
• The Assetylene Plugin installed - a plugin that let's you customize the HTML used when inserting an asset into a post
• jQuery installed
• The jQuery Lightbox Plugin installed

Instructions:

1. Install jQuery and the Lightbox jQuery Plugin into the HTML head of your blog. When you are finished, you should have HTML very similar to the following in between the <head> and </head> tags of every page of your web site.

   <script type="text/javascript" src="/js/jquery.min.js"></script>
   <script type="text/javascript" src="/js/jquery.lightbox-0.5.min.js"></script>
   <link rel="stylesheet" href="/css/jquery.lightbox-0.5.css" type="text/css" />
   

2. Insert the following Javascript code into the HTML head of your web site as well. This is the magic that will convert any inserted asset into a lightbox image:

   <script type="text/javascript">
   $(document).ready(function() { $('a[@rel*=lightbox]').lightBox(); });
   </script>
   

3. Create a template module called "Asset Insertion" per the instructions that come with Assetylene. Insert the following contents into that module:

   <mt:Asset id="$asset_id">
   <mt:if tag="AssetType" eq="image">
   <MTSetVarBlock name="width" trim="1"><MTAssetProperty property="image_width"></MTSetVarBlock>
   <mt:if name="width" gt="640">
   <mt:setvarblock name="href"><mt:AssetThumbnailURL width="640"></mt:setvarblock>
   </mt:if>
   <mt:unless name="href"><mt:setvarblock name="href"><mt:var name="a_href"></mt:setvarblock></mt:unless>
   <mt:var name="form_tag"><div style="text-align: <mt:var name="align">"><a rel="lightbox" href="<mt:var name="href">" title="<mt:var name="label" escape="html">"><mt:var name="img_tag"></a></div><mt:if name="enclose"></form></mt:if>
   <mt:else>
   <mt:var name="upload_html">
   </mt:if>
   </mt:Asset>
   

One of the things that nice about the sample code above is that it ensure that the image you link to is of a reasonable size, regardless of how large the original image is. In the event for example that you upload a 3MB 4000x6000 pixel image, the photo that will appear in the lightbox will be at most 640 pixels wide.

And that's it. Demo time.

Demo

I am the architect and author of virtually all of Movable Type's documentation online, and I continue to provide services to Six Apart in order to expand their efficacy. In addition, I have provided training services to some of Six Apart's largest customers and can instruct individuals and teams on a variety of topics. Training services can be provided on-site or off according to each client's needs and schedule.

Courses

User Training - This 1 day course will provide authors, editors and administrators with the basics of using and administering their Movable Type CMS. 
Subjects include: site administration, content creation, pages, user administration and permissioning, the basics of site modification and customization, an overview of 3rd party plugins, and a comprehensive review of the entire application and what it can and cannot do.

Designer Training - This 1 or 2 day course provides designers with the tools and knowledge they need to become adept at designing and customizing web sites powered by Movable Type. Students finishing this course will have a strong foundation of knowledge in Movable Type's templating language, template module caching, template sets and theme creation, commonly used third party plugins, and site/publishing optimization.

Developer Training - This 1 or 2 day course teaches any developer how to build plugins to extend the core Movable Type application. Subjects include the Movable Type Registry, working with Movable Type objects, building custom data types, callbacks and events, working with jQuery and Movable Type's Javascript, creating new screens in the Movable Type application, and much, much more.

Operations Training - This 1 day course teaches system administrators on how to host and operate Movable Type. Students leaving the course will have strong understanding of how to optimize Movable Type, the Movable Type Publish Queue, and how to build out Movable Type clusters and network architectures that scale.

Movable Type and Perl for PHP Developers - this 1 day course is designed for PHP developers wishing to learn the basics of Perl, but most importantly how to apply their knowledge of PHP to developing web sites in Movable Type.

Learning Perl - this 5 day course can take virtually any person with a very basic understanding of scripting/programming and teach them the basics of the Perl programming language. This course is ideal for companies wishing to teach engineering, QA and operations teams the basics of the language and to prepare them for other courses designed to teach them the basic of developing custom applications and plugins for Movable Type.

Custom Package - Clients are also free to build a custom curriculum based upon their specific needs.

Full course outlines available upon request.

Javascript

Byrne is an experienced Javascript developer and has developed large scale applications that depend entirely upon either YUI or jQuery. See also:

• Tag Control for YUI - A simple widget to make the addition and removal of tags simple and intuitive.


• Filter Control for YUI - A widget, or UI control that automates the creation of a progressive filtering mechanism.

PHP

In addition to being an experienced Perl developer, Byrne is also incredibly versed in PHP. He has developed numerous large scale web applications build upon PHP as well as numerous open source libraries in use by sites across the Internet. See also:

• Test Run - A large scale test case management solution written entirely in PHP serving thousands of customers.


• MyPHPGoogleCheckout - An open source library for integrating with Google Checkout.


• PHP Paginator - A simple open source library that makes generating links to pages within a result set almost too easy.


Perl

Byrne is an experienced Perl programmer having served as the lead developer of the popular SOAP::Lite toolkit, and continuing to be one of the Movable Type's leading plugin developers and contributors.

Since leaving Six Apart I have been having fun working on a number of projects I just never could find the time for while working there. Of course, I am even more privileged to be working with iThemes who have been subsidizing much of the work I am doing and who also share a philosophy of giving back to the Movable Type Community in the form of numerous open source plugins.

The most recent plugin I am working on utilizes jQuery a great deal, a javascript framework I have been using more and more frequently because of its intuitiveness, terseness and huge breadth of samples to draw from. But simply dropping it into the Movable Type application leaves many of the UI components its spawns feel bolted on as opposed to a seamlessly integrated component.

So I took a little time to develop a simple jQuery Dialog Theme that makes the dialogs jQuery spawns feel more like the traditional Movable Type dialog. The result is a dialog that looks and feels no different than what users are accustomed to, but that is faster, snappier and more feature rich, allowing users to resize and move the dialog around on the screen. Take a look:

To use the skin you need to include the skin's css (downloadable below) on your page. Then when you spawn the dialog you need to set the dialog's class to "mt" like so:

$(document).ready(function() {
  $("#replyDialog").dialog({
    modal: true,
    width: 660,
    height: 495,
    dialogClass: "mt",
    autoOpen: false,
    overlay: { opacity: 0.5, background: "black" }
  });
});

Download the skin from the link below, and everyone thank iThemes for their continued support of Movable Type and their gracious contributions to the Movable Type Open Source community!

• mt.dialog.css