Selectors

The idea of selectors is to target HTML elements without needing Classes OR IDs

Syntax

* [att^="value"]

Matches elements to an attribute that starts with the specified value.

* [att$="value"]

Matches elements to an attribute that ends with the specified value.

* [att*="value"]

Matches elements to an attribute that contains the specified value.

Example

a[title$="cats"]

{

background-color: red;

}

Why bother?

They cut down on code

Combinators

A combinator targets all siblings of an element that has the same parent. For example, to add a red background border to all spans that are a sibling of a particular div

div~span {
Background-color: red;
}

Not supported in IE 6!

Pseudo Classes

These are a pretty cool set of classes. E.g.

:nth-child(n) Allows you target elements based on their positions in a list of child elements. Could be used for making striped rows. So if you want to match a group of two elements after the forth third, you can simply use:

1name="code">:nth-child(2n+3) { background-color: #ccc; }

Theres a bunch more too!

::selection lets you target elements that have been highlighted by the user.

RGB and Opacity

RGBA lets you set the colour and opacity of an element. There is already an opacity command but it targets the parent and all its children – not just the one element.

Multi Column Layout

This is an important one if you ask me. This allows you have multi-column layouts without having to use multiple divs.

.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}

Multi Backgrounds

Apply multiple layered backgrounds with CSS3. Here’s what it looks like in shorthand.

div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}

Word Wrap

word-wrap stops long words from overflowing.

Text Shadow

Exactly how it sounds, a drop shadow on text, and the CSS looks a bit like this.

.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

@Font Face Attribute

@font-face allows you use any font on your site by making it downloadable. It’s a major contentious issue with font foundries very concerned but a solution is being worked on. It looks like this:

@font-face{
font-family: ‘DroidSans’;
src: url(’../fonts/DroidSans.ttf’) format(’truetype’);
}

Border Radius

Added curved corners to HTML elements without using background images.

h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

Border Image

Use an image for the border of an element. Something like this:

Box Shadow

Add shadows to HTML elements without background images.

#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}

Box Sizing

Legacy browser can interpret boxes sizes (padding/height) in weird ways. The box-sizing property lets you specify how the browser calculates the width and height of an element

Media Queries

This these let you define styles depending on the screensize. So if the screensize is below 500px the navigation might appear in a different location. Or something.

Speech

specify the speech style of screen readers.

Success in the test was measured by how long it took to complete and whether they were successful. There were a range of tasks from the very specific (cinema lookup) to general information gathering tasks. The big obstacles to completions were:

• Screen size too small
• Typing slow and difficult
• Delayed downloads
• Website not designed for the mobile web

Bigger phones performed better with the iphone scoring 75%.

On sites designed for the mobile web, tasks were completed 64% of the time, a decent improvement.

Neilsen’s conclusion is that businesses should build a mobile site if they can, but it should link to the main site. Nielsen also says, and showing that hes well plugged in, that task specific apps will provide many web services on the mobile web. He must have an iPhone!

• Provide information on web payments providers
• Compare web payments providers
• Allow for discussion through a developer forum
• Blog about movements in the web payments landscape

Well folks, WEBPAYMENTS.ie exists and it does all those thing. So no more moaning!

The problem before was that when you searched for “Web Designer Dublin” you got up all sorts of rubbish including the Wikipedia page for web designer or maybe a link to the Web Designers Association (the what?). So when Google thinks your probably looking for a service it puts in the GLBC module directly after its sponsored links but above the organic links.

How do you get listed on the GBLC
The good news it its free. Signing up is quick and you can do it here:
www.google.com/local/add
After you sign up Google will post you out a code to verify your address. Then you should be up and running.

What the drawback?
Well, its the LOCAL business centre so you will only show up for your local area wheather that be Dublin, Meath etc. If you have various branches you can submit them all no problem.

In conclusion

Every business should be signed up for GLBC period. Google have really come through here as if you think about it this free feature is in direct competition with their Adwords/Sponsored links. So Kudos to Google. They walk their moral line pretty well and as long as they keep it up im not likely to jump on the next search engine bandwagon that actually works. (BING im told doesn’t work!).

I plan to write a follup article soon about how best take advantage of GBLC. Watch this space.

Here what Googles  Lars Rasmussen had to say: “We think of email as a successful open protocol, But we think that with the advances in computers and all the experiences that have been made with different types of communication, can do better. Google Wave is our suggestion.” So heres Google comparing it to Email, other have compared it to Sharepoint. Personally… I like keep email at arms length so I dont see myself substiuting email for this more collaboarative version. Mostly I just dont need to collaboarate! I see Google Wave, for now, as a real time conferencing/ collaborative work platform. That not to put it down! I dont use Google maps every day but its still useful as hell. And I probaby wont use Google Wave every day but it probably will given the number of people with Google accounts these days.

If you ask me, whats really happening is that Google are lining up to take on Facebook. If you think about it GW has all the bits in place to turn on a stomping social network.

Its basic… and web designing on a hand held could be so much better with a client side browser and toggle….BUT FTP-On-The-Go is a great start.