Vi segnalo un progetto davvero interessante del designer Dan Eden che ho appena scovato sul web: Animate.css. Si tratta di un file CSS che presenta una serie di animazioni (CSS3 naturalmente) precreate dall’autore che potete utilizzare nei vostri progetti senza perdere tempo nello scriverle. Davvero un must-have per ogni webdesigner!

WordPress blank theme

I black themes, o anche naked themes, sono temi ridotti all’osso: contengono solo il minimo indispensabile per far si che il tema funzioni. Quindi possiamo ben districarci nel codice per poterlo personalizzare come meglio vogliamo e per poterci scrivere su il codice del nostro blog.

Personalmente sto provando WordPress Naked e mi sto trovando piuttosto bene. Ve ne segnalo anche una versione ottimizzata con codice HTML5.

WordPress codex

Forse è fin troppo scontato: ogni sviluppatore che si rispetti deve tenere sempre in massima considerazione la documentazione ufficiale riguardante ciò che sta sviluppando. WordPress codex descrive meticolosamente tutte le funzioni e le possibilità che WordPress offre in modo chiaro e ricco di esempi.

WordPress hack

Siamo giunti al punto in cui il nostro tema WordPress è quasi completo, ma vogliamo realizzare una o due cose che non troviamo in alcun modo nella documentazione ufficiale. Probabilmente dobbiamo ricorrere a qualche espediente che solitamente viene definito come “hack”. Vi segnaliamo in merito un articolo di Smashing Magazine ed uno nostro riguardante gli hack più cercati sui commenti.

WordPress cheat sheet

Si tratta di veri e propri “formulari” salva-tempo per WordPress: immagini o file pdf dove vengono incluse e catalogate tutte le più ricorrenti funzioni di WordPress. Io vi consiglio quello di Ekin Ertaç: esaustivo e poco dispersivo.

Google

Ultimo,ma non di certo per merito, Google: di sicuro la risorsa che vi permetterà di trovare ed esaudire qualsiasi vostra necessità!

Nelle settimane scorse, sono stato impegnato nella creazione del sito BattistiNews.it, un nuovo ed importante punto di riferimento italiano per il mondo battistiano. Durante la fase di realizzazione, ho pensato che sarebbe stato davvero molto simpatico poter rendere una sorta di vibrazione al passaggio sulla figura del grande Lucio. Quindi ho iniziato a provare varie soluzioni e sono infine giunto a quella che sto per proporvi, utilizzando jQuery.

Ci serviremo del plugin creato da Andreas Lagerkvist che potete scaricare cliccando qui. All’interno del codice, andando alla riga 42, possiamo personalizzare i parametri di durata, frequenza, velocità ed espansione come meglio crediamo.

Infine ci basterà inserire questo piccolo script che richiama il plugin, ed il gioco è fatto!

jQuery("#il_tuo_div").mouseenter(function(){jQuery(this).vibrate();});

HoverAttribute permette al passaggio su un link che questo cambi il suo contenuto, per mezzo di un’animazione molto carina e gradevole, con quello di uno dei suoi attributi (href, title, alt, ecc).

Ritengo che il suo utilizzo, però, debba essere limitato per non influire sulla leggibilità dei contenuti; un efficace utilizzo potrebbe essere, ad esempio, quello sui link di download per un tutorial.

Per vedere il reale funzionamento di HoverAttribute e per scaricarne tutti i file vi rimando al link originale dell’autore Alexander Wallin.

In questa breve guida, infatti, voglio mostrarvi un semplice modo in cui poter ottenere un effetto ingrandimento all’hover di un’immagine. Bisogna precisare, che mostreremo una tecnica valida solo con i browser webkit (Safari, Chrome). Clicca qui per vedere la demo, mentre qui per scaricare il tutorial.

Per prima cosa, inseriamo all’interno del file html la nostra immagine attribuendole la classe “img” ed un collegamento (comunque non indispensabile):

<a href="#"><img src="1.jpg" class="img" alt="" /></a>

Nello css del nostro documento, invece, attribuiamo uno stile alla classe img:

.img{
//impostiamo un arrotondamento ed una ombra alla nostra immagine per renderla più accattivante
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 4px 3px rgba(0,0,0,0.4);
//posizioniamola al centro
	display: block;
	margin: 20px auto;
}

Ed infine scriviamo le poche righe di codice CSS3 che ci servono per animare l’immagine al suo passaggio con il mouse:

.img:hover{
//con -webkit-transform modifichiamo la grandezza della nostra immagine rendendola piu grande
	-webkit-transform: scale(1.2);
//infine con -webkit-transition dichiariamo quale valore va animato (quindi webkit-transform), quanto tempo debba durare la nostra animazione (0.2s) e di che tipo debba essere (linear).
	-webkit-transition: -webkit-transform 0.2s linear;
}

<html>
	<head>
		<title>Effetto ingrandimento con CSS3 - Artedelweb.it</title>
		<style>
		.img{
			-webkit-border-radius: 5px;
			-webkit-box-shadow: 0 4px 3px rgba(0,0,0,0.4);
			display: block;
			margin: 20px auto;
		}
		.img:hover{
			-webkit-transform: scale(1.2);
			-webkit-transition: -webkit-transform 0.2s linear;
		}
 
		</style>
	</head>
 
	<body>
			<a href="#"><img src="1.jpg" class="img" alt="" /></a>			
	</body>
</html>

Anche voi state sviluppando, o avete mai sviluppato, un tema per WordPress? Se la risposta è positiva, allora saprete senza dubbio quanto sia importante gestire e potenziare al meglio i commenti di un tema. E spesso, si perde molto tempo nel cercare guide e tutorial che mostrino come fare una o un’altra cosa perchè non si è espertissimi della piattaforma WordPress. Oggi, quindi, vi segnalo i 10 hack più cercati per la personalizzazione dei commenti di un tema!

Colori alternati per i commenti

Questo semplice hack permette di alternare il colore dei commenti, o ancora, alternare stili css differenti.

Diverso stile per i commenti dell’admin

Davvero utile questo tip che permette di evidenziare in maniera differente il commento dell’admin.

Numerazione dei commenti

Una buona soluzione per chi vuole numerare i commenti. Sono disponibili anche molti plug-in per i meno esperti su WordPress.org.

Aggiungere pulsanti rapidi di azione

Utile guida che mostra come poter eliminare o segnalare come spam un commento senza dover accedere al pannello di controllo.

Separare i trackbacks dai commenti

I link di ritorno, o trackbacks, a volte possono essere fastidiosi. In questa guida viene mostrato come separarli.

Usare l’avatar di Twitter nei commenti

Per un motivo o per un altro, si può preferire di utilizzare l’avatar di Twitter al posto del famoso Gravatar, nella visualizzazione di un commento.

Paginare i commenti

Specialmente con blog molto famosi che hanno una grande mole di commenti, avere un plug-in per impaginarli è davvero indispensabile!

Mostrare i commenti recenti

Senza dover ricorrere a dei widget, questo utile codice mostra i commenti recenti.

Mostrare gli articoli più commentati

Questo codice mostra gli articoli più commentati entro un determinato lasso di tempo.

Invertire l’ordine di visualizzazione dei commenti

Di default WordPress mostra i commenti più recenti in basso. Se volete invertirne l’ordine, non vi basterà che seguire questa semplice guida!

Apriamo Photoshop, creiamo un nuovo documento (30x30px) e riempiamo lo sfondo di un blu scuro (#202847).
A questo punto attiviamo la griglia (Cmd o Ctrl + ‘), ci rechiamo nelle preferenze di Photoshop (Cmd o Ctrl + K) e impostiamo i valori della griglia come segue.

Il nostro documento si presenterà così, ora:

In prossimità del quadratino centrale, creiamo un ellissi di un blu leggermente più scuro (#03081b). E ne applichiamo questo stile livello:

Duplichiamo 4 volte la nostra forma, e posizioniamo le 4 copie come in figura:

Infine uniamo tutti i livelli (Cmd/Ctrl + Shift + E), e con lo strumento ritaglia riduciamo la zona del nostro documento. Infine salviamo in formato JPG.

Il nostro pattern è pronto! Ora, iniziamo a scrivere le prime righe di codice CSS. Naturalmente, applicheremo lo sfondo ripetendolo orizzontalmente e verticalmente.

body{
	background:transparent url(pattern.jpg) repeat;
	margin:0;
	padding:0;
}

Inoltre, creiamo un div con nome “light”. E’ qui, che grazie al CSS3, applicheremo un gradiente radiale che scurirà leggermente i margini della nostra pagina e renderà tutto più accattivante!

#light{
	background-image:-webkit-gradient(radial, 50% 40%, 700, 50% 40%, 0, from(rgba(0, 0, 0, 0.898438)), to(transparent));
	background-image:-moz-radial-gradient(transparent, #000);
	height:100%;
	position:absolute;
	width:100%;
	}

E infine, ecco le poche righe di HTML che ci servono:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Artedelweb.it- Come creare un attraente sfondo con CSS3</title>
<link rel="stylesheet" href="style.css" type="text/css" /> 
 
</head>
 
<body>
<div id="light">
</div>
</body>
</html>

Vi ricordo che, per vedere una demo del tutorial potete cliccare qui, mentre da qui potete scaricare i files utilizzati!

Un metodo estremamente semplice da utilizzare, e cosa ancora più interessante, compatibile con la maggior parte dei browser (si, anche IE 6). Si affianca a Google Font Api, la Google Font Directory all’interno della quale sono presenti i fonts messi a disposizione e che in breve tempo, a quanto pare, aumenteranno.

Il primo è CSS Type Set, un’ottima utility per la scelta e la personalizzazione del testo che dispone anche della maggior parte delle funzioni utilizzate dai designers.

Il secondo è CSSDesk, che mette a disposizione una vera e propria scrivania di lavoro nella quale possiamo testare tutto il codice che vogliamo e averne un’istantanea preview.

Come potrete ben notare dal titolo, oggi vi segnaliamo Nivo Slider, uno tra i migliori slider di immagini realizzato in jQuery. Perchè scegliere proprio Nivo Slider? Gli elementi che lo contraddistinguono sono la semplicità d’utilizzo, l’ottima qualità delle animazioni, e soprattutto il peso. Infatti la versione compressa pesa meno di 6kb, in modo tale da non influire fortemente sul caricamento della pagina. Un altro punto a suo favore è la compatibilità con i browser; infatti supporta IE 7+,  FF 3+, Chrome 4, Safari 4 e Opera 10.5.
Non vi resta che provarlo inserendolo in qualche vostro nuovo progetto per garantire, così, una certa dinamicità ed un tocco di stile in più. Per maggiori informazioni e per il download dello slider potete consultare il sito ufficiale.