Un errore particolarmente importante che fanno molti programmatori è mescolare la logica applicativa e il modello. Gli sviluppatori PHP, ad esempio, hanno la tendenza di mettere insieme una quantità tremenda di query SQL nella loro logica del sito web, con conseguente codice impossibile da mantenere. Un buon numero di prodotti sono emersi per aiutare gli sviluppatori per evitare ciò, soprattutto framework MVC come Symfony o Zend Framework.

Tuttavia, se si sta utilizzando un framework MVC o codice personalizzato, si può ulteriormente separare la logica dal modello, approfittando di due funzioni dei database relazionali, Viste e stored procedure. Entrambe le funzioni consentono di spostare la logica applicativa all’interno del server del database stesso, minimizzando in tal modo la serie di modifica da fare in secondo momento a causa di (rifattorizzazione) refactoring del codice.

Le viste sono essenzialmente alisa query che permettono di semplificare notevolmente la sintassi utilizzata per eseguire lunghe query, come ad esempio una join.
Ad esempio, supponiamo che stiamo costruendo un sito e-commerce e che deve fornire ai clienti un modo semplice per visualizzare i loro prodotti precedentemente acquistati. Questa caratteristiche comporta spesso l’uso di una join, come la seguente:

SELECT p.id as id, p.titolo as titolo FROM prodotti p LEFT JOIN ordine_dettagli od ON od.prodotto_id = p.id
LEFT JOIN ordini o ON o.id = od.ordini_id WHERE o.cliente_id='12345';

Utilizzando una vista è possibile eliminare molti dei problemi che circondano l’incorporamento di query complesse, solo un alias al posto della join come questo:

SELECT * from prodotti_clienti_join WHERE o.cliente_id = '12345';

Per creare una vista, accedere al vostro client MySQL o tool Web-based, come phpMyAdmin, ed eseguire la seguente query:

CREATE VIEW prodotti_clienti_join AS SELECT p.id as id, p.titolo as titolo FROM prodotti p
LEFT JOIN ordine_dettagli od ON od.prodotto_id = p.id LEFT JOIN ordini o ON o.id = od.ordini_id;

Dopo aver creato la vista, se si decide di aggiungere un’altra colonna ad essa, tutto quello che dovete fare è accedere nuovamente al client MySQL e utilizzare l’istruzione ALTER VIEW. Dopo che la vista è stata cambiata, la colonna nuova sarà immediatamente disponibile all’interno di ogni set di record recuperato dalla query vista.

Iterare gli array associativi in PHP è molto più semplice, ma proprio in questi giorni ho avuto l’esigenza di ottenere la stessa funzionalità in JavaScript, e mi sono reso conto di non saper come recuperare i dati da un array associativo con un ciclo nel linguaggio JavaScript.

L’utilità nell’utilizzare un array associativo è dato dal fatto che posso selezionare tutti i valori relativi ad una determinata chiave, (indice dell’array), senza dover sapere in quale posizione dell’array è presente il dato.

In PHP per elencare in maniera ciclica tutti i dati occorre fare ricorso ad una struttura logica conosciuta come Foreach. Volendola applicare avremmo un codice simile al seguente:

$array_associativo = array(
  'gen' => 'Gennaio',
  'feb' => 'Febbraio',
  'mar' => 'Marzo',
  'apr' => 'Aprile',
  'mag' => 'Maggio',
  'giu' => 'Giugno',
  'lug' => 'Luglio',
  'ago' => 'Agosto',
  'set' => 'Settembre',
  'ott' => 'Ottobre',
  'nov' => 'Novembre',
  'dic' => 'Dicembre'
);
foreach ($array_associativo as $key => $value) {
  echo '[' . $key . '] => ' . $modello . ',<br />';
}

In JavaScript lo stessa variabile la si potrebbe creare in questo modo:

var array_associativo = new Array();
array_associativo['gen'] = 'Gennaio';
array_associativo['feb'] = 'Febbraio';
array_associativo['mar'] = 'Marzo';
array_associativo['apr'] = 'Aprile';
array_associativo['mag'] = 'Maggio';
array_associativo['giu'] = 'Giugno';
array_associativo['lug'] = 'Luglio';
array_associativo['ago'] = 'Agosto';
array_associativo['set'] = 'Settembre';
array_associativo['ott'] = 'Ottobre';
array_associativo['nov'] = 'Novembre';
array_associativo['dic'] = 'Dicembre';
);

Anche in JavaScript esiste una struttura logica che esegue questa funzione, ma non si chiama Foreach:

for (var key in array_associativo) {
  document.write('[' key + '] => ' + array_associativo[key] + ',<br /> ');
}

In effetti è sempre il solito for, ma con una condizione differente che permette di analizzare un array associativo.

Quando si passa su un link, l’elemento si anima e si inclina verso sinistra o destra. Gli effetti sono stati creati solo con i CSS.

Vengono utilizzate le funzionalità di transizione specifiche per ogni browser tramite hack CSS (dato che ciascuno ha il proprio prefisso). La durata della transizione è impostata su 250 millisecondi e la scala/rotazione è impostata ad un valore predefinito.
Sempre tramite CSS, allo stato hover dei link viene assegnato un colore di sfondo, gli angoli arrotondati per migliorare l’effetto e la scala/rotazione modificati per inclinare l’elemento.

Foglio di stile CSS

.cpojer-links a	{
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

Fonte David Walsh Blog e demo.

Funziona su tutte le ultime versioni di Opera, Chrome, Safari e Firefox, anche se su Opera e Firefox le trasformazioni non sono proprio ottime come Webkit, motore di Safari e Google Chroem.

Pagine HTML

<div id="shadows"><!--START ID shadows-->
  <article>
    <h1>CSS3 Wrapping Drop Shadows</h1>
    <p>With <del>out any</del> minimal extra bullshit markup(You need the first child to be a container element like a header, hgroup or a div). Oh and they stretch G. Webkit only for now, although I'm sure Firefox could do this trick as well.</p>
  </article>
</div>

Foglio di stile CSS3

body {
  font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
  font-size: 13px;
  background: #3a6682;
}
div#shadows {
  position: relative;
  width: 50%;
  margin: 20em auto;
}
article {
  background: #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 1.5em; color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  text-align: center;
  display: block;
}
article:before, article:after {
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 15px;
  z-index: -1;
  width: 50%;
  height: 20%;
  content: "";
  background: rgba(0, 0, 0, 0.7);
}
article:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  right: 10px;
  left: auto;
}
article:before {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  right: auto;
  left: 10px;
}

Fonte Nimbupani Designs e demo.

Se state cercando uno script lightbox che è in grado di gestire gli iFrame, contenuti provenienti dal server tramite chiamate Ajax, contenuti HTML in linea, immagini, video e altro ancora, NyroModal è un ottimo plugin jQuery che permette tutto ciò.

Negli ultimi giorni mi sono trovato nella posizione di aver bisogno di un semplice, funzionale, plugin lightbox per jQuery facile da usare, una valida alternativa a Facebox. Dopo qualche ricerca, ho trovato diversi plugin sviluppati per questo scopo, e tutti hanno i loro pro e contro. Molti dei plugin supportano solo immagini, non utili alla mia richiesta di inserire contenuti in linea, video Flash e contenuto proveniente da chiamate Ajax.

Finalmente ho trovato e provato NyroModal e sono rimasto molto impressionato. Semplice da utilizzare, fondamentalmente tutto quello che dovremo fare è includere i file CSS e JavaScript appropriati, quindi applicare una classe di nyroModal agli elementi che si desidera aprire nel lightbox.

NyroModal è altamente personalizzabile, è possibile cambiare il suo aspetto grafico utilizzando i CSS, modificare le animazioni utilizzando le funzioni jQuery e personalizzare la sua funzionalità attraverso varie funzioni e proprietà.

Per impostazione predefinita, qualsiasi finestra modale (con eccezione dei file SWF) si ridimensiona automaticamente in base alla dimensione corrente della finestra del browser. Se l’utente ridimensiona il suo browser, anche la finestra modale si ridimensiona fino alla dimensione massima del contenuto.

NyroModal permette di impostare una galleria di contenuti con estrema facilità, semplicemente assegnando un identico valore all’attributo rel da attribuire a ciascuna voce della galleria: è anche possibile implementare gallerie multiple sulla stessa pagina utilizzando diversi attributi rel a cui applicare diverse impostazioni del plugin.

Un’altra funzionalità supportata, quella di effettuare l’upload di file tramite Ajax e gestire le informazioni del file ricevute, semplicemente associando la classe nyroModal al tag form del modulo.

Caratteristiche

• Chiamate Ajax
• Chiamata Ajax con targeting del contenuto
• Immagine singola
• Galleria immagini con freccie di navigazione
• Galleria con ogni tipo di contenuto
• Form
• Form in iFrame
• Form con targeting del contenuto
• Form con upload di file
• Dom Element
• IFrame
• Gestione degli errori
• Finestra modale ridimensionata in base alle dimensioni della finestra del browser
• Bottone ESC da tastiera per chiudere il lightbox
• Animazioni personalizzabili
• Aspetto personalizzabile
• Titolo alla finestra modale
• Standard W3C HTML valido (transitional)

NyroModal è disponibile per il download sotto licenza MIT. Potete trovare ulteriori informazioni, demo e download sul sito web del progetto NyroModal.

jTwitter è un semplice plugin jQuery che ci fornisce un facile accesso alle Twitter API per prelevare informazioni su uno specifico utente di twitter tramite il suo nome utente.

Il risultato della consultazione delle Twitter API è un oggetto JSON costituito dai dettagli dell’utente, quali nome completo, URL homepage, conteggi vari come seguaci, amici, favoriti, numero stati (tweets), localizzazione, etc.

Utilizzo

Per prima cosa nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e poi scrivere il seguente script JavaScript per utilizzare le funzionalità del plugin:

$jTwitter('nome_utente_twitter', num_tweet, function(tweets){
  // funzione richiamata per l'utilizzo delle info ricevute
});

E’ possibile specificare il nome utente twitter di cui si richiedano le informazioni e gli ultimi stati, e opzionalmente il numero di ultimi tweets postati dall’utente, se non specificato verranno prelevati gli ultimi 5 stati. Infine la funzione in cui gestire e manipolare le informazioni ricevute sotto forma di oggeto JSON

Ecco un mio piccolo esempio:

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.jtwitter.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      // Ottiene gli ultimi 10 stati dal mio account
      $.jTwitter('mainick', 10, function(tweets){
        $('#stati').empty();
        $.each(data, function(i, tweet){
          $('#stati').append(
            '<div class="stato">'
            +' <div class="msg">'
            +    tweet.text
            +' </div>'
            +'</div>'
          );
        });
      });
    });
  </script>
</head>
<body>
  <h1>Tweet by MaiNick</h1>
  <div id="posts">Attendere...</div>
</body>
</html>

SliderNav è un plugin per jQuery che permette di scorrere una lista dinamica mediante una barra di navigazione verticale, costituita da indici. L’autore prende ispirazione dalla rabrica telefonica dell’iPhone, infatti è realizzato principalmente per un elenco alfabetico, ad esempio una rubrica di contatti, ma può essere utilizzato per qualsiasi cosa.

Il plugin aggiunge automaticamente la barra di navigazione e imposta l’altezza per la lista in base a quanto è alta la barra. E’ possibile scorrere il contenuto della lista utilizzando la rotellina del mouse.

Utilizzo

SliderNav è semplice da far funzionare, ma prima nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e il foglio di stile CSS associato:

<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="slidernav.js"></script>

Aggiungiamo il codice HTML che crea la nostra lista di contatti utilizzando la struttura seguente:

<div id="slider">
  <div class="slider-content">
    <ul>
      <li id="a"><a name="a" class="title">A</a>
        <ul>
          <li><a href="/">Adam</a></li>
          <li><a href="/">Alex</a></li>
          <li><a href="/">Ali</a></li>
          <li><a href="/">Apple</a></li>
          <li><a href="/">Arthur</a></li>
          <li><a href="/">Ashley</a></li>
        </ul>
      </li>
      <li id="b"><a name="b" class="title">B</a>
        <ul>
          <li><a href="/">Barry</a></li>
          <li><a href="/">Becky</a></li>
          <li><a href="/">Biff</a></li>
          <li><a href="/">Billy</a></li>
          <li><a href="/">Bozarking</a></li>
          <li><a href="/">Bryan</a></li>
        </ul>
      </li>
      etc...
    </ul>
  </div>
</div>

Una volta impostato l’intera lista, è semplicemente una questione di chiamare la funzione sliderNav sull’elemento che abbiamo appena creato:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav();
});
</script>

il codice sopra è da scrivere nell’intestazione head della nostra pagina HTML, dopo aver richiamato il plugin.

Opzioni

E’ possibile inizializzare il plugin modificando le impostazioni predefinite in base alle proprie esigenze:

• height: impostare questo valore in pixel se si vuole evitare il rilevamento automatico basato sull’altezza della barra di navigazione verticale.
• items: per default il plugin genera la navigazione in ordine alfabetico utilizzando tutte le 26 lettere dell’alfabeto inglese, ma è possibile inizializzarlo utilizzando delle voci personalizzate.
• arrows: il plugin visualizza delle frecce di scorrimento sulla lista, utili per gli utenti che non dispongono di un mouse con rotellina; i valori possibili di tipo booleano sono true (visualizza) o false (nasconde).

Ecco il codice per inizializzare il plugin, da sostituire a quello semplice:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav({
    items: ['voce1','voce2','voce3'],
    height: '200',
    arrows: false
  });
});
</script>

Conclusioni

SliderNav, come ci consiglia lo stesso autore, può tornare utile principalmente quando vogliamo mostrare molte informazioni in un piccolo box organizzate con un ordine alfabetico (o per data).
Sulla pagina dedicata al plugin SliderNav è possibile scaricare il codice, visualizzare la demo e ottenere ulteriori aggiornamenti.

Cloud Zoom è un plugin jQuery, di peso leggero, che permette di creare un effetto zoom sulle immagini nelle vostre pagine web. E’ altamente personalizzabile con diverse caratteristiche come l’effetto tinta, zoom interno o un sottile effetto di focus, e soprattutto è cross-browser, funziona in tutti i browser web più importanti tra cui il caro vecchio IE6.

Cloud Zoom è molto semplice da implementare, il sito del progetto non manca di una ricca documentazione. Si può facilmente personalizzare l’aspetto con una gallery, lente o finestra di zoom usando i CSS.
Offre diverse opzioni di configurazione che consentono di personalizzare il suo comportamento, tra cui: altezza, larghezza e posizione della finestra di zoom, tinta da applicare sulla parte di immagine non zoommata, opacità, dimensione porzione della parte da zoommare, abilitare o disabilitare i titoli.

Caratteristiche

Riassumento, le caratteristiche che rendono questo plugin davvero ottimo sono:

• Facile integrazione con HTML
• Peso leggero (nella versione compressa solo 6Kb)
• Movimento nello zoom precisi e morbidi
• Modalità gallery
• Effetti tinta, zoom interno o soft-focus
• Completamente accessibile senza JavaScript, CSS o browser testuali

Cloud Zoom è disponibile per il download sotto licenza MIT, per ulteriori informazioni, demo e download fare riferimento al sito del progetto di Cloud Zoom.

Durante il Google I/O 2010, Google ha fatto grandi annunci. Uno di questi riguarda le Google Fonts API

Letteralmente, è possibile integrare tipi di caratteri diversi da quelli web-safe, universalmente diffusi su tutti i device, semplicemente collegando il nostro documento ad un carattere tra quelli ora disponibili, memorizzati sui server di Google (risparmiando banda per le prestazioni di caching).

Utilizzo

Per usufruire delle Google Font API, abbiamo bisogno di un link al nostro carattere desiderato, e farne riferimento nella proprietà font-family del css. Questo è tutto!

<html>
  <head>
    <title>Utilizzo Google Font API</title>
    <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
    <style>
      body { font-family: 'Lobster', arial, serif; font-size: 70px; }
    </style>
  </head>
  <body>
    Hello World
  </body>
</html>

Per la lista aggiornata dei fonts disponibili è possibile far riferimento alla Google Font Directory.

Per conoscere le operazioni eseguite dietro le quinte dalle Google Font API potete leggere l’articolo sul blog di Html.it

In questo tutorial di oggi vedremo come creare miniature di immagini con PHP e l’uso della libreria GD.

Caricare sul server immagini in dimensioni originali può essere dispendioso per lo spazio a disposizione ma soprattutto per la banda quando bisogna visualizzarle ad ogni richiesta al server.
In questo caso la libreria GD si rivela utilissima perché permette di poter prendere un’immagine jpg, gif o png e crearne una nuova con dimensioni ridotte, quindi più leggera e più veloce da caricare.
Durante il ridimensionamento delle immagini è inoltre possibile ridefinire il livello di compressione, regolando quindi il rapporto qualità/dimensione, rendendo così più veloce il caricamento della miniatura.

Questa funzione php permette il resize di immagini jpeg, gif e png. I parametri da settare per la funzione sono il nome del file da ridimensionare, la cartella dove è presente l’immagine, la cartella dove salvare la nuova immagine e la larghezza della nuova immagine.
Ho deciso di poter passare solo la larghezza perché una dimensione fissa dei lati dell’immagine potrebbe portare a creare un’immagine che non mantiene le proporzioni e quindi deformata.

Funzione per creare e salvare sul server un’immagine ridimensionata

/**
 * =---------------------------------------------------------------------=
 * createThumbnail
 * =---------------------------------------------------------------------=
 * Questa funzione creerà una miniatura dell'immagine caricata.
 *
 * @param $filename	- nome immagine.
 * @param $dir_in		- directory dove è presente l'immagine.
 * @param $dir_out		- directory dove caricare l'immagine.
 * @param $width_image	- larghezza immagine da creare.
 */
function createThumbnail($filename, $dir_in, $dir_out, $width_image) {
  // apro l'immagine originale (jpeg,gif,png)
  if (preg_match('/[.]jpg$/', $filename)) {
    $im = imagecreatefromjpeg($dir_in.$filename);
  }
  else if (preg_match('/[.]gif$/', $filename)) {
    $im = imagecreatefromgif($dir_in.$filename);
  }
  else if (preg_match('/[.]png$/', $filename)) {
    $im = imagecreatefrompng($dir_in.$filename);
  }
  // calcolo la larghezza e l'altezza dell'immagine originale
  $ox = imagesx($im);
  $oy = imagesy($im);
  // larghezza della miniatura data in input
  $nx = $width_image;
  // altezza calcolata proporzionalmente all'immagine originale
  $ny = floor($oy * ($width_image / $ox));
  // creo l'immagine della miniatura
  $nm = imagecreatetruecolor($nx, $ny);
  // copio l'immagine originale in quella della miniatura ridimensionaldola
  imagecopyresized($nm, $im, 0,0,0,0, $nx, $ny, $ox, $oy);
  // verifico l'esistenza della cartella dove salvare la miniatura
  if (!file_exists($dir_out)) {
    if (!mkdir($dir_out)) {
      die("There was a problem.");
    }
  }
  // salvo l'immagine della miniatura
  if (imagejpeg($nm, $dir_out.$filename)) {
    return TRUE;
  } else {
    return FALSE;
  }
}

Con le prime istruzioni condizionali apriamo l’immagine originale sia che essa sia jpeg, gif e png. Poi memorizziamo le dimensioni (larghezza $ox e altezza $oy) dell’immagine originale e le dimensioni della miniatura da creare; la larghezza $width_image fissa passata in input alla funzione e l’altezza calcolate per mantenere la proporzione e non deformare l’immagine nella miniatura.
Una volta creata la base per la miniatura, andiamo a copiare il contenuto dell’immagine originale con le nuove dimensioni (imagecopyresized()). Copiata l’immagine la salviamo con imagejpeg() nel formato jpeg: il terzo parametro, omesso, rappresenta il grado di compressione che può essere un valore variabile da 0 a 100 (più l’immagine è compressa più è leggera e allo stesso tempo più perde di definizione).

Possiamo modificare l’ultima parte della funzione per salvare l’immagine di miniatura nello stesso formato del file originale utilizzando, come nella prima parte, delle istruzioni condizionali e le rispettive funzioni imagejpeg(), imagegif() e imagepng(), di cui è facile intuire il significato.

In conclusione ricordo che la libreria GD è nativa su PHP a partire dalla versione 4.3.0, questo comporta il non funzionamento della funzione createThumbnail() con una versione di PHP inferiore.