Studio brief 02.
Workshop 01.
Look at Uni arts Helsinki.
- Web standards and limitations.
- Layout.
- Setup.
- Basic coding.
- What is the purpose?
- Who is the end user?
- What are the audiences needs?
Web standards are governed by:
- Acronyms and abbreviations etc: When the first letter of each word is used to address the subject.
HTML - Hyper text mark up language.
XHTML - Extreme Hyper text mark up language.
WYSIWYG - What you see is what you get. (Adobe dreamweaver)
SEO - Search engine optimization. (How easy it is to find your website)
FTP - How you transfer a website from computer to the internet.
URL - Uniform resource locator: Address that leeds the user to the 'folder' where the site is kept.
XML -
PHP -
UI - User Interface: modern name for web designer. Design web for a range of interface.
UX - User experience (experience that the use gets)
Limitations - Designing for the lowest common denominator.
- Have to make sure its going to work across all devices/interfaces.
- Screen size and file size. Make them as small as possible.
- Colour.
There are only 216 colors available to use on the web, these are know as websafe colours.
Used across the web, using hypertext mark up language.
Red - #ff0 - ff0000.
All colors on a monitor are made between balances of red, green and blue.
16,777,216 reproducible colours in rgb.
256 tones of red, 256 tones of blue, 256 tones of green - can be mixed with any percentage of each colour.
HEX colours - 256.
The combination of red, green and blue values from 0 to 155. (256 unique shades for each value)
Web safe colours.
This wider range of colours can now be reproduced using CSS rather than HTML. These colours are indentified using the same principles as photoshop and illustrator, by specifying the percentage of 255 per RGB.
100% red - rgb (255,0,0)
Can't have gradients or opacity working with HEX colours have to use CSS.
However because CCS colour mode is not classified as web safe the colours may not be constant, for example, a green on one screen, could appear to look slightly different on another.
Fonts.
Can only work with standard or web safe fonts.
For a chosen font to display consistently across different computers a standard font must be used.
- Fonts that are installed on all computers.
Specify a font family which gives several fall back options.
eg. If you wanted Helvetica only - If someone accessed website where they didnt have Helvetica installed, it would revert to times roman.
Use Helvetica, If Helvetica isn't there use Arial, and if this is not availible then use sans serif.
If the font name is more than one word you have to put speech marks around it.
Verdana, Geneva, Sans- serif.
Choose an already made or make your own.
Mono spaced fonts - courier etc.
If you want to break the limitations of web safe fonts, its is capable, you have to install the font to the website, breaks copyright and licensing for fonts. Fonts are generally owned by font foundries.
The CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.
However using the font face breaches licensing and copyright laws related to specific font foundries.
There are many free font websites which include free license usage @font-face kits including font squirrel.
Only about 30 fonts which are web safe.
Size.
spacial resolution pixels per inch.
Pixel resolution is the size of the screen.
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi)
File Fomats (size)
Lossy - for screen, need the images to be compressed to load up as quickly as possible eg. PNG, JPEG, PDF and GIF.
Lossless - for print, want the images to look as high quality as possible eg.tiff.
Images to be - 72ppi online.
An introduction to Dreamweaver.
For the blank page seen above in the design tab of dreamweaver, there is still a small amount of coding even for a blank page. however not all of this coding is necessary and therefore we have the ability to delete some.
The <head> is not visible but helps us with the functionality of our website.
Meta tabs are used for search engine optimisation, this is not needed so we can delete this part of the code.
Having a title to a website increases search engine optimisation.
A favicon is when a logo is used within the tab, as well as just a title for example:
Anything included in design is after <body> and before </body> then close </html>
Website setup
File management is imperative if your files are not stored in the same place it will not work.
Therefore anything to do with the website must be saved in the root folder.
The name of the root folder should implicate the name of the project.
When naming this folder uppercase letters and spaces must never be used.
After creating the root folder, create a sub folder within this and name this as images, to store any images used within the project.
We can see the root and image subfolder in the local files once dreamweaver knows where the root folder is.
We have to tell Dreamweaver where the root folder is.
For this we go to site - new site - name, we are able to use capitals and spaces for this.
It would be assumed to save the first page as the home page.
However we should never call the homepage the homepage.
The internet is a universal thing and therefore the homepage should be called the index.
When saving keep the .html at the end.
it is important when building a website and making constant changes to the design, to always make a change and then check the design.
My 'website' named and with visual text.
No comments:
Post a Comment