Divagazioni nella rete

Ho cominciato a leggere il libro della Sybex, “LPIC-1: Linux Professional Institute Certification Study Guide”, una guida di studio per chi voglia ottenere la certificazione LPI di primo livello.

Il libro è scritto in modo chiaro e con un buon italiano, che dimostra la cura di autore ed editore; non ho trovato errori nemmeno nel contenuto più propriamente tecnico, che sono meno rari di quel che si pensi in questo genere di pubblicazioni. Il libro sembra ragionevolmente aggiornato e all’inizio di ogni capitolo vengono spiegati i punti del programma della certificazione che verranno affrontati. Alla fine di ogni capitolo c’è una mini sessione di esame con argomenti relativi a quanto appena studiato per verificare la propria comprensione.

Se volessi trovare un difetto, ho trovato un po’ discutibile la scelta dei comandi evidenziati in apt-get: ce ne sono di abbastanza avanzati, come “depends”, ma manca proprio quello usato più di frequente, “search”!

Complessivamente però un ottimo libro che mi sento di consigliare a chiunque voglia ottenere la certificazione LPI di livello 1.

Da tempo interventi legislativi incentivano lo sviluppo di siti accessibili, cioè di siti che siano fruibili anche da chi soffra di disabilità come cecità, visione o udito ridotto, incapacità di interpretare correttamente i colori etc.

In molti casi piccole cose come inserire l’attributo alt nelle immagini possono costituire un primo ma semplice passo per migliorare l’esperienza dei visitatori diversamente abili ma sfortunatamente non sempre un immagine si riesce a descrivere efficacemente in una frase. In tali circostanze l’uso di grafiche svg ha il potenziale di migliorare l’accessibilità del nostro sito, in quanto il codice svg è puro testo e i singoli tag, che rappresentano operazioni o gruppi di operazioni, sono descrivibili singolarmente con l’attributo alt.

Ad esempio se volessi inserire un’immagine per descrivere il mio network casalingo potrei usare un codice come <img src=”…..” alt=”il mio network casalingo” /> che produrrebbe l’immagine seguente:

che però non direbbe molto ad esempio a un cieco, il cui sintetizzatore potrebbe dargli solo una descrizione molto sommaria dell’immagine. Le seguenti istruzioni svg potrebbero invece dare un’informazione molto più ricca:

<svg id=”background”
xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”>
<title>My home network</title>
<desc>A graphical description of the lan I have at my home</desc>

<g id=”pc”>
<title>My pc</title>
<desc>The desktop pc I use for my daily work</desc>
<image xlink:href=”pc.png” width=”27″ height=”30″ x=”50″ y=”45″
alt=”a pc icon”/>
</g>

<g id=”router”>
<title>router</title>
<desc>
My exima adsl router.. too bad it does not seem GNU/Linux based
</desc>
<image xlink:href=”router.png” width=”50″ height=”44″ x=”120″ y=”100″
alt=”a router icon”/>
</g>

<g id=”miniserver”>
<title>miniserver</title>
<desc>
An nslu2 acting as a always on miniserver I use for daily backups,
site report creation and so on
</desc>
<image xlink:href=”miniserver.png” width=”30″ height=”41″ x=”200″ y=”40″
alt=”a miniserver icon”/>
</g>

<line x1=”80″ y1=”60″ x2=”190″ y2=”60″
style=”stroke: white; fill: none”
alt=”the pc and the miniserver are connected in the same lan”/>

<line x1=”135″ y1=”60″ x2=”135″ y2=”110″
style=”stroke: white; fill: none”
alt=”and they are connected to internet throught the router” />

</svg>

che in molti browser moderni viene visualizzato come una normale immagine; ad esempio molti utenti che non usano internet explorer vedranno un’altra immagine del mio network qui sotto:

Ma gli utenti di browser testuali o gli utenti diversamente abili potranno in questo secondo caso farsi un’idea molto migliore della mia rete domestica. Già così c’è un grosso vantaggio per loro, ma il guadagno in accessibilità sarebbe molto maggiore per tutti, soprattutto per chi non mastica svg, se gli strumenti di ausilio per diversamente abili fossero in grado di interpretare correttamente i tag svg e di dare un’informazione chiara e succinta all’utilizzatore: qualcuno sa se è così, almeno per qualche apparecchio?

Alla prossima e buone vacanze!

Almeno per i meno artisticamente inclinati, creare palette piacevoli e allo stesso tempo originali per il proprio sito web può comportare un notevole investimento di tempo ed essere fonte di frustrazione: in genere io mi affido molto a siti come color scheme designer o COLORlouvers. Sfortunatamente tali soluzioni, pur indubbiamente utili, ci costringono ad affidarsi ad un sito web esterno e sono poco configurabili secondo le proprie esigenze e preferenze.

Ho però trovato proprio ieri un programma per GNU/Linux, molto semplice ma che può risultare parecchio utile: agave. Purtroppo non esiste una versione per windows… provarlo può essere un’ottima scusa per installare il sistema del pinguino: è divenuto ormai molto semplice e grazie alla tecnologia delle macchine virtuali non si ha nemmeno più l’onere di dovere ripartizionare il disco.

Una volta lanciato, agave si apre con una schermata semplice e familiare:

Con il selettore di mezzo sotto si può scegliere il tipo di palette che vogliamo costruire: monocromatica, a colori complementari, a tre colori etc, mentre con il selettore alla base della finestra si può scegliere la palette da cui pescare il colore iniziale (utile ad esempio per rimanere all’interno dei colori web safe).
Costruire la nostra palette è ora semplice quanto scegliere il colore che più ci aggrada: agave troverà gli altri per noi. È poi possibile effettuare ulteriori aggiustamenti, aumentando o diminuendo i livelli di luminosità e saturazione. Una volta finito, possiamo anche salvare la palette nei preferiti, o semplicemente tenere acceso agave e copiare i colori nei fogli di stile con il copia/incolla o in gimp draggando il colore nell’apposito selettore.

Da provare!

Molti servizi di hosting non garantiscono funzionalità di backup automatico: alcuni effettuano dei backup dei nostri siti con una certa regolarità, ma senza alcuna promessa e se ospitiamo i siti di clienti dobbiamo avere una sicurezza al riguardo. Esistono, è vero, servizi poco costosi di backup, ma necessitano un pieno accesso in lettura al sito e questo non mi piace, tanto più che avere degli importanti file di backup disponibili solo in un server remoto mi innervosisce: un disco sotto la scrivania mi pare un’opzione più sicura e meno “virtuale”.

D’altra parte a meno di avere una forte volontà, se non si automatizza il servizio di backup si rischia di finire con l’avere backup discontinui nel tempo. Fortunatamente l’NSLU2 può venire in nostro aiuto: per chi non lo sapesse si tratta di un mini computer piccolissimo e che consuma pochi watt, ma su cui si può installare una versione customizzata di GNU/Linux che lo trasforma in un vero e proprio mini server.

Grazie al mio NSLU” e a rsnapshot, ho a disposizione un backup giornaliero dei miei siti, su un harddisk a casa mia e senza la necessità del benché minimo intervento: ogni giorno a notte fonda mentre io mi godo il meritato riposo, il mio NSLU2 si connette a internet e scarica una copia dei miei siti. Grazie alla potenza di rsnapshot viene memorizzata una copia dei soli file modificati dalla volta precedente, e viene anche scaricata una copia del database.

Installare rsnapshot sull’NSLU2 è possibile molto semplicemente attraverso il gestore dei pacchetti integrato, ma è preliminarmente necessario abilitare il repository optware, lanciando lo script “setup-optware.sh”: questo script vi permetterà di installare rsnapshot e molti altri programmi interessanti usando il package manager “ipkg”. Installare rsnapshot diventa ora solo questione di scrivere:

ipkg install rsnapshot

A questo punto è necessario editare il file di configurazione /opt/etc/rsnapshot.conf; può sembrare complesso a prima vista ma esiste della buona documentazione che spiega come configurarlo per cui mi limiterò a mostrare i cambiamenti principali apportati al file di configurazione:

...
snapshot_root   /snapshots/
...

questa riga istruisce rsnapshot a mantenere tutti i backup sotto /snapshots

...
interval        daily   31
interval        monthly 12
interval        yearly  2
...

Queste righe istruiscono rsnapshot a effettuare tre livelli di backup, uno giornaliero (mantenendo copia degli ultimi 31 backup giornalieri), uno mensile (tenendo copia degli ultimi 12) e uno annuale (tenendo copia degli ultimi 2). “daily”,”monthly” e “yearly” non hanno alcun significato speciale: sono semplicemente delle parole chiave che ci permettono di dire a rsnapshot che tipo di backup vogliamo effettuare, cioè “snapshot daily” effettuerà un backup giornaliero etc. È però importante che i tipi di backup vengano inseriti nel file di configurazione in ordine di dimensione temporale, cioè prima quelli che vengono chiamati più spesso e poi quelli che vengono processati più raramente.

...
backup              login@mydomain.org:/homedir domain/homedir
backup_script    remote_mysql_backup.sh  domain/mysql
...

l’istruzione backup istruisce rsnapshot di copiare i file loggandosi via ssh al nostro sito con nome utente login e di copiare tali file nella sottocartella domain/homedir. Perché ciò funzioni è necessario che si sia preventivamente configurato un sistema di accesso senza password (ad esempio un sistema di accesso tramite chiavi pubbliche).

backup_script invece istruisce rsnapshot a lanciare lo script remote_mysql_backup.sh e inserire i file generati dentro la cartella domain/mysql; lo script deve collegarsi remotamente ai nostri database e scriverne i dump nella cartella corrente. Questo è lo scheletro dello script che utilizzo io:

#!/bin/sh

umask 0077

ssh login@mydomain.org mysqldump -u dbuser --password=userpassword --all-databases > dbname.sql
# se ci sono altri utenti aggiungi altre righe simili a quella sopra

/bin/chmod 600 dbname.sql

Basterà ora inserire le righe seguenti nel file /etc/crontab:

PATH=/opt/bin:/opt/sbin:/bin:/sbin:/usr/bin:/usr/sbin

10 5  * * * root rsnapshot daily
15 4  3 * * root rsnapshot monthly
35 3  5 1 * root rsnapshot yearly

per avere il nostro backup ogni giorno.

Una delle novità introdotte dall’ultima beta di firefox 4 è il supporto parziale per le transizioni css; considerando che anche safari e chrome le supportanto, questo significa che presto sarà possibile inserire nei nostri siti piccoli ma piacevoli effetti a beneficio di una parte importante dei visitatori, a patto di assicurare un dolce degrado per gli altri.

Per prendere un po’ di dimestichezza con questa funzionalità ho quindi giocato a sviluppare una barra simile a quella  di OSX o di alcune versioni di sistemi GNU/Linux: l’uso delle transizioni css si limita a far sì che quando il mouse si sposta sopra un bottone questo si alzi in modo graduale, quindi sui browser che non le supportano, come firefox 3.6, l’effetto sarà istantaneo ma a parte questo la barra continuerà a funzionare normalmente.

Per capire come funzionano le transizioni css supponiamo di avere il codice seguente:

stile:
a {
   color: black;
}
a:hover {
   color: red;
}

markup:
<a>test</a>

Allora la parola “test” assumerà immediatamente il colore rosso ogni volta che il cursore ci si sposterà sopra; se però aggiungiamo alle proprietà del tag “a” anche l’istruzione

transition: color 2s;

allora i cambiamenti della proprietà “color” saranno graduali e richiederanno 2 secondi.
Ovviamente ci sono varie istruzioni disponibili ma questa è l’idea fondamentale. Semplice no?

Ritornando alla barra, il suo markup è il seguente:

<div id=”dock”>
<div><a href=”#”><img src=”diary.png” /></a><br /><span>Blog</span></div>
<div><a href=”#”><img src=”hard-hat.png” /></a><br /><span>Attività</span></div>
<div><a href=”#”><img src=”photo.png” /></a><br /><span>Album</span></div>
<div><a href=”#”><img src=”envelope.png” /></a><br /><span>Contatti</span></div>
</div>

Anzitutto creiamo la barra orrizontale settando la proprietà “float” dei div interni a “left”. Oltre a ciò settiamo un altezza comune ad essi e facciamo dello spazio nella parte superiore, dove si dovrà alzare l’immagine del bottone; infine centriamo il testo e aggiungiamo un po’ di spazio ai lati:

#dock div {
float: left;
height: 80px;
padding-top: 20px;
margin-left:15px;
text-align: center;
}

Il risultato è una una barra già simpatica, ma senza alcun effetto dinamico. Per ottenere l’effetto dinamico dell’immagine semplicemente cambiamo il valore di padding-top quando il mouse ci passa sopra, usando la pseudo classe :hover. Togliamo anche i bordi blu dalle immagini, ottenendo così la nostra versione dinamica della barra:

#dock div:hover  {
padding-top: 0px;
}
#dock div img {
border: none;
}

Infine dobbiamo aggiungere le regole di transizione come visto prima, solo che non essendo ancora concluso il processo di standardizzazione i browser preferiscono usare proprietà private (ottenute aggiungendo al nome della proprietà il prefisso caratteristico del browser):

-moz-transition: padding-top 0.2s ease-in;
-webkit-transition: padding-top 0.2s ease-in;

Dove abbiamo anche specificato con l’ultimo parametro, lo “stile di movimento” da usare, prendendolo da una delle molte opzioni possibili. A questo punto il grosso è stato fatto: rimangono solo alcuni ritocchini e ci potremo godere la nostra ben meritata barra!

L’NSLU2 è una periferica che permette di esportare via rete chiavette o dischi esterni connessi ad esso tramite le sue due porte usb; grazie al minimo ingombro, la totale silenziosità e il ridottissimo consumo (circa 4 watt, poi ovviamente dipende dall’uso che se ne fa), può rimanere acceso 24 ore su 24, sempre disponibile.

Non male per un apparecchietto che costa intorno agli 80-100 euro, ma tanto oltre a quanto descritto non va: se volete ad esempio condividere una stampante di rete dovete dare mano al portafoglio per comprare un ulteriore prodotto.

A meno che non vogliate sfruttare la potenza del software libero per modellare l’NSLU2 a vostro piacimento.

Esistono infatti varie distribuzioni di GNU/Linux per questa periferica, gli interessati possono trovarle tutte nel sito apposito. Basta installarne una ed ecco che il vostro NSLU2 si trasforma in un mini server totalmente configurabile; con un po’ di fantasia e di necessaria dimestichezza è possibile trasformarlo ad esempio, in un server di stampa, oppure in un semplice web server per il proprio sito personale, o ancora usarlo per effettuare il backup dei propri computer da remoto.

Tra tali distribuzioni, Unslung è probabilmente la più nota e con la comunità più attiva: mantiene tutte le funzionalità del firmware originale senza richiedere alcuna configurazione, risultando quindi la versione ideale per i meno esperti.
Purtroppo la versione di GNU/Linux usata non è aggiornatissima e incorpora software proprietario di proprietà di Linksys.

Io preferisco invece usare SlugOS, che è più leggero, totalmente libero, basato su un sistema aggiornato e con la bellezza di 5000 pacchetti diversi per trasformarlo in quello che vi serve.
Ad esempio io ho ci ho installato transmission e scarico i torrent direttamente da lì, senza dover tenere acceso il mio desktop, con gli ovvi svantaggi di consumo elettrico, produzione di calore e rumorosità; senza contare che il mio NSLU2 è acceso 24 ore su 24, con conseguente riduzione dei tempi di scaricamento.

L’installazione è molto semplice e dettagliatamente documentata nella guida all’installazione; purtroppo è in inglese ma mi riprometto di postare una traduzione italiana presto.

Divertitevi e attivate la vostra fantasia!

Sono felice ed orgoglioso di annunciare che “Divagazioni nella rete” è approdato su “Il Bloggatore”! Per quei pochi che non lo conoscessero, “Il Bloggatore” è un aggregatore di notizie, cioé prende gli articoli dei blog che lo hanno richiesto e, dopo un’accurata selezione, ne pubblica anteprime sul suo sito web.

Così facendo aumenta considerevolmente la visibilità dei singoli blog e fornisce agli utenti finali un comodo portale per accedere a contenuti di alta qualità. L’essere presenti in un’unica pagina facilita inoltre la comunicazione tra blog, permettendo una migliore trasmissione della conoscenza all’interno della comunità dei bloggers.

Le società giornalistiche si sono a lungo autoescluse dal mondo di internet, ma ora hanno recuperato molto terreno e nel futuro giocheranno un ruolo sempre maggiore. Affinché l’informazione indipendente dei blog possa continuare a giocare un ruolo significativo, è mia convinzione che sia necessaria la presenza di forti e seri aggregatori, che non si limitino ad essere veicolo passivo di contenuti, ma aggiungano valore attivo tramite la loro politica editoriale e le loro infrastrutture.

Quindi “hello Bloggatore” a tutti!

È noto che il formato jpeg comprime di solito molto meglio del formato png. La ragione è che quest’ultimo insiste ad evitare qualunque perdita di informazioni, mentre il primo no: di fatto un’immagine codificata in jpeg sarà una buona rappresentazione di quella originale (a meno di insistere per livelli di compressione esagerati), ma non sarà fedele pixel per pixel. Tale libertà aggiuntiva può venire sfruttata per ottenere livelli di compressione di solito irraggiungibili altrimenti.

Sfortunatamente usare il formato jpeg significa rinunciare alla trasparenza, almeno fino a quando non si sarà diffuso il supporto per il formato jpeg2000, cosicché molti webmaster si trovano di fronte alla scelta tra usare un’immagine di peso molto minore ma non trasparente oppure una più comoda immagine trasparente ma dal peso nettamente più consistente.

Su questo interessante articolo ho scoperto che esistono tool per la compressione lossless delle immagini png: non si ha alcuna perdita di informazioni ma si riesce comunque ad ottenere un miglioramento nel peso dell’immagine. Purtroppo è chiaro che insistere con compressioni lossless porterà a dei miglioramenti, ma quasi mai a pesi compatibili con quelli ottenibili dal formato jpeg.

Fortunatamente esistono anche tool che effettuano compressioni lossy (cioè con perdita di informazioni) dei file png e che riescono a raggiungere livelli di compressione talvolta molto interessanti; uno di questi è pngnq che opera attraverso una quantizzazione del colore al fine di poter usare molti meno colori che nell’originale. L’utilizzo è molto semplice: il comando

pngnq -n ncol file.png

produrrà un’immagine png file-nq8.png equivalente a fil.png ma dove vengono utilizzati al massimo ncol colori, e quindi drasticamente più piccola (ncol dovrà essere un numero compreso tra 2 e 256). Nella tabella di sotto potete trovare un’immagine originale e la versione compressa usando 24 colori: come potete vedere si riescono a ottenere ottimi risultati! (i disturbi nell’immagine sono presenti già nell’originale e non sono stati creati dal processo di compressione)

immagine non compressa	immagine compressa
4316 bytes	1000 bytes

Ecco il mio ultimo sito, che ne pensate?

L’ho scritto per due ragazze veramente in gamba, tanto che stanno già vedendo i primi risultati: in bocca al lupone a tutte e due!

ps: per i più curiosi, il sito è basato su drupal, che considero un un cms stupendo: molto flessibile ed elegante.

Ormai quasi tutte le ultime versioni dei browser supportano la proprietà css border-image, che permette di inserire delle immagini come bordi dei box della nostra pagina. Ciò permette di creare con poca fatica simpatici effetti che abbelliranno la nostra pagina per una fetta consistente degli utenti, senza creare problemi di sorta agli altri.

Ad esempio nell’immagine di sotto la cornice è stata creata utilizzando border-image (la foto del fiore è generosamente offerta sotto creative common da Josef F. Stuefer): è importante notare che per i browser che non supportano border-image, la pagina cornice sarà un semplice bordo giallo, senza alcun problema funzionale o estetico.

Per capire come funziona border-image, leggiamo l’istruzione border-image utilizzata nell’esempio appena visto (in realtà accompagnata da identiche istruzioni -webkit-border-image e -moz-border-image perché firefox e chrome preferiscono usare dei nomi privati in quanto il modulo border del css3 non è ancora stato approvato definitivamente dal W3C).

border-image: url(/wp-content/images/border-image-frame.png) 16.5% 19% 19% 16.4% / 30px repeat;

Sembra un’istruzione complessa ma il principio è semplice: border-image-frame.png è l’immagine seguente:

Le quattro percentuali successive sezionano l’immagine con 4 tagli distanti il 16.5% dell’immagine, il 19%, il 19% e il 16.4% rispettivamente dal bordo superiore, quello destro, quello inferiore e quello sinistro, così creando 9 sottoimmagini, corrispondenti ai 4 angoli e i 4 lati:

Quindi i 4 angoli dell’immagine vengono mappati ai 4 angoli del box, eventualmente scalandoli per ottenere un bordo della larghezza voluta (specificata in questo caso da “/ 30px”), mentre i 4 lati del box vengono ottenuti ripetendo la sottoimmagine corrispondente fino a coprire tutta l’area necessaria. Questo comportamento è dovuto all’avere specificato “repeat”; specificando “round” la sottoimmagine verrebbe ripetuta ma anche opportunamente scalata al fine di garantirne la ripetizione per un numero intero di volte; infine specificando “stretch” la sottoimmagine verrebbe scalata fino a coprire tutto il lato corrispondente.

Al fine di garantire un dolce degrado per i browser che non supportano border-image, basta anteporre una riga “border: solid thick yellow;”: nei browser che supportano border-image quest’ultima avrà la priorità, negli altri verrà disegnato un bordo giallo. Quindi il codice css finale per disegnare la cornice è il seguente:

.framed {
     border: solid thick yellow;
    -moz-border-image: url(/wp-content/images/border-image-frame.png)
                                 16.5% 19% 19% 16.4% / 30px repeat;
    -webkit-border-image: url(/wp-content/images/border-image-frame.png)
                                    16.5% 19% 19% 16.4% / 30px repeat;
    border-image: url(/wp-content/images/border-image-frame.png)
                         16.5% 19% 19% 16.4% / 30px repeat;
}