Web Design!

Legal and ethical issues!

Introduction
A lot of media products have some sort of legal inclusion behind them, everything is taken into consideration because  companies don’t want to get into trouble not following this precautions, as if a law within the legal and ethical sector is broken, the person/company responsible can get fined and/ or prosecuted. Most of these issues break the law if they are not followed.

 In terms of web design the laws can be viable to ethical issues, copyright, web accessibility, disabilities etc.   The laws are there to prevent any discrimination or misleading content that could offend an audience.


Copyright
With media products a person/company need to make sure that all content is theirs, or in this case everything on the website must be their work i.e. fonts, images and templates. These all have to be yours, unless the website is sponsored by another company authorising their images, adverts and fonts to be used e.g. Microsoft advertising brands of computers other than their own. This shows that the companies are in corporation, authorising any restriction on copyrighted content.

Copyright applies when something originally created applies only to the creator unless he/she is debited payments for the use of their content, in terms of web design this can be;

·         Text

·         Video

·         Image

·         Sound

·         Specific design features

The way it is distinguished or copyrighted is by using symbols to represent that the product or design that is viable only to the creator. These symbols are;

·         Trademark symbol (™)

This can be found at the bottom of a website stating the name of the creator i.e. ™ Dzintars Lubiks. Or even on the images, or most likely the logo of a company.

Copyright Symbol (© )

This symbol can also appear anywhere on the website it would pop up as ‘© Anime Flash’ as an example. There’s also water marks, that’s where a logo or a name is place over an image at a lower opacity to prevent people passing it off as their own.
Ethical issues
As I mentioned above, when you make a website, you don’t really want to offend anyone, if you would, your audience would be lost. So basically everything needs to be taken into consideration, everything that makes every person who they are i.e. race, gender, sexuality and religion. You have to respect everyone and treat them equally and fairy. Also if there are images on your website, you will have to make sure they are decent and appropriate for the audience, as you don’t want children to see indecent images as this can offend the audience.

Web Accessibility
When a website is being created, you have to make sure it is accessible by  everyone, since everyone is different, your audience may have disabilities that would prevent them from using your website, these are;

Visual Disability
Visual disabilities can vary from being colour blind, close range sight or even full blind, this would mean that they would struggle to see parts of a screen or not see it at all, so as a web developer you need to make sure that this is catered for. If they are colour blind, you will need to make sure that the colours are not too similar so that they would combine together or make it difficult to see or you could even create a special redirected page, that has different colours for those who are colour blind.

If the person is fully blind, as the developer you would have to make sure that you have a screen reader, projecting full Standard English wording, which would be acceptable for the screen reading program.

Hearing Disability
If a user that is a part of the audience is deaf, it could become an issue to your website if you are intending to use sound or videos. This can be solved by limiting mandatory use of these features to work around the website, so that people with hearing disabilities don’t have an issue with listening to them. This also come into consideration with blind people as they cannot see video content being played, a solution for this might be including an Audio Description with the video.

Physical Disabilities
If a user has a physical disability then this might mean they would struggle to gain access to some websites, as it might interpret that they are  discouraged using  a mouse or a keyboard, this can be solved  by making the website simple enough for people  to use without having to move the mouse , by keeping the navigation simple and tidy, not overloading the three navigation specifications.

As well as being disabilities, there are different aspects that users may find when they’re viewing a certain website i.e. if a website is in the English language but the person trying to access it might not speak the language. So to solve this you might include multiple choice of languages to view the website in or even use google translate option encoded within the website. Another issue would be the internet connection of the audience, as it would all come down to where a person is located because if a person is living far away from the hosted site, it would cause slow loadings if using large images within the website or even when providing download links.

Unit 60 web design research

In this report I will be talking about different aspects of web design in terms of definitions, products and uses.

Authoring
Authoring is construct an electronic document, such as a web site in relation to this unit, this comes into play for everything for the product i.e. Authoring tools give designer a chance to invent and produce an electronic product, that would be published to the audience.  These authoring tools are available in various software packages i.e. Adobe and it’s web-designing composition Dreamweaver or the alternative Microsoft Front Page, there is a lot more but these two are the most common, as they are big companies, creating brand loyalty for their other software being Photoshop, Flash, Microsoft Office etc.

Authoring products, or authoring formats also vary quite a lot, but interactive media authoring formats go along the lines of CD-R OM, Website, Games, PowerPoint Presentation, Interactive TV and hand held devices. These authoring products are there for different purposes i.e. entertainment, research, marketing and to develop skills, meaning for the audience to enjoy the product and gain amusement from it, to be able to research into different areas, being able to advertise and to be able to gain skills, a good example of this is the Nintendo DS and the Brain Training games.

Application uses
Websites are created for various reasons. Following from the previous paragraph, websites are big authoring products, and they are used for almost all of the purposes listed i.e.

Entertainment:
Websites are used to entertain the audience, and most websites do that, whether it would  be a great piece of design which is aesthetically pleasing and good to look at or if it’s a really interactive website, that gives the user the ability to play with certain features i.e. if it’s something like clicking a button, opening a video or playing a flash game. This is one of the most important uses for a website as a website needs to give the audience amusement and interactivity.

Marketing:
A website serves a purpose to market or promote something as well, a good example of this is adverts, flash adverts, still images, logo’s, anything  that represents a brand, company or business, products and much more. This is where a website becomes a great tool to advertise something up and coming or already existing either on the site itself or links diverting away from it.

Research:
Research is a big part of a website, with sites like Google and Bing, finding out about anything is made possible to the audience, whether it’s  websites, education or products, websites can serve a great purpose when it comes to finding out about things.



Assets
To make a website interactive, and more interesting it can include various assets them being:

Text:
Text is needed for pretty much every website , it describes the content, gives information and adds to the optical balance of the interactive product, if not enough text is not included the website  won’t have the information required, on the other hand if there is too much text the website may become unattractive to a more informal audience.

Graphics:
This is everything that represents illustration and design i.e. images, which are needed to add visual effect to a website, the use of diagrams, navigation bars and even colour, all are classed as graphical tools to make a website look more aesthetically pleasing. There are different classifications of graphics, but most websites use GIF files so that they can transfer enough information and content with less loading time. If graphics are not included in a website, it may appear bland/boring to an audience, and also not very aesthetically pleasing.

Sound:
This can be anything from music on a website to the clicking sound throughout the navigation, this may not be the most important part of authoring, but it can be used effectively to make a website more interesting or informative in terms of alerts, as a good example of this is Facebook, the notification and message sounds have become iconic on the internet, this shows how much this might matter to an interactive website as Facebook is the biggest website right now.

Video:
This can make a website interactive  and interesting depending on the content, a good example of this is Youtube, one of the biggest websites on the internet. A video can be used to represent anything i.e. to show an explanation, different diagrams etc. This can make a website more marketable and exciting.

Animation:
This one is for assets like Flash banners, GIFS etc. These can be used to make a website more attractive to an audience and also to interact in another way compared to a video, it would save on loading time and more versatile in terms of the design aspects.

Interactivity and control
Interactivity is a key aspect when it comes to web-design, there are many features that could be added to a website to allow users to operate it effectively:

Buttons:
Buttons are vital, as they are used for the navigation bar itself, clicking one of the buttons will lead the user to another page and make something more interactive i.e. clicking play on a video embed on a website. If buttons aren’t included this would pose a problem in terms of accessibility and usability of the website, it’s a vital part when it comes to authoring.

Hotspots:
These are invisible hyperlinks that may be tagged to images or other graphics, the area in which clicked on would transfer you to another page, when hovered over a hotspot, a little hand would appear instead of the normal arrow cursor.

Limitations
Websites can incur limitations as well as various opportunities i.e. user limitations, hardware limitations, and network limitations.

User limtiations
This has everything to do with the user of the website i.e. the audience, some of the limitations being lack of computer knowledge or the internet culture, disabilities etc.


Hardware limitations
This is based on what computer the audience is using, either it’s too old to run the latest flash or HTML or it’s not powerful enough to support the features of a website i.e. using a Win98 computer with 512MB of RAM may be problematic if you the content of the website incurs heavy usage of data.

Network Limitations
This is can be a reason for the website created to run slow on different network i.e. not enough speed to run the flash graphics included or videos/sound for interactive purposes as some people still use dial-up connections which aren't as fast to handle heavy usage.

How to make a portfolio.

How to make a portfolio


Page templates
"What is a page template?" You may ask, well a page template is a design that will be shown throughout your portfolio, therefore showing off your graphic design skills just by the potential employer or university, looking at your page design, it shows consistency by creating a house style and also the way everything is laid out i.e. images and text allignment.

You can create page templates in many steps, you start off by planning them i.e. sketch the page first. You can do this by drawing a plan of your page, to refer back to, you may include stuff like; Images, text and your work. This can be drawn using simple boxes and taglines.


Something like this will be perfect for a plan, as well as giving you an insight on what to follow, it will also show development when actually making the template. You may encounter changes along the way, but that just shows development.

When creating a page template you have
















Welcome to the Blog of knowledge!
In this I will be answering frequently asked questions like, What are graphics? What are graphics used for? and How to create graphic material for Interactive media? I will be answering these questions and explaining the different types of graphic file extensions and much more!

What is your picture element?

Picture Element or Pixels as we commonly refer to, are the small dots that make up the imagery on our computer screens, tablets and phones. Pixel size may vary to the size of the screen; usually you can’t see individual pixels as they are really small and divide into a pool of millions of pixels.  This brings us onto resolution, something like 640x480 is the most common, and this applies to the size of your screen and images 640x480 means a matrix of 640 by 480 pixels or 307,200 tiny little dots.

Each pixel contains a colour, due to the small size they blend together with other pixels to create different shades and blends of colours.  The number of colours each pixel can be  is determined by the number of bits used to represent it i.e. 8-bit colour is 2 to the 8th of colours to be displayed. At 8-bit you can see graininess, a good example of this would be the old Super Mario games on the Nintendo.





However there are other color depths i.e. 16, 24 and 32. These display the images in a smooth manner and the graininess is not visible to the human eye.

Blasting off into colour space!
There a different colour encodings used fir either print, computer display or television.

The different types are:

RGBThis stands for Red, Blue and Green and it is used for computer displays and is not ideal for printing as ti doesn't contain as many colours.

CMYK
This stands for Cyan, Magenta, Yellow and Black. This is the option specifically for printing, that's why the coloured ink in printers today are actually Cyan, Magenta, Yellow and black.


YUVThis encoding system is used for alalog televison i.e. NTSC and PAl. Y in the name represents luminance or in laymans terms brightness, while U and V are chrominance or colour components



Knee deep in bits

Bit depth decribes hte number of bits used to store a value, and the number of values grows with the number of bits.


This is an image representing pixels, millions of these are all over our screens.

Monochrome
This literally means once colour, therefore just like the name says, this can be an image that only has one colour but it may contain many shades. Monochrome graphics were used in the old computer screens before the ancient CRT screen, they used a shades of green for text and other icons.

Highcolour
This colour system supports three 16-bit RGB colours but there can be 4 bits with possible 16 levels fir each of the Red, Green and Blue components.



Master of Raster

Raster graphics are pictures that store a lot more information as they are raw, they are something you find ona digital camera or on most web-pages, they usually require more space to store the required information.

640 x 480 needs 307,200 pixels if information whilst a Raster images of 3072 x 2048 require a staggering 6,291,456 pixels of information.  You can pretty much imagine how much space an image of that size would take up, to avoid the large use of data, we have file extensions to compress the large size to make it easier for us to use images for websites, graphics design and more. Although they can be compressed into manageable data, the images don't lose their quality, on the other hand when they are enlarged  they become pixalated or blocky.


Quality loss? 

Lossy is a type of file compression which loses data and quality form the original version. Lossy compression is known for image files such as JPEGs, the lossyness of an image can show various defects to an image i.e. pixelated areas, blockiness and jagged edges. A good example of this is JPEGs, compared to the original image the disk space it takes up is massively lower, but it loses some of it's quality in doing so, as it removes data.

Lossless imagery on the other hand, reduces the files size with no loss of quality at all, JPEG 2000 is usually used to create the lossless compression. Lossless compression rewrites data of the original file without changing it, resulting in no loss of quality, meaning no matter how much you resize it, it will stay the same.

The file extensions for raster images vary, here are some of the most common ones;

BMP
This is an uncompressed raster image, short for Bitmap, is commonly used in a raster graphic format for saving image files. A BMP format image stores data for each pixel colour in it, leaving it uncompressed allowing high-quality graphics and large file sizes.  

PNG
Portable Network Graphics, otherwise know as PNG is a compressed Raster format, it can be found all around the web and it is also a popular choice for application graphics. Here's a fund fact, a PNG image can hold over 16 Million Colours, this is the biggest difference between PNG and it's compression cousin's, JPEG and GIF. PNG format also supports 24-bit colour, meaning although a PNG is compressed the quality is unrivalled.


GIF
This one's interesting, the full name being Graphics Interchange Format, you can pretty much guess what it does, if not let me explain! GIF is a compressed image format that is based on indexed colours, which is 256 maximum colours of the pallet. This means the size can be reduced great;y, meaning they can be easily transferred over the internet, one of the reasons why you often see GIF's on the web. As GIF's can be used for small icons and mainly animated images, which dominate today's social networking blogs. But compared to other format's, GIF's don't have the colour range for High-quality photos.


TIFF
Tiff stands for Tagged Image File Format, this format is designed to function on multiple computer systems and platforms, it has a ranged colour depth from 1-Bit to 24-Bit ever since being introduced in 1980. There are 50 variations of the TIFF format, although this was the most universal graphic format back in the day, right now JPEG dominated due to it's internet comparability.


JPEG 
JPEG stands for Joint Photographic Experts Group, yes a very long name, but there is a reason behind it; it is the name of the committee that developed the format. JPEG is a compressed image file format that is not limited to a certain amount of colour, meaning this is the best compression format ,it is widely used across the web, any large image you may see on the internet, is most likely a JPEG.

Although can store a lot of High-resolution data, it is a lossy format meaning quality is lost when the image is compressed, once compressed it can become blocky with loss of detail.

Vector's blast off!
Vector graphics are a lot different compared to pixel orientated Raster compression formats like JPEGs, GIF'S and BMP, instead Vector graphics are made up with paths, defined by the start and end points along with other points, angles and curves along the way. A patth can be anything from a line to square, triangle etc. The paths can be used to create simple images to complex diagrams.

Since Vector-based graphics are not made up of pixels, they are lossless as they lose no quality at all when enlarged unlike Raster images, this makes Vector images more versitile for large printin, flash animations and Adobe illustrator works.

As well as Raster graphics, Vector graphics also have various extensions, these are:

EPS

Developed by Adobe and known as Encapulsated PostScript File, is a file that contains 2D vector graphics, bitmap images and text. EPS is supported by various drawing programs and Vector editing software.

AIThis is a file extension of a Vector editing program known as Adobe Illustrator, Illustrator images are saved in a Vector format, they can be blown up without the loss of quality.


SVGKnown as Scalable Vector Graphics file, SVG is developed by Adobe and it's used for 2D vector graphics, created by W3C (World Wide Web Censortium) developed as the format for wen images and text.