Ho usato e uso molti framework differenti: 960, BlueprintCss, Less. Sono conscio del fatto che classi con nome quali span oppure column non siano il massimo sotto il profilo della semantica, tuttavia il rigore delle griglie e la conseguente pulizia dei layout (oltre alla velocità di sviluppo che consentono) le rende una scelta per me quasi obbligata.
Per unire le due cose (marcatura html5 e grglia) ho deciso di utilizzare, in prima battuta, HTML5Boilerplate e BluePrintCss. Il risultato? Funziona, e in pochi passi molto semplici.
Scarico la versione “minima” (stripped) di HTML5Boilerplate e l’ultima versione di BluePrintCss.
Posso tranquillamente usare la pagina demo di html5boilerplate come modello di pagina di base.
Unica accortezza, il collegamento al foglio di stile style.css di HTML5Boilerplate deve venire dopo quelli di BluePrintCss.
Per il resto, marco tutto in HTML5 e per le griglie come al solito, usando i consueti div.
Funziona tutto senza problemi, anche con Internet Explorer.

La soluzione è molto semplice. Si edita il file php.ini (nella mia installazione di Xampp è in xampp/php, ma in altre installazioni potrebbe essere in un’altra directory) e si cerca la riga contenente “SMTP”. Dovreste trovare qualcosa tipo:

SMTP = localhost
smtp_port = 25

cambiate localhost con il server SMTP del vostro provider e riavviate Xampp

Ora fate una prova semplicissima. Preparate un file che potreste chiamare mailer.php:

$headers = 'MIME-Version: 1.0′ . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1′ . "\r\n";
$headers .= 'From: vostronome@vostrodominio.com' . "\r\n";
mail("tu@tuodominio.com","test soggetto","test body",$headers);

ovviamente sostituite gli indirizzi email con quelli reali e caricate la pagina. La mail dovrebbe essere stata spedita!

1) Devo configurare Windows perchè riconosca l’host. Edito, come amministratore (ad es. in Vista) il file c:\windows\system32\drivers\etc\hosts

e aggiungo la riga che mi serve. Il file, tolta la parte di commento, avrà un aspetto tipo questo:

127.0.0.1       localhost
127.0.0.1       pippo.com

salvo ed esco

2) vado in c:\xampp\apache\conf\extra

trovo ed edito il file httpd-vhosts.conf, aggiungendo queste righe:

NameVirtualHost *:80

<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot C:/xampp/htdocs/pippo.com/
ServerName pippo.com

<Directory "C:/xampp/htdocs/pippo.com/">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

3) Ora posso avviare (oppure riavviare) Xampp (o il solo Apache)

Fatto!

con php

<?
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.gironi.it/" );
?>

con cold fusion

<cfheader statuscode="301" statustext="Moved Permanently">
<cfheader name="Location" value="http://www.gironi.it">
<cfabort>

con asp

<%@ Language=VBScript %>
<%
response.status="301 moved permanently"
Response.AddHeader "Location", "http://www.gironi.it"
%>

Meta http-equiv

<meta http-equiv="refresh" content="0;url=http://www.gironi.it" />

In Perl

#!/usr/bin/perl      -w
use strict;
print "Status: 301 Moved Permanently\n";
print "Location: http://mia/pagina.htm\n\n";
exit;

Quello che forse non tutti sanno è che in effetti youtube genera automaticamente delle thumbnails. Tutto quello che serve è il link del video! In pratica. Prendiamo ad esempio un video qualunque. La URL è tipo questa:

http://www.youtube.com/watch?v=5YXVMCHG-Nk

ok, la parte che ci interessa è quella dopo watch?v=

Basta quel codice per costruire le URL che puntano alle thumbnails. Nel nostro caso, eccole:

http://img.youtube.com/vi/5YXVMCHG-Nk/0.jpg
http://img.youtube.com/vi/5YXVMCHG-Nk/1.jpg
http://img.youtube.com/vi/5YXVMCHG-Nk/2.jpg
http://img.youtube.com/vi/5YXVMCHG-Nk/3.jpg

Ricapitolando:

1. si ricava il codice dalla URL del video Youtube
2. si costruisce la nuova URL con il codice copiato, aggiungendo il numero di thumb (da 0 a 3) seguito dal suffisso .jpg.

Facilissimo!

Ovviamente non è detto che il formato e il contenuto delle thumbnails siano adatti ai vostri scopi, però questo trick può rotnare utile in molte situazioni.

Attivare cURL in Xampp è questione di pochi istanti. Ecco la procedura da seguire:

1. Ci si porta nella directory xampp sul proprio pc
2. Si va nella cartella php
3. Si edita il file php.ini con un editor di testo
4. Si cerca la riga extension=php_curl.dll e si cancella il punto e virgola ; davanti alla riga stessa
5. Si riavvia il server Apache

Vediamo un esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<?php if (!isset($_GET['name'])): ?>

  <!-- Nessun nome assegnato, per cui viene richiesto all'utente -->

  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
  <label>Please enter your name: <input type="text" name="name" /></label>
  <input type="submit" value="GO" />
  </form>

<?php else: ?>

  <p>Your name: <?php echo $_GET['name']; ?></p>

  <p>This paragraph contains a <a href="newpage.php?name=<?php echo urlencode($_GET['name']); ?>">link</a> that passes the name variable on to the next document.</p>

<?php endif; ?>

</body>
</html>

Qualche picola nota:

E’ da da notare, l’uso della funzione isset.
Questa funzione ritorna un valore “vero” se alla variabile e’ assegnato un valore e “falso” se la variabile non esiste.

Interessante anche l’uso della variabile $_SERVER[‘PHP_SELF’], utilizzata per specificare l’attributo action del form.

$_SERVER[‘PHP_SELF’] e’ sempre configurata sull’URL della pagina corrente, quindi il form, una volta inviato, carichera’ sempre la stessa pagina, ma con la variabile settata.

Immaginiamo ora di avere un sito gestito attraverso database. Il problema e’ quello di creare due differenti versioni di ciascuna pagina: una per l’utente non loggato (con la form per fare il login), una per l’utente regolarmente loggato.
Usando la tecnica delle pagine con piu’ scopi il problema ha in php una soluzione semplice ed elegante. L’esempio che riporto e’ tratto da un articolo di Kevin Yank (questo il link all’articolo originale).

Bob ha una pagina con delle news e un piccolo riquadro di login. Ecco il codice:

<html>
<head>
<title>Bob's Login Site</title>
<body bgcolor="#00cc00">
<?php
if ($_POST['login'] == "do") {
$name = $_POST['name'];
$pass = $_POST['password'];
$db_cnct = mysql_connect("localhost", "user", "pass") or die("Could not connect to the database!");
$db = mysql_db_select("users", $db_cnct);
$sql = "SELECT user, pass FROM users WHERE user = \"$name\" and pass = \"md5($pass)\"";
// This is for an encrypted password-protection database
$check_user = mysql_query($sql);
$users = mysql_num_rows($check_user);
if ($users < 1) {
echo ("<center>Invalid Password!</center>");
echo ('<form action="'.$PHP_SELF.'" method="post">');
echo ('<input type="text" name="name"><br />');
echo ('<input type="password" name="password"><br />');
echo ('<input type="hidden" name="login" value="do">');
echo ('<input type="submit" value="Log-in">');
echo ('</form>');
}
else {
echo ("Welcome, $name!");
}
}
else {
echo ('<form action="'.$PHP_SELF.'" method="post">');
echo ('<input type="text" name="name"><br />');
echo ('<input type="password" name="password"><br />');
echo ('<input type="hidden" name="login" value="do">');
echo ('<input type="submit" value="Log-in">');
echo ('</form>');
?>
</body>
</html>

Lo script controlla se ci sono username e password (passati tramite il metodo HTTP POST).
Se non ci sono, lo script mostrera’ il codice che chiedera’ di loggarsi.

Se ci sono, lo script interroga il database per controllare se si tratta di una coppia di valori validi.
Se e’ tutto ok, verra’ mostrata la scritta “Welcome, $name!”, altrimenti verra’ stampata a schermo una indicazione di errore e verra’ riproposto il modulo di login.

Ed ecco un esempio pratico un po’ piu’ evoluto:

<?PHP
$forum = $_GET['forum'];
if (!isset ($forum) ) {
$sql = "SELECT forums, ID FROM master_list";
$get_forums = mysql_query($sql);
while ($forums = mysql_fetch_array($get_forums) ) {
echo ('<a href="forums.php?forum'.$forums["ID"].'">'.$forums["forums"].'</a><br />');
}
}

else {
$thread = $_GET['thread'];
if (!isset ($thread) ) {
$sql = "SELECT thread, ID FROM forum".$forum;
$get_threads = mysql_query($sql);
while ($threads = mysql_fetch_array($get_forums) ) {
echo ('<a href="forums.php?forum='.$forum.'&thread='.$threads["ID"].'">');
echo ($threads["thread"].'</a><br />');
}
}
else {
$sql = "SELECT messages FROM thread".$thread;
$get_messages = mysql_query($sql);
while ($messages = mysql_fetch_array($get_messages) ) {
echo ('<table><tr><td>'.$messages["message"].'</td></tr></table>');
}
}
?>

Questo, pero’, non e’ un mondo perfetto ed e’ spesso necessario fare ricorso ad hack (filtri, trucchi) per differenziare le istruzioni a seconda del browser
utilizzato.

Nel corso degli anni, numerosi hack sono stati sviluppati per ovviare ai bachi dei browser (Internet Explorer in primis).

Il metodo piu’ sicuro per intervenire e’ tuttavia offerto dalla tecnica dei
commenti condizionali. Essi sono commenti xhtml scritti con una
particolare sintassi, riconosciuta solamente da Internet Explorer per Windows.

Vediamone l’utilizzo pratico:

<!--[if espressione]> Qui il codice xhtml <![endif]-->

Se la condizione espressione e’ soddisfatta, vengono eseguite le espressioni
xhtml.

Commenti condizionali: esempi concreti di uso

Molto utile e’ la possibilita’ di caricare, dopo il foglio di stile generico,
fogli di stile specifici, ad esempio, per le differenti versioni di Internet
Explorer.

Come sempre, un esempio e’ il modo piu’ chiaro per illustrare il concetto.

Supponiamo di aver richiamato, nell’head del codice xhtml, un foglio di stile
generico:

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

ora carichiamo, dopo la precedente istruzione, un foglio di stile con le correzioni necessarie per le versioni di Internet Explorer inferiori alla 6:

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie5fix.css" type="text/css" />
<![endif]-->

Fatto!