Website project

1,890 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,890
On SlideShare
0
From Embeds
0
Number of Embeds
1,542
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Website project

  1. 1. By Clarissa Annunziata   What  factors  contribute   to  human   catastrophes?    
  2. 2. By Clarissa Annunziata 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.
  3. 3. By Clarissa Annunziata 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?
  4. 4. By Clarissa Annunziata 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
  5. 5. By Clarissa Annunziata 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
  6. 6. By Clarissa Annunziata 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
  7. 7. By Clarissa Annunziata 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
  8. 8. By Clarissa Annunziata 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
  9. 9. By Clarissa Annunziata 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
  10. 10. By Clarissa Annunziata 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
  11. 11. By Clarissa Annunziata 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
  12. 12. By Clarissa Annunziata Interview to Elena Mazzilli 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? 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? Answers Improvements
  13. 13. By Clarissa Annunziata Questions Answers Improvements 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 Costanza 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? Is there a logo? Is it professional? Is it complicated to understand? Answers Improvements
  14. 14. By Clarissa Annunziata Questions Answers Improvements Answers Improvements 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 Carolina Rosati Questions Does the website talk about a specific catastrophe? Are there lots of images?
  15. 15. By Clarissa Annunziata Questions Is it boring to watch? Are there many colors that don’t fit well together? Is the background confusing? Is the font clear? 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? Answers Improvements
  16. 16. By Clarissa Annunziata Questions Answers Improvements Is the logo big and clear? Are the pictures good 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
  17. 17. By Clarissa Annunziata 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.
  18. 18. By Clarissa Annunziata 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
  19. 19. By Clarissa Annunziata 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.
  20. 20. By Clarissa Annunziata 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
  21. 21. By Clarissa Annunziata 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
  22. 22. By Clarissa Annunziata 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
  23. 23. By Clarissa Annunziata 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
  24. 24. By Clarissa Annunziata 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+.
  25. 25. By Clarissa Annunziata 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”.
  26. 26. By Clarissa Annunziata Test Plan
  27. 27. By Clarissa Annunziata 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
  28. 28. By Clarissa Annunziata 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.
  29. 29. By Clarissa Annunziata
  30. 30. By Clarissa Annunziata 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.
  31. 31. By Clarissa Annunziata 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.
  32. 32. By Clarissa Annunziata Website #2 Yes or No Would you want to Stay stay on the website or immediately go away? Website #3 Improvements
  33. 33. By Clarissa Annunziata
  34. 34. By Clarissa Annunziata 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
  35. 35. By Clarissa Annunziata 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
  36. 36. By Clarissa Annunziata Website #4
  37. 37. By Clarissa Annunziata
  38. 38. By Clarissa Annunziata 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 are none Does the background conflict with No the text? Are the borders of the tables No showing? 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 Yes the page? Does it have a continuous house Yes style? Is the title big enough? Yes Is there enough text? Yes Does the animation distract you No. because there aren’t any from the text? Are the links evident and No underlined? 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
  39. 39. By Clarissa Annunziata 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
  40. 40. By Clarissa Annunziata Plan Gantt Chart
  41. 41. By Clarissa Annunziata 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
  42. 42. By Clarissa Annunziata 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 Repeat the same process with page 3 PC, dreamweaver 28/02/2013 17:00 - 17:30 Repeat the same process with page 4 PC, dreamweaver 28/02/2013 17:30 - 18:00 Repeat the same process with page 5 PC, dreamweaver 29/02/2013 16:30 - 17:00
  43. 43. By Clarissa Annunziata Task Resources needed Date Time Task Resources needed Repeat the same process with page 6 PC, dreamweaver 29/02/2013 17:00 - 17:30 Repeat the same process with page 7 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.
  44. 44. By Clarissa Annunziata 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.
  45. 45. By Clarissa Annunziata 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.
  46. 46. By Clarissa Annunziata 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.
  47. 47. By Clarissa Annunziata 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.
  48. 48. By Clarissa Annunziata 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.
  49. 49. By Clarissa Annunziata 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.
  50. 50. By Clarissa Annunziata 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
  51. 51. By Clarissa Annunziata 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 Yes one catastrophe? Does it contain enough images? Yes 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? 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 Yes the page? Is the title big enough? Yes Is there enough text? 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
  52. 52. By Clarissa Annunziata Are there evident subheadings? Are there enough videos? 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.
  53. 53. By Clarissa Annunziata 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
  54. 54. By Clarissa Annunziata 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.

×