30 menu accordion con jQuery

Vi segnalo questo articolo di 1st Web Designer : 30 jQuery Accordion Menus, Tutorials And Best Examples

L'articolo riporta ben 30 diversi plugin jQuery per creare accordion verticali e orizzontali. Ricordo che per "accordion" si intendono quegli elementi "a fisarmonica", ovvero che cliccando su un titolo si apre il testo sottostante (o su un menu di primo livello si apre il relativo menu di secondo livello).

Leggi tutto...

Ispirazioni: 50 layout creativi con colori scuri

Vi voglio segnalare questo bell'articolo di Spyre Studios, che elenca ben 50 layout creativi con colori scuri: nero, grigio, marrone.

Ecco l'introduzione dell'autore:
I designs scuri sono i miei preferiti perciò ho sentito il bisogno di mostrare alcuni dei più belli della rete. Non sono solo creativi, accattivanti e interattivi, ma sono veramente diversi dalla maggior parte dei siti di oggi - dal design chiaro, pulito e minimale che ha occupato il centro della scena ultimamente, c'è qualcosa che si può dire ancora su un sito creativo che sia scuro e accattivante.

Link allo showcase: http://spyrestudios.com/50-kick-ass-and-creative-dark-web-designs/

Leggi tutto...

Pulsante Facebook "Mi piace" su Blogger

Come aggiungere l'ormai immancabile pulsante "Mi piace" sui post del proprio blog Blogger (blogspot.com) ?
Per Wordpress esistono dei plugin già belli pronti, mentre andando a spulciare nei widget di Blogger non si trova niente che faccia al caso nostro (a parte i pulsantini social attivabili nella visualizzazione dei post).

Ecco allora che in nostro soccorso arriva Dorian Carollo, con questo interessante articolo: http://posizioni-in-prima-pagina.blogspot.com/2010/05/facebook-il-pulsante-mi-piace-su.html

In pratica dobbiamo entrare nella nostra area amministrativa di Blogger, cliccare su Design > Modifica HTML, e quindi spuntare la voce "Espandi i modelli widget".

Cerchiamo il seguente blocco di codice:

<div class='post-body entry-content'>

<data:post.body/>

<div style='clear: both;'/> 

</div>

e subito sotto aggiungiamo:

<div class='facebook-button'>

<iframe expr:src='&quot;http://www.facebook.com/widgets/like.php?href=
&quot; + data:post.url + &quot;&quot;' frameborder='0' 
scrolling='no' style='border:none; width:450px; height:80px;'/>

<div style='clear: both;'/> 

</div>

Fatto! Possiamo modificare l'altezza (con 30px si vedrà solo a quante persone piace il nostro post, con più di 60px si vedranno anche le immagini dei profili di chi ha cliccato) e la larghezza, e aggiungere altri stili a nostro piacimento.

Grazie Dorian! :)

Leggi tutto...

Letture consigliate per gli sviluppatori e i progettisti web

Vi segnalo alcune letture che io stessa sto per iniziare:

- PHP. Le tecniche per scrivere il codice migliore. di MCINTYRE PETER
(su Hoepli: http://www.hoepli.it/libro/php/9788848125055.asp)

- Professional Php Design Patterns. di SARAY AARON
(su Hoepli: http://www.hoepli.it/libro/professional-php-design-patterns/9780470496701.asp)

- SEO POWER. di TAVERNITI GIORGIO
(su Hoepli: http://www.hoepli.it/libro/seo-power/9788820344597.asp)

- EMAIL MARKETING. di GORNI NAZZARENO, MAGLIO MARCO
(su Hoepli: http://www.hoepli.it/libro/e-mail-marketing/9788820341831.asp)

- S.E.O. Ottimizzazione web per motori di ricerca. di DAVIDE VASTA
(su Apogeo: http://www.apogeonline.com/libri/9788850328147/scheda)

Buona lettura :)

Leggi tutto...

Volete delle belle immagini gratuite? Ecco il mio consiglio.

Dopo avervi segnalato, un paio d'anni fa, quello che ritenevo essere (e per me lo è ancora) il migliore sito per immagini gratuite, vi voglio parlare oggi di PhotoExpress.com.

Questo sito tratta per la maggior parte immagini a pagamento dietro sottoscrizione di un abbonamento. Però c'è un però. E' sufficiente registrarsi, gratuitamente, per avere la possibiltà di scaricare ben 10 immagini gratuite al giorno, tutte di buona qualità.

Che dite, io la trovo una ottima opportunità per noi designers ;)

Leggi tutto...

Il nuovo metodo per il clear dei float

Qual è il vostro metodo per il clear degli elementi flottanti (stiamo parlando di CSS, non vi preoccupate!)?
Alcuni di voi useranno l'ormai consolidato div vuoto con proprietà clear:all;.
Altri useranno la proprietà overflow:hidden; nell'elemento contenitore.
Altri ancora magari non si sono mai posti il problema :)


Da qualche mese a questa parte è stata elaborata una nuova soluzione a questo annoso problema di noi poveri sviluppatori web, chiamata The New Clearfix Method.

Il clearfix hack, detto anche easy-clearing hack, è un utile metodo per il clearing dei floats. Questo hack funziona molto bene ma si rivolge a browser ormai obsoleti o sulla via del declino. In particolare, IE5 per Mac ormai è storia, e non c'è ragione di tenerne conto nel nostro metodo di clearing.

L'originale clearfix hack è questo:

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Il nuovo clearfix hack, proposto da Perishable Press, è il seguente:

/* new clearfix */
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/* End hide from IE-mac */

Tutte le spiegazioni a questo indirizzo: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

Leggi tutto...

6 nuovi slideshow in jquery che dovreste conoscere

Traduzione dall'articolo originale in inglese di Denbagus.net: http://www.denbagus.net/jquery-slideshow/

Gli slideshows sono diventati sempre più popolari nelle pagine web durante gli ultimi anni, la galleria di immagini e lo slideshow migliorano la user experience e rendono molto più divertente ed intuitiva la visualizzazione di immagini sul tuo sito.

Poichè il framework jQuery aumenta la sua popolarità di giorno in giorno, sempre più web developers sviluppano nuove idee creative.

Qui sotto trovate una collezione di alcuni nuovi plugin slideshow in jQuery che dovreste conoscere come i più creativi e versatili.

Supersized
Supersized è un plugin di jQuery che ridimensiona automaticamente le immagini di background alla dimensione del browser, pur mantenendo intatte le proporzioni dell'immagine, e facendole apparire una dopo l'alra come in uno slideshow. Nessuno spazio bianco in più, nessuna scrollbar: l'intera finestra del browser è riempita dall'immagine. E' leggero e funziona bene con Firefox, Opera, IE7 e IE6.

SimpleSli.de
Simplesli.de è uno slideshow jQuery semplice e leggero (4 kb compresso) che può mostrare qualsiasi contenuto HTML. E' fornito con alcune opzioni per la personalizzazione, tra cui la velocità di transizione, la larghezza dello slider e i colori.

jqFancyTransitions
jqFancyTransitions è un plugin jQuery che mostra le immagini come in uno slideshow, con alcuni effetti piacevoli. Supporta 3 tipi di transizione: onda, zipper e tenda, ma possono essere diversificati con la possibilità di settare le posizione e direzione delle animazioni.

ColorBox
ColorBox è un clone lightbox per jQuery, leggero (9kb) e con supporto per foto, gruppi di foto, slideshow, ajax, contenuti inline e iframe.

YoxView
YoxView è un plugin jQuery per la visualizzazione di immagini (stile lightbox) singole e multiple. Aiuta la navigazione in una lista di immagini grazie ai pulsanti "precedente" e "successivo", oppure come slideshow automatico. Supporta l'inserimento di più istanze del plugin, ciascuna con la propria configurazione.

Horinaja
Horinaja è uno script gratuito in due versioni: per scriptaculos/prototype o per jQuery. Mostra il contenuto di una lista non ordinata (ul) dentro ad un div. Lo script si avvale del support per rotellina del mouse che funziona solo quando il puntatore del mouse si trova sopra allo slideshow, per non bloccare lo scroller della pagina.

Nivo Slider
Nivo Slider è un plugin jQuery leggero che permette di creare uno slider di immagini veramente mostruoso! Questo plugin offre 9 effetti di transizione. Questo slider è semplice, pulito e validabile. Si possono visualizzare anche i pulsanti di navigazione per controllare le slides.


Consiglio calorosamente di dare un'occhiata almeno a SimpleSli.de e a Nivo Slider: meritano davvero!

Leggi tutto...

Alternative gratuite al font Helvetica

Traduzione dell'articolo di Bright Hub, scritto da Thursday Bram: http://www.brighthub.com/multimedia/publishing/articles/6081.aspx con l'aggiunta delle informazioni fornite dai commentatori.


Come trovare alternative gratuite al font Helvetica

Helvetica è uno dei caratteri tipografici più conosciuti. E' stato girato perfino un documentario, chiamato "Helvetica" sulle sue origini e usi. Ma se Helvetica non viene fornito assieme a uno dei vostri programmi di grafica, usare il font può costare un po' di soldini.

Helvetica è uno dei font utilizzati più comunemente, ma può essere costoso acquistarlo se non viene fornito con il tuo software di Desktop Publishing. Ma in giro ci sono alcuni font gratuiti che emulano molto bene lo stile Helvetica.

1) Coolvetica
Coolvetica è il clone più conosciuto di Helvetica. Ci sono alcune differenze però tra Helvetica e Coolvetica. La più evidente è che la 'q' e la 't' minuscole non riflettono la semplicità del carattere Helvetica. Questi cambiamenti sono stati adottati perchè creare una copia esatta di Helvetica e distribuirla avrebbe violato le leggi sul copyright. Ma la maggioranza di chi vede Coolvetica noterà che qualcosa è diverso dal solito - anche se non potranno puntare il dito su un dettaglio tipografico specifico.

2) Tex Gyre Collection
Nel pacchetto Heros della Tex Gyre Collection, è possibile trovare una replica molto buona e gratuita di Helvetica: http://www.gust.org.pl/projects/e-foundry/tex-gyre/

3) FreeSans
Un altro font gratuito e molto simile ad Helvetica.

4) Arial
Se usate Windows, probabilmente avrete già Arial installato sul vostro computer. Arial è virtualmente identico a Helvetica, a meno che tu non sia un tipografo pronto ad esaminare i dettagli, come ad esempio la coda della 'a' minuscola.
In base al tuo progetto grafico, Arial può fornire una facile risposta al tuo bisogno di Helvetica.

Leggi tutto...

Font gratuito: District Thin

Vi voglio segnale questo bel font gratuito di Phil's Fonts: District Thin.

Veramente un bel font, fornito in diversi formati: http://www.philsfonts.com/freefont.html

Leggi tutto...

55 font gratuiti di alta qualità

Dopo avervi parlato di Cufon, vi segnalo queste due raccolte.

La prima raccolta è curata da Web Design Ledger, e comprende 20 bellissimi font gratuiti: http://webdesignledger.com/freebies/20-high-quality-free-fonts-for-designers.

La seconda è proposta da Design Tutorial 4 U ed elenca ben 35 font per rendere i vostri design veramente superlativi: http://designtutorials4u.com/35-super-crisp-and-clean-free-fonts-to-help-make-your-designs-great/

Leggi tutto...

Cufon: una alternativa per visualizzare font non di sistema

Dopo il fenomeno sIFR, ecco arrivare (già da un po', in verità) un'altro sistema facile ed indolore per utilizzare nel nostro sito web font non di sistema.
Chi lavora nel mondo del web design sa che i font di sistema sono quei font che si trovano nativamente in ogni sistema operativo, e che quindi sono installati nel 99% dei computer.
A questa famiglia appartengono:
- font serif (con le grazie): Times New Roman, Georgia
- font sans-serif (a bastoncino): Arial, Tahoma, Verdana, Lucida, Comic Sans (ormai sulla via del declino)
Una via di mezzo tra font serif e sans-serif è il Trebuchet.
Esistono poi altri font che vengono forniti con i sistemi Apple (ad es. Helvetica) e con i sistemi Microsoft (ad es. Calibri), ma non è detto che siano presenti in entrambi i sistemi (ad es. per Windows il font Helvetica è solo a pagamento).

Supponiamo di aver creato la nostra grafica con un bel font handwritten, ad esempio un Rolina (font gratuito - ma accertiamoci sempre che la licenza EULA per il font permetta il Web Embedding senza Adobe Flash)... come fare per mostrarlo correttamente nelle nostre pagine web?

La prima soluzione, quella adottata per anni, è di usare un semplice Image Replacement. Facile, non disturba i motori di ricerca... ma se dobbiamo modificare qualche parola, ecco che ogni volta ci tocca rifare l'immagine con il testo. Un po' scomodo.
La seconda soluzione è il conosciutissimo sIFR, per usare il quale serve comunque avere Adobe Flash.
C'è poi, per CSS 3, la possibilità di usare la nuova proprietà @font-face.

Però la soluzione che voglio illustrarvi oggi è quella con Cufon, e si basa tutta su javascript.

Ecco i semplici passaggi per usare il vostro font preferito nel sito:

1) Andate sul sito ufficiale: http://cufon.shoqolate.com/generate/
2) Selezionate il vostro font (nelle varianti regular, bold, italic e bold italic) ATTENZIONE! Su windows dovrete prima copiare i vostri file font in una cartella diversa da Windows/Fonts.
3) Compilate il resto del modulo e salvate il js che otterrete all'interno del vostro sito.
4) Scaricate l'ultima release di cufon: http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i (alla data attuale) e salvatela all'interno del vostro sito
5) Collegate i due js alla vostra pagina, e indicate nella funzione Cufon.replace() gli elementi che dovranno essere scritto con il vostro font (esempio qui sotto).
6) FINITO! :)

Esempio:
<script type="text/javascript" language="javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" language="javascript" src="js/Rolina.font.js"></script>
<script type="text/javascript">
Cufon.replace('#titolo', {hover: true});
</script>

Leggi tutto...