Friday, July 29, 2011

Making a delicious web soup

If you've ever walked in on a web development conversation, either in person or online, you probably picked up on the three major technologies: HTML, CSS, and JavaScript. The troubling thing is that you can't just become good at one or two. That would be too easy.

Instead, the web arose from a number of different sources. There are rules, but the rules came from mobs and teleconferences between clashing interests. You had the scientists who founded the web, the businesses looking for pretty layouts, the media and content makers, and the gamers. Whenever one group stopped innovating, programmers elsewhere would share new ideas and put them on their webpages, discriminating against companies that hadn't kept up the pace, in a form of protest.

So what started as HTML, a pretty basic way to write documents like this:


<html>
    <title>Welcome to my page!</title>
    <body>I wrote it in HTML</body>
    <button>Click Me!</button>
</html>


Got prettified by CSS, which looks useful to designers:

body{
    font-family:arial;
    color:green;
}
.headline{
    font-weight:bold;
}


It then got animated and interactive through JavaScript, which appeals to programmers:

function clicked(source){
    var x = document.createElement("span");
    x.innerHTML = "you clicked this";
    source.appendChild(x);
}



You might see all of these as equally barbaric ways to write, because you don't realize how difficult it is to make a simple program look nice and work on everyone's computer or phone, without the open web. Flash games, for example, still don't work on the iPhone or iPad.

It's actually very convenient that these parts are separate, because you want one consistent design across your web pages, which means one CSS file, and the interactions on a profile page are the same regardless of whose page you're looking at, which means one JS file. In large companies, the designers and programmers are working on separate files and don't tread on each other's feet.

Unfortunately, learners quickly find it can't always be this straightforward. The new technologies HTML 5 and CSS 3 are very tightly connected to how people write all three languages. And when you add an interactive map from ESRI or Google or Bing, the HTML and CSS of the page are so advanced and rapidly changing that you manipulate it through code, in JavaScript. It's kind of like how you start your car and run the AC by turning a little key and pressing buttons, instead of opening all the valves and crossing wires yourself.

Learning about this a few years ago was really useful for me, much more than Word document margins and PowerPoint animations. Every time I printed out a lengthy print report at school, designing a new building and leaving it all on paper, I wanted to make an interactive web page to display the project in a way you could browse and explore. I've been looking into projects like hackasaurus which open this up to kids and get them started on this type of programming. Hoping to help take it to Haiti soon =)

No comments:

Post a Comment