Looking at:
- Web standards
- Layout
- Setup
- Basic coding
Questions to ask before designing for web: What's the purpose? Who's the audience? What the audience need?
Web standards
Acronyms: An abbreviation formed from the initial letters of other words and pronounced as a word
Acronym examples:
HTML - HyperText 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 Transfer Protocol
URL - uniform resource locator,
XML - Extensible Markup Language
PHP - Hypertext Preprocessor
ASP - Association of Surfing Professionals
JSP - JavaServer Pages
CGI - Computer-generated imagery
AJAX - Asynchronous JavaScript and XML
ASCI - ?
DNS - Domain Name System
GIF - Graphics Interchange Format
HTTP - Hypertext Transfer Protocol
HTTPS - Hypertext Transfer Protocol Secure
UI - user interface,
UX - User experience design
WWW - World wide web
Abbreviation: A shortened form of a word or phrase.
Limitations or... Designing to the lowest common denominated
Make file sizes as small as possible.
Web safe colours - only 216 colours you can use.
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/ are reproduced consistently across the web using HTML. Specifically a six or where possible three digit hexidecmial code. (Can't use gradients and opacity when using Hexadecimal code)
Red
#FF0000
#FF0
White
#FFFFFF
#FFF
Black
#000000
#000
Breaking the rules of using colour by using RGB and CSS
16 million colours are reproducible in RGB significantly more than HEX 216 (Hexadecimal code) colours.
The combination of red green and blue values from 0 to 256 (256 unique shades for each value)
Red 256 x Green 256 x Blue 256 = 16,777,216
This wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using 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)
Web safe fonts
Very limited fonts for the web.
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. For example if the browser/ system does not support the first font it tries the next one listed in the font-family.
Two of the most common font families:
Serif fonts:
Georgia, serif.
'Palatino Linotype', 'Book Antiqua', Palatino, serif
'Times New Roman', 'Times Serif'
(If the font is more than one word wrong you need to put quotation marks at the beginning and end)
San-Serif fonts:
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
etc.
To break the rules you can install the font to the website by using CSS.
CSS font-face
The CSS compatible @font-face allows you to install font 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. You can pay the license but it's a ridiculous charge.
There are many free font websites which include free licensing usage for @font-face kits including Font Squirrel.
Make sure if you're designing for web you use a font which has a 'web font kit'. Gives you the license to distribute a font onto your website.
There is only about 30 Web safe fonts that you can legally use.
Size, dimension, pixel resolution:
Space resolution - pixel per inch
Pixel resolution - Actual space you're working in
640 x 480 - first computer
800 x 600 - by 1995
1024 x 768 - early 2000
1920 x 1080 - 2088
2880 x 1800 (220ppi) - 2013
*PPI - Pixels Per Inch
File formats
Two file types, lossy and lossless
Lossless:
Lossless compression lets you recreate the original file exactly. All lossless compression is based on the idea of breaking a file into a "smaller" form for transmission or storage and then putting it back together on the other end so it can be used again.
Lossy:
Lossy compression works very differently. These programs simply eliminate "unnecessary" bits of information, tailoring the file so that it is smaller. This type of compression is used a lot for reducing the file size of bitmap pictures, which tend to be fairly bulky.
-PNG
-GIF
-JPEG
-
72PPI?
RGB
Scamp - rough design of how its going to work
Dreamweaver
We will look at HTML, CSS, JavaScript. (second column)
Creating a new HTML:
Screen when opened:
Different views: code, split, design
Important to understand what the code means.
Code view:
Nine lines of code making up a webpage with nothing on it.
The design view shows you how it will look when using an internet browser.
The split view shows the code view and the design view:
Code explained:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5. <title>Untitled Document</title>
6. </head>
7.<body>
</body>
8.</html>
Line 1. isn't needed, just declares what it actually is.
Line 2. '<html>' Anything in side an angular bracket is a html tag. Means 'open html'
Tag with a forward slash in it means close.
e.g. open: <html> close: </html>
Where ever there is an open tag you need a closing tag.
Line 3. <head> Anything which isn't actually visible in the design of the website, anything which increases the functionality of the website.
Line 4. Meta tab <meta> Adding in key words or phrases for it to come up in a search engine. Meta tabs don't need close tabs
Line 5. <Title> Title in the tab, logo and text. Favicom is the logo in the tab.
line 7. <body> Anything part of the design goes in between the open and close body tab.
*File management is important, NEED EVERYTHING IN THE SAME FOLDER. *Like InDesign.
This is called the Root Folder.
Creating new folder in User Work
Dont name it with uppercase or spaces.
Creating a subfolder in the root folder, any image, audio, flash etc. in this folder:
We need to tell the Dreamweaver where the root folder is:
Put in the location of the root folder:
Folders will appear in the bottom right hand corner:
When saving, the first page/ homepage needs to be saved as 'Index'.
To view on the web:
No comments:
Post a Comment