Transitions con :hover

Ecco un tipico esempio di una transizione sul cambio colore di un elemento che si ha attraverso il mouse hover

a, a:link, a:visited {
color: lightblue;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-o-transition: color .4s linear;
-ms-transition: color .4s linear;
transition: color .4s linear;
}

a:hover {
color: white;
}

Questo animerà la transizione del colore quando si passa con il mouse sopra un link.
Passa sopra il mouse

Transitions con :active

L’utilizzo della pseudo-classe :active corrisponde a qualsiasi elemento che è in procinto di essere attivato. Il modo principale per cui un elemento viene “attivato” si ha attraverso il clic del mouse sull’elemento, o il mousedown.

Ecco un esempio CSS, inserendo delle transitions nell’elemento non attivo si simulerà una transizione anche nel mousedown. Se avessivo inserita solo nella pseudo class :active avremmo avuto un’animazione solo cliccando l’elemento.

.box {
    width: 300px;
    height: 300px;
    background: #ADC8D5;
    -webkit-transition: width 2s ease, height 2s ease;
    -moz-transition: width 2s ease, height 2s ease;
    -o-transition: width 2s ease, height 2s ease;
    -ms-transition: width 2s ease, height 2s ease;
    transition: width 2s ease, height 2s ease;
}  

.box:active {
    width: 500px;
    height: 500px;
}

Con questo codice, la larghezza e l’altezza del box aumentano quando si tiene premuto il mouse sull’elemento. Una volta rilasciato il click, il box torna alle sue dimensioni originali.

Ecco una demo

Transitions con :focus

È possibile utilizzare :focus per fare qualcosa di simile. Questa esempio mostra un form che si allarga quando vengono selezionati i box di input.

input, textarea {
    width: 280px;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
}  

input:focus, textarea:focus {
    width: 340px;
}

Ecco l’esempio

Questo aveva prodotto diversi contenuti doppi ed erano andati persi i pagerank sia delle vecchie che delle nuove url, esclusa comunque la homepage.
Il problema era stato risolto nel giro di 3 mesi inserendo nell’.htaccess dei redirect 301 dalle vecchie url alle nuove e eliminando attraverso il tool di rimozione di google webmaster quelle vecchie url che generavano contenuti doppi e altre directory come i risultati di ricerca o i tag, che erano divenuti eccessivi.

Per la rimozione di queste pagine google richiede, anzi richiedeva fino a poco tempo fa, di bloccarle anche attraverso il file robots.txt o inserendo il metatag noindex, io avevo utilizzato la prima soluzione, ma l’avevo poi sostituita con il metatag…

Dopo aver inoltrato 2-3 volte una richiesta di riconsiderazione a google, finalmente siamo usciti dalla penalizzazione.

Un paio di mesi fa google ci ha inviato una mail dicendo:

Messaggio: Googlebot ha riscontrato un numero estremamente elevato di link sul tuo sito. Ciò può indicare la presenza di un problema relativo alla struttura del tuo sito…

in questa mail veniva consigliato di non far scansionare a google alcune pagine inutili e dopo averlo fatto attraverso il robots.txt, è arrivata un altra mail

Durante il tentativo di scansione del tuo sito, è stato rilevato un aumento nel numero di URL che non siamo in grado di sottoporre a scansione a causa di una restrizione imposta da robots.txt.

che è un controsenso, ma in realtà dice solo che c’è un anomalia nella scansione del sito e che se quelle pagine sono state bloccate appositamente di non prendere in considerazione tale mail.

Nello stesso periodo c’è stato nuovamente il crollo delle visite, ovvero una seconda penalizzazione, questa volta però non era stata apportata alcuna modifica nè a livello grafico nè strutturale.
Visualizzando le statistiche di google webmaster tool erano presenti diversi errori di scansione: pagine 404, pagine non trovate, etc…erano anche presenti diversi suggerimenti html per tag title duplicati.

In seguito mi sono accorto che le pagine che erano state eliminate con il tool di google erano scadute! ossia non le bloccava più, infatti il blocco dura 3 mesi.
Il brutto è che una volta scaduti quei blocchi, non solo il bot ricomincia a scansionare quelle pagine ma riappaiono nei risultati di ricerca tutte le vecchie url che erano state eliminate (google le mantiene in un indice) e quindi url che ora non erano più esistenti, generando diversi errori.

In un primo tempo ho pensato di ribloccare quelle url tramite il tool, ma dopo 3 mesi si sarebbe potuto ripresentare nuovamente il problema.

Ho deciso quindi di correggere eventuali problemi e aspettare che google riscansionasse ed eliminasse le pagine non più esistenti.

Mi sono accorto che per le notizie eliminate utilizzavamo un redirect 302 verso la 404, costringendo il bot comunque a riscansionarle: lo abbiamo sostituito con un 404.
Sono state rimosse completamente url doppie che restituivano la stessa pagina finale e pagine dal contenuto di bassa qualità. Sono stati ineriti alcuni link canonical.

E’ stato inerito il metatag noindex Sono inoltre state rimosse quelle pagine che rimandavano a una fonte non più esistente o il cui dominio era stato eliminato: infatti sembrerebbe che un numero di link rotti estremamente elevato possa portare ad una penalizzazione.
A tal proposito ho utilizzato 2 tool.

- il primo è Xenu: funziona su windows, dopo avergli passato la url del dominio e una lista di url, verifica lo stato di queste pagine, i reindirizzamenti e riporta anche i metatag delle pagine, per vedere se ci sono pagine duplicate.

- il secondo è un servizio online e si chiama Link Tiger: anche se ha ancora qualche bug è molto utile e semplice, in quanto fa tutto da solo, scansiona le pagine del vostro sito alla ricerca di link rotti sia interni che esterni al sito, ed ogni giorno vi invia per mail un report con gli errori, purtroppo è a pagamento ma i primi 15 giorni sono gratuiti.

Altra cosa molto importante per capire cosa google fa sul vostro sito è visualizzare i logs di apache sul vostro server…

In conclusione vi consiglio di non utilizzare il tool di rimozione di google webmaster per rimuovere pagine che vi generano contenuti duplicati, più che altro è utile se avete urgenza di rimuovere una pagina che avete pubblicato per sbaglio o che continene dati sensibili.
Per non far indicizzare pagine che creano contenuti doppi sconsiglio anche il blocco tramite robots.txt (la cosa migliore sarebbe indicare nel robots.txt l’indirizzo della sitemap).
Consiglio invece l’utilizzo del metatag noindex: in questo modo i bots scansionano le pagine, non le indicizzano, seguono comunque i link contenuti, e aggiornano le statistiche del google webmaster tool, cosa che non farebbe bloccando completamente l’accesso al bot.

Dimenticavo, finalmente un paio di giorni fa siamo usciti dalla seconda penalizzazione!

Alcune delle pagine più importanti di siti molto famosi sono bloccate dal file robots.txt. Anche il tuo sito abusa del robots.txt?

Questo file è stato creato nel giugno 1994 per indicare quali pagine o directory non dovrebbero essere accessibili ai bots (i robots dei motori di ricerca). Molti di questi, tra i quali anche Google, non indicizzano il contenuto delle pagine bloccate dal robots.txt, ma continuano comunque ad includerle nella SERP.

Per accorgervene basta cercare la pagina che avete bloccato all’interno del vostro sito (site:www.vostrosito/urldabloccare), ad esempio per upnews.it tempo fa avevo rimosso, tramite robots.txt, la pagina live, ma su google appare questo.

Come si può notare il title tag e la url sono ancora visibili, manca soltanto la descrizione.

Se volete rimuovere realmente queste pagine da Google dovrete farlo tramite Google Webmasters, dal menù Configurazione sito–> Accesso Crawler–> Rimuovi Url. Nel giro di 24 ore vedrete rimosse le vostre url.
Il fatto di utilizzare il file robots.txt per bloccare una pagina non solo è poco efficace per rimuoverne l’indicizzazione dei motori di ricerca, ma blocca gli inbound links, ossia i link in essa contenuti, quindi avrete una pagina senza uscita.

Un esempio è quello di Digg.com, che fino a poco tempo fa bloccava 425,000 links, escludendo la pagina http://digg.com/submit

Ultimamente hanno rimosso questa limitazione, ma come è possibile vedere ancora google non ha iniziato ad indicizzarle.

Forse dovrebbero aggiungere in queste pagine il metatag noindex

<meta name="robots" content="noindex, follow">

Infatti, grazie ad esso, i bots non indicizzeranno la pagina ma seguiranno comunque i link.
Questo metodo è utile ad esempio per la pagina dei risultati di ricerca di un sito o per le pagine tag, che si preferisce non far indicizzare, sia perchè cambiano il loro contenuto ogni giorno, cosa non gradita da Google, sia perchè generano contenuti duplicati, ma in questo modo aumenterebbero comunque gli inbound links.

Un altro strano esempio è quello di Blogger e Blogspot, entrambi di Google: il modo con cui si scambiano link fra di essi non è fra i migliori.

Il robots di blogspot blocca l’intero sito, ma è comunque indicizzato su google, inoltre se si prova ad aprirlo si viene reindirizzati su blogger.com (tutti i sottodomini sono accessibili dai bots).

Sarebbe meglio un redirect 301 da blogger a blogspot, in questo modo i 3 mila e passa link verso blogger dai siti esterni verrebbero sfruttati.

Negli esempi sopra abbiamo visto alcuni abusi del file robots.txt, le soluzioni più efficaci sono:

• Noindex

  Nella maggior parte dei casi, la sostituzione migliore al file robots.txt è il meta tag robots. Aggiungendo ‘noindex’ e non mettendo ‘nofollow‘, le vostre pagine non verranno indicizzate ma rimarrà il valore dei links.

• Redirect 301

  Il file robots.txt non è ottimo per bloccare le vecchie pagine rimosse. Se la pagina è scaduta (eliminata, spostata, ecc) non va solo bloccata ma è meglio utilizzare un redirect permanente.

• Tag Canonical

  Non bloccare le tue pagine duplicate nel file robots.txt. Utilizza il tag canonical per escludere le versioni extra dall’indice e per consolidare il valore di collegamento.

Il modo migliore per utilizzare il robots.txt sarebbe quello di non utilizzarlo, in realtà si usa per comunicare ai robots che hanno pieno accesso al sito e per indicargli dove si trova la vostra sitemap, dovrebbe essere quindi del tipo:

User-agent: *
Disallow:

Sitemap: http://www.yoursite.com/sitemap.xml

Rolf Broer, dopo aver creato alcuni test per vedere come reagisce googlebot su diverse configurazioni di link e pagine, ha da poco pubblicato un interessante articolo sul crawl di google e la sua capacità di scansione.
Per prima cosa ha notato che l’utilizzo di una sitemap influisce in modo positivo, inoltre, sebbene google consigli di non inserire più di 100 link in una pagina, il test ha dimostrato che ne indicizza un numero maggiore se è necessario.
Matt Cutts ha affermato che “la quantità di pagine scansionate è grosso modo proporzionale al PageRank”.

In 31 giorni, googlebot ha visitato circa 375.000 pagina su un sito con pagerank pari a 0.
Rolf ha dichiarato che per un sito con PageRank 1, googlebot potrebbe eseguire la scansione su 140.000.000.000 pagine in 31 giorni.
Ciò significa semplicemente che il PageRank non influisce affatto sul vostro numero di pagine scansionato, anche se potrebbe influire sulla frequenza con cui googlebot passi per il vostro sito.
Un’altra test riguarda le breadcrumbs, ossia quei menù di navigazione che vi mostrano in che punto del sito siete, inserita solitamente nella parte superiore di una pagina web, ad esempio

Home Page → categoria → notizia

Rolf ha creato una pagina con una url di una certa profondità (/lvl1/lvl2/lvl3) ed ha notato che le pagine di livello 3 venivano scansionate 3 volte mentre quelle superiore di livello 1 e 2 neanche una, insomma non conviene utlizzare le breadcrumbs come metodo di indicizzazione, poichè googlebot scansiona meglio dall’alto in basso.
Link: googlebot-new-insights

Ecco un piccolo tutorial su come ho convertito il totale dei readers di Feedburner in una sequenza di immagini. Potete vederne un esempio in alto a destra, sopra la ricerca, anche se ancora lo devo perfezionare.
Per prima cosa dovremmo convertire questo totale in testo: sebbene in rete siano presenti diversi script, ho trovato un plugin per wordpress, Feedburner Circulation, il quale tra l’altro non restituisce errori,  nel caso in cui non riesca a raggiungere la pagina di Feedburner.

Dopo aver installato e attivato il plugin, inseriamo nel nostro tema la funzione per richiamare il totale

<?php feedburner_circulation_text(’4mj’); ?>

sostituendo a 4mj l’id del vostro Feedburner.

Adesso andiamo a modificare il plugin aprendo /wp-content/plugins/feedburner-circulation/feedburner-circulation.php e sostituendo la riga 112

return number_format($circulation);

con la seguente

for ($r = 0; $r < strlen($circulation); $r++) {
echo “<img src=’/wp-content/themes/vostrotema/images/{$circulation{$r}}.png’ alt=’{$circulation{$r}}’>”;
}

sostituite il path /wp-content/themes/vostrotema/images/ con quello dove andrete ad inserire le immagini.
Con questa piccola modifica il numero totale dei readers verrà scomposto in cifre e per ognuna di esse verrà mostrata un immagine, ad esempio se il vostro totale è 2041 verrà stampato

<img src=’/wp-content/themes/vostrotema/images/2.png’ alt=’2′>
<img src=’/wp-content/themes/vostrotema/images/0.png’ alt=’0′>
<img src=’/wp-content/themes/vostrotema/images/4.png’ alt=’4′>
<img src=’/wp-content/themes/vostrotema/images/1.png’ alt=’1′>

Adesso dovremo creare le nostre 10 immagini, nel mio caso ho inserito .png, una per ogni cifra, naturalmente con lo stesso nome.

Consiglio di creare delle .png a 24bit con sfondo trasparente in modo da poterle spostare dove vogliamo, e, per avere un effetto migliore, di tagliarle di larghezze differenti, ad esempio la cifra 1 sarà più stretta dello 0 e così via, in modo da non lasciare spazi tra di esse.
A questo punto non vi resta che iscrivervi al mio Feed!

E’ da un bel po di tempo che non mi occupo di questo sito e che non inserisco articoli. Mi sono inoltre accorto che oramai il tema e le sue funzionalità sono un po’ obsolete.
E’ per questo che ho deciso di rifare il template e di scrivere man mano tutti i passi per la sua creazione, così potrete imparare qualcosa in più, si spera, o apprendere dei piccoli trucchi, ed allo stesso tempo io attraverso i vostri commenti e pareri riuscirò a prendere delle scelte per farlo nel migliore dei modi.

I passi per la creazione saranno principalmete la creazione con photoshop, della home con i vari post e poi a seguire del singolo post con i commenti, il form, etc…
Probabilmente salterò la creazione di un file xhtml, ma applicherò la grafica creata con photoshop direttamente al tema di default di wordpress, semplicemente riscrivendo il css e modificando la posizione degli elementi a mio piacimento.
In seguito applicheremo piccoli effetti javascript, aggiungeremo dei plugins o delle modifiche a wordpress, modificando sempre solo il tema, in modo da poter aggiornare wordpress senza problemi.
Ultimata la grafica passeremo all’ottimizzazione per i motori di ricerca (SEO), all’inserimento di adsense, etc…poi si vedrà
Salterò la spiegazione sui comandi di photoshop o su cos’è un css e come si crea, più che altro cercherò di divulgare quei piccoli trucchi o escamotage che ogni webmaster ha di suo e custodisce gelosamente, mentre voi, spero, mi direte cosa vi piace di più…

Come fare allora quando superiamo questi limiti? Comprime la sitemap nel formato .gz non è una soluzione, ma serve solo per risparmiare un po’ di banda, infatti una volta decompressa torna a pesare più di 10MB, non risolvendo il problema.
La soluzione ideale è allora una Sitemap index, ossia un file .xml al cui interno sono elencati tutti gli URL delle sitemap del nostro sito. Quindi il concetto consiste nell’avere più sitemap i cui indirizzi vengono raccolti in una sitemap index.
Non dimentichiamo che anche la sitemap index ha dei limiti. Infatti non può indicizzare più di 1000 URL di sitemap e pesare più di 10MB.
Vediamo anche come creare una sitemap index:

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>http://www.vostrosito.com/sitemap1.xml</loc>
<lastmod>2004-10-01T18:23:17+00:00</lastmod>
</sitemap>
<sitemap>
<loc>http://www.vostrosito.com/sitemap2.xml</loc>
<lastmod>2005-01-01</lastmod>
</sitemap>
</sitemapindex>

Link: www.sitemap.org

Quante volte ci capita di aver bisogno di ridurre le dimensioni di una foto? Per chi possiede un blog poi, questa è un’operazione quotidiana. Ma riducendone il peso, perdiamo anche parte della qualità di un’immagine.
Smush.it è un tool online che permette, utilizzando i migliori algoritmi opensource in circolazione, di ridurre il peso di un immagine senza perderne la qualità.

E’ facile da utilizzare, sia con le immagini archiviate sul nostro hard disk, sia con le immagini online, inserendono l’URL. Tramite l’apposito plug-in per Firefox infine, è possibile ridurre il peso delle immagini di un intera pagina web e scaricarle una volta effettuata l’operazione.

Link: www.smushit.com

Se siete nel webdesign sicuramente saprete che uno degli aspetti più importanti e noiosi è far funzionare il vostro sito correttamente sui diversi browser.
Il browser che ci farà perdere più tempo, a mio parere, è Internet Explorer: non solo ogni versione ha una sua resa differente ma ad esempio avendo installato la versione 7 su Windows Vista non è possibile installare le versioni precedenti. A questo punto cosa fare?
Abbiamo già parlato di browsershot, un servizio online che crea lo screenshot del vostro sito sui diversi browser, ma dover ricreare nuovi screenshot ad ongi modificata fa perdere troppo tempo e comunque non è lo stesso che testare su un browser.
Un altra soluzione che usavo era quella di installare una macchina virtuale con le immagini fornite da Microsoft, ma hanno un loro periodo di scadenza e comunuqe sono pesanti da scaricare.

Dopo aver provato diversi software, senza restare soddisfatto, oggi ho scoperto IETester: si tratta di un programma per Windows che emula il motore di rendering e Javascirpt delle versioni 5.5, 6, 7, e anche Beta2 di Internet Explorer.
E’ possibile navigare sul web come su qualiasi altro browser potendo utilizzare il rendering della versione da voi desiderata: naturalmente non sono presenti le stesse opzioni di un attuale browser, ma risulta veramente efficace per testare le nostre pagine.
Una caratteristica molto utile è quella di poter comparare le varie versioni affiancando i tab delle diverse finestre: per farlo trascinate la linguetta di un tab sulla parte destra di un altra pagina. Il programma ha ancora qualche problema di stabilità ma è in continuo aggiornamento.

Link: IETester

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]
I video verranno pubblicati ogni due settimane sul canale Youtube di Google e saranno disponibili in Italiano, Tedesco, Francese e Spagnolo.
Di seguito le tematiche che verrano trattate nei prossimi 5:

• Strumenti per webmaster 2: Gestione delle opzioni di scansione ed indicizzazione
• Strumenti per webmaster 3: Creazione e caricamento di una sitemap
• Strumenti per webmaster 4: Come rimuovere contenuti ed evitare che Google li indicizzi
• Strumenti per webmaster 5: Diagnostica, statistiche e link
• Strumenti per webmaster 6: La comunicazione tra Google e i webmaster

I fogli di stile possono raggiungere rapidamente grandi dimensioni, sia in termini di lunghezza che di dimensione. Per garantire che le nostre pagine web funzionino correttamente e velocemente, ecco una lista di alcuni web-tool gratuiti per ottimizzare e comprimere i nostri css.

• CSS Optimizer

CSS Optimizer è un semplice tool online che processa il vostro codice CSS e ne crea una versione compressa. E’ possibile inserire la url di un foglio di stile, uplodare un file CSS, o inserire direttamente il codice. Si tratta di uno strumento semplice, non ci sono opzioni: utile se si desidera standardizzare le impostazioni di compressione.

• Clean CSS

Ne avevo già parlato: si basa sul popolare CSS minifier, CSSTidy. é possibile impostare il livello di compressione desiderato e personalizzare le opzioni di compressione. E’ presente un report linea per linea che mostra ciò che è stato cambiato. Esiste anche CSS Formatter e Optimiser, che utilizza una versione più recente di CSSTidy (1.3dev).

• CSS Drive Gallery- CSS Compressor

Questo CSS compressor ha due modalità, una regolare ed una avanzata, con la quale è possibile impostare qualche opzione in più. é possibile rimuovere i commenti o quelli che superano un certo limite di caratteri, così da mantenere quelli brevi. La modalità regolare è l’ideale per i non esperti: basta scegliere il livello di compressione tra Light, Normale, Super compatto ed il gioco è fatto.

• Online CSS Optimizer

Online CSS Optimizer è un altro semplice strumento di ottimizzazione CSS basato sull’ottimizzatore CSS da riga di comando per OS X e Linux. E’ possibile inserire il nostro CSS in 2 maniere: o attraverso il box di testo o direttamente inserendo il link del foglio di stile. A volte troverete utile invertire la compressione – è possibile farlo utilizzando l’applicazione Un-compress CSS dal menù a tendina.

• CSS Compressor

Un’altra applicazione popolare è il CSS Compressor di Robson. Sono presenti molte opzioni di compressione: è possibile impostare alcune regole sui colori, le misurazioni (unità), le regole. E’ presente anche un altra pagina dalla quale è possibile combinare e comprimere fino a 3 fogli di stile insieme.

WordPress 2.6 è ora disponibile per il download e contiene nuove caratteristiche che rafforzano le sue potenzialità.
Eccovi una lista delle migliori 11 nuove funzionalità che ho trovato aggiornando a  questa nuova versione, sebbene mi sia già accorto ce ne siano altre.
Tutte le voci che trovate in questo articolo sono in lingua italiana: adesso il download della nostra localizzazione è scaricabile direttamente dal sito WordPress, ma è sempre a cura di WordPress Italy.

• Revisione articoli – Se avete gradito il salvataggio automatico, questa nuova funzione consente di vedere le modifiche che avete apportato e quando, a qualsiasi news postata, il tutto attraverso un interfaccia semplice, con la possibilità di ripristinare la versione precedentemente salvata.
  Utile quando più autori lavorano sullo stesso articolo.

• Segnalibro “Pubblicalo” – Molti siti permettono di inserire fra i propri preferiti un pulsante per proporre, salvare o condividere la pagina in cui si sta navigando. Adesso anche WordPress ha adotatto tale sistema: andando nel pannello “Scrivi” potrete trovare a destra il link da trascinare sulla vostra toolbar.
  Grazie ad esso si aprirà un popup per inserire facilmente gli articoli sul vostro blog: ad esempio, cliccando “Pubblicalo” da una pagina di Youtube verrà estratto il codice per inserire il video oppure andando su una di Flickr sarà imemdiato inserire immagini.

• Turbo – Gears è uno strumento di Google che crea un “server locale di cache” che conserva una copia dei file Javascript e CSS file sul vostro computer, in modo da velocizzare il caricamento delle vostre pagine di admin. Lo trovate nel pannello in alto a destra.

• Preview dei Temi – Selezionando un tema dal pannello “Design”, questo non verrà attivato online, ma si aprirà, con un effetto simile a lightbox, una preview del tema. Potrete testare tutte le pagine e decidere se attivarlo in alto a destra sempre dalla stessa finestra.

• Didascalie immagini – ora è possibile aggiungere piccole didascalie sotto le vostre immagini.

• Nuovi Avatar – Dal menù “Impostazioni-Discussione” per gli utenti che non hanno un proprio avatar è possibile visualizzare un logo generico oppure uno generato in base al loro indirizzo email.

• Notifica di aggiornamento dei plugin – Simile a Plugin Central ora non è necessario visualizzare la pagina dei plugin per vedere se sono presenti aggiornamenti. Sopra il link plugin adesso è presente un numero che indica quanti presentano aggiornamenti.

• Conteggio Parole – Siete pagati per scrivere 500 parole? Non è necessario ricopiare il vostro articolo su Word, WordPress conterà per voi.

• Ordinamento immagini - Per cambiare l’ordine delle immagini in una galleria basta un semplice drag and drop.

• Paginazione Temi - Avete decine di temi installati? potete vederli suddivisi per pagine, in modo da avere un certo ordine e velocizzare il caricamento.

• Modifica immagini – Cliccando sulle immagini all’interno del post che state scrivendo avrete la possibilità di modificarle o eliminarle. Interessante la possibilità di modificare la dimensione in percentuale o quella di poter inserire un bordo, una classe o un foglio di stile.

Cosa aspettate? Aggiornate a WordPress 2.6 (sempre dopo aver backuppato i vostri files!)

Avete finito di creare il vostro blog WordPress e volete espandere le potenzialità installando qualche plugin? quale plugin? ne esistono a migliaia per WordPress, innumerevoli opzioni, ma ognuno di noi ha le proprie necessità e le proprie preferenze e spesso, prima di trovare il plugin che fa per noi, ne dobbiamo provare diversi.
Ebbene c’è un plugin che dovremmo installare prima degli altri, si chiama Plugin Central.

Il motivo è semplice: Plugin Central vi permetterà di installare tutti gli altri plugin facilmente tramite l’interfaccia web, non sarà quindi necessario dover accedere in ftp sul vostro server, memorizzare dati di accesso e password.
Questo vuol dire anche che in qualsiasi momento e ovunque, qualora vedessimo un plugin interessante, potrete installarlo immediatamente dall’interfaccia web del vostro blog. Tutto ciò che vi serve è il nome o link del plugin, che può essere facilmente ottenuto facendo clic destro sul pulsante “Scarica” dal sito WordPress.
Plugin Central può installare anche più file contemporanemente che sono già salvati nel tuo disco rigido (o ovunque, basta che si conosca l’indirizzo). Questa funzione vi consentirà di copiare una serie di collegamenti da un blog all’altro, un vero e proprio risparmio di tempo: potrete visualizzare la lista di tutti i plugin che avete installato o solo quelli che avete attivato.
Un altro vantaggio di questo plugin rispetto al tradizionale metodo FTP è la velocità di installazione. Il processo può essere fatto in meno di due secondi dopo aver fatto clic sul pulsante install. Questo è notevolmente utile per coloro che non hanno la fortuna di avere un connessione veloce.
Oltra alla possibilità di installare nuovi plugin, entrando nella dashboard di WordPress vi verranno segnalati quelli che presentano un aggiornamento, e potrete scaricare o aggiornare sia il singolo plugin che tutti insieme cliccando su Update All. Questo è per me il primo plugin da installare, per voi qual’è?

Link: Plugin Central

Nel caso utilizziate WordPress, nel frattempo, potete scaricare l’apposito plugin all’interno del quale successivamente dovrete inserire l’ID che Woopra vi avrà assegnato.
Una volta che il vostro sito è approvato, effettuando il login troverete il codice da inserire sul vostro sito web: Woopra inizierà a monitorare il vostro traffico.
Ora potete visualizzare le vostre statistiche in due modi, effettuando il login sul sito Woopra o ancora meglio direttamente sul vostro Desktop, scaricando un software molto leggero, disponibile sia per Windows, Mac e Linux: aprendolo vi troverete davanti un interfaccia molto accattivante dalla quale avrete accesso a diversi dati.
Oltre alle classiche informazioni come chiavi di ricerca, referrer, numero di visitatori, pagine visitate, etc…è presente una sezione live molto utile, grazie alla quale potrete sapere in tempo reale diversi dettagli di ogni singolo visitatore: la pagina dove si trova, quelle che ha visitato, il browser, il sistema operativo, l’indirizzo ip, la risoluzione dello schermo, ma anche la sua città, e la sua posizione su di una mappa globale.
E’ anche possibile assegnare un Tag ai visitatori, in modo da individuarli più facilmente al loro ritorno.
Un altra funzione molto interessante sta nella possibilità di contattare via chat i visitatori live: si aprirà per voi, all’interno del programma, e per il visitatore, sul vostro sito, una finestrella con la quale potrete chattare.

Dimenticavo di dirvi che tipo di collaborazione ho avuto con Woopra: per loro ho appunto creato la finestra della chat che si apre via web quando contattate i vostri utenti (ad un certo punto si vede anche nel video): prima utilizzavano una versione in flash, ma avevano bisogno di un popup ridimensionabile in css: pensavo sarebbe stato un lavoretto di mezz’ora invece è stato più difficile di quello che pensassi!

Link: www.woopra.com

Qualche giorno fa è stata rilasciata la versione 2.5 di wordpress, la quale apporta notevoli migliorie: ho subito aggiornato e devo dire che sono rimasto molto soddisfatto, sopratutto per quanto riguarda il nuovo pannello di amministrazione.
Già dalla schermata di login ci si accorge del nuovo tema grafico, ecco cosa è cambiato ad un primo sguardo…

Bacheca

Nella nuova bacheca sono presenti come sempre i link in entrata, i commenti recenti, in più sono presenti i feed Rss delle news Woprdpress e dei plugins: di tali feed possono essere modificati sia la fonte che il numero di voci da visualizzare, in questo modo se non vi interessa il feed di WordPress potrete inserirne uno di vostra scelta.
In alto a destra sono evidenti i pulsanti scrivi una nuova pagina e scrivi un nuovo articolo.

Pannello di scrittura

Il nuovo editor WYSIWYG di WordPress 2.5 ora è molto più pulito. Tra le maggiori novità la possibilità di inserire file multimediali, audio o video (anche Youtube), gallerie di immagini ed animazioni flash senza dover utilizzare plugin aggiuntivi.
Ottima anche la funzione per i tag, la quale, digitando alcune lettere nell’area apposita, vi suggerisce tag o frasi già presenti negli altri post, un pò come avveniva con il plugin Ultimate Tag Warrior.
Unica pecca la larghezza dell’editor, per me che ho una risoluzione a 1680 risultava molto stretta: ho risolto elimiando il max-width dalla classe .wrap all’interno del file wp-admin/css/global.css.

Commenti

Tra le modifiche che ho apprezzato di più c’è anche la nuova gestione dei commenti: adesso è possibile modificare i commenti appartenenti ad un singolo post, inoltre cliccando sull’ip di un autore si possono vedere tutti i commenti inseriti dallo stesso.

Pannello di gestione

Tra le novità presenti nel pannelo di gestione c’è il tab dei Tag, dal quale possiamo visualizzare (anche il numero di volte inseriti), aggiungere modificare ed eliminare i nostri tag.
E’ stato aggiunto anche un tab Libreria Media dove poter vedere ed effettuare le modifiche ai nostri file multimediali precedentemente inseriti.

Gestione e aggiornamento Plugin

Dopo aver eseguito l’upgrade di WordPress alla 2.5, sono andato ad aggiornare anche i plugin e con grande piacere ho scoperto che adesso è possibile farlo con un semplice click: wordpress disattiverà la versione in uso aggiornerà i file e lo riattiverà tutto in automatico, senza dover scaricare nessun file e doverlo uplodare in ftp, veramente comoda…

Un grazie come sempre per la localizzazione in italiano di WordPress a WordPress Italy. Oltre alle varie migliorie ho l’impressione che il tutto ora sia più veloce nel caricamento: consiglio a tutti l’aggiornamento alla nuova versione, ma prima di procedere ricordatevi di backupare tutti i vostri file e database!

Leon Chevalier di Aciddrop.com ha rilasciato uno script gratuito che diminuisce i tempi di caricamento del nostro sito basato su wordpress.
PHPSpeedy riduce le HTTP request, e comprime i componenti Javascript, CSS e HTML. Una volta installato lo script potrete vedere subito dalla pagina di test quale sarà il vostro risultato finale.

L’ultima versione include un installer, che facilita il lavoro.
Per chi utilizza WordPress 2.3.x, seguite le seguenti istruzioni.
Eseguite un backup del vostro tema prima di procedere con tale operazione.

• Scaricate PHPSpeedy ed estraete i file.

• Uplodate la cartella php_speedy nella stessa directory dove avete installato WordPress (di solito è quella di root).

• Puntate il vostro browser su http://www.sito.com/php_speedy e seguite le istruzioni.

• Dopo aver selezionato le opzioni di ottimizzazione (di default è tutto abilitato), avrete due codici da dover inserire all’interno del file index.php del vostro template utilizzato.

• Editate il file index.php nella cartella /wp-content/themes/vostro tema/.
• Inserite il primo codice prima del blocco <?php get_header(); ?>

• Inserite il secondo codice in fondo alla pagina

Fatto! Quanto avete guadagnato?

A molti sembrerà uno scherzo ma è la pura e squallida realtà.
Il gestore della telefonia mobile olandese, la T-Mobile, ha infatti intentato causa ad una serie di altre società, quali Slam FM, Compello e 100% NL, colpevoli dell efferato crimine di usare nei propri loghi e nelle loro comunicazioni un colore di cui l azienda telefonica ritiene di avere l esclusiva: il magenta.

Incuranti del ridicolo e forti dei propri studi legali i manager della T-Mobile hanno apposto un apposto disclaimer che menziona tra i vari marchi registrati dalla società anche il colore magenta tout court. Benché al momento la rivendicazione della proprietà di colore riguardi esclusivamente chi agisce nello stesso settore di mercato, in questo caso della telefonia, non c è dubbio che costituisca un elemento di preoccupazione: non è che, prima o poi, qualcuno ci chiederà di pagargli i diritti di riproduzione ogni volta che effettuiamo una stampa in quadricromia?
Purtroppo non è il primo caso in cui un colore in sé viene ritenuto elemento proprietario aziendale. Nel 2005, ancora un operatore telefonico, la Orange, intentò causa in Inghilterra contro il concorrente EasyMobile per l utilizzo esclusivo del colore arancio.
Se credete che il tutto non sia vero andate sulla pagina di copyright del sito t-mobile e leggerete la seguente frase ‘the color magenta are registered and/or unregistered trademarks of Deutsche Telekom AG in the US and/or other countries.
Invito chiunque abbia un blog o un sito a diffondere il più possibile la notizia.
E scandaloso e senza senso…

Diffondete gente… diffondete!

p.s. se volete lasciate un link nei commenti… più siamo è meglio è!

Fonte: mambro

Spesso butto un occhio su blogbabel per vedere se la posizione del mio sito migliora o peggiora in classifica, ma mi accorgo che i dati non sempre sono quelli reali, anzi sono molto più bassi.
Ho quindi provato ad inserire nuovamente il blog per vedere se cambiava qualcosa: per farlo, dato che il sito era già presente nel database, ho eliminato il www, ed ho inserito come link del feed quello di feedburner…

Ecco la scoperta, tutti i dati sono più alti per il sito nuovo tranne che per i link in ingresso, l’unico giusto è quello feedburner, ma il bello e che anche questi dati nuovi sono sbagliati.
Potete vedere le due pagine qua:
4MJ
4mj.it Internet news

Il nuovo inserimento risale a 4 giorni fa, dovrebbero quindi essere tutti e 2 aggiornati allo stesso modo. Voi che ne pensate?

Una volta terminato il nostro layout, nel tempo le piccole modifiche ad esso ed al corrispettivo foglio di stile saranno comunque frequenti: a volte inseriamo dei selettori che non serviranno, altre eseguiamo dei piccoli test grafici, che magari poi non ci soddisfano, e ci dimentichiamo di eliminare quei selettori del .css inutilizzati.
A tal fine trovavo solo tool o software che mi aiutavano ad individuare tali selettori solo su una pagina per volta, restava quindi il problema che magari alcune classi che per tale programma erano inutilizzate in una pagina non lo erano per un altra, ed era quindi necessario confrontare i diversi risultati per capire quali classi non servivano davvero.

Alla fine ieri mi sono imbattuto in Dust-Me Selectors, una piccola estensione per firefox, molto facile da usare.
Una volta caricata la nostra pagina web sarà sufficiente cliccare sul pulsante nella status bar, il tool ci dirà il numero di classi inutilizzate e quello dei fogli di stile in cui si trovano.

Ora, per ovviare il problema che vi dicevo, dovremo visitare diverse pagine del nostro sito, in modo da incontrare tutte le nostre classi nel codice, ed ogni volta cliccare sul pulsante.
Ad esempio per il mio sito, che si basa su wordpress, è stato necessario aprire naturalmente la home, un post (cerchiamone una con commenti anonimi, di admin, trackback, immagini e video), una pagina archivio, una di ricerca senza risultati ed una con, una pagina 404 e tutte quelle pagine statiche o particolari che abbiamo creato(contatti, links, mappa sito).
Alla fine della ricerca ho trovato oltre 100 selettori inutili, ed il mio foglio di stile è passato da 17kb a 12kb. Naturalmente consiglio di crearvi un backup dei vostri .css prima di eseguire questa operazione.
Link: Dust-Me Selectors

• Troviamo il codice che ci interessa

Il codice della searchbar di solito lo troviamo nel file searchform.php all’interno del nostro template, è dovrebbe essere tipo:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

la riga che a noi interessa è

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />

• Ineriamo il testo “Cerca…”di default

Per salvare spazio, inseriamo il testo search direttamente all’interno del box. Mettiamo un eccezione, in modo che se un utente ha precedentemente utilizzato la funziona ricerca o si trova nella pagina dei risultati della ricerca, si visualizza il termine ricercato.

<input type="text" value="<?php if(is_search() ) { the_search_query(); } else { echo 'Cerca...'; } ?>" name="s" id="s" />

• Aggiungiamo l’effetto javascript

Quando un utente clicca nel box di ricerca non vogliamo obbligarlo a cancellare manualmente il testo “Cerca…”, e se dovesse cliccare nuovamente fuori dal box, senza aver scritto nulla, vogliamo che ricompaia il nostro testo “Cerca…”. Aggiungiamo quindi questo codice prima della chiusura.

onfocus="if(this.value=='Cerca...')this.value='<?php the_search_query(); ?>'" onblur="if(this.value=='')this.value='Cerca...'"

Alla fine il nostro file searchform.php dovrebbe essere:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php if(is_search() ) { the_search_query(); } else { echo 'Cerca...'; } ?>" name="s" id="s" onfocus="if(this.value=='Cerca...')this.value='<?php the_search_query(); ?>'" onblur="if(this.value=='')this.value='Cerca...'" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

La scelta del nome del proprio dominio è molto importante ed è difficile per un webmaster trovare un dominio corto e di grande effetto che non sia già stato registrato.
Ho trovato un ottimo tool online che ci aiuta in questa ricerca: il procedimento è semplice, basta aggiungere la parola o la combinazione di parole che ci interessa, e poi scegliere le estensioni del dominio tra .com, .net e .org (purtroppo non c’è il .it) e marcare una serie di opzioni.

Bustaname, questo è il nome del tool, troverà in automatico le parole simili a quelle che abbiamo inserito e ci fornirà a nostra scelta il nome più corto, o quello di miglior qualità.
Ecco un video che vi spiega meglio come funziona il tool.
[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]
Direi utilissimo se cerchiamo un dominio a livello internazionale, ma inutile uno in italiano.
Ho provato a fare una ricerca inserendo iphone e blog, be ho trovato blogiphone.net e blogiphone.org, anzi se interessa a qualcuno correte a prenderlo!

url: www.bustaname.com

• Yello 3 1.0

Download | Test

• Wow Swiggle

Download | Test

• Fast Swing 1.0

Download | Test

• Vspink 1

Download | Test

• Blueorange 1.0

Download | Test

• 3cwptp

Download | Test

• Techblog

Download | Test

• Greenway3c

Download | Test

• Glues Ideas

Download | Test

• Minyx 2.0

Download | Test

Clicky è un servizio di statistiche per il vostro sito in stile web 2.0, che permette di monitorare molti dati, come ad esempio tutti i click di ogni visitatore, le statistiche dei propri feed, i downloads, la collocazione sulle google map dei vostri visitatori, o addirittura in tempo reale cosa fanno i nostri utenti e tante altre cose: eccovi una demo.

Esistono tre versioni:

• Basic – gratuita, tre siti monitorabili, statistiche di base fino a 1.000 pagine al giorno.
• Blogger – $19.99 all’anno, tre siti monitorabili, statistiche complete (RSS feeds, Spy, outbound link tracking, download tracking, IP tagging, IP filtering) fino a 10.000 pagine al giorno.
• Pro/Small business – $49.99 all’anno, 10 siti monitorabili, statistiche complete fino a 50.000 pagine al giorno.

Una volta registrati, basterà inserire 2 righe di codice nel propio sito (esiste anche un plugin per wordpress) per iniziare a monitorare i vostri accessi. La grafica in pieno stile web 2.0 è molto chiara e pulita, da provare!

Link: www.getclicky.com

Vediamo quali sono (secondo lei) i falsi miti dei seo europei:

• una grande frequenza di spidering equivale a un alto posizionamento
• è bene sostituire le immagini e altri elementi grafici con testi (magari CSS)
• i siti web 2.0 si posizionano meglio di quelli “tradizionali”

Partendo dal semplice quanto mai troppo ribadito concetto che i motori di ricerca vogliono quello che gli utenti vogliono, ognuno di questi punti può essere smontato.
E vero che un sito molto aggiornato nei contenuti può essere apprezzabile, ma a volte l aggiornamento è eccessivo e non necessario.
L aggiornamento forzato e frenetico dei contenuti (anche ogni 3 giorni) non premia di per sé il posizionamento. I motori di ricerca possono setacciare siti e pagine web senza mai posizionarli se i contenuti sono poveri o ridondanti (sulla duplicazione dei contenuti consiglio la lettura di un altro articolo).
La frequenza del passaggio degli spider non incide direttamente sui risultati: molti siti sono ben posizionati anche se il motore non li spiderizza ogni giorno.
Se un sito di news ha un esigenza di aggiornamento quotidiano, un sito B2B potrebbe non necessitare di un tale sforzo.
Sul discorso delle immagini e del web 2.0 non si può dire cosa porti a un miglior posizionamento a priori senza prima testarne l efficacia. é importante fare test: ci vuole tempo, pazienza, accuratezza… ma è l unico modo per dimostrare se una cosa funziona o no.
Dire che i siti web 2.0 di default si posizionano meglio degli altri è un affermazione troppo forte. E per l autrice addirittura falsa.
Le buone regole di posizionamento sono: un testo ben costruito sulle keyword (che non vuol dire pieno zeppo di keyword), una buona struttura del sito (ovvero permettere sia ai motori che agli utenti di navigare in maniera semplice e chiara) e una buona attività di link building (link di qualità, spontanei).
Il resto può funzionare o no a seconda dei casi…
Fonte: Elena Farinelli – http://www.onemarketing.it/

Gli stili di livello di photoshop sono un insieme di impostazioni salvate, col quale possiamo dare effetto ai nostri layer con un semplice click. Ecco un ottimo set di 131 stili col quale potremmo creare bottoni, testi o loghi in stile web2.0.

Link: dezinerfolio.com

Per gli amanti della dockbar del mac, la barra icone, ecco un menu in css che emula tale barra. Creato usando la libreria Jquery Javascript e il componente Fisheye presi dalla collezione Interface, tale menù è disponibile per il download. Il risultato è davvero sorprendente ed è inoltre compatibile per IE 6, IE 7, Opera 9, Firefox 2, e Safari 2.

Link: Css dock menu

Devo ammettere che quando progetto un layout di un sito uno degli ostacoli maggiori è la scelta dei colori: anche creando un ottimo design, se la combinazione cromatica non è valida il layout non rende.
Per fortuna ci sono strumenti utili per i webdesigner che ci aiutano nell’abbinamento cromatico, ecco quelli che preferisco.

• ColourLovers

ColourLovers è una comunity dove è possibile visualizzare e commentare le tavolozze create dagli utenti.

• EasyRGB

EasyRGB è uno strumento utile per trovare colori che stanno bene fra loro e per comprendere la teoria dei colori.

• ColorBlender

Scelto il nostro colore principale, ColorBlender vi propone un pantone corrispondente per sei colori.

• ColorJack

Forse uno dei migliori: permette di creare set di colori complementari e intonati ed esportarli in formato compatibile per Photoshop o Illustrator.

• Color Schemer

Mettendo un colore d’esempio vengono suggeriti i colori più appropriati all’accostamento con lo stesso.

• Adobe Kuler

Già ne avevamo parlato, Kuler di casa Adobe, ormai uscito dala fase beta,  permette di creare tavolozze di colore in HSV, RGB, CMYK e LAB,  e scaricarle in formato .ASE, per poterle utilizzare con i prodotti della Adobe Creative Suite. E’ inoltre presente una classifica delle tavolozze più viste e dei più votate.

Ecco un ottimo strumento online in grado di ottimizzare i vostri file css: Cleancss non è il solito compressore CSS che rischia di corrompere alcune proprietà, ma nel suo caso riesce a fare un ottimo lavoro.

Cleancss ottimizza e riduce automaticamente la dimensione dei CSS, raggruppando i selettori e le proprietà, e soprattutto produce come output un codice valido.
E’ possibile selezionare diverse opzioni, il tipo di compressione, e salvare il codice direttamente su file.
Link: www.cleancss.com

E’ stata rilasciata la versione 3.0 delle licenze Creative Commons, lo strumento gratuito per offrire una protezione più flessibile alle opere tutelate dal diritto d’autore, e che allo stesso tempo favoriscono la diffusione del materiale.

Fra le novità principali di questa versione vi è la possibilità di creare una vera licenza “generica” per ogni nazione, Italia inclusa, mentre in passato le varie licenze generiche non erano altro che una versione statunitense riadattata.
Per chiunque volesse rilasciare la propia opera sotto licenza CC, ma non sa quale fa scegliere, è presente un wizard che vi potrà aiutare.
Per ulteriori informazioni vi rimando alla presentazione sul sito Creative Commons.

Vi presento un ottima estensione per firefox, che a mio parere rappresenta una delle migliori per gli sviluppatori web: Firebug.
Grazie ad essa potrete eseguire un debug, modificare e monitorare il codice html, css e javascript di un sito, e per di più potrete visualizzare in tempo reale le vostre modifiche direttamente su firefox.
Una volta attivato, si aprirà un pannello nella parte bassa della vostra scheda di firefox, dal quale potrete accedere a 5 tab: Console, Html, Css, Script, Dom, Net. Ma analizziamo meglio ognuno di questi strumenti…

• Console

La console di firebug vi permette di eseguire un debug degli errori Javascript e loggare le richieste XMLHttpRequests (AJAX), e naturalmente modificare manualmente da linea di comando il codice.

• Html

Premendo il pulsante Inspect, selezionate un’area della pagina visualizzata sul browser: verranno evidenziati i tag corrispondenti del codice html, e nel box sulla destra appariranno i relativi attributi css.
Questo è sicuramente lo strumento più interessante per i webdesigner, infatti potrete modificare sia il codice html che gli attributi css e vedere direttamente nel browser le modifiche apportate, senza quindi dover più modificare il codice originale e poi ricaricarlo per vedere il risultato.

• CSS

Da qui visualizzerete tutti i fogli di stile della pagina.

• Script

Lo strumento Script è un debugger del codice javascript, e aggiunge la possibilità di inserire Breakpoints e Watch Expressions.

• DOM

La struttura ad albero del DOM della pagina, permette le operazioni di DOM traversing e DOM hacking direttamente sul codice renderizzato lato client, senza modificare i file lato server.

• NET

Quest’ultimo strumento analizza i tempi di caricamento di ogni file (css, js, immagini), le connessioni effettuate con il server e le richieste del client, utilissimo per ottimizzare i tempi di caricamento della pagina.

Eccovi alcuni video:

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Presentazione di Firebug 1.0

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Firebug Debugging AJAX Tutorial

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Firebug CSS editing Tutorial

Link: Dowanlod Firebug