Assignment 3 Task 1

Task 1

 

Task 1

Introduction

In this assignment I will need to design my website, my website is about guitars and is targeted towards people who actually play the guitar. I am going to be explaining who my target audience is and review a very popular guitar website, GuitarCenter. I will create a site map outlining the pages and content in the website.

Review

I have looked at a popular guitar website called GuitarCenter. I noticed that the website puts their logo at the top left of the page and they have the navigation bar directly under. The colour of the website is bright (Red, White and Black). The website also has lots of image after analysing this, I am going to take a few aspects from this website and use it in mine, for example the colour pallet and the logo/navigation position.

Description & Target Audience

I will be creating a website that is about guitars. The purpose of the website is to inform people that visit the website about guitarists. The pages will talk about the skill and genre of music the guitarists. Following the pages, it will also explain the rig that they use and guitar. Finally, people that visit the site can access the store to buy signature guitars or goodies.

Target audience: The website is targeted towards people who are interested in guitars and want to know more about them. It is also is targeted towards people who might want to get into guitars. The website can be ideal for collectors as the store sells signature items.

Page 1 will be the homepage. The home page will talk about what you will see in the following pages.

Page 2 will be pointing out a few popular guitarists past and present; it will describe the guitarist and their genre of style.

Page 3 will be the guitars that these guitarists use it will have photos of various guitars that they use and the name of them.

Page 4 will talk about the guitarist's rigs; this page will have photos and full description of all the gear in the rig. The page will also tell you when the rig has been used.

Page 5 will be the history of guitar, for example it will talk about the evolution of blues and then to rock and how these genres have influenced guitarists such as the one example in page 2.

Page 6 this is the e-commerce page, this page will contain shirts, these shirts will contain catchy names that revolve around guitars. The shirts will also contain other various images that will be put on the shirts. Other merchandise will be on this page to sell, for example, mugs, hats and signature guitars.

Site Map (QSEE)

Colour

The first colour is black and I am going to use this colour as the background colour of the navigation. The second colour is light orange. I am hoping to use this colour as the image borders. This red colour is going to be the background colour that surrounds the logo and navigation. This is the entire content background colour. I have chosen this colour because it makes text and other colours stand out. This green colour is going to be used as a backup. This is because I don’t want to use too many colours. I want to keep the page looking attractive. I have selected the colour rule compound. I have chosen this rule because it allows me to select a wide range of colours instead of only given me shades of colours.

Fonts

Oswald - https://www.google.com/fonts/specimen/Oswald
< link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
This font will be used with the navigation.
Montserrat – https://www.google.com/fonts/specimen/Montserrat

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

This font will be used with the content of the site.
Indie Flower - https://www.google.com/fonts/specimen/Indie+Flower

<link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

This font is being used when I type the guitarists name on a page, for example Eric Johnson.

Logo

 

Page Design Wireframes

 

 

Images

This is an image that I will be using on the guitarist page, this image will align with the John Petrucci description

Alt - johnpetrucci

https://upload.wikimedia.org/wikipedia/commons/1/1e/John_Petrucci_-_01.jpg

 

 

 

I will be using this image on the Eric Johnson guitarist part of the page Guitarists

Alt - ericjohnson

https://infinityhall.files.wordpress.com/2012/08/ericjohnson.jpg

 

 

 

 

 

 

 

This is an image of Andy Timmons. I am going to be using this on the guitarist page for the description of Andy Timmons

Alt – andytimmons

http://www.dimarzio.com/sites/default/files/imagecache/player_page_image/player/andytimmons.jpg

 

 

 

 

 

 

 

I am going to be using this image for the guitars page, Eric Johnson is known for using this guitar

Alt – ericjohnsonguitar

http://www.dv247.com/guitars/fender-eric-johnson-stratocaster-electric-guitar-2-colour-sunburst-maple--41168?gclid=CLzE2tLptcsCFRS6GwodM-YA_w

 

 

 

 

 

I will be using this image of a guitar. John Petrucci uses this most of the time

Alt – johnpetrucciguitar

http://www.gak.co.uk/en/music-man-john-petrucci-6-wpiezo-stealth-black/107385?gclid=CL-BwJDqtcsCFZadGwodzf8HPA

 

This is Andy Timmons iconic guitar; I will be using this image as he has used this in many live performances

Alt – andytimmonsguitar

http://www.gak.co.uk/en/ibanez-at100cl-andy-timmons-signature/19078?gclid=COS6mLjqtcsCFUQcGwodoDwGZw

 

I am going to be using this image of John Petrucci’s set up for live performances or rig. This image will feature on the Rigs & Setup page.

Alt – johnpetruccirig

http://www.johnpetrucci.com/images/gear/bcsl2009/rack.jpg

 

 

 

 

 

I am going to be using this image of Eric Johnsons rig for live performances. This image will be shown on the Rigs & Setup page.

Alt - ericjohnsonrig

http://www.premierguitar.com/ext/resources/images/content/2014-04/RRs/Blues-Top-5-RR/Blues-5-FEAT.jpg?1398275526

 

 

 

This is an image of Andy Timmons standing next to one of his pedal boards that he used during a live performance. I am going to use this image on the Rigs & Setup page.

Alt – andtimmonsrig

https://dn3pm25xmtlyu.cloudfront.net/photos/large/822910003.jpg?1384952596&Expires=1457690330&Signature=HJI9L9GkjtClYRTrGGIyvoEvHKzLU0xZX5yiWilwVTnfoYb0StxHm~a57zaXs-dIzo~V1vDacqzuWCSsppey~HTOWcexxuKueiiB~2Do6F6JpDxz6Mxdqavg~cXGiZrI-V6YStzZYsZIhjiJ0j~yDMhyAs1-T563g~JsuM7tWIM_&Key-Pair-Id=APKAIYVGSUJFNRFZBBTA

 

 

 

 

 

 

 

I am going to be using this image on the history page. This image shows the evolution of electric guitar since 1931.

Alt – guitarevo

http://www.keytarhq.com/images/electric-guitar-history.jpg

 

 

 

 

This is the shirt that I will put on the shop page. The price will be set at £10.00

Alt - guitashirtshop

http://sadieandmitzi.com/wp-content/uploads/2015/08/The-Best-Guitar-T-shirts-Ever-10.jpg

 

 

 

 

 

 

 

 

 

 

 

This is an image of the Ibanez RG2550z. I am going to set the price for this at £900.

Alt - ibanezshop

http://medias.audiofanzine.com/images/normal/ibanez-rg2550z-407046.jpg

 

 

 

 

 

 

 

 

 

Interactivity

I plan to make the interactivity of the webpage very simple. In the home page I will have an image box that is large; the interactivity part is when the user clicks on either side of the image to move to another image. Clicking to the right of the image will show the next image, clicking left will show the previous.

 

Other interactive aspects of the site is the shop, the shop allows the user to select the quantity of an item and allows they to buy it. The customer can select their preferred payment method, i.e. PayPal, Debit Card.

 

Box Model

 

 

 

 

 

 

 

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

<!-- i have to use this code to be able to use the CSS stylsheet and edit the boxes, it links the style.css sheet that I created to be able used-->
    <title>Page Title</title>
</head>

<body>
<!-- This is where I have declared the box and it is to group block elements to be used in CSS, I have given the id for it 'container'-->
<div id="container">Container

<!-- this is the block element that will be contained inside the container-->

<div id="box">Box</div>
</div>

</body>
</html>

body

{

    background: black; /*background colour of the website is black*/

}

#container

{

    color: red; /*colour of the box is red*/

    text-align: center; /*text that is in hte box is centered*/

    width: 100px; /*the outside box is 100 pixels wide*/

    height: 100px; /*the outside box is 100 pixels tall*/

    border-style: solid; /*the border is solid black*/

    margin: auto; /*the container is set to the middle of the screen because the margin is auto*/

    background: white; /*background colour of the box is white*/

    padding: 1%; /*in between the border and the content it leaves a gap*/

}

#box

{

    color: black; /*this is the box that is within the container, the border is coloured black*/

    text-align: center; /*The text ‘box’ has been centred into the centre of the box*/

    width: 50px; /*the outside box is 100 pixels wide*/

    height: 50px; /*the outside box is 100 pixels tall*/

    border-style: dashed; /*the border is styled to be dashed and not solid*/

    margin: auto;/*the container is set to the middle of the screen because the margin is auto*/

    background: white; /*background colour of the box is white*/

    padding: 1%; /*in between the border and the content it leaves a gap*/

}

Unit 28 Task 2 - 1

Introduction

In this fact sheet I am going to be outlining the factors that will have an impact on the performance of a website. Within this fact sheet I am going to describe - User Side Performance Factors - Download speed, Client hardware and software platform and Client PC Performance. I will also be talking about Server Side Performance Factors, Web server performance, Bandwidth and File Types.

 

User Side Performance Factors

Download speed

users can have different types of download speed, some uses will have wired and some will have wireless, wireless tends to cut out more for the user and wired is known to be faster. If the download speed is slow, the user will have a lot of problems trying to download the webpage. Web developers need to test out a lot of different types of internet speeds to be able to make sure their website is able to work smoothly for the slower download speed users

Client hardware and software platform

Users have different types of browsers; therefore the way the CSS looks on each browser will differ. Some of these browsers will have a smaller display area for the user therefore the CSS will change and this could make images out of proportion for the user. Also, users use tablets as well, some tablets run different OS compared to the computer. For example, Apple iPad runs iOS, this operating system does not have Adobe Flash installed for it, if a website uses Flash, and errors will be displayed for the user. However Microsoft’s Surface 3 uses Windows 10, Windows 10 has Adobe Flash installed, and therefore the website described earlier will run correctly for this tablet.

Client PC Performance

Some clients PCs may not be up to date and a lot of the hardware inside their PC is outdated or not working. For example, the user’s computer may be infected by viruses; this could cause many errors for the user. However if the user is using an antivirus, sometimes the program will use a lot of CPU, this will affect the way the users browser functions, this makes things slower.

 

Server Side Performance Factors

Web server performance

The web server’s performance all depends on how many tasks the webpage has to do. For example, if the webpage has a lot of videos, pictures, and cookies etc. the web server will take a lot longer to load these items. The performance of the website is also affected web server capacity, which is basically bandwidth. The web server performance is a also decided by how the good or up to date the hardware is. If the hardware is old the way it processes data may be a lot slower and wasn’t designed for the long run of more technological advanced systems, i.e. the ability for unlimited bandwidth.  (Anon., n.d.)

Bandwidth

If the server side has more bandwidth it will allow more people to access it, therefore the higher the bandwidth the more users can access the website. Therefore the smaller the bandwidth the fewer amounts of people can download at once from the webpage. Server side scripting uses a lot of bandwidth and is only used when it has to be, otherwise developers will use client side scripting as this is executed on their PC. Most hosting providers nowadays allow for the use of unlimited Bandwidth. More components on a website will use up more bandwidth, therefore it is best to use compressed file types. (Anon., n.d.)

File Types

Usually now, web pages load almost instantly for most users, however some file types are too big and slower operating systems may stall when trying to download the webpage, for example, by using the file type .PNG, you will see that the file size is relatively high compared to using the file type .jpeg. By using less compressed files in the webpage, the web page will take a lot longer to download for some users. Sound file types are a huge factor to server side performance, by using .WAV you will be using a lot of space that the user will need to download, this will make it so that most of the sounds on the webpage will most likely not play when the user, for example, clicks on a button. However, the best alternative that most developers use .MP3, this is because it has a much smaller size.

 

Bibliography

Anon., n.d. Server Side Factors. [Online]
Available at: http://webunit28.wikispaces.com/Server+Side+Factors
[Accessed 6 November 2015].

Anon., n.d. User side and server side factors that influence the performance of a website. [Online]
Available at: https://10mahmoodsadaf.wordpress.com/about/
[Accessed 6 November 2015].

 

 

Task 2

Introduction –
 in this report, I am going to be describing how HTML and CSS work together to produce websites. I will describe what HTML is and what its purpose is in developing websites. I will also be doing the same for CSS. After describing, I will conclude by describing how HTML and CSS work together in the development of websites. This description will go over the ability for the programmer to pre define tags and the ease it will bring when having to come back to edit the tag.

HTML – HTML stands for Hypertext Mark-up Language, HTML uses tags like - <p> and </p>. This tag will make it so the text written within them, will be classed as a paragraph. Its purpose is to create websites, the language is very easy to learn, and this is because all of the code uses tags. HTML is the mark-up language that all web pages are written in. HTML is very basic and can cause a lot of confusion, the formatting for HTML is limited and is not very good at formatting multiple lines of text, though it is possible, it will take the programmer a lot of time to do so.

CSS – stands for Cascading Style Sheet. CSS is a plain text file format and is used for formatting content on webpages (HTML). CSS is able to edit the way text looks in more depth than what HTML can. Formatting for example can be – font, size, colour, border and location of HTML. CSS is also able to create a house style for the pages of a website. In other words, CSS will be used for the ease of being able to format multiple amounts of text. The programmer can set it so that a paragraph can be pre-defined, or the programmer can create a border at the start of the file and be able to edit it with ease if they need to change it.

Compare and Contrast – HTML is what everyone will write their page in. With HTML you are able to create a title, paragraph, insert links etc. However with HTML, you are limited to how you do this. For example, if you were creating a webpage for someone and you have one line as a different colour, the person may want that line changed to blue and the rest of the text to purple. With HTML, you will need to go to each line of code and manually change them. However, with CSS you can configure the tags. For example, <p1> can be pre-defined to have a font size of 50 and the colour to be red. Now if the person doesn’t like the way <p1> looks, you can go back to where you pre-defined how <p1> will look and change the values without having to go to each line of code to edit the colour.