TB_<meta-tag>

 

Cari lettori,

benvenuti al primo articolo della rubrica <meta-tag>.

         Una breve introduzione. In questo spazio tratteremo di questioni tecniche legate alla realizzazione e alla manutenzione di pagine per il Web, in particolare di come muoversi dietro le quinte, al fine di ottenere gli effetti desiderati.

Non necessariamente si parlerà di effetti speciali, di oggetti vistosi o di soluzioni strabilianti. Vedremo insieme sia cose semplici, come possono essere la formattazione di base del testo o l’inserimento corretto di una foto o di un filmato, con le varie opzioni disponibili, sia cose più complesse, come la personalizzazione, mediante CSS, del tema di WordPress che avete scelto, oppure la presentazione automatica, nella pagina, di dati provenienti da un semplice database.

          Non, sottolineo non, sarà affatto un ciclo di lezioni; piuttosto, un luogo di scambio di conoscenze e di esperienze. Pertanto, l’invito è quello di portare, ciascuno di noi, sia dubbi e quesiti sia soluzioni.

Sarà un ulteriore luogo di scambio di articoli e commenti, nel consueto spirito del blog.

          Dal momento che WordPress offre una completa e chiara guida in linea, queste nostre pagine potrebbero rivelarsi di scarsa utilità già per i bloggisti appena evoluti. Non di meno, ritengo che lo sceverare tra di noi taluni nodi non semplici da sciogliere possa venire incontro alle esigenze, alle curiosità e alla voglia di crescere di ciascuno di noi, con particolare beneficio per i meno esperti. Immagino (e verificheremo se è così) che il riunire in un unica discussione alcuni aspetti singoli oppure concentrarsi su di un aspetto particolare e circoscritto e approfondirne la disamina, possa estendere la conoscenza dello strumento che stiamo utilizzando.

Curiosità, per chi non lo sapesse. Il titolo della rubrica nasce da una tipologia di elementi del linguaggio retrostante le pagine Web (il linugaggio HTML): i meta tag sono elementi che non sempre producono effetti visibili, mentre forniscono in ogni caso informazioni utili sia a chi analizzi il codice HTML di una certa pagina, sia (soprattutto) ai software che esplorano costantemente il World Wide Web, per vari scopi, il principale dei quali è quello di indicizzarne il contenuto.

          Veniamo all’argomento che propongo questo mese: l’inserimento di contenuti multimediali nei brani che costituiscono il materiale dei nostri blog. Ciò che ci è possibile fare, utilizzando WordPress, è differente, secondo che si desideri aggiungere delle immagini (come foto, disegni, clipart, immagini animate in formato GIF, ecc.) oppure dei video e secondo che lo si voglia fare all’interno di “pagine” o “articoli” o “commenti” e con possibilità differenti se si agisce sul proprio blog o su commenti nei blog altrui.

Ecco allora che già la questione si articola in varie ipotesi, ciascuna da trattarsi appositamente.

Video

          Il caso più semplice, al quale mi sembra che più o meno tutti sappiamo far fronte, è quello dell’inserimento di materiale video. Vi sono due possibilità, per lo più: inserire un filmato presente in rete oppure uno memorizzato sul PC locale.

In entrambi i casi si può agire in due modi:

  • inserire il percorso completo nel corpo del testo, corredandolo del necessario codice HTML: scelta possibile sempre;
  • utilizzare i pulsanti e le finestre di dialogo offerte dall’interfaccia utente di WordPress: opzione disponibile soltanto quando si lavora a pagine o ad articoli del proprio blog; non disponibile, invece, per i commenti, che siano sul proprio blog o su quello di altri (sul nostro blog, tuttavia, si possono modificare i commenti e inserirvi video o immagini a piacimento).

Per lavorare a mano, diciamo così, si utilizza l’elemento ancora (ossia il tag <a>). A questo scopo, si predispone un testo sulla falsa riga del seguente, che serve, più generalmente, a creare un collegamento da una pagina a un’altra:

<a href="collegamento.al.file">Testo del collegamento</a>

          Se si vuol fare in modo che il collegamento venga aperto in una nuova finestra o in una nuova scheda (secondo il browser in uso al visitatore), così da non far perdere la visualizzazione della propria pagina, si inserisce l’attributo facoltativo target, con il valore _blank; il codice che ne risulta è il seguente:

<a href="collegamento.al.file" target="_blank">Testo del collegamento</a>

Per esempio, nel caso di un file video presente su YouTube:

<a href="http://www.youtube.com/watch?v=Op0EFWdfq44" target="_blank">Woody Allen - Il Dormiglione</a>

L’indirizzo utilizzato in questo esempio (http://www.youtube.com/watch?v=Op0EFWdfq44) lo trovate sulla pagina di YouTube, a destra del video in esecuzione.

Immagini

In questo caso, si fa uso dell’elemento immagine (tag <img>) e la sintassi è la seguente:

<img src="indirizzo.dell.immagine" />

Per esempio:

<img src="http://solindue.files.wordpress.com/2009/12/bolle.jpg?w=130&h=84" />

          Il collegamento qui sopra lo si ricava dalla pagina che contiene l’immagine, facendo clic destro con il mouse sull’immagine stessa e poi scegliendo, dal menù contestuale che appare, la voce opportuna, variabile secondo il browser in uso: per Firefox è Copia indirizzo immagine, per Internet Explorer è necessario scegliere Proprietà e poi copiare la stringa che appare alla voce Indirizzo; similmente con altri browser.

Questo tag presenta due attributi interessanti: larghezza e altezza (<width> e <height>). Per esempio:

<img src="http://lucianomarcelli.files.wordpress.com/2010/01/00001-2007-06-03-20-15-26.jpg" width="420" height="315" />.

Se si vuole collegare all’immagine una risorsa Web (tipicamente una pagina o una versione ingrandita dell’immagine oppure altro), di modo che, cliccando su di essa, si venga reindirizzati a quella risorsa, si inserisce l’elemento immagine in luogo del testo di un elemento ancora:

<a href="htp://lucianomarcelli.wordpress.com/"><img src="http://lucianomarcelli.files.wordpress.com/2010/01/00001-2007-06-03-20-15-26.jpg" width="420" height="315" /></a>

          WordPress si oppone a ogni tentativo di inserire delle immagini nei commenti ai blog altrui: semplicemente, ripulisce il commento, rimuovendo il codice dell’elemento immagine.

I tag che vi ho proposto presentano altri attributi, che ne specificano ulteriormente le caratteristiche di visualizzazione o di funzionamento. Li vedremo meglio in seguito alle precisazioni e alle domande che vorrete sottoporre.

Approfondimenti

by Luciano

4 pensieri su “TB_<meta-tag>

  1. Precisa, interessante, utile per migliorarsi, ecco come ho vissuto questa tua “lezione”, caro Luciano, una rubrica che credo farà furore tra i lettori e i fruitori di WordPress, notizie che all’occorrenza sono difficili da reperire, ma che tu ci hai fornito su di un piatto d’argento con semplicità: una dote degna di rispetto.

    Grazie e alla prossima lezione.

  2. Uhm …ho già una domandina : è possibile che l’uso di Firefox impedisca la visualizzazione dei video ? Sulla vecchia piattaforma di msn mi capitava e mi capita anche qui!
    Avevo chiesto a Sol se sapesse come inserire i video perchè pensavo di sbagliare qualcosa , invece leggendo qui scopro che facevo tutto preciso preciso ….. VOGLIO I VIDEO ANCHE IOOOOOOOO!!!
    AIUUUUUUUUUUUUUUUUUUUTOOOOO!

  3. Ciao Arthur.

    Grazie per tutto l’apprezzamento.

    Avete creato e state gestendo un bel contenitore, voi della Redazione.

    Così, viene voglia di fare molto, di ciò che si può, nell’offrire dei contributi, per quanto modesti.

    A presto

    Ciao Koala.

    Che dire? Io uso quasi esclusivamente Firefox e tutto funziona al meglio.

    Se mi dai qualche info in più, posso provare ad aiutarti, se ne sono capace.

    Hai provato a utilizzare il codice di esempio che ho usato nel testo, quello del video “Woody Allen – Il Dormiglione”?

    Prova a inserire quel codice, così com’è, in un commento: per esempio, in un nuovo commento a questo articolo, così vediamo insieme come va.

    Se non l’hai già fatto, prova anche a inserirlo in un tuo articolo o in una tua pagina.
    Se credi, puoi anche lasciare l’articolo/pagina in bozza e visualizzarlo soltanto in anteprima di WordPress; io ho un articolo e una pagina che ho chiamato TEST e che utilizzo per ogni genere di prove (attenzione: articoli e pagine condividono alcune opzioni e alcuni comportamenti, mentre si differenziano in altri).

    Ti aspetto.

  4. A proposito, Koala,

    fermo quanto sopra, non è che forse stai tentando di inserire dei video che hai sul tuo PC?

    In questo caso, prima devi caricarli in WordPress, nello scatolone dei media, e poi puoi pubblicarli.

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...