Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Clippings: bookmarks in your site
How to enhance your site with a list of users’ favourite stories
- di Francesco Caccavella
- 8 Aprile 2002
Versione italiana dell’articolo: «Clippings: i Preferiti per il tuo sito»
What are Clippings
If you are using Explorer or Netscape 6, looking on the left of this page, you can notice a new feature added to PRO.html.it: Clippings (“I tuoi preferiti”). Clippings are just a list of stories and Web pages that users can save during their browsing in this site and that they can read at later. They are the same as Bookmarks in Netscape or Favourites in Explorer but (this is the fun) they are not stored in your browser, but in the site you are browsing.
Clippings follow users during their browsing in a site and make it possible to save links to most interesting stories simply by one click on the icon on the left of title. The stored stories list, automaticaly updated, will be showed at the next access as well.
Clippings are a useful feature both for users, who can enjoy a “container” where to store their favourite stories or those to read later, and for webmasters, who can call on another fidelity feature.
The base code
This code uploads any component of Clippings in the memory of the users’ computer using the browser software. Interaction with users is managed by a box in which stories titles will be showed and options to delete them, and by a command that will allow the users to add them just by a mouse clicking.
The box is build by the following code:
Here is the code that allows to add a story or an element to the list:
<a id=”clp1“>First story</a>
<a id=”clp2“>Second story</a>
These lines have to be followed, also at the end of the page, by the code below, which recalls the “add” function:
allClippings[allClippings.length] = new Clipping(1,”First story“,”http://www.site.com/story1.htm“);
allClippings[allClippings.length] = new Clipping(2,”Second story“,”http://www.site.com/story2.htm“);
The following options appear in the above code between brackets and separated by a comma:
- Story ID: it must be unique in any single domain and it has to recall the same number written in the tag <A id=”clpnumber“>
- Story title: it is the title that will be shown in the “favourites” box
- Story URL: it is the link that refers to the story or to the page that you want to show
You can notice that any single story is identified by an unique number (e.g. 1 and 2) that is exactly recalled in both codes. You can only edit the options marked in red.
In the “Esempio” page (Esempio 1) you can find the result and the relative code.
The most remarkable aspect in this Javascritpt is its unlimited customizability. You can personalize most of the code, including its visualization. E.g., it could be useful to your users to insert the code in a table to be located anywhere in your site, as in Esempio 2.
Script language is also customizable. In order to edit the “No Clippings saved” message, you just have to open the clippings.js file, search for the drawClippings() function and edit:
newHTML = “<span class=’clippingItem’>There are currently no Clippings saved. To add a Clipping click on the Clipping icon.<br><br>”;
newHTML += “You can access your Clippings either through this menu, or clicking on the number to the right of the Clippings menu. That number represents unread Clippings.”
with your own message.
You could also edit the links visualization in the “Favourites” box. In this case as well, you should edit the drawClippings() function. In the example below, we added a list tag (<LI>) in order to both show a disc on the left of title and to show the stored stories on different lines. We edited
In our case, we also removed the opportunity to read stories in sequence by the “Next Unread clipping” command. In our opinion, it was enough to click on the link. So, we have removed from the code the line:
In order to manage the size of the box area we need to edit the clippingsSetContainerHeight function in the clipping.js file. This function automatically resizes the box at 350 pixels, if the screen resolution allows it. If you want your box size to fit the stories number, delete this function.
You can also edit the lines that allow to add a story or a page. The original code can be edited as follows:
<a id=”clp1″ STYLE=”cursor: pointer; cursor: hand;”><img src=”/img/add.gif” heigth=”11″ width=”11″ alt=”Bookmark this story”></a> First story
allClippings[allClippings.length] = new Clipping(1,”First story”,”http://www.site.com/story1.htm”);
We added a css (STYLE=”cursor: pointer; cursor: hand;”) that forces the cursor to become a hand when passing on the “add” link. It is important to write both the cursor instructions in the same order of this example: neither Netscape 6.x nor Mozilla support the hand value, but the pointer value, which is the W3C standard. Moreover, we also associated an image to the link and wrote an ALT tag to show a description of the action to the user.
Every editing is shown in Esempio 3.
Clippings only run on browser with a good W3C Document Object Model (DOM) support, i.e. Explorer (also in versions 5) and Netscape (from version 6 on). Opera users cannot view this script.
Here are further informations by the author: (see also http://www.smokinggun.com/demos/clippings.php):
- Clippings ID have to be unique within any single domain
- Clippings can be repeated within the same page – the script recognizes copies
- Cookies are required. An alert message will be shown in the case your browser do not support cookies
- This script does not provide dinamic ID generaration for any single clipping. You could fit this problem by using a PHP dinamic function in order to automatically generate stories ID (in this site the function is provided by ASP)
- This script is copyright protected and released under GPL license. You can use it, but you have to mantain copyright and follow the license. For any question, please contact firstname.lastname@example.org
- Please, read comments in clippings.js file for further informations
Se vuoi aggiornamenti su Clippings: bookmarks in your site inserisci la tua email nel box qui sotto:
Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi: