Srijan tech-session (follow-up) March6

The main topic of discussion on Saturday was the emerging trends in web technologies. Vivek Khurana enlightened us with what all we can expect from HTML 5 and other upcoming web technologies like SVG (Scalable Vector Graphics). He started off with an introduction to HTML 5 and how it came into being. Some of the exciting feaures were demonstrated in the form of demos. As soon as the first demo was played out everyone watched the screen with rapt admiration. The new features available in HTML  5 left all of us saying WOW!.

Here’s a brief summary of what I gathered from the discussion:

HTML 5 is being developed as the next major revision of HTML. HTML was initially designed by scientists to build simple text based web sites, not the kind of interactive web applications we see today . The previous versions do not adequately cover the needs of web applications that we see today. There has always been an impedance mismatch between web designers and HTML. In a sense HTML 5 tackles this mismatch which plug-in-based rich Internet application (RIA) technologies such as Flash, Silverlight, and JavaFX  have tried to fill.

HTML 5 introduces a number of new elements and attributes. These new elements were added to reflect typical usage on modern Web sites. Lets look at some of the exciting aspects of HTML 5:

• Audio and Video tags – the audio and video tags are introduced in HTML 5. They allow us to easily embed a video or an audio clip directly into the browser without the need of any plug-ins.
• Canvas tag – It is used to draw 2-D graphics on a web page and can be accessed using JavaScript to render graphics on the fly. It can be used for games, graphs or animations. Infact somebody in the audience pointed out that a version of the classic tetris video game created using canvas has already created a lot of buzz. Narendra Sisodia showed us the world’s first projective HTML 5 video which he made using the Canvas API. He made it sound so simple. 
• Drag and Drop – HTML 5 comes with a Drag and Drop API which brings native drag and drop support to the browser. We just need to define the element which can be dragged and a target element where it can be dropped. JavaScript event handlers can be defined to tell the browser when the element can be dropped and to handle the drop.
• The Geolocation – API gives the geographical location information associated with the hosting device. HTML 5 can find your location and use it to tailor things like search results and more. It makes use of Global Positioning System (GPS) and location inferred from network signals such as IP address.
• Contenteditable – any element with the contenteditable attribute set can be edited from within the browser.
• Smarter Forms – HTML 5 provides very useful input types and attributes to build smarter forms. Client side validation is taken care of with meaningful fields like email, tel ,number etc. It also saves us the the load of defining unnecessary classes and ids. The browser will also natively provide a date selection calendar. There are many new attributes such as autofocus, maxlength and required which make our life easy. The huge list of new fields and attributes in HTML 5 can be found on the W3 web site.

This is just the tip of the iceberg. The whole list of expected new tags and attributes can be found here:
HTML 5 tags. Check out some really cool HTML 5 demos at: HTML 5 demos.

HTML  5 WebSockets

Early Internet applications took a step back backwards in terms of interactivity, connectivity and ability to receive realtime data–primarily due to HTTP’s request and response based architecture. Any piece of information that the client needs has to be requested explicitly by the client and the server sends only the requested data.

The HTML 5 specification introduces the Web Socket interface, which defines a fullduplex communications channel that is exposed via a JavaScript interface in HTML 5compliant browsers. The bi-directional capabilities of Comet and Ajax, unlike Web Sockets, are not native to the browser, and rely on maintaining two connections-one for upstream and one for downstream–in order to stream data to and from the browser. Note, that to support streaming over HTTP, Comet requires a long-lived connection, which is often severed by proxies and firewalls.

Web Sockets account for network hazards such as proxies and firewalls, making streaming possible over any connection, and with the ability to support upstream and downstream communications over a single connection.

Features like WebSockets will enable a new paradigm of Web application programming that will revolutionize the way to develop and deploy Web applications.

Web workers

Web Workers are an HTML 5 feature which allow for running multiple background processes on a web page, similar to multi-threading in an OS environment. This means we can execute a part of our Javascript in a thread. To demostrate this Vivek ran a javascript script in the browser to find prime numbers! (have you ever tried that?) with and without web workers. As expected, the browser just froze without web workers.

SVG(Scalable Vector Graphics)

Scalable Vector Graphics (SVG) is an open standard of the World Wide Web Consortium (W3C). It enables high-quality, interactive, animated and stylable graphics to be delivered over the web using accessible, human-readable XML.

Because SVG images and their behaviours are defined in XML text files they can be searched, indexed, scripted and, even compressed. SVG could replace Flash to generate many of the graphical features we see today on our web sites. SVG integrates well with HTML5 and javascript.
All major web browsers except Microsoft Internet Explorer (IE) support and render SVG markup directly.

One of the most exciting demos of the evening was “animated lyrics”. The video had animated lyrics synchronised with the music.
An amazing collection of SVG demos including this one can be found here: SVG wow.

The session was a success considering the fact it was “unorganised” in just two days. It was good to see so many people turn up for the talk inspite of the short notice. Looking forward to more community events such as these in the coming days. Watch this space for upcoming events.