Archive for March 29, 2011

Drupal Learning Journal 21. Ubercart 2

I spent more time working with Ubercart, a drupal ecommerce tool and couldn’t help learning a few things. :-)

  1. I wanted to create custom invoices as part of the ordering, order management process. I got that far that I made a modified version of  the /sites/all/modules/ubercart/uc_order/uc_order-customer.tpl.php file, but it didn’t want to show up in the GUI as an invoice template I could use. So I posted my request for help at the right forum and in a few hours I got my answer. Turns out there is a little module designed for this specific purpose, called UberInvoice. It works and yet again I am grateful for the spirit of open source development.
  2. There is not much I can document about it, but I am happy that I now understand conditional actions in Drupal. E.g. I managed to set up the sales tax handling: 9.25% for people with California billing address. (Yes, the company I am  making the site for is based in CA.) I also configured five different shipping options and prices, also using conditional actions. Pretty nifty tool.
  3. I also managed to install and make work a module that allows the store/site to have both specials (discounts by % of $ off on certain items) and coupons (using unique code customer gets $ or % off). It was another module, Ubercart Discounts (Alternative) that allowed me to do it. I made the mistake of thinking that I can just using it, but it didn’t work right away. Once I read and followed the “readme.txt” file’s instructions all was well. I still have some learning to do about how to set up all the possible specials and coupons, but the option I was interested in ($1-2 off from certain items) is working now.

Drupal Learning Journal 20. Ubercart +

I am in a very active stage of developing a drupal ecommerce site with Ubercart. I suspect the next few “Drupal Learning Journal” messages will relate to that. Here are a few tidbits from the rounds I did today.

  1. I finally manged to configure a WYSIWYG option for textboxes from scratch. (I.e. exactly those word style formatting buttons show up at exactly those fields, that I want) The site I am building is in Drupal 6, and I suspect I will need to relearn it for Drupal 7. Fortunately I am going to my first DrupalCamp this weekend and plan to attend a session devoted to this issue.
  2. Installed and configured SexyBookmarks, which not just looks cooler than AddThing, but also is more standard compliant. (They are both tools to enable visitors sharing the URL of the visited page at various Social networking sites.)
  3. Played with the image setting of the product catalog. Now the thumbnails, product images and full size product images work as they should. Lightbox works too, meaning that if you click on an image it will pull up the full size of the image in another layer of the same window.
  4. My best accomplishment of the day was setting up and management page of the products, where administrators can search the products by a number of criteria and the list of products is showing half 6-7 columns of related information. The best part is that then you can select any number of products and do some actions with them in batch, e.g unpublishing them (out of stock), re-publish them (back in stock), adjust price and a few other tricks.

Wireframe and storyboard tools

I’ve been playing with the idea of getting into the field of “Information Architecture (IA)” for over a decade, ever since I first got my hands on “Information Architects,” by Richard Saul Wurman and Edward R. Tufte’s “Envisioning Information,” both rather beautiful books. However between 1997 and 2005 I haven’t done much with the idea, besides keeping an eye on how the visualization tools are developing.

Later, when I was working on my MLIS between 2006 and 2008, the field came up again as a possible direction for me to take. For a number of reasons I had to get my degree fast, so I didn’t have enough time to take the summer week-long intensive conference/workshop ran by my college (UW) that sometimes focused no IA. I missed an opportunity there, but for one of my classes I created a simple little website titled “Information Architecture Resource Guide.” As I haven’t updated it since its creation in 2007, it is woefully out of date, so I do not recommend the site as modern resource. Nevertheless it has a list of books, sites, blog that can be useful if you doin’t mind that the missing recent additions.

Towards the end of my Masters program I spent a little bit more time in exploring what Information Architects do. I’ve been reading Jacob Nielsen’s Alertbox at least since 1997, but now I subscribed to the Information Architecture Institute‘s email list too. I was on it only for half a year as the discussions were bit boring. Half of them were about terminology and pinning down exact definition for terms that the people obviously had different understandings of. The other half was talking about practices that were unintelligible to me as a non-practitioner of the art. I know it was my fault that I didn’t devote enough time to learn the basics. But it bothered me that they talked a lot about wireframing and storyboarding and not once did I hear mentioning what tools they used for them. I am a hands-on kind of person and learn best by doing. But I didn’t put the extra energy in to finding out what tools should I use.

Now however I will be working on a redesign of a client’s website. After the initial discussion with the client, where I learned why the redesign is needed and what the major sections of the revamped site would be, I offered doing wireframing and storyboarding. So I finally crated myself an opportunity to learn these techniques by doing. Just in case you don’t know what I am talking about here are some basic definitions:

  • A wireframe, also known as page architecture, page schematic, or blueprint, is a highly simplified sketch of the important information in a page. The goal is to reflect the relative importance of different elements, including the content and the navigation.
  • A website storyboard is a visual representation of your website’s structure. It maps out all the components of your site and how they inter-relate. Creating a website storyboard can help you plan and organise your website and even plan the internal linking structure between pages. Using a storyboard you can plot a visitors path through your website to find your most important pieces of content.

After all of this introduction, here is what you probably came for this page. I did a little search for free and/or inexpensive tools. Here are the results of my research. I found three lists of wireframing tools from 2010:

The last one is not just the most comprehensive, but also includes a handy table at the end with the prices and scores. Two of the free tools got “excellent” score there by the editors: Pencil and Lovely Charts. Both shows up on the other two lists too. So does the third recommended free tool: Mockingbird.

Next, I started to look for similar lists about storyboarding tools. I found only list, which seemed comprehensive and annotated, although only barely: Alejandro Cuervo’s blog entry from January at queleimporta.com has basic notes no each tool but it’s a good start. The other useful resource is the discussion about “What are the best online tools for storyboarding a website?” on Quora. Both sources mention Pencil and Mockingbird as good, free, storyboarding tools. I consider it a simple blessing if the same tool can be used both for wireframing and for storyboarding. So the circle of tools to check out in depth has been  narrowed to these two.

Mockingbird’s main advantage over Pencil is that it allows online collaboration; i.e. it is online thus platform independent and it allows more than one person logging on to the same wireframe and edit it. Their free plan allows only two users doing only 1 project with up to 10 pages. (They also have 4 levels of other plans ranging from $9 to $85/month allowing more users/plans/pages.)

Pencil can be used as a Firefox add-on or as a standalone application (for Linux and Windows). Thus it is platform independent to an extent. But it is not an online tool, you are saving your wireframes as files on your computer. There are no limitations on the number of pages or projects, but online collaboration can only be approximated by sending files back and forth. Nevertheless I tested this first, because I couldn’t sign up for Mockingbird, see below. Not a good first impression:

 

Drupal Learning Journal 19. A Book of Videos

There is an yet-unsolved bug in the Media module (for Drupal 7) that prevented us from making the video gallery of a site work that we ported from one host to another. The issue has been documented and discussed here, here, here and here. We couldn’t wait any longer so I worked out a relatively simple substitute. There were only a few features that I had to keep in mind when thinking of a different solution:

  1. Paging through one video to the next within a category was a must.
  2. Providing a title, tags and description of each video was also required.
  3. On the gallery page display I could use thumbnail images only, because embedding more than one YouTube video on a webpage might cause problems.
  4. The site doesn’t have a lot of videos: 18+4 in two categories, so at this point the solution didn’t have to be hugely scalable.

 

One of the main features of Drupal’s “books” content type is the ability of paging through content, so it was obvious that I had to create my first “book” for this video gallery to satisfy criteria #1. I learned two lessons in “writing” my first book:

  1. Any type of content can be made a page or top page/cover of a book, but you have to put it on the list of “Content types allowed in book outlines” at “/admin/content/book/settings”.
  2. Only published content can be made part of a book. My original plan for this video gallery was to set it all up of unpublished pages, get the client (who has admin rights on the site) to view and approve it and then build out the whole gallery. But I couldn’t do the unpublished beta as part of a “book” so I created the gallery at temporary/secret URL for the client’s approval. Once that happened I finished building the gallery (, unpublished the old one) and specified its URL to be the same as  the old, non-functioning gallery’s URL.

To make sure that criteria #2 is ideally handled I made a custom content type for the individual videos, imaginatively named “Videos”, with only the few fields needed: title, tag, description and I used the default” body” field for the HTML code of the YouTube/Vimeo embedding code. I had to pay to attention to two things with the code:

  1. Getting the correct code: The default code you get on YouTube when you click on the “embed” button under a video has changed recently to an “iframe” solution from the older “object/embed” method. The problem with the new system is that it is possible in some browsers to disable “iframes”, so those visitors who do that would not see the videos on our site. Fortunately the old method is still available, but you have to check the “Use old embed code” checkbox to get it. I also made sure that the other checkboxes are unchecked. (I just read the description of what the “Enable privacy-enhanced mode” checkbox does and in the future I will check that.)
  2. Posting the correct code: I made sure that the text format for the field on our site where I am pasting the code accepts the “object” tag. Otherwise after posting the code Drupal would simply strip it out as it does with every tag that is not explicitly listed as an acceptable one. The default text formats (Plain text and Safe HTML) do not allow the “object” tag as there is a possibility of malicious misuse, so I selected a different text format.

I could have used “Views” to make the main/top gallery page, but in this case it was faster and simpler to do a simple HTML table and paste it in “body” field of the book’s top page. Voila, the gallery is up and running. The only aspect I didn’t like about my solution that below the table of thumbnails is the list of book pages, therefore there is duplication of content. I could have created an appropriately modified tpl.php file, but that would take more time than avoiding this minor visual redundancy is worth. If there is another way to disable the listing of page son the top book page, please somebody let me know. I didn’t find it.

Drupal Learning Journal 18. Field Permissions, Password Strength, Editable Grid

I have been slowly working on several sites and in the process discovered some useful modules.

Field Permissionsallows site administrators to set field-level permissions.

  • Why would you need such a thing? The idea is that certain fields could be viewed by certain roles only. E.g. I decided to add the distributors of the films I am listing at my Jewish Film Festivals site. However I am hoping to come up with a business model where this site can generate some revenue. So one of the benefits for paying members would be the access to the distributors. So I set it that the distributor info only shows up for people with the right role.
  • Yes, I am aware that what I am gathering is freely available on the web, but I am putting a lot of time pulling this scattered information into one central location.
  • The module has only a dev version for Drupal 7, but is working fine, i.e. there is no bug posted in its issue queue. The Drupal 6 version is solid.

Password Strength is a module that administrators can use to “restrict passwords to only be, for example, “high” strength.

  • I thought it was too inconvenient for potential users to of one of the site I was working on being forced to create a password that had to have all of these:
    - at least 6 characters
    - both upper and lowercase letters
    - numbers
    - punctuation
  • With the help of the Password Strength module I could lower the minimum characters for password to four and set the number of rules the passwords have to comply with lower.
  • The module exists only for Drupal 5 and 6.

An editable grid–where content of nodes and their fields are displayed in a table format with the content of each cell editable right there–would often come handy. I’ve seen something like that in Drupal so I thought it is possible with off-the-shelf modules. My first implementation is halfway successful. With the help of the Slickgrid module I have a table where if I click on a cell I get a pop-up layer where I can edit the content. Next time I will want something without the pop-up layer, so I could edit many cells at the same time. Slickgrid works fine (for Drupal 6), but was not what I was looking for. On the plus side it required the Beautytips module, which is a great way to add balloons to any content any where. That’s a good discovery, helpful for explanation or help features.