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.

HTML+CSS, the Future of Print Media

This January, the interaction with Mr. Håkon Wium Lie, the Chief Technology Officer of Opera Software, best known for proposing the concept of Cascading Style Sheets (CSS) was an interesting one at Techfest. Simply speaking he wasn’t there to teach us HTML or CSS. He was there to speak on where these technologies were headed in future. Thank god, he did that (and saved us from a boring lecture)!

To demonstrate this he was even presenting his slides in basic HTML and CSS. That’s what his whole point was. HTML/CSS was so simple and dynamic that you could adjust it to suit your needs – not just from making simple presentations to web apps, but to more diverse things as a presentation and even a printed book.

He spoke about the basic origins and the evolution of HTML and CSS as they are today. And how their simplicity makes it hard for developers to give up. People would rather use HTML/CSS for their webpages and avoid Javascript wherever possible. And how he and others were shaping it to suit both the needs of the future. Things that were earlier possible with Javascript are now possible with CSS. This even gives robustness to the page, because if we define the properties in CSS and not how to do them (as we do in Javascript), and let the browser decide how to do the hard work, it will be rendered across a range of devices without any hassles because that platform’s browser will be able to decide the best way to render the content.

Yes, with the dawn of CSS 3, now even animations in webpages were possible. You could design full complicated images with full CSS texts rather than loading an image, thus saving on bandwidth. He showed us a fully rendered logo of Opera rendered only in CSS. Even with HTML 5 the current limits were even pushed further. How open technologies like WEBM were helping make video a first citizen of the web. Oh, yeah… you can now play videos without Flash and also have hardware acceleration to display graphics on webpages. And even access the webcam, all right from simple HTML code. That is where we are headed.

The last bit of surprise came when he showed us a full printed book fully typeset in HTML/CSS. Yes, no word processing software nor LaTeX. All margins, headings, paragraphs all formatted by HTML and CSS. The thing he highlighted was HTML was moving from the virtual world to the real world. Now you could even design your pages and print media in full HTML/CSS. You get the feel of reading of book or a newspaper digitally. You turn the pages as you used to do actually to read the next matter. All this comes with the ability to format margins, headers, footers, paragraphs, headings, etc.

Does that mean that HTML/CSS will be the future of print media? Why use LaTeX now to design your print content when you can successfully use HTML/CSS to design content across a range of devices and online as well as for print now? It gives you power and flexibility that whatever you write once can be adapted across a variety of media. Agreed scientific research papers do require a lot of mathematical formulas and LaTeX is still a pro at it. But recent developments have been made in MathML, a markup language to write scientific formulas. But it still lags behinds LaTeX at its purpose. But I surely expect that to be at par with LaTeX soon. Maybe HTML+CSS will be the language that will be the perfect suite to make both digital and print media.