• Per articolo: ad esempio 10 euro ogni articolo che scrivi
• Tramite adsense: l’autore inserisce il proprio annuncio pubblicitario adsense e viene pagato in base ai clic

Generalmente il secondo è quello più utilizzato, saranno gli utenti stessi, coi loro accessi e i loro clic, a decretare il successo o meno di un articolo. Il concetto è semplice: ogni autore possiede un account Google Adsense e gli viene concesso di inserire un annuncio relativo al proprio Publisher ID all’interno dell’articolo che scrive.
Il Publisher ID si trova in alto a destra nel pannello di amministrazione di Google Adsense, tipicamente è una stringa del tipo pub-1234567890. Questa stringa appare nel codice html degli annunci, nell’esempio seguente è evidenziata in grassetto:

<script type=”text/javascript”><!–
google_ad_client = “pub-1234567890“;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = “468x60_as”;
google_ad_type = “text”;
google_ad_channel = “”;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “CCCCCC”;
google_color_text = “000000″;
google_color_url = “666666″;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Per costruire un sito web write to paid, potremmo utilizzare i campi personalizzati di wordpress. Se chiediamo agli autori di creare un campo dal nome adsenseID e compilarlo con il proprio publisher ID, ogni volta che scrivono un nuovo articolo, potremo andare poi a ripescarlo nel tema di wordpress per pubblicare il suo gruppo di annunci.

Creare un campo personalizzato è molto semplice: dall’editor di scrittura, sotto alla finestra di testo, basta aggiungere nome e valore e premere il tasto “Aggiungi campo personalizzato”.

I modi per visualizzare i campi personalizzati nel tema sono descritti molto accuratamente qui: http://codex.wordpress.org/Using_Custom_Fields
La funzione che ci interessa è get_post_meta($post_id, $key, $single)

• $post_id è l’ID odel post per il quale vogliamo visualizzare il campo personalizzato. Si può usare $post->ID per ricavare quello del post attuale all’interno del loop
• $key è la stringa che identifica l campo personalizzato, nel nostro caso sarà adsenseID (creato in precedenza)
• $single è un valore booleano (vero/falso). Se impostato a true la funzione restituisce un risultato singolo, come stringa. Se impostato a false, o non impostato, la funzione restituisce un array coi campi personalizzati

Dove vogliamo far apparire gli annunci bastarà scrivere, nel file del tema (ad esempio in single.php):

<?php $key=”adsenseID”; ?>
<script type=”text/javascript”><!–
google_ad_client = “<?php echo get_post_meta($post->ID, $key, true); ?>”;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = “468x60_as”;
google_ad_type = “text”;
google_ad_channel = “”;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “CCCCCC”;
google_color_text = “000000″;
google_color_url = “666666″;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Non è altro che il codice precedente, dove al posto del pub-1234567890 abbiamo messo la funzione php che stampa l’ID relativo al post. Ovviamente è possibile personalizzare il fomato e i colori del blocco di annunci, modificando gli opportuni parametri.

Se poi volessimo in qualche modo tenere traccia degli articoli più popolari, per valorizzarli e riconoscere un premio agli autori in grado di scrivere contenuti validi, potremmo utilizzare il Popularity Contest Plugin, che permette di impostare una serie di parametri tramite i quali valutare un post.

Semmai un giorno vorrete fare un sito tipo Ewrite.us o MondoInformatico.info, potete provare così..

Il browser, e di conseguenza il dispositivo, con cui l’utente fa accesso a un sito web è riconoscibile attravero lo User Agent.

Oltre ai browser, gli user agent del web possono essere i crawler dei motori di ricerca, i telefoni cellulari, i lettori di schermo ed i browser braille usati da persone non vedenti.
Quando gli utenti di Internet visitano un sito web, una stringa di testo è solitamente inviata per fare identificare al server lo user agent. Questo fa parte della richiesta HTTP, con prefisso “User-agent:” o “User-Agent:” e tipicamente include informazioni come il nome dell’applicazione client, la versione, il sistema operativo e la lingua. I bot spesso includono anche l’indirizzo web e la mail del proprietario, in modo tale che l’amministratore del sito possa contattarlo.
La stringa dell’user-agent è uno dei criteri per i quali alcuni bot possono essere esclusi da alcune pagine usando il file robots.txt. Questo permette ai webmaster, che ritengono che alcune parti del loro sito (o tutto il sito) non debba essere incluso nei dati raccolti da un particolare bot o che quel particolare bot stia usando troppa banda, di bloccare l’accesso alle pagine. [wikipedia]

E’ arrivato dunque il momento di pensare al design del blog, fondamentalmente ci sono due modi per scremare opportunamente gli utenti che accedono al sito web: tramite il file .htaccess o tramite php. Noi ci concentreremo sulla seconda soluzione.

Esistono due interessanti plugin per formattare un blog in versione mobile:

1. WP-PDA: riconosce in automatico un sacco di user agent relativi a dispositivi mobili windows mobile, playstation portatile, cellulari, ecc..), è possibile aggiungerne altri tramite il pannello di amministrazione. Per l’iPhone carica un tema particolare, concepito appositamente secondo il design apple. Nelle immagini sottostanti potete vedere la versione di questo blog vista rispettivamente su iPhone e su un browser Nokia.
   
2. WP Touch: è ottimizzato per formattare le pagine quando vi si accede con l’iPhone. Il design è delizioso, ma il grosso limite è che riconosce sono lo user agent dell’iPhone e non quelli degli altri dispositivi mobili. Nell’immagine sottostante la versione di un mio blog di test.
   

Il principio di funzionamento è uguale per entrambi i plugin: in base allo user agent viene caricato un tema apposito. Il tema è in tutto e per tutto uguale agli altri temi wordpress, utilizza gli stessi file php, ma viene semplificato il layout: meno div, meno classi css, meno fronzoli..
Nei prossimi giorni ho intenzione di rilasciare qualche tema gratuito appositamente pensato per i dispositivi mobili, da caricare nelle relative cartelle dei plugin per personalizzare ulteriormente il proprio sito.

Per testare la visualizzazione sui diversi dispositivi, senza possederli (daltronde costano davvero caro..), esiste una comodissima estensione di firefox che cambia a piacimento gli user agent: User Agent Switcher.

Per chi volesse divertirsi a fare tesi, qui c’è una esaustiva lista di user agent string, per estendere la lista di quelli disponibili nell’estensione di firefox.
E’ arrivato il momento di concentrarsi anche su questi aggeggini, via con le customizzazioni.

Riporto qualce appunto per installare senza problemi la piattaforma Apache+MySQL+php, così da avere in locale un server dove testare e sviluppare le proprie applicazioni (come wordpress o joomla).

Installazione Apache Server 2.2.6

Installare Apache è stato piuttosto semplice. Ecco i passi da seguire:

1. Scaricare l’installer (MSI) per Windows dal sito di Apache HTTP Server
2. Disattivare il controllo UAC: Su Vista: start -> pannello di controllo -> Account Utente e protezione per la famiglia -> Account Utente -> Attiva o disattiva controllo account utente [tra parentesi questa cosa vi libererà delle fastidiosissime finestrelle "consenti" che appaiono dopo ogni clic]Su Windows 7:  start -> pannello di controllo -> Account Utente -> Account Utente -> Modifica le impostazioni di controllo dell’account utente -> Impostare su Nessuna Notifica
3. Lanciare l’installer appena scaricato e seguire le istruzioni, come Network Domain e Server Name possiamo mettere “localhost” (se l’installazione avviene in locale) e come porta scegliere 80.
4. Ora è possibile configurare Apache Server, aprendo il file “C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf” con un editor di testo.La cosa principale da fare è indicare la cartella dove vengono salvate le nostre pagine web per poi renderle accessibili via browser grazie al server. La cartella di default è /htdocs/, si trova all’interno di quella dove abbiamo installato Apache.Se vogliamo cambiarla è sufficiente trovare il paramentro “DocumentRoot” e modificarlo come segue:#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/www"

   C:/www/ in questo caso è la cartella dove andremo a posizionarele pagine web e tutti i file annessi.

5. Lo stesso percorso va riportato sotto, in questo modo:#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:/www">
6. Salvare e riavviare il server.
7. Se dovessero presentari problemi in fase di avvio del server, per prima cosa controllare l’application log di windows; se dovessero mancare delle dll può tornare utile questa pagina: http://windows.php.net/download/
   Un’altra operazione da fare è settare anche questi due ulteriori parametri sul file di configurazione come da testo sotto:
   # ServerName gives the name and port that the server uses to identify itself.
# This can often be determined automatically, but we recommend you specify
# it explicitly to prevent problems during startup.
#
# If your host doesn't have a registered DNS name, enter its IP address here.
#
ServerName localhost:80
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
Listen 127.0.0.1:80

Il problema all’avvio dell’icona Apache Monitor nella systray con Windows Vista – risoluzione

Una volta installato il server è sufficiente digitare l’indirizzo “http://localhost/” nella barra degli indirizzi del browser per capire se tutto funziona. Su Windows XP però eravamo abituati all’iconcina con la piuma dalla quale era possibile avviare o stoppare il server apache.

Con Vista questa icona non c’è più, inoltre un fastidioso problema all’avvio ci accoglie perchè Apache Monitor non riesce a caricarsi correttamente. Per risolvere l’inconveniente basta andare nella cartella di installazione di Apache Server, entrare nella cartella /bin/ e cliccare col tasto destro sul file ApacheMonitor.exe, da qui clic su Proprietà. In alto selezionare la tab “Compatibilità” e spuntare l’opzione “Esegui il programma in modalità compatibile per Windows XP (Service Pack 2)”. Vedi figure sottostanti.

Installazione MySQL 5.0

MySQL è un server per database relazionali open source, ormai affermato e robusto, soprattutto in ambito web. Per l’installazione è necessario:

1. Scaricare dal sito ufficiale l’installer per windows.
2. Lanciare l’installer e seguire le istruzioni a video, scegliendo l’installazione Typical.
3. Alla fine dell’installazione scegliere di configurare il server.
4. Scegliamo l’opzione “Detailed Configuration“



5. Impostare la tipologia come “Developer Machine” (il server sarà infatti utilizzato principalmente per i nostri test in locale)



6. Al passaggio successivo selezionare “Multifunctional Database“



7. Lasciare invariato al punto successivo e proseguire, a meno che non si voglia specificare una directory particolare per InnoDB
8. Come numero approssimativo di connessioni al server possiamo specificare 20. Più che sufficienti se lo utilizziamo come server di test.



9. Al passaggio successivo selezionare entrambe le opzioni, è poi possibile specificare la porta di connessione al database: generalmente la 3306



10. Come impostazioni dei caratteri scegliere “Best support for Multilingualism“



11. Se vogliamo cheMySQL si avvii in automatico all’accensione di windows selezionare “Install as Windows Service” e “Launch the MySQL server automatically“.



12. Indicare la password per l’utente amministratore (root) ed eventualmente creare un utente anonimo (anche se sarebbe meglio evitare, è poco sicuro)



13. Per l’amministrazione del Database installare MySQL Workbench. Si tratta di utili strumenti per la gestione “visiva” del server, degli utenti, dei permessi e dei database. Comprende inoltre il Query Browser per lanciare le query SQL.

Installazione php 5 sul server Apache

Con l’installazione di php e delle estensioni per la connessione al database avremo completato l’opera. In questo caso è meglio eseguire una installazione manuale. Come riportato nella Guida php su Windows di HTML.it:

Questa installazione, consigliata dal manuale ufficiale Php, ha il vantaggio di non richiedere lo spostamento di file nelle directory di sistema (Windows, System32 e altre): infatti modificando la sola variabile di sistema PATH e mantenenedo i file in c:\php, tutto rimane più ordinato e l’aggiornamento diventa molto più semplice.

Ecco i passi da seguire:

1. Scaricare il pacchetto zip dal sito ufficiale
2. Estrarre i files nella cartella C:/php/ (il nome breve è più comodo)
3. Aprire Pannello di Controllo -> Sistema e Sicurezza (Sistema e Manutenzione su Vista) -> Sistema. Nella barra di sinistra cliccare su “Proprietà di Sistema avanzate” (Vista) o su “Impostazioni avanzate di sistema” (Windows 7), poi sul tasto “Variabili d’ambiente..“.Dalla tendina sotto (variabili di sistema) selezionare “Path” e cliccare su “Modifica”. In fondo al testo già presente aggiungere la stringa “;C:\php” (con il punto e virgola, senza gli apici).

   In questo modo abbiamo indicato al sistema dove si trova l’interprete php.

4. Riavviare windows
5. Ora è necessario integrare l’interprete php nel server Apache. Per farlo bisogna aprire il file di configurazione di Apache: “C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf”C’è una lunga lista di “LoadModule” (molti di questi sono commentati) alla fine della quale bisogna aggiungere queste righe:# Start Php integrationLoadModule php5_module "C:/php/php5apache2_2.dll"

   AddType application/x-httpd-php .php

   PhpIniDir "C:/php"

   # End Php integration

6. Infine modifichiamo il parametro DirectoryIndex come segue:#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>

7. Ora andiamo nella directory di php e rinominiamo il file “php.ini-development” in “php.ini“.Si tratta del file di configurazione dell’interprete php. Apriamolo con un editor di testo.
8. Cambiamo il parametro “extension_dir” come segue:; Directory in which the loadable extensions (modules) reside. extension_dir = "C:/php/ext"
9. Settare il parametro “display_errors” su On per poter vedere gli errori generati dagli script che svilupperemo
10. Infine decommentare (togliendo il punto e virgola davanti) il parametro “session.save_path” e moficarlo come segue:session.save_path = "C:/php/sessionfiles"


    sessionfiles è una cartella da creare, dove verranno salvati i file relativi alle sessioni di php.

11. Ora dovremo attivare i connettori php-MySQL (maggiori info nella pagina dei download dal sito ufficiale di MySQL). Si tratta di file dll che permettono la connessione da parte di php al database: mysqli e mysql
12. Assicurarsi che siano presenti i file php_mysql.dll e php_mysqli.dll nella cartella /ext/ di php (dove ci sono le estensioni)
13. Ora nel file php.ini aperto in precedenza decommentare (togliendo il ; ad inizio riga) le estensioni di mysql come segue:extension=php_mysql.dll
extension=php_mysqli.dll

14. Altra estensione utile è quella per la gestione delle immagini, che conviene decommentare:extension=php_gd2.dll
15. A questo punto salvare tutto, riavviare il server Apache e tutto dovrebbe funzionare.

Per essere sicuri possiamo creare un file “index.php” con all’interno il semplice codice

<?php phpinfo() ; ?>


Aprire il browser e digitare l’indirizzo: “http://localhost/index.php” Se tutto è stato eseguito correttamente dovremmo vedere una pagina che riporta diverse informazioni sulla versione di php installata.

Si noti che questo semplice test non ci dà informazioni sulla corretta installazione delle estensioni per la connessione al database, che dovremo testare in un secondo momento, magari provando l’installazione in locale di un cms come wordpress.

Anche su Windows Vista e Windows 7 gira, buon lavoro. :)

Ultimamente sono mancato un po’ su queste pagine, solo perchè sono stato preso da questo lavoro. Marina Remi è un’attrice genovese, che mi ha contattato per creare ex novo un blog su wordpress: ecco fatto. Non è stato semplice ma alla fine ho imparato molto.. Devo ringraziare lei e tutti coloro che hanno collaborato nella realizzazione: in bocca al lupo!

In queste poche righe voglio riassumere i plugin utilizzati e le tecniche implementate per realizzare il sito di Marina.

Menu con icone che zoomano al passaggio del mouse

Noterete subito il menù stile mac che raccoglie le pagine del blog. E’ stato realizzato utilizzando il framework jQuery e la sua utilissima estensione grafica Interface. Lo script deve essere configurato e si può personalizzare via CSS, lo potete vedere in azione nelle demo di Interface: Fisheye Menu.

Il form dei commenti

A volte si può essere eleganti anche con un semplice javascript.. Lo so, i puristi diranno che son meglio i tag <label>, ma ogni tanto anche l’occhio vuole la sua parte.

Le foto da Flickr

FAlbum è un plugin per wordpress che si collega ad un account Flickr e pubblica le foto sul proprio blog.
Se vogliamo inserire la visualizzazione delle immagini in una pagina bisogna creare un template di pagina. Per farlo è sufficiente inserire questo codice all’inizio della nuova pagina falbum.php

<?php
/*
Template Name: FAlbum
*/
?>


Mentre nel corpo della pagina dovremo inserire questo codice dove si vogliono far apparire le foto


<!--<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/falbum.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/overlib.js"></script
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/prototype.js"></script>-->
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<?php $falbum->show_photos(); ?>


Per utilizzare gli effetti di visualizzazione dovremo togliere i commenti all’inclusione del codice javascript.

Per mettere qualche immagine nella sidebar invece si può usare questa funzione


<?php require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php');
global $falbum; ?>
<?php echo $falbum->show_recent($num = 3, $style = 0, $size= 's'); ?


Tutta la documentazione circa il plugin la si trova qui, ben fatta e dettagliata.

All in One SEO Pack

E’ un utilissimo plugin per l’ottimizzazione delle proprie pagine in ottica SEO (Search Engine Optimization). Da un comodo pannello di amministrazione è possibile inserire una descrizione globale del sito e le parole chiave. Per ogni post o pagina è possibile inserire descrizioni specifiche e parole chiave diverse. L’utilità non si vede ad occhio nudo, ma trattare bene i motori di ricerca aiuta sempre a generare visite.

Che diavolo è?

Provate a cliccare sul bottocino “che diavolo?” in alto a questa pagina e capirete in un attimo. Si tratta di un piccolo box CSS scorrevole, all’interno del quale si può far apparire tutto ciò che ci pare..
Dopo avdd-welcome-ita.ziper scaricato il plugin e fatto l’upload dei files ‘dd-welcome.php’ e ‘dd-bg.gif’ all’interno della solita cartella ‘wp-content/plugins/’, apparirà nel menù ‘Opzioni’ un comodo pannello di amministrazione dal quale è possibile configurare il box scorrevole.

SCARICALO QUI..

A cosa serve?

Bella domanda, in teoria per avere un box figo dove poter inserire le solite informazioni su chi siamo, cosa facciamo, da dove veniamo e dove vogliamo arrivare. In pratica potete metterci ciò che meglio credete, anche gli ultimi libri letti..

Dal ‘Welcome Manager’, senza toccare il codice del nostro template, potremo impostare:

1. Il testo da far apparire all’interno del box, nel quale si possono utilizzare anche i più comuni tag HTML per fare link o inserire immagini
2. Il testo da far apparire sul bottoncino
3. Il colore di sfondo
4. Una eventuale immagine di sfondo
5. Il colore del testo
6. L’altezza in pixel del box scorrevole
7. L’allineamento del bottone (destra o sinistra)
8. Il margine dal bordo della pagina
9. La posizione del bottone (fissa o scorrevole con la pagina)

Queste sono tutto proprietà CSS regolabili senza intervenire sul codice. Vi ricorda nulla? Ma certo, il celeberrimo e decantato plugin di Francesco Fullone FCC Ribbon Manager, da quale ho preso spunto e che ringrazio.

NB: se impostate l’altezza del box a ’100%’ potrete avere una bellissima pagina nascosta, dove ad esempio si potrebbe mettere il portfolio personale.. o amenità varie.

Javascript?

Ovviamente si. Questo plugin utilizza il solito scriptaculous.. Perchè questo e non Mootools? Semplicemente perchè dalla versione 2.qualcosa di wordpress esso è incluso direttamente tra i file del programma, così la pagina si dovrebbe caricare più velocemente.
Se per caso avete una versione vecchiotta di WP e non è presente scriptaculous, potete scaricare questo zip e mettere la cartella ‘/scriptaculous/’ sul vostro server, dentro a ‘/wp-includes/js/’. Il percorso sarà quindi ‘/wp-includes/js/scriptaculous/’.

Se avete idee o suggerimenti.. scrivete pure due righe.

What’s?

Click on the button “che diavolo?” at the top of this page and you can see. It’s a little CSS sliding box, where you can insert what you prefer..
Download the plugin files and upload ‘dd-welcome.php’ and ‘dd-bg.gif’ on your server folder ‘wp-content/plugins/’, then in the Option Menu you find the ‘Welcome Manager’ where you can set your sliding box.

DOWNLOAD HERE..

Ok, but how can I use it?

It’s a good question. You have a cool box to insert the classic info text or whatever you want: portfolio, last purchases, last read books, and so on..

In the Welcome Manager, without touching the code, you can set:

1. The text that will appear in the sliding box, it supports common HTML tag to link or insert images
2. The text that will appear in the button
3. The background color
4. An opzional background image
5. The text color
6. Box height (in pixel)
7. Button align (left or right)
8. Button margin (in pixel, % or em..)
9. Button position (fixed or absolute)

NB: if you set up the height to 100%, you have a cool hidden page on your blog..

Javascript?

Obviously.. This plugin uses the classic scriptaculous. Why this and not Mootools? Simply because from the 2.1 version of wordpress it is included directly in the /wp-includes/ folder, therefore the page would have to be loaded fastly.
If you have an old version or is not present scriptaculous, you can download this zip and put the folder “/scriptaculous/” on your server, in “/wp-includes/js/”. The path will be “/wp-includes/js/scriptaculous/”.

If you have ideas or suggestions, please drop me two lines.