Le espressioni regolari sono delimitate, di solito un carattere barra /, e queste contengono un modello che descrive una stringa.

Di seguito alcuni semplici esempi:

• /c[ao]sa/ : corrisponde a “casa” e a “cosa”

un’espressione che descrive qualcosa che contiene la lettera “c”, seguita da qualsiasi delle vocali “a” o “o”, seguito dalle lettere “sa”.

Per indicare un intervallo di caratteri:

• /[0-9a-f]*/ : tutti valori esadecimale
• /[0-9a-zA-Z]/ : corrisponde a tutte le stringhe alfanumeriche
• /./ : il punto corrisponde a qualsiasi carattere
• /\./ : si si vuole far corrispondere realmente un punto

cercare un punto, ad esempio in nome a dominio, è necessario farlo precedere da un backslash.

Il quantificatore va messo dopo il carattere (o intervallo di caratteri) per indicare il numero di occorrenze che ci dovrebbero essere. E’ possibile dare numeri precisi o utilizzare altri caratteri come:

• /ab{2}/ : corrisponde ad un stringa che contiene due caratteri “b” di seguito, ad esempio “abb”
• /ab{2,5}/ : corrisponde ad una stringa che contiene minimo 2 caratteri “b” e massimo 5, ad esempio “abb”, “abbb”, “abbbb” e “abbbbb”
• “?” : 0 o 1 occorrenza
• “+” : 1 o più occorrenze
• “*” : 0 o più occorrenze

si noti che nei casi in cui indichiamo il numero di occorrenze massimo dobbiamo sempre specificare anche il numero di occorrenze minimo.

Facciamo un esempio:

• /c[ao]+sa/ : corrisponde a “casa” e a “cosa”, ma anche a “caasa”, “cooosa”, etc.

C’è anche il simbolo |, che ha lo stesso significato dell’operatore OR:

• /Ciao|ciao/ : corrisponde alla stringa “Ciao” oppure “ciao”.

Possiamo anche delimitare i modelli ad inizio e fine delle stringhe usando rispettivamente “^” e “$”:

• /^c[ao]sa/ : corrisponde a “casa” ma non a “andare a casa”.

Se non ricordiamo tutte le regole per costruirci i nostri modelli di espressioni regolari possiamo utilizzare uno dei tanti cheat sheet stampabili che si trovano in rete.

Ho pensato di utilizzare il metodo animate() di jQuery per realizzare un sistema di votazione semplice ma bello da vedere.

L’idea è quella di animare un div espandendolo ad ogni voto ricevuto, tramite la funzione animate, aggiungendo un stesso valore alla proprietà di lunghezza del div stesso.

Documento html

<div id="container">
    <span id="question">Quale di questi framework PHP utilizzi?</span>
    <div><span>0</span><a href="">Vota</a>Zend Framework</div>
    <div><span>0</span><a href="">Vota</a>Symfony</div>
    <div><span>0</span><a href="">Vota</a>CakePHP</div>
    <div><span>0</span><a href="">Vota</a>CodeIgniter</div>
    <div><span>0</span><a href="">Vota</a>Kohana</div>
    <div><span>0</span><a href="">Vota</a>YII framework</div>
</div>

Foglio di stile CSS

* {
  font-family: Arial, "Free Sans";
}
body {
  margin: 0;
  padding: 0;
}
#container {
  margin-top: 20px;
  color: #fff;
}
#container #question {
  display: block;
  padding: 20px;
  font-weight: bold;
  letter-spacing: -3px;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 40px;
  color: #333;
}
#container div {
  font-weight: bold;
  letter-spacing: -3px;
  background: #c00;
  margin-bottom: 15px;
  padding: 10px;
  font-size: 34px;
  color: #ffffff;
  border-left: 20px solid #333;
  width: 400px;
}
#container div a {
  border: 1px solid #40392C;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-decoration: none;
  color: #0BBFEC;
  padding: 5px 15px;
  background: #2F2F2F;
  margin: 0 20px;
}
#container div a:hover {
  color: #fff;
}

Effetti con jQuery

Non dimentichiamoci di includere la libreria jQuery nell’intestazione head del documento, poi colleghiamo lo script che permette l’animazione:

$(document).ready(function() {
  $("#container div a").click(function() {
    $(this).parent("div").animate({ width: '+=30px' }, 500);
    $(this).prev("span").html(parseInt($(this).prev().html()) + 1);
    return false;
  });
});

Come potete vedere è tutto molto semplice

Associamo una funzione all’evento click sul numero di voti: prendiamo il nodo/oggetto padre del link e sudi esso chiamiamo il metodo animate che genera l’animazione di allungamento in un tempo di 500 millisecondi, dunque incrementiamo il numero di voti.

Demo Download

HTML5 fornisce una nuova funzionalità di caching per supportare le applicazioni web in modalità offline.

E’ necessario specificare un determinato file chiamato “cache manifest” nella pagina web a cui vogliamo applicare il sistema di caching.
L’URL del file cache manifest va specificato nel tag html del documento in cui vogliamo attivare la funzione di caching HTML5.

<!DOCTYPE HTML>
<html manifest="myapp.cache">
...

E’ importante che, per essere correttamente analizzato dal browser, il file di cache manifest deve avere come intestazione in header il tipo MIME text/cache-manifest; dunque è necessario aggiungere al web server l’associazione all’estensione del tipo di file o specificarlo manualmente, ad esempio utilizzando la direttiva header di PHP.

L’aspetto di un tipico file di cache manifest è il seguente:

CACHE MANIFEST
index.html
css/style.css
js/jquery.js
images/logo.png

NETWORK:
search.php

specifica diversi file di cache, e poi specifica che il file search.php non deve mai essere memorizzato nella cache, in modo da consentire che ad ogni tentativo di accesso al file è consentito di bypassare il file di cache.

Il procedimento di caching funziona nel momento in cui un utente fa richiesta o accede alla pagina corrispondente ad un documento a cui è associato un cache manifest, allora il browser deve prima controllare se su server quest’ultimo è stato modificato:

• se non è stato modificato, viene utilizzato il contenuto della cache
• altrimenti se presente una nuova versione del cache manifest, il contenuto presente della cache viene considerato obsoleto e ricaricato dal server.

Altra funzionalità importante del cache manifest è che può contenere anche voci di ripiego (sotto la voce FALLBACK), utilizzate dal client/browser se non è possibile recuperare il contenuto originale.

CACHE MANIFEST
index.html
css/style.css
js/jquery.js
images/logo.png

NETWORK:
search.php

FALLBACK
images/thumb.php	error.png

nell’esempio viene utilizzata un’immagine statica quando il recupero di un’immagine generata dinamicamente fallisce.

In HTML5 sono definite delle API che permettono di attivare manualmente gli aggiornamenti della cache:

• update(): aggiorna la cache per il documento corrente in background;
• swapCache(): passa alla cache dell’applicazione più recente, se vi è una più recente; valida anche per le successive richieste di risorse dalla cache;
• onchecking(): cattura l’evento checking che si manifesta quando il client/browser verifica se disponibile un aggiornamento o tenta di scaricare per la prima volta il file di cache manifest (questo è sempre il primo evento della sequenza);
• onerror(): cattura l’evento error che si manifesta per tutti gli errori che possono verificarsi del tipo: nello scaricare il cache manifest il client/browser ha ricevuto errore 404 o 410, non è stato possibile scariche le risorse elencate nel cache manifest, si è verificato un errore durante il recupero delle risorse;
• onnoupdate(): cattura l’evento noupdate che si manifesta quando il client/browser verifica se disponibile un aggiornamento il cache manifest non è cambiato;
• ondownloading(): cattura l’evento downloading che si manifesta quando il client/browser sta scaricando le risorse elencate nel cache manifest dopo aver verificato un aggiornamento di quel’ultimo;
• onprogress(): cattura l’evento progress che si manifesta quando il client/browser sta scaricando le risorse elencate nel cache manifest;
• onupdateready(): cattura l’evento updateready che si manifesta quando le risorse elencate nel cache manifest sono state appena ri-scaricate e lo script può utilizzare il metodo swapCache() per passare alla nuova cache;
• oncached(): cattura l’evento cached che si manifesta quando le risorse elencate nel cache manifest sono state scaricate e ora si trovano nella cache;
• onobsolete(): cattura l’evento obsolete che si manifesta quando per trovare il cache manifest il client/browser ha ricevuto l’errore 404 o 410, per cui la cache dell’applicazione viene cancellata;

Per chi cerca una soluzione facile per iniziare a giocare – dipingere – con i Canvas, elemento del nuovo standard HTML5, jCanvas è un plugin jQuery che ne semplifica l’uso attraverso l’utilizzo dei metodi offerti.

E’ possibile definire la dimensione dell’elemento Canvas, le coordinate (X,Y) da cui partirà il disegno.
Molte delle forme sono già pronte, come rettangoli, ellissi o archi, definite come oggetti, e molti metodi definiti per l’utilizzo delle immagini e dei testi.
Per lo stile, tutto è reso più semplice, sfumature o pattern, i colori possono essere indicati con i nomi, in HEX, RGB o RGBA.

Il plugin è in via di miglioramento e nuove funzionalità sono aggiunte di continuo.
La pagina dedicata offre un’ottima documentazione da cui partire per iniziare nel migliore dei modi ad avvicinarsi agli elementi del nuovo linguaggio di markup HTML5.

Ecco come disegnare gli oggetti presenti dell’immagine postata all’inizio di questo articolo:

$("canvas.test").drawRect({
  fillStyle: "#000",
  x: 50, y: 50,
  width: 200,
  height: 100,
  fromCenter: false
});
$('canvas.test')
.drawArc({
fillStyle: '#729fcf',
x: 70, y: 70,
radius: 50
});

Se hai un sito web in cui memorizzi dati dell’utente è probabile che si utilizzi un database, come MySQL, SQLite o altro, ed è importante assicurarsi che il proprio database sia sicuro da e per gli utenti.

Creare istruzioni di query al volo come la sequente:

$sql = "INSERT INTO commenti (nome, commento) VALUES (".$nome.",".$commento.")";

è considerata una cattiva pratica che può essere facilmente superata, eliminando la maggior parte dei problemi, utilizzando dichiarazioni SQL prepare.

Realizzare istruzioni SQL come la precedente può essere rischioso. Se un utente malizioso invia, tramite il modulo del commento, una istruzione SQL appositamente predisposta, è possibile eseguire query al database. Invece, è necessario utilizzare dichiarazioni prepare come questa:

$sql = $db->prepare('INSERT INTO commenti (nome, commento) VALUES (?,?)');

aggiungere poi i valori singolarmente

$sql->bindParam(1, $nome);
$sql->bindParam(2, $commento);

e infine eseguire la query

$sql->execute();

Si trattano di poche righe in più, ma che rendono il vostro codice molto più sicuro.

Non solo il database deve essere al sicuro contro le query non intenzionali, ma anche gli utenti.
Se qualcuno è in grado di memorizzare un commento che sarà visualizzato da tutti gli altri utenti, allora l’input deve essere limitato a quello che ci aspettiamo, come in questo caso solo testo. Se invece permettiamo di scrivere codice HTML, un utente malizioso potrebbe caricare un malware da un altro sito, il classico exploit XSS.

Una soluzione semplice può essere l’utilizzo di funzioni per sterilizzare l’input, dunque sostituire, come nel caso citato, i tag HTML con quelli innocui.
Ad esempio, in un codice PHP che si interfaccia con un database MySQL è possibile utilizzare:

$nome = mysql_real_escape_string($_POST['nome']);

che inserisce l’escape davanti a caratteri speciali in una istruzione SQL.

Puoi leggere l’articolo su come utilizzare più istruzioni SQL prepare con PHP per approfondire l’argomento, e risolvere il problema di utilizzare più dichiarazioni SQL prepare per l’esecuzione.

Dopo aver ricevuto abbastanza e-mail e feedback in generale riguardo ad alcune richieste di modifiche, ho deciso di sviluppare una seconda versione del menu verticale con effetto a fisarmonica sperando di soddisfare la maggior parte degli utenti.

In questa seconda versione del tutorial aggiungiamo la possibilità di aprire l’elenco a tendina tramite un secondo bottone così da rimanere al link della voce del menu principale la sua funzione predefinita.

Documento HTML

Quello che andiamo a cambiare alla nostra pagina HTML è l’aggiunta di una freccia down che avrà la funzione di avviare l’effetto a fisarmonica per visualizzare le voci del sotto menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu sub-menu-open">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Aggiungiamo un’altra classe CSS sub-menu-open all’elenco del sotto menu per indicare quale di default è aperto inizialmente al caricamento della pagina.

Foglio di stile CSS

Abbiamo modificato le proprietà di alcuni selettori per utilizzare la freccia come bottone di apertura, aggiunta la classe per il sotto menu aperto di default e aggiunto il cursore di tipo puntatore quando andiamo sopra all’immagine:

ul {
	margin: 0;
	padding: 0;
}

ul.container {
	width: 240px;
	margin: 0 auto;
	padding: 50px;
}

li {
	list-style: none;
	text-align: left;
}

li.menu {
	/* Voci dell'elenco principale */
	width: 100%;
	padding: 5px 0;
}

li.title {
	display: block;
	position: relative;
	width: 200px;
	height: 34px;
	padding: 10px 20px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #cc0000;
}

li.title:hover {
	background-color: #f40000;
}

li.title a {
	/* Voce del menu principale */
	color: #ffffff;
	font-family: BPreplay,Arial,Helvetica,sans-serif;
	font-size: 21px;
	overflow: hidden;
}

li.title a:hover {
	text-decoration: none;
}

li.title a span {
	/* Questo span agisce come parte finale della sezione title */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 44px;
}

li.title img {
	/* freccia apertura sotto menu */
	float: right;
	cursor: pointer;
}

.sub-menu {
	/* Sotto menu */
	display: none;
	width: 100%;
	padding-top: 5px;
}

.sub-menu li {
	/* Voci del sotto menu */
	margin: 5px 0;
	padding: 4px 18px;
	border: 1px solid #40392c;
	background-color: #2F2F2F;
	color: #cccccc;
}

.sub-menu-open {
	display: block;
}

Effetti con jQuery

Gli script che andremo ad includere nella pagina sono gli stessi, ma bisogna dare uno sguardo allo script che gestisce l’effetto per vedere le modifiche apportate:

$(document).ready(function(){

	/* Cambiare l'effetto da utilizzare */
	$.easing.def = "easeOutBounce";

	/* Associare una funzione all'evento click sul link */
	$('li.title img').click(function(e){

		/* Trovare l'elenco a discesa che corrisponde al menu cliccato: */
		var subMenu = $(this).parent().next();

		/* Trovare il sotto menu che corrisponde alla voce cliccata */
		$('.sub-menu').not(subMenu).slideUp('slow');
		subMenu.stop(false,true).slideToggle('slow');

		/* Prevenire l'evento predefinito (che sarebbe di seguire il collegamento) */
		e.preventDefault();
	})

});

L’unica modifica effettuata riguarda il selettore su cui catturiamo l’evento click per aprire il corrispondente sotto menu.

Versione History

Ho deciso di chiamare questo secondo tutorial in questo modo perché un’altra importante richiesta ricevuta è quella di mantenere il sotto menu aperto nella pagina raggiunta da un link di uno dei sotto menu.

<?php $array_label_menu = array('jquery' => '', 'php' => '', 'css' => '', 'firefox' => '') ?>
<?php $submenu_open = (isset($_GET['menu']) &amp;&amp; $_GET['menu']!='') ? $_GET['menu'] : 'php'; ?>
<?php $array_label_menu[$submenu_open] = 'sub-menu-open'; ?>

Utilizzando un array indichiamo come chiavi di valori nulli le parole che specificano la nostra voce del menu principale e utilizzando una valore che ci inviamo tramite l’array globale $_GET andiamo a inserire la classe CSS sub-menu-open come valore alla chiave corrispondete al $_GET['menu'] inviato.

Adesso vediamo come si modifica la parte riguardo al menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/?menu=firefox">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu <?php echo $array_label_menu['firefox'] ?>">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/?menu=firefox">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/?menu=firefox">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Demo Download

Cara Italia, perché giusto o sbagliato che sia questo è il mio paese con le sue grandi qualità ed i suoi grandi difetti. 

Enzo Biagi

TinyBox2 è il successore di TinyBox, una libreria JavaScript standalone, autonoma senza l’utilizzo di ulteriori framework come jQuery, per la realizzazione di finestre modali.

Dal peso leggero (5 KB), supporta immagini, iframe, HTML e richieste AJAX native. Le finestre modali realizzabili sono molto personalizzabili nelle animazioni, livello di opacità, auto-hide, posizione personalizzate e molto altro. Come già ci hanno insegnato altri tipo di plugin con la stessa funzionalità, è possibile chiudere le finestre cliccando sul pulsante di chiusura, cliccando ovunque al di fuori dell’area della finestra o tramite il tasto ESC della tastiera.

Inoltre possiamo implementare funzioni di callback per gli eventi di apertura o chiusura, e le finestre possono essere impostate con dimensioni fisse in larghezza e lunghezza o automatiche in base al loro contenuto.

E’ semplice utilizzare TinyBox2, ecco una semplice chiamata di una pagina HTML in una finestra modale:

TINY.box.show ({url: 'page-example.html' , larghezza: 300, altezza: 150});

Le opzioni disponibili sono:

• html: contenuto HTML [false]
• iframe: URL for embedded iframe [false]
• url: path per chiamata AJAX [false]
• post: variabile post, usata in congiunzione con url [false]
• image: path immagine [false]
• width: larghezza finestra [false]
• height: altezza finestra [false]
• animate: attiva/disattiva animazione [true]
• close: visualizza bottone chiudi [true]
• openjs: generica funzione eseguita su evento apertura [null]
• closejs: generica funzione eseguita su evento chiusura [null]
• autohide: numero di secondi di attesa per l’auto-chiusura della finestra[false]
• fixed: imposta posizione della finestra fixed/static (css) [true]
• opacity: imposta opacità della finestra da 0-100 [70]
• top: per la posizione assoluta della finestra, pixels di distanza dal’alto [null]
• left : per la posizione assoluta della finestra, pixels di distanza da sinistra [null]

Questo script è testato in IE7+, Firefox, Chrome, Opera e Safari ed è disponibile gratuitamente sul sito dell’autore con per ulteriori informazioni e demo.

mtrack è un’applicazione open source, realizzata in PHP, per il completo controllo di un progetto software/web applicazione.

Permette la gestione del progetto, navigazione del codice, wiki e caratteristiche di time tracking. L’applicazione ha un sistema di tracciamento dei componenti, priorità, gravità e tappe, in base anche alle stime di tempo e fatiche registrate. Inoltre si integra perfettamente con i servizi di repository Subversion, Mercurial e Git per la gestione delle versioni del progetto.

Gli utenti possono ricevere notifiche di aggiornamento del codice del progetto o comunicare con gli altri collaboratori via e-mail.

Inoltre è possibile estendere o personalizzare ulteriormente mtrack attraverso le API offerte.

Xdebug è un’estensione PHP gratuita e open source che permette il debugging e il profiling degli script PHP in dettaglio.

Considerando che è una estensione, l’utilizzo è facile e richiede pochissime configurazione per integrarlo nelle nostre applicazioni.
Xdebug ti aiuta fornendo molte informazioni utili di debug:

• tracce di funzioni e di stack delle variabili nei messaggi di errore con la completa visualizzazione dei parametri delle funzioni definite dall’utente, il nome della funzione, il nome del file e il numero di linea nel codice in cui si è verificato l’errore.
• allocazione di memoria
• protezione da cicli infiniti

Inoltre fornisce informazioni di profiling, un potente strumento che analizza il codice PHP e determina i colli di bottiglia o in generale individua le parti del codice più lente, analisi del code coverage ed ha la capacità di eseguire il debug in modo interattivo attraverso un interfaccia da browser, tramite estensioni per i browser di interagire con l’esecuzione degli scripts PHP.