Categoria ‘Tutorials’


Creare un semplice Feed Reader con SimplePie e jQuery

SimplePie è una libreria PHP in grado di semplificare notevolmente il recupero e la manipolazione di Feed RSS o, più in generale, di formati XML. È possibile, ad esempio, scrivere poche righe di codice, sfruttando anche qualche “funzioncina” jQuery, per realizzare un News Ticker da inserire nel nostro sito/blog.

Continua...

How I did it: come creare uno sticker-ribbon in 3 passi

Gli sticker (o ribbon) sono quelle immagini che vengono posizionate in alto a destra, o in alto a sinistra, ed hanno comunemente una forma angolare a fascia. Ne esistono di vari tipi, dalle semplici immagini statiche ai più spettacolari filmati Flash. A volte sono costruiti in modo tale da rimanere nella loro posizione anche quando scorriamo il contenuto della finestra del browser.

Continua...

Adobe AIR e le API di Feedburner: reloaded

Prendo spunto dall’ottimo tutorial di Napolux, Flex 3, Adobe AIR e le API di Feedburner, che mostra come scrivere una semplice applicazione (o widget) Adobe AIR usando Flex 3, per mostrare come realizzare la stessa identica cosa usando Adobe Flash CS3. Se lo desiderate, inoltre, potete sfruttare l’estensione per la creazione di applicazioni Adobe AIR. Non è infatti necessario, ai fini di questo tutorial, compilare l’applicazione come eseguibile AIR; potete usare il codice proposto come semplice filmato Flash da “apporre” alle vostre pagine Web.

Continua...

Actionscript 3.0 for beginners: lesson #4

Riprendiamo il nostro codice di esempio del TicTacToe (che trovate per intero su Google Code) e iniziamo ad analizzarlo in dettaglio.

Importare le definizioni

Con Actionscript 3.0 è stato fatto un grande lavoro di pulizia e sistemazione nell’alberatura delle classi (contenute nei pacchetti, package) utilizzate durante lo sviluppo. In altri linguaggi di programmazione, come il C ad esempio, quando si desidera utilizzare una funzionalità bisogna esplicitamente “importarla” nel codice. Questa operazione di “importazione” è necessaria per permettere al compilatore di avere tutti i codici e le definizioni legate alla funzionalità che vogliamo usare. In Actionscript 3.0, tuttavia, l’istruzione import non va confusa con l’equivalente C/C++ #include; Actionscript 3.0 mette a disposizione l’istruzione include che è identica all’#include del C/C++. Quest’ultima, infatti, “include” effettivamente del codice che, se usato o meno, viene compilato nell’eseguibile finale. L’istruzione import è di più alto livello e risulta più “intelligente” in fase di compilazione. Essa serve principalemente per accedere alle classi senza doverne specificare il nome completo. In alre parole invece di usare forme del tipo:

1
var myMC:flash.display.MovieClip = new flash.display.MovieClip();

Continua...

WordPress: rimuovere i menu dell’amministrazione

Può risultare utile, a volte, “oscurare” alcuni menu dell’amministrazione di WordPress, soprattutto se si è sviluppato un sito/blog per un cliente e non si vuole permettere l’accesso a funzionalità particolarmente delicate. Esistono Plugin che svolgono questa già funzione ma, per avere un controllo personale e completo, vediamo come funziona in dettaglio questa caratteristica.
Come sempre sfruttiamo le utilissime Action messe a disposizione da WordPress, in questo caso admin_menu. Tramite la variabile globale $menu possiamo accedere alla lista dei menu dell’amministrazione. Possiamo individuare il menu da “eliminare” in due modi: tramite l’etichetta o tramite il link a cui punta (vedi parti commentati nell’esempio qui sotto). Nell’esempio proposto vengono “oscurate” le voci di menu Design, Impostazioni e Plugins:

1
2
3
4
5
6
7
8
9
10
11
12
13
function remove_menu_item() {
    global  $menu;
    // tramite label
    $removes = array( 'Design', 'Impostazioni', 'Plugins' );
    // tramite link
    // $removes = array( 'themes.php', 'options-general.php', 'plugins.php' );
    foreach( $removes as $todel )
        foreach($menu as $key => $sm) if($sm[0] == $todel ) { unset( $menu[$key] ); break; }
        // tramite link
        // foreach($menu as $key => $sm) if($sm[2] == $todel ) { unset( $menu[$key] ); break; }  
}
//
add_action('admin_menu',  'remove_menu_item');

L’uso del link come chiave per la rimozione ($sm[2] nelle parti commentate nel codice qui sorpra), è utile quando non si ha certezza della lingua – localizzazione – con cui è stato installato WordPress. Con questa tecnica, tuttavia, il menu è rimosso solo a livello di interfaccia, quindi sarà possibile ancora accedere alla pagina tramite una link diretto.

Continua...

jQuery: bordi rotondi sulle immagini per sovrapposizione

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua...

WordPress: come creare passo passo un proprio login

In questo tutorial vedremo come creare una procedura di Login personale, utilizzando anche funzionalità Ajax tramite jQuery. Ci sono vari metodi per personalizzare il login di WordPress, ad esempio tramite l’uso di hook e filtri (add_action(), add_filter()). Noi qui useremo una procedura più a basso livello, anche se ci interfacceremo comunque al Kernel di WordPress. Inoltre faremo in modo di convalidare un utente tramite la dupla email/password.

Perchè realizzare un proprio login?

  • In alcuni contesti può ritornare uitle avere il massimo controllo sulla pagina di login, per proporre un layout personalizzato ai nostri utenti registrati. Inoltre si può arricchire la pagina con informazioni utili, dal un logo al classico “Password dimenticata?”
  • Per permettere l’accesso tramite l’email (come nell’esempio qui trattato) al posto dello user_login standard di WordPress
  • Per avere la possibilità di inserire un pannello di login nella sidebar del nostro Blog
  • E infine, per avere uno scheletro – ed un’idea – per un ottimo Plugin :D

Ambiente

Nel nostro esempio/tutorial lavoreremo sulla root di WordPress all’interno di una cartella mylogin. Creiamo due file php all’interno di questa cartella: index.php e logon.php. Il primo conterrà l’interfaccia del nostro login, con tutte le funzioni Javascript/jQuery che ci servono. Il secondo file, logon.php, conterrà il codice per la validazione dell’utente. Creiamo poi una cartella css e dentro questa un file layout.css e una cartella images. All’interno della cartella images inseriremo un classico Ajax loader: createlo online su AjaxLoad.info. Alla fine dovreste avere:

  • mylogin
  • index.php
  • logon.php
  • css
  • layout.css
  • images
  • ajax-loader.gif

Continua...

Very short trick: valori undefined in Javascript

Esiste una forma abbreviata per assegnare “al volo” una valore ad una variabile se un’altra non è definita (undefined), usando l’operatore di OR logico (||) – doppio pipe:

1
2
3
4
5
// pluto risulta undefined
var pluto;
var pippo = pluto || '5';
alert( pippo );
// risultato: 5

Continua...

WordPress: migliorare la lista dei commenti

Il template standard di WordPress (come altri) normalmente preve un layout alternato per la lista dei commenti. Nel template standard di esempio è impostata una classe css alt, secondo la logica:

1
2
3
4
5
// file comments.php
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
[...]
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Questo fa si che nel tag li $oddcomment sia impostato una volta a vuoto ("") e una volta a class="alt". Una modifica utile potrebbe essere quella di introdurre un ulteriore classe quando è l’autore del blog a commentare un post:

image

Io, ad esempio, ho usato il seguente codice nel file comments.php:

1
2
3
4
5
<?php
    $authcomment = ($comment->user_id==3)?' authcomment':'';
    $classcomment = ( empty( $classcomment ) ) ? ( ($authcomment=='')?' alt':'' ) : '';  
?>
<li class="<?=$classcomment?><?=$authcomment?>" id="comment-<?php comment_ID() ?>">

La riga $comment-&gt;user_id==3 può variare in base all’ID del vostro utente. Io, ad esempio, non uso l’amministratore per rispondere sul blog, ma ho un mio utente con ID=3. Normalmente l’ID dell’amministratore è 1, se usate questa utenza potete scrivere: $comment-&gt;user_id==1. In questo modo oltre ad avere l’alternanza di layout sui commenti lasciati dai visitatori, risulta immediatamente riconoscibile la risposta dell’autore del blog.

Continua...

Very short trick: cicli for più rapidi in Actionscript

In Actionscript i cicli for è bene utilizzarli sempre con cura. Ad esempio è bene usare variabili uint quando è possibile:

1
2
3
for( var i:uint = 0; i++; i < 100) {
// ...
}

È anche possibile usare la – non sempre conosciuta – forma:

1
2
3
4
5
var i:uint = 0;
// ...
for(;  i++; i < 100) {
// ...
}

Continua...



Stop SOPA