Introduction To Essential Web Technologies

HTML5, CSS3, Mobile-first, Responsive Web Design, CMS. If you are a web designer/developer and you are not, right now, using all or most of these then you should consider upgrading your skills, and fast or the swift pace of Internet world would confine you to the past perpetually. Not a suitable situation to be in if you still wish to remain relevant in this field.

But before you can start making use of these you must first of all understand what they mean, what each of them brings to the table and why they are so important. These are what I am aiming to achieve in this piece.

HTML5

We all know what HTML is. The plain old markup language for the web, right? Well, HTML5 is the fifth incarnation of this that introduces some revolutionary features to the tested markup work-horse. It is not just an extension of the plain old HTML. It is a revolution all on its own. It goes beyond a simple extension and encroaches on technologies that would not traditionally be associated with the markup paradigm like CSS and JavaScript. If you are not yet familiar with this technologies you would be surprised by what are considered as part of HTML5.

Without wasting any further time, here's a list of what are introduced in HTML5:

  • New semantic and form elements and attributes
  • Multimedia (Video and Audio)
  • Canvas
  • Application Cache
  • Local storage
  • Geolocation
  • Graphics
  • Serverside events
  • Local Databases

CSS3

Second to HTML CSS is the next part of your web design tools stack. While HTML defines markup structures to your web pages CSS realizes and brings those defined structures to life with styles and layout properties. While all these are pretty much standard to your average web designer/developer, CSS3 super charges the presentation work-horse with capabilities that you could barely dream of a few years back.

Some of the new CSS3 introductions includes:

  • Border properties
  • Background properties
  • Text effects
  • Font
  • 2D/3D Transforms
  • Transitions
  • Animations
  • User interface

Because the CSS standard is still a work in progress more impressive features are planned for the future. So watch out and keep up.

JavaScript

Unlike in HTML5 and CSS3 cases where the innovations are the introductions of new features and functionality to the technology itself, in this case our interest is not in any new addition to the language (although the language is improving constantly) but on the numerous JavaScript libraries and frameworks that attempts to make the language easy to use and easily accessible to the average web interface developer as well as the whole new Internet technology stack that it enables in the form of web applications (applications that have the look and feel of native desktop/mobile apps and are cross-platform compatible). These  libraries and frameworks have made it easy to achieve complex results with a few lines of codes.

While some of these  libraries/frameworks are aimed at general use cases, others are more focused on specific applications. The end results of all these is that you no longer need to write copious amount of JavaScript codes to achieve complex effects. Just includes/use the right  libraries/frameworks and write one or two function calls to get your desired effect.

While some of these  libraries/frameworks are hugely popular like Jquery, Scriptaculous, Mootools, Sencha (formerly Ext), etc, others you might not have heard of: Backbone, Nodejs, Underscore, Modernizr, KendoUI, SproutCore, etc. Many more are being introduced on a constant bases. Some are even referred to as micro-libraries because of there limited functionality and low memory footprint.

Front End Development Frameworks

All of the technologies mentioned above usually do not operate in isolation. They are normally packaged into a coherent unit that achieves some purpose: a functional web/mobile application or site. Previously developers tend to recreate these processes over and over for each project and usually ignorant of the techniques being employed by the gurus in the field to produce amazing professional works.

So the excellent innovations in this field does not end in the individual advancements made in each technology but continues in the ease with which they are put to use. Some extra ordinary developers having observed that in creating a web site or application there are some common step, techniques and structures involved almost every time, and thus have taken the time to bring together these other technologies into well organized reusable packages.   The result is that they are able to save themselves hours/days/weeks of development times and instead focus more times and efforts on the functionality or business cases they are trying to achieve.

Thankfully, in the spirit of open source, some of these developers have not just let us lesser folks into their secrets but are also offering these packages free of charge for any one to use or abuse. These are now loosely referred to as Front-end Development Frameworks. Popular ones are Foundation from Zurb, Bootstrap from the excellent folks at Twitter. Others includes Workless, Perkins, etc. These are just the few I can think of off of my head. Do some research, am sure you could dig up some more.

Drupal And Other CMS/CMF

If you are constantly involved in creating dynamic websites/web application of any kind or complexity and you are still coding from scratch then you are working at a sweet shop and are still living in the web development stone age. This world has moved on dude. These days it is generally understood that the purpose of making websites or applications is to empower the site visitors with tools to help them get their work done and not to showcase your developers prowess. So it makes sense to spend more of your time crafting purposeful user experiences and result-oriented business cases than hunting down pesky PHP bugs and reinventing techniques that people hardly remembers these days.

This is where content management system/frameworks come into play. There are many CMSs to choose from but my focus here is on Drupal for two reasons:

  1. Drupal is a robust and perhaps the most matured CMS out there. It is increasingly being adopted by many organizations, big and small, businesses, governments and individuals (see this previous article). It is a well thought-out and community supported project that enables you to create adaptable, small, moderate to large websites with enough off-the-shelf free plugins (modules in Drupal speak) for the majority of the functionality you may need. It also gives you a pretty standardized APIs to create and plug in your own functionality/solution if the free modules will not do. It has a steep learning curve I must warn you, but it is more than worth it.
  2. Of all the other CMSs, it's the one I know most. You may call this being biased, but am biased towards it in the first place for a good reason: It is better than the competition, not perfect though, and I choose to know the best.

Drupal is cutting-edge because it is at the fore-front of innovative web technologies and enabling you to leverage the other cutting-edge technologies mentioned here in creating web sites and applications that functions across  various platforms: mobile, tablets, PC, etc. For instance, Drupal is currently being positioned to function as an API platform, through several Web Services initiatives, in line with the growing trend where more and more online contents are being consumed by other websites and applications (desktops, mobile, TV or other devices imaginable that can be connected to the Internet) in a way that are not tied to a browser as is currently the norm. The features and capabilities planned for its next incarnation (Drupal 8) is simply very impressive.

These bearly scratched the surface of an ever increasing list of cutting-edge web technologies, but these form the essential that must first be mastered. Please stay tuned.