Month: May 2007

1.Divitis , Classitis, Tagitis

Please think twice before adding a tag to the page.

Bad code

 
<div id="header">
 
<div class="headerTop">
<h2 class="headerTxt">Site Name</h2>
</div>
 
<div class="headerTagline">
<span class="tagline">tagline</span>
</div>
 
</div>

Better Way

 
<div id="header">
<h2>Site Name</h2>
<span class="tagline">tagline</span>
</div>

2.Tables are okay for tabular data

I see some times that web developers are so passionate about divs and table less designs that they try to fake a table using divs (I was one among them :D) Be sensible to use tables when you are needing to show tabular data, like a list of customers orders etc.

 
<table>
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>varun</td>
    <td>varunkrish.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>google</td>
    <td>google.com</td>
  </tr>
</table>
 
is okay compared to 
 
<div id="table">
  <ul class="heading">
    <li>col1</li>
    <li>col2</li>
    <li>col3</li>
  </ul>
  <ul>
    <li>1</li>
    <li>varun</li>
    <li>varunkrish.com</li>
  </ul>
  <ul>
    <li>2</li>
    <li>google</li>
    <li>google.com</li>
  </ul>
</table>

3.Let the page have good content flow even with CSS removed.

By writing Semantic Markup, you make sure the content flow displayed to the user remains the same even with CSS turned off.
This is very critical when you see from the angle of the Search Engines and Mobile / PDA Devices.This also mean that you separate the content from the presentation

4.Use Tools to make ur life easier

Firefox – Web Developer Toolbar

IE – IEDEV Toolbar

Opera – Dev Opera tools

5.Why do you need Inline Styles ?
Dont use them unless you want to messy code . Try to keep all the CSS in external files. Split the files if it gets big.

6.CSS / Loading times

When loading times of CSS file becomes a concern , you must try moving the styles into separate files so as to the reduce the amount of data. Also you dont need all the styles in the world for a single page. So organize them acording to your needs

7.Use relative paths to images

I see a a lot of sites using absolute paths for images used in either the HTML code or for the CSS background images.

Be smart, use relative paths to your images.

use 
background-image:url(/images/background.gif);
 
instead of 
background-image:url(http://site.com/images/background.gif);

8. I can do a lot of this with HTML why do i need XHTML ?

But HTML is loosing adoption and XHTML is gaining acceptance.Check these pages

for some benefits

New York Library site
WSG

XHTML is more closer to XML although both are derivatives of the same.

9.Make you site printer friendly with just a extra line of code and a CSS file

You must have seen media=”print” or media=”projector” line while including CSS files.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Should do the trick

10. Use a Syntax validator

I was migrating a simple MySQL database from my PC to my Web server.

I was stuck when I could not add records to my table . MySQl threw a duplicate value for primary key error.

I was able to add records to my table in the local database in my PC though.

When I compared the two tables side by side , I found the auto_increment property missing in the remote table.

 remote table mysql 4.1.21

 local table mysql 5.0.27-community-nt

Further investigation proved that the real culprit is PhpMyAdmin.

When you export a table along with the SQL compatiblity mode set to Mysql 4, it chops the auto_increment property.

Need to find a workaround for this, Or is it time to revert back to Mysql 4.1 on local or look of a Mysql 5.0 host

Podworks is the first of its kind podcasting workshop to be conducted in chennai on June 9 and 10. The two day event which will take place at Tidel Park will have the some of the famous podcasters from the country. Podworks is yet another initiative from the knowledge foundation, the key force behind the events like Blogcamp,Wikicamp and many other events.Podworks will be a workshop style unconference where all the knowledge needed for making a podcast will be imparted from people who have done it before and there will also be many hands on sessions, competitions and discussions. Podworks will be India’s Biggest Event on Audio & Video Podcasting event and promises to bring the best of the podcasting/blogging/new media community together to learn, share, experience, and grow.

There will be a door donation of Rs.200 for meeting the expenses of the event and of course there will be some give aways which will help you continue your podcasting experiments at home.

Registrations for the event are open and rush up if you are interested as the number of participants for the workshop is restricted. Keep yourself updated about the event by joining the mailing list. If you are interested in volunteering go check the wiki and take up some responsibility