What the session will cover;
- Web standards and limitations
- Layout
- Setup
- Basic Coding
Web standards
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.
AJAX - Asynchronous Javascript and XML.
ASCII - American Standard Code for Information Interchange
DNS - Domain Name System
GIF - Graphics Interchange Format.
HTTP - The Hypertext Transfer ProtocolGIF - Graphics Interchange Format.
HTTPS - The Hypertext Transfer Protocol Secure.
UI - User interface.
UX - User experience.
WWW - World wide web.
Limitations
Designing for the lowest common denominator!
Colour;
- 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:
rgb(255,0,0)
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.
CSS font-face
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.
Font Squirrel;
Allows designers to download and install free webfonts.
Size, Dimension, Pixel resolution
Sizes;
- 640 x 480
- 800 x 600
- 1024 x 768
- 1920 x 1080
- 2880 x 1800 (220ppi)
File Formats;
- PNG
- GIF
- JPEG
- 72ppi? (Different computers have varying ppi displays)
- RGB
- Lossy
- Compressed
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.
DREAMWEAVER
 | ||
The opening screen.
 SIMPLE CODING;
<html> - Open html - lets the computer know what language your working in.
</html> - Close html, goes at end of coding.
<head> - Not visible on website, but helps functionality.
</head> - Close head.
<meta> - Used for search engine optimisation. Not needed for a website to work & don't need a close tag.
<title> - Not shown in design, shown at top of browser window.
Favicon - Small icon shown on browser tab.
|
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.
Saving work;
- 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'
Previewing work;
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.
After we finished the session we were set a small task to create three scamp style illustrations of how my website could look.
I started the task by creating some quick thumbnail sketches.
I started the task by creating some quick thumbnail sketches.
Next, I reviewed my initial ideas and created my three scamp drawings.
No comments:
Post a Comment