Posts Tagged ‘XHTML’

Week 4 re-cap

Color –

Red – stimulation of blood pressure and adrenaline. Known to increase human metabolism. It’s an exciting, rich dramatic color,  the color of passion. Darker shades of red (burgundy, maroon) have a rich and indulgent feeling about them. Earthy, brownish shades of red are associated with fall and harvest. Can provoke anger.

Orange – attractive, energetic color. Promotes happiness and represents sunshine, enthusiasm and creativity. More informal, less cooperate feeling. Stimulates metabolism and appetite, great for promoting food and cooking.

Yellow – highly active and visible color. Associated with happiness and energy. Pure yellow is a visibly active color. Too much yellow can be overpowering.

Green – associated with nature. Very soothing that symbolizes growth, freshness, and hope. Easy on the eyes and less active. It’s a very versatile color.

Blue – symbolizes openness, intelligence, and faith. Calms people down, can reduce appetite. Not good for promoting food products. Sometimes viewed as bad luck and trouble. Universal appealing due to the blue sky and sea. Conveys a sense of stability, and clarity of purpose

Purple – Historically associated with power and royalty. Represents wealth and extravagance. Least commonly used color.

White – “clean”, color of perfection, light, and purity.

Black – color of power, elegance and strength.

– There is no wrong color to use for a Website.

Color Temperature –

Warm Colors – From red to yellow, including orange, pink, brown, and burgundy. Because they are associated with the sun and fire. Represents both heat and motion.

Cool Colors – from green to blue, including some shades of violet. Violet is the intermediate between blue and red. Cool colors can calm people down and reduce tension great for background and larger elements within a website because they don’t overpower your content.

HTML/XHTML –

–     – is a special character. & is the beginning ; is the end. None breaking space (nbsp). This is a standard element

– < nobr > < / nobr  >  – no break

–  < blockquote > < / blockquote >  used to indent text.

– < q > </q > – used for quotations

– <  pre  >  < /pre > – block level tag. Displays in the browser how it is in the text editor.

Bad Websites –

http://www.webpagesthatsuck.com/mysterymeatnavigation.html

http://www.webpagesthatsuck.com/worst-web-sites-of-2008-navigation.html

Advertisements

Week 3 – recap

Image Files for Web –

– There are 2 mainstream file formats for the Web:

– JPEG = Joint photographic Experts Group

– GIF = Graphic Interchange Format

– PNG file format

– Less standardized, but is sometimes used

XHTML Structure –

– Block Level Elements

– hi (header tags) – most important heading

– Paragraph tags

– Unordered lists or ordered lists

– div tag (divided content)

– Inline Elements

– Strong tag

– em (Embed tag)

– img tag (creating links)

– span tag

– Consistent structure throughout your site is very important

In our book (The Principles of Beautiful Web Design) chapter one, it talks about layout and composition. The process of creating a design comp includes two things

– Discovery

– Implementation

Discovery – Finding out what the client does, and how they run their business. This helps you come up with an appropriate and effective design. Some good questions to ask are:

– What does the company do?

– What is your role in the company?

– Does the company have an existing logo or brand?

– What is your goal in developing a website?

– What info do you wish to provide online?

– What comprises your target audience? Do its members share any common demographics, like age, sex, or physical location?

– What are your competitors and do they have websites?

Implementation –

You should then start sketching out possibly layouts. You can then move onto Photoshop and create a simple mock up of the layout, messing with color schemes and things.

Defining good design –

Usability standpoint and aesthetic perspective are two main standpoints for defining good or bad design. The design should be about communication.

– Users should be pleased by the design but drawn to the content. The design should not be a hindrance; it should act as a conduit between the user and the information.

– Users can move about easily via intuitive navigation. The main navigation block should be clearly visible on the page.

– Users recognize each page as belonging to the site. A cohesive theme or style should exists across all the pages of a site.

Web Page anatomy –

– Containing Block, every web page has a container.

– Logo, It’s the identity.

– Navigation, essential the navigation system is easy to use and find. Users expect to see navigation at the top of the site, even if you have navigation on the right or left hand side as well.

– Content, content is king. Keep main content block the focal point of the website.

– Footer, at the bottom of page, contains copyright, contact and legal information.

– Whitespace, is every bit as important to the content on the page. Helps the design to breathe, so it isn’t cluttered. Creates balance and unity.

Grid theory –

– A grid is essential to graphic Designers. Used to make things square or lined up but also, helps proportion things.

Balance –

– Symmetrical Balance, otherwise known as formal balance, when the elements of a composition the same on either side of an axis line.

– Horizontal symmetry, centering content or balancing in between columns.

– Bilateral symmetry, composition is balanced on more than one axis

– Radial symmetry, elements are equally spaced around a central point.

For the web the best image is images with little file size but the best quality possible.

Dreamweaver CS4

Image Accessibility Preferences

– Images should have alternative text in order to meet accessibility guidelines

– Alterative text is added using the “alt” attribute of the <a> tag

– This text is often referred to as “Alt Text” or “Alt Tagging” your image.

– Text should be descriptive and short

– If the image is a link, or represents data, the text should give direction or information.

– Dreamweaver allows you to enter Alt text for an image in the Properties Inspector.

– Missing Alt text is the most common accessibility error

Week 2 re-cap

www.w3.org/MarkUp/ is a great site for learning XHTML

java script –

– Interactivity

– Functionality

– Created in 95 by Netscape

– JavaScript has nothing to do with the programming language java

– JavaScript is easier to learn but can’t be used to create stand along applications or server components

– JavaScript is intended to provide dynamic web content

CSS –

– Or Cascading Style Sheets

– Separates structure and presentation

File naming conventions –

– No spaces

– Shorten file names if you can

– Don’t use special characters

– Don’t mix upper and lower case together

– Use consistent extensions

Working with hyperlinks –

– How you create a hyperlink in HTML (<a , </a>) It’s an anchor tag

URL –

–  ULR (Uniform Resource Locator)

– Scheme:    //host   :port   /path   :parameters   ?query   #fragment

– Scheme: (website URL’s it’s HTTP)

– //host ( ex – Lynda.com)

– :port (number, it’s rare to see anymore)

– /path (path to the file, with html code in it)

– :parameters (not used very often)

– ?query (interactive sites)

– #fragment (takes you to a portion of the page)

– The scheme, host, and the path is what you will usually see

– target = ”_blank” makes the link into a new blank page or in some web browsers another window or tab.

Using relative URL’S –

– Don’t have all the parts

– Relative links are relative to the current location of the file that have the links in them

Week 1 Re-cap!

The Internet looks a lot like a galaxy!

This week I learned that the Internet and the World Wide Web are two DIFFERENT things

– The Internet is a series of networks or network of networks

– The World Wide Web is a system of interlinked hypertext documents

I also found out there is a World Wide Web Consortium (W3C), which is a non-profit organization. It’s sort of like a manual for the Internet. (www.w3.org)

I’ve also learned there are four things you need to see a webpage on your computer.

1) HTML Document

2) Web Browser

3) Web Server

4) Internet ISP

The eight commandments of naming

1) Use no spaces in file names

2) Use underscores of hyphens for adding spaces between words

3) Use short file names that have meaning

4) Lower case only

5) All file names must end in dor, three-letter extension (ex – gif, doc, mov)

6) Use alphanumeric characters only

7) Avoid special characters

8) Use either .html or .htm for web pages but only use one within a single site

XHTML/HTML

You should always use a text editor and not a word processor because a word processor formats text. So when you save it, it saves the formatting information, which you don’t want.

HTML – HyperText Markup Language

– Based upon SGML (Standard Generalized Markup Language)

– HTML 4 grew from need of presentation

XHTML – eXtensible HyperText Markup Language

– Not actually extensible

– HTML with stricter rules

Why favor XHTML over HTML?

– HTML is forgiving of sloppiness

– XHTML requires strict usage

– Stricter usage = better interoperability  = websites work better on more devices