22 / 10 / 13
OUGD405DESIGN FOR WEB.
WORKSHOP 1.
TODAYS WORKSHOP:
WEB STANDARDS & LIMITATIONS
LAYOUTS
SETUP
BASIC CODING
WEB STANDARDS
Acronyms and abbreviations - When the first letter of each word is used to name the subject for short hand.
For example:
HTML = Hyper text mark up language.
XHTML = extended mark up language.
WYSIWYG = Describes what you see and what you get regarding the Dream weaver.
SEO = Search engine optimisation (To make sure you are very findable on the web).
FTP = How you transfer a web page from computer to the internet.
UI = User interface (the more up to date name for a web designer).
UX = User experience (how the audience reacts to a webpage).
LIMITATIONS.
Designing for the lowest common denominator.
You have to make sure that you are designing for the desire purpose regarding content. function and audience. But you have to ensure that what ever these considerations are you have to ensure that this is possible.
SIZE
The size of the things you add to your page has to be considered. It better to have the smallest file possible to upload. If it is to big it will take longer for the file to upload onto the page. This is a big limitation.
Size in terms of the file sizes are also limited. There are 2 types of file formats:
Lossy = for screen as they need to be compressed at speed so they then load up quickly.
e.g. PNG, GIF, PDF, JPEG.
Lossless = for print as you want the image to be the highest quality.
eg. TIFF, images to be - 72ppi online.
COLOUR
Colour is a big limitation when creating a webpage. There are only 216 colours available for you to use on the internet and these have been deemed 'web safe colours'. To choose and work with one of these colours you have to use the HTML system.
For example:
Red
#FF0000
#FF0
White
#FFFFFFF
#FFF
Black
#0000000
#000
There are 16 million colours that are reproducible in the RGB colour mode. this is because there are many combination and variations of colours available. This is significantly more that what is available as web safe colours.
This wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified the same principles as Photoshop and illustrator, by specifying the percentage of 255 per RGB.
For Example 100% Red would be: rgb(255, 0, 0)
FONTS
Fonts are a big limitation when creating a webpage. There are available web safe fonts, these are fonts that . It is illegal to make most fonts workable on a website. If you make a webpage with a font on one computer it is not likely that when the page is put up on another computer that the font will be present on here. This is because that font is not available on all computers. A web safe font helps the website to become more consistent over the network of computers.
If the font you wish to use is not available to use as a web safe font, then then you have to ensure that there are alternatives available to use. These are called 'Font familIes'. If a certain font is not installed on to a computer, the other alternatives are back ups.
For example:
Ariel, Helvetica, sans-serif
Font squirrel - gives you the option to download and install a webfont kit. This will allow you to re-distrobute a font as the licence has already been agreed. If there is not a webkit available this means that the licence is not approved for re-distrobution and will have legal restraints.
* * * *
AN INTRODUCTION.
Up in the left hand corner are options on how to view your work.
'Design' give you the view of how the page will look to the viewer on the screen.
'Code' gives you the code that goes in to the make up behind the visuals of the page.
<html> - this mean an open html.
</html> - this means a close html.
head = not visible but keeps the functionality of the webpage.
<head> - open head
</head> - close head
<meta - optimise website for find-ability (not needed for webpage to work)
<body> - Open body
</body> - Close body
Anything you want to show up as part of the design has to be between these body tags.
<title> - Open title
</title> - Close title
Title is the name that is visible on the tab.
tab icon is called a favicon. This usually come in the form of a logo.
In Dreamweaver you have to start as you mean to go on.
Start a new project/site
Never call your homepage - homepage. This is because homepage is not a global word, it is just an english word. This means you have to call your homepage something that is universal and is recognisable around the world. This name is known as 'index'.
Save this dreamweaver file, so it is then present in the bottom left hand corner.
To view your webpage on the internet you click on the little world icon and click on the browser type you wish to use.
To enter a name for your tab, type your desired name between the title tags.
No comments:
Post a Comment