*Linux Guide

Fare Web - Browser Web

*

Per poter provare le proprie realizzazioni, è necessario uno strumento che sappia gestire il codice a marcatori (x)html e i CSS, nonchè gli scripts di vario genere, oggi impiegati per rendere più interattiva e bella l'interfaccia delle pagine web.
Questi strumenti si chiamano Browser Web e sono strumenti fondamentali. In Linux il paladino della navigazione nei siti web è Firefox e prenderemo questo strumento come punto di riferimento per la nostra trattazione. Tratteremo marginalmente dell'altro browser che oggi sta insidiando il potere di Firefox, Chromium, versione per Linux di Chrome.
Non tratteremo di Opera, di Safari e di Internet Explorer.

Firefox

Firefox si trova preinstallato in Linux Mint e Ubuntu, per cui non è necessario installarlo. Le sue caratteristiche ed il rigore con il quale si attiene alle regole del W3C, riguardanti il parsing del codice (x)html e CSS, lo rendono uno strumento ideale per valutare le proprie pagine web.
Vediamo come poter usare bene Firefox per saggiare le proprie pagine html.

Per prima cosa vediamo di quali strumenti è dotato il browser e che possano aiutare il webdesigner. Per poterlo fare basta recarsi in:

Menù Strumenti → Sviluppo Web

In questo sottomenù troviamo le seguenti voci:
  1. Console Web
  2. Blocco per gli appunti
  3. Sorgente pagina
  4. Console degli errori
  5. Altri strumenti di sviluppo

Di tutte queste voci, l'unica veramente utile è "Sorgente pagina", che mostra il codice sorgente della pagina attualmente in visualizzazione. E' uno strumento molto utile quando si voglia capire come un altro webmaster abbia ottenuto un certo risultato sulla propria pagina web. E' un modo per imparare molto utile.

Tuttavia Firefox, come noto, dispone di numerosissimi plug-in ed estensioni che gli permettono di divenire un ottimo strumento per controllo e validazione delle pagine web, anche in ottica di accessibilità e usabilità. Lo strumento che più interessa il webmaster è Web Developer Tool che si installa facilmente:
  1. Avviate la connessione e lanciate Firefox
  2. Cliccate sul menù "Strumenti"
  3. Cliccate quindi sulla voce Componenti aggiuntivi
  4. Nella pagina web che compare, cercate per "Web Developer Tool"
  5. Una volta individuato, cliccate sul pulsante che avvia l'installazione
  6. A installazione completata, riavviate Firefox. La barra di Web Developer è in alto ed è evidente
Vediamo una breve illustrazione di questo strumento incredibile. Partendo da sinistra verso destra abbiamo i seguenti comandi:

*

  1. Disattiva - Permette di disattivare script e servizi per poter valutare se la pagina possa essere fruita anche senza queste aggiunte. Molto utile quando si voglia stabilire se il contenuto gestito da Javascript sia comunque fruibile dagli utenti. La voce "Disattiva blocco finestre pop-up" è una funzione importante per l'Accessibilità, in quanto i lettori di schermo non gestiscono bene le finestre pop-up e l'utente potrebbe avere problemi.
  2. Cookie - Permette di vedere come si comporta la pagina se vengono disabilitati o aggiunti dei cookie che, come noto, sono nati per migliorare la navigabilità. E'importante questo strumento quando si producano pagina la cui fruizione si fondi principalmente sull'uso di questi "biscotti".
  3. CSS - Questa serie di piccoli strumenti permette non solo la disabilitazione di tutti i CSS o solo di alcuni di essi, ma consente anche di vedere i singoli fogli di stile, di aggiungerne di ulteriori, di procedere alla modifica ed i effettuare altre operazioni che riguardino gli stili della pagina in azione. Uno strumento fondamentale.
  4. Moduli - Questa serie di voci permette di valutare le caratteristiche e l'usabilità dei moduli - i cosiddetti form. E' possibile mostrare la password, abilitare l'autocompletamento (per valutare se ci sono i valori preimpostati), valutare le preimpostazioni dei pulsanti radio ed altro. Utile per rendere dei moduli veramente accessibili anche a disabili
  5. Immagini - Importantissimo strumento per valutare pertinenza, accessibilità, correttezza delle immagini. E' possibile disabilitarle, valutare la presenza di immagini corrette o senza testo alternativo, disabilitare il movimento di immagini animate, mostrare le dimensioni delle immagini, il loro percorso assoluto e tanto altro. Uno strumento immancabile nelle dotazioni di un buon webmaster
  6. Informazioni - Questo è lo strumento più importante dell'intera estensione aggiuntiva. E' lo strumento più utile per il webmaster, che può ricevere informazioni su quanto sta facendo sulle proprie pagine. Vediamo l'elenco delle voci che fanno parte di questo strumento:
    • Mostra abbreviazioni, che mostra se siano stati aggiunti i testi riguardanti l'abbreviazione
    • Mostra accesskey che mostra se siano state incluse le chiavi di accesso rapido
    • Mostra ancore che mostra le ancora a link interni
    • Mostra dimensione blocchi, che mostra le dimensioni in pixel degli elementi blocco
    • Mostra ordine dei div, se la pagina ha una struttura composta da diversi elementi <div>, può essere importante vedere come si articola la pagina, in funzione di migliorare l'accessibilità
    • Mostra informazioni elementi. Suddivide la pagina nei vari elementi e passando con il cursore sopra ognuno di essi, si ottengono informazioni utili, mostrate in un riquadro a parte
    • Mostra dettagli id e class. Mostra i nomi dei vari elementi univoci (id) di classe (class) in modo da vedere se ci sono elementi univoci con lo stesso nome
    • Mostra percorso dei collegamenti. Evidenzia il percorso di ogni link
    • Mostra informazioni oggetti, che indica le informazioni riguardanti gli oggetti, come filmati, applet ed altri
    • Mostra Tabindex. Mostra gli indici di tabulazione che favoriscono la navigazione della pagina con tastiera. Utile per migliorare l'accessibilità
    • Mostra Profondità della tabella. Mostra la struttura della tabella presente nella pagina e i componenti della sua struttura
    • Mostra Informazioni tabella. Mostra le informazioni riguardante la tabella con riferimento al sommario
    • Mostra attributi title. Mostra i valori dell'attributo title all'interno dei vari elementi
    • Mostra informazioni topografiche. Funzioni di significato imprecisato
    • Visualizza informazioni ancore. Mostra, in una pagina a parte, delle informazioni sulle ancore dei collegamenti interni
    • Visualizza informazioni colore. Mostra, in una pagina a parte, delle informazioni sui colori presenti nella pagina web analizzata, sia in forma cromatica che in forma di codice esadecimale
    • Visualizza schema documento. Mostra, in una pagina a parte, la condizione schematica della pagina, indicando se mancano delle intestazioni
    • Visualizza dimensioni del documento. Analizza e mostra le dimensioni del documento che vengono riportate in Kb.
    • Visualizza JavaScript. Mostra, in una pagina a parte, il codice dei Javascript collegati alla pagina web.
    • Visualizza Informazioni sui collegamenti. Mostra, in una pagina a parte, il percorso completo dei collegamenti presenti nella pagina
    • Visualizza Informazioni sui MetaTag. Mostra, in una pagina a parte, i contenuti dei MetaTag presenti nella sezione di testa del codice della pagina
    • Visualizza Informazioni sulla pagina. Mostra, in una pagina a parte, informazioni complete e raffinate sulla pagina in attività
  7. Varie - Si tratta di una raccolta di strumenti di vario impiego utilitaristico. Tra quelli disponibili, di particolare interesse ci sono i seguenti:
    • Elimina dati personali permette di cancellare la cache ed eliminare i dati personali dalla pagina visitata. Uno strumento per la sicurezza
    • Mostra lente di ingrandimento. Con questo strumento viene posta una lente di ingrandimento quadrata sulla pagine che si muove insieme al cursore, ingrandendo anche di molto (il valore è variabile usando la rotella del mouse), il contenuto sorvolato.
    • Mostra righello. Pone sulla pagina un cursore a croce che tenuto cliccato con il sinistro, seleziona una area della pagina, mostrando i valori dimensionali nella parte alta della stessa. Utile per capire quando sia grande un elemento nella pagina.
    • Linearizza la pagina. Consente di linearizzare verticalmente i contenuti della pagina per saggiare se la pagina sia comunque leggibile ed è come viene presentata la pagina nei lettori di schermo.
    • Visualizza pagina su schermo piccolo per saggiare come si veda la pagina su smartphone e tablet PC
  8. Contorna - E' una serie di strumenti che consente di disegnare un contorno attorno agli elementi elencati nello strumento in oggetto. molto utile per vedere elementi specifici e deprecati che andrebbero sostituiti con altri più conformi.
  9. Ridimensiona - Permette di ridimensionare la finestra del browser a valori definiti (800x600) o scelti dall'utente. Vengono anche mostrate le dimensioni della finestra del browser. Utile per vedere come verrà visualizzata la pagina con monitor di dimensioni differenti da quello posseduto dallo sviluppatore. Uno strumento a favore del layout e della accessibilità
  10. Strumenti - Si tratta di una raccolta di collegamenti a validatori esterni per la valutazione di svariati aspetti della pagina. Si va dal codice HTML, al CSS, ai criteri di accessibilità, alla validità dei collegamenti ed altro. importantissimo!
  11. Visualizza sorgente - Consente di visualizzare il codice sorgente della pagina.

*

Chromium

Chromium è uno dei browser più recenti, ma che in poco tempo ha raggiunto livelli di popolarità incredibili, merito dello sponsor alle sue spalle (Google) e da azzeccate scelte tecniche che ne fanno uno strumento veloce, semplice, facile da usare e molto adattabile. Questa adattabilità gli deriva dalla presenza e disponibilità di centinaia di estensioni e plugin, tra i quali ce n'è uno specificamente devoluto allo sviluppo web. Vediamo però prima come ottenere e usare Chromium.

Installazione
Installare Chromium in Linux Mint/Ubuntu è molto semplice. Lo si può fare da Terminale o dal Software Center. Per praticità e sveltezza, installatelo da Terminale, seguendo questi passaggi:

Lanciate il Terminale. In esso vanno incollati i seguenti comandi;

sudo apt-get update

e premete INVIO. Questo per ricaricare l'elenco dei pacchetti e le informazioni relative.

sudo apt-get install chromium-browser

e premete INVIO. Questo per installare il programma.
Il programma verrà collocato automaticamente nella categoria "Internet" del menù principale di Linux Mint.
Naturalmente verranno installati altri pacchetti necessari ai programmi per lavorare al meglio, le cosiddette "dipendenze".
Web Developer Tool
Tra tutte le estensioni proposte per Chromium, la Web Developer Tool è quella che interessa la nostra trattazione. Per poterla installare seguite questi passaggi:
  1. Avviate la connessione internet
  2. Cliccate sull'icona a forma di chiave inglese, posta nell'angolo superiore sinistro della finestra
  3. Nel menù che compare cliccate su "Strumenti" e poi su "Estensioni"
  4. Nella nuova scheda che compare cliccate su "Sfoglia altre estensioni"
  5. Nel campo di ricerca, digitate "Web Developer" e premete INVIO
  6. Una volta trovato lo strumento, procedete ad installarlo. Al termine non è necessario riavviare.
Vediamo quindi questo strumento, del tutto simile a quello illustrato a proposito di Firefox, dato che si tratta di un port verso questo browser.

*

  1. CSS - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox
  2. Forms (Mosuli) - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox
  3. Images (Immagini) - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox
  4. Informations (Informazioni) - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox
  5. Miscellaneous (Varie) - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox
  6. Outline (Contorna) - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox
  7. Resize (Ridimensiona) - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox
  8. Tools - Stesse indicazioni, funzioni e azioni indicate a proposito di Firefox

Linux Guide | Torna in alto