Friday 17 June 2016

Unit 20 – M2: Discuss how a scripting language can improve functionality

Introduction

It is essential that websites function and the functionality of websites in this day and age are of a high standard. There are various things that could improve the functionality of a website, one of them being the type of scripting used; either client side scripting or server side scripting. So therefore in this report I will be focusing on describing how the scripting language can improve the functionality of a website, alongside comparing the benefits of client side scripting to server side scripting and describe how client side scripting can improve user experience and validation in a website.

Client side scripting

This is an essential part of HTML as it enables the scripting of webpages which then makes the webpages have different content/reactions depending on what the user inputs and other variables. Client side scripting is simply websites or web programs that execute on the clients computer/client side, which is for example on the clients web browser. Instead of executing on the webserver. The script is mostly written in the HTML document of the website which makes it an embedded script however, it could be written in a separate file. Client side scripting simply works by transferring the source code of the web page from the web server it is stored on to the client’s web browser; these source codes contains all the information and instructions; like the action that happens when a button is clicked.

Server side scripting

Server side scripting is simply a scripting technique that customises the webpage for the user upon their request to the server. This is done by adding a script on a web server and this script creates a response specific to the user. This is written in languages such as server side JavaScript, Python, PHP and executes on the web server.

User experience

Like I have mentioned in the introduction of this report, websites functionality can be improved with the use of scripting languages. Web designers improve the user experience of the website using scripting languages like JavaScript. JavaScript helps with interactivity and the fact that users only come in contact with the finished product/front-end part of the website, JavaScript will help improving the user’s experience. Making the website adaptive to the user’s device will improve the users experience for example, viewing a website on a desktop and viewing it on a tablet will be different due to their screen sizes. JavaScript could be used in order to make the content of the website adapt to the devices so the user can view it without any problems.

Users having control over their webpage due to interactivity improves their user experience. The scripting language that supports interactivity which can help in improving user experience is JavaScript. JavaScript can be used to create pop up boxes that give the user information for example, when the user clicks on “next” when filling a form, if the user misses an important slot there could be a pop up box alerting them to where the mistake is. This improves the users experience as they know where the issue is rather than having to scan through the entire webpage to spot the issue.

Scripting languages can bring about widgets like a timer or clock to websites, which improves the functionality of the website. The user will be able to view the real time while browsing on the webpage improves the functionality of that webpage slightly as the user will not have to look elsewhere. This makes the entire site user friendly.

Scripting languages help in gathering information about the visitors of the website and the information is then used to improve the website. This is known as Web analytics which is done using JavaScript and also a server in order to collect the information and analyse the information.This work by using cookies to track the user’s usage of the site, this information when derived can then be used in improving the website and make the user experience better and entire functionality of the website.

JavaScript can be used in creating rollover buttons which can make a single button have various states. Having rollover buttons on a webpage helps in improving the user experience as it makes them aware of where their cursor is, if its hovering over the button or not.

Validation

Validation is key when it comes to websites especially form validation for various reasons like the information not being correct. Scripting languages can be used in validation. The datatype of the information entered by the user can be detected using JavaScript and if the datatype is not allowed in the text box then there could be an alert. This ensures the data integrity which improves the validation. An example of this would be, client side scripting not enabling the user to type in and submit alphabet in the text box of phone number.

Using client side scripting for validation of websites is beneficial as the validation is carried out on the user’s device/browser makes the process rapid, due to the fact that the request doesn’t have to be made to the server to carry out validation on the form.

Comparing the Advantages of Server side and Client side scripting

Server Side Scripting	Client Side Scripting
Using server side scripting could be seen as beneficial due to the fact that unlike Client side scripting Server side reduces load on the user’s device, as we know the language is stored on the server and request is made to the server then information is passed to the user which means all the load and work is on the server side. Using Client side scripting on the other hand means that the script is copied to the user’s device and ever request is fulfilled on/by the device which means load on the device and if the device is slow/old then it will reduce the speed and user experience. However, based on the internet speed of the user using server side could also be slow. Server side takes care of various processes like payment, menus and database queries.	Using client side scripting means that a lot of things can be done in a short period of time. This is because it executes on the device and doesn’t need to request to the server and wait for a response. This is beneficial as the user will have a better experience due to the fact that they do not have to wait to perform certain actions. Unlike server side which simply requires request to the server in order for performed actions to be fulfilled.
Server side scripting does not depend on browsers or special plug-ins to function. This means that whatever browser is being used by the user, the website will functionality and user experience will be at its best as the website will be efficient. This when compared to Client side scripting in this context is beneficial as client side highly depends on plugins and browsers which mean that the usability might be decreased if the users web browser does not support scripts.	Client side scripting may improve the usability of the website for users, this is only if the user’s website supports script. Using Client side scripting could improve the users experience as it allows for more interactivity. Using server side could also allow interactivity however, it is less immediate which reduces the user experience as it will take a longer time to interact with the website due to the server trips.

References

Wikipedia. (2016). Client-side scripting. [online] Available at: https://en.wikipedia.org/wiki/Client-side_scripting [Accessed 15 Jun. 2016].

Wikipedia. (2016). Server-side scripting. [online] Available at: https://en.wikipedia.org/wiki/Server-side_scripting [Accessed 15 Jun. 2016].

Sqa.org.uk. (2016). Differences between Client-side and Server-side Scripting. [online] Available at: http://www.sqa.org.uk/e-learning/ClientSide01CD/page_18.htm [Accessed 15 Jun. 2016].

M2 - Describe the purpose and function of JavaScript and JQuery

Introduction

When developing a website, there are various things involved. There is the design/presentation and also the coding that goes with it. Websites are mostly made for audience to access and use so therefore they have to be responsive and cater for the user’s device. JavaScript possesses many of the features of a programming languages however it is not a programming language. It is a key tool used in web design for various reasons and also Jquery is also often an essential tool when creating a website. This document will be covering the purpose and the functions of JavaScript and Jquery the scripting languages used in web design.

JavaScript

JavaScript is simply a scripting language used for creating interactive websites. JavaScript in websites are used for situations where validation is required and also to make the webpage interactive.

This is a client side language which means it functions on the user's computer and does not have anything to do with the server of the website. IT DOES

JavaScript works with the browser and is executed by the browser which means that there is no required software application needed to run it. JavaScript is used in validation of pages and a prime example is the error pop up messages given when you miss out a mandatory part of an online form. JavaScript is popular due to the fact that it is widely supported by all the browsers available. In Currently with the advancement of technology, users mostly access websites on their portable devices like phones and tablets and JavaScript is used in websites in order for the website to adapt and render the site to the sizing of the screen of the device being used to access the website. Also websites are mostly made for the purpose of giving information, marketing and also e-commerce which means that the users will have to interact with the website in order to shop or gain information and JavaScript is used to create the interactive features in the website like slideshows and dropdown box that helps in navigation.

JavaScript has similiarities to other programming language to an extent, an example of how it is similar to programming languages is the fact that it has features like variables, IF statements etc. Using conditional statements like IF statements allows the developer to use JavaScript for validation and a validation could be if a firstname on a form page is blank, a pop up alert message will display to alert the user of this error.

JavaScript is not capable of formatting the users hard disk unlike programming language which is capable of doing so. This is a high risk when it comes to languages that execute on the users computer so JavaScript is safe when it comes to the language affecting the users data integrity.

JQuery

JQuery is a pre-coded JavaScript; this can be referred to as a library where JavaScript is stored for web designers to use. This mainly stores open-source JavaScript. JQuery enables the developer to easily utilise open-source JavaScript available which is one of the main purpose of JQuery. JQuery saves time when developing a website as it enables the web designer to utilise JavaScript's fast without having to write out the code and this reduces the chances of making any sort of error. This also allows the developer to include the basic JavaScript available in the Jquery quickly without having to always retype it as it can be called upon by the developer. The lines of code that comes from JQuery is laid out in a simple and short manner which makes it easier to understand the code and spot any errors or unwanted code.

Example of code

JavaScript

Function changeBachground(color) {

Document.body.style.background = color;

}

Onload=”changeBackground (‘blue’);”

jQuery

$ (‘body’) .css (‘background’, ‘#ccc’);

Reference

W3schools.com. (2016). JavaScript Tutorial. [online] Available at: http://www.w3schools.com/js/ [Accessed 17 May 2016].

W3schools.com. (2016). jQuery Tutorial. [online] Available at: http://www.w3schools.com/jquery/ [Accessed 17 May 2016].

Wikipedia. (2016). JQuery. [online] Available at: https://en.wikipedia.org/wiki/JQuery [Accessed 18 May 2016].

Friday 20 May 2016

M2 Unit 28 - Describe the main design tools used

Introduction

When designing and creating website there are various tools that are used to aid the planning, design and the actual developing stage of the website. When designing and developing my website, I have used a variety of tools in order to ensure that the website is successful. In this report I will be describing the tools that I have used, speaking about how I have used it and the purpose of the tool. Some of the main design tools I have utilized are colour palette, google fonts, etc.

QSEE Superlite

QSEE superlite is simply software which is equipped with sub-tools within the application to help in the analysis and design of systems. The sub-tools that are available with the software are beneficial to a lot of fields as it has several models that can be used as tools in the several fields. The sub-tools deliver a range of support techniques like entity-relationship models, dataflow diagrams, decision tree and the Unified Modelling Language (UML). In the design stage of my website I utilised one of the support techniques available, I used the decision tree support technique. The reason I have used this was to aid in the creation of the site map for the website. Creating and having a site map is essential and was crucial in the planning stages as this was a map that was followed when creating the navigation as the purpose of the site map is to know what the Webpages will be called and how the navigation through the site will be like. Using this to make the site map made it easy to understand due to the layout of the decision tree.

Colour Palette

A colour palette is another tool that I used when creating the website. There are a variety of colour palettes available but the one I used is called "Coolors". I have used a colour palette (Coolors) for the purpose of putting together a colour scheme that I will be using within the website. The colour palette used was beneficial to me as I had to save the colour scheme I selected and this simply allows the user to not only creates but to also save the colour scheme selected. When creating a website it is essential that the developer has a scheme to follow throughout the website to give it a professional look and the purpose of me using Coolors as a tool is to help in selecting the colour scheme I will be using throughout the website. The tool Coolors gives of the actual CSS reference/code of the colour which means that when it is included in the CSS I will get the exact colour as chosen without having to stress to find the colour code or name. The layout of the colour palette I used is efficient as the colours are placed side by side meaning that I could see the colour contrast of the colours that I was selecting to be part of the scheme.

Fonts

Fonts are a huge part of a website, especially with websites that have description and general information. The tool that was used for the selection of the font that I will be using in certain parts of the website was Google Web Fonts. The fonts available in the Google Web Fonts are open source fonts which means that they can be used free of charge. Knowing that they are open source fonts is one of the reasons why I have used Google Web Font as a tool, because I do not need permission nor do I need to pay to use the fonts available on the platform. Also the fact that there is a section when selecting the fonts that allow you to preview the font and also the size and weight of the font. The selling point that made me use this tool is the fact that it provides the HTML/CSS coding that is required when trying to format the code.

Wireframe

Wireframe is the basic design of the website. Wireframe is a model that is created in order to demonstrate how the website and individual webpages will look like. This simply acts like a guide to the developer, making the developer aware of how they need to format a page to look like. I have created and used a wireframe which was a guide for me when I was developing the website. The wireframe tool that I used is called Cacoo and this helped in the creation of a visual layout of the website. I have used Cacoo in order to let me have a design and also to let me know where content should be placed and images on the webpage when developing the website, this also played a huge part in the structure of the finished website as I could tell where and how I wanted the navigation bare to be placed and where the images and content should be. The tool Cacoo has various uses like it can be used in the creation of wireframes, network chart, diagram etc. This tool also has templates that can be used to give an idea for a website design.

Graphic Programme

Graphics in a website is essential as it makes the website more appealing. In the creation of my website I have used a graphic programme to create the logo for the website, the programme was Adobe Illustrator. This software is a vector based software which is my major reason for using this tool to design my graphic for the website as the logo had to be a vector. The logo will have to be scaled which is an advantage of having the logo as a vector which means it can be scaled without the quality of the image reducing. Another graphic programme that was used was Adobe Photoshop and the reason I used this was to create the design for the hoodies that will be sold on the website.

Conclusion

There are several tools needed when attempting to design and create a successful website and above are some of the essentials. I have used all of these tools in order to ensure that the success rate of my website is high. As seen above, some of the tools are needed if not the website will not be of a professional manner. An example will be wireframe, it is essential that a wireframe is created as then there will be somewhat of a design to be followed by the developer when creating the website. As a web designer it is important that you are aware of all the tools that are needed to plan and created a successful design.

Friday 15 April 2016

M1 unit 20/ M2 unit 28 - Assess different implementation styles of CSS

M1 - Assess different implementation styles of CSS

Introduction

CSS which is an abbreviation of (Cascading Style Sheets),this is the code that formats the page, within CSS there are various implementation styles and in this document I will be assessing the different types of implementation styles of CSS and describing them and also covering the advantages and disadvantages of the styles. There are three CSS implementation styles which I will be describing and they are; Inline, embedded and external.

Inline

Inline style is an implementation style within CSS which is utilized within the HTML part of the code. This is an implementation style which is written in the tags of the code, inline style can be applied to any of the code. This basically styles the text, for example <head style="colour: blue"> </head> this means that the heading will be colour blue and the "colour:blue" will be the inline style. This style cannot be created in the style builder, this will require the developer to go in the HTML part of the code and write it in. This style is restricted to being used for just that part web page that they have been utilized in, meaning that if this style was required elsewhere it will have to be created again. The inline style when used overwrites the other implementation styles of CSS which are the embedded and external.

The inline implementation style of CSS has its advantages and disadvantages and one of the advantages is that it aids in testing of the web page, due to the fact that the inline implementation functions only in the part of the code that it has been implemented in means that if you run the web page you could easily see if it's working on the text that it was used to style and if it looks good then it can be used in the external style sheet.

Also inline CSS is very easy and fast to add. All that has to be done is to implement the style within any of the various HTML element of the code and the fact that it can be included within as much of the HTML elements means that the styles of the text can vary. Which is very beneficial in the creation of modern WebPages, it can be used to create emphasis.

The amount of time that will be spent trying to fix any part of the style if there is a problem with it is short, due to the fact that it will be found within the HTML source of where the styled text was embedded onto. This means that it will be easily found and can just be tweaked to make it work.

Inline style is easier to understand and this will be beneficial to new developers, the reason being that the style is applied within the same bit of the element that is being styled. When creating websites, the purpose of the website in most cases is to provide information or service to other people deriving the service or information and in order to deliver the information or services the user will have to be able to access the website. Using this style will enable the page to be accessible faster meaning that it helps the webpage load up, as it is within the same coding and doesn't require a new file being created for it.

With all of the good parts, now I will cover the flaws of using the inline style. The inline style is harder to maintain and is more work for the developer, especially when it comes to it being utilised within a big project. Because they are used within individual parts of the HTML elements which they wish to style, this means that they need to be present within every single element that the style is needed on so if all the paragraphs need to be in "Calibri font size 11" the inline style will have to be added to every single <p> tag, which will cost the developer precious time.

Inline style cannot be used to style pseudo-elements and classed. This is a disadvantage as it means that this method cannot be used to do what the developer might want the page to do. For example it can't be used to change the hover colour of a link on a webpage while the other styles can. The inline style can only change the colour of the link but not style it when the mouse is hovering over it like with external or embedded.

The inline CSS style could override certain part of the element which was not meant to be styled, but it does this regardless due to the fact that it is the most specific in the cascade. And this is a disadvantage as if the reason for implementing the inline style was to change the colour of one word; it could possibly change the colour of the whole sentence which will affect the presentation on the actual webpage.

Embedded

Embedded style is another implementation style of the CSS which is basically a style that is written at the head of the coding file. This embedded style then styles all of the tags included in the page where the embedded style was included in. With embedded style all of the styles for the webpage are all specified at the head of the page, for example p {colour:blue} being added to the top of the page will mean that all of the paragraph on that webpage will be written in the colour blue.

The embedded style has its advantage and one of them will be the fact that the styles only have to be declared once and this will be beneficial when the website owner knows exactly how he/she wants the webpage to be styled like as it will save time for the developer as all he has to do is to declare the styles at the top of the page and it will style the rest of the page.

Embedded style can style the hover colour unlike the inline CSS which is a huge advantage that it has over the inline CSS, as this means the site will look more appealing and it will aid with the usability of the website as the user will know exactly what is happening and they will know when their cursor is over the link.

The contents of the tags can be styled without the developer having to add the style to each HTML element unlike the inline style. As once the style is declared at the top of the page then it works across that web page so no need for it to be added in individual HTML element.

Compared to inline CSS it will take longer to load up because there is less HTTP requests and also because of the page size increases meaning more things for the user to download meaning it will take longer to download unlike the inline CSS.

A disadvantage of using embedded CSS in the creation of a webpage is the amount of time that is taken to format the website. Using this style of CSS will mean that this will have to be written on every page created. Although it is much better than inline CSS which will take longer, it still will be rewriting the code for the CSS once on each page created.

External

This is the type of CSS style that enables the developer to change the entire webpage simply by changing one file. This works by referring to the CSS style file if there are more than one webpage involved in the website.

Using external CSS enables the developer to have full control of the structure of the page which is beneficial as this means that the developer could tweak anything he/she wants in order to meet the requirements of the owner.

Unlike the other styles the external CSS style can be reused on separate files which is an advantage as it saves time for the developer who is creating the site, as styling the website won't have to include the developer creating a new code for the style the code can be reused. This CSS implementation style makes development a bit easier when it comes to work rate because the developer won't have to write the code on every of the webpage within the website, all the developer has to do is keep referring to the CSS file that has already been created which is also to do with saving time.

This style of CSS makes loading of the page very fast compared to the other styles, due to the fact that the styling will be done on a separate file which basically decreases the file size of the webpage meaning that there is less things to be downloaded by the user. This style of CSS aid the developers to create WebPages that are high in content and are easily readable meaning that it will be helpful when it comes to user deriving information or services and it will also be helpful in the developers search optimization. This will bring more traffic towards the website.

However just like the rest there are disadvantages and one of them is that the download time is much longer, this is because this type of CSS is in a separate file which means that the browser will have to request access from the web server in order to get the CSS file and the request to web server slows down the entire loading time.

Also if the number of styles required in the web page is of a small amount, it will simply make the work complex. Using this makes the work complex and also the time spent creating the webpage will be longer due to the fact that the developer will have to navigate to another file in order to access the CSS.

Bibliography

W3schools.com, (2015). CSS How to. [online] Available at: http://www.w3schools.com/css/css_howto.asp [Accessed 26 Nov. 2015].

Quackit.com, (2015). Implementing CSS. [online] Available at: http://www.quackit.com/css/tutorial/implementing_css.cfm [Accessed 26 Nov. 2015].

Beginnersguidetohtml.com, (2015). External, Internal and Inline CSS Styles. [online] Available at: http://www.beginnersguidetohtml.com/guides/css/styles/external-internal-inline-styles [Accessed 26 Nov. 2015].

Introduction

I will be developing a website called MCshop and this is a motorcycle shop that sells gear for riders. This is website is aimed at motorcycle riders, making the essentials available to them. This document will simply contain the design of the website. It is essential that there is a design stage before the implementation as this ensures that the website will be developed successfully.

Website review

The website that will be getting reviewed is a similar website to what I am developing. Sports bike shop is a motorcycle shop and they sell a range of essentials for motorbike riders. They sell goods like helmets, gloves, boots, accessories, spare parts etc. This store is somewhat similar to the website I am creating as we will be offering similar goods, however Sports bike shop will offer more goods than my website.

The website is user friendly due to all the components of the website. The website contains several drop down boxes that help with navigation and the colour scheme chosen for the website makes it easy to view the item and it contrasts highly with the items and text making it readable. The layout of the website is remarkable, the top part of the website holding information about the goods and services they offer while the footer has support/company information. The website is fairly straight forward to use which is beneficial as this will encourage their customers to shop with them.

http://www.sportsbikeshop.co.uk/

Site map

The site map shows the whole process of the website, this shows that the site opens up into the homepage and then you can navigate to the other pages. The shop page will then lead to the checkout if the customer choses to purchase a product available.

The Screenshot beside holds the design for the website I will be developing and this is the homepage of the website and from what is seen you can tell there are buttons above to help in navigating the website. And then this will hold an image of bikers well suited in safety gear.

And in the textbox, I will be giving a brief explanation on the website and then right next to that will be pictures of some of the goods offered.

Then below will hold the pictures to the corresponding buttons that can be clicked by customers to navigate to the page on helmets etc.

Cacoo pages

Just like the Helmet page, this is the gloves page. This page is also accessed by clicking on the right button. This page will contain pictures of gloves suitable for riding in the summer and winter with brief description and specification of the gloves in the textbox.

This page is the helmets page which can be accessed by clicking on the helmet button. This page will contain pictures of flip up and full face helmets with brief description and specification of the helmet in the textbox.

This is the bike jacket page which is similar to the other pages. This page is also accessed by clicking on the jacket button. This page will contain pictures of the jackets that are suitable for riding in the summer and winter with brief description and specification in the textbox.

This is the checkout and here the customer will fill in their information in order to checkout and purchase the goods.

This is the shop page. This page will contain the image of goods available for purchase with the detail/price included and from this the user can choose what to purchase.

Logo

Colour palette

Above is the screenshot of the colour scheme that I will be using throughout my website, this was chosen using a colour palette. I have chosen this colour scheme because it is generally appealing to the eyes, also this is a colour scheme that will appeal to my target audience as they will be mostly adults and this is a colour scheme is appropriate for them. The colour scheme chosen are all bright colours and I have chosen to go with this because it will make it easier to view the items on the website as some of the items could be of a dark colour which will make it less visible to a customer, so using this colour scheme will create a contrast making the page easily readable.

https://coolors.co/ebedee-e2e9ec-d9e5eb-cde2ed-c1dfee

Google Fonts

I have chosen a font to use across the entire website; this font was chosen using Google fonts. I have selected this particular font because of it has the adequate thickness that I desire. And I specifically looked for a font with this amount of thickness to make it easier for the customers to read the text and also the font chosen doesn’t have a fancy look to it, this font dots every “I” and is simply written in the standard way which makes it easy for the customer to read/understand the text.

font-family: 'Roboto', sans-serif;

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

Interactivity

I plan for the website being developed to be interactive. First of interactivity is simply the changes that occur when a user interacts with the computer/website. The website being created has to be interactive as it is an informative and also an e-commerce website, so therefore the user will have to interact with the website in order to proceed with an order or gain information. The ways in which the user will interact will be when navigating through the website and also when placing orders. Any other time when the user is not doing on of those actions then they are not interacting that is simply background programs. It is essential that the website can be interacted with as this keeps the customer interested if they can freely do what they want on the website.