Post

Archivio di June, 2007

Visibilità su Google mappe

Avrete notato che, da qualche tempo, in cima ai risultati di Google ci sono alcune voci con accanto una mappa. E’ possibile inserire la propria attività su questa mappa gratuitamente, seguendo alcune semplici istruzioni:

  • andare su https://www.google.com/local/add/ e registrarsi o fare login con un account Google.
  • inserire i dati richiesti
  • aspettare una lettera di conferma via posta cartacea
  • inserire il codice di attivazione ricevuto nella richiesta

I dati richiesti sono, oltre a quelli ovvi relativi all’indirizzo, al telefono ed all’email, anche informazioni sulle modalità di pagamento accettate, gli orari di apertura e la tipologia di attività. Preparatevi a delle domande abbastanza dettagliate; è infatti possibile inserire anche delle parole chiave relative all’attività specifica: ad esempio, per un ristorante si richiedono informazioni sulla cucina, sui menu, sui prezzi etc. Infine, è possibile inserire anche fino a 10 immagini (di massimo 1MB) per descrivere visivamente la propria attività.

Il codice di conferma cartaceo permette di assicurarsi che le informazioni indicate siano corrette, ma dal punto di vista dei gestori richiede un po’ di tempo per poter attivare il servizio (la lettera viene garantita entro 28 giorni dalla richiesta).

HTML: le favicon

Le favicon sono quelle icone che appaiono accanto all’URL del sito sul browser, come icona dei preferiti in Explorer o nelle schede di Firefox e Safari.

Si tratta semplicemente di immagini con un massimo di 16×16 pixel salvate in formato .ico di Windows. Questo formato permette di includere in un singolo file più versioni della stessa immagine; se insieme all’immagine 16×16 se ne fornisce una 32×32, quest’ultima potrà essere usata come icona per il desktop. Gimp (http://www.gimp.org) , il più completo programma di elaborazione di immagino libero, permette di salvare in formato .ico, e può quindi essere usato per creare le favicon.

Per poter usare la favicon all’interno di una pagina Web è sufficiente chiamare i file favicon.ico e metterlo nella directory principale del sito. Se si vogliono usare icone diverse per diverse parti del sito, si può richiamare il nome dell’icona nell’<head> del documento, con questo codice:

<link rel="shortcut icon" href="http://www.sito.it/percorso/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://www.sito.it/percorso/favicon.ico" type="image/x-icon" />

CSS: stilare le immagini

Anche per quanto riguarda le immagini è bene utilizzare codice CSS per modificarne l’aspetto. In particolare, ecco le direttive CSS che corrispondono ai vari attributi, deprecati e ancora validi, del tag <img />:

width e height
Per indicare l’altezza e la larghezza dell’immagine, che in HTML venivano indicate con <img height="50" width="50" />, si usano le istruzioni CSS width: 50px; e height: 50px;
allineamento verticale (valign)
Per l’allineamento verticale si usa la proprietà vertical-align, che indica l’allineamento dell’immagine relativamente alla linea che essa occupa. I valori possibili per questa proprietà sono: top, text-top, bottom, text-bottom, middle, sub, super, baseline (il default), oltre ad un valore numerico o ad una percentuale.
In particolare vediamo l’allineamento della seconda immagine (quella piccola) rispetto alla prima, che ha allineamento verticale “middle”:
vertical-align: top:
vertical-align: text-top:
vertical-align: bottom:
vertical-align: text-bottom:
vertical-align: middle:
vertical-align: sub:
vertical-align: super:
vertical-align: baseline:
allineamento orizzontale (align)
Di default le immagini in HTML sono elementi inline, cioè fanno parte del normale flusso del testo. Ecco come si replicano con i CSS i valori dell’attributo deprecato align usati per l’allineamento orizzontale:
align=left diventa float: left;
align=right diventa float: right;
spazio orizzontale e verticale
Gli attributi vspace e hspace venivano usati per lasciare dello spazio tra l’immagine e il testo che la circondava. In CSS lo stesso effetto può essere creato usando un margine per l’immagine; cosa che non era possibile con hspace e vspace, in questo modo si possono inserire anche dei margini asimmetrici (es. a destra ma non a sinistra)
border
I bordi delle immagini compaiono inaspettatamente quando queste vengono usate come link. Per evitare di visualizzarli, invece di usare l’attributo HTML border, si può usare la proprietà CSS border, impostandola a 0 (border: 0;)

PHP: short tags e compatibilità XHTML

In PHP è possibile includere il codice da interpretare con i tag

<?php  ... ?>

o, se in php.ini è configurata la direttiva short_open_tags, anche con

<? ... ?>

Il problema diventa a questo punto che nello standard XHTML è possibile inserire in testa ad una pagina XHTML una dichiarazione XML di questo tipo:

<?xml version="1.0" encoding="UTF-8"?>

Se infatti sono attivi gli short_tags, questa istruzione viene interpretata come codice PHP e provoca un errore.

Se sul vostro server Web ancora sono presenti pagine scritte con gli short tags, può essere sufficiente ad evitare questo problema indicare nel file di configurazione del dominio virtuale la direttiva

php_admin_flag short_open_tag Off

In questo modo per il dominio virtuale in esame non sarà attiva la possibilità di usare gli short tags, e l’errore viene evitato.

Attenzione, però: proprio a causa del comportamento sopra descritto, gli short tags sono deprecati in PHP e non dovrebbero essere più usati.

Il tag del giorno: <img>

Nel codice HTML è possibile inserire dei collegamenti a file esterni che contengano delle immagini. Per farlo si usa il tag <img />, che visualizza un’immagine all’interno del flusso degli elementi.

La sintassi minimale del tag <img /> è:

<img src="URL" alt="testo alternativo" />

URL è l’indirizzo del file dell’immagine, mentre il testo alternativo descrive il contenuto dell’immagine per i browser che non possono visualizzarla. Attenzione, l’indicazione di un attributo alt è obbligatoria, ma non lo è il suo contenuto! Anzi, se l’immagine è puramente di abbellimento (es. una riga divisoria, …) non si dovrebbe inserire un testo nell’attributo, per non confondere chi legge la pagina con un browser non visuale.

Le immagini dovrebbero essere in uno dei tre formati compatibili con il web: GIF, JPEG e PNG, e per i file dovrebbero essere usate le estensioni corrette .gif, .jpg o .jpeg e .png, in minuscolo, per essere sicuri che il server web invii il Content-type corretto (image/gif, image/jpeg e image/png).

Di default, le immagini vengono visualizzate come elementi inline e quindi non introducono spazi o interruzioni di linea. L’immagine viene allineata con la sua linea di fondo alla linea di base del testo, ma l’allineamento può essere modificato usando i fogli di stile. Esistono molti attributi del tag <img /> (align, border, hspace, vspace) che venivano usati per modificarne l’aspetto, ma che sono deprecati.

Non sono invece deprecati gli attributi width e height: indicarli velocizza la visualizzazione della pagina. E’ sempre preferito, però, usare i corrispondenti attributi CSS. Se si utilizzano dei valori di larghezza ed altezza diversi da quelli originali dell’immagine, è il browser che si occupa di ridimensionarla per farla entrare nelle dimensioni indicate. Questo però porta a una diminuzione della qualità dell’immagine, e dovrebbe essere evitato.

PHP: accesso a MySQL (parte 3)

Vediamo ora un esempio di script per inserire dei dati in un database. Dividiamo lo script in quattro file:

  • header.php contiene il codice PHP che sarà comune anche a tutte le altre pagine del sito (dovremo farne altre, per visualizzare quali sono i dati già inseriti!). Nel nostro caso conterrà la connessione al database
  • header.inc contiene l’header HTML comune a tutte le pagine
  • footer.inc contiene il footer HTML comune a tutte le pagine
  • inserisci_zona.php è il codice della nostra pagina

Inseriremo, per semplicità, un campo in una tabella fatta così:

CREATE TABLE `zona` (
`ID` int(10) unsigned NOT NULL auto_increment,
`Nome` text,
KEY `ID` (`ID`)
);

header.php

<?php
// connessione persistente al database; argomenti sono host utente e password
$connessione = mysql_pconnect("localhost", "root", "");

// scelta del database; argomento è il nome del database
mysql_select_db("nomedatabase");

?>

L’header e il footer HTML sono il minimo indispensabile:

header.inc

<html>
<head>
<title>Inserimento zona</title>
</head>
<body>

footer.inc

</body>
</html>

Ed ecco il “vero” script, inserisci_zona.php. Viene usato un metodo comune, che include in uno stesso file la parte di codice che stampa il form e quella che lo elabora. In questo caso, le sezioni da visualizzare o meno dipendono dalla variabile $action, che viene impostata inviando i dati di un form.

<?php

include "header.php"; // include il file per la connessione al db

include "header.inc"; // include il file con l'intestazione HTML// Viene eseguito solo se deve inserire i dati nel database (cliccando "Conferma")

if($_POST[action]=="submit") {

    // inseriamo qui eventuali modifiche da fare ai dati prima di inserirli

$_POST[Nome] = strtolower($_POST[Nome]);     // rende Nome tutto minuscolo

    $_POST[Nome] = ucfirst($_POST[Nome]);         // mette in maiuscolo la prima lettera

    $query="INSERT INTO zona (Nome) VALUES (\"$_POST[Nome]\");";

    $ris_mysql = mysql_query($query);

    // $ris_mysql è zero se c'è un errore

    if($ris_mysql) {

         ?>

        <p>Dati inseriti correttamente nel database.<br/>

        Vuoi inserire un'altra zona?</p><!--'-->

        <p><a href="inserisci_zona.php">Sì</a> <a href="/">No</a></p>

        <?php

        include "footer.inc";

        exit;

        }

    else print "<p>Errore di inserimento nel database!<br/>Contattare l'amministratore

    di sistema.<br/>

    Query: $query</p>"; // MySQL non ha eseguito correttamente la query

}

// Viene eseguito se si è inviata la form (cliccando "Invia")

if($_POST[action]=="check") {

    // Controlli sintattici dei dati inseriti: se c'è un errore $err = 1 e viene

    // stampato il messaggio di errore nel form accanto al campo relativo

    if(!$_POST[Nome]) { $Nome_msg = "Campo obbligatorio"; $err = "1"; }

    else if(is_numeric($_POST[Nome])) { $Nome_msg = "Formato campo errato"; $err = "1"; }

    else $err = 0;

// Se ci sono errori viene stampato il titolo ERRORE e riproposta la form

    // con i dati precompilati

    if($err==1) print "<h2>ERRORE: controllare i campi indicati</h2>";

// altrimenti fa il riepilogo e chiede conferma. Sono due form perché uno ha

    // come azione submit, uno ha azione nulla e quindi riporta alla form precompilata

    else {

        ?>

        <h2>Riepilogo:</h2>

        <p>Nome: <?php print $_POST[Nome];?></p>

        <form method="POST" action="inserisci_zona.php">

        <input type="hidden" name="Nome" value="<?php print $_POST[Nome];?>"/>

        <input type="hidden" name="action" value="submit"/>

        <input type="submit" value="Conferma"/>

        </form>

        <form method="POST" action="inserisci_zona.php">

        <input type="hidden" name="Nome" value="<?php print $_POST[Nome];?>"/>

        <input type="hidden" name="action" value=""/>

        <input type="submit" value="Modifica"/>

        </form>

        <?php

        include "footer.inc";

        exit;

        }

    }

    ?>

<!-- stampa il form, con lo script stesso come action -->

    <form method="POST" action="inserisci_zona.php">

    <!-- il valore della variabile $Nome, che proviene da eventuali precedenti invii del form,

    viene assegnato all''attributo value del tag input e quindi preimposta il valore del campo

    -->

    <p>Nome: <input type="text" size="30" maxlength="30" name="Nome" value="<?php print $_POST[Nome];?>"/> <?php print $Nome_msg;?></p>

    <input type="hidden" name="action" value="check"/>

    <p><input type="submit" value="Invia"/> <input type="reset" value="Svuota"/></p>

    </form>

<?php

    include "footer.inc";    // include il file con il footer HTML

    ?>

PHP: accesso a MySQL (parte 2)

Vediamo ora come ci si connette usando le funzioni specifiche di MySQL:

Partiamo con il connetterci al database, ecco la funzione ed i suoi campi fondamentali per la connessione:

mysql_pconnect ( "SERVER", "USERNAME", "PASSWORD");

restituisce 1 se la connessione è avvenuta correttamente e 0 se ci sono stati errori. Da notare che è meglio usare mysql_pconnect(), e non mysql_connect(), perché il primo permette di effettuare connessioni persistenti e, se c’è già una connessione attiva, non ne apre un’altra, migliorando nettamente le prestazioni del sistema.

  • SERVER: se lasciato vuoto assumerà il valore di default “localhost:3306” (localhost sulla porta 3306).
  • USERNAME: il nome utente da usare per accedere al database
  • PASSWORD: la password per accedere al database.

Questi dati vi devono essere comunicati da chi vi fornisce l’hosting.

È sempre bene controllare che la connessione avvenga in maniera corretta:

$connessione = mysql_pconnect("localhost","nome","password")
or die("Problemi di connessione: ".mysql_error());

La funzione mysql_error() stampa il messaggio di errore di MySQL.

Per lavorare sui dati dobbiamo poi indicare al server quale database usare, usando la funzione mysql_select_db().

mysql_select_db( "DATABASE", $connessione );

Nota: il database deve esistere :) e $connessione è la risorsa aperta con la funzione mysql_pconnect().

Anche questa funzione restituisce 0 se ha avuto errori e 1 se è andata a buon fine.

mysql_query(QUERY, [$connessione])

mysql_query() permette di effettuare una query sulla connessione aperta. In caso di query che estrae dei dati restituisce una risorsa o 0 in caso di errore; per query di update, delete, drop e simili restituisce 1 se va a buon fine o 0 in caso di errore.

Se $connessione non viene indicata, si fa riferimento all’ultima connessione effettuata.

La risorsa restituita da mysql_query() può essere passata ad altre funzioni della libreria per analizzare i dati:

mysql_fetch_array($risorsa,[MYSQL_ASSOC| MYSQL_NUM]) permette di accedere ai dati del risultato sotto forma di array numerico o associativo. Se non si indica il tipo di array (MYSQL_ASSOC per array associativo, MYSQL_NUM per array numerico) vengono restituiti entrambi.

mysql_num_rows($risorsa) conta il numero di righe del risultato per un select, oppure

mysql_affected_rows($risorsa) conta il numero di righe su cui ha avuto effetto una insert, delete etc.

mysql_fetch_row() accede ad una riga dei risultati e sposta avanti un puntatore interno. La volta successiva che si richiamerà la funzione, quindi, verrà restituita la riga successiva.

mysql_close($connessione);

Chiude la connessione, se ce ne fosse bisogno.

Esistono inoltre molte altre funzioni utili, documentate sul sito di PHP

PHP: accesso a MySQL (parte 1)

Per accedere ad un database MySQL usando PHP si possono usare le funzioni core di PHP, in particolare

  • mysql_pconnect
  • mysql_select_db
  • mysql_close
  • mysql_query
  • mysql_fetch_row

Queste funzioni sono specifiche di MySQL e permettono di gestire una connessione al database e di effettuare delle query su di esso. Vengono installate insieme al modulo php_mysql, e sono parte della distribuzione ufficiale di PHP.
Oppure si possono usare le funzioni della libreria PEAR; queste non sono parte della distribuzione ufficiale di PHP, e quindi non sono presenti su tutti i server in cui viene fatto hosting, ma sono diffusissime e permettono di gestire connessioni a database in maniera indipendente dal motore di database sottostante. E’ consigliato quindi usare le librerie Pear se si deve scrivere del codice manutenibile, ma va controllato che siano supportate sul server utilizzato.

Il tag del giorno: <link>

Nella head del documento HTML si può impostare il tag <link> per collegare un altro documento al corrente. Non si tratta di un collegamento ipertestuale cliccabile, ma di una relazione tra i due.

L’uso più normale del tag <link> è per impostare un foglio di stile esterno:

<link href="style.css" rel="stylesheet" type="text/css"/>

Ma l’attributo rel può essere usato per altre tipologie di relazione, utili per collegare più documenti insieme, ad esempio per l’uso da parte dei motori di ricerca o di script per formattare per la stampa documenti complessi:

  • alternate si usa per indicare versioni sostitutive del documento corrente, ad esempio in un’altra lingua se usato insieme all’attributo hreflang
  • start indica il primo documento di una serie
  • next indica il successivo documento di una serie
  • prev indica il documento precedente in una serie
  • contents si riferisce ad un documento che contiene l’indice dei contenuti
  • index si riferisce ad un documento che contiene l’indice analitico dei contenuti
  • glossary indica un glossario
  • copyright indica il copyright
  • chapter indica un capitolo di una serie di documenti
  • section indica una sezione di una serie di documenti
  • subsection indica una sottosezione di una serie di documenti
  • appendix indica un’appendice di una serie di documenti
  • help indica un documento che contiene delle informazioni di aiuto
  • bookmark indica un punto di accesso privilegiato interno ad un documento esteso. Per indicare il bookmark si può usare l’attributo title.

Archivi e link