Tag Archive for 'html'

Ma il validatore ragiona ogni tanto ?

Questo è l’errore che mi riporta:

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the “Strict” document type with a document that uses frames (e.g. you must use the “Transitional” document type to get the “target” attribute), or by using vendor proprietary extensions such as “marginheight” (this is usually fixed by using CSS to achieve the desired effect instead).

nessuno dei suggerimenti riportati risolve il problema, più semplicemente onClick va scritto tutto in minuscolo :-P .
Io sono un deficiente perchè ho seminato questo errore su tutte le pagine del blog, insomma a controllare prima non sarebbe successo, però anche il validatore non scherza, insomma potrebbe essere un po’ più intelligente :-P . Ovviamente, non lo correggo, nessun browser credo possa essere così stupido da pretendere il minuscolo per forza :-P .

Pure il K2 ci si mette a duplicare gli ID, bah correggerò.

An “id” is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Technorati Tags: , , ,

(15)

Selezionare il codice inserito quando ci si clicca sopra

Da quando ho iniziato a scrivere sul blog mi sono sempre trovato in difficoltà con l’inserimento di codice, avevo cominciato mettendolo nelle textarea – cosa ignobile da fare col senno di poi – in modo da non rovinare il layout quando nel codice le parole erano troppo lunghe e non venivano wrappate correttamente. Successivamente mi son letto un po’ di manuali base di CSS e ho finalmente capito che il metodo migliore è inserirlo all’interno del tag PRE, assicurandosi di definire uno stile che tenga conto dell’overflow e non faccia sballare troppo la pagina.

Questo è lo stile che uso io:

pre {
	font-family: Courier,monospace;
	background: #EEE;
	font-size: 1.1em;
	line-height: 1.1em;
	border: dashed #666 1px;
	padding: 15px 20px 15px 20px;
	overflow: auto;
}

In particolare la riga:

overflow: auto;

serve per “nascondere” le righe troppo lunghe (è facile accorgersene perchè appariranno le scrollbar). Il fonte tutto Il resto è modificabile a piacimento. Io uso un font monospace come il Courier ma è possibile opti per un altro tipo di carattere in futuro.

Un’altra cosa che mi è sempre piaciuta è fare in modo che il codice inserito sia automaticamente selezionato quando ci si clicca sopra, cosa che devo aver visto su qualche blog di cui non ricordo l’indirizzo. Cercando un po’ con Google sono finalmente riuscito a trovare una risposta :-) . Per fare in modo che il codice venga automaticamente selezionato è necessario associare all’azione onClick dell’elemento un po’ di codice Javascript.

Ecco quindi cosa aggiungere al tag PRE per selezionare automaticamente il testo in esso contenuto:

<pre onClick="
if (window.getSelection) {
	var sel = window.getSelection();
	var range = document.createRange();
	range.selectNodeContents(this);
	sel.removeAllRanges();
	sel.addRange(range);
}
else // per colpa di IE serve un if
	document.selection.empty();
	var range = document.body.createTextRange();
	range.moveToElementText(this);
	range.select();
}
">
codice
</pre>

(gli a capo sono messi solo per motivi di visualizzazione)

Come al solito per farlo funzionare anche con IE è necessario scrivere codice aggiuntivo :-P Naturalmente è possibile associare il codice anche a tag diversi dal PRE, mentre per i tag INPUT e TEXTAREA si deve modificare un po’ il codice utilizzato.

Naturalmente io aggiungo quel codice automaticamente usando un programmino di text & replace (praticamente scrivo pre seguito da TAB), è comunque possibile aggiungere uno script alla pagina e richiamare il codice nel seguente modo:

<pre onClick="autoSelect(this);">
codice
</pre>

Per il codice della funzione autoSelect vi rimando all’articolo da cui ho scopiazzato il codice :-) .

Nel mio caso, non inserendo codice così spesso, preferisco far risparmiare al browser il caricamento di una funzione Javascript inutilizzata nella maggior parte delle pagine. Per lo stesso motivo, non credo di sovvracaricare ulteriormente il blog con uno script di syntax hightlighting

Technorati Tags: , ,

Primi passi con WordPress, plugin OpenSearch e favicon

Nonostante il plugin OpenSearch per il proprio blog sia un’inutile vezzo – del resto a chi potrebbe mai interessare ? – io lo avevo sul vecchio blog SPB e lo ho voluto portare anche su WordPress. Il plugin di ricerca può essere installato dai browser che lo supportano, permettendo così il suo utilizzo direttamente dalla search bar. Affinché il browser riconosca la presenza di un plugin OpenSearch è necessario inserire queste informazioni nella sezione <head> della pagina.

In Simple Php Blog era necessario modificare il file index.php ed inserire la riga di codice necessaria allo scopo, in WordPress è invece possibile creare un plugin che inserisca direttamente il riferimento al plugin nell’head, senza per questo dover modificare il tema. Il vantaggio è che non sarà necessario rimodificare il file header.php del tema utilizzato ogni qualvolta verrà aggiornato o addirittura sostituito con un altro tema.

La stessa cosa vale anche per la favicon del sito (l’icona rappresentativa del sito che appare nella barra degli indirizzi). Cercando con Google ci sono plugin appositi che permettono di inserire la favicon; plugin che fanno fin troppe cose rispetto alle mie necessità, ho quindi deciso di scopiazzare uno di questi plugin (Favicon Manager per inserire sia la favicon che il search plugin. La cosa non è affatto difficile. Di seguito il codice del plugin che inserisce sia la favicon che il search plugin nella sezione head in modo tale da renderli visibili ai browser:

<?php
/*
Plugin Name: Add favicon and Search Plugin
Plugin URI: http://www.gialloporpora.netsons.org
Description: Aggiunge la favicon e il searchplugin nella sezione head, in modo che vengano riconosciuti dai browser
Version: 0.1
Author:gialloporpora
Author URI:http://www.gialloporpora.netsons.org
*/
/*
Copyright (C) 2006 Cindy Moore
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

http://www.gnu.org/licenses/gpl.txt

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
*/
function gpadd_favicon_to_headers()
{
$favicon_location="URL della favicon";
print "\t";
print '<link rel="shortcut icon" href="'.$favicon_location.'" />';
print "\n";
}
function gpadd_searchplugin_to_headers()
{
$searchplugin_location = "URL del file XML del plugin OpanSearch";
$searchplugin_title="Il blog che non c'è";
$searchplugin_title="Il blog che non c'è";
print "\t";
print '<link rel="search" type="application/opensearchdescription+xml" title="'.$searchplugin_title.'" href="'.$searchplugin_location.'" />';
print "\n";
}
// insert favicon into header using WP hooks
add_action('wp_head', 'gpadd_favicon_to_headers');
// insert search plugin  into header using WP hooks
add_action('wp_head', 'gpadd_searchplugin_to_headers');
?>

Naturalmente non ho previsto un’interfaccia di configurazione, è necessario modificare a manina i percorsi della favicon e del search plugin, ma del resto è quello che mi serviva (i menu creati dai plugin iniziano ad essere sin troppi). Per creare il file XML del plugin OpenSearch provate a guardare fra i link che related posts dovrebbe inserire a fine post :-) (un plugin del genere per i forum sarebbe un sogno :-) ). Probabilmente esisterà un plugin serio per WordPress che permette di fare le stesse cose e che offre una bella interfaccia per la configurazione.

Download:
Add favicon & SearchPlugin.

Technorati Tags: , , ,

Impostare una firma in Thunderbird

Questo post è per rispondere a coloro (e sembrano tanti) che approdano su questo blog cercando “come impostare una firma con Thunderbird”. Prima di spiegare come si fa però, dico a tutti coloro che hanno cercato la risposta con Google, che per questo tipo di domande esiste un motore di ricerca addirittura più utile di Big G, ed è questo. La risposta la trovate anche nei bannerini antipixel che si trovano in fondo alla sidebar.

Iniziamo col dire che ci sono due tipi di firme in Mozilla Thunderbird, e l’utilizzo di una piuttosto che l’altra dipende essenzialmente dal tipo di composizione che si sta usando, se si spediscono email in puro testo (consigliato) bisogna utilizzare una firma puramente testuale, se invece si mandano le mail in formato HTML bisognerà utilizzare una firma formattata usando il codice HTML.

Quindi prima di tutto è importante verificare il tipo di composizione con cui vengono spedite le nostre email, questa preferenza varia da account ad account, solitamente viene impostata una composizione in HTML per i normali account di posta e una composizione di email puramente testuale per i newsgroup. Questa preferenza si imposta in:

Strumenti -> Impostazioni account -> Nome account -> Composizione ed indirizzamento

togliendo o mettendo la spunta alla voce “Componi i messaggi in HTML” a seconda che si vogliano inviare email in plain text (puro testo) oppure in HTML.

Firma in puro testo

Nel caso si scelga di comporre i messaggi in puro testo, per impostare una firma è necessario creare un file TXT che contenga la firma desiderata. , utilizzando un editor testuale come Crimson Editor o NotePad++ (no Writer, no Word e nemmeno Wordpad). Una volta creato e salvato il file contenente la firma, andare in:
Strumenti -> Impostazioni account -> Nome account
e spuntare la voce “Allega questa firma”, quindi inserire il percorso del file TXT precedentemente creato.

NOTA: è importante che il file venga salvato con estensione TXT.

Firma in HTML

Se invece si decide di comporre i messaggi in HTML bisognerà creare un file (con estensione HTML) che contenga il codice necessario a riprodurre la firma stessa. Nella firma in HTML si possono utilizzare formattazioni del testo, immagini e tutto quello che vi passa per la testa di fare, bisogna però ricordare che la firma verrà allegata a tutti i messaggi quindi tenete sempre conto di questi criteri basilari durante la creazione di una firma HTML:

  • l’uso di immagini troppo pesanti crea problemi a chi deve poi scaricare la posta, nonchè ne rallenta la spedizione;
  • una firma non dovrebbe superare mai le quattro righe, e le immagini non devono essere quindi troppo grandi;
  • le GIF animate ad alcuni vostri contatti potrebbero dare fastidio, utilizzate onde possibile immagini in formato PNG.

Bene, ora per creare una firma in HTML bisognerebbe anche conoscere un minimo di HTML, se così non fosse procedere come segue:

  • aprire la composizione di un nuovo messaggio;
  • scrivere la propria firma usando il composer interno di Thunderbird, formattando a piacere il testo e inserendo opzionalmente un’immagine;
  • quando si è finito, selezionare il tutto e andare in Inserisci -> HTML;
  • selezionare il codice HTML che appare nella finestra e copiarlo in un editor di testo;
  • chiudere tutte le finestre di TB dicendogli di non inviare il messaggio;
  • nell’editor di testo in cui si è copiato il codice HTML della firma, salvare il file con estensione HTML.

Una volta che la firma è stata creata (mi raccomando il file della firma deve avere estensione .HTML) , procedere analogamente a quanto descritto per la firma in puro testo per impostare TB in modo da utilizzare il file appena creato come firma per i vostri messaggi.

Inserire la firma al volo

Si può inoltre avere l’esigenza di definire la firma manualmente a seconda che ci si trovi a mandare un messaggio ad un amico, piuttosto che ad un cliente o ad un collaboratore, in alcuni casi si potrebbe anche decidere di non inserire affatto la firma. In questo caso può tornare utile Signature Switch, un” estensione che permette di configurare una serie di firme da cui è possibile pescare di volta in volta semplicemente selezionando dal menu contestuale la firma che si desidera usare in quel determinato messaggio.

Firma casuale

Non conosco estensioni che permettano di utilizzare una firma “random” pescata da un archivio predefinito, però è possibile lo stesso raggiungere lo scopo. Thunderbird allega la firma leggendola da un file, e si può utilizzare un qualche programmino per fare in modo che questo cambi ogni TOT secondi, cambiando così la firma che Thunderbird inserirà nelle nostre email .

Un modo geniale per farlo, lo potete trovare su Mente digitale, l’unica cosa di cui avete bisogno è che sul vostro sistema sia installato Python :-) . Volendo si potrebbe persino compilare lo script con py2exe, e utilizzare lo stratagemma anche senza avere Python sul proprio sistema.

AGGIORNAMENTO: come suggerito da Francesco nei commenti a questo post, esiste un’estensione che permette di implementare la firma random in Thunderbird: TagZilla.

Greasemonkey userscript: Youtube HTML Valid

AGGIORNAMENTO: (6 maggio 2008) ho deciso di creare una versione modificata dello script che permette di copiare automaticamente in clipboard il codice HTML quando si clicca nella input box. Siccome non è possibile per uno userscript accedere alla clipboard di Firefox ho dovuto utilizzare un piccolo file SWF hostato su questo spazio Web scaricato da qui con licenza GPL.
Affinchè la copia in clipboard venga eseguita sono necessari i seguenti requisiti:

  • sia installata e attiva una versione di Flash;
  • questo sito sia raggiungibile.

A voi la scelta su quale versione usare. Ho comunque tenuto separate le due versioni, preferendo caricare un nuovo userscript piuttosto che modificare il precedente. Questo perchè capisco che a molti questa modifica potrebbe pure dare fastidio. La versione modificata con supporto al clipboard autocopy la trovate qui.

Ah, consigli su come migliorare le descrizioni in inglese degli userscript are greatly appreciated :-D .

AGGIORNAMENTO: (5 maggio 2008) lo script per Greasemonkey aveva smesso di funzionare, ora dovrebbe essere tornato tutto a posto (vedi commenti). La versione hostata su questo spazio Web non è aggiornata (e non lo sarà nemmeno in futuro :-P ), quella disponibile su userscript.org invece è stata aggiornata (e lo sarà anche in futuro).
Il sito di Andrea Micheloni – originale autore del bookmarklet – non è più disponibile. Se volete il bookmarklet e non lo user script usate questo.

AGGIORNAMENTO: ho caricato l’userscript su userscripts.org, lo potete installare da questa pagina.

Qualche settimana fa ho scoperto l’ottimo bookmarklet di Andrea Micheloni (che ringrazio) che permette di ottenere il codice HTML aderente agli standard W3C per embeddare un video trovato su Youtube in una pagina Web. Con qualche piccola modifica l’ho convertito in uno userscript per Greasemonkey (probabilmente funziona anche con Opera), in modo da rimpiazzare il codice fornito da Youtube con quello conforme agli standard generato dal bookmarklet di Andrea Micheloni.

Ora, non vale sicuramente la pena installare Greasemonkey per usare quest’unico userscript, e anzi vi consiglio di utilizzare direttamente il bookmarklet, ma nel caso la stiate già usando, e vi capiti spesso di inserire nei vostri Blog/siti un filmato di Youtube, potrebbe essere molto utile.

Installa Youtube HTML Valid

Codice standard fornito da Youtube
Usando Greasemonkey + Youtube HTML Valid, il codice cambia:
Codice valido per embeddare un video di Youtube