Cliente: Bimind

Lavoro: realizzazione del sito web aziendale della Bimind S.n.c. specializzata nella progettazione e realizzazione  di software gestionale.

Il sito è stato realizzato facendo uso del CMS Open Source Joomla che permette la completa gestione dei contenuti come testi, immagini e allegati. Sono stati inoltre installati e configurati i seguenti componenti:

• Joom!Fish per la realizzazione del sito web in più lingue
• noixACL per la realizzazione di aree riservate con la gestione avanzata di utenti o di gruppi di utenti

Tecnologie: XHTML, PHP, MySQL, Javascript (JQuery)

Web design: Eugenia Faini

Bimind is a post from: Simone Volpini

Continua a leggere

• Nel mio piccolo ci provo anch’io …
• Subissati
• Cristyle
• Faliero Tamburi
• Borghi delle Marche

Analizzando le statistiche di alcuni siti web realizzati, ho potuto notare che c’è ancora un folto numero di utenti che utilizza Internet Explorer 6 per navigare: in media, una percentuale che si aggira tra il 10% e il 20%. Nonostante si abbia la possibilità di aggiornarlo alla versione 8 gratuitamente, dopo il dichiarato abbandono da parte di YouTube (Google) e dopo il funerale ormai celebrato, c’è chi si ostina ad utilizzarlo regolarmente.

Ho così deciso di “scopiazzare” YouTube, che dai primi di Marzo si presenta in questo modo (solo per gli utenti di IE6 o versioni precedenti):

Quindi da oggi anche nel mio sito appare un messaggio simile.

Nel mio piccolo ci provo anch’io … is a post from: Simone Volpini

Continua a leggere

• Bimind
• CSS, PNG, trasparenze (parte 2)

Da qualche giorno sto provando il servizio gratuito di storage remoto Dropbox, per archiviare o fare dei backup online dei vostri file e sincronizzarli fra più PC. L’utilizzo è veramente semplice sia per Windows che per Linux ed in versione free offre fino a 2GB di spazio di archiviazione.

Dal sito ufficiale scaricate Dropbox per Windows, Mac, Linux (.deb, .rpm o direttamente i sorgenti) o iPhone e procedete all’installazione. Per Linux, una volta completata la procedura di installazione, è necessario effettuare un nuovo login al sistema e poi dovrete far partire il programma che potete trovare sul menù principale sotto “applicazioni -> internet”.

Al primo avvio create un nuovo account indicando nome, email e password e scegliete la dimensione dello storage con taglio gratuito di 2GB, o da 50GB e 100GB a pagamento (a partire da circa 10 dollari al mese).

Completata la procedura verrà creata una directory Dropbox sul vostro PC e potrete iniziare ad utilizzare il vostro storage remoto. Avrete la possibilità di creare nuove directory o copiarvi dei file ed in maniera trasparente tutto il contenuto verrà automaticamente copiato anche sui server Dropbox.

Se avete un secondo PC, potete effettuare anche in esso un’installazione del software, indicando la vostra username e password in modo tale da utilizzare l’account precedente. Anche in questo caso verrà creata la nuova directory Dropbox sul vostro sistema e verrà automaticamente sincronizzata con il contenuto dello storage remoto. In questo modo potete trasferire o archiviare i vostri lavori, documenti, mp3 o film (spazio permettendo) in modo molto semplice tra casa e ufficio, senza perdere niente.

Dal sito web potrete sempre consultare e monitorare il vostro spazio ancora a disposizione, verificare tutte le operazioni eseguite (copia, cancellazione o creazione di file o directory) ed inoltre potrete condividere alcune directory con altri utenti iscritti al servizio Dropbox.

Ovviamente la sincronizzazione tra PC e i server Dropbox è legata strettamente alla dimensione dei file ed in particolare alla vostra connessione ad Internet.

Dropbox e storage remoto is a post from: Simone Volpini

Continua a leggere

• Facebook, privacy e Paperopoli
• Academic BarCamp
• del.icio.us
• Twitter

Committente: capolinea.it

Cliente: Subissati

Lavoro: sito web istituzionale dell’azienda Subissati di Ostra Vetere (AN) specializzata nella progettazione e realizzazione  di case in legno, strutture e coperture civili e militari.

Il sito è stato realizzato facendo uso del CMS Capolinea@Interlink per semplificare la gestione, da parte del cliente, dei contenuti delle pagine (testi, immagini e allegati). Inoltre sono stati sviluppati alcuni componenti javascript (jQuery) per la realizzazione del menù e delle gallerie fotografiche dei progetti e della sezione news.

Tecnologie: XHTML, PHP, MySQL, Javascript (JQuery)

Web design: capolinea.it

Subissati is a post from: Simone Volpini

Continua a leggere

• Bimind
• Cristyle
• Faliero Tamburi
• Borghi delle Marche
• Celì

Il problema si presenta, come solito, con l’accoppiata Windows/Internet Explorer e più precisamente:
- in Windows Vista con IE7 e IE8
- in Windows XP con IE7

Stranamente Internet Explorer 6 ne è esente ed anche IE8 sotto windows XP.

In breve, la funzione jQuery position() applicata ad un DIV a cui è associato uno stile inline del tipo style=”left: -200px”, invece di restituire -200 pixel, da -199 pixel. 1 pixel di differenza. Questo pixel, nel mio caso, compromette lo slide delle foto.

Solo dopo vari tentativi ho capito che l’errore era dato dalla funzione e l’ho aggirato utilizzando le funzioni standard di javascript:

// Soluzione con jQuery, ma con bug
var position = $("#Div").position();
vat x = position.left;
// x errato

// Soluzione standard, esente dal bug
var x = document.getElementById('Div').style.left;

jQuery e bug nella funzione position() is a post from: Simone Volpini

Continua a leggere

• jQuery: seleziona tutto (e deseleziona)
• Menù a tendina orizzontale e jQuery

Cliente: Faliero Tamburi

Lavoro: sito web dell’artista Faliero Tamburi, ex insegnante di Disegno e Storia dell’Arte presso il Liceo Scientifico di Jesi.

Il sito nasce con l’idea di presentare una galleria delle opere realizzate nel corso degli anni dal prof. Tamburi. Si è fatto uso del CMS proprietario per la gestione delle gallerie dei quadri e dei contenuti delle pagine. Prossimamente verrà attivata una nuova sezione per la pubblicazione di alcuni scritti e per segnalare mostre o eventi.

Tecnologie: XHTML, PHP, MySQL, Javascript (JQuery)

Web design: capolinea.it

Faliero Tamburi is a post from: Simone Volpini

Continua a leggere

• Bimind
• Subissati
• Cristyle
• Borghi delle Marche
• Celì

Capita spesso di sentire molti miei conoscenti discutere di Facebook, più o meno preoccupati riguardo il tema della privacy e della condivisione di informazioni personali o foto.

Facebook (da qui FB) è un social network che nasce con lo scopo principale di “condividere“, quindi chi si iscrive lo fa sapendo che alcune sue informazioni potranno essere sbandierate ai quattro venti, o meglio ai quattro capi della rete. E’ però possibile limitare la condivisione di alcuni di questi dati attraverso l’uso degli strumenti che FB mette a nostra disposizione e che possiamo trovare sotto la voce “impostazioni -> impostazioni sulla privacy” .

Cercherò di fare qualche semplice esempio per spiegare come funziona la condivisione delle informazioni e di come limitarla con alcuni accorgimenti, ma per maggiori approfondimenti rimando a questo articolo (in lingua inglese) segnalato da Tommaso qualche giorno fa su FriendFeed.

La spiegazione la faccio a modo mio!

Paperino decide di iscriversi a FB e diventa amico di Paperoga, Zio Paperone, Ciccio e Qui Quo Qua.

Nonna Papera è all’antica e preferisce non far sapere chi è, o cosa fa, ma soprattutto non ama che vengano condivise delle sue foto con degli estranei, così non si iscrive. Però non sa che Ciccio ha inserito su FB proprio una foto in cui compare anche lei e che tutti gli amici di Ciccio potranno vederla.
Nonna Papera potrebbe non scoprirlo mai, oppure se lo verrà a sapere l’unica cosa che potrà fare è chiedere a Ciccio di cancellarla.

Anche se non sei iscritto a Facebook, puoi comunque farne parte a tua insaputa.

Paperino pubblica una foto di lui con Paperoga e Qui Quo Qua, e decide di “taggare” Paperoga: cioè associa la sua foto anche al profilo di Paperoga su FB.
In questa maniera Qui Quo Qua, Zio Paperone e Ciccio potranno vedere la foto inserita da Paperino perchè sono presenti nella sua lista amici, Paperoga la vedrà anche tra le foto del suo profilo, ma la potrà vedere anche Gastone che non è suo amico. Questo perché Gastone compare nella lista degli amici di Paperoga.
Per far si che Gastone non veda la foto, dovrà eliminare il tag di Paperoga, il quale potrà continuare a vederla perché è comunque presente nella lista di amici di Paperino.

Paperino pubblica altre foto e preferisce che Ciccio non possa vederle nonostante sia nella sua lista amici. Così crea alcuni gruppi: “parenti paperi” in cui vi inserisce Zio Paperone e Qui Quo Qua, “amici paperi” in cui vi inserisce Paperoga e “altri paperi” a cui associare Ciccio.
Poi limita la visibilità delle foto del suo profilo ai soli gruppi “parenti paperi” e “amici paperi” escludendo “altri paperi”. In questo modo Ciccio non potrà vedere più vedere la sezione foto.

Creando gruppi di amici è possibile diversificare la visualizzazione dei nostri dati (foto, profilo, video e bacheca) o nasconderli totalmente.

Zio Paperone un giorno cerca sul motore Poople e Pahoo il suo nome per vedere se qualcuno ha pubblicato su Internet alcune sue informazioni e scopre che è possibile trovare la pagina del suo profilo su FB. Rimane scioccato e per paura che la Banda Bassotti possa carpire dati riservati disattiva, sempre nella sezione “impostazioni privacy”, l’elenco di ricerca pubblico (e quindi l’indicizzazione del suo profilo da parte di motori di ricerca esterni a FB).

Con i giusti accorgimenti è possibile limitare le informazioni private a poche persone o a tutti gli iscritti (per esempio per chi usa Facebook dal punto di vista commerciale o di marketing) a seconda delle necessità dell’utente finale. Per chi invece preferisce rimanere nell’anonimato, ne sconsiglio vivamente l’utilizzo.

Facebook, privacy e Paperopoli is a post from: Simone Volpini

Continua a leggere

• Dropbox e storage remoto
• Academic BarCamp
• del.icio.us
• Twitter

“BarCamp è una nonconferenza, così come solitamente intendiamo per conferenza, che nasce dal desiderio delle persone di condividere e apprendere in un ambiente aperto e libero. Il BarCamp è una non-conferenza collaborativa, dove chiunque può ’salire in cattedra’, proporre un argomento e parlarne agli altri, con lo scopo di favorire il libero pensiero, la curiosità, la divulgazione e la diffusione dei temi legati al Web.” (fonte Wikipedia)

Sabato 11 Ottobre ho avuto l’occasione di partecipare all’Academic BarCamp tenutosi all’interno della tre giorni del “Festival dei Blog – conversazioni dal basso 2008″ e organizzato da LaRiCA (Laboratorio di Ricerca Comunicazione Avanzata) e dai corsi di laurea in Scienze della Comunicazione dell’Università degli Studi di Urbino “Carlo Bo”.

Appuntamento alle 10:00 di fronte ad una lavagna bianca nella quale l’unica cosa stabilita sono le aule, gli orari degli interventi e la voglia di condividere. Infatti, solo con l’arrivo dei partecipanti il programma dell’evento inizia a delinearsi e sulla lavagna iniziano a comparire i primi post-it con le indicazioni degli argomenti che verranno trattati. Una procedura che si concluderà durante il corso della giornata.

Si è parlato di Social Media.
In particolare del fenomeno Facebook che negli ultimi mesi in Italia ha raddoppiato la sua utenza, di YouTube e dei suoi video “virali”, dell’uso dei Social Media per lo studio delle lingue, di software OpenSource per la divulgazione scientifica, editoria, e-book e tutto ciò che la discussione “informale” (sempre presente all’interno dei BarCamp) può suggerire.

Un’evento interessante che mi ha dato la possibilità di conoscere e apprezzare le competenze dei nomi noti, e meno noti, della blogosfera italiana e internazionale.

Nei prossimi mesi si terranno altri BarCamp e sicuramente è degno di nota quello che si terrà nel mese di Novembre a Roma (Rome Camp 2008), dove si parlerà di ambiente,
tecnologia e società.

Qui sotto trovate alcuni link sul BarCamp in generale e dell’evento che si è tenuto ad Urbino.

barcamp.org
http://www.barcamp.org/AcaBarCamp-it
http://www.festivaldeiblog.it/
http://conversazionidalbasso.wordpress.com/festival-dei-blog/il-festival-dei-blog-08/
http://festivaldeiblog.ilcannocchiale.tv/

Academic BarCamp is a post from: Simone Volpini

Continua a leggere

• Dropbox e storage remoto
• Facebook, privacy e Paperopoli
• del.icio.us
• Twitter

2) PNG TRASPARENTI (no-repeat)

Generalmente quando si vogliono realizzare delle immagini che possano adeguarsi a qualsiasi colore di sfondo, per esempio i loghi, si usano le GIF trasparenti che permettono di rendere visibile solamente il logo mentre tutto il resto può avere una trasparenza totale.
Il limite di questo formato è dato dalla possibilità di poter utilizzare solamente 256 colori e di non poter realizzare delle semi-trasparenze.

Fortunatamente esiste un altro formato che permette di superare questo problema: PNG con canale alfa. Le immagini PNG possono lavorare con una profondità di colore fino a 48bit (true color) e utilizzare il canale alfa per realizzare delle trasparenze totali o parziali.

Il formato è supportato da tutti i browser recenti ad esclusione di IE6 il quale non è in grado di gestirne la trasparenza. Per aggirare questa problematica si può utilizzare pngfix.js, una funzione realizzata in javascript, che viene applicata a tutte le png inserite nel codice html (<img src=”nomeimmagine.png” />). Io preferisco utilizzare IE PNG FIX, un file con estensione .htc che invece viene inserito direttamente nel foglio di stile come nell’esempio qui sotto:

<style type="text/css">
img {
   behavior: url("pngbehavior.htc");
}
</style>

e che funziona sia per le immagini in linea che per le PNG inserite direttamente nel CSS da utilizzare come sfondi. In questa maniera posso applicare la regola solamente al foglio di stile che realizzo per IE6 (ogni riferimento a versione di Internet Explorer precedenti la 6, non è puramente casuale: li escludo a priori ).
Questa funziona correttamente con la proprietà background-repeat: no-repeat, ma non permette di validare il CSS.

2) PNG TRASPARENTI (repeat-x, repeat-y o repeat)

In questo caso c’è poca da dire, visto che regnano diverse incompatibilità oltre che con IE6 anche con l’ultima versione, IE7. Infatti, se vogliamo utilizzare una PNG trasparente come sfondo di un div possiamo realizzare un’immagine di 1px per 1px (trasparente) e applicarla a tutto il div attraverso l’uso del background-repeat.

Solo che in IE6 le png non vengono ripetute, quindi si potrà vedere solo un unico pixel di sfondo, anche se nel CSS abbiamo inserito la regola corretta con il file .htc.

IE7 a meno che non applichiamo al div una dimensione fissa (o un min-height se vogliamo comunque far rendere il sito adattabile in altezza) si comporta in maniera anomala, creando anche più sovrapposizioni dello stesso sfondo con conseguenti problemi di visibilità dei contenuti del sito.

Se qualcuno ha trovato qualche altro caso interessante, i commenti sono ben accetti.

CSS, PNG, trasparenze (parte 2) is a post from: Simone Volpini

Continua a leggere

• Bimind
• Nel mio piccolo ci provo anch’io …
• CSS, PNG, trasparenze (parte 1)
• CSS e colore di sfondo (background color)
• Migliorare il CSS in 70 passi

Ultimamente mi sono imbattuto nella realizzazione di siti web che facevano frequente uso delle trasparenze, utilizzandole per loghi, immagini o sfondi di alcune porzioni del sito. Ho potuto così approfondire meglio la questione, anche perché ho dovuto affrontare parecchi problemi di compatibilità per cercare di ottenere un sito cross browser.
Cercherò di ricapitolare le varie tipologie di trasparenza e le problematiche del caso, da utilizzare come promemoria anche per me.

1) TRASPARENZA CON I CSS

E’ possibile rendere semitrasparenti porzioni del sito, utilizzando alcune regole da inserire nel CSS. Premetto che questo metodo non permette la corretta validazione del foglio di stile perché fa uso di regole presenti nei CSS3 o proprietarie di Internet Explorer, che sono comunque compatibili con tutti i moderni browser a partire da IE6. Ecco il codice:

div.esempio {
background: #000;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}

Le tre regole vanno utilizzate contemporaneamente e permettono di rendere il div “esempio“, che è stato riempito con il colore nero, semi-trasparente al 70% (0% totalmente trasparente, 100% colore pieno). La prima (filter) vale per IE mentre le altre funzionano correttamente sia per Firefox (o tutti i browser che utilizzano come motore di rendering Gecko) che per Opera o Safari.

La particolarità di questi stili è che l’effetto non viene applicato solo al background del div, ma anche a tutti i suoi contenuti (immagini o testi), facendo diventare tutto semi-trasparente.

Per aggirare questo problema di solito realizzo un div vuoto a cui applicare il colore di sfondo con l’effetto trasparenza, per poi posizionarlo (tramite z-index) al di sotto del div che contiene le informazioni.

Il limite di questa soluzione è che obbliga a lavorare con dei div di dimensione predeterminata con posizionamenti assoluti, visto che il div con la trasparenza non può adattarsi essendo privo di contenuti.

A breve pubblicherò altri due casi di effetti trasparenza, realizzati però attraverso l’uso di immagini in formato png, dove la completa compatibilità cross browser è più difficile da mantenere.

CSS, PNG, trasparenze (parte 1) is a post from: Simone Volpini

Continua a leggere

• CSS, PNG, trasparenze (parte 2)
• CSS e colore di sfondo (background color)
• Migliorare il CSS in 70 passi
• CSS: non si finisce mai di imparare
• Libri sui CSS