Riportare del codice o delle citazioni nelle pagine xhtml

Spesso si ha la necessità di far comparire in una pagina del codice. Innanzitutto se si vogliono mostrare i tag html senza che siano interpretati, devono essere scritti usando le entità al posto dei caratteri < e >. Ad esempio se volessimo stampare il tag <html> dovremmo scrivere nel sorgente della nostra pagina &lt;html&gt;, così come il carattere & (ampersand) che va scritto come &amp;.

Se poi si vogliono rappresentare vere e proprie porzioni di codice, oltre che sostituire i caratteri interpretabili come abbiamo appena detto, dovremmo fare in modo che venga mantenuta anche la formattazione del testo; infatti si sa bene come la formattazione sia importante per rendere del codice più chiaro. Come è noto però l'(x)html ignora i caratteri di tabulazione (tab) e gli spazi bianchi multipli, riducendo il tutto ad un singolo spazio.
Per risolvere il problema ci vengono in aiuto due tag dell'xhtml, <code> e <pre>.

Il tag <code> è un elemento inline e va solitamente inserito dentro un elemento block. Continua ad ignorare gli spazi bianchi ed il font usato è solitamente un monospace. All'interno qualsiasi tag html viene interpretato. Ecco un esempio, il codice scritto è contenuto nell'elemento <p> di questo paragrafo:
<code>&lt;html&gt;a b   c&lt;/html&gt;</code> genera <html>a b c</html>.
Si capisce che il tag <code>, praticamente, non fa nient'altro che cambiare il font al testo che contiene, per il resto si comporta come normale codice xhtml. Attenzione però ad usarlo per questo scopo!!! Lo scopo per cui è stato introdotto è semplicemente quello di marcare del testo come codice.

<pre> è un elemento block e significa preformattato. Riporta correttamente gli spazi bianchi e le tabulazioni. Il font usato è di solito uguale a quello del tag <code> e cioè un monospace. Anche in questo caso qualsiasi tag html viene interpretato.
Un esempio, il codice riportato si trova fuori all'elemento <p>:
<pre>&lt;html&gt;
a b   c
&lt;/html&gt;
</pre>
genera 

<html>
a b   c
</html>

Fate attenzione al comportamente di questo tag sulla prima linea. Tra <pre> e </pre> tutto viene interpretato alla lettera, compreso il ritorno a capo che spesso si inserisce dopo il tag quando si scrive il sorgente della pagina. Ecco lo stesso esempio di prima scritto in maniera da mettere in risalto il problema (notate la prima riga vuota!):
<pre>& lt;html&gt;
a b   c
&lt;/html&gt;
</pre>
genera 

<html>
a b   c
</html>

Ritengo questo comportamento alquanto inutile e anzi un po' dannoso. Non conosco altre idee in merito. Se avete idee in proposito o conoscete i tizi del W3C per dirglielo... fatemi sapere!

Per quanto riguarda le citazioni esistono i tag <q> (quote, inline) che mette le virgolette intorno alla citazione, <blockquote> (quote, block) che riporta il testo con un altro font e in uno stile adatto alle citazioni, <cit> (citation, inline) credo in disuso che trasforma il testo in un corsivo.

UTF-8, La matematica e l'XHTML

Scrivere matematica per il web non è cosa semplice. La strada più comune è quella di trasformare un documento LaTeX in html con convertitori appositi. Purtroppo in questo modo tutte le espressioni matematiche vengono trasformate in gif con il risultato di pagine pesanti e non facilmente modificabili.
Il rimedio sarebbe il MathML ma a mio avviso è troppo complesso ed oltretutto anche se ci si arma di buona volontà poco supportato. Firefox non ha problemi nell'elaborare il MathML ma necessita di font aggiuntivi non facilmente installabili soprattutto per un utente meno esperto.
La soluzione per ora sembra quella di continuare a lavorare con il latex2html ed usare invece per le piccole espressioni matematiche con i caratteri speciali messi a disposizioni dall'UNICODE unitamente ai tag <sup> e <sub> dell'XHTML.

I colori

I colori che si possono usare per le varie parti del nostro sito (testo, sfondi, ecc...) sono specificabili nei CSS in vari modi, ma sempre nel sistema RGB:

Nei primi tre casi i numeri rappresentano (con diverse modalità) l'intensità dei tre colori primari nel sistema RGB (ROSSO, VERDE, BLU) in una scala divisa in 256 gradazioni (16 bit).
I nomi dei colori definiti nelle ultime specifiche dell'HTML sono 16 e potete trovarli per esempio su Wikipedia.
Esistono ulteriori nomi dei colori oltre ai 16 definiti nell'HTML. Possono essere tranquillamente usati dato che sono riconosciuti dalla stragande maggioranza dei browser. Anche questa lista la potete trovare su Wikipedia.
Una buona pratica sarebbe quella di usare solamente i 216 colori standard denominati web-safe, perché interpretabili da ogni web browser, sistema operativo e monitor a colori.
La lista di quest'ultimi e la loro rappresentazione in formato esadecimale contratto la trovate sempre su Wikipedia.

La "favicon"

Favicon è l'abbreviazione di favorites icon ed è l'iconcina che viene visualizzata nella barra degli indirizzi del vostro browser. Normalmente, se non specificata, viene visualizzata quella di default del vostro browser (tipicamente la "e" di Explorer oppure un'iconcina bianca su Firefox). Inoltre se salvate la pagina nei Preferiti (Bookmarks, Segnalibri, ...) la favicon sarà visualizzata accanto al nome della pagina.

Dopo questa introduzione la domanda è: Come inserire una favicon?
Prima di tutto occupiamoci dell'immagine stessa. Deve essere una immagine .ico o .gif o .png. Nel primo caso deve avere dimensioni 16x16 o 32x32 pixel mentre negli altri due formati può avere qualsiasi dimensione. Il formato consigliato è comunque, almeno per ora, .ico (fra breve sostituito con .png).
Per codificare un'immagine in questo formato si ha però bisogno di un programma di grafica che lo supporti, tra questi c'è Gimp oppure decine e decine di siti internet che permettono la creazione di queste piccole iconcine; uno su tutti (che ho usato per la favicon del mio sito) antifavicon.com.

Una volta realizzata l'immagine bisogna inserirla nel nostro sito. È sufficiente inserirla nella directory radice e verrà automaticamente usata, sempre che il vostro browser supporti le favicon.
Questa pratica è però diventata obsoleta e ora si preferisce usare un tag html all'interno dell'head della pagina. 

<head>
[...]
<link rel="icon" type="image/ico" href="favicon.ico" />
[...]
</head>

In questo modo, consigliato dal W3C, si può specificare una favicon diversa per ogni pagina del sito ed inoltre si può mettere la nostra favicon in qualsiasi posizione, non solo nella directory radice, ma in qualsiasi directory raggiungibile tramite internet.
Ci sono però dei dubbi sull'uso di questo metodo più "moderno", soprattutto per il fatto che l'attributo rel va specificato per ogni pagina del sito.

Le immagini

È indubbia l'utilità e la potenza espressiva delle immagini, soprattutto su un sito web. Purtroppo però sono usate un po' a sproposito e in maniera eccessiva appesantendo senza motivo una pagina.

Discutiamo dei formati prima di tutto: jpg, png, gif. Il migliore, dato il suo algoritmo di compressione, è il jpg. png e gif hanno anche la trasparenza.

Spesso si devono realizzare delle gallerie di immagini (vedi la mia sezione vacanze). Si ha quindi la necessità, partendo da una cartella piena di foto ad alta risoluzione, di realizzare una copia di queste molto ridotta in dimensioni per essere usata come indice, ed un'altra copia, sempre ridotta, ma in maniera minore, per essere visualizzata a schermo intero.
In Linux tutto questo può essere fatto molto semplicemente, senza scaricare programmi e simili. Bastano dei semplici script. Ce ne sono alcuni che realizzano già la galleria compresa anche di tasti di navigazione!
A me piace di più costruirmi le cose da solo e solitamente mi serve solo riscalare le immagini. Ecco qua un semplice script realizzato da me, di ovvia comprensione per un utente medio Linux, che scala le immagini. Si ricordi che il comando convert con l'opzione -resize scala l'immagine mantenendo le proporzioni, quindi specificando una dimensione 120x120 l'immagine verrà rimpicciolita in modo che il lato più lungo corrisponda al lato del quadrato, cioè 120 pixel. L'opzione > serve a scalare le immagini solo se eccedono le dimensioni di questo quadrato. Se non avessi messo questa opzione e se si andasse a ridimensionare un'immagine più piccola delle dimensioni da noi specificate, questa verrebbe ingradita; comportamento che voglio evitare.

Il seguente script è ancora un abbozzo. (sono un principiante). Comunque se ho tempo spero di farlo diventare uno strumento serio da poter ridistribuire. 

#!/bin/bash
#
##################################################
# Bash Script to resize images (.png and .jpg)   #
#                                                #
# The program acts only in the current directory #
# It creates a directory resized_${max_lenght}   #
#    and it puts the resized images in it        #
# There is  no default value for the argument    #
#    -l [max_lenght]                             #
#    so you have to specify it                   #
# If you don't use -e option all extra           #
#    information will be removed from resized    #
#    image. (Usually EXIF)                       #
#    So your resized image will be more compact  #
# To resize one or two files use the convert     #
#    utility (imagemagick)                       #
#                                                #
#                                                #
# Usage: ./resizer max_lenght retain_extra_info  #
# Examples:                                      #
#        ./resizer 120 yes                       #
#        ./resizer 100 no                        #
#                                                #
##################################################

# variables
MAX_LENGHT=800
EXTRA_INFO="-strip"
ENOUGH_PARAM=0

# functions
help () {
	echo "$(basename $0) -l <max_lenght> [-e]"
	echo "-l	specify max_lenght (required)"
	echo "-e	keep extra information"
	echo "-h	show this help"
	return 0
}

isdigit () {
	case $1 in
		*[!0-9]*|"") return 1;;
		*) return 0;;
	esac
}



# command line options

if [[ $# -eq 0 ]]
	then
		help
		exit 1
fi

while getopts ":l:eh" OPTION; do
	case $OPTION in
		l)
			if isdigit $OPTARG
				then
					MAX_LENGHT=$OPTARG
					ENOUGH_PARAM=1;
				else
					echo "Argument not valid"
					exit 1
			fi
			;;
		e)
			EXTRA_INFO=""
			;;
		h)
			help
			exit 0
			;;
		*)
			echo "Command Line Option Not Valid or Missing Argument"
			help
			exit 1
			;;
	esac
done

if [[ $ENOUGH_PARAM -eq 0 ]]
	then
		echo "Missing -l <max_lenght> Option"
		exit 1
fi

# main program

# directory creation
SUBDIR="resized"_${MAX_LENGHT}px

if [[ ! -e $SUBDIR ]]
	then
		mkdir $SUBDIR
	else
		echo "Directory $SUBDIR exists"
		exit 1
fi

# file resizing
JPG=0
PNG=0
for imm in *.[jJ][pP][gG]
do
	if [[ "$imm" != "*.[jJ][pP][gG]" ]]; then
		convert -resize "${MAX_LENGHT}x${MAX_LENGHT}>" ${EXTRA_INFO} "$imm" "$SUBDIR/$imm"
	else
		echo "No .jpg file found"
		JPG=1
		break
	fi
done

for imm in *.[pP][nN][gG]
do
	if [[ "$imm" != "*.[pP][nN][gG]" ]]; then
		convert -resize "${MAX_LENGHT}x${MAX_LENGHT}>" ${EXTRA_INFO} "$imm" "$SUBDIR/$imm"
	else
		echo "No .png file found"
		PNG=1
		break
	fi
done

if [[ $JPG = 1 && $PNG = 1 ]]
then
	echo $JPG
	echo $PNG
	echo "No file resized"
	rmdir $SUBDIR
	exit 1
fi
if [[ $JPG = 0 ]]
then
	echo "All .jpg files resized"
fi
if [[ $PNG = 0 ]]
then
	echo "All .png files resized"
fi

exit 0


#### ALTRO ALTRO ALTRO ########################################################
#
# convert:
#	ridimensiona mantenendo le exif
#	convert -geometry 120x120
#	ridimensiona togliendo le exif
#	convert -geometry 120x120 -strip ...
#
#
# jpegtran: 
#	ruota senza perdita di informazione e togliendo l'exif
#	jpegtran -rotate 90/180/270 -outfile out in
#
#	ruota senza perdita e manteene le exif
#	jpegtran -rotate 90/180/270 -copy all -outfile out in
#
# gqview: se ruoti con la sua utility non salva nulla
#	  se ruoti con Convert (in realtà è jpegtran) 
#	  preserva la qualità e le exif e salva
#         in automatico
# mirage: se ruoti ti chiede di salvare, ma toglie le exif e comprime
#	  un sacco.
################################################################################