Task 7 - Improving Functionality (U20M2, U28M2)

In this post I will be describing how a scripting language can improve the functionality of a website
I will also include the advantages of client side scripting to server side scripting

Client Side scripting Vs. Server side scripting with Advantages

The difference between these two scripting languages is that the client side code is all processed by the client and the server side is processed by the server.
JavaScript is the most popular client side scripting language. The reason for why it is good is because the majority of web browsers right now support it. The only web browsers which will be unable to support JavaScript are the older version of Internet Explorer.

There are both advantages and disadvantages with client side and server side scripting. One of the advantages is that the websites script is executed very fast. The reason for this is because the script is being executed in the clients web browser.

As everything with client side scripting is happening in the client’s web browser will mean there will be better interactivity based on the actions of the user.

As the server is connected to the Internet there will be times where the connection may be cut off because of the amount of users using it or other problems.

The problem with the Internet connection cutting off will mean that the request of the client will be sent to the server but there wont be a response.
As the connection is lost the server cant send the response to the client.

Conclusion
Both scripting languages are good to have on web pages as each one has something positive in particular the language does not have. Client side is quick for responding to requests and its good for the design layout of the Webpage.

The other language which is server side scripting is used for sending the request through a secure sever that looks through the database matching the request. The disadvantage of this is that its slower for the requests.

User Experience

Using Client side scripting improves the user experience by far. The reason for this is that Web pages are more interactive when using client side scripting. Client side scripting is embedded in HTML and works alongside JavaScript. The responds to the request of the user side scripting is also a lot faster rather than server side scripting.

Another positive is that since each monitor will have a different measurement the layout of the webpage will re size its self to the exact measurements of the user’s screens resolution settings. The font size will also change making it easier for users to read the information.

Client side scripting also helps users when they are looking for something specific on a web page.

An example of the response time will be the navigation tab on eBay, when you hover over a main tab such as “Electronics” then a menu will appear below the main tab. The menu appears very quick so that makes it a good user experience.

The will improve the user experience as the user wouldn't have to spend so much time on the website looking for something they want. The menu will then list the other categories
within the main menu subject.

The image above shows that once I have hovered over the Home & Garden navigation tab then another menu has appeared below it with different categories.

Validation

Client side and Server side performs validation differently.

Client side scripting is used for validation as this is the fastest way in responding to the users request unlike a server side scripting where it’s based on the server. Client side also helps to avoid any errors that may occur if an input that is sent to the website server in order to be validated even more. Overall client side speeds the process the validation by the quick response time.

An example of validation is if an email is written and a main character is missing such as “@” then the client side will validate the email ensuring it is correct. If it’s not correct then a message would appear explaining what is wrong with the email.

Server side validation would be slow because of the requests going from the client to the secured server so it would take a long amount of time. Instead Client side scripting is used because the validation is done on the web browser. Validation on the browser would mean as soon as the "OK" button is pressed the information would have already been validated so the response will appear right after.

If the email or password is correct then the web page will accept the request and allow the user to enter the site.

How can client side scripting improve form validation?

Client side scripting has a lot of advantages, firstly the response time to the user is much faster than the server side validation. Its a great tool in order to improve speed, reduce the loading times and finally add effects to the web page.

Validation can also be done faster checking anything for errors because it will be using the web browser.

References

Advantages and disadvantages of client side scripts

07/05/2014

http://bit.ly/1nt4sCC

 

Web server scripting disadvantages

07/05/2014

http://bit.ly/1mHkiYW

 

Advantages and disadvantages of client side scripting

08/05/2014

http://bit.ly/1obznG7

 

Client side scripting 

08/05/2014

http://bit.ly/SF1d0J

 

Server side scripting 

08/05/2014

http://bit.ly/1m2SGPt

Task 6- Javascript & jQuery Fundamentals

In this blog entry I will be describing the purpose of JavaScript as well as its key features. The final part of the task I will be describing the purpose of jQuery as a development tool.

 

JavaScript
 

JavaScript is a scripting language which is used to add functionality to a website. Not only this but JavaScript is also used to edit the layout of the web page for example a drop box. Without JavaScript web pages will not have the interactivity and include the layout features that make the webpage interactive. An example of what JavaScript can be used for menus or navigation tabs. JavaScript is also not a full blown programming language. JavaScript is also different to the other programming language which is Java. Java is used for programming very complex programmes such as...
 

Validation of JavaScript
 

JavaScript also validates anything written on a web page. For example if an email is written and a main character is missing such as “@” then JavaScript code can be written to recognise this and validate the email, It will then not accept the email and notify the user that there is a problem.

JavaScript is supported by some of the web browsers like the 4 different web browers listed below.

> Internet Explorer

> Safari 

> Google Chrome

> Firefox

 

JQuery

 

JQuery is a development tool that is used in the JavaScript library which allows shorter and more accessible lines of JavaScript to be opened. JQuery just goes into the JavaScript library and a short line of code represents jQuery unlike JavaScript where there are many lines of words that represent it. As jQuery is shorter than javascript code time can be saved by not repeating the code. It was mainly designed to make JavaScript easier to code.

Overall less code has to be written when jQuery is being used within the website and another benefit is that there will be fewer errors because there is less repetition.

References

Whats so good about jquery?
02/05/2014
http://bit.ly/1kB6X4o

How jquery works?
02/05/2014
http://bit.ly/1pe4lcy   

Assignment 1: Design Tools

My Intentions

I will be designing a website about Lions. On the website it will include lots of different facts and information about Lions will be explained.

To explain kids who are beginners and who don't know much about Lions. The information can be about how they mate and the main juicy facts about Lions.

Facts will need to be fun and interesting.

Target Audience: Kids aged from 10 to 14 years old as kids always likes to know about animals such as a lion which is a top predator.

QSEE Superlite

QSEE Superlite is a piece of software which is allows users to create a mid map of the navigation for the different pages and how they connect. Interactive navigation tabs on a website will first need to be designed using QSEE Superlite software.

I used Superlite by making a mind map which included all he different web pages which is going to be connected to the home page.

The image above shows the different web pages which is linked to the home page. I used QSEE Superlite it.

Colour Palette

In order for my web page to show eye catching and interesting to look at it needs colours. There were a variety of different colour Palettes but I chose to for the Adobe Kuler. I reason for why I used this is because I can lots of different colours in the same row and made it much easier. I used the colour Palette tool so that I can use the different colours onto my web page. The colour palette can have up to 5 different colours.

Fonts

In order for my text to look different from others and stand out at the same time it needed Fonts. I used the Google Web Fonts to pick the different fonts which I wanted to use for each of my main texts such as the Heading and the information.

Using the fonts made my headings, title and text look different from each other and that is what I wanted to do.

The Fonts could also be exported from Google fonts onto a text document which was really good for me as I could text  them out.

Wireframe

After fonts it was time for me to wireframe my web page which means that I had to create the layout of my web page using a special software. The software which I used for wire framing is called MockFlow. I used this software to create the layout for each of my web page. The tools on MockFlow which I used was images, Video, Tabs, Label, Banner, etc.

Wire framing the web pages also gave me an understanding of how it will look once website has been created.

Graphic Programme

The graphic programme which I used is Illustrator. Adobe Illustrator is a programme which is used to create graphic designs. I created the logo for my website using this programme. The tool which I used to create the logo is the pen tool.  

Overall the graphic programme is a really good software which I used to create my logo.

Assignment 2: Design a Website

Designing a Website

In this post I will be explaining all the information about Lions such as the best and fun facts about Lions which will get all kids interested.

Purpose: To explain kids who are beginners and who don't know much about Lions. The information can be about how they mate and the main juicy facts about Lions.

Facts will need to be fun and interesting. Interesting  

Target Audience: Kids aged from 10 to 14 years old as kids always likes to know about animals such as a lion which is a top predator.

Content: Lions as Introductions

On the homepage of Lions a small paragraph will be displayed in which there will be a description of Lions for example what a Lion is and where it mainly lives.

There will also be some images displayed below the short information about Lions.

Other pages on the website will include the following and in the correct order

1) Facts about Lions
Lots of interesting facts will be motioned on the page. Some examples are that Lions in the wild live for around 12 years and In the wild, lions rest for around 20 hours a day.

2) The different types of Lions
There are two different types of Lions which is a Lion and Tiger. Lions cant swim and Tigers can swim so there is some difference between those two.

3) How they eat
How Lions Hunt for food and what types of animals they mostly like to eat
4) How they mate

How Lions mate each other such as two different Lions fighting against each other to win the female Lion

5) What part of the world do they live and how they survive in the harshest conditions
How they survive around the world with even harshest weather conditions

6) Gallery
Lots of different images will be displayed in all the pages and on a separate page which will only include images.

Navigation

The image above shows the Hierarchy Chart for Lions

Colour Palette

The main text box displayed in the middle is the Home page which will have the other pages linked from the main page.

The screen shot above shows the different colour schemes with the Hex numbers below the colour scheme.

Background Colour: 3081D4

Header: 110612
Footer:  110612
Body Text: 110612
Heading 1 Style:  3BFF8B
Heading 2 Style:  3BFF8B
Links: 48FF56

Fonts

The screen shot above is the font type which I will be using for my text. The reason for this is that its clear to read and understandable

Logo

The image above is my own logo which I created using Illustrator CS6. The logo uses the colour green which makes its catchy and standout. 

To make a Wireframe of my web pages I used a software called Mockflow which is free to all users on the Internet. This software very easy to use and I managed to make all my web pages without any problem

 The image above shows the home page for Lions. The main page will have some key information about Lions which will get the viewer interested. Images will be included just to make the site a bit more live rather than just plain boring text.

My second page is going to be the fun facts about Lions. This will include the best facts about Lions which have not been said before.

My third page is about how Lions hunt their prey. This will include their favourite animal to eat and how the Lions hunt it down.

 My fourth page is going to be about the reproduction of Lions I.E. how Lions fight against each other to win the female Lion.

My Fifth page will include the different types of Lions how they are different to each other.

 My Sixth page will include how the Lions adapt to the environment and how they survive even in the harshest weather

Finally the last page is going to have lots of images and videos on Lions.

I have designed my own logo for the website but it cannot be added to Mock flow as its a
Wireframe website. The logo is very vibrant and catchy.

Interactivity

The tabs which is below the search engine is the navigation which links the user to another page when selected. Tabs which are organised are makes the website professional.

Navigation Tabs

The 6 tabs below the search engine is different pages which will be included in my website
Each one directs the user to its own page. Having these tabs also makes navigation part of the website much more professional and easy to understand.

Search Engine

Having a search engine will make much more easier to fine something in particular rather than having to search every part of the website.

Images

I don't want to make my website boring so having lots of text on the website make it un- enjoyable. This is why I have used multiple images to attract the viewers and also gives them something to think about.
Images will be related to Lions and each page will have its separate images

Video

A small short video will also be placed at the bottom right corner which will give a clear brief about lions and images will be included.

Including the video there was also be a puzzle page where people can solve puzzles about Lions. The puzzles will include word searches and others.

Banner

Just a small advertisement about lions that directs the user to sponsorship.  

The following is the images which I will be using on my website 

Tools & Techniques - Notepad vs Komodo Edit

Notepad vs Komodo Edit

In this post I will be explaining the advantages and disadvantages of Notepad and Komodo Edit. Finally I will finishing the comparison with a conclusion

What is Notepad?
Notepad is an easy to use text editor only available to Windows operating system

Notepad Advantages

> Its free
> Its easy to use
> It can be used on any windows- free software available to all windows operating systems
> No training overhead which means that the software is easy to use without much training as there are not many menus and features in notepad
> Quick to load as its just a page with not many menus and features to enhance the software

Notepad Disadvantages

> Not compatible with every OS- Only available to the Windows operating system. This is a big downside as other operating system would have a great software such as notepad in their operating system
> No functionality for Web Development- This means that there is no colour coding to help the user identify what part of the code is what.

Overall Notepad is a great programming software to be using for creating a draft for a website. It does have its downsides such the colour coding and other features but its very easy to use and to train on. I would recommend using notepad for people that are just starting to create a website as a draft. It only has the basics of creating websites but it does the job at the end.

What is Komodo Edit
Komodo Edit is also a free text editor for different types of programming languages such as Javascript, CSS etc.

Komodo Edit Advantages

> Templates to save coding
> Auto fill- Full part of the code does not have to be completed manually as the software detects the code and will then display similar codes to what the user has written which they can select.
> Colour coded- This feature makes some of the coding have a particular colour and helps users to indentify what code is what
> Preview within programme- Users are able to see how their website would look without saving the file to a HTML unlike Notepad. The preview feature is also within the programme so its very easy to check and improve anything.
> Its free- Just like Notepad Komodo Edit is free as well which has more features than Notepad
> Works on more Os's than Notepad- Komodo Edit is available to all operating systems which is great if someone has a different operating system to windows

Komodo Edit Disadvantages

> Have to download- As Komodo Edit has more features than notepad and the way its layed out with different options its does requires about 70mb of space unlike notepad which is already installed on the operating system when bought. This is not a big disadvantage as 70mb is not a lot to download.
> Slower to load- Featuring more features will mean that it does take quiet a while to load the program
> Requires training- As Komodo is a complex program with many features that can be used for making websites training is required.

Conclusion

Overall I would go for the Komodo edit software over Notepad. From the points above Komodo Edit can make really good sites if known on how to use it. It does require training but once the user knows how to use it then it would be a very simple program to use when designing a website. I would say that Notepad should be using for making a draft of a website and Komodo for making the proper version of a site. Komodo is also very helpful as it colour codes the coding so it easier for users to understand which type of code is what.

Reference

Komodo Edit and Notepad++ ::: Pros & Cons ::: Python dev [closed]
08/11/2013
http://bit.ly/KdeMP

What Are the Advantages and Disadvantages of Creating a Website in Notepad?
08/11/2013
http://bit.ly/18birne

What Are the Main Features of Komodo Edit?
08/11/2013 http://abt.cm/1cbLgV8

ActiveState Komodo
08/11/2013
http://bit.ly/10SZlW

Notepad (software)
08/11/2013
http://bit.ly/fIfmU9

Tools & Techniques - Lorem Ipsum and Lorem Pixel

Assess different implementation styles of CSS

Task 4 – CSS Implementation Styles (U20M1, U28M2)

 

1.    Produce a blog entry that describes the three CSS implementation styles and their advantages and disadvantages.
Use the following layout:-

Introduction – Summary of your intentions
Inline – Description, Advantages and Disadvantages
Embedded – Description, Advantages and Disadvantages
External – Description, Advantages and Disadvantages

In this task I will be describing the three CSS implementation styles with their advantages and disadvantages

The three CSS implementation styles are Inline, Embedded and external

Inline
The inline style in CSS is to allows users to implement directly into CSS without the need of extra files like style.css.
An example of inline is the code below

    <h1 style="background-color:red;color:yellow;font-size:20px;">Inline</h1>

Advantages
 
1) Using inline the user does not need to create an external document only when using external style sheet. Inlines are easy to add as its written on the main CSS page rather than the style.css page.
 
2) Web designers prefer to use inline style on new projects as its easier to look around the source instead of changing the source file.
 
3) Using Inline also loads faster as it has lower Internet requests. This means that internal CSS website load much faster than external CSS websites.
 
Disadvantages
 
1) Inline must be used on every text or element so it will be time consuming as if web designers are making a big website they will need to write inline for each web page.

2) Cant always control styles for multiple documents at once

Embedded

Embedded CSS styling uses the tags <style> and </style>. This is used so users can edit the html tags in order in order to style them. An example of this is that if they want to style heading then the following code will be the correct one.

<style type="text/css">

      <h1>

font-color: purple;

     </h1>

</style>

The piece of coding above will show the heading as the colour purple.

 

Advantages

The advantages for embedded are the following

1) Embedded styling can be created so that other parts of the html such as the content can have the same style as the heading.

2) Everything which has to do with embedded can be done all in one worksheet so there is no need for downloading external styling sheet.

Disadvantages

1) Extra downloads are needed in order to import the css information for each of the document

2) Embedded style sheets uses lots of coding so sometimes it will be hard to understand what part is what

External

External styling is when a separate sheet is created named as style.css It will need a small tag in the HTML sheet which will connect both of sheets together so the external sheet is used to edit the coding such as colour of the paragraphs.
 
(<link rel="stylesheet" href="style.css">),
 
Advantages

1) Connects both of the worksheets together to make it one

2) Reduces the amount of coding in the HTML worksheet as the editing is done in the style.css sheet

3) Very easy for creating websites without problems like finding out what of the code goes where

 Disadvantages

1) Loading the web page can take a while to load because its accessing the files from the external worksheet.

2) Can become quiet hard to edit for complex layouts

 

Reference

Implementing CSS
15/12/2013
http://www.quackit.com/css/tutorial/implementing_css.cfm

Disadvantages of External CSS
19/12/2013
http://answers.yahoo.com/question/index?qid=20120413134600AAaE8kF

How the three different implementation styles of CSS and how they are called from HTML?
18/12/2013
http://answers.yahoo.com/question/index?qid=20090207121817AAKxd6l

CSS Code
18/12/2013
http://www.tizag.com/cssT/internal.php