P3: Explain the fundamentals of a scripting language

A scripting language is a tool which is used for functionailty to other software. The programming languages that use scripting languages are Javascript, PHP, Python, etc. It is designed for the purpose of creating simple tasks.An example could be when a user types a product name into a search bar and the computer displays the most relevant items on the website. It is a message from the user to the computer. Interactivity is not only useful but it is now expected by customers. Static websites have only fixed information on it, if it is to be changed then the designer needs to change the code and then upload the amended page to the web server. These websites are seen as old fashioned and useless because it wastes a lot of time.

Today, users prefer using dynamic websites where it is updated live online, usually there are scripting languages or databases. Dynamic websites are easy to maintain once they go live on the internet, this means once a website is uploaded to be viewed on the internet.

A scripting language is normally used in conjunction with another programming language, because of this you will often find it alongside Java. It is easier to write the code in a scripting language than in a recorded language. However, scripting language are slower because the instruction are not handled solely by the basic instruction processor. A normal programming language such as C++ is collected into an executable file, however a scripting language reads one command at a time rather than being collected

Scripting languages are mainly used to add functionality and interaction to a webpage. JavaScript is a interpreted computer programming language, which was created by Netscape. It was originally designed as part of web browsers so that client side scripts could interact with the user, control the browser and alter the document content that was shown. JavaScript was created with the exact purpose since HTML did not have the capability of providing the full experience of interactive websites alone, so JavaScript was joined to make the websites interactive

The main difference with a scripting language and a programming language is the way they are used. Scripts are typically quick whereas a programming language is meant to be more thought out and deliberate. Scripting languages are languages that do not need complication. A script is code part, rather than a complete or standalone application. An example includes code in a webpage.
 

Client Side Scripting

Client side scripting is used to make web pages change after they arrive at the browser. It is useful for making web pages a bit more interesting and user friendly. It can provide useful gadgets such as calculators, clocks, etc. As the code is being executed on the user’s computer, a possible entry point for hackers is opened up.
 

Server Side Scripting

Server side scripting is often used for allowing users to have individual accounts and providing data from databases. It allows a level of privacy, personalisation and provision of information that is very powerful. E-commerce and social networking sites all rely on server side scripting to keep information safe.

Javascript

JavaScript is an interpreted computer programming language. It was originally made as part of web browsers do that client side script could interact with the user, control the browser, and alter the document content that was displayed.  JavaScript is a scripting language and it gas a wide range of applications including e-commerce and advertising networks such as Google AdSense.

JavaScript plays a obvious role in displaying adverts on websites. It controls which ads are displayed and may set a cookie on your computer which indicates you have seen the advert, JavaScript is also used to open windows for pop up adverts unless your browser restricts it.JavaScript is extensively used for e-commerce sites. It plays a huge part is such tasks such as adding items to your shopping cart, processing forms and submitting orders to be shopped. It can also be used to show dynamic content to users while shopping such as related items you have seen.

JavaScript is also used to display simple alerts to users for example if you fill out a form and type in a invalid address, an alert will appear saying there has been a mistake. JavaScript is also used for security. Some login systems need you to type in your password using a onscreen keyboard.

jQuery

jQuery is a coding language that is from JavaScript. jQuery works like JavaScript where it is used to help with interaction and effects with your development code. jQuery hasn’t been around for a long time, it was released in the year 2006 and the only version is 1.4.0. jQuery is new and an exciting technology which catches on quickly and makes the internet more interactive and enjoyable. With jQuery, you can accomplish effects with less code that it would take with JavaScript. Most common jQuery effects are drop down menus, drag and drop elements, animation and form validating. Developers have connected his with other coding language such as JSP, ASP, PHP, and CGI

With languages that are event driven, the code is broken in to events so it could be any action for example the most used one is the click of the mouse. When the mouse is clicked then the code is triggered into running when the action happens Events are actions, which script sense, and when it is sensed a reaction occurs. Events can include a mouse button being clicked or a keyboard key being pressed. Old browsers do not support scripting languages. Browsers that can interpret will see the <script> tags and interpret the code between them. Browsers that cannot interpret the script will ignore the script tags and also the HTML comments

http://searchwindevelopment.techtarget.com/definition/scripting-language

http://www.webopedia.com/TERM/S/scripting_language.html

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

http://www.w3schools.com/js/js_loop_for.asp

http://unit20-ict.blogspot.co.uk/2012/10/p3-fundamentals-of-scripting-languages.html

http://www.w3schools.com/js/js_variables.asp

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Expressions_and_Operators

http://www.javascriptkit.com/javatutors/event1.shtml

http://www.w3schools.com/js/js_htmldom_events.asp

http://javascript.about.com/od/reference/a/javascriptpurpose.htm

http://www.ecommerce-web-hosting-guide.com/what-is-java.html

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

P2: Explain The Features of The Box Model For CSS

P2: Explain The Features of The Box Model For CSS 

The CSS box model describes the boxes that are made in the content of a web page. Every element in the web page is in a box or is a box, even if it is an image. The boxes on the web pages are constrained by rules which are given by the box model

There are four parts of the box model which are shown below.

1.       Margin

2.       Border

3.       Padding

4.       Content

The four parts of the box model are explained in more detail below:

Margin:  the margin is the area around the border. The margin does not have a background, it is completely transparent.

Border: The border is the next thing surrounding the box and is below the margin. Borders can be coloured or transparent. If the border format is set to 0 then it disappears and the border will be the same as the padding edge

Padding: The padding is the space between the content and the border. Padding is tghe same colour as the background colour of the box. If the padding format is set to 0 then the padding border will be the same as the content border

Content: The content is the last part of the box model and this is where the text or an image is displayed.

You can edit different parts of the box model with the CSS properties such as:

• Margin
•  Border
• Padding
• Width
• Height

The border of the box model can be edited with CSS and some examples of this is shown below:

Border width: You can edit this to made the width thick or thin and you can choose how thick or think you want it with the code ‘border-width:1;’

Border style: you can edit this by choosing a variety of patterns for the box such as dotted, dashed, inset, outset, solid, etc. This can be shown in CSS like ‘border-style:dotted;’

Border color: you can edit this by choosing any color such as aqua, blue, etc. This can be shown as ‘border-color:#Blue;’

The width and the height can be changed to how big you want the box to be. The coding for this would be ‘width:100%; and for height it would be the same but the width would be changed to height ‘height:100%;

Padding: the padding helps you choose where you want the position to be of the box. An example of this could be: ‘padding:50px; or ‘padding: top right;

The last thing that could be edited is the margin. The margin is slightly the same as the padding but the coding is changed for example ‘margin:all; or margin:25px;’

All of this can done by div tags. A div tag defines a section in a HTML document, this is used to group elements to make them format with CSS. Div tags help make a page that is easy to manage and change later when needed. An example of a div tag being used in a html file and a style sheet are shown below:

HTML

<div class="a">Raja Kang</div>

 

In a Style Sheet:

.a{

background:pink;

color:green;

width:50px;

height:50px

text-align: center;

float:right;

}

 

Bibliography

http://www.w3schools.com/css/css_boxmodel.asp

http://www.css-101.org/the_box_model.php

http://webdesign.about.com/od/beginningcss/p/aacss6box.htm

http://www.w3schools.com/tags/tag_div.asp

http://webdesign.about.com/od/htmltags/qt/tipdivtag.htm

M2: Discuss how a scripting language can improve functionality

A scripting language is a tool, which is used to add functionality to other software. It is not as powerful as a full programming language and it is generally designed for simple tasks like creating interactive menus or searching databases. HTML can help by creating static webpages but it can’t do everything and that’s why JavaScript and PHP can make the websites dynamic with user interaction. JavaScript is very important to help make a website functional. Scripting languages that can be embedded within HTML are commonly used to add functionality to a webpage such as different menu styles or graphic displays or to server dynamic advertisements. 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.

If a website used JavaScript effectively, then it can add user prompts, navigation assistance, user choice confirmation and many other client side calculations. JavaScript is used to improve the content and functionality of websites. Businesses such as Amazon use JavaScript to improve their website by alerting users and opening popups. By using a scripting language it will make a more interactive website because the page will respond to the users actions instantly. From the developer side, it allows more control over the appearance and actions of the webpage

However, there are some browsers that are out-dated and some people will still use them and they may not run scripting languages, this could result in the webpage not running properly. From a developer side t takes a lot of time to add scripts to a webpage in terms of both writing the scripts and testing them. Some browsers which can be used are: Mozilla Firefox, Google Chrome, Apple Safari & Internet Explorer.

There are many reasons to use a scripting language in a webpage. The main reasons to use a scripting language are shown below:

 There are often times when we wish to automate a simple task – a scripting language helps by running several programs in a row, installing programs, even writing a simple script or GUI to run a program that needs many parameters

Scripting languages allow us to write code quickly and run it without any compilations. They also have good support for launching processes and controlling them, etc.

By using a script, you would never be confused and think ‘where is the source’ because the script is the source

Every website has cookies. A cookie is a small piece of information which is sent from a website that is stored on the visitors computer. It is a message given by the browser to a web server.The browser will store the message in a text file and then the message will be sent back to the server each time the browser requests a page from the server. A cookie is mainly used to identify the user, there are different types of cookie which are shown below:

• Session cookie – this is a cookie that is only stored temporarily while the user browses the site, this is created when a expiry date or time is not given

• Persistent cookie – this is a cookie which lasts longer than the users that visit on the site

• Name cookies – this is a cookie that stores the login information in a cookie so next time the visitor loads the site, their information will be stored. The site could also display something like a welcome message which is personalised for the user such as Amazon say ‘ Hello, ……..’

When using JavaScript you can add rollover buttons. A rollover button is a web button that changes its appearance when the mouse moves over it. It contains three states, which are normal, over and down. Normal state applies to when the mouse is off the button, over state applies to when your mouse rolls over the button and down state applies to when you click on the button. Rollover buttons are different to static web buttons because they are dynamic in nature and allow you to change the colour or style of the button with the movement of the mouse.

Client side validation is optional but it has a lot of benefits, which include faster response to the user than server side validation, a reduction in web server loads, and a reduction in network traffic. Client side validation can be implemented as interactive validation. Validation in the client tier is unreliable because the user can bypass the validation through design, error or configuration. Client side validation is a tool that should be used only to improve speed, reduce load and add effects.

Validation is very important to web database application. Validation makes sure that data meets user and system requirements. Client tier validation happens at the client browser before a request is sent to the server and is usually validation of <form> data. The most common way to user client tier validation is suing the scripting language best known as JavaScript.

Server side validation is usually performed in middle tier script and is the most important validation tool. When data is inserted, updated or deleted at the database. Trapping errors using the PHP error function is hard because it has a unnecessary network and DBMS overhead, and I is hard to present to the user is a useful way. It is better to use PHP scripts to validate data and make sure all constraints of the database are bet before modifying the database.

As mentioned above, there are two main types of scripting languages for the web. The two scripting languages are client side and server side. These two scripting languages are explained below:

Client-side: The client is the system on which the web browser is running. JavaScript is the main client-side scripting language for the Web. The browser interprets client-side scripts. Client side scripting has a process, which is shown below:

The user requests a web page from the server

The server finds the page and sends it to the user

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

Client side scripting is used to make web pages change after they arrive at the browser. It is useful for making web pages a bit more interesting and user friendly. It can provide useful gadgets such as calculators, clocks, etc.

Client side scripts rely on the users computer. If that computer is slow then it may run slowly. They may not run at all if the browser does not understand the scripting language, this is one reason why it is important to have recent browsers because they have to run on the users system and the code, which makes up the script is there is the HTML for the user to look at. An example of client side scripting is JavaScript & VB

Server Side: the server is where the web page and other content stays. The server sends pages to the user/client when requested. The process for this is shown below:

The user requests a web page from the server

The script in the page is interpreted by the server creating or changing the page content to suit the user

The page in its final form is sent to the user and hen cannot be changed using server side scripting

The use of HTML forms or clever links allow the data to be sent to the server and processed. The results may come back as a second web page. Server side scripting is often used for allowing users to have individual accounts and providing data from databases. It allows a level of privacy, personalisation and provision of information that is very powerful. E-commerce and social networking sites all rely on server side scripting to keep information safe.

The script is interpreted by the server, which means that it will always work the same way. The user never sees server side scripts, which is useful so they can’t, copy their code. They run on the server and generate results, which are sent to the user. Running all these scripts puts a lot of loads onto the server but nothing on the user’s system. The server side system has to be powerful so it can deal with the entire load.  An example of sever side scripting is PHP, Python, Ruby, etc.

The difference between client side and server side:

The difference between the two scripting languages are simple, the client side code is processed by the client/browser while the server processes the server code. A typical web page for the client is made of some HTML which is implemented by CSS or JavaScript. The browser never sees server side code and the browser should never need to be aware of server side scripts such as PHP. Server side code is browser independent, which means that if the page you create looks different in Internet Explorer, and then it does the same in Opera

Advantages and Disadvantages of client side scripting

Advantages	Disadvantages
Allow more interactive by immediately responding to users actions	Not all browsers support scripts and because of this errors can happen
Execute quickly because they don’t need a trip to the server	Different browser and browser versions support scripts differently
May improve the usability of websites for users	More development time and effort may be required
Can give developers more control over the look and behaviour of widgets	Developers have more control over the look and behaviour of widgets
Can be substituted with alternatives such as HTML
Are reusable and obtainable from many free resources

Advantages and Disadvantages of server side scripting

Advantages	Disadvantages
It reduces the load on the users computers because it don’t need plugins	It requires the scripting software to be installed on the server
You can use it to dynamically create pages	Many scripts require databases in order to store dynamic data
Website owners can create their own applications without editing code	The nature of scripts create new security concerns

Advantages and Disadvantages of JavaScript

Advantages	Disadvantages
Allows websites to interact with the client	Browser must support the language such as JavaScript
Browser detection to inform the user that the page they are trying to view only works on a certain browser	Some languages are written with only one browser such as VB script for Internet explorer
Can be used to redirect and alert the user	JavaScript can be used maliciously because it executes code
Used to store cookie information which can be used to keep users logged in	Different users can produce different results
Most browsers support main scripting languages

Bibliography

http://uk.answers.yahoo.com/question/index?qid=20130219055037AAaP9Xp

http://www.webopedia.com/TERM/C/cookie.html

http://www.w3schools.com/js/

http://www.enable-javascript.com

http://www.ehow.com/about_6169025_rollover-button_.html

http://unit20-ict.blogspot.co.uk/2013/01/m2.html
 

http://en.wikipedia.org/wiki/Client-side_scripting

http://www.webopedia.com/TERM/C/client_side.html

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

http://www.pcmag.com/article2/0,2817,1554984,00.asp

http://thescriptinglanguages.wikispaces.com/How+scripting+languages+and+javascript+improve+functionality+M2

 http://www.serverschool.com/server-software/advantages-of-server-side-scripting/

Website Information

Website Name :- Tom & Jerry

My website is about :- Tom & Jerry

The five pages will be:

The homepage will include a basic design of tom and jerry which will include very little text and a big image

The second page will include the history of Tom & Jerry, which will include how the show started, what it is, etc

The third page will include the characters of the show such as Tom, Jerry, Spike and Tyke

The fourth page will include the tom and jerry series which will be show all the shows of tom and jerry

The fifth page will be about the channel the show is on which called Cartoon Network

 

 

My five page designs are shown below with my navigation chart.

 

 



Describe:

HTML:- HTML stands for Hypertext Markup Language. This is a language which has a set of standards and is used to tag the element of a hypertext document. This is a standard protocol for formatting and displaying documents on the internet. HTML explains the structure and layout of a web document by using a range of tags and attributes. A HTML documents starts with <HTML> then <HEAD>, inside head you can write what the document is a about. <BODY> is used to add all the information you would like to include in the web page. The document ends with a closed </BODY> & </HTML> tag. There are loads of tags that are used to format and layout the information in a web page. Tags can also be used to specify hypertext links. This would let web developer’s direct users to other web pages with only one click on an image or word. HTML is used for the coding and creation of web pages.

CSS: CSS stands for Cascading Style Sheet. CSS is used to format the layout of webpage’s. They can be used to explain text styles, table sizes and other aspects of web pages. CSS helps web developers create a good look for several pages of a website. HTML used CSS to make documents look good and make it grab the audience’s attention. CSS makes it easy to change styles across several pages at once. For example a web developer might want to increase the text size from 10pt to 14pt for 8 pages of a website. If the pages all reference the same style sheet, the text size will only need to be changed on the style sheet and all the pages will show the larger text. An example of CSS being used to format some text is shown below:

H1{

color: red;

background: blue;

font-size: 14px;

text-align: center;

text-decoration: underline;

}

Komodo Edit:  Komodo edit is a free text editor for programming languages. Komodo Edit is fast and smart software which works for Linex, Mac and Windows. It supports programming languages like PHP, Python, Ruby, JavaScript, Perl, Html 5, CSS, etc.  This software helps the user a lot by giving suggestions for code and CSS. An example of this would be if you were trying to format some text in CSS, it would give you examples of colours you could use for the background/font colour

A wireframe tool: Wire framing is an important part in web design because it helps pinpoint potential problems early. Wireframe tools make it easy to communicate ideas, and cut down project costs. The purpose of a wireframe tool is usually being informed by a business objective. This tool helps design the page layout or arrangement of the websites content including interface elements and navigational systems. I will be using mocking bird because it has advanced tools which will help me create, link, preview and share wireframes of the website. Mockingbird is one of the best wireframe tools available and a good advantage for this is that it’s free!

Graphic Program: Adobe Photoshop is a graphics-editing program, which was made by Adobe. Photoshop is one of the biggest graphics software that is used nowadays because of its simplicity and the range of tools. Photoshop lets you edit images very nicely and absolutely change the whole look. An example of this could be a skinny person edited to make them look fat. If you are very good with this software then you can do many other big things.

Lorem Ipsum is a filler text which is used to demonstrate the elements of a documents or presentation such as font, typography and layout. The lorem ipsum text is a section of Latin with words altered, added and removed to make text that does not make sense. Lorem Ipsum lets you create as many paragraphs as you want to demonstrate some text on a website.

 Bibliography

HTML Definition, 15.02.2013, http://searchsoa.techtarget.com/definition/HTML

HTML, 15.02.2013, http://dictionary.reference.com/browse/html

HTML, 15.02.2013, http://web-design.lovetoknow.com/web-design-tools/what-is-html-used

CSS, 15.02.2013, http://answers.yahoo.com/question/index?qid=20110707151805AAOzx8J

CSS Definition, 15.02.2013, http://www.webopedia.com/TERM/C/CSS.html

Komodo, 15.02.2013, http://www.activestate.com/komodo-edit

Mocking Bird, 15.02.2013, https://gomockingbird.com/

Wireframe Tools, 15.02.2013, http://mashable.com/2010/07/15/wireframing-tools/

Lipsum, 15.02.2013, http://www.lipsum.com/

Lorem Ipsum Definition, 15.02.2013, http://en.wikipedia.org/wiki/Lorem_ipsum

HTML image, 15.02.2013, http://www.optimiced.com/wp-uploads/2009/06/icon-validator-v1.jpg

CSS Image, 15.02.2013, http://files.softicons.com/download/system-icons/adobe-cs4-files-folders-icons-by-deleket/png/256/File%20Adobe%20Dreamweaver%20CSS-01.png

Komodo Edit image, 15.02.2013, http://macin.files.wordpress.com/2010/07/komodo-edit-6-0-0b2-icon.png