The proof is Edge – the new multi-platform tool from Adobe that will help users to create web animations using HTML5, CSS3, and JavaScript.

Get To The Edge

At the moment, Edge is still in beta and available for free. You can download the application after signing in using your Adobe ID. If you don’t have one, you can easily create an Adobe Account.

Then download and install the application according to the operating system that you use. Edge comes in two flavors: PC and Mac. The beta version doesn’t require a serial number, but it will expire within the next 5 months.

At the end of the installation process, you’ll see a notification window stating how many more days are left in the pre-release period. My guess is that the tool will go commercial after the beta period is over, and we all know the pricing range of Adobe’s professional products. So if you want to try Edge out for free, you’d better download it as soon as possible.

Playing Around With Samples

To help users understand about its new tools, Adobe provides a “Get Started With Edge” video tutorial and several downloadable sample animations. It’s recommended that you watch the video and play around with the samples.

The video is accessible via the “Get Started” pane which will appear when you first open Edge. The pane also gives you access to create a new animation file or open an existing one.

The interface is divided into several main panes. The “Properties” pane on the left shows the composition tools of the selected elements.

The “Timeline” pane at the bottom shows the choreography of each animated element related to the timeline.

And the “Elements” pane allows you to select one item to edit from all the existing elements.

Create A Simple Text Animation

The best way to understand any application is to use it. So, let’s explore Edge by trying to create a simple animated text.

• Go to the “File” menu and choose “New“.

• A “stage” will be opened. This is the canvas where you can “choreograph” the animation. You can customize its name, size, and the background color from the Properties pane.

• Next, choose the “Text” tool and write something on the stage. Again, you can customize every aspect of the text from the Properties pane.

• To animate the text, go to the timeline pane and modify each element of the text by deciding what changes will happen to it, and when the changes will happen.

Basically, here’s what you should do :

• Choose the diamond next to the “text” item on the Timeline pane,
• Drag it to the position that you want,
• Select the text from the stage,
• Make the changes you want to the text.

You can add more text and other elements such as rectangles and/or rounded rectangles. Rinse and repeat the animating process for the other elements.

The last step is implementing the animation on your website. To do that, you have to save the animation as an HTML file in a folder, open the HTML using a plain text editor, then copy and paste the code to your webpage (or wherever you want the animation to appear). Don’t forget to put the “edge_includes” folder in the same location as the HTML file/code.

The Next Move

Our experiment here is very simple, but you can use the basics to create more elaborate web animations using Edge. The app itself is still in its early stages, and there’s no doubt that it will have more elaborate features in the future.

At the moment, HTML5 is just making its baby steps into the virtual world and no one can tell when this newcomer will take the throne. But Adobe’s support for the new standard is surely blowing fresh air into the web.

So what do you think? Are you still supporting Flash or will you stand behind HTML5? Have you tried Edge? Share your opinions in the comments below.

However, creating such interactive content is never as easy as pie, and that rule doesn’t exclude HTML5‘s main element that does all the work: canvas. If you’ve been following what the latest browsers have to offer, some of them may include a GPU-accelerated experience that makes the canvas element run a lot better. There are frameworks available that try to make the canvas element a little bit easier to develop for, notably jQuery. But even then, jQuery makes you type quite a bit. Web developers, here’s something better for you.

About jCanvas

jCanvas is a little jQuery plugin written entirely in JavaScript that makes working with jQuery, and thereby HTML5′s canvas element, a lot easier. Web developers will get a lot of benefit out of using jCanvas. By using jCanvas, you get to work with much simpler code, in which the plugin will do the work and translate it into the relevant code for jQuery to run.

Examples of Use

jCanvas can draw a large number of objects. For example, here we can see an ellipse that is filled in with a gradient. There are plenty of parameters that you can set and still keep the amount of actual code as small as possible. In this example, the gradient parameters were set first (distances, colors, etc.), followed by the drawing of the ellipse itself. For programmers, this should be a very eye-appealing way to write code with no over-the-top syntax.

In this example, a regular jpg image is being halfway inverted. The first function (or set of instructions) sets how the inversion takes place, while the second function draws the image and loads the inversion function onto it. When the code runs, you get a halfway-inverted image.

In our final example, different shapes are drawn by means of different functions provided by jCanvas. The green, unfilled rectangle was drawn by a simple function dedicated to rectangles. As always, you can customize your rectangle, even with parameters for the stroke width and corner radius (the amount that the corners should be rounded). The pentagon is drawn by a more generic function that applies to all regular polygons. You can also apply all the same parameters as with the other functions.

The difference is important because you can draw a square with both the rectangle and polygon functions, but you can only draw rectangles with the rectangle function. (Squares are rectangles, but rectangles aren’t always squares!)

Other Information & Support

There’s a lot more you can do with each function, plus there are many more functions that you can use! You can download jCanvas by going here. If you need any help, the full, well-written Documentation page should clarify most if not all questions. If that still doesn’t work, you can contact the developer of jCanvas by checking out his information here. If you wish to try out jCanvas before playing around with it on your own site, the developer has set up a very cool-looking Sandbox page where you can enter code and watch the magic happen.

Finally, if you would like to help contribute to the open source jCanvas project, you are more than welcome to do just that by going here. jCanvas is always being improved by the developer, and new releases are made available every few weeks.

Conclusion

jCanvas is a great web tool to use to make your programming experience much simpler, especially if you are a heavy user of the canvas element. Again, some of the highlight features are:

• Draw shapes, paths, images, and text.
• Style these using colors, gradients, patterns, and shadows.
• Manipulate the canvas (rotate, scale, etc).
• A huge range of options to suit your needs.

Internet users will thank you as well for using jCanvas, because you’ll have more time to completely develop your web app and make sure that it has all the functionality you want it to have while enjoying great performance.

Are you a web developer who is involved in HTML5? Do you think jCanvas will help you with your development? What features would you like to see in jCanvas? (please check the documentation first for what’s already implemented!).

Image Credit: Just Insomnia

In short, a lot of work, files and really tough to use with free (limited) webspace.

Today, we’ll discuss an alternative. It’s free, super lightweight, and just needs a little different approach. That’s to say, there’s no graphical user interface for adding shop items with this web site shopping cart. Instead, you need to insert simple tags in your HTML code. Don’t worry, we’ll tell you how.

simpleCart(js)

The end-user interface is slick, simple and direct. Products are aligned in this web site shopping cart in a grid, with relatively large icons, product explanation and price. The webmaster can optionally add different options for a product, i.e. small, medium and large T-shirts. Because of the build-up, simpleCart is best used for displaying a smaller and relatively static product arrangement, perfectly suited for amateur sellers.

The cart is usually shown at the bottom of the page, but you can pretty much put it wherever you want. Here the buyer can review the products already selected, change the quantity, or empty the card.

When satisfied, pressing the Checkout button will take the buyer to Paypal or Google Checkout, starting a money transfer to your account. You’ll receive a notification when you get the money, where after you can ship the products. As simple as that.

Setting Up SimpleCart On Your Website

First, make sure you’ve got a basic website capable of executing JavaScript (which most can) and some little web space for the rest of the files. You can download simpleCart(js) from the website. It’s donation ware, so you can choose for yourself if you like it and how much you think it’s worth.

Unzip the file and upload simpleCart.js to your site directory. The set-up is completed by inserting some little code into your website’s HTML files. Wherever those snippets of code are inserted, that’s where the specific simpleCart components will show up.

<script type="text/javascript" src="simpleCart.js"></script>

Add this to every page, between the

<HEAD>

and

</HEAD>

tags, wherever you want to use simpleCart.

<script type="text/javascript">
simpleCart.checkoutTo = PayPal;
simpleCart.email = "you@yours.com";
</script>

Add the above to make simpleCart check out using Paypal. You also need to specify your Paypal mail address. Change the elements in green, and paste the entire snippet between the

<HEAD>

and

</HEAD>

tags, wherever you want to use the checkout.

<script type="text/javascript">
simpleCart.checkoutTo = GoogleCheckout;
simpleCart.merchantId = "111111111111111";
</script>

If you instead want to use Google Checkout, paste the above snippet between the

<HEAD>

and

</HEAD>

tags, wherever you want to use the checkout. Instead of your email address, swap the green element with your Google Checkout Merchant ID.

<div class="simpleCart_shelfItem">
<h2 class="item_name"> Product Name </h2>
<select class="item_size">
<option value="Small"> Small </option>
<option value="Medium"> Medium </option>
<option value="Large"> Large </option>
</select>

<span class="item_price">$35.99</span>

<input value="1" type="text">

 <a href="javascript:;" class="item_add"> Add to Cart </a>
</div>

The code snippet above is used to add an item to your shelf. Change the item name and price, show in green. The select class, shown in blue, is entirely optional. If there are no subclasses in your product, you can leave it out. Paste it between the

<BODY>

and

</BODY>

tags, wherever you want to show it on your page.

<div class="simpleCart_items"></div>

Paste this between the

<BODY>

and

</BODY>

tags, where you want to display the entire web site shopping cart.

You have <span class="simpleCart_quantity"></span> items in your Cart.
Cart total: <div class="simpleCart_total"></div>

<a href="javascript:;" class="simpleCart_checkout">Checkout</a>
<a href="javascript:;" class="simpleCart_empty">Empty</a>

The above elements will respectively display the amount of items in your cart, the cart total, a checkout link and an empty cart link. Each element can exist independently.

Take a look at the documentation for more advanced settings, including currency options, tax rates, shipping, and changing the cart formatting.

What do you think about simpleCart(js)? Have you ever sold anything online on your own site, and how did it go? Let us know in the comments!

Image credit: Shutterstock

You’ve seen them. Images that have been constructed this way change when you drag your mouse over them and change back when you remove the cursor. Mouse-over effects are very easy to create and they can really add life to your images or website.

In this article I’m going to show you how to add cool Javascript rollover effects to images on your website.

Have no idea what I’m talking about? If you want to become more familiar with Javascript, I invite you to check out the article Varun composed last week entitled What is JavaScript and How Does It Work?. Also, you can Quickly Check If You’re Running A JavaScript Enabled Browser.

Now that you’re feeling a little more confident we can begin.

Step 1: Create Two Images

In order for this effect to work properly, you need to create two images. Ideally, these should have the same dimensions (height and width) and should reside in the same directory. It’s important that you can remember and differentiate between the names of the images, so don’t name them anything too long or difficult.

For this example I have named my images testbox1.gif and testbox2.gif.

Step 2: Create An HTML Document

After creating the images, it’s time to create the code. In Notepad, start typing up a simple HTML file.  We will insert our Javascript after the <head> tag.

All we are doing here is defining the images. Although my code has testbox1 and testbox2 you can change these to the names of your two images.

The <body> tag is where we’ll insert our call to action. Within the <body> tag, insert the image source code the way you would any other HTML image, except in this case we have to add the mouseover and mouseout functions to the code to achieve the rollover effect.

When finished, save the file as a ‘.html’ file. You can double click the file and it should open up in your web browser with your images and rollover effect working properly. Now that you’ve tested your code you can add it to your website and begin amazing people with your flashy Javascript.

To see it in action, click here and mouse over the image to see what we have just created.

Conclusion

This code should be all you will need to utilize any rollovers you want on the webpage. The ‘over’ and ‘out’ functions are what will be doing all the work here. They call the images when the mouse is moved over them and off of them.

For the image source, you only need to type the name of the image, so long as the HTML file is saved in the same folder the images are. If they are not, you need only to point to the images’ location like you would any other image in HTML.

Was this article helpful for you? Will you be utilizing JavaScript rollovers on your website? I would love to hear your thoughts and ideas in the comment section below!

Image Credit: Noah Sussman

The first thing I recommend is browsing over to a special Java test website called JavaTester. There is code on this page that will tell you if you can run Java Applets and if Javascript is enabled and supported by your browser. The answers will be shown to you on the webpage once it is completed loading.

My favorite part about this site is that it also gives you the HTML code that they used to create the tests. This allows you to add this code to your website to display the results.

When we get to the site this is what we will see:

You will be able to tell at a glance what your browser can and cannot do. For Javascript scroll down to the 3rd bulleted point and after it says: Is Java enabled?, you will either see true or false. True will let you know that you are using a Javascript enabled browser. If it says false you will need to see if Java is installed and if not, install it and enable it.

The Java test website goes on to explain that Java and Javascript are two very different programming languages and pretty much only share the first four letters of their name. To learn the difference between the two languages you can check out these two Wikipedia pages here and here to read about Javascript and Java respectively.

But they have another easy to use JavaScript test :

If you are looking for the easiest and quickest test possible the one above is it. But if you also need some more information regarding your browser’s capabilities you can check out this browser capability test website. This is a web application called Browser Hawk.

You can see the output from my FireFox 3.6.3 below:

All three of these web tests will be able to quickly tell you if your browser is actually Javascript enabled. If you have to send a user to a website to test their browser I would send them to the second one from JavaTester as it is the easiest one to see the results on.

If you are a programmer you can easily integrate the code from these pages to create your own test sites on your local intranet or website. If you do code up your own snazzy pages we would love to see them so hit us with the links in the comments.

If you are looking for a Java test website you can check this one out. It will work with all operating systems and Internet Explorer, Firefox, Mozilla and Netscape.

So what exactly is a library and why would you want to use one for JavaScript when you can do just about anything without including another file in your code? Glad you asked. Let’s try and answer that, and also have a look at some of the top JavaScript code library options available out there.

Libraries

When talking in terms of programming and computers, libraries generally refer to collection of re-usable code that aids you in developing your code for a particular job. JavaScript libraries in particular, provide you with a host of useful utility functions that make development a lot easier. In addition, a JavaScript code library takes care of the cross-browser issues allowing you to focus on your application’s logic rather than resolving discrepancies amongst the various browsers. Here is a quick rundown of 5 most popular JavaScript Libraries:

jQuery

Arguably the most popular JavaScript code library out there. jQuery is called the “write less, do more” JavaScript library. One of the reasons for this is the concise syntax and one-liners that allow you to perform complex tasks, that would normally require a fair amount of code.

$(‘#toc’).children(‘li’).addClass(‘highlight’).show(‘slow’)

This is a typical jQuery one-liner that looks for a DOM element with id "toc" and then traverses its children for any "li" elements, adds a class highlight to them and unhides them while animating them slowly. Try doing that in a single line of crude JavaScript!

Greatest strength of jQuery is DOM traversal and manipulation. These have been made so easy with jQuery that one often tends to slack off when writing markup, thinking how easy it is to manipulate it using jQuery. In addition, jQuery also has excellent list of plugins and jQuery UI which is great for extending the capabilities of jQuery and designing awesome user interfaces.

Moo Tools

Moo Tools offers similar capabilities as well. Both jQuery and Moo Tools offers similar capabilities and differ slightly in syntax. Moo Tools is slightly more inclined towards writing Object Oriented JavaScript. While nothing stops you from doing so with jQuery, Moo Tools actually facilitates writing re-usable Object Oriented Code. jQuery is focused more towards getting things done easily while, Moo Tools is for the intermediate to advanced JavaScript developer who wants to writes components to use them later.

Moo Tools has a plugin directory of its own, it may not be as rich as jQuery’s plugin directory but it is certainly one you can turn to when in need. The documentation is good and there are books that focus on Moo Tools so you can get started and be up to speed easily.

Dojo Toolkit

As the name says, it is a toolkit. As such it offers a powerful API that lets you perform complex tasks like DOM manipulation, traversal and animation easily via CSS selectors as do most other JavaScript frameworks and libraries. Where Dojo excels is the performance front. Dojo along with jQuery are the two best libraries in terms of execution speeds (although at the end comparing JS frameworks in terms of speed is sometimes like comparing apples to oranges).

Dojo Toolkit also offers rich UI widgets that you can use to enhance the user interface of your application. Dojo supports all the popular browsers and the documentation is good along with a number of books that you can buy to learn the ins and outs of Dojo Toolkit.

Ext JS

If it is the user interface you are focusing on, when developing your web app, Ext JS is perhaps one of the best solutions out there. Ext JS provides a comprehensive set of widgets which give your web app a desktop application like look and feel. The UI widgets are rich in functionality as well, capable of fetching data via a variety of methods and displaying them exactly like you want.

There are tabs panels, trees, accordions, grids and a whole lot more. These can be combined with one another by means of layouts (a la Java Swings) to design a complex layout that can put desktop applications to shame. You can look at some of the demo apps over at Ext JS site to see what the javascript code library is capable of. Recently they have also released the Ext Designer, which allows you to create UI’s using simple drag-and-drop operations and then gives you the code for UI.

YUI

YUI or the Yahoo! User Interface library is the same library that powers the Yahoo! homepage. YUI is a robust, feature rich JavaScript Library developed by engineers at Yahoo and now includes code from contributors from around the world.

The library features number of UI widgets, utilities to take care of animation, drag and drop, AJAX calls and the likes. Contrary to other popular libraries, YUI actually lets you choose just the features you want to use, which keeps your application lightweight. You can find a lot of examples and tutorials, along with excellent documentation to help you along.

There a host of other JavaScript libraries that didn’t find a mention above. Prototype, Scriptaculous, Mochikit, Qooxdoo, Open Rico to mention a few. All the libraries bring something extra to the table. There has never been nor there will ever be a clear winner. The one you choose is the one you are most comfortable with and the one that suits the needs of what you are trying to build.

Obviously a standardized implementation was needed, which led to its submission to ECMA international. Thus ECMAScript was formed. These days, most browsers support ECMA-262 which is also more commonly (and often vaguely) known as JavaScript.

What is Javascript? Javascript is rightly called the language of the Web. Each newer browser version pushes the bar higher in terms of JavaScript execution speeds. This is an important performance parameter these days as sites make extensive use of JavaScript. JavaScript led the Web 2.0 revolution with AJAX. Using JavaScript, sites can send HTTP requests behind the scenes and customize or update certain sections of the site, tailored to a particular user’s needs. This does away with complete page refreshes and makes the user interface a lot more powerful and user friendly.

Hello World of JavaScript

The Hello World example is almost customary to include when talking about programming languages. So here we go

<script>
document.write("Hello, World!");
</script>

You can also pop alert boxes just as easily with:
<script>
document.alert("Hello, World!");
</script>

Yeah, that is all you need. No need to include any file or import any packages. Everything that is needed to execute JavaScript is provided by the browser (or the client) so it is also called Client Side Scripting Language. Why client side? To answer this question, you would have to look into how JavaScript works.

How It Works

The browser fetches a page which might have embedded JavaScript as we saw above, or refers to a separate JavaScript file in which case that file is also fetched by the browser.

Next up, depending upon what you want your JavaScript code to do and how you structured it, it will either execute as soon as the file loads or wait for a triggering event (like a click, or load).

Finally, when it’s all good, the code is executed line by line. JavaScript is an interpreted language, which means you don’t need to compile the code into another form to execute it. All of the changes you make, instantly take effect.

Comparing Other Programming Languages

Contrary to what the name might suggest, JavaScript is actually very different to Java. There are some similarities in the syntax, but that’s about it. JavaScript is loosely typed (you don’t have to define the datatype of variables) while Java is not. JavaScript is mainly executed in a browser, where as Java can be used to create stand alone applications. Java has a much wider area of application as compared to JavaScript which largely lives inside the browser.

JavaScript is Object Oriented but unlike other programming language that implement inheritance via classes, JavaScript does so via prototypes. JavaScript also has the largest install base (arguably) since it is bundled with all the major web browsers these days.

I have merely scratched the surface when you consider that it is a full blown programming language, and that it has all the buzz and develop going for it these days. There are plenty of JavaScript libraries, server side JavaScript and other projects that push the realms and applications of JavaScript to a whole new level. If you are starting out on JavaScript there are few tutorials that will help you along. Once you are up to speed and enjoy what you are doing, you can pick up The Rhino Book and enhance your JavaScript skills even further.

Have you ever tried to program with JavaScript? How was the experience?

While this is a good idea, the trend brings up some inconveniences. One of them is the unavoidable clutter of the browser tabs. It seems that the concept of opening only one tab at a time is alien to modern day people. If you are similar to most people, you’ll have many open many tabs simultaneously.

Terror of the tabs

All of these open tabs, which consist of the regulars (the ones that we always open) and the passersby (the occasional browse), will eventually choke your browser and drain your system resources.

But the worst part is the time when you have to re-open your browser – along with all the tabs. Even if you are lucky enough to have the last opened tabs remembered by the browser, the process will still take time and bandwidth.

What if you’ve quit your browser, but you need to check your inbox in GMail? Do you need to open all the tabs for the sake of only one?

It would be nice if the important links – the one that we often visit – could be opened independently in a site specific browser. Beside reducing the clutters, this method will also lighten up the burden for your system.

To be able to do that on Mac, you need the help from Fluid.

The turn and the tune

Fluid is an application that will help you build Site Specific Browsers (SSBs). Translation: you can create a dedicated browser for each of your favorite web address. Every browser instances is an independent application by itself.

Jackson discussed Fluid back in 2008, please refer to the article for more information and the background story. But there have been many improvements since then. So, let’s have another look, shall we?

To create a new SSB, tell Fluid the site address. Don’t forget to give name to it. By default, Fluid will put the end result in the Applications folder and use the web’s favicon as the app’s icon (even though the icon fetching action is not always successful). Click create to start the building process.

Several seconds later, your dinner is served.

Launching the new app will open the main page (or the address that you provide).

The interface is deliberately set to be clean and simple. But should you need the standard browser interface, you could do so via “View” menu.

You can adjust many behaviors of created SSB from the Preferences menu. There are many categories there, but we’ll just look into some of the most important.

First, the General Preferences. This is the place to assign shortcut keys and change the application icon.

You can also adjust the general look to your liking from the Appearance Preference.

The Userstyles Preferences pane is the “dreams come true” tab for most of creative people out there. You can assign CSS codes to alter the appearance of SSB’s sites and pages. After clicking the “Plus” (+) button, write down the specific address in the “URL Pattern” box and check the box. While selecting one of the URL Pattern, you add lines of the CSS codes inside the box below.

There is a short video explaining this feature in the developer’s blog.

And for those who aren’t into CSS, there are a lot of ready-made userstyles for Fluid. Each of them was usually written for a specific site/web service. All you need to do is search for them. Userstyles.org is a good place to start.

To get ideas on how far you can go with the customization, you could visit this site.

As the name suggests, SSB will only allow you to go around a specific site. But the strict rule could easily be bent by going to the Advanced Preferences. You could add more URL patterns – the open areas that could be visited – or you could just bypass the rule by choosing “Allow browsing to any URL” radio button.

(Almost) unlimited possibilities

Fluid and its ability to be customized really open up the door for possibilites. You could go from just creating simple SSBs of your favorite sites to building your own desktop clients made up of web services. Few of the popular web services among Fluid users are: Digg, Twitter, GMail, Remember the Milk, Google Docs and Facebook. While my personal favorite usage is to build specific blogging clients of the sites where I contribute.

The availability of bookmarks bar also allows you to add bookmarklets to enhance the ablility of the SSBs.

As a standalone applications, you could also add your SSBs to the startup list (System Preferences > Accounts > Login Items) so they will always be available every time you restart your system.

Have you ever tried Fluid? Do you have other ideas of using Fluid? Do you know cool customizations for Fluid’s SSBs? Share using the comment below.