A Night of Hacking on the Web

Mozilla is organizing the Summer Code Party this Summers, to create a generation of Webmakers, people who can build a better web. So I thought why not organize something at our college to celebrate it, at the same time we will share, learn and build cool stuff to help make a better web.

Being a technological institute, I was also compelled to go beyond the traditional tools like Mozilla Thimble or X-Ray Goggles. We needed to go beyond just HTML/CSS into technologies that actually power today’s web. Things like playing around with JavaScript. So it was decided – a session on building the Modern Web – and a dive into things like HTML/CSS and JavaScript – AJAX, JSON to help familiarize the students with the things that go into making a modern webpage.

So, students of IIT Rajasthan assembled and dedicated the 19th August night to get to know things that make the web awesome.

We started off from the basic of HTML tags and then style them with CSS. The effect of CSS was fully understood when the same plain HTML document could be given different looks just by adjusting the properties in the stylesheet.

Moving off to the Firefox Developer Tools – a brief idea was given into using the Inspector and then the Tilt View and how these tools can help us in examining webpages and building them. Next going to the Web Console, a place to try out quick JavaScript hacks. Thus we started JavaScript.

In JavaScript we kicked off with the basics of the language – especially the concept of inner functions and callbacks. Simple JavaScript programs on the web browser with alerts demonstrated its object oriented nature and the above behaviors. Even jQuery was introduced for the purpose of making AJAX calls from any web page with utter simplicity. AJAX calls were made by everyone by writing the scripts and running it from a local server.

Then JSON was introduced as a method to store structured data in the form of JavaScript objects. As a demo people wrote their biodata in the JSON format in a text file. This was loaded into appropriate fields in a webpage using AJAX, thus encompassing both AJAX and JSON.

Finally a fun web application was developed by only using JavaScript and Twitter APIs. It accepted a keyword and got any of the five random tweets from Twitter using its API. A nice way to see what were the latest discussions going on in Twitter related to a specific topic.

It was a fun night, where everybody learned and built something for the web.

This slideshow requires JavaScript.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s