Blog su Wordpress, Web Design, Web Development e Seo

Nuova e fantastica raccolta delle icone più belle per i social network più famosi.

Ormai diffusissimo, l’ effetto Page Peel è effettivamente molto utile per sfruttare poco spazio ma avere un’ ottima visibilità.

Quasi sempre lo si vede in flash, ma oggi vi presento la versione jQuery + Css.

Il tutto funziona con IE7, io l’ ho testato su Firefox , Chrome e Opera, versioni varie, e non dà nessun tipo di problema.

Qui potete scaricare tutto il codice.

L’ installazione è molto semplice:

• Bisogna scaricare le librerie jQuery e jQuery UI
• Creiamo poi una cartella che chiamaremo ad esempio turn
• Inseriamo nella nostra pagina il codice

• Aggiungiamo l’ immagine che resterà sempre almeno parzialmente visibile

• Infine la funzione che genera l’ effetto, inserendo prima di il codice

Lo script può essere facilmente personalizzabile, modificando il codice:

// Default awesomeness
var defaults = {
directory: 'turn', // La directory che contiene le librerie
javascript
side: 'left', // destra o sinistra
turnImage: 'fold.png', // l' immagine a forma di triangolo
maxHeight: 400, // La massima altezza
startingWidth: 80, // Larghezza iniziale
startingHeight: 80, // Altezza iniziale (these should probably
be camelCase, d'oh.)
autoCurl: false // Movimento automatico o manuale
};

Ci sarà sicuramente capitato almeno una volta di dover mettere su una pagina di coming soon, detta anche in costruzione o under costruction, per un sito ancora in fase di realizzazione.

Ce ne sono in giro tante, alcune davvero orrende, risalenti ad anni fa, magari i lavori sono iniziati e mai finiti.

Altre invece sono davvero belle, molto particolari magari.

Se non avete tanto tempo e dovete costruirne una potete fare un salto su LaunchSplash.

Su LaunchSplash trovate un pò di template per costruire una pagina provvisoria.  Io ho provato a realizzare qualche esempio:

I template sono carini e anche particolari, prevedono anche la registrazione ai feed. Per vederli tutti però occorre registrarsi e solo per gli account premium sono disponibili tutti.

Oggi ho trovato Solucija, e volevo appuntarmelo e segnalarlo ai lettori del blog.

Mette a disposizione più di 30 template gratuiti. Leggeri e tuti liberamente utilizzabili per siti commerciali e non.

Sono tutti ottimi template, si possono utilizzare come ispirazione, modificarli oppure utilizzarli così come sono.

A partire dalla versione 2.5 WordPress integra i gravatar.

Per chi non sapesse cos’è un gravatar: Gravatar.com. Registrandovi al sito e inserendo il vostro avatar, la vostra immagine verrà associata all’ indirizzo email con cui vi registrate e vi seguirà ovunque la funziona gravatar sia supportata.

Belli gli avatar per dare un volto o un’ immagine ai commentatori di un blog ad esempio.

Per aggiungere i gravatar al vostro tema basta aggiungere questa riga di codice in comments.php:

ovviamente laddove volete visualizzare l’ avatar, in genere prima del nome del commentatore, ovvero prima di

Il numero “50″ sta ad indicare la dimensione in pixel dell’ immagine che potete modificare a seconda delle esigenze.

Poi visto che ci siamo diamo un tocco in più ai nostri commenti, aggiungendo non solo l’ avatar ma anche un simpativo effetto mousehover: l’ opacità. L’ avatar sarà opaco ma si schiarirà al passaggio del mouse.

Per ottenere questo effetto, che raramente “stona”, basta aggiungere nel file style.css il seguente codice:


/*stile per gravatar*/
img.avatar {float:left; margin-right:5px; border:solid; border-color:#fff;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
-moz-opacity: 0.4;}
img.avatar:hover {float:left; margin-right:5px; border:solid; border-color:#fff;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;}


Abbiamo così aggiunto un bordino bianco alle nostre immagini e l’ effetto opacità!

A volte capita che bisogna mettere on line un sito troppo in fretta per creare una grafica da zero. Ci sono molti siti da cui è possibile scaricare template gratuiti, completamente modificabili e adattabili alle proprie esigenze e buona parte offre una grafica di buona qualità. Ma vediamo quali sono le risorse migliori:

	Offre suddivisi per categoria templates in html e in flash e inoltre banner e loghi. Molto valida come risorsa.
	Questo sito raccoglie al momento ben 2080 template da scaricare gratuitamente. Anche qui vale la pena farsi un giro.
	Qui c’è un pò di tutto. Template in html e in flash. Temi per WordPress, Blogger e MySpace. Buona la qualità e buona anche la scelta.
	Qui ce ne sono di validissimi. Molti non hanno nulla da invidiare a template venduti per 50-60. Tutti gratuiti e pronti per essere scaricati.
	Anche qui molto belli e ben fatti, in html, flash e css.
	Anche questo da vedere. Molto consigliato.

Per ora credo che questi bastino…C’è davvero tanta scelta e la qualità è molto alta. Ed è tutto gratis!

Belle le favicon, principalmente credo siano state inventate per caratterizzare meglio un url. Non più solo caratteri ma un’ immagine molto più facile da ricordare.

Molti siti offrono tool per realizzarle direttamente on line. Oggi mi è capitato di crearne una: la mia.

Ho trovato di ottima qualità quelle restituite da html.kit:

FavIcon from Pics. Inoltre permette anche di creare una favicon animata in formato gif e prima di scaricare possiamo vedere entrambe le favicon in anteprima nel browser.

Lo stesso sito offre anche la possibilità di creare le Buddy Icon, emoticon per messenger.

Un altro tool interessante se andate di fretta e volete dare un effetto particolare ad un’ immagine è Image Embellisher, per trasformare una foto in un cubo, cilindro, sfera e qualcos’ altro.

I gradienti sono uno degli aspetti più importanti da considerare durante lo sviluppo di layout in stile Web 2.0. Il sito dezinerfolio.com ne mette a disposizione ben 130. Dopo averli scaricati (Link alla fine del post) per utilizzarli basta fare doppio click sul file!

Download

Ho installato anch’ io questo script tanto carino e anche molto utile… AdivorPeel, per arricciare la pagina nascondendo l’ angolo con pubblicità o altro link.

Questo il link per il download. La password è adivorblog.

Per installarlo su wordpress, aprite il file PagePeel,js, alla riga 5 trovate

sostituite a www.miosito.it l’ indirizzo a cui volete far linkare la pagina sottostante.

Modificate le immagini che trovate nella cartella images a vostro piacimento e caricate tutta la cartella pagepeel nelle directory principale del vostro blog (Attenzione: non nella cartella del template)

Poi inserire nel file header.php del vostro tema dopo il tag body. Dove in src=”…..” va inserito il percorso esatto dello script.

E questo è tutto per avere questo bello effetto.

Io l’ ho installato su WordPress ma ovviamente funziona con qualsiasi pagina.

.

Realizzato un nuovo template con Photoshop: