R E P O R T
Aspects conceptuels / "KNOW-HOW" of a web page and MOO
I searched and read quite a few sources on the matter before
starting making my own web page. Really helpful were the highlights
during staf11.
Of course, the years spent "surfing" through the web helped also a lot.
So having in mind all of the above, I set out my target field.
- First of all, NO frames. I think that unless there is a good reason
for using them, it is better to avoid them, as experience shows.
(Unfortunately, right now that I'm writing this report, I found out
that a lot of good presented pages on the web have the false
impression of frames with a proper background. This could be the
solution to the dilemma of frames.)
- Simple design.
- Easy navigation through pages.
- Same environment to every page.
- Give informations about the pages.
- User ability to participate via email or via a form.
- For my MOO personality I "surfed" a while through TECFAMOO to see
what other people did, so I ended up with the conclusion that first of all
I should have a description and a mood. I changed my name to Vivian which
is my nickname and that's all.
- For my MOO office I read the TECFAMOO manual that was really helpful
and I used a lot the online help.
TOP
Démarche personnelle / Designing my web site and my MOO office
First of all I decided the theme that my page would deal with. It is a
presentation of myself. Let's say that this is my virtual identity.
So, I chose to conclude the following entities:
- identity card that will be the main page,
- my cv (curriculum vitae),
- my work for STAF (the most important work for me right now),
- a sample of my video album.
Later, I dealt with the design of the pages trying to keep it simple.
- I wanted the main page to be small so as to fit in a regular window of
a browser avoiding scrolling. So I put only my identity card there.
- I used a background that I think represents me as it has mathematical
formulas scratched on (don't forget that I am a mathematician :-)
- As far as it concerns the design, the only fancy thing I did is my logo.
This contains my full name followed with the description of each page. They
both appear to every page I did. I put a shadow to them so as to give
the 3-D impression.
- For the navigation I followed the directory style so in the beginning
of each "sub-page" I created a navigation bar with all the possible ways
in my site including the current page inactivated so as to understand easily
the path that the user is into.
In the end of each "sub-page" and aligned right appears always a link for
the main page. For the pages that are quite long such as "cv" and "travaux"
I put internal links to the top of the same page, where for the cv-page
the user can find the index with the contents so as to choose freely
his navigation.
- Every page has in the end -aligned left- the author's name, date and
email address. Only in the main page email address is accompanied with an
animated gif which is a map area.
- I gave the user two ways of communication with me. One is general,
my email address and the other is more specific in a form that I call
statistics concerning visitors in my site. The data of the latter
goes also in my email address.
- The "travaux" page, I tried to keep it as simple as possible so as to
follow the rules. I put also my logo so as to be equal with the rest
pages and I created a table.
As far as it concerns the sub-pages of this page (like the one you are
just looking at) I changed the background in order every page that
includes a work for STAF to have the same and to distinguish them
from the rest pages of the site.
I also changed the navigation bar in order to include links to main page
and "travaux" page only, plus the title of the current one inactivated.
So, in the end aligned right instead of the link that goes to the main page
I put a link to "travaux" page which is for them the real main page.
These pages also include internal links to the top because they are quite long.
- Video album page has only three video samples. I used the first frame
of each one to make a gif image that gives an idea of the video that plays
if one clicks on it. Here, I also used a table, which includes some conmments.
Video samples are stored in CERN in my husband's directory so as not to
overload TECFA with personal stuff.
- Finally, form page follows the general rules of the site (same
background, same navigaton, email address etc.) If I want to be sincere
I did it also for making a practice on forms. I plan to change it as soon
as I learn more about "cgi" instead of using "mailto" and from the fact whether
visitors in my site leave messages on it or not(!).
- For my MOO office, I decided to use as a parent to it the Ken's generic
classroom (#374) that was proposed and seemed really good for a begginner.
I just removed the teacher's desk and replaced it with a simple desk and
changed a little bit the decoration. I created an exit to Staf EVA room,
putting also a message on this exit. I wrote a few math formulas on the
board. Of course that means that I edit the description of this room
and added all the informaton needed about exits, help and tutorial.
TOP
Aspects techniques / TOOLS
- All my HTML files are writen with emacs in linux environment.
Somewhere in the end, I downloaded also MATHTML for windows where I
tested some of my files just to see how it works. In general, it is
quite complicated in my computer at home, because we have dedicated
the biggest part of our disk to linux recently (which comparing to
windows is far better) but as we have a quite old pc this left only
a small part of disk for windows and other applications. So, I play
between these two environments and sometimes I have to compromise.
As you will realise all my html files have extension .htm. I hope
that now you can understand why...
- I made my logo as follows :
I wrote the text inside Word, I captured it with PaintShopPro and
made a copy so as to obtain the same image in two colours, one of
them in black. I put the attribute of the background of the coloured
text in transparent and I made select and paste over the black text,
but moved a few pixels.
- All links in my html files are relative paths so as to be easily
transfered without needing changes. For the images, when I realised
that weren't too many for each page, I decided to accompany each
directory with all the reffering images.
- For the transfer of my files to TECFA I decided first to keep
the same structure in my computer so as not to be confused. I used
"tar" to include all the files that had to be transfered in one,
including subdirectories so as to move the whole structure at once.
I compressed the tar file with gzip. I tranfered it with FTP and
I made telnet to TECFA to uncompress the file in the appropriate
directory as it was asked.
Later, I extracted the files from tar and all took the right structure.
Of course I had to take some crucial decisions. As some of the files
needed to appear in two different directories I should make copies or links.
So I came up with the decision to put all the files in "espace travaux"
and manage my "espace personelle" with links so as to keep updated easily all
my files without being confused or forget any.
So, every time that page "travaux" is asked the user can see
my "home-tr.html" file. And every time my homepage is asked user can see
my "home.html" file and not "welcome.html" as it is writen. This latter
is being made with I command I wrote inside welcome.html file that makes
a simultaneous internal transfer to home.html file.
Like that, files are easily updated everywhere and by the time that
TECFA would like to delete my "espace personelle" will have all my work
for STAF in track.
- Now, as far as it concerns my photo that appears in the main
page I scanned it as a gif image and the video samples I made them "mpeg"
with a grabber through my video camera. For the videos, I wanted to be seen
when the mouse was over them in the same page, but unfortunately I don't know
java yet...;-)
- For my MOO office and personality I used TkMOO-lite for linux that
seemed really easy to use. But I also connected to the port 7778 in the web
to see how it looks like inside a web browser.
TOP
Back to "Travaux" page
© Vivian Synteta (13/11/98)
synteta8@etu.unige.ch