Per fortuna che ottimizzare la propria organizzazione porta sempre dei benefici.

Seguo diversi lavori contemporaneamente e tentare di fare “mente locale” ogni qual volta passo da un lavoro all’altro è sempre complicato. Per mia fortuna mi sono imposto, sin dall’inizio, di scrivere tutto quanto e quindi mi basta una lettura veloce per ricordarmi a che punto del lavoro ero arrivato. L’unico inconveniente di questo approccio è che non ho mai utilizzato un software per la gestione dei propri progetti e mi sono sempre affidato a dei semplici file Microsoft Word oppure ai task in Visual Studio.

Le limitazioni di questo approccio sono evidenti: perdo un sacco di tempo a formattare i testi per capire cosa ho fatto e cosa devo fare e non posso tenere un unico file per tutti i miei progetti. Inoltre non riesco facilmente a capire quante ore lavoro ho speso per ogni progetto.

Ho cominciato quindi a guardami in giro per capire se esistesse un software, preferibilmente gratuito, che mi permettesse di migliorare l’ordine delle mie commesse.

Per farla breve, ho trovato Quality Control, un ottimo tema di wordpress che permette una gestione base, ma efficace dei propri progetti. Il tema è gratuito, esattamente come WordPress, e quindi in pochissimi passi (io ci ho impiegato circa 10 minuti) potete avere un sistema di gestione della qualità dei propri progetti online.

Quality Control permette di separare i lavori per progetti, per milestone (cioè versioni diverse dello stesso progetto), per categorie e per stato (urgente, bug, completato, …).

La libreria, chiamata NDownloadcounter, è molto semplice. Si tratta di una libreria .NET (scritta in C# per la precisione), che permette di far scaricare dal browser qualsiasi tipo di file conteggiando in un database SQLite il numero di download effetti per ogni singolo file.

La libreria permette inoltre di specificare le estensioni dei file che non possono essere scaricati così da proteggere l’eventuale tentivo di download di file .aspx, .cs, .config, .mdf, ecc…

La libreria è in vendita per soli 7 dollari e comprende anche una documentazione completa e tutto il codice sorgente.

Oggi vi voglio mostrare come ho modificato quell’esempio per rendere ancora più semplice il mio lavoro.

Le problematiche infatti dell’esempio della scorsa settimana erano legate per lo più all’impossibilità di validare l’intera form e soprattutto l’impossibilità di chiudere la finestra.

var ContactForm = Ext.extend(Ext.Window, {
    width: '400',
    modal: true,
    title: 'Nuovo Contatto',
    layout: 'fit',
    projectId: 0,
    frame: true,

    initComponent: function () {

        this.items = [{
            xtype: 'form',
            layout: 'form',
            height: 350,
            ref: 'form',
            buttonAlign: 'right',
            defaults: {
                anchor: '-20'
            },
            frame: true,
            bodyStyle: 'padding:5px',
            items: [{
                xtype: 'textfield',
                id: 'company',
                ref: 'company',
                fieldLabel: 'Società',
                allowBlank: false
            },
            {
                xtype: 'textfield',
                id: 'webSiteAddress',
                ref: 'webSiteAddress',
                fieldLabel: 'Sito web',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'emailAddress',
                ref: 'emailAddress',
                fieldLabel: 'E-Mail',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'address',
                ref: 'address',
                fieldLabel: 'Indirizzo',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'zip',
                ref: 'zip',
                fieldLabel: 'CAP',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'city',
                ref: 'city',
                fieldLabel: 'Città',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'province',
                ref: 'province',
                fieldLabel: 'Provincia',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'phoneNumber',
                ref: 'phoneNumber',
                fieldLabel: 'Telefono',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'faxNumber',
                ref: 'faxNumber',
                fieldLabel: 'Fax',
                allowBlank: true
            }

            ],
            fbar: {
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    text: 'Inserisci',
                    scope: this,
                    minWidth: 75,
                    iconCls: 'person-new',
                    handler: this.onSubmit
                }]
            }
        }];

        ContactForm.superclass.initComponent.call(this, arguments);

    },

    onSubmit: function () {
        var msgMask = Ext.MessageBox.wait('Attendere prego...');

        if (this.form.getForm().isValid()) {
            DirectContacts.AddPerson(
            parseInt(this.projectId),
            this.form.company.getValue(),
            this.form.webSiteAddress.getValue(),
            this.form.emailAddress.getValue(),
            this.form.address.getValue(),
            this.form.zip.getValue(),
            this.form.city.getValue(),
            this.form.province.getValue(),
            this.form.phoneNumber.getValue(),
            this.form.faxNumber.getValue(),),
            function (result, e) {
                if (result.success) {
                    Ext.MessageBox.hide();

                    new Ext.ux.Notification({
                        iconCls: 'x-icon-information',
                        title: 'Contatto inserito',
                        html: 'Il contatto è stato inserito correttamente.',
                        autoDestroy: true,
                        hideDelay: 3000
                    }).show(document);
                }
                else {
                    Ext.MessageBox.show({
                        title: 'Errore',
                        msg: result.error,
                        buttons: Ext.MessageBox.OK,
                        animEl: 'submitButton',
                        icon: Ext.MessageBox.ERROR
                    });
                }

                this.close();
            }, this);
        }
        else {
            Ext.MessageBox.hide();

            new Ext.ux.Notification({
                iconCls: 'x-icon-error',
                title: 'Contatto non inserito',
                html: 'Compilare tutti i campi obbligatori.',
                autoDestroy: true,
                hideDelay: 3000
            }).show(document);
        }
    }
});

// register xtype to allow for lazy initialization
Ext.reg('mcContactForm', ContactForm);

Da notare è soprattutto il this (alla riga 142) inserito come ultimo parametro nella chiamata al metodo DirectContacts.AddPerson (di tipo Ext.Direct). Il this è lo scope della funzione handler e pertanto all’interno della funzione posso chiamare this.close() per chiudere la Ext.Window.

Ho perso più di un ora per capire come funzionassero gli scope in ExtJs; senza quel this infatti l’handler tentava di chiudere la finestra del browser!

Potete poi vedere che ho sostituito le dichiarazioni esplicite di oggetti (new TextField per esempio) con la loro controparte in LazyLoading. Questa modifica mi permette di caricare in memoria quegli oggi solo quando realmente necessari, rendendo il codice javascript dell’applicazione più veloce.

• Getti pressofusi in zama
• Stampaggio materie plastiche
• Lavorazioni meccaniche
• Verniciatura e trattamenti speciali
• Qualità

Per il cliente è stato realizzato un sito parzialmente dinamico per quanto riguarda i contenuti nel fronte-end disponibile al pubblico.

Inoltre è stato realizzato un complesso sistema di gestione di file condivisi con i propri clienti e fornitori per fornire e ricevere documentazione relativa ai prodotti da stampare.

Il sito è stato realizzato interamente in Microsoft.NET e sfrutta diverse tecnologie tra le quali una gestione avanzata della cache e della localizzazione dei contenuti (il sito è infatti tradotto in 4 lingue).

ExtJs è uno stupendo framework per lo sviluppo di applicazioni web. Purtroppo, come ogni javascript framework, ha lo svantaggio di utilizzare un linguaggio, javascript appunto, che non è certamente comodissimo per mantenere pulito e manutenibile il codice.

Per fortuna ExtJs, grazie all’utilizzo esteso di classi Javascript, è facilmente estensibile così da creare blocchi di codice da riutilizzare nella propria applicazione e quindi scrivere più file ma con minore numero di righe (ed ogni sviluppatore sa come è difficile mantenere ordinati file contenenti qualche centinaio di righe di codice).

Nell’ultimo progetto che sto sviluppando per la società Multiconsult (un CRM personalizzato per le loro esigenze) faccio un uso davvero estensivo di ExtJs e utilizzare un unico file Javascript per pagina stava diventando praticamente impossibile.

Leggendo quindi la documentazione ho imparato velocemente ad utilizzare l’estensione di classi base.

Ecco un semplice esempio per la creazione di un oggetto esteso che deriva da  Ext.Window (una piccola finestra):

var ContactPersonForm = Ext.extend(Ext.Window, {
    width: '300',
    height: '240',
    buttonAlign: 'right',
    modal: true,
    title: 'Nuovo Referente',
    layout: 'form',
    bodyStyle: 'padding:10px',
    contactId: 0,
    ownerUserId: 0,
    defaults: {
        anchor: '100%'
    },

    initComponent: function() {
        ContactPersonForm.superclass.initComponent.call(this, arguments);

        var firstName = new Ext.form.TextField({
            id: 'firstName',
            fieldLabel: 'Nome',
            allowBlank: true
        });
        this.add(firstName);

        var lastName = new Ext.form.TextField({
            id: 'lastName',
            fieldLabel: 'Cognome',
            allowBlank: true
        });
        this.add(lastName);

        var department = new Ext.form.TextField({
            id: 'department',
            fieldLabel: 'Dipartimento',
            allowBlank: true
        });
        this.add(department);

        var eMailAddress = new Ext.form.TextField({
            id: 'eMailAddress',
            fieldLabel: 'eMail',
            allowBlank: true
        });
        this.add(eMailAddress);

        var phoneNumber = new Ext.form.TextField({
            id: 'phoneNumber',
            fieldLabel: 'Telefono',
            allowBlank: true
        });
        this.add(phoneNumber);

        var faxNumber = new Ext.form.TextField({
            id: 'faxNumber',
            fieldLabel: 'Fax',
            allowBlank: true
        });
        this.add(faxNumber);

        var submitButton = new Ext.Button({
            text: 'Inserisci',
            scope: this,
            minWidth: 75,
            iconCls: 'person-new',
            handler: this.onSubmit
        });
        this.addButton(submitButton);
    },

    onSubmit: function() {
        // TO DO: Save to database
    }
});

// register xtype to allow for lazy initialization
Ext.reg('mcContactPersonForm', ContactPersonForm);

Per utilizzare la mia nuova finestra sarà sufficiente istanziarla, magari valorizzando anche qualche proprietà:

var _contactPersonForm = new ContactPersonForm();
_contactPersonForm.contactId = 10;
_contactPersonForm.ownerUserId = 28;
_contactPersonForm.show();

In questo periodo sto sperimentando la programmazione su piattaforma Android. Anche se Java non è il mio linguaggio preferito devo dire che l’SDK di casa Google è veramente ben fatto e permette di sviluppare velocemente applicazioni di ottima qualità.
Girovagando in internet ho inoltre trovato un ottimo post su speckyboy.com che elenca una serie di GUI utilizzabili sia per la progettazione dell’interfaccia che per la presentazione del progetto ai clienti. Davvero molto utili.

Vi invito a visionarle:

http://speckyboy.com/2010/05/10/android-app-developers-gui-kits-icons-fonts-and-tools/

La decisione era nell’aria da tempo. Google aveva già aggiunto negli Strumenti per Webmaster le statistiche relative alla velocità di download dei siti.

Ora è finalmente ufficiale:

La velocità di scaricamente delle pagine di un sito è un fattore determinante nel posizionamento

Matt Cutts, responsabile SEO per Google ne parla diffusamente nel suo blog, ed anche Google rilascia un post ufficiale sul proprio blog.

Ho sempre tenuto molto in considerazione la velocità di navigazione. Gestione della cache, ottimizzazione delle pagine, eliminazione delle tabelle dove non necessarie, grafica completamente tableless sono alcuni dei fattori che tengo in considerazione quando progetto e sviluppo un sito internet o una applicazione web.

Per il cliente è stato realizzato un CMS per permettergli di modificare a piacimento i testi del proprio sito e di inserire le fotografie delle proprie creazioni dolciarie. Il database utilizzato è SQLite.

Parte delle fotografie (brioches, produzione e pasticceria) sono state messe a disposizione dal fotografo professionista Matteo Zanardi.

Per il cliente è stato realizzato un sito principalmente statico con una gestione dinamica delle news in stile blog.

Il linguaggio utilizzato è C# (.NET) che si appoggia ad un database MySql.

Il progetto ha comportato l’implementazione di un sistema di gestione delle immagini in grado di creare anteprime in alta risoluzione. Purtroppo il sistema standard in .NET non permetteva infatti di ottenere anteprime di qualità accettabile per una corretta lettura di un testo manoscritto.

E’ stata inoltre realizzata una libreria che permette di creare un documento Adobe PDF partendo da un elenco di immagini. Questa libreria permetterà in futuro, di ricreare automaticamente il PDF del capitolo (sura) nel caso in cui una delle pagine venga modificata.