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.

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)?

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.

Nulla. Semplice, chiaro e conciso.

Perchè nessun browser ha pensato di dare un supporto che vada oltre all’accettare i tag nuovi come validi, senza tale supporto a cosa si riduce tutta la rivoluzione dell’HTML 5: ad una manciata di tag nuovi. So bene che porta interessati vantaggi per l’inclusione di files. gestione form o salvataggio di dati in locale ma mi sto soffermando sul 90% degli articoli dedicati esclusivamente al markup

Personalmente sono favorevole all’HTML 5 come a tutti i cambiamenti ma non riesco a comprendere come si continui a scrivere e suggerire di adottarlo senza che esista ancora un supporto decente. Le sperimentazioni vanno benissimo, anch’io la versione precedente di CreativeBits l’avevo realizzata con questo linguaggio e mi stupisce come certi siti l’abbiano anche segnalato unicamente per questo motivo.

Ma in pratica cosa si sta chiedendo di fare per il passaggio da 4 a 5? Solo sostituire alcuni tag <div> con i corrispettivi tag nuovi, ad esempio:

• &lt;div id="header"&gt;

  diventa

  &lt;header&gt;
• &lt;div id="navbar"&gt;

  diventa

  &lt;nav&gt;
• &lt;div class="article"&gt;

  diventa

  &lt;article&gt;
• ..e così via, per vedere la lista completa potete guardare qui.

Trovo che tutto ciò sarà estremamente interessate una volta trovate delle soluzioni per meglio sfruttare questa divisione semantica del contenuto, mi piace vedere l’Html 5 come una versione potenziata dei Microformats che però sono dedicati solo ad una parte di informazioni mentre adesso si potrebbe pensare più grande come, ad esempio, allo sviluppo di  sistemi di catalogazione e ricerca di nuova generazione grazie ai tag dedicati che permetterebbero di focalizzarsi solo sul contenuto principale della pagina.

Ma la realtà attuale delle cose è che il supporto browser è scadente e c’è bisogno di un js dedicato solo per far digerire i tag nuovi a IE (senza dimenticare che anche Firefox 2 non legge l’html5 per colpa di un bug nel motore di rendering), i motori di ricerca con considerano minimamente i tag nuovi e non dimentichiamo la cosa più importante l’HTML5 è ancora in fase di stesura quindi non ci si può aspettare niente di definito per ancora qualche anno visti i tempi medi che hanno al w3c.

Ripeto: ottimo spunto per una conversazione, dei buoni propositi e un grande potenziale ma è davvero così necessaria questa corsa per essere i primi o alla fine è solo l’ennesimo espediente per farsi pubblicità facile?

Magari mi sbaglio o non sto vedendo il quadro generale e ho tralasciato qualcosa, cosa ne pensate?

Una griglia aiuta il designer a dare un ordine razionale agli elementi della pagina rendendola più comprensibile e leggibile.

Da qualche anno l’uso delle griglie è entrato nei monitor di molti web designer e, grazie a grandi esperti in questo campo come Mark Boulton e Khoi Vinh che hanno saputo diffondere questa pratica oltre i confini della carta stampata, finalmente si è iniziato a sviluppare interfacce per il web con una base tipografica.

Il concetto di griglia

Il concetto di griglia web per come viene di solito presentato si riferisce a delle colonne verticali (di solito 12 o 16, ma anche 6 o 4) a dimensione fissa con un margine tra loro di spaziatura. Ora come è evidente se la griglia è composta da sole colonne non si può definire tale in quanto richiederebbe anche una controparte orizzontale che sovrapponendosi creerebbe appunto la griglia vera e propria, questo però porrebbe forse troppe barriere alla creatività dei designer e si è deciso di trovare un accettabile compromesso iniziando ad adottare le sole colonne verticali.

La nascita dei frameworks

Come è logico pensare dato un input iniziale sono nate molte iniziative per semplificare la vita ai designer meno esperti per metterli comunque nella condizione di iniziare a fare pratica fornendo degli strumenti e delle risorse per saltare la fase di pianificazione, e quindi anche l’impostazione di una griglia, per passare direttamente alla parte grafica e, successivamente, in fase di realizzazione del markup HTML/CSS (il codice alla base delle pagine web) avendo già una base pronta con tutti i riferimenti e le dimensioni delle colonne senza dover perdere a crearle da soli e verificare che sia tutto compatibile con i vari browser.

Il bookmarlet

Se ne è discusso parecchio, soprattutto per quanto riguarda le basi già pronte e personalmente trovo che siano utili sono in pochissimi casi ma non voglio entrare entrare nel merito della discussione, oggi sono qui per presentarvi 2 semplici bookmarklet che ho preparato* e che sono sicuro vi aiuteranno quando vorrete testare il vostro sito per vedere se si è rispettata la griglia su cui era stata realizzata l’interfaccia.

Mi sono basato, come dimensioni, alla griglia oramai standard di 960.gs cioè per una pagina di 960px, a scelta suddivisa in 12 o 16 colonne con 20px di spazio tra l’una e l’altra. In pratica questi bookmarklet applicano in overlay alla pagina che si sta visualizzando con le colonne di colore rosso semi trasparente che sono fornite nel pacchetto. Ho aggiunto anche un leggero fondo bianco anch’esso semi-trasparente per far risaltare le colonne nel caso lo sfondo della pagina risultasse troppo scuro.

Trascinate nella barra dei preferiti i bookmarlet qui sotto e fate pure un test su CB per vedere subito come funziona.

12 Colonne 16 Colonne

* In realtà  non li ho scritti di mano mia partendo da 0, purtroppo non sono molto pratico di Javascript, ma sono un adattamento di un bookmarklet creato da Thomas Aylott che a sua volta ha preso ispirazione da un bookmarklet creato da Andy Budd quindi va a loro il merito, io ho solo sostituito quella griglia in stile photoshop a mio parere non molto pratica con le colonne fornite da 960.gs.

Non dovrebbero dare nessun problema anche se ho notato e non so come mai che su alcuni siti la griglia si ferma all’altezza della finestra quindi scorrendo la pagina l’overlay rimane fisso in alto e in altri siti invece arriva fino a fondo pagina, sapete dirmi il perchè?

Fatemi sapere nei commenti se vi è servito e se avete qualche suggerimento per renderlo ancora migliore.

Update (3/05): Non so come sia riuscito a perdermelo, eppure ho cercato per giorni una soluzione simile e sul sito di 960.gs non ce n’era traccia ma a quanto pare esiste già da qualche mese un bookmarklet, questa volta realizzato come si deve, che fa praticamente la stessa cosa e con molte opzioni anche se ha ancora qualche problema nel visualizzare le colonne colorate e in questo caso tornano utili i bookmarklet che avevo preparato, gridder.andreehansson.se.