Archivi categoria: web

Attivare l’interfaccia classica di Firebug in Firefox

Gli aggiornamenti software sono sempre fondamentali, anche se qualche volta ci sono alcune interruzioni drastiche come quando l’interfaccia classica di Firebug in Firefox è stata incorporata per via di una maggiore integrazione degli strumenti all’interno del programma principale.

Inoltre, alcuni moduli aggiuntivi di Firebug se utili nel quotidiano, non sono più disponibili e di conseguenza utilizzabili: lasciamo da parte i capricci (da come si può vedere dai commenti negativi sulla sezione componenti aggiuntivi di Firefox al limite della frustrazione ci sono grandi talenti in arte drammatica tra gli utenti di Firebug) e ripristiniamo la situazione con dei consigli pratici applicabili facilmente.

L'interfaccia classica di Firebug in Firefox si recupera modificando about:config

Recuperare l’interfaccia classica di Firebug in Firefox modificando la configurazione

Evitate di effettuare tentativi di rimozione e di reinstallazione di Firebuo o peggio di Firefox.

La strada percorribile per ottenere il ripristino dell’interfaccia classica di Firebug in Firefox è la modifica della configurazione attraverso l’accesso ad about:config.

Le chiavi da individuare sono le seguenti

browser.tabs.remote.autostart
browser.tabs.remote.autostart.1
browser.tabs.remote.autostart.2

e vanno reimpostate a false per tornare ad utilizzare Firebug come prima.

Conviene continuare ad utilizzare Firebug?

Risposta breve: no.

Lo sviluppo del progetto Firebug è arrestato, e la versione attuale non supporta i processi multipli, pertanto l’utilizzo è fortemente scoraggiato e Mozilla promuove l’utilizzo dei DevTools in sostituzione (anche se non si ottengono proprio le funzionalità identiche di Firebug).

La previsione è quella di far convergere l’utenza verso l’adozione degli strumenti integrati, visto anche i numerosi sforzi di porting anche dei moduli aggiuntivi che hanno contribuito al successo di Firebug.

Questo stato di grazia arriverà comunque ad una fine, fino a che la modalità di multi processo potrà forzatamente essere disattivata.

Utilizzare icon font ed i caratteri con simboli vettoriali

L’utilizzo degli icon font nell’ambito dei progetti web consente l’utilizzo di pittogrammi e simbologie facilmente comprensibili per richiamare l’attenzione su una particolare azione o per sintetizzare un concetto in modo essenziale.

Sono possibili diverse varianti di integrazione e differenti famiglie di icone a disposizione già pronte all’utilizzo, ma ovviamente rimane sempre interessante poter utilizzare un proprio set dedicato.

Icon font famiglia Font Awesome

Vantaggi degli icon font

Dal punto di vista di chi cura la parte di sviluppo di un progetto web, le icone hanno sempre portato a sentimenti contrastanti tra soddisfazione per essere riusciti a comunicare in una piccola effige un concetto e la frustrazione a seguito delle critiche su soggetto, dimensione, colore, nitidezza ed altre caratteristiche.

Lo scenario comune può infatti rivelare che se inizialmente dettagli su questi elementi sono considerati secondari, di fatto in corso di esecuzione il tempo dedicato a queste attività si dilata facilmente.

Quindi avere preventivamente un’offerta del materiale a disposizione, le caratteristiche che è possibile rendere variabili e possibilità di semplificare e ridurre i tempi di intervento in caso di ottimizzazione.

Gli icon font rispondono a questo tratto, condividendo tra i punti:

  • incorporazione trasparente anche su progetti già attivi
  • possibilità di cambio delle dimensioni e delle caratteristiche cromatiche attraverso la manipolazione dei fogli di stile
  • sostituzione od integrazione anche tra famiglie diverse
  • fruibilità da dispositivi diversi senza dover aggiungere formati aggiuntivi
  • dimensioni contenute rispetto ad opzioni di icona in formato grafico

Soluzione con Font Awesome

La soluzione con Font Awesome risulta di diretta ed immediata esecuzione, attraverso, l’inclusione di un foglio di stile.

L’integrazione consigliata di basa su un servizio CDN attivabile con una singola riga:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

È possibile prendere visione dell’intero set più recente delle icone disponibili e le possibilità di esempio di utilizzo pratico dei codici mnemonici come attributi da aggiungere in HTML.

<i class="icona fa fa-check-square" aria-hidden="true"></i> Esempio di icona Font Awesome

Bonus Font Awesome senza HTML

Se l’inclusione di codice HTML per ottenere le icone è da evitare, rimane la possibilità di utilizzare delle istruzioni CSS, in modo equivalente a quello dell’utilizzo di un carattere specifico. In questo caso è da indicare il codice del carattere equivalente a quello ricavabile dalla tabella di riferimento non mnemonica.

.icona:before {
    position: absolute;
    font-family: "FontAwesome"; 
    content: 'f14a';
}

Anche in questo caso rimane possibile aggiungere altre istruzioni CSS come il colore e la dimensione.

 

 

WOFF2 e correzione di MIME Type su webserver

WOFF2 è la versione con un algoritmo di compressione aggiuntivo rispetto al Web Open Font Format di base: consente l’incorporazione delle specifiche dei caratteri e dei glifi specifici per i progetti web.

Di recente, oltre che per l’utilizzo proprio, è stata utilizzata come tecnologia alla base dei kit di icone e pittogrammi in comune uso nelle interfacce utente e per la simbologia di bottoni od azioni collegate a link.

woff2

WOFF2 ed il gap attuale

Un problema di occorrenza frequente è presente appunto nel caso di utilizzo delle tecnologie Font Awesome e simili. Quando vengono inclusi i file dei framework in modo statico all’interno di un progetto, senza quindi passare per CDN esterne, ed il webserver non ha una tabella aggiornata per l’associazione di content type, il server ritorna un errore di risorsa non esistente (il canonico errore 404 File Not Found).

Quindi qualora non sia possibile utilizzare una CDN od il progetto necessita di essere appoggiato su un server con servizio HTTP legacy, possono tornare utili le seguenti configurazioni per l’impostazione dei filtri per i tipi di file.

Soluzione per IIS

La motivazione principale che mi ha portato a raccogliere informazioni è stata quando il problema si è presentato per primo con IIS. È stato frustrante continuare a trovare segnalazioni per un file non esistente durante il debug di una app… dovuto ad un semplice gap. Ho quindi utilizzato un file web.config per Internet Information Services simile al seguente:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <staticContent>
 <remove fileExtension=".woff2" />
 <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
 </staticContent>
 </system.webServer>
</configuration>

Soluzione per NGINX

In NGINX (non ho verificato l’esistenza del problema), la configurazione equivalente è la seguente:

types {
    application/font-woff2  woff2;
}

Soluzione per Apache

Ecco la versione Apache per una possibile inclusione in file .htaccess (anche in questo caso non ho individuato possibili istanze problematiche, quindi si tratta di una ulteriore equivalenza):

AddType  application/font-woff2  .woff2