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/

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.

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

Tools and Techniques - Lorem Ipsum and Lorem Pixel

Tools and Techniques - Notepad vs Komodo Edit

Notepad vs. Komodo edit

In this blog post I will be describing advantages and disadvantages of notepad and komodo edit; as well as comparing them in the sense of web development.

Notepad

Notepad is simple text editor software that has been included in all windows computer since 1985. Since the software has no format tags, it is suitable to edit system files; however it provides very basic text handling functions.

It is a universal file therefore it is easy to use as well as it comes free with any computer typically windows operating system, however one of the disadvantages is that HTML command line has to learnt as there is no help provided with the software. In addition there is no inbuilt browser therefore the user has to view the final product in an external browser.

However since it is an easy software, it does not require much training, meaning it not expensive as well as time consuming. Nevertheless it does it has no inbuilt templates and therefore can be time consuming when the user makes templates, however once the templates have been created they can be saved and used over and over again. In addition unlike komodo edit; notepad is quicker to load.        

Komodo edit

Komodo edit is also a text editor software that was launched in January 2007. It is used to more advanced programming unlike notepad.  

One of the biggest advantages of komodo edit is that it has auto fill options for HTML and CSS; which makes it much easier to use as the user does not have to remember all the tags and code. As well as it provides help, as consists of templates so the user does not have to waste time creating their own templates. However komodo is complex and therefore might require training which means it can be expensive as well as time consuming.

On the other hand komodo edit does provide help for example the code is colour coded and therefore it makes it easier for the user to read it, as well as the user can create projects therefore all the files are organized in one folder. Another advantage is that there is inbuilt browser and therefore users can browse web pages within the program as well as allowing the user to test within the program. However another disadvantage is that it takes longer to load the program.

Conclusion

To conclude both softwares are text editors and used for web developments, individually both are great softwares for web development however I would suggest that komodo edit is better for web development; as it does provide a lot of help with the coding. However there will be training needed but once the user gets the hang of it can be very easy to use.    

Reference

http://en.wikipedia.org/wiki/ActiveState_Komodo
Website- wikipedia.org
Time- 7:04pm
Date- 22/11/2013

http://en.wikipedia.org/wiki/Notepad_(software)
Website- wikipedia.org
Time- 7:20pm
Date- 22/11/2013
 

Assess different implenetation styles of CSS

In this blog I will be assessing the different implementation styles of CSS, these includes inline, internal also known as embedded and external.

INLINE

Inline CSS adds styling to single HTML elements using a type of attribute of an element called <style>.

Advantages of Inline

1. With Inline you don't need to create an external document, as well as this you don't need to edit a new element in the head of your document. Inline are therefore very easy to add and can save a lot of time.

2. Web designers use the inline style sheet when they are first working on a new project. This is because it is easier to scroll up in the source instead of changing the source file. More importantly inline can be used to debug pages if there is an error and it is hard to fix.

3. Inline loads faster, this means that Internal CSS websites load much faster than External CSS websites and therefore also loads quicker on mobiles.

Disadvantages of Inline

1. The Inline style must be used for every webpage you want it on so it can be much more time consuming if you are creating a large web site. For example if you wanted all your headings to have a font of "Verdana" you would have to add an inline < p> < /p> tag in your documents. This will also mean that the load time for the website is longer when the user opens the site.

INTERNAL

An internal style sheet is basically all the tags within the code of the web page, for example <head>, and <body>. These tags visually do not show anything however they inform the browser that there will be some sorts off CSS on the web page.

Advantages of Internal

1. Internal styles don't need to be applied to every webpage. If you want all your headings or paragraphs to have the family font "verdana" you would have to add an Inline style <p> tag within your internal style document. This can benefit you if you want to keep all the fonts the same as you just need to do it once.

Disadvantages of Internal

1.One of the biggest disadvantages of internal is that if the user wants to make changes to the WebPages they would have to amend every page, so for example if there are 20 pages on a website then the user would have to make changes to all the 20 pages separately, which can be very time consuming.


EXTERNAL

An external style sheet allows you to change the appearance (e.g. the layout, the colour) of all pages within the web page. External style sheets are mainly used for when having to apply many appearances to many pages on a web page/page's.

Advantages of External

1. Because the styling text is within a different document it means that the file sizes of the pages will be reduced quite considerably. This also means the structure and content is much easier to read by the developers.

2. CSS lets you to display your website according to the HTML standards. This can be done without changing any looks or designs on your site itself.

3. Because the style is separated from the HTML page and is put within a CSS style sheet it means that there is less code within the page but more importantly it makes it more easy to work with and less confusing as the HTML is separated with the style sheet.

Disadvantages of External

1. If you have a small website it could be more complicated to use external style sheets because they can increase quite fast and if you have deleted web pages it can be confusing as you wouldn't know which style sheet is needed.

Conclusion

Depending on the type of the website, the programmer would choose which type of css they want to use. For example a website with only one page without colour and media would use internal CSS. On the other hand if a website has multiple pages with media and colours, the programmer would use external.

Ref

/http://www.expression-web-tutorial.com/Types_CSS_Styles.html

Date- 17/12/2013

Time- 09:33 pm

http://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/

Date- 17/12/2013

Time- 09:53 pm

Explain the features of the box model for CSS

CSS Box Model

Box model shows the design and layout of html, this is very important for creating a well presented and professional looking website. The CSS box model consists of different layers, margin, border, padding and content; all these layers help to make it easier to read each part of the website.    

·         The margin clears the area around the border; it transparent therefore has no background colour and blends in with the website background itself. Depending on the code, it leaves out empty space by a certain amount.     

·         The border goes around the padding and content, it is affected by a background colour.  The thickness and type of the border can be changed for example 10px thick blue. However this does not work on the internal browser.

·         Padding clears out the area around the content. This is done to make sure the border is not too close to the content s and therefore making it easier for the user to read.    

·         Content is where the text and images are placed, this is placed in the middle of all the other layers.   

 http://bizbtec.blogspot.co.uk/2012/12/unit-20-p2-explain-features-of-box.html
Website- bizbtec.co.uk
Time- 6:40
Date- 04/12/2013