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.

Tools & Techinques - Notepad vs Komodo Edit

Notepad vs Komodo Edit

In this post I will be explaining the advantages and disadvantages of Notepad and Komodo Edit and comparing the two. After I have compared to the two I will decide which is the better application in my opinion in a conclusion.

Notepad is a basic text editor which has the ability to make HTML based code. There are a few advantages of using Notepad. These are:

• The program is available on all Window operating systems.
• It has a simple layout and interface, making it easy to use.
• It is free.
• There is no training needed to use it.
• Can be used on low priority systems meaning it can be opened and used quickly.

The disadvantages of using Notepad are:

• The application doesn't save files normally as an HTML file, it must be chosen.
• Notepad isn't available on any other operating system other than Windows.
• Doesn't have any functions about web development.

Komodo Edit is also a text editor which is designed to make HTML files and can work with CSS and many other types of code. Here are the advantages of using Komodo Edit:

• It can Auto fill code meaning when typing in something like <p> it will automatically add </p> on the end of your text in between.
• It has colour coded text helping to see which piece of code is which making it easy to spot certain things when proof reading code.
• Komodo has a built in feature where you can preview your current code as a HTML, this makes it easier to check if something works without having to open a web browser up and opening a HTML file.
• It is free to download.
• It has a built in project management feature, in which all your files, such different web pages are saved in one location.
• It is available to Windows, Linux and Mac OS.

The disadvantages of using Komodo Edit are:

• You have to download the program from their website, it does not come pre-installed on any operating systems.
• It has a long start up time.
• It requires training to use it.

Conclusion

I have come to a conclusion that if I needed to use a program to make a web page or website I would pick Komodo Edit over Notepad. I wouldn't use Notepad because, it has a bad word layout and interface compared to Komodo Edit. Notepad also doesn't support web development, making it harder to code HTML in Notepad than Komodo Edit.

References:

Notepad(Software); 29/11/2013; http://bit.ly/fIfmU9

Activesite Komodo Edit; 29/11/2013; http://bit.ly/10SZlW

Explain the features of the box model for CSS



A labelled diagram of a box model

HTML elements such as paragraphs or headings can be considered as boxes. These boxes have been put in place to organise a structure of a webpage. In CSS, the term "box model" is used when talking about design and layout of a webpage.

The CSS box model is basically a box that wraps around HTML elements such as text and headings, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements. This helps a web developer create lots of box models, each with different subjects or topics and space them out with ease.

References:

CSS Box Model; 29/11/2013; http://bit.ly/aGhHTh

 

Explain how HTML files access CSS

HTML files access to CSS

 

In this post, I will be explaining how HTML files are used to access CSS. Both are used together to make most of the webpages on the internet today.

HTML

HTML (Hyper Text Markup Langauge) is used to create and show information for a webpage. HTML is used to format the style of a webpage, things such as headings, paragraphs, links and more. This is done using using tags for example <p> </p>. This stands for paragraph, and anything typed inbetween the two tags are displayed on the webpage as a paragraph. HTML is used to construct the main layout of a webpage.

CSS
 

CSS stands for Cascading Styles Sheets. The purpose of CSS is to change the style and presentation of an HTML file, such as changing the overall look of the webpage. CSS also add the visual effect such as colours in a website. It is really when using CSS as it make websites stand out more from the websites. Here is an example of CSS code in a style.css file.

h1
{ color:red; }

The code above shows that heading 1 should be the colour red because of what is written between the brackets and next to the semi colon.
 

Compare and Contrast
 

The best method of HTML accessing CSS is via a style.css sheet. This in Komodo Edit where the a style sheet is created and CSS coding in inputted. From there it is opened with the HTML fle which contains all of the written data such as paragraphs, headings, pictures etc.

References:

Cascading Style Sheets; 29/11/2013; http://bit.ly/8Mqyj

Assess different implementation of styles of CSS

Different Implementation of styles of CSS

In this post I will be explaining the different ways that CSS can be implementated in a HTML file. There are a few main ways of implementing CSS into a HTML file, these ways are:

• Inline
• Embedded
• External

Inline

Inline means the CSS code is inside the tag. This means you will be able to edit whatever is inside of the tag. However, if you write up the inside the tag the CSS must be in lower case when written in. When using the inline method of implementing CSS to change the style of the writing, you would need to write it in the relevant tag that is containing the relevant stuff.

For example:

<h1 style=”color:blue;background-color:yellow;”>This is an example</h1>

Advantages of using the inline method is that it enables the user to add CSS code without the use of a style sheet.

Disadvantages of using the inline method is that you have to re-write the same piece of code of you want to have the same colour scheme for another part of your website. For example if you did the type of code above, only h1 would be affected. If you wanted all of your headings to look the same you would need to re-write the same code.

Another disadvantage is that it would be very hard to edit a certain piece of code in a fully coded website, as it would be difficult to find that piece of code amongst 500 other lines of code.

External

External is using another page for adding CSS onto a webpage. This specific method requires the users to open up a seperate clear work sheet which they can do their CSS styling on that sheet using CSS coding. There must be a tag in the HTML code that links to the CSS style sheet. The HTML sheet requires the tag:

(<link rel="stylesheet" href="style.css">)

Once the CSS style sheet is saved as style.css, it creates a link between the two external work sheets.

The advantages of using external CSS is that all your CSS coding is in one place, meaning it is easy to find and edit as it colour coded.

External CSS sheets are able to edit more than one piece of code at a time, meaning if you wanted to change the text colours of all your current headings, you could.

Disadvantages of using a external CSS sheet are that you must be able to access it, and external style sheets are only used on large scale web designing, so it wouldn't be used on a small 3 page website as much as a website with 30 pages.

Embedded

Embedded CSS is when the CSS code is embedded into a HTML code. Embedded CSS is usually placed at the top of a HTML under it's own section, for example:

<head>
<style>
hr {color:black;}
p {margin-left:10px;}
body {background-image:url("background.jpg");}
</style>
</head>

 

Advantages of using in embedded are that styling classes can be created in order to use identical styling for two separate entities. Such as a heading and some of the content. There is no download is required for external styling sheet because all styling and HTML is done in one worksheet.

 

Disadvantages of using in embedded are that embedded styling can't always control styling for multiple documents. The HTML worksheet can often get messy with a lot of coding and hard to understand.

References:

Internal CSS - 30/11/12 - http://bit.ly/67RTT

External CSS – 30/11/12 - http://bit.ly/67RTT

Incline CSS – 30/11/12 - http://bit.ly/67RTT