Home | Travaux STAF | Stage (Practice) STAF-E

my name

S T A G E

n_TOF

"Conception of the web site for the experiment n_TOF (PS-213) @ CERN"

( n_TOF = neutron Time Of Flight )

CONTENTS
Introduction Testing & Evaluation
Project management Conclusions
Problems & Technical details References


1. Introduction

General Info

Duration: 4 mois (occupation 50%)
CERN Official Web Site name: http://cern.ch/proj-nTOF
Web Site description: "Neutron Time of Flight Facility"
TECFA Responsible: Patrick Mendelsohn
CERN n_TOF Responsible: Noulis Pavlopoulos

Genesis of the site

In the beginning of November 1999, I have been asked by the spokesman of the experiment n_TOF at CERN Mr. Noulis Pavlopoulos, to implement a web site for the facility that he represented. I considered it as a good timing, as I was looking at the same time to do my practice for the STAF diploma at TECFA. Taking into consideration that CERN is the place where World Wide Web was first conceived, the offer was very appealing and I immediately accepted.

n_TOF is an experiment that has been approved by the SPSC committee of CERN on 1998. Many institutes from all over the world and many scientists are participating to it.

As there are many experiments that are hosted at CERN and they all have their own web site, the very first thing that I did was to go over these web sites in order to investigate the area. So, in our first meeting, I went with a first draft that included:

and I pointed out all the things that has to be considered before starting to have a web site such as:

First thing that should be taken into consideration was the absence of a webmaster and that the site should be made in such a way that it would be updated easily without the need of a webmaster.

As fas as it concerns the target public we ended up that it would be:

As the official languages of CERN are both English and French, we had also to decide about the languages that should be supported. Because the cost of updating the site in both languages would be high, it has been decided to be done only in English.

Because the site would be hosted on the CERN domain, it should follow certain rules. First of all, it should respect the template proposed for the experiments. That meant to have the minimum content requirements such metatags, authors, dates, titles, easy URL's and standard HTML. And definately avoid the excess use of useless animations, counters, frames, some font styles (especially blinking), CGI scripting and Java applets. Also, the main page should include a disclaimer and a copyright .

In consequence of all the above, in our second meeting the supervisor presented to me a table with all the information that should be included. We split this information to four big categories: General, Educational, Collaboration and Workplan. After some small modifications and taking always care that the site should be very light to download, we ended to the following "welcome page" for the facility.

n_TOF welcome page

In order to put documents on the Web on the CERN domain, a special approval has to be granted. So, when the site started to take it's final shape, we decided to put it on the web even though it was still under construction. Therefore, the spokesman asked for the approval which has been granted by the end of 1999.

As the developing of the site has taken it's way, and because of technical details presented further below this report, I decided to create an interface from which a responsible of the facility would enter and update the data of the site, creating that way, dynamically the web pages. Exactly, this characteristic made this practice very interesting, innovative and really a challenge. The interface I came up after a lot of thought and changes based on the usability tests is the following:
n_TOF forms interface

Eventually, and as my supervisor has been very enthusiastic with the forms interface, twelve (12!!!) of the web pages of the site can be updated dynamically through these forms. One example can be seen below for the page that updates the events and conferences supported by the n_TOF facility:
n_TOF events form

I have to point out, that before start implementing the forms to create dynamically the pages, I had already designed the pages and they existed on the web in simple HTML mode. I want to say with this, that in a way this was a usability test that I did in order to decide very early about the final shape.


TOP

2. Project Management

I split my work and the collaboration with my supervisor into the following phases:

  1. PHASE 1: Site map (designing the site's tree)
    Discussion - Improvements
  2. PHASE i: Design and construction of a section
    Discussion - Improvements
  3. PHASE i+1: Usability testing
    Discussion - Improvements
  4. PHASE k: Design and construction of a form
    Discussion - Improvements
  5. PHASE k+1: Usability testing
    Discussion - Improvements
  6. PHASE n: Site Evaluation
    Final corrections - Evaluation


TOP

3. Problems & Technical details

General Info

Languages used: Client-side Javascript, BRexx and DHTML
Server used: W3D server
PDF creation: Through MsWord

Presentation

The first problem that I was faced with, was that data like institutes and members were already stored in databases but in such a messy way, that I needed to reorganize them. It is exactly then, that I came up with the idea of creating an interface with forms to insert, delete and update such kind of data easily without knowing anything about HTML and web generally.

After discussion with the supervisor and giving it a lot of thought, it came up the next problem. As CERN refuses to host in it's domain CGI scripts, I thought that I could use Javascript but very soon I realised that client-side Javascript doesn't allow writing to the client's computer.

Therefore, the only solution left was to install the interface far away from the web tree, in the facility's server and with the tools already installed there and with the minimum requirements. That means forget PHP which I already knew it very well and start learning new tools. The candidates were BRexx Interpreter language and the W3D server.

The interface of the forms is being made as a web page split in two horizontal frames. The upper one contains the menu and the lower one the form chosen to work with. The menu is a table of all the existing forms (each one represents a web page) and each form has two states: edit and create page.

So, if we take as an example the events & conferences page, there are 6 key files that are important for it's creation:

  1. chEvents.html,
    a combination of BRexx, Javascript and HTML code, which loads the data existing already in the following events.txt file (sorted in alphabetical order of a primary key with the Bubblesort algorithm) and then allows the "editing" of the data (add, delete, update)
  2. crEvents.html,
    again a combination of BRexx, Javascript and HTML code, this file reads the data from the events.txt file and creates dynamically the HTML code for the web page, including the data sorted with the Bubblesort algorithm (in the most efficient way each time i.e alphabetical order for names, in ascending date order for documents, in descending date order for conferences etc)
  3. events.txt,
    it's the file that serves as a primitive database where all the data are being stored (each field of the form in a different line)
  4. events.html,
    it's the HTML file created on the fly according to the latest changes through the form, which is stored for the moment at the facility's server
  5. cpAFS.html,
    the file that connects to AFS server
  6. transfer.html (which for security reasons I don't give it here),
    the file that transfers eventually all the HTML pages needed to the main CERN server, to be accessible to public.

For security reasons, forms interface has been installed at a closed network at CERN, that cannot be accessed by outside and the web pages, that are being created dynamically, are transfered via again a form (transfer.html) to the web tree of CERN.

Someone, would answer at this point, why I didn't use a database to store the data. Eventhough, I explained in the beginning that data were being stored already in a database but with many problems, I would like to defend my final desicion to store data in simple files. It is a trend actually, lately, to do such a thing. A profound advantage of this method, is that it is much simpler to keep updated as the interface is very simple (and anyone can do it without special knowledge), than updating the database which has a more complex interface and needs an expert. Moreover, we overcome problems that can be come out such as changing versions or even worst changing databases. So, the result is totally independent.

Also, I have to say that as there were many official documents that needed for the site, I changed them to PDF and provide them through the dynamic pages.


TOP

4. Testing & Evaluation

The existance of the site has been announced in one of the official meetings of the collaboration and has been welcomed by most of them. It was amazing the quick response and the power that a web site has, especially to a collaboration with so many members around the world. Before, the only way of interaction was the meetings and e-mailing.

I received many emails with their comments and information, which helped us also to update some of the information that we had.

As far as for the forms interface, we discussed a lot before the final realisation. Then, I implemented the interface and tested it again to see which parts weren't very ergonomic and change them and of course I corrected the mistakes that came up. I also add from time to time some fields to the forms that seem important and that is easier to find out now, after some time of using this, than before.

I was very happy to see the excitement of using it. It's being used every day for a few months now and the comments are only positive.


TOP

5. Conclusions

I consider this practice as a very good experience of working on the real world, where we face all kinds of problems and we have to adapt our knowledge and be flexible. Especially, when we are talking about developing and computer languages.

While someone, that doesn't know much, would consider this practice really simple (just doing a web site), people that really know had very much appreciated the idea, to create a simple interface to update the pages. So, I am very proud that I implemented it and tested it in real.

If I had to judge the site that I have created, now, I would say that the idea to create forms to make the creation of the web pages dynamically and simple by anyone, without the constant need of a webmaster, really innovative. On the other hand, there are still many pages under construction, that someone could say that it lacks from important content. But because of very important obligations of Mr. Pavlopoulos, we had to postpone their realisation to the near future.

The most important thing that I would like to point out before finishing this report, is the excellent co-operation with Mr. Pavlopoulos. His suggestions and his constant guidance made the realisation of this project possible. So, I would like to thank him for giving me the chance to do it.


TOP

6. References

The ressources that I was based on for this study (articles, books, www-sites etc) are the following:

GUIDE DE CONCEPTION PEDAGOGIQUE ET GRAPHIQUE DE SITES W3 EDUCATIFS
Denyse Gilbert
Spécialiste en applications pédagogiques des technologies de l'information et de communication (APTIC)
Université Laval, Québec, Canada

BRexx Interpreter, W3D server
Vassilis Vlachoudis

Guidelines for Publishing on the Web
Making PDF
CERN

Index of "JS Road Map and Compatibility Guide"
Danny Goodman

"Guide to building Intelligent Websites with Javascript"
Nigel Ford

The Technology of Content Creation
MediaTechnology.com
How to Use HTML Meta Tags


©Vivian Synteta (09/05/2000) updated 15/05/2000
synteta8@etu.unige.ch
Back to Travaux page