This morning we had our first web workshop.
HTML - hyper-text markup language
XHTML - Extended hyper text mark up language
CSS - Cascading Style Sheets
SEO - Search Engine Optimisation
FTP - File Transfer Protocol
URL - Uniform Resource Locator
HTTP - Hyper Text Transfer Protocol
UI - User Interface
UX - User Experience - (you design to consider the user experience)
Limitations are governed by this language
Web safe colours
Only 216 colours which work across all devices. When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 "web safe colours" were identified. These colours were reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code.
Red
#FF0000
#FF0
#FF0
White
#FFFFFF
#FFF
#FFF
Black
#000000
#000
#000
Red 256 x Blue 256 x Green 256 = 16,777,216
The RGB colour mode is capable of reproducing 16 million different colours.
A wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB. For example 100% red would be: rgb(255,0,0)
Web Safe Fonts
For a chosen font to display consistently across different computers a standard font must be used. Further to this a font family is chosen giving several "fallback" options to ensure maximum compatibility between browser and systems. For example a browser that doesn't support the first font it tries the next one listed.
CSS font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.However using font-face breaches licensing and copyright laws related to specific font foundries. Simon told us about free font websites which include free license usage for @font-face kits including font squirrel.
Size, Dimension, Pixel Resolution
When computers were first created the pixels were 640 x 480 which is now tiny on Mac sizes.
800 x 600
1024 x 768 - (design with this size)
1920 x 1080
2880 x 1800 (220dpi)
File Format
PNG - Portable Network Graphic
GIF - Graphic Interchange Format
PDF - Portable Document Format
JPEG - Joint Photographic Experts Group
72ppi - is an outdated pixel ratio, computers could produce at 96ppi. We were told to lower it first as it takes a while to load and will cost bandwidth.
My stages in Dreamweaver:
The RGB colour mode is capable of reproducing 16 million different colours.
A wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB. For example 100% red would be: rgb(255,0,0)
Web Safe Fonts
For a chosen font to display consistently across different computers a standard font must be used. Further to this a font family is chosen giving several "fallback" options to ensure maximum compatibility between browser and systems. For example a browser that doesn't support the first font it tries the next one listed.
CSS font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.However using font-face breaches licensing and copyright laws related to specific font foundries. Simon told us about free font websites which include free license usage for @font-face kits including font squirrel.
Size, Dimension, Pixel Resolution
When computers were first created the pixels were 640 x 480 which is now tiny on Mac sizes.
800 x 600
1024 x 768 - (design with this size)
1920 x 1080
2880 x 1800 (220dpi)
File Format
PNG - Portable Network Graphic
GIF - Graphic Interchange Format
PDF - Portable Document Format
JPEG - Joint Photographic Experts Group
72ppi - is an outdated pixel ratio, computers could produce at 96ppi. We were told to lower it first as it takes a while to load and will cost bandwidth.
My stages in Dreamweaver:
 |
| Running Website |
Overall, I found the workshop really useful and I'm glad I read up on HTML & CSS beforehand as it really helped me.
No comments:
Post a Comment