Amoeba Solution Kiosk » CSS & XHTML

HTML5 Canvas Tutorial & Example. Draw a Rainbow using Arc.

Aneeska — Fri, 17 Sep 2010 16:45:54 +0000

The world is slowly adopting HTML5 and it is time to move towards it. HTML5 incorporates many features which were achievable only using third party plug-ins. I am not talking about HTML5 in detail. I just want to give you some light on a great feature which HTML5 ships with, “Canvas”!

“Canvas” which is an HTML5 tag, allows you to render graphics or visual images on the fly through programming in a browser. Very similar to generating graphics (drawing shapes) in Flash using the BitmapData class. To implement canvas in your webpage, you need to define a “canvas” tag in your mark up just like how you define any other container tag like “div”.

A canvas object contains a drawing context, which is where we draw graphics. This context can be accessed using Javascript. HTML5 has now defined only a “2D” context in a canvas. The future release of HTML5 may contain a 3D context as well. Let’s now see how to access this 2D context and start drawing.

The context has many methods associated with it which allows us to draw various shapes, fill colors, define styles etc. See the example below which draws a Rainbow in a Canvas. The rainbow is created by drawing 7 circles with different radiuses. You don’t see the full circles because I didn’t define a height for the canvas. The canvas has now the default height and it crops the rest of the part. Play with the code and let me know if you have any questions.

The best part about the canvas is that, you can save a rendered graphics in the browser as an image by choosing Save Image As from the canvas context menu. I am not sure this feature is available in all the browsers.

Among the versions in Internet Explorer, IE 9 is the only browser which supports HTML5 and canvas. Other Major browsers have been supporting HTML5 for quite a while. To enable canvas feature in IE7+, developers can include a JS library named Explorer Canvas in their code. Download it here: http://code.google.com/p/explorercanvas/downloads/detail?name=excanvas_r3.zip

The above example code is a simplified version of code written by Marijn Haverbeke.
For a complete documentation on Canvas, see https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes

Enjoy!

Enhance your Website Performance – Best Practices

Aneeska — Thu, 22 Apr 2010 14:13:39 +0000

Do you think your website is sluggish? Does it take a lot of time to download on to a user computer? Here are some techniques to make your site load faster on user computers and enhance it’s performance. These are some of the best practices followed in the Web industry. Implementing these practices has proved that your site will become 20-30% faster. This tutorial is for advanced users and I haven’t explained it in detail.

Combine all your Javascript files and CSS files in to one file each.
Normally we include multiple Script files in web pages. You can probably write a PHP script which accepts an array of names of all the script files to be included in the webpage which then fetches the content of the files and creates just one file and passes on to the browser. This doesn’t reduce the file size. The combined file size is not less than the sum of the sizes of the individual files. But it reduces the number of HTTP requests sent to your server.

Similarly you can combine all your icon/background images in to a single image and use CSS techniques like “background-position” to show different images at different places. Remember each image causes an HTTP request and you can reduce a lot of requests doing this way.

Use YUI Compressor to minify your Javascrip and CSS files.
When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

Add Never Expires header for your Javascript and CSS files
You can use Apaches mod_expires module to set Cache-Control header for certain file types. You can configure your apache configuration to add statements like this,
ExpiresByType image/gif “access plus 1 months”
You can add Never expires header for your Javascript and CSS files. If you constantly make changes to your Script and CSS files you will have to rename the files every time you make changes.

Enable Compression
Enable compression using Gzip. 90% of the browsers support this. You can compress your text content, xml, script files etc but not images.

Stylesheets in your header
Make sure that your style sheets are inside the Head tag.

These are some simple things you can implement but will obviously enhance your website performance.

Good luck!

Alternate Table Row Color Styling or Zebra Table using Prototype

Aneeska — Fri, 05 Mar 2010 07:22:29 +0000

This tutorial teaches you to easily apply Zebra styling to your static/dynamic tables. The method of styling alternate rows with different colors is also known as Zebra styling. We normally achieve this by defining two sets of styles for odd and even rows of a table and manually adding these class names in to the table rows. When the data table is generated dynamically we use programming techniques to apply styles to alternate rows.

Here is a simple method using Prototype. This way, all you need to do is to define a class name for your table and prototype will automatically apply the odd table style to alternate rows of the table.

Let’s look at our table structure.


  
    ID
    TITLE
    DATE
    STATUS
  
  
    1
    Microsoft Launches first Android application
    Mar 05, 2010
    New
  
  
    1
    Another title
    Mar 05, 2010
    New
  
  
    1
    Google's new innovation
    Mar 05, 2010
    New
  
  
    1
    Microsoft Launches first Android application
    Mar 05, 2010
    New

ID	TITLE	DATE	STATUS
1	Microsoft Launches first Android application	Mar 05, 2010	New
1	Another title	Mar 05, 2010	New
1	Google's new innovation	Mar 05, 2010	New
1	Microsoft Launches first Android application	Mar 05, 2010	New

Note that I have defined “ListTable” as the class name for the table and nothing else.

Now in the head section of the html, include prototype Javascript Library.

You can download Prototype Library from here: http://www.prototypejs.org/download

This is the basic styles we will define for the table with a class “ListTable“:

Now, add the below piece of Javascript in your html. This script will be called when the DOM is ready (similar to Window.onLoad).

Notice that we are applying a class named “oddRow” to alternate table rows in the table which has a class applied “ListTable“.

Here is a screen shot of the table generated using the above method.

Enjoy!

POSTing unselected OPTIONS in a SELECT tag

Aneeska — Mon, 15 Feb 2010 16:27:00 +0000

When a form is submitted to the server, only selected values in a multiple SELECT box reaches the server. It is not possible to access the unselected options in a SELECT box from the server. Though this is not really required always, there are situations where you would want to access all the options in a SELECT tag. One example is, when you allow users to select and move options from one SELECT box to another and the second SELECT box represents the user selection.

The below function can be called before a form is submitted and it will read all the options in a SELECT box and will append to the form as a multiple selection INPUT field. Thus, the server will be able to read the value as an array or options.

This example also gives you an idea how an INPUT array form element is created using Javascript.

The form could look like this.

Here is the Javascript which will be called before the form is submitted. The id of the Multiple SELECT box is “multipleValues”. The script loops through the select box and appends it as an input array element to the FORM and submit the form to the server.

Now in your server script, you can access the options (unselected) in the SELECT box as an array.

The php code for accessing the above SELECT box values would be this. Here, you can access “selectBoxData” as an array.

print_r($_POST['selectBoxData']);

HTML Form – Moving options from one SELECT to another

Aneeska — Mon, 15 Feb 2010 16:07:43 +0000

This article basically talks about two things.

1) A Javascript code to move options from one multiple select box to another in a form.

Move options from one SELECT box to another:

There are two multiple SELECT boxes and one has got some OPTIONS in it. User can select one or more options from one and click on the Move button to transfer the selected options in to the other one. Similarly, the selected options from the second SELECT box can be moved back to the first one.

Here is the HTML Code:

And here is the Javascript code:

The above code also allows you to double click on a select option to move it to the other.

Dead Center layout using CSS

Aneeska — Sat, 12 Dec 2009 20:31:05 +0000

How many of you have searched Google for “dead center align” or “vertical center css” and found results showing more than a million pages only to realize that most of them don’t give you the right solution you are looking for? Well, vertical centering has always been a nightmare for designers and developers. The solution we are looking at is not just limited to aligning text vertically center inside a container or a div tag. We need to vertically and horizontally center a div container in a browser. We need to align an object (a div or a table) whose height is unknown, inside a div.

The concept of aligning a div vertically center in a browser is pretty simple. It is achieved by absolutely positioning a div in half of the area height and moving up by half of its height. This is possible when you know the height of the div. Let’s see how it works. Here is the css style defined for the wrapper div with an ID “box”. The important thing to note here is the “left” and “top” parameters. These values are defined in percentage values. This really helps you to position a div in the center even when you don’t know the resolution of the browser screen. The top-left corner of the div is now sits in the center point of the browser. The next thing to do is move up the div half of its height and move left the div half of its width. This way the center point of the div is aligned to the center point of the browser. This is done by defining negative values for “margin-top” and “margin-left” attributes. See the css below.

#box {
  width:300px;
  height:120px;
  position:absolute;
  margin-left:-150px;
  margin-top:-60px;
  left:50%;
  top:50%;
  text-align:center;
  }

We have formed a div with a dimension of 300×120 and placed it in the center of the browser. Now, we need to have some text inside this wrapper div which should be again centered inside div both vertically and horizontally. In this case, we need to use some browser hacks and tricks. See the html code and we have now additional div tags to wrap the text and styles targeting different browsers.



    
        
             The text is vertically and horizontally aligned center

				as is the wrapper div. You can use a table as well without a height.

Now what do you do when you want to vertically align a div or table whose height is not pre-defined? Simple! Set the height of the wrapper div to 100% and remove “top” and “margin-top” attributes. Now in the above html code, remove the text with a table or a div tag which doesn’t have a defined height. It works! Download the code and experiment it yourselves. If you found something more interesting, let us all know. Hope it helped.

Here is the full code download link: Dead Center align a DIV using CSS