U20 M2

M2 - Discuss how a scripting language can improve fuctionality
 

What is a Scripting Language?

A scripting language is a high-level programming langauage that allows intergration and communication with other programming languages, the most commonly used scripting language is JavaScript, but there are many others such as Perl, Ruby, VBScript etc. A scripting language is normally used alongside other programming languages such as HTML.

 
What do they do?
 

A scripting languages are not compiled like a programming language but it is interpreted by the browser, one command at a time. These are normally used to add and increase the functionality and interaction to a webpage, an example of one of these languages is JavaScript which was created by a company called Netscape with the intention to increase functionality as HTML alone was not capable of providing it. Without Scripting languages there would be no interactivity on the webpage, so there would be no search bars or the ability to submit forms via the website.

What is client side and server side?

The client is the system on which the Web browser is running, therefore the users side. JavaScript is the main client-side scripting language that is used for the Web. Client-side scripts are interpreted by the browser. The process of client-side scripting is:

 

1. The user first requests a Web page from the server

2. the server finds the page and sends it to the user

3. the page is displayed on the browser with any scripts running during or after display

 

Client-side scripting is used to allow web pages change after have been delivered. It is useful as it allows pages to be more interactive and allow other functions to be inserted.

The server is where the Web page and other content is stored. The server sends the pages that are requested by the user/client on request. The process of server side scripting is:

 

1. the user requests a Web page from the server

2. the script in the page is interpreted by the server creating or changing the page content to suit the user and the occasion and/or passing data around

3. the page in its final form is sent to the user and then cannot be changed using server-side scripting

 

Server-side scripting tends to be used for allowing users to have individual accounts and providing data from databases.

What is JavaScript and what it is used for?

JavaScript is a programming language that is used to make web pages interactive. It can be used to improve the functionality of a website by adding client side interaction. It runs on your users computer and doesn't require constant downloads from your website. JavaScript is often used to create polls and quizzes.

What is JQuery and what is it used for?

JQuery is a library that makes it quicker and easier to build JavaScript WebPages and web apps. Often with JQuery you can write a single line of code to achieve what would have taken 10-20 lines of regular JavaScript code.

JQuery is itself written in JavaScript, and comes in the form of a single .js file that you link to from your webpage. Your JavaScript code then accesses the library by calling various JQuery functions.

Validation

Scripting languages such as JavaScript can be used to validate data in HTML forms before sending the content back to the server. Therefore the validation is completed on the clients side saving the server processing power as it does not have to validate the information imputed in forms.

Examples of the data that normally checked by a JavaScript could be:
- has the user left required fields empty?
- has the user entered a valid e-mail address?
- has the user entered a valid date?
- has the user entered text in a numeric field?

 

Websites such as Facebook and Amazon use it to check if a email and password has been entered before checking the data.

GUI

A graphical user interface is a program interface that takes advantage of the computers graphics to make the program easier to use. A well designed GUI can free the user from learning complex commnad languages. Whereas on the other hand, many userd find that they work more effectively with a command-driven interface, especially if they know the command language. They use windows, icons and menus to carry out commands such as opening, deleting and moving files. They are often used for computers, mobile devices and portable games consoles. 

As scripting languages such as JavaScript add functionality to webpages creating better and easier to use GUI. Interacticity on webpages allows users to navigate and use the website easier, space on webpages can be more effectively used on webpage with the use of dropdown menus as less space in required having many links to individual pages when they could all be listed in a drop down menu.

References:

http://en.wikipedia.org/wiki/JQuery

http://www.codeproject.com/Articles/157446/What-is-jQuery-and-How-to-Start-using-jQuery

http://en.wikipedia.org/wiki/Graphical_user_interface

 http://www.ontopia.net/i18n/index.jsp

 

U20 P3

P3 - Explain the fundamentals of a scripting language

What is a Scripting Language?

A scripting language is a high-level programming langauage that allows intergration and communication with other programming languages, the most commonly used scripting language is JavaScript, but there are many others such as Perl, Ruby, VBScript etc. A scripting language is normally used alongside other programming languages such as HTML.

A scripting languages are not compiled like a programming language but it is interpreted by the browser, one command at a time. These are normally used to add and increase the functionality and interaction to a webpage, an example of one of these languages is JavaScript which was created by a company called Netscape with the intention to increase functionality as HTML alone was not capable of providing it. Without Scripting languages there would be no interactivity on the webpage, so there would be no search bars or the ability to submit forms via the website.

Nature of Scripting Languages

Scripting langages can be both object oriented and event driven programming.

 

Object oriented languages is where the code is divided in to different Objects (hense the name) where each object knows about itself and its ability, therefore it knows what it can do and what other objects it can interact with. Object orientated programming follows a series of steps which  focus on performing actions and manipulating data, that is held within objects.

 

Event Driven however is where the code is divided in to different events (hense the name) where each event is any action that has to occur. Event driven programs have threads that peform when the code is triggered  determined trigger, action or event. Event driven languages are more flexible as they allow the program to respond to many different inputs from different sources i.e. human input or timers.

Objects

A object in scripting languages is a type of data, which know the properties about itself and it knows how to do certain things. Many objects are already avaliable in scripting languages but it is possible to create new ones.

Methods

An object also knows which methods that it can carry out, it is a piece of code that is called by name and associated with an object, it basically outlines the ability of a particular object. Methods can be applied to an object in order to create an action that will occur when triggered. An example of a method is .write.

 Handling Events

Events can be triggered by the occuring of a pre determined trigger that are used in the HTML code. They can be triggered by the following; Something gaining focus known as onfocus, something losing focus known as onblur, when a mouse cursor is moves over a certain area known as onmouseover and finally when a page is loaded known as onload.

Hiding Scripts

Some browsers and some older versions of browsers fo not support scripting languages and therefore dosent understand them. In order to prevent any problems or confusion from occuring, the scripting language is hidden from them, by coding the script within the HTML. Browser that can understand and interpret script will be able to see the <script> tags however the browsers that cannot interpret the code ignore the tags so that they do not become confused when interpreting the HTML code.

Security issues

When it comes to writing and using client side scripting there are a number of security issues that can arrise. Firstly as the code is being executed on a users computer, it can open up an entry point for hackers to enter the users computer or network. As well as this, due to the fact the code is written and read from client files, make the websites and clients compiters at risk. This gives an opportunity for other websites to read the content that is stored on the clients computer, which can lead to them being able to perform operations such as data mining to access client information.

Including the script inside the HTML

Script can be coded in to any part of a webpage, dependent on what is required from them. HTML is interpretted and it is executed line by line, whereas script in the body is run when it occurs in the code. Therefore functions can be coed anywahere as they are not run untill they are called. in order for a browser to know it is interpreting a scripting language the code must be placed between <script> </script>.

References

http://uk.ask.com/question/what-is-event-driven-programming

 

http://wiki.answers.com/Q/What_is_the_difference_between_object_oriented_and_event_driven_language

 

BTEC level 3 Information Technology Book 2

HTML, CSS, Komdo Edit, Wireframe, Graphics Programs, Lorem Ipsum and Lorem Pixel

HTML

HTML stands for HyperText Markup Language, it is the main language used in the creation of webpages. Its purpose is to create a standard for creating webpages and to allow all internet users to view the pages. It is constantly evolving and developing, to meet the needs of the users and developers, it is designed and maintained by an organisation called W3C.

HTML allows users to navigate around the internet by clicking on special text called hyperlinks. When a webpage is viewed, what is displayed is the browsers interpretation (translation) of that HTML code.

CSS

CSS stands for Cascading Style Sheet, it is a style language, that essentially defines the layout of a HTML document. It allows the user to change the colors  margins, lines, heights, widths, background images and other styles of a HTML documents .

CSS defines how HTML elements are to be displayed. Styles are normally saved in external .css files known as style sheets. They enable the user to change the appearance and layout of all the pages that make up the website. There are three different types of CSS styles:

Inline style - is where the CSS is attached to the HTML element, however these cannot be reused, each time the style is needed a new style must be written, as each style will only affect the paragraph it is connected to.

Internal style - is where CSS is placed in the <HEAD> tag, these styles can only be used in this webpage, but can be copied and pasted in to another webpage style sheet and can be used. This saves time as they do not have to be created each time.

The External - is where the CSS is stored in a separate file, which is different from both Inline and Internal CSS where they are both stored in the same file. This method of CSS involves creating a separate file from the webpage that will contain all of the style and then including a link to the file in the webpage.

Komodo Edit

Komodo Edit is a free software that is developed by a company called Active State, it is a text editor for programming languages and it supports the following programming languages; PHP, Python, ruby , Perl, JavaScript, HTML, CSS and many others. It is widely used by users of many different abilities as it has a user friendly interface and it is supported by Mac, Linux and Windows operating systems. Also it offers users templates of webpages and snippets of codes that they can incoporate in to their programming.

There are many features of Komodo Edit, some of these are:

Text editor

HTML validator 

CSS validator

XML validator

Built in page preview

Write HTML 5 documents 

I will be using Komodo Edit, to write the HTML code for the Meridian BSAC website. Already from using and learning about it, komodo edit is relatively easy to use and it is very user friendly.

Wireframe Tool - Lumzy

Lumzy is a design creation tool that can be used to produce simple designs for websites and applications. It allows users to add events to controls, place controls inside other containers and also they can emulate a designed website with page navigation triggered by a users input. Lumzy has most of the common elements (i.e. a navigation bar) of a webpage stored in a library so that users can simply click and drag the element in.

The Layout and user interface of lumzy is very  user friendly and it is easy for users to learn and use.

Graphics Program - Microsoft Paint

The only Graphics program that I used to for the images on the webpage was Microsoft Paint(MS Paint).

It is a very basic graphics/painting utility comes as standard with the  Microsoft Windows OS, that can be used to draw, colour and has the basic tools to edit pictures which can be imported from the internet or device.

When designing and creating the website I used MS paint to crop images and change them to a suitable file format that can be used on the webpage.

Lorem Ipsum and Lorem Pixel

Lorem Ipsum is a tool that users can use  to produce placeholder text or  dummy text, that designer can use  to simulate the text element of a webpage without having to create the content itself. Users can use it to show the font, typography and layout of the text using lorum Ipsum. The text is made up of sentence of Latin text that has been rearranged to make no sense.

Lorem Pixel is another tool that is similar to Lorem Ipsum accept it is a placeholder or dummy image instead of text. Users can simulate the image elements of their webpages without having to have the images themselves. The user can determine the subject and size of the image and input the code in to the webpage to show and image.

 

Bibliography

HTML

Website: http://www.yourhtmlsource.com/starthere/whatishtml.html
Author: Ross Shannon
Date Accessed: 13/03/13

Website: http://en.wikipedia.org/wiki/HTML
Author: Various
Date Accessed: 13/03/13

CSS

Website: http://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
Author: Vineet Gupta
Date Accessed: 14/03/13

Website: http://en.wikipedia.org/wiki/CSS
Author: Various
Date Accessed: 14/03/13

Website: http://www.basictips.com/external-internal-inline-which-method-best.shtml
Author: Unknown
Date Accessed: 14/03/13

Komodo Edit

Website: http://www.activestate.com/komodo-edit
Author: Unknown
Date Accessed: 13/03/13

Website: http://en.wikipedia.org/wiki/Komodo_Edit
Author: Various
Date Accessed: 13/03/13

Lumzy

Website: http://www.lumzy.com/
Author: Unknown
Date Accessed: 13/03/13

Website: http://mashable.com/2010/07/15/wireframing-tools/
Author: Unknown
Date Accessed: 13/03/13

Microsoft Paint

Website: http://en.wikipedia.org/wiki/MS_paint
Author: Various
Date Accessed: 13/03/13

Website: http://windows.microsoft.com/en-GB/windows7/products/features/paint
Author: Unknown
Date Accessed: 13/03/13

Lorum Ipsum and Lorum Pixel

Website: http://www.lipsum.com/
Author: Unknown
Date Accessed: 14/03/13

Website: http://www.makeuseof.com/tag/lorem-ipsum-case-wondering/
Author: Tim Lenahan
Date Accessed: 14/03/13

Website: http://thenextweb.com/dd/2012/12/14/inspired-by-lorem-ipsum-lorempixel-lets-designers-dynamically-generate-placeholder-images/
Author: Harrison Weber
Date Accessed: 14/03/13

Website: http://lorempixel.com/
Author: Unknown
Date Accessed: 14/03/13

Website Design

1. Website Title

     BSAC Meridian  www.bsacmeridian.com

2. Website Description

British Sub Aqua Club are the national body of recreational diving in the UK. It consists of a many branches located around the country, but all operating individualy. The Meridian club requires a website that makes it presence on the internet and it must contain at least 5 pages.


Page 1 - Homepage

The homepage will contain an introduction outlining the information about the club and some diving pictures. It will also contain a link to the BSAC Website.








Page 2 - About Us

The about us page will contain information about the club, bsac and diving. There will be relevant pictures with it. There will also be information on club members.








Page 3 - Contact  Page

This page will contain all the information needed to join the club or try diving. There will also be a contact form on this page.

Page 4 - Image Gallery

The image gallery will contain images taken by club members.

Page 5 - News

The news page will contain all news from the club, such as information  from the committe and upcoming events.

Navigation Chart

The following diagram is the navigation chart for the BSAC Meridian Website.

Box-Model Explained

 

A web page is made up of a many boxes, each box contains a HTML element - the boxes are not always clear but all of the elements that are on the webpage generates its own box. The diagram below shows the general model that is used

 

Box-Model Diagram

Margin – Is an area that is around the border of the webpage, it is transparent and does not have a background colour. The margin is from the edge of the browser to the box, this is shown in the green section of the diagram.

Border – The border is surrounds the padding and the content of the webpage this is shown as the blue box above. The border is from the edge of the Margin to the content.

Padding – This clears the area around the content, this is affected by the background colour of the box. The padding is within the border and it contains the content. It is shown as the Purple box in the diagram.

Content – The content box is where text and images are displayed (the content). This is outlined as the red box in the diagram.

They work by using Div Tags which are inputted in to the code of the webpage as shown below:

In the HTML file:

<div class="a">
        Div Tagging
       </div>

In the Style sheet:

.a{
    background: blue;
    color:red;
    width: 100px;
    height:100px;
    text-align:  center;
    float:clear;

}
 

Example:

Example of Box-Model

 

Above is an example of Amazon's website, as you can see the webpage is made up of many boxes, some boxes are in other boxes.

 

Reference
http://wickham43.net/divboxes.php
http://www.htmlandcsswebdesign.com/articles/boxmodel.php

U20P1 Explain How HTML Files Access CSS

There are three different CSS styles that can be adopted when developing a webpage, these are;

Inline

Inline style is where the CSS is attached to the HTML element, however these cannot be reused, each time the style is needed a new style must be written, as each style will only affect the paragraph it is connected to. Below is an example of Inline:


<H1 style="color:blue;">


There are a number of advantages of using Inline CSS, these are;

 

-  Quick – Providing it is not solely used this is a quick method of writing code, as it is written straight in to the code.

-  Good for Small Websites – Because small websites only have a few pages, there are less different styles needed on the webpage’s. Therefore using this method over the others will aid the users of the site and the service provider.

- Faster loading – One of the major advantages of using Inline CSS is the website can load faster as there are less HTTP requests compared to using External CSS.

There are also some disadvantages of using Inline CSS, these are;

- Applying to all elements – Each element that has to have a Style on, must have the Inline style applied to them. So if all paragraphs have to have a particular font family, must have the inline style on them. This adds to the time it takes to create and the time to maintain the webpage and isn’t efficient.

- Overriding – Sometimes issues can arise and the style can override thing that they wasn’t supposed to.

- Another issue with using Inline CSS is that it is not possible to apply them to style Pseudo-elements and classes, whereas you can with Internal and External.

Overall the use of Inline Style is not recommended, although they can be quick to add and they are good for developing webpage’s. However the disadvantages outweigh this as they increase the amount of work needed for maintaining the webpage and is the least efficient.


Internal

Internal style CSS is placed in the <HEAD> tag, these styles can only be used in this webpage, but can be copied and pasted in to another webpage style sheet and can be used. This saves time as they do not have to be created each time. Below is an example of Internal CSS;

<Head>
<Style>
H1 { }
</style>
</head>

There are a number of advantages of using Internal CSS, these are

-    One Style needed – For the same element only one style is needed overall, so the style does not have to be applied to each individual element like Inline.

-    Less downloads/ HTTP requests – Because everything is stored in one sheet, means that less downloads are required to retrieve a webpage, and less HTTP Requests are needed.

-     Pseudo-elements – Unlike in Inline CSS it is possible to style pseudo-elements and classes, with Internal CSS styling hover, style, active and changing the link colour of an anchor tag is all possible.

There are also some disadvantages of using Internal CSS, these are;

-          Larger file sizes – because everything is stored in one page, it can increase the file size greatly, which will then mean that the webpage can load slower.

-          Multiple pages – this method can be used on multiple web pages but it involves copying the internal CSS into the each webpage.

Using Internal CSS is recommended and has many advantages, the disadvantage should be considered and for large webpage’s, using an External CSS might be better suited.


External

The External CSS is stored in a separate file, which is different from both Inline and Internal CSS where they are both stored in the same file. This method of CSS involves creating a separate file from the webpage that will contain all of the style and then including a link to the file in the webpage. Below is an example of this;

 

<head>

<lin k rel="stylesheet"href="style.css>

</head>
 

There are a number of advantages of using External CSS, these are;
 

-          Less Loading Time – because all of the styles for a website are stored in one file, once that file has been downloaded it only has to refer to that file for all or most of the styles on the webpage which intern saves loading time.

-          Full Control of Page – External CSS allows the web page to be displayed according to the W3C HTML standard without compromising the visual aspect of the webpage. Google gives a small amount of value to the webpage, although this is minimal it can drive a bit more traffic to a webpage.

-          Reduction of File Size – Because the CSS is stored in a separate file, it dramatically decreases the size of the individual webpage’s, therefore allowing them to load faster. With the space that you gain from storing them separately allows the programmer to increase the number of keywords and therefore the effectiveness of spiders.

-          Higher Webpage Ranking – External CSS allows Search Engine Optimisation to be used more effectively, Spiders will be able to search the webpage’s code a lot quicker when there are two files.

There aren’t many disadvantages of using External CSS, but the few are;

-          An extra download is required to be able to import the CSS for each webpage, which can affect the speed of downloading a webpage slightly.

-          Because there are two webpage’s, rendering the webpage can be delayed as the External CSS must be completely downloaded to render all the whole webpage.

This is the most commonly adopted method of CSS as the advantages greatly outweigh the small disadvantages.

 

References Used

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

http://www.basictips.com/external-internal-inline-which-method-best.shtml

http://www.beginnersguidetohtml.com/guides/css/styles/external-internal-inline-styles