The Basics of a Web Site

Anyone can create a web page, if you able to read and write the English language then creating a basic web page is a straightforward process, it is the way many of us created web pages back in the early 1990’s when the technology and the internet were born. There are 2 key elements for building any web page, with all other complexities aside one can create basic pages using HTML and CSS (Cascading Style Sheets).

HTML & HTML5

This is what the web and browser displays are built on, HTML is a mark-up, not a programming language, it is a means to tell the browser what elements exist on the page and the "stacking order" for the elements. This is the reflow order by which the elements sit in the Document Object Model.

The standards and specification for HTML are governed by the Web Wide Web Consortium, also known as W3C.

If one views the source of any web page at the top on modern web pages using HTML 5 you would see.

Thus immediately it can be seen that HTML "tags" are wrapped in < > greater than or less than symbols, this is standard and unchangeable for all HTML tags within the W3C standards specifications.

A decade ago the semantics of HTML were not being used to their full effect, the purpose of HTML tag naming convention is to allow a document to be structured with tags representing the type of content being displayed.

Examples would be Headings, Paragraphs, Tables, Forms and Images, these are the most common elements that may be found on any web page. It was a mistaken practice in the past to use the <table> tag for layout out a pages content, semantically this was incorrect yet many web developers adopted it for the simplicity the tag offered in laying out columns and areas of the website. This was eventually frowned up and developers moved correctly to the <div> tag for arranging layouts. This became one of the fundamental tags used right through until the end of HTML 4 lifecycle.

HTML 5 Introduced better semantic naming and additional tags to help create Atomic Layouts which include header, footer, section, article and better support for audio and video playback. It also introduced the canvas tag and the canvas scripting API which allows animation and graphics to be drawn within the browser. This new feature is one of the primary reasons plugins such as the Flash Player and Silverlight became obsolete when considering rich interactive browser content.

CSS (Cascading Style Sheets)

If you wish to present your web pages in a pleasant way to your users then you will need to dive into Cascading Style Sheets, style sheets allow you to tell the browser the format, colour, font and many other properties of the HTML tags that reside on the page. Style sheets use either TAG, ID OR SELECTOR styling guideline references, you can read more about the W3C CSS Specifications.

Introducing Interactions

If you wish to build simple web pages HTML and CSS are all you need, you could build a web site with any number of pages and include a nice template, text and images. You may use the <a> tag to navigate through your web site and CSS (Modern CSS3 especially) provides ways in which you .may include smooth transitions and Hardware rendered display manipulation. With @media CSS rules you may even create a responsive web site that can be viewed on mobile devices.

For obvious reasons you would need to read through and learn as much of the standards as possible, the most common features of which will burn into memory with continued usage.

JavaScript Web Language

The is one of the most widely used languages available, JavaScript is the only browser scripting language and is defined by the (ECMA) European Computer Manufacturers Association other than the Microsoft version JScript which is a subset of JavaScript with some supplementary methods and features only found in Microsoft Browsers.

According to the IEEE statistics JavaScript is ranked the 8th most popular programming language by its users and in other statistics it is ranked higher.

JavaScript allows the web pages to take on new levels of interaction, with complex features, animations, algorithmic calculations and the capacity to create SAP (Single Page Applications).

Unfortunately JavaScript has been under scrutiny for many years due to its misuse or over use and given its prototypal nature heavily under estimated with its capabilities. The new ES6 features and specifications advance the languages capabilities further.

There are also an incredible number of libraries and frameworks available for working with JavaScript, in fact to some degree the availability of such frameworks seems excessive in comparison to other programming languages. Whereby many of these frameworks are useful and offer time saving features libraries like jQuery dominated the industry for many years and drew developers away from native scripting. This then became an in joke within the industry given birth to Vanilla JS terminology which some new to JavaScript programming believe is a framework of sorts. However it is purely a reference to native JavaScript development, development without a framework.

Vanilla JS however is theoretically a contraction of itself, any application or web site which is developed without the use of a structured framework will breed inconsistency and a weakness in its ease of maintenance. A Vanilla JS developer will likely develop a framework to accomplish their goals, even at Impela we have created out own framework AIM which fits our specific needs.

Server Side Languages

We have only discussed so far the 3 key technologies required when working with the browser client and rendering interactive web pages for the user. If one wishes to persist any form of data, store information then server side scripting technologies and database languages would be required.

A popular language for the internet is PHP (Hypertext Pre-processor), it was specifically designed for the internet and processing HTML documents, read the PHP specifications for more information. From the IEEE popularity ranking it is ranked 7th and offers powerful features for generating enterprise level web sites. There are several other languages which can be utilized for server side processing, many offer their own unique capabilities and several are general purpose and not specifically web based such as Java, Ruby or C#.

With the complexities surrounding the extended knowledge required to become a "Full Stack" developer pioneers in the industry have created JavaScript based server side technologies such as NodeJS which is a powerful alternative and allows JavaScript developers to now utilize the same language for server side programming.

Pre Processing Compilers

With the advancement of technologies, standards and the complexity and the differing versions of programming languages requiring support bread the onset of Pre Processing language compilers. These are either extensions to native languages adding additional features and flexibility which are then compiled into a compatible native format, or syntactically completely different languages. SASS (Syntactically Awesome Stylessheets) is an example of the former specifically with its SCSS syntax. SASS effectively adds to cascading stylesheets features which every developer wishes were natively supported such as variables, functions and mixins to name a few, adding the capabilities to manage complex Style more efficiently and compile to either CSS2 or CSS3 compatible formats.

Typescript and Coffeescript are examples of JavaScript compilers which are written in a completely different syntax yet allow compilation to native JavaScript according to the desired output specification. Babel offers the capability to write JSX an extended JavaScript syntax that supports embedding HTML mark-up within the code. This is a feature that some developers are fond of and many.

Compatibility Issues

Technologically over the years there have been many compatibility issues facing web developers given the multitude of browsers available and the inconsistent support of standards and specifications. It was frequent practice to have browser specific code, styles and mark-up to combat these frequent issues. This added supplementary development and testing requirements and extended the project life cycles and expense.

This is one of the primary reasons Flash was loved so much for so many years, it remove these compatibility issues from the equation as the Flash Player was generally pretty reliable in performing consistently across browsers.

Modern times have introduced enhanced browser compatibility for the latest features and standards being adopted by web technologies. Companies are understanding the need to ensure swift development can occur without the necessities for customized compliance and constant issue fixes is they wish their product to stay ahead in the industry.

Web Development Cycles

Understanding the core technologies required for the development of complex web platforms is the mere first step for creating production ready high performing web sites, there are a myriad of concerns and requirements that are involved in ensuring a successful deliver of any large project.

Development Planning

Overall planning is fundamental to the success of any project however Agile Development methodologies facilitate production development cycles with only a loose set of specifications. This lays the foundation for Agile development becoming popular within many industries and project work flows beyond the internet. The work flow of an Agile project allows issues and bugs to be tracked throughout the development lifecycle, providing a means to deploy applications in feature based phases. By utilizing real user experience into the continued development process one can encumber the varied improvement and adjustments to the specifications in calculated deliveries.

Code Unit Testing

There are several ways in which one can test the performance of an application code base, each has its merits. The key principle of Code Unit testing is to write a block of test code specifically designed to execute a block or segment of code within your application and evaluate the results.

Fundamentally you are writing code, to test code which are named "Test Cases". In writing Unit tests you are able to accurately determine issues within the code and automate test cycles to run test for each instance of which any code updates occur.

Common Unit testing approaches include Functional Unit Testing and Test Driven Development, specifically in the later the test cases (code) is written before the functional code is has been written to test has been completed.

Code Quality, Commenting and Linting

It is imperative that code is checked utilizing modern tools for linting, ensuring there are no Syntactical errors that may cause compiler issues. Every language generally has applicable linting utilities available, these tools not only check the code syntax but in the case of JavaScript Linters certain performance hindering practices such as creating functions in loops. Popular Linting Utilities for JavaScript are JSLint, ESLint and JSHint.

Commenting helps ensure code is readable and each statement within a block is understood, it complements creating code in a verbose manor and allows explanations to guide other developers as to not only the functional logic, but any reasoning for the approach.

Quality Assurance and Test Cycles

With high end web applications testing is paramount to ensuring a User Centred Experience is achieved. With the modern internet web sites can be viewed on a large number of devices and platforms with varying screen dimensions. Running production ready applications through test cycles covering an adequate device matrix can be an expensive set of requirements since one would require each of the many devices available for testing. Businesses like User Testing provide solutions for maximising the device coverage at lower costs.

Page Speed Testing

User experience is one of the most important factors for any web site, the speed at which a page loads is determinate to a user's continued interaction with the site. There are important factors involved in ensuring a swift delivery of a web site such as Compress Images and Graphics, Lazy Load Content and Ensure above the fold loads first, Server Side Compression using GZIP, Browser Caching.

Read through the information on our website speed testing page to learn more about the tools available for speed testing production websites.

Contiguous Integrations and Automating Builds

Not all web projects will involve continuous integrations, this involves a completely automated build cycle so that deployments can occur frequently without any manual input from developers. This works hand in hand with automated Unit Test Cycles and deployment builds and complements Agile development cycles and sprint planning to allow dynamic feature releases with minimal effort.

Search Engines and SERPS

Developing high performing usable web sites has no foundation without conceptualizing how that web site will be found within the immense structure of the internet. Employing specific tactics for ranking performance is a key strategy when developing a web site internal markup and link structure.

Maintenance and Upgrades

Within this realm of the web site delivery cycle is where the determination of your efforts in delivery a high profile application are fruitful. Within the lifecycle of every application will be the need to enhance, improve and extend the application with new features. Ensuring an application has been built in a consistent modular fashion simplifies these processes and would allow easy updates within minimal time frames.

And Finally

The purpose of this article was to outline in more depth the practices involved when undertaking a web development project, there has been a key area omitted which we will discuss in future articles based on the "design" aspect of a web site or application and how to enforce trends, usability and accessibility into the user interface.

It is apparent that high profile web development projects involve no small amount of tasks, technical understanding, adherence to standards, conformance to best practices and methodologies and the capacity to evolve with the internet. However web development can lend itself to being an enjoyable practice offering ongoing challenges and tasks that help us grow as developers.

References

[1] PyPl Popularity of Programming Languages: http://pypl.github.io/PYPL.html

[2] Tiobe Index https://www.tiobe.com/tiobe-index/

[3] Red Monk Language Rankings http://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/

[4] IEEE Spectrum http://spectrum.ieee.org/computing/software/the-2016-top-programming-languages