Improving Functionality

Client-Sided and Server-Sided

In this post I will explain the advantages and disadvantages of using client-sided and server-sided scripting. I will also be compare the two different methods of scripting and discuss validation, the functionality of validation and how it is used. I will explain what the user experience is when visiting a webpage and how client-side scripting helps improve this.  

Client-Side Scripting

Client-Sided Scripting is computer programs that are executed on the client's computer system, rather than the server. Client-Side scripting can be embedded in HTML or be kept in a separate file that is downloaded onto the client's computer.

JavaScript is a scripting language which is used for client side scripting. Client side scripting is used mostly for design work such as creating graphics and adding effects. Examples of client-side scripting on webpages are drop-down menus and validation. By using HTML, along with CSS and JavaScript, they have many features such as buttons and drop down lists which can be created. 

Server Side Scripting

Server side scripting is a type of scripting language which is executed by the servers which host the Webpages a user may be viewing. Server side scripting waits for the user’s response and once the user has responded, the data goes to the server database and waits for the server’s response. Server side script can: 

• Dynamically edit, change or add any content to a Web page
• Respond to user queries or data submitted from HTML forms
• Access any data or databases and return the result to a browser
• Customize a Web page to make it more useful for individual users
• Provide security since your server code cannot be viewed from a browser

The server checks through a database and once the server responds, the client will download all the information and will display the webpage on the client’s browser. 

Server side script is used for sending the request through a secure server, such as bank payments and financial information. Server side handles processes and tasks that client-side script is unable to do.

Comparison of Client-Sided and Server-Sided Scripting

The differences of client-sided and server-sided scripting are that server-side script needs more security to protect it, this is because a server is used to hold more important information such as account information and payment details. 

Server side script mainly uses Java which is more open to being a security risk to user’s computer systems as it allows programmers to create malicious code. Using Javascript doesn't allow programmers to create malicious code which is able to infect and wipe user's computers.

A disadvantage of client side script may not be able to be viewed on all versions of certain browsers, this may be a problem for users trying to view a webpage with an outdated browser.

Both scripting methods are good to have on web pages as each one has a feature that is an advantage that the method does not have. Client side is fast for responding to requests and it has many features for the design layout of the Webpage. 

The other method which is server side scripting is used for sending the request through a secure server, such as bank payments and financial information. Server side script looks through a database to match a request. The disadvantage of this server side script is that its slower for the requests and responses.

Validation

Validation is checking a field against a database to see whether it is correct or not, or to see if a certain check box is filled in or not. Forms are used a lot on Webpages such as when a user is creating new a account on a webpage or purchasing products and need to fill in details such as quantity, address etc. JavaScript is often used to validate these forms because it is suited for handling data such as personal details. An example of validation is asking a user for his email address and password when logging into their account on a certain website.

Validation is usually done via client-sided scripting apart from form validation which is done via Java on the server-side. Using this method of validation on the users system makes feedback instant.

Validation can also be done faster when checking for errors because it will be using the web browser and not a server. When a user enters something wrong into a text field such as entering their account details, for example if the email address doesn't exist, client-sided scripting will validate the text field with information from the web browser. If it doesn't match, it will show an error.

This is much more efficient than using server-sided scripting for validation, because using the same example above, the user enters the wrong data, and the data would need to be sent to the web server, checked, and then sent back to the user’s computer system. This takes time and uses processing power on the web server.

User Experience

The user experience is how the user views and uses the webpage they are viewing. Ease of access and clear simple layout all add up to the overall user experience.  The user experience is usually achieved by client-side scripting.

Examples of these features are drop-down menus, validation rules, system performance, and marketing. A good example of a webpage with good user experience is Amazon. 

On their webpage they have a number of drop-down menus with sub topics making it easy to find a certain product or service. Using this makes it a much clearer webpage to navigate. Amazon gives the user interactivity as they affect things on the website, such as making a drop-down menu appear, instead of just clicking a hyperlink. They also have a lot of promotions and advertisements for their products on the main homepage.

Client-sided scripting can help improve the user experience in many different ways such as, faster loading times, being able to remember a user's details when logging in, able to have better graphical images and more interactivity in the form of buttons, and rollovers.

The user experience all depends on whether the user load the webpage without long loading times, can easily navigate the website using various methods, search bar, drop down menus, the users previous experience on the webpage. Users want interactivity and instant feedback like roll over buttons and hyperlinks on pictures.

References

Server side scripting  - 06/06/2014 - http://bit.ly/1m2SGPt

Web server scripting disadvantages - 06/06/2014 - http://bit.ly/1mHkiYW

Advantages and disadvantages of client side scripting - 06/06/2014 - http://bit.ly/1obznG7

Client side scripting - 06/06/2014 - http://bit.ly/SF1d0J

Advantages and disadvantages of client side scripts - 06/06/2014 - http://bit.ly/1nt4sCC



Javascript & jQuery Fundamentals

Javascript & jQuery Fundamentals

In this post I will be explaining and giving examples of javascript and jQuery and what they're functions and purposes are. I will also be explaining the benefits and disadvantages of using Javascript and jQuery.

Javascript

Javascript is a dynamic programming computer programming language which allows client-sided interaction with users computers.Javascript is able to control a browser, communicate asynchronously, and alter the document content that is displayed on a web browser.

Javascript isn't related to the application Java even though it has a similar name. Javascript allows web developers alter the behavior and appearance of bits of web pages displayed on a webpage.

Benefits

Javascript is executed on the client side

This means that the code is executed on the user's computer instead of the web server therefore saving bandwidth and strain on the web server.

Javascript is an easy language to learn

The Javascript language is relatively easy to learn and includes a syntax that is close to English. It uses a model that provides plenty of prewritten functionality/features to the various objects on pages, making it easy to develop a script to solve a purpose/problem.

Javascript is relatively fast to the end user

As the code is executed on the user's computer, results and processing is completed almost instantly depending on the task as it does not need to be processed in the site's web server and sent back to the user.

Extended functionality to websites

Third party add-ons enable Javascript developers to write small parts of Javascript which can execute on desired web pages to extend its functionality. If you use a website and require a certain feature to be included, you can write it yourself and use an add-on to implement it on the web page.

JQuery

JQuery is a tool that is used as JavaScript library which allows shorter lines of JavaScript code to be opened. JQuery just goes into the JavaScript library and a short line of code represents jQuery unlike JavaScript where there are many lines of code that mean the same thing. As jQuery is shorter than javascript code time can be saved by not repeating the code. It was mainly designed to make JavaScript easier to code.

Overall there is less code that has to be written when jQuery is being used within the website and another benefit is that there will be fewer errors because there is less repetition.

 

Benefits

• Ease of use

This is pretty much the main advantage of using JQuery, it is a lot more easy to use compared to standard javascript and other javascript libraries. Apart from simple syntax, it also requires much less lines of code to achieve the same feature in comparison.

• Large library

JQuery allows you to perform hordes of functions in comparison to other Javascript libraries.

Wide range of  tutorials

The JQuery website has a comprehensive documentation and tutorials to get even an absolute beginner in programming to get the ball rolling with this library.
References

Advantages and disadvantages of client side scripts - 08/05/2014 - http://bit.ly/1nt4sCC

Web server scripting disadvantages - 08/05/2014 - http://bit.ly/1mHkiYW

Advantages and disadvantages of client side scripting - 08/05/2014 - http://bit.ly/1obznG7

Client side scripting - 16/05/2014 - http://bit.ly/SF1d0J

Server side scripting - 16/05/2014 - http://bit.ly/1m2SGPt

Assignment 2: Design a Website

Designing a Website

In this post I will be designing and planning a website layout based around a popular video game. This website will have around four pages including a homepage and contents, totalling to six.

Homepage

The homepage will display all the links to the other pages of the website, such as different images and links to other websites that are related to the game. The homepage may also have embedded videos and more images of the game.

Purpose

The purpose of my website is to inform gamers that play GTA: San Andreas about things or topics in the game that they may not know about. This allows users to get a better understanding of the game and have a more enjoyable experience.

Audience

My target audience is for gamers that are interested in the game, Grand Theft Auto: San Andreas. The audience will be over 18 plus, due to the fact the game is rated 18+.

Content: Story/Side Missions

This part of my website will be to inform the website viewers to the story of the game, and give them a key description and run through of each mission. This is so the user can easily come to my website if they have any troubles completing a mission. Side missions will also be included in this page of my website and will be basically the same as the missions but explaining how to do the side missions, locations of them etc.

Content: Characters

This part of the website is dedicated to explaining and analysing the different range of characters in the game, such as when they appear in the story.

Content: Stunt Jumps

This part of my website is to showing the locations of the stunt jumps around the San Andreas map. This will help players who want to achieve 100% completion.

Content: Vehicles

This part of my website will be explaining the many different vehicles and their locations in the San Andreas map. This page will also contain the vehicle types, top speeds, whether they're able to be customise etc.

Content: Weaponry

This page on the website is dedicated to the many different weapons in the game, this ranges from melee weapons to assault rifles. There will be a stats of each weapon, ammo counts etc.

Content: Map Overview

This page is about the map of GTA: San Andreas and will contain a large image of the map, and will be annotated with locations, key areas etc.

Content: Collectibles and Secrets

This page will be showing the many different collectibles and secrets shown in the game, such as horse shoes, Easter eggs, photo locations, weapon locations etc.

Navigation

This my plan for my website, each page will link back to the homepage. As you can see all pages are accessible from the homepage. This map will help me create my website, by knowing what pages link to which page.

Colour Scheme









This is the colour scheme I will be using to create my website.

• Background Colour: 000000
• Header: FF4D00
• Footer:B45300
• Body Text: FFFAF5
• Heading 1 style: FFFAF5
• Heading 2 style: C2C0BE
• Links: B45300

I used abode colour to choose the colour scheme above which allowed me to edit and tweak the levels of the colours I wanted.

Fonts

The fonts I will be using for my website are:

HTML code: <link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>

CSS code: font-family: 'Hammersmith One', sans-serif;

I choose Hammersmith One because I liked the look of the font and it seemed to fit the design of my website. I got the font from the Google font database.

Here is the logo I made for my website.

My logo is based off the GTA:SA logo that was created in Adobe Illustrator.

This is a design I created for the homepage of my website. At the top of the page is my banner for the website, it contains the logo of my website too. The title of the webpage is under the banner, displaying what page the user may be on if that be the homepage or the character page. 

The page has a navigation toolbar under the title, for quick navigation. The subtitle and information under that will be basic information on my chosen topic. This will give the user an understanding of what my site is about before continuing onto other pages. In the right box is a embedded web browser/external link box which will take users to other websites related to my chosen topic.

At the footer of the page is four circle buttons which will take the user to more related websites.

This is the design for my page about vehicles that are available in the game. As you can see it has a similar design to my homepage, all my webpages are designed this way. This is so the website keeps to one theme, making it look more organised and professional.

The text on my page will be information on the vehicles, the statistics of them etc.

This is the design for my page about the characters in the game. This page will have the most information compared to all my other pages. This is because there is a lot of information on the characters more so than the vehicles or the overview of the map. I have placed images in places to help break up the text.

This is my page about the layout and all the secrets and collectibles available for the player to find. The image shown is the map that players use to navigate through the game. I may add more images of collectibles such as horseshoe locations, Easter egg locations etc.

This is my page on weaponry. I will be giving the user information about the different types of weapons, from pistols to rocket launchers. I have tried to stick to the colour scheme I chosen above and have a similar theme throughout my website design by using the same footer and banner on each separate page.

Navigation Tabs

The six tabs below the main title image which will link to the different pages included in my website.

Each one directs the user to another part of my website, this makes navigating through my website a lot easier and quicker than using search bars or hyperlinks.

Images

My website has a large title image which is at the header of the homepage. I also have included the logos of the game developers and the game logo. On my other pages I have relevant pictures that are related to that particular page. For example my characters page has pictures of said characters.

Banner/External Links

The banner at the bottom of my homepage will direct to other website related to the game. I also have an embedded web browser which also links to other web pages.