P3. Explain the fundamentals of scripting language

Introduction

In this blog, I will explain the purpose of JavaScript and Jquery and describe how they work on the web

JavaScript

It is a client-side scripting language because it is interpreted and carried out on a client computer by the browser and is not complied.It is used on the browser to provide levels of interactivity to web pages that are not achievable with simple HTML.

Also, some users may not notice it due to being less IT literate on the website but it’s on nearly every website from e-commerce websites such as Amazon and e-bay to allow them to navigate through the website.

For example, with JavaScript, you can add "slider" on a website to attract customers and when the user clicked on one of the images then it takes them to a certain page on the website. Here is one screenshot of Amazon using a slider, here you can see Amazon uses the slideshow on their websites for the users so it can be easier for them to visit the web page they prefer. 

Difference between Java and Javascript

The difference Java and Javascript are that Java is a compiled programming language to create an application that runs on mobiles and computers whereas Javascript is a scripting language and only runs within a browser. However, JavaScript contains a much smaller and simpler set of commands than does Java. Java creates applications that run in a virtual machine or browser while JavaScript code is run on a browser only. Java code needs to be compiled while JavaScript code are all in text.

JQuery

JQuery is a library of code which is used for JavaScript.Its purpose is to make it much easier for JavaScript to be used within websites. JQuery takes a lot of common tasks that usually require many lines of JavaScript to perform and wraps them into methods that can be called with a single line of code, making JQuery very efficient for a time as programmers can spend a lot less time writing code.  It is used to navigate HTML and also allows the user to modify text, move elements on a page, and perform animations. It allows web developers to add extra functionality to their websites.

JQuery is very compact and well written. JavaScript code 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 website.

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

·        It has the wide range of plugins available for specific needs.

Biblography

https://www.webplatform.org/docs/concepts/programming/the_purpose_of_javascript/ 

https://www.w3schools.com/jquery/jquery_intro.asp

P4. Design web pages using CSS to control layout

In this task, I am producing a design of a website that I am doing so the CIO(Chief Information Officer) can submit them for approval in order.



My website is about Adopting Grizzly Bears that contain information about the grizzly bears. The website includes 5 different pages which are linked together but the form page can only be accessed from adoption page. The main "Welcome" page include a navigation button which links to the different pages and also the different pages will include navigation button so any web page can be accessed from any web page the user is on, for example, if the user on Facts about Grizzly Bears want to visit Adopt A Bear page, it can be done without any issues as there will be a navigation button to visit that page. The web pages contain logo and a title so it can attract people and they can understand the meaning of the website just from the logo and get to know what the website is through.


It also includes images and media such as GIF to present the website as more interesting and entertainment for the users who are visiting the web page. There is specific information about grizzly bears such as their facts, how they behave with human and why they should be adopted etc. So the user gets to know more about the grizzly bears.



My website is for the people who are interested in grizzly bears such as families, single people, middle-aged – those looking into adopting their pet and share the information about the bear to others so the other people get to know about how important the Bears are to the world. The adoption is for the people who are 18+ as they are eligible to adopt a bear but they should be stable financially to afford a bear. Adopting a bear is the best rather than spending a lot of money on getting baby bear because most of them are hunted in the jungle or are mistreated in shelters.





Here is the design of the site map, it shows that all the web pages are linked together and can be accessed from any pages expect to donate form so the reader gets to everything about the grizzly bears before donating. I drew the design on draw.io as it was easier for me to use plus it saves my work automatically so I don't have to worry about losing my work.

Colour Pallete

I have used some colors such as yellow on the header which include logo and the title and borderline it with black color on each page. The navigation bar is blue color on each page but when the mouse hovers over the bar its changes its color to green. I have used color coding for some color such as the container background for each page is gray "A3A3A3" or I just insert the color name and it works. I receive the code for most of the colors from HTML Color Code.

Font

For the fonts, I use Google Fonts to help me present the title more appealing for the people visiting this website as the title has to be eye catching so I made it differently. The Google fonts are really useful because it has the variety of fonts that anyone can anyone can apply it on their website to make their title or text appear differently and it's easy to produce on the web page by just taking the link from the font I want to use.


















As for the logo, I used Paint to design the logo because it's very simple to use and easy to create the design. Overall I drew the design(bear shape) with a green color background which represents as nature and just added a text which didn't take me a lot of time. Additionally, there wasn't any issue when exporting the file into JPEG as the image file works for the web pages.

Page designs

Page 1

This is the first page of my website and the homepage. It contains logo which is top right on the page and the title is position top center with yellow color filled in the container and outlined with black color. Not much information is added on the homepage as I didn't find it relevant adding on this page so most of the information is added to other pages. There is only one picture of a bear but I added a GIF on this page to make it entertaining for the audience who will view this site as it contains a kid playing with a young grizzly bear and the bear is just messing with the kid. The footer is added with customer service number so that if the person needs any guidance about the website or the bears. It is outlined with black color same as the header. There are the navigation buttons where the users can access to any they wish. The navigation is the blue color with black outline and when the mouse hovers over it the bar changes it color to green.

Page 2

This page provides the person with the information they want to know about the bears. It provides them how grizzly bears can help the environment if they aren't extinct also how much food they eat in a day and what kinds of food they eat and much more. This page doesn't have a footer as I don't think it's necessary to add it on. I added a slideshow on this page to make it look interesting. As for the navigation buttons, its has the same format like the previous and after this page.

Page 3

This page provides the user information about how bears behave with the human. In this layout, I added 2 images and GIF of bear hugging with human and how they play with the human without causing them any harm which shows that how calm the bear with their adopters. It also informs the user how to act in front of the bear and much more. This time I added another container to add text and more container for the images and GIF. The page doesn't look gloomy or boring but exciting.

Page 4

This page informs the user that why they should adopt a bear and what great thing they can do with their donation. This time it has only 2 containers, one with bear pic on the left and the reason why they should adopt on the right. Whereas the donation button is on the middle of the page. Through this page, the user can access the donation if they want to adopt a bear. This navigation bar and the header container is exactly same like the previous pages.

Page 5

This page will input user information when they apply to adopt a bear. The design is plain and simple but it has a background GIF included to make the form more interesting and grab user attention. There is check list box used to allow the user decide which price they will select and drop down the list to select their title. Whereas for the name to email the user have to input their data on the form then after completion click submit.

Unit 20: Client Side Customisation of Web Pages

P1. Explain how HTML files access CSS

Introduction

Within this blog, I will be writing about the uses of HTML and CSS on creating website and how both are similar to each other.

HTML

HTML stands for Hypertext Markup Language it is the language used for describing the structure of Web pages and was devised to allow website creation. It is easy to learn using basic code and quite powerful in what it allows the users to create web pages.

With HTML, the user describes the structure of pages using markup which annotates the text so that the user can manipulate the text. Most markup languages are readable because the annotations are written in such way to distinguish them from the text. For example, On HTML the markup tags are < and >. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

The following very simple example of a HTML document illustrates how to create a paragraph. As you can see the paragraph starts with the open tag <p> and to show the end of a paragraph, you must write a close tag </p>. 

<p> some text</p>

CSS

CSS stands for Cascading Style Sheets, which is a type of web language for describing the presentation of Web pages, including colors, layout, and fonts.

Using CSS in an external stylesheet can enable the separation of document content, focusing on the appearance and formatting. The separation can improve content accessibility, provide more flexibility and can control the presentation characteristics, to suit specific requirements. You can also change a number of webpage layouts with the use of one CSS style sheet. 

Here is an example of some formatting code:-

#topleft{
    float:left;
    height:150px;
    width:220px;
    background:blue;
 }

CSS can position the box I made on the page. Here is an example of CSS code

#flag{

    position: fixed;
    border:1px solid black;
    height:400px;
    width:600px;
 }

Here I choose the format for the flag size. Also, it is positioned fixed which means it always stays in the same place even if the page is scrolled. 

<div id="flag"></div>

This refers to the code above. Div tag is use to create shapes in CSS.

Comparison

HTML provides the structure of the page, CSS the visual and layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basics of building Web pages and Web Applications.

Reference

goo.gl/a7kKWJ

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