The aim of this article is not to write a working application but rather to explain the parts that build a component and how Mambo use these parts.

Throughout this article, I’ll use ‘mycomp‘ to represent the component name which should be replaced by your own component name, and ‘installdir‘ as Mambo base installation directory.

I’ll start by explaining the basic files required to build a component. These files are grouped according to where they are used/viewed:

• Frontend files
  • mycomp.php
  • mycomp.html.php (optional)
• Administration files
  • admin.mycomp.php
  • admin.mycomp.html.php (optional)
  • toolbar.mycomp.php
  • toolbar.mycomp.html.php (optional)
• Class files
  • mycomp.class.php (optional)
• Installation files
  • mycomp.xml
  • install.mycomp.php (optional)
  • uninstall.mycomp.php (optional)

Files marked ‘optional’ are not technically required by Mambo but having them makes it easier to manage your code later.

I must state it here that this article is not a step-by-step guide on how to create a template from scratch, but rather to give understanding how a template works in Mambo framework. Once you understand how it works, it’s easy to create your own template. I also assume that you already have some knowledge of PHP, HTML, and CSS.

Template structure

Each Mambo templates are kept in a sub-folder inside ‘installdir/templates‘ folder. Directory structure of a template is as follows:

[installdir]/templates/
  |
  +- [template_name]/
       |
       +- index.php
       |
       +- template_thumbnail.png
       |
       +- templateDetails.xml
       |
       +- css/
       |    |
       |    +- template_css.css
       |
       +- images/

Our focus here is on index.php, the layout file where you put all the HTML and PHP codes. Mambo uses this file to display all pages in your website.

Initialization and header information

Here are the codes that you will most likely found at the beginning of the layout file.

• <?php
    defined('_VALID_MOS') or die('Direct Access to this location is not allowed.');
  ?>

  The above code says that this file must be loaded by Mambo framework and direct access to it is not allowed.

• <?xml version="1.0" ?>

  This is to define this file as a valid XML file (it is recommended that template is written in XHTML).

• <?php
    if ($my->id) initEditor();
  ?>

  Initializes WYSIWYG editor for logged in user.

• <?php
    mosShowHead();
  ?>

  Prints HTML meta tags such as title, generator, and robots. When user is viewing a content item, keywords and description defined for that item will be appended to the site’s meta tags.

  

  Meta tags for content item

Pathway

<?php
  mosPathWay();
?>

Pathway

Pathway or breadcrumbs is the navigation string that tells you where you are within the site structure. mosPathWay() function is defined in installdir/includes/mambo.php.

Notice that almost all URLs on your site has ‘Itemid‘ variable in it? That variable is an indicator of the currently selected item (menu, content, component, etc) and used by Mambo to generate pathway.

Hint: another use of Itemid is to highlight selected menu item.

Pathway is displayed inside ‘<span class="pathway"></span>‘ tag. For separator between each item, Mambo will first look in your template’s image directory for a file called ‘arrow.png‘ (installdir/templates/template_name/images/arrow.png). If none is found, the default image ‘installdir/images/M_images/arrow.png‘ will be used.

This is how it looks like when I break my article into 5 pages by inserting { mospagebreak }.

But I want it to display more meaningful titles for my reader. Simple. Just add ‘title’ attribute to the code like this:

{mospagebreak title=My custom title}

If you ask me, I’ll say it looks much better. One thing though, you cannot use quotes (single or double) in your titles as they will be displayed escaped with backslash.

The first thing to look at when you begin your SEO is the keywords. Keywords are words that are used to describe your website. For example, let’s say you have an herb shop. Then your potential keywords would be ‘shopping’, ‘online’, ‘herbs’, ‘herbal medicine’, the specific names of herbs, etc. It may be very hard to get top ranking for the keyword ‘herbs’ and ‘shopping’ but you may have better chance if you use specific names of herbs or specific search terms. If you notice, when you type in ‘herbs’ or ‘shopping’ in Google you will find several websites that rank very well and that have been given a very high page rank. You will have a very hard time competing with these large websites. However, if you search for more specific keywords such as ‘buy herbs online’ or ‘online shop for herbs’ you will find websites that have lower page rank and these you can probably beat.

Placing specific keywords in your Meta tag and description along with adding them to your front page will help you get noticed. The basic idea is to use these keywords in the content of your pages. You will hear all kinds of rumors about how you should stuff keywords into the content. But, the best way to do this is to use wordings that make sense to your readers while you add these important keywords. The best rule of thumb is that for every 100 words you should use your keywords once.

Now, let’s take a closer look at the HTML of your website. We will once again use the online herb shop as an example. The TITLE tag of your page should include the keywords you have chosen. ‘Online shop for chamomile, blessed thistle, rose hips, herbal medicine, herbs’, is a good example. The META TITLE can be the same as the page title. The META DESCRIPTION should use the above keywords plus any other specific search terms, herbs, or herbal medicine that you will be selling. The META KEYWORDS should include every keyword, using the main ones first. Using header tags (H1, H2, etc) in your content is also a big plus when the search engines come crawling. Within the header tags you should use your main keywords, and then write more details about the keywords right under the header tag. The use of bold print will also draw attention to your keywords and will help you build density.

These are just a few of the SEO techniques used by many webmasters all over the world to get their websites noticed and in top ranking positions in the search engines.

What You See Is What You Get Editors (referred to as WYSIWYG editors from here after) are programs that have been written specifically to aid in the development of Websites and their components, I say components as in this day and age database management and script setup have major parts to play within the editors.

Many beginners to the Web development scene believe WYSIWYG editors are a real lifesaver, so did I when I first stepped upon this impressive adventure, (that some call Web development), and I hate to say it, but I guess eight or nine out of ten people were in the same situation as me. As you begin to advance and talk to fellow Web developers, of whom have a little more experience than yourself, you begin to wonder if WYSIWYG editors are the way to go. The aim of this rant is to save you from wasting time learning the ins and outs (and shake it all abouts if you like) of WYSIWYG editors, instead, skip this stage, in the next ten minutes you will realise that WYSIWYG editors are not the way to go.

What do they do?

In the simplest terms, they allow the end user to ‘drag and drop’ elements of a Website including images, text and scripts. ‘Drag and drop’ is quite a broad term to use as it covers things such as the standard insert picture tool. By all means, there are methods of dragging a button and inserting it on your Website to insert something specific such as an effect or script but it also covers those other things.

Despite the main aim of WYSIWYG editors been to allow the end user to see their Web page developing as they develop and make the whole process simpler (some may argue, me included as you will find out) they also have a ‘coding’ tab where you can hardcode your web site. This hard coding within the editor is fine with me and most other web developers, just as long as you don’t mix the WYSIWYG interface with the hard coding interface.

Examples!

There are many different WYSIWYG editors around. The two that are considered to be the most well known are Microsoft FrontPage and Macromedia Dreamweaver. FrontPage comes now with most Microsoft Office packages whereas Dreamweaver is available for download at a hefty cost of $400 from Macromedia’s web site.

Before I go on let me put things straight regarding Macromedia Dreamweaver. Macromedia have done a very good job, compared to Microsoft with Frontpage, in abiding by standards and accessibility guidelines. I certainly won’t go and say they haven’t because it isn’t true, I am also aware that Dreamweaver can be configured to produce valid code amongst other things. Therefore, I will say here, as long as the developer knows how to handle Dreamweaver to get it to abide by the things I rant about here, I have no problem with it.

Why Am I Against Them?

I am a firm believer in abiding by W3C’s Web standards as well as trying my best to allow for maximum accessibility within Websites. Generally, WYSIWYG editors, upon designing in the WYSIWYG interface rather than hard coding, do not stick to these beliefs I, and many other Web developers have. A side note, it is not me and the other developers been awkward, we are, in theory, doing the correct thing by developing Websites according to standards and taking accessibility issues in to account. By doing this we do much more than help the user, often we actually help ourselves in matters such as the possibility of a visitor suing the Web developer as they cannot access the Website. This can be, and has been done successfully.

Take Microsoft FrontPage for example, I am not ‘attacking’ Microsoft here at all (that is my next rant) but because FrontPage and Internet Explorer are both Microsoft products, many of the features that FrontPage harnesses are built in to the system to work specifically and solely within Internet Explorer and no other browsers.

Based on published figures, Internet Explorer harnesses somewhere in the region of 90% of all Web users (as I and many developers have said before, we would love to challenge this figure, but, as of yet, there is no information to back our opinions, partly the reason why Microsoft and others can continue to present the 90% figure). So, that is at least 10% of your visitors down the drain, bang, bye bye. Now, lets put this in to perspective, 10% may not seem like a great deal. But, think, lets say a Website receives 10,000 visitors per month (may sound a lot, in fact, quite an achievable number). That is 1000 visitors the site could miss out on per month. Now, lets say that the web site is an online store, before hand, the company had done some research and worked out that on average 65% of their visitors to their web site bought a product, that means the company would have lost out on 650 sales in each month if their Website is accessible via Internet Explorer alone. Now, if you are a positive thinking person and are still not convinced that FrontPage is a bad thing, lets assume the company did some more research, they worked out that on average a product from them costs $15. So, 650 multiplied by 15 is 9750. That means the company will lose out on $9750, on average, each month. That is $117,000 (One Hundred and Seventeen Thousand Dollars) per year. Here is the killer punch, the average lifespan of a business is 100 years (or so some people say), so, 117,000 multiplied by 100 equals: $1,170,000 (One Million One Hundred Seventy Thousand Dollars). This is how much a business could lose out on during its lifespan. In shock yet? Here is the number for your local emergency services, 911.

With that said I will continue to talk about WYSIWYG editors in general rather than singling out FrontPage. Another reason for my hatred is the fact they generate code that, well to put it simply, is a shambles. It is not so much the fact that the code they produce is not valid, although that would improve it significantly, but it is the way there is so much pointless coding and useless nonsense inserted within the source. I often see Web pages designed with WYSIWYG editors that contain so many tables they wouldn’t fit in to The Queens dining room! I often wonder to myself whether it is the program that sucks big time or whether it is the programmers who inserted the commands to create the source that suck, I suppose, thought about accurately, it has to be the programmer behind the editor that is poor as it is the programmer that creates the program, I am sure that will be challenged by the programmers themselves though.

Despite all my ranting about accessibility issues, Dreamweaver, for one, has attempted to do something about it, certainly a lot more than what FrontPage has. Macromedia’s web site has a whole section dedicated to Dreamweaver’s accessibility. It’s quite ironic though that Macromedia’s order section does not allow the user access while using Opera.

Specific Advantages Of WYSIWYG Editors

Not many, but I have managed to come up with a few:

Efficiency – Some will say that it improves efficiency, I tend to disagree from my level as I would always have the need to come back and correct the code and bugs, therefore increasing the time taken to develop the Website. For those not bothered with accessibility and standards (I’m tempted to say you must not care about your visitors either, woops, I just did) then this probably won’t affect you, God forbid if you take this route even after my rant above.

Education Of HTML – Valid point, it does not require the need for the end user to know or even understand HTML and its subsidiary languages. But, if you ask me, learning HTML is far less complicated than dealing with customer complaints in the form of them not been able to access your Website.

Specific Disadvantages Of Using WYSIWYG Editors

Notice how these outweigh the advantages:

Standards – Most, if not all WYSIWYG editors do not comply with Web standards. I haven’t actually gone through the advantages of complying with standards but here is an interesting one I found from an external source,

“Complying with Web standards can give your Web pages greater visibility in Web searches. The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents and they get indexed more accurately.”

Source: Webstandards.org

This could once again come down to revenue, depending on your business type, been high in search engine rankings could effect how much revenue you receive, complying to standards, according to the source above, helps search engines access and evaluate the information within your Website.

Accessibility – If you decided you would only read this section of the rant be sure to add another to the read list, the ‘Why Am I Against Them?’ section has a very clean idea on how accessibility issues can cost you and your company big bucks.

Half-Baked Coding – As explained above, the coding is usually pretty shoddy. This may not be a big deal for the likes of a beginner but within the Web development industry, visual design is not everything. The underlying brick and mortar is your key to the first half of success.

Valid Coding – To add to the poor coding you could try running a Website made in a WYSIWYG editor through a validator. I could almost bet my left hand (I need it to keep boring so many people with rants like this) that you would be thrown a handful of ugly errors. Obviously those Dreamweaver gurus who understand and use the program effectively can argue with good grounds on this point.

So, the question still remains, ‘To Dream, Weave, or Read The Front Page?’ My answer, none, open notepad and learn HTML!

Anyway, that’s me nearly over for another day. In return for you listening to me mumble on about endless things I have provided a list of very useful links.

http://www.webstandards.org – The Web Standards Project

http://www.iwdn.net – The International Web Developers Network

http://www.htmlhelp.com – The Web Design Group, Making The Web Accessible To All

http://www.meyerweb.com/eric/css/edge/ – Eric Meyer’s CSS/Edge

http://www.w3.org – The W3C

Thanks for reading!

Flash Pros

Flash is a great way to allow web surfers to view a product demonstration on your website. If you have the need to include a product demo on your site then Flash might be for you.

Graphic designers may want to use Flash for their portfolio to showcase their skills. However, use it wisely and take into consideration loading time for users with low bandwidth connections.

Also, Flash is the mainstay for online games on sites such as Yahoo! and other sites that offer online interactive video games. As a result, if your site offers video games or demos of video games then Flash might be your friend.

If you have a site with little decoration so to speak then a small amount of Flash incorporated in the banner or in some other way that will not affect the speed of your page might be a good option. It will certainly dress up your page a little bit.

Flash Cons

Websites designed with Flash can take a considerably long time to load for those with high speed connections, not to mention those with dial-up connections. Because of the time constraint, many people will leave the site and look for the information somewhere else. Web surfers want speed and are not willing to wait for graphics, no matter how amazing they are.

Flash is not always interactive, so it is more like watching a movie rather than participating in the presentation. So, long Flash presentations typically bore web surfers and they simply move on. Remember, speed is a main desire of all web surfers.

Getting ranked with the large search engines is difficult if not impossible for Flash sites simply because the search engines rank content and have not yet started ranking Flash sites to a high degree. So, if you use Flash on your site you might sacrifice traffic.

Flash websites designed with an older version of Flash can simply confuse web surfers because the back button does not work as one might imagine and the typical colors associated with viewed links are not the same purple as usual. These leads to uncertainty for web surfers and lack of the control they are accustomed to.

Now that you know all that Flash can do for your website, and all it can take away, you are better able to decide whether using Flash is beneficial for your website. However, make sure you always consider what web surfers are most interested in when viewing a website: speed, content and navigational ease. If you can’t provide that with Flash you are sure to lose some viewers and Flash is your foe. However, if you can incorporate Flash and still provide web surfers with what they want then Flash just might be your friend.

Suppose you have an HTML form like this:

<form name="myform" method="post" action="form-processor.php">
    Name: <input type="text" name="myname"> <br/>
    Favorite fruits: <br/>
    <input type="checkbox" name="fav[]">Apple <br/>
    <input type="checkbox" name="fav[]">Banana <br/>
    <input type="checkbox" name="fav[]">Orange <br/>
    <input type="checkbox" name="fav[]">Mango <br/>
</form>

Sometimes you need to use JavaScript to access the elements’ properties, e.g to check which checkboxes are selected, which text fields contain values, etc. Normally we can use the element’s name directly and read its properties as follows:

<script type="text/javascript">
if (document.myform.myname.value == '') {
    window.alert('Please fill in your name');
}
</script>

However, it will not work for ‘fav[]‘ elements. You need to use ‘elements’ property to access them:

<script type="text/javascript">
// How many options we have?
var fav_count = document.getElementByName('fav[]');
var is_checked = false;

for (var i = 0; i < fav_count; i++) {
    if (document.myform.elements['fav[]'].checked) {
        is_checked = true;
        break;
    }
}

if (is_checked == false) {
    window.alert('Please select at least 1 favorite fruit');
}
</script>

Web Developer

Web Developer extension from Chris Pederick is a must for every web developer. It gives you tons of tools to view, check, and validate a website. Below are some of my favorite features.

Edit CSS menu

Change CSS property and see the result on the fly

The above image shows how you can edit a page’s CSS and see the results on the fly. I changed Google’s background color to green in this example. This feature is useful if you need to try few things without changing the actual CSS file and saves you from having to edit the CSS, save it, view the page, and change it back if is not what you want.

Display class name and ID of web elements on the page

Display web elements outline box

Yahoo displayed outlined and with class/ID

Figure 3 and 4 show you how to display CSS ID/ class details and outline elements on a page. You can even define what elements to be outlined using ‘Outline Custom Elements’ option at the bottom of the menu (Fig 4). Figure 5 shows Yahoo website with block and table elements outlined, and their class names and IDs shown. From here, you can compare the display with the CSS file to learn how a page is constructed. Hint: use ‘View CSS’ from the menu shown on Figure 1.

Validate local HTML

The above shows local HTML validation. I love this feature because it enables me to do HTML validation from my local PC. It saves me from having to upload the files to the server and run the URL through W3C’s online validator.

View source code

One-click to view page source. Enough said.