Visual28

How to enable shadowbox features in the mangoblog admin

Mon, 01 Jun 2009 04:46:48 GMT

Now that Witheringtree created a shadowbox plugin for mango blog, I wanted to show you how you can make it easy to use within the mango blog admin. The process is not too complicated, but does take a little bit of explanation.

Let me start off by saying, that I have not yet used Witheringtree's shadowbox plugin, though I suspect it will work just fine. It's mostly just including the necessary Javascript files so this should work regardless of wether your using the plugin or not.

To start, you need to modify the /admin/editorSettings.cfm file to enable advanced linking. Honestly, I think this should be enabled by default for new mango blog installs, and maybe it will someday. For now, we have to make some changes manually.

Step 1. Go to line 16; where it says "plugins" and lets add "advlink" to the list of available plugins. This will turn on some extra features in the link dialogue box that we will use later. While your there, you may also wish to add "safari" to the list if you have users that use use the Apple Safari web browser. It only gets called if the browser being used is safari so FF and IE will not load the plugin. tinyMCE comes with some other useful plugins so check out the plugin reference page for a full list of plugins. Make a backup of your configuration settings and keep it safe. In the past, I have had some updates to mango blog overwrite these settings and change it back to the defaults.

Step 2. Next we need to drill down into the admin files and find the tinyMCE advanced link file. You can find it located here buried deep into the assets folder: /admin/assets/editors/tinymce_3/jscripts/tiny_mce/plugins/advlink/link.htm

Scroll on down to around line 198 or search for "rellabel" this is the drop down menu where you can select the necessary relative linking option. The first option is lightbox which last I recall reading, shadowbox can use. For our purpose lets add two new lines just before the lightbox option.

<option value="shadowbox">Shadowbox</option> <option value="shadowbox[group]">Shadowbox Group</option>

This will give you the option to have both the single shadowbox display and the grouped output that automatically inserts the previous and next buttons to your pop up display.

Step 3. To put all this to use, you only need to link your image or other media as normal, but before you exit the link dialog box, you need to go to the "Advanced" section and change the "Relationship page to target" to the appropriate Shadowbox item. You can also add a title in the "General" tab. The title will appear with your image when it pops up.

CSS Naked Day

Fri, 10 Apr 2009 23:56:16 GMT

A few years ago, Dustin Diaz started a Web Standards movement aimed to promote web standards around the world. He dubbed it CSS Naked Day! A day when websites around the world strip out their css and show off their for a day.

Last year I hard coded a toggle into my website and totally forgot about it until I just happened to go to my website and find the css was gone. My first reaction was to crap a blue twinkie and wonder what had happened. Then I saw the alert at the top of the page telling me it was CSS Naked Day. Imagine my relief.

This year I decided to create a plugin for Mango Blog that automatically removed the css and added the notification message to tell users that it was css naked day.

Plugin version:: 1.0
Last Updated:: 2009-04-10
Requires:: Mango Blog 1.3+
Auto-install URL:: http://www.visual28.com/assets/content/mango/cssNakedDay.zip

What If I Don't Have Mango Blog

Since not everyone uses mango but may still want to participate in CSS Naked Day with their coldfusion powered blog I thought I would throw in some samples of my code from before the creation of the Mango Plugin. It's really simple but for a CF newbie it might be usefull.

Place this in your <head> and put your css files into it.

<cfif day(now()) neq 9 OR month(now()) neq 4></cfif>

Put this code just inside the <body> tag.

<cfif day(now()) eq 9 and month(now()) eq 4>
<div id="naked" style="background:#ffc;padding:5px;color:#900;">
<h3>What happened to the design?</h3>
<p>To know more about why styles are disabled on this website visit the <a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">Annual CSS Naked Day</a> website for more information.</p></div>
</cfif>

Configuring CF8 to use Google Apps

Wed, 18 Mar 2009 19:00:07 GMT

The biggest issue I have with running my own server is dealing with spam blockers, email servers, DNS servers, etc. For some of you this is easy, and a no brainer. I personally run from it like a screaming banshee. I use google hosted services for all my email needs. They make it easy, rarely ever have downtime, and the spam filtering is second to none!

Google works fine for sending email from my desktop mail client or through the web, but sending mail via scripts programatically has always been a pain in the butt in my experience. That is until today.

I started getting a lot of undelivered emails and decided it was time to look for another option. After much research, I found an article on TACFUG: ColdFusion 8 likes Google Apps. The article is incomplete and only shows some code for step 2. Not very helpful. I assume it had photos but they may have been deleted at some point. It lead me to my own testing and discovery so I guess it did help in some way.

Here is what I found. Google can accept email from your CF server but it must support SSL and TSL Connections. Coldfusion Server versions previous to CF8 did not support this. So If your using an older version of CF there is a workaround using Doug Boude's sTunnel method. Since I discovered that CF8 supports SSL and TSL connections, I will talk about that here.

Configure ColdFusion Admin

This is actually super simple and I wish I had discovered it before. It would have saved me so much heartache and pain in the past. Here is a screen shoot for reference.

Go to the Server Settings for "Mail" and set the Mail Server value to smtp.gmail.com
Set the Username field to a valid username in your google account.
Add the obvious password for this account
Lastly check the two boxes to enable SSL and TSL connections and submit.

Thats really all there is to it. Now when your server sends an email it will pass it off to Google for delivery and you will see the email appear in your sent mail folder in google webmail. Easy as pie!

Apple's Obsession With Removing Buttons

Wed, 11 Mar 2009 19:02:00 GMT

It seams that as of late, Apple has been obsessed with removing buttons from their devices. They are acting like the crazy parents obsessed with removing all sharp corners from their house when they have a child. Was Steve Jobs attacked and injured as a child from a rogue button?

In the last two years Apple has been grooming consumers for a buttonless revolution. The iPhone, though having buttons itself focuses more or non tactile usability. Earlier this year we saw the laptops go buttonless. Now the iPod Shuffle.

I personally did not care much for the buttonless laptop. I felt the system did not work as good and needed more time being tested for usability. Apple has always been on the forefront of design and usability and being able to put them into the same package has always been a strong point for them. This time around I am not so sure. I know I would feel more comfortable recommending an last years model to someone purchasing a laptop for the first time.

The 3rd generation iPod announced today really makes me wonder if it's really necessary to reinvent the wheel? Unless of course your making a better wheel. Maybe I am being quick to conclusions as I have not actually seen the new iPod Shuffle but let me point out a few things that I noticed right away. A few things that have me concerned about this product.

Why on earth would you take the buttons off of the device and put them on to the headphone cord? I don't know about you, but I personally think the earbuds are mediocre at best. The first thing I did when I got my iPod was buy some real headphones. Putting the controls on the cord just means that if you buy a shuffle you have to stick to the earbuds supplied until third party manufactures catch up and ship an alternate product. No doubt you will have to pay a premium for them to boot. Do we really need another iPhone headphone debacle? Didn't we learn something from this or do we need to do it all over again.

Twitter Plugin Updated for Mango 1.3 Compatibility

Wed, 04 Mar 2009 19:14:48 GMT

Now that Mango Blog 1.3 is out a few plugins may have to be updated to the new 1.3 version to include auto install. Thanks to the help of Seb Duggan the mango blog twitter plugin has been updated for compatibility with the new auto Install system. Get the twitter plugins below:

Mango Blog 1.3 Compatible Version

http://www.visual28.com/assets/content/mango/twitter-1.3.zip

Mango Blog 1.2 Compatible Version

http://www.visual28.com/articles/twitter-plugin

Auto Install Challenge

Wed, 04 Mar 2009 18:28:12 GMT

A few days ago we saw a release of version 1.3.1 for Mango Blog. What is particularly awesome about this release is that it takes it up a notch adding features not found in other major blogging software. In particular mango blog now has a new system for auto installing plugins. No longer will you need to FTP a plugin to your site. Simply copy and paste the url for the plugin into your admin and viola! The plugin is copied to your server, decompressed, installed, and activated all in one shot! That is slick!

Although I think this feature is totally slick, I think it can be made even easier yet. Here are my thoughts. I hope that one you fine developers see this as a challenge and decides to take it on. Or you can tell me that I am crazy and to take a long walk off a short pier. Either way I want action! Then I digress. Okay, so here are my thoughts. Since plugins are hosted by the individual developers and not by mangoblog.org there needs to be a way to simplify the auto install experience to another degree. One thought would be to develop something like a firefox extension that allows you to harness the power of the Mango Blog API to add the link directly to your admin area. The next idea would require the developer to use javascript in the linkage to the plugin archive to automatically send the plugin url your mango admin.

My last idea and probably the most feasible one, would involve setting up a system that would allow developers to ping the mangoblog.org site when a plugin is released or updated. This allows mango blog to act as a central location for all the plugins available for mango blog. This central repository then acts as a hub for all the mango plugins moving forward. Similar to the way the overview page displays a notice for a new version of mango blog. The system could then display a message for those plugins that have updates available and offer the option to auto install the new plugin. Taking this a step further, users could then be given an option in the plugins admin to view what plugins are available for mango blog and install those that they need.

Taking the whole idea one more step into the future, mango might offer the same functionality for other areas of the system for example themes that could be automatically installed from the admin area. After all the code has already been written to some degree for themes offered through the mango blog site.

Thoughts? Ideas? Public Flaming? What are your thoughts?

New Years Resolutions 2009

Thu, 15 Jan 2009 00:35:49 GMT

I heard from someone that you're not serious about your new years resolutions until you write them down. Apparently this is some form of accountability program designed to make you stick to them. Truth or fiction? I don't know but here are my resolutions for 2009.

Stop drinking soda
Make more time for myself and my family
Take more photos for fun
Try more foods that I didn't like before
Redesign my personal site
Work on my sofware idea
Exercise
Learn to use After Effects better
Go camping at the Lost Coast

Okay it's written in my blog. Like being written in stone. Not capable of being edited or altered. :) The betting begins now! Place your bets in the comments area.

Standing Aginst Auto-Focus Inputs

Tue, 16 Dec 2008 19:41:43 GMT

In the last few months I have read a number of articles from some major sites that appear to promote or advocate the use of an auto-focus input when a page loads as a "technique to improve your user interface". The technique usually relies on some form of onload event for the body tag to set the focus to a search field or a login field.

I will say right now this is not a good practice at all. Unless your creating a site (or page) where the first task a user should take is to search for something or login, this is a very bad thing to do. This technique is one that I would personally lump in an article more appropriately titled "10 things to kill your user interface designs"

Why the Auto-focus is a bad idea

Here are some of my top reasons why this approach belongs on the list of bad UI techniques. First the auto-focus takes a non traditional user (e.g. non-mouse, vision or cognitive disabilities.) out of the normal document flow. Users that tab to content on the page will find that they are not at the top of the page anymore. This can be confusing or disorientating to some users. Users of assistive technologies will suffer the most as they may not be able to tell where they are on the page at all. Some newer breads of CSS based designs put navigations and searches at the bottom of the document flow. This may present usability issues of it's own, but compounded with an auto-focused input and you may completely loose or disorientate a user.

Good UI design, and usability experts agree, that you should never break functionality of the browser just for your page. Placing focus on a form input breaks the standard UI expectations of users by removing the delete or backspace function allowing a user to go backwards in their history to the previous page.

Steps in the right direction

There has been efforts made to correct this by using smarter javascript's that detect when you have hit delete past the last character in the field and thereby returning you back in your history to the previous page. I commend these javascript developers taking steeps in the right direction but more work needs to be done. This approach may work for some users but not all. Case in point: Sometimes I may start typing a few characters into a field, Then realize I made a mistake and hit delete more times than there are characters typed. A script like this would return me to the previous page and not just delete the content I wanted from a field and stop. If I had already filled out a lengthy form this could go really wrong. Thats not likely to be the case, but it's still annoying all the same.

Your better off ditching a script like unless it really makes sense for your application. If your google then I can see it being useful. Googles homepage is very minimal with most people going to do one thing — Search. This makes sense for google. Yahoo on the other hand does not make as strong of a case to me as there are numerous tasks that a user can make from the yahoo homepage. Yahoo still auto-focuses their search field so it either makes sense to them or they just don't care about non-traditional surfers. Based on my mobile experience with yahoo, I would guess they really do not care unless your a traditional user. But that is just my two cents.

What are your thoughts? Agree? Disagree? Good and bad examples? You are all surfing veterans, so your feedback is most valuable. Feel free to let me have it.

Offsite Resources

Don't Be A Bad Javascript User

Mon, 24 Nov 2008 05:44:20 GMT

Let me start off by saying that this is not going to be a javascript bashing article. I don't hate javascript, in fact I really do like it a lot— although the title of this article may seem to the contrary. There are many javascript libraries that do really cool stuff. I love that many of these scripts enhance webpages without requiring the use of flash.

The problem I have been encountering lately has more to do with the improper use or implementation of javascript. I think there is far to much whiz-bang stuff being added to many of todays modern websites without considering the impact on users. I feel it's important that before you add a script or a feature to your site that you stop and ask yourself: Is this thing I am about to add to a site going to help my visitors or hurt them? Does it add any value to for the user? Does it hurt them if it's not there? Will it only cause more confusion?

Rather than just talk about it, I have compiled a few video clips to help demonstrate some bad uses of javascript.

Hiding Banner: One Trick Pony?

In this first example, I surfed onto site designchuchi and was struck by it's beautiful interface design. It's clean and organized with great use of color. I like the site a lot. But they have this hide header thing that just made me go huh???

You can click the button and a javascript function pulls the 150 pixel banner closed. I though okay, that's cool for those monitor challenged users who want the site a little more compact so more content fits above the fold. That's great for going through the portfolio section of the site where a user may not want to scroll. However when I clicked to the next page the banner was back again? I closed it once more, thinking the session variable did not remember my preference. Nope that is not the case at all. I would have to close the banner on every page. This begs the questions: Is this feature put there for the convenience of the user? Is the users experience on the site somehow better because of this trick? Would the visitor care if that function was missing? Or is it's only purpose to achieve a "That's neat" effect?

Floating Blocks of Chaos

This second example uses a dragable div. It allows you to drag the sidebar navigation and position it anywhere on the screen you wish. I cannot think of one good reason why a user would want a feature like this.

The floating boxes can overlap obscuring other navigational items. Originally the boxes were all spaced evenly, though after recently checking back I noticed that in order to fix this flaw, the developer placed the boxes further apart. This just creates a whole different set of usability issues. All for some dragable boxes. Personally I just don't get it. In my opinion, the return on investment is just too low to be a feature that I would want as a user.

The web is full of poor uses of javascript. I hope that developers will see the mistakes before javascript gets the same bad rap that flash and DHTML got several years ago. Truth of the matter is. I would rather see people find creative ways of using javascript for good rather than evil.

Good And Bad

Have you spotted good or bad implementations of javascript libraries in the wild? If so, I would like to see a link to them. I am looking for both good and bad examples. I plan to follow up this article with some sites that I feel make great use of javascript. Rather than being only the devils advocate, I also want to point out some great uses for javascript.

I also want to hear what you have to say about this. I know I can get pretty caught up in my concerns over usability on the web and that can sometimes make me overly critical at times. That being said, do you agree or disagree with me?

Donating to Homeless Women and Children

Tue, 18 Nov 2008 04:29:58 GMT

I'm not one to volunteer all to often. There are however a few times when I set some time aside for a worthwhile cause. Like helping homeless woman and children get back on their feet and turn their lives around.

I recently offered up my web design services to help Women's Empowerment, a local not for profit organization that does just that. Help Homeless women and their children get back on track.

Many who know me well, know that I am fairly critical of the homeless. So it may at first appear odd why I decided to volunteer my time to help them. The whole answer can be a long one, however the short and possibly surprising answer is that I spent most of my childhood and teen years being homeless or forced into a less than normal living arrangement. My brother's and I were casualties of a lifestyle that we had no control over. Like I said, it could be a long story. One that I will spare you from here.

My motivations to help were based largely on helping the children. In this case, to help the children you have to help the mother's too. So it just made sense to me to support the group.

Project Background

When approaching a project like this, I wanted to make sure the members at Women's Empowerment could update the site without knowing HTML or have additional software like Dreamweaver or Contribute. Instead I opted to use the free open source web software called Mango Blog. It's a great blogging tool that I have been involved with for the last few months. Using software like Mango Blog, I was able to quickly develop a simple website and push the limits of what I know about the software to do more than it was intended.

It was a fun challenge to undertake. Especially doing the design and code in just over a week. A true testament to the speed and flexibility of a great application like Mango Blog. I think the end result turned out quite well despite having to cut a few corners in order to make the launch deadline.

Have you donated your services to a group you feel is worthwile? If so please leave a comment below, and If you donated a website please leave a link. I would like to see what others are donating to.

Plugin Updates

Thu, 06 Nov 2008 03:16:03 GMT

It's been a busy month for me so I haven't had much time to write any articles for visual28. I hope I can change that soon. I have some topics all lined up, but I really need to do some additional research before I post them. I do have some news that I wanted to put out to you all. I have made some small updates to the twitter and flickr plugins for Mango Blog. Mostly to improve flexibility of the plugin for various themes, but also fixed a few small bugs. So if you haven't yet given it a try or found that it didn't work for you, give it go and download them. Get the Flickr Plugin Here, or the Twitter Plugin Here.

SideNote: A Free Mango Blog Plugin

Wed, 29 Oct 2008 02:33:15 GMT

Back when I used BlogFusion as a CMS, it had a very simple utility called notes. Its function was simple. It added a note to your sidebar. I found this really useful when you need to alert your users to a new update or some problem without having to create a blog post about it. I wanted that feature back in mango blog so I created a very simple plugin called SideNote. It allows you to add html to your sidebar so you can use it however you want. Use SideNote to add an alert about upcoming maintenance or an outage, or maybe you need a donate now button? It's up to you.

It's currently a beta right now, because I am not aware of any issues when adding advanced HTML or javascript. So far I have not had any issues, but I tend to use only basic HTML and CSS. Let me know if you find any issues with it.

Download SideNote Here.

Installation

To install this plugin copy the entire sideNote folder to your "components/plugins/user/" folder

Mobile Web: Surfing The Web Distraction Free

Tue, 21 Oct 2008 22:30:00 GMT

A few weeks ago I downloaded the Myspace & Facebook apps for my iPhone. Not because I am overly active on either of those sites, but rather just curious about the apps. To my surprise I found them very enjoyable. Much more so than going to the actual website. Gone was the advertising, and was red and blue text on black background, gone was the lame music that starts playing at full volume when I enter the page. Each time I go to the profile page. (urg! I hate that) Also gone… Advertising, pop-ups, annoying flash banners! Oh, yes this is my kind of heaven! I actually found surfing these sites a pleasure once more.

The Epiphany

Checking out these apps, a little closer, they appear to be accessing a mobile version of their sites, just made to look pretty and clean for the small browser. That's when it hit me. Hallelujah! most every mobile version of a site can be accessed via your standard web browser. This means you can access ad free, distraction free, music free versions of your favorite sites online. You do not need a mobile phone to access many sites, just a normal web browser.

With the popularity of mobile phones increasing, Most major sites offer mobile versions of their sites, the trick becomes finding the link or just guessing it. Most of the time it's just their regular domain name with a prefix of "mobile" or "m" instead of the "www". Some sites like Amazon make theirs a bit more tricky to find, and MSN does a redirect when trying to access their site on a non mobile device. Most likely to prevent people from circumventing their ad revenue. All it all it's not difficult to find these mobile versions once you know what to look for.

Links for Reference

Here are a few sites that I visit on a regular basis and have discovered that their mobile versions are better suited to a positive user experience and increased productivity over their full web versions.

Feel free to leave a comment with links to your favorite mobile sites that you find usefull.

Flickr Plugin For Mango Blog

Tue, 14 Oct 2008 02:22:34 GMT

I think that just about everybody has a flickr account, and many of us want to put our photos on our blogs. Be it family photos or screen shots of video games and websites — they add visual interest to our web site designs and engage our readers. I know, Mango Blog already has a flickrWidget, but I didn't really like the slideshow and wanted to see a group of thumbnails instead. So I built my own plugin. Now you Mango Blog owners have an option for putting your flickr Pics onto your site.

Features

The flickrPics plugin has some great features not available in all plugins yet. This plugin is pod-enabled so you can set it's position within your sidebar in the admin. This is also the first plugin that supports Caching. Thanks to Adam Tuttle for writing the cache script that he will publish later this week on his site Fusion Grokker. Caching the feeds from these plugins will increase performance of your blog and will be less likely to return an error if those site go offline for any length of time.

This Cache feature is something I will also be adding to the twitter plugin later this week.

Configuration Settings

I tried to pack several useful features into flickrPics to give you flexibility to make it work in as many themes as possible. When you configure the flickrPics plugin you have a few options available.

Tags: allow you to perform a search through your photos for particular tags. This is a comma separated list and works the same as it would like the flicker search.

Photos to Display: A numerical value for the number of images you want to show at a time.

Photo Size: Square thumbnails, and medium thumbnails are the only two options at the moment. I am looking into other options for future updates.

Custom Header: Allows you to specify a custom H2 title.

Image Wrappers: There are two extra fields "before image" and "after image" that allow you to wrap your images in custom elements like <p> tags or a <br> tag.

Download the plugin

The flickrPics plugin is free to download so get it now, and please provide me your feedback for it's usefulness, and suggestions for improvements.

Twitter Plugin For Mango Blog

Wed, 08 Oct 2008 03:11:22 GMT

UPDATE: A new version of the twitter plugin is now available for Mango Blog 1.3 Please see the new post for details and download.

Twitter, the popular micro blogging social phenomenon is taking the blogosphere by storm. I felt Mango Blog needed to keep up with the times. I was also working on a new theme that required a twitter sidebar widget. This meant I had to force myself to learn about the plugin system for mango blog. I was about to throw in the towel, call it quits and cry my eyes out then all of a sudden it started to "click". Within the next hour or so I fixed my plugin and got it working as intended. Hooray!

Features

I tried to make it as flexible as possible. Adding a few extra hooks for future styling needs. While I was at it. I added a custom javascript that automatically links @Usernames as well as hyperlinks in the tweet. Something the original twitter badge does not do.

Configuration Settings

I tried to make the plugin settings functional as well for future proofing the plugin. I added the ability to customize the H2 text that appears in the sidebar. Or you can choose not to show any heading at all by leaving the field blank.

Additionally, I added a location selector for the follow me hyperlink. There are three settings available: None for do not show a link. Below for displaying the traditional link below the posts, or Above if you want to link to a twitter logo or other graphic.

Lastly, I added the ability to specify the number of posts to show at a time.

Download Plugin

So here is it! My very first mango blog plugin! Since this is my first plugin, I would really appreciate your feedback, comments or suggestions.

Custom Tag Option

As a side note, I also have a custom tag version of this plugin. It's not as good as the plugin, but sometimes a theme might require something unique that a sidebar plugin cannot provide.

Thank You

Thanks to Laura for advising me on pod enabeling this plugin, and also for writing a portion of the installer script so that it's "Mango Certified"