Week 7, Reading 2

Goal-oriented Design for the Web
by Scratch Media

* Understanding goals is a critical factor in the success of any design project.
* This article discusses techniques to help discover the designer’s own goals and gain an insight into what their target audience really wants.
* It aims to help the designer get a clear picture of their purpose, to understand the key goals of their target users and start to visualise a high-value solution that ensures everybody wins.

* Its contents include:
1. About goals: Why goals are important.
2. Your goals: Identifying your personal goals will help you to achieve them.
3. Your site's goals: Identify your web site's goals
4. Users' goals: The importance of understanding users' goals when designing web sites and applications, introducing personas as a design tool.
5. Win-win solutions: The best sites are consciously planned to deliver win-win solutions that deliver both users' goals and achieve the site's goals.
6. Personas: Why using personas in your design process helps avoid common mistakes and creates a better product.
7. The Site Persona and Dialogue Process: Two more powerful tools for modelling the interactions on your web site. Site personas represent the site's brand and goals. The Dialogue Process is a way of designing interactions as conversations between user personas and the site persona.

Week 7, Reading 1

7 Quick CSS Enhancements for Better User Experience
by David Walsh

Seven quick CSS snippets that will give your website more “pop” and make your user’s experience more functional and enjoyable.

Change Text Highlight Color
.::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
2.::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }
The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you’d like!

Prevent Firefox Scrollbar Jump
1.html { overflow-y:scroll; }
Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn’t reach below the fold, thus creating an undesireable “jump.” The above snippet prevents that.

Rounded-Corner Elements
1.input { -moz-border-radius:10px; -webkit-border-radius:10px; }
Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.
 
Print Page Breaks
1..page-break { page-break-before:always; }
Don’t forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.

Attribute-Specific Icons
1.a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }
Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.

CSS Pointer Cursors
1.input[type=submit],label,select,.pointer { cursor:pointer; }
New rule for you to live by: if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it. Links, buttons, SELECT elements, etc.

display:block Links
1.#navigation li a { display:block; }
When you’ve built a navigation menu with UL/LI/A elements, be sure to set each anchor ’s display property to “block” so that the user doesn’t necessarily need to hover over the anchor’s text for the link to work.

Cursor

* The cursor property controls the appearance of the cursor on interactive websites.
* If we had the following included in our CSS: #box {cursor:move;} when the user places their mouse over the div with the id="box", the cursor would change to a plus sign with arrow heads signifying that the div would be dragable.
* There are a whole bunch of different values for the cursor propety: auto; crosshair; default; e-resize; help; move; n-resize; ne-resize; nw-resize; pointer; progress; s-resize; se-resize; sw-resize; text; w-resize; and wait.

Formatting

Text-align
* Can be used to make your site look more professional, e.g. by using the justify value.
* Other values for this property include left, right, inherit and center.

Text-decoration
* Used mostly when formatting hyperlink elements.
* Has values such as overline, underling and line-through.
* You can combine your text-decoration values, e.g. p {text-decoration:overline underline;}
* Be careful if you remove the underline from a hyperlink as the everyday user is used to seeing it there and might not recognise the object as a hyperlink if it is removed.

Letter-spacing
* This property works by allowing us to enter a length value IN ADDITION to the default value of spacing between letters.
* The value can be a positive amount to increase spacing, or a negative amount to decrease spacing.
* If you want to return to the default amount simply use the value {letter-spacing:normal;}

Word-spacing
* This works in a similar way to letter-spacing in that you can have both positive and negative values.
* However be aware that the letter-spacing and word-spacing properties CAN be affected by the {text-align:justify;} property - it depends on the user agent/browser.

Text-transform
* This property allows us to alter how the text would appear in the normal flow of the document.
* It has a number of values, including capitalize, inherit, uppercase, lowercase and none.
* Capitalize means make the first letter of every word a capital, however this is dependant on how a browser determines what is and isn't a word and this may vary from browser to browser.

Indent

* Some CSS properties give us a finer control over how our text is rendered in the browser.
* The text indent property allows us to place an indent in the first line of a block of text.
* The text can be indented from both the left and the right.
* For example p {text-indent:1.5em;} would give us an indent of 1.5em.
* We can also use pixels and points as values, as well as % which would relate to a percentage of the width of the block of text.
* This can be very handy should we want to hide things like structural headings from the average visitor that we still want to be read by screen reading applications.
* We do this by giving the desired content an indent of say -9000px.

Pseudo Class 2

First-of-type
* p:first-of-type {...} would apply the CSS rule(s) to any p element that is the first of its type within its parent element.

Last-of-type
* p:last-of-type {...} would apply the CSS rule(s) to any p element that is the last of its type within its parent element.

Only-of-type
* p:only-of-type {...} would apply the CSS rule(s) to any p element that is the only one of its type within its parent element.

Root
* This pseudo-class matches the root element of the document (in HTML documents that would be the HTML element itself).
* :root {...} would apply its CSS rule(s) to the whole document.

Empty
* :empty {...} would apply its CSS rule(s) to any empty element in the HTML document.
* NB: If there is a blank space inside the element in the HTML this would not be considered to be empty.

Target
* This pseudo-class operates in a slightly different way, and is hard to explain on this blog when you cannot type in HTML tags!
* In the CSS
:target {background:red;}
p {background:gray;}
* In the HTML
Inside a p tag you would have an a tag with the href="#pelement"
Then there would be another paragraph with an id="pelement"
* To start with all the paragraphs would have a background of gray, however when the user clicks on the anchor it would add the "#pelement" to the end of the address bar and this would trigger the target pseudo-class which would in turn apply the CSS rule of background:red to any element with an ID that matches "pelement".

Enabled and Disabled
* This pseudo-class allows us to determine whether an element is enabled (either a clickable object or a form object) or whether it is disabled.
* For example, with two checkboxes:
input:enabled+span {...} would apply the CSS formatting to the span elements of all the enabled checkboxes.
input+span {...} along with it would apply this alternative formatting to all remaining disabled checkboxes.
* If we changed the first selector to input:disabled+span then the opposite would happen.

Checked
* This allows us to modify the appearance of elements that can be toggled on and off, e.g. radio buttons and checkboxes
* For this you would use the selector input:checked+span {...} and the formatting would only be applied when that item is selected.

Not
* p*:not(q) {...} would apply the CSS rule(s) to every element (using the universal selector) inside the p element that is NOT the q element.

Pseudo Class 1

* NOT TO BE CONFUSED WITH PSEUDO ELEMENTS.

Hover
* div:hover {...} would apply the specified CSS rule(s) when the user places their mouse over the div element.

Focus
* a:focus {...} would apply the CSS rule(s) when the object is clicked and it comes into focus, or when you tab to it.

First-child
* li:first-child {...} would apply the CSS rule(s) to only the first element/item in the list.
* NB: It will only match an element if it is the first child of a parent element.

Lang
* This pseudo class is used if we have more than one language on our website.
* :lang(sp) {...} would apply the CSS rule(s) to any Spanish content on the site.
* This would be identified in the HTML by having lang="sp" within the p tag for example.

* THE FOLLOWING PSEUDO-CLASSES ARE FROM CSS3 AND SO MAY NOT BE SUPPORTED BY ALL BROWSERS AS YET.

Last-child
* p:last-child {...} would apply the CSS rule(s) to only the last element, i.e. the last paragraph in the document in this case.

Only-child
* p:only-child {...} would only apply the CSS rule(s) to a div that contained one paragraph for example.

Generated Content

* Some CSS properties allow us to generate content.
* These properties work in conjunction with a further two pseudo elements, before and after.
* NB: Although we are generating content which appears inside the browser, we are not altering the document - just altering the presentation of the document.
* Using the selector #content:before {content:"Designed by Daniel";} would place this string before the other content.
* Using the selector #content:after {content:"Designed by Daniel";} would place this string after the other content.
* This extra content will appear alongside any text from the HTML but it is stored along with the CSS, usually in a seperate file.
* We can also use CSS in this way to create a counter for an unordered list for example.
* ul {counter-reset:count;} creates a counter and names it 'count'.
* li:before {counter-increment:count; content: "number" counter(count) ":";} instructs the counter to increment and places the specified text before the list item.

Pseudo Elements

* Pseudo elements allow us to extend our selectors so we can be more specific with what we would like to select.
* They allow us to match elements in our document that don't appear specifically in the document tree, e.g. the first letter of a paragraph.

First-letter
* p:first-letter {...} uses the pseudo element :first-letter to apply any CSS rules to the first letter of each paragraph.
* NB: In CSS1 and CSS2 the pseudo element is identified by a single colon, but in CSS3 it is identified by a double colon.

First-line
* p:first-line {text-transform:capitalize;} would make the first letter of each word of the first line a capital letter.
* If you adjust the size of the browser window the amount of text that fits on the first line would vary and the formatting would also adjust to the varying content.
* NB: Be aware that not all browsers support this property yet.

Selection
* Using the universal selector in association with this pseudo element, the CSS selector *:selection {...} would apply the rule(s) to any and every element in the document when it is selected by the user.
* The selection pseudo element only has two properties that can be used, 1. background and 2. color.
* NB: At the moment only Opera and Safari support this property.

Line Height

* This video was a bit buggy and there was no proper beginning or ending so there may be more to it but ...
* The line-height property can be used to mulitply the default line height between lines of text.
* We can use most units of measurement to set the line height (ems, pixels, etc.) but we cannot use negative values.
* It may not look on screen like the line height is rendering out exactly, however the text itself is included as part of the line height.
* Most browsers have a defualt line height of approx. 1.2em but, as it is not part of the W3C standards, this is left up to the individual browser.

Week 6, Reading 3

Information Architecture
by Scratchmedia

This article looks at the various models of web design and discusses the pros and cons of each.

All-in-one
This is the simplest possible model. Everything goes on a single Home page.
It's interesting to see many more sites using this approach, to simplify the experience and to reduce maintenance.

Flat
A flat pattern is where all pages are arranged as peers, and every one is accessible from every other one. This is very common for simple sites, where there are a few standard topics, such as: Home, About Us, Contact Us, Products.
This may also be called a 'monocline grouping'.

Index
An index structure is like the flat structure, with an additional list of contents.
An index is often organised in some way, to make stuff easier to find. For example, a list of files in a web directory (the index page), or could be an index of people's names ordered by last name.
Dictionaries and phone books are both giant indexes. Look at the corners of the pages, where the data 'index' is: it may be the first few letters of the word, or a marker that shows the alphabetical range on the page.
Indexes work well when there is a medium amount of data, and also when that data can be ordered in a way that makes it easier to scan to what you want.
How many items can an effective index contain?
Quite a lot. Would it be quicker to use a search engine or a phone book to find a particular number? I'd guess that if the search engine works well, it would probably be a little bit quicker, but the phone book doesn't do a bad job. For a clear difference, you'd need a large amount of data, such as a multi-volume encyclopaedia, where you would find alternative mechanisms more useful.

Hub-and-spoke (or daisy) pattern
This model is useful for multiple, distinct linear workflows. A good example may be an email application, where you will return to your inbox at several points, e.g. after reading a message, after sending a message, or after adding a new contact.
Sometimes, I find the term 'daisy model' more helpful, for architectures that use a number of transactions that share a common start/end point. The transaction loops can look like petals on a flower.

Strict hierarchy
A strict hierarchy describes a system where you can only access a lower-level page via its parent.
This could apply to a real-world model where there is a strict parent-child relationship between objects, such as arranging pages for company offices by their country. An office cannot be in more than one country.
Many data models also have strict parent-child relationships, such as Message boards, Threads and Posts. Every thread belongs to one message board; a message board can have many (child) threads. Each thread can have one or more subsequent (child) posts.
The important thing to remember about this is that, even if there's a strictly hierarchical real-world model, that doesn't mean that a strict hierarchy is the best way to represent it online. You should consider your users' goals and contexts of use. For example, while it's possible to arrange all your products by product category, that might not be the most intuitive way for a user to find it. Supermarkets often place the same items in more than one place, knowing that consumers will think about them and look for them under more than one category.

Multi-dimensional hierarchy
A multi-dimensional hierarchy is where there are many ways of browsing to the same content. In a way, several hierarchies co-exist, overlaid on the same content. The structure of the content can appear to be different, depending on the mode you're looking in.
A typical example is a site like Amazon, which lets you browse books by genre, or by title, and also lets you search by keyword. Each of these hierarchies corresponds to a property of the content, each of which can be useful for people in different situations.

Search
Many users and sites rely on the ability to use it to get to content quickly. While it's strictly more a navigation tool than an architecture, a search tool is often built in to a site's architecture, like an elevator is built in to the architecture of a building.
Search functions present a dynamic view of a set of content, and offer instant links to each result. This allows users to jump straight to content, without having to browse through hierarchies or indexes.
When search works well, it can be a huge benefit. Generally, the more content there is, the more value search can offer.

Week 6, Reading 2

CSS in Print Media
By Kyle Schaeffer

(This guy basically agreed with everything Daniel told us in the video tutorial, or vice versa)!

If your site has a lot of information that could potentially be printed out by your visitors, you should consider adding print-specific CSS to your design in order to make your print media visitors happy.

Font Sizes
Points are font sizes optimized for printing, so we’ll want to make use of them in our print-media CSS style sheet. Generally, you’ll want to set the base font size on your body tag to 11 or 12 points.

Design Width
Many site designs have a fixed pixel width, which doesn’t translate very well to print media. Some browsers, such as Internet Explorer, will actually shrink your entire design in order to fit everything on the page, but many other browsers will simply clip the contents of your site when printing. Generally, neither of these scenarios are desirable (shrinking your site often makes the font sizes too small). Because you can’t predict the type of printer or the type of media on to which your site is being printed, you should always use a percentage width (preferably 100%) for your site layout.

Other Considerations
In many cases, you may want to hide something entirely on print media. Navigation, for instance, often serves no purpose on printed media. Search boxes, breadcrumbs, and forms are other examples of elements that you may want to hide when printing. To do this, just add “display: none;” to an element in the print media CSS.

Week 6, Reading 1

500+ Truly Useful Resources of Free High Quality Patterns

* Pattern is one of the useful visual elements for web design.
* It is commonly used and seen in a website’s background.
* This link showcases a resource of High Quality Patterns of image files and pattern files for Photoshop and Illustrator which you can use for free.

http://blueblots.com/freebies/500-truly-useful-resources-of-free-high-quality-patterns/

Specificity 2

* There are four numbers that make up a specifity value: the first refers to inline styles, the second to IDs, the third to classes and the fourth to elements.
* Here are some example of CSS rules and their associated specificity values.
CSS RULE: p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 1
REASON: It has one element as a selector

CSS RULE: body p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 2
REASON: It has two elements as selector

HTML CONTENT: TAG p class="one" TAG
CSS RULE: p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: It has one class and one element as selector

HTML CONTENT: TAG p class="one" TAG
also TAG p class="two" TAG
CSS RULE: p.one, p.two {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: The selectors are being treated as two seperate rules

HTML CONTENT: TAG p class="one" TAG
CSS RULE: html body p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 3
REASON: It has one class and three elements as selector

HTML CONTENT: TAG p class="one" id="text" TAG
CSS RULE: #text {background-color:red;}
SPECIFICITY VALUE: 0, 1, 0, 0
REASON: It has one ID as a selector so it overrides all others

HTML CONTENT: TAG p class="one" id="text" style="background-color:red" TAG
CSS RULE: NONE
SPECIFICITY VALUE: 1, 0, 0, 0
REASON: An inline style overrides all embedded and linked CSS styles, however when trying to override specificity values it is better to try and use the ID method.

Specificity 1

* Specificity determines which CSS rules are applied (and which rules are ignored) by the browsers by deciding which rules are more important and which are not.
* If we understand the rules of specificity clearly then we can spend less time hunting for bugs when creating a website.
THE RULES OF SPECIFICITY
1. Specificity determines which CSS rules are applied by the browser.
2. Specificity is usually the reason why our CSS doesn't apply to some elements even though you think they should.
3. Every selector has its place in the specificity hierarchy.
4. If two selectors apply to the same element, the one with the higher specificity wins.
5. There are four distinct categories which define the specificity level of a given selector: in line styles, ids, classes and elements.
6. When selectors have EQUAL specificity values, the rule that appears last in the document is the rule that is applied.
7. When selectors have UNEQUAL specificity values, the more specific rule is applied.
8. Rules with more specific selectors have greater specificity.
9. Rules stored within an embedded style sheet have greater specificity than other rules associated with the document.
10. Rules embedded within the HTML of the document (in line styles) have greater specificity than other rules associated with the document.
11. ID selectors have higher specificity values than attribute selectors.
12. You should always try to use IDs to increase specificity.
13. Any universal selectors or inherited selectors have a specificity value of 0, 0, 0, 0.

Display

* The display property allows us to manipulate the type of box an element generates.
* We can use the display property to create a menu system by changing the list elements from block elements to inline elements.
* We do this by adding the rule: #nav li {display:inline;}
* Not only will the elements now be listed horizontally not vertically, the majority of browsers also remove the numbers that denote the positions in the list (if using an ordered list).
* To ensure this is done by ALL browsers, add in the rule list-style:none;
* We can also force inline elements to display as block elements, eg. b {display:block;}
* NB: The element has not changed from being an inline element to a block element, it has just changed its BEHAVIOUR.
* {display:none;} is a very handy rule for a variety of reasons:
1. to create menu systems (see above)
2. for pop ups
3. to hide elements on the screen that you want to appear when the page is printed.

Print

* When designing a website, it is important to consider creating a CSS style for print media.
* Browsers already have built in support to seperate screen CSS from print CSS.
* However if the designer has created a seperate style sheet for print media then you may see a completely different outcome when you print a page.
* The purpose of this is to optimise our style sheets for print media content.
* If your website contains information that would regularly be printed by the user then you should include a style sheet for printed media.
* There are two ways of doing this:
METHOD 1
Create two CSS documents - one for screen CSS and one for print CSS - and link them both to your HTML document (inside the link tags you would have media="screen" for the first one and media="print" for the second one).
NB: We can specify more then one form of media for a single style sheet by having either media="screen, handheld" or media="all".
METHOD 2
Create the styles with embedded CSS by having @media screen / @media print / @media screen, print as your selectors - as you would expect, styles for screen only go in the first set, styles for print only go in the second, and styles for both go in the third.
* 3 tips for optimising your document for print.
1. font-size: use ems or % for screen, use points for print (1em or 100% = approx. 11 or 12pts)
2. page width: if your site has a fixed width it doesn't translate well to browsers when they print it (can be shrunk or cropped) so for print media set the width to 100%.
3. remove menus: when printing a web page, the menu systems are just a waste of ink so remove them by adding the rule #menu {display:none;}

Clear

* If we have a website that has a main container and a sidebar container but we do not know how much content will be going in each container, problems can occur when we add a footer container.
* We need to make sure our site is flexible and can adapt.
* When we want to make sure that the footer always goes to the bottom of the page we use the clear property.
* The clear property has three values:
1. clear:right; (the footer will clear everything on the right)
2. clear:left; (the footer will clear everything on the left)
3. clear:both; (the footer will clear everything)
* It does this by taking the top margin property and setting it to the size it would need to push it down below the other elements.
* NB: If you want to add a gap between the lowest cleared element and the footer you must add a bottom margin to the cleared element.

Shorthand

* We can use shorthand methods to write our CSS styles more quickly and also make them easier for editing, for example:
LONGHAND
padding-left:100px;
padding-right:90px;
padding-top:80px;
padding-bottom:70px;
SHORTHAND VERSION 1
padding:80px 90px 70px 100px;
(The order goes clockwise from the top)
SHORTHAND VERSION 2
padding:80px 90px;
(The order is top/bottom, right/left)
* The exact same principle works for margins.
* The basic principle also works for border but is a little more difficult.
VERSION 1:
border-left-width:10px;
border-right-width:20px; (1 rule per side)
VERSION 2:
border-width:10px; (1 rule for all sides)
VERSION 3:
border-width:10px 20px 30px 40px; (top/right/bottom/left)
VERSION 4:
border-width:10px 20px; (top/bottom, right/left)
* The above principle can be applied to border-style and border-color.

Important

* The important rule is mainly used for debugging.
* It is called into play when we have a specificity conflict in our CSS.
* A rule with the important property will always be applied no matter where it sits in the document.
* The important rule overrides any specificity conflict as important has the highest possible specificity value.
* If two styles have equal specificity then the latter rule will always apply.
* However if we have p {color:#0c0 !important} then this rule will now be applied.
* If you have a rule that's not being applied, use the important rule to find the specificity conflict.
* If it doesn't fix it then chances are you just have a spelling mistake or you have got the name of the selector wrong.
* NB: Use the important directive to debug but DO NOT leave it in the style sheet for deployment as it will cause you problems further down the line - find the problem using the important rule then fix it using specificity.

Embedded

* This was a quick tutorial recapping the basics of embedding CSS in the head tag of your HTML document.
* Embedded styles are not recommended for multiple page websites as the CSS styles are only applied to that particular document.
* Embedding your CSS is however good for blogs, gadgets, widgets and template driven sites.
* When embedding your CSS it is good practise to put your styles inside comments so that any browsers that do not support CSS can simply comment them out.

Week 5, Reading 2

Things To Remember, While Coding A Website, To Make It Search Engine Friendly

1. Use HTML for the content as much as possible. Avoid Flash, images, or other non-text formats.
2. Avoid login functionality to access the page unless it’s required. Search engine cannot index the page that requires login.
3. Do not use frames.
4. Navigation should be in plain html. Avoid using flash.
5. Keep URL as short as possible.
6. Static URL is always preferred over dynamic URL.
7. Do not use numbers in URL.
8. If possible, use keywords in URL.
9. Separate words using Hyphens in URL.
10. Always use lowercase in URL.
11. Always add alt attribute for images, flash, audio & video file.
12. Use Anchor text in links
13. Limit the length of title tag to 65 characters (including spaces) or less.
14. Incorporate keyword phrases in title tags.
15. Add Meta tags in the code.
16. Add Header Tags i.e, h1, h2, h3 etc.
17. Offload JavaScript and other non-text code (style sheets, etc.) to external files
18. Optimize images for fast loading
19. Try to keep page size as low as possible
20. Validate your markup & CSS against w3c standards

Week 5, Reading 1

Moof: A Free iTunes for the Web?
by Ben Parr

The social music revolution has brought us applications that provide us with better ways to access our favorite music cheaper. Of course, it’s not all free – iTunes songs have a cost and apps like Pandora have a fee after so many hours of use.
However a new app, Moof, with an acronym that explains the app for itself: music, online, on-demand, for free claims to have “all the functionality of a full desktop media player, in your browser.”

Moof:
Music, online: The player is simple and functional. Their claim that it has all of the functionality of a full desktop media player is not true but as a pure music player, Moof has everything you need to simply enjoy music.
On-demand, for free: Moof gets the music you request by connecting to YouTube and taking music videos from the world’s most popular online video website. The bottom-left of the player even has the corresponding video playing, which isn’t a bad touch. However, getting your music from YouTube has its issues – the biggest problem is noise. It’s shocking how much music is on YouTube actually, but that also causes a lot of noise.

What’s the assessment?
The Great: Your music library, portable anywhere you go. Even an iPod cannot hold the amount of music that Moof accesses via YouTube.
The Good: As a web music player, Moof is solid, if not revolutionary.
The Bad: The noise associated with pulling music from YouTube. Last.fm and PandoraPandora are more reliable and have far less noise because they stream actual songs from the artists, rather than music videos.

Probably its most direct competitor is GroovesharkGrooveshark, the online music search engine and jukebox. Grooveshark does almost all of the same things – find music, play music, create playlists, and even follow the music playlists of other friends. And while Moof is a strong product on its own, it still doesn’t beat its older and feature-rich competitor.
We believe Moof is a great product and look forward to future innovations, but we’re unconvinced that it provides functionality that makes it novel or unique from its many competitors. Hopefully they’ll find ways to surprise us.

Descendant

* Using more advanced selectors like descendant selectors helps us write clean CSS that saves time and is easier to update.
* In order to use descendant selectors you must understand the structure of HTML documents.
* An HTML document has 2 children - the head tag and the body tag.
* The head tag has the child title.
* The title tag cannot have any children.
* The body tag has the child div.
* The div tag can have children called header 1 or p for example.
* The p tag can have a child strong.
* If the elements are only one generation away from each other then they have a parent/child relationship.
* If the elements are more than one generation away from each other then they have a ancestor/descendant relationship.
* This "family tree" relationship can be represented as a graph by certain applications and these are very useful when writing complex selectors.
* The selector li a {...}; applies the CSS to every a element that is a decendant of the li element.
* The selector #menu ol a {...}; would only apply the CSS to any a elements in an ordered list with the id="menu".
* If there is a space between the selectors then we are saying "with the descendant of".
* If there is NO space between the selectors then we are saying "with the child of", e.g. div#extra ol li img {...};

Margin 2

* Each element in a document has padding, a border and an invisible margin around it.
* If the padding is set to 1em above and below, a space of 2ems will exist between each element.
* However, if the margin above and below each element is set to 1em, only a space of 1em will exist between the elements.
* This is because the top margin for the second element moves up and overlaps the bottom margin of the first element - this is called collapsing margins.
* The second margin moves up til it touches the border of the first element but no further.

User Agent Styles

* A user agent is an application that renders web pages, i.e. a web browser.
* A user agent comes with built in style sheets, e.g. how they display hyperlinks, lists with bullet points, headers, fonts, etc.
* Different browsers have different style sheets therefore these anomolies must be considered when designing your author style sheets.
* If a conflict occurs, the author's style sheet will over ride the user agent's style sheet.
* However if the end user creates their own style sheet then this will over ride the author's style sheet.
* This is extremely beneficial for users with disabilities as they can adjust the style to suit their needs, however this is only used by a small number of end users as many people don't realise that the option exists.

Group

* Assigning a single selector to a declaration block can cause our code to 'bloat' beyond what is neccessarily required.
* We can streamline our code by using multiple selectors for a single declaration block, i.e. h1, h2, h3, h4, h5, h6 {declaration block;}
* NB. Make sure you don't place a comma after the last selector - if you do the CSS will not be applied.
* The grouping can contain different types of elements, classes and ids.
* The order that the grouping is presented does not matter.

Import

* As well as embedding and linking CSS to an HTML document, we can also import it.
* In order to use the import command we need to use the style element.
* Inside the style element we would put @import url(location of CSS file);
* Importing the CSS is different from linking the CSS as it uses CSS syntax not XHTML.
* Both methods are correct practise and work equally well in most cases.
* Linking is better if you want to specify an alternative style sheet or interact with the CSS using Javascript.
* Importing is better if you want to hide the CSS from older browsers that don't support it or if you want to improve the structuring of multiple CSS files.

Week 4, Reading 2:

45+ Unusual Layout Website Designs
by De Web Times in Design

* This is a list of websites that are unusual, cool and some quite different.
* They are websites that are unique as they have unusual design, structure, navigation and/or flow.
* Some of them seem to be very simple but, due to their interaction and structure, fall in the list of unusual websites.

Week 4, Reading 1:

HTML 5: Could it kill Flash and Silverlight?
By Paul Krill

* HTML 5, a groundbreaking upgrade to the prominent Web presentation specification, could make obsolete such plug-in-based rich Internet application (RIA) technologies as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.
* HTML 5 tackles the gap that Flash, Silverlight, and JavaFX are trying to fill.
* HTML 5 technologies such as Canvas, for 2-D drawing on a Web page, are being promoted by heavyweights in the Internet space such as Apple, Google, and Mozilla.
* Local storage enables users to work in a browser when a connection drops.
* Web Workers makes "next generation" applications incredibly responsive by pushing long-running tasks to the background.
* Web applications will become faster and will provide a better user experience, making the distinction between online apps and desktop apps blurred.
* The complete HTML 5 work won't be done for years, but parts of it are already showing up in browsers, e.g.video support is new in HTML 5 and new in Firefox 3.5.
* Google's new Chrome browser also has some capabilities, including video tags, derived from the HTML 5 specification.
* Microsoft has several HTML 5 features in Internet Explorer 8, such as local storage, AJAX navigation, and mutable DOM prototypes.
* Apple supports HTML 5 audio and video tags in its Safari browser, as well as the Canvas technology (which it invented).
* HTML 5 has the potential to offer Web experiences based on an industry standard.

Float

* Floating an element allows text to be wrapped around it.
* If you apply the property float:right; to an image, the image will be positioned on the right of the screen and the text will wrap all around it.
* You can also apply the property float:left; to the image and the same will happen but with the image on the left (NB. there is no float:center; option).
* You can add the float property to many different elements, e.g. if you add it to a header element then the text will wrap round the header.
* To avoid having the text render right up beside the floated element you can set the elements margins.
* margin:10px; gives a 10 pixel margin all the way round, or margin:10px 10px 10px 0px; will place a 10 pixel margin on three sides, but in this case not on the left.

Padding

* Padding controls the distance between the content of an element and its outer padding or border.
* We can control all sides of the padding using padding:20px; or we can control each side individually by saying padding-top:10px; padding-left:20px; padding-bottom:30px; padding-right:40px;
* The values for the padding can also be specified using percentages.

Border

* There are a variety of ways to control the borders of our HTML elements with CSS.
* border-style controls the appearance of the line, e.g. dashed, dotted, groove, solid ... and many many more.
* border-width controls the thickness of the lines, e.g. thin, medium, thick (keyword properties) or can also use an integer value.
* border-color controls the colour of the lines using either keywords or hexadecimal values.
* You can use the above to set the style, width and colour of the whole border, or you can insert top, bottom, left or right into each one to control just one side of the border, e.g. border-top-style:dotted; border-right-width:thin;
* NB: Be careful when using the keyword properties for border width as the actual thickness is determined by the browser so may not be consistent.

Linking 2

* We can link an HTML document to multiple external CSS style sheets.
* Having multiple style sheets is a useful way of organising your rules as you can end up with alot of rules. For example you could have a seperate style sheet for all text rules.
* Another way of organising your rules is to divide them up using comments.
* However beware - sometimes a conflict can occur, e.g. if one says background colour is black and the other says white.
* If this occurs then there are methods in place to determine which style sheet over-rides the other style sheet (more on that later).

Linking

* There are many advantages to writing CSS styles in a seperate document and then linking this document to all the HTML files in a web application.
* The main advantage is that it allows us to seperate content from presentation.
* We also save band width as the rules need to only be loaded once.
* It saves us time and money (a hosting plan includes both 1. how much data you need on the server and 2. how much data is downloaded form the server).
* You create a more flexible site that is easier to maintain.
* To link the CSS file you insert a link tag into the head element of each HTML document.
* The link tag has four main attributes:
1. rel="stylesheet" (what is the relationship between the linked files).
2. type="text/css" (it's a CSS stylesheet).
3. href="CSS/styles.css" (the location of the CSS document).
4. media="all" (will be explained later).
* This code must be inserted into all documents in the web application.
* Styles are then added to the specified CSS document which will cascade through all the linked pages in the application.

Block and Inline elements

* There are two main types of elements that exist within HTML - the Block Level element and the Inline element.
* A block level element takes up as much space as possible.
* Main block level elements: headers 1-6; paragraph; div; all lists.
* Main inline elements: bold; emphasize; italic; strong; span.
* NEVER EVER place a block level element inside an inline element as:
1. it is bad practise.
2. it violates the W3C standards.
3. it will not be a valid HTML document.

Week 3, Reading 3:

5 Tips For Better Readability
By Brian Cray

This article talks about how you can increase the readability of your blog:

* Typography - Make sure you have an easy to read font face, adequate space between lines, and lines that are about 95 characters in length.
* Start into content quickly - Start into your blog entry immediately with your headline. Your readers shouldn’t spend any wasted time searching for the content for which they came.
* Limit distractions - Anything that doesn’t guide the reader’s eye down your body copy is a possible distraction.
* High contrast - High contrast between the copy and background plays a critical role in the readability of your blog.
* Scannable - Use headlines, lists, and short paragraphs to break your copy into easily digested chunks.

Week 3, Reading 2:

What’s The Best Way To Handle Page Titles?
By Chris Coyier

This article has brief, dot pointed advice about:
* Naming your site.
* The use of tag lines and keywords.
* The structure and importance of presenting articles.
* Using separators like bullets or dashes to format content.
* Search engine and bookmark considerations.

Week 3, Reading 1:

Amazing Web Background Generators
by Ram

Generate background images for your websites using one or some of the following:

1. Tartan Maker - http://www.tartanmaker.com
2. Stripe Generator - http://www.stripegenerator.com
3. Stripe Mania - http://www.stripemania.com
4. Background Image Maker - http://lab.rails2u.com/bgmaker
5. Stripe Designer - http://www.stripedesigner.com
6. Random Stripe Generator - http://www.kissyourshadow.com/stripe_maker.php
7. Bg Patterns - http://www.bgpatterns.com

Margin

* Proper use of space between elements is crucial to a well designed website therefore having a good understanding of margins and how they interact with one another is vital.
* Many HTML elements have default margins (for example, the p tag has a default margin above and below of 1em), however this margin information is provided by the browser therefore it is not always consistent across browsers.
* Due to this fact we often have to set the element margins to zero.
* We can add a margin to the whole element or just a part of it by using one of the following: margin; margin-top; margin-bottom; margin-left; margin-right.
* If you add a margin to an in-line element, for example the strong tag, the margin will only appear to the right and left.
* However if you add display:block; to the CSS style for the element, then this forces the in-line element to render as a block element and have margins all the way round.
* Don't forget, elements like the body tag also have margins.
* If you are setting the integer value of a margin to zero you do not need to add in the unit of measurement.
* The margin value can also be a percentage.

Box Model.

* Every element within HTML generates a box or a rectangular container around it.
* Understanding these boxes or containers is the key to creating layouts within your CSS document.
* First you have the centre of the element for which you can specify the width and height.
* This is then surrounded on all sides by the padding - if you set a background colour or image for the element it will also be applied to the padding.
* This is in turn surrounded by the border - this can also be styled.
* Finally there is a margin all the way around the border - this is invisible.
* All of the above can be styled with CSS, although by default the padding, border and margin are all set to zero.
* NB: When you add padding, a border or a margin to an element it is applied to all of the top, bottom and sides.

SPAN tag.

* The DIV tag is a block level element for adding structure, whereas the SPAN tag is an in-line level element for adding structure.
* We cannot place a block level element within an in-line level element.
* For example, wrapping a span tag around some words within a paragraph of text with the attribute class="red" inside the tag will mean only those words will change to the formatting you set in the CSS style.
* The span tag not only formats text but also a large variety of other elements.

DIV tag.

* The DIV tag is used in HTML to add structure to our document by organising components into different sections.
* For example, if we add three div tags into the body of the HTML to divide it up and create a menu section, a content section and a footer section, we can then add CSS styles for each section, e.g. by adding background colours to each, to make the sections of our document really clear.
* We can alos add formatting to several elements at a time this way.

ID Selector

* The ID selector works in a similar way to the class selector but with some key differences.
* In the CSS styles area the ID selector is noted with a # before the name (as opposed to the class selector which has a . - for example #header not .header).
* The ID selector should only be used for key components such as the menu system or the footer that only appear once in the document (it can be used more than once but this is bad practise and goes against the W3C Standards).
* Referencing the style in the document is the same as normal, i.e. you place the id="header" attribute inside the tag that you want it to be applied.
* Can also be more specific about where the style is applied by having an element name before the #, for example h1#header: ...
* NB 1: Don't put a space between the h1 and the # - this creates a decendant selector.
* NB 2: The ID tag is case sensitive so be careful when you are naming your ID selectors.

Week 2, Reading 4:

How Twitter changes marketing forever, a simple explanation
by Brian Cray.

* Nearby Tweets allows businesses to search through real–time conversations on Twitter in geographic segments plus they can search with keywords and specify a search radius.
* Now you can keep your ear to the ground, listen to the current 'buzz' and react to it before it becomes yesterdays news.
* Word of mouth is fast replacing traditional advertising methods, and how you respond to positive or negative customer experiences could potentially make or break your business.
* For example, if a customer praises you, send them a coupon. If a customer complains, follow-up personally. In both cases, you’re likely to yield loyalty in return.

Week 2, Reading 3:

9 Compelling Reasons to Build a Single-Purpose Website
by Brian Cray.

1. Easier for people to explain and therefore share - easy services are explained in 5 seconds.
2. Save time - big websties take time and someone might beat you to it in the meantime.
3. Don’t try to be everything to everyone - focus on the primary use of your product and do it better than anyone else.
4. Grow your portfolio - 5 popular websites looks better than 1, no matter the size of each.
5. Fun - smaller websites mean you're not overwhelmed by to-do lists and tedious complexities.
6. Try new directions, push boundaries - don't waste all your good ideas on one big project.
7. Get more links - single purpose websites get a ton of links and bookmarks if done well, and those links eventually funnel back to you.
8. Spread your worth and reputation - increase your recognition and reputation in a variety of communitites by serving multiple niche markets.
9. More chance of creating the next big thing - if you only create one product it might not be a success, but by creating multiple small projects you increase your chances of succeeding.

Week 2, Reading 2:

Branding for Web Professionals - An Introduction
by Brian Cray.

"Colours and logos don't make a brand."

"Brands are much more complex than a pretty picture."

"A brand is the sum of customer experiences and branding is the careful management of those experiences. An experience could be a direct interaction with an employee, using a product, or getting a referral from a friend."

Week 2, Reading 1:

10 HTML Tags That Are Overlooked But Should Be Used

Daniel showed us most of these but there are a couple of new ones:
1. abbr - defines an abbreviated phrase.
2.acronym - defines an acronym (can be spoken as if it's a word).
3. address - defines user contact infromation.
4. base - specifies the default target for links or default address.
5. blockquote - defines a long quotation.
6. cite - defines a citation.
7. del - defines deleted text (with a strike through as default).
8. ins - defines newly added content (with an underline as default).
9. fieldset - defines a border around elements in a form.
10. legend - defines a caption for a form's fieldset.

Font Weight

* The font weight refers to the thickness of text elements.
* There are four keyword values: normal, bold, bolder and lighter.
* You can also enter an integer as a value, from the range of 100 to 900, with the higher the number meaning the darker the text.
* However not all user agents support this property completely therefore text can render out inconsistently across browsers.

Background Color

* The two main advantages for using CSS in web design are firstly that pages are easy to update and change, and secondly that you can apply a background color to more than just the few elements you can in HTML.
* If you place the declaration block background-color:#000; inside a body selector the whole of the body background will change, however if you place it inside a 'p' selector then only the background of that paragraph will change colour.
* NB: the background colour will stretch all the way across the screen as the p tag is a block element, however it will not effect the margin of the element.
* The default colour for an element is transparent.
* The colour values are usually defined as a hexadecimal value, e.g. #FF00FF - the first pair of digits relating to red, the second two relating to green and the third pair to blue (if there are only 3 digits then each digit is duplicated).
* Can also specify the background colour using RGB values, e.g.
background-color:rgb(18%, 25%, 70%);
background-color:rgb(200, 150, 50);
* The integer range is from 0 to 256.
* Can also use keywords to represent the values but this is not recommended as firstly the colours that support the keywords vary from browser to browser, and secondly because they are disallowed in the W3C accessability standards.

Class

* The class selector is one of the most popular ways of implementing styles on HTML elements as we can have a subset of elements within the document.
* An example might be: in the CSS styles we would use the selector p.bold then in the body we would put the attribute class="bold" inside the p tag.
* If we use the selector .bold instead of p.bold it then becomes a universal selector which can be applied to any element in an HTML document that has that class name as an attribute, e.g. span class="bold".
* An HTML element can also have multiple class rules, e.g. span class="bold em".
* Writing well structured class selesctors is the key to writing good CSS.

Background Position

* This property is used all the time when laying out an interface design with CSS.
* It allows the developer to define a starting location for background elements other than the top left corner, coordinates 0,0.
* There are five keywords that can be used in a variety of combinations to provide the values for the background-position property: center, left, right, top, bottom.
* background-position:center center; for example would place the image right in the middle of the screen.
* You can also specify the exact location of the image using length values like points, pixels, inches or centimetres.
* Best practise is to use ems or %, e.g. background-position:40% 20%; would scale to the size of the window.
* The first number of the value specifies the distance from the left, the second number of the value specifies the distance from the top.
* The background-position property is really useful when creating menu systems with the background image as the button and hypertext as the text.
* This saves band width and makes the site more accessible.

Background Tip

* To save on band width avoid using large pictures or images as your background.
* A 1KB image that's repeated is just as effective as a large image that may not display properly in the intended area anyway.

Background Repeat

* The default value of the background image is to repeat and fill the element from top left to bottom right (this is the same in raw HTML).
* We can use the background-repeat property to change this.
* There are five possible values:
1. repeat; (default)
2. repeat-y; (repeats only on y axis, down the page)
3. repeat-x; (repeats only on the x axis, across the page)
4. no-repeat; (appears only once, no tiling or repeating)
5. inherit; (inherits the value from its parent)

Background attachment

* This CSS property allows the developer to define whether the background is fixed or whether it scrolls with the document.
* The DEFAULT setting is to have it scrolling with the content.
* To keep the background static set the property's value to fixed.
* To have the background scrolling (the same as the default) set the value to scroll.
* There is also a third option: background-attachment:inherit;
* This means that it would inherit the background-attachment property's value from its parent (remember this is not the default so it would have to be explicitly specified).
* Be careful when you use the background-attachment:fixed; option though as it can be confusing for the user and make the content difficult to read.

Background Image

* When assigning a background image to an element you add the following declaration block inside the CSS for that element: background-image:url(address);
* The image appears tiled across the area of that element, displaying from top left to bottom right.
* The background image will not effect the margins of the element.
* It's mostly good practise to specify a background colour as a back up in case your image doesn't load as no error message will be displayed, just a blank screen.
* We set an image as a background image in the style sheet if it is purely there for aesthetics.
* If the image relates to the content of the page then it should be embedded into the HTML document.

Week 1, Reading 3:

"Better CSS Font Stacks" by Nathan on 6.26.08

One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

When creating a stack, first consider the context of the text. Is it going to be a headline, sub-head, or body copy? This can determine the appropriate order of a stack, considering certain fonts work well for setting blocks of copy, while others work better at larger sizes. Once context is considered, there are few more things to consider when building a stack. First, select your ideal candidate. From there, the path of your choices may fork depending on the context:

Titles [ greater than 12px ]:
font-family: Ideal, Alternative, Common, Generic;

1. Ideal - Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.
2. Alternative - When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.
3. Common - At this point, you just need something similar that is not going to break your layout.
4. Generic - Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.

Paragraphs [ less than or equal to 12px ]:
font-family: Ideal, Fit, Common, Generic;

1. Ideal - Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica.
2. Fit - Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design.
3. Common - Something similar in flavor and well-represented.
4. Generic - Again, finish with the generic classification.

Week 1, Reading 2:

"What is Web 3.0?"

Web 1.0 - "the mostly read only web"
That Geocities & Hotmail era was all about read-only content and static HTML websites. People preferred navigating the web through link directories of Yahoo! and dmoz.

Web 2.0 - "the wildly read-write web"
This is about user-generated content and the read-write web. People are consuming as well as contributing information through blogs or sites like Flickr, YouTube, Digg, etc. The line dividing a consumer and content publisher is increasingly getting blurred in the Web 2.0 era.

Web 3.0 - "the portable personal web"
This will be about semantic web (or the meaning of data), personalization (e.g. iGoogle), intelligent search and behavioral advertising among other things.

Week 1, Reading 1:

"Why File Naming is More Important Than You Think" by Craig Buckler.

* Be careful when naming the files and folders for your website as they can inadvertently be trapped by advert blocking programs.
* Avoid advert-like names within your files by thinking about the following:
1. Avoid any word featuring the text 'ad' or 'advert'.
2. Avoid combinations of words featuring
'banner'
'click'
'server'
'bureau'
'syndicate'
3. Avoid numbers with standard banner sizes
e.g. my-image-468x60.jpg
* Test your system using a variety of advert blocking software, e.g. Adblock Plus - a Firefox add-on.

Font-size

* CSS has many options for setting the size of font - you can apply keywords, relative values or absolute values.
* Relative Units are: em, ex, px, % or keywords.
* Absolute Units are: mm, cm, in, pt or keywords.
* 72pt = 1 inch in real life (not on your monitor).
* We don't usually use pts to control font size, unless we are using CSS for print, as there are cross browser compatability issues.
* Absolute Keywords are: xx-large, xlarge, large, medium, small, x-small, xx-small.
* Medium is set to the default text size for the browser (except in IE 5.5 or earlier).
* In Industry these are often referred to as T-SHIRT sizes.
* Relative Keywords are: larger and smaller.
* They measure relative to their parent element.
* For example, if the font-size of the body is set to 16px, any element with the font-size set to 'larger' will be larger than 16px.
* Be aware you can run in to problems if you nest elements, although many modern browsers do have thresholds in place.

Font-family

* Using the font-family property allows the designer to specify which font they would PREFER to be used within the HTML document.
* If the end user does not have the specified font then the designer can also specify alternatives, creating a hierarchy of preferred fonts.
* If none of these fonts are available, we can also specify one of the five generic font styles: serif, sans-serif, monospace, cursive and fantasy.
* This does not guarantee that a certain font (or even the same font) will be used in each browser, it merely guarantees that a certain font style will be used.
* If you do include a generic font in your font family options, make sure it is the last option as no font afterwards will be used as a generic one should always be available.
* If none of the specified fonts are available and the designer has not included a generic font in the list, the user agent will render the text using the default generic sans-serif font.

First CSS Rule

* This video was basically just a recap of the ones before to give us a chance to write a few CSS rules.
* We used the selector 'h1', the property 'color' and the value 'red' to change the colour of all of the header 1 text entries to red, and we used the property 'font-size' and the value '3em' to adjust the size of the header 1 text as well.
* Similarly we used the selector 'p', the 'color' property and the 'blue' value to change the colour of the text inside the paragraph tag.
* We were also reminded to put a semi-colon at the end of each declaration block.

Inheritance

* This is a core feature of CSS.
* The structure of an HTML document is similar to a family tree and each element can inherit properties from its parent.
* If we insert a style tag into the head tag and enter some rules, for example that all text in the body should be blue, then this value will be inherited by all the elements inside the body tag.
* NB: not every property in CSS is automatically inherited by its child (e.g. border) as it would not make sense. Only the ones that make sense are inherited.
* We can override the inheritance by specifying a new rule, e.g. that all text inside a 'p' tag should be orange.
* Inherited values will always lose out to explicitly specified values.

CSS Syntax

* CSS is not case sensitive in all matters under its control.
* Some things are not under its control, e.g. end user's operating system or browser.

Embedded CSS
* Code is written inside a style tag placed inside the head tag.
* The CSS rules are then written within the opening and closing style tags.
* It is good practise to put comment tags around the rules.
* This is because some older browers and mobile browers don't support CSS.
* Each RULE SET contains a selector and one or more declaration blocks.
* Each declaration block has a property and a value, e.g. color:#00CC33
* Each declaration block is followed by a semi colon.
* Values can be keywords, strings, colours, numbers, URLs, links, precentages, etc.
* Many CSS properties can have a keyword as a value.
* The keyword is called an IDENTIFIER.
* The IDENTIFIER must never be surrounded by quotation marks.

CSS - Cascading Style Sheets

* Main purpose - to control the appearance of MULTIPLE HTML documents.
* It separates the structure of the site from the presentation of the site.
* The structure of the site relates to the content of the document - text, images, etc.
* The presentation of the site relates to its appearance.
* We create a set of STYLES or RULES in one CSS file.
* Then we link this CSS file to all our HTML files using a line of code inside the head tag:
link href="styles.css" rel="stylesheet" type="text/css" (inside a self-closing tag)
* 'rel' and 'type' just specify what type of document is being linked.
* If you change a rule in the CSS file, the change will 'cascade" through all the HTML pages.

XML - Extendable Markup Language

XML is like HTML but with some key differences. It is not designed to replace HTML as it was designed with different goals in mind.
* XML was designed to CARRY data not display data like HTML.
* XML has no predefined tags, the user must define their own tags.
* XML was designed to be self descriptive.
* XML is endorsed by W3C.

Naming Conventions

* Do not use spaces in file names.
* Browsers will replace the spaces with %20.
* Better practise is to use _ or - instead of spaces.
* Or even better just use one word.
* Also try and avoid using & or @ or % symbols or similar.
* Avoid using capital letters for readability as some browsers are case sensitive.
* There is no real difference between .htm and .html file names.
* Just be consistent with your naming.