CS2033 Assignment 3- Business Website Solution

Multimedia and Communications II
Overview

You are creating a new small business and need to create the website for its online identity. You must first consider what the company is selling (it should be some kind of physical product, not a service) and come up with a name for it. Then create an attractive website that catches the eyes of viewers and provides them with the important information about this business and its products. There are several requirements you must follow the design and development of this website, for example, it must be a Bootstrap website. You are given a lot of freedom in terms of the business itself and the overall design of the website. Be creative!

Overall Requirements

• You must write your own code (No Kompozer or Dreamweaver, html5editor, etc.)
• You must use Bootstrap for the basis of the site
• The site must have multiple pages (not a single, scrolling page format) • Include the following 4 pages: o Home
o Products o Contact o References
• Include a Bootstrap image carousel somewhere on the site
• Include "enhanced" parallax (using JS or jQuery in conjunction with CSS) on a background image somewhere on the site
References section below for more details (same policy as Assignment 1)
• Keep track of the URLs of any images you take from these sites so that you can easily reference them without having to re-find them later

Folder Structure

• Name the project's root folder "business"
• Home page must be named "index.html"
• All HTML files are named properly (all lowercase, no spaces, relevant name, .html extension)
• Within root folder, add subfolders: o "css" to contain CSS file(s) o "images" to contain all images o "js" to contain JavaScript file(s)

Meta Requirements

• Set the page titles to be formatted as: CompanyName | PageName
• Use www.favicon.cc (or another site/software) to create a simple logo that relates to the business and add the logo to each of the webpages
• Add links to external CSS and JavaScript files within the head. Do not use any inline or internal CSS or JavaScript (except JavaScript event listeners).


Top – Requirements

• Each of the webpages must begin with a top section
• The top section must contain a banner (it can be either designed in Affinity Photo / Photoshop or it can be made with HTML and CSS) with:
o The name of your business o A short, catchy slogan
o An image that relates to the product(s) your business is selling
• Above/below the banner, add a Bootstrap navigation bar with links to each of your pages
o Within the navigation bar, include a dropdown menu with 3 links to external websites that are in some way relevant to your business (i.e. competition, manufacturers of a part used in your product, etc.)

Home – Requirements

• Write a summary of the business structure and what you sell (5-6 sentences)
• Include at least 2 pictures that are relevant to the business
• Include a section about the "team" o Come up with at least 3 members (could include yourself and 2 fake people, or 3 fake people)
o For each team member, include a headshot or profile picture, name, position in the company, and a short biography (3-4 sentences)

Products – Requirements

• Come up with at least 6 different products that your business is selling o If you wish, you could have some duplicate items that are different colours, i.e. you could have 3 different items that are each available in Red or in Black, and that would constitute the 6 products. Don't have just 1 item in 6 different colours though! You must have at least 2 or 3 unique items.
• For each one, add a div that includes the following product information: o Product name
o Product code (make up a code consisting of some combination of letters and numbers for each product and they all must follow the same format)
o Image of product o Description (2-3 sentences) o Add to Cart button
 Clicking this button must open a Bootstrap modal window with a message to indicate that the item has been added to the cart. (Note: this is not an actual e-commerce site so you don't have to create a cart that tracks all the added items).
• All the product boxes should have the same design and they should all be displayed neatly in a grid formation.

Contact – Requirements

• Create a contact web form with the following input fields and include corresponding labels with each (where applicable): o Name (text input) o Email address (text input)
o Reason for message (select / dropdown menu with the options below)
 General inquiry
 Pricing and bulk rates
 Product info
 Shipping
 Other
o Product ID (text input) ** details on this field are given in the next bullet point about form modification
o Message (textarea) o Send (submit button)
• Perform form modification to hide/show the Product ID textbox (and its label) depending on the selection in the "Reason" dropdown menu. If the user selects "Product info", show this Product ID textbox. If anything else is selected, hide this textbox. Trigger this function with an "onchange" listener.
• Apply "onblur" JavaScript form validation on this contact form to indicate if the entered text in each of the text-based fields is valid or invalid. Show the validations by changing the corresponding fields' text or border colour to green (valid) or red (invalid). The validation conditions for each field are as follows (invalid if the given condition(s) are not met):
o Name: valid if text is at least 4 characters long and contains no numbers (don't worry about punctuation or other characters).
o Email address: valid if it follows the format: characters @ characters
. characters (you can use a regular expression or another approach)
o Product ID: valid if text matches one of the product codes shown in your Products section above (remember this field will sometimes be hidden, but the validation portion shouldn't be affected by this since it can only be triggered when the field is visible and "blurred").
o Message: valid if text is more than 10 characters and less than 30 characters in length.

References – Requirements

• Include links to the sites in which you obtained each of the pictures used in your site (including the favicon)
• If you took a picture yourself, you can reference it like "Picture of headphones: taken by me"
• Format or lay out the reference page cleanly just like any other page

References Policies

• Pexels https://www.pexels.com/
• Unsplash https://unsplash.com/
• Pixabay https://pixabay.com/
• StockSnap.io https://stocksnap.io/
• Negative Space http://negativespace.co/
• Life of Pix http://www.lifeofpix.com/
• Cupcake http://cupcake.nilssonlee.se/
• Foodiesfeed https://foodiesfeed.com/


Example: The Pexels policy is found here: https://www.pexels.com/photo-license/ Note that Pexels is one of the acceptable sites listed above so you don't have to provide this license link, but this is an example of what most stock photo sites will have somewhere on their website, but often with different policies.




Extra Information on Links

• Creating links to bookmarks on the same page involves 2 steps:
o Create the anchor at the spot where the link will be jumping to. To do this, put your cursor in the spot where you want it and add the HTML: <a name="AnchorName"></a> (where AnchorName is a unique name you want to give it, which should relate to its location)
o Now add the link using the standard <a href=""> tag and for the href value you will use #AnchorName, where AnchorName is the name of the anchor you want to jump to. This must be the same name you gave the anchor when creating it in the last step.
• Links that point to external sites must open in a new tab. To do this, add target="_blank" within your link <a> tag.
• Links that point within the same website are internal and should open in the same tab. The normal link tag will default to this behaviour so nothing extra is needed for these links.
• Email links will try to open Outlook or another email program when clicked. To create such an email link, set the href attribute to the email address and prefix it with mailto: (i.e. <a href="mailto:email@email.com">Email</a>).
• Use relative paths for your internal links and image sources so that they work both locally and on the server when you upload them.

Submission

1. Go through this document again and verify that you completed the assignment exactly as instructed.
2. You must upload all your webpage files to GAUL (not Panther) via FTP.
a. Use WinSCP, FileZilla, or another FTP program.
b. Login to GAUL using your Western username and password and port 2033. The host name should be sftp://cs2033.gaul.csd.uwo.ca (OR select SFTP in the protocol box and omit this prefix from the host name).
c. Transfer your business website into the root area of this web server space, maintaining the correct folder structure.
3. Verify that all the files uploaded properly.
a. Open the following link (replacing username with your Western username): http://cs2033.gaul.csd.uwo.ca/~username/business/
b. You should see your main webpage load there. If you don't, verify the filename is index.html and retry the previous step to upload the files.
4. Submit the working link on OWL.
a. Navigate into the CS2033 Assignment 3 page in OWL.
b. Copy the link of your GAUL business folder into the submission text box (replacing username with your Western username):
http://cs2033.gaul.csd.uwo.ca/~username/business/
c. Beneath this link, write the words "Websites Notes:" and then provide bullet point notes to explain where you included the image carousel, ScrollFire, and parallax effects.
d. Submit the assignment on OWL. Do not just save it and leave. Ensure that it is submitted! Check your email right away and look for the automatic OWL email verifying your submission. Keep this email in case of any discrepancy.