Avete costruito il vostro sito in ogni sua parte. Con un po’ di tempo e di esperienza, siete anche riusciti a ottimizzare il codice php e le query di connessione al database – che rappresentano i due elementi fondamentali per la buona costruzione di un sito.

A un certo punto, però, vi accorgete che nel pc degli utenti il vostro sito risente in alcuni casi dei rallentamenti. Quello che per voi era un codice «perfetto» (una parola che non si dovrebbe mai usare nella programmazione) in realtà ha degli scogli che gli utenti si trovano a dover aggirare.

Provate a immaginare un ecommerce complesso: centinaia di prodotti nello store e migliaia di query processate ogni giorno; se il sito è visitato, le pagine aperte dall’utente possono essere decine. Con il tempo sempre più agli sgoccioli in quest’Era moderna, l’utente non ha la pazienza per aspettare che una pagina pesante si carichi del tutto o che la sua adsl (se la possiede) superi i blocchi di linea che ogni tanto si presentano in Italia.
Nella peggiore delle ipotesi, potrebbe decidere di abbandonare il sito e cercare un altro negozio online.

C’è altro che possiamo fare per velocizzare l’apertura delle pagine del nostro sito?
La risposta, naturalmente, è affermativa: c’è sempre qualcosa da imparare e da migliorare.
In questo articolo vi propongo alcuni spunti di sbocco e alcune accortezze da seguire per ridurre al minimo i tempi di caricamento della pagina lato utente.

Teniamo presente, comunque, che esistono online ottimi strumenti per monitorare la velocità delle nostre pagine e capire dove mettere le mani per migliorare. Uno di questi strumenti è il Page Speed di Google: basta inserire l’url del sito e avrete una lista di “problemi” che stanno indigesti al più grande motore di ricerca e che pertanto dovrebbero essere risolti il prima possibile.

Accortezze generali

Prima di entrare in “fase avanzata”, vediamo qualche linea di base da seguire nella costruzione di un qualsiasi sito internet. Se avete qualche anno di esperienza nel settore probabilmente avrete già evaso tutti o quasi i seguenti punti, ma una ripassata non fa mai male.
Cito i punti senza addentrarmi nella questione, perché potete facilmente informarvi con una ricerca online.

– Usare i CSS Sprites per le immagini, ovvero combinare le immagini di sfondo in un’unica immagine e usare le direttive “background-image” e “background-position” per mostrare il segmento voluto.

– Usare un sistema di caching (vedi sotto).

– Usare la compressione delle pagine (vedi sotto).

– Mettere i fogli di stile in alto nella pagina: in questo modo le pagine si renderizzano progressivamente.

– Quando possibile, mettere i javascript in basso nella pagina.

– Quando possibile, evitare stili in linea e javascript nella pagina: meglio caricare css e javascript da file esterni.

– Quando possibile, evitare i redirect 301 e 302.

– Nelle chiamate Ajax al di sotto dei 2K di dati, usare GET anziché POST: con i POST, infatti, prima invia l’header e poi i dati; invece con i GET invia un unico pacchetto.

– Ridurre il più possibile le dimensioni dei cookies.

Htaccess e html – Abilitare il caching delle pagine

Abilitando il sistema di headers caching, se un utente torna a visitare il nostro sito eviterà di scaricare di nuovo le risorse – con ovvio incremento di prestazioni e di velocità.
Il sistema di caching andrebbe applicato a tutti gli elementi statici: immagini, js, css, pdf, media files, ecc.

La cosa migliore è settare il tempo di “Expires”, cioè il periodo dopo il quale le risorse vengono di nuovo scaricate, da un minimo di una settimana a un massimo di un anno (oltre un anno non è consigliabile).

Impostando il tempo nei metatag “Expires” oppure “Cache-Control: max-age”, il browser eviterà di controllare nel web server la disponibilità di nuove versioni dell’elemento.

Leggi Tutto >>

Una delle funzionalità più utili e potenti messe a disposizione da WordPress è la possibilità di personalizzare a piacere l’uso degli articoli e delle categorie.

Faccio una premessa.
Gli articoli che siamo abituati a usare hanno in realtà un «tipo» associato: il tipo “post”. Allo stesso modo, le pagine hanno associato il tipo “page”. Di default troviamo poi altri tre tipi: “attachment”, “revision” e “nav_menu_item”.

WordPress ci dà la possibilità di creare dei nuovi tipi, in pratica delle aree separate in cui possiamo inserire articoli e categorie senza intaccare quelli principali.
Se, per esempio, abbiamo un sito che si occupa di musica e a un certo punto decidiamo di inserire una sezione per i film, ci sarà utile creare una nuova area per i film, i cui articoli saranno tenuti ben distinti da quelli della musica.
I tipi personalizzati vengono denominati tecnicamente Custom Post Type (CPT).

In questo articolo vedremo un esempio completo e minimale su come realizzare i CPT.
Nello specifico, il nostro cliente immaginario ci ha commissionato la realizzazione di un’area per inserire i calendari delle partite di andata e ritorno di una squadra di pallavolo.
Quello di cui abbiamo bisogno è di creare un’area personalizzata chiamata “Calendario”, che si occupa esattamente come un qualsiasi post ma che in lato sito sarà visualizzata in una sezione a parte.

I file completi sono scaricabili gratuitamente al seguente link. All’interno troverete un txt contenente la descrizione generale con i passi da seguire.

Scarica gli script di questo articolo in formato zip

Il plugin “MM Custom Type Calendario” [mm_custom_types.php]

Le basi del CPT le costruiremo attraverso un comodo plugin, che potrà quindi essere esportato facilmente in altri progetti.
Il file “mm_custom_types.php” nello zip va inserito così com’è nella cartella dei plugin di WordPress. Il plugin va poi attivato come al solito nell’apposita area dell’admi.

Vediamo il contenuto del plugin.
Ho cercato di introdurre quanti più parametri possibili nella funzione, così da averli sottomano. Ogni parametro è commentato. In realtà, i valori attributi a gran parte di questi parametri sono quelli di default e quindi potevano essere omessi.
Per personalizzare i parametri vedete la documentazione ufficiale della funzione “register_post_type()” di WordPress (a fondo articolo trovate il link diretto).

Leggi Tutto >>

Quando all’utente si lascia la possibilità di commentare articoli, di recensire prodotti o di scrivere le proprie opinioni, può essere utile far uso di una funzione che censuri una serie di parole ritenute “scomode” o “di spam”.

Con la funzione che andiamo a vedere, basta creare un array di parole: lo script si occuperà di rintracciarle nel testo e di sostituirle con un’altra parola data.
Se la parola di sostituzione non è stata passata, le stringhe da “eliminare” saranno semplicemente censurate da una serie di cancelletti (“#”).

Lo script, completo di esempio, è liberamente scaricabile dal link qui sotto.
Non necessita di modifiche, a meno che non la vogliate integrare con ulteriori controlli sui parametri (che per semplicità ho ridotto al minimo).

Leggi Tutto >>

Il php mette a disposizione una classe, chiamata ZipArchive, il cui scopo è di creare archivi di file e di cartelle. In soldoni, con questa classe possiamo creare e leggere file zip, che saranno o sono salvati sul server.
L’utilità può essere molteplice, come per esempio il backup di alcune cartelle o la compressione di alcuni file particolarmente pesanti prima di metterli a disposizione del pubblico.

In questo articolo vedremo uno script per aggiungere una cartella a un archivio. Ogni sua sottocartella e relativi file saranno aggiunti all’archivio allo stesso modo.
Se l’archivio non esiste già, sarà creato.

Lo script può essere usato così com’è, modificando esclusivamente le variabili:
$dir : cartella di destinazione dell’archivio
$name : nome dell’archivio da creare/leggere
$dir_name : nome della cartella da aggiungere all’archivio

L’archivio zip sarà creato allo stesso livello della cartella da aggiungervi. Naturalmente, con piccole modifiche alle varibili è possibile dargli in pasto qualsiasi percorso.

Scarica gli script di questo articolo in formato zip

Leggi Tutto >>

I feed rss sono un ottimo strumento di propagazione dell’informazione. Vengono usati nei blog, ma anche nei siti di base (grazie alla diffusione di cms come WordPress) e soprattutto dai siti aziendali. Le ditte che comprendono numerosi prodotti, infatti, lo mettono spesso a disposizione per essere letti dagli aggregatori oppure, al contrario, recuperano spesso le schede dei prodotti da vendere da un link rss esterno.

Se avete bisogno di leggere un feed rss dotato di una struttura xml abbastanza standard non avrete grandi difficoltà: bastano poche righe di codice.
Nell’esempio che vedremo sotto prenderò in esame i feed rss di www.onemind.it, che hanno una struttura ad albero molto semplice. Per ogni articolo presente, estrarremo e recupereremo link, titolo e descrizione, che potremo immagazzinare in apposite variabili php oppure utilizzare come più ci aggrada.

Naturalmente strutture più complesse richiedono qualche sforzo in più. In genere, comunque, troverete le informazioni di un prodotto internate in un unico nodo xml.
Lo script è scaricabile dal link qui sotto e liberamente personalizzabile.

Scarica gli script di questo articolo in formato zip

Il nodo xml

La struttura base del feed rss sarà qualcosa simile al seguente esempio.
Ogni articolo sarà compreso tra i tag (nodo xml) “item”. Al suo interno troveremo i tag da estrarre: title, link, description.
Per comodità ho eliminato tutti gli altri sotto-nodi non necessari.

1
2
3
4
5
6
7
8
9
10
11
12
13

<item>
<title>
15 immagini sulla Shadow Art: l’arte illusoria con le ombre
</title>
<link>

15 immagini sulla Shadow Art: l’arte illusoria con le ombre 


</link>
<description>
<![CDATA[
La shadow art mescola luce e oggetti comuni, come legni o fili di ferro, per creare opere realistiche fatte di ombra. Gli autori migliori e le loro immagini.
]]>
</description>
</item>

Leggi Tutto >>

Nel vostro sito possono capitare utenti da ogni angolo del mondo, soprattutto se gestite un e-commerce internazionale. In casi come questi, può capitare che l’utente invii caratteri tipici delle lingue straniere, che magari non vorreste visualizzare nel vostro sito.

La seguente funzione prende un testo in entrate e converte tutti i caratteri stranieri in una forma normalizzata (per dirla terra a terra, in una forma più simile all’italiano).
Vi sarà utile anche se gestite un blog con commenti aperti, visto che ormai è usanza sostituire coppie di lettere con caratteri stranieri: pensate per esempio alla “ß” tedesca, che tra i più giovani (per qualche ragione non ben comprensibile, dato lo sforzo per crearla su una tastiera comune) va spesso a sostituire la doppia “s”.

La funzione non è complessa e i commenti dovrebbero essere sufficienti per chiarire i piccoli dubbi.
Tenete presente che la funzione è stata creata per sostituire i caratteri stranieri, ma nulla vieta di aggiungere nell’array altri caratteri da sostituire automaticamente quando si passa il testo (il mio consiglio è sempre quello, però, di separare le funzioni in base al loro scopo).

Leggi Tutto >>

Anteprima di una Facebook Like Box. Attraverso il sito, permette agli utenti di seguire la vostra fan page su Facebook

Al giorno d’oggi, Facebook è probabilmente il principale canale per promuovere gli articoli di un sito e certamente è il primo “flusso social” da tenere in considerazione. Ecco perché costruire una fan page su Facebook è diventato ormai essenziale.

Vi sarete accorti che molti dei siti dotati di una fan page implementano un plugin particolare: non si tratta del solito pulsante “I like”, ma di un gadget più complesso che permette di visualizzare gli ultimi post della fan page e gli utenti che seguono la vostra pagina.
Inoltre, attraverso questo plugin i visitatori potranno cliccare sul “mi piace” direttamente nel sito, senza cercare la vostra fan page direttamente su Facebook.

Vediamo brevemente come fare. Il processo è semplice e non richiede grandi competenze.

Le opzioni della Facebook Like Box

Prima di tutto raggiungete la pagina degli sviluppatori della Like Box. Vedrete immediatamente un’anteprima generale (la prima immagine di questo articolo).

Le opzioni disponibili per la creazione della Facebook Like Box

Le opzioni a disposizione sono poche e comprensibili. Inserite innanzitutto il link alla vostra pagina Facebook nell’input “Facebook Page URL”. Se non avete particolari esigenze, la larghezza e l’altezza potete lasciarle così come sono (per l’altezza, in default è pensata per far comparire dieci facce-profilo di utenti).

Decidete quindi se volete un tema chiaro (light) o scuro (dark), a seconda del layout del vostro sito.

Le ultime quattro opzioni identificano cosa mostrare:
– Show header : se spuntata mostra l’intestazione del plugin.
– Show stream : se spuntata mostra gli ultimi post pubblicati sulla vostra fan page.
– Show faces : se spuntata mostra le foto profilo degli utenti iscritti alla fan page.
– Show border : se spuntata mantiene un bordo attorno al plugin.

Leggi Tutto >>

Il codice che segue – e che potete scaricare liberamente dal link sottostante per una più chiara comprensione – mostra una funzione che ha lo scopo di prendere un numero di byte e di trasformarlo in una grandezza appropriata.

Il procedimento è molto semplice e si basa sulla grandezza di $number, che viene confrontata prima con i valori più alti e, scalando, con valori sempre più bassi.

Per fare un esempio pratico, poniamo che a $number attribuiamo un valore di 20.971.520 byte (che corrisponde esattamente a 20 megabyte).
I primi due if nella funzione risulteranno falsi, perché $number è inferiore a 1.000.000.000 . Pertanto entreremo nella condizione successiva, quella relativa ai megabyte.
$number sarà convertito in megabyte e assumerà il nuovo valore di “20”.
La funzione quindi stamperà “20 MB”.

Il secondo argomento della funzione, $precision, serve per specificare il grando di precisione del numero risultante, cioè quante cifre dopo la virgola dobbiamo prendere.

Scarica gli script di questo articolo in formato zip

Leggi Tutto >>

Se vi capita di gestire un cliente che dispone di due siti internet, è probabile che prima o poi vi ritroverete nella condizione di dover connettervi contemporaneamente a due database.
Il motivo può essere vario: promuovere i prodotti di un dominio sull’altro dominio tramite una procedura automatica; recuperare informazioni o riferimenti dell’altro dominio; ecc.

La connessione tra due database non è sempre immediata.
Prima di tutto dobbiamo distinguere due situazioni:
1) i due database si trovano sullo stesso server: in questo caso host, user e password di connessione potrebbero coincidere
2) i due database si trovano su server diversi: è necessario eseguire per forza due connessioni diverse

Qua sotto vi mostrerò due sistemi per connettervi a database multipli.
In entrambe le situazioni:
– i due database avranno il nome (poco fantasioso ma immediato) di primo_database e secondo_database
– in entrambi i database è presente una tabella chiamata prodotti, al cui interno ha un campo chiamato id (che rappresenta il campo autoincrementale dei record) e un campo chiamato nome (varchar di lunghezza a piacere)
– poniamo per semplicità che in entrambe le tabelle “prodotti” ci siano dei record con id=2 . L’unica differenza sta nel campo nome, che avrà i seguenti valori:
– tabella di “primo_database”: nome=”libro”
– tabella di “secondo_database”: nome=”film”

In questo modo, quando stamperemo a video il campo “nome” del record con id=2 avremo la possibilità di capire se proviene dal primo database o dal secondo.

Connessione a due database sullo stesso server

Se i due database si trovano sullo stesso server (probabilmente un server dedicato), in gran parte dei casi la connessione a entrambi avverrà con lo stesso host, user e password.
Per distingue quale database coinvolge una delle nostre query, ci basta far precedere il nome della tabella prodotti dal nome del database.
Quindi, se la tabella di ricerca della select sarà “primo_database.prodotti” significa che coinvolgerà la tabella “prodotti” di “primo_database”.
Viceversa, se la tabella di ricerca della select sarà “secondo_database.prodotti” significa che coinvolgerà la tabella “prodotti” di “secondo_database”.

Leggi Tutto >>

WordPress è un cms che ha raggiunto una diffusione enorme negli ultimi anni, al punto che è usato da diversi utenti, neofiti o meno, per creare siti sia di livello elementare che di carattere professionale. Esistono temi, plugin e widget gratuiti sparsi per la rete.

La sua gratuità e il suo codice libero sono un’ottima cosa, perché permettono agli esperti di personalizzare le pagine discostandosi dalle caratteristiche base e di offrire agli altri plugin a costo zero. Tuttavia, proprio il suo essere libero è anche motivo di preoccupazione in alcuni casi.
Un eventuale cracker (la versione “cattiva” degli hacker) può studiarsi il codice di un tema che magari è stato mal costruito e trovare un buco nel quale entrare. Oppure può “allungarvi” un plugin da lui costruito per sottrarvi dati preziosi o per arrivare persino al database.

Una delle accortezze di base è quella di scegliere siti ufficiali da cui scaricare il materiale gratuito. Ma esistono anche tecniche a portata di mano che permettono di migliorare la sicurezza in WordPress. Sono in realtà tecniche che si consigliano per qualsiasi sito: nascondere le informazioni che non devono essere mostrare, impedire l’accesso in determinate zone, ecc.

Vediamo la lista, che ho recuperato dopo uno studio in rete su diversi siti specifici.

Permessi, prefisso delle tabelle, username e password sicure

Partiamo dalle basi.
Prima di tutto, è buona norma modificare il prefisso delle tabelle che WordPress ci propone (“wp_”). In questo modo l’intruso, se raggiunge il database, non può conoscere il nome esatto delle tabelle da estrarre. Se il danno è già fatto, cioè avete installato il cms mantenendo il prefisso tabelle proposto, potete modificarlo in un secondo momento agendo direttamente nel database e modificando il nome di ogni singola tabella con questa query:

1

RENAME table 'nomeTabella' to 'nuovoNome'

Leggi Tutto >>