HTML- HTML is used in a website for body text. You use it for inserting your content on your site. If you have purely a HTML document as a website, you will see a horizontel page of text and images. HTML is the building-block of any website.
It uses HTML tags such as <h1> </h1> for a heading and <strong> </strong> which can be formatted in CSS. The first tag, <h1> opens the tag and </h1> closes the tag. The content goes in-between.
CSS - CSS is used for formatting your HTML. To change the way your page looks, you use CSS from changing the font colour to putting your content into columns. These days, if you don't put the formatting into the CSS document(s) rather than the HTML then your website is not W3C compliant.
CSS looks like this:
body
{
color: white;
background: black;
}
This would format the content under the <body> </body> tag in the HTML document so that the background of that area goes black and the font will go white.
HTML & CSS are linked together in the <head> </head> tag with the code <link rel="stylesheet" href="homepage.css">.
Fireworks - Fireworks works as a basic photo manipulation program such as Photoshop or GIMP but in essense Fireworks is a bitmap and vector graphics editor. This means that you can create images for websites and if they are resized then they will not loose quality. This is quite important within web design.
They allow you to use a variety of tools to aid you in creating graphics such as Marquee's, pen tools, brushes, stamps and text (these are just a few). It also uses Layers which allow the user to navigate around their graphics easily so if you make a mistake on one layer, it doesn't compromise the image as a whole.
Friday, 17 June 2011
Monday, 6 June 2011
Evaluation
Through-out this project, our team has had both good and bad days with absences, slacking etc.
In this post, I hope to look at what went well with our project as well as what didn't go quite as well.
What went well?
13th March - Website Design. We were given the task to create a wireframe product of what we would like our website to look like. I think this went quite well as we all got to work on an individual design that we liked then got to come together and discuss the aspects of our designs. In the end, we decided to merge aspects from all three designs.
19th March - Logo Design. I think that this went well for all the same reasons that the website design went well. We all went off and created a logo for our website before coming together and discussing. Again, we ended up taking aspects from all three logos.
25th May - Meeting. The meeting was a real help for me with the project plan as well as finding out exactly where we all were. After the meeting, I was able to amend my project plan so that it was correct.
What didn't go so well?
28th Janurary - Tools & Techniques. I made quite a big mistake when trying to think ahead and the types of tools and techniques that we would be using. We ended up only really using two techniques & one tool, HTML, CSS & Notepad.
15th April - Project Plan. This part of the project really didn't go well for any of. Although Microsoft Project is a pretty simplistic program, we all ended up finding it quite hard to create a useable plan. We later had to amend our plan in our meeting on the 25th.
10th May - Final Layout Design. This aspect of the project, at first, went wrong and this was down to me. I took it upon myself to create the actual design of the website and coding it (taking the other two's aspects into consideration). This was not part of the assigment. We were suppose to do our own parts of the website in both design and coding. We ended up redoing the website later that month.
In this post, I hope to look at what went well with our project as well as what didn't go quite as well.
What went well?
13th March - Website Design. We were given the task to create a wireframe product of what we would like our website to look like. I think this went quite well as we all got to work on an individual design that we liked then got to come together and discuss the aspects of our designs. In the end, we decided to merge aspects from all three designs.
19th March - Logo Design. I think that this went well for all the same reasons that the website design went well. We all went off and created a logo for our website before coming together and discussing. Again, we ended up taking aspects from all three logos.
25th May - Meeting. The meeting was a real help for me with the project plan as well as finding out exactly where we all were. After the meeting, I was able to amend my project plan so that it was correct.
What didn't go so well?
28th Janurary - Tools & Techniques. I made quite a big mistake when trying to think ahead and the types of tools and techniques that we would be using. We ended up only really using two techniques & one tool, HTML, CSS & Notepad.
15th April - Project Plan. This part of the project really didn't go well for any of. Although Microsoft Project is a pretty simplistic program, we all ended up finding it quite hard to create a useable plan. We later had to amend our plan in our meeting on the 25th.
10th May - Final Layout Design. This aspect of the project, at first, went wrong and this was down to me. I took it upon myself to create the actual design of the website and coding it (taking the other two's aspects into consideration). This was not part of the assigment. We were suppose to do our own parts of the website in both design and coding. We ended up redoing the website later that month.
Tuesday, 17 May 2011
Blog Review
Today my blog is going to be reviewed. I believe that this means that this is another deadline met.. I think.
Tuesday, 10 May 2011
Final Layout Design
I have started work on the final layout design, it is mainly focused on my original design but I have taken aspects of both Pani & Jack's designs into it by adding a forum link, a login section to the index page, showing specials on the index page and using the space better.
More to follow.
More to follow.
Monday, 25 April 2011
Project Plan #2
Meeting
https://docs.google.com/document/d/1mkEOWVMwZ23rAtv_zFFGClkBWUxq_pmpXH6sJ2etM1Y/edit?hl=en&authkey=COrt_d0H
Above is the Agenda for our meeting that we held a before the weekend.
After having this meeting, the deadline for doing so was met.
Above is the Agenda for our meeting that we held a before the weekend.
After having this meeting, the deadline for doing so was met.
Friday, 15 April 2011
Project Plan
I created a project plan for our project.
We completed this on-time and on deadline.
Update:
Scratch that, the deadline was changed for this hand-in as everybody seemed to have done it wrong. We now have an extra few days.
Monday, 28 March 2011
Image File Types
There are different types of file extension with images (the main few being: .jpg, .png, .bmp, .gif, .tiff, .raw) and these are used in differnet situations and different reasons.
For Print you need an image that looses the least amount of data possible meaning that the colour is more defined and more colourful. You would use such file formats as: .tiff, .bmp & .raw for this.
For Web use you need a file that can be shrunk down and still retain decent quality as well as in some cases use animation. For this you would use .gif & .png.
.Jpg is probably the most commonly used file format within pictures (digital cameras usually automatically save files as .jpgs, most programs will offer you a .jpg as default etc.) although the .jpg is in the middle. This is because it can be used for both print and web as it can be reduced down and still retain picture quality whilst also being able to print out and also not loose picture quality. This is because of the complex mathematics behind the .jpg file format.
There are two different sections of image file formats (print & web) for a reason. This reason is that web images must be smaller file size because of download limits and download speeds. You wouldn't want to be sitting on a webpage if you had say, 1MB broadband waiting for a website to load that had 12 images all at 4MB each, you would be there for minutes, get impatient and leave. In the same scenario if you had 512KB Dial-UP, you wouldn't want to be using up your bandwidth on 12 images which were all at 4MBs each.
With mobile devices such a smart phones or tablets, you will usually get a limit (even on "unlimitted internet plans" most of them are on a fair use policy meaning that you will get around 1GB of bandwidth for the month). If a website has 12 images each at 4MBs on a website that has 10 pages that's 480MBs for one website alone. That's half of your monthly allowance.
Because of this, you need to reduce the image sizes of web images so that people can view it across a multitude of platforms easily and quickly.
For Print you need an image that looses the least amount of data possible meaning that the colour is more defined and more colourful. You would use such file formats as: .tiff, .bmp & .raw for this.
For Web use you need a file that can be shrunk down and still retain decent quality as well as in some cases use animation. For this you would use .gif & .png.
.Jpg is probably the most commonly used file format within pictures (digital cameras usually automatically save files as .jpgs, most programs will offer you a .jpg as default etc.) although the .jpg is in the middle. This is because it can be used for both print and web as it can be reduced down and still retain picture quality whilst also being able to print out and also not loose picture quality. This is because of the complex mathematics behind the .jpg file format.
There are two different sections of image file formats (print & web) for a reason. This reason is that web images must be smaller file size because of download limits and download speeds. You wouldn't want to be sitting on a webpage if you had say, 1MB broadband waiting for a website to load that had 12 images all at 4MB each, you would be there for minutes, get impatient and leave. In the same scenario if you had 512KB Dial-UP, you wouldn't want to be using up your bandwidth on 12 images which were all at 4MBs each.
With mobile devices such a smart phones or tablets, you will usually get a limit (even on "unlimitted internet plans" most of them are on a fair use policy meaning that you will get around 1GB of bandwidth for the month). If a website has 12 images each at 4MBs on a website that has 10 pages that's 480MBs for one website alone. That's half of your monthly allowance.
Because of this, you need to reduce the image sizes of web images so that people can view it across a multitude of platforms easily and quickly.
Saturday, 19 March 2011
Logo Design
We started out by all creating our own logo designs. These are as follows:
Once we had created these designs, we couldn't decide on who's design to use as a final one. As we couldn't decide, we went through a public testing stage which took about half an hour and involved us pitting the three designs agaisnt each other in a "battle" which would reign only one victor.
After that, we had our design for our logo, we chose Jack's. We agreed upon the term that I would re-design it too look more sleek and professional but staying with the same idea of a "Rocket-USB".
 |
| Kris's Design |
 |
| Pani's Design |
 |
| Jack's Design |
After that, we had our design for our logo, we chose Jack's. We agreed upon the term that I would re-design it too look more sleek and professional but staying with the same idea of a "Rocket-USB".
Sunday, 13 March 2011
Website Design
We were given the task to create a website design for our USB sales website. Pani, Jack and I all created one each; we then looked at the three and noted the good and bad points on each. By the end of it all, we managed to come out with a conclusive website design.
After creating the design, we created a table to show the good and bad points about them. The link below will take you to it.
http://bit.ly/dQx0yO
In the end, we decided to go with My Design but we will be tweaking it with some of the aspects of Pani's & Jack's.
We managed to get these designs in on-time and so we met this deadline.
Here are the three designs that we created.
 |
| Pani's Design |
 |
| Jack's Design |
 |
| My (Kris's) Design |
http://bit.ly/dQx0yO
In the end, we decided to go with My Design but we will be tweaking it with some of the aspects of Pani's & Jack's.
We managed to get these designs in on-time and so we met this deadline.
Thursday, 24 February 2011
GIFs
Today we went through working with Animated GIFs in Fireworks. This isn't the first time that I've used or created these so it wasn't really anything that new. Although Graeme was teaching us in Fireworks, I am use to using Photoshop so will be using that for any GIFs in the forseable future.
Friday, 18 February 2011
Wireframe Products
 |
| This wireframe was made using Visio. Visio was a very basic and easy to use piece of software. It had a range of tools that I could use to create my webpage layout and if I was going to use a wireframing tool again, I would probably use this one. |
 |
| This sitemap was also made using Visio. I used slightly different tools than in the Wireframe. It was very easy to use and was finished within minutes. |
 |
| This next wireframe (which is a tad more than that) was made using MockFlow (http://mockflow.com/). This website was pretty easy to use but more complex than Visio. It consists of drag & drop from a list of tools supplied. It may be more complex than Visio but it also has many more tools avalible with a much more graphical feel to it (such as the Icons on the Navigation). I went a bit over the top on this wireframe but this was mainly to show the sort of tools avalible with MockFlow. |
 |
| For this Sitemap I used MockFlow again but fell into a lot of issues. I don't think that MockFlow is suppose to be used for Sitemaps as it was very difficult to get the arrows in the right places and having to manually move them instead of them clicking into place. I ended up using MockFlow due to the clean look that it comes out with and the simplicity. I was able to make up wireframes in a matter of minutes that looked and felt professional. |
Friday, 28 January 2011
Tools & Techniques
We will be using a multitude of Tools & Techniques. These are as follows:
- Adobe Photoshop CS5
- LightBox (Coded Gallery Tool)
- HTML
- CSS
- Javascript
Project Specfications
Our website (project) will contain a base website along with other pages that revolve around the base website (index), A forum for users to discuss our various products, a 'database' of videos and pictures for the users to view the users to view the products & a comments system for the users to leave comments on products (similar to the forums).
Introduction
We, as a group, have decided to advertise and sell USB desktop gadget on our website.
We all researched different gadget websites to help give us an idea on what to do for our own website and find producys and below is what we each individually researched. The websites were as follows:
We all researched different gadget websites to help give us an idea on what to do for our own website and find producys and below is what we each individually researched. The websites were as follows:
- Kris: http://thinkgeek.com/
- Jack: http://firebox.com/
- Pani: http://iwantoneofthese.com/
Subscribe to:
Comments (Atom)
