9 Simply fancy JQuery plugins

I just stumbled on this great website which has very useful and simple jquery ajax applications. I will review each here in a simple way so you can see all of the useful information. This website shows a video tutorial, a text tutorial and a demo for each of the ajax applications.

Please keep in mind that you should use these design elements sparingly and tastefully. Using too many effects in your webdesign can be tacky and detract from the overall design.

To begin, here is the website: http://jqueryfordesigners.com/

Ajax image carousel

This creates an endless carousel with an html list. It also displays a very smooth scrolling effect. This is very simple to set up and uses jquery. Here is an image showing the carousel. View the code and tutorial here.

Jquery Ajax Infinite Carousel

Ajax smooth slidedown

This shows you how to make a smooth div slidedown effect without the initial jump. This can be used for many cool ajax effects. View the code and tutorial here.
Ajax smooth slidedown

Ajax smooth data changer

This creates a panel that automatically switches out a list of divs. A very nice effect for blog or website sidebars that want to show rotating pieces of information in an attractive way. View the code and tutorial here.
Smooth data changer

Ajax Smooth Image Fade

I myself have always wondered how to do the smooth image crossover fade and this tells you how to do it. The effect is very nice on buttons, menus and even images on display. View the code and tutorial here.
Ajax Image Fade Effect on a menu

Ajax Sliding Tab Effect

This is a great effect for teb boxes. I see it cropping up all over the web now days. Use it for tabbed browing of information or even arrow based browsing (arrows on the left and right). View the code and tutorial here.
Ajax Tabbed Slider

Very Sleek Tooltip Bubble

Very nice use of the JQuery puff effect. This shows an informational popup over the area you want when the user mouses over the area specified. Good for tooltips, information divs and any other popup application. View the code and tutorial here.
Sleek Ajax Coda Tooltip Jquery

Loading a Large Image with Ajax

You have seen progress indicating gifs show up while a large image is being loaded. Ever wonder how to do this? This tutorial tells you how to do this and have complete control over how the image loads. I do not have a picture of this as this tells you how to load any image with ajax. View the code and tutorial here.

Slideout Side Menu Effect

If you have been to the Apple website recently you might have seen this in action. This gives you an interactive side menu. When a user hovers over one of the menu dividers — that menu shows up. Very nice effect (play around with the demo). View the code and tutorial here.
Apple style Ajax Slide out Sidebar Effect

Ajax for Instant & Server Side Form Validation

Most of the new “Web 2.0” websites have very fluid forms. This is because of the fact that you can lose user’s interest in registering or even buying if it is too hard to fill out the form. I myself have left websites because I found it very hard to get the form to validate. This tutorial shows you how to make a form that validates on the fly, including doing server side calls for user names and such. Quite useful for streamlined user registration. View the code and tutorial here.
Ajax form validation jquery
There more tutorials and demos on this site regarding Ajax and JQuery. The ones selected here were selected because I thought they could be very easy and useful for web designers who want to have a design edge without haveing to spend too much time coding ajax effects.

Cross-browser Absolute Positioning PNGs

With the new Web look spreading through every site new and old, there are a lot of times when you want to use absolutely positioned pngs on your site.

The 2 problems we face. The first one is that the PNG format is not fully supported on all browsers that are in use today. The way we handle that is with a simple include into the main template file of your site.

Here is where you can get the javascript file click here.

Include this file into the header of your main template file:

<!--[if lt IE 7]>
        <script type="text/javascript"
        src="/resources/unitpngfix/unitpngfix.js"></script>
<![endif]-->

This is a hack to tell the browser to include the”unitpngfix.js” file if the browser is IE 7 or below.

The next problem is that IE positions things differently. We will be using a similar hack to go around this problem. Here is how the code will look.


<!-- Floating image -->

<!--[if lt IE 7]>
  <div style="position:relative; margin-left:-800px; margin-top:0px;">
<![endif]--> 

  <div style="position:relative; margin-left:0px; ">
  <div style="position:absolute; clear:left; left: -50px; top: -59px;
  margin-left:0px;">
  <img src="yourimage.png" width="332"
  height="178" style="clear:left;" />
  </div>
    </div>

<!--[if lt IE 7]>
  </div>
<![endif]-->

All you have to do is add your image path and then change the values in the “left” and “top” to adjust the position of the image. You will have to adjust the values in the “if It IE 7” section while looking at the image in Internet Explorer 6 or 7.

I hope this helps anyone who is having trouble with absolutely placing PNG images for cross browser compatibility.

Beginner MySQL & Php tutorial

PHP Mysql Basics

This tutorial explains for you the basics of MySQL in combination with Php. This tutorial is also written for people who absolutely don’t have any experience with MySQL.

This tutorial was written by CrystalEdge.

MySQL is a kind of textual database. This database is divided in table that have rows and columns. Most of the time you store similar data of the same category into the same table. By using a query, you are able to store information into the database. For people who don’t have any Php experience I suggest you to read CrystalEdge’s Basic Php Tutorialbefore starting on this one.

Read full tutorial ->

Creating a website with WordPress

Creating a good website with wordpress is very easy once you have the right direction. In this article I will give you the basic steps to starting up a website/blog with WordPress.

First things first before we begin. WordPress is not the ony content management system for blogs/websites — there are many others. I prefer wordpress over anything else due to it’s simplicity and ease of updating and adding plug in functionality.

WordPress was originally designed for the creation of blogs. A lot of websites are centered around the idea of a blog which is new articles published frequently. For most websites to do well they need to provide constant valuable information at a decent rate. If you put up a couple of pages on a website and leave it at that, most likely your website will drop from the search engines and disappear.

I love the idea of building a website around WordPress and I am working on numerous other websites using it.

WordPress Basics

A WordPress website consists of these main things:

  • Posts
  • Pages
  • Categories
  • A Template

This makes WordPress simple to understand.

Posts: posts are articles written that fit into a category. Posts have an Author, A Published Date, A Title, Content, Tags and Comments.

Pages: Pages are basic articles that are linked to directly. Examples of pages are “About Us”, “Prices”, “Contact Us”, etc. In WordPress, posts and pages are different. Pages have an author, A Published Date, A Title, Content, Tags and they can have comments. Pages are generally directly linked to and are not part of any category.

Categories: categories separate posts into understandable divisions. Examples of categories are: Blog, Photoshop, Funny, etc. Categories help people find posts that they are interested in. Categories can have any amount of sub categories. An example of this is a category of “Computers” can have a sub category of “Windows” or even “Troubleshooting”.

A Theme: every WordPress site has a theme. A theme decides how to show your posts, pages and categories. A theme can also have any number of additional content, like a sidebar or a menu, etc. These are also called templates.

Tags: tags are keywords for posts and pages. Keywords also help people find an article or page that they might be interested in. It is very important to add tags to your posts so that people can actually find them. Some blog systems don’t differentiate between tags and categories.

Comments: comments are very important to a blog. Each post can have comments on it. Comments can be a suggestion, a question regarding the post, or request for clarification. Comments constantly update the post with additional content and help create more interest in your post.

Author: and author in wordpress is the person who wrote the article. In a WordPress site, there can be numerous authors writing posts. It is good to have numerous authors for a blog so that one guy isn’t staying up all night updating the blog.

These are some of the basic things you need to know to work with WordPress and to be succesful with what you are trying to do. We will now talk about how to set up a wordpress blog with ease.

Building Steps

Step 1: Get a domain name and hosting service.

An example of a domain name is “www.techassistnow.com”. A domain name is always unique. A hosting service has many computers to hold information, you will need to set it up so that your website and all of its data has a place to live.

I will tell you how to set these up for the hosting provider that I use. The hosting provider I use is called “1&1“. Using this domain name checker, check if the domain you want is available. If it is, then purchase the hosting option you want. I recommend 1and1 beginner if this is your first website.

For any other hosting provider, read the instructions on their website. In any case, you want to make your your hosting has PHP and mysql.

Step 2: Collect the necessary info from your hosting provider

Once you have a domain name and a website host, you should now have this basic information:

FTP Host:

FTP Username:

FTP Password:

Database Host:

Database Username:

Database Password:

Having this information is neccesary to starting your wordpress site. Once you have this information, continue through these steps. If you don’t have a database, contact your hosting provider on how to create a database.

Step 3: Download & Install WordPress

To download WordPress click here.

A very simple guide to installing wordpress click here.

Step 4: Customize with themes and plugins

Plugins

Installing plugins is very simple, you just go to the “Plugins” menu and click add new. Then you can search for the name of the plugin and install it right from WordPress. You can also download the .zip file and install it that way by clicking on the “Choose File” button.

Here is a list of the fundamental plugins you should have:

  • All in one SEO Pack: This plugin sets up WordPress for Search Engine Optimization. Download it here.
  • WP-Cache: This plugin greatly increases the speed that your WordPress site loads. Download it here.
  • Askimet: This plugin detects spam comments and is very important. Download it here.
  • Contact form: Every website has a way to contact the website editors. This plugin makes it very simple to have complex contact forms for this purpose. Download it here.
  • WP-DB-Backup: Allows you easily to backup your core WordPress database tables. This is a very important plugin for protecting your website from being completely ruined. I recommend it for any WordPress installation. Download it here.

There are a lot of additional useful plugins that can be used. I will list some of them here so you get an idea of the possibilities.

  • Broken Link Checker: Checking broken links can be annoying to you and your public. This plugin makes it simple by checking images and links if they are broken. If so,  you are notfified. Download it here.
  • Google XML Sitemap: This plugin creates an updated xml sitemap for Google. Good for SEO. Download it here.
  • Sharethis: great for adding social marketing buttons to all of your posts. Download it here.
  • WP ECommerce: Turns your site into an online store. This is just an example of a plugin that adds a whole store to your wordpress site for free. Download it here.

As you can see, there are many WordPress plugins. You can pretty much get a plugin for anything you want to do with WordPress.

Themes

Installing themes is very simple with the newest version of wordpress. All you have to do is go to the “themes” menu and click “add theme” and then upload a zipped file of your theme. WordPress will automatically install the theme for you. You should also install any recommended plugins for that theme.

Here is a list of website that have  a good free themes that you might like.  There are so many options and looks available for themes — it’s hard for me to list them all — but I will point you in the right direction.

Step 5: Start adding content!!

Now you have your WordPress site set up. Start writing and adding posts with unique content. Make sure you also add the standard pages (Contact, About, Etc).

This is a simple guide to start your WordPress website. There are many advanced features and theme custumizations still possible after this point. There are hundreds of websites dedicated to these advanced features — just google what you are trying to do.