Saturday, December 16, 2006

CSS Tab Designer


If you share the philosophy that time is a very important commodity while building applications, and that as much as possible, development time should actually go only to building the critical part of an application; the business logic, database design etc and not on mundane task or task that can easily be duplicated then you belong to my school of thought.

CSS Tab designer is a tool that enables you to maximize precious time in designing the user interface of a website/web application.

It is a software that helps in creating CSS based navigation list and tabs visually without having to spend time writing codes.

It so easy and so cool. On the fly, you are done creating the look and feel of your navigation, leaving you with time for other things.

With the CSS Tab designer you can:

  • Quickly design your list visually

  • Choose from a variety of styles/colors (60+ different designs/colors supported)

  • Generate strict xhtml compliant code



I'm sure this is a tool that you will derive a lot of utility from.
It's free so you can go and download it straight away.

Zamzar:Online file conversion


If all you want to do is convert a file from one format to another, and you don't see the sense in installing a software for just that singular purpose, then zamzar is an application you will like.

zamzar is an Ajax application that enables you to upload a file and then convert it to the format of your choice. The conversion is done on their server, meaning you don't have to install anything on your computer.

At the moment, zamzar is in beta version and currently it supports over 150 different files conversion.

And if you have being looking for a way to make those PDF's editable, why not just use zamzar and convert them to MS WORD where you can edit them? Yeah, it can do that to.

so Go try it out.

Saturday, November 25, 2006

Creating Objects Using Object Literal

This method offers a much more convenient way to create objects without first predefining a constructor function. This method could be viewed as one of JavaScript's strength because of how it makes the creation of object so easy.

The object literal is actually a list of property-value pairs enclosed in curly brackets and separated by colon.

The syntax look thus

var myvarobject = {'propert1':'value1','property2':'value2','propertyN':'valuen'};

To see this in action lets see how it is used in creating objects.
So if i want to create a monitor object with the following properties: make,screensize and color, i will write:

var mymonitor = {'make':'Dell','screensize':'19inches','color':'graphite'};
and i have my object created.
Once this is done, i could check to see if the object was successfully created.
Writing:
alert(mymonitor.make) should display 'Dell'. Other properties of the object can thus be accessed.

Saturday, November 11, 2006

Creating Objects in Javascript 1.0 using constructor function.

Javascript offers various methods of creating objects and this method I am going to share is just one of them. Javascript 1.0 has two methods: the object literal method and the function constructor method (which this post is about). Javascript 2.0 to also comes with its own method of making objects. The choice of which method to use depends on your personal preference and the JavaScript version most of your audience will be running…Having said that, lets get down to business

The constructor method


This method imitates the process of first defining a class and then afterwards instantiate an object. So the first thing we are going to do is to define the class. The syntax of creating a class is similar to what you have when defining a function. So let say we want to create a class called ‘webdevelopers’ you will then write

function webdevelopers()
{

}

Since a class is supposed to be a template that objects are created from; a list of the properties peculiar to that class must therefore be listed. To do that you write

function webdeveloper(identity,location,technologies,portfolio)
{
this.identity = identity;
this.location = location;
this.technologies = technologies;
this.portfolio = portfolio;
}


So the next thing to do is to create an object from this class. To illustrate let me use my friend who is a web developer as an example. Here are some of his characteristics;
• His name is Tim
• He stays in lagos
• Php is one of the technologies he uses
• Searchnigeria.info is part of his portfolio

So to model him as an object I will just write

var Tim = new webdeveloper(‘tim’ , ‘lagos’ , ‘php’, ‘searchnigeria.net’);

And so I have a ‘Tim’ object.

To see if the object is well created, try to access the listed properties. For example, including this:

alert(Tim.location);
Should result into an alert box with the message “lagos”

What about adding methods to your objects? That is also easy
i.e if I want a method that will write my name in an alert box, I will need to add the following code to the function that defines the webdevelopers class:

this.saymyname = function myfunction() {alert('dade');}

So whenever I call the method by writing ‘this.saymyname()’ the function ‘myfunction()’ will be executed and i will have my name shout at you from the alert box.

Friday, October 27, 2006

CSS QUICKIE

This is a little tutorial on how to create that Centerd Content layout that we all love.Lonely Flower is a typical example of such design.
Its quite simple. First thing you need to do is to create the DIV element that will contain the contents and then give it the required dimension via your css. for example:

This is my HTML:
< div id='main_container'>< /div >

and this is my CSS:

div#main_container
{
width:700px;
height:600px;
background-color:#fff;
border: #eee thin solid;
}


With the above code you have your styled DIV. To now move it to the center, to the already defined style just add:

margin:auto;

This will move the DIV to the center of the screen and the reason this is so is because the 'auto' value given to the 'margin' property will autamically assign the required amount of margin space to all the four sides of the div; thereby pushing it to the center.

SPELL CHECKER

Was strolling one nice evening on the tangled web street of the internet looking for anything Ajax in nature when i stumbled upon Jacuba. Jacuba is free on line spell checker that works nicely. With its ajax implementation, it has a really nice desktop-App feel. Apart from the on-line checker, they've got some other products that could be useful to you depending on what you do.You can go and check to see what i mean.

Saturday, October 14, 2006

Semantic Ajax

Some school of thoughts argues that Ajax discourages the creation of websites using semantic XHTML design, and the separation of contents from presentation. They believe Ajax promotes creation of presentation with JavaScript, thus going against the idea of presentation being apart from content.

Although this allegation might be true, I don’t think it’s an inherit flaw in Ajax. It is more of how people are using it. The philosophy of Ajax does not necessary calls for content being muddled up with presentation, in fact with the proper use of CSS, Ajax application can be built with contents separated from presentation.

The technology that serves as the building blocks of Ajax clearly makes the creation of semantic Ajax application possible. This is because each building block is defined in its functions. And there is no reason why there should be overlapping of functions, if properly used.

I can divide the main components of any Ajax application into:
  • The Asynchronous Components
  • The Presentational Components
  • The Content Components


And if each component is handled by the appropriate technology, then I see no reason why any Ajax application can’t be as semantic as required.

For example the Asynchronous components will be handled by JavaScript and the XmlHttp object.
The Presentational components should be handled by your CSS.
and the Content Components should be handled by the DOM, JavaScript and your XHTML.

It is when these three components are not properly separated that Ajax might be an aberration to semantic XHTML. For example using JavaScript for Presentational Components will not be good practice. Since CSS can style dynamically generated contents, there is actually no reason for using JavaScript instead.

So it’s all with the developer and not Ajax as a technology. With semantic XHTML, accessibility, and the separation of content and presentation in mind, you can still build your web application the Ajax way!