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?


1What 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 http://www.sonicseo.com/good-site-elements/ 2 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-beautifully-blue-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 www.enhancedlabs.com 4 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 about lots of catastrophes

Not too many colors

Must not be too complicated to understand

Not many animations

No sizes below 10

Must not contain only images

The background mustn’t have too many colors

Must not be all together

Not a strange logo

No small images

Must not be boring to watch

No image as background

The paragraphs must not have different sizes and colors

No publicity No title size below 20

No strange fonts

Not too many images


Function Appearance Content Materials Size

Must not have more than one logo

Not a normal title

No confusing colors

Good quality pictures

Not too professional

Demands Function Appearance Content Materials Size

Must not talk about only one natural cause

Must have a nice logo

The information must be divided into sections

Must have animations

The logo must be bigger than 25

Must be aimed at a young audience

Must entertain the public

The information needs to be relevant to the matter

Must have an appropriate logo

The size of the information must be <18

Must be eye-catching

Must have colorful titles

The paragraphs need to have images and headings

Must contain clear titles

Medium size images



Must have relevant sources

Must have a nice background

Must be easy to understand

Good presentation

Must have lots of images that fit well together

No errors

Must have a nice and clear URL

Must have a home-page

Must have datas, graphs to show the information

Wishes Function Appearance Content Materials Size

Aim it to a young audience

Choose colors that fit well together

The information is easy to understand

Sensible animations

Interesting website

Nice animations

Information that keeps the reader interested

Good quality pictures



Create a website that seems very professional

Eye-catching logo

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 Answers Improvements

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?


Questions Answers Improvements

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?


Interview to Elena Mazzilli Questions Answers Improvements






Is the font clear?

Is there a logo?

Is it professional?





Is the title clear?








Is is eye-catching?




Interview to Costanza Annunziata Questions Answers Improvements






Is the font clear?

Is there a logo?

Is it professional?







Is the title clear?






Is is eye-catching?




Interview to Carolina Rosati Questions Answers Improvements








Is the font clear?

Is there a logo?

Is it professional?





Is the title clear?






Is is eye-catching?






5Answering 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,

5 www.apple.com www.yahoo.com http://www.sonicseo.com/good-site-elements/ 6 http://en.wikipedia.org/wiki/Adobe_Dreamweaver 7 http://www.ntchosting.com/web-design/dreamweaver.html


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 http://www.youtube.com/watch?v=T3dbioB23Kc 9 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:

DNA profiling aimed at the identification of the remains of Xxxxxxxxx Xxxxxxxxxx.

Sample from:

Linate air crash (8th October, 2001)

Reference #: 12752

Type of material investigated:

Deep muscle

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 Info

D3S1358

vWA D16S539

D2S1338

AMEL

D8S1179

D21S11

D18S51

D19S433

TH01 FGA

12752 Karlsson Bert

18 15 17 13 20 24 X Y 13 14 29 30 13 18 13 14 6 7 20 21.2

DNA profile compared with:

11901 (Yyyyy Yyyyyyyy - Son - air crash victim, identified by DNA analysis comparison with mother’s profile).

Results of the DNA identification procedure:

Likelyhood of paternity for Xxxxxx Xxxxxxx (Yyyyyy Yyyyyyy vs. unrelated) = 382027,1. Paternity practically proven.

Remaining sample(s):

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

To be sent to: Comments: None

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

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


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-web-designs-to-inspire-you www.apple.com www.yahoo.com http://www.sonicseo.com/good-site-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 of the website?

Yes Could make it more professional by making it more neat.

Do you think that it’s confusing?

Yes Same as above

Is it professional? No Too many borders along the sides, remove some

Do you like the color blue?

Yes, it a very relaxing color

Is it organized? Kind of Make it more neat

Is the information organized well into the different headings?

No Everything is squashed onto one page, make more pages for every heading.

Do you think it’s useful having a share bottom?

Yes

Would you change something?

Yes Remove borders, make it more neat

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

No Same as above

Do you think that is a good website?

No More professional



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

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


Do you like the layout of the website?

Yes

Do you think that it’s confusing?

A bit More neat

Is it professional? Kind of

Do you like the color blue?

Yes

Is it organized? No More organization, especially on the home page

Is the information organized well into the different headings?

Yes

Do you think it’s useful having a share bottom?

Yes

Would you change something?

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

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

There are no borders

Do you think that is a good website?

Yes or No



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

Stay

Website #3



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 one catastrophe?

Yes

Does it contain enough images? Yes Should there be more animations? Yes, there should be at least 2 Does the background conflict with the text?

No, it looks good

Are the borders of the tables showing?

No, there are no tables

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 the page?

Yes

Does it have a continuous house style?

Yes

Is the title big enough? Yes Is there enough text? Yes, there is a lot of information Does the animation distract you from the text?

No, there are no animations

Are the links evident and underlined?

Yes

Are there evident subheadings? Yes Are there enough videos? Yes


Website #4



TEST PLAN Question Answer Does my website talk only about one catastrophe?

Yes

Does it contain enough images? Yes Should there be more animations? Yes, there are none Does the background conflict with the text?

No


No

Does it contain only one logo? Yes, only one Do the colours interfere? No, they look good together Is the background interesting? It is a plain colour Is the font too big/small? It is the right size Does it contain at least one video? Yes, more than one Is there enough text and info on the page?

Yes

Does it have a continuous house style?

Yes

Is the title big enough? Yes Is there enough text? Yes Does the animation distract you from the text?

No. because there aren’t any


No

Are there evident subheadings? Yes Are there enough videos? 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 27/02/2013 Time 16:30 - 16:32

Task Create a new web page on dreamweaver and save it as "website"

Resources needed PC, dreamweaver Date 27/02/2013 Time 16:32 - 16:35 Task Create a title on wordart and copy it on the website Resources needed PC, word, dreamweaver Date 27/02/2013 Time 16:35 - 16:40 Task Create the layout of the first page Resources needed PC, dreamweaver Date 27/02/2013 Time 16:40 - 16:45 Task Create the various text boxes Resources needed PC, dreamweaver Date 27/02/2013 Time 16:50 - 16:55 Task Insert the information Resources needed PC, dreamweaver Date 27/02/2013 Time 17:00 - 17:05 Task Add the colours


Resources needed PC, dreamweaver Date 27/02/2013 Time 17:10 - 17:15

Task Change the sizesand fonts of the info depending on what is written on the plan

Resources needed PC, dreamweaver Date 27/02/2013 Time 17:20 - 17:25

Task Insert the pictures and move them to the appropriate spaces

Resources needed PC, dreamweaver Date 27/02/2013 Time 17:30 - 18:00 Task Repeat the same process with page 2 Resources needed PC, dreamweaver Date 28/02/2013 Time 16:30 - 17:00 Task Repeat the same process with page 3 Resources needed PC, dreamweaver Date 28/02/2013 Time 17:00 - 17:30 Task Repeat the same process with page 4 Resources needed PC, dreamweaver Date 28/02/2013 Time 17:30 - 18:00 Task Repeat the same process with page 5 Resources needed PC, dreamweaver Date 29/02/2013 Time 16:30 - 17:00


Task Repeat the same process with page 6 Resources needed PC, dreamweaver Date 29/02/2013 Time 17:00 - 17:30 Task Repeat the same process with page 7 Resources needed 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 Does my website talk only about one catastrophe?

Yes

Does it contain enough images? Yes Should there be more animations? Yes, there are none Does the background conflict with the text?

No


No

Does it contain only one logo? Yes, only one Do the colours interfere? No, they look good together and

in a very professional way Is the background interesting? Yes I love the background

because it fits with the theme of the catastrophe as there are lots of clouds.

Is the font too big/small? 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 Is there enough text and info on the page?

Yes

Is the title big enough? Yes Is there enough text? Yes, it is enough if not it gets boring Does the animation distract you from the text?

No. because there aren’t any


Yes there are the buttons under the title and they are clearly presented


Are there evident subheadings? Yes Are there enough videos? Yes Survey on a number of people

Is it professional?

Is it interesting?

Is it clear to understand?

Does the website work? (buttons, links, videos)

10 people from age 10-15

IIII II IIII I IIII IIII IIII IIII


IIII III II IIII IIII IIII IIII


IIII III IIII IIII IIII


IIII IIII IIII IIII IIII


II III IIII IIII IIII


III 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.

Technology

Website project