The future of the web: HTML5 & CSS3, the place where dreams come true

By: Alex Maat
On: October 19, 2012
Print Friendly, PDF & Email
About Alex Maat
Starting with the ICT Management school to support his hobby of building websites, Alex Maat has developed a particular interest in the internet. The only right choice was to attend to Communication and Multimedia Design (Interactive Media) at the Hogeschool van Amsterdam to gain more in depth knowledge about the broader image and while keeping websites in mind, he received his first Bachelor degree - completing the Technology, Design and Interaction program. But he felt this wasn't enough and there was something missing. This was found in the New Media Masters program at the University of Amsterdam, but to be allowed to participate, the second (shortened) Bachelor Media and Culture at the University of Amsterdam had to be done. He succeeded. Currently working part time in web development at IDSGN in Hoofddorp, Maat is continuously improving his programming skills as well as the knowledge needed to keep up with new technologies and new improvements of his own skill set. He is interested in the technologies that drive websites and trends in webdesign and -functionality.

Website
http://alexmaat.nl    

I’ve built my first public website back in 1999. I was just getting to know my way around the internet and this was my first attempt in building a website. The first version of HTML – the code which provides the markup for most websites – was invented in 1991 by Tim Berners-Lee, one of the founders of the World Wide Web as we know it today. Since then, the way websites are built have changed a lot. Markup has been separated from design through the use of Cascading Stylesheets, CSS for short. We are now stuck with the latest versions of both; HTML5 and CSS3.

Web developers are lyric about them, because it makes their lives a lot easier. When first introduced, every item on a website had to be styled “by hand” through the use of parameters in the HTML-code. This is a time-consuming task and if something had to be changed, it had to be changed manually through the whole code. CSS made the difference. Style could be declared by the use of Cascading Stylesheets. By naming a specific tag in the corresponding stylesheet, all elements on that webpage could be styled by only one entry in the stylesheet.

HTML5: the future of the web

“Power to the browser” is the slogan that describes HTML5 quite good. Not all functionality on a website has to be dealt with on a server; the browser can provide specific functionality for a division of new elements on a website. These “tags” are more uniform and make more sense to humans as well as machines. An example would be the new tag for the site’s navigation, <nav>. This used to be something like <div id=”navigation”></div> for example. This also makes most new elements better optimized for search engines, since it knows what to expect within those tags. This also applies to some plug-ins, where the method of embedding a video usually consisted of a whole bunch of lines of code, consisting of tags and parameters, including a fallback method for browsers who did not support those lines of code. Now, we have <video>. That’s it. Another example is the drag-and-drop functionality. This was previously done using JavaScript, a layer of functionality added to a website by another programming language, providing mostly enhanced user interaction after the page is loaded. A demo of drag and drop in HTML5 can be found here.

CSS3: the place where dreams come true

The newest version of Cascading Stylesheets is CSS3. CSS3 provides new functionality where every developer has been dreaming of: easy font implementation, text effects, patterns, shadows, animations (fading, simple motion), rounded borders, multiple backgrounds and more. This could sound like nothing special to many not-developers, but take for example rounded corners. This just was not possible in any way, except for using images containing only one corner of the shape. Placing and positioning all the surrounding images was a crime, especially when the content of the shape had to be dynamic… Implementing special fonts on a website is made easy by the introduction of the font-face element, custom fonts can now be embedded in a website by using only one line of code. In the early days, these special fonts had to be images, created by some kind of design program. It was also impossible for search engines to “read” those images – text in images was invisible, thus withholding precious information about mostly headers and (menu-)buttons for being indexed by search engines. Shadows around object was also done using background images, this is now possible by using the box-shadow element in CSS.

General support and the lack of it

When new functionality is added to HTML and CSS, it has to be implemented by the major browsers. This is a paradox, however. New browsers are willing to implement new stuff if developers are using it, but developers are only willing to use it if the major browsers support it. This can be a problem for the early adopters in development world, but as this snowball effect slowly continues, both sides are starting to implement the new solutions in their systems. Internet Explorer falls hopelessly behind – as always – but Microsoft has made some big steps forward with IE9. See the list of compatibility of CSS3 elements here.

Are we going to use it or not?

While the paradox of development of new standards seems to hold us back, I think it is a good idea to support new development. This creates progress and support for more browsers and devices and overall generates more understanding in code for humans as well as for machines. The lack of support for some major HTML5 features can be overcome by using a little implemented script that detects support for HTML5 functionalities. It the check fails, it resorts to an older alternative. As a developer I can say I use most of the new CSS3 functionality on a regular basis, therefore providing support for browsers to implement all of the new standards out there. Plus, it makes my life way less frustrating, not having to provide background images for all corners of a rounded box, including semi-transparent images for background shadows.

For more information on HTML5, take a look at this introduction video below.

Sources

http://en.wikipedia.org/wiki/HTML#History
http://en.wikipedia.org/wiki/Tim_Berners-Lee
http://dret.typepad.com/dretblog/html5-api-overview.html
http://www.frankwatching.com/archive/2012/01/16/alles-wat-je-over-html5-css3-wil-weten-maar-nooit-durfde-vragen/
http://www.html5bot.com/2012/04/future-slogan-of-web-is-html5.html
http://www.css3.info/
http://www.w3schools.com/html/
http://html5demos.com/
http://caniuse.com/

Leave a Reply