Sources

Here I have listed all the sources that I used to create my project.

Images

Clothes

Chiara Fashion., ND. Womens Clothing. [Electronic Print] Available at: http://www.chiarafashion.co.uk/images/P/9173-9173.JPG [Accessed 25th April].

Fashiolista Love Your Style., ND. Womens Clothing. [Electronic Print] Available at: http://www.fashiolista.com/item/1817622/ [Accessed 25th April].

Fashiolista Love Your Style., ND. Womens Clothing. [Electronic Print] Available at: http://www.fashiolista.com/item/4615083/ [Accessed 25th April].

Shoes

I Love Comfort Shoes., ND. Pink Dice High Top Shoes. [Electronic Print] Available at: http://www.ilovecomfortshoes.net/shoe/pink-dice-womens-hi-top-shoes-13249.html [Accessed 28th April].

Christian Louboutin Patent Leather Thick Soles High Heels Shoes Red., ND. Heels. [Electronic Print] Available at: http://www.christianslouboutinshoessales.com/christian-louboutin-patent-leather-thick-soles-high-heels-shoes-red-p-43.html [Accessed 28th April].

Accessorize Glittery Sandals., ND. Sandals. [Electronic Print] Available at: http://www.mycelebrityfashion.co.uk/articles/accessorize-luisa-sandals-1303393608.jpg [Accessed 28th April].

Accessories
Paul Frank Mini Spot Bag., ND. Bag. [Electronic Print] Available at: http://www.arkclothing.com/Paul_Frank_Mini_Spot_Bag2.html [Accessed 30th April].

Glittery Bangles., ND. Jewelery. [Electronic Print] Available at: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSjib5SmVAqnSJHe_K9dCM8OSFBjPhjAbrqZsKVkk6fCyJqJ5GxmEmYJgNqJgwJI0Isord48AQu-XgopOFD5un0VpCPEnBdG2owYNXxJTLxvMHSDdfD1MSPFIIBojP5KvMvJf3NMMHeWE/s1600/4.jpgl [Accessed 30th April].

Earrings., ND. Jewelery. [Electronic Print] Available at: http://s7ondemand4.scene7.com/is/image/Signet/5138868?$detail$ [Accessed 30th April].

About Us Page
Fashion Image., ND. Fashion. [Electronic Print] Available at: 
http://25.media.tumblr.com/tumblr_l2lu6dBVql1qbguu6o1_500.jpg [Accessed 30th April].


Information
The coding was research from several sources all throughout although I have only displayed the date of when it was first looked at:

Adam Shailer., 2011/2012. SMU Moodle. [Electronic Print] Available at: http://moodle.smu.ac.uk/course/view.php?id=287 [Accessed 5th April].


W3School., 1999-2012. W3School. [Electronic Print] Available at: http://www.w3schools.com/  [Accessed 5th April].

Improvements

Overall there is an improvement in this assignment compared to the first one. There is more understanding and practice of coding. this is a result of more research and time being spent in understanding how HTML, Java and CSS work.


The layout could be improved as I found some elements of coding the layout challenging and unsuccessful at overcoming these obstacles. The login section and search section of the HTML pages were messy and out of place.


The tabs on the had very large gaps between each other therefore things looked out of place and unprofessional. Below are examples of the problems I was having:

In the search bar I could have also include a search button for users to press once they have entered their request.  I didn't include this aspect as the button would have appeared outside the box because of the problem with the spacing.

The CSS page was kept quite tidy although some CSS was added to the HTML pages instead of the CSS page. This resulted in having mixed coding instead of separating them in order to avoid confusions. As you can see CSS coding has been added to the image, I added the width and height instead of placing them in the CSS page.

The javascript was coded in each page whereas if there would have been a specific page dedicated just for the java it would have been easier to code. More javascript could have been added to the site, even though a canvas was not added it was attempted throughout the process of coding the site. I struggled to get this feature to work therefore I removed the coding for it also because I didn't think it would fit in with the theme of the site.

The Java for the results page needs improving, validation on the features of the forms were coded although they didn't appear to work. The alert boxes which were coded to appear if there was any information missing or when the information was selected to be processed didn't not appear. This is an aspect that needs to be researched more thoroughly in order to be understood better and therefore work.

The site works on other search engines other than Safari, it was also checked on Mozilla Firefox although the video didn't work due to its format. A different video format should be included next time in order for it to work on other search engines as not all support mp4.

Apart from improvements that still need to be undertaken there are improvements which have already taken place compared to the first assignment. The layout of my coding is much more organized and easier to understand by grouping elements in div tags, it made it easier to correct errors and add new coding to what had already been placed.

Overall I feel that I have understood and improved on my coding skills, I dedicated more time to this assignment especially over the Easter holidays therefore the more time I dedicate the more I will eventually understand. Most of the coding I have included I understand why they are there and what they do. The next step is to improve on elements which did not seem to work this time round. More practice on layout techniques and placing will need to be undertaken. The java needs to be looked into in more detailed to help me understand why certain coding is programmed that particular way. All these aspects will be looked into in order to continue to show improvements in my work. Time management plays a huge role on my performance, it has improved from the first semester but still needs further improvement as this assignment was then left to one side to concentrate on others. Taking all these aspects into consideration and looking at what has been produced I can say I am pleased with the result.

Organisation of Files

During the process of creating the site, as more files were being added to the folder of the project organisation had to take place in order to not mix up one file from another. A styles folder was created which contains the CSS styles sheets. A folder labelled images contains all the images of the site whether it is the products offered or other things such as buttons. A videos folder was also created to store all the videos that the site will contain.


Below is an image of how all the files have been grouped and placed into one whole folder.

CSS Folder

In the styles folder all the CSS files were added apart from creating a styles sheet I also created a reset styles sheet. As you can see before the file name is the folders name of where the file was placed.

Images Folder

In this folder I placed all the still images that were going to be placed in the site therefore in the coding when referring to the sources the folder was referred to before the image name. Below is an example of how the images were coded on the HTML page and how they were displayed on the folder the images were either JPG or PNG format. 

Videos Folder

In the video folder I carried out the same process as with the images and CSS files. This time the name before the file was video with the format of mp4. I also added controls in order to allow users to be able to play, pause the video and increase or decrease the volume. There is also the option to enlarge the screen of the video to appearing as a full page, the option to decrease and refresh the video is also available to users.

Organising all the files will make it easier to find files and code them using GEDT it will also help solve any errors or alterations that need to be made as the files are easier to find.

Javascript

A good amount of javascript was required for my assignment even though it is an aspect of coding which I struggle with I attempted it to the best of my ability. 

Javascript for Website Greeting

I included some coding to greet users as they search throughout the site. The coding will either say good morning or good afternoon depending on the time of day it is.


Below is an example of the greeting and the coding for it:

The Java was coded to greet users Good morning if its before noon and Good Afternoon if it's after 12. 

Javascript For Image Rollover

I added Java to the image rollover in order for the other section of it's coding to work. The function was to swap the image which is was the image rollover did. 

Javascript for the Register Form

In the registration HTML page I coded Javascript in order to validate the registration form. The first function I coded consisted in finding out if the username, password, and email was entered  in the form. Therefore if the information was correct the registration would proceed, if the information was not entered a message will appear asking users to enter their information in the field where they haven't. 

The next function was to check if the email was valid or not. A pop up box would appear if the information was incorrect telling the user to re-enter their password. A validation of the username has also been provided, here the form will check if the username entered was above 0 characters. 

The password was also validated, it had to be a minimum of 5 characters if the password entered is less than 5 characters a pop up will appear notifying the user that the password is too short. In the coding I added that the password had to be a maximum of 8 characters long if this was exceeded a pop up will appear notifying the user that the password has exceed the limit.

The last validation in the registration form was the registration confirmation, if the users click on confirm they will be asked if they would like to proceed if the answer is yes another message would appear notifying them that their details have been recorded. If the registration was cancelled a message will notify the user that their registration has been cancelled. In this process if there is missing information in the required fields before being able to proceed users will be notified that they have to fill in all required fields. 

Image Rollovers

One of the requirements to be included in my assignment was the use of image rollovers. An example of an image rollover which I included in my html pages was the homepage icon. Here is the coding that I provided for this image rollover.

                                       

The homepage icon will first appear in black on the page as the user first accesses the site. 

As the cursor moves over the homepage icon the colour will change to pink.

When the cursor is pressed the icon will change to a light grey.

After the cursor has been clicked and then released the icon will change to white with a black outline.

CSS

The CSS coding was kept in a separate page in order to avoid so much coding displayed on one page and repeating the same CSS for each HTML page. When the CSS was coded the other HTML pages were linked to it by the code displayed below. The link has the type of file it is (such as the format) and the link of where the files are placed. Apart from the CSS style sheet I also include a reset stylesheet.

I organised the coding into sections so that it would be easier to code and correct if there were any alterations needed to be made. 

Coding the Layout and Features of the Site

Ive started coding my web pages for my site, this moment in time I am focusing on setting out the layout before I include any important aspects which were set out in my assignment brief such as the image rollovers.


The layout of my site will be set as how I explained in the planning section. Even though I have based my layout on the one I originally planned I added some extras. Below the logo a homepage image rollover and a shopping cart image have been added. The sign up option was placed on the menu tab instead of the login tab as there was some trouble with placing certain things on the layout.


I added a drop shadow on the search tab, login tab and menu tab in order to make the layout more effective and not so boring.

Homepage

Underneath the menu tab the products were listed one underneath the other. I have displayed the image of the products along with the name, price and size options in a drop down list. Below is the coding I constructed for the products, in the div I added the border in the style tag. The image source was place to allow the program to locate it, I also set the size and where i wanted the image to be placed. The drop down list in the products section offers the sizes available of that product. The sizes were set out very basic as small, medium and large instead go being numbered. The image was set in a div, there I placed the class, source and dimensions of the image. 

Below the cover photo of the homepage I incorporated the video tag to provide users with a video on fashion items. The video I incorporated was the new featured the Twist and Wrap dress the video shows different ways of wearing the dress. I have provided the coding that I used for the video, apart from the coding of the source of the video that is provided I also included the coding controls in order to allow users to play, pause the video. 

Products Page

Underneath the menu tab the products were listed one underneath the other. I have displayed the image of the products along with the name, price and size options in a drop down list. Below is the coding I constructed for the products, in the div I added the border in the style tag. The image source was place to allow the program to locate it, I also set the size and where i wanted the image to be placed. The drop down list in the products section offers the sizes available of that product. The sizes were set out very basic as small, medium and large instead go being numbered. 

About Us

The layout of my about page follows the same structure as the other layout although underneath the menu tab a fashion image was displayed on the right with a description about the website on the left. The image adds something extra to the page apart from the black, white and pink theme. It also makes the text more appealing to read as there is some extra to look at. The text is displayed with a pink border and white background, a drop shadow has been included in order to complement the rest of the layout features as they also have a drop shadow.

Sign Up/Register Page
In the registration page the layout underneath the menu tab is simplistic as I didn't want the register page to have too much on it. This is because the purpose of this page is to register in the site therefore users will only concentrate on that process instead of being distracted. I added a plain black border around the form in order to notify users where the form ends. The registration page doesn't consist of much; only a username, password and email address are required, if users would like to purchase an item their details would be recorded during the payment process. A confirm registration button has been added to the form in order to confirm the users details. 

    

The CSS coding of my site has been displayed in the following blog post.

Contents of the Site

Apart from the requirements set out in the assignment brief there are other aspects which a website offering products would contain. 


These are displayed bellow:

• Company Logo
• Menu: Categories of Different Products Offered 
• Search bar
• Login & Sign Up/Register Form
• Sub Categories of the Products Offered
• A Page for Individual Products
• Terms and Conditions of the Site
• Description of the Company- About Us
• Shopping cart

All of these will not be included in the site as the requirement is 3-5 pages long therefore I will only concentrate on creating some of the ones mentioned above. 

The main areas which will be focused on are listed below:

• Company Logo
• Menu: Categories of Different Products Offered 
• Search bar
• Login & Sign Up/Register Form
• Description of the Company- About Us

Now that I have decided what I will like to include in my site it's time to start on the HTML and CSS coding to create the pages of the site.

Layout Planning

Layout

Even though I am re-creating the website I created previously I will be changing aspects such as the layout. I have looked at several websites to have an idea of a common layout structure so that I can create a user-friendly layout which people will be familiar with. 

Before I create plan of different layouts for my hompage I will have a look at different sites to see how they have structured their homepage layouts.

Below I have displayed several online clothing websites:

Topshop-

Boohoo-

Miss Guided-

Now that I have looked at different sites I will create several mockups of how my homepage could look like.
-

Layout 1:

Layout 2:

Layout 3:

Layout 4:

Looking at the layouts which I have designed for my homepage I have chosen to use layout 4 as I think that the menu tab would be best set out in the middle at the top of the page. Many websites such as the ones which I displayed previously have the menu set out in a linear structue and displayed in the middle.

Now that I have designed several layouts of what I would like my hompeage to look like I will start coding an index html page. 

 

Assignment Brief

For my second scripting assignment I am required to create a website (around 3-5 pages) which has a good use of javascript in order to help the websites functionality. In this blog I will track my progress and post my ideas of what I would like to incorporate in to my site. When it comes down to creating the site I can choose anything I want as long as I answer the brief with the requirements. Even though javascript is very important in this assignment I need to include HTML and CSS coding in my site.

The website must contain the following:

• simple browser applications/ utilities
• canvas image generation/ animation
• reali-time DOM manipulation
• audio/video players
• form pre-validation
• dynamic CSS style modifications
• image roll-overs with preloading 

At the moment I am deciding whether or not to re-create the website I created for my first assignment. Although I would like to drift away from fashion and create a site that is completely the opposite.