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

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

Introduction
Scripting languages are normally associated with HTML content and they are normally used by developers to improve the way a website functions. Scripting languages such as CSS, JavaScript and JQuery are normally integrated during the development of a site in order to optimise the overall functionality of the website this in turn, can have a positive effect on the accessibility and readability of the site. For this reason, this blog is going to be set within the parameters of discussing how a scripting language can improve the functionality of a website.

User Experience
Scripting languages can be used to improve the functionality of a site through its user experience. Developers can improve their sites user experience by using scripting languages such as, JavaScript. Users only interact with the front-end of a site and JavaScript can be used to enhance this interface. A particular way that scripting can improve user experience is through adaptation of context. When users load up webpages on a device JavaScript can be used so the context on the webpage can be adapted to the platform that the user is accessing the website on so the user can get optimum viewing. (W3Schools, 2016) For example, if a user was to access Wikipedia content on a desktop and a mobile phone the context would not be outputted on the screens the same way on both devices due to the difference in screen sizes. So JavaScript is then called in place to make the content adapt to the different screen sizes so the user can read the content on the webpage properly.

User experience on the web can also be improved through scripting languages due to its interactive nature. This improves user experience because it allows them to gain more control over the actions that the webpage makes. JavaScript supports alerts on sites, confirming of choices and prompting of users. For example, if a user clicked on a link on a webpage JavaScript can be used to make an alert box come up that states that the link will open in another window. This alert is improving user experience because the site is responding based on the actions of the user.

Scripting languages improve functionality of websites when they are used for the addition of gadgets such as a clock or a calculator. This is improving functionality because users are able to make calculations on webpages and real-time is available to them. Furthermore, these client-side calculations that scripting brings helps make sites user friendly and improves the usability of the overall site.

Scripting can also improve the functionality of a site through analytics. Web analytics can be defined as the collection and reporting on web data for assessing and improving the effectiveness of a site. (Wikipedia, 2015) This analytic can be carried out using JavaScript. JavaScript based analytics operates by tracking each visitor’s behaviour on the site using cookies and developers can infer information such as the duration of time spent on the site, the order users visited the webpages on a site and the internal links that were clicked by the user. (Google, 2016) Developers can then improve user experience on a site based on this information.

Validation
Client side scripting can be used to improve form validation. JavaScript can be used to check the datatype that is entered by the user into an input box and based on the data a response can occur. This improves form validation because it helps improve the integrity of data that is entered into forms by users. For example, if a user accidentally enters a letter while typing in their phone number the client-side scripting would not allow the form to be process but instead alert thje user of the problem at hand so he/she can correct the mistake.

The fact that client-side scripting is carried out on the browser end rather than the server end to improve validation because it means that validation process is faster as the server does ynot have to carry out the process. PHP is a scripting language that is normally used for server side scripting. This scripting language improves the functionality of sites by creating functional log in areas for users x of ba site. The scripting language helps to make sure that when users enter their credentials into the site their logon details work and the right information is requested and sent to the client. The PHP is also responsible for processing information that is needed to be saved on a database for the site.

Comparison of Advantages of server and client side scripting

Advantages of Server side scripting	Advantages of Client side scripting
The main advantage that comes with using server side scripting is that complex processes such as sending the plugins to browsers is carried out quicker without affecting the performance of the overall computer like it would if the process was carried out on the client side. This is an advantage that supports the effectiveness of client side scripting because it helps ensure that users are not affected when straining processes such as compiling of information are being carried out.	Client side scripting can be very beneficial to users in terms of user experience due to the fact that with client side scripting it allows users to have more interactivity as it responds instantaneously to user’s action. This will give users better overall experience on a site compared to if server side scripting is used because the actions would not be as immediate due to the latency involved in scripting getting compiled and getting sent to the client from the server.
Another advantage of server side scripting is that some browsers don’t support JavaScript so server side script comes in place in order to load dynamic webpages properly without any problem. An advantage of client side scripting that can be compared to this is that usability of webpages improve when scripting is carried out on client side. Server side scripting can be classed as backup for dynamic webpages being outputted properly due to the fact that if a user didn’t have a browser that supported script server side can come into play.	Client side scripting can also help developers save time when developing their site because client side scripting are easily reusable and obtainable as there is site that can be used as a library for client side scripting. This is more beneficial over server side scripting because developers don't have to code themselves they just need knowledge on how to implement it.
Server side scripting also brings advantage to the website developer due to the fact that when server site scripting is implemented the developer can make single website template and use it for the whole site so this means that when a new dynamic page is created it will automatically use it. This is beneficial because it saves time for the web developer. Compared to client side scripting where the developer has to a create a new HTML template for every dynamic page.	Client side scripting gives developers the chance to have more control over how their website behaves in terms of widgets that are made available on the site. This also includes add-on that is meant to be on the site.

 

Bibliography

Google, 2016. Google analysticsq. [Online] Available at: https://developers.google.com/analytics/devguides/collection/analyticsjs/#what_data_does_the_tracking_snippet_capture [Accessed 6 06 2016].

W3Schools, 2016. W3Schools.com. [Online] Available at: http://www.w3schools.com/js/default.asp [Accessed 06 06 2016].

Wikipedia, 2015. Wiki. [Online] Available at: https://en.wikipedia.org/wiki/Web_analytics [Accessed 06 06 2016].

 

If you need any help with any other units just ask - femzym@gmail.com

P3 (5/6) : Describe the purpose and function of JavaScript and jQuery

P3: Describe the purpose and function of JavaScript and jQuery

Introduction

JavaScript is a scripting language that is normally used in the development of HTML and CSS websites. JavaScript contains many features of a programming languages but it is not a programming language because it doesn’t possess key attributes that most programming language possess. JavaScript is a client side and not server side. For this reason, this document is going to be set within the parameters of describing the purpose of JavaScript and its key features that makes it similar to programming language and exploring features that also makes it dissimilar to a programming language. The functions of JavaScript and JQuery as a development tool is also going to be explored in this document.

JavaScript

JavaScript can be described as a scripting language that is used for the sole purpose of making web pages interactive. JavaScript is an interpreted language for this reason, it runs on the client computer and you do not need an extended program in order to run it on your computer. (Tech, 2015) JavaScript is executed by web browsers and it is mainly used for interactivity and validation. JavaScript can change HTML content in the development of a site and one of the methods that it uses is through ‘getElementById()’. As well as changing HTML it can also change CSS styles. It is one of the primary ways that web developers use to validate data on webpages. For example, JavaScript is very likely to have been RUN when you don’t fill out mandatory text fields on an online form and an error message pops up. JavaScript is normally used by developers on occasion where they need the code to run after the page has loaded as JavaScript is a language that is supported by all browsers used by clients. Most interactive features of webpages such as slideshows are normally done by website developers using JavaScript. The reason why JavaScript is very popular is because of its functions that allows it to fit with the dynamic web era that we are currently in. This means that JavaScript is suitable for most sites nowadays that changes and adaption is a key aspect of the functionality of the site. For example, JavaScript is used to recognise if clients are visting the site on their phone or on a computer and then decides whether or not to change the way that the content renders to either a mobile platform version or computer version. (Wilde, 2013)

JavaScript features similar and dissimilar to programming language

Features of JavaScript that makes it similar and dissimilar to a programming language is going to be explained in the table below:

JavaScript features similar to programming language	JavaScript features dissimilar to programming language
Features such as the use of variables, conditional statement and event handlers is attributes that are normally affiliated with programming languages. This is a feature of JavaScript that makes it similar to programming languages such as Perl or C. Variables are containers for values which are norm in programming languages also conditional statements which allow different codes to run at the same time. Conditional statement is what allowed me to create validation if text boxes are not completed on a form before submission. (Wilde, 2013)	Features that make JavaScript dissimilar to programming languages is the fact that the variables that is declared with JavaScript are always made public, its features does not allow it to privatise variables as you can do with most programming languages. (Johann, 2014)
Another feature that JavaScript has in common with programming language is that it has datatype (arrays).	Another major reason why JavaScript is dissimilar to programming languages is because features that are non-existent such as algebraic data types and pattern matching that are also available with other standard programming language. (Johann, 2014)
Another reason why JavaScript is similar to a functional programing language is because functions are first class objects, there are closures and higher order of functions.

JQuery

On the other hand, JQuery is simply a library where pre-coded JavaScript are stored as open-source for developers that want to use them. JQuery is a library of JavaScript that is very popular due to the fact that it is easy to use and powerful. The main purpose of JQuery is so web developers can easily apply common JavaScripts to their websites during implementation without consuming time. JQuery functions are important as a development tool for website developers because it allows to apply JavaScript to their work without having to deal with debugging common errors. Also with JavaScript code in JQuery they are normally effective and short which helps with the implementation process of the JavaScript. (Wilde, 2013) Overall, JQuery is a development tool that most advanced website developers use due to the fewer lines code. For example, the following evidences using JQuery or JavaScript to change the background colour of a body tag: - As you can see it will be quicker to use JQuery rather than JavaScript.

jQuery

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

JavaScript

Function changeBachground(color) {

        Document.body.style.background = color;

}

Onload=”changeBackground (‘red’);”

Bibliography

Johann, 2014. stack. [Online]
Available at: http://stackoverflow.com/questions/3962604/is-JavaScript-a-functional-programming-language
[Accessed 18 04 2016].

Tech, 2015. abouttech. [Online]
Available at: http://JavaScript.about.com/od/reference/p/JavaScript.htm
[Accessed 18 04 2016].

Wilde, B., 2013. Udemy. [Online]
Available at: https://blog.udemy.com/jquery-vs-JavaScript/
[Accessed 18 04 2016].

M2 (4/6) Produce a blog entry that describes the main design tools that you have used

M2: Describe the main design tools that you have used in the creation of website

Introduction

In the creation of my website I used a wide range of tools and every tool that I used was very important in order successfully create my website. For this reason, this document is going to be set within the parameters of going through the tools that I used and describing the purpose of them and how and where it was useful in the development of the website. The tools that are going to be explained include: QSEE Superlite, Colour Pallete, Fonts, Wireframe and the graphic programme Adobe Illustrator.

QSEE Superlite

QSEE superlite can defined as a software application that is packaged with sub-tools that help with the design and analysis of computer type systems that are being developed or enhanced. It includes range of ‘defacto’ standard models that are used in many different industries as tools essential in the creation of systems. The support techniques provided in QSEE Superlite includes entity-relationship diagram, decision tree and flow charts. The support technique that I used from QSEE Superlite was a decision tree. The purpose of the decision tree was to help with the creation of a site map. This site map is what allowed me to know the navigation within my webpage was going to be. The site map was very important to the success of the website because it is what allowed me to know the type of content that was going to in each webpage, the amount of webpages and the links between the webpages. (Stafford 2015)    

Colour Pallete

The colour pallete tool that was used in the creation of the website was Adobe Kuler. The purpose of Adobe Kuler is to help you find the perfect combination of colours. It allows you to try and create and save colour schemes that has been created within the colour scheme. (Wikipedia 2015) The purpose of using Adobe Kuler as a tool in the creation of my website is to find out the colour scheme that I was going to use throughout my whole site. Also using Adobe Kuler as a tool helped me with defining colours when I was developing the CSS for each webpage as the software application gives you the CSS reference for each colour. A major advantage that Adobe Kuler brought to me is that it allowed to experiment with colour themes that I was a bit sceptic with. I decided to change my colour scheme because when I created it in Adobe Kuler I saw that contrast was low between the original colour scheme that I wanted to use. For this reason, I decided to use highly contrasting colour that was evident in Adobe Kuler which was red, black and white throughout the website.

Fonts

The tool that I used to pick the font that I wanted to use in my website was Google Web Fonts. Google Web Fonts are fonts that are released uder open source licences thus, why they are allowed to be used for non-commercial and commercial assignments. The reason why I used Google Web Fonts is because it gave me access to a wide range of fonts and at the same time preview the fonts in different sizes and font-weight. The major advantage that I gained from using the font developer is that it offered the CSS coding for each font which was needed for the text content on website. Also Google fonts makes it easy to integrate fonts with Javascript and CSS as the scripting for the font is available for copying and pasting directly into the HTML source code for the site or the style sheet.

Cacoo Wireframe

Wireframe in terms of website creating is setting out the layout of context and the structure of the site that is to be created. Cacoo is a tool that can be used to make diagram, wireframes and network charts. The advantage that Cacoo brought to me in the design stage of my website was that it had standard website layout templates and this made it easy for me develop my designs as I knew the standard webpage structure that my site had to follow.

Graphic Programme

The graphic programme that was used as a tool in the creation of my website was Adobe Illustrator. This tool is a vector based graphic software application. The purpose of this software tool is to create vector based graphics that are normally used as logo or printed as hardcopy on materials. I used Adobe Illustrator to create the logo that is present on every page on the site. The reason why Adobe Illustrator is important as a tool used for reating the logo is becuause it is vector based which means that scaling the logo wouldn’t affect the quality of the image as it would be rasterized images. This is essential as on webpages users might decided to zoom in and if the logo starts to pixelate as the client users zoom into the webpage it will have a detrimental effect on the professionalism of the overall website.

Assignment 3 - Design an e-commerce website

Introduction about site

The main purpose of this site is to allow rich people to gain access to exclusive luxury shoes that is not being sold anymore. The shoes that are being sold are very expensive for this reason; my main target audience are rich people such as footballers, actors and established business men. Although, these are the main target audience we also sell our products to clients that are willing to spend the money on the luxury product.  However, the website is created with selling to sport stars, business men and movie stars. The luxury shoes available include Fendi, Zannoti, ferragamo and Louis Vuitton. The reason why they will be willing to buy from my site is because we also offer special services that include telling them what type of events they should wear the shoes to and what type of clothes they can wear it with. The fact that the site is aimed at affluent customers forced me to make the layout simple and something that includes mainly images and as minimum text as possible. This is because with affluent people you do not need to do persuade them as much with text to buy an expensive product compared to a non-affluent person.   

Colour font

The colour I am going to be used throughout my whole site is red, white and black. The reason why I am going to use the same scheme of colours is to maintain corporate identity throughout the site. The colours that I selected are bright and quite contrasting so text can be easily seen by potential customers. The colours are bright because they help give a vibrant look to the whole website and it is known that vibrant colours entice more people compared to dull colours like grey that is associated with bad moods.

 

 

Font

The font that is going to be used is “open sans”. This font is suitable for the site because it is a simple text that can be opened and read in the same format on every platform. For example, open sans would be viewed in the same way it is viewed on the web on a mobile platform. The text colour is going to be black on a white background because on most sites that is how it normally is. This is because people like familiarity and enjoys keeping things simple.

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

font-family: 'Open Sans', sans-serif;

Logo

 

This is the logo that is going to be used for my site. This logo is suitable because it was created using a vector based application which means that it is scalable as increasing or decreasing in size of the graphic does not suffer the quality of it. The logo also reflects the name of the website which is Vamp ForeigN Shoes. The logo is also simple which makes it easily relatable and memorable by viewers and this is an important feature of a logo.

 

Review

 

When creating a site it is important that you carry out research in order to inform your decision on the best way to layout your site. The reason for this is because when it comes to e-commerce people like familiarity and it is easier for people to trust a layout that they are familiar with. The screenshot that is shown above shows a website that does the same thing as the site that I am about to create. The good thing about this site is very simple and easily to navigate around. Something that I will be taking from this site and will be implementing into mine is to keep the navigation bar at the top because this is where people expect the bar to be. Doing this will make my site user friendly because the navigation bar would be where they expect it to be.

Another good thing from this site is the layout of the shoes that is being sold by Farfetch. The shoes that they are selling are all in a layout where they are 4 X 4 this is common in most e-commerce site where they are selling clothes. This is also something that I will be implementing in my site as well. The logo is also in the header on this site and this is a norm on most sites. This is because it allows users to know what site they are on. I will be improving this idea by including my logo on every webpage and the reason for this is so it can be memorable to users that go on the site. However, the bad thing about the site is that there is not enough information on each shoe and they do not offer advice on the shoe.

 

QSEE Site Map

 

The image above shows the site map which reflects the process of the website. The blue elements represent the navigation bar and the pink elements linked to them shows the content that is going to be within these webpages. For example, if a customer wanted to find the price of a Fendi shoe they will have to go through the Fendi navigation button.

Images that is going to be used on website

The images above are the type of images that is going to be used on my website. These are the luxury trainers that the site is going to be making available for customers to buy. On the website under all these images there is going to descriptions on each shoe and the price of the shoes.  The description would be used in the checkout page to actually buy the product. All these shoes shown in the image are exclusive luxurious shoes that not a lot of merchandisers sale anymore. So they are quite rare to find.

 

 

Wireframe designs