My Take on HTML 5

Posted by Syazwan Hakim on February 8, 2010

“To end with an understatement, it will also change the way we use the web in the future.”

Syazwan Hakim gets up, close and personal about the appeal of HTML5. Syazwan is the Front-End Developer at Stampede.

Because I’m new to HTML 5, an introduction is perhaps in order – more for my sake than my readers.

HTML 5 is an extension of HTML 4 and XHTML 1. It gives web developers new functionalities for a more dynamic and improved user experience. This bit is interesting to me because the emphasis is now given to users, not only us developers.

It allows for better cross browser compatibility between mobile, desktop, netbook, pda, e-reader and whatever gadget there is in the future with the ability to display a web page.

Kevin Purdy from the Lifehacker sums it all rather neatly:

HTML 5 is a specification for how the web’s core language, HTML, should be formatted and utilized to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it’s mostly a core set of standards that only web developers really need to know. In other ways, it’s a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).

The Technicalities

We often define class or id to any major <div> for styling on CSS such as <div id="header"> or <div id="footer">. In HTML5, most common div like header, footer and side content now have their very own element: <header> (for header block), <nav> ( for navigation menu ), <article> (for content), <section> (for generic document inside content), <aside> ( for side content ), and <footer> (for footer block). For a developer like me, this simplifies the entire development process and reduces page load time without the need to assign class or id to your markup.

Remember the long url and <object> or <iframe> tag for fitting video into your website? HTML5 comes with a nifty solution – the <video> element. It can now easily embed video without using the object element. There is some debate about the codec we should use as default, though. You will find an interesting attempt at breaking down the codec debate here.

For the table-base web site, the <td> element is no longer allowed in <thead>. Besides improving page load, I find it useful for the tricky bit when I need to add emphasis to a certain content. I have been using <span> frequently, ranging from font and font color change to adding a different hue to background. HTML5 utilizes <mark> instead of <span> to highlight these content. I look forward to this.

The most stunning thing for me about HTML 5 is the contenteditable attribute. Any element with contenteditable attribute will allow the designated user to add and edit text on the web page, without having to use an editor. And it’s all LIVE.

HTML 5 also packed up the input element with more control, one of which is <input type="tel">. This will automatically change the input box format for telephone number. For the large input box such as comment box, i often use “textarea”. But there are new member of “textarea” in HTML5 called “textLength”. So that, we can easily define the length of the text inside the input box no matter how big the box is. Another cool thing about HTML5 is the capability to drag and drop pretty much anything. It allows you to drag and drop information block on a web site such as URLs, files, bookmarklets and anything into a drop zone. This was achieved by javascript before. To be able to do this with only markup is a refreshing change.

Another new element worth a mention is <nav>. Current HTML relies heavily on CSS to get navigation to work with <ul> or <ol>. In HTML5, <nav> will float the links side by side automatically.

It is also a lot easier to arrange the layout with HTML5. The <hgroup> allows you to group headings, letting you manage headers more effectively. If your content is heavily embedded with video, table or photo, you might want to give <figure> a try. This elements will allow you to add caption for your embedded content. You also can used <figure> element in conjunction with the <legend> element to provide a caption for the contents of your <figure>; element.

Dropped

Apart of the new elements, I noticed that a few deprecated elements have not made it to the latest version. They are <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>.

All in all, HTML5 is packed with cool new features, code slimming advantage and a few slick solution to the current way we build front-end. While it attempts to solve issues found in earlier iterations of HTML, HTML5 also addresses the needs of Web Applications – an area previously not adequately covered by HTML. To end with an understatement, it will also change the way we use the web in the future.

(Photo by Anja)

Posted in Code Add Comment »

A City of Our Own Part I: Medan

Posted by Anita Zein on February 1, 2010

There’s another side of the city that I’m in love with – orderly atmosphere, fresh air and a place away from the crowds.

Anita Zein talks fondly of her best city in the world and how finding its charm is really just a matter of perspective. Anita is the Project Manager at Stampede.

I was born in the Medan, North Sumatra, Indonesia 29 years ago. All my life I grew up in this city. Childhood, school then all the way into adulthood.

Medan is a metropolitan city, the third largest city in Indonesia. It is very densely populated with many tall buildings. Like any mega city, transportation gridlock is always a nightmare during rush hour.

It’s not necessary to tour the entire Asian continent to discover various ethnic groups and cultures. In a vast country of 17508 islands (in which 6000 are inhabited), Medan has it all. We have Bataknesse, Javanese, Acehnesse, Chinese, Indian and many other ethnicities. We also have many ancient Dutch heritage buildings from earlier times, mostly in the Kesawan area.

For those of you looking to indulge in the urban atmosphere, Medan is right for you. There are so many places of entertainment, food and beverages, shopping centers, family leisure, games and nightlife. The most famous one is Merdeka Walk, right in the heart of the city. It is the hottest place to hangout in Medan City with cafes, restaurants, exhibition galleries and entertainment hubs.

But that’s the hectic Medan. There’s another side of the city that I’m in love with – orderly atmosphere, fresh air and a place away from the crowds.

My beloved campus, University of North Sumatra, is located at the suburban part of the city and large enough to house thirteen faculties. Complete with various facilities, it also has a cozy residential campus for students who come from outside the region and abroad. The Cafeteria and Library are worth a visit.

You can find the most beautiful atmosphere at the Faculty of Arts. Its ground is lush with trees, making it the most comfortable place to study and read. There’s also a nearby field where students play friendly football matches in the afternoon.

I belonged to the Faculty of Letters and we have variety of majors – Indonesian Language, English, Japanese Language, Regional Languages, Mandarin, History, Library Science, Ethnomusicology and Tourism.

Music, the universal language, sets our faculty’s fun level higher than the rest. Through Ethnomusicology, we learned various musical instruments and vocals unique to Indonesia. We have a permanent air of liveliness through the expression of music here.

There’s always musical entertainment at the cafeteria area and my habit was to join the musicians and sing along. I spent almost a year of my time there enjoying the relaxed atmosphere of the campus. That is, until I realized my academic grade was nearing pathetic and start hitting the books hard, paying my due.

There is no better place than home in Medan and my campus sweetens the deal.

(lovely photos by of kanarata, liamsismile & polinlipo)

Posted in A City of Our Own Add Comment »