Tuesday 13 May 2014

JavaScript and jQuery Fundamentals Client Side and Server Side

Introduction
It is not a full programming language however it can be used to design simple task such as designing interactive menus. Scripting languages can be used to help increase interactivity of the webpages. In this blog I will be stating fundamentals of JavaScript and jQuery as well as explaning client and server side.  

JavaScript
JavaScript is a scripting language that enables web creators to design interactive sites. JavaScript is an open language meaning it can be used by anyone without having to buy a license. One of the tasks that JavaScript is able to do is that it can interact with the HTML code of a website which allows website creators to put in dynamic content in their sites. All browsers today support JavaScript as it is a crucial part of our everyday browsing experience. We may not notice it but it’s on nearly every website; from e-commerce websites such as Amazon and e-bay to watching videos on YouTube. For example with JavaScript you can add animations to a website to attract customers and if the user clicked on the animation it could take them to a certain page on the website. In conclusion, JavaScript allows people to build highly responsive user interfaces, prevent frustrating page reloads and even fix issues for CSS. These types of languages, which can enable functionality to work, are client side scripting languages, which affect the data that the end user sees in a browser.
One of the benefits of JavaScript is that most browsers support scripting language, therefore users can use it on many different browsers. however if a browser does not support it, then browsers detection informs the user the page they are trying to view is not supported by this browser; therefore redirecting the users.

jQuery
jQuery is not a language, but instead is well written JavaScript code. jQuery almost simplifies basic tasks that you would want to happen in a web browser; it is a library of JavaScript code. It is very useful because the simple things such as making a pop-up box appear in a website when a button is pressed could be written in as little as 2/3 lines of jQuery whilst in JavaScript it would take a whole page of coding. This is because it is its own library where it stores all the information related to jQuery so that you do not need to define each and every single aspect. jQuery helps to implement user interface related functionality without having to write hundreds of lines of codes, in other words; it’s simple, clean and fast.

Client side
Client side scripting is executed on the clients’ web browser, it is embedded into HTML and with the help of CSS and JavaScript; WebPages can be more graphical. Buttons, splash screens and dropdown lists can be created with ease. Client side scripting is mostly used for design work, such as creating graphical interfaces and effects. Client side scripting provides a quicker response than server side scripting as the users action does not have to travel to the server and back.      

 

One of the advantages client side servers is that it is executed on the user's computer and therefore responds immediately to users actions, and executes actions quickly as well. It also allows the developers to have more control over the creation of web pages, for example the look and usability of the webpage. However not all browsers support the scripts and those who do support, support it differently. Therefore the look of the webpage may be different in every browser. One advantage of server side scripting is that since it does not require plug ins, it reduces the load on the user’s computer. However it requires the language to be installed on the server.

For example on the Amazon website when the users hover over a button on the navigation bar, a drop down list appears. This is done by client side scripting. If this action was to be done by server side scripting then a lot of time would be needed because the data would be transferred from client to server and server to client continuously, which could be extremely time consuming and would require a lot of processing from the server; therefore it executes the action straight from the client’s computer and browser.



Server Side

Server side scripting is a form of scripting language which uses servers to execute actions; it waits for users’ action; once the action has been performed the data travels to the servers’ database and then waits for the servers’ response. Meanwhile the server searches through the database; when the server has found what it’s looking for it will send the information back to the client and the webpage can then be displayed on clients’ web browser.    

Server side scripting is usually used in actions that require security; such as online payments. Since server side is more secure and payments require client’s data to be checked on the server therefore server side scripting is used. Therefore making it more secure than client side scripting.  


User Experince

Client side scripting can be embedded into HTML; and can work with CSS therefore it allows developers to create more graphical and interactive webpages. Client side scripting responses are a lot quicker than server side scripting responses.

Interactivity is very important on a website, for example if a user searches a page on Amazon it can take a really long time to find what they want. However with the buttons and drop down lists and drop down menus, they would find it a lot easier to search through and easier to refine what they are looking for.

Websites use web functionality such as pop-ups and drop down menus, Amazon is a good example as it has drop down menu and if the mouse is hovered over a link it becomes bold and orange telling the user they have performed an action.


Developers can create web pages with HTML; however without any scripting the webpage will not be responsive to users’ actions. By adding client side scripting the developers can create more interactive web pages; this method enables the developers to create events by hiding or showing elements on the page, moving elements, or changing colours and fonts. Showing and hiding tables is the essence of how you create a drop down menu on a Web page.
Validation
Validation is used in client side as well as server side, however both ways are different. Validation is needed in both scripting languages in order to validate data which is entered into the specific fields within a webpage.

Validation means that data is applicable; JavaScript can also be used to validate data before sending it off to the server for example if an email is required, the website would validate if the email is correct. It can do this by looking for the ‘@’ sign; as it would not go through millions of email adds to see if the email address exists. This means that the request is sent to the server to validate if it is an email address. This means that the request is send backwards and forwards wasting time. Therefore if the validation is done on client side using JavaScript, it saves from the request sending forward and backwards.

References:
Website-Wikipedia
Date-06/05/2014
Time- 4:30
http://en.wikipedia.org/wiki/JQuery

Website-programmerstackexchange
Date-06/05/2014
Time- 4:50
http://programmers.stackexchange.com/questions/46137/what-is-the-main-difference-between-scripting-languages-and-programming-language

Website-w3school
Date-04/06/2014
Time- 4:50
http://www.w3schools.com/js/js_form_validation.asp

Website-microscopy
Date-04/06/2014
Time- 10:00
http://www.microscopy-uk.org.uk/

Tuesday 4 February 2014

Assignment 1- Features of Web Development (DESIGN TOOLS)


Introduction

In this blog I will be writing about all of the design tools I used to design my website, for example the tools and purposes of QSEE, Colour palette, fonts etc.

Colour Palette

For deciding the colours for my website I decided to use Adobe Kuler, adobe Kuler allows user to try and save various colour schemes, each consisting of five colours. It also provides 'colour rules' which contains all the basic colour rules. I decide to go with 'complementary' colours; these are the colours that complement each other. For example a dark background with a bright font, making it easier to read and vice versa. For my website I decided to use purple and yellow as yellow would show up brighter on a dark purple background.

Fonts
 
Font selection tools provide a wide range of font styles to form for your website. I decided to use Google fonts for my website. Google fonts allows me to pick any font I want and makes it easy as it requires no sign-up, it’s open source and free, and the deployment of fonts is fast. One thing they offer is the ability to download their fonts to desktop for use in design stage.

Wire frame/QSEE

Wire-framing tools are used by web designers to predict the layout of a website once it is finished, and give an idea of what the website should look like. In designing the future layout of my website I used QSEE & Lumzy. I used QSEE to design the navigation chart for the web pages. This navigation page described which web pages were linked together, and why they were linked. When I was designing the navigation chart it was important that each page was linked to the homepage index, as that is the starting page a user will see when they first enter the website. Later I used Lumzy to design the layout of each page. This included but was not limited to the positioning of the navigation bar, the logos and the layout of the actual content of the website, which was information about Penguins.

Graphic Program

Illustrator is a high end image editing software, and since I have already used illustrator for other units I decided to use illustrator as it would be much quicker since I won’t need training in new software. In illustrator I used the 'pen' tool to trace over an image which I have taken from Google image. The image was of a penguin which I used as my logo. I made my website design simply by using boxes and lines which I then coloured accordingly.

Tuesday 28 January 2014

Assignment 2- Design a Website


Introduction

My website is about Penguins, the website will have 5 pages consisting of simple information about penguins. I have to make sure that the website is easy to use, fun to look at as well as colourful as the target audience for my website is kids.






Purpose

The purpose of the website is to provide simple information about Penguins; the aim is to provide easy to understand information, with a fun and interactive website.

Audience

My target audience is kids, therefore the website has to be colourful, easy and fun to use. The website will focus on fun information which will be easy to remember.

Content

There are going to be 5 pages included in the website:

Introduction= a little introductions about penguins, a little about different species of penguins and what animal category they come in.

Fun facts= 10 fun and short facts about penguins, these will be short and simple to understand as well as fun to read.

Habitat= Information about what kind of habitat the penguins live in, for example where different type of penguins live as different type of penguins live in different habitats.

Diet= If there is any special diets for penguins, for example what they eat in the wild as well as what they eat in captivity. For example food preferences and resources, method of collecting and eating food and food intake.

Photographs= at least 10 pictures of penguins, these will include where penguins live, what they eat etc.

Navigation

All of the pages will connected to the Home Page, the home page is also connected to the logo, so when the user clicks on the logo, it will take the user to the home page.

In the diagram below, it shows that all the pages are linked to the home page, so on every page there will be a link that will take the user back to the home page. As well as all the pages will be interlinked, therefore just like the home page, there will be a link on every page that will be linked to the other pages making it easier to navigate around the website.


















Colours

Complementary colours

Hex= 5300B2 - Background

Hex= 5300B2 - Font

I chose to use these colours as they are complementary colours, meaning they are opposite on the colour wheel. This means I will have a light (yellow) background and dark (purple) font, making it easier to read as well as it making it bright and colourful as my target audience is kids.














Fonts

(<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>)

I choose 'Audiowide, 1 Style by Astigmatic' by Google fonts, as the website is for kids; therefore I decided to have a font that will be fun to look at and fun to read.

Logo

I produced this logo in Adobe Illustrator, I took an image from Google and using the 'pen' tool; I traced around it and added colours to it. Since the website is aimed at kids I made the logo look animated as it would be more attractive to kids.


Web Design 

Page 1- Home Page

I decided to have the home simple yet attractive, therefore I used bright colours with images in the pages, however kept the page very easy to use. I kept the navigation on the left side of every page to make the design consistent. I choose to use purple and yellow as the main colours for all of the pages as they are complementary colours which makes it easier to read for kids as well as keeping it vibrant and colourful, which is important to keep the attention on kids. I added 2 pictures as kids don't tend to read a lot but instead look at pictures and draw conclusions from there and the logo is kept in the left upper corner.



Page 2- Diet

I kept this page very similar to the 'Home Page' as I wanted to make the design consistent, so kids don't get confused and think that they are on a different website. There is a heading of 'Diet' which marks what the webpage is about. The navigation is still on the left and there is a little bit of text about the diet of penguins. There are also 2 pictures; these are different to the ones on the 'Home Page'.


 


Page 3- Habitat

Page 3 is similar to 'Home Page' and Page 2. The title is in the heading box and the navigation is still on the left. The same colours are used but different images are used. This page is about the habitat of penguins, it gives some facts about penguin’s habitat.



Page 4- Fun Facts

The fourth page consists of 7 fun facts about penguins. They are listed on the left side and next to them there are 2 pictures. The layout of the page is the same, with the navigation on the left with purple and yellow being the main colours.




Page 5- Photographs

This page consists of 6 pictures, these vary, however all relate to penguins. The page layout is still the same, with the logo in the left corner, the use of purple and yellow, with the navigation on the left hand side.



Images

I will be using a total of 16 pictures; I will be using the 'Alt' tag to add description to the images.

Image References
Image 1- http://bit.ly/1doEpob
Image 2- http://bit.ly/1bqcXd2
Image 3- http://bit.ly/1ePQbsS
Image 4- http://bit.ly/1fKmFIa
Image 5- http://bit.ly/LL3Eed
Image 6- http://bit.ly/1aYMJ3x
Image 7- http://bit.ly/1ioWbx0
Image 8- http://bit.ly/1bmsVSd
Image 9- http://bit.ly/1doECaW
Image 10- http://bit.ly/1bZ88V2
Image 11- http://bit.ly/1bZ8drF
Image 12- http://bit.ly/1doECaW
Image 13- http://bit.ly/1fKnMHJ
Image 14- http://bit.ly/MrjiLX
Image 15- http://bit.ly/1bZ8w5P
Image 16- http://bit.ly/1cQoIdS

Logo



For the logo, I used Illustrator; the pen tool helped me to draw over the original image, and then I used the fill tool to add colours into the shapes to complete my logo.

Interactivity
The naviagtion will be interactive, this will allow users to click on any of the buttons and it will take the user to that page.
The logo will also be interactive, this means that if the user clicks on the logo; it will take them to the home page as it will be linked to the 'Home Page'.
References

http://mind42.com/
Name- Mind42
Date- 07/01/2014
Time- 12.35


https://kuler.adobe.com/#create/color-wheel/
Name- Adobe Kuler
Date- 08/01/2014
Time- 12.50

Name- QSEE
Date- 14/01/2014
Time- 12.35

http://www.google.com/fonts#QuickUsePlace:quickUse/Family:Audiowide
Google Fonts
Date- 28/01/2014
Time- 2:51