Blog entries from Jorge Pablos

Mobilebot: Joomla Goes Mobile!

Jorge Pablos — Fri, 21 Aug 2009 06:00:00 +0100

The way a website should look and behave in a mobile device is significantly different than how it does on a laptop or desktop display. We came up with a plug-in for Joomla! to make it easy to instantiate different interfaces depending on the client platform.

We’ve been working on a site redesign that requires significantly different templates for laptops/desktops and mobile displays. On the one hand, we want to optimize the UI for each device; on the other, we don’t want to force users to maintain multiple copies of every page. That would be disgustingly inefficient, particularly for a site based on Joomla!

Instead, wouldn’t it be beautiful to have all sorts of custom templates for each mobile platform and have the appropriate template selected automatically?

A Plug-in Is Born

I started “googling” around and ended up in the Joomla Core-Enhancements Mobile Section. I found three extensions (good) but they all had significant limitations (not so good). For example, one of them required a Joomla! “core” change. Not pretty.

One plug-in in particular captured my attention, the PDA-plugin for Joomla 1.5. This plug-in came pretty close to what I was looking for because 1) it detects all popular mobile platforms and 2) switches Joomla! to a specified mobile template (i.e., this template can also be downloaded with the plug-in).

Unfortunately, even though it came close it still had some shortcomings,

You can’t handle multiple, independent device/templates with it (i.e., you can’t have one template for iPhone, another for Blackberry, etc). You can’t make custom adjustments to your final HTML code based on the device detected (e.g., remove a particular DIV block for the iPhone or a particular OBJECT element for a Blackberry, etc). Finally, the detection strings are not easily configurable from the plug-in parameters.

I’m a curious person, so I looked at the plug-in’s source code. A few hours later a new little monster was born (taddah!): the Mobilebot for Joomla 1.5+ plug-in. Here’s a summary of what this plug-in does,

It can detect iPhone, Blackberry, Android and Opera Mini separately and load a particular template for each of them.It has two extra spaces so you can add your own custom mobile devices. You can adjust your final HTML code with simple/regular expression PHP replacements; this can be done independently for each particular device. If none of the specific devices is detected (or you just have one template for all mobiles), the plug-in can also perform a general mobile detection and load a “generic” mobile template if configured accordingly.

This plug-in uses two detection methods,

Compare the user-agent HTTP header with a list of strings (all of them configurable) Detect a named subdomain in the address bar assigned by you for that particular device

It can even use both methods at the same time. Here’s an example:

Let’s assume that you assign the subdomain http://iphone.example.com for the iPhone template and you enable both detections methods for such devices in the Mobilebot parameters.

If you receive a visit of someone using an iPhone, this is what happens:

If the visitor types in http://iphone.example.com directly, then subdomain-based detection is triggered and the visitor gets the correct template. In this case, user-agent detection is disregarded. If the visitor reaches the site using http://www.example.com, then subdomain based detection doesn’t trigger but the visitor gets the correct template anyway because user-agent detection is enabled too.

The only difference between these two cases is the URL showing in the address bar. In the first case it will show http://iphone.example.com, and http://www.example.com in the second case. If this is not what you want, keep reading.

You may have a reason to keep a consistent URL showing in the iPhone visitor’s address bar. For example,

You want to get the word out regarding the existence of your mobile subdomain. You just are a consistency freak (like yours truly)

Either way, you can accomplish this by enabling the “Redirect to iPhone subdomain” feature along with user-agent detection. In the configuration dialog, each platform has its own “Redirect to mobile subdomain” parameter.

With this configuration, user-agent detection is used as a secondary helper only to correct the URL when needed. Otherwise, the redirection option is turned off by default because it’s not needed by most people. However, if you need it, you can turn it on easily.

Version 1.0

This is the first version of the plug-in so if you find any issues with your particular environment or specific configuration, please, help me correct them. We can accomplish more together!

No mobile template is included with this release. This plug-in has the primary objective of giving you the freedom to have completely independent templates for mobile devices. You can get started with the “PDA” template provided by Denis Ryabov (aka., Physicist) with the PDA-plugin (you may need to do some adjustments to it).

Using this approach, you can include very device-specific HTML markup without affecting the default behavior of your website!

I hope this plug-in helps somebody out there. It certainly will be helpful for us at Nearsoft and new site layout we’re working on. Come back here with your iPhone in about a month and you’ll see what I mean.

Final Setup Notes

If the template you provide for a particular device doesn’t exist, no template change is performed. This is a good thing, for example, if you mistype the template name in the plug-in configuration parameters. Your site won’t break. It will not look right for that device, but it won’t break.

Subdomain-based detection requires some extra configuration. Continuing with the example, both http://www.example.com and http://iphone.example.com should point to the same IP address (e.g., your website) so you may need to do some DNS configurations first.

Joomla as Valid XHTML 1.0

Jorge Pablos — Fri, 14 Aug 2009 16:10:20 +0100

When it comes to Web standards, I like to consider myself a fan and follower, although not in an obsessive kind of way. I think that it’s also important (usually more important) to get the necessary features in the product.

To validate or not to validate, that is the question - Me

The line for me is exactly there, I always try to deliver the best I can. For a website, for example, standards compliance is important but meeting users’ needs is more important.

Let’s take Joomla! as an example. This open source CMS allows you to have a website up and running much faster than if you were developing it from scratch. It has a powerful backend and a lot of already-tested features and extensions in place.

However, when it comes to having the site be XHTML 1.0 compliant, Joomla! fights you all the way. You can go crazy trying to do it. I know, I’ve tried.

Creating a valid XHTML 1.0 template is not a particularly difficult thing to do if you pay even minimal attention to standards. Extensions are a different ball of wax altogether.

Houston, We Have a Problem

Making sure that all the components and modules you use generate valid XHTML 1.0 code is damn near impossible. Joomla! extensions (i.e., components, modules and plug-ins) are developed by lots of people from all over the world, some who care about Web standards (good) and some who don’t (not so good).

To correct this situation you have to have a pretty good understanding of Joomla’s architecture, dive into PHP/HTML code and modify its core files. Ditto for the extensions. That would be a crazy thing to do. It invalidates one of the big benefits of working with an OSS CMS in that you are now going to be messing around with time-tested code.

This is unsustainable, not to mention impractical. Every time you update one of your components, you will most likely have to implement your changes all over again. Alternatively, you could keep track of all your customized files and then review each one and manually upgrade after each update. More likely than not, once you’ve made extensive changes, you’ll be very reticent to update and would not be able to take advantage of bug fixes, new features, etc.

Creating Valid XHTML 1.0 Content

One popular component is TinyMCE, the default text editor that comes with Joomla!

This little monster has a mind on its own and will mess with everything you do. You can turn off the “Code Cleanup on Startup” and “Code cleanup on save” parameters but to no avail. If TinyMCE could talk, this is the conversation you’d have with it:

You:
Hi Tiny, how have you been?

Tiny MCE:
Great, buddy, what can I do for you?

You:
Please put this <br /> tag in my article’s HTML code.

Tiny MCE:
He he he. You crazy. I’ll save space by putting the usual <br> instead

You:
No please, add the slash in there. It’s important so the site can be valid XHTML 1.0.

Tiny MCE:
Oh, I’m sorry, I already did it my way. BTW, what does “valid XHTML 1.0” mean?

You:
[Uncontrollable sobbing sounds]

Even if you could find a better HTML editor that listens to you and respects your feelings you may still end up with non-compliant code because each author can mess with the HTML code directly (and since we’re a technology company, many of our authors do). In this case, you would have to monitor and check every single article that comes into the system to make sure it’s compliant.

ANOTHER APPROACH

At this point it is very tempting to just give up on the whole thing and let the site be non-compliant.

Even though passing the XHTML 1.0 validation is not vital for a Joomla!-based website, it has been bothering me for a while and I don’t like it. I mean, we’re a technology company and this reflects badly on us.

So, I decided to create the CleanHTML plug-in to resolve this situation.

This plug-in runs after the final HTML has been generated by Joomla! and just before the page is sent to the visitor (onAfterRender Joomla! event). At that point, the plug-in cleans up the code to make it compliant, regardless of what extensions and authors do (yeay!).

CleanHTML Features

CleanHTML can be configured to use the Tidy PHP extension to parse and fix your code to make it valid XHTML 1.0 or HMTL 4.01.

When Tidy is not available (i.e., most hosting providers still don’t include this extension) or if you just decide not to enable this feature, the plug-in can perform a set of manual cleanups using regular expressions such as replacing for , fix unescaped query strings, sanitize ID attributes, enclose and blocks of code in CDATA sections, etc.

Last but not least, you can add custom rules with raw PHP code that are then applied to the page, held in the $html variable.

For example, say you’ve noticed that some onclick attributes in certain pages are coded as onClick (i.e., making the page XHTML 1.0 non-compliant). In this case, you can add a PHP replacement line such as:

$html = str_replace('onclick=', onclick=', $html);

This will fix all instances of this problem in all of your frontend pages. Cool, huh?

Final Notes

It is important to mention that executing regular expression replacements for every generated page can have an impact in website performance. This impact is almost imperceptible for the most part unless you have lots and lots of visitors and a lousy hosting provider. Otherwise, you won’t even notice the difference.

Given the “global community” nature of Joomla!, it’s very hard to get all the contributors lined up to generate valid XHTML 1.0 websites out of the box. For that you would need to,

Have the Joomla! Core Team signed up to generate only valid XHTML 1.0 markup.
Have some sort of automated QA subsystem to qualify Joomla! extensions (i.e., sounds complicated and unreal).
Replace TinyMCE with one that generates valid XHTML 1.0 code.

Of course, all of this is complicated by the fact that “compliance” is somewhat of a loose thing because THERE’S NO SAMPLE IMPLEMENTATION of these standards.

Therefore, this is the only way I can think to achieve this (for now at least). So, there you have it. What do you think?

CleanHTML 1.0 plug-in for Joomla 1.5

If you decide to try this plug-in, please let me know if you find any issues with it so I can fix them. I hope you find this plug-in useful.

And What About Joomla?

Jorge Pablos — Thu, 05 Feb 2009 07:00:00 +0100

Recently, we found ourselves in a familiar situation where we needed to have a consumer-facing website up and running in no time. We got together with the client to evaluate the options and after talking about several options, somebody asked "and what about Joomla!?"

There were a lot of opinions, pros and cons thrown around the table, but the general feeling was positive so we decided to do a quick evaluation. As you probably guessed, the end result is that we decided to go with Joomla!, primarily because of its extensibility and huge ecosystem of developers.

Joomla! is a free Open Source (OSS) Content Management System (CMS) currently at version 1.5.9. It is a "Website in a box" you can download from the project site, install it on your favorite server and then customize the heck out of it to fit your needs.

Website-In-A-Box

Joomla! has the most common features already built-in for you such as RSS feeds, SEF URLs, printable version pages, site search and internationalization among many others.

Like other CMS platforms, it has an administration backend where multiple users can edit/configure the site with little or no effort at different levels of authorization. I particularly liked the UI and the navigation of this backend. After all is said and done, however, the area where Joomla! wins hands down is in its extensibility.

There are tons of free and commercial extensions for it. All the ones I tried worked well with the platform. In every case, I just downloaded the extension/module, installed it and the new functionality would come right up. With fair knowledge of PHP programming, you can even build your own.

For this particular client, I was able to get them the website they wanted by with a combination of custom templates, integrating existing extensions, developing a couple and modifying the rest. I would not call myself a Joomla! "guru", but at this point I know the platform well enough to answer the perennial question:

Is Joomla the Best Solution?

It all boils down to "features" and "customization" issues. In other words, what level of customization does the client need?

Despite the many advantages, there are few risks and difficulties I found while working with Joomla!:

The HTML it generates is not the cleanest and leanest it could be (but I believe that they're working on that). This may be an issue if you follow W3C standards (and you should or else @mollydotcom will get you). The variety of HTML generated by components and modules makes Joomla! difficult to syle with CSS. You need to have experience with HTML and CSS to achieve exactly the look you want, consistently through the site. We tried not to, but in the end I had to dig in with PHP and make some modifications to components and/or modules to generate different markup. Independent packages are maintained by folks not related to the Joomla! core team and they can conflict with each other. Troubleshooting this kind of problems can be time consuming.

In summary, I can say that if the client requires a very specific web application or a highly customized site, you will save time. But, it won't all work straight out of the box. Depending on the specific requirements, the issues listed above may sap some of the savings.

Would I Make the Same Choice?

After all is said and done, however, I am still convinced we made the right choice for the level of complexity required by this site. We got the site up and going with less programming and higher quality. More importantly, we got it in production (i.e., generating revenue for our client) sooner than if we had tried to do it from scratch. Obviously, we didn't do a side-by-side test, but I also have the feeling that although the learning curve might have been a bit longer, the results were delivered faster than we could have with some of the other options. I'd like to try some of the others and see how they compare.

We took full advantage of the features already present in the package, tested every day by lots of websites worldwide. Reproducing this code base would be, at least, a real pain to develop from scratch.

The OSS community has invested a lot of time and effort in this CMS. They've done a terrific job, given the size and complexity of the task. There are some TODOs and they'll always will. That's the nature of software. It needs to evolve.

To the Joomla! core team and all the contributors out there, we only have two things to tell you:

Congratulations and Thank You!

Oh, and thanks to whomever asked, “and what about Joomla!?”