Writing Up

As a group we divided the tasks so that people that are strong in certain areas would work on the areas that they are best at.

Matt Frogley took lead on the Photoshop cutouts which entailed cutting out the background of the client pictures that they gave us to put onto the website. Everyone in the group Dan, Gary, Pete, Alex D, Alex N, and Andrew all worked on the cutting out of images, they all took a certain amount and did the cutting, Matt as the leader helped people that needed it and showed them the best techniques of how to do it.

In a group decision we decided that i would take lead and control on the HTML and CSS as they believed that i was most competent for the job. I had to investigate into different effects that we could use and how i was going to implement them into the site getting them to work on multiple browsers.

The two effects that i had to look into was a Dropdown Menu and a Lightbox but without using and Javascript all with CSS. After several hours of trawling through different effects i found a CSS Dropdwon Menu that work in all browsers so, i implemented that into the site and changed all the links and headings.

Next i went looking for the CSS lightbox effect, once again i found several different effects some that worked in IE and Firefox but not in Chrome or Safari and some that worked in Firefox, Safari and Chrome but not in IT. I decided to run both of the effects to together using Conditional Comments so that only IE would pick up the effect that worked in it the rest would pick up the other one. After a few errors with the conditional comments not working i got both Firefox and IE to run the separate effects.

After getting the efffects to work i set in motion the task of adding the Adobe Illustrator tables and the clients images to the site to finish it. After some time or re-naming and organizing the files i have them working in the effect the only problem was with Firefox i was getting the sizes of the images wrong and they looked out of proportion so i had to add in size tags to the HTML so that they would, be the correct size when clicked on.

I was using Gary's and Alex D's AI tables for the site as they were in charge or creating them, they had a good idea of having two different table to use to give variety to the site, this was a good idea until i had to put them into the site as they we two different size it would not work and i had to change them all into one table with the same size this is due to the amount of style sheets that would have been needed if i did not.

As a group we all had to create a different logo for the company which they would then pick the best one for the website. During this we used the program Adobe Illustrator to create the logo using different effects and techniques. At the end of this we had to submit them to the clients for them to choose the one the liked best, they choose Matt Frogleys as the best.

After working on the HTML and CSS some more i came to find out the Safari and Chrome did listen to the conditional comments and was displaying the images for the IE browsers but the with the Firefox gallery underneath, only the Firefox gallery worked but i was not in the right position.

We had to update the clients on how we were progressing with the site, we had to be polite and professional with the writing so that they would respect our work and would pass on a good word the we are professional people that provide good quality work.

HTML & CSS

Today i have been working on finishing the site with everything working and looking good.

I have finished work on the Drop-down Menu and it is no fully functional. I have also finished work on the CSS Lightbox along with adding the table designs and the images the the client have provided.


I have had to do more work than i initially thought to get this effect up and running. I have had to to different types of Lightbox effects for specifically for Internet Explorer and one for all other browsers. I have done this by using conditional comments which means Internet Explorer will only pick up certain code and the other browsers will pick up the rest.

I have also created separate CSS for both Internet Explorer and other browsers so that the site look the best in all browsers.

HTML & CSS

Today i made a template to use for the website, i have made everything that we are going to need plus some extras. I have shown this to the class and they have all agreed that we should use it.

Alon with doing the HTML i have been writing the CSS to give the site style and colour, i have also started working on implementing the CSS Lightbox and CSS Drop-down Menu into the site.

This is the template along with the CSS Drop-down Menu.

HTML & CSS

Today i was working on the HTML and CSS of the site. I had to encode the light box into the web page and get it to function with a background image and with its parameters. I also created a CSS for Internet Explorer, these need to be altered and finalized.

With the gallery and light box I had to position the background image and then position each individual image of the table to make sure that they looked good when view.

CSS Lightbox

We have deiced as a group to use a lightbox affect on the images so that they can be viewed in the original size. We decided that it would need to be all CSS without any java-script, so that people that do not have java-script enabled on their computers can still have the affect. I searched the internet and found several suitable lightbox affects that i could use. These were:

1. http://windyroad.org/static/css-lightbox/css-lightbox.html#showimagecap
   
2. http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
3. http://windyroad.org/static/css-lightbox/css-lightbox.html#showimagecap
4. http://www.cssplay.co.uk/menu/lightbox-click.html+
5. http://www.cssplay.co.uk/menu/lightbox-hover.html
6. http://www.cssplay.co.uk/layouts/body5.html
7. http://k-u-h-n.net/wp/index.php/2009/07/08/kuhn-pure-css-lightbox/
   

After looking through all of the affects, i decided that number seven had the best affect with most browsers, and had the best look and feel along with functionality.

Now i had the base for the affect i then set out to modify it for our needs. I had to create a separate class in the CSS for every image so that we could position it exactly where we wanted it.

I managed to get this to work in Mozilla Firefox but when i opened it in Internet Explorer i had a few problems. I main problem was when you clicked on the image for the affect was all the images would come up with their smaller thumbnails over the lightbox affect.
The way i coded this one was having and individual DIV with a class around each image to position it.

I fixed the problem by just putting the class within the code of the image which still allows me to position it but it does not effect the affect.

Table Graphics and Clients Images

As a group we have discussed, how we are going to display the client’s images on our background tables. We can up with several ideas:

1. Have several images, on the table and then have the rest in boxes underneath the table to show the rest.
2. The next was to have a categories table underneath, that when you click on a category, such as colour, then the images of the category would appear on the table. And when you clicked on a different category, then the images of that category would appear and the others would disappear. Then as you hover the images on the table they would grow and have a lightbox affect on them.
3. The other idea that I had was to have a CSS scroller underneath the table to display all of the images, and then on the background table have a few images defining the category. The customer looking at the site would then be able to scroll through the images and select the one they want.

As a collective group we have decided to go with idea, two, and have the table with a few images on the background table and then have a categories table underneath with the different categories, such as: colour, design, size.

When you hover then image on the background table then there would be a lightbox affect that appears around the image and increases the size of the image to give customers a better look.

We will achieve this affect by:

- content DIV
- lightbox DIV
- background_table DIV
- table_image DIV

Having the content DIV, with the lightbox DIV, this is set to display none and has a background of transparent black. This then has a DIV in it which is the background table, and the client’s images will be put into UL (unordered list).

The images on the table will be set to a size percentage and then on hover the lightbox DIV display will be set to true showing it, and the client’s image percentage will increased in size and will be wrapped by the lightbox DIV.

We will get the background or the lightbox DIV by, creating a small Photoshop file with a fill of black with a opacity of 40% and then save this file as a .png which supports the transparency and then this will be repeated through CSS to cover the whole DIV

Lightbox {
Background: url(../images/ lightbox_bg.png) repeat-x;
Width: 000px ;
Padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}

Development: Coding

I have coded the base HTML for the site, all i now have to do, is get the finished Cleaned Text from Andy, and i will be able to add it into the different web pages. This is a blank code page, with filler in it to show where headers and text is.


This is a piece of code that a forgot to add in, it is meant to be above the style sheet code.

Development

Today we delegated tasks for people in the group to do. We also discussed layout ideas, pages, styles, and finalized DIV ID names for CSS and HTML.

We also decided to have on a layout of the page, we came up with two ideas and made a group decision on which one we thought would look best.

Initial Layout Design:

Finalized Layout Idea:

These are the Tasks that we delegated:

• HTML Coding - Aarron
• CSS Coding - Matt, Dan
• Illustrations - tables - Alex D
• Putting photos into AI - Matt, Pete
• Exporting Web Graphics - Pete
• Emailing Client - Aarron
• Cleaning the Text - Andy
• Designing the layout - Everyone
• Choosing a design - Everyone
• Working with logo - Integrate into design (everyone)

Each Page:

• 1x h1
• Nav listed (nested with h2)
• H2
• H3

Div ID:

• Wrapper
• Header
• Navigation
• Content
• Footer

This code is for blind people and the JAW reader. These lines of code enable to person to skip straight to the text instead of having to listen to all the links. We display it as none in the CSS so that everyone else that is viewing the web page will not be able to see it but the JAW reader will recognize it.

HTML for Content Jumper:

<body>

<div id="contentjumper">

<a href="#content">Go straight to content</a>

</div>

CSS of the Content Jumper:

#contentjumper{

Display:none;

}

Searched: Gifts-Enhancements, Display.

These are the top 10 results in Google

1. http://www.displaygifts.com/
2. http://digg.com/odd_stuff/Golf_Gifts_Gallery_Golf_Ball_Display_Cabinet
3. http://www.giftshopmag.com/display_ideas_for_gift_retail
4. http://www.wvnet.edu/banner/preview/alumni60.html
5. http://www.freepatentsonline.com/7552553.html
6. http://platinumgifts.co.uk/product-view.html?p=530
7. http://www.preciousmomentsstationery.com/p173298/picture-collage.html
8. http://www.become.com/acrylic-tier-display
9. http://driver.wareseeker.com/free-personalized-gifts/

All of these sites for this search were not relevant

Searched: Table Ornaments + Paper + Card

These are the top 10 results in Google

1. http://www.encyclopedia.com/doc/1G1-20463596.html
This site is not relevant to paper cutting it is a directory. It speaks about rice paper ornaments but has nothing to do with them inside.

2. Two Peas in a Bucket
http://www.twopeasinabucket.com/cg_display.asp?cmd=display&seed_id=25629
This site is about paper cutting, but it is for 2-D cutting. They have different themes, with a slideshow of their recent work to show off what they can do.

3. http://ideas.thenest.com/100-days-of-holiday/decorating/Articles/sabrinas-paper-ornament-diy.aspx
This site is not relevant, but it does have an article within about how to make a certain 3-D paper cutting.

4. http://www.associatedcontent.com/article/1247860/simple_diy_christmas_place_cards_that.html
This site is not relevant but has a article within in about how to make them.

5. http://www.marthastewart.com/article/lipstick-101
This site is not relevant it is how to make gift card wrappings.

6. http://www.ipo.gov.uk/t-tmj/journals/6748/domestic/2483680.html
Object not found

7. http://eng.fnfa.myhomeserver.com/khigrinadiol.html
Server not found
8. http://www.save-on-crafts.com/ornamentcard.html
This site is not relevant.

9. http://www.indiabizclub.com/qxzptd/index.php?q=7;;;;Gold+Ornaments;;;;india
This site is not relevant.

10. http://findarticles.com/p/articles/mi_hb3291/is_2_26/ai_n29390336/
This site has an article about creating Christmas card ornaments: create memories while making special ornaments and decorations from old cards, but is not relevant.

From searching Table Ornaments + Paper + Card, I got 6 sites that were not relevant to paper cutting. I also got 2 sites that could not be found. And 1 site that had some relevance to card cutting.

Searched: Paper Cutting Services

These are the top 10 results in Google

1. G B Brooks
http://www.gbbrooks.co.uk/services.php
This company cuts various products from paper, to PVC. They only provide 2-D cuttings.

2. Perfection with Paper
http://www.perfectionwithpaper.co.uk/guillotining.htm
This site is all about cutting paper to standard and non-standard sizes. They only produce 2-D cuttings but not designs; they cut paper into different sizes

3. Paper Shapers
http://www.papershapers.co.uk/paper-cutting-service.php
This site is for cutting 2-D shapes, they have a long list of products that they do, and also of services they offer, because they offer more than just paper cutting

4. Automated Cutting Services
http://www.automatedcutting.co.uk/services.html
Once again this site is just for 2-D cutting, they use a flat bed laser, to cut through various materials.

5. The Paper Mill Store
http://www.thepapermillstore.com/pages.php?pageid=343
This site uses a laser cutter to cut the sizes of the paper; they can cut through various paper products.

6. http://www.eguide.asia/ASIA/SEARCH/Paper+Cutting+Service/1
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.

7. Paper and More
http://www.paperandmore.com/cutting-service.html
This site is for different size paper cutting.

8. http://www.kellysearch.com/qz-product-66117.html
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.

9. Paper Mojo
http://www.papermojo.com/Detail.bok?no=1792
This site cuts paper in 2-D

10. http://www.eguide.co.th/TH/SEARCH/Paper+Cutting+Service/1
This site is not relevant to paper cutting it is a directory with other link within to paper cutting.

From searching Paper Cutting Services, I got 7 sites that cut paper into different shapes and sizes but no that cut into 3-D. I also got 3 sites that were directories.

Logo

I have designed a new logo, I used Adobe Illustrator to design the logo, i was using Beige, Pea Green, Duck Egg Blue and Cream as my colour scheme provided by Card Cuts.
Documentation on how i made the logo:
f:\IT\Unit 3\Website\Card Cuts\Logo\Card Cuts Documentation.pdf