Tuesday, 22 October 2013

DESIGNING FOR WEB: WORKSHOP 01

In today's session, we will look at:

1. Web Standards and Limitations (Restrictions? etc. Ensure initial 3 questions from last session are always asked prior to any design work)
2. Layout
3. Set-Up
4. Basic Coding

1. Web Standards:

Acronym - First letter/part of word put together
Abbreviation - A shortened version of a word being used

Common acronyms for web design:

HMTL (hypertext markup language)
XHTML (Extensible HyperText Markup Language)
CSS (cascading style sheets)
API (applicaton programming interface)
WYSIWYG (type of dreamweaver application, 'what you see is what you get')
MIME (Multipurpose Internet Mail Extensions)
SQL (data managing programme language)
MYSQL (database management system)
SEO (search engine optimisation)
FTP (how a website is transferred to be live online)
URL (uniform resource locator, web server holds all info)
XML (e-commerce)
PHP (e-commerce)
ASP (e-commerce)
JSP (Java Server pages)
CGI (computer-generated imagery)
AJAX (programming)
ASCII (American Standard Code for Information Interchange)
DNS (domain name system)
GIF (graphics interchange format)
HTTP (hypertext transfer protocol)
HTTPS (hypertext transfer protocol safe)
UI (user interface design)
UX (user experience)
WWW (world wide web)

Limitations: or desiging for the lowest denominator:

- File/Document Size
- Screen Size 

Phone, Screen, iPad, etc.

- Colour:

Web Safe Colours, RGB, 50 Shades of Gray, or 216 Colours.



When colour first arrived on the web computers could only support a maximum of 256 colours on 8-bit monitors. A list of "216 web safe colours" were identified.

These colours are/were produced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code. (Opacity and gradients not possible through hexadecimal code, only CSS)

For example:

Red 
#FF0000
#FF0

White
#FFFFFF
#FFF

Black
#000000
#000

16 Million Colours are reproducible in RGB. significantly more than HEX 216 colours.

The combination of red, green and blue values from 0 to 255 (256 unique shades for each value)

Red 256 x Green 256 x Blue 256 = 16,177,218

Wider range of colours available through CSS opposed to HTML.

These are identified using the same priniciples as Photoshop and Illustrator by specifying the percentage to 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/systems. For example, if the browser/system does not support the font it tries the next one instead.

The standard typeface for web design is always Times New Roman.

Some common font families:
(type face name should be in quotation marks all together, not as individual words)

Serif:
"Georgia"
"Palatino Linotype". "Book Antiqua"
"Times New Roman"
Sans Serf:
"Arial"
"Helvetica"
"Tahoma"
"Geneva"
"Trebuchet MS"
"Verdana"

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 specific font foundries.

There are many free font websites which include free licensee usage for @font-face kits including Font Squirrel.




The website above gives information, tips and help for coding typefaces and using @font-face.

2. Layout:

 - Size, dimension and pixel resolution:

640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220dpi)





- File formats to help save quality/resolution:

Lossy: Can be compressed to as small as possible, but still retains quality
PNG
GIF
PDF
JPEG

72dpi
RGB

Using Adobe Dreamweaver:

In today's session we will look at Adobe Dreamweaver and the initial basics of web design.


When Dreamweaver is initially opened, a start-up box or 'welcome screen' also opens (shown below) with recent items, new items and overview videos/tutorials.



When saving websites, such as InDesign, all of the contents should be in one folder to ensure it works properly, accurately and promptly. Create a containing folder - the root folder - before designing which everything can be saved into. D

Do not use spaces or capital letters in the name of the folder.



To open a new document, select "HTML", which opens the following window.


This website is currently blank (just white background)


Design - Same view (design) as in internet browser.
Code - Coding shown for the design (HMTL)
Split - Code shown and design shown


Even though there is currently no website content, the white background itself requires basic coding. This is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

(the top line simply states what the website is)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

(This HTML at the top in angular brackets shows the language being used.)
<html xmlns="http://www.w3.org/1999/xhtml">


Above is the coding for the empty website shown in the screenshots.

Not all of the coding shown above is necessary. The basic coding required for this blank website is as follows:

<html> OPEN
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html> CLOSE


Anything between the opened and closed "head" tab increases the functionality but cannot be seen on the design. For example, if CSS is being used, this would of been included between the two tabs also.

Meta Tab can be used to add in a key word for search engines, etc. For example, keys words, Graphic Designer, Leeds.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Title tab "<title>" can be type, logo, text - Favicon. 

An example of a Favicon.

Open and closed "body" tabs are for visible content. Anything which goes in here is seen on screen when live. 

The 'closed html' tab </hmtl> marks the end of the language being used/end.

Saving and Managing the Website:

First we need to tell Dreamweaver where the root folder is to save and loads contents from. To do this, select, Site > New Site.



Here a site name is added, and the root folder (local site folder) is located.


Once the root folder/local site folder is added, press save. This will open up a file manager in the bottom right hand corner of Dreamweaver.


The website is now ready to design upon.


The first page (homepage) should ALWAYS be saved as 'Index' - recognised internationally.


To view a design 'live' in a web browser, by selecting the globe, you have a series of options as to how to view the web design. If there are no browsers listed press, 'edit browser list' and select from my applications, i..e chrome.


Above is the blank website which is shown in coding above. This is viewed through Google Chrome. 

Keep previewing the design as being designed, when a change is been made. This allows corrections to be found and altered quickly and easily. This prevents errors affecting the website working correctly after many changes have been made. 

Check everything is in working order and designed/coded correctly whilst designing a new element to prevent backtracking.

Adding Text:

Text is placed between the open and closed <body> tags. The text will then show up on the web page. There is no text formatting etc currently, so the text is in Times New Roman, the default web font (serif)



For next week bring in 3 'stamps' or design ideas for web design ideas, and further research well designed websites.

No comments:

Post a Comment