Lily Alomari

Criterion E: Product development Advanced techniques used to address the client’s requirements:

● Slideshow of images (page 1) ● Navigation (pages 1-4) ● Map with address of store (page 4) ● Facebook that opens up to a new a window (pages 1-4) ● Manipulated graphics (page 1)

Organization of the website (Document object model) This indicates how the website is structured:

The content and images are placed in each tab throughout the website. My client, Katy, choose the colors for the website and names for the folders. Specific values, services, and open times are placed under Schedule and Services . A slide show of the images is placed under Home , and information about Katy is placed under About . Information on address, email, and phone number is under Contact Us.

The structure and organization of the web pages Language : Javascript/ Html5 The website was created using Wix website editor, and the language programming used is mainly Javascript. Javascript allows the code to be the user's processor instead of the web server thus saving bandwidth and strain on the web server. The Javascript language uses the DOM model and provides plenty of prewritten functionality to the various objects on pages. It provides text size, fonts, and spacing. Javascript client- side scripting is provided throughout this website. http://kbnorman8.wixsite.com/katybellsbeautybar Below is a screenshot of Html5 coding: Home Page:

About Page:

Schedule and Services page:

Calendar Page:

Contact us page:

The internal structure and organization of the website

The names used in the boxes are part of the MySQL design Database. They are all used for a different design layout. These names are provided from the Javascript language programming in order to make it easier and more organized to portray the website. The header is the section where the page title and navigation bar are located. This is what customers will first see when viewing the website. The page title is my clients stores name, so customers will be able to see what the website is advertising. The image slideshow presents images of my clients store, so customers can see a visual representation of the store.

Technique: Manipulated Graphics

All images on this website were taken by my client Katy Norman. I used a slideshow to present the photos in a fashionable and creative way. This will attract the attention of the customers to continue viewing the website. The map was provided by the

Database design using MySQL to provide a visual representation of where the store is and how to get there. The Email direct sender application was provided in order to make it easier and quicker for customers to email my client to answer questions regarding her business. Additionally, each page has a style of fading for the transitioning of pages used from html5 coding. This style of transition Technique used: Navigation

1) From the left toolbar, click the Add icon. 2) From the Add list, click Buttons & Menus. Click Text Menu or Buttons Menu. 3) Click outside of the menu to close the Menu Settings window

A menu is added to the site and the website has a link ready to be used for navigation.

When creating the “Contact Us” page I added a Formmail. A Formmail allows web viewers to send to the same email address every time, and is a simple script to setup. The Formmail is coded as a Javascript, which allows viewers to send messages to my client and vice versa. It was created using an Html form according to scripts instructions. The Html coding of this provides appropriate language to communicate with the script.

On the “Calendar page” there is calendar placed where my client can add special events on certain day for her customers to see. Adding a calendar allows my client to add events and embed in various event templates - such as upcoming events, most popular, newest added, or a monthly view

design. This is a html code calendar generator to display monthly html calendar of any month.You can enter your monthly plan and generate a printable monthly planner here. You can take the code and use it in your web page to display a monthly planner with all your events or planes displayed with dates.

The website includes a facebook icon that sends the customer directly to my client's facebook page when it’s pressed on. A single click on the icon will upon a new window with the following link displayed in the button. The language is adjusted by loading a localized version of the Facebook JavaScript. A link in html to a facebook page is replaced with the word 'PLACEHOLDER' in the URL with the name of the Facebook page, which you can find by visiting your Facebook and looking at the URL in the address bar. The Html code will uses the buttons located on this website.

Word Count: 785