HTML – Hi There My Love

Been there for many years now and it has gone through many changes; in fact it is currently in its 5th version. Even the very early internet static web pages used earlier versions of HTML to show important data to the site visitors.

Nowadays, the latest version of HTML, supports various new features to make a web page aesthetically up to standard and meet today’s requirements.

To build the file sharing website, HTML5 was used as the markup language to code the front end in a clean and professional manner. In this post, I will be including some tags, which were used in the various pages of the site. Particularly, the tags below, were only introduced in HTML5 and didn’t exist before:

Section tag:

The section tag was introduced to part the whole web page into different sections. Back in the earlier versions of HTML, before divs were introduced, tables were used to set the positions of elements in the page. Nowadays, the section tag can group the page into different parts, each containing different elements of the page. Below is a snippet from the login.html page where the section tag has been used:

<section id = “element-container”>
<div id = “email_container”>
<input name=”Email” type=”text” id=”email” />
<div id = “password_container”>
<input name=”Password” type=”password” id = “password”/>
<div id = rememberme>
<label>Remember Me</label>
<input name=”rememberme” type=”checkbox” id=”rememberme” />

In the tags above, the section defined is call the element-container and will be used to contain the elements used to enter the email address, password and the option to remember the user details on next login. The fact that these elements are set in the section tag, makes sure that they are part of the section placements on the page.

Header tag:

Just like the section tag, the header tag is used to page a set of elements at the top of the page; therefore called the header. This tag places the elements inside it at the top of the page, without the need to style the tag positions using css. A very clear example of how the header tag has been used in my pages is through the following elements, which are visible on each page of the site:

<header id = “header_bar”>
<div id = “title”>FireFile</div>
<label id = “uname”>michele</label>
<label id = “accnt” onclick=”location.href=’settings.html’;”>account</label>
<label id = “help” onclick=”location.href=’help.html’;”>help</label>
<label id = “storg”>storage</div>

The snippet above includes a header bar at the top of each page containing links to nearly all the other pages.

Footer tag:

Just like the section and header tags, the footer tag is used to place elements at the bottom of each page. This is mostly used to include information such as site proprietry right and liscences. In our particular case, the footer tag was used in the login page to keep the login button and register for a new account link elements in it. This can be seen below:

<footer id = “footer”>
<div id = “register”>
<a href=”register.html”>Register for a New Account</a>

<div id = “button”>
<input type = “button” id=”btnRegister” value = “Login” onclick=”validate();”/>

The Key to Success

When designing a new system, correct design is one of the most important stages in its development. One can speak of several appoaches which can be given to this particular stage. Nowadays, we also speak of different technologies to deal with the design stage, in relation to the whole software development lifecycle.

This particular project will be going through an Agile development technique. The Agile process is a kind of incremental model, where the project goes through small incremental releases with each release building on previous functionality. Each release is tested thoroughly until it is free from any bugs.

Advantages of the Agile model:

  • We can achieve customer satisfaction by rapid, continuous, bug free delivery of quality software.
  • The interactions between the parties involved is emphasized rather than process and tools. Hence the need of frequent communication between customers, developers and testers.
  • Meetings between the parties involved is the best form of correct communication and delivery of the desired project to the customer.
  • Day to day communication between business people and developers.
  • Continuous attention to technical excellence and good design.
  • Regular adaptation to changing circumstances, to deliver the best project using innovative technologies.
  •  Changes in requirements are expected during the course of the project, and are therefore not frowned upon.

Disadvantages of the Agile model:

  • It can sometimes become difficult to assess timings and effort required in software deliverables, especially when the task in question is an important one in relation to the whole project.
  • Since the project is delivered in parts, there may be a lack of emphasis on necessary designing and documentation of the project as a whole.
  • The project can easily get taken off track if the customer representative is not clear from the beginning what should the final outcome be, or if there are several changes taking pace in the process.
  • Only experienced lead developers are capable of taking important decisions required during the development process. Therefore, it may be difficult for junior developers to adapt to the Agile model.

This model was chosen, since the front end development of the file-sharing website will be completed in the first 6 weeks. Any development in relation to HTML5, CSS3 and front-end validations made by JavaScript functions will be performed during these first 6 weeks of the project. This is clearly shown in the Gantt Chart below.

Gantt Chart
Fig.1: The Gantt Chart for the first 6 weeks of the project.

This design stage of the development process also includes the mockup screens for each page which will be developed in the first 6 weeks of the lifecycle. The actual development of the web pages will be based on the following mockup pages:

Fig.2: The login page which will be the first page the viewer will see when acessing:
Fig. 3: If the user does not have a registered account, he/she will need to register for a new one. The second mockup shows this page.
Fig. 4: This shows the main page of the site where all uploaded files are shown.
Fig. 5: This shows an actual open document on the site.
edit profile
Fig. 6: The user also has the ability to change some settings on the site and amend personal details.

As easy as ABC

At the very early learning stages of a child, the first things which a child is presented with, are the ABC basics. These are the very basic notations by which a child can understand a language used universally.

In the design of a user inferface, making the interface a clean and simple one, is one of the most important features needed. This enables the user to have a pleasant exxperience when using the web application to share files online.

In the first 6 posts of this blog, I will be speaking of the HTML and CSS needed to create a user interface which is easy as ABC to use. While it’s important to ensure that the most frequently used features are readily available, one must avoid the temptation of including too many features, which are of no use to the user.

The UI will have the following features:

  • modern User Interface (using HTML5 and CSS3).
  • clean and simple.
  • a consistent layout, with similar controls performing the same behaviour.
  • Don’t load your menus or toolbars with rarely-used options.
  • correct use of colors.
  • interactivity between user and the system.

As most of us know, too much of anything is too much, and this is no different. Offering too many choices at the same time results in cognitive overload, which results in the user being too spoilt for choice. That’s known as choice paralysis among cognitive scientists, and it’s often the main reason new apps, sites or other digital products fail.

So it stands to reason that design and development teams – along with their client counterparts in Marketing and Product Development – should spend some serious time considering and analyzing which features can go “behind the panel” instead of up front on the faceplate.