Web Design Tutorials - jQuery, CSS, PHP, Wordpress

September 26th, 2011 | jQuery No Comments »

jQuery.inputfocus 1.2

E’ davvero tantissimo tempo che non scrivo più su questo blog. Impegnandomi a riprenderne la pubblicazione con frequenza, presento un aggiornamento di un vecchio plugin per jQuery che avevo rilasciato qualche anno fa: jQuery.inputfocus.

Grazie a questo plugin è possibile evidenziare i campi di input e le textarea quando si digita al loro interno. Se avete iniziato ad avere una certa dimistichezza con HTML5, in pratica, questo plugin realizza l’effetto placeholder introdotto nella versione 5.

March 28th, 2011 | CSS, Font 1 Comment »

CSS: ottimizzare la regola @font-face

In un articolo per Html.it mi sono occupato della regola @font-face che ci consente di inserire font personalizzati all’interno delle nostre pagine web.

Questa tecnica, nonostante ci consente di personalizzare maggiormento lo stile delle pagine, presenta alcuni svantaggi. Primo tra tutti quello di avere la necessità di effettuare un’ulteriore richiesta HTTP per caricare il font di cui abbiamo bisogno. Un possibile (semplificato) esempio di utilizzo del @font-face potrebbe essere il seguente:

@font-face {
 font-family: 'font_name';
 src: url('font_name.otf') format('opentype');;
}

Possiamo notare che all’interno della proprietà src andiamo ad inserire il path del font che vogliamo utilizzare; questo vuol dire che abbiamo bisogno di effettuare la richiesta HTTP per caricare il font.

March 26th, 2011 | Wordpress 4 Comments »

AnobiiWidget: widget WordPress per integrare aNobii sul proprio blog

aNobii è un social network tematico ideato esclusivamente per gli amanti della lettura. Fu inventato nel 2006 da una compagnia privata di Hong Kong. Il servizio permette agli utenti di catalogare la propria collezione di libri, valutarli, scrivere recensioni e discuterne con gli altri utenti. Il punto di forza principale di questo social network è quello di offrire agli utenti semplici meccanismi per creare velocemente una vera e propria collezione digitale di tutti i libri che avete letto. Il sistema sfrutta soprattutto i codici ISBN, formato internazionale per identificare univocamente un libro, e i relativi codici a barre. Anobii ha infatti mirato alla velocità e semplicità di identificazione dei libri creando addirittura apposite applicazioni mobile (sia per iPhone che per Android) che consentono, tramite la fotocamera del dispositivo, di scansionare il codice a barre di un qualsiasi libro che ci troviamo per le mani e, così facendo, il libro apparirà automaticamente nella nostra libreria virtuale aNobii.

In Italia gode di discreta fama sopratutto perché il sito è tradotto interamente in 15 lingue tra le quali figura anche l’italiano.

Il plugin

Il plugin che vi presento oggi è stato realizzato da un mio amico, Luciano Mammino, il quale ha rilasciato questa estensione per WordPress a titolo completamente gratuito e si è occupato di rilasciare la completa descrizione e guida all’installazione del plugin che leggete in questa pagina.

March 7th, 2011 | CSS No Comments »

CSS: preload di immagini più pulito con il CSS3

Capita spesso che si ha la necessita di pre-caricare delle immagini all’interno della pagina web in maniera da averle disponibili nel momento di bisogno. Ad esempio, se realizziamo un menu in cui al passaggio del mouse bisogna evidenziare la voce del menu con una diversa immagine di sfondo; se non pre-carichiamo le immagini, la prima volta che si passa il mouse sul menu non vedremo l’immagine di hover perchè bisogna ancora caricarla.

Per risolvere questo problema in rete ci sono centinaia di articoli che mostrano come pre-caricare le immagini senza dover ricorrere al Javascript ma con il solo ausilio del CSS. La tecnica è molto semplice, supponendo di avere 5 immagini da caricare, si realizzano 5 div all’interno della pagina che avranno come background le immagini in questione.

February 21st, 2011 | CSS, jQuery, Web Designing, XHTML 5 Comments »