In questa settimana di no-notebook mi sono dedicato a rimettere ordine le mie cose (qualcuno gridava al miracolo). È così che riscopro un piccolo museo delle anticaglie da cui estraggo il mio primo scanner, un Mustek 1200CP. Dopo averlo ripulito dai diversi strati di polvere che lo ricoprivano mi trovo davanti al fatto che su Windows XP non ha nessuna intenzione di funzionare. Ho, quindi, tentato di farlo lavorare su Ubuntu e, contro ogni mia aspettativa, ci sono riuscito! Anzi, è stato ancora più facile di quello che pensavo.

Per prima cosa scarichiamo i file del progetto SANE (Scanner Access Now Easy), digitando da terminale:

sudo apt-get install sane sane-utils

e quindi controlliamo che il nostro scanner sia rilevato:

sane-find-scanner -p

Se nel testo che compare nel terminale è presente il seguente,

# Your Mustek parallel port scanner was detected.  It may or
# may not be supported by SANE.  Please read the sane-mustek_pp
# man-page for setup instructions.

significa che lo scanner è stato riconosciuto, bisogna svolgere solo due piccoli passaggi per configurare SANE correttamente. Primo: modifichiamo il file dll.conf:

sudo gedit /etc/sane.d/dll.conf

in cui cercheremo la riga contenente mustek_pp ed eliminiamo il carattere #, quindi salviamo e chiudiamo. Infine bisogna informare SANE del modello del nostro scanner:

sudo gedit /etc/sane.d/mustek_pp.conf

scorriamo fino in fondo al file ed eliminiamo il carattere # antecedente la riga del nostro modello, nel mio caso scanner Mustek-1200CP 0x378 cis1200.

A questo punto è sufficiente lanciare Gimp (Applicazioni > Grafica > GIMP) e dal menù File scegliamo Acquisizione > XSane > Device Dialog. Si aprirà la finestra di dialogo per effettuare le scansioni: ecco come appare nel mio disordinato desktop:

Clicca sull’immagine per ingrandire

Sono quasi commosso…

- Warning: Divide by zero.

Technorati tag: scanner, Mustek, 1200CP, Ubuntu

Questo articolo è stato definitivamente spostato sul mio nuovo blog, lo puoi trovare al link:

Creative MuVo TX: No music

Mi scuso se ho arrecato disagio a qualcuno.

Questo articolo è stato definitivamente spostato sul mio nuovo blog, lo puoi trovare al link:

Formattare una penna USB (e non solo) con Ubuntu — viklog

Mi scuso se ho arrecato disagio a qualcuno.

Ultimamente, nel mio vagabondaggio sul web, ho scoperto un nuovo header che va molto di moda e che mi piace molto. In pratica l’header contiene, in alto a destra, i link principali del sito. Un esempio è l’header del sito di Mozilla. Ho inoltre notato che l’ultimo urlo è l’uso del nero e dei grigi scuri.Spiando un po’ di CSS e con l’ausilio di alcune guide sono riuscito a riprodurre questa nuova moda. Il risultato finale è visibile qui sotto:

Clicca sull’immagine per ingrandire

Vediamo come si fa.

Passo 0: le regole di base

Ogni foglio di stile che si rispetti inizia con le seguenti regole:

body, html
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	border: 0;
	margin: 0;
	padding: 0;
	background-color: #ededed;
        /* Dopo vedremo perché questo colore  di sfondo */
	color:#000000;
}

Passo 1: header-conteiner

Costruiamo un contenitore dell’header in modo tale che il vero header sia al centro della finestra. E’ semplicissimo:

div#header-container
{
    background-color: #000000;
    /*Come sfondo ho scelto il nero */
    text-align: center;
    margin: 0;
}

Passo 2: header

Ora il vero header: lo disegneremo in modo tale che abbia una larghezza minima e una massima. Le regole fondamentali da usare in questo caso sono max-width e min-width. E’ risaputo che queste regole non sono rispettate da IE. Per risolvere a questo problema si usano (purtroppo) i controlli ActiveX di IE: ho utilizzato questa guida.

div#header
{
   min-width: 750px;
   max-width: 900px;
   /* max-width in IE */
   width:expression((document.body.clientWidth >= 900 ? "900px" :
        (document.body.clientWidth <= 750 ? "750px" :
         document.body.clientWidth + "px")));
   text-align: left;
   margin: 0 auto;
   padding: 0;
   border-left: solid 1px #666;
   border-right: solid 1px #666;
}

Ho utilizzato come larghezza minima 750 pixel (meno di così non mi ci sta più nulla!) e massima 900 pixel. I bordi a sinistra e a destra sono necessari per mostrare quali sono i limiti sinistro e destro del contenuto reale. L’uso di expression è di semplice comprensione: se la larghezza della finestra di IE (che ci viene restituita da document.body.clientWidth) è maggiore di 900 px allora imposterà la regola width a 900px, se è minore di 750 la imposterà appunto a 750, altrimenti se il valore è compreso fra 750 e 900, verrà usata la dimensione attuale della finestra. Purtroppo non ho modo di testare che questo controllo funzioni anche su IE 4 o 5.

Passo 3: il titolo

Ora dividiamo in 2 parti l’header. A sinistra mettiamolo il titolo e a destra, dopo, metteremo i link. Per il titolo ho preferito usare un immagine (anche se è sempre consigliato usare un tag <h1>) di dimensione 200×50 px, con un font casuale. Il testo è stato riempito con un gradient da #ededed (questo spiega il richiamo dello sfondo) a #cccccc.

div#header_title
{
	padding-left: 27px;
	position:relative;
	float:left;
}
img { border:0; }

Passo 4: La barra di navigazione

Questa è la parte un po’ più difficile. Vogliamo che i link appaiano similmente a dei pulsanti, da destra verso sinistra. Per prima cosa creiamo il solito contenitore per posizionare la barra a destra.

div#header_nav
{
   position:relative; /* in realtà non necessario */
   float:right;
   width: 525px;
   margin: 0;
   padding: 0;
}

La larghezza fissa è 525px perché ogni “pulsante” lo imposteremo di dimensione 85px. Io nell’esempio ho 5 link, più margini interni e esterni che modificano la reale dimensione, si arriva a 525px. Per fare la barra si usa un elenco puntato:

div#header_nav ul
{
    display: block;
    margin: 0 auto 0 auto;
    padding: 0;
    list-style: none;
}

La regola display:block trasforma (detto male!) il nostro ul in un blocco, praticamente in un div. Ora inseriamo gli elementi li

div#header_nav li
{
   list-style: none;
   display: inline;
   margin: 0;
   padding: 0;
   text-align: right;
   font-size: 12px;
}

La regola display:inline fa si che i vari elementi dell’elenco sia visualizzati in orizzontale, uno accanto all’altro.

Passo 5: i link

Ora trasformiamo i “pulsanti” in veri link. Io ho scelto i seguenti colori:

• Il link selezionato è rosso scuro(a.selected): #900020;
• Al passaggio del mouse il link diventano color arancione(a:hover): #CC5500;
• Un leggero bordo a sinistra di ogni “pulsante” ne facilità la distinzione.

div#header_nav li a {
    display: block;
    float: right;
    margin: 0;
    padding: 36px 9px 7px 9px;
    width: 85px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-left: solid 1px #333;
}
div#header_nav li a:hover {
    background-color: #CC5500;
}
div#header_nav li a.selected {
    background-color: #900020;
}

Passo 6: clear-div

Purtroppo si rende necessario, a causa delle regole float:left e float:right, l’uso di un div vuoto con la regola clear:both.

.clear { clear:both; }

Non utilizzare questo div ha conseguenze catastrofiche sul risultato!

Ecco fatto! Qui c’è un esempio completo, con relativo foglio di stile. In un prossimo post vedremo anche come creare un corpo del sito adatto e un footer.

Segnalatemi problemi o errori (io l’ho provato con IE 6&7, Firefox 2, Opera e Safari per XP), soprattutto se qualcuno prova la pagina con IE datato (4 o 5) su cui ho forti dubbi sul corretto funzionamento.

- Warning: Divide by zero.