Website Design- All assignments - Raad Begh: May 2013

Friday, 3 May 2013

Tools and Techniques

HTML; Hyper Text Mark-up Language is a language which describes web pages. HTML is a mark-up language and is designed for the definition, processing and presentation of text within a web page. Both the layout and style within a text file is specified by the code language for formatting. A mark-up language is a set of mark-up tags and these tags describe document content.

For example:

<HTML>

<body>

<h1>FIRST HEADING</h1>

<p>FIRST PARAGRAPH</p>

</body>

</head>

CSS: Cascading Style Sheets are styles that basically define how HTML are going to be displayed. External Style Sheets can save a lot of work and are stored in CSS files. The styles are saved in external .css files. By editing a single file, external style sheets allows you to change the appearance and layout of all the pages in all the web page. External style sheets are stored in CSS and CSS are used to create a number of styles and then consistently apply these styles throughout a web site. CSS allow you to give a site a consistent look, save you time, tidies up your HTML code and allow you to change an entire site

Komodo Edit: This is a multi-language editor that allows the user to enter simple codes which lead to creating simple layouts and formats on a web page. It is a free and open source software and is available to users on Windows, Linux and MAC. A good thing about this software is that it allows you to open a project as a template or allows you to use a file that was recently saved.

Wire frame tools: This is framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc. enables th4e user to easily create the navigation of the users website with built in tools such as boxes, diagrams and being able to add text.

Lorem Ipsum: This is a "dummy Text" which is used to temporary text on the design of a website. This is made in order to add text into designs that you are working on so that you can see where and what the text will look like on your web page. When designing the website you would use Lorem Ipsum as it is just temporary text. Lorem Ipsum also allows you to choose the amount of paragraphs you have in your web design. This can be accessed by using the website which is www .loremipsum.com.

Gliffy: This is a graphics tool which is used to create nagivation diagrams and flowcharts for the design of your website. This provides you with different shapes to create the design your navigation such as Square, Rectangle and Circles. Gliffy also allows you to add images and everything what made for you so all you basically had to do in order to design your website is drag different tools into it. The menu bar provides you access to the basic commands which you will be needed to share, save and print documents. Images can also be easily resized if they are too big and you can add your image to your own Gliffy library.

Reference:
http://www.experiencesolutions.co.uk/questions/what_is_wireframing.php
http://www.motive.co.nz/glossary/stylesheets.php
http://www.pcmag.com/article2/0,2817,2403220,00.asp
......................................................................................................................................................................

Unit 20 - P4 Website Design

Deals on Wheels

This post will contain a brief description about my website and what it will contain. My website is about different cars and will contain information about the name, age and price of each car. My website will include 5 different pages which are linked together. The main "Home" website will include a navigation button which links to the different pages. I will also include images and and specific information about certain cars such as the Price, Make, Model etc. I will also have a navigation chart which links all my pages together. This website has been made for customers who are fascinated by different types of cars such as the on in my website e.g. Classic cars and Super cars.

My website will also contain a constant colour scheme which will be Blue and White and stay throughout my whole website.

The pages I will have are as follows:

- PAGE 1: Home: Welcoming the user to the website with images included and a overview of the whole website. The web page will include the navigation links that link to the other pages.

- PAGE 2: About us: A brief description of our website and what we provide our customers. It will describe a few of the cars that are shown on our website.

- PAGE 3: Super Cars: Images of different super cars and a brief description of each one of them.

- PAGE 4: Classic Cars: Images of different super cars and a brief description of each one of them.

- PAGE 5: Contact us: A page containing ways that the customer can contact us for information about the cars. For example Telephone Number, Email Address or Fax.

Navigation layout of the website

------------------------------------------------------------------------------------------------------------

For example:

<HTML>

<body>

<h1>FIRST HEADING</h1>

<p>FIRST PARAGRAPH</p>

</body>

</head>

Wire frame tools: This is framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc. enables th4e user to easily create the navigation of the users website with built in tools such as boxes, diagrams and being able to add text.

Lorem Ipsum: This is a "dummy Text" which is used to temporary text on the design of a website. This is made in order to add text into designs that you are working on so that you can see where and what the text will look like on your web page. When designing the website you would use Lorem Ipsum as it is just temporary text. Lorem Ipsum also allows you to choose the amount of paragraphs you have in your web design. This can be accessed by using the website which is www .loremipsum.com.

Gliffy: This is a graphics tool which is used to create nagivation diagrams and flowcharts for the design of your website. This provides you with different shapes to create the design your navigation such as Square, Rectangle and Circles. Gliffy also allows you to add images and everything what made for you so all you basically had to do in order to design your website is drag different tools into it. The menu bar provides you access to the basic commands which you will be needed to share, save and print documents. Images can also be easily resized if they are too big and you can add your image to your own Gliffy library.

Reference:
http://www.experiencesolutions.co.uk/questions/what_is_wireframing.php
http://www.motive.co.nz/glossary/stylesheets.php
http://www.pcmag.com/article2/0,2817,2403220,00.asp

......................................................................................................................................................................

Design for each page:

Page 1 Design:

This is my first page. The home page will include the image that i have used in the design, text welcoming the customers to my website. It will also include the my own logo. All

Page 2 Design:

This is my second page. The About us page will include one image of a car and provide you a brief explanation of what the website is about and what they include.

Page 3 Design:

This is my third page.The classic cars page will include 4 images as shown above and will include a brief description on the right about each classic car e.g. the make, age and price.

Page 4 Design:

This is my fourth page.The super page will include 4 images as shown above and will include a brief description on the right about each classic car e.g. the make, age and price. This will have the same layout as page 3 as it is roughly about the same thing

Page 5 Design:

This is the fifth page. The Contact Us page will include a image or two of either a mobile phone or a map to show where we are located and the contact details.

As the design images above shows that the back ground is white, the actual website includes a background coloured blue behind the logo, a banner going across the bottom in line with the "Copyright: Raad Begh" and also include a dark blue border which will make everything inside the page stand out.

Unit 20 - P3 + M2 Explain the fundamentals of a scripting language

P3 + M2: Explain the fundamentals of a scripting language

This blog will give you explanations of the different fundamentals of scripting language. I will explain why it is different to other programming languages, what it interpreted and provide you examples of client and server side scripting languages. I will also give you two types of scripting languages for web purposes and explain what J query is.

1) What is a scripting language?

Scripting language is a high level programming language which is interpreted instead of compiled meaning that the “English” language code that is being written out by the user is translated into a language that the computer system understands. Scripting languages allow rapid development and can communicate easily with programs written in other languages. Scripts are used to develop simple programs. There are a number of scripting languages such as Flash (action script), pearl script, Java Script, VB script etc.

There are some scripting languages which can be embedded within HTML and are usually used to add functionality to a web page. For example, adding a menu style or displaying different graphics. This language type is a client side scripting language which changes and affects the data that the end user see’s in a browser window. However, server side scripting languages are used to manipulate the data. The sights and sounds you create on your web page are all created with script programs.

Each script represents a text document which contains a list of instructions which need to be followed by a certain program so that the required actions can be proceeded. This is an advantage to users as it prevents them from having to go through every complex steps in order to achieve certain results. Scripts are used to add interactivity to otherwise static Web pages. They also can perform repetitive tasks like automatically filling out parts of Web-based forms.

2) What does the interpreting?

Scripting languages are usually interpreted by web browsers such as Internet Explorer. Web browsers interpret scripts as well as HTML which is the language that web pages are written in. This process can be done in two ways, firstly; the programs written in scripting languages can run directly from a server, secondly; the script can be included directly with the HTML webpage when someone downloads it to the computer.

What is Java Script?

Java script is a client side scripting language meaning it is a computer programming language that runs inside an internet browser. Java script is a programming code which can be inserted into HTML pages which then can be executed by all modern web browsers. Simple web pages are made up from just text and some sort of code which indicates to the browser how to display the text on the page.

Complex web pages that change in response to the user input require programs such as JAVA or JAVA script to make them work. Inside a normal Web page you place some JavaScript code. When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it. JavaScript is widely used on Web pages for calculations as well as for displaying messages, drop-down menus and other user interface elements. Many Web sites gather information from users in online forms, and JavaScript can help validate entries. For example, the programmer might validate that a person's age entered into a form falls between 1 and 120.

What is JQuery?

JQuery is a type of framework which is built using Java script. It is used to navigate HTML documents and also allows the user to modify text, process form data, move elements on a page, and perform animations.JQuery is a JavaScript library that allows web developers to add extra functionality to their websites.

JQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical functionality by writing very small amount of code. Below are some advantages of JQuery:

· It helps to improve the performance of the application

· It helps to develop most browser compatible web page

· It helps to implement UI related critical functionality without writing hundreds of lines of codes

· Chaining capabilities are very powerful.

· Its light weight when compared to other javascript framework

· Save Time – Five lines of JQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.

· Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.

· Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript.

Client side scripting language:

Java Script – JavaScript has the ability to interact with HTML code, enabling developers to create more interactive, appealing Web sites without having to learn a complicated programming language. JavaScript is endorsed by a number of software companies and is an open language that anyone can use without purchasing a license . Client side scripting language allows you to interact within the web page. The reason JavaScript is called a client side language is because it runs scripts on your computer after you've loaded a web page.

Example of java code:

document.getElementByid(“hello”).innerHTML=’hello’;

</script>

Server side scripting language:

PHP – It is used to enhance web pages. With PHP, you can do things like create username and password login pages, check details from a form, create forums and surveys etc. PHP is known as a server-sided language. That's because the PHP doesn't get executed on your computer, but on the computer you requested the page from. The results are then handed over to you, and displayed in your browser.

Example of PHP code:

<h1 id=”hello”><?php echo ‘Hello’; ?></h1>

Another example would be Google. This is a search engine which uses server scripting language

Client side scripting has 2 main purposes:

Validation: checking if data on input is valid and used a lot on web forms to make sure that what you are doing is valid. A number of checks are carried out such as presence check which is done to check if data is there or not, another check is carried out which age/date is/ validity range check.

Speed is an an advantage on client side validation. The validation is done by the client, so it happens on the user’s computer system in the browser. The server saves on processing as the validation tasks are carried out on the client’s machine.

Why is scripting language different from a programming language?

Programming languages are a set of instructions which are carried our directly by the computer hardware such as the operating system, however scripting languages are a set of instructions which are carried out by programs installed on the computer system such as text command line processors or Web Browsers.

Scripting language run with an interpreter that translates the English code that the user writes into a language that the computer understands, however with programming language the code would already be written out. Scripting language is interpreted using Web browsers.

Another difference between the two is that scripting language code are interpreted when they are run meaning when the user wants to run the program, there is a separate program which needs to read the code and interpret it and then follow instructions that the code carries. Such as Visual Basics, JavaScript etc.

On the other hand programming codes are compiled before they are run meaning that it can run any number of times. This is because the code which has been compiles already has been interpreted into a machine language e.g. C, C++ etc. Javascript is widely used on web ages for calculations as well as displaying messages, drop down menus an other user interface elements. Scripting languages allow rapid development and can communicate easily with programs written in other languages.

User interface:

Most Web Pages in modern days are dynamic. This gives the user feedback when a mouse or keyboard event takes place. When a user wants something, it happens such as when a user pressing the power button on the computer, the computer turns on or if we press the switch the lights should turn on. J Query is a java script library.

Most hardware devices include a user interface; it is not as complex as software interface. For example user interface are things such as a hardware device such as a remote control. A typical TV remote has a numeric keypad, volume and channel buttons, mute and power buttons, an input selector, and other buttons that perform various functions. This set of buttons and the way they are laid out on the controller makes up the user interface.

REFERENCE:

http://www.webopedia.com/TERM/V/Visual_Basic.html

http://ecommerce.hostip.info/pages/1058/Web-Scripting-Language.html

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

http://www.javascripter.net/faq/whatisja.html

http://www.bbc.co.uk/webwise/guides/java-and-javascript