Documenti Web / Tutorial

Requisiti

A livello "teorico" potrebbe essere utile la lettura di:

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:

Per semplificarci il lavoro sullo strato comportamento, riducendo al minimo il codice Javascript che dobbiamo scrivere, ci occorrerà:

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
    • ...

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

Lettori fissi

 
DISCLAIMER: Questo blog non costituisce una testata giornalistica. Non ha carattere periodico ed è aggiornato secondo la disponibilità e la reperibilità dei materiali. Pertanto non può essere considerato in alcun modo un prodotto editoriale ai sensi della Legge. n. 62 del 2001.
COPYRIGHT: Tutti i diritti sui testi/contenuti presenti su questo blog sono di proprietà dell'autore. Per utilizzare il materiale contattarmi all'indirizzo: nevit76@gmail.com