BitTrack » Tutorial

Primi passi con jQuery – 3

Raspo — Mon, 05 Apr 2010 07:00:58 +0000

Oggi, dopo una lunga assenza, continua la guida a jQuery con la terza parte, dove vedremo in quanti modi è possibile interagire con i form HTML tipo input, bottoni, checkbox, etc…

Prima di cominciare

Ricordati di caricare la libreria jQuery nella sezione e di inserire i codici jQuery che vedremo tra poco, all’interno del canonico $(document).ready(function(){ … }); come visto nella prima lezione.

Ottenere il contenuto di un campo

Prendiamo un campo input con id esempio1, vogliamo far sì che, cliccando sul pulsante con id btn1, il contenuto del campo venga letto e mostrato all’utente in una finestra di alert.

Il codice jQuery è:

$("#btn1").click(function(){
    var testo = $("#esempio1").val();
    alert(testo);
});

Che tradotto a parole significa: quando fai click sull’elemento con id btn1, cerca l’elemento esempio1, estraine il valore e salvalo dentro una variabile testo creata sul momento; quindi, mostrami il contenuto della variabile in una finestra di alert.

Da notare l’utilizzo della funzione .val() che scritta così, senza valori tra parentesi, restituisce il valore dell’elemento, quindi il contenuto dell’input in quel momento.

Impostare il contenuto di un campo

Se invece di usare .val() come abbiamo appena fatto, mettiamo una stringa all’interno delle parentesi, la funzione non restituirà più un valore, ma imposterà quello che abbiamo indicato tra parentesi.

$("#btn2").click(function(){
   $("#esempio2").val("");
});

In questo caso, cliccando sul pulsante, il valore del campo viene azzerato, o meglio, viene impostato un valore nullo, che si scrive con due virgolette aperte e chiuse.

Conteggio dei caratteri

Per creare uno script per il conteggio dei caratteri abbiamo bisogno come al solito di un campo input di tipo text e di un area (per esempio uno span) dove inserire il numero dei caratteri.

Ed ecco il codice jQuery:

$("#esempio3").keyup(function(){
    var num = $(this).val().length;
    $("#contatore1").html(num);
});

La funzione .keyup() esegue la funzione tra parentesi ogni volta che viene premuto e rilasciato un tasto.
Tale funzione, crea al volo una variabile num dentro cui inserisce il numero dei caratteri fin’ora inseriti nel campo con id esempio3 a cui faccio riferimento con $(this) perché è l’oggetto del keyup().
In particolare, per prendere il numero di caratteri, prima uso .val(), senza valori tra parentesi, che restituisce una stringa contenente il valore dell’input, successivamente uso .length che restituisce il numero di caratteri della stringa.
Quindi, se fin’ora ho scritto nell’input “prova”, la funzione .val() mi da appunto la stringa “prova” e .lenght mi da 5.
Infine, scrivo il numero dei caratteri dentro lo span con id contatore1 usando il comando .html().

Il funzionamento di .html() è analogo a .val(), l’unica differenza sta nel fatto che la seconda viene usata per i campi input, le textarea, le select e i button, mentre la prima è valida per tutti gli altri tipi di tag html.

Conteggio dei caratteri rimanenti

Per ottenere invece l’effetto countdown dei caratteri rimanenti in un campo input, abbiamo bisogno della stessa struttura HTML dell’esempio precedente con l’aggiunta dell’attributo maxlength=”15″ all’input, dove 15 è il numero massimo di caratteri che vogliamo far inserire.

Codice jQuery:

var max = $("#esempio4").attr("maxlength");
$("#contatore2").html(max);

$("#esempio4").keyup(function(){
    var num = $(this).val().length;
    $("#contatore2").html(max-num);
});

Prima di tutto creo una variabile globale max che corrisponde al contenuto dell’attributo maxlength dell’elemento con id esempio4, che in questo caso sarà 15.
Adesso che so qual’è il numero massimo di caratteri desiderato, lo indico all’utente scrivendolo dentro allo span con id contatore2.

Adesso, sfruttando ancora una volta la funzione .keyup(), salvo dentro alla variabile num creata al volo il numero di caratteri fin’ora scritti nell’input, come visto nell’esempio precedente.

Quindi, scrivo dentro allo span con id contatore2 il numero di caratteri ancora disponibili, calcolato come sottrazione del numero massimo con quello corrente.

Ottenere il valore del radio button selezionato

Adesso vediamo il caso in cui abbiamo una serie di input di tipo radio e al click su un qualche pulsante (tipo quello per l’invio di un email) vogliamo sapere quale radio button è stato selezionato dall’utente.

Prima di tutto, come al solito, va definita la struttura HTML che stavolta dovrà contenere vari input di tipo radio e un altro elemento tipo un link (ma può essere qualsiasi cosa) da usare come pulsante per azionare lo script.


  jQuery
  spacca
  di
  brutto

Uno degli input dovrà avere l’attributo checked=”checked” che indica che è stato selezionato, perché è buona pratica indicare un valore predefinito quando si ha a che fare con i radio button.
Notare che ho aggiunto anche uno span con id result, utile ai soli fini dell’esempio.
Ecco il codice jQuery

$("#btn3").click(function(){
   var selezione = $("#esempio5 input:checked").val();
   $("#result").html(selezione);
});

Prima di tutto individuo l’elemento da cliccare per avviare la funzione, in questo caso si tratta di un button con id btn3.
Dopo che è stato cliccato, salvo dentro ad una variabile “selezione” il valore ( .val() ) dell’input selezionato ( input:checked ) contenuto dentro all’elemento che ha id esempio5 ( #esempio5 ).
Fatto ciò, ho il contenuto del radio button scelto dentro alla variabile e posso decidere cosa farne; in questo esempio lo mostro all’utente scrivendolo dentro allo span con id selezione.

Controllare se una checkbox è stata selezionata

Se nel nostro form abbiamo invece bisogno di controllare se una checkbox è stata selezionata o meno, possiamo fare come segue.
Codice HTML:


  Controllo sulla checkbox

Codice jQuery:

$("#btn4").click(function(){
  if( $("#esempio6 input").is(":checked") ){
    //Cosa fare se è stato selezionato
   $("#result2").html("Certo, non lo vedi?");
  }else{
    //Altrimenti fai questo
   $("#result2").html("No");
  }

Tradotto a parole: quando faccio click sull’elemento con id btn4, se l’input che si trova dentro all’elemento con id #esempio6 possiede la pseudo-classe :checked (cioè è stato selezionato), cerca l’elemento con id #result2 e scrivi al suo interno “Certo, non lo vedi?”; in caso contrario scrivi “No”.

Ovviamente quando andrai ad utilizzare questo metodo, avrai bisogno di ben altro rispetto che scrivere delle stringhe fini a se stesse dentro a uno span, io ti ho dato solo indicazione su come fare il controllo sulla checkbox.

Notare che per indicare la checkbox ho usato come selettore $("#esempio6 input") che però è un po’ troppo generico e andrà a cercare ogni input dentro a #esempio6.
Per essere sicuri che si tratti della checkbox potresti dare a questa un id o una classe specifica e selezionarla usando $(".nomeclasse") oppure $("#nomeID")
Altrimenti potresti anche usare uno dei codidetti “Attribute Selectors” del CSS. Scrivendo $("#esempio6 input[type=checkbox]") indicherai solo gli input di tipo checkbox dentro a #esempio6.

Fine

Anche per oggi la lezione su jQuery finisce qui. Spero di essere stato d’aiuto e se avrai qualche richiesta specifica, non esitare a lasciare un commento .

Sostituire i font con Cufón

Raspo — Tue, 12 Jan 2010 23:59:17 +0000

Ci sono numerosi metodi per sostituire gli ormai noiosi fonts supportati dai browser web come Arial, Verdana, Courier, etc con altri “non-nativi” e sicuramente più accattivanti.
Tra i più famosi vorrei citare il vetusto sIFR basato su Flash, la proprietà CSS3 @font-face che sta piano piano prendendo piede, l’ottimo servizio Typekit purtropppo a pagamento e altri metodi basati su javascript come Typeface e Cufón.

Cufón

Senza un motivo ben preciso, forse perché mi sono trovato bene quando ho avuto modo di provarlo, vorrei analizzare il funzionamento di quest’ultimo.

Come precedentemente accennato, si tratta di un metodo completamente basato sui javascript, perciò, chi non li avesse abilitati non vedrebbe alcuna differenza (ma si presuppone che nessuno abbia di questi problemi al giorno d’oggi).

Come si procede?

Nella prima parte del procedimento dobbiamo creare un file javascript che contenga le informazioni riguardo al font che andremo ad usare.
Nella seconda parte andrà applicato alla pagina HTML.

Generare il Font

Si sceglie il font che vogliamo usare. Con questo intendo che dovremo proprio procurarci il file .TTF .OTF o .PFB e tenerlo a portata di mano. Procuriamoci anche le versioni corsive e in grassetto se riteniamo possano tornarci utili
Andiamo sul sito http://cufon.shoqolate.com/generate/.
Nella parte alta della pagina ci sono quattro campi in cui possiamo caricare il file del font nella sua versione regolare, quella in grassetto, quella in corsivo e quella in grassetto corsivo. Solamente la prima è obbligatoria. Nel mio caso, voglio usare la versione regolare e quella in grassetto, quindi caricherò solo queste due.
Fatto ciò, è importante assicurarsi di aver messo un segno di spunta per accettare l’EULA che dichiara che il font scelto permette il Web Embedding. Per evitare di avere problemi riguardo a questo punto, consiglio vivamente l’utilizzo di font completamente Open Source come quello in esempio (Titillium).
Saltando tutte le impostazioni che ci vengono messe a disposizione, andiamo in fondo alla pagina e stavolta dobbiamo accettare i termini del contratto del servizio Cufón.
Let’s do this! Dovrebbe partire il download di un file .font.js contenente tutte le informazioni riguardo al font caricato. Il file in questione potrebbe avere un nome assurdo e molto lungo, possiamo rinominarlo senza problemi.

Applicazione

Sempre dal sito di Cufón facciamo click su download per scaricare il file javascript (cufon-yui.js) che contiene il “motore” vero e proprio di Cufón.
Apriamo un foglio HTML e nella sezione carichiamo prima il cufon-yui.js e successivamente il file .font.js del font opportunamente rinominato, assicurandoci che i link siano corretti.
```
    ...
    
    
    ...
```
Aggiungiamo un po’ di contenuto fittizio alla pagina. Aggiungiamo anche dei titoli nei tag H1, H2, H3, etc perchè è a questi che generalmente viene applicato il cufon per motivi di accessibilità e per non appesantire troppo i tempi di caricamento della pagina. In definitiva, direi che non è buona pratica sostituire il font a tutto il testo, ma è pur sempre fattibile.

Titolo di qualche genere

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....

Altro titolo lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Tornando nel possiamo finalmente caricare lo script indicando quali tag HTML sostituire con il nuovo font in questo modo.
Aprendo la pagina HTML nel browser, il risultato dovrebbe essere qualcosa del genere (tutto dipende dalle impostazioni usate nel css).

Ulteriori impostazioni

Quando abbiamo attivato lo script al punto 4, ci siamo limitati a indicare una serie di tag HTML, ma è possibile designare classi o ID specifici utilizzando i selettori CSS.
Se per esempio volessimo applicare il font a tutto ciò che ha la classe “font” basterà indicarla in questo modo.

Ultima cosa che vorrei segnalare, se applichiamo il cufon ai link, non funzionerà lo status hover con le impostazioni di default. Per abilitarlo basta aggiungere questa opzione.

Ultima cosa che vorrei segnalare, se applichiamo il cufon ai link, non funzionerà lo status hover con le impostazioni di default. Per abilitarlo basta aggiungere questa opzione.

Aggiornamento

Se Cufon non dovesse funzionare su browser obsoleti tipo IE6, IE7 o le versioni di Firefox inferiori alla 3.5, potete risolvere il problema caricando un framework javascript (tipo jQuery), prima dell’inclusione di Cufon-yui.js, in questo modo:


...


...

Il problema è dovuto al fatto che questi browser non riconoscono i selettori css tipo .nomeClasse o #nomeId.

Di seguito vi lascio il link ad una pagina demo molto sempliciotta che mostra i risultati ottenuti e il download del pacchetto con tutti i file (compreso il font). Alla prossima!

Il font usato nell’esempio, Titillium, è completamente Open Source e può essere scaricato nella versione completa dal sito ufficiale.

Primi passi con jQuery – 2

Raspo — Mon, 14 Dec 2009 20:25:01 +0000

Eccoci qua con una nuova lezione di Jquery.
L’altra volta abbiamo visto degli esempi molto semplici di funzioni jquery, che però ti dovrebbero aver già fatto intuire come sia la struttura di qualsiasi altro script.

Struttura di base

Ricapitolando, abbiamo visto che tutto il codice jquery deve stare all’interno di $(document).ready(function() { … }); per funzionare.

Fatto questo, avremo sempre bisogno di un oggetto da cui partire, come ad esempio: $(”#prova”). Nei casi analizzati, si trattava di un oggetto con un preciso ID o classe, ma non sempre sarà così e quindi ricorreremo a tutta una serie di selettori, che ho intensione di vedere più avanti.

Una volta individuato l’oggetto, abbiamo bisogno di un evento, per proseguire nell’esecuzione della funzione. Anche in questo caso, abbiamo visto solo l’evento .click(), che fa partire una certa funzione nel momento in cui clicchiamo sull’oggetto indicato, ma ce ne saranno altri da prendere in considerazione.

Indicato l’evento scatenante, possiamo passare alla descrizione della funzione vera e propria, quindi ci servirà nuovamente un oggetto su cui lavorare e far partire le animazioni e gli effetti vari che la libreria jQuery ci mette a disposizione. Fin’ora hai visto solo il .fadeIn().
Esempio:

  $("#prova").click(function() {
     $(".hide").fadeIn();
     return false;
  });

Questa che ho cercato di tracciare è la struttura che seguiremo nel 90% dei casi:

selettore + evento –> selettore + effetto

Ora non resta altro che vedere il maggior numero possibile di selettori, eventi ed effetti, per riuscire a padroneggiare al meglio questo potente strumento chiamato jQuery.

Animare gli elementi cambiandone dinamicamente lo stile

Per prima cosa dobbiamo definire la struttura HTML e CSS da manipolare.

Codice HTML:


    Segui
    i tutorial
    di jquery
    su
    BitTrack.it

Codice CSS:

#animazione {
    list-style: none;
}
#animazione li {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    background: #eee;
}

Il risultato è questo:

Segui
i tutorial
di jquery
su
BitTrack.it

Una semplice lista con ID animazione, contenente elementi di larghezza 200px (210px per i più pignoli ). Vogliamo far sì che, cliccando su un qualsiasi elemento della lista, la sua larghezza raddoppi a 400px con un’animazione.

Analizziamo il codice passo passo.

Con $(“#animazione li”) indico qualsiasi elemento

appartenente alla lista con ID animazione, esattamente come avviene nel CSS. Usando l’evento .click(function){ … }); scrivo dentro alle graffe l’effetto che voglio ottenere.

Per eseguire un effetto però ho bisogno di un oggetto su cui lavorare e si da il caso che si tratti proprio dell’elemento che ho appena cliccato! Come fare per individuare esattamente quell’elemento della lista piuttosto che un altro? Usando $(this).
Si tratta di un selettore molto utile che, in questo caso, fa riferimento all’oggetto della funzione click().

Cosa sia esattamente this non è semplice da spiegare (almeno per me), è una cosa che si riesce a comprendere a pieno soltanto con l’esperienza.
Per ora ti basta sapere che, una volta fatto click su un elemento della lista, this indicherà esattamente quell’elemento; quindi non resta altro da fare che far partire l’effetto desiderato con animate().

Animate

Animate() è una funzione molto potente che ci permette di manipolare l’oggetto desiderato, cambiandone lo stile per mezzo di animazioni. Quando parlo di stile, intendo lo stesso che usiamo nei css. Per esempio, in questo caso dobbiamo aumentare la larghezza fino a 400px, scriverò:

$(this).animate({width: "400px"});

Come vedi, i parametri dell’animazione (quelli tra parentesi graffe) vengono indicati in modo molto simile alle dichiarazioni del css (fatta eccezione per le virgolette).
Altra cosa da notare, è il fatto che, come ti avevo preannunciato l’altra volta, i parametri di una funzione seguono una loro precisa formattazione.
Nel caso di animate() devi inserire i parametri dell’animazione vera e propria dentro parentesi graffe e se vorrai indicare la durata dell’effetto (come nel nostro caso), dovrai inserirla al di fuori delle parentesi preceduta da una virgola, in questo modo.

$(this).animate({width: "400px"}, 1000);

Questo è ciò che abbiamo ottenuto:

Segui
i tutorial
di jquery
su
BitTrack.it

Eseguire la funzione inversa facendo click sullo stesso elemento

L’animazione è riuscita alla grande, ma vediamo di rendere il nostro script più completo, facendo in modo che, cliccando una seconda volta sugli elementi la cui larghezza è aumentata, questi tornino alla situazione di partenza con un’altra animazione.

Anche quì ci sono molte strade, ma la pratica più usata consiste nell’assegnare una classe agli elementi la cui larghezza è stata portata a 400px, dopo di che, se viene fatto nuovamente click su uno di questi elementi, attraverso un controllo, saremo in grado di capire se la larghezza di quel dato elemento sia da aumentare o diminuire, a seconda che quella classe sia presente o no.

Anche in questo caso risulta troppo difficile da spiegare a parole, quindi passiamo ai fatti.

Analizzando il codice: come punto di partenza abbiamo sempre il click su un elemento della lista.

    $("#animazione li").click(function(){
        //...
    });

Dopo di che, se quel preciso elemento possiede la classe largo (nome a caso scelto da me con molta fantasia) e quindi è già lungo 400px, riportalo a 200px e toglili la classe largo.

if( $(this).hasClass("largo") ) {
    $(this).removeClass("largo").animate({width: "200px"}, 1000);
}

Altrimenti (cioè se non possiede quella data classe), aumenta la lunghezza a 400px e aggiungigli la classe largo.

else{
    $(this).addClass("largo").animate({width: "400px"}, 1000);
}

Ecco il risultato finale:

Segui
i tutorial
di jquery
su
BitTrack.it

Mi scuso se sono andato un po’ di fretta in questi ultimi passaggi, nonostante abbia utilizzato funzioni molto utili ed importanti tipo hasClass(), addClass, removeClass, ma il loro significato è talmente intuitivo ed evidente che non mi sembrava il caso di perderci troppo tempo.

Fine

Anche questa “lezione” è finita, spero di riuscire a pubblicare le prossime più velocemente, poichè gli argomenti da trattare su jQuery sono tantissimi, devo solo scegliere l’ordine da seguire. Come al solito, se hai suggerimenti o critiche, i commenti sono a tua disposizione. Alla prossima.

Creare un anteprima dinamica dei commenti

Raspo — Sat, 31 Oct 2009 21:59:51 +0000

Avere un anteprima del commento che si sta scrivendo, risulta molto utile, specialmente se si vuole utilizzare qualche tag html tipo quello per inserire link, citazioni o mettere il testo grassetto, o in corsivo. Per far ciò bastano poche semplici righe di jquery.

Codice HTML

Innanzitutto ci serve il codice HTML della textarea in cui l’utente inserisce il commento.



	Inserisci del testo per far apparire l'anteprima

Di seguito aggiungiamo un DIV vuoto, dove vogliamo che appaia l’anteprima e diamoli un id, in questo caso l’ho chiamato “anteprima”.



	Inserisci un commento per far apparire l'anteprima
	

	
		Anteprima del commento

Per l’esattezza, l’anteprima del commento non apparirà dentro al div “anteprima” ma in quello vuoto che si trova al suo interno.

Nascondiamo il tutto con un tocco di CSS.

#anteprima {
	display: none;
}

In questo modo, non vedremo neanche la scritta “Anteprima del commento”; lo faremo riapparire al momento giusto con lo script.

Script Jquery

Come al solito, assicuriamoci di aver incluso la libreria jquery nell’head e usando un file esterno o la stessa pagina html, creiamo il nostro script.

$(document).ready(function(){

	$("#commento").keyup(function() {
          //funzione da eseguire
	});

});

Per far sì che lo script inizi a lavorare, usiamo l’evento jquery keyup, che esegue una certa funzione quando viene premuto (e rilasciato) un tasto mentre il focus si trova sulla textarea (che ha ID commento).

$(document).ready(function(){

	$("#commento").keyup(function () {
		var comment = $(this).val();
		$("#anteprima").show().children('div').html(comment);
	});

});

La funzione da eseguire è molto semplice:

Prendo il contenuto della textarea e lo salvo nella variabile comment.
Faccio apparire il div con id anteprima
Seleziono l’altro div vuoto che si trova al suo interno e vi scrivo il contenuto della variabile comment (cioè il testo del commento stesso)

Abbiamo quasi finito, basta fare qualche prova e vediamo che i vari tag html tipo , , vengono perfettamente “interpretati” nell’anteprima.

C’è solo un problema: quando premiamo invio, il testo non va a capo ma aggiunge semplicemente uno spazio.

$(document).ready(function(){ $("#commento").keyup(function () { var comment = $(this).val().replace(/\n/g, "
"); $("#anteprima").show().children('div').html(comment); }); });

Per correggere questo errore, basta agire sulla variabile comment e sostituire i \n, cioè i “simboli delle andate a capo” con dei
.

Fine

Adesso lo script è completo e pronto all’uso. Puoi sperimentarlo aggiungendo un commento su questa pagina!
Download

Articoli correlati:
Creare un ajax contact form con validazione dei dati

Primi passi con jQuery – 2

Primi passi con jQuery – 3

Convertire volumi FAT in NTFS su Windows

Don Limo — Thu, 29 Oct 2009 22:43:25 +0000

Al giorno d’oggi l’unico ambito in cui è ancora usato il filesystem FAT, o la sua evoluzione FAT32, sono le penne USB. Con l’avvento delle NAND Flash le capacità di storage e la velocità di accesso ai dati sono state notevolmente incrementate, ma con le limitazioni del FAT si possono salvare file di dimensione massima pari a 4 GB. Vediamo come ovviare a questo problema usando l’NTFS.

Premesse

In genere, la conversione del filesystem da FAT/FAT32 a NTFS non comporta rischi di perdita dei dati, ma è sempre meglio eseguire un backup tanto per essere tutelati. Inoltre c’è da dire che il processo inverso, da NTFS a FAT, non è supportato nativamente da Windows. Di conseguenza se vorrete tornare a FAT dovrete usare programmi di terze parti o semplicemente formattare il disco/penna perdendo tutti i dati (a meno di preventivo backup, è ovvio!). A breve andrò a mostrarvi un piccolo tool a riga di comando che si chiama “convert.exe” e funziona perfettamente su tutte le versioni di Windows dall’XP in su.

Convert.exe

Il comando “convert” ha l’unico scopo di convertire volumi FAT in NTFS ed eseguendolo da prompt con l’opzione “/?” vi apparirà l’help del comando:

L’help è chiarissimo, ma i parametri che ci interessano veramente sono tre:

“/X” chiude tutti gli handle dei file aperti e se necessario smonta anche il volume.

“/NoSecurity” è consigliabile usarlo sulle penne USB in quanto alcuni computer potrebbero non leggere i file salvati a causa delle possibili limitazioni di permissioni che è possibile impostare sull’NTFS.

“/FS:NTFS” serve solo a specificare di convertire il volume in NTFS. Del tutto inutile se si considera che il convert non è abilitato alla conversione di nessun altro tipo di filesystem.

Per convertire un volume FAT/FAT32 in NTFS dovrete eseguire da prompt, ovviamente con privilegi di amministratore, il seguente comando:

convert : /X /NoSecurity /FS:NTFS

Ma vediamo subito un esempio pratico:

La conversione è andata a buon fine, adesso il vostro disco o la vostra penna USB usa il filesystem NTFS.

No related posts.

Assegnare un indirizzo IP statico alla scheda di rete su Debian

Don Limo — Sat, 10 Oct 2009 10:05:34 +0000

I motivi per desiderare un indirizzo IP statico invece che dinamico, possono essere i più disparati. Nel mio caso, dovevo configurarlo sul mio server di casa in modo da renderlo raggiungibile, sempre e comunque, senza dover fare ricerche sul DNS.

Iniziamo col visualizzare alcune informazioni sull’interfaccia di rete. Nel mio caso è l’ethernet (eth0), ma il concetto vale anche per il wifi (wlan0/wifi0) o qualsiasi altra interfaccia di rete.

hive:/home/donlimo# ifconfig eth0 Link encap:Ethernet HWaddr 08:27:00:2f:08:a5 inet addr:192.168.1.62 Bcast:192.168.1.255 Mask:255.255.255.0 inet6 addr: fe80::a00:a7ff:fe5a:984d/64 Scope:Link UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 RX packets:805 errors:0 dropped:0 overruns:0 frame:0 TX packets:606 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:1000 RX bytes:796490 (777. KiB) TX bytes:52540 (51.3 KiB) Interrupt:11 Base address:0xd020

L’output del comando è molto chiaro. Le informazioni che ci interessano in particolare sono tre:

inet addr:192.168.1.62

Bcast:192.168.1.255

Mask:255.255.255.0

Il primo è l’indirizzo IP, il secondo è l’indirizzo di Broadcast ed il terzo è la Submet Mask. Sono tutti dati importantissimi ai fini della corretta configurazione della scheda di rete. In aggiunta a questi tre dati, ci serve sapere qual’è l’indirizzo IP del gateway: in una rete locale casalinga, di norma corrisponde ai primi tre numeri del nostro indirizzo IP con “1″ come quarto numero. Nel mio caso è 192.168.1.1. Se per voi è differente, fate riferimento al manuale delle istruzioni del vostro router/modem adsl dove è in genere messo in evidenza. A questo punto, non ci rimane che editare il file di configurazione /etc/network/interfaces per configurare il nostro IP statico.

# nano /etc/network/interfaces

Assicuratevi di inserire le seguenti righe all’interno del file:

# The primary network interface auto eth0 iface eth0 inet static address 192.168.1.62 netmask 255.255.255.0 broadcast 192.168.1.255 gateway 192.168.1.1

La terza riga potrebbe non apparire chiara alla maggior parte di voi, quindi vi do una veloce descrizione:

auto: identifica i dispositivi che vengono portati in stato di up al boot del sistema

iface: identifica le interfacce da configurare

inet: indica che l’interfaccia sarà collegata con una rete IPv4

static: indica che l’indirizzo è impostato staticamente

Per rendere effettive le modifiche, sarà necessario riavviare il servizio di rete.

# /etc/init.d/networking restart

Configurare i server DNS

Se avete bisogno di configurare i DNS dovrete editare il file /etc/resolv.conf.

# nano /etc/resolv.conf

Inserite le seguenti righe:

nameserver 208.67.222.222 nameserver 208.67.220.220

Gli indirizzi IP che vedete corrispondo al servizio di DNS OpenDNS, ma nessuno vi vieta di configurare qualunque altro DNS vogliate.

Ripristinare un indirizzo IP dinamico

Se cambiate idea o volete tornare ad un indirizzo IP dinamico, cancellate le righe che abbiamo inserito e ripristinate quelle standard:

auto eth0 iface eth0 inet dhcp

Ulteriori informazioni

Per chi ha esigenze più avanzate, può trovare informazioni più dettagliate nei manuali di ifup ed /etc/network/interface.

Articoli correlati:
Wake On Lan su Debian

Come impostare utenti virtuali in “vsftpd” su Debian

Oven Trick, riparare la scheda video mettendola in forno

Come impostare utenti virtuali in “vsftpd” su Debian

Don Limo — Wed, 07 Oct 2009 18:46:00 +0000

Il motivo per il quale vengono impostati utenti virtuali in un server FTP, è generalmente per consentire l’accesso ftp al web server e di conseguenza ai diversi siti web che mantiene online. Ogni utente può avere uno o più login di accesso all’ftp, e nome utente e password possono essere condivisi con il web server.

Installazione

Come si può ben capire dal titolo, prenderemo in esame vsftpd come server FTP e apache come web server. Entrambi li ho scelti per il loro rinomato livello di sicurezza, leggerezza e stabilità e per quanto concerne la loro installazione vi rimando alle rispettive guide: vstfpd e apache (appena ho due minuti per scriverla). Adesso, andremo ad installare il modulo pam_pwdfile che permette una semplice e rapida condivisione delle credenziali di autenticazione fra l’ftp ed il web server.

# apt-get install libpam-pwdfile

Configurazione

Lo scopo principale di impostare utenti virtuali, è il fatto di fornire accesso ftp ai vari siti web hostati da apache che di standard si trovano in /var/www/, prevenendo accessi anonimi o accessi ad altri siti da parte di utenti non autorizzati. A questo punto, tutto quello che dobbiamo fare è creare un file dove andremo a salvare tutte le password degli utenti. Utilizzeremo lo strumento htpasswd fornito da apache. C’è da dire però, che quest’ultimo supporta unicamente password fino ad 8 caratteri. Di conseguenza, se volete usare password più lunghe, potete usare tranquillamente un altro modulo PAM o fare ricorso a md5-crypt.

# htpasswd -c /etc/vsftpd/passwd user
Per gli utenti successivi è sufficiente eseguire lo stesso comando senza l’opzione “-c”.

# htpasswd /etc/vsftpd/passwd user2
Affinché gli utenti riescano a loggarsi ed uppare/modificare/cancellare file correttamente è necessario creare la loro home directory e dargli i permessi di scrittura.

# mkdir /var/www/user # chown user1 /var/www/user # chmod +w /var/www/user

Ovviamente l’operazione va ripetuta per tutti gli utenti creati:

# mkdir /var/www/user2 # chown user1 /var/www/user2 # chmod +w /var/www/user2

Adesso, se non sono già presenti, è necessario aggiungere delle opzioni al file di configurazione di vsftpd che si trova in /etc/vsftpd.conf:

anonymous_enable=NO local_enable=YES virtual_use_local_privs=YES secure_chroot_dir=/var/run/vsftpd pam_service_name=vsftpd guest_enable=YES user_sub_token=$USER local_root=/var/www/$USER chroot_local_user=YES hide_ids=YES
Ora è il momento di passare a configurare il PAM per usare il file delle password che abbiamo creato.

# nano /etc/pam.d/vsftpd
Aggiungiamo le seguenti righe.

auth required pam_pwdfile.so pwdfile /var/www/conf/users account required pam_permit.so

Riavviamo il serizio di vsftpd.

# /etc/init.d/vsftpd restart

Testiamone il funzionamento

La configurazione è finita, possiamo passare a testare il funzionamento effettivo degli utenti virtuali.

$ ftp 192.168.1.200 Connected to 192.168.1.200. 220-Welcome to Pandora's Chest. 220-All activities are logged. 220-Good work. Name (192.168.1.200:donlimo): user 331 Please specify the password. Password: 230 Login successful. Remote system type is UNIX. Using binary mode to transfer files. ftp> ls 200 PORT command successful. Consider using PASV. 150 Here comes the directory listing. drwxr-xr-x 3 ftp ftp 4096 Jul 11 19:46 images -rw-r--r-- 1 ftp ftp 5952 Jul 07 20:26 index.php 226 Directory send OK.

Articoli correlati:
FTP Server sicuro con “vsftpd”

Configurare vsftpd per le connessioni sicure

Assegnare un indirizzo IP statico alla scheda di rete su Debian

Rimuovere i link al Music Store in iTunes 9

Raspo — Mon, 05 Oct 2009 20:17:12 +0000

Quei link all’iTiunes Store che appaiono accanto ai nomi delle playlist, ai titoli delle canzoni, autori e album, sono veramente fastidiosi. Ma al contrario delle vecchie versioni di iTunes dove era possibile disattivarli attraverso il menu preferenze, dalla 8, per far ciò, dobbiamo eseguire alcune operazioni un po’ più complicate.

Nota: Questo procedimento è valido sia per iTunes 8 che iTunes 9.

Procedimento su Windows

Assicuriamoci di aver chiuso iTunes e poi spostiamoci nella cartella nascosta AppData\ Apple Computer\iTunes. Ci sono vari modi per farlo ed il percorso varia a seconda della versione di windows che stiamo utilizzando, perciò vi indicherò un metodo non troppo immediato, ma che vale sia su XP sia su Vista e Seven.

Aprite “Esegui” (tasto Windows + R) e digitate:

%appdata%\Apple Computer\iTunes

Premete OK e nella nuova finestra create una copia da usare come backup del file iTunesPrefs.xml

A questo punto aprite il file con WordPad (click destro->apri con->WordPad) e cercate il punto con la scritta:

User Preferences
Spostatevi subito sotto queste due linee e aggiungete:

show-store-arrow-links AA==

Salvate e chiudete il file. Ora potete tornare ad iTunes e noterete che tutti i link saranno scomparsi!

Procedimento su Mac

Per gli utenti Mac OS il processo è molto più semplice.

Aprite il Terminale e digitate:

defaults write com.apple.iTunes show-store-arrow-links -bool FALSE

Fine

Articoli correlati:
Rimuovere la pubblicità su qualsiasi browser con Privoxy