|
|
|
|
|
|
Friday, 24 June 2016
Adobe Kuler
Task 3
Task 3 - CSS Implementation Styles
Introduction
The report will be explaining what inline,
embedded and external is. I will be giving advantages and disadvantages of
these. While I am describing each of the styles, I will include examples of
code to show how the style may look. CSS stands for Cascading Style Sheets;
these sheets help define how to display HTML elements. CSS was designed to aid
designing web pages in mind, this is because it without CSS you would have to
keep editing every little thing over and over again which can become very
confusing and time consuming. Style sheets can hold things like font, font
colour and size in a different document; this would help reduce size of the web
page as well. It would also makes things a lot easier and makes the code on the
HTML document less clunky.
Inline
Inline is a style that only works for the tag itself. The inline uses
the HTML style attribute. Example - <p1><font color=”red”>Example</font></p1>.
In this line you can change the font colour; you can also add a background colour.
The problem with inline is that if you use the style throughout your code, if
you find that you want to change the colour, you will need to go back to each
line and change; this will be very time consuming.
Advantages
Inline CSS
is great for testing, many developers will use inline to test their code, these
test could be what colour looks best or font.
The website
will load much faster because there will be lower HTTP requests
Inline CSS
is great for small websites such as blogs as there will not be a lot of
formatting required or many pages.
Disadvantages
If you have
used inline throughout your code, and you want to change the entire colour, you
will need to go back to each line and change the code.
You are
unable to reuse the styles anywhere else.
The lines of code will start to look like a
jumble of text and can cause headaches or hard to focus at. (iii, n.d.) .
The style can override things that you didn’t want to be overridden. You can’t
pseudo elements and classes with inline. For example, you can’t style the hover
colour of an anchor tag. Inline you are only able to style the link itself.
Embedded
Embedded
styles are written inside the <head> part of the webpage via the
<style> tag, for example, <style type=“text/css”></style>.
The styles can only be used for the webpage that has the tags. This means that
you will need to create the styles for each webpage that you want to style. It
would be wise to use embedded style sheet when a single document has a unique
look to it.
Advantages
It can be
easily modified by using a server side scripting language such as PHP.
No
additional downloads are required.
Web developers
can edit the link colour of an anchor tag.
Embedded
styles do not need to be applied to every element.
Makes it
easier for developers to test their websites because you do not have to
separate any pages apart from the one that you are testing. Internal style
sheets allow for pseudo elements, you can style the way the hover, active and
link colour of an anchor tag unlike with inline.
Disadvantages
The code
will look very messy. The styling can only be used on the webpage which it is
contained in. CSS page loading will be much slower. By using this, the page
size will increase. The large page size won’t affect designers because it would
be viewed offline, whereas when it is online it would consume way too much
time.
External
An external style sheet is a separate page file
that will in the future be linked to the webpage. An external style sheet is a
text document that is saved as .css. You need to link the external style sheet
to the webpage for the style to be applied. Here is an example of how to apply
in a webpage. <link href=”main.css” rel=”stylesheet” type=”text/css”>.
External style sheets are very popular when a style is being applied to many
pages. By having external style sheets, you can change the way the entire web
site looks by just editing one file. These style sheets can be written in any
text editor (Anon.,
n.d.)
Advantages
Web
developers can decrease the size of webpages. This is because the styling text
will be different in all documents.
Allows the
developer full control of the page and how it is structured.
It is easier
to reuse CSS code as it is in a separate file. The great thing about external
style sheets is that you can keep your site looking consistent. You can control
the way several documents look all at once. You are able to group styles that
you have created, this will make things more efficient.
Disadvantages
Extra downloads are required to import the external style information.
The document may be slow to load because the external style sheet will
need to be loaded.
It can be hard to find the styles that are not being used anymore,
this is because the style will not be deleted when the page is removed. Using
only a small amount of styles can increase the complexity of the page.
Conclusion
There are many CSS style sheets that are available for use, Inline,
Embedded, External. However each of these style sheets has their advantages and
disadvantages. Style sheets will make
life easier for people to create web pages as they allow them to set properties
to paragraphs, headings etc. and allow them to change the properties without
having to go back to the original code and changing every single line.
Bibliography
Anon., n.d. [Online]
Available at: https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
[Accessed 25 november 2015].
Available at: https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
[Accessed 25 november 2015].
Anon., n.d. [Online]
Available at: http://www.expression-web-tutorial.com/Types_CSS_Styles.html#external
[Accessed 26 November 2015].
Available at: http://www.expression-web-tutorial.com/Types_CSS_Styles.html#external
[Accessed 26 November 2015].
iii, i., n.d.
[Online]
Available at: http://www.nullskull.com/faq/99/css-disadvantages-of-using-inline-styles.aspx
[Accessed 25 november 2015].
Available at: http://www.nullskull.com/faq/99/css-disadvantages-of-using-inline-styles.aspx
[Accessed 25 november 2015].
Task 2
Introduction – in this report,
I am going to be describing how HTML and CSS work together to produce websites.
I will describe what HTML is and what its purpose is in developing websites. I
will also be doing the same for CSS. After describing, I will conclude by
describing how HTML and CSS work together in the development of websites. This
description will go over the ability for the programmer to pre define tags and
the ease it will bring when having to come back to edit the tag.
HTML – HTML stands for Hypertext Mark-up Language, HTML uses tags like - <p> and </p>. This tag will make it so the text
written within them, will be classed as a paragraph. Its purpose is to create
websites, the language is very easy to learn, and this is because most of the
code uses tags. HTML is the mark-up language that all web pages are written in.
HTML is very basic and can cause a lot of confusion, the formatting for HTML is
limited and is not very good at formatting multiple lines of text, though it is
possible, it will take the programmer a lot of time to do so.
CSS – stands for Cascading Style Sheet. CSS is a plain text file format and is
used for formatting content on webpages (HTML). CSS is able to edit the way
text looks in more depth than what HTML can. Formatting for example can be –
font, size, colour, border and location of HTML. HTML is also able to create a
house style for the pages of a website. In other words, CSS will be used for
the ease of being able to format multiple amounts of text. The programmer can
set it so that a paragraph can be pre-defined, or the programmer can create a
border at the start of the file and be able to edit it with ease if they need
to change it.
Compare and Contrast – HTML is
what everyone will write their page in. With HTML you are able to create a
title, paragraph, insert links etc. However with HTML, you are limited to how
you do this. For example, if you were creating a webpage for someone and you
have one line as a different colour, the person may want that line changed to
blue and the rest of the text to purple. With HTML, you will need to go to each
line of code and manually change them. However, with CSS you can configure the
tags. For example, <p1> can be pre-defined to have a font size of 50 and
the colour to be red. Now if the person doesn’t like the way <p1> looks,
you can go back to where you pre-defined how <p1> will look and change
the values without having to go to each line of code to edit the colour.
Task 1 P1
Introduction
In this report I am going to be describing what Notepad and Komodo
Edit is. Within this I will also be stating the advantages and disadvantages of
both. After this I will compare the two products and finally I will conclude
what my favourite program is.
Notepad
Notepad has many different purposes. Notepad can be used to allow
users to program in a language that they wish. Notepad isn’t just aimed at
programming it can be used for storing notes, hence the name ‘Notepad’.
Advantages:
- There is no training needed
- It is free and comes with Windows
- It is very quick to load.
- Supports all languages as it saves as .txt
Disadvantages:
- Has no autocorrect
- Only works for Windows
- Very basic formatting
- No internal preview for programming HTML
Komodo Edit
The purpose of this program is primarily for programmers to write
code, it supports many languages. It is aimed towards programming as it has
autocorrect for most code for the language that the user chooses when creating
the project.
Advantages:
- Automatic formatting – indenting, colour coding
- Auto correct and suggest.
- Has support for many languages
- Internal preview
- Free and works on multiple Oss
Disadvantages:
- Slow to load
- Complex compared to Notepad
- You need to install it
- Sometimes the auto suggest changes the text when you don’t want it to
Comparison
Both of the programs have formatting however Komodo Edit has a much
more though rough one. Both support many languages; however Komodo Edit allows
you to choose a specific, so it can help you with auto correct and suggest.
Conclusion –
In conclusion I believe that Komodo Edit is the most useful and is the
program I would use to write code in HTML. My reasons for this are because it
has auto-correct and suggest. It also speeds up writing code because it automatically puts in the close code, for
example, when I type <p1>, the program automatically inputs </p1>
at the end for me.
Friday, 17 June 2016
Unit 20 Assignment 2 Task 5
Introduction
I am going to be describing the tools that I have used to create the main designs. The tools that I have used for this are: QSEE Superlite, Colour Palette(Adobe Kuler), Google Fonts, Wireframe(Cacoo) and Adobe Illustrator. I have decided to use these tools because I found that they are the easiest to use and will allow me to create the best looking work.
QSEE Superlite
The pupose of this software is to allow people to design and model software type systems, for example diagrams such as Data Flow Diagrams. This software can help developers create flow diagrams for their website, such as the navigation. The software was useful for creating the navigation for my website because I was able to use the hierarchy template. I was able to layout the order in which the pages will be. I could then begin to describe what will be in each page.
Colour Palette
The tool Adobe Kuler is an online tool that can be used to create a colour scheme. Without using this tool, it would be harder to find colours that can match without looking off. The tool allows you to choose a colour rule, for example "Shades". It is possible to choose a colour and the tool will give you in return the various shades of that colour. The tool is a good way to get started creating a good colour house style.
At the bottom of each square that contains the colour, there is a text box called "Hex:". Following the text box you can find the the colour on the square; you are then able to use this Hex to change the colour in your HTML or CSS.
Fonts
I used the free online tool "Google Fonts". This tool allows you to obtain many different fonts for free and implement them into your code. For example, I implemented the font "Oswald" using the following code: <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>. To actually use the font, I inserted this line into my stylesheet: font-family: Oswald. Google Fonts is free to use and comes with many different fonts to use.
Wireframe
The purpose of wireframing is to allow the developer to create designs on how the site will look or software. Without wireframes, the developer would become lost and possible begin to edit other aspects of the site or software and potentially ruining it. For example, when creating a website, it is important to have a house style designed via the wireframe. By having wireframes, it saves a lot of time as you will know what needs to be created next.
Graphic Software
The purpose of graphic software in web design is to allow the developer to create an image that suits their needs. For example, if the developer created a website about racing games, and found an image of a car. The developer may want to edit the image to fit the house style of the website (copyright free), for example the website may be dark and gritty, however the image that was found contains bright colours and backgrounds. The software that I used when creating the graphic for my website was Adobe Illustrator. I used this software because it came with many different tools that I can use to edit my graphic. The program is vector based, this means that I can scale any of the shapes and not lose any quality.
Task 7 Improving functionality M2
Introduction
In this report, I am going to be comparing the advantages of client side scripting to server sided scripting. I will also be describing how client side scripting can improve the user’s experience. Finally, I will describe how client side scripting can improve form validation.
Compare
Client side scripting offers a lot of advantages to developers, for example, client side scripts allows for more interactivity by instantly responding to the users actions. These actions are very quick because they do not need to be sent to the server to execute, whereas server sided scripts will be executed on the server. Client side scripts are reusable, people can upload many scripts onto websites such as Hotscripts.com and Javascript.com. Client side scripting can be embedded into the page on the client’s browser. However not all browsers support scripts, and therefore can lead to errors. Sever sided scripts ensures that the user does not need to download and plugins such as Java or Flash. One of the more popular advantages for server sided scripts is that they are more secure than client sided; this is because the scripts are hidden from the user; only html is visible to the user. However due to the way that dynamic scripts are, they create new security issues due to the flaws in code that can be exploited.
UX
Client side scripting can improve the users experience in numerous ways. For one, scripting languages can usually always be embedded within HTML. Scripting language allow developers to easily write and run code easily. With client side scripting desktop environments can be simulated, for example, drop down boxes, buttons and the ability to drag and drop. Amazon.com is an example of a simulated desktop, you will find a lot of interactive features such as Roll overs and interactive slide shows that enhances the users experience. Amazon have tried to make their website as easy to use a possible, they have achieved this by implementing many features that can be found on a desktop such as Windows, this is because the users will be familiar with how things work and wont need to learn anything to be able to use features on their website. Client side scripts are fast but can be dependent on the users system. For example a slow system will make things a lot slower, however in today’s day, most people’s systems are fast. Server sided scripts will be slower because it is dependent on the connection and then the server having to process the script. The users experience can also be improved as client side scripting allows for interactivity. For example, RollOvers, Drop down menus etc. All of this interactivity can be achieved by using a client side language, such as JavaScript (JavaScript can be both client sided and server sided). This really helps users navigating websites and also makes the website look much better.
Validation
Client side validation is good because it is a fast form of validation; this is because if any issues happen when running the code, an alarm is triggered when the form is submitted. One error can be displayed once at a time, this allows users to focus on what fields need to be corrected. However, client side scripting can also display all errors just like server side validation. Showing the user all of the errors at once is sometimes seen as a bad thing to do; this is because the users will need to fix all of the errors in the fields at once, and thus forcing them to remember all of their errors each time they submit. Validation can be done in many different ways; users can be easily indicated that they have written something incorrect, it is possible that text fields can have its colour changed to indicate something is wrong. Here is an example of client side validation being used to change the colour of the field of text.
if (myform.fname.value=="")
{
alert("No first name entered");
myform.fname.focus();
myform.fname.style.background="yellow";
}
The snippet of validation code above essentially checks to see if the text field - fname is empty; if the field is in fact empty an alert box will appear and the background colour of the field will be changed to yellow, telling the visitor that something is wrong here.
Resources
http://www.opensourcetutorials.com/tutorials/Design-And-Layout/Usability/web-widgets-part-2/page2.html
https://www.sitepoint.com/form-validation-client-side/
https://www.experts-exchange.com/questions/20609324/Advantages-Disadvantages-of-using-client-side-scripting-over-HTML.html
In this report, I am going to be comparing the advantages of client side scripting to server sided scripting. I will also be describing how client side scripting can improve the user’s experience. Finally, I will describe how client side scripting can improve form validation.
Compare
Client side scripting offers a lot of advantages to developers, for example, client side scripts allows for more interactivity by instantly responding to the users actions. These actions are very quick because they do not need to be sent to the server to execute, whereas server sided scripts will be executed on the server. Client side scripts are reusable, people can upload many scripts onto websites such as Hotscripts.com and Javascript.com. Client side scripting can be embedded into the page on the client’s browser. However not all browsers support scripts, and therefore can lead to errors. Sever sided scripts ensures that the user does not need to download and plugins such as Java or Flash. One of the more popular advantages for server sided scripts is that they are more secure than client sided; this is because the scripts are hidden from the user; only html is visible to the user. However due to the way that dynamic scripts are, they create new security issues due to the flaws in code that can be exploited.
UX
Client side scripting can improve the users experience in numerous ways. For one, scripting languages can usually always be embedded within HTML. Scripting language allow developers to easily write and run code easily. With client side scripting desktop environments can be simulated, for example, drop down boxes, buttons and the ability to drag and drop. Amazon.com is an example of a simulated desktop, you will find a lot of interactive features such as Roll overs and interactive slide shows that enhances the users experience. Amazon have tried to make their website as easy to use a possible, they have achieved this by implementing many features that can be found on a desktop such as Windows, this is because the users will be familiar with how things work and wont need to learn anything to be able to use features on their website. Client side scripts are fast but can be dependent on the users system. For example a slow system will make things a lot slower, however in today’s day, most people’s systems are fast. Server sided scripts will be slower because it is dependent on the connection and then the server having to process the script. The users experience can also be improved as client side scripting allows for interactivity. For example, RollOvers, Drop down menus etc. All of this interactivity can be achieved by using a client side language, such as JavaScript (JavaScript can be both client sided and server sided). This really helps users navigating websites and also makes the website look much better.
Validation
Client side validation is good because it is a fast form of validation; this is because if any issues happen when running the code, an alarm is triggered when the form is submitted. One error can be displayed once at a time, this allows users to focus on what fields need to be corrected. However, client side scripting can also display all errors just like server side validation. Showing the user all of the errors at once is sometimes seen as a bad thing to do; this is because the users will need to fix all of the errors in the fields at once, and thus forcing them to remember all of their errors each time they submit. Validation can be done in many different ways; users can be easily indicated that they have written something incorrect, it is possible that text fields can have its colour changed to indicate something is wrong. Here is an example of client side validation being used to change the colour of the field of text.
if (myform.fname.value=="")
{
alert("No first name entered");
myform.fname.focus();
myform.fname.style.background="yellow";
}
The snippet of validation code above essentially checks to see if the text field - fname is empty; if the field is in fact empty an alert box will appear and the background colour of the field will be changed to yellow, telling the visitor that something is wrong here.
Resources
http://www.opensourcetutorials.com/tutorials/Design-And-Layout/Usability/web-widgets-part-2/page2.html
https://www.sitepoint.com/form-validation-client-side/
https://www.experts-exchange.com/questions/20609324/Advantages-Disadvantages-of-using-client-side-scripting-over-HTML.html
Task 6
Introduction
Many people mistake Javscript as a programming language, however it is not. To many, Javascript is also seen as a security flaw as it can be manipulated by hackers, thus making it somewhat unpopular. I will be also explaining how JQuery saves coders a lot of time as it saves them from writing many pages of code.
Javascript
The purpose of Javscript is to extend functionality in websites, and it is client side scripting language. Javscript is not a programming language it is a scripting language. The reason why a scripting language is not a programming language is because scripting languages are interpreted within another program, for example Javascript is coded into HTML and then the browser interprets the code. Programming languages on the other hand are compiled in a compact form, and does not need to be interpreted by a different application; the output result of compiled code is the standalone. Javascript is compatible with almost every browser available, at least all the most popular ones, such as Chrome and IE.
Another reason why Javascript is often mistaken as a programming language, is because it contains some similar features of other languages, for example, Javscript is seen as dynamically typed, whereas languages such as Java are static. In both languages, you have to declare a variable, however in Java, you will need to declare a variable in a certain way, for example, int x; this would suggest that you are declaring a numerical variable only.
In Javascript when declaring a variable you can use 'var', this will store string, numerical etc.
Javascript also works on all browsers making it very efficient. However, one of the flaws of Javascript is that it has many security issues and turns many developers off from using it. Javascript is very fast at processing information as it is processed via the client side.
When you request a HTML page that contains Javascript, the script is then sent to the browser, however the browser is what interprets what to do with the script. This is because Javascript does not compile into a standalone application by itself and this makes it unable to perform any actions that saves to the disk drive. If you want to save to the disk, you would need to make the browser do it instead.
A huge problem with Javscript is that it has many security flaws, one of which allows hackers to manipulate the CSS to return malicious scripts that will execute on the clients system.
Javascript contains many features of other programming languages, for example C++. They both must close the code with a semicolon and both use if statements that look similar. Javascript is mainly used for interaction and validation. For example form validation, Javascript is able to check to see if a text box within the form contains any letters and output specific messages. As for interaction, Javscript allows coders to create buttons that can perform specific tasks. Javascript allows coders to validate information such as dates, emails (can check to see if '@' has been inputted or not), calculations in forms, can detect what browser is being used and adjust the web page to the browser and customise HTML etc.
A key feature of Javascript is that is very fast when it comes to processing compared to Java. Outputting information is usually instant with Javascript. Javscript can be fast at processing because the tasks are not processed on the websites server; this skips the process of sending and receiving.
JQuery
The purpose of JQuery is it is a library of code (Javascript library) that can be used in the future, thus saving time; often referred to as "write less, do more". JQuery is not a language, however it is written in Javascript. JQuery uses the Javascript framework, the purpose of JQuery is to make Javascript easier to use. JQuery makes a lot of things easier such as, animation and event handling.
Another reason why JQuery saves a lot of time for coders is the fact that it takes a lot of the functionality that you would write in Javscript and pack them into separate functions that can be called easily with a single line of code. JQuery will also simplify complex things from Javascript such as DOM manipulation and AJAX calls.
Conclusion
Javascript is a very useful scripting language to use, as it makes coding a lot easier for web developers. Without Javascript, you as a developer would be unable to add animation effects, such as fading images when the mouse pointer is over it. JQuery makes things even easier for a developer to write code as it is a library of pre written Javascript.
Resources
http://www.yorku.ca/nmw/facs1939f13/javascript_all/js_scriptingVSprogramming.html
http://stackoverflow.com/questions/3387603/what-can-javascript-do
Many people mistake Javscript as a programming language, however it is not. To many, Javascript is also seen as a security flaw as it can be manipulated by hackers, thus making it somewhat unpopular. I will be also explaining how JQuery saves coders a lot of time as it saves them from writing many pages of code.
Javascript
The purpose of Javscript is to extend functionality in websites, and it is client side scripting language. Javscript is not a programming language it is a scripting language. The reason why a scripting language is not a programming language is because scripting languages are interpreted within another program, for example Javascript is coded into HTML and then the browser interprets the code. Programming languages on the other hand are compiled in a compact form, and does not need to be interpreted by a different application; the output result of compiled code is the standalone. Javascript is compatible with almost every browser available, at least all the most popular ones, such as Chrome and IE.
Another reason why Javascript is often mistaken as a programming language, is because it contains some similar features of other languages, for example, Javscript is seen as dynamically typed, whereas languages such as Java are static. In both languages, you have to declare a variable, however in Java, you will need to declare a variable in a certain way, for example, int x; this would suggest that you are declaring a numerical variable only.
In Javascript when declaring a variable you can use 'var', this will store string, numerical etc.
Javascript also works on all browsers making it very efficient. However, one of the flaws of Javascript is that it has many security issues and turns many developers off from using it. Javascript is very fast at processing information as it is processed via the client side.
When you request a HTML page that contains Javascript, the script is then sent to the browser, however the browser is what interprets what to do with the script. This is because Javascript does not compile into a standalone application by itself and this makes it unable to perform any actions that saves to the disk drive. If you want to save to the disk, you would need to make the browser do it instead.
A huge problem with Javscript is that it has many security flaws, one of which allows hackers to manipulate the CSS to return malicious scripts that will execute on the clients system.
Javascript contains many features of other programming languages, for example C++. They both must close the code with a semicolon and both use if statements that look similar. Javascript is mainly used for interaction and validation. For example form validation, Javascript is able to check to see if a text box within the form contains any letters and output specific messages. As for interaction, Javscript allows coders to create buttons that can perform specific tasks. Javascript allows coders to validate information such as dates, emails (can check to see if '@' has been inputted or not), calculations in forms, can detect what browser is being used and adjust the web page to the browser and customise HTML etc.
A key feature of Javascript is that is very fast when it comes to processing compared to Java. Outputting information is usually instant with Javascript. Javscript can be fast at processing because the tasks are not processed on the websites server; this skips the process of sending and receiving.
JQuery
The purpose of JQuery is it is a library of code (Javascript library) that can be used in the future, thus saving time; often referred to as "write less, do more". JQuery is not a language, however it is written in Javascript. JQuery uses the Javascript framework, the purpose of JQuery is to make Javascript easier to use. JQuery makes a lot of things easier such as, animation and event handling.
Another reason why JQuery saves a lot of time for coders is the fact that it takes a lot of the functionality that you would write in Javscript and pack them into separate functions that can be called easily with a single line of code. JQuery will also simplify complex things from Javascript such as DOM manipulation and AJAX calls.
Conclusion
Javascript is a very useful scripting language to use, as it makes coding a lot easier for web developers. Without Javascript, you as a developer would be unable to add animation effects, such as fading images when the mouse pointer is over it. JQuery makes things even easier for a developer to write code as it is a library of pre written Javascript.
Resources
http://www.yorku.ca/nmw/facs1939f13/javascript_all/js_scriptingVSprogramming.html
http://stackoverflow.com/questions/3387603/what-can-javascript-do
Subscribe to:
Posts (Atom)