Rohail Siddiqi Web Project

Saturday, 17 June 2017

M1 (Assess different implementation styles of CSS)

In this assignment, I will be discussing the different implementation styles of CSS in a HTML file. CSS stands for Cascading Style Sheet where the developer codes the website to present in a certain way. However, there are three types of implementation of CSS . These are:-

Inline
Embedded
External

Inline

This is the first implementation style of CSS. In an inline style of CSS, the CSS is used on the same HTML document and every tag has its own CSS implementation. The CSS is added to the same line as the HTML, which requires its manipulations that the user requires to be done individually, for each piece of content on the webpage. Every HTML tag is given a CSS statement which means that it has been styled using CSS. I have shown an example of this method below. The example below shows a heading which, the user has added an inline CSS style formatting to. With the code above showing CSS changing the color of the heading to purple, white it prints 'Purple headings are fun!' on the screen.

Advantage

This type of coding is best for testing as the user can write the CSS that they would like to implement on a certain part of the website to test whether that style change fits their needs or not, without having the need to manipulate anything else on the website.
Suitable for a 1 page website with limited tags due to inline tags being fairly simple on lightweight websites. This makes the webpage also not require having an additional file, as an external CSS format requires the user to do so.
If you only want to make one change, you can do so with inline CSS formats as these override any other types of CSS implementations on the webpage, giving the user much more control over the singular element of the webpage that they would like to change in order to suit their needs.

Disadvantage

Very time consuming when it is for a large website where every line would require an inline CSS. This is because the user will have to manipulate with every single element of the website if they require having a complete design change of the website which is just not convenient for the developer as they will have to go to every single element of the page to change the layouts and the styling of it.
If there is another CSS implementation along with inline CSS, inline CSS will not let the other implementation work until inline is removed.
Having inline CSS in a web page will increase the file size and will slow everything down including page load times.

Embedded

Embedded is another form of CSS implementation in a HTML file where CSS is still internal to the code but it is not inline with the code itself but it is placed in the page itself where the HTML is, it is specifically placed in the <head> section of the page. Each piece of code must be identified by a name which then will be used in the embedded CSS which would then match up the names and apply the chosen settings to the chosen piece of code. Which makes this type of CSS implementation very similar to inline, except the CSS defines the whole tag, instead of one singular piece of content of the page.
An example of Embedded CSS is shown below. In the example, there is a div tag in the body which presents a piece of text on the screen when it is run, this text has a defined name called"Boxmodel". The CSS is shown in the <head> tag of the webpage where the predefined name of the div tag i.e. #Boxmodel has CSS applied to it and changes the various styling of the div tag such as the margin being defined as 30px and the border being defined as 10px with a solid black fill, etc.

Advantage

This type of CSS implementation is much more time efficient than inline as this does allow the developer of the website to tweak with the CSS of an element of the webpage as a whole defined tag, as opposed to individually changing the CSS for every single line of code.

Disadvantage

The disadvantage of using this type of CSS implementation type is that it is limited to one webpage. This makes it harder for the developer to keep a uniform look to the website, if required to do so as the same CSS will not be able to transfer its styles to different webpages and limit itself to the webpage it was built on, hence why the External implementation style is widely used by developers in creating larger websites than the ones that are limited to only one or two webpages.

External

External is one of the most professional implementation of CSS. This is implemented in a different file to the HTML however saved in the same location as the HTML file so they can work in conjunction. This is a type of implementation used on most websites with multiple webpages. The CSS is in a separate file. Each line of code in the HTML file must be given an identity which should match up a section of the CSS code which contains all the customization of the very line that the developer has written. This type of CSS can then be used to allow different webpages on the same website to communicate with the same CSS style sheet and allow the developer to keep a very uniform look to the website. The example below shows the CSS being in an external source named 'style.css' which is defined in the HTML file with the <link> and <href> tags in the head of the document, and it has three different predefined tags called, '#circle', '#circle2' and '#circle3', which are three different named tags in the HTML file. Each tag customizes different aspects of the defined tags such as the first one defines the left margin to be 5px and background to be red, etc.

The HTML file.

The CSS style-sheet.

Advantage

It is easy for the developer to use external implementation if the webpage consists of two or more pages as one CSS file applies to all of the HTML tags.
Separate files makes the website smaller in size as they will only have to load the HTML file which makes it faster to load due to smaller files.
The developer also has full control over the structure of the HTML regardless of it being in a separate file. The whole webpage, if it needs any additional customization, the developer only has to change it once in the code and that change will take place on the whole website.

Disadvantage

There are two separate files that require to be downloaded from the server which can slow the process down and take more time before the website is published. This makes this style type to not be as efficient for small websites where the developer could either use inline or embedded CSS implementation styles, as they could reduce the load up times for those smaller websites, while an external CSS style sheet will slow down those lightweight websites.

References
https://www.npmjs.com/package/inline-css
http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import

http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm

http://www.blooberry.com/indexdot/css/examples/cssembedded.htm

http://www.quackit.com/css/embedded_style_sheets.cfm

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

http://www.quackit.com/css/external_style_sheets.cfm

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

Monday, 12 June 2017

Assignment 3

Assignment 3

In this assignment, I will be developing a website relating to an interest of mine. I have chosen my website to be an E-commerce website for cameras and photography. I have great interest in photography and have experience in the sector. I will be listing down three of my top favorite Digital SLR cameras (also known as professional cameras) and will allow the visitors to buy these cameras there and then from the website using a checkout page. The target audience for my website is photography enthusiasts such as myself. I will be listing down the cameras at a much lower price than the actual retail price so that I catch more photographers' attention and have a slight boost in the sales.

The age requirement is 13 and above as these professional Digital SLR cameras tend to be heavy and delicate and giving it to someone under 13, they might damage it which will again cost a fortune due to their high retail prices. The website is UK based websites and will not allow to take any orders from outside of the UK, so anyone out of the UK is out of luck. There is a dedicated checkout page for anyone who wishes to purchase goods from my website.

My website will be called "Rotography" which will hold detailed information about all the products that are listed on my website.

The color scheme of my website

I have decided the above colors to be my chosen color palette because it has a nice gradient to it which will allow me to make different elements of the website look uniform, yet distinctively separating each from one another which will allow for the user to find what they are looking for on the website. I have chosen white to be my text color as it allows for it to not blend in with the background and will allow the users to read the text comfortably. This does not mean that I will be using the rest as backgrounds of different pages in my website. I will keep the background the same throughout the website but will have different colors for elements like the navigation bar and the body so that the user knows where each is.

The main background color of my website will be HEX 03FAFF or RGB 3:250:255 which gives a light blue / turquoise color. I will use this color as it will allow me to keep the website look uniform with the blue scheme color I have chosen for my website.

The font I will use

The font I have chosen is from the site http://fonts.google.com and I have chosen 'Bitter' to be my font as I require having a Serif font. I will use this font throughout the website. I have chosen this font as it will fit in well with the color scheme of my website which is around the blue color. This font is going to be in white and will stand out from the background which will allow for the users to easily read the text. The font also is slightly thicker than other fonts which will keep it distinct from the background.

Logo

The logo that I have used is of an animated camera which I created myself in Adobe Illustrator. This is the logo I chose because this relates to my website a lot. My website is based on a photography interest that I have, and the logo represents it. The lenses are made of two variants of blue color which reflects on the color scheme I have chosen on my website. The lens being the main aspect of a camera which is why I decided to keep that on the same colour scheme of the website. I have chosen the background of the logo to be yellow as it will allow for the logo to stand out from the background of my website.

Interactivity within the website
In this blog, I will be discussing the different inter-activities I will be implementing within my website. This will allow for the user to be more interactive with the website which will provide with a much responsive yet friendly user experience. It is important for every web developer to have some a degree of inter-activities within their website in order to keep the user from getting bored off the basic layout.
The inter-activities I am planning on using are mentioned below.

Rollover activities

I will be implementing is roll over buttons which will give the user a visual feedback to where they are clicking. This is one of the most common ways to improve inter-activities within a website. On the above example, the button turns froma blue colour to a burgandy colour when it is rolled over to give the user a visual feedback.

Click activities

One other rollover activity I will be implementing is click activities where again, the user will have a visual feedback to where they are clicking. The links will go from grey to red when clicked on which which is the interactivity to make the user aware of the link they are about to click on.

Drop-downs

Drop downs are another form of interactivity that I will be using in my website.This will give the user another visual feedback when they click on a drop down enabled box. The drop down will give the user several options related to the box title. In the above example, the title of the person is being given in a drop down, so instead of the user fully typing their title in, the website will give them options from the available titles.

Images used in my website

In this assignment, I will be discussing the images I am intending on using in my website and an alternative piece of text if the images stop working. The images I will be using are illustrating the products that my website will be selling. The website will be selling two professional DSLR cameras and one T shirt as an exclusive Rotography merchandise.

Images of the cameras

This is the first camera that I will be selling. This camera is called the Canon EOS 5D Mark IV. This image will have an alternative text saying "Camera 1" which will let the users know that it was a picture of the first camera, if something goes wrong with the image.

This is the second camera that I will be selling. This camera is called the Nikon D810. This image will have an alternative text saying "Camera 2" which will let the users know that it was a picture of the second camera, if something goes wrong with the image.

Images of the exclusive t shirt

This is the exclusive Rotography t shirt that I will be selling. This image will have an alternative text saying "Tee" which will let the users know that it was a picture of the Tee, if something goes wrong with the image.

Logo

This image is of the logo I created for my website called Rotography. I will use this logo on every webpage of my website and an alternative text of "Rotography logo" will be created in order to let the users know that it was the logo, if something goes wrong with the image.

Wireframes of my website

I have created wireframes of my website which illustrate how my website will look like after it has been finished. I have called the website 'Rotography' which is an eCommerce website for people who have a passion for photography like myself. I will be selling two different cameras which are my most favorite cameras at a discounted price. My website also will be selling its own merchandise which is a T shirt with the website logo. In total the website will have three products but in total it will have 6 webpages. I have created a wireframe for each webpage which are shown below.

This is a wireframe of the homepage of my website which will list the three products that my website will be selling. Due to the website being an eCommerce website, it will show the products on the homepage. I will have three products, two of which will be professional cameras that I recommend at much lower prices than the Retail price. I will also have a description which will let the enthusiasts know the reason why I recommend that camera.

This is the wireframe of the webpage where my highest rated camera will be selling. I will have a picture of the camera and then I will have the specifications list next to it. I will also have a buy now button underneath the description.

This is the wireframe of the webpage where my website's merchandise will be selling which is a T shirt with the website logo on it.

I will have a picture of the T Shirt and then I will have the specifications list next to it. I will also have a buy now button underneath the description. The t shirt will be on sale and will be on a 50% discounted price.

This is the wireframe of the webpage where my second highest rated camera will be selling.

I will have a picture of the camera and then I will have the specifications list next to it. I will also have a buy now button underneath the description.

This is a wireframe of the checkout page which the users will see if they decide to buy an item. This is going to be a form where the user is going to input their details in and order for the product they are intending to buy.

This is the sitemap of my website where it shows how my website functions. I will have 6 webpages in my website with one of them being a homepage, two being the cameras I am selling, one being my merchandise on sale, one being a contact us page and one being a form which is the checkout page as shown above. The homepage will link to the two cameras that I will be selling, the merchandise and as well as the contact us page. The cameras and the merchandise will have a buy now button which will link to a checkout page.

unit 28 M2

M2 - The design tools that I have used

In this assignment, I will be discussing the different tools and techniques I used to produce my website. I used many different tools in every step of the website production including the planning stage where I designed the website using tools and techniques. The tools helped me to have a better understanding about the audience of my website and how it should be laid out. I will be describing the following tools:

Draw.io
Adobe color pallet
Google fonts

I will also describe the following techniques:

Wire-frame
Graphic program

Draw.io
One of the tools I used for my website designing is draw.io. This tool is a free online diagram editor which is built on cloud services like One Drive and Google Drive where users can conveniently store their files created on the website. With the cloud services rather than being a native one, using trusted services like Google Drive makes it more secure for the users to store their files. This websites allows the users to create flowcharts, data flow diagrams and all kinds of useful diagrams. Some of the diagrams have presets that the users can drag and drop entities onto the main screen or sheet which then the user can further edit to precisely fit thee diagrams that they would like to create.

It allowed me to create a basic design of my website, giving me a wider understanding about the different elements in my website such as where the different pictures will go and what should be the general layout of the website. Using draw.io, I created 5 webpages for my website which allowed me to design navigation buttons accordingly. I decided to add a navigation bar at the top of the website which would be visible on every page of the website for the ease of the users to navigate through the website.

Adobe color pallet

The second I tool used was a color pallet by Adobe. This is an online tool which gives the user a full RGB color pallet out of which they can choose five different color which suits best for their needs. In my case, I used the color pallet to choose a color scheme for my website. I decided to have a much darker tone than usual, so instead of going with different shades of grey, I went for dark blue being my color scheme. I chose 4 different shades of blue, each for different elements in my website and the fifth color was white which was the text color, as light text goes well with a darker background and makes it easier for the user to read the text.

Google fonts

Google fonts is an interactive online directory of different fonts that Google provides its users for free. These fonts are often used by developers such as web developers to implement these provided fonts onto their projects which would give them a much wider amounts of fonts to choose from compared to the handful provided by Microsoft or Apple in their respective operating systems. My website required a uniform font in order to make the website look clean and organised. I chose one of the fonts from Google fonts to use on my website called Bitter which was a Serif font. Google fonts is a free service provided by Google which gives everyone access to fonts by Google. I used this service because it has a wide variety of fonts, compared to the Microsoft's built in fonts which are very limited and widely used. I chose Google fonts because it gave me access to filter fonts out according to my will such as it gave me an option to choose what type of fonts I would like to see such as Serif or Sans Serif which are the two main types of fonts available. Google service was also very detailed and gave me proper instructions about how to implement it into my website.

Wire-frame (Draw.io)

I created my wire-frame on Draw.io which as I previously mentioned is an online tool which allows the user to connect their cloud drive to create various kinds of charts and web designs. It enabled me to create wire-frames of my website with ease due to its easy to understand user interface. The website allowed me to drag and drop different entities onto the board where I created the wire-frames. Adding text onto the wire-frames was very easy to, it required me to double click on any shape on the screen and it provided me with a text-box on top of that shape which made it much easier for me to create the wire-frames. The creation of wire-frames allowed me to understand how the website will operate and how the navigation of the website will operate. It gave me a clear understanding of all of the webpages and how they must be linked together in order to achieve what I was aiming for with my website.

Graphic software (Adobe Photoshop)

Photoshop is a professional graphic creation software. Photoshop has a lot of different tools and those tools aided me with the editing of the images that I used in my website. This application is used by many developers to create graphical images which can then be used in their projects. This application provides the best tools for bitmap image manipulation, hence why I chose this application to be the one to create my logo and other graphical images shown on my website. With the variety of tools that it has, such as box creation tools and circle creation tools, Photoshop was very useful for me when I was creating my website logo as it gave me the correct tools I required in order to create an animated image of a camera, which is what my website is based on. For the images I was implementing on the website require resizing and cropping which was also done in Photoshop. All images on my website required having a transparent background and Photoshop has a useful tool called the background removal tool which allowed me to do exactly so and successfully implement the images onto my website.

Komodo Edit

Komodo edit is a free text editor for different programming languages. Komodo edit has support for many programming languages including HTML 5, which is the programming language I used to create my website. With its support for error correction, it allowed for me to easily find bugs in my website and tackle those bugs. My website was created oin Komodo edit from strat to finish and the improvements that I have implemented on the website is using Komodo edit as well. Komodo edit also has an in built browser which allowed me top conveniently check the changes I am making to my website which helped me save time and create a website which was precisely what I first intended for.

In conclusion, I used a variety of different tools and techniques for the creation of my website. These tools and techniques have aided me to their full potential to help me create a fully functional website with everything working as intended.

Bibliography

http://www.draw.io
https://color.adobe.com/
https://en.wikipedia.org/wiki/Adobe_Photoshop
https://en.wikipedia.org/wiki/Komodo_Edit

Monday, 22 May 2017

Unit 20 M2

M2 - How a scripting language can improve the functionality of a website.

Introduction
In this assignment, I will be discussing how a scripting language can improve the functionality of a website. I will compare the benefits of using a client side scripting to the benefits of a server side scripting. I will then be discussing how client side scripting can improve the user experience, this is one of the important aspects of a website that a web developer must keep in mind as a good UX can have an impact on gaining a wider audience. Lastly, I will be describing how a website can use client side scripting in order to implement data validation on a website.

Comparison

Client side scripting
The scripts that run on the end user's browser are known as the client side scripting. The processing of the script takes place on the user's computer system as opposed to a server. The script code is sent to the user's browser via the internet connection and then the client side scripting runs on the user's browser. Often, browsers give the user control over the client side scripting by allowing the user to choose whether they want it enabled or disabled, this is due to the scripting being one of the ways hacker try to take control over the user's system, therefore making it a high security risk.

Advantages of client side scripting

One of the advantages of using client side scripting is the speed of the scripting. This is because the script executes on the client's computer system as opposed to a server which requires a continuous connection. This is beneficial for the user because it is a much better performing experience for the user as they do not have to wait for the server to react to their actions on the webpage which is the way the server side scripting operates, and have a negative impact on the performance of the webpage.
The usability of the website can have an improvement when it uses a client side scripting. Client side scripts can help add more interactivity to a website which not just improves the user experience but also improves the user engagement with the website. However, using server side scripting is not as quick to load as server side scripting because it requires the browser to download the scripts before they are run.

Server side scripting

A server side scripting is totally opposite from client side scripting as it runs the scripts on a web server. This occurs when the user requests for a webpage, the script runs on the webpage as it is delivered to the user therefore allowing the webpage to be dynamic and more interactive. The server side scripting is often used to create webpages more interactive for the user which require to be directed to a database that interfaces the website's interactivity.

Advantages of server side scripting

One of the main advantages to a server side scripting is that it does not require the client system as much as a client side scripting, this means that that it reduces the amount of load the client's system goes through in order to run a script, instead the server handles all of the load for running a script, therefor having a better overall system performance on the user's side. This has a positive impact on the user experience as the server side scripting does not rely on the client's system at all and if the system was old, running a client side scripting with slow down the system even further.
Functionality and support is another advantage for server side scripting. The user is not required to download additional plug ins in order for the script to be loaded and ran. The browser does not require having support for a certain type of player in order to run the scripting which makes it much beneficial for the user as they do not require downloading plug ins onto their system and slow their systems down. Compared to client side scripting, which is highly dependent on browser support and plugins, this is an issue that never occurs with server side scripting.

User Experience

With most webpages in the recent years have seen an improvement in their functionality and interactivity, this is achieved by using scripting languages within a webpage such as JavaScript. These are used to enhance the user interface which results in an improvement in the user experience, and the better the user experience, the more users the webpage will attract. One of the ways to improve the user experience is by device compatibility. This can be done by using JavaScript to determine what device the webpage is being accessed on and adjust it accordingly. For example, if a user tries to open YouTube on their phones, it will be a much different experience compared to the experience on a computer, this is due to the scripting optimizing the webpage for a mobile phone and making the features on YouTube much more accessible for users on a mobile device.

Validation

Data validation on a website is also achieved by client side scripting. JavaScript can be used to validate various kinds of data types which are input by the user in different text fields. Having data validation on a website improves upon the data integrity of all of the data collected and stored, this is because before any data is stored, it is validated via the client side scripting. This allows for tiny typos such as an accidental keyboard input into a number field will trigger the validation and will give the user an error. Client side scripting will allow for the validation to be much faster than a server side script this is because the validation will be carried out in the client's computer and once the data is validated, it will then upload the data to the databases.

Server side scripting is done via PHP which stands for Personal Homepage is a scripting language that allows for the website to create login areas with different usernames and password. The script validates the data entered by the user when logging in and then looks for the data in the database and if found, the user will get access to their account, if not the user will be denied access. This is how validation works with scripting languages on a website.

In conclusion, the different scripting languages have a different impact on how the webpage responds to the user's actions and each have their advantages and disadvantages. Choosing the type of scripting language is to be done by the web developer who will choose the one that meets their requirements. These can be used for enhancing the user experience and as well as data validation which should improve data integrity for that webpage.

Bibliography

https://en.wikipedia.org/wiki/PHP

http://www.opensourcetutorials.com/tutorials/Design-And-Layout/Usability/web-widgets-part-2/page2.html

https://www.sitepoint.com/client-side-form-validation-html5/

P3 (Explain the fundamentals of a scripting language)

P3

In this assignment, I will be discussing the fundamentals of a scripting language. A scripting language is a form of programming language which requires an additional program to execute. A web browser is the program required for the compiling of the scripting language as opposed to a processor which usually compiles other programming languages. These scripting languages are used to make different sorts of websites, from very complicated ones to very lightweight and small websites. I will be discussing today Javascript and jQuery.

Javascript
Javascript is one of the worlds most known scripting languages. It is a programming language which allows for websites to be more interactive. Javascript is an open sourced language which means that it does not require anyone to buy licences etc. Javascript can work alongside HTML which gives the web developers of the website to have a wide range of interactions implemented within the website. Due to Javascript being so vastly popular, it is essential for all of the web browsers to support Javascript as it allows for the websites to be fully functional and due to almost every website having some sort of Javascript element to it, it makes it essential for the web browsers to have support for most websites. A few examples of the websites that use Javascript are YouTube for watching videos, Amazon and E bay as eCommerce and as well as Netflix and Amazon Prime Video include Javascript in their website in order to increase the user interaction on their website and if implemented correctly, it attracts more users as well. An example of Javascript could be a website including animations which move once the user rolls over their mouse on top of them, this gives the user more feedback and allows for a good user experience. Client side JavaScripts is one of the ways to validate the user's input on the webpage. This often works in forms and text-fields where the user is required to input data in. Validation prevents from spam to go through the validation which will take up space on the web servers. Validation is one of the ways JavaScript is used in conjunction with JQuery allowing for the website to prevent from robots other spam sources to input data into the system.

The above screenshot is an example of JavaScript. In the above scenario, the basic JavaScript coding allows for the webpage to create a pop up asking for the user's name and when they enter their name, the user then is presented with a webpage saying "Your name is " and then followed by their name.

More examples of what javascript is for and you don't mention validation.

jQuery
JQuery is an open sourced library which is built using Javascript. This means that JQuery is a library of pre-coded actions that a web developer can implement on their websites. Furthermore, JQuery being a library means that the developer does not need to define every single aspect of their intended functionality that they would implement in their websites which makes it very time efficient. It works alongside HTML and is used to give webpages additional functionality, usually for the users of the webpage. It is used to allow users to do various functions like modify text, move different page elements and even adding different types of animations to the webpage. JQuery simplifies the basic actions and functionality that a general website requires and gathers it in a library of pre-defined code. This makes JQuery very useful for a web developer because for example if they want to implement something very basic into their web page such as creating a pop up after an action, they can do they with JQuery using not more than 2-3 lines of code, compared to JavaScript which would require a whole page of coding just to add the same basic functionality to the website, which is very convenient and works as well as it does on other programming languages, if not, better.

The above screenshot is an example of code behind a JQuery. In this scenario, the code shows us that when the user performs a click action on the text, the text will disappear. This example of JQery sis not take more than 3 lines, and compared to a JavaScript code to achieve the same goal, the developer would require writing way more code than the above picture.

It's a library, and more examples of what it can do.

References
https://en.wikipedia.org/wiki/JavaScript
https://en.wikipedia.org/wiki/JQuery

M2 - How a scripting language can improve the functionality of a website.

Introduction
In this assignment, I will be discussing how a scripting language can improve the functionality of a website. I will compare the benefits of using client side scripting to the benefits of a server side scripting. I will then be discussing how client side scripting can improve the user experience, this is one of the important aspects of a website that a web developer must keep in mind as a good UX can have an impact on gaining a wider audience. Lastly, I will be describing how a website can use client side scripting in order to implement data validation on a website.

Comparison

Client side scripting
The scripts that run on the end user's browser are known as the client side scripting. The processing of the script takes place on the user's computer system as opposed to a server. The script code is sent to the user's browser via the internet connection and then the client side scripting runs on the user's browser. Often, browsers give the user control over the client side scripting by allowing the user to choose whether they want it enabled or disabled, this is due to the scripting being one of the ways hacker try to take control over the user's system, therefore making it a high security risk.

Advantages of client side scripting

One of the advantages of using client side scripting is the speed of the scripting. This is because the script executes on the client's computer system as opposed to a server which requires a continuous connection. This is beneficial for the user because it is a much better performing experience for the user as they do not have to wait for the server to react to their actions on the webpage which is the way the server side scripting operates, and have a negative impact on the performance of the webpage.
The usability of the website can have an improvement when it uses a client side scripting. Client side scripts can help add more interactivity to a website which not just improves the user experience but also improves the user engagement with the website. However, using server side scripting is not as quick to load as server side scripting because it requires the browser to download the scripts before they are run.

Server side scripting

One of the main advantages to a server side scripting is that it does not require the client system as much as a client side scripting, this means that that it reduces the amount of load the client's system goes through in order to run a script, instead the server handles all of the load for running a script, therefor having a better overall system performance on the user's side. This has a positive impact on the user experience as the server side scripting does not rely on the client's system at all and if the system was old, running a client side scripting with slow down the system even further.
Functionality and support is another advantage for server side scripting. The user is not required to download additional plug ins in order for the script to be loaded and ran. The browser does not require having support for a certain type of player in order to run the scripting which makes it much beneficial for the user as they do not require downloading plug ins onto their system and slow their systems down. Compared to client side scripting, which is highly dependent on browser support and plugins, this is an issue that never occurs with server side scripting.

User Experience

With most webpages in recent years having seen an improvement in their functionality and interactivity, this is achieved by using scripting languages within a webpage such as JavaScript. These are used to enhance the user interface which results in an improvement in the user experience, and the better the user experience, the more users the webpage will attract. One of the ways to improve the user experience is by device compatibility. This can be done by using JavaScript to determine what device the webpage is being accessed on and adjust it accordingly. For example, if a user tries to open YouTube on their phones, it will be a much different experience compared to the experience on a computer, this is due to the scripting optimizing the webpage for a mobile phone and making the features on YouTube much more accessible for users on a mobile device.

Validation

Bibliography

https://en.wikipedia.org/wiki/PHP

http://www.opensourcetutorials.com/tutorials/Design-And-Layout/Usability/web-widgets-part-2/page2.html

https://www.sitepoint.com/client-side-form-validation-html5/

Monday, 12 December 2016

P1 (How HTML files access CSS)

P1

Introduction

In this assignment, I will be explaining what HTML is as well as what CSS is. Every website, when it is produced, the developer needs to decide the format the website is in so they can code accordingly. CSS and HTML are two examples of the languages a website can be produced in and they often work in conjunction with each other. I will also be comparing both, HTML and CSS and explain how they work in conjunction.

HTML

HTML stands for Hypertext Markup Language which is a computer language that allows the developer to create a website which suits the requirements. HTML is highly customisable as the website is made from scratch by the developer. This is one of the most powerful tools of creating a website. HTML often works in conjunction with CSS or Javascript. These HTML websites, once they are completed, they are uploaded to web servers with a domain name and when the user requests for the website, they HTML website is sent back to them. HTML is one of the most common ways to create a website because it is highly customisable and as well as not very time consuming, a small website can be made in one sitting.

CSS

CSS stands for Cascading Style Sheets. This is a style sheet language which describes how a website is either stylised or presented. This language is usually worked in conjunction with a markup language because this requires external code in order to help it recognise what is the stuff it is stylising. CSS allows various different ways to present the website including fonts, layouts and colours. It also allows the developer to open support for devices with small screens like smartphones and tablets. CSS allows web developers to create style sheets which can then be used on multiple web pages. This is a very good tool when a business requires their website to look identical in all of their webpages allowing a uniform look to the whole website. This is a very useful tool to making large websites with a lot of pages because it allows the developer to keep the code simple and organised. This is less time consuming as well because the developer only has to code once for an object which can then be used twice or more and the developer will not have to recode it.

Compare and contrast (How HTML and CSS work together?)
When a website is being created, it would start off with HTML which is the format most websites use if you view their code. However, every website needs to be presented properly and styled in order to make it eye catching and as well as make it looked organised. CSS is the backbone to the website's design and presentation. CSS makes the website look more presentable and in a business situation, they require everything up to mark including the presentation of the website. CSS uses style sheets which is then implemented in the HTML code. CSS has a new version which is the third version and is not fully supported by all web browsers, although it does add a lot of new features and improvements. CSS is a way the developer would like to present their website, but depending on the website, if it is a small websites, it isn't the greatest idea to use CSS with HTML as it will be more time consuming than just coding it with HTML. However, if the website contains a lot of web pages, it is essential to use CSS as it allows the developer to style once and code the HTML in conjunction which is much more time efficient than individually presenting it in HTML.

References
http://www.w3schools.com/css/css_intro.asp
https://www.w3.org/standards/webdesign/htmlcss
http://www.w3schools.com/html/html_intro.asp
https://www.w3.org/Style/Examples/011/firstcss.en.html