Assignment 2: Me, Myself and I Links

https://k00174394.github.io/WebDevelopment/index.html

Assignment 2: Me Myself and I Testing

 For Testing, I tested my website with various types of testing including:

• Functional Testing
• Functional Testing is a testing technique that is used to test the features and functionalities of a website
• Data Verification and Validation Testing
• Data verification is the process of checking that the software meets the specification required
• Validation testing is the process of checking whether the specification captures the potential target audiences needs
• Application Specific Functional Requirements 
• Application Specific Function Requirements testing is described as when a user inputs information to the website, how the input behaves and it's output to the user
• Interface and Error handling testing 
• Error handing is described as the process of responding to the occurrence, during computation and the exceptions that it may have
• Compatibility testing 
• Is the testing of the website to ensure that various browsers and platforms can run the website without any problems
• User Interface usability testing
• Is the process of ensuring the website meets it requirements and can live up to the standards for the user
• Usability testing
• Is when a user is given a list of tasks to perform on a website. This is to ensure that a website meets the highest standards and that the likes of navigation are tested. It is good practice to get a user of the website to do this as they will be able to confirm that they can make their way around the website without any problems, loading time is fast and overall the website is presented in a practical manner.

.

FUNCTIONALITY TESTING

Check that the link takes you to the page it said it would.	✓
Ensure to have no orphan pages (a page that has no links to it)	✓
Are all referenced web sites or email addresses hyperlinked?	✓
If we have removed some of the pages from our own site, set up a custom 404 page that redirects your visitors to your home page (or a search page) when the user try to access a page that no longer exists.	✓
Check all mailto links and whether it reaches properly	✓

FORMS TESTING

Acceptance of invalid input	✓
Optional versus mandatory fields	✓
Input longer than field allows	Full name may be entered into Name so field has large spacing
Radio buttons	✓
Default values on page load/reload(Also terms and conditions should be disabled)	✓
Are all of the parts of a table or form present? Correctly laid out? Can you confirm that selected texts are in the “right place?	✓
Does a scrollbar appear if required?	✓

DATA VERIFICATION AND VALIDATION TESTING

Is the Privacy Policy clearly defined and available for user access?	X
At no point of time the system should behave awkwardly when an invalid data is fed	✓
Check to see what happens if a user deletes cookies while in site	Default Values are deleted
Check to see what happens if a user deletes cookies after visiting a site	Default Values are deleted

APPLICATION SPECIFIC FUNCTIONAL REQUIREMENTS

DATA INTEGRATION

Check the maximum field lengths to ensure that there are no truncated characters?	✓
If numeric fields accept negative values can these be stored correctly on the database and does it make sense for the field to accept negative numbers?	X Field accepts negative numbers. This does not make sense for users to insert negative numbers for a contact number

DATE FIELD CHECKS

Assure that leap years are validated correctly & do not cause errors/miscalculations	Not Applicable
Assure that Feb. 28, 29, 30 are validated correctly & do not cause errors	Not Applicable
Is copyright for all the sites includes Yahoo co-branded sites are updated	Not Applicable

NUMERIC FIELDS

Assure that lowest and highest values are handled correctly	Not Applicable
Assure that lowest and highest values are handled correctly.	Not Applicable
Assure that numeric fields with a blank in position 1 are processed or reported as an error	Not Applicable
Assure that both + and - values are correctly processed. Assure that division by zero does not occur.	Not Applicable
Include value zero in all calculations	Not Applicable

INTERFACE AND ERROR HANDLING

SERVER INTERFACE

Verify that communication is done correctly, web server-application server, application server-database server and vice versa.	✓
Compatibility of server software, hardware, network connections	✓

EXTERNAL INTERFACE

Have all supported browsers been tested?	✓
Have all error conditions related to external interfaces been tested when external application is unavailable or server inaccessible	✓

INTERNAL INTERFACE

If the site uses plug-ins, can the site still be used without them?	X Map must have a plug in
Can users use copy/paste functionality? Does it allows in password/CVV/credit card no field?	Users can copy information. Credit card and password field is not applicable
Are you able to submit unencrypted form data?	Not Applicable. No passwords on website

COMPATIBILITY

BROWSERS

Is the HTML version being used compatible with appropriate browser versions?	✓
Do images display correctly with browsers under test?	✓
Verify the fonts are usable on any of the browsers	✓
Is Java Code/Scripts usable by the browsers under test?	✓
Have you tested Animated GIFs across browsers?	Not applicable

VIDEO SETTINGS

Screen resolution (check that text and graphic alignment still work, font are readable etc.) like 1024 by 768, 600x800, 640 x 480 pixels etc	Not applicable
Colour depth (256, 16-bit, 32-bit)	Not applicable

CONNECTION SPEED

Does the site load quickly enough in the viewer’s browser within 8 Seconds?

✓

PRINTERS

Text and image alignment	✓
Colours of text, foreground and background	✓ Consistent
Scalability to fit paper size	✓
Tables and borders	✓ Consistent
Do pages print legibly without cutting off text?	✓

User Interface Testing Checklist

COLORS

Are hyperlink colors standard?	✓
Are the field backgrounds the correct color?	✓
Are the field prompts the correct color?	✓
Are the screen and field colors adjusted correctly for non-editable mode?	✓
Does the site use (approximately) standard link colors?	✓
Are all the buttons are in standard format and size?	✓
Is the general screen background the correct color?	✓
Is the page background (color) distraction free?	✓

CONTENT

All fonts to be the same	✓
Are all the screen prompts specified in the correct screen font?	✓
Does content remain if you need to go back to a previous page, or if you move forward to another new page?	✓
Is all text properly aligned?	✓
Is the text in all fields specified in the correct screen font?	✓
Is all the heading are left aligned	✓
Does the first letter of the second word appear in lowercase?	✓

IMAGES

Are all graphics properly aligned?	X One image on lowcost products is not properly align
Are graphics being used the most efficient use of file size?	✓
Are graphics optimized for quick downloads	✓
Assure that command buttons are all of similar size and shape, and same font & font size	✓
Banner style & size & display exact same as existing windows	✓ Except for the use of font face on facecare page
Does text wrap properly around pictures/graphics?	✓
Is it visually consistent even without graphics?	✓

INSTRUCTIONS

Is all the error message text spelt correctly on this screen?	X no error messages
Is all the micro-help text(i.e. tool tip) spelt correctly on this screen?	✓
Micro help text(i.e. tool tip) for every enabled field & button	X
Progress messages on load of tabbed (active screens) screens	X

NAVIGATION

Can all screens accessible via buttons on this screen be accessed correctly?	✓
Does a scrollbar appear if required	✓
Is there a link to home on every single page?	✓
When an error message occurs does the focus return to the field in error when the user cancels it?	No Error Messages

 USABILITY

Are all the field prompts spelt correctly?	✓
Are fonts too large or too small to read?	✓
Are names in command button & option box names are not abbreviations	✓
Can the typical user run the system without frustration?	✓
Do pages print legibly without cutting off text?	✓
Does the site convey a clear sense of its intended audience?	✓
Does the site have a consistent, clearly recognizable “look-&-feel”?	✓
Does the site look good on 640 x 480, 600x800 etc.?	✓
Is all terminology understandable for all of the site’s intended users?	✓

Overall, I believe testing of my website really well. It enabled me to see what I could do to my future websites but also enabled me to ensure the website is suitable for the target audience. 

Assignment 2: Me, Myself and I Deployment Update

Upon research, I was finally able to get the map working with an API. To do this I followed these various steps:

1. Go to the Google API Console
2. Create a new project
3. Click continue to enable the API 
4. On the Credentials page, get an API Key

Once I retrieved my key I got my co-ordinates online to specify my location. I inserted my API key to my map and commit the changes through terminal. These changes worked. 

Assignment 2: Me, Myself and I Deployment

To deploy my website I had to go through many steps.

Step 1: Create an account
First, I had to create a GitHub account by signing up to www.gibhub.com. To sign up I used my Knumber to create my account.


Step 2: GitHib Repository
The next step was to create a Github Repository. These files are used to store my website online. Once I ensured I was logged in I created a repository called WebDevelopment. Once I created my repository I opened Terminal. Terminal is an interfaced used to connect with the underlying operating system via a shell. To get set up I entered the following command lines:

• PWD
• This produces the directory that the system is currently at.
• LS
• Lists the directory
• CD
• Allows users to change where the directory is located
• Git Status
• Displays the Github application
• Git clone https://github.com/K00174394/WebDevelopment.git
• Links the repository to the Github
• Git checkout --orphan gh-pages
• Creates a new orphan branch
• git add --all
• Adds all the files that are available on the repository file to github
• git commit -m "Adding Pages"
• Commits all changes made to the files and uploads them to github
• Git push --origin gh-pages
• Pushes all the changes 

This allowed me to upload my website online. When uploading my websites and viewing it online I noticed some items do not work correctly including my Google Maps. My next step is to modify these pages and ensure they work correctly.

Link: https://k00174394.github.io/WebDevelopment/

Assignment 2: Me, Myself and I Development

Assignment 2- Development

Introduction 

The main objective of this assignment is to develop a website on a thing that interests you. Stated in the last blog I decided to develop my website about makeup. Before developing the website I designed various prototypes using Balsamiq. The advantage of developing prototypes is to achieve a fully functional website.

As part of the assignment, I must make sure that all images are copyright free. Because of this, I decided to take my own images and also use copyright free images from Stockphotos and FreeStockPhotos. 

Images I captured myself include: 

Powder Image

           Images I got from various copyright free images include:

Copyright Free Image: Source Free Stock Photos

Once I captured my images and ensured that they were suitable for my website I began creating my template. Using my prototypes on Balsamiq I began coding my website using Brackets. I decided to use a basic html style which include's a navigation bar on each page to allow user navigate throughout the pages and also be able to return to the home page. The navigation bar will stay consistent on each page. If the website is inconsistent it slows the visitor down causing them to lose interest and they will leave the website. Links included on my navigation bar include: 

• Home

• About

• Brands

• Makeup

• Face Care

• Eye Pallets

• Low Cost Makeup

• Animal Cruelty

• Brushes and Tools

• Gallery

• Useful Links

• Contact

I coded my navigation bar using hyperlinks, paragraphs and various divs including navigation div and dropdown div. The CSS for the navigation bar formats the navigation horizontal on the website and added padding to the navigation bar. The dropdown div positions the dropdown list from the navigation bar and provides a box shadow around the dropdown list. 

Navigation bar 

Navigation bar with drop down list and box shadow 

CSS For navigation bar

My website also contains many other consistent elements. One of the main consistent elements of my website is a search bar. This search bar redirects users to Google searches.

Developed Search Bar

Like the navigation bar, the search part was developed using div's and a form. The form is used to create an input field for the user to search for information. This information is then directed to Google using the action within the form. 

HTML for Search bar

Secondly, each page contains a footer section which provides users with information about who created the website and also provides them with a link that redirects them to the websites sitemap.

Footer that contains information about developer of the website and link that redirects user to the websites sitemap

Once I decided on my consistent elements on my website I designed a logo for my website. I designed the logo using both Adobe Illustrator and Adobe Photoshop. I downloaded the chosen font from dafont.com. After development of the logo my next task was placement of the logo. I decided to centre the logo on the page because it will be more convenient for both desktop and mobile users 

Centred logo for website

The background image used is a powdered purple eyeshadow. I thought this image was most suitable for the website and also worked well with the colour scheme. I added the background to my css page using a url. The image used is copyright free and is sourced from stockphoto.com

Websites background image

Overall Layout design

Implement&Content Design 

Once I created my basic template for each webpage on my website, I began to add content to my pages. As my website is an informative website I include a lot of text and images. I began with designing my index page. My index page is my main page of the website that the user will land on when they visit the website. When designing this page, I decided to keep it simple and welcome the user to the website. I did this with various images and edited them to be more suitable for the website. The images are modified to look like a polaroid image. On each image I included words to welcome the user to the website. All images used on the welcome page are copyright free and are sourced from FreeStockPhotos.

Index.html (Welcome Page)

The next page I created was the about page. The about page contains information, images and tables about the website's content, makeup, the history of makeup and the benefits of using makeup. Information on this page was researched from various websites and these websites have been sourced on the web page.

About.html (Contains images, text and tables of information)

When designing my website it was compulsory to include a table. I decided a table would be beneficial for the brands webpage. I divided the brands table into four unique sections. These sections include:

• Natural and Green Brand
• High End Brands
• Drug Store Brands
• Independent Brands

Once I created the table and filled in the information I decided to style the table. First, I included a table caption to the webpage using the <caption> tag. I then added a  background colour for the table header using my colour palette chosen. Next, I decided to add colour to the over table and every even cell in the table was colour. I did this using various css rules. 

about.html (Including compulsory table)

When designing the makeup.html I included a page with image links that redirect users to the pages also included in the makeup dropdown list. This provides users with two directions to navigate to these webpages

makeup.html

or

Secondary Navigation bar when hover over Makeup

When a user clicks brushes and tools they are met with 2 image hyperlinks. These image hyperlinks separate the brushes from the tools. The brushes.html page is displayed with a slider. A user can click left and right the images on the page changes and provides the users with a detailed description of the product.

Brushesandtools.html

brushes.html slider that provides information about each brush

tools.html provides information about the main tools of makeup

I decided I would include a page about animal cruelty. Animal cruelty is an important aspect of makeup as some laws allow countries to test products on animals. All products on my website are cruelty free and I provided information on my website to make more users aware. All information on this page that I have researched is also cited and hyperlinks are included on the webpage.

animalcruelty.html

My low cost makeup web page include images and information about low end makeup brands that are as good as high end brands. I included this page for users to be aware of these products, their price and where they can purchase them. 

lowcostmakeup.html

When developing the face care page I decided to include an embedded font-family. The font that I have chosen to include is called Impris and I got this font from dafont.com. To include this font I had to construct various css rules. I first had to initialise the font and provide it with a name. I then had to download the font, create a folder for it and call it's path in the css rule. Once I did this, I created a div around the paragraph of text that I had chosen to include the font family on. In the div css I simply just called the font-family. I included it in the first step on the face care page as this is the most important step in the routine.

facecare.html including font-face

font-face code

Finally, the last page include in the secondary navigation bar is Eye Shadow Pallets. When developing this page I decided to use an image slider. This image slider allows users to click an image. When the image is clicked the image will enlarge and provide the users with information about the product. The user also has access to a left and right navigation bar on the images which allows the user to swipe left and right throughout the eyeshadow pallets. 

Resource: W3Schools.com

eyes.html

enlarged image and information about the pallets

When designing my gallery page I decided to keep consistency of how all my images look throughout the website with a polaroid image effect. All images in the gallery are my own images of various makeup looks that I have created myself or a makeup artist has created for me

Makeup.html including various image in polaroid image effects

I included a useful links page to my website for users to gather even more information that it not available on website. I included:

• Blog links

• Youtube tutorial links

• Link to a local makeup group

• Cruelty free products.

I coded this page using images and hyperlinks. 

HTML for useful links

I styled this page similar to my gallery and my makeup page. I decided to do this to provide consistency throughout the website. Consistency is extremely important in website design as it provides the users with familiarity

Usefullinks.html redirects users to various blogs, youtube channels and makeup websites

For my contact page I provided the users with a form so they can leave comments on how to improve the website or any queries they may have about makeup or the website. When designing the form I included validation for each field. If the user does not fill in the field or does not fill in the field correctly they will be prompted with a dialog box that will specify to the user what is wrong. Once the form is filled in correctly the user clicks submit and the information on the form is sent to my email address.  On this webpage I also included a map. This map specifies to the user the location of where the website was created/based. I did this using a Google API. To specify the location I had to collect the co-ordinates for my location and then receive a key from Google.

Content available on the contact us page

Form validation to specify to the user that information must be filled out before the form is submitted

Form validation to specify to the user that information must be filled out before the form is submitted

The final page I created was the sitemap. A sitemap is a list of pages of a web site accessible to the users. I created the sitemap using data lists and hyperlinks. When creating my sitemap I ensured to include the hierarchy of the website. This makes it easier for users to locate pages they may be searching for.

Sitemap.html

Overall, developing this website was extremely interesting. It was interesting to learn a lot about makeup and it's history when doing research for pages. It was also interesting to learn how to create sliders for the brushes page. I really enjoyed my experience making this website and feel like I have met all my targets I set out when developing this website