What the session will cover;
- Web standards and limitations
- Basic Coding
Acronyms, Abbreviations & stuff...
HTML - Hyper Text Markup Language.
XHTML - Extensible HyperText Markup Language.
CSS - Cascading Style Sheets.
API - Application Programming Interface.
WYSIWYG - What you see is what you get.
MIME - Multipurpose Internet Mail Extensions.
SQL - Structured Query Language.
MYSQL - My-Structured Query Language.
SEO - Search engine optimisation.
FTP - File Transferre Protocol.
URL - Uniform Resource Locator.
XML - Extensible Markup Language.
PHP - PHP: Hypertext Preprocessor
ASP - Active Server Pages.
JSP - Java Server Pages.
CGI - Computer-Generated Imagery.
ASCII - American Standard Code for Information Interchange
DNS - Domain Name SystemHTTP - The Hypertext Transfer Protocol
GIF - Graphics Interchange Format.
GIF - Graphics Interchange Format.
HTTPS - The Hypertext Transfer Protocol Secure.
UI - User interface.
UX - User experience.
WWW - World wide web.
Designing for the lowest common denominator!
- Web safe colours.
- 50 Shades of grey.
- Only 216 colours available.
Web Safe Colours
When colour first arrived....
- Colour code can be shortened when last digits are the same.
The RGB colour mode is capable of reproducing...
16,777,216 individual colours can be created using the RGB colour mode.
The wider range of colours can now be reproduced using CSS rather than HTML...
For example 100% Red would be:
Colours are not consistent across different monitors as they use a different RGB colour space. If you want it to be consistent you need to work with the 216 web safe colours available.
Choose colours in photoshop or illustrator, the colour picker offers you the option to choose 'web safe colours' and gives their codes.
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 browsers and systems.
Common font families;
Serif Fonts - Georgia, Serif.
"Platino Linotype", "Book Antiqua"...
- If the font name is two words they must be contained with speech marks.
- Dreamweaver lists font families.
- Fonts can be installed on websites, but it breaks copyrights laws as if a font is uploaded to a website it can be taken from the website, this is classed as piracy.
The CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser system.
HOwever, using font-face breaches licensing and copyright laws related to the specific font foundry.
There are many free font websites which include free license usage for @font-face kits including - font squirrel.
Allows designers to download and install free webfonts.
Size, Dimension, Pixel resolution
- 640 x 480
- 800 x 600
- 1024 x 768
- 1920 x 1080
- 2880 x 1800 (220ppi)
- 72ppi? (Different computers have varying ppi displays)
Lossy - A file format that can be compressed. This is essential for images that are uploaded to the web.
SCAMP - Rough, hand drawn design.
Site Map - Shows the websites navigation.
File management is very important - All files must be stored in the same folder, named a 'root' folder. (similar to when working in InDesign)
Creating a root folder;
- The root folder will contain ALL the website files.
- When naming the root folder use lower case and don't use spaces.
- Subfolder that will contain images should be named 'images'.
Selecting root folder;
Site > New site
name site (can use spaces, uppercase and numbers)
Select root folder - Local Site Folder.
After you have saved the site name and root folder location you can see the files at the right hand side of the program screen.
- Always leave the file extension (.html)
- Do not save the first page (home page) as 'Home', the term must be global.
- Term used should be 'index'
To preview work click on the globe icon and select a browser.
A good way to work is to save every change you make, save it and check it works in browser.