My views on all things regarding the online industry
Being Front End Developers we are constantly asked the same questions about how the web is evolving and the latest and greatest technologies.
Although they have evolved tremendously over the last few years, the 3 fundamental components of Front End Web Development are still HTML, CSS and JavaScript.
Differences in support between Browsers means developers need must be flexible and to be mindful in how and what they code!
In the early 90s HTML was created as a tag-based “language” for marking up text documents. Shortly afterwards, a group of people formed the World Wide Web Consortium to maintain and advance the HTML specifications.
Timeline:
You have probably heard the term “HTML5″ used by companies like Apple and Google. It is the next evolution of HTML (Hyper Text Markup Language) which forms the backbone of almost every site on the Internet.
HTML4, the last major iteration of the language, was released in 1997 and has been tweaked so that it can handle the demands of the modern web.
HTML4 has been stretched so far beyond its initial scope to cope with modern demands. Plugins like Flash, Silverlight and Java come with a cost. Such deterioration in User Experience led Apple to drop support for some of these plugins entirely on iPhones and iPads.
HTML5 adds many new features and easily allows the rendering of these processor-intensive add-ons.
Assuming content providers and web site creators sign on (and many are), this means you won’t have to worry about installing yet another plugin just to listen to a song embedded in a blog or watch a video on YouTube. These add-ons will also work on devices that had previously not supported them.
It is important for a web developer to view a HTML document without any formatting applied (No images, CSS or JavaScript enhancement) so that the raw content is visible.
When you read it, does it make logical sense?
Do you understand:
If the answer is yes, the document is probably created in an understandable semantic way.
There are a number of benefits a site will gain with the use of good semantic mark-up in a HTML document.
The way you create content has no relation to how you want it to be presented within your page.
Everything presentation related should be controlled through CSS.
“It’s about meaning, not about looks”
HTML was first shipped with a few limited options for creating rich text.
Initially, browsers were text based (like command line or terminal), but graphical browsers were soon developed and enabled the birth of the modern web.
As HTML evolved, more tags and attributes were added that took advantage of these new graphical browsers.
A typical web page back then would feature a bright, solid coloured background, contrasting text, low-resolution images and usually some scrolling or blinking text.
In todays modern times this seems extremely primitive, but there was nothing to compare it to at the time.
Before the launch of CSS, authors applied styles to HTML pages by way of a few, limited tags and attributes. Some common ones were:
<CENTER>
<FONT>
<U>, <B> and <I>
<BLINK>
Each item on a page needed its own style attached to it, so making changes to lots of elements or pages quickly started becoming difficult, and pages started becoming messy.
We needed something better!
CSS specifications fall under the World Wide Web Consortium (also known as W3C), one of many international standards organisations who keep things in check for the internet.
Cascading HTML Style Sheets (CHSS) was the earliest version, which first introduced the concept of creating a consistent approach to how pages were styled that HTML alone was incapable of.
In 1996, Cascading Style Sheets were introduced in an effort to solve these problems by separating the visual styles being applied to HTML mark-up.
CSS is a web-based mark-up language used to describe the look and formatting of a website to the browser, most commonly used in HTML pages. It can be written in a number of different places, but the most common (and best practice) is to use a separate file and include it in your HTML pages.
CSS is extremely flexible and allows single styles to be applied to multiple elements across any pages where the CSS file is included.
Developers will already have a good understanding of CSS3, the latest and greatest standard that’s all the rage with modern websites and the browsers we use to view them.
For everyone else, you may have heard the buzz about CSS3 – but do you know what it is, how it works and why it matters?
“CSS” is an acronym for Cascading Style Sheets
“CSS3” simply refers to the latest version of CSS, with additional capabilities far beyond the scope of the first two generations.
With its modular structure, CSS3 allows developers to build content-rich web pages with relatively lightweight code.
CSS3 is the presentation layer of a web page and gives desktop style layout to these pages by using graphic elements such as:
Internet Explorer seemingly ignored most of the capabilities of CSS3, but with IE9, all of the major browsers finally embraced the technology allowing developers to fully utilise the features of CSS3 regardless of platform.
Of course, users on older browsers won’t be able to take full advantage of this without upgrading.
Over time, we will all be using CSS3 compliant browsers and many of the old, complicated methods of developing websites will start to fade out.
The web’s favourite language turns 18 this year.
Developed in 1998 by Brendan Eich at Netscape it was originally called Mocha then changed its name to LiveScript before JavaScript finally stuck. It was widely adopted very soon after its inception.
Around 2006, its popularity exploded as developers began to take advantage of emerging libraries and frameworks such as Mootools, Prototype and jQuery.
These libraries allowed us to write cross-browser compatible code quickly, and the surge led to huge advances in JavaScript performance.
A new developer today might be forgiving for thinking that JavaScript is jQuery, due to its overwhelming popularity and versatility.
This immensely popular library is used on over 65% of websites in the world today, but what exactly does it do?
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It is a free, open source, cross-browser and CSS3 compliant.
jQuery is very compact JavaScript code that enables developers to create critical UI functionality by writing very small amount of code.
Some of the benefits include:
When a print designer gives their page a 5mm border, selects Pantone colour 451 and the font Gill Sans 15 point, they can be sure their audience will see their design exactly as they planned it.
Print designers have a great deal of control over their medium. In contrast, the web designer has no absolute control and designing for the web is consequently very different. There are a wide range of external factors that will affect how a web page will look to the user.
The user’s computer system:
The way you have set your preferences will also influence how a page is displayed.
As if there weren’t enough things conspiring to affect the web designer’s masterpiece, the web browser also wants to get in on the act.
Each web browser looks at the code used and tries to interpret how the page should be displayed. Some browsers will display the page exactly as the designer intended and others won’t.
Some browsers will add default styles to elements. To stop this happening the designer must turn these default styles off.
Display discrepancies are a fact of life for Front End Developers. By using web-standard code and semantic mark-up many of these issues can be dealt with and the increasing standardisation of the web will undoubtedly help in this respect.
Unless we all use the same computer systems with the same preferences there are always going to be some differences.