P3-Explain the fundamentals of a scripting language & M2-discuss how a scripting language can improve functionality

Scripting Languages

Scripting languages are interpreted from a code one command at the time. Scripting languages are used to create dynamic web pages by enhancing feature on a web page which improves functionality . A scripting language isn't as power as a programming and can not be saved on to a hard drives it is used to develop simple programs where as programming languages can be used to create operating systems.Scripting languages are interpreted by the web browser or the web server depending on whether it is client side scripting or server side scripting.

There are two types of scripting languages which include server-side scripting languages and client-side scripting languages.


Server-side scripting language

This type of scripting language runs on the server, server side scripting language processes the users input, displays web pages, structures web applications and interacts with the permanent storage files such as SQL. Server script languages have more access to data and functions on the server whereas client scripting languages have more access to data and functions on a user’s browser.

Some examples of server-side scripting languages are PHP,ASP,Perl

<h1 id="hello"><?php echo 'Hello'; ?></h1>

Client-side scripting language

This type of scripting language runs on the user’s browser, client side scripting language makes web pages interactive, enables dynamic web pages to work, it interacts with the temporary and local storage on a user’s computer e.g. cookies ,it also sends requests to the server for data and retrieves the  data.

Some examples of client-side scripting languages are JavaScript.

<script>

Document.getElementbyId(‘Good Morning’).innerHTML= ‘Good Morning’’;

</script>

Validation

Validation is the process of checking if something is correct or incorrect. Validations ensures that the user has entered the required information correctly in the right format e.g. letters and numbers. It can also be used to check that the user has inputted some sort of data in the required field this is called a presence check. Validation can take place in two different places which include the users browser and on a server

Client side validation 

client side validation take place on the users browser which means that the validation process is done quicker compared to server side validation. Client side validation is executed by the users browser it can be easily bypassed because it depends on the browser meaning it can not be trusted. There can be many design problems with client side validation because users use different versions of different browser that might not all be compatible because different browser support different types of scripts. client side validation can improve the usability of  websites  for users who's browsers support the script.

Server side Validation

Server side validation analysis the user data input by submitting it to the  server by using scripting language. If the server detects invalid data it will result in the page being sent back to the browser along with an error message requesting the data to be resubmitted correctly.server side validation isn't as efficient as client side validation because it requires more time to validate the user input. The advantage of server side validation is that it is more secure than using client side validation because it can be bypassed as easily.


Interactivity
Scripting languages enables interactivity because it is embedded with HTML, Web interactivity gives the user feedback when they have hovered their mouse over a button or when they have clicked on button on a webpage. e.g. when a user has clicked on button it may change colour which lets the user know on which button they have clicked on. There are many types of feedback a user can get not just from buttons but also pictures.

scripting lanugages can make it easier to include things like user prompts, navigation assistance and user choice confirmation. It can improve the experience the user has by adding client side interaction to provide a more interactive interface and also dynamic web pages can remember the user and their preference which improve their browsing experience.

Dynamic web pages can be constructed using either server side languages or client side languages. They will show varying content every time they are viewed, because they are influenced by many factors including the day of the week, date, and the user’s browsing history.

JQuery

Jquery is free open source software which contains a JavaScript library which simplifies client-side scripting for HTML which makes it easier to use JavaScript on a website. Jquery provides advance web page manipulations, decorations, functions and animations and also functions for sending HTTP, GET and POST requests. With Jquery you insert more features in to a web page with less code than if you used JavaScript. Jquery works in all popular browsers. Jquery helps to improve the performance of an application.

The jQuery library contains the following :

HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

Features of JavaScript

JavaScript is a programming language that is used to make web pages interactive from Netscape. Javascript is normally already built in a users browser which means that it doesnt need to be downloaded every time you use a we browser. Browers which have JavaScript built in include Internet Explorer, Firefox and Safari.JavaScript interacts with HTML code which allows web designers to make dynamic web sites Java script can run both on a client and server side.JavaScripts enables features such as the following on a website :

·         A linked-to page to appear in a popup window

·         Cause text or a graphic image to change during a mouse rollover

·         Automatically change a formatted date on a Web page

·         Validating the user's input

·         Browser Detection

Reference

http://www.webdesign.org/web-programming/javascript/4-powerful-features-of-javascript-programming-language.17008.html

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

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

http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

http://www.webhostingbluebook.com/scripting-languages.php

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

Makeup,hair,nails and fashion

I will be designing a web site that is aim at women interested in beauty, in my website there will be product reviews on makeup,hair and nail products. my web site will include five web pages that will contain the following:


Web page 1

Home page : This page will be my home page which will contain pictures and also some information about my web sit it will also contain links to other web pages in my website.

Web page 2

Makeup : This page will contain information,product reviews and pictures of makeup products.

Web page 3

Nails: This page will contain information,product reviews and pictures of nail products.

Web page 4

Hair:This page will contain information ,product reviews and pictures of hair products.

Web page 5

Fashion:This page will contain different type of fashion looks a person can try out.



Below is a picture of my navigation layout for my website:

Below is the design of my five web pages:

 

Reference:

 

http://www.lumzy.com/



Assignment 2

HTML ( Hypertext Markup Language)

This is the language that is used to create web pages, html defines the structure of a web page and it also tells the web browser how to  display features on a web page such as text, colours, images and buttons. Html contains hundreds of different tags which help create the structure of the web page such as:

<HTML>

<head></head>
<body></body>
<p></p>
<h1></h1>
<footer></footer>
<link>
<img>
<div></div>

these tags help to insert images, headers, paragraphs,footers etc in to the specific order the user want them in,html also allows the user to insert a link in order to direct the user on to another website.

CSS (Cascading style sheet)

CSS defines how elements from HTML document are displayed in,CSS can be used to change colour, text size, widths,lengths, patterns,lines, font style of elements in a HTML document. CSS allows the user to separate the design content for a page and the HTML.CSS can control the layout of many different web pages from only one single style sheet.

e.g.

#navigation{
width:200px;
}

#p1
font-size:20px;
font-style:verLdana;
}
Komodo edit

komodo edit is a free open source language editor program that supports languages such as
Perl, PHP, Ruby, javaScript,Tcl, SQL, Smarty, CSS, HTML etc. Komodo edit is available different operating systems such as windows, mac and linux. when using komodo edit users are able to to view there web page coding on a web browser

Wireframe tool Lumzy

lumzy is a wireframe tool which allows a user to be able to plan there web page layout and design by creating a prototype so they have a rough idea of how the basic structure,components,and navigation of there web page will look like.

Lorem Ipsum

lorem ipsum is a website which provides users with dummy text which is randomly generated,they can use this text when planning the structure of there web page design. It also allows the user to choose how big they want there paragraph to be and also the font style. The user can choose from a wide range on languages in which they want there dummy text to be in.

Lorem pixel

Lorem pixel is a website which provides a user with a random image, the user can choose the size of the image they want by entering a specific height ,width and image format.These images are used when a user is doing a rough design of there website so they are able to have a rough idea of how there website would look like with pictures inserted in it.


Reference
http://blog.crazyegg.com/2012/06/15/image-text-placeholders-web-design/
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.w3schools.com/html/html_intro.asp
http://www.activestate.com/komodo-edit
http://www.lipsum.com/
http://lorempixel.com/

M1- Assess different implementation styles of CSS

Implementation styles of CSS

In this blog post I am going to assess different implementation styles for CSS which include Internal, External and inline style sheets.

CSS= Cascading Style Sheets this is used for formatting and coding web sites
HTML is used for page layouts

Inline

The CSS is attached to the HTML element e.g.

<h1 style="color:blue; font-size:12px<h1 style ="color:red;">

One of the advantages of using inline is that it is easier to scroll up in the source, rather than change the whole  source file also website's would load much faster compared to if you’re using external CSS because it has Lower HTTP requests which mean that Inline loads faster.

0ne of the disadvantages of using inline is that Inline styles must be applied to every element that you want it to be in also it is the most specific in cascade which means that it can sometimes over ride things which you didn't intend for.

Internal

 Internal styles are placed inside the <head> section

<head>

<style>

h1{

color:blue;

}

</style>

</head>

This coding only allows for one heading to be edited at the time which means that a new code will be needed for every new heading.

Advantage

-Internal styles don’t need to be applied to every element like inline styles need to be.

- Internal style sheets allow you to test your website without breaking pages apart.

Disadvantage

-Internal also tends to Load slower compared to External and Inline.

 External

The CSS is used to link a file back to the HTML element  

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

External style sheet allows us to reuse styles as many times as we want this is done by linking the external style sheer to other web pages styles only need to be used once because they can then be copied. External style sheets are stored in a different CSS file they can also be written in any text editor. External style sheet are mostly use when there are multiple pages and you need there to be the same style on each web page.

Advantages

      -The files size of the page is reduced because the text is in another document this will reduce the file size a lot.

      - allows you to Control multiple documents at the same time

Disadvantages

           Extra download time is needed to import the style sheet

           Change an element is time consuming

The different types of implementation styles for CSS all have different advantage and disadvantages. Depending on the website the user wished to create and what the web site will contain they will have to choose the implementation style that will best suit their type of website. If the user is creating a complicated web site they would be best suited to use an External style sheet because the CSS code is separate to the HTML which will keep the code manageable and not confusing as they would be separate.

Reference 

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

http://www.tizag.com/cssT/external.php

http://www.w3schools.com/html/html_css.asp 
 

http://www.htmlbasictutor.ca/stylesheet-type.htm

 

P2 - Explain the features of the box model for CSS

Box Model CSS

In this blog post i will describe the features of the box model CSS which include margins, borders and padding.

Margins

These are transparent boxes which surrounds the content of a web page any background colour of the web page will not be affected by the margin because it is transparent. A margin clears a specific space that has been coded with a specific size so that any content that is on the web page isn't stuck to the edge of the page. Margins are used so that all the contents on a page aren't all stuck to together and are spaced out. Margins are normally measures in pixels and are normally placed on the top, bottom, right and left.

margin-right:100px;

margin-left:50px;

margin-top:50px;

margin-bottom:50px;

Borders

The border goes around the padding and content, the border can be edited by colour, thickness and styles. The distance between the padding and border can be altered. There are many different combinations of colours, styles and widths that can be used for a border such as:

{

border-style:dotted;

border-colour:#FFFFFF;

border-width:3px;

}

Padding

Padding clears an area of space between the content which is in the center of the box and the border, so that the border doesn't touch the content. When the background of the element is change the padding background is also change to the colour specified in the coding.

H1 {Background: red;

     Color: white;

      Padding: 10px;                                                                                                                       

      }

References:

ww.w3schools.com/css/css_boxmodel.asp
http://webdesign.about.com/od/beginningcss/p/aacss6box.html
http://www.w3.org/TR/CSS2/box.html