joomla-templatemgr

Using Google Analytics with Joomla!

Google Analytics is an indispensable tool for webmasters.  Joomla! is a very popular content management system.  It makes perfect sense for Joomla! to have a method of integrating the Google Analytics reporting tool into its framework.  Using Joomla!’s template system, administrators can insert the necessary script for the Analytics system to track visitors to each page contained on the site.

Here’s how it works.  To use Google Analytics, you have to set up an account through Google.  You can access Analytics by going to http://www.google.com/analytics.  After setting up an account, you are given a block of JavaScript code that you’re supposed to include on each page of your website – at least those for which you want to track traffic.

Once you’ve obtained the Analytics script from Google, you need to paste it into your current Joomla! setup.  To do so, access your currently active Joomla! template by going to Extensions->Template Manager. 

From the Template Manager page, click on the name of the currently active template.  The currently active template is marked by a star icon in the Default field. 

Next, click on the Edit HTML icon.  Doing so will take you to a screen that will allow you to edit your template’s index.php file.  Each time someone visits a Joomla!-based website, the page request is directed through the index.php file for the active template, so that’s the file you need to edit.

Once you’ve pulled up the index.php file for your Joomla! site’s active template, you need to paste the Analytics script in a place where it won’t interrupt other parts of the code.  I typically place mine just before the closing body tag, as shown below.  Many webmasters prefer to put the code in the header section of their template’s index.php file.  As long as you place the code where it doesn’t interfere with other sections of the page, you’ll be fine.

One important thing to note with regard to Joomla! templates is that more than one template file can be used on a website at a time.  For instance, you may have assigned an alternate theme to articles pages in a particular category of your Joomla! site.  For this reason, it’s a good habit to go ahead and put the Google Analytics script in the index.php file for each of the templates you have installed, even if you don’t currently have pages assigned to use any template other than the default.  If you later install another Joomla! template, you should go ahead and put the Analytics script in that one as well.  If you don’t have the script in each of your template files, your Analytics stats won’t account for visitors who might come to one of the pages on your site on which the tracking code does not exist.

Layers Panel

How to Use Dingbat Vector Graphics to Create Images

You’ve probably seen dingbats before.  As you scroll through fonts looking for just the right one they suddenly appear.  You may even laugh when you see them.  Why would anyone use images for a font?  No one could ever read that.  This is true, but since most people don’t understand how dingbats can be used they miss an amazing graphic resource.

Although they are categorized with the fonts, dingbats are just graphics that can be used for a variety of reasons.  Think about it.  What are the characteristics of fonts?  They are vector images which means they maintain their integrety at any size, you can make them any color, and once you have installed the font on your computer you can use it in any program that recognizes fonts.

Since discovering dingbats I have started using them for just about every graphic project I do.  I am going to show you how you can use these free vector graphics to enhance your artistic projects in Photoshop CS3.   We will be using 7 skills in Photoshop.  All of these fonts can be found for free at dafont.com.

First, I will be using Aierbazzi.  This font is composed of various wildflower images.  I will start with a white background and use black for my font.  I am going to type a different letter in each layer as you can see by my layers panel.  This allows me to move each image around individually.

Layers Panel 

I now have a black and white bouquet. 

Black Bouquet

But I want to add more color.  So I am going to go back into each layer and change the colors so I have a multi-colored bouquet.

Colored Bouquet

I am going to hide all but one flower for this next example.  Say you want to change a dingbat so that it is several colors, or has effects on it.  Right-click on that layer in the layers panel and choose Rasterize Type.

Rasterize Type

Click on Select in the Main Menu and choose Load Selection.  Click OK in the box that appears.  This will select everything in the layer you are currently  in. 

Load Selection

With your image now selected you can choose a color in the Color Palette and paint a portion of the image.

Colored Flower

I am going to switch to a different font for this next example.  This font is called Printers Ornaments One.   I am going to type the letter M.  Duplicate this layer by right clicking on the layer in the Layers Palette.  I am now going to arrange this image to create a repeatable background image for a website, wallpaper, or digital scrapbooking page.

Dingbats Background

Now select one of the M layers and click on the fx logo (add a layer style) at the bottom of the Layers Palette.  I am going to add a Drop Shadow and Bevel and Emboss each with their default settings.  You can add other effects in this same manner.  The image on the left is the original dingbat.  The image on the right has the above mentioned effects applied to it.

Effects

I am going to switch to another font called Christmas Debbie.   Using these last two methods, I am going to create an image of two candy canes in a stocking.  Type the letter c for the stocking.  Rasterize this layer.  Now choose Select in the Main Menu, select Load Selection, and click OK.  Go to Select in the Main Menu again and choose Modify>Contract.  Contract the selection by 5 pixels.  Choose a red color and fill the selected area with red using the Paint Bucket Tool.  Select the transparent portions of the stocking and fill them with white.  Right-click and choose Deselect.  You should now have a red and white stocking. 

Stocking

Change the foreground color back to black, create a new layer, and type the letter o.  This creates a candy cane.  Make the candy cane red and white by following the same steps used for the stocking.  After you have deselected the candy cane.press Ctrl+T to free transform the image.  If you hold the Shift key down as you resize the image it will maintain its proprotions.  Right click forf additional transforming options such as Filp Horizontally.  I duplicated the candy cane layer and transformed the new candy cane additionally to make the image below.

Stocking and Candy Canes

Drag the candy cane layer to the top of the Layers Panel so the candy canes are hidden behind the stocking.  Follow these steps to add additional items to the stocking.  This is my completed stocking image.

Full Stocking

Now that you know how to use dingbats, have fun creating.  You might actually start collecting dingbat fonts.

To find out how to install a font go to: http://www.websitetemplatedatabase.com/photoshoptutorials/25-installing-new-font

Building a Joomla Component – Setting Up the Basic Structure

 

Setting up the Directory Structure

The first step in building a Joomla! component is to set up the basic directory structure and files to support it.  There is a /components directory located in the root Joomla installation folder.  This folder contains files and other folders pertaining to the front end (what web site visitors see) of your component.  Also located in the root folder of your Joomla! installation is a folder setup like this: /administrator/components.  This is the folder where your back end administration files and folders go.  The naming convention used for the folder where a Joomla! component actually exists is com_mycomponent, where mycomponent is the name of the component.

 

When the component is called from the backend or from the front end, the Joomla framework automatically looks for a unique .php file named after the component.  An example will help illustrate this setup:

 

If I were developing a mortgage calculator (mortcalc), I would use the following directory setup

            [joomla_installation]/components/com_mortcalc/mortcalc.php

            [joomla_installation]/administrator/components/com_mortcalc/mortcalc.php

 

Registering Your Component in the Joomla! Database

To create access to your component from the Joomla! administrator navigation menus, you need to register the component in the Joomla database.  This is done by making an entry in the jos_components table.  If you setup your Joomla! database so that it uses a table prefix other than jos_, your components table name will obviously be slightly different.  The pertinent fields from that table, which you’ll need to specify when making your component entry, are name, link, admin_menu_link, and option.  These fields set up the Joomla! internal navigation for your component so that it can be referenced from the Components menu and so that it can be linked to on the frontend from a Joomla! menu using the standard component link.

 

After you have executed the SQL (either with an SQL statement or using a graphical interface) to register your component, you will then see it listed under the Components menu of the Joomla! administrator section.  The value you entered in the name field will be the name that shows up on the Components menu.

 

Moving Forward
With these two steps behind you, all that’s left to do is code the functionality of your Joomla! component, right?  Obviously there is a lot of work ahead now that you’ve set up the basic structure.  To make the most of your component and the Joomla! extension framework, you should familiarize yourself with the Joomla! extension classes.  Joomla! provides class structures and a development framework that simplify performing such tasks as creating toolbars, handling the logic between your database, the administrator setup, and providing a useful experience for end users of your component.

bloggerclassicview

Switching from Blogger Classic to Layout View (and vice-versa)

In 2009 Blogger introduced a new layout setup for bloggers using their blogging platform.  The new setup simplifies the process of changing the look and feel of your blogger site.  In the past, you had to get more into the nuts and bolts of the HTML and CSS affecting your blogger template if you wanted to make substantive changes.  The new layout allows you to make changes using a more push-button type approach.  Although Blogger still allows users to stay with the Classic view, any time you make a change to your blog layout using the Classic view, you are prompted to upgrade to the updated system.

Here are some images that illustrate the difference between the classic Blogger layout and the new one.

Blogger’s classic view, shown above, looks much simpler than the new one.  However, the only real push-button feature available with the classic view is the ability to change the NavBar color.  The new view, shown below, allows bloggers to add and remove gadgets and to customize the gadgets without having to sort through HTML markup and CSS style tags.

To change from Blogger’s classic view to the new version, click on the Template tab.  Then click on Customize Design.  You will then be prompted to “Upgrade Your Template”.  Click that button.  Then choose the upgraded template you want to use, and you’re all set up with the new feature layout.

Switching back to Classic View

If for some reason you want to switch back to the classic view, Blogger accommodates doing so.  To switch back, click on the Layout tab, and go to Edit HTML.  Near the bottom of the screen is a link that says “Revert to Classic Template”.  Click on that link. You will be informed that the classic design you currently use will be saved for you to use later, and you’ll be given the chance to okay the change or cancel it.

By saving the classic version of the template, Blogger makes it easier for bloggers to switch to the upgraded system without worrying about not being able to go back to their former template.  Should you be hesitant to move to the updated setup because you have an affinity for your classic look, you can try out the upgraded layout, and if it doesn’t work for you, you can restore your classic view, even if it’s been personalized, the same as you had it previous to upgrading.

Blogger Trick: Using JSON APIs with Blogger to Include Recent Posts with your Template

My wife was designing a blogger template, and she wanted to include a section for recent posts.  There are plenty of Google widget code sections available for download on the Internet that allow a Blogger user to add a Recent Posts section to a blog.  However, the theme for the Blogger template required the feature to be included as an integral part of the template rather than being optional.  I’ll show you how we accomplished the task.

Blogger automatically generates an XML news feed for your blog.  The feed allows people to subscribe to your blog so they’ll receive notices when you publish new posts.  This automatically generated news feed is located at myblogname.blogspot.com/feeds/posts/default.  For your particular blog, substitute your actual Blogger sub-domain in place of myblogname.  If you enter your blogspot URL followed by /feeds/posts/default into a browser, you will see the feed for your blog in your browser window.

Accessing the feed
Accessing your blog’s feed is done by using a technology called JSON (JavaScript Object Notation) through a callback.  I’ll explain what I mean by that.  You need to do two things: 1) create a JavaScript function to process the feed data;  2)Access the feed data and initiate the callback process by using some query parameters.  Here are the technical details.

Inside the blogger template, I placed a piece of JavaScript code (which I borrowed from one of the widely available widgets I referred to earlier) inside the <head>  section of my wife’s template using the Blogger template editor, which is accessed from a Blogger account by going to Layout -> Edit HTML.   The script essentially accesses the feed through the json parameter, parses out the blog titles for the last numposts (this variable is specified in the callback mechanism explained later) blog entries, and writes them out to the web document (as links to to actual blog posts) at the point from which the function is called.  Here’s the function:

<script type=’text/javascript’>
//<![CDATA[
function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];

    var posttitle = entry.title.$t;

    var posturl;

    if (i == json.feed.entry.length) break;

    for (var k = 0; k < entry.link.length; k++) {

      if (entry.link[k].rel == ‘alternate’) {

        posturl = entry.link[k].href;

        break;

      }

    }

    posttitle = posttitle.link(posturl);

    var readmorelink = “(more)”;

    readmorelink = readmorelink.link(posturl);

    var postdate = entry.published.$t;

    var cdyear = postdate.substring(0,4);

    var cdmonth = postdate.substring(5,7);

    var cdday = postdate.substring(8,10);

    var monthnames = new Array();

    monthnames[1] = “Jan”;

    monthnames[2] = “Feb”;

    monthnames[3] = “Mar”;

    monthnames[4] = “Apr”;

    monthnames[5] = “May”;

    monthnames[6] = “Jun”;

    monthnames[7] = “Jul”;

    monthnames[8] = “Aug”;

    monthnames[9] = “Sep”;

    monthnames[10] = “Oct”;

    monthnames[11] = “Nov”;

    monthnames[12] = “Dec”;

    if (“content” in entry) {

      var postcontent = entry.content.$t;}

    else

    if (“summary” in entry) {

      var postcontent = entry.summary.$t;}

    else var postcontent = “”;

    var re = /<\S[^>]*>/g;

    postcontent = postcontent.replace(re, “”);

    if (!standardstyling) document.write(‘<div class=”bbrecpost”>’);

    if (standardstyling) document.write(‘<br/>’);

    document.write(posttitle);

    if (showpostdate == true) document.write(‘ – ‘ + monthnames[parseInt(cdmonth,10)] + ‘ ‘ + cdday);

    if (!standardstyling) document.write(‘</div><div class=”bbrecpostsum””>’);

    if (showpostsummary == true) {

      if (standardstyling) document.write(‘<br/>’);

      if (postcontent.length < numchars) {

         if (standardstyling) document.write(‘<i>’);

         document.write(postcontent);

         if (standardstyling) document.write(‘</i>’);}

      else {

         if (standardstyling) document.write(‘<i>’);

         postcontent = postcontent.substring(0, numchars);

         var quoteEnd = postcontent.lastIndexOf(” “);

         postcontent = postcontent.substring(0,quoteEnd);

         document.write(postcontent + ‘…’ + readmorelink);

         if (standardstyling) document.write(‘</i>’);}

}

    if (!standardstyling) document.write(‘</div>’);

    if (standardstyling) document.write(”);

}

if (!standardstyling) document.write(”);

if (standardstyling) document.write(”);

document.write(”);

if (!standardstyling) document.write(”);

 

}

//]]>

</script>

 

In order to have the above code executed, we need to insert some JavaScript code at the point in the blog template where we want to have the Recent Posts inserted.  The code will need to tell the Blogger system to run our JavaScript showrecentposts code when it’s called.  Here’s the JavaScript block of code to accomplish that.


<script style=’text/javascript’>var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 30;var standardstyling = false;</script>

<script src=’/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts’/>

 

This block of code first sets some JavaScript variables so that they’re available when our showrecentposts function is later called.  You’ll notice that numposts is among those variables listed.  numposts determines how many recent posts will be displayed.

 

The script block following the variables tells Blogger to access the news feed for the current blog (/feeds/posts/default), order the feed entries by the date they were published (orderby-published), set up a JSON callback (alt=json-in-script), and call our function to process the feeds (callback=showrecentposts).  The important query parameters to note in the process of using a JSON callback are 1) alt=json-in-script, which tells Blogger we want to access the feed with a JavaScript function; and 2) callback=showrecentposts, which tells Blogger to call our showrecentposts function.  It’s important to note that the name we use in the query parameter must match the name of our function.

 

To summarize, we were able to integrate a Recent Posts widget as part of a Blogger template by using the automatically generated Blogger feed and the JSON callback functionality to run a JavaScript function.  I hope you found at least some part of this explanation helpful.

egret-rhino

Hosting Your Own Domain Name on Blogger

The popularity of Blogger has made it so that the Internet is littered with thousands of blogs that look something like this:  http://myblog.blogspot.com.  What about those bloggers who wish to take advantage of all the benefits of blogging from a Blogger account (free hosting, easy customization, gadgets, etc.) without making it so obvious that they’re part of the thousands of blogging freeloaders, riding on Blogger’s back like an egret on a rhino?

 

Many bloggers might be surprised to find out that a domain name can actually be mapped to a Blogger URL so that the blog that exists at this address:  http://myblog.blogspot.com can be accessed by going to this address:  http://www.mydomainname.com.  Here’s how to do it.

Changing Your Domain Settings at Your Registrar

Changing the location of your domain name begins at the same place you registered your domain name.  I use Netfirms.com to register my domain names ($6.99/year), so the screen shots you’ll see here come from Netfirms’ control panel.  The interface for other registrars may be a bit different, but the concept is the same.  You need to create a CNAME entry for the www sub-domain of your site.  You also need to edit the A Record entries for your root domain to have Blogger IP addresses .  

To begin, I click Domains->Domain Manager. 

From the Domain Manager screen, I click the Add button.

Now I’m taken to a page that allows me to add a domain, transfer a domain from another registrar, or set up a sub-domain.  I click on the Sub-domain tab, and enter www for the sub-domain.  I click on the CNAME box to set up a CNAME entry corresponding to the sub-domain.  In the Host Name field, I enter Blogger’s address:  ghs.google.com .

After I’ve entered the www sub-domain and associated ghs.google.com as the CNAME entry corresponding to the account, I click Add.

Now I need to change the A Record for my domain.  From the Domain Manager, I click on the domain I want to redirect to my Blogger account, and I click on the checkbox next to A Record.  I then enter the information that transfers my naked (meaning not prefaced with www.) domain name to be hosted on Blogger.com.  Here are the IP addresses for Blogger.  You should enter these addresses into the first four fields of your A Record list.

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

After I enter these addresses in my A Record fields for my domain, I click Update so that the changes will take effect.   At the point, I’m finished making changes at the domain registrar.  The changes will take about 24 hours to propagate throughout the web.

Changing Your Blogger Setting to Complete the Domain Switch

After your domain settings have been propagated throughout the web, you are now ready to tell Blogger to receive your domain name and associate it with the account you have set up with them.  Login to your Blogger account, and click Setting->Publishing to set up the domain redirection on Blogger.  The default page you see involves purchasing a new domain.  Instead, you should click on the “Switch to advanced settings” link, which will allow you to enter the domain information for the domain you’ve already configured to be hosted on Blogger.  On this page, enter your www sub-domain name (that is, include the www in your domain address), and click the box that redirects your domain name without www to the same site as your www sub-domain.

At this point, open a browser and enter your domain into the address bar.  You’ll notice that the contents on your Blogspot account are now visible.  Your old blogspot.com address still works too.  You can access your blog using either address, but now at least you can make it appear as if you are on your own hosting package.

Some Background on CSS

Today’s World Wide Web is definitely not what it was twenty years ago.  I remember one of my first experiences using the Internet in the early 1990s.   A friend of mine invited me over to his house to check out a new technology his family recently set up in their home.  He showed me baseball scores from a website that published sports information.  When he told me that the scores were updated within the previous hour, I was amazed.   I remember that there wasn’t much color or style associated with the feed we were examining.  Just black and white text with team names and scores.

Between that time and the Web 2.0 (enhanced interaction, video, etc.) world we live in now, web pages became much more flavorful.  Advanced arrangements, color, and other effects were brought into the presentation of web content to give the information visual appeal.  Web pages became burdened by tags specifying font styles and color, table markup for setting up the page layout, and other tags that were not necessarily pertinent to the information being presented.  Consistency in the look and feel between one web page and the next for a particular web site became difficult to maintain.

The development of CSS in the late 1990’s brought a welcomed improvement to the web.  With CSS, the presentation tags that determine color, background images, and other aspects of a site’s look and feel can be pulled out from content itself.  A common example of how CSS changes the way web pages are developed uses the old HTML font tag, which was used to specify how the text enclosed within it would be presented.  Here’s an example.  Consider a situation where you want the font for each of your paragraphs to have a particular size, color, and style.  You might use the following markup to accomplish your formatting:

<p><font size=”4” color=”blue” face=”Tahoma”>Some example text…</font></p>

Using CSS, the font tag would be unnecessary.  Instead, your web document would likely access a style sheet (linked to from your page header) that formats every paragraph from a central location. With CSS in place, your paragraph would look like this instead:

<p>Some example text…</p>

The formatting of the font size, color, and face would all be done separate from the content itself.  This makes it easier for search engines and web readers to see the actual content (in this case, “Some example text…”) instead of having to do extra work parsing through the font tag and its attributes. CSS also reduces the amount of work by a web developer by removing the need to repetitively specify how various elements of a page should look.  Although this was a simple example, consider a full page of HTML , with hundreds or even thousands of tags.  The difference between CSS and the traditional HTML tag usage becomes obvious.

Using  CSS provides a few major benefits over the old school HTML standard, including the following:

  • CSS provides the ability to define styles for multiple HTML tags in a centralized location so that they don’t have to be specified over and over again.
  • CSS allows for separation of content from presentation, which makes content more accessible to search engines and web page readers.
  • CSS provides more flexibillty in working with background images, form elements, and other aspects of a web page.  There are many more attributes available with CSS than what could be specified with the deprecated HTML standard.

With a little practice, you can become adept at using basic CSS to format your web pages.  Becoming an expert with CSS then becomes an issue of accumulating experience with CSS properties and their associated values, and learning the effects of how styles can be applied to tags.  You can polish your CSS skills by experimenting with using CSS to arrange and format page mockups.  If you become good enough, you might even become comfortable designing from scratch using CSS.

Creating Google Gadgets

Google gadgets are small modules of functionality (e.g. a clock, a game, etc.) that can be added to Blogger blogs, Google’s personalized  iGoogle pages, and other places on the web.  You can even add them to your own website.  Most users of Blogger are familiar with at least three of these objects.  The default list of Blogger templates automatically come with Followers, Blog Archive, and About Me gadgets installed.  The Followers gadget allows people to connect themselves to blogs by signing on as followers.  The Blog Archive gadget displays old blog posts.  The About Me gadget displays a blogger’s profile.

There are hundreds of thousands of gadgets that have been developed and made publicly available.  Google has a directory of gadgets that can be added to your Blogger site or to a website hosted outside of Blogger.  It’s obvious that Google promotes the development of new gadgets.  They have even developed an extensive programming interface to allow independent web developers to tap in to their system.

What is a Google Gadget?
Google gadgets are made up ultimately of an XML file, which gives instructions to Google regarding the configuration of your gadget.  To submit a gadget to Google, you simply enter the URL of the location where your gadget XML file exists and click submit.  Google finds your gadget, verifies that it works correctly, and then adds your gadget to its database so that it can be presented to millions of gadget users across the Internet.

Gadgets can be as simple as a line of text, as in the following “Hello, world” example:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
  <ModulePrefs title=”hello world example” />
  <Content type=”html”>
     <![CDATA[

       Hello, world!

     ]]>

  </Content>
</Module>

 

On the other hand, gadgets can be complicated pieces of JavaScript code that run Flash applications and interact with databases.  The complexity of your gadget determines to some extent its usefulness.  Depending upon your intentions for developing a gadget, you may need to improve your JavaScript, Flash, and other programming skills.  If you create an appealing gadget and submit it to be included in Google’s directory, it could mean a lot of traffic for your website.

Google publishes a fair amount of technical information to help gadget developers.  You can read more information about developing gadgets at Google’s gadget page:  http://code.google.com/apis/gadgets/

Blogger Trick: Using the pageName Variable Instead of pageTitle for SEO

The default templates available for blogs hosted through Blogger.com use a variable called data:blog.pageTitle to create the text that goes in the <title> tag of a Blogger post entry.  If you go to Layout -> Edit HTML to look at the XML code that makes up your current Blogger template, you will likely see this section of code:  <title><data:blog.pageTitle/></title>.  If you want to optimize each of your blog pages for the search engines (thereby bringing more traffic to your blog), you can change this tag so that the keywords displayed in the title tag for each of your pages aren’t watered down.

Continue reading