fenomeno.it

Chi usa WordPress con il plugin CodeHighlighter non avrà problemi a mettere in evidenza parti di codice o paragrafi nel proprio blog, ma tutti gli altri che devono utilizzare i CSS in un sito, magari statico potrebbero trovare utile questo piccolo tutorial.

Con poche righe di css creeremo un rettangolo con bordo tratteggiato, sfondo giallino e un'immagine che fa da introduzione alla sezione. Mettiamoci subito all'opera.

Per prima cosa creiamo un'immagine che verrà visualizzata immediatamente sopra questa sezione. Qui vedete quella creata da me (download immagine).

Creata l'immagine a nostro piacimento possiamo definire le nostre classi css in questo modo

 
div.code{
width: 450px;
}
div.code p.codecont{
border: 1px dashed #333;
background-color: #FFFFE6;
margin:0;
padding: 8px 0 8px 8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
div.code p.codeimg{
background-image:url(tag_code.gif);
background-repeat:no-repeat;
background-position:0 0;
display:block;
margin:0;
height:29px;
}

notare che il valore di height nella class div.code p.codeimg deve essere pari all'altezza dell'immagine da voi creata.
Passiamo ora al codice HTML che risulterà così

 
<div class="code">
<p class="codeimg">&nbsp;</ p>
<p class="codecont">IL VOSTRO CONTENUTO</ p>
</div>
 

Ecco qua, in poche semplici righe abbiamo creato uno spazio gradevole per evidenziare il nostro codice o ad esempio i nostri versi.

Sicuramente esistono mille modi diversi per farlo, molto interessante per chi scrive molto codice, come me, le soluzioni che utilizzano il GeSHi - Generic Syntax Highlighter, ma questa semplice soluzione si è rivelata efficace e di facile personalizzazione.

Guarda la pagina con l'esempio. CSS per codice

PHP da buon linguaggio fortemente orientato al web offre numerose funzioni per la manipolazione delle immagini, le ultime versioni sono già comprensive delle librerie GD, potenti nel ridimensionamento, traformazione ecc.

Ma tra le funzioni del core di php ce n'è una che spessissimo uso e trovo sia veramente molto comoda, è la funzione getimagesize().

Vediamola nel dettaglio:

array getimagesize ( string $filename [, array &$imageinfo ] )

Il primo parametro $filename è una stringa che contiene il nome del file di cui vogliamo raccogliere le informazioni, comprensivo di percorso.
Il secondo parametro opzionale $imageinfo è un array nella quale verranno inseriti alcuni parametri aggiuntivi contenuti nell'immagine, come ad esempio i markers JPEG APP, spesso al loro interno si inseriscono le informazioni IPTC, personalmente lo uso pochissimo.

La funzione ritorna un array con 5 elementi:

• l'indice 0 contiene la larghezza dell'immagine in pixels
• l'indice 1 contiene l'altezzo dell'immagine in pixels
• l'indice 2 contiene una delle costanti IMAGETYPE_XXX che definiscono il tipo di immagine
• l'indice 3 contiene una stringa con i parametri height="yyy" width="xxx" utilizzabile in un tag HMTL IMG
• l'indice mime contiene il MIME TYPE dell' immagine
• nelle ultime versioni per alcuni tipi di immagine ci sono anche bits e channels

vediamo un esempio pratico e semplice per l'immagine in allegato.

 
 $imgdetails = getimagesize("php-logo.jpg");
 print_r($imgdetails);

e il risultato sarà

 
Array (
 [0] => 300
 [1] => 158
 [2] => 2
 [3] => width="300" height="158"
 [bits] => 8
 [channels] => 3
 [mime] => image/jpeg
)

Happy PHP!

Tra le numerose librerie Javascript nate con l'avvento di AJAX, jQuery merita decisamente una menzione particolare.
Storia di jQuery
il 14 Gennaio 2006 jQuery viene annunciato al BarCampNYC da quel momento iniziano a comparire i primi plugins e il 26 Agosto 2006 vede la luce la versione 1.0. La successiva versione 1.1 è del 14 Gennaio 2007, la 1.2 del 10 settembre 2007 e la nascita di jQuery UI, la libreria di interfaccia utente presentata il 17 settembre 2007.

Cos'è jQuery
fondamentalmente jQuery è una libreria di funzioni javascript che danno la possibilità di manipolare velocemente i vari elementi di una pagina html, dalle classi di un paragrafo ai moduli di una form. La struttura della libreria fornisce le funzioni di base, i plugins ne estendono le funzionalità creando strutture già pronte per ottenere le cose più impensate. Il motto "Write less do more" è indicativo di cosa sia effttivamente jQuery, ovvero uno strumento per semplificare e velocizzare alcune operazioni.

I plugins
punto di forza della libreria jQuery sono i plugins, moduli che possono gestire dai semplici effetti sulle finistre fino alle chiamate Ajax. La sezione Plugins del sito jquery è una risorsa meravigliosa, vi si possono trovare circa 200 esempi liberamente scaricabili e utilizzabili a piacimento. Il passo successivo è iniziare a scriverne uno da soli, nei prossimi post vedremo come.

Perchè scegliere jQuery
la scelta di una libreria, così come di un framework o di un semplice editor è sempre molto soggettiva, ma analizzando i vantaggi di jQuery credo che in molti valuteranno l'opportunità di utilizzarla. Le funzioni sono piuttosto intuitive, permettono con poche righe di ottenere risultati che con altre tecnologie risulterebbero complesse ed inoltre le prestazioni e la compatibilità con i più diffusi browser risultano ottimi.

Alcuni esempi
dopo aver inserito la libreria nel tag head della vostra pagina potete gestire ad esempio un evento al load della pagina, in questo caso un alert del messaggio Viva jQuery
Nella sezione HEAD della pagina metteremo

 
<script src="path/to/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Viva jQuery!");
});
</script>

oppure lo stesso alert al click su un link

 
<script type="text/javascript">
//sempre nella parte head
$("a").click(function(){
   alert("Viva jQuery!");
   return false;
 });
</script>

e nel body il nostro link

 
<a href="http://jquery.com/">jQuery</a>

ovviamente questo è il più semplice e basico degli esempi, nei prossimi post vedremo come qualcosina di più complesso.

Happy jQuery.

Non so quanti di voi abbiano un hosting plan su Netfirms, che personalmente posso consigliare per qualità e semplicità, ma se vi trovaste ad installare un blog con WordPress "from scratch" trovereste sicuramente problemi con i permalinks non di default, i "Pretty Permalinks" e gli "Almost Pretty".

Dopo qualche giorno di googling finalmente ho trovato una soluzione indolore che consiste nella semplice installazione e attivazione di un plugin chiamato Netfirms Pretty Permalinks Plugin. Una volta uploadato nella directory ‘/wp-content/plugins/’ e attivato dal menu Plugin, sarà sufficiente tornare in Opzioni > Permalinks e aggiornare la struttura.

Se usate la versione già inclusa nel pannello di controllo di Netfirms il problema non c'è ma ve lo sconsiglio perchè un po' datata.

Un mega grazie all'autore Joel che mi ha fatto risparmiare un sacco di tempo.