Archive for the ‘Website Coding’ Category

WordPress, my new favorite Blog/CMS platform

Mar 27, 2011 Web and Product Reviews, Website Addons and Upgrades, Website Coding

Since the days when open source CMS applications began coming out, I’ve always been a bit unsure about which ones were the best to use for what. At the beginning, none of them were really very good, but now they have evolved and improved so much, there are now too many good ones to choose from.

Drupal versus Joomla

For the last few years, two of the most popular CMS platforms have been Drupal and Joomla. You can even see many job offers today looking for people who can develop using Drupal or Joomla. They are definitely among the most popular, that’s for sure. However, I don’t like either of them, and find their admin systems, especially, to be clumsy and overly-complicated.

Website Baker

My first favorite CMS was one that was not well-known at all when I first started using it. After trying out all the most popular ones, though, and then giving Website Baker a try, I was hooked instantly. It was so much simpler than all the others, and I found, as a programmer, that I could do pretty well anything I wanted with it to create custom functions and modules for customers. Best of all, though, was the admin system. It was so simple, almost anyone could just log in and start editing pages instantly. It also had the ability to allow an editor to use multiple menus and edit multiple sections on a page right out of the box.

Unfortunately, Website Baker is not being supported very well these days, and production and updates are few and far between. I still like it a lot, but it’s now not my only recommendation for a CMS.

Another thing that Website Baker can’t do is enable you to add a blog to your site. Well, there is a simple addon for allowing people to comment on pages, but it’s as simple as it comes. Instead of using Website Baker for the blog part of the site, I would use Website Baker for the CMS, and then just used WordPress for the blog part of the site. That required two different logins into two different administration areas, so it was a bit inconvenient to have that kind of setup.

WordPress - the best solution for a blog and CMS

In the last year, I’ve been doing a lot of freelance work for a local company. When I first started, they told me that they wanted to create CMS sites for customers using WordPress. At first, I didn’t think that was going to work out so well, but when I started to learn more about WordPress and how it could be used as a CMS, I gradually started to convert. As a programmer, and by adapting the skills I learned while working with Website Baker, I was able to become quite proficient at using WordPress in a short amount of time.

The best thing about WordPress is that it can be used to both manage your blog and manage your website content. Of course, since it was first developed as a blog platform, that is where its main strength lies (WordPress is by far the most used blogging platform), but its CMS features are also good for doing what most people need done.

To learn more about WordPress, I recommend checking out the offical Wordpress site at http://www.wordpress.org.

In my next article, I’m going to share some information about some of the things I do when I’m developing a WordPress site. Stay tuned.

Tags: , , , ,

How to scale SlideShowPro movie to fill browser window

Apr 23, 2010 Website Addons and Upgrades, Website Coding

Here is a challenge that has stumped many users of SlideShowPro over the years, and it’s something that I have managed to figure out just recently with the help of a lot of research and trial and error. 

The situation is this: you or your client wants his slideshow to appear in a browser window and take up 100% of the width and 100% of the height of the browser window, no matter what size, and have the slideshow resize in real time as the browser window is dragged and resized. 

Read the rest of this entry »

Tags: , , , , , ,

Checking browser compatibility with Browser Shots

Mar 25, 2010 Web and Product Reviews, Website Coding

For anyone who has been coding in HTML for any length of time, one of the biggest challenges has always been with trying to get a website to look the same in different browsers.

There was a time when you could program your site to work with Internet Explorer, and not have to worry too much about the other browsers; though, if you wanted to be considered as a professional company, you would have to try to make it look good in Netscape, too. Those were the only two relevant browsers.

Read the rest of this entry »

Tags: , ,

Semantic Fanatics – people who take Web standards way too seriously

Dec 16, 2009 General, Website Coding

Working as a freelance website coder for 10 years now, I’ve long gotten used to relying on the Internet to have my questions answered and problems solved.

Now, I’m pretty strict to myself at trying to do my code properly. For instance, I would never add in a tag attribute without putting quotes around the attribute (i.e., width=”20″ instead of width = 20). That was one of the first things I learned in college when I started studying HTML — luckily I had a C programmer for a teacher who taught me high standards for coding.

Read the rest of this entry »

Tags: , , , , ,

Make money online with Google AdSense – getting started

Nov 18, 2009 Money Making, Website Coding

If you are one of the millions who enjoy surfing the Web these days, you’ve definitely seen them. In fact, it’s getting harder and harder to find a site now that doesn’t have them displayed somewhere. I’m talking about those little ads you see with a title, short description, and link, and that usually display Ads by Google at the top or bottom of the ad box. They are the ads that are generated by Google Adsense.

Pretty well anyone with a website or blog can take advantage of Google AdSense, and it is fairly easy to set up. You don’t even necessarily need to know HTML (if you use some kind of widget or design view editor), but it helps if you can understand it a bit. Just follow these steps, and you’ll soon be running your own AdSense ads.

Read the rest of this entry »

Tags: , , , ,

Converting a static website to a CMS site – part 1

Nov 10, 2009 Website Addons and Upgrades, Website Coding

Yet another website upgrade that is becoming more and more popular these days is giving someone the ability to edit their own content themselves. This kind of site is usually made up of: (a) an administration section for making changes to page content; (b) a database for storing the content; and (c) the live pages that the public sees after the content is grabbed from the database. It’s called a CMS, which is an acronym for Content Management System.

It’s easily understandable why someone would want to have their site changed, or even produced from the beginning, to be self-editable. For one thing, it eliminates the need of having to go to a website programmer whenever even the smallest changes need to be made. It can also give a website owner a feeling of control over his site, since he is now able to edit his own content, and add his own pages.

Giving the administrator the ability to edit the content of her own site does not come without its problems, however. If the administrator is able to make her own changes to her site, and given too much power over what can go into the content area, it can adversely affect the look and feel of the site. So, usually, we will have to impose limits on what the administrator can do, by removing buttons and functions from the WYSIWYG (what you see is what you get) editor that is typically used for writing and editing content for the pages.

Now, to get started in converting a static website to a CMS site, it’s usually a good idea to fix up the code first. There are actually some really messy, careless coders out there, so the code might be a nightmare for you to work with if you don’t fix it up first. Some things to look for:

  • Code that is not indented properly. Many programmers care a lot more about how much money they can make than about how clean their code is. You’ll often have to start from the beginning of the document, and indent everything properly, so you get a good look at the structure of the site, and make sure all the tags are opened and closed properly.
  • Attributes that are not in quotes.
  • More code is used than is necessary. Some programmers like to nest multiple tables inside each other to do something that often requires no table at all. You shouldn’t have a problem with using tables when they are needed, but often they are over-used.

It’s not necessary that you fix another programmer’s code before converting it to work with a CMS, but it will sure make things easier for you, and you’ll also end up with a cleaner looking site.

Now, you should have a nicely indented, clean looking HTML page for you to start adding your PHP code to in order to get it communicating with your CMS. But which CMS should you use? Now that is a good question. There are so many good ones out there now, it’s not an easy task to pick one out. A lot of people have their favorite one. Some of the more popular ones out there now are Drupal, Joomla, and CMS Made Simple. I recommend doing your own research, though, to find out what people are saying about them. A good site to go to for your research is Open Source CMS. At last count, they had 114 open source CMS applications listed and rated on their site.

Website BakerPersonally, my favorite CMS to use is one that is not nearly as popular as Drupal or Joomla. It’s called Website Baker. I like it, mainly, because of it’s simplicity. Compared to Drupal and Joomla, its code is much lighter, containing less bells and whistles, but still has everything that is needed for a solid CMS. My customers are also able to learn their way around the administration area of Website Baker really fast, which is quite a different experience compared to the other big CMS applications.

In part 2 of Converting a static website to a CMS site, I’ll show you how you can use Website Baker to convert your HTML page into a powerful CMS site that you and/or your customers will be happy with.

Tags: , , , ,

Getting started with XHTML programming

Nov 8, 2009 Website Coding

This short guide is mainly for those who are interested in getting into XHTML programming, and/or improving the style in which it’s done from the beginning. That means that, at a minimum, you have to be able to edit your own HTML pages without having to use a visual object editor such as Design Mode in Dreamweaver. You have to know how to write some code, and understand how to edit and modify the source code of your document directly. Personally, I like using Dreamweaver in Code Mode, but there are many other good text editors out there.

For those who are already familiar with HTML, you might already know that XHTML is pretty well identical, except with a few extra rules that you need to follow, and a few extra lines added in.

Here is an example of a complete XHTML page that has all the necessary components in place for passing the XHTML validity test. It can be used for any site as a starting point, so it might be helpful to you to bookmark this page so you can come back and copy it whenever you need it. The code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en" lang="en">

            <head>

            <title>Website title - the most important item for SEO</title>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="description" content="Description is still important to some
            search engines, and   should be different on every page, even if only
            slightly." />
            <meta name="keywords" content="enter, your, page, keywords, like, this" />

            <link rel="stylesheet" type="text/css" href="style.css" media="all" />

      </head>

      <body>

            <div id="centered-block">

                  <div id="header">
                        <img src="images/logo.gif" width="225" height="46"
                        alt="Your logo" />
                  </div>

                  <div id="content">
                        <h1>Your site content</h1>
                        <p>This is where you can place your content. Normally, you
                        will want to create your navigation above this section, or
                        have it in a left or right column here.</p>
                        <ul>
                              <li>This is an unordered bullet list</li>
                              <li>You can modify the bullet by editing the
                              bullet-01.gif image</li>
                        </ul>
                        <p>Good luck with building the rest of your site!</p>
                  </div>

                  <div id="footer">
                        Copyright &copy; 2009
                  </div>

            </div> <!-- centered-block div ends -->

      </body>

</html>

 

There it is! That’s all you need to get started. Just remember to include all the above code, and you’re all set to begin your next great XHTML site. Actually, everything that was added between the <body> tags is not necessary, but it can really help get you started, especially if you are developing a typical centered site.

You can view the above code in your browser by clicking here. If you want to test it out to make sure it is a valid XHTML document, you can use the W3C Validation Service. Just copy and paste the complete URL from the above site, or from a site of your own, and click the Check button at the W3C site.

Also, remember that for an XHTML document, you must always use quotes around your tag attributes (actually, you should have always been doing this no matter what!), close all tags, and include alt text for every image. Another good practice is to use comments after some of your DIV tags, so you can keep track of where you are, like I did for the centered-block div. Once your code starts to get really long, you’ll sure be glad you did that.

If you don’t have your own basic XHTML and style files for when you want to begin a new project, I recommend using the code above. You will also need a CSS file for styling the above code to make it look the way you want it to look. To make things even easier for you, however, I have created your basic index.html, style.css, set up an images folder, and packaged it all up in a zip file for you. Just download it from here:

  • XHTML starter site (just unzip this and use it whenever you want to start an new XHTML site)

I recommend using the W3C validator periodically, as you are developing your site, to make sure it still passes as a valid XHTML document. It’s pretty easy to forget about closing a tag or breaking another rule that will cause your document to fail the test. Thankfully, the validator does a pretty good job of showing you where your problems are, and why you are getting errors. Good luck with developing your XHTML site!

Tags: , , ,