tutorials on Javascript Date Objects

If you have had any experince of working with the date object in javascript you will know it is particularly bad at this task, however its not so much that its bad, more that there is a lack of resource on the subject. If you were looking for explanations on a language like PHP you can go to php.net which is a definitive guide on the subject, but javascript has nothing like this, and relies on you trawling through forums which tell you everything except what you want to know on the subject. However fear not as I have put together some resources, which may help you do whatever you want to do with dates in javascirpt.

The chances are you want to do something specific with a date, for info on date formats check out Date Funcitons on matt kruse’s website, hes got some pretty nifty tools to help understand javascript expected date format cunnundrum. But the basic concept to remember when you want to do anything with a date, is that it must be in a correct date format for javascirpt to recognise it. Once you have this, thats half the battle, from then on you can do whatever you would like with it.

One of the great features of the jquery is its capacity for plugins. If you have jquery installed already, you should definatly try out jquery.date.js This is a powerful tool for doing everything and anything to date objects, the code itself explains how the code can be applied.

Of course if what you are looking for is far less complicated, it is always worth checking out tizag, for a comprehensive guide to the date object()

Hopefully these resources will prove useful resources in helping you do what you want with date objects.


FancyBox – A jquery image gallery plugin

There are a lot of javascript image galleries out there which you may want to use on your website. I am an avid fan of jQuery – so when I stumbled upon a Jquery plugin called FancyBox I was instantly taken. Its a pretty simple plugin that uses basic lightbox technology, but its got a really well rounded finnish which will enahchance any page it is placed on.

Now this plugin does have some documentation, but I thought i would try to simplify it for the more design focused readers out there.

Step 1 – Download It

Download the latest stable relese of the plugn

down.png

Step 2 – Plug It In

once you have downloaded the plugin you will want to uplaod it to you server. For this to work you will also need a copy of jquery, which you can download from jquery.com

Step 3 – Include It

Its important that when you call the files in you call jquery before you call ‘jquery.fancybox.js’ as it will only work if you call in the framework first. So it should look like this:

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery.fancybox.js" type="text/javascript"></script>
<link href="/css/fancybox.css" rel="stylesheet" type="text/css" />

Step 4 – Use It

Now comes the fun part, take your thumbnail version of the image and place it in a link to its bigger brother, this should look something like this;

<a href="big_image.jpg"><img src="small_image.jpg" /></a>

Step 5 – Activate it

To activate the plugin simply call it, if you want to control a few additional features you can control these in the plugin call:

$(function() {
  $("p#test3 a").fancybox({
    'zoomSpeedIn': 0,
    'zoomSpeedOut': 0,
    'overlayShow': true
  });
});

And thats all there is to it, so in 5 very simple steps you can have your own awesome image gallery


Turn off autocomplete on a form input field

I was hunting High and low for the correct HTML markup to turn off autocomplete functionality for a form text input. Its extemely simple to use, simply include it into you input tag like so:


<input type="text" name="yourFieldName" autocomplete="off" />

This should stop your input from autocompleting, which can be useful in situations like credit card inputs and such


SEO Tactics For Improved Search Engine Optimisation

Although no one truely knows the google search algorithm, there are definatly some fundimental improvements you can make to you website to benefit from Search engine Optimisation. I have practiced what I will preach so I can vouch that all these tactics will work in improving your google listings. So before you start thinking about going to a third party agency who can promise you everything but tell you nothing, why not try implimenting these simple steps.

Step 1 – Get google on board!

Google offer a multitude of tools to enable you to attain better search rankings, one of the first steps you should take is to setup you webmaster tools. This is free to do and if you already have a google account then you wont need to signup. You should aslo upload an XML sitemap, if you havent already, if your  not sure how to go about this check out XML-Sitemaps. These are powerful tools to have available as they will help you understand who google crawlers index your site and what possible areas could be improved upon, this information is all freely given unto you, so snap it up.

Step 2 – Function Before Form

When designing a website try to think about layout, there are particular css tricks wich will enable google to read information quicker, some examples are given by matthewjamestaylor.com. There is a key to achiveing a more search engine friendly design. Organisation of headers and mothodical indexing of information are all integral to a more optimised website.

Step 3 – A Picture wont tell google a thousand words

You may well want to use imagery in your design, however when doing so give consideration that googles crawlers can’t read words in images and unfortunalty ‘alt’ tags will only take you so far. So when you plan your layout try to use html for your content, with developments in CSS there are a lot of smart tricks you can do to improve the look of fonts on a page, why not spend a bit longer tweaking these, the key is to get the balance between look and readability, dont sacrifice your desgign to comply with google, use this to your advatange and get the best of both worlds.

Step 4 – W3C, a boys best friend

If you have a W3C valid html site will most definatly help you get up the listings, think of this as a more indirect approach, if you create a website which works in every major browser, then the chances are that people who visit your site, be it on IE or Firefox will get a fully valid website which will format correctly, and in doing so will mean it becomes trusted and returned to.

Step 5 – Dont spalsh!

It has become quite fashionable to use spash pages on websites, which do nothing more than look pretty and get in the users way. This is a 100% mistake, as all you are doing is making your index page that much harder to crawl for relevant content, and in doing so your shooting yourself in the foot. To maximise your web pages effectivness your index page should represent what your site is about, and describe this through headings and content text.

Step 6 – Share the love

When you write, a blog or any form of infomation you should make your links more discriptive, dont just write ‘click here’ make sure yor links are relevant as possible. This process of  ‘back linkning’ is an extremely powerful tool for recieveing higher volumes of trafic through your website.

Step 7 – Its about timing

Your website is given a grading by google dependant on a multitude of elements, one of which is the speed at which you web pages load. Consider that you are including a header file which has 5 js files included, however your index page only uses 3 of those files, this is all relative to you grading, so if you write pages that only load what is needed, and do this to an optimum level you will be better set to appear higher in google listings. There are tools available to help you see where to improve, one such is Yslow, available with firefox.

If you impliment these tactics you will see improvements in your sites ranking, however even if you do this straight away it may take some time to notice the improvements, its a well known fact that google takes into account the age of a site when choose which come highest,having said this the more time you devote to your website the more return you will recieve from it.


Making Flash W3C Valid

A little while ago I posted a blog, in which I pledged to find a solution to the W3C complience rules which flash seemed oblivous to. Subsequently after doing some research I came accorss this article, written by Drew McLellan in which he reffers to his satay method, by following all the steps and regiging some of the code flash supplies you with, it is possible to have a fully valid flash object within a html page, but more than this, the flash object will operate in I.E, firefox  and pretty much every other browser you can think of.

If you dont want to read through the entire article I have supplied the core essential knowledge you would need to take your original code for a flash object and modify it into the final lightweight structure you will want to impliment into your website.

Consider the following, this is standard published webpage that flash MX 2004 professional would supply you with;

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="odinHeader" align="middle" height="31" width="751"></object>
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="movie" value="flash.swf"></param>
<param name="loop" value="false"></param>
<param name="menu" value="false"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="transparent"></param>
<param name="bgcolor" value="#ffffff">
</param>
<embed src="flash.swf" loop="false" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" name="flash" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="31" width="751">
</embed>

As you can see this is a bulky segment of code which requires calling the flash object as both an embedded element as well as an object. Now to simplify all this, basically all we need to do is switch a few of the standard parameters, to enable our object to embed just like this;

<object type="application/x-shockwave-flash" data="flash.swf" width="751" height="31" id="odinHeader" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
</object>

Notice how the first line has chnaged somewhat dramatically, we have stripped out pretty much all aspects that were not working correctly, then substituded some of these tags with new recognised W3C valid componants. The result is a well crafted fully W3C certified flash object on your page. job done!


OOP IN PHP 5

PHP5 offers some remarkable improvments for PHP programmers. This tutorial is aimed at describing what Object Orientated Programming is and how it can be utilized. Lets go over the basics.

OOP can be broken down into 3 main componants, you have classes, methods and objects. methods(also know as funcitons) live inside classes and in order to call them out, we use objects. Its as simple as that. To better understand this lets take a look at the code.

So first off we want to create a new class, this can be done like so;

<?php
//define a new class
class myClass{
}
?>

Congratulations you have created your first class! All we have done is used a reserved word class then followed it with our own unique name, in this case myClass. The next step would be to put something into this new class, for example a method;

<?php
//a class
class myClass{
  //define a funciton
  function hello(){
     $shout="hello world";
    return $shout;
  }
}
?>

Ok nothing new here, just a simple method which will echo out a variable. Now we need to get to the method inside the class, this is where the object I mentioned comes into play;

//a new object
$speak = new myClass;

This may look a little different from something you have encountered before, but its pretty straight forward, all we’re doing here is declaring a new object which has a value of our new class, this will make more sense as we go on;

//access our method
echo $speak->hello();

Here we want to access our method in our class by calling our object, so we use the -> operator to do this,

Finally put it all together and we are left with;

<?php
//a class
class myClass{
  //define a funciton
  function hello(){
    $shout="hello world";
    return $shout;
  }
}
//a new object
$speak = new myClass;
//access our method
echo $speak->hello();
?>

Its at this point you may well be wondering what the point to all this is, I mean this is nothing but a more complicated way of writting your scripts. The benefits come when you want to write more sophisticated applications, and your time spent re writting your code will pay dividence when it comes to maintaning and updating them in the future.