Getting Started

Today's Web applications have become extremely powerful and complex, however the technology with which to construct them has not changed much, it has maintained the same structure and purpose as in the early days. On the contrary the techniques or mechanism to use that technology are constantly evolving. The foundation of Web development falls under three items HTML, CSS and JavaScript.

HTML is the standard language for structuring the content of Web pages. HTML5 is the latest revision of the Hypertext Markup Language (HTML). HTML5 has two main advantages over its predecessors, first it does not require the use of proprietary APIs to handle, for example, multimedia content; second, it uses semantic elements which make it easy to organise the code. We will come across both of these and many other features of HTML as we progress in the exercise.

CSS or Cascading Style Sheets is a style language used for describing the presentation of a document written in a markup language, for example HTML, XML or SVG. CSS is designed primarily to enable the separation content from presentation. CSS provides constructs to define presentation aspects such as layout, colors, fonts, etc. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML documents to share formatting by specifying their common style in a separate CSS file. This separation of formatting and content also makes it possible to present the same content in different styles for different rendering methods, such as on-screen, in print, on a mobile, etc.

Even if you don't have much experience with HTML and CSS, it should be easy to follow along. The idea is to build a web page that contains basic elements such as a navigation menu, multiple sections, and a mash-up with a map and a few thematic layers.

JavaScript is the scripting language used for adding interactive features to Web pages. It can be used to create menus, validate forms, swap images, or just about anything else you can think of to do on a Web page.

Setting the Stage

As the basis of the design process we will focus on a use case where a Geo Information Production company is interested in constructing a Web Site that can be used to publicize and disseminate its various data products. This company specializes in five different areas: storage services, raw datasets, thematic atlases, application development and web services.

Development terms

The management of the company indicated to be interested in a nice-looking interactive site that properly presents their products, allows interaction with the datasets they hold, and depicts some examples of tailor-made products they created which are tailored to specific user needs. We have been made responsible with the definition of both, design and functionality of the new site.

It is very tempting to start straight away with creating the website and just build a webpage that shows the requested elements. This approach for sure will lead to an endless loop: you create and edit and the client (the companie's boss) is commenting and suggesting other or new elements to be added for each new proposal you deliver.

“Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs

Development Cycle

To avoid that never-ending loop, be smart and start with a proper analysis of the requirements for user, content, functionality, environment, etc. On basis of the acquired information the design of the website/application can start. Define data requirements, sketch the relation of the different contents in a diagram, think about the framework, the logic and the functionality of the website/application. Next step in the process is the actual design of the Graphics User Interface (GUI), collection of data and construction of the product. A continuous testing of the design, the intermediate and final product is essential to be sure that the final product will match users expectation.

The Application Development Cycle gives an overview of the steps to take when creating a new product. Development cycles (the methodology) can differ per product, but it always includes design, development (the actual creation), testing (or evaluation) and implementation. On top of that you will find a layer of project management (planning, budget etc.).

Most timeconsuming will be the identification of requirements and design stages, in which different stakeholders (also the developers) need to analyze the requirements and specifications of the users as well as of the technology. This is followd by the system design, where the process focuses on defining how all elements like data-storage, information relations, application logic and system framework come together. Crucial for the correct functioning of a web based application (like those in our exercises) is the availability of data. Identifying data requirements and analyzing the gaps in available data may lead to re-definition of the application requirements, development is an iterative process and the final product often will not be equal to the identified product at first stage.

Designing the User’s Interface is a process of close cooperation with potential users, and has to lead to an intuitive environment where the user easily find the way and feels comfortable, this stage requires usability testing.