3 Semplici ed utili tutorial per jQuery


Oggi con questo articolo stileremo una lista di 10 semplici ed utili esempi dell’ormai nota libreria di Javascript, jQuery. Con queste librerie, realizzare effetti complessi, diventa veramente banale.

1. Tooltip con jQuery

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale:

  1. Semplice tooltip
  2. Testo con anteprima immagine
  3. Thumbnail con anteprima ingrandita

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente dovete inserire il seguente codice tra i all’interno dei tag head, tra <script type=”text/javascript”> //il codice qui </script>, oppure realizzate un nuovo file .js incollate il seguente codice ed importatelo con <script src=”funzione.js” type=”text/javascript”></script>

[code]
this.screenshotPreview = function(){
/* CONFIG */

xOffset = 10;
yOffset = 30;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’screenshot’><img src=’"+ this.rel +"’ alt=’url preview’ />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.imagePreview = function(){
/* CONFIG */

xOffset = 10;
yOffset = 30;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’preview’><img src=’"+ this.href +"’ alt=’Image preview’ />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id=’tooltip’>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
[/code]

Step 3

Come nello Step 2, importate quest’altra funzione:

[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]

Step 3

Come nello Step 2, importate quest’altra funzione:

[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]

Step 4

Adesso i tooltip sono funzionanti, occorre solo inserire il seguente file nel nostro foglio di stile CSS.

[code]
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
[/code]

Step 5

Siamo giunti al termine del nostri piccolo tutorial. Adesso dobbiamo solo richiamare il tutto nei seguenti modi:

Classico tooltip con testo

[code]
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
[/code]

Testo con anteprima immagine

[code]
<a href="image.jpg" class="preview" 2="2="2="title="Great""" 3="looking" 4="4="4="landscape">Roll""" 5="over" 6="to" 7="preview</a>" 8="[/html" language=">"]
<h5>Immagine con tooltip di anteprima</h5>
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>
[/code]

Source


2. Horizontal Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente inserite tra i tag il seguente codice:

[code]
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
[/code]

Step 3

Diamo un tocco di classe con i CSS (in realtà questi sono essenziali al funzionamento dello script):

[code]
ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}

ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
[/code]

Step 4

Infine richiamiamo tutte le funzioni con il seguente codice:

[code]
<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>
[/code]

3. Menu Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente inserite tra i tag la segueente funzione:

[code]
function initMenus() {
$(‘ul.menu ul’).hide();
$.each($(‘ul.menu’), function(){
$(‘#’ + this.id + ‘.expandfirst ul:first’).show();
});
$(‘ul.menu li a’).click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;

if($(‘#’ + parent).hasClass(‘noaccordion’)) {
$(this).next().slideToggle(‘normal’);
return false;
}
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
if($(‘#’ + parent).hasClass(‘collapsible’)) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
}
return false;
}
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
[/code]

Step 3

Inoltre per rimuovere un bug del buon vecchio IE, utilizziamo i conditional tag:

[code]
<!–[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]–>
[/code]

Step 4

Adesso decoriamo il nostro menu, aggiungendo il seguente codice nel nostro foglio di stile.

[code]
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}

ul.menu a {
display: block;
text-decoration: none;
}

ul.menu li {
margin-top: 1px;
}

ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}

ul.menu li a:hover {
background: #000;
}

ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
[/code]

Step 5

Adesso richiamiamo tutte le funzioni con il seguente codice html:

[code]
<ul id="menu1" class="menu">
<li style="position: static;">
<a href="#">Weblog Tools</a>
<ul style="display: block;">
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>

<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Programming Languages</a>
<ul style="display: none;">
<li><a href="http://www.php.net/">PHP</a></li>

<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>

</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco’s blog (no submenu)</a></li>
<li style="position: static;">
<a href="#">Cool Stuff</a>
<ul style="display: none;">
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>

<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Search Engines</a>
<ul style="display: none;">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>

<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
[/code]

Nota bene

Modificando la classe, potremo ottenere degli effetti differenti. Di seguito le classi disponibili:

  1. menu
  2. menu expandfirst
  3. menu noaccordion
  4. menu collapsible expandfirst

Source

jQuery Tools: la libreria di widget che mancava

Vi segnalo jQuery Tools una bella libreria di widget che potrebbero estendere le funzionalità del vostro sito web. Si tratta in verità di un plugin di jQuery da includere nell’header delle vostre pagine e che vi consento di creare: tab, tooltip, expose, overlay, scrollable, flashembed e ovviamente tutte le combinazioni dei precedenti.

jquery-tools

Continua a leggere

12 Trucchi da sapere per usare jQuery

Quando si scrive in jQuery si impara facilmente che esistono diverse maniere di implementare la stessa cosa. La tendenza è di migliorare sempre più scrivendo meno righe di codice per ottimizzare il sorgente. Spesso si cerca di trovare anche la strada più elegante per risovere un problema. Ecco quindi un elenco di trucchi che potrebbero esservi utili

trucchi per jquery

1. jQuery cheatsheets

Prima di tutto è sempre meglio avere qualche cheatsheet sotto mano. In rete ne ho trovati 3:

jQuery Cheatsheet da ColorCharge
jQuery Cheatsheet from ColorCharge WebBlog

jQuery Cheatsheet da Gscottolson WebBlog
jQuery Cheatsheet from Gscottolson WebBlog

jQuery Cheatsheet da From Far East WebBlog
jQuery Cheatsheet from From Far East WebBlog

2. Una scorciatoia per jQuery: $(document).ready

Questo è un ottimo suggerimento, perchè non mi ricordo mai come si scrive questo:

$(document).ready(function() {  
//write your code here
}

Si può scrivere equivalentemente attraverso una funzione anonima, sono funzionalmente uguali:

$(function(){
//write your code here
}); 

3. Aprire in una nuova finestra

L’attributo "target" nei collegamenti "<a>" non è un attributo valido per lo standard STRICT W3C. Possiamo aggirare il problema utilizzando l’attributo REL e un po’ di codice jQuery per ricreare l’attributo TARGET in modo dinamico mantendo sempre valido il nostro sorgente HTML. E’ troppo semplice per funzionare, eppure è così:

	$('a[rel=external]').attr('target','_blank');
<a href="http://www.queness.com" rel="external">Queness in new window</a>

4. Rendere l’intero LI cliccabile

Questo trucco è veramente utile quando usi i punti elenco (LI) per creare menu. Quello che fa è rendere cliccabile l’intera area coperta dal LI (anche fuori da eventuali link A) e cerca automaticamente l’indirizzo di destinazione  tra i link contenuti nel LI.:

	$("ul li").click(function(){
	  //get the url from href attribute and launch the url
	  window.location=$(this).find("a").attr("href"); return false;
	});
<ul>
	<li><a href="home">home</a></li>

	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

5. Cambiare tra diversi fogli di stile

Vuoi avere design diversi all’interno del vostro sito e devi cambiare dinamicamente tra diversi fogli di stile. Puoi farlo con jQuery facilmente:

	$("a.cssSwitcher]").click(function() {
		//swicth the LINK REL attribute with the value in A REL attribute
		$("link[rel=stylesheet]").attr({href : this.attr(rel)});
	});
<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 

<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

6. Disabilitare il click destro del mouse

Qualche nostro cliente ci chiede di poter disabilitare sul loro sito il click destro del mouse per occultare le funzioni messe a disposizione o per creare un proprio menu contestuale. Ecco come farlo in jQuery:

$(document).bind("contextmenu",function(e){
	//you can enter your code here, e.g a menu list
		
	//cancel the default context menu
    return false;
});

7. Leggere le coordinate x e y del puntatore del mouse

Questo script catturerà le coordinate x e y del puntatore del mouse e le mostra sulla pagina.

$().mousemove(function(e){
	//display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
<p></p>

8. Impedire il comportamento di default

Può capitare di usare il tag A per altri scopi che condurre l’utente ad un link. Succede però che quando si clicca, il browser ci porta ad inizio pagina perchè l’attributo HREF è valorizzato con il cancelletto (#). Per risolvere questo problema, dobbiamo disabilitare il comportamento di default dei link A:

$('#close').click(function(e){  
     e.preventDefault();
}); 

/* OR */

$('#close').click(function(){  
    return false;
}); 
<a href="#" id="close"></a>

9. Il bottone "torna su"

Un utile bottone "torna su" è possibile implementarlo attraverso uno specifico plugin. Con scrollTo si creerà un simpatico effetto di risalita della pagina. Scarica il plugin jQuery scrollTo
$(‘#top’).click(function() {
$(document).scrollTo(0,500);
}

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

10. Colonne di altezza uguale

Questo script è abbastanza utile anche se non ho ancora avuto modo di provarlo. Se vuoi colonne della stessa altezza, questo script risponderà alle vostre esigenze:

$(document).ready(function() {
    setHeight('.col');
});

//global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(col) {
	//Get all the element with class = col
	col = $(col);
	
	//Loop all the col
    col.each(function() {        
	
		//Store the highest value
		if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
	
	//Set the height
    col.height(maxHeight);
}
<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>

</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>

11. Scrivere il vostro selettore personale

Questo è un trucco per utenti avanzati:

//extend the jQuery functionality
$.extend($.expr[':'], {  
	
	//name of your special selector
    moreThanAThousand : function (a){
		//Matching element
		return parseInt($(a).html()) > 1000;
	}
});  
	
	
$(document).ready(function() {
	$('td:moreThanAThousand').css('background-color', '#ff0000');
});

12. Ridimensionamento del font

Questo trucco si trova spesso nei siti e vi permentte di ridimensionare il corpo del carattere per adattarlo meglio alle vostre esigenze di lettura:

$(document).ready(function(){

	//ID, class and tag element that font size is adjustable in this array
	//Put in html or body if you want the font of the entire page adjustable
	var section = new Array('span','.section2');
	section = section.join(',');

	// Reset Font Size
	var originalFontSize = $(section).css('font-size');  
		$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});
	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});
  
	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});
<a class="increaseFont">+</a> | 

<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>

<div class="section2">This one is adjustable too!</div>

(tratto da Queness)

Riuscirà il Javascript a sostituire il Flash? Google ci sta provando

Quando un cliente chiede un sito con "effetti speciali" come animazioni, suoni o con interattività particolari, noi programmatori web pensiamo subito, nostro malgrado, ad un’applicazione Flash. Lo svantaggio è quello di avere una scatola nera che gli spider non riescono a indagare e ovviamente si è limitati ai browser che supportano il player di Adobe.

Con l’avvento dei framework per Javascript, come jQuery, YUI o Mootools si è spostato l’ago della bilancia verso il Javascript a discapito del Flash. Questa tendenza si rafforza sempre più. Guardate qua. Si chiama ChromeExperiments ed è un sito supportato da Google che raccoglie tutti gli script "edge", ovvero di confine, script spinti all’estremo, per valorizzare la potenza di Javascript.

esperimenti javascript

Sono chiamati "esperimenti" e funzionano solo con l’interprete Javascript integrato in Google Chrome, il browser fatto su misura per il grande motore di ricerca  di Mountain View. Serve molta fede per poter credere che siano stati fatti con Javascript ma questo lo certifica Google, una garanzia.

We think JavaScript is awesome. We also think browsers are awesome. Indeed, when we talk about them, we say they are the cat’s meow – which is an American expression meaning AWESOME.

In light of these deeply held beliefs, we created this site to showcase cool experiments for both JavaScript and web browsers.

These experiments were created by designers and programmers from around the world. Their work is making the web faster, more fun, and more open – the same spirit in which we built Google Chrome.

Naturally, if you’ve made something fun and fast with JavaScript, please send it in. We can’t post everything, but we’d love to see it.

Thanks for visiting, and happy experimenting.

Un framework per Indesign

In questi giorni sto lavorando su un nuovo progetto che ha l’obiettivo di creare un framework per Adobe Indesign. Il progetto è ambizioso e stiamo già vedendo i primi risultati.

un framework per indesign

Nel dettaglio, l’idea è di creare un insieme di comandi, un framework appunto, che possa aiutare lo sviluppatore a creare script per l’impaginazione automatica di listini prezzi, cataloghi, libri, ecc… Se poi aggiungiamo anche la lettura dei dati da un database il gioco è fatto. Le pubblicazioni saranno così automatizzate e l’utente potrà, per esempio, rigenerare quante volte vuole il proprio listino prezzi semplicemente rilanciando lo script .

Forse non tutti sanno che Adobe Indesign oltre ad avere un’interfaccia grafica per l’impaginazione visuale, ha anche un’API che consente di lanciare comandi attraverso del codice sorgente. Interpreta 3 linguaggi: Javascript, VB e AppleScript. Visto la tendenza, abbiamo deciso di intraprendere la strada del Javascript e di creare un framework tipo jQuery per il web.

In questo articolo vorrei solamente segnalarvi una pagina che abbiamo trovato interessante perchè fornisce alcune indicazioni utili per “programmare ad oggetti” in Javascript, argomento che non avevo mai approfondito fino a questo momento. Devo dire che il supporto al programmazione ad oggetti è quanto meno deludente in Javascript, soprattutto quando si arriva da un’esperienza di Ruby on Rails. Su questa pagina vengono indicati i sistemi per definire variabili e metodi statici, privati e pubblici.

Se siete interessati a questo framework scrivetemi, vi terrò aggiornati sugli sviluppi!
Leggi la seconda parte dell’articolo con il video dimostrativo dei primi risultati ottenuti.

Sexy Curl, un plugin jQuery per voltare pagina

sexy curl, voltare pagina, jquery plugin

Sexy Curl è un simpatico plugin per jQuery che crea un simpatico effetto grafico per girare la pagina. In realtà viene creato un piccolo lembo di pagina che l’utente può trascinare per vedere cosa c’è sotto. Il plugin simula lo sfogliare di una pagina ed è posizionato solitamente, su diversi siti, in alto a destra. E’ utile per mostrare banner pubblicitari o segnalare qualche notizia di rilievo.

Fino a poco tempo fa si utilizzava PagePeel, un oggetto flash che creava lo stesso effetto ma appunto, era necessario caricare un Flash. Sexy curl è invece molto leggero, facilmente personalizzabile e abbastanza fluido. Potete osservare il funzionamento del plugin guardando la simpatica demo che ha creato l’autore e che mostra il codice HTML che "sta sotto" alla pagina.

La licenza è la MIT licence e, riportando le parole dell’autore, vuol dire che potete farne tutto quello che volete:

That means you can do whatever you damn well please with it.
You can copy, modify, merge, publish, distribute, sublicense, and/or sell copies
You can even print it out and wear it as a hat if you like.

Un eBook in italiano sulle novità di Ruby on Rails 2.2

Ruby on Rails

In questi mesi ho approfondito sempre più le mie conoscenze su Ruby on Rails, sviluppando un gestionale interno per il project management. Devo dire che superate le difficoltà iniziali (credo normali per chi è alle prime armi) ora sono pienamente soddisfatto di questo bel linguaggio. La cosa che mi ha disturbato di più inizialmente è la simbiosi tra Rails e Prototype, un framework javascript e, da buon jQuery-sta, la cosa mi dava molto fastidio. Il problema è stato superato installando un plugin che sostituiva il Prototype con jQuery.

A distanza di qualche mese ho acquisito una discreta fluidità di programmazione e posso finalmente dire che RoR è semplicemente divertente e molto produttivo. Ci si sente "agili" che vuol dire che con poche righe di codice si fanno tantissime cose e se si è troppo prolissi, vuol dire che si sta sbagliando qualcosa.

E’ chiaro che RoR è un framework adatto ad applicazioni web, per cui non è indicato per lo sviluppo di siti web tradizionali (per ora mi trovo meglio svilupparli in PHP di cui sono "madre lingua").

Un problema che ho riscontrato con RoR, causato dalla sua giovinezza, è la sua mutabilità nel corso delle release. Spesso non si fa in tempo a capire come funziona un oggetto che la versione successiva ne cambia il comportamento. Per aggiornarvi sulle ultime variazioni, vi consiglio questo bel eBook gratuito in formato PDF di Carlos Brando intitolato “Ruby On Rails 2.2 – What’s New“ e tradotto in italiano da Carlo Pecchia. Sono 120 pagine ben scritte che vi aiuteranno a rinfrescare alcuni metodi e impararne di nuovi.