Website project

By Clarissa Annunziata

What
factors
contribute

to
human

catastrophes?


Contents Page
What factors contribute to human catastrophes?

(Couldn’t manage to do the contest page. Problems with word)

Investigation
Unit Question

What factors contribute to human catastrophes?
What is the problem?

For this project, I have to create a website that evaluated and talks
about the different human catastrophes. In order to do this, I will have
to learn how to create a website and research the different human
catastrophes.
Why is the problem important related to my life?

Creating this website is important to tell the world about these natural
catastrophes that happen everyday around the world. It’s important
for my life because I get to learn about how the world deals with these
problems. Moreover, I will learn how to create a professional website.
Learning how to make a website is important for my future.


Why is the problem important related to the society?
This problem is relevant to the society in many ways. Different society’s
will receive help from creating this website and they will be able to
understand and learn this particular human catastrophe.
1) The school society will be informed on natural causes that occur
around the world.
2) My country will learn how to protect the country in case of a natural
disaster.
I will learn how to create a website and learn how the different natural
causes
and their impact on society.
Why is the problem relevant to the A.O.I’s?

Creating a website on natural causes is relevant to the areas of
interaction, A.O.I’s:
1) Human Ingenuity because we are creating from scratch a website
2) Community and Service because people will access this website
and learn interesting things from it, hence I will help the community by
giving them useful information to learn.
3) Approaches to Learning because we are learning how to create a
website and the different natural causes as a school project.
Moreover, we will learn how to use professional softwares in order to
create a website.
Health and Social because it is related to the community and to
different
societies such as the school one, the business one and the country.
Question that will guide my investigation

1) How can I create this website from scratch?
How can I create an eye-catching and neat website?
3) How can I show the different information’s that I have collected?
4) What do people find interesting?
5) Who will my client be?
6) What are some of the different ways I could present this product?
7) What materials will I use?
8) What makes a good website?
Have I found a relevant human catastrophe to write about?


1

What makes a good website?

After researching on the Internet, I found some tips on how to make a
good website that attracts the attention of the reader. There are 5
main elements that help to form a well presented and professional
website: Color Schemes, Themes, Fonts, Usability and Clear Contact
Information.
The color scheme of your website should be related to the logo colors
and to the aim of the website. The colors have to be well balanced
with the other elements of the website to create a clear message to
the reader. There are three types of color schemes: Analogous, use
colors that are next to each other in the color wheel; Complementary,
use colors that are directly across from each other in the color wheel;
Monochromatic, use different hues of the same color.
A good website has a clear and elegant theme which refers to the
purpose of the site.
Choosing the right font for the website is extremely important because
you have to choose a readable font and a nice one that fits well with
the theme. Usually it is recommended to use simple fonts and not
“funny or strange” ones.
In terms of usability, it is important for the reader to understand hoe to
navigate inside the website. It has to be quick to load so try to put
normal size images and not too many large medias or content to
download.
Finally, to complete the “perfect website” there has to be a clear
contact information so that the reader can contact you very easily.
The contact information is recommended to be in every page so that
the reader doesn’t need to hunt for the email, phone number etc...
2In class, we took a look at some different websites, some were very
bad but some were very professional and eye catching. For example,
we looked at www.supervideo.com and we discussed how confusing
the website is. The first impression of this website is very negative
because there are too many bold colors put together and too many
animations and things that move. Once you scroll down on the
website your eyes hurt because of the electric blue background that is
1
2

http://www.sonicseo.com/good-site-elements/
www.supervideo.com


too bold and confusing. Apart from the appearance, it’s very difficult
to understand what the message of the website is and the purpose of
it.
3Another website that we looked at is www.enhancedlabs.com. This
website is very professional and has a clear goal: to sell a specific
product. The background is professional, since it’s black with some
grey gradients at the bottom. You can search different things inside
the website such as: Work, The Lab, Services and Contact.
4In addition, I found out that the most used color in websites is blue. As
the website http://webdesignledger.com/inspiration/55-beautifullyblue-web-designs-to-inspire-you says, “Blue is a color that represents
the oceans and sky. It’s also a great choice in web design, even if you
use it only in a couple elements or for the whole page. You can use a
gradient of different shades of blue, a blue textured background, blue
typography, or blue icons. There are tons of cool combinations you
can do to give your website a stylish touch. For me, blue recalls
freedom, freshness, elegance and style.”.
Questionnaire on What Makes a Good Website

Interview to Filippo Annunziata:
What makes a good website? A website is good when it’s simple and
where you can easily share things and connect it to other websites. For
example where you can share it on Facebook, Twitter and Google+.
What do you look in a website? In a website, I look at the products that
it’s offering. I look if the information is easy to understand and if it’s
reliable.
Do you use the internet often? Yes, very much and I also look at many
different websites daily.
Do you often encounter bad designed websites? Sometimes, when I
find confusing websites that are too difficult to even appreciate.
What colors do you think are professional for a website? Personally, I
think that normal colors are the most professional, such as beige, grey,
black, white, pastel colors. For example, the most famous websites all
have blue, grey or white background.
3
4

www.enhancedlabs.com
http://webdesignledger.com/inspiration/55-beautifully-blue-web-designs-to-inspire-you


Do bold colors distract the reader? Yes, I think that if you have colorful
backgrounds and titles, they may distract the reader.
Have you ever wanted to buy a product but refused because the
website was too complicated to understand? Yes, sometimes even if
the website seems too complicated to understand it automatically
seems not reliable to buy products from it.

Design
Design Brief

I need to create a website to inform the community on the human
catastrophes.
In order to do this, I will use a special program called “Dreamweaver”
and I will have to research how to create. I will have to create it for a
younger public, so the information needs to be simple and the
presentation needs to be neat and colorful.
The questions that I’ve created will help me when I am creating the
final website.
I will have to create a plan for my website, with clear things that will be
part of my final product (color of background, relevant
information’s…).
Design Specification

Limits
Must not contain too many animations
Must not contain only images
Must not be boring to watch
The background must not have boring
colors (white, black, grey)
Demands
Must have lots of information
Must have lots of pictures
Must be colorful
Must be eye-catching and nice to watch
Must be professional
Wishes
Good quality pictures


Nice colors that go well together
Good presentation
No errors
Try to aim it to a younger public.
Function: The function of my website, what will it be about, talk about
etc.
Appearance: How my website will look
Content: What kind of information will I put in my website, how do I put
them in different paragraphs.
Materials: What materials will I use? e.g. Animations
Size: The sizes of the information, the title and the images.
Limits
Function

Appearance Content

Materials

Size

Must not talk Not too many Must not be Not
many No
sizes
about lots of colors
too
animations below 10
catastrophes
complicated
to
understand
Must
not The
Must not be Not a strange No
small
contain only background all together logo
images
images
mustn’t have
too
many
colors
Must not be No image as The
No publicity No title size
boring
to background paragraphs
below 20
watch
must
not
have
different sizes
and colors
No
strange
Not too many
fonts
images


Function

Materials

Must
not
have
more
than
one
logo
No confusing
colors
Not
too
professional

Demands
Function

Appearance Content

Not a normal
title

Appearance Content

Materials

Size

Good quality
pictures

Size

Must not talk Must have a The
Must
have The logo must
about
only nice logo
information animations be
bigger
one natural
must
be
than 25
cause
divided into
sections
Must
be Must
The
Must have an The size of
aimed at a entertain the information appropriate the
young
public
needs to be logo
information
audience
relevant
to
must be <18
the matter
Must be eye- Must
have The
Must contain Medium size
catching
colorful titles paragraphs clear titles
images
need to have
images and
headings


Function

Appearance Content

Materials

Size

Materials

Size

Must
have Must have a Must be easy
relevant
nice
to
sources
background understand
Good
Must
have No errors
presentation lots of images
that fit well
together
Must have a Must have a
nice
and home-page
clear URL
Must
have
datas, graphs
to show the
information

Wishes
Function

Appearance Content

Aim it to a Choose
The
Sensible
young
colors that fit information is animations
audience
well together easy
to
understand
Interesting
Nice
Information Good quality
website
animations that
keeps pictures
the
reader
interested


Function

Appearance Content

Materials

Size

Create
a Eye-catching
website that logo
seems
very
professional
Appropriate
background
Readable
font
Test plan

I will interview some people that often use websites and the internet. I
will try to answer the demands, wishes and limits that I previously wrote
and create a questionnaire for these people. I will try and interview
some people to get a clear point of what makes a good website and
what people like about websites. I will try and create the questionnaire
by using my previous research on how to make a good website. This
questionnaire will be answered after, and it will be useful when I will do
the final evaluation of the whole website.
Interview to Filippo Annunziata

Questions
Does the website talk
about
a
specific
catastrophe?
Are there lots of
images?
Is it boring to watch?
Are there many colors
that don’t fit well
together?
Is
the
background
confusing?
Is the font clear?

Answers

Improvements


Questions
Is there a logo?
Is it professional?
Is it complicated to
understand?
Are the topics divided
into
different
headings?
Are there lots of
animations?
Is
there
lots
of
publicity?
Is the title clear?
Is the size of the text
below 10?
Are the images too
small?
Is the size of the title
below 20?
Is
the
website
presented in a good
way?
Is the website aimed to
a young audience?
Is is eye-catching?
Are
there
any
grammatical errors?
Is the logo big and
clear?
Are the pictures good
quality?

Answers

Improvements


Interview to Elena Mazzilli

Questions
about
a
specific
catastrophe?
Are there lots of
images?
together?
Is
the
background
confusing?
Is the font clear?
Is there a logo?
Is it professional?
understand?
into
different
headings?
Are there lots of
animations?
Is
there
lots
of
publicity?
Is the title clear?
below 10?
Are the images too
small?
below 20?

Answers

Improvements


Questions

Answers

Improvements

Is
the
website
presented in a good
way?
a young audience?
Is is eye-catching?
Are
there
any
grammatical errors?
Is the logo big and
clear?
quality?
Interview to Costanza Annunziata

Questions
about
a
specific
catastrophe?
Are there lots of
images?
together?
Is
the
background
confusing?
Is the font clear?
Is there a logo?
Is it professional?
understand?

Answers

Improvements


Questions

Answers

Improvements

Answers

Improvements

into
different
headings?
Are there lots of
animations?
Is
there
lots
of
publicity?
Is the title clear?
below 10?
Are the images too
small?
below 20?
Is
the
website
presented in a good
way?
a young audience?
Is is eye-catching?
Are
there
any
grammatical errors?
Is the logo big and
clear?
quality?
Interview to Carolina Rosati

Questions
about
a
specific
catastrophe?
Are there lots of
images?


Questions
together?
Is
the
background
confusing?
Is the font clear?
Is there a logo?
Is it professional?
understand?
into
different
headings?
Are there lots of
animations?
Is
there
lots
of
publicity?
Is the title clear?
below 10?
Are the images too
small?
below 20?
Is
the
website
presented in a good
way?
a young audience?
Is is eye-catching?
Are
there
any
grammatical errors?

Answers

Improvements


Questions

Answers

Improvements

Is the logo big and
clear?
quality?
5

Answering my questions

In the first few lessons of the new project, I had to create different
types of questions to research that will help me eventually to create
my final piece: the website.
These are the questions that I previously created:
1)How can I create this website from scratch?
67I will use the software called dreamweaver. Dreamweaver is part of
“Adobe Systems” and it’s a web development application, an HTML
editor. The positive thing about this program is that it can be used by
everyone: professional and even students.
How can I create an eye-catching and neat website?
I will use my research on how to make a good website and try and be
creative but professional. Moreover, I will interview some people that
often surf the internet and ask them what makes a good website
Research On What Makes a Good Website
After researching on the Internet, I found some tips on how to make a
good website that attracts the attention of the reader. There are 5
main elements that help to form a well presented and professional
website: Color Schemes, Themes, Fonts, Usability and Clear Contact
Information.
The color scheme of your website should be related to the logo colors
and to the aim of the website. The colors have to be well balanced
with the other elements of the website to create a clear message to
the reader. There are three types of color schemes: Analogous, use
colors that are next to each other in the color wheel; Complementary,
www.apple.com www.yahoo.com http://www.sonicseo.com/good-site-elements/
http://en.wikipedia.org/wiki/Adobe_Dreamweaver
7 http://www.ntchosting.com/web-design/dreamweaver.html
5
6


use colors that are directly across from each other in the color wheel;
Monochromatic, use different hues of the same color.
A good website has a clear and elegant theme which refers to the
purpose of the site.
Choosing the right font for the website is extremely important because
you have to choose a readable font and a nice one that fits well with
the theme. Usually it is recommended to use simple fonts and not
“funny or strange” ones.
In terms of usability, it is important for the reader to understand hoe to
navigate inside the website. It has to be quick to load so try to put
normal size images and not too many large medias or content to
download.
Finally, to complete the “perfect website” there has to be a clear
contact information so that the reader can contact you very easily.
The contact information is recommended to be in every page so that
the reader doesn’t need to hunt for the email, phone number etc..
After researching on the internet on how to make a good website, I
found out useful tips to make a professional and attracting website.
Moreover, after looking at some websites, such as www.apple.com
and www.yahoo.com, I found out that it’s nice to show the information
on different pages. It is recommended to do a home page where it is
clear what is the website about and then some “links” to different
pages of the same website.
For example the “Apple” website has the main page with their newest
products and on top you can then look at more limited products
(iPhone’s, iPod’s, iPad’s, iMac’s). I think that the first impression of the
website from the reader is extremely important. It needs to be quick to
load, professional and easy to understand. Inside the website, I will try
and create some clear animations. In addition, I decided to create
the website for a young public. Finally, I will write about a human
catastrophe that has had a great impact on the different societies.How can I show the different information’s that I have collected?
I have decided to do a main page for the website where, through
different headings, you can search different topics of the human
catastrophe that I decided to research.


I will try and learn how to do this using dreamweaver and youtube
tutorials.
Who will my client be?
The website is directed to a young audience, the same people of my
age. So, the research is extended in more depth but I will try to make it
simple so that people can easily understand it.
5) What materials will I use?
I have decided to use lots of animations to show the human
catastrophe and create a presentation to put inside the website.
Moreover, me and my partner could create a youtube video in which
there are all the main facts about this human catastrophe.
6)Have I found a relevant human catastrophe to write about?
Me and my partner have decided to research and write about the
airplane crash in Linate airport in Milan.
Me and my partner have decided to research this accident because
we find it interesting and we are eager to learn more about this human
catastrophe. Moreover, the dad of my partner has taken part in
examining the after-math of the accident, as he is a doctor
specialized in examining crimes and accidents; so, we decided to
interview him for research.
8Airplane

Crash- Linate 8th October 2001
On the 8th of October 2001, at the Linate Airport in Milan, Italy, during
takeoff hit another plane and crashed. 114 people that were on that
plane died. There were two planes: the 9Cessna Citation CJ2, which
was a little plane who was heading in a path to takeoff; and the Mc
Donnell Douglas MD-87 was a plane headed to Copenhagen.
As wikipedia says, “ The accident occurred less than a month after the
11 September 2001 attacks and the day after the U.S. invasion of
Afghanistan began, but SAS was quick to rule out a terrorist attack as
the cause. This was subsequently confirmed by the investigations that
followed”.

8
9

http://www.youtube.com/watch?v=T3dbioB23Kc
www.wikipedia.com


So, the cause of this accident are not very clear but, 4 people were
found guilty of some action during this accident and the airport
director and the air-traffic controller were both sentenced to 8 years of
prison.
Me and my partner have collected many evidences of the disaster:
photos, graphs, tables, presentation, thanks to the father of my
partner.
This is the DNA identification table they used for the bodies:

31/10/2001
DNA PROFILING IN THE IDENTIFICATION OF THE REMAINS OF
XXXXXXXX XXXXXXXXXX

Investigation
type:

Sample from:
Reference #:

DNA profiling aimed at the identification of the
remains of Xxxxxxxxx Xxxxxxxxxx.
Linate air crash (8th October, 2001)
12752

Type of material
Deep muscle
investigated:

Methods:

Organic DNA extraction; PCR: AmpFlSTRSGM Plus kit
(Applied Biosystems); electrophoresis: ABI 373A (24 cm
plates); Genescan 3.1; Genotyper 2.0.


Results of the DNA profile:
Sample D3S1
D16S D2S1 AME D8S1 D21S D18S D19S
vWA
TH01 FGA
Info
358
539 338 L
179 11
51
433
12752
21.
Karlsson 18
15 17 13
20 24 X Y 13 14 29 30 13 18 13 14 6 7 20
2
Bert

11901 (Yyyyy Yyyyyyyy - Son - air crash victim,
DNA
profile identified by DNA analysis comparison with mother’s
compared with: profile).
Results of the
Likelyhood of paternity for Xxxxxx Xxxxxxx (Yyyyyy
DNA
Yyyyyyy vs. unrelated) = 382027,1.
identification
Paternity practically proven.
procedure:
Remaining
sample(s):

To be sent to:
Comments:
Enclosures:

11901 (muscle and extracted DNA): stored at –20°C.

None
Informed consent form to saliva sampling Zzzzz Zzzzzzz
- daughter), not tested.

Dr. Andrea Piccinini
Prof. Marco Grandi
Forensic Geneticist MD, PhD
Head
of
identification team
Istituto di Medicina Legale dell’Università di Milano
Via L. Mangiagalli, 37
20133 Milano, Italy

the


7) What software will I use?
To create my website, I will use a program called “dreamweaver” and
it’s a software that creates websites.
8) What skills will I have to learn to use the software?
In order to learn how to use this software, I will ask help from my
teacher and I will try and investigate on my one. In addition, if I
struggle in creating the website I can always research tutorial videos
on youtube.
For example: http://www.youtube.com/watch?v=Q6rRLw5ggOg
Evaluating your Investigation
Is there anything you struggled with in this section?
When I had to create my table of demands, wishes and limits, It was
hard to choose different things that I wanted inside the website such
as: the content, the appearance, the materials etc... After having


thought of what I wanted my website to look like and after helping
myself with the research on “What makes a good website”, I finally was
capable to complete the table.
Is there anything which you could have added more detail to?
I could’ve added more detail to my research, answering the questions
in more depth.
Is there anything which you missed out?
No, I did everything
How did you perform in writing the Design Brief and Specification?
I started thinking what my website had to include and, after
researching different websites I managed to create my design brief
and design specification
Are the testing ideas sufficient?
For the investigation area, I created a table which then a person had
to complete. In the table there is written some demands, limits and
wishes that I wan in my website. I think that next time I could’ve
created more varied testing plans like: interviews, questionnaires,
tables, videos...
Did you do enough research?
Me and my partner, have many information on our human
catastrophe because the father of my partner was working in the
after-math of the accident. So, we have lots of photos, presentations,
graphs.
Did you use at least 4 different sources?
Yes, I used the Internet, me and my partner interviewed her father, we
used even some YouTube videos and a presentation.
How could you improve your performance for the next project?
Next time, I could concentrate more on finding the right sources and
next time I have to write more on the research and investigate more


on how to make a good website, which programs to use and which
materials to include.
Bibliography- Investigation
http://www.sonicseo.com/good-site-elements/
www.supervideo.com
www.enhancedlabs.com
http://webdesignledger.com/inspiration/55-beautifully-blue-webdesigns-to-inspire-you
www.apple.com www.yahoo.com http://www.sonicseo.com/goodsite-elements/
http://en.wikipedia.org/wiki/Adobe_Dreamweaver
http://www.ntchosting.com/web-design/dreamweaver.html
http://www.youtube.com/watch?v=T3dbioB23Kc
www.wikipedia.com


Design

Website n#1

For this website, I have created a “mind map” to show all the different
pages of my
website.
It’s useful to do
this so that,
when
I
will
create
the
website
on
dreamweaver,
I know all the
different pages
and in what
order they go.
I
have
a
specific order here: first there is a picture gallery where I will show all
the different pictures of the accident. Then, there is a page on contact
us and about us where they is written the email, fax number and where
we got all the information for this project. Then there is a page called
“The Accident”, which is divided into 3 different headings, “What
Happened”, “Aftermath” and “10 Years Later”. For the final page of
the website, I have chosen to put a page where you can share the
website on Facebook, Twitter and Google+.


This is my home page of the website. I have chosen to do all of the
website with a bright blue
background, as blue is a
relaxing color and different
tones of blue for the borders.
The borders of the website are
filled
with
“LINATE
2001”,
because it’s the accident that
me and my partner chose to
research. Right below the title,
there is a picture gallery where,
if you put your mouse on top of
the arrows, it automatically
turns, showing different pictures.
Then, there are 4 boxes, in one
there is “About Us”, in another
one there is “Contact Us”, in
another one there is the share
bottom and in the last boxes
there are the heading’s title of the different topics of the accident.

In these 4 pages, there are all the different pages inside my website. In
all of them, the borders are decorated with “LINATE 2001”.


Test Plan


Website #1

Yes or No

Improvements

Do you like the layout Yes
of the website?

Could make it more
professional
by
making it more neat.

Do you think that it’s Yes
confusing?

Same as above

Is it professional?

Too many borders
along
the
sides,
remove some

No

Do you like the color Yes, it a very relaxing
blue?
color
Is it organized?

Kind of

Is
the
information No
organized well into
the
different
headings?

Make it more neat
Everything
is
squashed onto one
page, make more
pages
for
every
heading.

Do you think it’s useful Yes
having
a
share
bottom?
Would you change Yes
something?

Remove
borders,
make it more neat

Do you like the No
borders
of
the
webpage,
“LINATE
2001”

Same as above

Do you think that is a No
good website?

More professional


Website #1

Yes or No

Improvements

Would you want to Immediately go away
stay on the website or
immediately
go
away?

Website #2

This is the “mind map” for my second website plan. Here I have 4
different pages and, unlike the other one, I have added a “Thoughts”
page where people can write reviews and share it everywhere.
This is my home page for this website. I particularly like the big title and,
the color wheel for this website is: beige, dark grey, and grey, this way
it’s more professional than the other one.


These are my four pages of the website. I love the third page because
it’s a bit more creative, because instead of having text-boxes, I have
put the shape of a cloud.


Test Plan
Website #2

Yes or No

Improvements

Do you like the layout Yes
of the website?
Do you think that it’s A bit
confusing?
Is it professional?

More neat

Kind of

Do you like the color Yes
blue?
Is it organized?

No

More
organization,
especially
on
the
home page

Is
the
information Yes
organized well into
the
different
headings?
Do you think it’s useful Yes
having
a
share
bottom?
Would you change Maybe
something?
Do you like the There are no borders
borders
of
the
webpage,
“LINATE
2001”
Do you think that is a Yes or No
good website?

Make it more neat,
leave gaps and not
too squashed in.


Website #2

Yes or No

Would you want to Stay
stay on the website or
immediately
go
away?

Website #3

Improvements


This desgin meets nearly all of the desgin specifications. The only thing
that is missing are the animations. It is quite a good plan because i
have made one design for the home page and then for all the other
pages and links on the home page. I have also made a navigation
plan so it is clear where all the links take to. I have also clearly labelled
on the home page what the colour of the font is going to be, the
colour of the boxes ecc. I really like this design because it is very easy
to navigate. It also looks quite good in the whole because it is simple
and elegant at the same time.
TEST PLAN
Question
Answer
Does my website talk only about Yes
one catastrophe?
Does it contain enough images? Yes
Should there be more animations? Yes, there should be at least 2
Does the background conflict with No, it looks good
the text?
Are the borders of the tables No, there are no tables
showing?
Does it contain only one logo?
Yes
Do the colours interfere?
No, they look good together


Is the background interesting?

It is a plain colour but fits the
website
Is the font too big/small?
It is an appropriate font
Does it contain at least one video? Yes, more than one
Is there enough text and info on Yes
the page?
Does it have a continuous house Yes
style?
Is the title big enough?
Yes
Is there enough text?
Yes, there is a lot of information
Does the animation distract you No, there are no animations
from the text?
Are
the
links
evident
and Yes
underlined?
Are there evident subheadings?
Yes
Are there enough videos?
Yes


Website #4


TEST PLAN
Question
Answer
one catastrophe?
Should there be more animations? Yes, there are none
Does the background conflict with No
the text?
Are the borders of the tables No
showing?
Yes, only one
No, they look good together
It is a plain colour
It is the right size
Does it contain at least one video? Yes, more than one
the page?
Does it have a continuous house Yes
style?
Yes
Yes
Does the animation distract you No. because there aren’t any
from the text?
Are
the
links
evident
and No
underlined?
Yes
Yes

Also this design meets most of the design specifications, even though
also this design doesn’t have any animation. I really like this design
because I think that the home page is quite original and good looking.
Even though it could be difficult to make an automatic photo gallery.
And also something else that I could have difficulty with will be the bar
with all the pages which comes down when you go over it with the


mouse. Something that I didn’t do well in designing this website was
that I could have added more detail in the labels. I included only
briefly what the colours, fonts and sizes will be.
After evaluating every design against the design specification and
creating a test plan to answer, me and my partner have chosen to
create as our final website the fourth website as it is professional and it
is very original. We have also decided to choose this one because it
meets all our desired expectations and I think that it will be nice to see
it as a real website. Moreover, we liked this website because it has an
animation on the picture gallery in which when you move the cursors
on top of it, the pictures slowly move without clicking anything. We
also liked how all the pages were divided into different sections and
we plan to create on the homepage lots of “buttons” and “links” that
immediately lead to all the different pages of the website.
This designs stage was done in a very organized matter because we
divided the designs in two, the first two were made by me and
evaluated by me and the last two were done and evaluated by my
partner. We worked really hard to decide which design to choose as
our final but, after evaluating all of the against the design
specification, we managed to choose the last design


Plan
Gantt Chart


This Gantt chart shows how I will divide my time when I start doing my
final website, along with the time that took me to create the designs.
This will help to figure out whether I have enough time for everything
and how long the create and evaluate stage will take.

Step-by-step plan

Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task

27/02/2013
16:30 - 16:32
Create a new web page on dreamweaver and save it
as "website"
PC, dreamweaver
27/02/2013
16:32 - 16:35
Create a title on wordart and copy it on the website
PC, word, dreamweaver
27/02/2013
16:35 - 16:40
Create the layout of the first page
PC, dreamweaver
27/02/2013
16:40 - 16:45
Create the various text boxes
PC, dreamweaver
27/02/2013
16:50 - 16:55
Insert the information
PC, dreamweaver
27/02/2013
17:00 - 17:05
Add the colours


Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time
Task
Resources
needed
Date
Time

PC, dreamweaver
27/02/2013
17:10 - 17:15
Change the sizesand fonts of the info depending on
what is written on the plan
PC, dreamweaver
27/02/2013
17:20 - 17:25
Insert the pictures and move them to the appropriate
spaces
PC, dreamweaver
27/02/2013
17:30 - 18:00
Repeat the same process with page 2
PC, dreamweaver
28/02/2013
16:30 - 17:00
PC, dreamweaver
28/02/2013
17:00 - 17:30
PC, dreamweaver
28/02/2013
17:30 - 18:00
PC, dreamweaver
29/02/2013
16:30 - 17:00


Task
Resources
needed
Date
Time
Task
Resources
needed

PC, dreamweaver
29/02/2013
17:00 - 17:30
PC, dreamweaver

This step-by-step plan will help me when I will create my final website.
With the help of this plan, I will know exactly what I have to do, the
resources I have to use, when and how much time it will take me to it
and how many lessons and homework I will take to create the whole
final design. With my partner, thanks to this step-by-step plan, we will
know how to divide the work equally. This is also useful to know what to
do every day because sometimes maybe I forget what to do and I just
have to look at the step-by-step plan. Thanks to this plan and along
with the Gantt Chart, I know exactly how I am going to start and
progressively develop my final website.


Create
Process Journal

25/02/13
For our first lesson in creating the final website, me and my partner
started creating the home page using dreamweaver. The first thing we
did is divide the page into sections and write in the title. However, we
wanted the title bigger and we are still figuring out how to make it
bigger because apparently this is the maximum size.


26/02/13

Here, we created the buttons for the homepage using Macromedia
Fireworks.
We started by deciding the size and we did 200x75 cm. We chose an
appropriate background and we wrote inside the different heading
that we wanted.
We did five buttons: One for “About Us”, “Contact Us”, “Home
Button”, “Photos and Videos” and “The Accident”.

After we inserted all of the buttons in the first row and adjusted the size
of it so that everything fitted equally.


Before changing the background and the font of the title, we had a
problem because we tried to insert a banner that we created on a
website, however when we tried to paste it in the html bar,
Dreamweaver didn’t recognize the banner and it messed all of the
tables. We had to start all over again the website but we didn’t take
very long because we only created the buttons.


Here we didn’t like the grey background so we changed it with some
clouds. We had some difficulties in making the whole document and
tables transparent but then we found a way to do it.

We also didn’t like the buttons because they weren’t very professional
so we had an idea: we liked the color of the apples’ website buttons
so we pasted it to paint and removed their writing.


Then we pasted it on firework and added on top our writing of our
buttons

Here we inserted all of the buttons in our home page and I really like
the new design as it is more professional and seems like a real website.

Under the buttons we then wrote a brief summary of the event and on
the right we changed it from “About Us” to “Photo Gallery” because it
looks better with some pictures near it so the reader is caught
immediately on the catastrophe.
We added two pictures on the right and I think that it looks really good
put all together.


We then had to create all of the other pages and it was very simple
because we took our home page, saved another copy and from that
we changed the text but the layout was always the same. We
changed the font to Century Gothic and the size was +5 and then
saved it.

This was our page where we talked about the accident itself, and we
changed the color of the text to black because it is easier to read.


This was our page with pictures and a video, to put the pictures in
order, we opened the whole document on word and pasted from
there the pictures. Then we wanted to add a video on the accident
and we struggled a bit because we didn’t know how to do it. We
learnt that on youtube where you can share it different social
networks, you can also get the html code so, we pasted that in the
html bar and it worked.
For every page we had to link all of the buttons together with the
homepage and to do it we just had to click the right button on the
mouse, select the option “make link” and then choose the different
pages for every button.
Finally, we managed to finish our whole website and everything
fortunately worked well. The buttons were linked perfectly, the text was
clear to read, the pictures and videos were well positioned and
everything seems professional and like a real website.

Evaluation
Testing the product


Once me and my partner finished the website, I decided to evaluate it
in a critical way. I created a test plan which some people would
answer. This way, I can fully evaluate it not only by my personal opinion
but from other points of view.
Here is the test plan:
TEST PLAN

Question
Answer
one catastrophe?
Should there be more animations? Yes, there are none
Does the background conflict with No
the text?
Are the borders of the tables No
showing?
Yes, only one
No, they look good together and
in a very professional way
Yes I love the background
because it fits with the theme of
the catastrophe as there are lots
of clouds.
It is the right size
Does it contain at least one video? Yes, it is a very interesting video on
a memorial on the catastrophe
the page?
Yes
Yes, it is enough if not it gets boring
Does the animation distract you No. because there aren’t any
from the text?
Are
the
links
evident
and Yes there are the buttons under
underlined?
the title and they are clearly
presented



Yes
Yes

Survey on a number of people

Is
it Is
it Is it clear to Does the website
professional? interesting? understand? work?
(buttons,
links, videos)
10 people IIII II
from age
10-15

IIII I

IIII IIII

IIII IIII

10 people IIII III
from age
16-20

II

IIII IIII

IIII IIII

10 people IIII
from age
21-30

III

IIII

IIII IIII

10 people IIII
from age
31-40

IIII

IIII

IIII IIII

10 people II
from age
41-50

III

IIII

IIII IIII

10 people III
from age
51-60

IIII

IIII

IIII IIII

After doing this survey, I found out that the website was successful. It is
clear to read, everything works such as the integrated video, the
buttons and the hyperlinks and some people even think it’s
professional.
After finishing the whole project, I think that in every little step of the
design cycle, everything went well.
Let’s go back to the very start and evaluate that.


For the investigate section, I researched everything I needed in order
to do my website. I started off by researching the human catastrophe
that I had to do then I also prepared myself by watching some videos
on www.youtube.com on how to use the program DreamWeaver, so
that I was prepared when I had to create the website.
For the design section, I created half of the designs and they were very
organised and most importantly they were labelled with font, sizes,
colour and images. Here I created a questionnaire so I knew which
design to choose from all four of them.
For the plan section, I had to create a Gantt Chart so I knew how long
it would take me to complete the whole website and personally, I
didn’t quite follow the gantt chart and this can be a factor to improve
on for the next project.
For the create stage, this was the most important section and, since
we were working in two’s we could share ideas and help each other.
We had some difficulties whilst doing it and we also had to start over
again, however, the final website came out looking very well. Thanks
to the process journal, it was easy seeing the things that went wrong
and that could’ve been improved. For example, I could’ve improved
on the written part because it is a bit confusing.
This website was made for a young group age and, by looking at the
survey, we can understand that we hit the target right. For a older
audience, the information written is too simple but for our age group it
is a very professional website because there are lots of information, the
layout is very nice and it is really simple to understand this human
catastrophe.
The main Area of Interactions were Human Ingenuity, Community and
Service and Approaches to Learning. I think that my website is relevant
and useful to all three A.O.I’s because I created something from
scratch, I learnt how to create the website using dreamweaver and I
helped the community if someone needs to research the catastrophe.
How organized was I?
During the whole project, I think that I was very organized. Since the
beginning, I always followed the class work and met all deadlines.
Throughout the whole process, I evaluated everything and I continued


relying on the blog www.g10technology.blogspot.com, which helped
me a lot when I was absent from school and when I didn’t finish the
work in school.
Did I meet all deadlines?
Yes, I always met the deadlines and I think this is because I was very
organized during the project.
How well did I work as a team, with my group?
I think that me and my partner worked really well because we both
shared ideas and both helped in many ways. I think that my partner
helped me a lot because there were some times where I was absent
and, nevertheless, she continued working on the website.
How fast did I work?
At first, me and my partner, were nearly the only ones who didn’t do as
many pages as we should’ve done. However, in only a week, we
managed to catch up and finish in time. Overall, I think that we
worked fast.
How much effort did I put in?
I put in lot of effort and I think that you can see it in the process journal
because we changed many times the title, the background and other
features so that the website would seem as professional as we can.
How could I improve in all of these areas to do even better next time?
Next time I think that I should work even more fast and to evaluate
every stage of the design cycle in more dept.

Website project

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (9)

Similar to Website project

Similar to Website project (20)

More from ISM

More from ISM (20)

Recently uploaded

Recently uploaded (20)

Website project