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.
Wednesday, August 26, 2009
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.
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/
* 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.
* 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.
* 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.
* 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.
* 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;}
* 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.
* 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.
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.
* 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.
* 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.
Tuesday, August 18, 2009
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
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.
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 {...};
* 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.
* 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.
* 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.
* 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.
* 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.
Thursday, August 13, 2009
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.
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.
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.
* 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.
* 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.
* 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).
* 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.
* 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.
* 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.
Saturday, August 8, 2009
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.
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.
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
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.
* 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.
Wednesday, August 5, 2009
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.
* 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.
* 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.
Tuesday, August 4, 2009
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.
* 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.
* 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.
Sunday, August 2, 2009
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.
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.
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."
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.
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.
Subscribe to:
Comments (Atom)
