Bin-Blog » (X)HTML http://www.bin-co.com/blog Learn about the latest in Web Development - as soon as I do. Tue, 13 Oct 2009 18:55:47 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Naked Day – Disabling CSS for the Day http://www.bin-co.com/blog/2009/04/naked-day-disabling-css-for-the-day/ http://www.bin-co.com/blog/2009/04/naked-day-disabling-css-for-the-day/#comments Wed, 08 Apr 2009 18:30:17 +0000 Binny V A http://www.bin-co.com/blog/?p=253 Naked Day 09

Keeping with tradition, this site will be baring all on 9th April 2009. If you haven’t heard about Naked day, this should be enlightening…

Where did my Design go?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.

How to participate

Fill out the naked day signup form, then your website will be included in the official list within the next hour.

Then on April 9th, simply remove all CSS from your website, stripping it entirely of its design.

I have been doing this for a few years now…

I know its kinda pointless – since I use a third party wordpress theme – but I still support the movement.

]]> http://www.bin-co.com/blog/2009/04/naked-day-disabling-css-for-the-day/feed/ 2 Web Installer: The Code http://www.bin-co.com/blog/2007/07/web-installer-the-code/ http://www.bin-co.com/blog/2007/07/web-installer-the-code/#comments Tue, 10 Jul 2007 20:50:21 +0000 Binny V A http://www.bin-co.com/blog/2007/07/web-installer-the-code/ The last two posts on web installer did not include any code. I wanted to dump all code into one post – this is it. Please note that this is what I did – you don’t have to copy my code as it is. Just look at the code and modify it according to your needs.

Getting Database Details

The Form/Frontend

<form action="" method="post">
<h1>Installation : Step 1</h1>
Please provide the database connection details...
<fieldset>
<legend>Database Details</legend>

<label for='host'>Database Host</label><input type='text' name='host' value='localhost' /><br />
<label for='db_user'>Database User</label><input type='text' name='db_user' value='root' /><br />
<label for='password'>Database Password</label><input type='text' name='password' /><br />
<label for='database'>Database</label><input type='text' name='database' value='nexty' /><br />
</fieldset>

<input type="hidden" name="step" value="2" /><br />
<input type="submit" name="action" value="Continue >>" /><br />
</form>

Backend

Make sure that the given database details are correct.

// The First step is Setting up Database connection
//					   (the '2' is NOT a typo)
if($_REQUEST['step'] == 2) {
	//Save the data to the Session
	if(isset($_REQUEST['host'])) $_SESSION['host'] = $_REQUEST['host'];
	if(isset($_REQUEST['db_user'])) $_SESSION['db_user'] = $_REQUEST['db_user'];
	if(isset($_REQUEST['password'])) $_SESSION['password'] = $_REQUEST['password'];
	if(isset($_REQUEST['database'])) $_SESSION['database'] = $_REQUEST['database'];
	if(isset($_REQUEST['url'])) $_SESSION['url'] = $_REQUEST['url'];

	if(mysql_connect($_SESSION['host'],$_SESSION['db_user'],$_SESSION['password'])) { //Try to connect to the DB.
		$QUERY['success'][] = 'Connection to Database server successful';

		if(mysql_select_db($_SESSION['database'])) {//Select the provided database.
			$QUERY['success'][] = "Database '$_SESSION[database]' selected";

		} else {
			$QUERY['error'][] = 'The given database('.$_SESSION['database'].') does not exist. Please povide a valid database.';
			$_REQUEST['step'] = 1;
		}
	} else {
		$QUERY['error'][] = 'Unable to connect to the database. Make sure that the entered details are correct';
		$_REQUEST['step'] = 1;
	}
}

Notice the over use of $_SESSION? That will come in use if I decide to add a Back button that enables the users to modify the data entered previously.

Database Creation

//Create the database only if it does not exist
//See if the database exists
$tables_sql = mysql_query("SHOW TABLES") or die(mysql_error());
$necessary_tables = array('Context','Project','Reminder','Setting','Task','TaskContext','User');
while($table = mysql_fetch_row($tables_sql)) {
	$necessary_tables = array_diff($necessary_tables,array($table[0])); //Remove the table from the array if it exists
}

//If there are no tables in the array that means that the all the necessary tables are present in the Database
//If some tables are missing, that means we have to create those tables...
if($necessary_tables) {
	$quries = <<<END
-- Insert all the SQL to create the necessary tables here...
END;

	//Execute all the queries
	$all_quires = explode(";",$quries);
	$query_count = 0;
	foreach($all_quires as $query) {
		$query = trim($query);
		if($query) {
			@mysql_query($query);
			$query_count++;
		}
	}
	$QUERY['success'][] = "Database Populated.";
} else {
	$QUERY['error'][] = "Tables already in Database - I did not overwrite it. If you want to remove the old data, please delete the tables and run the installer script agian.";
}

Saving the Database connection details


//I don't know how to escape the $ charector in heredocs - so I did this...
$config = '$config';//Heh, Heh ;-)
$system_installed = '$system_installed';
$configuration = <<<END
<?php
//Configuration file for Nexty
$system_installed = true;
$config = array(
	'db_host'		=>	'$_SESSION[host]',
	'db_user'		=>	'$_SESSION[db_user]',
	'db_password'	=>	'$_SESSION[password]',
	'db_database'	=>	'$_SESSION[database]',
	'url'			=>	'$_SESSION[url]',
	'absolute_path'	=>	'$abs'
);

END;
if(is_writable('../configuration.php')) {
        // ...Write the $config text into the configuration.php file...

	$QUERY['success'][] = 'Saved the configuration file. <a href="'.$_REQUEST['url'].'">Go to Nexty</a>';
} else {
	$QUERY['error'][] = 'Configuration file (configuration.php) is not writable. Please copy the configuration code and enter it into the "configuration.php" file. Then press continue.';
}

See the install folder for Nexty in the Subversion server.

]]> http://www.bin-co.com/blog/2007/07/web-installer-the-code/feed/ 0 CSS Templating System http://www.bin-co.com/blog/2007/06/css-templating-system/ http://www.bin-co.com/blog/2007/06/css-templating-system/#comments Mon, 11 Jun 2007 09:18:21 +0000 Binny V A http://www.bin-co.com/blog/2007/06/css-templating-system/ In Nexty I used CSS to create a inexpensive templating system. You can see it in action in the settings page of Nexty. Currently I use it only for changing the icon sets. But you can change the colors and the layout using this system.

CSS Templating for Icons

Before starting, I must say that CSS is not the most powerful solution for templating. Using a server side solution is much more recommended. But for my purposes, CSS was good enough.

(X)HTML Code

If you want to use CSS templating, your app must be semantically valid. In other words, there is no way you can theme a tag soup.

Make sure that the stylesheet used for templating appears at the last. This will make sure that all the rules in the above stylesheets can be overwritten easily. In Nexty, I have a base stylesheet, then the theme stylesheet and at the end the hacks stylesheet…

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="images/themes/crystal/theme.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/style_ie.css" type="text/css" media="all" />
<![endif]-->

PHP Code

Very little PHP is involved to creating this system – I depend on it just to change the path of the CSS Stylesheet. The code used is…

<link href="images/themes/<?=$theme?>/theme.css" rel="stylesheet" type="text/css" />

The $theme variable will change if the user changes the theme.

]]> http://www.bin-co.com/blog/2007/06/css-templating-system/feed/ 0 Iconify Links with CSS http://www.bin-co.com/blog/2007/06/iconify-links-with-css/ http://www.bin-co.com/blog/2007/06/iconify-links-with-css/#comments Tue, 05 Jun 2007 18:12:49 +0000 Binny V A http://www.bin-co.com/blog/2007/06/iconify-links-with-css/ Using icons is a must for all Web 2.0 apps. I have used this principle liberally in Nexty. When I was creating Nexty, I learned a simple trick that made using icons with CSS much easier.

Go to Nexty to see the icons

Iconification of Links in Nexty

3 Types of Icons

I used 3 different classes for showing icons. They are..

icon

This class removes the text of the link and put the icon in its place. The icon is clickable.

You can see this technique used in the Projects page. See that ‘Edit’(Pencil) and ‘Delete’ icons? They use this class.

XHTML code

<a class="icon edit" href="edit.php?project=6">Rename<a>

CSS Code

.icon {
	font-size:0px; /*Hides the text*/
	padding:6px 8px;
}
.edit {
	background:url(edit.png) no-repeat left center;
}

with-icon

This class shows the icon left of the link text. Both the icon and the text are clickable.

The ‘Create new task’ link in the home page is an example of this.

XHTML code

<a class="with-icon tasks" href="tasks/new.php">Create New Task...</a>

CSS Code


.with-icon {
	padding-left:18px;
}
.tasks {
	background:url(tasks.png) no-repeat left center;
}

list-with-icon

This will insert the icon in every item for the given list.

The drop down menus – Sections, Projects and Contexts are created using this technique.

XHTML code

<ul class="menu-with-icon projects">
<li>...</li>
<li>...</li>
</ul>

CSS Code


.list-with-icon li,.list-with-icon dt {
	padding-left:18px;
}
.projects li {
	background:url(projects.png) no-repeat left center;
}

Icon Size

My icons were 16×16 pixels – if you are using icons with a different size, you will have to change the amount accordingly.

]]> http://www.bin-co.com/blog/2007/06/iconify-links-with-css/feed/ 0