TB.#2_ <meta-tag>

 

Cari lettori,

se avete seguito le indicazioni che vi ho fornito il mese scorso, a questo punto avrete Firefox e Firebug installati sul vostro PC.

Prima di procedere con Firebug, tuttavia, vorrei che quelli di voi che non hanno mai sbirciato dietro le quinte dessero adesso un’occhiata al codice che sta dietro una pagina Web. Per fare questo, i browser offrono comunque degli strumenti, più o meno elementari, per l’analisi del codice, senza che l’utente debba per questo installare alcunché di aggiuntivo (tipo Firebug, per l’appunto).

Posto che stiamo operando in Firefox, proviamo a premere la sequenza di tasti <Ctrl>+<U>, oppure facciamo clic destro su di una zona della pagina che contenga soltanto testo semplice oppure lo sfondo, ma non collegamenti, immagini, oggetti, ecc. e scegliamo Visualizza sorgente pagina oppure ancora seguiamo il percorso di menu Visualizza, Sorgente pagina.

Otteniamo così l’apertura di una finestra che contiene un editor di testo, con alcune voci di menu piuttosto semplici, ma nessuno strumento di una certa potenza, nella quale viene visualizzato il codice della pagina che stiamo visitando.

Va detto subito che, qualora il browser stia visualizzando una pagina che risiede in Internet, non potremo apportare alcuna modifica permanente alla pagina stessa; qualora, invece, si tratti di una pagina presente sul nostro PC, lo potremmo fare. Il che, per ora, non ci interessa.

Piuttosto, chiediamo a Firebug di mostrarci il codice che sta dietro a questa stessa pagina che stiamo leggendo. Premiamo il tasto <F12> sulla tastiera oppure, se preferiamo, seguiamo il percorso di menu Strumenti, Firebug, Apri Firebug.

Ciò che si ottiene, nel riquadro principale di Firebug, è nuovamente la riproduzione del codice che sta dietro alla pagina Web in esame. Tuttavia, vi sono altri riquadri e strumenti differenti, rispetto alla finestra dell’editor di testo integrato nel browser.

Gli elementi nella scheda HTML del riquadro a sinistra sono espandibili e comprimibili, al fine di facilitare l’analisi del codice.

Il riquadro a destra mostra, nella scheda Stile, tutti gli elementi impostati nel CSS che governa questa pagina (CSS = Cascading Style Sheet; in italiano, foglio di stile). Non è affatto indispensabile che una pagina Web abbia un CSS associato; anzi, i fogli di stile sono una delle innovazioni aggiunte nel tempo alle pagine Web, al fine di arricchire di nuove caratteristiche il linguaggio originario, ossia lo HTML (Hyper Text Markup Language).

Mettiamo adesso alla prova una delle funzionalità di Firebug che siano di maggiore interesse, per noi.

Clicchiamo il secondo pulsante da sinistra, nella finestra inferiore sinistra: è quello rappresentato da un rettangolo con una freccia obliqua (passandovi sopra il mouse appare l’etichetta “Seleziona un elemento nella pagina da analizzare”). Ora, spaziando lungo la pagina, i vari elementi che la compongono vengono evidenziati, via via che vi scorre sopra il puntatore del mouse, mentre nel riquadro in basso a sinistra viene presentato il codice corrispondente e nel riquadro a destra lo stile applicato, preso tra quelli disponibili nel foglio di stile associato alla pagina, secondo le scelte di chi ha realizzato il template e secondo gli stili applicati da chi ha creato la pagina (nel caso delle nostre pagine, noi stessi).

Se ora facciamo clic su di un elemento, per esempio sul paragrafo di testo che state leggendo, vediamo che il pulsante si disattiva, il codice dell’elemento (nel nostro caso il paragrafo) viene evidenziato nel riquadro in basso a sinistra, mentre nel riquadro a destra si ottiene la porzione di file CSS contenente le istruzioni di formattazione da applicare al paragrafo.

Attenzione: il bello deve ancora venire!

Non soltanto possiamo in questo modo renderci conto di come sono costruire le pagine che visitiamo. In aggiunta, possiamo sperimentare come sarebbero se ne modificassimo le impostazioni, potendo fare tali esperimenti non soltanto con pagine nostre residenti sul nostro PC ma anche su pagine caricate online, indifferentemente nostre o altrui!

Naturalmente non abbiamo alcun potere di modificarle, in tal modo; in nessun caso. Tuttavia possiamo procurarci delle anteprime di qualsiasi modifica, con pochissimo sforzo e a impatto zero sull’esistente. Grandioso!

Allora, senza patema alcuno, proviamo subito.

Se avete fatto come dicevo fin qui, a destra dovreste avere le seguenti righe, tra le altre:

p {
margin:0 0 15px;
}

Ebbene, facciamo doppio clic su 15px e proviamo ad aumentare e a diminuire quel 15 (mantenendo il px).

Ecco allora che la distanza tra i paragrafi aumenta o diminuisce.

Pensate: non è che un esempio, replicabile per qualsiasi elemento di qualsiasi pagina stiamo visualizzando nel nostro browser.

La cosa da notare è che, nel caso dei nostri blog, stiamo agendo su impostazioni fissate in maniera predefinita da chi ha realizzato il template che poi l’autore del blog ha scelto di applicare. Quindi, l’autore del blog (noi o altri non ha importanza) non possiede alcun controllo su queste impostazioni. Infatti, appena chiudiamo Firebug, tutto torna come da impostazioni predefinite.

Il che vale in ogni caso: chiudendo Firebug tutto torna come prima; non soltanto per i nostri blog, ma per qualsiasi pagina il nostro browser stia visualizzando, ovunque essa risieda, chiunque abbia le credenziali per pubblicarla, modificarla o cancellarla.

Già, ma qualora si tratti di pagine nostre, come tradurre le anteprime in modifiche reali, ove lo desiderassimo?

Ebbene, se parliamo dei nostri blog su WordPress, mi dispiace darvi una notizia poco lieta: bisogna pagare.

Via, non si tratta che di una modica somma, la quale aiuta WordPress a ospitare le pagine di una miriade di blogghisti, ai quali offre gratuitamente il servizio di base e una discreta serie di funzionalità, salvo chiedere un contributo per quelle più avanzate, tra le quali, per l’appunto, la modifica del foglio di stile associato al template in uso.

Io direi: visualizziamo in Firefox le pagine del nostro blog personale e divertiamoci a vedere come sarebbero se apportassimo talune modifiche o tal altre. Se scopriamo che vi sono impostazioni che ci piacerebbe applicare, allora andiamo nella nostra area di amministrazione del blog, clicchiamo su Aspetto, nel menu a sinistra, e seguiamo le istruzioni per l’acquisto della possibilità di personalizzare i CSS dei template, utilizzando, all’occorrenza, la guida online di WordPress.

Arrivederci al prossimo numero!

Luciano

Un pensiero su “TB.#2_ <meta-tag>

  1. Pingback: Primavera e… « arthur…

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...