photo credit: House Of Sims

Ho iniziato a scrivere su Wordpress usando il charset ISO-8859-15 (opzioni > lettura), dopodiché, un bel giorno, ho deciso di passare a utf-8.

Cosa è successo? …che al posto dei caratteri accentati si vedevano dei punti di domanda! UFFA!

Allora sono andato un po’ in cerca e ho trovato qualcuno che diceva di avere la soluzione; purtroppo non ho potuto provare perché il mio provider non mi dava gli strumenti necessari. Ho cercato di aggirare le mancanze del provider, ma purtroppo la cosa sembrava non funzionare.

Finalmente un altro bel giorno ho potuto urlare il mio “EUREKA“!
Perché?
Avevo trovato un’altra “soluzione” (tra virgolette, perché di vera soluzione non si tratta, ma almeno i sintomi più evidenti scompaiono)

Ho fatto un bel backup del mio database di Wordpress - seguendo le istruzioni - e poi ho aperto il file *.sql con un editor di testo (tipo Notepad++) con cui ho fatto un cerca/trova dei caratteri che più si notavano essere sbagliati: ò à ù ì è é. …e li ho sostituiti con i rispettivi in HTML.
Poi ho ricaricato il nuovo database!
Et voilat!

Se vi serve sapere qual’è l’indirizzo completo (http://… eccetera) della pagina in cui risiede il vostro codice, con PHP è cosa facile:

echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']

E’ notorio che i video presenti in YouTube si possono scaricare abbastanza facilmente, convertendoli anche in differenti formati video, ma una cosa ci mancava: la possibilità di scaricare in file mp3!

Il sito VidToMp3 offre un servizio online gratuito che permette di scaricare la traccia audio di un video di YouTube in formato Mp3, e successivamente addirittura di condividerla o pubblicarla con un player sul nostro sito web.

La procedura è semplicissima:

1. si va nel sito,
2. si copia l’indirizzo URL del video di YouTube - qualcosa tipo http://www.youtube.com/watch?v=K7y8GC3DW4Y - nell’apposito campo testo,
3. si clicca su DOWNLOAD,
4. si porta un po’ di pazienza,
5. alla fine si può cliccare sul bottone con scritto DOWNLOAD MP3!

Un altro servizio online che permette di salvare i video di YouTube in formato video o audio (avi, mov, mp4, 3gp, mp3) è quello offerto sul sito  di vixy.net

Forse nessuno se n’era accorto prima - o forse non me n’ero accorto solamente io! - ma già dal lontano 2006 c’è un bellissimo javascript che permette di ordinare le righe di una tabella secondo i criteri più disparati.

Essendo uno script javascript, come detto, si tratta di una funzione non invasiva, cioè avviene sul lato client, cioè voi programmatori dovete solamente implementare il codice nella pagina dove risiede la tabella da manipolare E NON creare qualche strana alchimia a monte.

Questo script è la versione rivisitata di uno script precedente che faceva la stessa cosa, che però era più lento nell’elaborazione dei dati.

• si possono scrivere funzioni personalizzate per ordinare le righe
• si possono evidenziare le righe/colonne con colori alternati
• lo script determina automaticamente il tipo di dati presenti in una colonna (numeri, lettere, …)
• si possono definire funzioni prima e dopo il riordino delle righe

Tanto per fare un esempio basilare, il tipo di chiamata che si farà per ordinare la tabella sarà di questo tipo:

fdTableSort.jsWrapper(yourTableId, colNum);

Per rendere qualsiasi colonna riordinabile basta assegnare al TH il className sortable. Lo script si occuperà sia di determinare il tipo di dati in colonna sia di creare una testa di colonna cliccabile con relativa freccia di ordine.

Per trasformare una colonna normale in una colonna “ordinabile” è sufficiente assegnare al tag TH classname=”sortable”.

I tipi di dati ordinabili riconosciuti sono:

• testo semplice (case insensitive, cioè non tiene conto della differenza tra minuscole e maiuscole).
• date (dd-mm-yyyy, mm-dd-yyyy, yyyy-mm-dd)
• valute (€, $, £, ¥)
• numeri e decimali

link: Unobtrusive Table Sort Script (revisited) , Una demo

-

Se però per caso usate jQuery o preferite una soluzione altamente semplice e facile da implementare, esiste anche un plugin per il suddetto framework.

Il plugin per jQuery si chiama TableSorter, ed usarlo - come ho detto - è molto facile…

1. inserire il richiamo per jQuery e TableSorter dentro <head>

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

2. dare il corretto ID alla tabella da ordinare

 <table id="myTable">

3.  non scordarsi di richiamare la funzione

<script>
$(document).ready(function() {
    $(#myTable).tableSorter();
});
</script>

Creare un effetto rollover su immagini, che magari stiamo usando come pulsanti nelle nostre pagine web, diventa molto semplice usando il framework Jquery.

Come al solito, richiamiamo Jquery, dopodichè all’interno del solito ‘richiamo’…

$(document).ready(function(){
    ...
});

…inseriamo un codice come questo:

$("img[@src*=bottoneOut.gif]").mouseover(function(){
    $(this).attr({ src: "BottoneOver.gif" });
});

Per chiarezza:
il codice ha effetto su l’immagine che nel suo SRC (source, sorgente) contiene ‘bottoneOut.gif’ (ma potevamo scrivere anche solo ‘bottone’, ‘Out’, ‘gif’, …) e al momento in cui il mouse le passa sopra entra in azione, modificando l’attributo SRC in modo da richiamare un’altra immagine.

Alla stessa maniera funziona il codice per ripristinare la situazione iniziale:

$("img[@src*=bottoneOut.gif]").mouseout(function(){
    $(this).attr({ src: "bottoneOut.gif" });
});

Se qualcuno ha qualche consiglio per semplificare questo codice, è il benvenuto.

Dalla versione 2.1 di Wordpress sono stati aggiunti alcuni pulsanti che rendono più facile il passaggio di testo formattato da Word al nostro sito.
Per far apparire i pulsanti dell’editor avanzato basta cliccare sull’icona che sembra una piccola scacchiera colorata:

Cliccando sull’icone- qui cerchiata in rosso - apparirà una nuova riga con dei nuovi pulsanti.
Quelli che a noi interessano maggiormente sono due: “incolla come testo puro” e “incolla da Word”.

Il primo (quello con la lettera ‘T’) permette di incollare sul nostro editor un qualsiasi testo tralasciando però qualsiasi tipo di formattazione avesse questo in origine; il secondo (quella con la ‘W’) permette di mantenere un certo livello di formattazione, escludendo - per esempio - le informazioni su tipo e dimensione dei caratteri.

Al cliccare su uno dei due pulsanti apparirà una finestra, dove potremo incollare il testo che poi verrà inserito nell’editor proprio quando cliccheremo su ‘inserisci’.

A volte i blogger rispondono ai navigatori che commentano i loro post, commentando di seguito i loro stessi articoli.
Spesso questi blogger hanno la necessità voglia di far risaltare i loro commenti su quelli dei normali visitatori, ma forse non sanno come fare.
…almeno, questo era un mio cruccio!

Io l’ho fatto in un modo semplicissimo:

1.
scaricare e mettere nel proprio server il framework javascript Jquery

2.
includerlo inserendo nell’header del blog (nel tag script):

 src="jquery.js"

3.
inserire un’altro script, sempre nell’HEAD, con queste righe:

$(document).ready(function(){
$(" li:has(cite:contains('DoZ')) ").css('background-color','#E5F3FF');
});

Ovviamente sono da personalizzare DoZ col nome dell’autore da evidenziare, e il colore dello sfondo.
La riga centrale (quella ‘importante’) può essere duplicata e riproposta per personalizzare quanti altri autori vogliamo.

Dopo aver appena visto come creare grafici con Flash e diagrammi con Javascript, eccomi qui a ricordarmi di non aver mai parlato dell’ottimo - anche se forse un po’ più astruso - Google charts (charts=grafici).

Se avete la necessità di inserire un semplice grafico nella vostra pagina internet, ma anche se volete creare dei grafici di gran impatto visivo, magari anche collegati a database dinamici, Google charts può sicuramente esservi utile.

Il grafico a torta tridimensionale che vedete in apertura è creato con una semplicissima riga di codice HTML:

http://chart.apis.google.com/chart?cht=p3&
chd=s:Z923&
chs=400x180&
chl=Google|Charts|Disegna|Grafici&
chco=1B75DF,ff0000

…che per comodità di lettura ho mandato a capo ad ogni variabile inserita.

Come si usa?

I tipi di grafici che si possono creare sono i seguenti:

• grafici lineari (a linee spezzate)
• grafici a barre
• grafici a torta
• diagrammi di Eulero-Venn (insiemi)
• diagrammi a dispersione (scatterplot)

(more…)

Un effetto come la dissolvenza incrociata tra immagini che in Flash risulta semplicissimo da creare, diventa un po’ meno ovvio quando si voglia riprodurlo in una pagina html.
Per fortuna c’è sempre qualcuno che ci pensa prima di noi!

Image Cross Fader Redux è una combinazione Javascript+CSS che fa proprio questo, ed implementarla in una pagina web è semplicissimo:

1. richiamiamo i file .js e .css nei tag HEAD, come al solito;
2. racchiudiamo tutte le immagini che devono susseguirsi nella dissolvenza in un DIV con id=”imageContainer”;
3. modifichiamo nel file xfade2.css il valore di height per adeguarlo alle immagini che useremo.

link: http://slayeroffice.com/code/imageCrossFade/xfade2.html

Position:absolute fa in modo che il nostro blocco si posizioni nella pagina “come se fluttuasse” (infatti non lascia traccia - o spazio - della sua posizione effettiva nella pagina/codice html); si possono usare le proprietà left, right, top, e bottom per il posizionamento nella pagina.

Position:relative posiziona il blocco in relazione alla posizione originale sulla pagina html, cioè viene spostato, usando sempre le stesse proprietà left, right, top, e bottom.
Questo però lascia traccia (uno spazio vuoto) della posizione originale.

Tramite float un box e il suo contenuto vengono spostati di lato, e lo spazio che prima occupavano viene riempito dal contenuto successivo.
Questo parametro può servire nella costruzione di layout a colonne multiple affiancate.

La proprietà clear indica il comportamento degli elementi seguenti, e può assumere valori left, right, both e none.