Screensiz.es è una valida risorsa per chi vuole realizzare siti dal layout responsive.

Progettare siti da fruire su dispositivi diversi non è semplice. È necessario conoscere le principali dimensioni e risoluzioni degli schermi per poter decidere le impostazioni che renderanno i nostri layout adattabili alla più ampia gamma di dispositivi possibile.

Screensiz.es è un sito che elenca le specifiche più importanti degli schermi di smartphone, tablet e monitor più diffusi. Cataloga i sistemi operativi utilizzati, i formati fisici, la risoluzione e la densità dei pixel.

Inoltre, i dispositivi possono essere ordinati per popolarità per aiutarci a decidere quali sono le soluzioni per il nostro target.

Questo servizio, completamente gratuito,  permette di modificare la visualizzazione delle colonne nascondendo quelle che non ci interessano e tenendo solo quelle di cui abbiamo bisogno.

In questo modo potremo semplificarci la vita quando dovremo affrontare i tanto temuti breakpoint con le Media Queries.

The post Screensiz.es – Tutte le risoluzioni per realizzare siti responsive appeared first on A Sort of Code.

Molti plugin di WordPress che utilizziamo quotidianamente aggiungono nell’output delle pagine file CSS e javascript relativi al loro funzionamento. Tutto questo non è necessariamente una cosa negativa, ma può diventare un problema quando vogliamo aggiungere personalizzazioni agli stili CSS o alle funzionalità javascript.

Per evitare di modificare direttamente i file che compongono i plugin (queste modifiche vengono eliminate durante l’aggiornamento) o riempire il nostro foglio di stile utilizzando la direttiva !important, WordPress mette a disposizione delle funzioni apposite. Grazie ad esse potremo:

• Personalizzare l’aspetto estetico del plugin senza tenere conto delle regole css o js preimpostate;
• Avere un codice più pulito;
• Alleggerire il peso della pagina eliminando il codice superfluo;
• Aggiornare con tranquillità il plugin senza perdere le modifiche effettuate.

Disabilitare i CSS

La funzione utilizzata per non caricare i CSS del plugin è wp_dequeue_style(); . Vediamo un esempio basato sul plugin contact form 7 che andrà inserito nel file function.php:

function rimuovi_stile() {
    wp_dequeue_style('contact-form-7');
}

add_action('wp_enqueue_scripts','rimuovi_stile');

L’ $handle contact-form-7 lo si può trovare all’interno dei file del plugin dove viene registrato il suo css. Ogni plugin utilizzerà un handle personalizzato posizionato all’interno delle sue cartelle.

Disabilitare i file Javascript

Ora vediamo invece come rimuove i file javascript:

function rimuovi_js() {
    wp_deregister_script('contact-form-7');
}

add_action('wp_enqueue_scripts','rimuovi_js');

Nello specifico abbiamo rimosso completamente tutti i file javascript per la validazione del form e l’invio ajax. Per il corretto funzionamento bisogna ricordarsi di replicare, all’interno del nostro tema, tutti gli elementi fondamentali che servono al plugin.

Negli esempi proposti, diamo per scontato che il plugin sia stato realizzato seguendo le linee guida di WordPress che prevedono l’utilizzo di wp_enqueue_style  per i css o wp_enqueue_script per i file javascript.

The post Come disabilitare css e javascript dei plugin WordPress appeared first on A Sort of Code.

Caniuse.com è un’utilissima risorsa per web designer e developer in cui è possibile consultare tutte le funzionalità HTML5, CSS3 e SVG supportate dai browser.
Questo comodo servizio web è stato creato da Alexis Deveria per realizzare siti compatibili con i browser più utilizzati e con i dispositivi mobile.
Non tutte le funzionalità, infatti, sono supportate da tutti i browser ed è meglio verificare in anticipo se ci possono essere problemi di compatibilità.
Se la maggior parte dei visitatori non visualizza il sito correttamente, Caniuse.com permette di identificare le funzionalità inconciliabili e di rimpiazzarle con una soluzione alternativa.

Caratteristiche di Caniuse.com

Il sito Caniuse.com non ha una grafica accattivante ma ha tutto quello che serve per trovare le informazioni che cerchiamo:

• Funzionalità organizzate per categorie;
• Tabelle specifiche per ogni funzione con indicato il supporto per ogni browser (anche dei dispositivi mobile);
• Box di ricerca;
• Documentazione per ogni caratteristica;
• Link alle specifiche W3C;
• Utili risorse e demo da provare;
• Percentuale di utilizzo dei browser  (fornita da StatCounter) che mostra quanti utenti utilizzano browser che supportano la funzione;
• Feedback per lasciare suggerimenti e correzioni.

Questo servizio offre un valido aiuto a coloro che vogliono un sito innovativo ma che riesca ad essere visualizzato correttamente anche su browser obsoleti come IE (le cui vecchie versioni, purtroppo, sono ancora molto utilizzate), per i quali spesso è necessario ricorrere a utility Javascript come Selectivizr, che permette di emulare le pseudo-classi e i selettori d’attributo CSS3 in Internet Explorer dalla versione 6 alla 8.

The post Caniuse.com – Risorsa per web designer e developer sulle funzionalità CSS3, HTML5 e SVG supportate dai browser appeared first on A Sort of Code.

FlexSlider è uno tra i migliori slider di immagini per jQuery che presenta infinite possibilità di personalizzazione. Uno dei suoi punti di forza è quello di poter realizzare in pochi passaggi uno slider responsive compatibile con la gesture swipe dei dispositivi touch.

L’utilizzo è molto semplice e, come spiegato nella documentazione ufficiale, prevede l’inserimento di contenuto html oltre alle immagini. Questo ci permette di creare slider per utilizzi specifici, il tutto attraverso un markup pulito e semantico.

Il plugin è stato acquistato recentemente da Woothemes e aggiornato alla versione 2 che introduce nuove proprietà come la possibilità di creare carousel. Il funzionamento è testato sulla maggior parte dei browser moderni come Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, IE7+ e su dispositivi mobili iOS e Android. Per funzionare richiede la libreria di jQuery, versione  1.4.2 o superiore.

Caratteristiche

• Supporto per dispositivi touch
• Markup semplice e pulito
• Slider multipli nella stessa pagina
• Supportato dalla maggior parte dei browser
• Animazioni slide verticali, orizzontali ed effetto fade
• Supporto per jQuery easing
• Possibilità di inserire contenuto html all’interno delle slide
• Personalizzazione avanzata
• Navigazione attraverso tastiera, gesture e mouse
• Licenza open source GPLv2

Funzionamento

Una volta scaricato il plugin bisogna aggiungere, all’interno del tag <head>, il file css flexslider.css, la libreria di jQuery e il file JavaScript del plugin jquery.flexslider.js. Per evitare il rallentamento della pagina è possibile inserire i file JavaScript prima della chiusura del tag </body>.

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>

All’interno del tag <body>, nella posizione in cui vogliamo far apparire lo slider, bisogna inserire un div contenitore – ad esempio <div class="flexslider"> - e una lista non ordinata dove il contenuto di ogni singola <li> equivale ad una slide.

<div class="flexslider">
<ul class="slides">
	<li><img src="slide1.jpg" alt="Slide" /></li>
	<li><img src="slide2.jpg" alt="Slide" /></li>
	<li><img src="slide3.jpg" alt="Slide" /></li>
</ul>
<div>

Ora non resta che attivare il plugin al caricamento della pagina attraverso il comando .load. Per funzionare correttamente lo script deve essere posizionato dopo i file JavaScript precedentemente inseriti.

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Questo è il funzionamento base del plugin. Per approfondire le personalizzazioni possibili vi consiglio di leggere la documentazione ufficiale e la repository su Github.

Scarica FlexSlider

The post FlexSlider – jQuery slider responsive appeared first on A Sort of Code.

L’evento su social media e marketing più importante della zona è giunto quest’anno alla sua terza edizione. Il 20 Giugno, presso il Castello di Malvezzi a Brescia, si è svolto il Pane, Web e Salame 3.

Il social media camp nostrano ha seguito il format ormai consolidato degli speech di 20 minuti, presentati sul palco del PWeS3 da una ventina di relatori.

Fortunatamente è stata scartata l’idea di suddividere gli interventi in più sale come è invece successo nell’edizione precedente.

Come in tutti gli eventi che si rispettino non potevano mancare i gadget; ed ecco che alla postazione registrazioni le girl geek bresciane dispensano sacchetti del pane. All’interno adesivi, il programma della giornata e pubblicità dei vari sponsor.

La sala si è riempita di persone, oltre 250 tra appassionati, studenti e professionisti del settore. Alle 9.30, puntuali, ci introducono alla giornata i 3 organizzatori: Davide Dattoli, Fabrizio Martire e Alessandro Mininno definiscono questa terza edizione

una conferenza sui social media in cui si parlerà delle migliori campagne di advertising online tra una fetta di salame e un bicchiere di buon vino.

E quale modo migliore di ascoltare una conferenza sui social media se non seguendola su Twitter? Sono stati proprio i follower della giornata che con i loro tweet hanno portato l’hashtag #pwes3 nei TT Italia in terza posizione. Con i loro interventi sono riusciti a porre l’attenzione sui punti più interessanti degli speech e a bacchettare i relatori che hanno utilizzato i minuti a loro disposizione per fare un po’ troppa pubblicità ai propri servizi.

Ed è sempre grazie a loro che U10, piattaforma editoriale che si occupa di online publishing e ebook design, ha potuto realizzare il TweetBook “#Pwes3 – Un bel tagliere di storie dal web“, un pdf nato dalla selezione dei tweet che ci hanno accompagnato durante la giornata.

Una nota di merito a @Mushin_ aka Simone Tornabene che, con il suo intervento 2012 Odissea nei Social, fa il punto della situazione di ciò che sta accadendo. Temi principali sono stati:

• la pubblicità, che si sta integrando sempre di più con i contenuti (es: i tweet sponsorizzati);
• la privacy. Facebook chiede agli utenti di votare la policy di privacy: in questo modo il pubblico viene coinvolto e allo stesso tempo il famoso social network si tutela;
• I social media si basano su due risorse importanti: 1. le informazioni (contenuti); 2. le persone (cervelli). Si stanno evolvendo ma incontrano grosse barriere linguistiche e culturali ed è per questo motivo che sarà inutile avere conoscenze non condivisibili.

Ma il “vincitore morale” della giornata è sicuramente @alekone aka Alessandro Mininno, che con il suo esilarante speech Sex, drugs & Social Network è riuscito a stimolare (pare in tutti i sensi) l’attenzione dei presenti.

Per tutti quelli che non sono riusciti a partecipare o a seguire lo streaming ecco le presentazioni dei protagonisti di Pane, Web & Salame 3.

The post Pane, Web e Salame 3 – Il social media camp nostrano appeared first on A Sort of Code.

Venerdì 4 e Sabato 5 Maggio, nello spazio del Museo Sagsa, Ripa di Porta ticinese 111, si è tenuta la 5° edizione del WordCamp Milano 2012.

WordCamp – Day 1

Seduti attorno al tavolo del WordCamp, si sono riunite alcune personalità note al mondo di WordPress. Niente speech per loro, ma una semplice e informale chiacchierata per analizzare l’evoluzione che ha avuto la piattaforma, sempre più utilizzata per funzioni che vanno oltre al semplice blogging. Scelgono di affrontare la giornata in maniera interattiva facendo relazionare e partecipare anche il pubblico. La sala è piena e anche da casa gli interventi vengono seguiti grazie alla diretta streaming, a tratti disturbata. Anche su Twitter si cinguetta parecchio, tant’è che l’hastag #iwordcamp entra dopo un’ora nei TT Italia in terza posizione, superando Giulio Andreotti.

Foto di @ilbellodelweb

Marco Zamperini, consulente indipendente nell’ambito di importanti progetti di sviluppo software e VP & CTO di Value Team S.p.A, è uno dei primi a parlare. Riporta il caso di Webconoscenza.it, sito bannato senza preavviso da WordPress.org. Spunto: Come trovare altre soluzioni per l’hosting?

Incalza la discussione Max Uggeri, proprietario di un fondo di Venture Capital etico a Londra con il quale finanzia iniziative legate al mondo delle App iOS. Il suo intento è quello di investire in aziende nuove che cercano di sviluppare idee interessanti. Spunto: WordPress offre la possibilità di far gestire i contenuti a chiunque con un’interfaccia semplice, anche grazie alla grande comunità di professionisti ed appassionati che offrono il loro supporto. Bisogna sempre tener presente che WordPress è solo il mezzo che ci aiuta a raggiungere i nostri scopi: quello che conta non è il software, non è la piattaforma, ma sono i contenuti.

Interviene anche “Steve Agl” (Stefano Aglietti) fondatore di WordPress Italy, comunità che si occupa della traduzione ufficiale in italiano di WordPress e del sito di supporto e documentazione per la comunità italiana. Steve ha sottolineato una cosa molto importante: WordPress permette di abbattere i costi del software proprietario, ma non per questo vale meno il lavoro di chi utilizza la piattaforma, visto che i costi di sviluppo ci sono ugualmente.

Il primo dibattito tra i presenti si nota quando Steve afferma che spesso è meglio riscrivere i plugin (anche se già esistenti gratuitamente) perchè in questo modo riusciamo ad alleggerirli e a ripulirli dal codice inutile che inseriscono alcuni sviluppatori. Da qui la sua osservazione sulla necessità di dotare i plug-in di appropriate certificazioni. Ed ecco che subito interviene Uggeri sostenendo che rispetto ad una certificazione, esperienza e passaparola hanno un peso maggiore.

“Wolly” (Paolo Valenti), dal 2008 organizza a Milano, nel mese di Maggio, il WordCamp evento gratuito in cui si parla di WordPress, comunicazione online e open source. Racconta le sue esperienze lavorative e sottolinea come a volte la collaborazione instaurata con le figure professionali che devono dare una veste grafica al tuo sito, non è semplice. La grafica deve essere funzionale allo scopo del sito. Se si riescono a chiarire prima le funzionalità, in fase di progettazione è più facile dialogare con il cliente e si risparmiano tempo e soldi.

Ma l’intervento più illuminante, anche per il modo diretto in cui è stato proposto, è quello di Mafe de Baggis, specializzata in comunicazione – relazioni pubbliche e copywriting – e formazione, che insiste sull’importanza di dare un valore al proprio lavoro. Fare offerte chiare porta sicuramente dei vantaggi.

Conclusioni della giornata: La piattaforma WordPress si è voluta rispetto al concetto di blog e ora può essere utilizzata, grazie alla sua versatilità, anche per altri scopi come ad esempio l’e-commerce.

WordCamp – Day 2

È di Wolly il primo intervento della giornata. Ci presenta una grossa proposta open source per la scuola italiana realizzato interamente in WordPress: il registro elettronico. È il Centro Studi Impara Digitale, associazione senza scopo di lucro, a sviluppare questa idea. Il progetto pilota è stato attivato nel Liceo scientifico “Filippo Lissana” di Bergamo.

Questo è il primo anno in cui le classi sperimentali si presenteranno alla maturità con questa didattica digitale: nuova didattica applicata alle tecnologie. Hanno eliminato i libri di testo personali e hanno creato una libreria di classe. Con l’aiuto dei Tablet (didattica costruita ad hoc) in classe creano “il loro libro” e cercando fonti valide via web o su altri supporti cartacei. In questo modo si sviluppa un meccanismo naturale di condivisione e coesione che facilita le interazioni tra studenti anche di diversi istituti.

La piattaforma è divisa in 3 punti:

• Class Management: il Registro Elettronico è composto da un Registro di Classe (per le assenze, le note, ecc…) e da un Registro Insegnanti (per le assenze, i voti, ecc…).
• Curriculum mapping:  integra  il cloud computing e applicazioni come Dropbox permettendo così agli insegnanti di scambiarsi esperienze di insegnamento e di apprendimento.
• Learning management: raccoglie i “libri di classe” (costruiti insieme dagli alunni) e la Wikiscuola (creata con Wikimedia).

Una volta terminata la fase di sperimentazione, questo progetto open source potrà essere acquisito da tutti gli ordini e gradi scolastici, dalla scuola primaria ai licei in modo da facilitare tutti i passaggi burocratici e la compilazione dei contenuti. La versione definitiva sarà disponibile per l’inizio dell’anno scolastico.

Foto di @microtip

Dopo alcuni interventi da parte del pubblico ecco lo speech di Bonaventura Di Bello: L’utilizzo di WordPress come strumento di ebusiness e Internet Marketing e in generale per progetti di self-marketing e marketing e per contenuti da monetizzare. Grazie alla sua flessibilità e ad un’ interfaccia intuitiva da imparare WordPress può diventare un importante strumento di guadagno. Oltre alle già conosciute affiliazioni, agli strumenti Google Adsense, oggi si possono ottimizzare le strategie sul web anche curando video sharing, link sharing, link buinding e article marketing. L’intervento è breve, forse troppo generico e si conclude con un appunto sul Profit Theme.

Finita la pausa pranzo, ecco sul palco Salvatore Laisa che ci parla di come “Ajaxare WordPress“. Il CMS aiuta sensibilmente nello sviluppo di siti web dinamici, essendo però un sistema basato sui linguaggi lato server non offre l’immediatezza e la reattività di molte applicazioni web e non che siamo ormai abituati a utilizzare. Ecco perchè è utile l’integrazione con Ajax.

Laisa, nonostante l’argomento molto tecnico, è riuscito a tener viva l’attenzione di tutti con la sua simpatia e delle slide preparate ad hoc che ci offrono spunti e stringhe di codice molto interessanti.

Ed ecco Alessio Luparelli che ci mostra come gestire con WordPress le Tab di Facebook. I social Network sono ormai parte integrante del web, e le aziende ne devono fare una questione di vita perchè ogni singolo Tweet, ogni Like, ogni Pin può portare ad una monetizzazione.

L’ultimo intervento della giornata è di Francesco Langiulli che descrive un caso di successo di una community creata con WordPress Multiuser integrato con il forum bb-press e che, mendiante l’ausilio di diversi plugin e customizzazioni, permette agli iscritti del “network” di collaborare nella stesura di progetti di architettura.

Così è terminata la 5° edizione del WordCamp di Milano, tra applausi, commenti e la grandine che, a tratti, ha impedito l’ascolto degli oratori. Speriamo di poter essere presenti anche all’edizione 2013 nonostante Wolly abbia accennato ad alcuni problemi di organizzazione dell’evento.

The post WordCamp Milano 2012 – WordPress non è un CMS per blogger appeared first on A Sort of Code.

Il backup di WordPress, effettuato regolarmente, può essere d’aiuto per evitare la perdita dei contenuti di un blog. Questo ci permetterà di essere immediatamente operativi grazie al ripristino del nostro lavoro.

Per realizzare un backup completo di un blog dovremo effettuare il salvataggio di tutti i file e del database.

I file comprendono tutte le parti della nostra struttura e dell’aspetto estetico come ad esempio il core di WordPress, i plugin, i temi, le  immagini e altri media caricati. Il database comprende invece i dati inseriti come post, pagine, commenti e qualsiasi dato che il sistema crea per funzionare.

Ogni quanto tempo effettuare un backup?

Il tempo varia in base alle proprie esigenze. Per essere sicuri di non perdere nulla bisogna effettuarlo ogni volta che si eseguono aggiornamenti di WordPress o dei plugin e si inseriscono o modificano contenuti.

Molti gestori hosting offrono un servizio un backup automatico e programmato gestibile direttamente dal pannello di controllo del cliente. Vediamo ora come realizzarlo manualmente nel caso questo servizio non fosse disponibile.

Eseguire il backup del database attraverso phpMyAdmin

PhpMyAdmin è un’applicazione Open Source scritta in PHP che serve per semplificare la gestione dei database MySQL. Attraverso l’interfaccia web è possibile gestire un database direttamente dal browser collegandosi all’indirizzo fornito dal gestore dello spazio hosting.

Analizziamo nel dettaglio i passaggi da fare:

Accedere con le proprie credenziali all’interfaccia web di phpMyAdmin.
Selezionare la voce Database dal menu superiore.

Scegliere il database di cui vogliamo fare il backup.

Entrare nella voce Esporta.

Selezionare tutte le tabelle e controllare che il formato di esportazione sia SQL.
Spuntare “aggiungi DROP TABLE”. Questo ci permetterà di sovrascrivere un database esistente.
Spuntare “aggiungi IF NOT EXISTS”. Questo previene errori durante l’importazione nel caso esistesse già la tabella.

Nella sezione Dati, la spunta di Inserimenti completi è facoltativa.

Assicurarsi che la compressione sia impostata su Nessuno.

Cliccare il bottone esegui e partirà il download del backup del vostro database.

Salvare i file presenti sull’ftp

Come ultimo passaggio bisogna salvare i file presenti sull’ftp. Per poterli scaricare è necessario collegarsi attraverso un client ftp come filezilla e salvarli localmente sul computer. Molto importante è assicurarsi di scaricare il file .htaccess in modo da salvare le regole del server che WordPress o i plugin hanno creato.

Plugin per configurare backup di WordPress automatizzati

Se il processo di backup può sembrare lento e macchinoso è possibile automatizzarlo attraverso l’installazione di plugin che permettono di salvare il database con un click e di spedirlo ad una casella mail con la possibilità di impostare invii programmati, salvataggi su ftp esterni o direttamente in Dropbox.

Ecco alcuni plugin:

• Wp-db-backup
• Vaultpress
• Vackupbuddy
• Wpb2d
• Backwpup

Per il nostro blog abbiamo deciso di utilizzare Wp-db-backup, ma l’importante non è tanto la scelta del plugin quanto ricordarsi di effettuare sempre il backup.

The post Come fare il backup di WordPress appeared first on A Sort of Code.

Google Analytics di default ci fornisce informazioni sulla posizione geografica dei nostri visitatori, sul sistema operativo e sul browser che usano, sul tempo di navigazione.

Ma come possiamo scoprire qual’è l’orario in cui gli utenti preferiscono visitare il nostro sito?

Come creare rapporti personalizzati per scoprire gli orari e i giorni di punta delle visite

Ottenere dati relativi agli orari e ai giorni della settimana in cui le visite al sito sono maggiori è molto semplice:

• Entriamo nel menù Rapporti personalizzati e selezioniamo + Nuovo rapporto personalizzato.
• Nel Nome rapporto possiamo mettere un nome rappresentativo, in questo caso noi abbiamo scelto “Periodicità”. La parte sottostante riguarda le schede dei contenuti che possono essere più di una. Gestiremo da una parte i giorni della settimana e dall’altra gli orari.
• Nella prima scheda inseriamo il nome “Giorno”.
• Alla voce Tipo selezioniamo Esplorazione che ci permetterà di visualizzare i dati sia come sequenza temporale che come tabella per il confronto. (Tabella piatta mostra solo la tabella).
• Gruppi metriche vuole un titolo che identifichi le metriche per distinguerle, ma nel nostro caso, siccome il gruppo è solo uno, possiamo rimettere “Giorno”. La prima metrica da inserire cliccando + aggiungi metrica è Visualizzazioni di pagina, seguito da Visite e infine da Tempo medio sul sito. Tutte e tre le voci potete trovarle nel menù a tendina Visitatori. Per fare prima potete scrivere nel campo di ricerca direttamente il nome. Ovviamente questi campi possono essere variati in base alle vostre esigenze.
• Al campo Dimensione visualizzazioni dettagliate va assegnato semplicemente Giorno della settimana che trovate nel menù a tendina Altro.
• Nel nostro caso non abbiamo bisogno di filtri ma se per il vostro sito dovete bloccare il conteggio di particolari visitatori o altro, potete inserirli qui.
• L’ultima funzione è Profili aggiuntivi. Se gestite più profili e se un rapporto personalizzato vi può tornare utile anche per gli altri, non dovete fare altro che aggiungerli.

Ora non ci resta che applicare lo stesso procedimento per la scheda dell’orario.

Selezionare + Aggiungi scheda rapporto e inserire il nome “Ora”. L’unica differenza che avrà con le indicazioni precedenti sarà il campo Dimensione visualizzazioni dettagliate al quale andremo a dare la dimensione Ora del giorno che si trova nel menù a tendina Altro.

Salviamo le nostre impostazioni e andiamo a vedere il risultato.

Ricordatevi, nella conversione da numero a giorno, che lo 0 corrisponde alla Domenica, 1 al Lunedì, 2 al Martedì, e così via.

La tabella dell’orario è sicuramente molto più chiara ma fate attenzione alla provenienza del vostro target: se avete molti visitatori provenienti dall’America, non stupitevi nel ritrovare picchi di visualizzazioni alle 4 di mattina. Analytics fa riferimento all’orario (fuso orario) impostato durante la creazione del profilo.

Imparare a leggere e a gestire queste informazioni è fondamentale per comprendere se stiamo raggiungendo i nostri obbiettivi. Ci aiuterà anche a pianificare le uscite degli articoli, degli interventi sui social o altro in base all’orario e al giorno in cui potremmo avere più pubblico.

Potete utilizzare lo stesso metodo per ricavare dati incrociati o statistiche particolari che di default non vengono forniti.

The post Rapporti personalizzati di Google Analytics: quali sono gli orari e i giorni in cui si ottengono maggiori visite? appeared first on A Sort of Code.

Come funziona un crawler

Un crawler – altrimenti detto robot, spider o bot – è un software che, in modo sistematico, cerca e analizza contenuti testuali all’interno una rete per conto di un motore di ricerca allo scopo di inserirli in un indice consultabile. Normalmente questi software cercano di scovare il maggior numero possibile di dati  da catalogare ed è quindi opportuno indirizzare le loro scansioni.

Come sappiamo infatti, molto spesso all’interno di un sito sono presenti pagine che non si vuole appaiano nei risultati dei motori di ricerca. Il file robots.txt ci aiuta nel compito di regolamentare le visite dei crawler.
La prima cosa che fa uno spider quando visita un indirizzo è cercare il file robots.txt nella directory principale. Una volta trovato, ne legge il contenuto e ne segue le indicazioni, sempre a patto che non si tratti di malware robots perché in tal caso il file verrebbe ignorato.

Essendo un file pubblico possiamo facilmente intuire che il suo scopo non è nascondere informazioni quanto renderle o meno indicizzabili.
robots.txt non dispone di un vero e proprio standard, almeno non sulla carta. Alcune aziende però, come Google, Yahoo e Microsoft avevano iniziato a muoversi in questa direzione già qualche anno fa includendo il supporto al wildcard, alle sitemaps, ai meta tags, ecc…

Creare un file robots.txt

Per creare un robots.txt non serve altro che un editor di testo basilare, come il blocco note di Windows. I campi fondamentali da includere sono l’User-agent e la regola ad esso applicata.

L’User-agent non è altro che il nome del crawler: googlebot per Google, slurp per Yahoo!, scooter per Altavista, ecc… Solitamente anziché specificare un singolo nome si preferisce inserire un asterisco ad indicare che tutti i crawler devono seguire le regole riportate.

I comandi che possiamo dare ai bot sono Allow (permette l’indicizzazione) e Disallow (impedisce l’indicizzazione), ma dato che di default gli spider analizzano ogni cosa, disallow è  il più utilizzato tra i due. Nel file possiamo includere anche l’url della sitemap, ottenendo un codice di questo tipo:

User-agent: *
Disallow:

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

Con questo comando si specifica che tutti gli spider (User-agent: *) devono indicizzare l’intero sito (“Disallow: ” che equivale a “Allow= /” dove / indica tutto il contenuto della root).
Per ogni User-agent è possibile specificare più regole ognuna delle quali deve essere posta su una differente riga:

Scrorretto:

User-agent: *
Disallow: /cartella1/ /cartella2/

Corretto:

User-agent: *
Disallow: /cartella1/
Disallow: /cartella2/

In presenza sia di comandi generici che specifici, un crawler seguirà sempre quelli più specifici ignorando gli altri:

User-agent: *
Disallow: /cartella1/
Disallow: /cartella2/

User-agent: googlebot
Disallow: /cartella3/

Anche se non si hanno particolari esigenze o si desidera indicizzare l’intero sito è comunque consigliabile creare sempre il file robots.txt; prima di tutto per evitare errori 404 da parte del log del server per il file mancante e in secondo luogo per una questione di chiarezza verso il crawler.

Una volta creato va inserito nella root del sito. Per controllare che il file sia stato caricato correttamente controllare l’indirizzo www.miosito.it/robots.txt (/robots.txt si trova sempre dopo l’estensione del dominio).

Il file robots.txt è un’alternativa sbrigativa e meno precisa al meta tag robots capace invece di evitare l’indicizzazione di una pagina senza per questo bloccare la distribuzione del link juice (valore distribuito sui link in uscita che comprende il PageRank).

<html>
<head>
<title>...</title>
<meta name="robots" content="noindex, follow">
</head>
 

Esempi di comandi

Indicizzare l’intero sito:

Disallow: 

Inserendo uno slash ( / ) dopo Disallow si esclude l’intero sito dall’analisi dei crawler:

Disallow: /

Per evitare l’indicizzazione di una cartella e del suo contenuto bisogna indicarne il percorso:

Disallow: /documenti/

Per escludere una pagina la dicitura è la stessa. Il percorso deve essere corretto: nell’esempio che segue, il file è nella root:

 Disallow: /pagina.html

Per esclude uno specifico file inserito in una cartella:

 Disallow: /immagini/foto.jpg

Utilizzare un asterisco per indicare sequenze di caratteri corrispondenti. Nell’esempio si blocca l’accesso a tutte le sottodirectory che iniziano con “privato”:

Disallow: /privato*/

Sempre con l’utilizzo dell’asterisco blocco l’accesso a tutti gli URL che presentano un punto interrogativo tra due stringhe:

Disallow: /*?

Per specificare la corrispondenza della fine di un URL, utilizza il carattere $. Nell’esempio si bloccano tutti gli URL che terminano con .jpg:

Disallow: /*.jpg$

Utilizzare Disallow in combinazione con Allow per evitare indicizzazioni di pagine duplicate o non idonee. Ad esempio se nell’url di una pagina il punto interrogativo ( ? ) indica un ID di sessione, e quindi lo si vuole escludere dall’indicizzazione, ma allo stesso tempo è presente in indirizzi di pagine che si vogliono includere, è necessario indicare la seguente istruzione:

User-agent: *
Allow: /*?$
Disallow: /*?

Con questo comando bloccheremo qualsiasi indirizzo che presenterà un punto interrogativo compreso tra due stringhe mentre consentiremo l’indicizzazione di quelli che termineranno con quel carattere.

Strumenti per analizzare o creare un robots.txt

Google Webmaster Tools offre diversi strumenti per la gestione del file robots.txt e il controllo dei risultati delle scansioni dei crawler.

• Per creare da zero il file è sufficiente compilare il modulo preimpostato che trovate nella sezione Configurazione sito / Accesso crawler -> Genera file robots.txt, indicando regole specifiche per ogni User-agent
• Per vedere, invece, il file associato automaticamente ad un sito già inserito in Webmaster Tools seguire il percorso Configurazione sito / Accesso crawler -> Analizza robots.txt
• Per trovare eventuali errori di scansione del sito visitare la pagina Diagnostica / Errori di scansione
• Poiché googlebot non supporta direttamente il comando delay, per modificare il tempo impiegato per la scansione del sito bisogna modificare i parametri nella sezione Configurazione sito / Impostazioni -> Velocità di scansione. Con tempo di scansione si intende la velocità con cui googlebot invia le richieste durante la procedura di scansione e non la frequenza con cui esegue questa operazione. Di default Google determina la velocità consigliata in base al numero di pagine del sito

Plugin per WordPress

Come sempre WordPress viene in nostro aiuto con diversi plugin più o meno completi:

• iRobots.txt SEO è un plugin ampiamente customizzabile che genera un file robots.txt virtuale
• KB Robots.txt include semplicemente un box dove scrivere i comandi per i crawler
• WordPress SEO by Yoast questo plugin gestisce sia il file robots.txt che l’indicizzazione dei singoli post e pagine attraverso il meta tag robots

The post Robots.txt e Google Webmaster Tools appeared first on A Sort of Code.

Web Clip è una funzione di Safari per iOS grazie alla quale è possibile aggiungere un’icona – la Apple Touch Icon – alla SpringBoard dei dispositivi touch della casa ed avere così un  collegamento alla pagina web desiderata (come i segnalibri del browser).

L’icona assegnata di default è lo screenshot della pagina e si crea automaticamente cliccando il simbolo “+” o, nei dispositivi piu recenti, l’icona a forma di freccia presente nel browser e selezionando “Aggiungi a Home”. È possibile inoltre scegliere il titolo che identifica l’icona.

Questa funzione è nata per le web app: hanno l’aspetto delle applicazioni in realtà sono collegamenti personalizzabili ad una pagina web.

Aggiungere le icone personalizzate

Il funzionamento è molto simile all’utilizzo di una favicon ma specifico per i dispositivi Apple.
Di default il sistema cerca nella root del sito il file chiamato “apple-touch-icon.png” e, se presente, verrà utilizzato per creare l’icona. In alternativa lo si può richiamare direttamente all’interno dell’head nel codice html.
Per farlo si utilizza il tag <link /> specificando nell’attributo rel “apple-touch-icon” e nel href il percorso “nome-icona.png".

Codice generale

<link rel="apple-touch-icon" href="nome-icona.png"/>

All’icona “apple-touch-icon.png” verrà applicato in automatico un effetto lucido.
Affinché  Safari iOS non assegni alcun effetto è sufficiente sostituire il nome “apple-touch-icon.png” con “apple-touch-icon-precomposed.png”.

Di norma la dimensione dell’icona è di 57x 57 pixel, ma è possibile ridimensionarla in base alla differente risoluzione dei dispositivi aggiungendo l’attributo sizes:

Codice con attributo sizes

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

La funzione Web Clip è disponibile dalla versione iOS 1.1.3 in poi mentre la possibilità di escludere tutti gli effetti acquisiti di default è possibile dalla versione iOS 2.0. Infine, l’adattamento delle dimensioni dell’icona alle differenti risoluzioni è disponibile dalla versione iOS 4.2.

Per facilitare la creazione delle Apple Touch Icons esistono siti web – come Flavorstudios – che permettono di generare icone da un’immagine.

Con piccoli accorgimenti è possibile utilizzare queste icone anche per i dispositivi dotati del sistema operativo Android.

Potete scaricare il pacchetto che abbiamo creato e usarlo come base di partenza per creare le vostre Apple Touch Icons.

Download Apple touch icon

The post Come personalizzare le Apple Touch Icons appeared first on A Sort of Code.