scripting

Introduction

In this report I will be writing about fundamentals of JavaScript and jQuery and its key features.

What is java script?

JavaScript is a programming language that makes your web pages interactive, this eliminates download time as it is run on the user’s computer; this is often used for polls and quizzes, The support for Java script are built in on most websites and web developer simply need to use JavaScript for the java script to be active, be aware some websites black content so all you have to do is simply enable it. The two main reasons for JavaScript is validation, for example making sure what information the user puts in is correct.

What is JQuery?

JQuery is a JavaScript library which makes it much easier to use JavaScript on your website. JQuery takes many lines of JavaScript code and compacts it into a line of code making it simpler to use this means to you have to be an expert on JavaScript to use JQuery there’s load of other frameworks but JQuery seems to be the most popular.

JQuery also simplifies HTML, CSS, AJAX, Effects and animations and Utilities.

Key Features of Java Script

Support from browser

To use JavaScript you do not need to install any plugins, the plugin for JavaScript is built in to every browser as all browsers have accepted Java as a scripting language.

Can be used on client side and server side

JavaScript has access to document object model it means you can change your webpage while it is running which means JavaScript to add different effect to webpages.

Functional programming language

In JavaScript a function can be assigned to variables like any other data type and gives you the ability to code in functional style.

Support for objects:

JavaScript is an object oriented language but also makes it easier to use these objects and support java script.   

Key features of JQuery

JQuery has many key features one of them being its core functionality and the way it is used, It also finds content is documents with great navigating tools which is one of the reasons why it makes it much easier to use JavaScript. Another key feature of JQuery is it manipulates CSS, where it can edit and change documents, it can also position its info. Another key feature is how it simplifies key events such as DOM events and keyboard and mouse events.

Another feature it has, is the ability to use effect and basic animations like moving objects on your website and basic animations. JQuery also provides an official plugin which gives users interfaces like widgets, slider controls, progress bars and many interfaces.  

M2

Introduction

In this report i will be comparing the advantages of client side scripting to server side scripting, describe how client side scripting can improve the user experience and lastly validating and describing how client side scripting can improve form validation.

The advantages of client side scripting to server side scripting.

Server side

Advantages

There are loads of server-side technologies that can be used when developing web 

applications.the most popular is Microsoft ASP.NET in this server side code it is written in languages like C#. Server side processing is used to connect with permanent storage like files or databases. examples of server-side processing are user validation, saving and retrieving data and navigation

Disadvantages

The disadvantages of server side processing is that it creates page post back :it can introduce processing overhead which can decrease the performance which will force the user to wait for the page to be there or created. Once it is posted back to the server, the client must wait for the server to process the request and send the page back to the client.

Client side

Advantages

The advantages of client-side is that it also uses ASP.net web applications are programming languages like C#.

Comparing to server-side  code client-side scripts are embedded on users and clients web page and processes on their internet browser, client side scripts are written in languages like JavaScipt connects with HTML and CSS when it comes to text boxes and buttons all internet browser should automatically support these languages.

More advantages include faster response times, a more interactive application, less overhead on the web server. Client-side code is perfect for when the web page needs to be changed.

Disadvantages 

There are also some disadvantages of client-side scripting are that scripting languages require more time and effort, while the client's browser will support scripting language.

 

References

http://www.seguetech.com/blog/2013/05/01/client-side-server-side-code-difference

Assignment 3 Task 1 design a website

Assignment 3 Task 1 design a website


My website will be more than just uk rap I will be outlining the commercial uk rap artist and underground rap artist appealing to older and younger audiences. My target audience will be 13+
My colour scheme will be red and black

On my first webpage it will be a homepage, highlighting the main stories and news on the uk rap scene, on my second webpage I will be outlining the commercial rap artist with their latest news, there biographies and facts you didn't know about the artist. On my third web page I will be outlining underground artist with the same ideas as the previous webpage. On my fourth page I will have events coming up to see the artist live and lastly I will have a gallery of the rap artists.



This hierarchy Chart outlines all the pages I will be making for my website.

I created this hierarchy chart using qsee lite which is a software that allows you to create flow charts.

I have decided that my website will be complementary colours blue and yellow as is helps my website to stand out.7
(M2)
I used The QSEE Flow chart template to create the chart, I right clicked to create the boxes then I used the line tool to link them together

 

     B28D00       FFCF19       FFCA00        000CB2      0011FF

This is the homepage for my website as you can see on my homepage I will be outlining the highlights of the website.I will have a sign in box for dedicated fans, a news feed and lastly video of the week. Most of the page will consist of colours yellow and blue and the penguin will be my logo.

(M2)

Adobe Kuler

I used Adobe Kuler to create my colour palette, I wanted to use complementary colours so I clicked on the complementary template and found that blue and yellow are complementary so I saved the results

I

My second

 This page will target underground rap, it will have a description of what the page is about, a chart of the best rappers on scene on a monthly basis. Also up and coming rappers and biographies on some of the best.

 My third page will outline mainstream rap this will focus on the same principle as the underground page, difference being it will be about more popular rap artist. 

 This will be my gallery page this will show a selection of photos of rap stars, also concert photos and unique pictures related to rap.

 This is my shop page on this page you will be able to purchase merchandise and albums of there latest work. lastly you can download free mix tapes also. A search engine will also be required to search the merchandise.

 Lastly my news feed this will have news on all the rap stars with the latest news from Facebook, Twitter and Yahoo. 

(M2)

Ca-Coo

I used Ca coo to create my wire frame, this program has wire frame templates to make creation easier used templates for all but one design, It al;so allows you to create buttons and even has there own pictures, I didn't use any of their graphics but I did use buttons and change the colours of the buttons.I also used my own pictures. Lastly you are able to save your wire frames online, this means you do not take up space on your computer,      

Fonts

Google web fonts, this gives me extra fonts to use, I used arial fonts for all my designs.

Box Model

Introduction

In a web page document each part is done with a rectangular box. In CSS each element is described using the standard box model.

 

 

 

 

 

 

Content

This is where the text and images are shown.

The content surrounds the rectangle which is given by the width and height of the box, which usually relies on the on the parts rendered content. The four content edges define the box’s content.   

Example

a:after {
    content: " (" attr(href) ")";
}

 

Padding

This clears the area around the content and is not visible.

The top, bottom, left, right padding can be changed separately.

Values

Length: defines a fixed padding using pixels, pt, em, etc.

%: sets padding by percentage.

Example

p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

 

Border

This is a border that surrounds the padding and content.

Before you use a border a border style must be set.

 

Border styles

·         Dotted.

·         Dashed.

·         Solid.

·         Double.

·         Grove.

·         Ridge.

·         Inset.

·         Outset.

Border width

The border-width sets the width of the border using pixels or using values like thin, medium, or thick.

Example

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}  

Border colour

This is used to set the colour of the border which can be set by name of a colour, RGB Value or a hex or transparent.

Example

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

Margin

Clears elements outside the border.  The margin is not visible.

The top, right, left and bottom can be changed separately .

Values

Auto: The browser does it for you.

Length: You can set a margin using px, cm, etc.

%: You can set a margin by percentage.

Inherit: Specifies that the margin should be inherited from the parent element.

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}

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

 

 

HTML CSS

Introduction

In this blog entry I will be describing how HTML and its purpose on developing a website, how CSS is used to develop a website and compare the contrast between HTML and CSS and how they work together to develop a website.

HTML

HTML stands For Hypertext Mark-Up Language. This is a language describing web-pages using ordinary text. Every web page contains HTML file, where the web browser converts the .HTML file into. Each file is just text but with an .HTML extension it can be converted into a working web page if you have the corrected tags for the web page.

HTML tags

Most tags have two parts, for example the start is a tag like <html> and the closing tag will be the same tag but with a / in front of it like </html>.

No closing tag

Some tags have rules for example you must have <img> if you want to use images.

Every HTML files needs to have the basic tags for it to be valid, so browses are able to read the HTML text, these tags are:

Tag attributes

Attributes allow you to customise a tag, an example of this <img src=”image.jpg”>

Most attributes are optional for most tags and is mostly used when you want to change something. Some tags need to be used to display content and web pages properly.

CSS

CSS stands for Cascading Style Sheets and is used to describe the look and formatting of a document in a mark-up language this allows customization and improves the presentation of webpages. It is also used to adapt to different devices, CSS can be used with HTML and makes it easier to maintain.                       

Examples

The tag <p> can be customized by adding CSS code for example

p {font-style: italic}

By placing more info you have now put that whole paragraph in Italic.

How HTML and CSS work together

Every webpage is viewed in a browser, what you see in your browser will be a combination of structure, style and interactivity.

HTML is the structure of the webpage for example the paragraphs, lists and images.

CSS Is there to communicate with the browser to tell the browser how the content (HTML) should be displayed, for example different layouts for different devices.   

M2 Different CSS styles

Introduction

There are three types of CSS styles, external style sheet, internal style sheet and inline style. In this Report I will be describing the different types of CSS styles, Examples of where it would be used and the advantages and disadvantages of each CSS style.  

 

Inline CSS:

Inline CSS is applied is applied to one element using the style attribute

 

Example

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

 

Advantages

 

Testing:  Loads of web designers use inline CSS to test websites that they have just started on, It is also used to debug there pages when there is a big problem with their website.

 

Smaller websites: Incline CSS are great for blogs where there are a limited amount of pages and it helps users and service providers.

 

Lower the HTTP Requests:  Because the website gets lower HTTP Requests it means the website loads a lot faster.

 

Disadvantages

 

Every element: This means to implement CSS it must be used every time you use a tag which takes up a lot of maintenance time.

Internal CSS

An internal style sheet should be used when one document has a unique style. You can do this at the head of a HTML page, inside the <style> tag

Example

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Advantages:

 One style only:  Internal styles doesn’t need to be assigned to every element like inline

No additional downloads: You don’t need to download anything extra to receive style information.

Disadvantages

Multiple documents: This can’t be used if you want multiple web pages.

Slow page loading: Compared to inline and external CSS as there’s less HTTP request.

Large file size: when using internal CSS the file sizes are large which is okay when the website is offline but when the website goes online it will take a long time to load.

External CSS

An external style sheet is perfect when it applied to many pages. You can also change the way the whole website look by changing a single file. Each Page needs to have a <link> tag. This goes inside the head section.

Example

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Advantages:

Reduced file size:  External CSS file size is lesser compared to the two.

Less load time: External CSS takes about 8 seconds to load.

You can control the feel and look of many documents which is really helpful if you are working with a team of people to create a website.

It is much easier to reuse CSS code if you have separate fields. You don’t need to type the same code on every webpage.

Using External CSS it makes your web pages highly readable and to the best quality.

Disadvantages on external CSS

Because downloading speed on CSS is fast it could slow down the speed of your webpages. Also if you don’t have many styles. Your site can become harder to maintain.  

 

  

http://www.w3.org/standards/webdesign/htmlcss

http://webdesignfromscratch.com/html-css/how-html-css-js-work-together/

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

 http://ictjaicss.weebly.com/m1---styles-of-css.html

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

 

Advantages and Disadvantages of Notepad and Komodo edit

Introduction

In this report I will be writing about the advantages and disadvantages of Notepad and Komodo edit when it comes to web development.

Advantages of Notepad

Notepad is designed for users to create text that is not formatted and is very basic word processor program you can almost describe as very basic version of Microsoft word, one of the main advantages of Notepad is that it requires no training and you can start HTML straight away. It comes free with every version of Windows which means you do not have to go through the hassle of downloading the program. The program doesn’t take up much space on your laptop/desktop PC and because it’s low specification software it means that it doesn’t take a long time to load.

Disadvantages of Notepad

The main disadvantage of Notepad is that it is very simple software and its primary function is not for HTML, because it is not its primary function it does not read the language and have intelligent answer’s to help out the programmer with features such as auto fill. It also doesn’t have default templates to make your web design quicker. It’s only available on Windows as Microsoft made it. You also have to preview in a web browser which means you must save it as a HTML file.

Advantages of Komodo edit

Advantages of Komodo edit are firstly you can save time on coding and it allows you to auto fill parts of your coding, it has a colour coded feature for certain words that are used. There is also a web browser built in so you can view your code and it works on windows and OS.

Disadvantages of Komodo edit

Firstly you have to download komodo edit and need 70mb to run because it’s a bigger program than notepad it takes longer to load and it is not for beginners so it requires training to use.

Conclusion

Notepad is built in to Windows and takes less time to load whereas you have to download komodo edit and takes a lot of time to load and komodo edit is for advanced users and notepad is for beginners. Notepad and komodo edit are two great pieces software to use but I prefer komodo edit as with the right help you can build websites with less hassle and it makes it easier to build websites, this is because the has template and auto fill technology to help.

References

download.cnet.com/Komodo-Edit-for.../3010-2352_4-10700439.html