CSS Selectors: Real world examples

1. BBC News Headline

Website: http://news.bbc.co.uk/
CSS Selector: A.tsh,A.tshsplash

2. Price of an Amazon.com item

Example 1: http://www.amazon.com/Toshiba-Satellite-L505-GS5037-TruBrite-15-6-Inch/dp/B0030INLSW/ref=dp_ob_title_ce?ie=UTF8&qid=1267628403&sr=1-2
Example 2: http://www.amazon.com/Kindle-Wireless-Reading-Display-Generation/dp/B0015T963C/ref=dp_ob_title_def
CSS Selector:B.priceLarge

3. Item count of an eBay auction search for "ferrari"

Website: http://motors.shop.ebay.co.uk/Cars-/9801/i.html?_nkw=ferrari&_catref=1&_fln=1&_trksid=p3286.c0.m282
CSS Selector:SPAN.countClass

CSS Selectors: Cheat Sheet

'Class' selectors

.headline - select every element that has the 'headline' class.

'Tag' selectors

p - select every paragraph on the page.
a - select every link/anchor on the page.
h1 - select every Heading 1 tag on the page.

'Id' selectors

#item-price - select the element that has the 'id' "item-price".

'Nth element' selectors

p:eq(0) - select only the first paragraph.
a:eq(4) - select the fifth 'anchor' tag on the page.
.menu-item:eq(3) - select only the forth element that contains the 'menu-item' class.

Combined selectors

h1, p - select every h1 tag AND every paragraph tag.
h3.subtitle - select every h3 tag that contains a 'subtitle' class.
h3:eq(0), a.news-link - select the first h3 tag AND every anchor tag that has the 'news-link' class.

CSS Selectors: The Basics

This post will demonstrate ways to use 'CSS Selectors' (http://www.w3.org/TR/CSS2/selector.html) to target parts of a webpage that you wish to track.

There are three basic ways of identifying parts of a webpage using css selectors:

1. Element 'Tag'
2. Element 'ID'
3. Element 'Class'

Let's give a quick practical example of each of three ways of identifying content:

1. 'Tag' - a tag is the name given to the type of structural element. For example in a typical webpage 'normal' text is often placed with 'paragraph' tags like this:

<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

If we wanted to select all of the paragraphs in a webpage, our 'CSS Selector' would simply be p.

?? other examples of tag selection

<h1>foo</h1>

2. 'ID' - Every structural tag in a webpage can have defined an optional 'id' attribute. Within a single webpage no two elements should have the same 'id'. Therefore an 'id' should point directly to a single element somewhere in the page.  For example

<p>here is a paragraph of text<p>
<p id="error-message">This is an error message!</p>

If we just want to extract the error message our selector would simply be #error-message. The '#' symbol is important and tells Femtoo that we are looking for an id.

3. 'Class' - Every webpage tag can contain a 'class'. Actually, they can contain as many classes as you want. Here is an example of how classes might be used in a navigation menu in a webpage:

<ul id="menu">
<li class="menu-item"><a href="#">Products</a></li>
<li class="menu-item selected"><a href="#">Services</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li>
</ul>

...well sort of... actually using .selected might not be specific enough - this means that we would end up selecting the content of every single element on the page that contains a 'selected' class. In our example, a better selector might be: .menu-item.selected - which means retrieve all elements that contain both the 'selected' class and the 'menu-item' class. Actually, we can be even more specific with #menu .menu-item.selected. By using the #menu selector we are ensuring that we will not accidentally select other items in the page that also have the classes 'menu-item' and 'selected'

Femtoo: New Feature: Manage your tracker subscriptions...

Hi all,

This is a 'public' feature so that people that have subscribed to trackers via the 'Track this page' button can now view their subscriptions and unsubscribe to which every one they desire.

The new page located here: http://femtoo.com/subscriptions/.

Keep on tracking!

The race for content tracking - Femtoo vs Google

This recent ReadWriteWeb article highlights the growing importance of content extraction, tracking and notification:

http://www.readwriteweb.com/archives/google_reader_can_now_track_changes_on_any_web_pag.php#comment-183234

The official Google Blog post is here:

Follow changes to any website

Whilst the recently added site tracking feature of Google Reader is a s
tep towards Femtoo's goal of 'Internet as a data base' - it is clear that Google Reader is a far less sophisticated and generally less useful solution when compared with Femtoo.

13 really useful Femtoo Tracker

This article will give 12 examples of interesting ways to use Femtoo (http://www.femtoo.com). The examples focus on Femtoo Trackers - as opposed to functionality like notifications, the API or site widgets.

'Trackers' are the core concept behind Femtoo. Principly you give a tracker a URL to a webpage and configure the notification options. Femtoo will monitor the page and if changes are detected it will send out the notifications. However, as the following examples will highlight, Femtoo trackers are considerable more powerful than this brief description may suggest.

1. Track a product for price and stock availability changes

So you want to buy an Amazon Kindle? But they're a bit pricey? Well, you could create a Femtoo Tracker and point it at the Kindle product page, select the 'price' on the page (using the Tracker Content Helper) and you will recieve notifications everytime the price changes. Moreover, you can set a Rule and specifiy that you only wish to be notified if the price falls below $200 (for example).

Of course, you can follow exactly the same process above, for any product on any online shop. And if that 'must have' item is out of stock, simply track the 'number in stock' field and you will be notified as soon as it is back in stock. Also Femtoo often sends notifications far quicker than the integrated systems that shops may already have installed - this means that by using Femtoo you will probably be notified before any other shoppers, so you can get in quick and make the purchase before they run out again.

2. Track Blogs and public forums for new or updated content

So maybe your a fan of the Google Blog (http://googleblog.blogspot.com/ ) and you want to be informed any new blog post. Simply create a Femtoo Tracker, point it at "http://googleblog.blogspot.com/ ", then use the Content Helper to select either the title or 'published date' of the  most recent blog post. Now, whenever Google publishes a new article, you will be notified.

TIP: Because the notifications include the text you select, it probably makes more sense to select the actual title so when can immediately see if the post is of interest to you without having to visit the website.

Another great example here is tracking public 'question & answer' type forums for example Stack Overflow (http://stackoverflow.com), or Yahoo Answers (http://answers.yahoo.com/). If you have a question and are interested to know when somebody submits a new answer - simple point a tracker at the 'question page' and track the 'number of answers' field, or the current 'best' answer.

3. Track new software versions

Maybe you are waiting to get your hands on the latest features of your favourite software, or maybe you are waiting for the critical bug fix to be released - whatever the reason, you can use Femtoo to inform you of the latest software releases.

Simply point a Femtoo Tracker at web page that contains the latest version number - when it changes, you will be notified. For example, to track the latest version of the amazing jQuery library, create a tracker and point it to http://jquery.com/ (the version number is shown in red, under the download button).

We can take 7-Zip (the awesome free archive manager) as another example, simply point a Tracker to http://www.7-zip.org/ and select the text "Download 7-Zip 4.65 (2009-02-03) for Windows" (located at the top of the page). Although this isn't exactly the version number, we can make the assumption that when this text changes it probably signifies a new version is available.

4. Track when a website stops working

(service piggy-backing)
http://downforeveryoneorjustme.com/

5. Track online parcel deliveries

(service piggy-backing)
Create a tracker that tells you when your parcel has arrived in your town, or simply when the consignment status has changed.

6. Track when a currency exchange rate hits a certain level

(in progress)
www.xe.com

7. News headlines

(in progress)
news.bbc.co.uk

8. Track concerts of your favourite artists

(service piggy-backing)
by using eventful.com

9. Track changes in your client or competitor websites

(in progress)

10. Track Wikipedia page changes

(in progress)

11. Track the 'number of views' of your YouTube videos

(in progress)
Your own companies promotional video

12. Track your own website and monitor user activity

This is how I track new Femtoo user issues and user registrations

13. Get notified when your favourite cartoonist has published a new comic strip

Dilbert

Wrap up

The above example are just a few of the ways people are using Femtoo Trackers. Maybe you can think of more... start tracking the Internet today at Femtoo.com...

(All feedback and comments are welcome)

Tracking Internet Content - The Femtoo Way

My name is Thomas Carnell - the creator of Femtoo. This is my first ever Blog Post so I'm sure it will go through many revisions and is probably a terrible read - please feel free to comment on the contant and my writing style!

This article gives a basic overview of how to track Internet content using Femtoo (http://www.femtoo.com).

There are three key steps to create a useful Femtoo Tracker:

1. Know what information you want to track,
2. Find a web page that clearly contains this information,
3. Proceed to create the Tracker in Femtoo

The first point is very important and will help you find a web page that contains the information you are after. We will take a closer look at the following examples:

• A) To be notified when a particular shop product is back in stock
• B) To be notified when my favourite cartoonist has published a new cartoon
• C) To be notified when a new version of my favourite music software is released
• more....

Example A - Product stock level

If I want to track the stock level of a product from a particular shop, I must find the 'product page' for that item, fire up Femtoo and create a tracker for that page - selecting the 'Number in Stock' field (or whatever it might be. You may  also set a Tracker Rule that specifies to only notify me if the stock level is greater than 0 - implying that the shop has got some more stock in and the item is once again available to purchase. In exactly the same way, you may wish to track the price of key items of your competitors and simply be notified of any change.

Example B - Newly published cartoon

Lets have a look at the second example above, and use Dilbert (http://www.dilbert.com/) as an example. So we want to be notified every time there is a new Dilbert comic strip . For this, we need to find some piece of information on this page that 'implies' that a new comic has been published. So we could try to find the following pieces of information:

• Comic Title
• Published Date
• Number of comic strip

If we take a look at the Dilbert page we can see that the comic strips don't seem to have titles, so we can't use Comic Title as a 'handle'. However there is a date just above the comic (eg "November 26, 2009") - so maybe we can tell Femtoo to track the comic date? And yes, the Femtoo Tracker wizard tells us that the 'CSS Selector' for the date is 'DIV.STR_DateStrip' and Femtoo can successfully locate and track this item. Great, so we're done - we will now be notified every time a new Dilbert comic is published.

Example C - Tracking software versions

Let's consider tracking the latest version of the amazing jQuery javascript library (http://jQuery.com/). Okay, so we need to find somewhere that clearly states the latest version. After some hunting around, we can see the latest version number detailed in a few different pages:

• http://jQuery.com/
• http://code.google.com/p/jqueryjs/downloads/list
• http://docs.jQuery.com/Downloading_jQuery

...So which page do we use to build our Femtoo Tracker? You should try to choose the page that is likely to be more 'reliable'. In this sense 'reliable' means when the content is clearly displayed and contained inside it's own specific part of the page - this generally means that the content will be less effected by other changes and updates to the page.

From looking at the above three pages, I would say that the best option would be to use http://jQuery.com/. If we take a look at this page we can see (in red writing just below the download button) that the latest version is "1.3.2". By using the Femtoo Tracker wizard we can extract the text "Current Release: v.1.3.2" - this is fine and when this text changes we can hope that it implies a tasty new version of jQuery is available to download! But it may also imply (for example) that the text has changed from "Current Release: v.1.3.2" to "Latest Release: v.1.3.2"...

However, by setting a Tracker Rule, we can tell Femtoo that we want the content to be a 'number' and specify that we only be notified when this number is greater than "132". By specifying content as a number, Femtoo will attempt to extract any valid number from any given text - in this case given the text "Current Release: v.1.3.2", Femtoo will extract "132" - pretty neat, eh?

Conclusion

Femtoo gives you the tools to accurately pin-point specific parts of a page that mean something to you. The key is to know what you want to track and where to find the information - Femtoo will handle the rest.