BitTrack » Browser http://www.bittrack.it BitTrack.it tratta di Informatica, Programmazione, Reti, Hack, Trucchi, Tutorial, Webdesign e simili. Wed, 01 Sep 2010 06:07:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Sostituire i font con Cufón http://www.bittrack.it/archives/sostituire-i-font-con-cufon/ http://www.bittrack.it/archives/sostituire-i-font-con-cufon/#comments Tue, 12 Jan 2010 23:59:17 +0000 Raspo http://www.bittrack.it/?p=981 typographyCi 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 [...]]]> typography

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

  1. 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
  2. Andiamo sul sito http://cufon.shoqolate.com/generate/.
  3. 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.
    cufon-generate
  4. 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).
  5. 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.
  6. 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

  1. 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.
  2. Apriamo un foglio HTML e nella sezione <head> carichiamo prima il cufon-yui.js e successivamente il file .font.js del font opportunamente rinominato, assicurandoci che i link siano corretti. 
    <head>
    ...
    <script type="text/javascript" src="js/cufon-yui.js" ></script>
    <script type="text/javascript" src="js/TitilliumCufon.font.js" ></script>
    ...
</head>
  3. 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.
    4. <h2>Titolo di qualche genere</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
<h3>Altro titolo lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
  4. Tornando nel <head> possiamo finalmente caricare lo script indicando quali tag HTML sostituire con il nuovo font in questo modo. 
    <script type="text/javascript">

    Cufon.replace('h1,h2,h3,h4,h5,h6');
    //I nomi dei tag vanno separati con le virgole

</script>
  5. Aprendo la pagina HTML nel browser, il risultato dovrebbe essere qualcosa del genere (tutto dipende dalle impostazioni usate nel css).
    cufon-applicato

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.

<script type="text/javascript">

    Cufon.replace('h1,h2,h3,h4,h5,h6,.font');
    //Usa i classici selettori CSS .font per la classe e #font per l'ID

</script>

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.

<script type="text/javascript">

    Cufon.replace('h1,h2,h3,h4,h5,h6,.font');
    //Usa i classici selettori CSS .font per la classe e #font per l'ID

</script>

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.

<script type="text/javascript">

    Cufon.replace('h1,h2,h3,h4,h5,h6,.font',{ hover: 'true' });

</script>

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:

<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js" ></script>
...
</head>

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.

Articoli correlati:

  1. Aggiungere o sostituire manualmente le smiley di wordpress
  2. Primi passi con jQuery – 1
  3. Creare un anteprima dinamica dei commenti

]]> http://www.bittrack.it/archives/sostituire-i-font-con-cufon/feed/ 0 Rimuovere la pubblicità su qualsiasi browser con Privoxy http://www.bittrack.it/archives/rimuovere-la-pubblicita-su-qualsiasi-browser-con-privoxy/ http://www.bittrack.it/archives/rimuovere-la-pubblicita-su-qualsiasi-browser-con-privoxy/#comments Sun, 11 Oct 2009 00:40:54 +0000 Raspo http://www.bittrack.it/?p=369 privoxyAdBlock Plus, il più popolare tra i Plugin di FireFox, ci ha viziati al punto che quando tentiamo di passare ad un nuovo browser, ne sentiamo immediatamente la mancanza. Ed è un vero peccato perché non possiamo gustarci altre validissime alternative tipo Chrome o Safari; ma in attesa che esca un plugin simile anche per [...]]]> privoxy

AdBlock Plus, il più popolare tra i Plugin di FireFox, ci ha viziati al punto che quando tentiamo di passare ad un nuovo browser, ne sentiamo immediatamente la mancanza.

Ed è un vero peccato perché non possiamo gustarci altre validissime alternative tipo Chrome o Safari; ma in attesa che esca un plugin simile anche per altri browser, possiamo sfruttare una soluzione alternativa, Privoxy.

Installazione e configurazione

  1. Andiamo su http://www.privoxy.org/, scarichiamo e installiamo l’omonima applicazione che da qui in avanti rimarrà sempre attiva in background (nulla da temere, occupa solo un paio di MB)
  2. Apriamo Chrome, quindi dal menu impostazioni (l’icona a forma di chiave inglese in alto a destra) scegliamo Opzioni
  3. Spostiamoci sulla scheda Roba da smanettoni e facciamo click su Modifica impostazioni Proxy
  4. Nella finestra che si aprirà selezioniamo Connessioni e poi Impostazioni LAN
  5. Nella nuova finestra mettiamo un segno di spunta sulla casella che abilita l’utilizzo del Server Proxy
  6. Nel campo Indirizzo digitiamo 127.0.0.1 e come Porta impostiamo la 8118
  7. Assicuriamoci che la casella Ignora server proxy… non sia spuntata
  8. Clicckiamo OK per chiudere tutte le finestre
  9. Godiamoci una navigazione priva di pubblicità ;)

privoxy

Conclusioni

Privoxy è sicuramente una buona soluzione, riconosce e blocca un gran numero di elementi pubblicitari, ma aggiungerne di nuovi non è una cosa semplice, data la complessità del file di configurazione, quando invece con AdBlock Plus basterebbero pochi click.

Va però sottolineato che Privoxy, in compenso, funziona su tutti i Browser.

Articoli correlati:

  1. Rimuovere i link al Music Store in iTunes 9
  2. Sostituire i font con Cufón

]]> http://www.bittrack.it/archives/rimuovere-la-pubblicita-su-qualsiasi-browser-con-privoxy/feed/ 0