D2: The World Wide Web and User Access to Information

Introduction
In this document I will be discussing the techniques that can be used on web pages to aid user access to information. I will also be discussing, explaining and going through the history of the World Wide Web (WWW) from the very first website to the implementation of HTML5 (Hypertext Mark-up Language 5) and popularity boost of JavaScript and the creation of web applications and cloud access. Levels of web accessibility will also be discussed in this document.

History

The techniques that can be used on web pages to aid user access to information is a huge subject to cover and to cover it affectively the history of the WWW has to be covered.

The First Website

The first website ever created was purely created using HTML, and was used just to display text across a network, using a single server scientists could post their research documents and easily have others view their work and comment on it. At this time (1990) the WWW was not a well-known and heavily used implementation of the internet and was instead used for presenting research papers across a network for multiple scientists to read.

It looks just as you expect.

This brings us to the very first technique that aided the access of information, which is the simple presentation of text-based information. HTML allowed people to present hypertext information over a very large network, which will only grow bigger down the line. This is the biggest and first component, as without text, websites would not be very informative, basic text is an effective and simplest way of aiding the access of information for the user. The Web was invented by Tim Berners-Lee with HTML as its publishing language (which lasted about 7 years) this was actually invented at CERN, the European Laboratory for Particle Physics located in Geneva, Switzerland.

Tables and Magazine Layout

Tables were introduced in 1991 and onwards and was implemented within the Viola web browser which became one of the most sophisticated browsers at the time. Viola was the first browser that supported things like style sheets, tables and other nest-able HTML element. Tables and the magazine layout helped extremely with new websites that tried to organise their content. Instead of websites just being plain text, websites could now feature a table layout to place button-like functionality and allows developers to create a user interface.

This was the rise of importance related to the user experience of a website and the user interface, and became a more important aspect of websites. This aids user access to information because it makes every website easier to understand and easier to navigate. It speeds up the access of information and therefore aids the user’s access to the information. Since now it’s apparent where to go in a certain website for example:

BBC in 2001 used tables for their website to display information, this allowed for easy navigation of their website at the time. Which provides a greater access to information as you can visually indicate where to go and present information in a structured way to the user.

Cascading Style Sheets (CSS)

CSS was a very important technique that aided in the user access to information, CSS1 allowed for developers to change font properties, the colour of the font and background. It of course allowed for cascade functionality to do with style sheets, and allowed HTML to reference to a CSS stylesheet which would change the visual interpretation of the website.CSS allowed for more variety in the choice of typeface and allowed for different colouring of certain elements of the web page, like the text and background colours. CSS1 was introduced December 1996 and wasn’t originally intended to be a layout scripting language, and instead was aimed at just designing the finished product. However it did support the “float” but didn’t support “position”.

When CSS was thought of as a layout language was when the second iteration of CSS came about, CSS2. CSS2 supported tables and was released in May 1998, but the only indication that showed it was meant for the layout of a HTML webpage was W3C’s recommendation “9.6.1 Fixed positioning …. Authors may use fixed positioning to create frame-like presentations”. This is the BBC website from the first page but in 2004, here you can clearly see the benefits of CSS and how its layout system could be beneficial.

After this was realised, more and more websites starting using CSS2 for web layout, completely ignoring tables and the magazine layout it could achieve. This caused W3C to create new standards for web design, incorporating a new idea known as semantic web design.

Semantic Web Design

Semantic Web Design is making sure every tag is doing what they’re supposed to do. In the case of the <table> tag it is not meant to be used for layout, it’s meant to be used for presenting information in a table like on a word document. HTML was not made to be used as a layout language, so no tag should be used for the goal of laying out the webpage. It was when CSS2 came in that Semantic Web Design became standardised.

Semantic web design also includes the usage of headings, each of these headings should only contain information relating to the content of the webpage. For example using the word lucky randomly on a page within h4 tags is not semantic. Since you would be using HTML for formatting, but only CSS should be used for formatting in semantic web design.

So now, HTML is only used to present information in a text format, just like when it was first created in 1990. Because of this semantic web design, it means you’re website should run on its own without any CSS, if it doesn’t, it is most likely you did not follow semantic web design. So my own website accomplishes semantic design rather well because as you can see it still runs normally without any CSS.

With CSS you can see that all text has been formatted in some way and that a standard layout has been established. Nothing resembles the original HTML other than the text that appears on the screen

When CSS gets removed, all formatting is gone, and the layout now brings everything to he left and only depends on the HTML tags used that have a page break. For example the paragraph tag in HTML has a page break, so there is a line spacing between each chunk of text within the page. All the images have returned to their original size, as the CSS resized them to a more acceptable size suitable for the website.

When your website shows this clear of a difference when you remove the CSS it shows that you’ve accomplished semantic web design, as you did not use any tags the way they weren’t meant to be used. Truly everything at its core element has remained the same, it’s just that it now looks different, and it’s lost its font and other formatting. It’s also a good way to see if you used any HTML tags for layout, which would be a big fault in your programming.

Rise of Adobe Flash

There were multiple attempts at making animations appear on a webpage, one of the more successful (but still unsuccessful at the end) attempts was the implementation of Adobe Flash. Adobe Flash when first created allowed developers to implement Flash animations into their website. However Flash did have a few problems initially, like being unable to be used with screen readers and requiring the installation of an extra piece of software on the client and server to work. This made Adobe Flash very bloated, but it was the best thing for its use out there at the time.

Adobe Flash was used in a time where a lot of features a website lacked were fulfilled using plug-ins, these themselves were quite bloated software. And don’t even think of smart phone compatibility, as these plug-ins could drain too much battery life, this was such a problem that Apple openly denounced Adobe Flashed, and restricted it on their Safari browsers. Apple and other companies agreed that they needed an open-source alternative which was lightweight and apart of the infrastructure.

The Rise of HTML5 and CSS3
HTML

This open-source alternative was realised with the introduction of HTML5 and CSS3, which provided support for video and a huge array of different HTML5 based animations. Instead of companies resorting to GIFs to show a rotating logo, they could now do it with HTML5’s native compatibility with video. HTML5 has dedicated video and audio tags that support a range of common video and audio types, this allowed video with audio to be streamed on a website natively.

HTML5 was proposed in 2008, with the actual release happening in October 2014 due to the rise of smart phones, HTML5 had increased features that supported them. With video and audio appearing in HTML all smart phones including iPhones could display video on their phones through the web browser natively. This reduced the amount of battery drain and it wasn’t too stressful on the system, so smart phones remained steady in terms of their performance.

CSS3

CSS3 provided new features like rounded corners, gradients, animations, transitions and shadows, it also provided new layouts like flexible box or grid layouts and multi-columns. It also provided transparent colour as CSS3 now supports the alpha channel, so now there’s four values instead of just three (before CSS3 only three colours were used: rgb(0,0,0) with CSS3 you can now use: rgba(0,0,0,0.0)).

CSS3 combined with HTML5 utterly destroyed any plug-ins that provided extra functionality in terms of web development because it was native and hardly resource-intensive unlike Adobe Flash. This lead to the downfall of Adobe’s software and it started falling into obscurity, it hit hard and Adobe announced that 11.1 would be the final version for smart phone devices.

Downfall of Adobe Flash

With the rise of HTML5 and CSS3, came the downfall of Adobe Flash and other similar plugins like Shockwave Flash. Since there was an alternative easier way to implement video, animation and sound within web browsers (that was also native) companies like Google, Apple and Microsoft, started shying away from things like Adobe Flash. YouTube, Google’s biggest branch company now uses HTML5 based videos rather than Adobe Flash based videos, which it used to use before the implementation of HTML5.Eventually Adobe Flash fell into obscurity, as it was too risky for a company to invest in such a programme that forced users to download an external piece of software for it work on their system. Flash still has some presence on the internet today, but as for mobile devices and YouTube, Adobe Flash has ditched for the more suitable HTML5. Adobe admitted themselves that Flash has fallen and explained the reasons their own piece of software failed.

JavaScript

JavaScript is a scripting language used alongside CSS and HTML to add interactivity, simple animation and security to web pages. JavaScript can also change document content that is displayed to the user, JavaScript, when used, is client-side so the user’s computer is what is doing the processing for JavaScript when it gets used. Despite the name Java and JavaScript are completely different to one another, have different semantic and their syntax derives from different source (since JavaScript’s syntax is actually derived from C).

JavaScript is very useful for creating interactive web design, and is a third layer of a web page (if the developer chooses to use it). For example in my website JavaScript has been used to display animations when the user hovers their mouse over the navigation bar, it also allows for popup boxes to show when they hover their mouse over the store items in the store page of my website.

It also allowed for validation to be programmed, this is very useful for forms (for example, if you’re filling out a form to purchase an item), in JavaScript you can programme elements to only accept a certain value, or to display an alert when the submit button is pressed depending on the content inputted. So if the “email” field in my website does not contain the symbol “@” it will display an alert message that states the email is invalid.

The developer of JavaScript was Netscape, but was personally developed by Brendan Eich while he was working for Netscape Communications Corporation. It was first developed under the name Mocha, but was beta released under the name Live Script, it was shipped in beta releases of Netscape Navigator 2.0 in 09/1995. It was eventually renamed JavaScript.

JQuery

JQuery is not a new programming language, rather it is a huge library of JavaScript functions that makes developing with JavaScript a lot easier. It was developed with ease of use in mind and has pre-built functions that users don’t have to recode themselves to implement things like animations and effects into their website. It’s well-known for speeding up the development time of any web developer and is a tool used almost every day by JavaScript programmers, JQuery’s motto is even “Write less, do more”.

The only way this really improves the access to information is that it will get websites published a lot faster, so users will receive their information a lot quicker. Interactive information is valuable as it will provide a visual way of presenting a lot of information without a lot of working. “It was originally released in 01/2006 at Bar Camp NYC by John Resig and was influenced by Dean Edwards’ earlier cssQuery.”

Server-side Scripting and Client-side Scripting

Server-side scripting is separate from JavaScript, as you have many other programming languages to use for server-side scripting. To name a few, you can use “MySQL”, “Python” and “Perl”. Server-side scripting allows a server to process a request from a client and run scripts on their end and send the client the webpage with the server-side script running on it. However servers are already tasked with a heavy load of moving data around like accounts and databases. The environment the server-side scripting is run in is a web server, rather than a web browser with client-side scripting.

So server-side scripting would only contain things like validation and form based data, to compare a user’s input to the server’s database to confirm someone’s identity, bank details or even poll answers. It would be in no way used for the things JavaScript is used for like loading animations or effects onto a webpage. This is when these two processes of loading interactivity and interacting with information is separated into client-side scripting and server-side scripting. This means server-side scripting provides dynamic content, as it depends on the user what information is selected from a database to provide a certain HTML website.

This greatly affects the user access to information, as the information is tailored to each user, and this ends up providing information the user wants rather than all of the information the user needs to sift through. Of course this depends on the cloud/web application the user is using, but overall it’s an improvement on the type of information the user receives. Rather than unwanted information the user will receive information they’re interested in and this ends up bettering the user experience of access to information.

Client-side scripting is like JavaScript that was discussed above, it will most likely be used to display animation, effects and other types of interactivity like drop-boxes. This is done to reduce stress on the server and has a set of advantages, as it makes the client’s computer perform better when there is a balance struck between the amount of scripting on both the client-side and server-side.

Web Applications and Cloud Access and Applications

JavaScript and HTML5 enable for more than just simple animations and interactivity, they can also enable the usage of cloud applications and give access to the cloud through client and server-side scripting. A good example of a cloud application with cloud access would be Google Docs with Google Drive, and Office365 and Microsoft Word. These two cloud applications are cloud office suites that can be accessed through a browser rather than on your own PC.

There are also web applications which are designed to be sorely run on a web browser things like electronic banking (Santander) and online shopping applications (Amazon) are considered web apps. They use a combination of server-side and client-side scripting to accomplish a web app that could also be run offline (but obviously would hinder most of the functionality). Web apps are known to not have a lot of customisation and tend to be the same for every user.

Cloud apps on the other hand are extremely customisable and each changes depending on the user account using it, for example: In Google Drive, your entire folder and contents change depending on the account you’re logged into, if you open a Google Doc that can change completely depending on the Doc/Word file that you opened.

Levels of Web Accessibility

Web accessibility is an important consideration for the internet as a whole, as it is directed at those with visual impairment and other disabilities. A small example of accomplishing some form of web accessibility (this is accomplishing Priority 1.1 on the Web Content Accessibility Guidelines (WCAG) 1.0 and also abides by one of the laws of the World Wide Web that could get you into legal trouble if broken) is making sure every non-text element like an image or video has an alternative text element. This is done in the form of alt tags on images and animated gifs.

In my own website I have done this to make sure it’s along the lines of the law and is accessibly by the visually impaired:

So now the screen reader will not ignore the images and will read out the alt tags in place of them.

The reason this is required is so that screen readers like “JAWS” can be used to read the alternative text in place of the image, this allows for a visually impaired person to grasp the idea of the image without having to see it visually. Officially most of the WCAG is a recommendation, but it is actually against the law to not include alt tags with your images, as it severely affects those visually impaired who browse the web. Companies should have users with a range of different disabilities test their website so that they are conforming to a web accessibility standard.

Web accessibility comes in three levels, Priority 1 (being the highest and most important), Priority 2 (still quite important but optional), Priority 3 (Not as important as the first two). I’ll go through each of them and explain how it helps user access to information, especially for the disabled and visually impaired. I will also show how I have met the priorities discussed in my own website.

Priority 1

Within priority 1, 1.1 has been achieved as seen above in page 10, as I have described every image with an alt tag for screen readers. 2.1 is also achieved as seen above in page 5 at the same time 6.1 has been achieved in this way, this allows user access to information as it doesn’t prevent those that only use HTML from the information in the website.7.1, 6.2 and 6.1 are not applicable to this website as it is just a demo. 14.1 has been achieved as it uses English (UK) and (US) throughout, its purpose was designed for English-speakers only so that’s also achieved.

Priority 2

2.2 has been achieved and is proven through images throughout this document, the colour palette I chose was used especially for contrast and made sure that text was dark blue against a light yellow. Most of these aspects have been covered other than 3.2 as I do not have the technical capability to create validation for such a thing. Quotations haven’t been used so no mark-up quotations are required. 7.2, 7.4, 7.4, 11.1, 11.2, 13.2, 13.3 are not applicable. 10.1 was not done because I believe that this would’ve affected the user experience greatly in a negative way, since they would need to go through a notification box to just see information about the item they wanted to purchase.

Labels are consistent as seen in page 8.

Priority 3

If the user chooses to go in order of webpages (from left to right) then the acronyms used on the store page will be first listed and explained in the “Where to Begin” page. If it’s a new user they will most likely click this button as they do not understand the PC gaming market, so they will learn these acronyms beforehand, but if it’s an experienced user they will not need to visit the page. 4.3 was not completed because the site is a demo, and might undergo language changes.

Conclusion

In conclusion user access to information has been worked on for a long time now, features and functionality have been added due to the huge increase of the size of the internet and how many people use the internet for the World Wide Web. So much so that the World Wide Web is being mistakenly called the Internet, with so much traffic here, there needs to be a globalized standard of web development so that users can have a proper access to information.

It first began with just text-based websites, and then came the inclusion of the “<img>” tag which vastly effected web development. So much more functionality and features has been added to the World Wide Web since that point in time. We now have HTML5 which supports full blown video media, animations and with the coming of CSS3 and JavaScript purely Semantic Web Design can now be achieved. With HTML being just a mark-up language like it used to be, CSS being used sorely for formatting and layout, and JavaScript used for interactivity and enhancing the user experience.

With that comes support for those who are visually impaired or who have some other sort of disability that makes the Web hard to use. The three priorities and W3C’s recommendations combined with the inclusion of primary ones within the law is an important step for those with a disability of some sort browsing the web. It prevents their discrimination, and most importantly gives them access to information just like any other user on the World Wide Web.

 

References

https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web#1980.E2.80.931991:_Invention_and_Implementation_of_the_Web
http://info.cern.ch/hypertext/WWW/TheProject.html
http://www.w3.org/People/Raggett/book4/ch02.html
http://www.barrypearson.co.uk/articles/layout_tables/history.htm
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
https://tecnocode.co.uk/2005/11/14/semantic-web-design/
https://www.youtube.com/watch?v=IsXEVQRaTX8
https://developer.mozilla.org/en/docs/Web/CSS/CSS3
http://mashable.com/2011/11/11/flash-mobile-dead-adobe/
https://en.wikipedia.org/wiki/JavaScript
https://jquery.com/
https://en.wikipedia.org/wiki/JQuery#History
http://www.sitepoint.com/server-side-language-right/
http://www.pythonschool.net/server-side-scripting/introduction-to-server-side-scripting/
http://www.sqa.org.uk/e-learning/ClientSide01CD/page_18.htm
http://www.w3.org/TR/WCAG10/full-checklist.html
http://www.out-law.com/page-330