Introduction
Well as with most Media products you need to take Legal and Ethical issues into consideration. This is because you don't want to get into trouble for not taking these necessary precautions, as you can get prosecuted and / or fined. As well breaking the Law you could possible have some Ethical issues with people trying to use your website, they could offend people, mislead people or people could struggle to use your website if they have a disability.
Copyright
Again as with most Media products you need to make sure that all of the content of your website is your own work. This means that all your text and images are all created and made by you, and if they're not get permission to use these on your website.
The way something is Copyrighted is when you create an original piece of work, whether it be an image, text or video it is automatically Copyrighted to you. Now to show that it has been Copyrighted to you can may use symbols that signify that it has been, the symbols are a Trademark symbol (™) at the bottom of your website (™ 2013, Daniel Holden), Copyright symbol (©) at the bottom of your website (© 2013, Daniel Holden) and by using Watermarks, these are where you place your logo or name over an image at a lower opacity.
Ethical Issues
As mentioned above you don't really want to offend anyone as that will lose your audience. So you need to take into consideration everything that makes every person, that is Race, Gender, Sexuality and Religion. This is where you need to represent everyone equally and fairly. Now if you have images on your site you need to make sure they are decent for your audience as you don't want to have a childrens website with indecent images on as this could offend the audience.
Web Accessibility
When you are creating your website it has to be accessable by everyone, since everyone is different you never know what disabilities they might have.
Visual Disability
The visually disabled can range from being colour blind to full blind, this means that they may struggle to see parts of the screen or not see it at all. So you will need to make sure that you cater for this, if they're colour blind you will need to make sure that the colours are not too similar so they don't combine together and make it more difficult to see. For the fully blind you will have to make sure that the wording that is being used is Standard English and that it's easily read by using a Screen Reader which is where the program reads the words for you.
Hearing Disability
If a user is going to be Deaf then this can become an issue with websites that use sound or videos. So try to limit the use of these so people with hearing disabilities don't have an issue with listening to the,m. This does come into play with Blind people also as they cannot see the video being played so if possible try to get a video with Audio Description.
Physical Disabilities
If a user a physically disabled then this may mean that they struggle to access some websites as it might mean they get discouraged from using computer mouses and keyboards. To encourage this try to keep the website simple so people don't have to move the mouse as much keep the navigation simple and easy to navigate around.
As well as these disabilities there are other aspects that users may find when they're viewing a certain website. For example, your website is in English but the person viewing it cannot speak English instead the speak German. This can be resolved by having the website have multiple choices on languages which can include the other target audience outside of your geo-demographic. Also users may have issues with their internet connection. It all comes down to where the person is located within the world, as a person living quite far away from the hosted website it can cause slow loadings and if providing downloads then it may cause slow downloads.
Thursday, 6 June 2013
Saturday, 20 April 2013
Web Authoring: CSS & W3C!!
CSS
Okay so now you've learn't about HTML you'll now need to learn how to style all of the content you've added. To do this you'll need to know about CSS, which stands for Cascading Style Sheets. Which basically changes the way your website is visually changed.
The language that it used is a style sheet language, which is used to define how a website looks, the formatting and how a mark-up language is laid out.
When formatting it website the aspects that you will be changing are, the typefaces, layout, colour, margins, backgrounds and borders. Which then they can all be used for web pages within your website. That is all displayed by using a mark-up language.
The main way you're going to be displaying CSS is by using the <div> tags. The <div> tag is a Divider tag, which is basically an hypothetical box that contains the content and information of your website. Style sheets are what are used to control each setting for this <div> tag.
Since we're going to be using Dreamweaver CS5 to create out website all of the settings we use are going to automatically converted into CSS so we don't really need to learn about the coding aspect of CSS. But if you want to see it, you can click off of the Design view and go to the Code view, you'll be able to see all of the CSS that Dreamweaver has wrote out for you just by clicking some buttons.
An example of how a website is going to laid out when you're creating one.
W3C
Okay so now you know how to display and how to visually change your website. You now need to know if it'll work properly on the browsers and if the websites are coded up to standards. The website you'll need to know about is W3C which stands for, World Wide Web Consortium. Basically what W3C are, are the main international standards organisation for the WWW.
They are founded by Tim Berners-Lee who is also the inventor of the WWW. The consortium is made up of members which maintain full-time staff for the purpose of working together in the development of standards for the WWW.
To check if your website is coded properly and can be used on browser, click this link and then enter your website URL and click check. Or if you don't have a URL just upload your file to them and then they can check it that way.
Okay so now you've learn't about HTML you'll now need to learn how to style all of the content you've added. To do this you'll need to know about CSS, which stands for Cascading Style Sheets. Which basically changes the way your website is visually changed.
The language that it used is a style sheet language, which is used to define how a website looks, the formatting and how a mark-up language is laid out.
When formatting it website the aspects that you will be changing are, the typefaces, layout, colour, margins, backgrounds and borders. Which then they can all be used for web pages within your website. That is all displayed by using a mark-up language.
The main way you're going to be displaying CSS is by using the <div> tags. The <div> tag is a Divider tag, which is basically an hypothetical box that contains the content and information of your website. Style sheets are what are used to control each setting for this <div> tag.
Since we're going to be using Dreamweaver CS5 to create out website all of the settings we use are going to automatically converted into CSS so we don't really need to learn about the coding aspect of CSS. But if you want to see it, you can click off of the Design view and go to the Code view, you'll be able to see all of the CSS that Dreamweaver has wrote out for you just by clicking some buttons.
An example of how a website is going to laid out when you're creating one.
<body><div class="container"><div class="header">Header</div><div class="nav"><ul><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Photos</a></li><li><a href="#">Contact</a></li><li><a href="#">Wibble</a></li></ul></div><div class="content"><div class="col1">col1</div><div class="col2">col2</div></div><div class="footer">Footer</div></div></body></html>
W3C
Okay so now you know how to display and how to visually change your website. You now need to know if it'll work properly on the browsers and if the websites are coded up to standards. The website you'll need to know about is W3C which stands for, World Wide Web Consortium. Basically what W3C are, are the main international standards organisation for the WWW.
They are founded by Tim Berners-Lee who is also the inventor of the WWW. The consortium is made up of members which maintain full-time staff for the purpose of working together in the development of standards for the WWW.
To check if your website is coded properly and can be used on browser, click this link and then enter your website URL and click check. Or if you don't have a URL just upload your file to them and then they can check it that way.
Website Authoring: HTML, XHTML & Screen Readers!!
HTML
After you have finished writing your XHTML code you'll need to make sure that it is compatible with all browsers. To do this you can send it to a Screen Reader which checks over all of the code and makes sure that it works with all the browsers and then you will get a certificate stating that it is compatible and gone the checking process.
Okay so what actually is HTML? HTML stands for HyperText Mark-up Language, which is... You guessed it, a mark-up language.
The way that HTML works is by using mark-up tags which are defined by your greater than and less than brackets (< >) which have some sort of text inside it that define how a website should be displayed. When there are two types of tags, an open (<b>) and a closed tag (</b>) this is defined by using a forward slash to close it. I'm first going to list a few tags for you and then tell you what each means.
- <html> - This tag starts off a HTML page, the content between the <html> and </html> (remember opened and closed) describes how a website should look.
- <body> - This is the start of to the body tag, the content between these tags are the parts that are displayed in a browser, again you need to close this at the end with a </body> tag.
- <p> - This tag is called a paragraph tag, this defines the start of a paragraph in a block of text and the end of the paragraph is defined by closing the tag using the </p> tag.
- <b> - An example I used above to show opened and closed tags, this tag means Bold, the text between the opened and closed tags will be Bolded like this.
When you're writing HTML it doesn't really matter what case you write it in, so it could be Uppercase or Lowercase or even a mix of the two.
XHTML
Okay so HTML is not the only way to code websites, you can use a combination of XML and HTML. This is called XHTML, which stands for Extensible HyperText Mark-up Language. XHTML is a more stricter and cleaner format of HTML and is supported by all new browsers.
It basically uses the same principles of HTML but creates more effective website. When using XML it's used to describe a website, but when using HTML it's used to display a website. XHTML is used to let users create their own custom tags which will make it easier to separate it from other default tags.
All XHTML elements must be properly nested, which means that if you're opening more than one tag, you have to close them in order, so the first you opened has to be closed first and then the second tag.
Example:
<phonebook>
<number>
<name>
</name>
</number>
</phonebook>
All of the elements that you write in XHTML need to be closed, again in order. Also the elements that you do write, need to be in lowercase to be able to be read by the browser.After you have finished writing your XHTML code you'll need to make sure that it is compatible with all browsers. To do this you can send it to a Screen Reader which checks over all of the code and makes sure that it works with all the browsers and then you will get a certificate stating that it is compatible and gone the checking process.
Wednesday, 10 April 2013
Web Design: Layout and Interface Design
Identification of Users
Before you even think about starting to create your website you need to discover what type of audience and users you're wanting to target. So to do this you need an idea already in mind on what your website will be. So then you can figure out who will want to view it, this is a good idea to do first as then you can change your ideas customised to the audiences' needs.
Usability
The usability of your website is key, the more simple the website is to navigate around the more users will use it. The best way to do this is to keep it simple and make a clear path to where the users can get to.
Language and Terminology
Now this may come as a shock to you, but not everyone speaks or reads the same as you. So you will need to make sure that the language that you use is simple and easily understood by everyone, so don't use really big fancy words unless you really need to, but that comes under terminology. If you need to use a term that is associated with what the content is then it will be fine, as long as you include some sort of explanation into what that word means so the user doesn't get too confused about it.
Design
Now when you're creating your website you will need to take the design of it into consideration, this includes colour, images, type and consistency. You will need to use the best colour for your target audience and what suits the content of your website, so for example, if its a sporting website, the best colour would probably be a green since green is an active colour that represents sports. For type you will need to make sure that the text that is used is simple to read and that the kerning (the spaces between each letter) and leading (the spaces between each line of text) are at the correct distance so the user doesn't get lost or read a line more than once. In terms of images, it's best to use your own so you avoid any copyright claims on images that are used since this could becomes quite an issue for you. If you don't own the image, make sure you get the owners permission before using it. The images that you will use will most likely be again associated with what type of website you're running. Now to keep your users familiar with your website, it's best to keep all your pages the same, rather than creating random pages with different colours and type on it.
Navigation
Okay so navigation is a big part of your website, if you didn't have it, the user wouldn't be able to interact with your website. Now you will need to know about the primary, secondary and tertiary navigation. Now Primary navigation is the main navigation that you see on every single page you go to, so that means the Secondary navigation is another navigation that you can only see by clicking a link on the Primary navigation, and finally Tertiary navigation, this is where you can see it by clicking on a link from the Secondary navigation and this is the only way you can get to it by following this sequence. When positioning your navigation, the best place to put it is at the top left, this is because when a website loads it always loads at the top of the website, so that will be the first thing the user sees, also scientists have done experiments to find out where the most viewed place is when viewing content on a website, from their research they have found out that the left side if the most viewed side, which is again making the navigation placed at the left the most important place.
Use of Colour
Now I've already talked about colour before when designing your website. This is so important I'm going to mention it again. When creating your website you need to use a colour that is most popular among your target audience, using a different example from before, if you were to create a website for a Make Up Artist you wouldn't use blues and greens for the website since they aren't essentially feminine, so instead you will most likely use pinks and purples, since they are more associated with females and attract more female members.
Taking in consideration your websites main colours, lets stick to the pink colour, since this is a vibrant colour you will want to make your text stand out the most, so maybe using black text on a pink background wouldn't be the best idea, since it's quite difficult to read it. So think about a colour that is quite far away from pink, I would say that using white text on a pink background would be the best option, due to you being able to read this text a lot better than the black text on a pink background.
Lead Lines
What are lead lines? They are mostly involved in images, but they also can be included if you're using images within your website. Lead lines are the imaginary lines inside an image that lead a viewer to the part of the image the photographer wants them to see. In terms of web design you could use an image that has these hypothetical lines to attract the viewer to notice your navigation more or to see your testimonials (if included on your website) more.
Depth of Field / Focal Point
Now again these are more common in Photography, but can be applied within web design. Depth of Field is basically the part of an image that creates depth between the foreground and the background, in Photography it's normally displayed by an object in the foreground that is sharp and then the background behind it completely blurred out, which is making the focal point of the image the foreground. Oh, what's focal point? Well the focal point is the part of the image that is the most in focus, this what the photographer wants the viewer to see first.
Rule of Thirds
Again Rule of Thirds is more common in Photography, but it can be applied in web design. Rule of Thirds is an hypothetical grid that divides the image/website into a 3 x 3 grid. Now where the grid crosses, these are the focal points of the image/website, this is where most of the content will be best placed. Now again people have done research with the Rule of Thirds on which cross is the most commonly looked at, the image that is displayed below is what the percentage of the image they looked at the most.
Now as you can see the top left is again the most viewed part, so if you create a hypothetical Rule of Thirds grid, you will see where to include the most important content of your website.
Before you even think about starting to create your website you need to discover what type of audience and users you're wanting to target. So to do this you need an idea already in mind on what your website will be. So then you can figure out who will want to view it, this is a good idea to do first as then you can change your ideas customised to the audiences' needs.
Usability
The usability of your website is key, the more simple the website is to navigate around the more users will use it. The best way to do this is to keep it simple and make a clear path to where the users can get to.
Language and Terminology
Now this may come as a shock to you, but not everyone speaks or reads the same as you. So you will need to make sure that the language that you use is simple and easily understood by everyone, so don't use really big fancy words unless you really need to, but that comes under terminology. If you need to use a term that is associated with what the content is then it will be fine, as long as you include some sort of explanation into what that word means so the user doesn't get too confused about it.
Design
Now when you're creating your website you will need to take the design of it into consideration, this includes colour, images, type and consistency. You will need to use the best colour for your target audience and what suits the content of your website, so for example, if its a sporting website, the best colour would probably be a green since green is an active colour that represents sports. For type you will need to make sure that the text that is used is simple to read and that the kerning (the spaces between each letter) and leading (the spaces between each line of text) are at the correct distance so the user doesn't get lost or read a line more than once. In terms of images, it's best to use your own so you avoid any copyright claims on images that are used since this could becomes quite an issue for you. If you don't own the image, make sure you get the owners permission before using it. The images that you will use will most likely be again associated with what type of website you're running. Now to keep your users familiar with your website, it's best to keep all your pages the same, rather than creating random pages with different colours and type on it.
Navigation
Okay so navigation is a big part of your website, if you didn't have it, the user wouldn't be able to interact with your website. Now you will need to know about the primary, secondary and tertiary navigation. Now Primary navigation is the main navigation that you see on every single page you go to, so that means the Secondary navigation is another navigation that you can only see by clicking a link on the Primary navigation, and finally Tertiary navigation, this is where you can see it by clicking on a link from the Secondary navigation and this is the only way you can get to it by following this sequence. When positioning your navigation, the best place to put it is at the top left, this is because when a website loads it always loads at the top of the website, so that will be the first thing the user sees, also scientists have done experiments to find out where the most viewed place is when viewing content on a website, from their research they have found out that the left side if the most viewed side, which is again making the navigation placed at the left the most important place.
Use of Colour
Now I've already talked about colour before when designing your website. This is so important I'm going to mention it again. When creating your website you need to use a colour that is most popular among your target audience, using a different example from before, if you were to create a website for a Make Up Artist you wouldn't use blues and greens for the website since they aren't essentially feminine, so instead you will most likely use pinks and purples, since they are more associated with females and attract more female members.
Taking in consideration your websites main colours, lets stick to the pink colour, since this is a vibrant colour you will want to make your text stand out the most, so maybe using black text on a pink background wouldn't be the best idea, since it's quite difficult to read it. So think about a colour that is quite far away from pink, I would say that using white text on a pink background would be the best option, due to you being able to read this text a lot better than the black text on a pink background.
Lead Lines
What are lead lines? They are mostly involved in images, but they also can be included if you're using images within your website. Lead lines are the imaginary lines inside an image that lead a viewer to the part of the image the photographer wants them to see. In terms of web design you could use an image that has these hypothetical lines to attract the viewer to notice your navigation more or to see your testimonials (if included on your website) more.
Depth of Field / Focal Point
Now again these are more common in Photography, but can be applied within web design. Depth of Field is basically the part of an image that creates depth between the foreground and the background, in Photography it's normally displayed by an object in the foreground that is sharp and then the background behind it completely blurred out, which is making the focal point of the image the foreground. Oh, what's focal point? Well the focal point is the part of the image that is the most in focus, this what the photographer wants the viewer to see first.
Rule of Thirds
Again Rule of Thirds is more common in Photography, but it can be applied in web design. Rule of Thirds is an hypothetical grid that divides the image/website into a 3 x 3 grid. Now where the grid crosses, these are the focal points of the image/website, this is where most of the content will be best placed. Now again people have done research with the Rule of Thirds on which cross is the most commonly looked at, the image that is displayed below is what the percentage of the image they looked at the most.
Now as you can see the top left is again the most viewed part, so if you create a hypothetical Rule of Thirds grid, you will see where to include the most important content of your website.
Web Authoring: Terminology
Limitations
As with all websites there are limitations to what you can do to it. Probably the most occurring problem would be out of date plug-ins or plug-ins that the user doesn't have. Most websites will have either Flash or Java embedded with in their website so if the user doesn't have that already installed they wouldn't be able to view the website, but more likely than not, the user will have it. Also you will have to take into consideration the browsers that a user will be using, as not all browsers view websites the same. Since Internet Explorer has some problems viewing some CSS code that Google Chrome or Firefox can view, but there will most likely be a way to combat that issue, it's just a matter of discovering how.
As with all websites there are limitations to what you can do to it. Probably the most occurring problem would be out of date plug-ins or plug-ins that the user doesn't have. Most websites will have either Flash or Java embedded with in their website so if the user doesn't have that already installed they wouldn't be able to view the website, but more likely than not, the user will have it. Also you will have to take into consideration the browsers that a user will be using, as not all browsers view websites the same. Since Internet Explorer has some problems viewing some CSS code that Google Chrome or Firefox can view, but there will most likely be a way to combat that issue, it's just a matter of discovering how.
Web Authoring: Terminology
Assets
When you're creating a website, you sort of need an idea already set in place for what you're wanting to do. You can't create a website without any ideas. So the best thing is to do is figure what website it is, for example, games, a portfolio or a company website. As well as an idea for what website you're wanting to create you need to discover your audience, who will be attracted to your website and who will want to view it. To do this you will obviously need to take into consideration the actual type of website, your colour scheme, your images, the content you will be displaying, if you're wanting to include any videos or sound, whether you want to earn money adverts, forums or chat rooms so your members can interact with each other, if you're selling things you can include a checkout or wanting to share files the list is endless.
Interactivity and Control
After you have your ideas for the website and what sort of audience you're wanting. You need to think about what people are going to interact with. The most noticeable one would be the navigation, which would be placed at the top left hand side, the navigation is where a user can click on links to navigate around your website and get to other pages. It doesn't have to be just placed at the top, it can be any where you want it to be, but the top left is the best place, as the websites always load the top first, and a person reads from left to write so their eyes will most like be at that side already. This is not the only interaction a user can have, you can include, videos that people can watch, sound they can listen to, images they can view, forums, chat rooms, checkouts etc.
When you're creating a website, you sort of need an idea already set in place for what you're wanting to do. You can't create a website without any ideas. So the best thing is to do is figure what website it is, for example, games, a portfolio or a company website. As well as an idea for what website you're wanting to create you need to discover your audience, who will be attracted to your website and who will want to view it. To do this you will obviously need to take into consideration the actual type of website, your colour scheme, your images, the content you will be displaying, if you're wanting to include any videos or sound, whether you want to earn money adverts, forums or chat rooms so your members can interact with each other, if you're selling things you can include a checkout or wanting to share files the list is endless.
Interactivity and Control
After you have your ideas for the website and what sort of audience you're wanting. You need to think about what people are going to interact with. The most noticeable one would be the navigation, which would be placed at the top left hand side, the navigation is where a user can click on links to navigate around your website and get to other pages. It doesn't have to be just placed at the top, it can be any where you want it to be, but the top left is the best place, as the websites always load the top first, and a person reads from left to write so their eyes will most like be at that side already. This is not the only interaction a user can have, you can include, videos that people can watch, sound they can listen to, images they can view, forums, chat rooms, checkouts etc.
Web Authoring: Terminology
Applications
Okay so what are websites used for? For many different reasons that is. Probably the main one it is used for though is for entertainment purposes, this includes watching funny cat videos, playing video games, watching films, watching television shows, talk to other people and probably a lot more.
As well as entertainment purposes there are ways to use it for marketing purposes, so if you do end up making a website for your company, you will most likely need to do this. People do this so they can gain exposure and advertise their website. Another way is so the user can buy stock from other companies, like Amazon.
Another way is a way you're using it now, for educational purposes. Since the internet is an extremely large place, there will be a lot of clever people on there. So you could practically find any piece of information you're looking for, just by using a search engine. So you could use it to find out your answers to your school work, or find something to help you actually create your website.
Okay so what are websites used for? For many different reasons that is. Probably the main one it is used for though is for entertainment purposes, this includes watching funny cat videos, playing video games, watching films, watching television shows, talk to other people and probably a lot more.
As well as entertainment purposes there are ways to use it for marketing purposes, so if you do end up making a website for your company, you will most likely need to do this. People do this so they can gain exposure and advertise their website. Another way is so the user can buy stock from other companies, like Amazon.
Another way is a way you're using it now, for educational purposes. Since the internet is an extremely large place, there will be a lot of clever people on there. So you could practically find any piece of information you're looking for, just by using a search engine. So you could use it to find out your answers to your school work, or find something to help you actually create your website.
Web Authoring: Terminology
Authoring
So you're wanting to learning about website authoring? The first thing you need to learn about is the definitions and terminology for the things you're wanting to do. So what actually is authoring?
Authoring is to use a desktop software product to create a website. This is where the user lays out their website using the program, and then it converts the layout to HTML, usually letting the user switch between viewing HTML and the layout.
Alright so now you know what authoring is, what programs can you use? There are quite a few programs that you can use, some are free, some you have to pay for, some you have to download and there are even some you can just use in your browser. Typically the one you're most likely to use and what I'm going to be using is Adobe Dreamweaver CS5, but this is not the only one. Some others are, CoffeeCup Visual Site Designer, Serif WebPlus and HTML-Kit tools.
So using the programs will be simple, you mostly just have to create the images using an image editing program (usually Photoshop but not limiting you to that) and then you can go into your chosen authoring program and put the images in and create the settings you want to create and the program will create the code for you.
So you're wanting to learning about website authoring? The first thing you need to learn about is the definitions and terminology for the things you're wanting to do. So what actually is authoring?
Authoring is to use a desktop software product to create a website. This is where the user lays out their website using the program, and then it converts the layout to HTML, usually letting the user switch between viewing HTML and the layout.
Alright so now you know what authoring is, what programs can you use? There are quite a few programs that you can use, some are free, some you have to pay for, some you have to download and there are even some you can just use in your browser. Typically the one you're most likely to use and what I'm going to be using is Adobe Dreamweaver CS5, but this is not the only one. Some others are, CoffeeCup Visual Site Designer, Serif WebPlus and HTML-Kit tools.
So using the programs will be simple, you mostly just have to create the images using an image editing program (usually Photoshop but not limiting you to that) and then you can go into your chosen authoring program and put the images in and create the settings you want to create and the program will create the code for you.
Tuesday, 9 April 2013
Web Design Introduction
In this article we are going to be looking at the different aspects to include and take into consideration when creating a website. The things we are going to discuss are going to split into two different categories, the first one being, Layout and Interface Design and the second one being Visual Treatment.
Subscribe to:
Posts (Atom)