Quando il design viene concepito come un fine piuttosto che come tramite.

Niente di tutto questo sarebbe da vedere negativamente, personalmente sono sempre aperto a qualsiasi soluzione che metta in discussione alcuni preconcetti che possono crearsi nel nostro settore, ma il nuovo layout introdotto da Google è detto in parole povere orrendo (parere personale). Troppo bianco, troppo grigio, niente contrasto, niente distinzione tra gli tra i vari elementi, addirittura i link ora sono tutti neri (!).

Dal punto di vista di accessibilità e usabilità è un disastro completo e mi stupisco che con tutti i mezzi di cui Google dispone si finisca a proporre qualcosa del genere su larga scala.

L’espansione di un trend

Questo purtroppo è un trend che vedo espandersi, già da un po’ di tempo la Apple ha deciso di togliere completamente il colore a tutte le icone prima ad iTunes e poi alla nuova versione del suo sistema operativo, anche in questo caso minando la storica immediatezza che contraddistingue i suoi prodotti. Qui si pone un problema di base che andrebbe discusso: quando il design viene concepito come un fine piuttosto che come tramite.

In questo caso è stato realizzato qualcosa che da un punto puramente estetico può anche essere considerato come un buon esercizio di minimalismo sobrio applicato al web ma è anche vero che facendo ciò è stato completamente trascurato (involontariamente) l’obbiettivo principale alla base di questo restyling: aumentare l’usabilità dei propri prodotti.

Sarà interessante vedere in futuro cosa ne resterà di questo trend, se si rivelerà solo una momentanea digressione sperimentale o se darà il via ad un nuovo modo di concepire la comunicazione in cui l’elemento estetico e funzionale sarà sormontato dal puro contenuto senza nessun tipo di supporto.

Rapida soluzione per Google Reader

Nel frattempo per chi non riesce ad usare Reader ho preparato una soluzione veloce per far ritornare il colore ai link e aggiungere bordi ai vari articoli:

• Installare UserStyles (disponibile per Firefox e Chrome)
• Creare un nuovo stile
• Incollare il codice seguente
• Salvarlo e attivarlo

Spero possa essere d’aiuto a qualcuno.

CodeIgniter lo conosco come nome da anni e avevo letto molti articoli entusiasti tanto che l’avevo consigliato al mio sviluppatore di fiducia e grazie ad esso abbiamo realizzato qualche progetto davvero interessante ma non mi sono mai applicato seriamente  ad impararne le basi.

Mi accorgo solo ora di quanto tempo ho preso nel frattempo perché, da totale principiante quale che sono, impararne i concetti e caratteristiche principali è davvero alla portata di tutti.

Tutte le risorse che andrò a segnalare sono in inglese e gratuite, purtroppo in italiano non ho trovato niente di valido.

Ho iniziato con la serie di video realizzati da Jeffrey Way per Nettuts, tratta l’argomento in mondo molto semplice e comprensibile,   nonostante le tecniche che vengono insegnate non siano le più pratiche quando si vorrà realizzare qualcosa, pone le basi per poter comprendere la seguente serie di video tutorials.

Una volta padroneggiate le tecniche base si potrà affrontare una serie realizzata da Shawn McCool che davvero merità tutta la mia gratitudine perchè va a replicare parte di quello che avremo già imparato ma con un ottica professionale, quindi andando a creare del codice molto più mantenibile e riutilizzabile.

Studiata a memoria anche questa serie avrete tutte le conoscenze base necessarie per poter realizzare il classico blog con funzionalità ammnistrative come aggiungere/modificare/cancellare un articolo, aggiungere commenti per ogni singolo articolo, creare un sistema di accesso utenti, ecc.

I video tutorial di qualità si fermano qui, se vorrete proseguire potrete prima di tutto leggervi il manuale online (fatto stupendamente bene e completo di tutto) che vi darà una idea di fin dove ci si può spingere, non preoccupatevi se non capirete tutto subito, faccio anch’io fatica a comprendere certi concetti ma con un po’ di pazienza e una mano dalle risorse che segnalerò dis eguito e niente risulterà impossibile.

Nel caso di qualche dubbio ci sono 2 risorse che mi hanno davvero aiutato tantissimo (sono entrambe molto attive e mi è bastato cercare per trovare tutte le risposte alle mie domande):

• CodeIgniter Forum: il forum ufficiale e pieno di tutto, più focalizzato sui  consigli su come impostare al meglio una determinata funzionalità o procedura
• StackOverflow: anch’esso ricco di domande e risposte riguardanti questo framework, potrete trovare le risposte a molte domande specifiche e dato che non è solo dedicato a CodeIgniter potrete trovare risposte anche più generali riguardanti PHP su cui in pratica CodeIgniter si basa.

Se siete interessati potrei potrei fare una piccolissima serie di articoli dedicati a CodeIgniter con spiegate le caratteristiche (cos’è un framework, cos’è un modello mvc e come si usa, quali sono i requisiti per iniziare a realizzare un sito).

Per ora è tutto, se avete qualsiasi tipo di domanda chiedete pure attraverso i commenti.

Meglio metterlo in chiaro perché alcuni degli esempi che farò potranno sembrare di una banalità imbarazzante a chi nel codice ci sguazza.

Quanti hanno avuto una idea, magari buttato giù una grafica e poi si sono bloccati nella fase della realizzazione, cosa fare? Pagare uno sviluppatore sperando che sia competente e onesto, oppure cercare un collaboratore che creda nel tuo progetto e che sia disposto a metterci il proprio tempo per realizzarlo avendo però diritto di parola (giustamente), con il rischio che per una divergenza di opinioni su qualche particolare l’intero progetto affondi?

Mi sono trovato in questa situazione parecchie volte e ogni volta la voglia di imparare seriamente a sviluppare si intensificava ma ogni tentativo durante gli anni finiva inevitabilmente in un buco nell’acqua, stavo per mettermi il cuore in pace e in un certo senso rassegnandomi alla realtà che certe persone proprio non sono tagliate per certi mestieri, io non ero fatto per fare lo sviluppatore.

Il problema principale è che molti scrivono guide e manuali non prendono mai in considerazione chi proprio non ha neanche le basi per comprendere una logica alla base dei discorsi che fanno, figuriamoci il funzionamento del codice che stanno spiegando.

A volte un corso per principianti non parte affatto dal principio con l’unico risultato di essere fondamentalmente inaccessibile al target di riferimento: i poveri principiati.

Programmazione ad oggetti, array multidimensionali, modelli mvc… che confusione!

Sembra che partono dal presupposto che certe nozioni siano talmente banali da essere sciocco ri-spiegarle quando magari sono la chiave di tutti i dubbi che potrebbero sorgere, se proprio non vuoi spiegarlo almeno segnala una risorsa/libro/tutorial approvata dove poter guardare.

Poi una sera mi sono detto: forse è un problema di approccio… tutorial e libri non fanno per me, così ho iniziato a cercare qualche bel video tutorial dove si sente una persona che spiega e che inevitabilmente (speravo) sarà a portata a dire molto di più di quando avrebbe scritto se avesse realizzato un tutorial classico, passati un paio di video che rientravano perfettamente nel discorso del paragrafo precedente risultando addirittura ancora più confusi sono finito sulla serie di video tutorial di Nettuts.

Probabilmente gli anni di theming di Wordpress hanno aiutato ma in quel momento qualcosa ha fatto clic e quello che prima mi pareva russo ora almeno riuscivo a vederci una logica comprensibile. Succede a tutti prima o poi quando si è motivati ad imparare qualcosa, basta affrontare il problema dal lato giusto e sembra che tutto poi si metta a fuoco da solo e ci si domanda come facevamo prima a bloccarci su un determinato concetto.

Dopo essermi fatto una overdose con tutti i video messi a disposizione ho iniziato a fare qualche test e tutto funzionava! La mia prima query vera e propria, vedere comparire una riga nel db, con i campi che io avevo deciso, informazioni che avevo inviato con un form che io avevo creato e che in qualsiasi momento avrei potuto modificare, adattare e correggere.

E’ stato come se si fosse aperta una nuova porta, finalmente la sensazione di libertà che stavo ricercando da tempo e che in qualche modo stavo raggiungendo.

Sono comunque ben lontano dal padroneggiare tutte le funzionalità che mi sono state messe a disposizione, quello che ho realizzato ora è poco più di un “compitino” con un’applicazione pratica, ma direi che ora è solo questione di tempo, una volta entrati è come in un circolo vizioso, più impari più aumenta la voglia di proseguire ed espandere la propria conoscenza.

Questo non vuole assolutamente essere un articolo di autocompiacimento ma un messaggio di speranza per tutte le persone, che come me, provengono da un altro background e che non vogliono essere più dipendenti da nessuno quando si tratta di realizzare un proprio progetto, non mollate e tenete duro, se proprio non riuscite, fermatevi e provate a cambiare approccio o linguaggio.

Nel prossimo articolo segnalerò come mai ho scelto CodeIgniter e che risorse spulciare per imparare in fretta e bene le basi che servono per iniziare.

Grazie al framework CodeIgniter ho potuto realizzare una perfetta replica di ciò che era in meno di 2 settimane, alla fine della terza avevo aggiunto anche il sistema di gestione utenti e un pannello dashboard/admin, notifiche via email automatiche e possibilità di modifica degli annunci.

Niente di assurdo, anzi, direi che di strada ne ho ancora moltissima da fare ma come scriverò in un articolo seguente tutto ciò che serve all’inizio è di imparare le base, cosa è necessario e quali sono le procedure classiche per realizzarlo nel modo più corretto possibile.

Il perchè ho scelto PHP deriva dal fatto che lavorando quasi tutti i giorni con Wordpress il passaggio ad un altro framework che utilizza la stessa nomenclatura e sintassi mi è stato più semplice. Esistono delle risorse incredibili dedicate ad esempio a Ruby, roba che PHP si sogna, e a quanto dicono è molto più comprensibile come codice ma ci ho provato e riprovato e sono giunto alla conclusione che o si è naturalmente portati o bisogna partire con una specie di lavagna bianca mentale, se hai già, negli anni, assorbito e metabolizzato la logica di funzionamento di un linguaggio non riesci a farne convivere due insieme, almeno questo penso sia applicabile a chi come me non nasce sviluppatore.

Per ora le funzioni essenziali su Webjob ci sono tutte e vi invito a provarlo, o riprovarlo, per farmi sapere cosa ne pensate, inoltre visto che ora non ho più le restrizioni che avevo prima ogni consiglio è ben accetto.

Partiamo dall’inclusione dei file necessari, in functions.php bisogna inserire:

In pratica $siteurl va a prendere l’url del blog, poi nella variabile $admin_css_url viene inserito il percorso al file admin.css contenuto nella cartella del template corrente.

Una volta fatto questo bisogna aggiungere il codice javascript per applicare tinyMCE alla textarea addizionale, sotto al link al css inserire:

Il codice non fa altro che inserire l’editor così come per il blocco content principale anche alla textarea, in questo caso con id “ingredienti”.

Ora però c’è bisogno, per evitare confusione o pasticci dal parte dell’utente, di limitare le scelte per la formattazione a quelle base (corsivo, grassetto, ecc.) perciò nel nostro file admin.css andremo ad aggiungere le classi dei suddenti pulsanti (ricavati usando tools come Firebug) e applicando un bel display:none, niente di più semplice.

Spero possa risultare di aiuto a chi come me vuole poter offrire non solo un buon lavoro per quando riguarda il front-end di un template ma anche una esperienza per i gestori del sito più naturale possibile.

Partiamo dal targeting della dimensione schermo per i dispositivi mobile (smartphone e tablet): il modo migliore per utilizzare uno stile specifico che vada a sovrascrivere parte di quello principale è di usare l’attributo @media nel css specificando le regole per poter essere applicabile (nel nostro caso la larghezza in pixel dello schermo).

Esempio tratto dal css di Helicon:

@media screen and (max-width: 1050px) { ... } /* Small Screens: < 1050px  */
@media screen and (max-width: 770px)  { ... } /* Tablet: < 770px  */
@media screen and (max-width: 480px)  { ... } /* Smartphone H: < 480px  */
@media screen and (max-width: 380px)  { ... } /* Smartphone V: < 380px  */

In questo caso il css è impostato in modo che abbia una struttura principale e successivamente 4 variazioni in base al supporto di visualizzazione, ciò ci permette di avere un layout semi-flessibile e adattabile, pratica che, secondo me, permette di mantenere una alta leggibilità e usabilità con il minimo di sforzo, a patto che tutto ciò venga preso in considerazione in fase di progettazione per evitare di avere una base che per sua stessa natura sarebbe difficilmente “frammentabile” come vedremo ora.

Questo è lo schema che ho preparato in fase di progettazione, ovviamente il layout di per se è molto semplice ma è l’esempio perfetto per dimostrare fin dove ci si può spingere con il riordinamento delle varie sezioni in base al supporto di fruizione.

Come potete vedere in questo modo l’utente ha prima di tutto un vantaggio enorme, non avrà mai bisogno di ingrandire un particolare elemento della pagina per poterlo leggere, la dimensione del carattere sarà sempre la stessa dal pc allosmartphone, così come i pulsanti ed ogni altro elemento manterrà la dimensione originale (con qualche variazione per i grandi schermi in cui entra in gioco una semi-flessibilità delle colonne laterali).

In un prossimo/i post spiegherò esattamente come ho fatto per Helicon a raggiungere un risultato prefisso nel progetto.

Per ora concludo qui questa che potremmo definire solo una introduzione ad un argomento a cui mi sono da poco interessato in modo serio ed effettivamente riserva molte più sorprese di quante mi aspettassi.

Mi piacerebbe sapere cosa ne pensate, qualcuno di voi ha già provato ad applicare il media screen per aggiungere un po’ di flessibilità ai propri lavori (anche senza spingersi fino alle versioni mobile)?

Realizzato in circa 4 sere penso sia la dimostrazione di quale incredibile passo in avanti sia il CSS3, se avessi dovuto exportare in immagini tutti gli elementi grafici presenti ci sarebbe voluto molto più tempo oltre che avermi obbligato ad utilizzare un software grafico per la preparazione di tutto il design prima di passare all’html, in questo caso invece Photoshop è stato utilizzato al minimo, solo all’inizio per fare una base e scegliere i colori, poi tutto il resto direttamente on-the-fly mentre preparavo il css.

Può sembrare complesso ma vi assicuro che è molto, molto, ma molto più veloce e semplice adottare questa pratica,  quando è possibile ovviamente, e capisco come grandi presenze web come 37Signals, tra i miei idoli, hanno smesso da tempo di fare prototipi/mokups su software esterni ma partono direttamente dal markup e seguono uno sviluppo più orizzontale migliorando e limando durante la fase di progettazione tutti gli elementi di un prodotto già utilizzabile e testabile allo stesso tempo.

Caratteristiche

• Completamente in HTML5 (grazie anche alla base H5 che ho usato come punto di partenza)
• 5 diverse disposizioni di colonne laterali ed elementi secondari in base alla larghezza dello schermo (vedere schema sotto)
• Utilizza solo 8 immagini in totale, per un peso complessivo di 100KB tutto il resto è ottenuto da CSS3
• Compatibile al 100% con tutti i principali browser, anche con IE* a partire dalla 7
• Ottimizzato per i motori di ricerca
• 2 Sidebar widget-ready
• Supporto customs menus per il menu di navigazione nella testata (header)
• Font personalizzato per i titoli – Miso

*Compatibile fino a quanto è possibile e supportato dal browser, ombre e angoli arrotondati sono esclusi anche se si vede ancora molto bene, l’unico problema è che non ho ancora trovato il modo di far funzionare il “@media screen” che uso per la personalizzarlo in base alla risoluzione perciò per ora è solo un tre colonne flessibile.

Demo:

E’ dipsonibile un vedere il  template in azione nella sezione Demo

To do

• Supporto dropdown menu  di Wp 3
• Supporto thumbnail di Wp 3
• Supporto pagina singolo autore
• Supporto adattamento per risoluzione su IE
• altro? qualche consiglio?

Changelog

27/01/2011 – Rilascio versione 0.1 di Helicon

29/01/2011 – Rilascio versione 0.2 di Helicon

• Aggiunta paginazione, risposta diretta e indentazione commenti
• Aggiunta funzioni aggiuntive a functions.php necessarie a Wp (content_width, post-thumbnails, automatic-feed-links, menus)
• Aggiunta post_class e comment_class
• Tolti shortags PHP

Download

Potete scaricare il template direttamnte da qui, Helicon 0.2.

Licenza

Questo template è distributo con licenza GNU General Public License (GPLv2).

In vista di un progetto futuro di cui saranno il punto cardine ho iniziato a rinfrescarmi un po’ la memoria e devo dire che è sempre una bella sensazione quando si impara qualcosa di nuovo perché lo si vuole e non perché si deve, e a tal proposito magari un giorno scriverò il mio punto di vista su quanto credo sia importante nell’ottica dell’esperienza utente incentivare il visitatore a (ri)scoprire un sito mosso da un interesse di tipo curioso più che da una necessità.

Sui siti mobile moderni si potrebbero scrivere svariati articoli su tutti i vari aspetti che li riguardano, dal punto di vista marketing/seo a quello sociale, ma per ora mi concentrerò forse sulla parte più generica legata allo sviluppo vero e proprio e ho buttato giù un paio di punti chiave che secondo me dovrebbero essere sempre tenuti bene a mente quando si cerca di sviluppare un sito del genere per poter sfruttare appieno le potenzialità extra che questo mezzo di comunicazione ha da offrire.

• Flessibilità

  Un sito mobile si deve adattare non solo ai vari orientamenti dello smartphone, orizzontale e verticale, ma deve anche alle variazioni di risoluzione. Mobile non è solo iPhone, attualmente vengono venduti più smartphone Android che iPhone*, ognuno con delle caratteristiche peculiari che devono essere prese in considerazione al momento dello sviluppo di un sito ottimizzato, dalla compatibilità a javascript a i nuovi standard html5 e css3. Ritengo perciò che prima di tutto un sito mobile debba essere flessibile per offrire una pari esperienza a tutti i possibili visitatori.

• Usabilità

  La grande rivoluzione che hanno portato gli smartphone sta nel aver costretto a ripensare alla navigazione di un sito internet senza l’utilizzo del mouse, ovviamente l’alternativa più logica in questo caso è stato l’utilizzo della pressione di uno o più dita sullo schermo ma non ha risolto completamente i problemi di usabilità che ne sono derivati. Non esiste la possibilità di mostrare informazioni aggiuntive passando il dito su un determinato elemento, molte azioni richiedono movimenti del dito simili con il rischio di click involontari e bisogna tenere sempre a mente che gli elementi devono essere a portata di dito, ciò che potrebbe essere facilmente cliccato con un mouse è possibile che sia troppo piccolo per un dito.

  Fortunatamente in questi ultimi anni gli smartphone sono diventati sempre più percettivi e “intelligenti” nel ricevere e tradurre i movimenti in azioni ma non sono ancora perfetti, gli schermi non aumenteranno di dimensioni perciò per un sito usabile bisogna prima di tutto crearlo avendo in mente che tutto deve essere a portata di dito sia come posizione che dimensione dei pulsanti o links, l’interfaccia grafica deve essere ben contrastata per sopperire alla qualità, a volte scarsa, di alcuni schermi di smartphone economici, utilizzare solo caratteri standard consigliati nelle linee guida ufficiali per evitare disparità con le altre sezioni dello smartphone oltre che per questioni di leggibilità.

• Microformati

  Il bello di uno smartphone è che hai tutto a portata di mano, telefono e internet, e ciò ci permette di adottare delle soluzioni per avvicinare i due mondi. In questo caso l’utilizzo dei microformati ci consente di inserire delle informazioni in una pagina che vengono comprese ed estrapolate dal software.

  Ad esempio, se visitiamo una pagina con che contiene un indirizzo di un locale, se questo è stato messo senguendo le direttive dei microformati, lo smartphone stesso riconoscerà quella parte della pagina con un indirizzo e proporrà se aggiungerlo nella rubrica, evitandoci di doverlo poi fare a mano. Un’altra possibilità è quella di vedere un numero di telefono ad utilizzare, ad esempio, per le prenotazioni ed essendo stato riconosciuto come tale basterà cliccarlo per avviare una telefonata, anche in questo caso risparmiandoci la noia di doverlo riscrivere.

  Ovviamente questi sono esempi semplici ma penso che bastino per dare una idea di quanto potenti possano essere i microformati, rendono gli smartphone che li supportano capaci di riconoscere determinate informazioni per poterle riutilizzare in modo molto più pratico.

• Geolocalizzazione

  Uno degli aspetti più interessanti e unici che possono aprire molto porte a siti innovativi ed estremamente pratici è la funzione di geolocalizzaizone che sempre più produttori stanno aggiungenti alla propria linea di smartphone. Tuttora è già possibile trovarla sulla maggior parte di apparecchi e ci consente di ipotizzare soluzioni in cui alla ricerca di un ristorante basterà accedere ad un sito internet e in base alla locazione rilevata consigliare i locali più vicini. Le applicazioni di una funzionalità di questo tipo sono molte e credo che in futuro tutto sara basato, a livelli di interazione, sulla geolocalizzazione.

Grazie anche a queste ricerce mi si è rinnovato un interesse, che negli ultimi anni si era fin troppo assopito, nella creazione di template pubblici per wordpress, saranno assolutamente gratis e mi i daranno modo di sperimentare e portare all’estremo tutto ciò che sto imparando.

Il primo esperimento che pubblicherò su questo blog l’ho chiamato Helicon ed è un template semi-flessibile in HTML5 e CSS3 che si adatta organicamente a tutte le risoluzioni, da 1240 a 320 pixel modificando la sua struttura per permettere sempre una lettura ed una navigazione agevole.

Perciò per i pochi superstiti che si sono dimenticati di togliere il feed di questo blog dai propri feedreader rimanete sintonizzati, conto su di voi per un po’ di feedback e magari qualche consiglio.