Archive for the ‘webdesign’ Category

nWire – PHP source navigation made easy

Sunday, October 18th, 2009

nWire è un plugin per eclipse Galileo e per Zend Studio 7 che offre la possibilità di navigare nel codice in maniera veloce e intuitiva.
Si propone come uno strumento indispensabile per la gestione di grandi progetti con migliaia di file e centinaia di classi da gestire.
Gli IDE di ultima generazione hanno ormai tutti integrati dei sistemi di analisi del codice, che semplificano la navigazione del codice, permettendo ad esempio di saltare con un click al punto in cui una costante è stata definita; oppure di saltare alla definizione di una classe semplicemente cliccando sul nome della classe stessa.
Tutte queste semplificazioni aiutano il programmatore a muoversi con maggiore agilità all‘interno del progetto.
Purtroppo però data l‘incredibile versatilità del php l‘editor non è sempre in grado di capire di che tipo è una determinata variabile;

ZendStudio5.png

In aiuto vengono i commenti nel formato PHPDoc che forniscono preziose informazioni all‘inspector.

ZendStudio13.png

Altri, come Zend Studio ad esempio, propongono anche una sintassi di commenti comprensibile dal suo inspector, in modo da istruirlo sul tipo di variabile:

ZendStudio23.png

Ovviamente tutte queste soluzioni impongono al programmatore uno stile di codice che magari non gli appartiene, ma che è costretto a rispettare se vuole godere dei benefici dell‘inspector.

Proprio qui entra in gioco nWire, che offre molte più possibilità dell‘inspector nativo dell‘editor, ma non obbliga a mantenere uno stile di codifica differente da quello che si è abituati a usare.

Installazione
L‘installazione è semplicissima; grazie anche alle funzionalità (decisamente migliorate) di Eclipse Galileo nella gestione dei repository di plugins.
Basta infatti aggiungere un nuovo sito nella sezione dedicata alla gestione dei siti, ed ecco che le funzionalità di questo plugin sono pronte per essere installate.

ZendStudioadd3.png

Il plugin offre 2 vesti diverse, una specifica per PHP e una specifica per JAVA, ovviamente ho provato quella dedicata a PHP.
Install13.png
Primo impatto
A dire il vero sono rimasto sorpreso, immaginavo che questo plugin una volta installato mi inondasse l‘IDE con pulsanti inutili e con pannelli criptici, e invece non ho notato nessun cambiamento nel‘IDE, tanto da credere che fosse andato qualcosa storto nell‘installazione.
Dopo qualche minuto a spulciare la documentazione ho notato i due pulsanti che erano stati aggiunti nella barra in alto.

ZendStudiobar3.png

Il pulsante a sinistra una volta cliccato apre l‘overview testuale dell‘inspector, quello a destra apre invece la ricerca veloce.
Inoltre è stata aggiunta una nuova voce nel menù contestuale del progetto che permette di abilitare o disabilitare l‘inspector su quel progetto.

ZendStudio203.png

L‘overview
Qui la cosa si fa interessante. L‘overview le legata all‘editor: si aggiorna al volo mostrando il contesto in cui il cursore si trova in quel momento, se ad esempio il cursore si trova all‘interno di una classe, ma all‘esterno dei metodi, l‘overview fa partire la sua analisi dalla classe, mostrandoci l‘elenco dei metodi e delle proprietà, quante volte la classe viene istanziata, il partent. etc. Se ci spostiamo sul nome di un metodo, ecco che la visuale cambia, e il focus si concentra sul metodo, mostrandoci cose come i metodi di cui questo fa l‘override, quante volte è invocato, quali proprietà della classe intacca, etc.

currentline2.png
Una volta indicato cosa ispezionare il plugin fornisce queste informazioni:

  • la classe parent e tutte le eventuali classi che estendono questa
  • quante volte e dove è istanziata una classe
  • quante volte e dove è usata una istanza di quella classe
  • quali metodi (nell‘intero scope del progetto) restituiscono un oggetto che è una istanza di quella classe
  • quante volte e dove un metodo viene invocato
  • quali metodi e funzioni un metodo invoca
  • quante volte e dove un file è incluso
  • quali metodi modificano la proprietà di una classe

modifyed.png

Ovviamente è possibile navigare anche usando l‘overview stessa, basta cliccare l‘elemento che si vuole ispezionare e si apre un nuovo pannello sulla destra che mostra le informazioni desiderate e così via.

Prestazioni
Temevo che l‘indicizazione del progetto da parte di questo plugin inchiodasse l‘IDE, invece impiega un po‘ meno del tempo che ci mette Zend Studio a fare la build del progetto stesso. La parte scocciante è forse solo quando il plugin si accorge di modifiche strutturali al codice e lancia di nuovo l‘indicizazione, questo inchioda l‘editor per qualche secondo; ma è un settaggio che si può modificare nelle preferenze del plugin stesso.
Per completezza riporto un po‘ di dati sullo scenario in cui ho provato nWire:
Grandezza del progetto: +60MB di file sorgenti
Numero di classi: +6.000
Computer: MAC Pro dual Core con 2 GB di ram

Overview Grafica
Sinceramente non l‘ho trovata molto utile. Non è altro che la visualizzazione con blocchi e frecce dell‘overview testuale. Navigabile alla stessa maniera, ma che non offre nulla in più. A mio avviso sarebbe stato un ottimo addon anche senza questa funzionalità

ZendStudiobox.png

Ricerca rapida
L‘ho trovata davvero utile! Un aggiunta molto potente alla ricerca integrata nell‘IDE, la funzionalità che più mi ha colpito è quella che permette la ricerca in base al CameCase dei nomi: basta infatti scrivere nella ricerca “gH“ e è come aver scritto “g*H*“.

ZendStudioquicksearch.png

Conclusioni
Sono convito che se si manutiene un progetto di grosse dimensioni e si intende refattorizzare spesso l‘architettura del codice, questo sia uno strumento più che indispensabile. L‘ho usato per solo 2 ore e ho trovato decide i posti in cui non avevo aggiornato il codice per adeguarlo ad un refactoring recente (si lo so… i tests… ma non tutti i meandri del progetto sono coperti dai tests, non scordate che sono 60MB di sorgenti!).
Sul costo non mi esprimo (59$ per la versione solo PHP), visto che secondo la mia esperienza, se un tool è indispensabile al proprio lavoro.. il costo è l‘ultimo aspetto da considerare. Una nota però va fatta: i ragazzi di nWire offrono una copia gratuita del plugin se si possiede un blog e si scrive un post che lo valuti ;)

Dwoo Template Engine

Thursday, June 11th, 2009

Dwoo Template Engine, è un nuovo Template Engine (ma va?!) per PHP.

Perchè un template engine?

Beh se si affronta un progetto un po’ più grande del sito di una salumeria, avere un approccio MVC è quanto mento d’obbligo.

Perchè non Smarty?

Smarty è senza dubbio un ottimo template engine, ed esiste da tanti anni da potersi considerare più che robusto. Tuttavia Smarty non viene aggiornato da parecchio, è basato ancora su PHP4 (che php.net ha dismesso e definito obsoleto!!), ed è rimasto lo stesso da più di due anni (non una sola riga di codice di aggiornamento!!). Va detto per onor di cronaca che la comunità attorno a smarty si è recentemente svegliata, annunciando la versione 3 del motore di templates. Peccato che abbiano rilasciato solo 2 aggiornamenti (il secondo è servito per correggere un bug introdotto nel primo O_o). Le premesse di smarty 3 sono più che ottime, ma è necessario OGGI un template engine al passo con gli aggiornamenti del PHP.

Dwoo?

Un po’ nascosto, ho scovato questo motore, dwoo appunto, di templates, le sue premesse non sono da meno rispetto a quelle di Smarty 3, con la sola differenza che Dwoo è pronto oggi, adesso. Vi riepilogo in breve le caratteristiche principali:

  • scritto interamente from scratch.
  • scritto completamente ad oggetti e in puro php5
  • UTF-8 ready
  • il codice compilato è completamente  E_STRICT compliant (vale a dire che php non lancerà nessun NOTICE durante la sua esecuzione)
  • Utilizza un sistema di cache dei templates simile a smarty
  • ha una sintassi smarty-like (a dirla tutta, riesce a compilare QUASI tutti i template scritti per smarty)
  • introduce una sintassi migliorata per rendere più scorrevole la scrittura del template
  • riconosce da solo i blocchi di javascrip e CSS ( grazie Dwoo!! )
  • implementa l’ereditarietà dei templates (grazie anche per questo)
  • estenderlo con dei plugins è molto semplice.

Scrivere il template è più facile e scorrevole; infatti per chiudere una tag si può usare {/} che ha la magica funzione di chiudere l’ultimo che è stato aperto

{foreach $array item}
  bla bla bla..
{/foreach}
 

oppure

{foreach $array item}
  bla bla bla..
{/}
 

Interessante anche la funzionalità del tag {dynamic} che indica al compilatore dwoo che quel blocco di template va rieseguito ad ogni invocazione e non deve essere cachato.

Questo contentuto sarà messo nella cache di dwoo
{dynamic}
  tutto quello che sta qui dentro non verrà mai cachato ma sarà
  reinterpretato ogni volta, molto utile per la gestione dei banner ad esempio.
{/}
anche questo contenuto finirà nella cache
 

La funzionalità più importante a mio avviso resta la capacità del compilatore di riconoscere javascript e css (per le parentesi graffe).
Con smarty era necessario chiudere il blocchi JS e CSS tra i tag {literal}…{/literal} che disabilitano l’interprete di template.

{literal}
.table {
  color: #FFF;
  border: 1px solid #000;
}
{/literal}
 

che può essere un compromesso accettabile.. ma spesso capita di dover passare in smarty dei valori che devono finire nel CSS o nel JS, e per fare ciò era necessario chiudere il tag {/literal} prima della variabile e riaprirlo subito dopo.

{literal}
.table {
  color: #FFF;
  border: {/literal}{$border_width}{literal}px solid #000;
}
{/literal}
 

Questo è decisamente un compromesso meno facile a cui scendere. Dwoo risolve questo dilemma semplicemente: ignorando i tags che dopo la parentesi quadra hanno uno spazio o un caratte accapo.
Il seguente blocco di codice in Dwoo è perfettamente legittimo.

{literal}
.table {
  color: #FFF;
  border: {$border_width}px solid #000;
}
{/literal}
 

Infine Dwoo introduce l’ereditarietà, che resta la caratteristica più interessante e potente del motore. Seguo un esempio per spiegarlo:


Un file base.tpl con questo contenuto:

<html>
  <head>
    <title>{block "title"}Il mio Sito{/block}</title>
    {* css etc. *}
  </head>
  <body>
    <h1>{block "page-title"}Default page title{/block}</h1>
    <div id="content">
      {block "content"}
        Benvenuto!!
      {/block}
    </div>
  </body>
</html>
 

Viene esteso dal file gallery.tpl, che sovrascrive il blocco “title”

{extends "base.html"}
{block "title"}
Photo Gallery
{/block}
 

Infine il file photo_gallery.tpl estende gallery.tpl sovrascrivendo altri blocchi di contenuto.

{extends "gallery_base.html"}
{block "title"}Home – {$dwoo.parent}{/block}
{block "page-title"}Gallery home{/block}
{block "content"}
  {foreach $images img}
    <img src="{$img.url}" alt="{$img.description}" />
  {/foreach}
{/block}
 

Compilando il file photo_gallery.tpl si ottiene il seguente output:

<html>
  <head>
    <title>Home – Gallery</title>
  </head>
  <body>
    <h1>Gallery home</h1>
    <div id="content">
      <img src="/example.jpg" alt="image" />
      <img src="/example2.jpg" alt="image" />
      <img src="/example3.jpg" alt="image" />
    </div>
  </body>
</html>
 

Ma è un linguaggio di programmazione, non è adatto a un grafico

Questa è l’accusa più ovvia da cui un motore come Dwoo deve difendersi. Tuttavia nei miei anni di lavoro non ho mai incontrato un grafico web (intendo il tizio che scrive HTML e CSS per far somigliare il più possibile una pagina web ad un file fatto con photoshop) che non avesse abbastanza nozioni per capire cosa è una variabile, un ciclo o una inclusione. Non vedo perchè non possa sforzarsi di capire anche cosa è l’ereditarietà.

In conclusione

Ho lavorato usando smarty per tanti anni (5?, 6?) e non lo avrei mai abbandonato se non avessi sentito così forte l’esigenza di un template engine costruito su una piattaforma non obsoleta. l’esigenza di refattorizzare esigeva un’evoluzione.

51 cose che un uomo deve fare prima di morire

Wednesday, August 27th, 2008

Premessa breve, il titolo spiega abbastanza. Questa è la mia lista:

  1. Percorrere in auto o in moto la “Route 66″ in America (a.k.a. Coast to Coast).
  2. Picchiare qualcuno fino a farlo svenire.
  3. Essere picchiato da qualcuno fino allo svenimento.
  4. Giocare a Rugby.
  5. Lanciarsi con l’elastico.
  6. Ubriacarsi.
  7. Percorrere a piedi il cammino di Santiago partendo almeno dalla Francia.
  8. Assumere un allucinogeno (una sola volta credo basti).
  9. Imparare a suonare uno strumento musicale.
  10. Piangere in pubblico.
  11. Scrivere una poesia/canzone d’amore.
  12. Sparare con un’arma (non necessariamente a qualcuno).
  13. Fare l’Autostop fino a un paese estero.
  14. Restare digiuno per 72 ore di fila.
  15. Passare da solo una notte nella foresta.
  16. Prendere la metropolitana a Tokio.
  17. Immergersi nell’oceano.
  18. Andare a caccia, uccidere un animale, macellarlo, cucinarlo e mangiarselo.
  19. Vivere una settimana in una suite di un hotel di lusso con almeno 5 stelle.
  20. Imparare una lingua straniera.
  21. Stringere la mano ad una persona che ha fatto qualcosa di grande per il mondo.
  22. Vivere 10 giorni in Africa.
  23. Vivere una settimana in tenda, in campeggio.
  24. Scrivere le 51 cose che si vorrebbe fare nella propria vita (questa è dura).
  25. Vedere l’aurora boreale.
  26. Passare una notte sveglio solo per vedere l’alba.
  27. Partecipare ad un Rave.
  28. Entrare in una chiesta e trattenersi col prete a parlare di Dio.
  29. Entrare in una sinagoga e trattenersi col rabbino a parlare di Dio.
  30. Entrare in una moschea e trattenesi col sacerdote a parlare di Dio.
  31. Viaggiare nel treno “espresso notte Milano-Messina” la sera del 23 Dicembre.
  32. Imparare un’arte marziale.
  33. Ballare il tango.
  34. Correre con i tori a Pamplona.
  35. Pilotare un carrarmato.
  36. Visitare Roma.
  37. Cavalcare un animale grosso.
  38. Imparare ad combattere con la spada.
  39. Scrivere un libro.
  40. Fare l’amore con due donne contemporaneamente.
  41. Andare all’OktoberFest
  42. Nuotare con i delfini
  43. Farsi la doccia in una cascata naturale
  44. Passare un carnevale a Rio.
  45. Partecipare a un triathlon.
  46. Diventare il mentore di qualcuno (verso la fine).
  47. Viaggiare sull’Orient Express.
  48. Ascoltare una orchestra a Vienna
  49. Parlare da una grande folla di gente.
  50. Vedere un’eclissi totale di sole.
  51. Imparare una poesia a memoria (quella che piace di più).

Sono curioso di ascoltare la vostra.

Animoto

Tuesday, July 15th, 2008

Nel mio vagare mi sono di nuovo imbattuto in un sito davvero utile: animoto.com.

Il sito vi permette di creare dei brevi video partendo da una collezione di foto e da una colonna sonora. Voi non dovete fare altro che sottoporre al sito le vostre foto, indicare quali di quelle volete che vengano messe in risalto nel video e fornirgli un mp3 che sarà la colonna sonora.

Il sito pensa lui a tutto, analizza le foto, la musica, e cerca di comporre nella miglior maniera le foto in modo che l’animazione possa seguire la musica. Il risultato è davvero sorprendente!!

Dopo aver creato il vostro video, potete scaricarlo, postarlo su youtube o su facebook, inviarlo ad un amico o (pagando) ottenerne una copia in formato DVD.

Qui sotto trovate un esempio di pochi secondi fatto usando un estratto delle foto di questo blog. Buona visione.

Guida galattica per web-developers

Wednesday, July 9th, 2008

Ho scovato in rete una bella collezione di schede e prontuari per CSS, HTML, XHTML, JavaScript, Mootools, in formato PDF, pronte da stampare e da tenere sempre a portata di mano sulla scrivania.

prontuari PDF per lo sviluppatore web

HTTP status flowchart

Tuesday, July 8th, 2008

Per tutti gli sviluppatori web:
Ho scovato questo interessante diagramma da stampare e appendere alla parete, da tenere sempre sott’occhio!

Sul sito di origine lo trovate anche in altri formati

5 animazioni flash originali

Thursday, June 12th, 2008

Drum Machine
se amate la musica orientale, adorerete questa animazione: sette percussionisti orientali in perfetta sincronia.

Online Shopping
Il modo più originale per creare l’intro di un sito di e-commerce. Molto divertente.

Kaleidoscope
Epilettico??? Allora lascia perdere. Puoi scegliere tra una decina di pattern per creare, muovendo il mouse) simpatici effetti di colore.

Silhouette Sounds
Adoro questo concept. Fare musica con i rumori.

Jackson Pollock
Quante volte davanti ad un quadro di Jackson Pollock avete detto “sono capace anche io di farlo”, ora ne avete l’occazione.

google charts

Sunday, December 9th, 2007

Di recente ho scoperto un nuovo servizio di google, Google charts.

Il servizio è orientato agli sviluppatori web, e risolve con grande semplicità un bel problema di rappresentazione dati: i grafici!

Questo servizio è semplicissimo da usare ed integrare: basta aggiungere un’immagine con un url tipo questo:
http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World
per ottenere questo grafico:

Io, essendo un programmatore PHP, ho sempre usato la libreria jpgraph per generare grafici, e devo dire la verità, mi sono sempre trovato bene.

Ma usare un servizio esterno ha degli indubbi vantaggi:

1) la CPU necessaria per generare l’immagine non viene consumata.
Infatti sarà un altro server (e che server!) ad occuparsene; questo può sembrare poco, ma quando centinaia di utenti accedono ad una pagina in cui compaiono due o tre grafici, vedrete se non ho ragione!

2) il progetto non dipende da librerie esterne.
E’ una operazione tediosa tenere aggiornata una libreria, litigare con la retrocompatibilità, e sperare che NESSUNO dei centinaia di grafici sparsi per il tuo progetto risenta del cambiamento.

3) risparmierete tempo
Non perderete tempo a decidere dove deve andare la lagenda del grafico, o di che colore devono essere le barre, o se lo sfondo è meglio sfumarlo verso il grigio o meno.

4) immediata integrazione nel vostro template engine preferito
Niente più immagini embedded nell’HTML, o files .php nella directory “images”; Io uso smarty come template engine, e ho creato una rosa di plugins per integrare i grafici facilmente in un template, a breve la posto sul blog: stay tuned.

5) free
A differenza di molti altri servizi di google (vedi maps, o search api), questo servizio non richiede registrazione.

clevr – online panorama

Saturday, May 19th, 2007

Girovagando per la rete ho trovato questo magnifico servizio.
Avete presente quei panorami creati tramite un software che ricompone in una sola grande immagine tante foto di uno stesso luogo, in modo da creare un effetto panorama con visuale a 360°?

Beh sono certo che non vi sorprendere troppo se vi dico che cleVR propone online questo servizio; Infatti potete fare l’upload delle vostre foto e lui si preoccuperà di creare il panorama per voi.

Ma cleVR fa molto di più:
innanzitutto vi permette di esportare il panorama, in modo da porterlo inserire nelle vostre pagine web;
poi vi permette di aggiungere al panorama degli hotspot, che se cliccati ci possono dare delle informazioni generiche (ad esempio cliccando su un monumento), oppure vi possono portare a visitare un altro panorama (collegando appositametne gli hotspot dei panorami delle camere di un museo, si può ottenere facilmente un tour virtuale).

eccovi un esempio.

CakePHP

Saturday, April 14th, 2007

ho scovato questo interessante Toolkit per php.
A quanto pare promette di rendere rapidissimo lo sviluppo di una applicazione web.
Ora lo provo e scrivo un articolo a riguardo.

ecco qui il link: CakePHP

è presente anche un intero sito dedicato ai tutorial per questo Toolkit.