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.

18 Simple Dreamweaver CS4 Basics Tutorials

In this Dreamweaver CS4 Tutorial you will learn how to create a basic website using Dreamweaver CS4.

You will learn how to Define a site, Create a template, Design your template page, Design your css style sheet, Insert Editable Regions , Create the pages of your site using the template, Link all the pages together, Create a form, Check your site in the browser and, Upload your site and make it live.

Dreamweaver CS4 Tutorials

  1. Dreamweaver CS4 Tutorial
  2. Define a New Site in Dreamweaver CS4
  3. Create a template in Dreamweaver CS4
  4. Design your template in Dreamweaver CS4
  5. Design the CSS Style Sheet in Dreamweaver CS4
  6. Insert Images in Dreamweaver CS4
  7. Creating the Menu in Dreamweaver CS4
  8. Content in Dreamweaver CS4
  9. Insert Editable Regions in the Dreamweaver Template
  10. Dreamweaver CS4 Template Based Web Pages
  11. Formatting Headings in Dreamweaver CS4
  12. Formatting Images in Dreamweaver CS4
  13. Linking pages in Dreamweaver CS4
  14. Forms in Dreamweaver CS4
  15. Dreamweaver CS4 Form Validation Tutorial
  16. Tables in Dreamweaver CS4
  17. Testing the Website in the Browser
  18. Upload your site with Dreamweaver CS4

View all the tutorials here.

Fireworks CS4 Basics Tutorial

This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website.

This tutorial will take you through the making of a website design using fireworks including how to do a logo design in Fireworks.

View the tutorial here.

Building RIA Web applications Fast and Efficiently

Building Web Applications

Building Rich Internet applications can take a long time for those who do not have whole teams of newly graduated programmers. For those who are trying to put a rich application together with efficiency and in a time frame that is realistic there is a solution.

Adobe FlexThe name of the program is “Flex“. Flex is a flashed based programming environment which uses XML as a main datasource. Once you have mastered Flex, you can build very functional and useful applications that run via the internet. With the advent of Adobe Air, you can also deploy these applications for use on desktops.

I do not consider myself and advanced PHP coder and yet I have built some very complex applications. One application that I built was an online course creation system which enabled someone to build online courses without having to know any coding/html. I built this for a company who delivers online courses on many subjects. They privately use it for course creation.

I have also built whole admin systems to track jobs for a publishing company. All of the applications that I have built were built on a part time basis. This is why I suggest learning Flex.

The main benefit of using Flex is that you spend less time creating the interface and more time writing your custom code. Flex has a very intuitive interface builder and data connection system that takes away a lot of the wasted time used on doing these kinds of things. If you know PHP, then Flex should be easy to start learning. You don’t even need to know Flash at all to build a flex application.

Flex interfaces can be customized using basic CSS and also and Illustrator template for graphical sections of the interface.

I suggest downloading the trial of the Flex Builder and trying it out — I think you will get hooked on it’s simplicity. Get the trial here.

Examples:

Some examples of Flex applications are listed here:

Aviary. All of the applications that Aviary has created were created using Flex.

Volkswagen. This online car locator was created using Flex.

Klok. A personal time tracker for freelancers, built on flex and deployed as a desktop application.

There are many more eaxamples as can be found here.

Keep in mind that a lot of these flex applications are mainly interface and data processing based which is what Flex makes easy to do. I hope to write additional tutorials on using Flex.

Learning Flex

Learning Flex in a Week by Adobe. Learn flex fast using these free comprehensive tutorials by Adobe

Very simple flex tutorial. A simple tutorial with downloadable file for reference.

Tutorialized Flex tutorials. Some basic tutorials, hopefully more to come.

Making a desktop application with flex. Once you have learned the flex basics, see how to turn Flex appliations into Desktop Applications.