Progettato in HTML5, questa guida parla di tutto: a partire dal significato di “Internet”, fino a tutto il mondo dell’open source e dei browser moderni.

Articoli correlati:

1. Cheat Sheets per il Web Design
2. Cosa è HTML5? Ecco una infografica che lo spiega!
3. CSS3: compatibilità cross-browser…da oggi!

HTTP headers: Cosa sono?

Quasi tutto quello che vedi nel browser viene trasmesso al computer tramite il protocollo HTTP. Ad esempio, quando hai aperto questa pagina , il browser probabilmente ha inviato più di 40 richieste HTTP e ha ricevuto risposte HTTP per ciascuna di esse. Gli HTTP headers sono la parte centrale di queste richieste e risposte HTTP, e portano informazioni riguardo il browser client, la pagina richiesta, il server e altro ancora.
Ecco un esempio pratico:

Quando si digita un URL nella barra degli indirizzi, il browser invia una richiesta HTTP che può apparire come segue:

GET /miosito/blog/titolo-del-mio-articolo-/ HTTP/1.1
  Host: net.tutsplus.com
  User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  Accept-Language: en-us,en;q=0.5
  Accept-Encoding: gzip,deflate
  Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
  Keep-Alive: 300
  Connection: keep-alive
  Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120
  Pragma: no-cache
  Cache-Control: no-cache

La prima linea è la "Request Line", che contiene alcune informazioni di base sulla richiesta. E il resto sono gli header HTTP. Dopo tale richiesta, il browser riceve una risposta HTTP che può apparire come segue:

HTTP/1.x 200 OK
Transfer-Encoding: chunked
Date: Sat, 28 Nov 2009 04:36:25 GMT
Server: LiteSpeed
Connection: close
X-Powered-By: W3 Total Cache/0.8Pragma: publicExpires: Sat, 28 Nov 2013 08:13:04 GMTEtag: "pub1259380237;gz"Cache-Control: max-age=3600, publicContent-Type: text/html; charset=UTF-8Last-Modified: Sat, 05 Aug 2010 03:50:37 GMTX-Pingback: http://www.paitadesign.com/blog/xmlrpc.phpContent-Encoding: gzipVary: Accept-Encoding, Cookie, User-Agent

<!-- ... contenuto html ... -->

La prima linea è la "Status Line", seguita dagli "header HTTP", fino alla riga vuota.
Dopo di che, inizia il "contenuto" vero e proprio della pagina (in questo caso, un output HTML).
Quando si guarda il codice sorgente di una pagina web nel browser, si vedrà solo la parte di codice HTML e non le intestazioni HTTP, anche se effettivamente sono state trasmesse così come le vedete sopra.
Queste richieste HTTP sono state inviate e ricevute anche per altre cose, come immagini, file CSS e JavaScript, ecc…
Questo è il motivo per cui poco prima abbiamo accennato al fatto che il browser ha inviato almeno 40 o più richieste HTTP quando è stata caricata questa pagina.

Non ci interessa qui approfondire nel dettaglio gli HTTP headers.

HTTP status code: comprenderli e gestirli

I server HTTP rispondono utilizzando linee di status che informano il client sull’esito della richiesta.
Gli status contengono 3 campi:

1. versione del protocollo HTTP
2. status code
3. descrizione

Lo status code è dato da un numero a 3 cifre con i seguenti significati:
1XX consiste solo nella status line e in headers opzionali
2XX l’azione richiesta ha avuto successo: la pagina è presente e il server ne restituisce il contenuto
3XX richiesta di reindirizzamento
4XX è un errore lato client e contiene sintassi errata
5XX è un errore lato server e il server non ha potuto soddisfare la richiesta

SEO e Status code HTTP

Dal punto di vista dell’ottimizzazione SEO gli status code più importanti sono:

• 200 (OK) serve per indicare che la pagina esiste e ne restituisce successvamente il contenuto;
• 204 (No Content) indica che la richiesta è stata processata ma non è stato reperito alcun contenuto da inviare;
• 301 (Moved Permanently) indica che il file specificato è stato permanentemente spostato in un’altra locazione (è necessario specificare la nuova locazione permanente). Da utilizzare ai fini SEO nello spostamento di URL permanentemente.
• 403 (Forbidden) indica che la richiesta non è autorizzata, spesso causata dal settaggio dei permessi sul web server o dall’accesso non consentito ad un area coperta da user name e password;
• 404 (Not Found) serve ad indicare che la risorsa all’URL richiesta non è stata trovata. Da utilizzare ai fini SEO e di usabilità, impostando nel web server un Error Document con destinazione una pagina HTML con un messaggio di errore per l’utente;
• 410 (Gone) rappresenta la risposta in caso di risorsa non più disponibile;
• 500 (Internal Server Error) indica che il server è incorso in un errore inaspettato che non ha permesso di completare la richiesta;
• 503 (Service Unavailable) consente al bot di capire che il sito è temporaneamente fuori servizio. Importante utilizzare lo status 503 qualora il sito web non sia disponibile per un periodo superiore alle 5 ore per motivi tecnici.

Per impostare il redirect delle pagine di errore su pagine SEO freindly è possibile settare il file htaccess per i server Apache.

Articoli correlati:

1. WAMP e SSI: come aggiungere il supporto Server Side Include

Server Side Include: cosa sono

I comandi Server Side Include sono dei semplici script utilizzati nelle pagine HTML e permettono di includere il contenuto (che può essere dinamico) di un documento in un altro, rendendo più facile la manutenzione del sito.
Il comando SSI "include" è probabilmente il comando più usato.
Il file o il parametro virtuale specifica il file (pagina HTML, file di testo, script, ecc.) da includere. Di solito, i server web non supportano SSI, tranne pochi, tra cui i Apache. Con Apache il file che include deve avere estensione shtml (cioèserver-parsed HTML, o Secure HTML), .shtm, o .stm, mentre il file che viene incluso può avere qualsiasi estensione. Se non viene attribuita al file che include un’estensione "shtml", l’inclusione non avviene. Solo i file con queste estensioni vengono infatti processati per trovare ed effettuare le direttive di inclusione. I files "html" e "htm" invece vengono "serviti" al client così come sono, senza essere processati, dal momento che Apache in questo modo sa a priori che non contengono inclusioni. Quando un file SSI viene analizzato (parsing) nel server, il server prende l’intero contenuto del file e lo inserisce nella pagina, sostituendo il codice incluso:

<!--#include file="mioFile.html" -->  

Come aggiungere il supporto SSI in Wamp

Ecco come procedere:

1. Cercare la cartella C:\wamp\bin\apache\Apache2.2.11\conf
2. Aprire il file http.conf
3. Cercare

   <IfModule mime_module>...</IfModule>

   e aggiungervi il seguente codice:

   AddType text/html .shtml
Options +Includes
AddOutputFilter INCLUDES .shtml

4. poi trovare Options Indexes FollowSymLinks e sostituirlo con:

   Options +Indexes +FollowSymLinks +Includes

5. Riavviare tutti i servizi.

Articoli correlati:

1. SEO e HTTP status code
2. WordPress e sicurezza: impostare i permessi con CHMOD

La caratteristica principale di JavaScript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato, bensì c’è un interprete incluso nel browser, e dato che ognuno (ma soprattutto IE) interpreta con specifiche ed eccezioni proprie, è spesso impossibile essere certi del funzionamento cross-browser di uno script.
In risposta a questi problemi sono nati progetti di librerie (o meglio framework) in grado di garantire il funzionamento cross-browser degli script e di estendere o comunque facilitare le funzioni native di JavaScript.

Cos’è jQuery?

Proprio per “facilitare” la creazione di pagine web, nel 2006 John Resig pubblicò la prima versione del suo ormai famosissimo framework: jQuery.
jQuery nasce quindi con lo scopo di risolvere tali problemi e di fornire uno strumento che potesse velocizzare la stesura del codice. Ed è così che è diventato il framework più utilizzato e con il più alto numero di plugin disponibili. La libreria ha una dimensione inferiore a quella degli altri framework, ha una community estesa ed è facile da imparare.

JavaScript: cenni introduttivi

Per chi inizia da zero, ecco una breve introduzione alle buone e cattive pratiche da seguire nello scrivere codice JavaScript, quindi valide anche per jQuery.
Per prima cosa, maggiore è la separazione migliore è la qualità del nostro risultato.
Per ottenere ciò, è bene tenere a mente gli scopi per la quale una pagina web è scritta:

• descrivere il contenuto della pagina (HTML semantico)
• specificare la presentazione di tale contenuto (CSS)
• controllare il comportamento del contenuto (JavaScript)

Anche se è possibile agganciare per rapidità il codice JavaScript nei tag all’interno degli attributi “handlers” o all’interno dell’attributo href, questo rappresenta una cattiva pratica.

Evitare quindi gli handlers:

<a href="#" onclick="alert('Hello World');">click</a>

e il codice javaScript all’interno dell’attributo href:

<a href="javascript:alert('Hello World');">click</a>

È poi possibile inserire snippets di codice all’interno del tag script:

<script type="text/javascript">
	alert("Ciao mondo!");
</script>  

Sicuramente, a meno che non sia un piccolo esercizio, il codice JavaScript va messo in file esterni:

<script src="script.js" type="text/javascript"></script> 

La posizione migliore per chiarezza è all’interno del tag head, anche se alcuni tipi di js esterni è meglio metterli al fondo (prima della chiusura del tag body). Questo perchè lo scarico del documento viene bloccato se ci sono problemi nel caricare la risorsa esterna. Se ad esempio il server di Google Analytics rispondesse per qualche ragione con tempi di attesa molto lunghi, ritarderebbe lo scaricamento dell’intera pagina web. Quindi, in generale è buon uso copiare gli script in locale, e se sono esterni valutare bene il loro scopo.

Lo stile di programmazione cambia a seconda della posizione. O per lo meno la chiamata (l’invocazione) di ciò che ho programmato dovra aspettare che il documento sia stato scaricato.

Ecco un’altra risorsa che illustra in modo esauriente questa tematica.

Iniziare ad usare jQuery

Per prima cosa occorre scaricare il core di jQuery, salvarlo in locale (per esempio: root\scripts\) e aggiungere all’intenro dell tag head il codice per richiamare la libreria. Così:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dove inserire il link al core di jQuery? Qui sotto!</title>
<meta name="description" content="jQuery Tutorial" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>

Possiamo poi iniziare a scrivere il codice in un file esterno, che va linkato dentro il tag head, dopo il link al core:

<script type=”text/javascript” src=”scripts/mioScript.js”></script>

Il codice di jQuery deve sempre iniziare con il costrutto $(document).ready(), per segnalare alla pagina di eseguire il codice quando tutto il contenuto è caricato:

$(document).ready(function(){
	// il codice va qui
});

In jQuery sono molto importanti le parentesi, ogni blocco di istruzioni è racchiuso in parentesi tonde che a loro volta inglobano 2 parentesi graffe.
Nel codice sopra c’è una parentesi tonda che inizia dopo ready e viene chiusa alla fine, seguita dal ;).

Ogni metodo è seguito dalle parentesi tonde che in alcuni casi possono non contenere nulla (tecnicamente si dice che non contengono argomenti), in altri casi invece possono contenere alcuni parametri utili al funzionamento.

Mostra/Nascondi elementi: toggle

Vogliamo creare un menù in cui ci saimo dei semplici box da mostrare/nascondere al click sul titolo.
Ecco tutte le risorse per completare il progetto e una preview del risultato:

1. Impostiamo la struttura e applichiamo gli stili

Incominciamo con l’impostare il menù, con il nostro primo contenuto, cioè il titolo con l’anchor, seguito dal contenuto vero e proprio, cioè il titolo h3 e un paragrafo di testo:

<div id="menu">
	<h2 class="trigger">
    <a href="#">Prima Voce del Menù</a>
	</h2>	<div class="container">
	 <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur
    congue justo, at ultricies diam mollis non.
    vestibulum libero. Donec consequat elementum
    tincidunt sapien malesuada fringilla.</p>
	</div>
</div>

Naturalmente possiamo inserire quanti elementi ci occorrono, all’interno del menù.
Applichiamo gli stili al codice, per esempio così:

body {
 font:normal 12px/14px "Lucida Sans Unicode",
 "Lucida Grande", sans-serif;
}
#menu {
 width:351px;
 margin:0 auto;
}
h2 {
 width:298px;
 padding:0 0 0 53px;
 height:40px;
 margin:0;
}
h2 a {
 color:#FFF;
 text-decoration:none;
 font-size:14px;
 line-height:40px;
}
h2.trigger {
 background:url(../gfx/bg_h2.jpg) left top no-repeat;
}
h2.active {
 background:url(../gfx/bg_h2.jpg) left bottom no-repeat;
}
.container {
 padding:20px;
 background:#f3f3f3;
 border:1px solid #999;
 color:#333;
}
h3 {
 margin:0;
 padding:0;
}
.container h3 {
 padding:0 0 20px 0;
 font-size:13px;
}
.container p {
 margin:0;
 padding:0;
}

2. Attiviamo il toggle con jQuery

Attiviamo odesso l’effetto toggle con jQuery. Per prima cosa nascondiamo tutti gli elementi cui è applicata la classe container. Selezioniamo poi tutti i titoli che hanno la classe trigger, applichiamo loro lo stile css cursor:pointer e attiviamo il toggle che aggiunge e rimuove la classe active. Per ultimo, agganciamo al click sul titolo il toggle:

$(document).ready(function()

  $(".container").hide();

  $("h2.trigger").css("cursor","pointer").toggle(function(){
  	$(this).addClass("active");
  }, function () {
  $(this).removeClass("active");
  });

  $("h2.trigger").click(function(){
  $(this).next(".container").toggle();
  });

});

Come si può notare, otteniamo un mostra nascondi piuttosto scattoso. Per ottenere un effetto "a tendina", possiamo utilizzare slideToggle:

$("h2.trigger").click(function(){
	$(this).next(".container").slideToggle("slow");
});

e ottenere una animazione più fluida.

Articoli correlati:

1. jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!
2. jQuery SmoothScroll: effetto scorrimento verticale morbido!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Il primo metodo che suggerisco consente di segnalare la pagina corrente in modo dinamico, ma ha il limite di non poter essere utilizzato con menù che sfruttano la tecnica CSS dello "sprite image". Il secondo metodo sfrutta il body id ed è compatibile con lo "sprite image", ma non è dinamico.

PHP: evidenziare la pagina corrente in modo dinamico

Ecco un esempio di menù di navigazione generico per un sito web:

<div id="main_nav">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="Identity.php">Identity</a></li>
    <li><a href="logo.php">Logo</a></li>
    <li><a href="small_graphic.php">Small Graphic</a></li>
    <li><a href="video.php">Video</a></li>
    <li><a href="contatti.php">Contatti</a></li>
  </ul>
</div>

Salviamolo come file esterno nella cartella dei file inclusi e al suo posto scriviamo in pagina queste righe di codice:

<?php
	$menu=file_get_contents("inc/main_nav.php");
	$base=basename($_SERVER['PHP_SELF']);
	$menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li class=\"current\">$1</li>", $menu);
	echo $menu;
?>

Ecco cosa stiamo facendo: memorizziamo nella variabile menu il nostro menù di navigazione.
Utilizziamo poi la funzione basename che restituisce, dato un percorso, la componente di questo identificata da un nome di file ($_SERVER è un array contenente delle variabili impostate dal Web Server oppure direttamente legate all’ambiente di esecuzione dello script corrente; PHP_SELF restituisce il nome del file dello script correntemente in esecuzione), e la memorizziamo nella variabile base. Nella riga successiva preg_replace effettua una ricerca di una espressione regolare e la sostiutisce: in questo caso ricerca il link con attributo href uguali alla pagina in cui ci troviamo e lo sostituisce con un elemento li con assegnata la classe current, che definisce lo stile da assegnare al link della pagina corrente.
Infine tramite echo $menu stampiamo in pagina il menù. È da notare che stiamo sostituendo un link con un elemento list-item, in modo tale che il collegamento alla pagina in cui siamo non sia attivo.

CSS: evidenziare la pagina corrente con il body id

Se per esigenze di layout abbiamo impostato il menù tramite la tecnica cosiddetta “css sprite image“, non possiamo utilizzare la programmazione come nell’esempio precedente, ma possiamo evidenziare la pagina corrente nel menù di navigazione dichiarando un id specifico per il tag body e assegnando nel foglio di stile un comportamento specifico per il link della pagina in cui siamo. Ecco un esempio di codice html:

<body id=logo>
...
<div id="main_nav">
  <ul>
    <li><a id="main_nav_index" href="index.php">Home</a></li>
    <li><a id="main_nav_immagine_coordinata" href="immagine_coordinata.php">Identity</a></li>
    <li><a id="main_nav_logo" href="logo.php">Logo</a></li&gt
    <li><a id="main_nav_small_graphic" href="small_graphic.php">Small Graphic</a></li>
    <li><a id="main_nav_video" href="video.php">Video</a></li>
    <li><a id="main_nav_contatti" href="contatti.php">Contatti</a></li>
  </ul>
</div>
...
</body>

Ed ecco come impostare il codice CSS associato:

/* pagina "Logo" */
#logo #main_nav #main_nav_logo a {
  background:url(../gfx/main_nav.gif) no-repeat -90px -61px; /*Posizionamento dell'immagine per evienziare la pagina corrente */
}

Come rendere questo esempio più dinamico? Possiamo sfruttare anche in questo caso gli snippet PHP che abbiamo usato nell’esempio precedente:

<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">
<?php require_once('inc/main_nav.php'); ?>
...
</body>

In questo modo l’ID dela pagina sarà uguale all’indirizzo della pagina in cui è inserito il menù.

jQuery: evidenziare la pagina corrente in modo semplice!

Ecco un esempio di codice per il menù di navigazione che si autoevidenzia con jQuery:

<div id="mainNav">
 <ul>
  <li><a id="home" href="index.html">Home</a></li>
  <li><a id="chi" href="chisono.html">Chi sono</a></li>
  <li><a id="cosa" href="cosafaccio.html">Cosa faccio</a></li>
  <li><a id="dove" href="dovesono.html">Dove sono</a></li>
 </ul>
</div>

Occorre prima scaricare il plugin jQuery URL Parser e poi scrivere queste righe di codice:

	$page = jQuery.url.attr('file');
	if(!$page) {
		$page = 'index.html';
	}
	$('ul.navigation li a').each(function(){
		var $href = $(this).attr('href');
		if ( ($href == $page) || ($href == '') ) {
			$(this).addClass('on');
		} else {
			$(this).removeClass('on');
		}
	});

Suggeriscimi un argomento!