Buone feste

Come vi sarete accorti il blog è fermo da qualche mese. Nel frattempo ho avviato l’attività di freelance ed il tempo da dedicare al blog si è ridotto drasticamente. Sto preparando il nuovo sito personale, più completo e curato, che integrerà questo blog e portfolio dei lavori svolti. Vi do quindi appuntamento tra qualche settimana per tutti gli aggiornamenti.

Con l’occasione ringrazio tutte le persone che hanno commentato e che mi hanno espresso i loro pareri positivi sul blog, ed auguro a tutti
Buon Natale e Felice Anno Nuovo!

Nuovo acquisto – Canon 450d

canonOggi ho ricevuto la ma prima reflex, la collaudatissima Canon 450d con 18-55 IS in kit, la reflex entry-level di Canon per eccellenza.

Per qualche anno ho usato compatte, bridge e affini e mi sembrava il momento di fare il primo passo nel mondo della Fotografia con la F maiuscola.

Dopo mezz’oretta di utilizzo, eccitato come un bambino col giocattolino nuovo, ecco le mie impressioni a caldo, in ordine sparso…

Read more »

Google Maps API: “Calcola il percorso” nel nostro sito

Google Maps Directions

Come molti di voi sapranno Google mette a disposizione per la maggior parte dei propri prodotti una serie di strumenti per sfruttarne le potenzialità nei nostri progetti.
Google Maps non fa eccezione e ci fornisce tutti gli strumenti (API) per sfruttare le mappe di Google nei nostri siti tramite Javascript.

Una delle funzionalità più utili è quella di poter calcolare il percorso ottimale per raggiungere un determinato luogo, ottenendo tutte le indicazioni sulle svolte e sulle strade da percorrere. Non molti sanno che queste funzionalità sono a disposizione degli sviluppatori per integrarle nei propri progetti, ed è proprio ciò che faremo.

Demo

Read more »

Sfondi semitrasparenti in CSS

EsempioUna delle ultime tendenze del web è l’utilizzo di sfondi semitrasparenti. Per ottenere questo effetto non è sempre necessario ricorrere alle PNG trasparenti ma è possibile anche tramite i fogli di stile.

La proprietà che andremo ad utilizzare è l’opacità, che è possibile impostare tramite il parametro opacity: 0.5. Il numero, variabile da 0.0 a 1.0, indica il grado di opacità, dove lo zero corrisponde alla trasparenza e l’uno alla piena visibilità. Per impostare quindi uno sfondo semitrasparente è possibile utilizzare questa proprietà associata ad un colore di fondo. Non possiamo tuttavia utilizzarla direttamente nell’elemento che vogliamo rendere semitrasparente, perché l’opacità influisce direttamente anche sul testo, a scapito della leggibilità. Per risolvere il problema sono sufficienti un paio di DIV in più.

Demo

Read more »

Griglia stampabile

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!

Cornice browser

FOWD – The Experience Layer

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

jQuery zoom plugin

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 »

PNG Fix fai-da-te

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 »

Progetto Step by Step CodeIgniter – I Controller

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 »

Footer sempre in fondo

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 »

Pagina successiva »