by Girish Venkatachalam
Girish Venkatachalam is a UNIX hacker with more than a decade of
networking and crypto programming experience.
His hobbies include yoga,cycling, cooking and he runs his own
business. Details here:
A refreshing web programming tutorial
Internet has matured from being a network of networks to a cultural
entity today. We no longer think of television, radio and newspaper the
same way we did before the advent of the Internet.
Somehow it seems as though everything else is secondary when there is
web access. We can listen to radio streams, we can watch videos in
youtube, we can download nearly any movie through p2p networks, we can
read blogs to get access to inside information on companies. There is
hardly anything that we cannot do with the Internet today.
Though all this is made possible by the power of IP routing and TCP/IP
protocol stack with its associated protocols, HTML plays a big role in
content presentation, structure and it even influences the delivery
model in certain cases.
raw TCP packets that flow on the network. Content available from
database, search engines and static pages are rendered in a meaningful
When the Web 2.0 happened and Ajax entered the picture, things got even
more interesting. Google maps zooming and fetching content on the fly
and several rich Internet applications became not only a possibility but also a
certainty with everything moving to the web. Be it document creation,
photo sharing or even remote desktop.
The components involved in web programming
Web programming gives you the ability to participate in Web 2.0
technology creation. You could create the next flickr or gmail if you
understand how the various pieces involved in a web site work together
to give a unified view.
HTML is a simple layout mechanism using which you decide how to
structure your "page elements". It is a great deal more than that as
can do its job. Still HTML is easy to master and you could learn it in a
week or two.
CSS however is a difficult affair. It involves understanding how the
page appears and where the various elements are placed. It also
determines the color, width, height, opacity, scrolling elements and so
on. Browsers treat different CSS instructions differently and you may
get into a compatibility nightmare. But this problem is much harder when
over everything else. It is tiny(very very small) and there is nothing
else that even remotely compares with its power. The culture of plugin
development around it that are available for free with full source code
once again prove the power of open source.
I will wrap up this section after showing a tiny CSS snippet. I
personally felt that it was hard to predict what each directive would
do. And it took me a very long time to come to terms with it.
width : 795px;
margin-left : auto;
margin-right : auto;
padding : 0px;
color : black;
background : #f2f2f5;
I will explain the above block but this is only a sample. #container is
the DOM element whose id is 'container'. If it is a class, you would
have referred it as '.container'. And IDs are unique in a page; classes
aren't...Anyway I am not going into the details here.
'px' stands for pixels. You could have used a different unit like % or
'em'. The background and foreground colors are specified either using
color names or a 6 digit hex code prefixed with '#'. You can also
specify the margins and padding widths.
I am not going to talk about flash here. It is neither open source nor
is it liked by many. It is not appropriate for a UNIX geek either. I
,elegance and dynamism than you can achieve with flash animations.
so powerful. Web 2.0 could not have happened but for the power of DOM
you can use spidermonkey and get a simple js shell on which you can
validate your complex programming constructs like arrays, stacks,
closures and so on.
of freedom in how you use your variables and function calls. You can
manipulate various DOM elements on the web page with remarkable power
and flexibility. When combined with Ajax, it gives you a dynamism and
reach beyond animations made possible by DOM scripting.
bookmarks I have given in the references section to begin learning. It
is not a simple language that you can master in a week. It takes several
months to learn. But it is a rich language and your effort will be well
with the jQuery toolkit. That way you
can quickly get motivated to trudge through the difficult parts.
Animations and other web 2.0 stuff
Just look at my jQuery bookmark page I have given below. You will find a
lot of plugins that can make you wonder how much you can achieve with a
plugin . jQuery can help you create a
Creating drag and drop elements, animations of various forms used in a
photo slideshow or image processing tool are straight forward. You can create GUI
elemtents that give a dynamic feel. You can store all the previous
values the user entered into a field and do auto completion by storing
You can see all this in action if you download my product and invoke its
web interface. Instead you could look at the screenshots
Web programming is not what it was 10 years ago. It is everything today!
If you are interested in GUI at all, you should know web programming.
In my case I was not interested in UI programming but that was before I
came to know about jQuery. jQuery changed my life completely. I hope it
changes your life as well!
References and further reading
jQuery Plugins homepage
My delicious bookmarks for jQuery (very comprehensive)
Got something to add? Send me email.
Increase ad revenue 50-250% with Ezoic
More Articles by Girish Venkatachalam
© 2011-03-19 Girish Venkatachalam