Web Programming – Page 2

Add Interactivity with Google Maps

Writing for two blogs gets confusing sometimes. I post stuff over at Epiblogger that I really want to post here. This time I wrote a post about how to add Google Maps to your blog. Fortunately you can use the Google My Maps feature on any site so it is not restricted to just blogging.

The second way to add Google Maps that I talk about is using the Google Maps Plugin for WordPress. The great thing about the Google Maps Plugin for WordPress is you can use it even if you are not using WordPress. If you are looking for an easy way to add Google Maps to your website without fussing with all of the Javascript then this might be a good solution for you. I know I am going to put it on my list of tools to easily add Google Maps to websites whether they are using WordPress or not.

Include, Include_once, Require, Require_once

I have been working with several new clients lately, mostly helping them update their websites with new content. Most of these websites were created by other companies or individuals and I am always amazed at how people create websites. One of the things that I am always amazed at is why people don’t take advantage of using includes to make managing a website easier. Individual web pages in a website are made up of many common elements: headers, menus, footers. There is no reason to duplicate these items across the website when a single file can be included on all the pages to make management of the website easier. Most web servers have PHP installed on them, so may use of it to make managing your website easier.

The PHP include() and include_once() functions will allow you to include those common elements in all pages. If you have a common menu you can use a simple include such as:<?php include('menu.php'); ?>
You might have to change your path. For example I like to keep all the include files in a separate folder so my includes will often look something like this:
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/menu.php'); ?>

To edit the menu and make the change across the entire website all I need to do is edit the one file menu.php. This can save you a considerable amount of time, especially if you have hundreds or thousands of web pages to edit.

The PHP functions that are most often used to include files are (from the PHP Documentation):

Include
The include() statement includes and evaluates the specified file.

Include Once
The include_once() statement includes and evaluates the specified file during the execution of the script. This is a behavior similar to the include() statement, with the only difference being that if the code from a file has already been included, it will not be included again. As the name suggests, it will be included just once.

Require
require() and include() are identical in every way except how they handle failure. They both produce a Warning, but require() results in a Fatal Error. In other words, don’t hesitate to use require() if you want a missing file to halt processing of the page.

Require Once
The require_once() statement includes and evaluates the specified file during the execution of the script. This is a behavior similar to the require() statement, with the only difference being that if the code from a file has already been included, it will not be included again.

When to use include() or require() can be an entire other post, but generally I use require() when the website needs that file to run. Site wide configuration files for example. If the file cannot be included it will stop the site from running. I use include() when it is less critical, so menus, headers, footers. The website might not look great if the menu does not get included but it will still display the information to people.

Google Hosting AJAX Frameworks

The title does not do this post justice, but perhaps that is becuase only web developers will get excited about this. One of the things about creating websites using AJAX is the size of the Javascript frameworks that need to be loaded into the site so the user can use the website. Sure you can speed up your website with GZIP compression and send the Javascript frameworks compressed and once the user has them they will be fine as long as they stay on your website. Unfortunately users don’t just use your website. They move on to another great AJAX enabled website and have to download the same Javascrpt frameworks all over again.

To make the user experience better for users all around the globe it would be great if the Javascript frameworks could be called from one central location and then it would be cached by the users browser and every visit to every website that uses that Javascript framework would be made faster. To make this possible Google has started to host five Javascript frameworks to help speed up access to your favourite websites. The five Javascript frameworks that Google is hosting include:

This could dramatically improve end user experiences on AJAX enabled websites. It can also save on bandwidth and improve load times for websites all around the world. Think about how much faster your favourite WordPress blogs will load if they are all loading the prototype framework from Google instead of your web browser downloading a new version on every blog. If you are interested in using the Javascript frameworks that Google is hosting take a look at the AJAX Libraries Developer’s Guide for more information about how to load the frameworks into your websites. I know I will be looking at some clients websites and evaluating if they can use this service from Google. It could improve load times and make the websites react faster for users.

Shadowbox

I have talked about Lightbox and other Lightbox like Javascripts before, and I wanted to add another one I just found to the mix for you. I StumbledUpon Shadowbox yesterday and almost clicked away as fast as i got there but something in the description caught my eye: “Standards”. I then read a little further and discovered that not only is Shadowbox valid HTML is is also built so you can use it with different frameworks. So if you are already using Prototype.js in a project you can use Shadowbox, or if you are using jQuery you can use Shadowbox.

Shadowbox also supports more than just images, so you can use it to load external web pages, videos, Flash and it even supports client side image maps. I tried the demos out and was impressed. I have not had a chance to try the script in an actual website yet, but it is now high no my list of Lightbox Javascripts to use.

I could have used it a couple of weeks ago when I was working on a project that uses Prototype. maybe I will go back and give it a try on the site I was working on for the next time I have an update from that client.

Fade Out Bottom

I was browsing around today and came across this neat effect that makes the bottom look like it fades out to the background colour. I don’t know if I would ever use something like this but I like the effect. It uses a PNG image with an alpha layer positioned in a DIV tag at the bottom of the screen with a high Z index. You would have to do some trickery to make Internet Explorer 6 play nice with it since Internet Explorer 6 does not render alpha layers in PNG images properly.

Check out the demo here. You can also download the files to play with yourself.

The Mobile Web

I recently bought a new cell phone. I usually just get the basic normal cell phone without a lot of extra features, but this time I splurged and got more of a gadget phone. I bought a Nokia 6275i on the PC Mobility network. For those that read my blog that are not from Canada that is the Presidents Choice mobility network. I had been trying to get the same phone from Virgin Mobile but it was impossible. I did not know a lot about the PC Mobile network, but the coverage map did not look much different than the Virgin Mobile network so I thought I would take the chance.

Nokia 6275i The phone has a lot of bells and whistles that I still have not learned how to use all of them. I really like the camera that is built in. It is a 2 megapixel camera, not bad for a phone. It is the same resolution as our regular camara, and the quality is not bad. I don’t have any photos on my computer yet so I can’t show you. It has come in handy to take some snaps of the kids. It also has a media player, most importantly it is an MP3 player. I wanted an MP3 player to hook into our car stereo on trips. Sounds pretty good. Easy to use.

I have also found it handy to use the phone to check email and read through my RSS feeds. Comes in handy when I am off at a clients office or waiting at the doctors office, dentist etc. I have not spent a great deal of time using the mobile web, mainly becuase my previous cell phone on the Rogers network, cost a fortune to connect. This new phone has flat fee package for Internet usage. To the point of this post, using the phone got me interested in how to create a mobile website, since most websites don’t look great on cell phones. I wrote a post up over at Epiblogger looking at seven mobile website builders so if you are interested in maybe building a mobile website go and take a look at what discovered.

Also you might be interested to know that the phone works well. I have only made two calls on it, but they were clear. I had my doubts about PC Mobile, but so far they have been as good or better than Rogers. I will never get a package again, only prepaid cell service for me.

DOMtab – Navigation tabs with CSS and DOMscripting

I have been wanting to redo a couple of my own personal websites to make more screen real estate available and make information more available in a compact space. I have seen tabs done of other websites and thought that would make a nice addition to a few of my own websites. I did not want to program my own and thankfully with a little searching I discovered DOMtab. It is an easy and convenient way of adding tabs of information to a website.

If you are looking for a way of making more screen real estate available take a look at DOMtabs. I am in the process of trying it out on one of my websites this week and the installation has been going well. I have not put the new look up yet, but I hope to this weekend if I get some time to finish off the changes.

Just so you know the license does not allow developers to resell the script.

Opening Links

I had a discussion today about how to open external links on a website. The question is, do you open external links in the same browser or do you open them in a new browser window?

I have to admit I hate it when websites open links in new windows. I find it as annoying as websites that resize my web browser or play annoying music in the background of the website. It is not in the best interest of your user to force a link to open in a new window. If you absolutely must open a link in a new window clearly mark the link as opening in a new window so users have some advance warning before they click the link.

Remember that ultimately users are in charge. If they prefer to open links in new windows they have the ability to do so by using either a right click on the link and choosing new window/tab or by clicking the link with their scroll wheel. There are still many users out there that are not using Internet Explorer 7 or Firefox 2 and don’t have tabbed browsing. Don’t force new windows on to your users, or you might not have them as users for long.

I open this up to you now. Should you or should you not open links in new windows?

Trackback Spam on the Rise

Anyone else notice a rise in trackback spam recently or is it just me they feel like picking on? The last few days I have been getting upwards of 50 trackback spams. Thanks to Akismet I have not seen any of them go through, but I decided that I was tired of deleting it and letting the spammers get access to my server resources. A quick look in my logs showed that the spam was not coming from the same IP so banning the IP or IP range would be pretty much useless.

Here are some entries from my log file:

Host: 216.104.34.250
/2007/03/text-link-ads.html/trackback
Http Code: 200 Date: Dec 18 20:24:03 Http Version: HTTP/1.0 Size in Bytes: 78
Referer: –
Agent: TrackBack/1.6

Host: 91.186.21.51
/2007/02/blogger-label-list-for-ftp-published.html/trackback
Http Code: 200 Date: Dec 18 20:22:38 Http Version: HTTP/1.0 Size in Bytes: 78
Referer: –
Agent: TrackBack/1.6

Host: 66.90.104.22
/2007/02/has-digg-jumped-the-shark.html/trackback
Http Code: 200 Date: Dec 18 20:20:28 Http Version: HTTP/1.0 Size in Bytes: 615
Referer: –
Agent: TrackBack/1.6

Notice anything in common? The User Agent strings are all the same: Agent: TrackBack/1.6.

A quick Yahoo search and I turned up this post Spiders and Bots .htaccess Ban List, which looked like just what I needed. There are tons of bad bots and user agents out there, and this list is only a small number of them I am sure. I really only want to block the Trackback user agent and the libwww-perl user agent since I have been getting several hacking attempts from a libwww-perl user agent.

There are several ways I could have done this but I thought I would try adding this first and see how it goes.

#block bad bots including trackback bot SetEnvIfNoCase User-Agent "^libwww-perl" bad_bot SetEnvIfNoCase User-Agent "^TrackBack" bad_bot

<Limit GET POST> order allow,deny allow from all deny from env=bad_bot </Limit>

I may have to edit the Trackback bot line since I did not include the version number, but I will leave it like that for a day and see what shows up in my log files. I will update this post if/when I do edit the Trackback bot line.

Thanks to Brontobytes Blog for the .htaccess code. It saved me lots of time.

Hope this helps someone that is having problems with automated trackback spam.

Spiffy Corners

It seems like I am always looking for a new way of creating rounded corners for designs. I usually just take the easy way out and use images. In my search this time around I came across a website called Spiffy Corners. Spiffy Corners is a generator that will create the html and css needed to create anti-aliased corners. The best thing is it does it without using images or javascript.

The generator is easy to use, and it offers the ability to create 3 5 or 9 pixel corners. I was using it with Firefox and I could not select the 3 or 9 pixel corner options. It appears that the other options are not available yet. The 5 pixel corner is nice and the html and css appear to work well. I did not test it extensively, only in Internet Explorer 7 and Firefox, so don’t quote me that it works in all browsers.

The license for Spiffy Corners states:

May be used for personal and business use, but may never be sold or used in a product that is not free without my consent.

You should be fine if you want to use the code in your own website. If you charged for access to your website you might have a problem, but I could be wrong about that.

Overall Spiffy Corners is a nice html/css generator for corners. It would be nice if the options for different sized corners worked, but perhaps that will come in the future. As for the project I was working on that needed rounded corners, I ended up using images in the end. Perhaps on my next project.