Children and Computers

Ganga on the Mac

These are a set of informal observations made while watching my little niece Ganga (she’s about 4 years old) draw a picture on the computer.

  1. Kids pick up the basics really fast. Having walked my mom and DP through many a confusing day, I noticed that teaching Ganga is not as slow, but different. For e.g. she didn’t understand that the thing you point and click is called a ‘mouse’, but the motor skills that go with it came very quickly.
  2. She liked to draw and move windows around much more than the online games I found for her. This may be because those games are largely singing and dancing stuff in english, or she might be too young (because frankly I found those games really interesting. Vaibhav and Gauri too when they came here).
  3. The paint application I used is Seashore. It’s a Mac-only minimal port of GIMP. I use it for editing only because it’s much faster than opening up Photoshop or GIMP on a Mac and it gets simple editing done quickly. However, there are three things that I realized a “kid paint” tool must have:
    1. A subset of features: a pen, brush, color selection, an eraser, easy undo.
    2. Much bigger and lifelike icons. A pen for a pen, a brush for a brush. Avoid a dotted rectangle for selection.
    3. Individual colors put up there on the screen instead of a two-step process to click the foreground color, bring up the window, select the color and then close it. She took a long time to get this step right.
    4. A quick way to clear the paper (her terminology) and to get a new one. She spent eons rubbing the eraser all over a finished work to get a clear paper and I had to intervene to click File -> New. Menus are beyond her at this point.
  4. Instant gratification. At one point where she clicked on many items in the dock and the mouse cursor turned into a spinwheel (the mac hourglass) and she couldn’t click anymore, she was really irritated.
  5. She was fascinated by the fact that you could click and drag windows everywhere on the screen. Add to it my multi-monitor set up and this made for her second-best computer adventure.
  6. This is what a 3 hour intro to a computer produces:

The whole incident made me really curious about kids & computers. How do you introduce programming for example? Squeak? _why has something called hacketyhack as well. I’ll be keeping an eye on this in the future coz watching kids use computers is really interesting because of the way they instinctively search for new features.

orkut

The new orkut look is frankly amazing. It’s got the Google sense of simplicity finally and looks much less crowded than even Facebook! (if it hasn’t rolled into your account yet, it will).

DRY CSS

When I first thought of writing this post, my ideas were more about describing a good CSS organization and using reusable stylesheets. There are two tips in this area that I still recommend:

An element can have multiple classes: It’s a pretty simple idea, but isolate out layout styles and presentation styles. Even fonts and coloring. Make reusable classes as much as possible. A design like this rocks, esp. if it includes a small description of the classes used at the top of the .css file. At any point you feel an urge to create a new class, resist the urge and try to recreate the functionality using already existing ones. Break older classes further if you have to.

For e.g.:

.warn {
  color: red;
}

.top {
  position: absolute;
  top: 5px;
}

And this html:

<p class="warn top">You cannot do that, it'll wreck havoc!</p>

… is way better than combining those tasks. Why? Because you can reuse those classes.

Keep your page-specific CSS structured by an ID on the body: Again, a pretty simple idea, the <body> tag can take an ID that can be an indicator of the page name. Use that to create special styles for that page alone.

Example: you want the warning on product pages to appear in blue instead of the usual red, and you want more padding on top:

#product-page .warn {
  color: blue;
}

#product-page .top {
  position: absolute;
  top: 10px;
}

with this HTML:

...
<body id="product-page">
...
<p class="warn top">You cannot do that, it'll wreck havoc!</p>
...
</body>

The advantage is that you don’t hack the CSS or add more styles. It just works.

I have more CSS organization tips, but the above two have worked wonders in 90% of the projects I’ve been involved in. Let’s move on to using tools to write better CSS.

Use a CSS generator: In the Ruby/Rails world where I mostly live nowadays, there’s an excellent plugin called cssdryer. Using this, the CSS above becomes much cleaner:

#product-page {
  .warn {
    color: blue;
  }

  .top {
    position: absolute;
    top: 10px;
  }
}

… which is lovely. Finally, nested tags! And variables, and all the power of ruby! [There’s also Sass]

If you are not in ruby land, use a CSS pre-processor. This article uses the m4 macro processor to generate DRY CSS.

Now, here’s one more lovely tip. Use a CSS framework. The most appealing one (altho in beta) is blueprint, since it only does a sweet grid system and good typography. Yahoo’s Grids seem bloated.

Adobe AIR: Calculator

If you’ve installed the AIR SDK (and it’s dead easy, just extract and copy it somewhere), you’ve got a lightweight cross-plaform VM to program apps in. Best of all, it works with HTML and Javascript.

In about an hour, I hitched up a calculator application. It’s very easy:

Calculator.xml:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4"
	appId="in.vish.Calculator"
	version="1.0">
	<name>Calculator</name>
	<title>Calculator Installer</title>
	<description>Simple Calculator in HTML</description>
	<copyright></copyright>
	<rootContent systemChrome="standard" transparent="false" visible="true">
		Calculator.html
	</rootContent>
</application>

Calculator.html:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Calculator</title>
	<style>
		body, html { margin: 0; padding: 0; }
		body { background-color: black; color: #888; line-height: 1.5em;
			font-family: verdana, arial, sans-serif;
		}
		#wrap { margin: auto; width: 70%; }
		h1 { font-family: Tahoma, Arial, serif; font-size:2em; color: orange; }
		#sum_button { margin-top: 5px; }
	</style>
	<script>
		init = function() {
			runtime.trace("init function called");
		}
		calculate = function() {
			runtime.trace("calculate called!");
			value1 = document.getElementById('val1').value;
			value2 = document.getElementById('val2').value;
			sum_value = parseInt(value1) + parseInt(value2);
			if (isNaN(sum_value)) {
				document.getElementById('result').innerHTML = "You didn't enter valid numbers.";
			} else {
				document.getElementById('result').innerHTML = "The sum is " + sum_value + ".";
			}
		}
		resetForm = function() {
			runtime.trace("resetForm called!");
			document.getElementById('sum').reset();
		}
	</script>
</head>
<body onload="init()">
	<div id="wrap">
		<h1>Calculate a Sum!</h1>
		<form id="sum">
			<label for="val1">Value 1:
				<input type="text" name="val1" id="val1" size="4"/>
			</label>
			<label for="val2">Value 2:
				<input type="text" name="val2" id="val2" size="4"/>
			</label>
			<input type="button" value="Sum!" id="sum_button" onclick="calculate();">
			<input type="button" value="Reset" onclick="resetForm();">
			<p id="result"></p>
		</form>
	</div>
</body>
</html>

And voila, there you have it: a simple calculator:

There’s also a zip file with the code: calculator.zip and the AIR file for installation (to use that you need the AIR runtime)