Requisiti
A livello "teorico" potrebbe essere utile la lettura di:
- Introduzione ai documenti web e relativi approfondimenti
a livello "pratico" abbiamo bisogno di:
- Notepad++, editor free scaricabile da http://notepad-plus-plus.org
- Firefox, browser usato in questo tutorial insieme a
- Firebug (opzionale) utile per il debug
Per evitare qualche problema con browser e css è utile scaricare:
- Reset CSS prelevabile da http://meyerweb.com/eric/tools/css/reset/
Per semplificarci il lavoro sullo strato comportamento, riducendo al minimo il codice Javascript che dobbiamo scrivere, ci occorrerà:
- JQuery scaricabile da http://jquery.com
Introduzione
In questo tutorial vedremo come sviluppare correttamente un documento web, mantenendo completamente separati i 3 strati descritti in precedenza: contenuto (XHTML), presentazione (CSS), comportamento (Javascript).
L'obiettivo è: creare 2 documenti, nei quali saranno presenti un titolo, un menu (per passare da un contenuto all'altro) e qualche paragrafo. Oltre a questo dovranno contenere un'area sensibile che si attiva e cambia colore al passaggio del mouse.
Al termine capiremo perchè è vantaggioso mantenere gli strati separati e distinti.
Struttura directory e file
Iniziamo creando la nostra directory/cartella di "lavoro" che chiameremo tutorial in cui andremo a mettere i nostri file.
All'interno di questa directory/cartella creiamo altre 2 sotto-directory che chiameremo css e js.
La prima (css) conterrà il/i file relativi allo strato presentazione (con estensione .css), la seconda (js) quelli relativi allo strato comportamento (con estensione .js). La "radice" (tutorial), invece, conterrà i file relativi allo strato contenuto (con estensione .html).
In definitiva dobbiamo avere una struttura di questo tipo:
-
tutorial
-
css
- presentazione.css
-
js
- comportamento.js
- contenuto1.html
- contenuto2.html
- ...
-
css
Possiamo anche da subito crearci i file riportati nella struttura lasciandoli vuoti (li riempiremo mano a mano).
Reset CSS
Il motivo per cui è necessario fare un reset dei CSS è descritto nella sezione CSS - Reset! di questa guida.
Nel sito indicato sopra preleviamo il codice CSS e incolliamolo nel file reset.css all'interno della directory css.
La directory css dovrà quindi avere (se si sono già creati i file del punto precedente) i file seguenti:
- ...
- css
- presentazione.css
- reset.css
- ...
JQuery
Se abbiamo già scaricato JQuery, ci ritroveremo un file jquery-1.5.2.min.js che dovremo posizionare all'interno della directory/cartella js.
La directory js dovrà quindi avere (se si sono già creati i file del punto precedente) i file seguenti:
- ...
- js
- comportamento.js
- jquery-1.5.2.min.js
- ...
Strato contenuto
I contenuti sono memorizzati su file .html e contengono solo codice HTML / XHTML con riferimenti a file .css e .js esterni.
Vediamo ora di scrivere i contenuti i 2 file partendo da contenuto1.html nel quale andremo ad inserire il codice riportato di seguito:
<html>
<head>
<title>Contenuto 1</title>
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
<link rel="stylesheet" href="./css/presentazione.css" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.5.2.min.js" ></script>
<script type="text/javascript" src="./js/comportamento.js" ></script>
</head>
<body>
<h1>Contenuto 1</h1>
<ul class="menu">
<li>Contenuto 1</li>
<li><a href="contenuto2.html">Contenuto 2</a></li>
</ul>
<div class="testo">
<p>Questo è un semplice testo di prova.</p>
<p>Questo è un secondo paragrafo.</p>
</div>
<div id="area_sensibile">Passa sopra con il mouse</div>
</body>
</html>
Il file contenuti2.html conterrà invece il codice seguente:
<html>
<head>
<title>Contenuto 2</title>
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
<link rel="stylesheet" href="./css/presentazione.css" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.5.2.min.js" ></script>
<script type="text/javascript" src="./js/comportamento.js" ></script>
</head>
<body>
<h1>Contenuto 2</h1>
<ul class="menu">
<li><a href="contenuto1.html">Contenuto 1</a></li>
<li>Contenuto 2</li>
</ul>
<div class="testo">
<p>Questo è un semplice testo di prova.</p>
<p>Questo è un secondo paragrafo.</p>
</div>
<div id="area_sensibile">Passa sopra con il mouse</div>
</body>
</html>
Dai contenuti richiamiamo i file esterni e condivisi che si occupano dello strato presentazione e comportamento.
Da notare, anche se i contenuti sono molto semplici, di come non esista traccia, all'interno del documento, dei linguaggi CSS e Javascript, ma solo richiami a questi.
Strato presentazione
I file presentazione sono memorizzati su file .css e come abbiamo visto sono richiamati dai file .html (evitando di includere linguaggio CSS nel documento HTML/XHTML).
Nel file css dobbiamo dire come visualizzare i contenuti:
body {
font-family: Verdana, Arial;
padding: 15px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
ul.menu {
margin-top: 15px;
font-weight: bold;
height: 30px;
}
ul.menu li {
float: left;
margin-right: 15px;
}
.testo p {
margin-top: 15px;
}
#area_sensibile {
margin-top: 15px;
padding: 15px;
font-size: 20px;
font-weight: bold;
border: 1px solid #999;
color: #999;
}
Strato comportamento
Buona norma è evitare di includere codice Javascript direttamente nei documenti HTML ma scriverlo in un file esterno con estensione .js e richiamarlo dalla pagina .html in modo da condividere lo stesso file .js su più file .html .
Vediamo ora, riprendendo il solito documento di esempio come far diventare rosso il div al passaggio del mouse.
$(document).ready( function() {
$('#area_sensibile').mouseover( function() {
$(this).css('background', 'red');
$(this).css('color', 'green');
});
$('#area_sensibile').mouseout( function() {
$(this).css('background', 'green');
$(this).css('color', 'red');
});
});
Modifiche ai documenti
I documenti, organizzati in questo modo richiedono una manutenzione minima. Ogni modifica sulla presentazione richiede solo la modifica di un file, così è per modifiche a livello di comportamento.
Se non avessimo rispettato la separazione degli strati probabilmente avremmo avuto qualche problema in più.
0 commenti:
Posta un commento