Dopo l’arrivo di Panda uscito il 12 agosto 2011, da aprile 2012 è stata la volta di un nuovo algoritmo di casa Google: Penguin.
Mentre Panda si occupa di “selezionare” i contenuti degli articoli e di scartare quelli con poco testo in favore dei più elaborati, Penguin si occupa delle parole chiave usate, utile mezzo per indicizzare i nostri articoli sui motori di ricerca. In entrambi i casi lo scopo è uno solo: eliminare lo spam e le copie di altri articoli per diminuire il più possibile il carico di informazioni “fantasma” (cioè senza contenuto originale).

Ci sono stati naturalmente dei problemi. All’uscita di Panda, alcuni siti o blog si sono visti ingiustamente scendere il numero di visitatori. Si tratta pur sempre di un algoritmo, di un codice, e pertanto non può essere perfetto. A ogni modo, non ci possiamo fare niente: il motore di ricerca è di Google ed è lui a stabilire come deve funzionare.
Quello che invece possiamo fare è dare un’occhiata ai due algoritmi e capire come comportarci per evitare di essere “degradati”.

Panda – algoritmo per i contenuti

Google Panda si occupa di penalizzare i contenuti poveri di un articolo o copiati dall’esterno (1)

Lo stesso Google, il 18 maggio 2011, ha rilasciato una serie di domande generali per capire se il vostro articolo è ben costruito. Non dà risposte, ma i quesiti ci permettono indirettamente di farci un’idea su dove è necessario migliorare.

Spulciando più in profondità, scopriamo che l’unica vera regola è «costruire un articolo dai contenuti unici, possibilmente ben descritti con più di qualche frase introduttiva». Se gli spider di Google (robot che setacciano i siti in cerca di contenuti) trovano anche un solo articolo chiaramente poco adatto, l’intero vostro sito potrebbe essere penalizzato.

Leggi Tutto >>

Il comune protocollo HTTP che conosciamo, di suo, non ha la possibilità di “tenere salvati” i dati trasmessi tra client (il pc di chi naviga nel sito, per intenderci) e server: una volta inviati e ricevuta la risposta, i dati vengono persi.
Fortunatamente sono state create le variabili di sessioni, cioè variabili capaci di tenere attivi gli scambi tra client e server fino alla chiusura del nostro browser.

Come funzionano? La prima volta che il client fa la chiamata al server viene generato un ID, che è unico e quindi identifica senza errori il mittente, e lo salva in un file all’interno del server stesso. A questo punto il motore php genera un cookie che sarà inviato al client e che conterrà quell’ID identificativo.
Il meccanismo è semplice: la prossima volta che si farà una chiamata allo stesso server, questo leggerà il contenuto del cookie e saprà a quale client appartiene.
L’identificativo è chiamato SID ed è una stringa di 32 caratteri alfanumerici.

L’esempio di uso più comune è la login. Una volta inserite username e password, i dati dell’utente saranno salvati in variabili di sessione: fino a quando queste variabili esistono, l’utente potrà continuare a navigare nell’area riservata. Alla chiusura del browser, le variabili si perdono (e in questo caso, perché l’utente al ritorno sia ancora loggato, si deve far uso di altri strumenti, come i cookies).
Un altro esempio è il carrello di un negozio online: una volta scelto un prodotto, questo va a finire nel carrello. L’utente potrà poi navigare nel sito in cerca di altri prodotti da aggiungere al carrello o eliminare elementi dal carrello stesso. Tutto questo può essere gestito dalle nostre variabili di sessione, che tengono tracce delle azioni dell’utente (aggiunta, eliminazione, ecc.).

Una nota: l’uso di variabili di sessione è molto utile in certi casi, ma non indispensabile e può essere sostituito da metodi diversi. Il carrello citato sopra, per esempio, può essere tranquillamente fatto appoggiandosi a un database e ai cookies; allo stesso modo, l’accesso a un’area riservata può essere gestito con cookies e variabili comuni. Il metodo di uso è, come sempre, personale, ma prima di decidere quale usare si deve conoscere i vari approcci.

Nel caso in cui stiate lavorando su un server vostro o in locale e avete la possibilità di mettere le mani sul php.ini, potete configurare le variabili di sessioni a vostro piacimento. Questa trattazione non è nello scopo dell’articolo, ma chi fosse interessato può dare un’occhiata al php.ini nella sezione “[Session]”.

Leggi Tutto >>

Tempo fa abbiamo visto come controllare codice fiscale, partita iva, email e prezzo proveniente da un form attraverso l’uso di funzioni in php. Questo controllo avviene, naturalmente, dopo l’invio dei dati alla pressione di un tasto da parte dell’utente.

Con l’uso incrociato di php e di jquery abbiamo la possibilità di fare i controlli a monte, cioè prima del submit del form. I controlli saranno effettuati questa volta da lato utente e i dati saranno inviati al server solo se non si incontreranno errori.

Nel file da scaricare troverete:
– jquery.js : necessario per importare le librerie di jquery.
– style.css : formatta il layout del form; personalizzabile a vostra discrezione.
– index.php : il cuore dello script, che andremo a vedere qui sotto.

Lo script può essere preso così com’è senza modifiche (a eccezione, naturalmente, dell’aspetto grafico che si deve integrare con il vostro sito). Oltre al controllo che i campi non siano vuoti, nello specifico troveremo la funzione per controllare una data e un’email passate.

Download script

Pagina diretta alla scheda e al download del codice

Il form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
<form action="" method="post" name="form_utente" id="form_utente">

    <div class="campo">
        <div class="nome_campo">Nome</div>
        <input type="text" name="nome" id="nome" value="<?php if(isset($_POST['nome'])) echo $_POST['nome'];?>" class="input" />
    </div>

    <div class="clear"></div>

    [...]

    <a href="javascript:void(0)" onclick="check_reg();" style="margin-top:22px;">Invia</a>

    <div class="clear"></div>

</form>

Leggi Tutto >>

Attirare un certo numero di visitatori nel nostro sito è già difficile. Riuscire a tenerli ancorati il tempo sufficiente perché esplorino tutte o gran parte delle nostre pagine è senz’altro un’arte: non basta esibire ottimi prodotti, occorre mostrare in modo rapido e chiaro all’utente che offriamo, in effetti, qualcosa di interessante.

Le tecniche per spingere il visitatore a tornare sono diverse e possono andare da una grafica accattivante al promettere promozioni o articoli utili nell’immediato futuro.
Ma cosa non si deve fare per impedire che il visitatore fugga dal sito dopo un’occhiata?
Navigando in rete ho trovato 8 punti su cui focalizzarsi.

1. Cattiva navigazione

Un sito difficile da navigare annoia il visitatore più di qualsiasi altra cosa. Potete anche offrire del contenuto utile e interessante, ma se l’utente non capisce dove reperirle o è costretto a infiniti click prima di raggiungere la notizia voluta, difficilmente tornerà a trovarvi.
– Non inserire elementi visuali la cui utilità non è chiara o che non permettono di capire dove porteranno.
– La barra di navigazione principale deve essere sempre presente e subito reperibile, non sparsa per le pagine.
– Per siti più complessi, una sitemap può aiutare la navigazione.
– I link devono essere chiari: il visitatore deve sapere dove portano cliccandovi sopra. Evitare quindi links con nomi del tipo “clicca qua” o “altri links” senza specificare la destinazione.

Leggi Tutto >>

Subscribe to Comments Reloaded è uno dei migliori plugin WordPress per permettere all’utente di seguire i commenti a un articolo

Quando create un sito web usando la piattaforma WordPress, ogni vostro articolo può essere commentato e criticato dagli utenti di passaggio. I commenti sono una parte fondamentale del vostro portale: oltre a ricevere feedback (risposte, che siano positive o negative) da parte dell’utente, vi daranno la possibilità di capire quanto le pagine sono visitate e dove potete migliorarvi. Persino le critiche sono sempre costruttive.

Chiaro, quindi, che dovete gestire al meglio questa importante risorsa, e per farlo ci vengono in aiuto diversi plugin.
Uno dei migliori tra quelli che ho provato è Subscribe To Comments Reloaded (a fondo articolo trovate il link per scaricarlo gratuitamente).
Il suo scopo è di permettere agli utenti di sottoscrivere un determinato articolo, in modo da ricevere un’email ogni volta che qualcuno lo commenta. E’ davvero ricco di funzionalità e permette anche agli utenti stessi di stabilire quando disiscriversi e a quali articoli.
La cosa più interessante è che il plugin è disponibile in diverse lingue, tra cui il nostro italiano, e che può essere personalizzato a piacere.

La versione a cui faccio riferimento è la 2.0.2, testata su WordPress 3.3.1.
Come linguaggio di programmazione richiede che sul server sia installato PHP 5.1 e un database mysql 5, che sono ormai lo standard (senz’altro il server che ospita il vostro sito li supporta).

Funzionalità

Prima di scendere nel dettaglio, vediamo in breve le caratteristiche che vi mette a disposizione.
Quando si installa un nuovo plugin, raccomando sempre di fare prima un backup del vostro intero sito e del database, perché in caso di problemi può essere facilmente ripristinato. A ogni modo con questo plugin non dovreste incontrare problemi di sorta.

Innanzitutto, dovete scaricarlo e installarlo. E’ un’operazione semplice: una volta salvato il file in locale (che sarà un .zip), scompattatelo e buttate tutta la cartella del plugin così com’è online, nel vostro sito, al percorso www.vostrosito.it/wp-content/plugins/.
Se tutto è andato bene, una volta entrati nel vostro pannello di amministrazione, alla scheda Plugin troverete il nuovo Subscribe to Comments Reloaded, che al momento risulta disattivato (in grigetto).
Cliccate su attiva e il plugin inizierà immediatamente a funzionare nel sito: vedrete infatti la sua versione di base nel sito, nello spazio dei commenti sotto ogni articolo.

Adesso non vi resta che configurarlo secondo le vostre esigenze. Vi propongo la configurazione che ho adoperato per Sir Bit. All’interno della cartella del plugin, comunque, troverete un file readme.txt (in inglese) che vi darà tutte le basi che vi occorrono.
Entrate nella scheda Impostazioni del pannello di controllo e scegliere la nuova voce Subscribe to Comments.

Leggi Tutto >>

Un array (che in italiano possiamo tradurre con vettore) è tecnicamente un aggregato di valori, un “contenitore” di variabili che possono essere di tipi diverse: stringhe, interi, ecc.
Il buon uso di un array è estremamente utile, perché ci permette di aggirare problemi la cui risoluzione – fatta in altri modi – ci farebbe perdere diverso tempo. Php ci mette a disposizione numerose funzioni native, grazie alle quali potremmo gestirli senza troppi problemi.

Il tutorial di questo articolo è stato pensato come guida di base per l’uso degli array e delle funzioni che lo riguardano. E’ quindi adatto per chi si avvicina per la prima volta al php, ma sarà utile anche come ripasso per chi è già rodato.
In questo articolo partiremo dalle basi e vedremo come creare e gestire un array, come leggere gli elementi di un array e che cos’è un array multidimensionale. In un prossimo articolo ci concentreremo esclusivamente sulle funzioni legate agli array.

Per ogni definizione sarà dato un esempio. Alla fine del tutorial dovreste essere in grado di creare, manipolare e gestire con una certa scioltezza gli array.
Prima di addentrarci nel cuore dell’articolo, vediamo qualche definizione di base che può esserci utile.

Creazione di un array e gestione dei suoi elementi

In php non è necessario inizializzare le variabili, anche se sarebbe buona prassi farlo per evitare errori imprevisti; a ogni modo, un array vuoto di elementi si crea con questo sistema:

1

$contenitore=array();

Sia che abbiate definito o meno il vostro array, avete diverse possibilità per aggiungervi elementi:

1
2
3
4
5
6
7

//primo modo
$contenitore=array("primo elemento", "secondo elemento", 3);

//secondo modo
$contenitore[]="primo elemento";
$contenitore[]="secondo elemento";
$contenitore[]=3;

Nel primo caso, stiamo praticamente ridefinendo l’array inserendovi all’interno due stringhe (racchiuse tra virgolette) e un numero intero (non ha bisogno di virgolette). Un eventuale array $contenitore già esistente sarebbe sovrascritto.
Nel secondo caso, invece, stiamo indicando all’array $contenitore di aggiungere gli stessi tre elementi a quello che già contiene. Per adesso nei due metodi non abbiamo differenze, perché $contenitore era vuoto; ma se avessimo già popolato in precedenza l’array con un elemento, chiamando il secondo metodo avremo l’array con quattro elementi anziché tre.

Leggi Tutto >>

L’esempio che segue è un’aggiunta allo script che potete studiare e scaricare a questo indirizzo. Per ogni esigenza di base, fate riferimento a quell’articolo, dove ho spiegato nel dettaglio come creare e personalizzare una mappa di Google.

In questo articolo faremo un ulteriore passo avanti e vedremo come personalizzare l’aspetto del tooltip (il fumetto che appare sopra l’indicatore) e come aggiungere un secondo marker (segnalino). L’operazione è piuttosto semplice e non richiede grandi spiegazioni.

A ogni modo potete scaricarvi liberamente lo script, che è standalone e completamente funzionante. Lo script è la continuazione del precedente: i dati sono gli stessi con l’aggiunta della personalizzazione dell’aspetto del tooltip e di un nuovo marker.

Download script

Pagina diretta alla scheda e al download del codice

Personalizzare il tooltip

Per modificare l’aspetto del tooltip, vi basta semplicemente agire sul css e modificare a piacere i parametri dell’identificare “tooltip”. Riporto un esempio minimale, che si limita soltanto ad allargare il tooltip a 300px; naturalmente potete agire come meglio credete sul div. Il codice può essere messo prima della chiusura del tag della pagina:

1
2
3

<style>
#tooltip{ width:300px;}
</style>

Inoltre, abbiamo già visto in altri articoli che il testo interno del balloon può essere formattato a piacere con i comuni tag html, per esempio:

1

<strong>Via Delle Muratte, 90</strong><br>

Leggi Tutto >>

Con un’attenta ricerca, in rete potete trovare numerosi temi di WordPress da adattare per raccogliere e mostrare in modo elegante le vostre foto o le vostre immagini.
Propongo di seguito alcuni tra i temi free (liberamente scaricabili) che sono riuscito a reperire. Troverete per ognuno una descrizione sommaria e i link utili per il download.

Temi WordPress gratuiti per foto e immagini

Infinity

Un tema con una grafica accativante, a tre colonne: nella prima colonna abbiamo un set di immagini in anteprima, mentre nelle altre due avremo a disposizione alcuni collegamenti utili (tags, categorie, Twitter, ecc.).
In basso una serie di thumbnail ci permette di scorrere ulteriori anteprime.

Link: http://www.smashingmagazine.com/2008/08/08/infinity-a-free-wordpress-theme/
Download: http://media.smashingmagazine.com/images/infinity-wordpress-theme/infinity-theme.zip

Portfolio Press

Un set di anteprime in primo piano. Al passaggio del mouse si ha un lieve effetto di oscuramento e appare il titolo della foto. Il click la apre a pieno schermo come se fosse un post singolo.
Nelle opzioni esiste la possibilità di inserire il proprio logo e di personalizzare il layout.

Link: http://wptheming.com/2010/07/portfolio-theme/
Download: http://wordpress.org/extend/themes/download/portfolio-press.1.0.zip

Leggi Tutto >>

Se all’utente presentate un campo di input libero, per esempio per ricercare una qualsiasi parola da trovare nel sito, può essere comodo e utile dargli la possibilità di visualizzare in tempo reale i possibili risultati di ricerca. Questi appariranno in un elenco simile al menu a tendina e cambieranno con il digitare di una nuova lettera da parte dell’utente.

JQuery ci mette a disposizione una funzione apposita.
Nell’articolo vedremo innanzitutto un esempio di base, in puro html e javascript, con una serie di parole chiave predefinite tra le quali ricercare. Subito dopo daremo un’occhiata a come costruire una chiamata alle tabelle del database, in modo da ricercare le parole nei campi voluti. L’interfaccia grafica è personalizzabile semplicemente modificando le classi del foglio di stile.
In fondo all’articolo trovate i link di riferimento al sito originale, da cui potete scaricare lo script e visualizzare tutte le opzioni disponibili.

Una nota: lo script ha bisogno del caricamento dei dati all’apertura della pagina. Questo significa che se estraete un grande quantitativo di dati dal database, potreste trovarvi con una pagina pesante e un sito rallentato. Da usare con cautela.

Download script

Pagina diretta alla scheda e al download del codice

Le inclusioni e il codice di base

Per funzionare, il codice ha bisogno di tre file da includere, che trovate già compresi nello script da scaricare:
– jquery.js: richiama le librerie base di JQuery
– jquery-ui.min.js: inclusioni delle funzioni per l’autocompletamento
– jquery-ui.css: formattazione del menu a tendina che appare mentre trova i risultati in tempo reale

Il codice di questi tre file sono disponibili online ai seguenti indirizzi e possono essere inclusi altrimenti in questo modo:

1
2
3

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Leggi Tutto >>

All’interno di un form, in un campo di input o in una textarea, può capitare di dover “obbligare” l’utente a inserire solo numeri o solo determinati caratteri. E’ utile, tra l’altro, come controllo preventivo: all’invio del form non dovremmo controllare se il valore corrisponde al nostro standard voluto, perché l’utente sarà stato costretto a inserirlo correttamente (per sicurezza, a ogni modo, io consiglio sempre un controllo alla ricezione… male non fa).

In questo articolo vedremo un esempio su come limitare la digitazione dell’utente ai soli caratteri numerici. Potrete naturalmente modificarlo per adattarlo ai vostri scopi.
Lo script da scaricare è completamente funzionante così com’è. All’interno troverete il codice in due versioni: in javascript puro e con l’aggiunta di una funzione jquery. Per quest’ultimo esempio troverete anche il file jquery.js da includere obbligatoriamente per il corretto funzionamento.
Il codice è semplice e non richiede grandi spiegazioni. Diamo comunque un’occhiata alla sua struttura.

Download script

Pagina diretta alla scheda e al download del codice

Il form e la funzione di base

Nella sua forma base, troviamo questa funzione javascript da includere nella pagina:

1
2
3
4
5
6
7

function onlyNumeric(evt){
   /*Questa condizione ternaria è necessaria per questioni di compatibilità tra browser se "evt.which" non viene preso, usa "event.keyCode" */
   var charCode=(evt.which)?evt.which:event.keyCode;
   if(charCode>31 && (charCode<48 || charCode>57))
      return false;
   return true;
}

Il codice specifica che alla pressione di un qualsiasi tasto della tastiera sarà evocata la funzione onlyNumeric(). Il controllo del carattere digitato viene fatto considerando il suo valore nel codice ASCII (la tabella del codice ASCII potete trovarla facilmente con una ricerca su internet; a questo sito trovate un esempio). Nel concreto, si prendono tutti i valori inferiori da 0 a 30 (tra cui troviamo il tasto di backspace, senza il quale l’utente non potrebbe cancellare) e da 48 a 57 (le cifre numeriche).

Leggi Tutto >>