APLawrence.com -  Resources for Unix and Linux Systems, Bloggers and the self-employed

A refreshing web programming tutorial

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:

http://gayatri-hitech.com

http://spam-cheetah.com

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.

HTML, DOM scripting and javascript form the layer that gives meaning to raw TCP packets that flow on the network. Content available from database, search engines and static pages are rendered in a meaningful form thanks to the power of DOM, HTML, CSS and Javascript.

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 HTML decides the DOM structure and only using that Javascript and CSS 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 you use a javascript toolkit that is not consistent. I recommend jQuery 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.


#container {
	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.

Javascript as a programming language

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 find that javascript programming with jQuery can achieve as much beauty ,elegance and dynamism than you can achieve with flash animations.

That being the case we will take a brief look at what makes javascript so powerful. Web 2.0 could not have happened but for the power of DOM scripting with XML and powerful constructs in the Javascript programming language.

Though javascript is restricted to the browser execution environment, 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.

Javascript is an incredibly powerful programming medium. It allows a lot 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.

Unfortunately javascript takes time to learn and you can check the 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 rewarded. I highly recommend that you learn javascript in conjunction 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 few lines of javascript, html and CSS along with the appropriate jQuery plugin . jQuery can help you create a fantastic dynamic website in a matter of weeks if you know javascript already.

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 them in a javascript array. You could sort them in reverse order and so on. You can see all this in action if you download my product and invoke its web interface. Instead you could look at the screenshots here.

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

  1. jQuery homepage
  2. jQuery Plugins homepage
  3. My delicious bookmarks for jQuery (very comprehensive)
  4. My delicious bookmarks for Javascript programming
  5. w3c homepage
  6. Spidermonkey UNIX command line javascript interpreter







Got something to add? Send me email.





(OLDER)    <- More Stuff -> (NEWER)    (NEWEST)   

Printer Friendly Version

-> -> A refreshing web programming tutorial


1 comment



Increase ad revenue 50-250% with Ezoic


More Articles by © Girish Venkatachalam







Tue Aug 18 17:20:25 2009: 6762   MikeHostetler

gravatar
Great Article!

Note that you can use Rhino, which is a JavaScript implementation in Java:
(link)

With some tweaking, you can use/abuse native Java objects in it.

There is also JScript.Net, a .Net-power JavaScript engine. It comes with any .NET SDK!

JavaScript -- not just for browsers anymore!

------------------------
Kerio Samepage


Have you tried Searching this site?

Unix/Linux/Mac OS X support by phone, email or on-site: Support Rates

This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more.

Contact us





The danger of computers becoming like humans is not as great as the danger of humans becoming like computers. (Konrad Zuse)

Software and cathedrals are much the same – first we build them, then we pray. (Sam Redwine)










This post tagged: