evaluation

After we completed our project and created a fully functional website, ibrahim, clearisil, and myself reviewed on the good and bad things that happened during this project. We faced a number of problems during our project, one being that people were off ill which meant work was not completed, so in affect to this, we had to do extra work when the team member was back. deadline dates were a huge part of our project, this is because bits of the project had to be in by certain dates. if dates were not met, our project would fall behind, so we would have to have a team meeting to work out a way around the problem.

Our project was to successfully complete a working website to advertise and sell a product of our choice. We had to work in teams, all creating 5 web pages each, including a home page, and also 4 different pages each. Therefore our final website would consist of 13 pages, where everyone can view every page that works from the same CSS and HTML code. We had to design a project plan, and follow it to help make a website. we also had to control and manage our progress on blogger. Where we could keep a diary of what we have been doing. We had regular team meetings to discuss what is going well and what needs a bit more work, also to discuss any issues that needs addressing.

I think that our project went really well, we stuck to our project plan. This is vital for any project as it is the backbone of the project. Our project plan told us what needs to be done and when it needs to be implemented. The project plan had been altered 2 more times after our first draft of it. We had to alter it because of problems that we overcome, these are changes to deadline dates, and also changes to what needs to happen at a certain time due to illness amongst the group. We had to overcome a huge problem on the day of presenting our websites, this was that lorum ipsum was not allowed on our websites, therefore we had to change this and thankfully the teacher changes the presentation date for another week as most of the class had done the same thing. This effectively gave us more time to reflect on what we could do to improve our website. we discussed as a group that we could check our ID tags and make sure they are exactly the same on eachothers HTML and CSS, this would help our final design look much more professional.

In conclusion, my team and I believe that the project was a success as we completed what was asked of us, we worked to our full extent and managed to follow our project plan which in the end pulled us through.

tools used

In this project, we had to produce a website in a group. To make this website, we used a number of tools that were available to us. During this project, we created our website using Komodo Edit. By using komodo edit, we are allowed to use html and CSS. We used this to design our websites. i hadn’t done much CSS before so i was new to it. However i have done a bit of HTML.

Komodo edit is simply a webpage code editor tool which enables a user to produce their own HTML coding in order to create a web page. Komodo edit also allows the user to create their own CSS code in order to make a website.
 I thought that komodo edit was a very good tool, once you knew your way around the easy parts of it, it became easy to use. it was useful in a way that the coding appeared when you didn’t know what code to use. this was very handy as it made it much easier for the user. Also, komodo edit allowed me to interact with other members of my group, this was key because our pages had to link together. While using komodo edit i was able to open a template of HTML, i chose HTML 5 as this was for me, the best one to use. To help create my website, I also used CSS coding and Meta tagging. these tools helped me a lot in creating my website because it meant I could use such things as 'div tags' and 'id tags'. This is so that i could make my layout unique and professional. By using these tags it almost allows you to group elements together, such as a part in the body, so when you go to change the CSS of this, you can change everything listed under the certain tag you have used. Komodo edit was the main tool that I used throughout the completion of my website. on this version of komodo edit, the software would give you options of how the code you are attempting to write will end. It will help you a lot in that aspect. Komodo edit proved really good and easy to use because we was working in groups, it occurred to us there may be a problem in transferring each other’s coding and putting it on one document so that we are able to link the pages together to access everyone’s pages that they have contributed to. We were also able to open the code in software and make minor changes, so that the website would function better, this is why komodo edit was so useful as it was very flexible. Thankfully for this, we didn’t have to worry whether the computers we were working on had komodo edit on the machines, or if we had to take our USB’s around with us, as we would be able to work on Notepad and it would allow us to make changes to our coding.

Another tool which was very useful for me to complete my website was CSS. CSS stands for  stands for Cascading Style Sheets.CSS is a type of language that is used in komodo edit that users can use to organise their web page that they are creating. CSS is basically the design part of website development, whereas you have HTML where it’s the coding or the things that make the website work, which I will talk about, you have the CSS which allows the user to create the web page and make it viewable and to make  it look how they would like it to. This covers colours, font sizes, fonts, and many more. CSS was a huge part in completing my project, it allowed me to look at how I wanted it to look, however sometimes I would get stuck on the coding and didn’t know what type of code to use, luckily komodo edit gave me options of what I wanted to do. For example at one point I wanted to change something in my navigation bar, but wasn’t sure of what the code would be, so I typed in font, and it gave me a list of what I could do, I could do font-family, font-colour, font size and many more. This was so helpful because it help make my website look how it does now. Using CSS also helped me achieve the similarity of my wireframes, I could check how my CSS was looking and see if im heading in the right direction at any point. My group and I all decided on what tags we would use as it would prove vital in merging the websites together. The tags are what the CSS needs to work, once we have the tags, we can enter what we would like the CSS to look like under these tags.

HTML is a type of language that is used in komodo edit to help the design and creation of a website. was also a big part in my completion of the website, after all, this is the backbone of the website and whatever I done on the HTML, would affect the final outcome. So I had to be careful and make sure I didn’t make any mistakes. Thankfully the HTML coding helped me as it would tell me if I had made a mistake. HTML stands for Hyper Text Markup Language. I linked my HTML file to my CSS coding by using the following code: <link rel="stylesheet" href="NAMEOFFILE.css">. By doing this, it allows me to make changes on my HTML, then it will affect my CSS file so I can see if I have made a mistake or to rethink and go back to my wireframe to see what I wanted to do. The ID tags I used in the HTML I would have to make sure I used in my CSS, for example my navigation bar tag would be #navigation, then I would use this tag in CSS so it allows me to change how the website will look. I could only make changes to sizes of boxes using HTML, not CSS, this is because HTML is what the website is, then the CSS is the part that brings the site to life if you like. For example the HTML determines what size a box would be, then the CSS determines the colour of the box.

 

testing

The past couple of days we have been testing our website.

We have been testing each other’s CSS files that our linked with our thirteen web pages. We came across a problem almost immediately. The problem was that our links were broke as we didn’t do them beforehand. The problem was made even worse when we found out that our CSS pages wasn’t compatible so all our pages looked untidy. However we found out it didn’t have to look good, it just had to work.

The next test was based on the links working correctly. As we altered these problems in our first testing, our links were now working fine. After this we changed our CSS for our websites so that it worked fine.

The next problem was with Ibrahim’s CSS, he didn’t create all the links correctly, so we quickly sorted out the problem and managed to overcome this. We will test to see if our webpages work together and check if our pages are all okay to be presented.

week 16

this week i am presenting my blogger to my teacher.

This week I made my final change to my project plan, this change is that we had been given another extension because of most of the class had lorem ipsum in their final website. so we had been given an extension to the 14/06/12. i believe this change is vital as it gives us the chance to make the final changes to our website to make it even better.

week 15

This week we carried on with the implementation of our website. I have added my logo onto the website, and also the logo. our teacher has given us a weeks extension to the 18/05/12. this is very good for me as i have not completed my website yet and the extension will help me alot.
I made a change to my project plan. this change is that i had to change the deadline for the 11/05/12. I made this change because we had been given a weeks extension for us to complete our work.
i made this change because i felt i needed it in my project plan as it would affect whether or not my project is a success or not.

week 14

This week our teacher handed back our intirim meeting documents and he gave us some improvements to make. We had to improve on our agenda, identifying problems, actions, and to also add references.

week 13

This week we are still carrying on with our website. i completed the templates and i am now working on the CSS in komodo edit. i have met all my deadlines so far and on course to meet all the future deadlines.

week 12

This week i have started to create my website as a template, This is going really well because i am quite a creative person so i am always looking for new ways for my template to look. as well as creating the template i am starting to make my website using komdo edit.

I also created my logo so this means i have met my deadline for the 19/04/12

week 11

We have now learnt alot more about CSS in komodo edit, we can do many techniques now. This week i also started the implementation of my website. This is going really well because I am very confident of what i can do with CSS. We also had an intirim meeting, during this we discussed whats going well, what deadlines we have to meet, and also what we need to work a bit more on.

week 10

I checked my project plan, and i am still up to date on my tasks as i have not missed a lesson. This week we done more examples of CSS in komodo edit. we practised things like one column layout, two column layout, and and also a one column fixed.

interim meeting

Interim Meeting

Click on the link below to go to our team meeting report.
 http://sdrv.ms/H8XRXb

We wanted to have a team meeting to discuss how we are doing with the current project. we feel that a team meeting is the perfect opportunity to see what we are doing well and what needs help. During the team meeting we discussed whether the deadlines have been met so far. We came to the conclusion that everyone has met the deadlines. This is good because it doesn't hold us back and waste time. We then discussed how we would get around meeting deadlines and how we have got round it, this is due to people being off sick, this means that they aren't able to be as up to date as they should be. After, we discussed what we have achieved so far. we mentioned that we had created html wireframes for our website. Each of us in our group made 10 wireframes, 5 wireframes on each bit of software. I used cacoo and fireworks. Finally we decided that we should have another meeting after the implementation of the website has been completed. This gives us to chance to get together and find out which is going well and what isn't.

Week 9

This week we had to move rooms as there was no access to blogger in one of our rooms. During this week we also carried on learning about CSS in komodo edit. We done this by completing examples of techniques in komodo edit so we know everything we need to know before we start making our website.

week 8

We have decided a name for our website. It will be called FunkyBall.com, this week we completed our project plan, then started to learn about CSS on komodo edit. we are learning this because this is how we are going to complete our website for FunkyBall. I have not fallen behind for my deadlines, as i have been in for every lesson and completed all the work that needs to be done.

week 7

This week we were able to catch up as a group and discuss how well we are doing. This week we made a start in thinking about how we are going to get around doing our website.

week 6

This week we had a slight problem in that we couldnt meet and discuss how things were going due to us being on a holiday. therefore we decided we would still have to complete the M1.

week 5

This week we have carried on with our wireframes, taking into account what was said and how we would go around meeting the deadlines.

This week i met a deadline where i had to create a template for 06/02/12

page layout

• make 5 pages wireframes cocoo
• a blog entry saying strengths of my wireframe improvements i can make just saying me and my group decided on the strengths and improvements needed
• make 5 pages wireframes iplotz
• compare one of the drafts to the other better one, strengths and weeknesses
• good things about why i used cocoo and paint

bit.ly address
http://bit.ly/yBlorc

Introduction
in this entry i will be discussing the wireframes i have completed and i will also compare each wireframes and find the strengths and weaknesses of each one. I will also discuss the improvements i intend to make and include what was said in the group discussion.

Cacoo
I used Cacoo to make 5 different pages that i will be creating for my final website. i found that Cacoo was a really good web based tool. it had all the right tools to create a good wireframe. it let you draw what you want, enter text boxes where you want, let you move anything almost wherever you want to, it was very easy to use as you decide how you want it to look. I liked Cacoo because you are able to be given a template, this makes it easier as you dont have to work from scratch. you can also share your wireframe with others and they can make changes to it. This is good because it means its completely web based.

Fireworks
The other application I used was called Fireworks, it is an application designed for web based wireframes. I thought this application was good, however I prefer Cacoo much more. Fireworks was good because it was completely freehand, there wasnt many limitations to what you could do with it. What i disliked about it was that there was no templates, so I didnt really know where to start and what design to do.

Conclusion
In conclusion i will decide which application tool i liked more, I much prefered Cacoo, partly because it was completely web based, and also it was much easier to use with a template.

Strengths and weaknesses of my wireframes

My first wireframe was done in Cacoo, I used a template but deleted most of the things on that template as it didnt relate to my choice of style for the wireframe and i didnt really want it to be the same as a template. I decided that my colour scheme would be red and white so I changed the colours of the 3 buttons at the top right hand corner of the page to red and white. I also put the name of our site.. FUNKYBALL.COM at the top centre of the page, and changed the colour of the text to red. I then put my navigation bar underneath the title which included 5 pages. We then put a login box under that, with a competition box below. To the right I put a picture of the funky ball itself with a bit of text to explain it.

I believe that my strengths about my design of this index page were that i kept the colour scheme throughout, and kept it simple yet attractive. However I think that my design has its weaknesses, the group came together and found that, my background was boring and dull, as its plain white. We also said that there needed to be a link to Facebook or Twitter. this is because it tends to attract the customers eye.

My second wireframe was completed in Fireworks, this is a very simple yet affective version of my wireframe. It starts off with the title of my website which is FUNKY BALL. It is in 3 different colours, red, pink and blue. This gives the impression that it is fun and targeted at children. I then had my navigation bar below which included 5 different pages, a picture of the funky ball, some text about it, and also a login box.

The strengths of my design are that i kept the same colour scheme, and made it fun and targeted at the right market. however as a group we found that it had its faults. The first reason being that the text wasnt consistant enough in the navigation bar, it is the same colour, however different sizes. This makes us look unproffessional. Another reason was that it was very plain and boring, there was nothing exciting about it and had nothing about any competititons.

to go to my wireframes click on the links, then it will direct you to a skydrive, then click on LINKS FOR WIREFRAMES, then you click on the file you want.

to go to cacoo wireframe click here

to go to Fireworks wireframe click here

week 4

We had a group discussion about the good and bad things about eachothers wireframes. We came up with ideas that could be used in the final design of our wireframes. after having this discussion, we wrote up what was discussed on our blogs to refer to after we have completed our final design.

week 3

During this week, I started to get an idea of the style I want to make for my website. I done this by looking at other websites which sell similar products to our idea. I will start to make my drafts in Cacoo and fireworks.

This week i met a deadline where i had to finish my draft navigation 13/01/12

Design a Website- Site Navigation

Matrix

5 page site map

This is my 5 page site map. It Includes pages that include, Index, Registration, Competitions, Contact Us and finally Help/Customer services. This diagram shows the Index page in the centre. It is in the centre because it is the main page, it is the page that the user automatically gets taken to. From any page on the site, you can access any other page. For example you can be on the Competitions page, then click on the link which will take you to the Customer services page.

Comparisons
I will  be comparing the good and bad points about each others site maps and in the end we will come up with a solution and produce a final site map which we will use for our end design. In our group we all had to make our own 5 page site maps, and also the 13 page site maps.

Firstly i will look at Clarissa's Site map, as a group we found it was slightly confusing and difficult to follow as there are so many arrows and come close to eachother. However we also found that the index page was at the top in the middle, this was helpful as all the main pages linked off of the home page. another bad point about this site map was that all the colours of the pages are the same, this made this confusing as you could not completely tell whether its a sub page or not.

Next, we looked at Ibrahim's site map, straight away you could tell it was not confusing as the main pages were different colours to the sub pages, this was helped by the index page being at the top in the middle. however there was a downfall during this site map, one of his main pages was the Registration page, and had the login page as a sub page.

Finally, as a group we decided my site map was simple, yet affective and I done the opposite to what Ibrahim done with his bad point. I made sure that the login page was a main page because existing users should not have to click on the registration page when the have already got a registration. However one bad point about my site map was that i had two login pages, I decided to do this because you should be able to login when entering the competition and also when actually loging into the site. The group did not agree with this because they thought it may be confusing.

as a group we designed our final site map in visio and you can see this below.

This is the final site map that I made by using Microsoft Visio.

13-17 page site map
This is my 14 page site map, it contains every page that i will put into my site, which will be easily accessable from any page on the site. The home page is named Index, then the first page is called About Us, which from that page you can click on the sub link which is the Contact Us page. After that we have the Product Information page which includes the Reviews page. Next we have a competition page which you can be directed to the login page from that. The next page is the Customer Services page, on that page there are 3 sub links, these are Delivery Information, Terms and Condititions, and FAQ's. The final page is the Registration page, there are 2 sub pages from this page, these are Login, and finally Checkout. I have set my site map out like this because it is really simple and easy to navigate around the site. You can get from one page to another easily and it also gives a lot of information about the product and also us and the company.


word and visio

I used Microsoft Word and Visio, Word is a word processor designed and released by Microsoft. Word includes WordArt, Macros, Creating tables, word processing and drawing tools. Word also allows the user to do things such as memos or reports. Microsoft Word provides tools to enable you to check spelling of your document, create merge letters and add graphics to enhance your written information. I used word to create my 5 page site map and also my 13 page site map. I thought that it was a good application to use as it had all the tools i needed to create a site map. I used the drawing tools to create boxes, and entered text into the boxes to show what they represent. I then used arrows to navigate each box around so that it becomes simple and easy to understand. The good things about word was that it was very quick and easy to use. It also let you do everything you need to do to create a site map. It let you use simple shapes which became effective. However the bad things about using word was that it was very basic, it is not a natural peice of software to create a site map, so it did not navigate two different boxes together automatically, it was very manual. Also you could not use any symbols to represent a certain page.

I also used Visio, this is also desiged and realeased by Microsoft and includes features such as drawing tools, automatic diagram planning and many more. I used visio to create my final 13 page site map, I really liked this piece of software as it was very affective to what needed to be done. It has good drawing tools and it was almost helping you create the site map. This is probably because of the automatic features it has. you could pick up an arrow and choose which boxes i want to link up.

In conclusion, I have completed many tasks to gain a better knowledge on how to set up a web page. In relation to this, i will now know how to set up a website and how it should look in order to get the best out of whats required. It gave me the chance to learn the skills to know how my pages would link, for example how you could get from one page to another.

• what was good about word and visio making the diagrams
• how did it help me make the diagrams

go to project plan

week 2

This week we completed 3 diagrams which state what pages we will use. The 3 diagrams i used were hierachical, matrix and a combined navigation diagram.

week 1

Friday 13th Januray

During this week we had to produce a 5 page hierachical site map produced in word. Also, we each had to produce a full site map in word.