Archive | January, 2009

Introduction to Javascript for Newbies

24 Jan

Javascript is a client-side programming language whose processing engine is embedded in web browsers like Internet Explorer, Netscape, Firefox, etc. This enables the processing engine to read and interpret web pages that contain the javascript code when browsing.

Javascript first made an appearance in 1995, although by that time it was known as Livescript. This name was later changed to javascript.

Javascript was invented to add more exciting features to HTML pages. HTML on it’s on is pretty boring and it cannot do much besides display a webpage. Javascript programming, on the other hand, can provide a host of exciting features like perform calculations, allows the user to interact with webpages, perform form validations, manipulate elements on a webpage, provide excellent visual effects, enables dynamic functions and so much more.

All of this provides the user to the site with an enhanced user experience. Because javascript is a client-side language, all of these features are available in real time without the browser having to refer to the server all the time. This prevents time delays and increases user satisfaction.

Let’s take a closer look at the great things you can do with javascript programming:

Perform Calculations

Javascript can be used to perform simple to advanced mathematical calculations. This is especially useful if you want your users to interact with your site by inputting some information that requires some sort of calculation and displaying the relevant content based on that result. For example, javascript can calculate a loan repayment and display the appropriate result if a user enters a required loan amount on the site. Furthermore, javascript can also tell date and time, time a certain activity and perform intricate date and time calculations.

User Interaction

The javascript on the webpage can take interaction from a user and perform a certain function by way events. Some of the most popular events are:

onblur
onchange
onclick
ondblclick
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onselect
onsubmit

Perform Form Validations

Javascript can validate and check user input to determine whether it conforms to a certain requirement. For example, you can check if a field is left empty, if an email address is in the proper format, if a zip code code is in the proper format, etc. In most cases, if an error is made by your site visitor, an alert can display the appropriate error message to him or her.

Manipulate Elements On A Webpage

Javascript allows a user to change content or styles of a webpage upon a user interaction by way of the aforementioned events. For example, hovering over a certain text can make an image appear, text on a submit button can change on submit, etc.

Provide Visual Effects

Javascript has a host of ways to provide visual effects to a webpage that other server-side programming languages cannot. A typical example of this might be some fancy image rollover buttons.

Enables Dynamic Functions

Javascript, together with AJAX (asynchronous JavaScript and XML), can be used to create dynamic applications. One example of this is to load dynamic content onto a webpage without refreshing the page.

In my next chapter, we will delve further into javascript programming.

Insert Google Ads with Dreamweaver

24 Jan

Dreamweaver CS3 makes it easy to create beautiful webpages without ever having to look at the code behind your designs. But even though you don’t have to learn HTML, every once in a while knowing how to work with the code can come in handy. In this tutorial, you’ll find instructions for using Dreamweaver’s code-editing features to insert Google ads and other features.

1. Adding Google Ads

We’ll use Google AdSense as the main example in this tutorial but the process is similar for nearly all sites that offer features you can include on your pages. You generally begin by creating an account. In the case of Google AdSense, once you’re approved (most websites are), you simply log in to create the code needed to display Google ads for your pages. Once you’ve added the code, Google delivers ads to your site based on the content on your pages. If your visitors click on those ads, Google pays you a small fee.

Insert Google Ads with Dreamweaver image 1

2. Choose Ad size, colors, etc.

As you go through the Google AdSense setup process, you can select from a variety of advertising options, including the size and colors you want for your ads. You can also create Channels to better organize and track ads on different parts of your site.

Insert Google Ads with Dreamweaver image 2

3. Generate Google Adsense code

Once you’ve completed the ad setup process and specified all of the options for your ads, Google generates a unit of code in JavaScript that you can add to your webpages. You’ll need to copy all of this code, from the opening tag to the closing tag, so that you can paste the code in its entirety into the pages on your site.

Insert Google Ads with Dreamweaver image 3

4. Use code view in Dreamveawer

Now, open the page where you want to insert your ad code. Click either the Split view or Code view buttons (located in the upper-left corner of the workspace) to display the code behind the page. The advantage of using Split view (shown here) is that you can see Design and Code views at the same time.

Tip: Highlight any element in Design view, such as the headline, “Saving and Editing Family Photos,” on this page, and Dreamweaver automatically highlights the corresponding code so that you can find your place more easily.

Insert Google Ads with Dreamweaver image 4

5. Insert Google Adsense code

Find the exact place on your webpage where you want to insert the Google ads and click to place the cursor in that spot in the code. Note: If you paste the JavaScript into Design view, it won’t work. Choose Edit>Paste to insert the code from the website into your code. Again, make sure that you have all of the code including the opening and closing tags. If you ever want to move or remove this code, you’ll need to select all of this code.

Insert Google Ads with Dreamweaver image 5

6. Viewing Google Ads

One of the most confusing aspects of working with Google AdSense in Dreamweaver is that although you can see the code in Code view after you paste it into your page, you won’t see the ads in Design view. The only indicator that you’ve successfully added your Google ads will be a little blank space added to your design.

Insert Google Ads with Dreamweaver image 6

7. Previewing Ads in a browser

To view your ads in your pages, you’ll need to preview the page in a Web browser: Click the Preview button at the top of the workspace or choose File>Preview in Browser. As long as you’re connected to the Internet, the Google ads should automatically appear wherever you added the code to your page. Note: Google ads can take up to 10 minutes to become activated before they’ll display.

Insert Google Ads with Dreamweaver image 7

8. Adding more Ads

You can add the same AdSense code to as many pages in your site as you want. You can create a variety of ads to include in different places in your site by repeating the Google AdSense setup process and choosing different options before generating a new snippet of code. Tip: When you open Dreamweaver to add your code, leave your Web browser open so that you can easily return to Google to make changes or copy the code again, if necessary. You can switch between two programs on your computer by pressing Command-Tab (PC: Alt-Tab).

Insert Google Ads with Dreamweaver image 8

9. Working with code in templates

If you use Dreamweaver’s Dynamic Web Templates (a great way to save time and create more consistent designs), you can add Google AdSense code to a template and automatically insert ads into all of the pages created from the template at once. To do so, open the template file, choose Split or Code view, and paste the code into the template file just as you would into any other HTML page. When you save the template, choose the Update option to automatically insert the ads into all corresponding pages.

Insert Google Ads with Dreamweaver image 9

10. Working with Flickr and other sites

Although the first nine steps in this tutorial are specific to Google AdSense, the process of inserting code into a page in Dreamweaver works the same whether you’re using AdSense or any of the myriad other online advertising options, such as http://www.CommissionJunction.com and http://www.Linkshare.com. You can also use this process to add widgets or images from sites such as http://www.Flickr.com.

Insert Google Ads with Dreamweaver image 10

11. Adding invisible Features

Some of the code you may want to add from sites like Google won’t appear in your webpages in a browser, making it a little trickier to add. For instance, you can use Google Analytics to track your Web traffic (with better detail than you’ll get from most Web hosts). Just insert code in a way that’s similar to the way you do it with AdSense but because the code won’t be visible on the page, save it somewhere that makes it easy to find, such as just above the body tag at the bottom of your pages.

Insert Google Ads with Dreamweaver image 11

12. Changing code dispaly options

If you spend a lot of time working in Code or Split view, you may want to take a minute to adjust the code preferences in Dreamweaver. Choose Dreamweaver>Preferences (PC: Edit>Preferences) and then specify your preferred options in these Categories: Code Coloring, Code Format, and Code Hints. Also note that the Code Rewriting category provides options for how (or if) Dreamweaver will alter any code to your pages.

Insert Google Ads with Dreamweaver image 12

13. Upload your pages

Although you should be able to test most third-party code, such as Google AdSense, by previewing your pages on your local computer, remember that your new features won’t become visible on your website until you’ve uploaded the pages to your Web server.

Insert Google Ads with Dreamweaver image 13

How to Create a Good Website?

24 Jan

Designing web-sites involves numerous skilled disciplines from type to layout & color. Color is particularly prominent as it provides the first impression to the user. The correct colors can create a good user experience, while incorrect colors can have a bad impact.

To create a good website, the website designer needs to know what affect colors can have on people. People subconsciously react to colors & associate them with different emotions and feelings. Colors don’t just stir up emotions & feelings that might influence how a site is seen but they can also be cleverly used to direct users to specific sections of your site.

Every single color that you can think of can be used on the internet these days, which means that picking the right colors can be a mammoth task. Here is a swift summary of how some colors can provoke certain reactions.

Green is linked with nature, peace and jealousy. It is also a truly relaxing color and is perfect to use for a relaxing effect. The color white stirs up feelings of purity, simplicity, emptiness and innocence. If used as the main color of a site, it creates a clean and simple feel.

Blue is most commonly associated with business sites as it’s a strong color that’s associated with confidence, coldness, depression, water and peace. The color blue is linked with confidence, loyalty and coolness. It’s the best-known color in the world and it’s used by many companies to create a feeling of strength & confidence.

Black is linked to feelings of mystery and refinement. For more detail go to: http://www.instant-video-streamer.com. An extremely popular color in design and photo web sites, it can be used effectively to contrast and liven up other colors. Green is linked to organic, nature and relaxation. The paler end of the green spectrum can be used to give a site a relaxed feel.

Grey can be associated with respect, humility, decay and boredom. It’s used a lot to form shiny gradients in website design to give a professional, ordinary feel to a site. Orange is strongly associated with spirituality and healing. It’s the color that symbolizes Buddhism and it has a calming energy about it. It’s a bold color that is not as lively as yellow but not as deep as red.

Darker shades of purple can be very deep and luscious. It is linked to royalty, spirituality, arrogance and luxury. Lighter shades can represent romance and delicacy. It’s a color that’s not really used much on sites. Full of energy, vibrancy and stimulation, orange is a fantastic color to use in designing web-sites. It is used to bring youthfulness to a design.

Color’s role is not just to make a website look good; it can encourage feelings & emotions from the audience. Choosing colors that annoy the end user can have damaging effects on your website, while cleverly selecting can mean that the website meets user expectation.

Photoshop History (Exclusive Article)

24 Jan

Everyone has heard of the popular graphics editing software package Photoshop – a world-wide leader among raster graphics editing applications. In this article I will cover the major points of the whole history of Photoshop creation: significant dates, releases, basic improvements, and some additional tips.

Thomas Knoll Photoshop was developed and distributed by the Adobe Photoshop company. At the very beginning it was intended for editing images for print, but it has also gained popularity as a tool for creation and editing web graphics. This is another reason that it has become so popular. The last Photoshop versions also include the special application – ImageReady, which was added specifically for work with web graphics easier.

This story begins in 1987 when 2 brothers, Thomas Knoll and John Knoll started developing Photoshop. In 1989 they completed the project and called it Photoshop 1.0. Adobe became interested in this project and the first version of Photoshop was released in 1990. It was about 1.4 Mb, and could be placed on a single floppy-disk. Initially Photoshop was created for the Macintosh platform. Compatibility updates for Windows, IRIX, and Solaris was added later. At present Photoshop can be used on Windows and Macintosh platforms.

Photoshop was a real success, and in 1991 they released… Well, everything in its turn.

Adobe Photoshop 1.0 – released in February 1990 for Macintosh.

Photoshop 1.0

Adobe Photoshop 2.0 – released in June 1991 for Macintosh. Main feature – support for Paths was introduced. In January 1992 version 2.0.1. appeared and later in November 1992 with release of version 2.5 it became compatible with Windows, and in November 1993 with IRIX and Solaris.

Photoshop 2.0

Adobe Photoshop 3.0 – released in September 1994, for Macintosh. In November versions for Windows, IRIX, Solaris were released as well. Introduction of Layers and Tabbed Pallets were among its special features.

Photoshop 3.0

Adobe Photoshop 4.0 – released in November 1996 for Macintosh and Windows. Special features included – Adjustment Layers and Actions. In August 1997 version 4.0.1 was released.

Photoshop 4.0

Adobe Photoshop 5.0 – released in May 1998 for Macintosh and Windows. In this version the History Pallete, which allowed canceling multiple actions, and the Magnetic Lasso tool were added as well as improved editing Type tool. In February 1999 version 5.5 was released, this time with the integrated ImageReady. Extract tool was also added.

Photoshop 5.0

Adobe Photoshop 6.0 – released in September 2000 for Macintosh and Windows. In this version the user interface was significantly improved. Also the Liquify filter and the Vector Shapes were added. Later in March 2001 Photoshop was updated to version 6.0.1.

Photoshop 6.0

Adobe Photoshop 7.0 – released in March 2002 for Mac OS and Windows. This version comes with further improvements to the Type tool and now it is completely vector. Another added tool is introduced – Healing Brush. In August 2002 version 7.0.1 was released, here for $99, the Camera RAW 1.x. plug-in was the most important introduction. It was developed by Thomas Knoll and allowed the user to read the RAW-formats of different digital cameras and to import them directly into Adobe Photoshop.

Photoshop 7.0

Adobe Photoshop CS (8.0) – released in October 2003 for Mac OS X and Windows. The plug-in Camera RAW was updated to version 2.x. The Slice tool also underwent major improvements. Shadow\Highlight and Match Color commands were added. Lens Blur filter and Smart Guides were included as well. Histogram now works in real-time.

Beginning from version 8 the product changed its name to Adobe CS. The CS abbreviation means that several applications are now integrated into one software package – Adobe Creative Suite. The following products are included into Adobe Photoshop package: Adobe Illustrator, Adobe InDesign, Adobe GoLive, Adobe Acrobat Professional, Version Cue, Adobe Bridge , Adobe Stock Photos and Dreamweaver 8 (after Macromedia was sold to Adobe). The logo was changed as well. Now it has feathers instead of an eye.

Photoshop CS (8.0)

Adobe Photoshop CS2 (9.0) – released in April 2005 for Mac OS X and Windows. Here the Camera RAW plug-in was updated to version 3.x. Smart Objects and other features were added, including: Image Warp, Lens Correction, Smart Sharpen, Vanishing Point. New Spot healing brush and Red-Eye tools were introduced. Layer editing was also improved.

Photoshop CS2 (9.0)

Adobe Photoshop CS3 (10.0) – planned to be released in spring 2007 for Mac OS X and Windows. You can download and try the beta-version of Photoshop CS3. The user interface underwent considerable reconstruction. Some new features were added: Smart Filters, Refine Edge, Auto bend Layers, Auto Align Layers, Black and White Conversion. You can read more about the new features in this tutorial.

Photoshop CS3 (10.0)

Hope my tutorial helped you to remember the whole history of Photoshop creation and now you’ll be able to use it more effectively.