- Web standards and limitations
- Layout
- Setup
- Basic Coding
HTML: Hyper text mark up language
XHTML: Extended hyper text mark up language
CSS: Cascading style sheets
API:
WYSIWYG: What you see is what you get, creating designs without using coding, code that is written for you.
MIME:
SQL:
MYSQL:
SEO: Search engine optimisation
FTP: File transfer protocol
URL: Uniform resource locator. e.g a web address
XML or PHP: Linking a website to a data base e.g amazon, seeing what stocks available
WWW: World wide web
UI: User interface. Designing for web, tablets, iphone ect.
UX: User experience, what they gain from the website
Theres naming conventions when working with code, and you have to follow the rules in order for it work.
Limitations: designing for the lowest common denominator!
Web safe colours:
50 shades of gray or 216 colours. if you want to make sure the colours on your website are consistent throughout, you should use websafe colours.
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.
Red
FF0000
FF0
White
FFFFFFF
FFF
Black
0000000
000
RGB colour mode is capable of reproducing 16 million different colours, 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,777,216
The wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the dame principles and photoshop and illustrator, by specifying the percentage of 255 per RGB
for example 100% red would be RGB (255,0,0).
This method isn't consistent, different monitors are capable of using different colours. If you want your website to be consistent across all devices use web safe colours.
You can break the rules in web design, but it's not guaranteed to be consistent.
Web safe fonts:
For a chosen font to display consistently across different computers a standard font must be used, because the font is not secured to the website.
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 instead.
Serif Fonts
Georgia
"Platino Linotype", "Book Antiqua", Palatino, serif
"Times new roam, times, serif
You have to put speech marks around the font of it has more than one word in it, in order for it to read correctly.
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
Trevuchet MS, Helvetica,s ans-serif
Verdana, Geneva, sans-serif
Installing fonts to a website breaks all the copywrite laws, all fonts are owned by font foundries. I f you use a free font for commercial gains you will be sued, it's only for personal use.
CSS font-face
Te CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system
How ever using font-face breaches licensing and copy write laws specific to relevant fount foundries
Font squirrel - Web font kit allows you to use the font but check the licence
Size, dimension, pixel resolution
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220 ppi, Retina display)
Different sizes depend on what computer the user has, a design that has 2880 x 1800 that is display on a 800 x 600 computer they will have to scroll around for ages.
50 mega bites per image on a 2880 x 1800 screen, can use up all you data and the faire usage policy. Too big ti download onto your computer.
Read up on responsive web design!
File Formats
PNG
GIF
JPEG
72 ppi
RGB
LOSSY: compress images
COMPRESSED: change the resolution
Task: Create 3 separate designs of what you want your website to look like for the homepage, with colours, fonts ext. SCAMP, make notes and give annotations. audio video animation.
Dream Weaver
Ways to minimise bugs in dreamweaver put your work in user work.
The welcome screen has a variation of tabs.
1st column: to open recent files
2nd column: used to create pages
3rd column: series of videos to watch, tutorials.
We created a HTML webpage, which is the simplest.
The 4 different tabs allow you to go through what the web looks like aesthetically or what the code looks like.
The first line of code is not needed, it's a common code that it used for web standards.
We deleted the unuseful code and analysed what each on meant.
<>: open html
</>: close html
Head: specify with this tag
Meta: creates tags for key words, SOE
Body: Anything you want to be visible in the website it has to go into between the <body> </body> code.
The most simple website code
Favicon: is a logo that is produced in the tab of the browser window.
User work: server / hard drive that allows you to log onto any computer and your work will appear. If you don't use this when using dream weaver your website won't work.
Before we start working on dream weaver we need to create a folder to save all the work into.
It shouldn't be more that 8 characters, lowercase, no punctuation or spaces. We called the folder root, as it's the root of all the work.
Inside this folder all the HTML and CSS files, inside this root folder we have to create a subfolder for all the images.
We then had to make the folder connect to our dreamweaver to our site.
We then names our website root and made the connection to the folder.
Easy to see, drag and drop images and work.
Home page:
file - save as
Shows the links to the folder.
Don't delete file extensions, it's bad practice!
The first page is called index.html because it's a universal word that a server can look for, again it has to be put in lowercase. We then saved the page and texted it on a web browser.
By clicking on the globe it gives you an option of webservers to view your website on.
I chose google chrome and this was my web page.
CMD + TAB: to switch between the screen
CMD + S: save
CMD + R: refresh
Firstly we experimented how to change the website name, by changing the title in the coding page. I put it as my name and it came up in the server browser. If you have changed something in the coding box and it hasn't been saved an Asterix will appear on the tab to warn you.
We then experimented with putting content it the body brackets. I put a small message and then when I saved and refreshed the webpage it came up.
I really enjoyed this session and I have learnt a lot of invaluable skills about creating a standard web page. I have learnt a lot about coding and meaning of it more that what I initially thought I would which made me confident in working with the programmes.
No comments:
Post a Comment