Post

Archivio di May, 2007

Aprire un link in un’altra pagina

Cliccando su un link, normalmente la pagina di destinazione si apre nella stessa finestra in cui ci si trova, oppure l’utente può scegliere di aprire la pagina in una nuova finestra o in una nuova scheda.

Usando l’HTML si può indicare che il link deve essere aperto in una finestra diversa: lo si fa usando l’attributo target del tag <a>.

Per aprire il link nella stessa finestra (default): target=”_self”

Per aprire il link in una nuova finestra: target=”_blank”

Se si stanno usando i frame e si vuole aprire il link nel frame “padre” del corrente: target=”_parent”

Se si stanno usando i frame e si vuole aprire il link nella finestra che contiene il frame corrente: target=”_top”

Se si inseriscono più link all’interno della stessa finestra, tutti con target=”_blank”, ognuno aprirà una nuova finestra. Se invece vogliamo che tutti i link vengano aperti non nella finestra corrente, ma in una nuova finestra comune a tutti, si può assegnare un nome alla nuova finestra da usare, con target=”nome”, e usare sempre la stessa.

Questo è anche il significato di target=”_new”, una sintassi errata dato che _new non è una delle denominazioni riservate che iniziano per underscore, ma viene interpretata come il nome della finestra.

Gestire dei link interni ad un documento

In HTML si possono gestire link non solo a pagine intere (che aprono l’inizio di una pagina), ma anche link a specifiche posizioni all’interno della pagina stessa. Ad esempio, questa possibilità può essere utile per creare un indice iniziale per una pagina molto lunga.

Creare un link ad una specifica posizione in una pagina consiste di due passaggi:

  • dare un nome alla posizione a cui si vuole puntare
  • creare il link

Per dare un nome ad una specifica posizione si può inserire un elemento <a> con l’attributo name (invece di href) oppure si può usare l’attributo id di qualsiasi elemento; in questo modo si assegna un nome ad un elemento specifico che può essere usato per il link.

In XHTML è necessario usare l’attributo id; questo però purtroppo non è supportato correttamente da tutti i browser; la cosa migliore è quindi usare un elemento <a> con sia l’attributo id che l’attributo name. Ovviamente i due attributi devono avere lo stesso valore, ed essere univoci all’interno della pagina (non ci devono essere altri elementi con lo stesso valore di id o di name). Ad esempio:

<a name="cap1" id="cap1">Capitolo 1</a>

Per creare un link all’interno della stessa pagina, che punti alla posizione voluta, si usa un normale elemento <a> con l’attributo href; il riferimento alla posizione interna della pagina si crea usando un cancelletto (#) seguito dal nome della posizione. Ad esempio,

<a href="#cap1">Vai al Capitolo 1</a>

Se volessimo creare un link che punti ad una specifica posizione ma che provenga da una pagina diversa, è sufficiente indicare il nome della posizione dopo l’indirizzo della pagina:

<a href="libro.html#cap1">Vai al Capitolo 1 del libro</a>

Il tag del giorno: <base>

L’elemento <base> si trova nell’intestazione e serve per impostare una base per gli URL relativi. E’ comodo se si deve ad esempio spostare un intero sito in una sottodirectory di un altro: se prima il sito si trovava in / e poi lo si mette dentro la directory /sito, si può scrivere così:

<base href="http://www.catnic.it/sito">

Attenzione, non solo <base> deve trovarsi nell’intestazione, ma deve anche precedere qualsiasi elemento che contenga un URL relativo.

PHP: attenzione alla funzione mail()

In PHP per inviare una mail, ad esempio da un form, si può usare la funzione mail(), che ha la sintassi

mail( $to, $subject, $message, $headers );

Questa però non fa nessun controllo sui campi, in particolare sui campi $to e $message. Se si tratta di un form, a cui quindi si possono passare dei parametri anche tramite URL, è indispensabile fare dei controlli, altrimenti il form può essere utilizzato per inviare messaggi di spam includendo destinatari a piacimento attraverso un campo Bcc: embeddato all’interno del corpo del messaggio. In un form quindi il campo To: va sempre preimpostato, e si deve fare un controllo sul corpo del messaggio per evitare che vi vengano inseriti header SMTP.

Un esempio di controllo che si può fare sul corpo è il seguente:

function has_no_emailheaders($text)
{
return preg_match("/(%0A|%0D|\\n+|\\r+)(content-type:|to:|cc:|bcc:)/i", $text) == 0;
}


if (has_no_emailheaders($body)) {
mail($to, $subject, $body, $header);
}

CSS: stilare i link

Per stilare i link va tenuto conto che questi possono essere in vari stati:

  • link “normale” (non ancora visitato)
  • link attivo (nel momento del click)
  • link visitato
  • link su cui si trova il mouse

Per indicarli si usano i selettori:

a:link
a:active
a:visited
a:hover

A ciascuno di questi selettori, e ovviamente al selettore globale a, possono essere applicati degli stili CSS. In particolare, normalmente si modificherà il colore del testo, la sua sottolineatura e il bordo in caso di immagini. Ad esempio:

a {
   color: green;
   text-decoration: none;
}
a img {
   border: 0px;
}

Se si vuole avere un effetto rollover, si possono impostare stili diversi per il selettore :hover, ad esempio:

a {
  color: green;
}a:hover {
   color: red;
}

In questo modo, passando sopra al testo del link, il suo colore cambierà da verde a rosso.

Il tag del giorno: <a>

Il link <a> identifica un testo o un’immagine da usare come link ipertestuale verso un altro elemento. La sintassi più semplice è:

<a href="destinazione del link“>testo del link</a>

Di default, i browser mostrano il testo del link sottolineato e blu, e le immagini che costituiscono un link con un bordo blu. Questo può essere modificato con i CSS (domani i dettagli!)

La destinazione del link può essere un URL relativo, cioè un puntatore ad una risorsa richiamata a partire dalla posizione del documento corrente, oppure un URL assoluto. Gli URL assoluti vengono identificati dal nome del protocollo da usare, seguito dall’host e poi dal percorso all’interno dell’host.

Es. http://www.catnic.it/new.html

http:// = protocollo usato

www.catnic.it = host

/new.html = percorso all’interno dell’host

PHP: Risolvere il problema della “Pagina scaduta”

Avete mai visto questo messaggio premendo il pulsante “back” con Explorer?

Avviso: la pagina è scaduta La pagina richiesta è stata creata utilizzando
le informazioni inviate dall'utente in un modulo.
 La pagina non è più disponibile.
 Per precauzione, Internet Explorer non invierà automaticamente le informazioni. 

Per inviare nuovamente le informazioni e visualizzare la pagina Web,
fare clic sul pulsante Aggiorna.

In rete ho trovato un articolo molto esplicativo per la soluzione di questo fastidioso inconveniente.
http://shiflett.org/articles/how-to-avoid-page-has-expired-warnings

In soldoni la soluzione è includere in testa alle pagine con questo problema questo pezzo di codice:


ini_set('session.cache_limiter', 'private');

Ciao alla prossima!

PHP: Download di file PDF

Supponiamo di avere realizzato una applicazione Web che permetta l’upload di file. Lo scaricamento di tali file non dovrà essere pubblico ma soggetto alla verifica di alcune condizioni (es. il pagamento di un abbonamento).

Per questo i file non saranno memorizzati sulla root del sito web ma in un’altra directory UPLOAD_DIR esterna ad essa.
Lo scaricamento avverrà mediante uno script in php che farà le seguenti operazioni:

  • Verifica delle credenziali del cliente ed eventuale STOP
  • Invio degli header HTTP specifici del file che si sta inviando
  • Invio dei dati

In rete (es. http://it.php.net/header) si trovano descritti gli header da utilizzare nei vari casi.
La questione è controversa perchè i browser gestiscono tali header in modo differente e possono facilmente generare dei problemi che sono all’origine di grossi mal di testa.

Uno dei problemi più frequenti si verifica con i file PDF.

Il manuale del PHP suggerisce di usare questo costrutto:


<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header(’Content-Disposition: attachment; filename=”downloaded.pdf”‘);

// The PDF source is in original.pdf
readfile(’original.pdf’);
?>
L’unico problema è che non funziona ;-)
O meglio con Explorer non è possibile scegliere se salvare o aprire il file. Una delle due modalità da errore.

Ed ecco lo scopo di questo documento!
L’unico workaround funzionante che ho trovato consiste nell’aggiungere in fondo all’elenco degli header i seguenti:


header('Cache-Control:');
header('Pragma:');

Provare per credere

;-)

Il tag del giorno: <br />

Per andare a capo all’interno di un paragrafo si usa il tag <br />. Questo probabilmente lo sapevate già… ma forse non sapevate che <br /> con l’attributo clear può essere usato per indicare dove debba apparire il testo che segue un elemento float. Ad esempio, se un’immagine è float a sinistra, <br clear="left" /> fa iniziare il testo sotto l’immagine, cioè viene interrotto il flusso del testo relativamente agli elementi flottanti a sinistra. Ovviamente, clear="right" fa la stessa cosa per gli elementi flottanti a destra, e clear="all" vale sia per quelli a destra che per quelli a sinistra.

Il tag del giorno: <hr />

Per aggiungere una riga orizzontale che divida visivamente due parti di un documento si può usare l’elemento <hr />. Si tratta di un elemento blocco, quindi appare sempre su una linea a sé; di default viene visualizzato come una linea tridimensionale, ma il suo aspetto può essere modificato usando i CSS.

L’elemento <hr /> ha degli attributi che permettono di indicarne l’altezza, la larghezza, se ha l’ombra o no e l’allineamento orizzontale. Tutti questi elementi sono deprecati, e al loro posto dovrebbero essere usati i CSS.

Archivi e link