Web design session- Studio brief 2
Web Standards
Common terminology within web design
html
xhtml
css
ap1
wysiwxg
mime
SQL
MYSQL
seo
FTP
URL
XML
PHP
ASP
JSP
CGI
AJAX
ASCLL
GIF
HTTP
HTTPS
UI
UX- User experience
WWW-World wide web
They are all languages, format has to make sense. Spelling needs to be correct to make things work.
Limitations, or....
Designing for the lowest common denomintor
300 ppi- for print
96 ppi- for standard screen
221ppi-New apple macs
Massive issue if you are designing for a standard screen, but how do you make it so your design could go on both screens
Web safe colours
50 shades of gray or 216 colours
Back in the day computers were only able to reproduce 256 colours, so they narrowed it down.
These colours were/are reproduced consistently accross the web using html, specifically a six or where possible a three digital hexadecimal code.
Red
#FF0000 #FF0
White
#FFFFFFF
#FFF
Black
#000000
#000
Can find the colour codes in photoshop. Web designers still use these colours, as they are guaranteed to be that colour on all types of computers.
RGB-more then 216 colours in the range 256 shades of red, 256 shades of green, 256 shades of blue. Reproducing 16 million different colours significantly more then HEX216 colours
The combination of Red, Green and blue values from 0 to 255
Red 256 x Green 256 x Blue 255 = 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
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 is the browser/system does not support the first font it tries the next one listed.
Some common font families:
Georgia, Serif
"Palatino linotype," 'Book Antiqua," Palatino, serif
"Times New Roman,"Times, Serif.
San Serifs fonts
Arial, Helvetica, Sans-Serif
Tahoma, Geneva, Sans-Serif
"Trebuchet MS" Helvetica
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 blowsier or system
However using font-face breaches licensing and copyright laws related to specific font foundries.
there are many free font websites which include free license usage @ font-face kits including font squirrel.
Size, Dimension, Pixel resolution
640 x 480 -All computers 1991
800 x 600 -1995
1824 x 768 -2000-2004
1920-1080 -Present day
2880 x 1800(220ppi) -New mac book pro
Create a responsive website to get around this issue
File Formats
PNG
GIF
PDF
JPEG
-
72ppi
RGB
-
Lossy
Compressed
Wen saving an image to be uploaded for web, have a small file size but still look the same. Compressed
Produce 3 scamps for next lesson, Image with notes colours, fonts etc. example gripittool.co.uk
Scamps related on summer brief
Handrawn scamps quicker, easier.
Fundamentals of Dreamweaver
Welcome screen
not a good way to open files through the column which says 'open a recent item'
taking shortcuts can be problematic
Middle Column
HTML, CSS mains that we would be using
Top features (videos) section
Avoid engaging with these as they can be too complicated
Click 'Create new HTML'
3 different views
Code, Split, Design
Design view- exactly how it will look on a web server
Simple web page you can create
Click code , quite a lot just to create blank space
<!DOCTYPE html PUBLIC "_//w3c//DTDxHTML!o
Transitional// eN""hhtp://www.w3.org/TR/xhtml/
DTD/xhtmll-transitional.dtd"> (delete this as its not needed)
_________Don't need _____________
Line | |
1<html xmlas="hhtp:www.w3.org/1999/xhtml">
2.<head> (isn't visible to what you can see, just for the functionality)
3.<meta http- equiv= "content-type" content='text/html; charset- UTF-8"/> (search engine, add in key words. Arn't essential so can delete)
<title> untitled document </title> (increase the search engine optimisations)
</head>
<body> All design goes between
</body> these parts.
</html>
Once all unnecessary coding has been deleted this is whats left:
1. <html>
2.<head>
3.<title> Untitled Document </title>
4.</head>
5.
6.<body>
7.</body>
8.</html>
9.
<body> Open
</body> Closed
/ Symbol Indicates the end
File management is very important, save in a root folder, like how you would use Indesign. Keeping all the folders together
Save in user work within the hard drive. Imperative to use 'user work' when saving files for dreamweaver to work. Also allows work to be backed up.
When naming images don't use capital letters or spaces.
The name of the folder can be the name of the website, however as i don't know the name i have named it as 'root'
Create another folder for images (media) within the root folder. Some servers look for the root fold and the image folder, even if there is other media in there.
Tell Dreamweaver where the root folder is so we can save
-Site tab
-New Site.../-manage site...
Back the folder up onto desktop, when we go back transfer back to user work. Then click manage to tell it again tell it again where it is.
-Click new site...
Select the site name, doesn't have to follow naming convention
-Local site folder, click and find the root folder
Once done a files column on the bottom right appears
The page we have got is the homepage
File
-save as (as we have already told dreamweaver where it is going to go tit will open it already)
Just need to name it. Never get rid of .html or it wont work
As the internet is global, don't call it 'home' it isn't going to be understood in other languages. NEeds to be called index.html as this is what the server will be looking for first. All the other pages can be called whatever as they are linked already to the index. If the word is 8 characteristics or long can be bad so you would need to shorten. Click Save
Globe icon- Preview on any of the other browsers that are downloaded on the comp. Any changes made, save and then preview incase there is something not working, you can then identify what it was that has made it go wrong.
To give it a title name, between <title> name </title>
or name it in tab box with the name a x without it being saved
Click save then open it in Google Chrome to check if it has worked.
cmd S -save
cmd r- Refresh
To add text between
6. <body>
7. Hello
8.</body>
Save then check it has worked
The font and size is the default font and size
If we wanted to use helvetica, blue, 14pt we would have to keep typing, however creating a css file it would allow you to not have to do that.
Link them to the html doc, so the styling only needs to be done once.
Dreamweaver
File
-New
-Blank Page
-CSS
CSS different coding
1. @charset "UTF-8";
2. /*css Document*/
3.
4. Body {font-family: Tahoma, Geneva, Sans-Serif;
; Colon closes it
5. } closes the options
Colours are in pink, grey, blue
File
-Save as
-Name stylesheet.css
-Save
Go back to index.html need to link it with the stylesheet, Can code it if you know it so it would be inside the head
Tab on the right Attach external style sheet link
-OK
File- Save all - Check on Google chrome
Move root folder to desktop
For next session create 3 scamps, photos, colours, styles etc.
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, for example is the browser/system does not support the first font it tries the next one listed.
Some common font families:
Georgia, Serif
"Palatino linotype," 'Book Antiqua," Palatino, serif
"Times New Roman,"Times, Serif.
San Serifs fonts
Arial, Helvetica, Sans-Serif
Tahoma, Geneva, Sans-Serif
"Trebuchet MS" Helvetica
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 blowsier or system
However using font-face breaches licensing and copyright laws related to specific font foundries.
there are many free font websites which include free license usage @ font-face kits including font squirrel.
Size, Dimension, Pixel resolution
640 x 480 -All computers 1991
800 x 600 -1995
1824 x 768 -2000-2004
1920-1080 -Present day
2880 x 1800(220ppi) -New mac book pro
Create a responsive website to get around this issue
File Formats
PNG
GIF
JPEG
-
72ppi
RGB
-
Lossy
Compressed
Wen saving an image to be uploaded for web, have a small file size but still look the same. Compressed
Produce 3 scamps for next lesson, Image with notes colours, fonts etc. example gripittool.co.uk
Scamps related on summer brief
Handrawn scamps quicker, easier.
Fundamentals of Dreamweaver
Welcome screen
not a good way to open files through the column which says 'open a recent item'
taking shortcuts can be problematic
Middle Column
HTML, CSS mains that we would be using
Top features (videos) section
Avoid engaging with these as they can be too complicated
Click 'Create new HTML'
3 different views
Code, Split, Design
Design view- exactly how it will look on a web server
Simple web page you can create
Click code , quite a lot just to create blank space
<!DOCTYPE html PUBLIC "_//w3c//DTDxHTML!o
Transitional// eN""hhtp://www.w3.org/TR/xhtml/
DTD/xhtmll-transitional.dtd"> (delete this as its not needed)
_________Don't need _____________
Line | |
1<html xmlas="hhtp:www.w3.org/1999/xhtml">
2.<head> (isn't visible to what you can see, just for the functionality)
3.<meta http- equiv= "content-type" content='text/html; charset- UTF-8"/> (search engine, add in key words. Arn't essential so can delete)
<title> untitled document </title> (increase the search engine optimisations)
</head>
<body> All design goes between
</body> these parts.
</html>
Once all unnecessary coding has been deleted this is whats left:
1. <html>
2.<head>
3.<title> Untitled Document </title>
4.</head>
5.
6.<body>
7.</body>
8.</html>
9.
<body> Open
</body> Closed
/ Symbol Indicates the end
File management is very important, save in a root folder, like how you would use Indesign. Keeping all the folders together
Save in user work within the hard drive. Imperative to use 'user work' when saving files for dreamweaver to work. Also allows work to be backed up.
When naming images don't use capital letters or spaces.
The name of the folder can be the name of the website, however as i don't know the name i have named it as 'root'
Create another folder for images (media) within the root folder. Some servers look for the root fold and the image folder, even if there is other media in there.
Tell Dreamweaver where the root folder is so we can save
-Site tab
-New Site.../-manage site...
Back the folder up onto desktop, when we go back transfer back to user work. Then click manage to tell it again tell it again where it is.
-Click new site...
Select the site name, doesn't have to follow naming convention
-Local site folder, click and find the root folder
Once done a files column on the bottom right appears
The page we have got is the homepage
File
-save as (as we have already told dreamweaver where it is going to go tit will open it already)
Just need to name it. Never get rid of .html or it wont work
As the internet is global, don't call it 'home' it isn't going to be understood in other languages. NEeds to be called index.html as this is what the server will be looking for first. All the other pages can be called whatever as they are linked already to the index. If the word is 8 characteristics or long can be bad so you would need to shorten. Click Save
Globe icon- Preview on any of the other browsers that are downloaded on the comp. Any changes made, save and then preview incase there is something not working, you can then identify what it was that has made it go wrong.
To give it a title name, between <title> name </title>
or name it in tab box with the name a x without it being saved
Click save then open it in Google Chrome to check if it has worked.
cmd S -save
cmd r- Refresh
To add text between
6. <body>
7. Hello
8.</body>
Save then check it has worked
The font and size is the default font and size
If we wanted to use helvetica, blue, 14pt we would have to keep typing, however creating a css file it would allow you to not have to do that.
Link them to the html doc, so the styling only needs to be done once.
Dreamweaver
File
-New
-Blank Page
-CSS
CSS different coding
1. @charset "UTF-8";
2. /*css Document*/
3.
4. Body {font-family: Tahoma, Geneva, Sans-Serif;
; Colon closes it
5. } closes the options
Colours are in pink, grey, blue
File
-Save as
-Name stylesheet.css
-Save
Go back to index.html need to link it with the stylesheet, Can code it if you know it so it would be inside the head
Tab on the right Attach external style sheet link
-OK
File- Save all - Check on Google chrome
Move root folder to desktop
For next session create 3 scamps, photos, colours, styles etc.
No comments:
Post a Comment