I primi strumenti per il web designer sono carta e matita, che permettono di annotare rapidamente le idee senza gettarsi subito su Photoshop. Il foglio bianco però non ci da l’idea delle dimensioni precise e dell’aspetto generale all’interno del browser.
Per questo ho realizzato una semplice cornice da stampare, grande quanto una schermata a 1024×768 e con un’utile griglia 10×10 pixel. In questo modo è possibile avere un riferimento che ci permette di essere meno approssimativi.
Spero possa tornarvi utile nei colloqui con clienti o nelle riunioni del vostro team!

Guardando i video degli interventi al FOWD di New York ho trovato molto interessante quello di Dan Mall, che esplora il concetto di progressive enhancement in un senso più ampio, aggiungendo ai concetti classici di content, style e behaviour l’elemento experience, e cioè l’aspetto più emotivo.

In quest’ottica infine mostra come Flash possa essere un elemento importante che può contribuire a tutti i livelli di separazione, non solo a quello estetico, mantenendo sempre valido il concetto di progressive enhancement.

Potete seguire il video all’indirizzo:
http://www.viddler.com/explore/carsonified/videos/105/
Mentre le slides sono disponibili qui:
http://www.slideshare.net/danielmall/the-experience-layerfowd-nyc-08-presentation

Visitando il sito Apple Store è possibile vedere all’opera un interessante funzionalità che permette lo zoom delle foto direttamente nel loro spazio, senza aprire fastidiosi popup.

Grazie a jQuery e la sua estensione jQuery UI è possibile realizzare il medesimo effetto in maniera semplice. In particolare andremo ad utilizzare il plugin "draggable" di jQuery UI.

Demo

Read more »

Il formato grafico PNG è estremamente interessante. La possibilità offerta dal supporto alle trasparenze è sicuramente la caratteristica più utile. Purtroppo solo gli ultimi browser supportano questa proprietà, e in particolare soltanto a partire da Internet Explorer 7 per quanto riguarda il browser di Microsoft.

Esiste comunque la possibilità di abilitare le trasparenze PNG anche per Internet Explorer 6 e precedenti attraverso vari plugin basati su javascript. In certe occasioni però l’effetto potrebbe servirci per solo un’immagine ed andare ad aggiungere javascript per così poco può essere superfluo.

In realtà tramite CSS e commenti condizionali possiamo intervenire utilizzando le stesse tecniche utilizzate dagli script javascript disponibili. E’ infatti possibile utilizzare i filtri inclusi in IE, in particolare "AlphaImageLoader", per ottenere il medesimo effetto.

Read more »

In questo passaggio del tutorial a CodeIgniter vediamo finalmente l’elemento del framework che si occupa della logica dell’applicazione, e cioè il controller. Come vedremo questo elemento è quello che viene eseguito direttamente dall’utente ed è ciò che mette in comunicazione i dati (e cioè i modelli) con l’output (le viste).

CodeIgniter infatti, tramite la classe Routing, si occupa di leggere l’URL digitato e indirizzare all’apposito controller il metodo da eseguire. Ad esempio, digitando l’indirizzo http://www.dominio.com/index.php/nome_controller/nome_metodo/ CodeIgniter andrà a richiamare il controller nome_controller ed eseguirà il metodo nome_metodo. Se invece viene omesso nome_metodo verrà richiamato il metodo di default chiamato index.

Read more »

Il footer, per definizione, è quell’elemento che chiude la pagina e si pone alla fine dei contenuti. Quando però il contenuto è più corto dello spazio disponibile a video - il viewport - il footer si “solleva” dal bordo inferiore della pagina, lasciando uno spazio più o meno grande al di sotto di esso. L’effetto in certi casi può essere poco gradevole, dando l’impressione di un layout “tagliato a metà”. Potete vedere qui un esempio…
Read more »

Grazie a questo articolo ho scoperto due software estremamente utili per webdesigner e sviluppatori.

Il primo, Sequel Pro, è un client desktop per gestire i database MySQL tramite un’interfaccia più comoda rispetto al consueto phpMyAdmin. E’ estremamente semplice da usare, basta inserire i dati di connessione e abbiamo subito la possiblità di visualizzare le tabelle, modificarne i campi, eseguire query ed esportare-importare dati da xml e csv. Potete scaricarlo al seguente indirizzo: http://www.mjmedia.com.au/sequel-pro.html.

Il secondo è invece è un’utilissima applicazione per effettuare screenshot dei siti web. Il funzionamento è semplicissimo. Basta inserire l’indirizzo della pagina e premere “Capture!”: il software si occupa di generare un’immagine dell’intero sito, dall’header al footer. Si chiama Paparazzi e si trova all’indirizzo http://www.derailer.org/paparazzi/.

E’ stata rilasciata il 23 ottobre la nuova versione di CodeIgniter, la 1.7.

La novità più rilevante è la nuova classe Form Validation che presenta diverse novità rispetto alla precedente.

In pratica viene semplificato e velocizzato il modo in cui si impostano i campi, le label e le regole. Anziché usare i metodi $this->validation->set_fields() e $this->validation->set_rules() si può utilizzare un unico comando per ciascun input — $this->form_validation->set_rules(NOMECAMPO, LABEL, REGOLA); — oppure impostare direttamente un array multidimensionale, per tutti i campi, in una sola volta. Ulteriore vantaggio è la possibilità di impostare le regole di validazione su un file di configurazione esterno, snellendo quindi il codice da usare nel controller.

Anche il codice lato vista, per visualizzare gli errori, beneficia dell’introduzione di appositi helper per visualizzare i messaggi di errore e per ripopolare il form. Anziché dover utilizzare i metodi $this->validation->nomecampo e $this->validation->nomecampo_error sarà sufficiente utilizzare le funzioni set_value('nomecampo') e form_error('nomecampo')

Per tutti i dettagli e le altre novità vi rimando alla pagina di annuncio e al relativo change log

Riprendo dopo qualche tempo il tutorial su CodeIgniter, dato che ho ultimato una prima versione preliminare dell’applicazione (molto scarna, ma rende l’idea). Potete quindi già testarne il funzionamento e seguire i prossimi tutorial direttamente sul codice finito.

L’installazione è semplicissima se avete un webserver php attivo con mysql configurato. Provate visitando l’indirizzo http://localhost/ (altrimenti esistono ambienti preconfigurati come XAMPP per windows o MAMP per macintosh molto facili da installare).

Innanzitutto scaricate il file contenente tutto il necessario: [Scarica]

Create poi una cartella (io l’ho chiamata “homeDB”) all’interno del vostro “localhost” (dove avete le cartelle dei vostri progetti in php, per intenderci) e scompattate all’interno il file zip. Quest’ultimo contiene, oltre al framework e all’applicazione, un file SQL per creare le tabelle necessarie (eseguite la query all’interno di phpMyAdmin o della vostra interfaccia MySQL preferita).

Ora non resta che modificare la configurazione dell’applicazione per adattarla al vostro ambiente. Per prima cosa aprite il file config.php all’interno di [vostraCartella]/system/application/config/ e modificate la riga $config['base_url'] = “http://127.0.0.1/homeDB/”; con la vostra cartella al posto di homeDB.

In secondo luogo bisognerà indicare i nuovi parametri di connessione al database. Per farlo aprite database.php nella stessa cartella e modificate in fondo alla pagina i parametri con quelli corretti.

A questo punto tutto dovrebbe essere configurato correttamente e dovreste già poter vedere l’applicazione funzionante visitando l’indirizzo http://localhost/[vostraCartella]. Potete creare qualche record fittizio per provare il tutto: vi suggerisco di partire dalle tipologie e dagli stati dato che sono campi obbligatori. Potete anche vedere, nell’inserimento degli articoli, la libreria Validation fornita direttamente da CodeIgniter (provate a creare un articolo vuoto).

Nei prossimi giorni vedremo gli altri elementi dell’applicazione, ovvero i controller e le viste, nonché l’utilizzo di helper e librerie.

Edit: ho messo on-line una demo di questo primo abbozzo di applicazione a questo indirizzo se volete provarla “dal vivo”. Mi raccomando non scrivete oscenità

Oggi ho realizzato un piccolo plugin in jQuery che ben si presta a fare da breve introduzione allo sviluppo di plugin per il famoso framework javascript.

Quello di cui avevo bisogno era un plugin per simulare il comportamento della pseudo-classe “focus” in modo da renderla compatibile con tutti i browser. Nella fattispecie quando ci si posiziona su un campo di input, a questo viene aggiunta una classe in modo da cambiarne lo stile. In questo modo si evidenzia all’utente il campo in cui sta operando favorendo l’accessibilità e l’usabilità.

Read more »