Explore Yourself !!!


JQuery : Easy way to learn

Well, till now i am not familiar about Jquery. months back, during discussion i told an expert programmer that, i don’t know Jquery. and he replied: “Don’t worry about JQuery. JQuery is Designer stuff not developer but it’s nice to know how to integrate and it works”.

As though, i am really lazy one i can’t start learning Jquery upto yesterday. But today is good time for me to learn jquery stuff. So here is my index of learning:

1. Understand basic concept of JQuery.
2. Integrate JQuery in a simple scratch build php page(registration.php)
3. Integrate JQuery in Code Igniter
4. Integrate JQuery in Symfony.

1. Understand basic concept of JQuery.
Well, jquery is nothing but a helpful file. which means that, first i need to dowload jquery.js file and put it somewhere in my project. now, most popular thing is form validation. to validate a form what we need is, first download jquery.validate.js file. moreover, here is a list of validation stuffs.
http://docs.jquery.com/Plugins/Validation

2. Integrate JQuery in a simple scratch build php page(registration.php)
<html>
<head>
<script src=”jquery-1.3.2.min.js”></script>
<script src=”jquery.validate.js”></script>
<script>
$(document).ready(function(){
$(“#commentForm”).validate();
});
</script>
</head>

<body>

<form id=”commentForm” method=”post” action=”test.php”>
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for=”cname”>Name</label>
<em>*</em><input id=”c_name” name=”name” size=”25″ class=”required” />
</p>
<p>
<label for=”cemail”>E-Mail</label>
<em>*</em><input id=”cemail” name=”email” size=”25″ class=”required email” />
</p>
<p>
<label for=”ccomment”>Your comment</label>
<em>*</em><textarea id=”ccomment” name=”comment” cols=”22″ class=”required”></textarea>
</p>
<p>
<label for="cbd">Birthday</label>
<em>*</em><input id="cbd" name="cbd" size="25" class="required date" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>

<p>
<input class=”submit” type=”submit” value=”Submit”/>
</p>
</fieldset>
</form>
</body>
</html>

3. Integrate JQuery in Code Igniter:
It’s surprising for me, according to my plan i go over CI forum and search “how to integrate Jquery with CI” i found that, there are nothing special !! it’s really simple and easy. nothing special. only the difference for me is that, i use master template concept now i days. where my view file is not as usual even for write which css and js files will include there are a specific page. this kind of splliting(part of master page concept) have huge advantage over conventional. i shall write that in some other days. so i integrate jquery js files there and in my main page i add the following script(for registraton validation):
<script>
$(document).ready(function(){
$(“#commentForm”).validate();
});
</script>

4. Integrate JQuery in Symfony:
Will be exactly same as CI. because both follow MVC pattern. so no worry about Symfony as well.

End of the day, first time in my life i do something in time according to my plan ;) Enjoy Jquery :)



Web standards checklist
March 2, 2009, 5:48 am
Filed under: Web Technology

[100% copy paste from http://www.maxdesign.com.au/presentation/checklist.htm]

Web standards – more than just ‘table-free sites’

The term web standards can mean different things to different people. For some, it is ‘table-free sites‘, for others it is ‘using valid code‘. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).

In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.

About the checklist

This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:

  • to show the breadth of web standards
  • as a handy tool for developers during the production phase of websites
  • as an aid for developers who are interested in moving towards web standards

The checklist

  1. Quality of code
    1. Does the site use a correct Doctype?
    2. Does the site use a Character set?
    3. Does the site use Valid (X)HTML?
    4. Does the site use Valid CSS?
    5. Does the site use any CSS hacks?
    6. Does the site use unnecessary classes or ids?
    7. Is the code well structured?
    8. Does the site have any broken links?
    9. How does the site perform in terms of speed/page size?
    10. Does the site have JavaScript errors?
  2. Degree of separation between content and presentation
    1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
    2. Are all decorative images in the CSS, or do they appear in the (X)HTML?
  3. Accessibility for users
    1. Are “alt” attributes used for all descriptive images?
    2. Does the site use relative units rather than absolute units for text size?
    3. Do any aspects of the layout break if font size is increased?
    4. Does the site use visible skip menus?
    5. Does the site use accessible forms?
    6. Does the site use accessible tables?
    7. Is there sufficient colour brightness/contrasts?
    8. Is colour alone used for critical information?
    9. Is there delayed responsiveness for dropdown menus (for users with reduced motor skills)?
    10. Are all links descriptive (for blind users)?
  4. Accessibility for devices
    1. Does the site work acceptably across modern and older browsers?
    2. Is the content accessible with CSS switched off or not supported?
    3. Is the content accessible with images switched off or not supported?
    4. Does the site work in text browsers such as Lynx?
    5. Does the site work well when printed?
    6. Does the site work well in Hand Held devices?
    7. Does the site include detailed metadata?
    8. Does the site work well in a range of browser window sizes?
  5. Basic Usability
    1. Is there a clear visual hierarchy?
    2. Are heading levels easy to distinguish?
    3. Is the site’s navigation easy to understand?
    4. Is the site’s navigation consistent?
    5. Does the site use consistent and appropriate language?
    6. Does the site have a sitemap page and contact page? Are they  easy to find?
    7. For large sites, is there a search tool?
    8. Is there a link to the home page on every page in the site?
    9. Are links underlined?
    10. Are visited links clearly defined?
  6. Site management
    1. Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
    2. Does the site use friendly URLs?
    3. Do your URLs work without “www”?
    4. Does the site have a favicon?


Create an SVN repository for your project
December 14, 2008, 5:30 am
Filed under: Web Technology | Tags: , ,

Subversion have a huge list of features what you can get from here. But i have not enough time to read the big list. So in short, subversion is a system which helps developer to backup and recovery(extreme feature) their code time to time. Tortoise SVN is a good subversioning system for windows. Easy to install and use.
Why we use SVN?
Best and attractive feature what i found is Checkout and Commit. Let me explain more. While i am working in a project i change a number of files in different folder. So when we need to synchronize with server we need to enter individual folder and upload files through FTP. Or whatever it’s local office development when multiple (or even single) developer engage in a single project. For all easy way to do this task is : just enter into project folder (eg. htdocs/my_project) now click SVN->Commit. a list of changed files displayed and you can easily check which files you wish to commit. Moreover, you can put a comment for your change. Someone in other end can easily receive these files by SVN->Checkout. He will notified what changes made by whom. It’s the cool feature and a lot more. So lets try to install and use it first.

First download it from here
How to setup ?

In Windows explorer, make a directory where you would like the SVN repository to be.
Right click on the directory you just created, then scroll to TortoiseSVN > Create Repository here…
You should get the following pop-up window:
pop up window. if not appear, don't worry

Choose the file type you would like and click OK.
How do you know it worked?

You should get the following message:

Ok message

Import the project into the SVN repository

Go to your work area in Windows Explorer. Right click on the directory you just created, then scroll to TortoiseSVN > Import…

URL of repository should be blank first and then press right tiny button

Click on the button in the top right to browse for the location of the SVN repository that you just created. Once selected, add a “/trunk” to the end of the file location. Enter “initial import” in the Import Message field. Click OK

How do you know it worked?

You should get output as follows:

output

Start using the SVN files in your work directory

To use the SVN repository, we’ll actually want to checkout the files in an empty directory – SVN needs an empty directory to start.

Using Windows Explorer, rename your project directory from aminul_stull to aminul_stuff_backup . Create a new work directory named aminul_stull Right click on the directory you just created, then scroll to TortoiseSVN > SVN Checkout… In the pop-up window verify that the “URL of repository” has the location of the SVN directory that you created; if not, browse and select it. Make sure you have /trunk added to the raw location. Click OK and you should get the following window:

ok window

When you go back to windows explorer, you should now see a green check mark next to the directory.
[SVN er Dorwaja Kholna MAMU]

[NOTE: i have STOLEN maximum content of this article over the net;) Don't worry no one blame you if you use it and get benefited :D ]



Registration system in different web sites
October 4, 2008, 1:53 pm
Filed under: Web Technology | Tags: ,

I found a number of registration systems in different web sites. All are developed differently. Different as a sense of different fields and techniques. But all web sites main concern is genuine and valuable members/customers. Registration fields are always depends on the type of web site. Registration system is almost endless. If you like to add more and more features you can. If think make it simple, then simple andmeaningful. Some times memberships are controlled by admin, without admin permission registration is incomplete. Here i mention some registration system.

Simple registration : Have only few fields like First Name, Last name, Email, Contact Number, User name and Password. After submit you are registration form you are registered member and can enjoy all facility of registered members.
Slightly improved version : uses email verification. They send a secret code to your email. By clicking the verification link you have to confirm you are the owner of this email account. It’s a good validation maintained in registration system. Otherwise someone might use your email id and later you can’t register by your own.
Membership approved by Admin only. This type of registration contain as usual fields with email verification. First you register and verify your email address. Then admin view your profile (usually through admin panel) and contact with you (via phone, email or any other way). Finally admin approve you as a member. Admin have full right for disapprove/block your membership at any time.
Secured registration : Image verification used at number of sites for registration process. This type of verification use for protect automaticregistration (by software).
Paid Registration : Most of the web sites registration is free of cost. but few sites take change for membership. Few site says pay once and get membership forever. And one other category take charge for a period of time.

All these registration are seems same for site visitors. Because of the design and representation of user interface(UI). Functionality are different for different systems, what is almost hidden from users.

Registration is an important part for any web sites. Whatever it’s popular like BBC, CNN or new www.shopno-dinga.com