Scriptive Language

 

How a scripting language can improve functionality

Scripting languages, which can be embedded within HTML, commonly are used to add functionality to a Web page, such as different menu styles or graphic displays. These types of languages are client-side scripting languages, affecting the data that the end user sees in a.

 

Validation

Client side

In Client side the scripting does all the calculations on the user's computer. The web browser or a specific plug-in reads the script and converts it into a visual web page.

Front end context uses scripting through a user interface. There are many ways a user interface uses scripting‍ one is that it re sizes parts of the web page to make it all fit properly. It also re sizes boxes.
Most of the information that the user enters into the website stays in the client side and sometimes sent back to the server. JavaScript can obtain external files and images. It then exploits all of this using web analytic programs, the server can retrieve all the information from all of these.

Server side
Server-side scripting is a web server technology in which a user's request is verified by running a script directly on the web server to generate dynamic web pages. It is usually used to provide interactive web sites that interface to databases or other data stores

Form validation used to occur at the server after the client had entered all necessary data and then pressed the Submit button. If some of the data that had been entered by the client had been in the wrong form or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process and over using servers. JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions.

• Basic Validation - First of all the form must be checked to make sure data was entered into each form field that required it. This would need just loop through each field in the form and check for data.
• Data Format Validation - Secondly the data that is entered must be checked for correct form and value. This would need to put more logic to test correctness of data

By doing the validation checks on the client side, it saves a lot of processing and server usage which helps keeps the system goin for longer. showing you how to check for the following:

•  If a text input is empty or not
•  If a text input is all numbers
• If a text input is all letters
• If a text input is all alphanumeric characters (numbers & letters)
• If a text input has the correct number of characters in it (useful when restricting the length of a username and/or password)
•    If a selection has been made from an HTML select input (the drop down selector)
•    If an email address is valid

GUI

A program interface that takes advantage of the computer's graphics to make the program easier to use. Well-designed graphical user interfaces can free the user from learning complex command languages. On the other hand, many users find that they work more effectively with a command-driven interface, especially if they already know the command language. They use windows, icons and menus to carry out commands such as opening files, deleting files and moving files. They are often used in computers, mobile devices and protable games.

JavaScript

JavaScript is a programming language used to make web pages interactive. It runs on your visitor's computer and doesn't require constant downloads from your website. JavaScript is often used to create polls and quizzes. Javascript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content.

JavaScript is used in Web site development to do such things as:

• Automatically change a formatted date on a Web page
• Cause a linked-to page to appear in a popup window
• Cause text or a graphic image to change during a mouse rollover

JavaScript uses some of the same ideas found in Java, the compiled object-oriented programming derived from C++. JavaScript code can be imbedded in HTML pages and interpreted by the Web browser (or client). JavaScript can also be run at the server as in Microsoft's Active Server Pages before the page is sent to the requestor. Both Microsoft and Netscape browsers support JavaScript, but sometimes in slightly different ways.

Jquery

The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. The jQuery library contains the following features:

·      HTML/DOM manipulation

·      CSS manipulation

·      HTML event methods

·      Effects and animations

·      AJA

·      Utilities

References

Btec book 2, date accessed: 01/05/2013

Ws, date accessed: 01/05/2013- http://www.w3.org/TR/html4/interact/scripts.html

Ontopia, date accessed: 01/05/2013- http://www.ontopia.net/i18n/index.jsp 

W3schools, date accessed: 08/05/2013 - http://www.w3schools.com/jquery/jquery_intro.asp

Description

Here are the descriptions for the following terms:

HTML(Hypertext Markup Language): Is the language that web pages are written in, these websites can then be viewed by anyone else connected to the Internet. HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser. The tags are what separate normal text from HTML code. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. An examlpe of this would be:
 <b>these words would be bold< /b> and these wont be

CSS(cascading style sheets): A way for Web developers to define the look and feel of their Web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on - the markup of content, without worry about the design and layout. Style sheet refers to the document itself. They are the technical specifications for a layout, whether print or online. Print designers use style sheets to insure that their designs are printed exactly to specifications. For example if a developer wanted the text in the maincontent to be blue he would do:
#maincontent
{
color: blue;
}

Komodo Edit: This is a open source language editor which allows the user to develop languages such as HTML and CSS. You can get extensions for it to add on languages or other helpful features (like special characters). Here are some of the Komodo Edit features:

Text editor

HTML validator

Accessibility validator

CSS validator

XML validator

Page preview

Save pages as HTML with DTD

Write HTML 5 documents

Write XHTML documents

 Lumzy: Lumzy is a design creation tool for websites and applications. You can add events to controls, place controls inside other containers and emulate your website with easy page navigation triggered by user actions. It is simple to use because you can just grab any picture or naivgation and lay out anywhere you wish to on the canvas. It also lets you change the theme of your website from Apple or Microsoft.

Microsoft Paint:  Microsoft Paint or 'MS Paint' is a basic graphics/painting utility that is included in all the Microsoft Windows versions. MS Paint can be used to draw, colour and edit pictures including imported pictures from a digital camera for example. MS Paint is found in the Windows Start menu within the Accessories Folder. It can save creations in standard formats such as .jpg and .bmp.

Lorem Ipsum: Lorem Ipsum is a group of text that people commonly use as filler text, or dummy text. It’s basically a bunch of mumbo-jumbo that people use to show what a design layout will look like when the proper text has been inserted.



BIBLIOGRAPHY

Your Html Source, date accessed: 14/03/2013:
http://www.yourhtmlsource.com/starthere/whatishtml.html

Web Design. date accessed: 14/03/2013:
http://webdesign.about.com/od/beginningcss/a/aa021607.htm

Mashable, date accessed: 14/03/2013:
http://mashable.com/2010/07/15/wireframing-tools/

Digital Unite, date accessed: 14/03/2013:
http://digitalunite.com/guides/microsoft-programs/what-microsoft-paint

Make use of, date accessed: 14/03/2013
http://www.makeuseof.com/tag/lorem-ipsum-case-wondering/

1) Website Title: Animal Planet

2) The website will feature information about animals. It have a fact file of 4 different Animals and a homepage:

Page one: homepage with a description of the website and links to the other pages.

Page two: Fact file about Cheetah's

Page three: Fact file about Penguins

Page four: Fact file about Snow Leopard

Page five: Fact file about Lions

 

 

Description of Web Page

The website that I have created is in a 2 collumn lay out. The container for my website is 1200px, It is about animals and has fact files about 4 different animals with a home page. I have chosen a eagle as a logo for the website which will feature on all the web pages. In the right content I have links to different websites which relate to Animals. My navigation changes colour each time depending on the web page you are on. As the user hovers over the naivgation, it changes colour to white to show that it is active. Each webpage has its own theme according to the animal it is describing. The main content has got text in paragraphs with a picture inside them. 

 

 

 

 

 

 

 

 



Box Model

CSS BOX MODEL

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, 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.

Margin -The margin is the length between the border and the browser - <div class="margin">

.margin
{
width:100px;
}

Border - A border that goes around the padding and content. The border is affected by the background color of the box- <div class="border">

.border
{
color:yellow;
}

Padding - Clears an area around the content. The padding is affected by the background color of the box- <div class="padding">

.padding
{
width:100px;
}

Content - The content of the box, where text and images appear-

<div class="content">

.content
{
background: blue;
color:yellow;
}



Bibliography

• W3schools, Date Accessed: 18/12/12- http://www.w3schools.com/css/css_boxmodel.asp 
• CSS tricks, Date Accesssed: 18/12/12- http://css-tricks.com/the-css-box-model/

U20P1 - Explain how HTML files access CSS

 

Features of web development -

In the following post I would describe styling methods in CSS these are Inline, Internal and External.

Inline

HTML is used for layout
CSS is used to format web pages
The structure of CSS

the CSS is attached to the HTML element e.g. <h1 style="color:blue;">

• This code is useful if you need to use the style only once
• Limitations are that if you need the style again you need to write the code again and every time you use it.
• Has to be created and repeated for every task

Advantages

• The website such as Blogs where there are only limited number of pages, using of Inline CSS helps users and service provider. It is also useful when designers are testing a web page and encouter a problem which can not be easily fixed. 

Disadvantages

•  Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family “Arial” you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader.

Internal

the CSS is described in the <HEAD> tag e.g.
<head>
<style>
h1{
color:blue;
}
</style>
</head>

• Is useful for using one page because it can be carried on for a certain tag within that page
• Not useful for multiple pages as they don't carry on 
• Has to be entered once every page

Advantages

• Manage styling within a single document. Also Internal styles do not need not be applied to every element. So if you want all your paragraphs to have the font family “Arial” you have to add an Inline style <p> tag in Internal Style document.

Disadvantages

• Hard to maintain consistency across several related web pages
•  This method can’t be used if you want to use it on multiple web pages.

External

<head>
<link rel="stylesheet" href="style.css">
</head>

• links to an external style sheet where the tag is entered
• Most useful because it cam be carried on for a tag for multiple pages
• Has to be entered once

Advantages

• Can link to multiple documents
• By including the styling of the text in a separate file, you can dramatically decrease the file-size of your pages.

Disadvantages

• Takes longer typing it out for smaller websites

Bibliography

• Word press, Date Accessed: 18/12/12, http://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/

• CITA, Date Accessed: 18/12/12, http://cita.disability.uiuc.edu/courses/2003-02-REHAB711NC/review2/slide13.html

• Yahoo,Date Accessed: 18/12/12, http://uk.answers.yahoo.com/question/index?qid=20120413134600AAaE8kF