Vi presento il mio piccolo ed umile progetto: un player, molto spartano, che visualizza l’immagine presa da una webcam.

Ambiente di programmazione:

• C++ basato sul tool MINGW
• framework QT 4.5.3
• IDE QTcreator 1.2.1
• librerie OpenCV

Il framework QT permette di creare programmi multipiattaforma: modificando solo il percorso delle librerie e degli “include” posso compilare lo stesso pregramma e crearmi degli eseguibili per win32, linux32 o macosx. Le OpenCV sono delle librerie opensource per la computer vision e per maggiori ragguagli vi rimando a questo dettagliato articolo di Matteo Lucarelli.

Link:
QT 4.5.3 win32
QT 4.5.3 linux32
QT 4.5.3 macosx

OpenCV library
di tutto e di più sulle OpenCV

Il codice è molto semplice, l’unica difficoltà riscontrata è stata su come far visualizzare l’immagine della cam sul widget. Scorrazzando su internet ho trovato del codice che mi ha permesso di trasformare l’immagine rilasciata dalla libreria opencv in una label.
Di seguito il risultato su tre diversi S.O.

WIN7

Linux Ubuntu 9.10

Mac OS X 10.5.8

Ed ecco il codice:
Note: There is a file embedded within this post, please visit this post to download the file.
ovviamente dovete cambiare il percorso delle lib e degli include relative a OpenCV; visto che questo punto l’ho studiato per tutti e tre i S.O. se avete problemi chiedete pure.

Enjoy it!

Dopo avere giocherellato con l’OSX 10.5.8, il Leopardo dell’Apple, ho cominciato a navigare sul web googlando alla ricerca di informazioni riguardante la programmazione in ambiente OSX, finché non mi ha incuriosito questo articoletto del 2005, ma che ho scoperto essere ancora di grande attualità.
Registrato al sito dell’Apple riservato agli sviluppatori (Mac Dev Center), ho scaricato ed installato l’ambiente di sviluppo integrato Xcode^W 3.1.2.
Xcode lavora in congiunzione con Interface Builder^W (IB), un tool grafico per realizzare interfacce grafiche. Xcode include GCC, che è in grado di compilare codice C, C++, Objective C/C++ e Java. Supporta ovviamente i framework Cocoa e Carbon, oltre ad altri.
Mi sono dunque soffermato sull’Objective C^W , linguaggio di programmazione orientata agli oggetti^W e su Cocoa , il framework o ambiente di programmazione orientato agli oggetti sviluppato da Apple Inc. per il sistema operativo Mac OS X.
A questo punto, per iniziare, consiglio una lettura attenta, dei primi dieci capitoli (sono abbastanza brevi) del sito MACOCOA e di qualche tutorial (in rete se ne trovano diversi anche in italiano) come:
Programmare MacOSX
Diventare un Xcoder (e-book)
Presto, dopo essermi ben documentato, le prime impressioni e magari qualche prima piccola applicazione.
Enjoy it!

PHPGraphLib è una libreria “preconfezionata”, orientata agli oggetti e scritta in php che utilizza le librerie GD. Essa è destinata alla creazione di grafici per l’inserimento di questi ultimi in pagine web. I grafici permettono di mostrare a tutti i dati o risultati numerici in maniera più chiara tramite l’utilizzo di immagini e colori.
L’uso della libreria facilita il compito agli sviluppatori meno esperti anche perché include un sistema di gestione degli errori molto efficace. I risultati ottenibili con questa libreria sono veramente stupefacenti, la potenza del codice inserito nell’unica pagina di PHPGraphLib possono essere utilizzati al massimo, date le piccole dimensioni di quest’ultima.
Sul sito dell’autore (Elliott Brueggeman) possiamo trovare la pagina di download da dove scaricare la libreria, disporre della guida ufficiale e di alcuni esempi testuali e video.
Per potere utilizzare PHPGraphLib bisogna salvare i due file contenuti nella libreria, “phpgraphlib.php” e “phpgraphlib_pie.php”, in una cartella. Successivamente occorrerà modificare il file php.ini ed eliminare il commento ( ; ) alla riga “extension=php_gd2.dll” nel caso sia commentata.
Per ultimo occorrerà includere il file *.php della libreria nella nostra pagina php e scrivere il codice per creare il grafico.
Nota: bisogna creare in grafico in una pagina php a parte e richiamarla come imagine nella pagine dove vogliamo visualizzare il grafico.

Vediamo dei semplici esempi:

include("phpgraphlib.php"); 
$graph=new PHPGraphLib(500,350);
$data=array(12124,5535,43373,22223,90432,23332,15544,24523,32778,38878,28787,33243,34832,32302);
$graph->addData($data);
$graph->setTitle("Widgets Produced");
$graph->setGradient("red", "maroon");
$graph->createGraph();

salviamolo come “immagine.php” e richiamiamo il grafico nella pagina htlm con

<img src="immagine.php">

il risultato è il seguente:

Nella pagina Statistiche di questo blog ho utilizzato queste librerie.
Nel caso del diagramma a torte, per esempio, passo dinamicamente i valori da diagrammare in questo modo:

<img src="<?php echo "statistiche_torta.php?a=$a&r=$r&s=$s&m=$m" ?>" />

Nel file ” statistiche_torta.php”

    include ("phpgraphlib.php");
    include ("phpgraphlib_pie.php");
 
    $a=$_GET['a'];
    $r=$_GET['r'];
    $s=$_GET['s'];
    $m=$_GET['m'];
 
    $graph=new PHPGraphLibPie(450,250);
    $data=array("Aggregatori"=>$a, "Motori di ricerca"=>$r,"Social Network"=>$s, "E.mail"=>$m);
    $graph->addData($data); 
    $graph->setLabelTextColor("silver");
    $graph->setLegendColor("silver");
    $graph->setLegendOutlineColor("white");    
    $graph->setTitle("Parlano di me....");
    $graph->setLabelTextColor("50,50,50");
    $graph->setLegendTextColor("50,50,50");
    $graph->createGraph();

Ovviamente è possibile passare direttamente l’array da diagrammare oppure ricavare i valori eseguendo query in mysql, complicando il codice.

Enjoy it!

Per chi sviluppa siti web o anche per gli smanettoni dei temi di wordpress, cercando di migliorare il layout, il codice HTML o il CSS, uno strumento che senza dubbio non deve mancare è il programma Firebug.
Firebug è un’estensione di Mozilla Firefox che permette il debug, la modifica e il monitoraggio di tutti gli aspetti di una pagina web, come i fogli di stile, il codice HTML, la struttura DOM e il codice JavaScript. Firebug fornisce anche altri strumenti per lo sviluppo web come una console JavaScript e una funzione chiamata “Net” che permette di monitorare il tempo di caricamento in millisecondi di immagini e script. Oltre che per il debug, Firebug è uno strumento indispensabile per testare la sicurezza e la performance dei siti web.
Firebug è stato creato da Joe Hewitt, uno dei creatori di Firefox, ed è attualmente sviluppato e mantenuto dal Firebug Working Group.
Addirittura FireBug è estendibile con add-on che aggiungono nuove funzionalità o migliorano quelle esistenti. Una selezione la trovate in questo post di SixRevisions.
Una volta installato come estensione di firefox, l’uso è semplicissimo.
Il video seguente spiega chiaramente le potenzialità di Firebug (per una migliore visualizazione visualizzare il video a schermo interno).

Un effetto molto gradevole ed utile nell’economia di un sito web è senz’altro un’interfaccia a tab. JQuery permette di crearne di complesse ma la volontà di questo articolo è descriverne uno base, semplice, ma comunque funzionale e facilmente adattabile a molte esigenze.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file e la cartella:

• index.htm
• style.css
• scripts.js
• cartella images

Passo 1 – creazione delle immagini

Decidete quanti tab sono necessari al vostro progetto (nel mio caso 3). Se non siete bravi in grafica e design cercate su internet le immagini che concettualmente si avvicinano al contenuto di ogni tab.
Modificate le dimensioni tenendo conto dello spazio che volete utilizzare.
A questo punto duplicate la vostra immagine e modificatela con effetti a piacere. Una volta terminato, create una nuova immagine ed incollate sopra la figura modificata e sotto la figura originale. (vedi immagine)

Passo 2 – file HTML e CSS

Se aprite il file index.html troverete:

<ul id="tabMenu">  
     <li class="tabrss selected"></li> <!-- bottone di default-->  
     <li class="tabpost"></li>  
    <li class="tabcom"></li>  
</ul>

Nel file style.css, il div “tabMenu” è associato a:

li.tabcom  {background:url(images/tabcom.png) no-repeat 0 -77px;}
li.tabrss  {background:url(images/tabrss.png) no-repeat 0 -77px;}
li.tabpost {background:url(images/tabpost.png) no-repeat 0 -77px;}  
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -77px;}
li.selected {background-position:0 0;}

Come potete notare di default l’immagine (di dimensioni 77px / 77px) parte da -77 px (quindi viene vusualizzata la sezione a colori), se si passa il cursore del mouse sopra (voce “li.mouseover” nel file style.css) parte da 0 px (quindi viene visualizzata la sezione in b/n), così come quando viene selezionata (voce “li.mouseover” nel file style.css). Quindi avremo, a secondo i casi, una situazione del genere:

Il contenuto delle tre tab (ma se ne possono aggiungere altre a piacere) andrà inserito nella seguente struttura contenuta nel file index.html:

<div class="boxBody">
<div id="posts" class="show">    <!-- pagina di default-->  
 
......................</div>
<div id="famous">
 
...............</div>
<div id="comments">
 
.................</div>
</div>

Ovviamente bisogna lavorare di CSS per rendere il tutto più gradevole.

Passo 3 – file JS

Nel file script.js è contenuta la funzione per la gestione dei tab con l’effetto a finestra nel cambio tra un tab e l’altro.

//nasconde il tab precedente
$('.boxBody div').slideUp("slow");
 
//visualizza il tab selezionato
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

In questo modo utilizziamo solo la libreria jQuery. Se voglamo altri effetti, come il fade alle immagini (invece della tecnica sopra illustrata) o altri effetti sul contenuto dei tab, ovviamente il file script.js sarà più complicato ed inoltre sarà necessario caricare i plugin di jQuery.

Enjoy it!

Di norma non scrivo articoli sui plugin di WordPress, visto che googlando si trovano migliaia di post su questo tema, però il plugin Category Icons questa volta mi è piaciuto moltissimo, poichè è interessante l’idea di associare un articolo  alla categoria attraverso una immagine: specie nei blog con tante categorie, questo plugin può aumentare di molto la visibilità di tutti gli articoli.

Ma entriamo nel vivo….

Category Icons, qui il sito di riferimento, permette di associare delle icone alle gategorie del blog e di visualizzarle lì dove richiamate. L’interfaccia grafica per il setup è molto intuitiva e l’autore, nel suo sito, spiega in maniera molto chiara come inserire il codice all’interno delle pagine del vostro tema.

Le icone vengono carica sul server andando dal menù “Icone” e ad ogni categoria può essere associata una icona piccola ed una grande.
Il codice, per visualizzare le icone, può essere inserito in maniera automatica (menù “Opzioni” -> “Template Tags”) o manuale (menù “Template Tags”); in quest’ultimo caso l’autore ci suggerisce il file php da modificare fornendo addirittura le coordinate espesse in riga e colonna.
Con il plugin è compreso anche un widget delle categorie da personalizzare, che visualizza le icone associate, appunto, alle vostre categorie. Inoltre, sul sito alla voce “Translate the plugin” vi sono altre localizzazioni del plugin incluse quella italiana.

Un consiglio: quando scegliete le immagini fate in modo tale che abbiano la medesima dimensione. Per le immagini piccole, che compaiono nella pagina principale o associate ai permalink degli articoli, ho scelto la dimensione 32×32, mentre per le immagini grandi, che ho inserito nella pagina dell’articolo, ho scelto la dimensione 116×116. Ovviamente le dimensioni scelte dipendono dal vostro tema.

Enjoy it!

Segue da….questo articolo

Dopo aver capito come gestire dinamicamente la struttura di una tabella utilizzando il “div” ho voluto un pò complicare il tutto aggiungendo la possibilità di effettuare il drag and drop di una riga.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file:

• index.htm
• scripts.js
• jquery.tablednd_0_5.js … approfondimento

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<table id="campi"></table>

infatti è all’interno di questo “table” che verranno creati i vari campi di input, contenuti nelle righe create dinamicamente. Come potete notare non uso più il “div” (vedi articolo precedente).

Passo 2 – file JS

Vi sono quattro funzioni:

La funzione addFormField() inserice una riga nella tabella contenente il campo di input.
La funzione removeFormField() rimuove la riga selezionata dalla tabella e richiamando la funzione aggiorna(), riodina le etichette dei campi in ordine numerico crescente.
La funzione inizializza_tabella() usa la libreria “jquery.tablednd_0_5.js” e rinizializza la tabella per il drag & drop delle righe. Usa volta effettuato lo spostamento della riga, le etichette dei campi verranno riaggiornate.

Di seguito il codice:

function inizializza_tabella() {
   $('#campi').tableDnD({
        onDrop: function(table, row) {
            aggiorna();
        }
    });
}
 
function addFormField() {
	var id = $('#campi tr[id^="row"]').length + 1;
	$("#campi").append('
 
Campo '+id+'
<input id="txt'+id+'" name="txt[]" size="25" type="text" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
');
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+id+" &gt;";
	inizializza_tabella();
}
 
function aggiorna() {
var index = 0 ;
   $("#campi tr").each(function(i){
          i++; index=i;
	      $(this).attr('id','row'+i);
		  var currentVal = $(this).find('input').val();
		  $(this).html('
Campo '+i+'
<input id="txt'+i+'" name="txt[]" size="25" type="text" value="'+currentVal+'" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
')
	});
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+index+" &gt;";
}; 
 
function removeFormField(el) {
    $(el.parent()).remove();
    aggiorna();
   	inizializza_tabella();
};

Per un progetto che sto sviluppando ho avuto la necessità di crare una tabella non conoscendo a priori i campi che la componevano. Cioè la tabella doveva essere creata in maniera dinamica, con la possibilità di aggiungere o rimuovere i campi a piacere durante la creazione. Dopo un attenta analisi e un approfondito studio sull’argomento ho risolto utilizzando le librerie jQuery.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file:

• index.htm
• scripts.js

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<div id="campi"></div>

infatti è all’interno di questo “div” che verranno costruiti i vari campi.

Passo 2 – file JS

Vi sono due funzioni:

La funzione addFormField() crea un campo di input e lo inserisce nel form. Supponendo, per esempio, di inserire due campi, all’interno del “div” di cui sopra compariranno le linee di codice:

<p id='row1'>
   <label for='txt1'>Campo 1&nbsp;
       <input type='text' size='20' name='txt[]' id='txt1'/>&nbsp;&nbsp;
       <a href='#' onClick='removeFormField("#row1"); return false;'>Rimuovi</a>
    </label>
</p>
<p id='row2'>
   <label for='txt2'>Campo 2&nbsp;
     <input type='text' size='20' name='txt[]' id='txt2'/>&nbsp;&nbsp;
     <a href='#' onClick='removeFormField("#row2"); return false;'>Rimuovi</a>
   </label>
</p>

Ho inserito “Rimuovi” invece dell’immagine dell’esempio.
Come potete notare, il “form” restituirà un array “txt[]” contenente i valori dei campi; tale array sarà possibile processarlo, per esempio, richiamando da “form” un file php.

La funzione removeFormField() oltre a rimuovere il campo desiderato riordina i rimanenti campi.

Continua con…questo articolo

Di cosa stiamo parlando?

RSS esattamente significa Really Simple Syndication o Rich Site Summary e non è altro che una serie di formati espressi in Xml, che dalla forma più semplice, contengono una lista (i cosiddetti feed) di titoli, brevi sommari e link. L’RSS è stato “inventato” originariamente da Netscape alla fine degli anni ’90, al fine di creare uno standard per la condivisione di notizie e news provenienti da altri portali. Rimaneggiato nel tempo, oggi trova spazio e grande uso nel mondo dei Blogger.
I feed RSS rappresentano un alleato prezioso per coloro che desiderano tenersi costantemente aggiornati, raccogliendo informazioni da diversi siti. Se, ad esempio, ci si collega spesso a siti che pubblicano notizie di attualità, con i feed RSS si possono raccogliere rapidamente, in un’unica “finestra”, tutte le notizie più recenti. Queste appaiono normalmente in forma breve, con un titolo e poche righe di testo. Per approfondire, si può cliccare sul collegamento ipertestuale (“link”) che rinvia alla pagina con il testo completo.

Quali sono i vantaggi per l’utente?

Attraverso i programmi Newsreader l’utente può navigare tra i siti Web di interesse in modo diverso rispetto a quanto avviene con un normale browser:

• L’utente non deve accedere ai diversi siti di interesse per vedere se vi sono delle nuove notizie. Questo tipo di attività viene svolta dal Newsreader, che segnala le varie novità e propone all’utente i contenuti aggiornati.
• Non è necessario aprire ogni pagina di un sito per capire se il contenuto sia interessante. Sulla base del titolo e del sottotitolo l’utente può valutare se la notizia contenga informazioni che lo interessano e solo in caso affermativo accedere alla pagina Web vera e propria. In questo modo si risparmia molto tempo nella navigazione.
• A differenza delle tradizionali Newsletter, l’utente non è più obbligato ad abbonarsi al servizio lasciando il proprio indirizzo di posta elettronica, riducendo così i rischi di recapito di posta indesiderata (spam);
• Ormai tutte le principali testate giornalistiche internazionali, dal New York Times allo Spiegel, dalla Reuters alla BBC mettono a disposizione degli utenti gratuitamente le ultime notizie come RSS – Feeds.
• Gli RSS-Feeds sono messi a disposizione della collettività e possono essere caricati all’interno di qualunque sito. In questo modo viene facilitata sensibilmente la diffusione delle notizie nel Web.

Come utilizzare i Feed RSS?

Per utilizzare i feed RSS è necessario:

• che il sito di proprio interesse pubblichi le novità in formato RSS (spesso la presenza di RSS viene segnalata da un simbolo come quello pubblicato in questa pagina);
• un “aggregatore” di RSS. Quest’ultimo può essere un software che va installato nel proprio personal computer oppure una applicazione condivisa in Rete. Va segnalato che le versioni più recenti dei browser (cioè il software che si utilizza normalmente per navigare in Rete, come Internet Explorer e Firefox, Opera, Safari) hanno integrato gli aggregatori al proprio interno

Il video seguente spiega chiaramente come utilizzare gli aggregatori di RSS on line.

Il file .htaccess è uno strumento molto potente, specialmente per chi usa WordPress: fra le tante opzioni, permette di utilizzare permalinks più complessi associati ai post. Il problema è che, a secondo delle diverse strategie dei server host che ospitano i nostri blog, la creazione di questo file può diventare abbastanza complessa.

Nel mio caso, infatti, WordPress non riusciva a creare il file .htaccess, nè tantomeno, forzando con un upload tramite ftp, esso veniva letto in maniera corretta. Ecco la soluzione che ha risolto il  problema sull’host che ospita il mio blog e che utilizza ,come interfaccia utente per il setup ,cPanel.

Accedi al cPanel con il tuo nome utente e password, quindi una volta che hai fatto il login individua il “File Manager”.

L’interfaccia grafica del File Manager è in stile Windows, molto familiare, e permette di gestire  i file sul tuo account di hosting. Clicca sulla icona della cartella public_html e successivamente sulla cartella dove sono salvati i file del WordPress (se diversa da root). Individua quindi l’icona del File Manager che permette di creare un nuovo file.

Cliccando avrai la possibilità di salvare dentro la cartella il file “.htaccess”, all’inizio vuoto, ma con i permessi giusti. Riempi i campi richiesti e crea il file.

A questo punto è possibile aprire il file per poterlo editare (cercare l’icona “edit” selezionando il file .htaccess) e, una volta inseriti i valori suggeriti da Wordpres per l’impostazione dei permalinks, salvarlo.

I permalinks dovrebbero funzionare in maniera corretta.

That’s all folks!

gkv4tbdjfr