Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Saturday, January 31st, 2009
Reading time: 2 – 2 minutes
Below you can find a 20 minute screencast will help you grasp jQuery easing while creating a simple animation. Using JavaScript eliminates having to do this using flash or an animated gif. No need to open up that flash program just to change the text, or need to make a whole new gif animation. JavaScript provides all the tools you need to create a superb text animation!
The following is all that is needed to perform a neat jquery easing text animation:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
// make sure your h2's have a position relative
$('h2').css({left:'600px'})
jQuery.easing.def = 'easeOutBounce';
setTimeout(animate, 3600);
});
function animate()
{
$('h2').animate({left:0}, 1000);
}
</script>
This would of course ease your text in, but it would still be visible all on the far left. To fix this you need to wrap this in a div and assign the following properties to it:
div
{
overflow: hidden;
position: relative; /* ie 6 */
height: 100%; /* ie 6 */
}
If you want to find out more, check out a more detailed documentation of jquery easing plug-in.
Posted in Web Programming | 14 Comments »
Tuesday, January 27th, 2009
Reading time: 1 – 2 minutes
Inspired by a comment on my previous blog post titled, PNGs, PNGs, and more PNGs I have decided to record a 15 minute screencast to show you how to use PNG-8 for transparency.
PNG-24 is what most web developer’s use for transparency on the web. It tends to have large file sizes but provides excellent transparency. Using PNG-8 or GIF for transparency doesn’t work near as well… at least normally! There is actually a way to use PNG-8 transparency that is better than PNG-24.
Some benefits are that most of the time it results in smaller file sizes. PNG-24′s are huge culprits of being massive and being a real pain for visitors with a slow internet connection. As well as this, PNG-8 Alpha Transparency actually renders decent in IE6, so no need for those css/javascript hacks to get it to look right.
The trick involved here is that you cannot simply use Photoshop. You have to use Fireworks to create the effect needed. View the screencast above to get shown exactly how to do this!
I suggest you view PNG-8: The Clear Winner if you are looking for more information.
Posted in Uncategorized | 54 Comments »
Monday, January 26th, 2009
Reading time: 2 – 4 minutes
Today, I will uncover the newest debugging tool that I have added to my toolbox. It happens to be the FirePHP extension for Firebug. In this article I will give you an overview of what FirePHP is, why it is beneficial, and finally how to get started using it!
FirePHP is an AJAX Development / PHP debugging tool. It is used as an extension to Firebug, the must-have web development Firefox plug-in. It allows you to log text and variables to your console similar to how you would using JavaScript’s “console.log”.
Using FirePHP means that that you can debug a live site without affecting the actual website content. Obviously you want to stay away from this as much as possible, but the situation will arise at one time or another.
Many times I would have liked to “echo” out a variable to see if it is causing the problem, but you can’t do this on a live site. Now you can use this plug-in to redirect debugging data to the console that normal users will never see.
It also has an advanced variable viewer, and logging capabilities.
In order to use FirePHP there are two components you need to take care of; one being the client-side and the other being the server-side. The client-side is simple enough as all you need to do is download and install the extension like you would for any other Firefox add-on.
One this is done, open up Firebug (F12) and check if there is a blue bug beside the normal Firefox one. If this is the case you have the browser ready.
Now this is the part which is a bit of a pain, because this needs to be done on every server you work with. You will need to download the FirePHPCore server-side library. You then need to upload the FirePHPCore folder to your server, which is located in the lib folder. This can be placed in a non web accessible folder to make it available on all sites under that one server using an absolute path.
Now we should have everything setup, let’s test it out:
< ?php
require_once('/home/user/FirePHPCore/FirePHP.class.php');
$firephp = FirePHP::getInstance(true);
$firephp->warn('test');
?>
Once this is uploaded, you can browse to it and see the word ‘test’ in the console. There are many other ways to debug your variables. To view a complete list, visit the official usage page.
.jpg)
Posted in Web Programming | 2 Comments »
Sunday, January 25th, 2009
Reading time: 2 – 4 minutes
PNGs are a handy tool for web developers to use when creating websites. There are a lot of misconceptions about them, and I hope to clear the air in this article. We will define what PNGs are, how they differ from JPG and GIF, what the misconceptions are, and finally a little bit on how to get them to behave in IE6.
PNG is an image format comparable to JPG and GIF. It stands for Portable Network Graphics. PNG was originally created to eliminate GIFs and provide better compression at a higher quality.
Each image format is still around, and thus means they each have their own strengths and weaknesses. JPG is great for photographic images. Images with gradients and lots of colors are great for JPG. GIF on the other hand is great for logos, and images that have large areas of one color. This normally means there is not a wide range of colors and GIF
The major differences between GIF and PNG are the following:
The following is a skimmed down list of some of the Misconceptions out there about PNG. Don’t feel bad if you have fallen into these misconceptions as I have as well.
I have taken these from a great article on CSS-Tricks titled, Misconceptions about PNG, so please check it out!
This is probably the biggest reason that PNG has not taken off more than it has. Its support is limited at times and Internet Explorer chokes on them. Actually it really only chokes when transparency is involved. To our relief, there are many easy fixes out there for us to use.
I suggest you read, 5 Easy Ways to Tackle IE6′s Transparency Issues from NETTUTS for more of an in depth description of each of the following.
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
< ![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png_bg');
</script>
< ![endif]-->
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
That about does it for PNGs. You are all PNGed out I am sure…
Posted in Uncategorized | 9 Comments »
Friday, January 23rd, 2009
Reading time: 2 – 2 minutes
Being a web developer I have a bit of an obsession with SEO. Getting my site noticed on search engines is a high priority as it gets me more leads, and can put confidence in my clients that I can do the same for them.
On the topic of SEO, I have found myself at the stage of getting quality inbound links for my site. The easiest way to get links is to use directories. Some directories are FREE and others charge you a hefty feed.
Submitting to FREE directories can be of help, but most times you get what you pay for. DMOZ.org is a rare example of a highly regarded directory that is FREE. You know what FREE means? It means waiting months or even years to get your listing included. I still haven’t got in DMOZ and sometimes wonder if they are even accepting submissions.
Using the pay what you get for idea, Yahoo.com charges $299 US to get listed in its directory! WOW… I don’t know about you, but for a small business this is a large chunk of change. Business.com and Best Of The Web are two other paid directories.
My question to you is:
Do you think that it is worth paying the big fee? Or are their better ways to get highly trusted inbound links?
Posted in SEO | 3 Comments »
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!