Gary's Blog

thoughts and ideas about web, technology, life, music and more…

Happy Fourth!

by Gary Banga on July 4, 2010, 4 comments

Hi all! Summer is in full bloom and I have been as busy as ever working on some exciting web projects.

The Google’s firework display honoring 4th of July,2010 via a complex Rube Goldberg Machine is super cool. Check that out if you haven’t already. Another great example of animations done without using Flash. Just the goodness of HTML 5 and Javascript. I captured screenshots of the transitions and have tried to describe the steps of the complex machine, below:
1. Hit the football

2. Opens the cage

3. Eagle escapes and topples the statue of liberty

4. She falls on an accordion device

5. Accordion device kicks the black-colored bowling ball

6. Heavy ball falls into the bucket

7. Causing a chain reaction with the blue-colored pulley

8. Pulley releases the green-colored golf club and displays the flag of the United States

9. Golf club strikes the hot iron which was plugged into the electric outlet

10. Iron slides off the semisphere its resting on and ignites a rocket

11. Rocket shoots up in the air

12. Releases a rain of red white and blue stars

Have a great Independence Day and/or a great Sunday, everyone!!
By the way, I hit the upgrade button in my dashboard, today. I am on WordPress 3.0 now, woohoo!

Future of the web

by Gary Banga on February 6, 2010, 4 comments

(Last updated: February 13, 2017)

HTML 5 will incorporate a whole new set of tags and features that will simplify the way webpages are built. All the webkit browsers support most of the new functionality and Safari is the leader of the pack. I am going to discuss some of the new tags that I have had a chance to play with.

The backbone of any webpage is its structure and layout. Creating logical blocks and arranging content in meaningful ways builds the foundation of a webpage. HTML 5 comes with a great set of structural tags. Lets walk through structure of a standard webpage from top to bottom and left to right.

  1. Header section: First thing you need at the top of the page is a header . This can be the company logo, tagline or a brief introduction to what the website is all about.
  2. Navigation: This is where all the links to the inner pages of the website are listed.
  3. Content Area: This can be divided into various sections depending on the type and volume of content to be shown. Each section can have one or more articles.
  4. Sidebars: These can contain information that is related to the content of the page being viewed. It can also have call to action buttons like Subscribe to our Newsletter, Donate Now, Join Now, etc.
  5. Footer: This is where you can summarize the most important links to the inner pages or stuff like SiteMap and Privacy Policy which may not be a part of the primary navigation. Also this is where all the legalese (copyright info, terms of use etc.) usually goes.

Header
Footer
Navigation SectionSidebar
Article

HTML 5 gives us tags for achieving this structure: <header>, <nav>, <section>, <article>, <aside>, <footer>. It should be clear from the table above, which tag refers to what part of the webpage structure.

To see an exhaustive listing of all the new tags in HTML5, see the W3School’s HTML5 Tag Reference.

Media tags in HTML 5 are most exciting. However, Adobe may not think so. Because the new <audio> and <video> tags threaten the existence of Flash. If you have embedded videos in a webpage , you will know that <object> tag is a nightmare. The new <video> tag is very concise and easy to use.

<video src="myVideo.mp4"></video>

This is all you need for a video.  Its remarkably simple. Its similar to the <img> tag in many ways.

Ofcourse, you can add width and height attributes.

<video src="myVideo.mp4" width="300" height="400"></video>

By default, the video does not have controls like play,pause etc. But it is simple to add them too.

<video src="myVideo.mp4" width="300" height="400" controls="controls"></video>

Three more attributes for video tag are:
‘autoplay’ means that the video will start playing automatically as soon as it is loaded in the page.
‘autobuffer’ means that the video will start downloading but wont play until you tell it to.
‘loop’ means that video will start over again when finished.

Playing sound files in the browser wihout requiring plugins like Adobe Flash or other plugins, is made possible by the <audio> tag. Again, it is a fairly straightforward tag.

<audio src="mySong.wav"></audio>

Other attributes for the audio tag are: autoplay, autobuffer and controls, which are similar in functionality to those of <video>.

As I said at the beginning of the post, not all browsers support the goodness of HTML 5 yet. Webkit browsers should be your preferred playground for testing, as of now. This table gives an insight into the support for HTML5 across different browsers. Surprisingly NOT, Internet Explorer is the most hostile.

Another technology which is undergoing a major overhaul is CSS. It is an equally important player in the future of the web. HTML and CSS go hand in hand. They are inseparable. I may write a post about the things I love in CSS 3, soon.