La PDFLib è senza dubbio la libreria migliore per la produzione lato server di file PDF. Esistono zilioni di librerie scritte in nativo PHP, e fra queste ricordi le ottime FPDF e eZPDF. Tuttavia per funzionalità avanzate non sembra esistere un software gratuito. Senza dimenticare che le prestazioni di una libreria scritta in C non sono minimamente paragonabili ad una classe scritta in puro PHP.

Prerequisiti:

• Accesso di root alla macchina
• Dimistichezza con la linea di comando

Download PDFLib: scegliere la versione che vi serve in funzione del vostro sistema dalla pagina di download di PDFLib.com.

Scompattate l'archivio scaricato e prelevate il file in ./bind/php/php-$VERSION. Sostituendo $VERSION con la vostra versione di PHP.

A questo punto, sul server andate a controllare la directory relativa alle estensioni di php disponibili. Si controlli la voce extensions_dir. Copiate il file della libreria in quella directory. Nel mio caso (e in questo esempio) da directory è /usr/lib/php5/20090626/.

scp libpdf_php.so root@YOURHOST:/usr/lib/php5/20090626/

Accedete al server ed entrare nella directory contenente i file .ini addizionali. Nel mio caso /etc/php5/apache2/conf.d/. Create un nuovo file con il vostro editor di testo preferito, che servirà per il loading della libreria.

cd /etc/php5/apache2/conf.d/
vim pdflib.ini

All'interno del file scriviamo.

; configuration for php PDFLib module
extension=libpdf_php.so

Riavviamo il web server (potrebbe bastare un reload, ma ultimamente con Ubuntu server non ci giurerei).

/etc/init.d/apache2 restart

Date un phpinfo(); in un file qualsiasi, lanciatelo via browser e dovreste visualizzare la sezione dedicata a PDFLib.

Tags: PDFLib, PHP, PHP5

Mi arriva una richiesta in merito a MyGalleryGenerator e la possibilità di pubblicare le gallerie realizzate tramite Dropbox. La risposta al quesito è semplice: sì. Se non possedete uno spazio web pubblico dove inserire la galleria, potete usare la vostra directory pubblica di Dropbox per rendere disponibile a tutti la galleria.

Realizzare la cosa è molto semplice. Accedete a MyGalleryGenerator e generate la vostra galleria. Alla fine del processo scaricate il file zip contenente la galleria stessa. A questo punto, scompattate il file nella directory Public (o in una sua sottodirectory) del vostro account Dropbox. Non c'è bisogno di farlo in linea, potete copiare i file nella directory desktop del vostro Dropbox. Penserà poi il sistema a sincronizzare ed inviare al server i file. L'operazione di sincronizzazione potrebbe durare pochi secondi o qualche minuto in funzione della vostra connessione.

Ora accedete al vostro account online e navigate i file fino ad arrivare a "gallery.html". Cliccate sul file e dal menu a tendita su "Copy public link".

Copiatelo negli appunti.

Condividete il link con le persone a cui volete far vedere la galleria. Il file gallery.html può essere rinominato a piacimento. Potete inserire più gallerie organizzandole in sottodirectory. Fate solo attenzione a non mettere troppo sotto sforzo i server di Dropbox, perché non vanno usati come sostituto di un webserver ed in caso di uso eccessivo fuori dal seminato, lo staff di Dropbox potrebbe decidere di sospendervi l'account ;-)

Un esempio di galleria lo trovate nel mio account dropbox.

Tags:

Se utilizzate wordpress e siete soliti usare l'uploader interno per embeddare immagini nei post, sappiate che il sistema crea per le immagini stesse un'apposita voce di attachment collegata a quel post/pagina.

Purtroppo wordpress tratta gli attachment immagine come qualsiasi altro allegato. Delle api più specifiche sarebbero state una soluzione plausibile e molto più accessibile per gli sviluppatori. Si può sempre ovviare scrivendo un plugin adeguato, la cosa non dovrebbe portare via troppo tempo.

Invece del plugin, di cui vi lascio ogni incombenza (qui una breve guida NON aggiornata, ma ancora in gran parte valida su come scrivere un plugin per wordpress), vi propongo per mia eterna memoria un semplicissimo hack gestibile da template per esportare un array di immagini di un post.

<?php 
  function get_attached_images($postid, $size=false, $icon=false){
        $parameters = array('post_type' => 'attachment', 
                            'numberposts' => -1, 
                            'post_status' => null, 
                            'post_parent' => $postid
                           );
        $attachements = get_posts($parameters);
        if($attachements){
            $res = array();
            foreach($attachements as $attachement){
                if(wp_attachment_is_image($attachement->ID)){
                    $res[] = wp_get_attachment_image_src($attachement->ID, $size, $icon);
                }
            }
        }
        return $res;
  }
?>

L'uso è abbastanza semplice:

• $postid: l'id del post
• $size: fate riferimento alla documentazione ufficiale per la funzione wp_get_attachment_image_src.
• $icon: fate riferimento alla documentazione ufficiale per la funzione wp_get_attachment_image_src.

Buona domenica a tutti.

Tags: wordpress

Con molta soddisfazione ho installato un ambiente web server su una virtual box Debian. Al fine di montare nel sistema guest, alcune directory risiedenti sulla macchina fisica, è necessari installare il modulo "Guest Additions" di virtual box. La procedura è abbastanza semplice, si considerino le seguenti condizioni, mie personali, che potrebbero facilmente differire da chi legge:

• Debian 5.0.4
• Nessun gestore grafico installato
• Due schede di rete installate:
  • eth0: in bridge sulla scheda fisica (quindi esce verso internet)
  • eth1: in host only (quindi esce solo verso la macchina fisica)

Prerequisiti

Alcuni pacchetti sono necessari per l'installazione del modulo. Digitare i seguenti comandi.

apt-get install bzip2
apt-get install build-essential module-assistant
apt-get install linux-headers-`uname -r`

Installazione

Nella finestra della macchina virtuale, dal menu "Dispositivo", selezionare "Installa Guest Additions"

Montate il cdrom virtuale (presuppongo che l'hardware della virtual machine lo abbia incluso).

mount /media/cdrom

Accedetevi ed avviate lo script adeguato alla vostra piattaforma (VBoxLinuxAdditions-*.run). Nel mio caso, come di seguito.

cd /media/cdrom
sh ./VBoxLinuxAdditions-86x.run

Nel mio caso ricevo qualche errore dato dal fatto che non esiste un programma desktop, ma quello che serve lo installa senza problemi. Alla fine fate un reboot, ed il filesystem vboxsf sarà disponibile da usare per montare le shared folders dal sistema padre.

Tags: vbox, debian

Se possedete la Internet Key K3765, gentilmente fornita da Vodafone con la Vodafone Station, dovreste avere 30 ore mensili di navigazioni fuori casa. Pochine, ma perhcé non sfruttarle? Tutto sommato è comodo potersi collegare in mobilità quando c'è necessità di controllare al volo la posta e si vogliono evitare le ristrettezze del cellulare.

Fare funzionare la chiavetta su Ubuntu 9.10 (ma presumo anche sulla recente 10.4) è davvero facile.

Come prima cosa, da Betavine Forge scarichiamo i seguenti pacchetti debian:

• ozerocdoff_0.4-2_i386.deb
• vodafone-mobile-connect_2.25.01-1_all.deb

Installiamoli con un bel double click ed alla fine via terminale installiamo il pacchetto usb_modemswitch.

sudo apt-get install usb-modemswitch

Apriamo il file /etc/usb_modemswitch.conf (usiamo sudo per garantirci i permessi di scrittura sul file) e verso la riga 347 troveremo le direttive per la vodafone key. Basterà decommentarle come di seguito.

######################################################## 
# Vodafone K3760 (made by Option, HSO driver) 
#                                                          
# Contributor: The Solutor                        

DefaultVendor=  0x0af0 
DefaultProduct= 0x7501 

TargetClass=    0xff 

# only for reference
# MessageEndpoint=0x01

MessageContent="55534243785634120100000080000601000000000000000000000000000000"

Inseriamo la chiavetta, apriamo "Vodafone Mobile Connect" dal menu Applications >> Internet, seguiamo i tre passi, lasiando tutto in default e se le cose sono andate bene, basterà cliccare su connetti nella finestra riportata sotto.

Come sempre un grazie a tutti coloro che si premurano di sviluppare tool per Linux, che rendano l'uso di questo splendido sistema operativo un'esperienza piacevole.

Tags: Vodafone, Internet Key

Mi è successo, giusto qualche minuto fa, di riscontrare degli errori nel download di alcuni file PDF che faccio generare da alcuni script. La risposta del server era una pagina bianca o proprio niente. Ma solo la conclusione del caricamento senza nessun esito.

Cliccando con il tasto destro del mouse sul collegamento al pdf e selezionando "Save Target As..." l'errore era abbastanza chiaro: per internet explorer risultava impossibile scrivere nella cache il file, quindi non lo si poteva scaricare.

Non era abilitata la cache per permettere al browser di scrivere il file pdf. Quindi è stato necessario aggiungere le informazioni alla generazione del file. Basta un header di tipo "pragma: cache" oppure "Control-Cache: cache".

Problema risolto. Credits.

PS: fino alla versione 8 di IE ho riscontrato il problema.

Tags:

Stan tutti sempre a dire che i MacBook non si rompono mai. E pure io lo dicevo fino a qualche giorno fa, quando improvvisamente il disco rigido ha deciso di piantarsi. Con ogni probabilità un problema meccanico, visto anche il continuo tintinnio della testina.

Poco male. Il Macbook è il pc di rappresentanza e ci tengo nessun dato rilevante. Quei pochi li avevo comunque backuppati qualche tempo prima e di fatto ho perso solo qualche foto (un po' mi spiace però) e alcuni documenti non fondamentali.

Ho approfittato della cosa per fare l'ormai rimandato da mesi, passo a Snow Leopard. Ed alla fine ho pure deciso di fare del mac il mio futuro centro di gravità, installandogli nello stesso HDD 3 sistemi operativi: Snow Leopard of course, Ubuntu 9.10 (l'ultima disponibile) e Windows XP Pro sp3. In questo modo dovrei essere abbastanza in grado di testare ogni view prodotta in tutti i browser dei tre principali sistemi operativi.

Sostituire il disco rigido

Il procedimento è molto semplice, ma partiamo con la sostituzione del disco rigido. Fortunatamente, nonostante sia un notebook, l'accesso alla RAM ed al disco sul 13'' di casa Cupertino è abbastanza agevole. Le specifiche hardware consistono in un semplicissimo HDD da 2.5'' SATA. Costo IVA compresa sui 40 Euro, ma ce n'è di tutti i prezzi. Basta poi seguire le facili istruzioni riportate in questo documento rilasciato da casa Apple ed il gioco è fatto. Nuovo HDD vergine per il sistema :)

Sembra che nei nuovi MacBook da 13'' il vano RAM - HDD sia inaccessibile. Io ho fatto l'operazione in un macbook versione 3.1

Installazione Snow Leopard

Avviate il MacBook tenendo premuto il tasto ALT, con il cd di Snow all'interno del lettore. Si avvierà la schermata riportante la lista dei sistemi operativi disponibili. Ovviamente uscirà fuori solo l'unità CD-Rom. Prima di poter avviare la partizione, aprite l'utility disco e create una partizione per Snow Leopard (io gli ho dato 100GB su un disco da 250GB) e lasciate il resto come spazio non partizionato.

Seguite l'installazione "dritto per dritto" ed alla fine avviate il sistema, scaricate rEFIt, installatelo seguendo la procedura guidata, togliete il DVD di Snow Leopard, inserite quello della distro che volete installare e riavviate il sistema.

Installazione Linux

Al riavvio del sistema, rEFIt vi mostrerà i sistemi operativi disponibili per il boot. Fin qui sarà listato Snow Leopard e la distro bootabile da CD-Rom. Avviate questa (nel mio caso ho usato il cd di Ubuntu 9.10).

Scegliete l'installazione guidata. Specificate manualmente la partizione in cui decidete di installare il sistema creandone una nuova nello spazio non partizionato lasciato precedentemente. Nel mio caso ho scelto di dare altre 100GB a Ubuntu, creando una partizione di root /. Non create la partizione di swap, visto il limite massimo di 4 partizioni.

Seguite l'installazione guidata as usual ed alla fine riavviate li sistema avendo avuto cura preliminarmente di sostituire il CD della distro con uno di installazione per Windows.

Installazione Windows

Ancora una volta usiamo rEFIt per scegliere il sistema da avviare. In questo caso ci verrà mostrata fra le disponibilità l'icona di windows facente riferimento al CD-Rom.

Facciamo partire la procedura guidata di installazione, anche in questo caso specificando la partizione da utilizzare. Nel mio caso gli ho dato i 50GB rimanenti.

Dopo aver creato la partizione e copiato i file per l'installo, il sistema si riavvierà e farà partire l'installo vero e proprio. Conclusa questa procedura, riavviate nuovamente il sistema, via rEFIt scegliere ora di fare il boot della partizione windows ed alla fine dell'avvio inserite nel CD-Rom il cd di Snow Leopard. Automaticamente dovrebbe avviarsi l'assistente Bootcamp, che si occuperà di installare tutte le periferiche.

Infine...

Se avviando la partizione di Ubuntu avete perso il Grub, non scoraggiatevi e date un rapido occhio alla guida per il ripristino del boot loader di default per la distro umana.

Devo ancora testare il funzionamento di iSight su Ubuntu, mentre su windows sembra funzionare tutto a dovere. Anche il telecomando su Ubuntu sembra non andare. Tutto il resto (touchpad e tasto destro compreso) va senza troppi sbattimenti.

Tags: Snow Leopard, MacBook, Ubuntu, Windows

Giusto se a qualcuno dovesse servire, una funzione per generare un calendario mensile perpetuo. Cambiando anno e mese di riferimento, vi si restituisce il mese completo come un array multilivello facilmente manipolabile.

<?php
  function calendario($month, $year){
    $month = intval($month);
    $year = intval($year);
    
    $days = cal_days_in_month(CAL_GREGORIAN, $month, $year);
    
    $list = array();
    for($a=1; $a<=$days; $a++){
      $list[$a]['week'] = jddayofweek(cal_to_jd(CAL_GREGORIAN, date($month),date($a), date($year)), 1);
      $list[$a]['day'] = $a;
      $list[$a]['month'] = $month;
      $list[$a]['year'] = $year;
    }
    
    return $list;
  }
  
  //Esempio di utilizzo
  $cal = calendario(2,2010);
  print_r($cal);
  foreach($cal as $c => $value){
    echo $cal[$c]['week'] . ' - ' . date('d/m/Y', mktime(0, 0, 0, $cal[$c]['month'], $cal[$c]['day'], $cal[$c]['year'])) . '<br/>';
  }
?>

Spero sia utile a qualcuno

Tags: php, tutorial

Potrebbe succedere, e a me è successo giusto ieri, programmando una grossa routine in PHP, di dover istanziare oggetti che fanno riferimento ad altri oggetti. In tal caso si crea un rapporto di parentela fra oggetto padre e oggetto figlio. Il rischio è quello di ottenere un fatal error per eccesso di memoria usata.

Per capire fino in fondo, bisogna sapere che il PHP ha una gestione garbage collection interna. Quindi di regola sembrerebbe non necessario dover tracciare ogni oggetto e gestirne la sua allocazione di memoria. Ma per processi di certe dimensioni questo potrebbe non essere vero, visto che la memoria è liberata quando scade la variabile relativa, alla fine dello script.

Nella maggior parte dei casi è possibile usare unset() per liberare al volo la memoria allocata. Ma se vengono usati dei riferimenti circolari che creano relazione di tipo padre figlio fra oggetti, nonostante scada il figlio (perchè si è a fine ciclo e ne viene avviato uno nuovo), il padre resta istanziato e di conseguenza nemmeno la memoria del figlio viene riallocata come libera.

Di seguito un esempio:

<?php
class Foo{
  function __construct(){
      $this->bar = new Bar($this);
  }
}

class Bar{
  function __construct($foo = null){
    $this->foo = $foo;
  }
}
 
echo "Memoria iniziale: " . number_format(memory_get_usage(), 0, ".", ",") . " bytes\n";
for($a=0; $a<=5000; $a++){
  $foo = new Foo();
  unset($foo);
}
echo "Picco di memoria: " . number_format(memory_get_peak_usage(), 0, ".", ",") . " bytes\n";
echo "Memoria finale: " . number_format(memory_get_usage(), 0, ".", ",") . " bytes\n";
?>

Se proviamo a far girare lo script, come input avremo qualcosa del genere.

davide@laptop:~$ php public_html/memory.php 
Memoria iniziale: 329,388 bytes
Picco di memoria: 2,661,976 bytes
Memoria finale: 821,744 bytes

Si faccia caso non tanto alla poca memoria allocata, ma alla differenza fra quella iniziale, finale ed il picco. Soprattutto il picco risulta otto volte più alto della memoria inizialmente utilizzata dallo script. Ed anche alla fine si ha un'allocazione parti a tre volte l'inizio del processo. Il comando unset($foo) non ha sortito gli effetti sperati.

Su processi molto pesanti, il risultato può essere un'interruzione inaspettata a causa di un fabbisogno di memoria non corrisposto dalle potenzialità del sistema. Come risolvere? Utilizzando il distruttore di classe.

Con PHP5 sono stati introdotti i costruttori e i distruttori di classe. Per raggiungere il nostro scopo dobbiamo pensare ed usare un distruttore adeguato prima di lanciare unset. In questo modo la memoria verrà liberata adeguatamente. Di fatto trasformiamo quanto scritto sopra in quello che segue.

<?php
class Foo{
  function __construct(){
      $this->bar = new Bar($this);
  }
 
  function __destruct(){
    unset($this->bar);
  }
}

class Bar{
  function __construct($foo = null){
    $this->foo = $foo;
  }
}
 
echo "Memoria iniziale: " . number_format(memory_get_usage(), 0, ".", ",") . " bytes\n";
for($a=0; $a<=5000; $a++){
  $foo = new Foo();
  $foo->__destruct();
  unset($foo);
}
echo "Picco di memoria: " . number_format(memory_get_peak_usage(), 0, ".", ",") . " bytes\n";
echo "Memoria finale: " . number_format(memory_get_usage(), 0, ".", ",") . " bytes\n";
?>

Quello che ci serve in questo caso è un distruttore per l'istanza di Foo(), che a sua volta produce la distruzione dell'istanza della classe Bar() svincolando di fatto il rapporto di parentela fra le due classi. Il risultato lanciando lo script è sorprendente.

davide@laptop:~$ php public_html/memory.php 
Memoria iniziale: 330,028 bytes
Picco di memoria: 336,652 bytes
Memoria finale: 330,128 bytes

Le fluttuazioni fra picco, inizio e fine sono del tutto irrisorie.

Risorse esterne:

• Optimize PHP memory usage: eliminate circular references.
• Memory Leaks With Objects in PHP 5.

Tags: php, tutorial

Giusto ieri mi serviva un buon scroller in JavaScript. Unica precondizione, che fosse sviluppato con jQuery. Di solito mi scrivo io le librerie che mi servono. Il proprio codice non dipende da nient'altro ed una volta raggiunto il risultato si è completamente padroni della cosa. In questo caso però la necessità era imposta dall'alto, quindi mi son messo a cercare nella directory plugin qualcosa che potesse fare al caso mio.

Ho trovato più di un plugin utilizzabile, ma tutti avevano almeno un difetto. Uno con troppe opzioni risultava eccessivamente pesante e ripulirlo mi avrebbe preso troppo tempo. Un altro invece era troppo poco performante gestendo solo casistiche standard (nessuna delle quali risultava andar bene a me).

Allora mi son letto direttamente la documentazione di jQuery, convinto che qualche metodo proprio dovesse averlo per far spostare live dei livelli di html. Ed ovviamente c'è: animate permette di gestire eventi in divenire. Nel caso dello scroller, visto che il bello è la visualizzazione dello spostamento, animate permette di far eseguire una semplice direttiva come un evento che parte dallo status attuale fino ad arrivare al risultato stabilito.

Per fare un esempio pratico. Se voglio scrollare spostando un layer verso destra di 100px, potrei semplicemente imporre al click di un tasto una funzione che imposti un margin-left a -100px rispetto all'attuale situazione. Facile, ma non *vivo*. Perchè in questo caso vedrei il risultato subito, mentre a me interessa che l'utente abbia la sensazione che le cose si spostano, quindi voglio che nell'andare indietro di 100px lo faccia gradualmente in un determinato arco di tempo.

E' esattamente quello che fa animate in jQuery. Scrivendo la funzione:

  function scrollRight(){
     $('#IDTarget').animate({'marginLeft': -100px',},500);
  }

Farò scrollare il contenuto del target verso sinistra (dando l'idea di muovermi a destra) di 100px in mezzo secondo.

Usando le proprietà di jQuery, un po' di fantasia e appena 88 righe di codice, si può ottenere una galleria di immagini come questa. Senza bisogno di aggiungere niente all'ottimo, ma ben pesante jQuery.

Tags: jQuery, JavaScript, Tutorial

Paka mi chiede in un commento:

Sto impazzendo per cercare di capire il codice da usare x far uscire la "nuvoletta" sul marker subito, senza bisogno del click... mi date una mano?

La cosa è abbastanza semplice, e la riprendiamo proprio dall'articolo in cui l'utente ha commentato. Diamo un occhio a questa porzione di codice.

GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml('Coordinate<br />'+point);
});

E' abbastanza chiaro che stabiliamo un evento ben preciso per far comparire il marker, tramite l'oggetto GEvent. L'evento in questione è il click sul marker. Se vogliamo che questo compaia senza alcun evento predefinito, basta toglierlo dalla condizione di cui sopra. In questo caso l'evento che andrà a far apparire la nuvoletta sarà quello di default, ovvero il load della mappa.

Di seguito il codice completo della funzione.

    var map = null;
    var geocoder = null;
    var address = '97015 Italy';

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("gmaps"));
        var geocoder = new GClientGeocoder();
       
        if(document.getElementById('addr').value != ''){
          address = document.getElementById('addr').value;
        }
       
        geocoder.getLatLng(address, function(point){
          if(!point){
            alert('Spiacente, indirizzo non trovato');
          }else{
            var marker = new GMarker(point);
            map.addOverlay(marker);
           
            //Qui faccio apparire la nuvola!
            marker.openInfoWindowHtml('Coordinate<br />'+point);
            map.setCenter(point, 8);
          }
        });
        map.setUIToDefault();
      }
    }

E come mio solito, una pagina di esempio da cui estrapolare facilmente il codice sorgente.

Tags: Gmaps, Google Maps, Tutorial

Sembra incredibile, ma quello che molti considerano il browser migliore del mondo difettava della proprietà word-wrap nella definizione dei CSS. Tale direttiva permette di gestire una singola parola che risulti strabordante rispetto alla larghezza dell'elemento in cui questa è contenuta.

In sostanza, se scrivo su un livello largo 70px la parola supercalifragilistichespiralitoso, settando una dimensione del testo a 12px, verosimilmente il contenuto del livello andrà oltre i 70px in larghezza. La proprietà word-wrap mi permette di decidere come gestire tale eventualità.

Vediamo un esempio concreto:

<div style="border: 1px inset #ccc; background:#f1f1f1; margin: 10px auto; word-wrap: break-word; width: 70px;">supercalifragilistichespiralitoso</div>

Finalmente anche Firefox decide di mandare a capo le lettere di troppo rispetto alla larghezza del livello. La proprietà ha sempre funzionato a dovere in Internet Explorer e nei browser basati su WebKit (Safari, Chrome, Epiphany, etc...)

Tags: CSS, Firefox, word-wrap

L'iPhone permette di gestire tramite Safari i preferiti come facciamo già sui dispositivi normali. Ma un altro modo di bookmarkare delle pagine web è quello di creare un testo nella dashboard del telefono. Un'icona, del tutto simile a quella delle altre applicazioni, che nei fatti è uno shortcut ad una pagina web che consideriamo particolarmente importante e vogliamo aprire velocemente.

Quella che vedete indicata dalla freccia rossa nell'immagine sopra è semplicemente un collegamento a FriendFeed che si aprirà via Safari sull'iPhone. Ma come fare una cosa del genere?

La cosa è abbastanza semplice. Basta creare un'immagine PNG di dimensioni 45X45 pixel con quello che volete mostrare nell'icona dell'iPhone. Il nome ha poca importanza, ma per semplicità chiameremo il file iphone-icon.png Salvatela sul server dove meglio credete e aggiungete ai tag del head delle pagine visualizzate tramite iphone la seguente riga.

<link rel="apple-touch-icon" href="http://www.examle.com/path/to/iphone-icon.png" />

Ovviamente dovete personalizzare l'attributo href inserendo l'indirizzo corretto dell'immagine sul vostro server.

Tags: iPhone, Web, Tutorial

E' on line da marzo e devo dire con mia soddisfazione che MyGalleryGenerator ha riscontrato un certo successo. Molti ne hanno parlato e dalle statistiche vedo che il bisogno di creare gallerie di immagini in html era un problema più sentito di quanto pensassi.

Mi piace pensare che l'idea mi è stata data da chi di programmazione e sviluppo non ha intenzione di capirne niente. Da chi vuole un risultato. Perchè spesso mi trovo a non riuscire a vedere problemi là dove in realtà c'è un'esigenza ed una opportunità conseguente.

Ultimamente ho letto più di un articolo in giro per la rete in cui si parla della possibilità di embeddare la galleria direttamente sul server. Il malinteso è sicuramente generato dal fatto che prima del download dò la possibilità di visualizzare in anteprima il risultato finale. Ma come chiaramente scritto nelle FAQ, dopo aver generato la galleria, l'archivio compresso contenente la stessa e la preview, si hanno 5 minuti di tempo per scaricare il tutto. Dopo di che ogni file viene distrutto permanentemente dal server.

I motivi sono abbastanza chiari:

• Non si richiede registrazione per l'uso del servizio. Quindi vostra scelta libera usare l'applicativo, ma non di meno, nostra volontà di non trattenere documenti uploadati da anonimi sul server. Potrebbe trattarsi di materiale pornografico, di foto rubate, di qualsiasi altra cosa. Non c'è l'intenzione di metterci nei casini per dare un servizio gratuito.
• Il secondo motivo è tecnico. Il server non reggerebbe la quantità di richieste provenienti dai client che visualizzano le gallerie ed il contemporaneo lavoro di produzione delle stesse. Presumo si andrebbe giù in certi momenti ed anche in questo caso, viste le disponibilità finanziarie, si doveva scegliere fra l'indebitamento e la soluzione che poi si è implementata.

In sostanza ricordate che se generate una galleria di immagini, dovete poi hostarla su un vostro server. Ed invito tutti quelli che scrivono due righe sul servizio di essere chiari in tal proposito, onde evitare segnalazioni di protesta sul genere del "perchè avete cancellato la mia galleria???"

A questa richiesta è giusto affiancare un sentito grazie a tutti quelli che parlandone sono i veri fautori del piccolo successo di MyGalleryGenerator :)

Tags: MyGalleryGenerator

Può essere molto utile usare un marker personalizzato. I marker, abbiamo già visto qualche articolo fa, sono i segnalibri che compaiono sulla mappa di Google ed indicato una determinata coordinata.

L'uso del marker personalizzato riesce a distogliere l'utente dalla mappa stessa ed a farla personalizzare con il proprio web, prescindendo quindi da Google. Inoltre un uso dinamico dei marker permette una lettura veloce dei punti segnalati. Possiamo usare un marker a forma di ristorante per indicare i punti di ristoro, uno a forma di croce per indicare gli ospedali, e così via.

In codice tutto risulta abbastanza semplice e si esplica nell'istanziare l'oggetto GIcon. Di seguito un facile esempio:

    var map = null;
    var geocoder = null;
    var address = '97015 Italy';

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("gmaps"));
        var geocoder = new GClientGeocoder();

        if(document.getElementById('addr').value != ''){
          address = document.getElementById('addr').value;
        }

        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = null;
        baseIcon.image = 'http://www.davidonzo.com/gmaps/icon/3.png';
        markerOptions = { icon:baseIcon };

        geocoder.getLatLng(address, function(point){
          if(!point){
            alert('Spiacente, indirizzo non trovato');
          }else{
            var marker = new GMarker(point, markerOptions);
            markerOptions = { icon:baseIcon };
            map.addOverlay(marker);
            GEvent.addListener(marker, "click", function() {
                   marker.openInfoWindowHtml('Coordinate<br />'+point);
          });
            map.setCenter(point, 8);
          }
        });
        map.setUIToDefault();
      }
    }

Come sempre una pagina con un esempio un po' più complesso, da usare al volo.

Tags: GMaps, Googla Maps, Marker

Come controllare se un anno è bisestile o no? Domanda posta qualche minuto fa su un gruppo di discussione sul PHP che seguo abbastanza assiduamente. Le risposte non si sono fatte attendere (bella community da questo punto di vista), ma le soluzioni proposte andavano dalle 20 righe di codice in su, con controlli ciclici, serializzazioni degli anni bisestili in improbabili array degli anni bisestili dell'ultimo secolo. Ho trovato girovagando altre soluzioni più pulite, ma sempre eccessivamente dispendiose per l'uso di memoria di sistema.

All'utente interessa sapere solo se quel determinato anno è bisestite o no. Un anno bisestile ha in calendario sempre il 29 Febbraio. Quindi, se quel giorno è calendarizzato l'anno sarà sicuramente bisestile, altrimenti è un anno normale.

Basta un semplice controllo con checkdate().

  function isLeapYear($year){
    if(checkdate(2,29,$year)){
      return $year.' is a leap year';
    }else{
      return $year.' is not a leap year';
    }
  }

Un semplicissimo ciclo if che controlla l'esistenza di una data specificata. Possiamo estremizzare ulteriormente il codice in tre righe e darne un output booleano.

  function isLeapYear($year){
    return (checkdate(2,29,$year)) ? true : false;
  }

Semplice no?! :-)

Tags: PHP

Trovo molto fastidiose le gallerie di immagini presenti nei quotidiani on line. Per andare avanti di una immagine bisogna ricaricare completamente la pagina, che di solito è stracolma di advertising molti dei quali in embedding da altri host su quella pagina. D'altra parte la soluzione trovata da alcuni, caricare tutte le immagini in elementi nascoti via css e farli magicamente apparire, non è tanto meglio, visto che potrei non voler vedere tutte le millemila immagini.

Un po' per gioco, un po' perchè potrebbe essere utile a qualcuno, ho scritto un piccolo script che permette di visualizzare una galleria senza troppo sforzo e soprattutto ricaricando volta per volta la sola immagine e non l'intero html.

Molto basilare. Nessuna miniatura, ma solo l'immagine con le frecce per andare avanti e indietro. C'è da dire che per aggiungere/togliere un'immagine alla galleria basta inserirla/rimuoverla da una directory.

Ho visto che ci sono migliaia di cose del genere in giro (e non mi spiego perchè le testate giornalistiche non ne usino almeno una). Per questo ho deciso di chiamare il giochetto "Just another AJAX gallery". Qui è possibile vederne una demo.

Visto che è una cosa fatta in cinque minuti e gli vedo grandi miglioramenti e potenziamenti possibili, metto il codice a disposizione di tutti. Nella speranza che qualcuno lo migliori e ne condivida la cosa.

La configurazione è facilissima:

• Scompattate l'archivio ed inviatelo al server nella directory che ospiterà la galleria
• Aprile il file function.js e modificate la seconda riga in accordo con l'URL della vostra galleria
• Inserite le immagini che volete nella directory /images/

Buon divertimento :-)

Tags: AJAX, JavaScript

Quante volte abbiamo visto mappe di GMaps con uno o tanti marker i quali cliccati mostravano la famosa nuvoletta con delle informazioni scritte all'interno. Molto utile se oltre a voler indicare visivamente le coordinate di un punto vogliamo anche dare informazioni ulteriori sul luogo.

Abbiamo già visto come produrre ed inserire in un punto preciso della mappa un marker. Oggi vedremo come abbellirlo con del testo inserito nella famosa nuvoletta, che comparirà al click dell'utente sul marker.

Il tutto è abbastanza semplice e si ottiene facendo lavorare di pari passo l'oggetto GMarker, che ci restituisce il puntatore a mappa e la classe GEvent, aggiungendo un listener all'evento onClick del marker generato mostri la nuvola (openInfoWindowHtml). Sembra uno scioglilingua, ma leggendo il codice apparirà tutto più chiaro.

    var map = null;
    var geocoder = null;
    var address = '97015 Italy';

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("gmaps"));
        var geocoder = new GClientGeocoder();
       
        if(document.getElementById('addr').value != ''){
          address = document.getElementById('addr').value;
        }
       
        geocoder.getLatLng(address, function(point){
          if(!point){
            alert('Spiacente, indirizzo non trovato');
          }else{
            var marker = new GMarker(point);
            map.addOverlay(marker);
            GEvent.addListener(marker, "click", function() {
                   marker.openInfoWindowHtml('Coordinate<br />'+point);
          });
            map.setCenter(point, 8);
          }
        });
        map.setUIToDefault();
      }
    }

In questo caso, per semplicità, ho deciso di mostrare le coordinate LatLng del punto a cui il marker fa riferimento. E' ovvio che avrei potuto scrivere la qualsiasi cosa, in semplice codice HTML.

Come sempre, una pagina per testare live quanto detto.

Tags: GMaps, Googla Maps

I servizi di geolocalizzazione ormai si sprecano. Far sapere dove sei ed in che momento, se in parte mina la tua privacy, dall'altro può essere viatico di buone opportunità. D'altra parte chi non vuole far sapere dove sta in un dato momento, basta che spenga il ricevitore gps :-)

Ma a noi oggi questo non interessa. Quello che vogliamo è trovare un luogo avendo informazioni non necessariamente precise. Per questo ci aiuta Google Maps e l'oggetto GClinetGeocoder.

Google Maps gestisce le varie posizioni di una mappa tramite un punto identificato da latitudine e longitudine. Quindi servirebbe avere un gigantesco database punto a punto con riferimenti incrociati per ottenere la corrispondenza di un punto ad un input di tipo testo che descrive un indirizzo.

Fortunatamente ci viene in aiuto GMaps mettendoci a disposizione una classe che si occupa di recuperare le coordinate di un indirizzo, anche quando questo riporta dati sommari.

var geocoder = new GClientGeocoder();
geocoder.getLatLng(address, YourCallbackFunction(point));

Istanziando l'oggetto GClientGeocoder possiamo sfruttarne il metodo getLatLng per ricavare le coordinare necessario. Oltre questo, possiamo richiamare una funzione di callback che direttamente dal predetto metodo sarà in grado di gestire la risposta alle coordinate date. Possiamo ad esempio aggiungere direttamente un marker alla mappa. Di seguito un esempio:

    var map = null;
    var geocoder = null;
    var address = '97015 Italy';

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("gmaps"));
        var geocoder = new GClientGeocoder();
       
        geocoder.getLatLng(address, function(point){
          if(!point){
            alert('Spiacente, indirizzo non trovato');
          }else{
            var marker = new GMarker(point);
            map.addOverlay(marker);
            map.setCenter(point, 8);
          }
        });
        map.setUIToDefault();
      }
    }

Stabilendo come indirizzo di default 97015 Italy, il geocoder andrà a cercare una coordinata coerente e nel nostro caso si posizionerà su Modica, al centro della zona che ha come CAP 97015. Avremmo potuto essere più precisi, specificando un indirizzo valido, finanche un numero civico.

Se il geocoder non trova nessuna corrispondenza avvertirà l'utente dell'errore arrestandosi subito dopo, altrimenti piazzerà un marker nel punto trovato e centrerà la mappa con riferimento a questo.

Tutto abbastanza semplice. Ma un esempio pratico può aiutare molto. Provate ad inserire nella form il vostro indirizzo di casa e vedrete che GMaps vi scoverà in men che non si dica :-)

Tags: Google, Gmaps

Lo sviluppo web moderno prevede un uso solo marginale di codice HTML statico. Eppure l'output di una applicazione web è principalmente di questo tipo. Che sia pyton, perl, php, ruby o qualsiasi altro linguaggio server side, il risultato che vogliamo ottenere nella maggior parte dei casi è codice html da visualizzare via browser.

Quello che vediamo in ultimo è il risultato di un processo complesso di aggregazione di dati, calcolo di variabili, manipolazioni di stringhe... A monte quindi c'è qualcosa di estremamente diverso. Una serie di processi sistemici che permettono di raggiungere l'obiettivo finale.

Proprio perchè si parla di processi sistemici, è evidente la possibilità di vedere la creazione di una pagina web in termini di "ciclo di vita".

Si parte dalla richiesta del client remoto. Questa avrà dei parametri che l'applicazione andrà ad elaborare. Una volta ottenuti tutti i dati necessari è possibile produrre l'output desiderato. Oggi parliamo proprio dell'ultima fase e di quanto sia conveniente delegare un processo proprio alla creazione del risultato finale.

Template Engine

Sta in questo il template engine. Bella definizione con cui si vuole sintetizzare l'attitudine di un'applicativo web a creare output visuale in modalità indipendente dai processi di acquisizione ed elaborazione della richiesta remota.

E' un po' quello che succede in questo blog, ma anche in wordpress, joomla e la quasi toalità dei content management system open source in circolazione. La gestione del template è completamente separata ed indipendente dal resto del sistema. Il template engine viene usato dal core code dell'applicazione come uno dei tanti strumenti di elaborazione dati. Nel caso specifico un processo di finalizzazione.

Come agire in concreto

Le modalità operative di implementazione di un sistema di template engine partono da un presupposto di progettazione abbastanza preciso: l'applicativo che si vuole realizzare deve essere visto come una serie di processi indipendenti e collegati fra loro in modalità sussidiare ad un motore centrale.

Questo permette non solo di creare un buon concept dell'applicazione, ma anche di rendere portabile le varie fasi in altri progetti. In una logica ampia la progettualità di un'applicazione web che vede le seguenti fasi:

• Ricezione richiesta remota.
• Elaborazione della richiesta.
• Rilascio dei dati risultanti dall'elaborazione.
• Rappresentazione grafica tramite template.

L'ultima fase è quella che si relazione con l'utente finale. Il front office dell'applicazione web si occupa di consegnare il pacco al cliente. Ma penseranno i processi di produzione ad elaborare la richiesta e preparare il tutto per il fiocco finale.

Template strutturali e funzionali

Si può affermare che ogni template engine sia un sistema strutturale. Avrà i suoi processi interni di gestione ed interfacciamento con il core code. In una logica di separazione delle fasi di processo, riuscirà ad adattarsi al sistema che deve servire mantenendo un'alta scalabilità in termini di facile implementazione di interfaccia.

La funzionalità del template engine è invece una scelta più radicale. Si può decidere infatti che il templating sia atto solo a visualizzare, nel formato adatto, il risultato della richiesta cliente. In altri casi si può anche decidere di destinare al template parte dell'elaborazione, passando a questo dati a livello più grezzo.

Non esiste una scelta migliore e molto dipende dalle modalità di rilascio dell'applicativo. Un esempio di template engine strutturale e poco funzionale è Smarty. Tramite l'utilizzo di file .tpl ed un interfacciamento semplice, riesce a gestire le risultanze passategli da un sistema complesso. Sconta, come ogni altro sistema del genere, la necessità di implementazione nel core code di nuove funzionalità anche per modifiche banali. Si presta però molto bene ad essere incluso in software proprietari a rilascio privato. In questo caso le personalizzazioni e le modifiche successive trovano logica in una modifica diretta del motore centrale dell'applicativo. Mentre il front end può essere gestito facilmente da personale che abbia grandi conoscenze di styling puro, senza bisogno di competenze a livello di scripting.

Per i software a rilascio pubblico e diffuso invece, si consiglia l'utilizzo di un template engine funzionale. Meglio se scritto nello stesso linguaggio di programmazione usato dal motore principale.

L'esempio banale è wodpress. Il sistema di template è scritto in PHP. I file di template sono scritti in PHP. Lo stesso motore centrale fornisce numerose api per implementare nuove funzionalità all'interno del visuale utente. Perchè questo? Wordpress è un software open source, a rilascio diffuso e frequente. Nuove funzionalità che non prevedono scrittura nel database possono essere inserite direttamente nel template. In questo modo, insieme al sistema di plugin, si riesce a non toccare mai il cuore dell'applicazione, potendo procedere ad aggiornamenti di struttura in maniera indipendente e quindi sostenibile.

Solo HTML?

Lo stesso principio con cui strutturiamo il template engine per la produzione di output HTML può essere utilizzato per qualsiasi tipo di output. Ipotizziamo di dover rilasciare un'immagine jpeg con un testo arbitrario. Probabilmente avremo un processo per selezionare l'immagine di sfondo. Un altro proceso si occuperà di processare la stringa da scrivere sull'immagine stessa. Se tale funzione è ripetitiva risulta più economico creare un file di template unico che si occuperà di mostrare il risultato, piuttosto che far produrre il jpeg al codice operativo. Stesso discorso per file XML, PDF, CVS e altro.

Tutte queste sono nozioni di base e del tutto teoriche. Nessun esempio di codice è inserito proprio perchè l'intento è quello di mostrare una logica progettuale efficace ed efficiente. Per le modalità operative, buon lavoro :-)

Tags: Template Engine