|
Pagina products.htm come vista dal FrontPage®. |
|
|
Quasi tutta la grafica del sito è gestita da alcuni modelli posti all’interno della cartella ecp/tmpl/<CODICE_LINGUA> dove
CODICE_LINGUA è il codice ISO???? di due caratteri della nazione in cui si parla la lingua con cui sono scritte le pagine.
Le pagine hanno l’estensione .htm e possono quindi essere modificate da un qualsiasi editor di testi HTML quali per esempio il FrontPage, HotDog, HomeSite o WordPadJ
E’ necessario però avere un po’ d’accortezza nella modifica di tali pagine poiché, nascoste all’interno del codice HTML di queste pagine, vi sono delle sezioni particolari che però sono fondamentali per il corretto funzionamento del sistema stesso.
Vi sono sostanzialmente tre tipologie di elementi a cui è necessario prestare attenzione:
1) TAG non standard ossia tag che non sono riconosciuti dai browser HTML. Questi TAG, prima di essere inviati al browser, sono processati dal sistema e, al loro posto, viene inserito del codice dinamico. Sono tali tag che fanno apparire il corretto prezzo del prodotto nella pagina HTML dell’elenco prodotti. Possono essere di due tipi:
a. <TMPL_VAR NAME=txtVar>Testo d’esempio</TMPL_VAR>
b. <TMPL_IF NAME=boolVar>Testo d’esempio <TMPL_ELSE> Testo d’esempio </TMPL_IF>
2) Commenti che indicano quale parte del codice HTML deve essere utilizzata e quale no. Infatti, come vedremo sotto, di alcune pagine viene utilizzata solo una parte e il resto viene scartato. Un esempio è la pagina products.htm in cui l’impostazione grafica è formato da questo file eccezion fatta per la tabella dei prodotti presenti nel negozio virtuale. Questo elemento viene invece ricavato dal file productSection.htm. Questo file è però un file html regolare e contiene quindi anche altro codice. I tag di commento <!--CSTART--> e <!--CEND--> indicano dunque al sistema quale blocco di codice all’interno del file deve essere preso e quale deve essere tralasciato.
3) Codice HTML reale che è necessario mantenere per il funzionamento del sistema. Anche se questa è una parte limitata dell’intero sistema, è molto importante mantenere tale codice perché la sua mancanza pregiudica il funzionamento del sistema stesso. Ne è un esempio il codice JavaScript contenuto, per esempio, nella pagina products.htm. Tale codice permette l’aggiornamento del frame superiore e quindi, il ricalcolo del numero di prodotti presenti nel carrello e del costo totale.
Da quanto appena detto si evince che, oltre alla capacità di usare un editor grafico per formattare le pagine HTML è necessario conoscere, anche se superficialmente, il linguaggio HTML.
Si rimanda quindi al manualetto del programmatore HTML per le informazioni del caso o a qualunque manuale del linguaggio HTML 3.0.
Come già detto, all’interno dei file HTML, vi è del codice non standard che viene sostituito dal sistema prima di essere inviato al browser. Questi TAG, successivamente chiamati “direttive”, vengono sostituiti con un valore appropriato ricavato da elaborazioni interne al sistema.
Questo TAG è presente all’interno del file HTML per essere sostituito durante l’elaborazione da un blocco di codice dinamico. L’attributo NAME del TAG indica quale particolare valore dinamico sarà inserito nel contesto. Il testo contenuto tra l’inizio del tag (<TMPL_VAR>) e la fine del TAG (</TMPL_VAR>) viene cancellato durante l’elaborazione ed è inserito solo per rendere l’output visivo durante la modifica della grafica da parte di un editor visuale di pagine HTML.
Facciamo un esempio del TAG <TMPL_VAR> prendendo, come esempio, una versione epurata del file products.htm. Questo file è poi quello che formatta graficamente la lista dei prodotti acquistabili.
Listato del file products.htm |
1 <html>
2 <head>
3 <title>EuronetZone E-Commerce</title>
4 </head>
5 <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
6 <table border="0" align="center" style="right: 5" width="100%">
7 <tr>
8 <td align="left" width="341">
9 <TMPL_VAR NAME=choose_page> 10 Vai alla pagina: 1 2 3 4 5
11 </TMPL_VAR> 12 </td>
13 <td align="right" width="345">
14 Trovati
15 <TMPL_VAR NAME=pcount> 16 12 17 </TMPL_VAR> 18 prodotti su 19 <TMPL_VAR NAME=pages> 20 4 21 </TMPL_VAR> 22 pagine – <font color="#008000">
23 Pagina 24 <TMPL_VAR NAME=page> 25 3 26 </TMPL_VAR> 27 </font>
28 </td>
29 </tr>
30 </table>
31 <p>
32 <br>
33 <center>
34 <table border="0" width=560 align="center" cellpadding="0"
35 <tr>
36 <td>
37 <TMPL_VAR NAME=productSection> 38 <table width="573" border="0" 39 cellspacing="4"> 40 ..........omiss........... 41 </table> 42 </TMPL_VAR> 43 </td>
44 </tr>
45 </table>
46 </center>
47 </body>
48 </html> |
Vediamo cosa succede quando questa pagina viene visualizzata a video:
1) La sezione <TMPL_VAR NAME=choose_page>…</TMPL_VAR> è sostituita con altro codice HTML e, in particolare, con il codice necessario per poter sfogliare le varie pagine di presentazione articoli;
2) La sezione <TMPL_VAR NAME=pcount>…</TMPL_VAR> è sostituita con altro codice HTML e, in particolare, con il numero totale di articoli trovati;
3) La sezione <TMPL_VAR NAME=pages>…</TMPL_VAR> è sostituita con il numero di pagine totali su cui si sviluppa la ricerca;
4) La sezione <TMPL_VAR NAME=page>…</TMPL_VAR> è sostituita con il numero di pagina corrente;
5) La sezione <TMPL_VAR NAME=productSection>…</TMPL_VAR> è sostituita con il codice HTML della lista dei prodotti presenti su questa pagina.
Soffermiamoci su quest’ultimo punto. Quando viene vista all’interno di un editor visuale quale FrontPage® la pagina products.htm ha il formato grafico in figura.
|
Pagina products.htm come vista dal FrontPage®. |
|
|
Quando la stessa pagina è processata dal sistema l’output grafico si presenta invece modificato.
|
Pagina products.htm come vista dopo l’elaborazione interna. |
|
|
Risulta subito evidente che, oltre a variazioni marginali, la parte centrale della tabella è completamente differente nei due casi.
E’ questo che si intende quando si afferma che il codice HTML presente tra il TAG <TMPL_VAR NAME=productSection> e il TAG </TMPL_VAR> viene eliminato e sostituito da codice dinamico.
|
Qualsiasi modifica effettuata tra il TAG <TMPL_VAR> e il TAG </TMPL_VAR> risulterà ininfluente in quanto tale codice sarà rimosso in fase di output dela pagina |
Ci si potrebbe allora chiedere se e come sia possibile modificare l’impostazione grafica della tabella centrale.
Abbiamo già visto come non sia possibile operare direttamente sul codice relativo presente nel file products.htm in quanto questo è rimosso dal sistema in fase di output. Ma dove prende il sistema il codice per sovrascrivere la sezione dinamica productSection ?
La prende da un altro file HTML e in particolare dal file productSection.htm. Vedremo questo file in seguito come esempio nel paragrafo riguardante la direttiva <!--CSTART-->.
La direttiva <TMPL_IF> è utilizzata per mostrare o meno delle sezioni di codice HTML a seconda che una data condizione sia vera o falsa. La condizione è specificata dall’attributo NAME della direttiva e viene passata alla pagina dal motore di elaborazione interna del sistema tramite un valore booleano che può quindi essere vero (1) o false (0).
Ci sono due possibili utilizzi del tag:
a) <TMPL_IF NAME= boolVar >Codice HTML</TMPL_IF>
b) <TMPL_IF NAME=boolVar>Codice HTML<TMPL_ELSE>Codice HTML alternativo</TMPL_IF>
Il loro, spero, ovvio significato è:
a) se boolVar è vera allora viene mostrato il codice interno alla direttiva altrimenti non viene mostrato nulla;
b) se boolVar è vera allora viene mostrato il codice tra la direttiva <TMPL_IF NAME=boolVar> e la direttiva <TMPL_ELSE> altrimenti viene mostrato quello tra la direttiva <TMPL_ELSE> e la direttiva </TMPL_IF> .
Si può quindi affermare che:
|
a) == <TMPL_IF NAME=boolVar>Codice HTML<TMPL_ELSE></TMPL_IF> |
Consideriamo come esempio una parte del codice omessa nell’esempio precedente e presente nell’header del file products.htm.
Header del file products.htm |
1 <html>
2 <head>
3 <script language="javascript">
4 <!--
5 function refreshTopFrame() {
6 <TMPL_IF NAME=refreshLeft> 7 if (typeof(parent.frames[0]) == 'object') { 8 parent.frames[0].location.href='top.mpl'; 9 } 10 if (typeof(parent.frames[1]) == 'object') { 11 parent.frames[1].location.href='left.mpl'; 12 } 13 </TMPL_IF> 14 } 15 //--> 16 </script> 17 <title>EuronetZone E-Commerce</title>
|
Il codice da riga 5 a riga 15 è quello relativo all’aggiornamento del frame laterale e superiore. Tale blocco di codice JavaScript viene richiamato dall’evento onLoad della pagina products.htm ossia, al caricamento della pagina, si vuole che, in alcuni casi, sia aggiornato il frame laterale e quello superiore.
Il blocco <TMPL_IF>...</TMPL_IF> assolve proprio alla funzione di tradurre in linguaggio logico l’espressione “in alcuni casi”.
Se il sistema ritiene necessario aggiornare suddetti frame allora invia la modulo un valore vero per la variabile refreshLeft di modo che il codice JavaScript viene restituito in fase di output della pagina e viene così eseguito il refresh.
Se il sistema invia invece un valore falso per la variabile refreshLeft allora la funzione refreshTopFrame risulterà vuota e non sarà quindi eseguito alcun aggiornamento.
Vediamo ora un ulteriore esempio sulla direttiva <TMPL_IF> per mostrare come, attraverso l’editor html, sia possibile ridefinire, oltre che l’impostazione grafica del sito, anche alcuni suoi aspetti funzionali.
Consideriamo quindi, a tal proposito, le pagine relative al wizard di creazione nuovo utente presenti all’interno della cartella ecp/tmpl/<LANG>/wizard.
Nel secondo step del wizard si deve scegliere se si è un soggietto privato o un’azienda. Da questo momento in poi verrà propagata una variabile internal_isAzienda di tipo booleana che indica se è stata scelta la tipologia aziendale o quella privata.
Tale variabile è stata poi usata pesantemente negli step successivi per ottenere modifiche funzionali al flusso di inserimento dei dati nel wizard.
Quello che si voleva fare, per esempio, era ottenere nel terzo step la ragione sociale e la partita IVA nel caso di soggetto aziendale e il cognome e il nome nel caso di soggetto privato. Inoltre le informazioni circa il nome e il cognome dovevano essere richieste nel quarto step quale referente aziendale nel caso la scelta fosse stata quella di una registrazione aziendale mentre, nel caso di una registrazione di un utente privato, si voleva ottenere nel quarto step il codice fiscale del soggetto.
Per ottenere ciò è stato scritto il seguente codice nel file userAdd_Step3.htm:
Estratto dal file userAdd_Step3.htm |
1 <TMPL_IF NAME=internal_isAzienda> 2 <tr> 3 <td width="87">Ragione Sociale:</td> 4 <td width="207"> 5 <input type="text" name="ragsoc" size="39" 6 value="<TMPL_VAR NAME=useranagr_ragsoc>"> 7 </td> 8 </tr> 9 <tr> 10 <td width="103">Partita Iva:</td> 11 <td width="191"><input type="text" name="cf" size="39" 12 value="<TMPL_VAR NAME=userinfo_cf>"> </td> 13 </tr> 14 <TMPL_ELSE> 15 <tr> 16 <td width="87">Cognome: </td> 17 <td width="207"><input type="text" name="cognome" size="39" 18 value="<TMPL_VAR NAME=useranagr_cognome>"> </td> 19 </tr> 20 <tr> 21 <td width="87">Nome: </td> 22 <td width="207"><input type="text" name="nome" size="39" 23 value="<TMPL_VAR NAME=useranagr_nome>"> </td> 24 </tr> 25 </TMPL_IF>
|
e questo nel file userAdd_Step5.htm (per un errore il quarto step del wizard si chiama userAdd_Step5 e il quinto step viene gestito graficamente dal file userAdd_Step4.htmJ)
Estratto dal file userAdd_Step5.htm |
1 <TMPL_IF NAME=internal_isAzienda> 2 <tr> 3 <td width="100">Cognome referente: </td> 4 <td width="194"><input type="text" name="cognome" size="35" 5 value="<TMPL_VAR NAME=useranagr_cognome>"> </td> 6 </tr> 7 <tr> 8 <td width="100">Nome referente: </td> 9 <td width="194"><input type="text" name="nome" size="35" 10 value="<TMPL_VAR NAME=useranagr_nome>"> </td> 11 </tr> 12 <TMPL_ELSE> 13 <tr> 14 <td width="116">Codice Fiscale:</td> 15 <td width="178"><input type="text" name="cf" size="35" 16 value="<TMPL_VAR NAME=userinfo_cf>"> </td> 17 </tr> 18 </TMPL_IF>
|
|
|
Quindi, come si vede anche facilmente dando un’occhiata al codice sopra, dal punto di vista dello sviluppatore delle pagine www, le pagine vengono viste come una fusione delle due possibili situazioni, quella aziendale e quella privata.
Punto di vista dello sviluppatore del codice HTML (FrontPage view) |
|
File userAdd_Step3.html |
File userAdd_Step5.html |
|
|
mentre dal punto di vista del client le due pagine sono viste in modo differente
Punto di vista dello client dopo elaborazione del motore interno |
|
File userAdd_Step3.html (azienda) |
File userAdd_Step3.html (privato) |
|
|
File userAdd_Step5.html (azienda) |
File userAdd_Step5.html (privato) |
|
|
|
Si può quindi operare delle modifiche funzionali al prodotto agendo sul solo codice HTML. |
Questa direttiva, dal punto di vista di un browser HTML, rappresenta nient’altro che un commento, infatti tutto quello racchiuso tra i caratteri <!-- e i caratteri --> rappresentano per il browser del testo da non processare.
Questi due particolari commenti, se inseriti all’interno di una pagina HTML di questo sistema non giungeranno mai al browser del client in quanto rappresentano delle direttive del sistema e vengono quindi elaborate dal motore di elaborazione interno.
Qual’è il significato di questi due TAG? Quando il sistema di elaborazione trova all’interno di un file HTML la direttiva <!--CSTART--> capisce che deve partire da quel punto a processare il codice HTML e deve tralasciare tutto quanto letto fino a quel momento. Il sistema processera dunque il codice HTML dal TAG <!--CSTART--> fino ad incontrare il TAG <!--CEND--> e da lì ripartirà alla ricerca eventualemente di un successivo TAG <!--CSTART--> da cui riprendere l’elaborazione.
Riassumendo il codice che si ottiene da una pagina HTML che contiene la direttiva <!--CSTART--> e solo e soltanto quello contenuto tra questa direttiva e la direttiva <!--CEND-->.
A cosa può essere utile ciò?
Ricordiamo che nell’esempio del file products.htm presentato nel pagagrafo relativo alla direttiva <TMPL_VAR> si parlava del fatto che la pagina finale era la fusione di due pagine, la productSection.htm per quanto riguarda l’impostazione grafica della tabella centrale che, potendo contenere un numero imprecisato di prodotti era per sua natura un elemento dinamico della pagina e dalla pagine products.htm che impostava il restante layout grafico che componeva la pagina definitiva.
Soffermiamoci dunque sulla pagina productSection.htm. Questa, quando viene vista dall’editor di pagine HTML, deve essere una corretta pagina HTML e deve contenere quindi, per esempio, un header, un tag <HTML>, un tag <HEADER>, un tag <BODY> e cosi via.
Il fatto è che invece, quando questa pagina viene incollata all’interno del file products.htm al posto della sezione productSection deve essere, per così dire, epurata di tali elementi, in quanto la pagina finale li possiede già essendo quelli presenti nel file products.htm.
Ciò che si vuole incollare è, per ogni prodotto del negozio virtuale, il layout grafico della tabella contenuta nel file productSection.htm. Questo si ottiene, come si vede in figura, tramite la direttiva <!—CSTARTà...<!—CENDà
Listato del file productSection.htm |
1 <html> 2 <head> 3 <title>Carrello spesa</title> 4 </head> 5 <body> 6 <!—CSTARTà 7 <table width=”573” border=”0” cellpadding=”0” cellspacing=”4”>
40 <tr>
41 <td valign=”top” width=”135” bgcolor=”#fee7b1”>
42 <table border=”0” cellpadding=”2” height=”100%”>
43 <tr valign=”top”>
44 <td width=”100%” valign=”center” bgcolor=”#fee7b1”>
45 <A href=”product.mpl?productId=<TMPL_VAR NAME=id> 46 </TMPL_VAR>” 47 <IMG height=100 alt=”Clicca qui per la foto grande”
48 src=”<TMPL_VAR NAME=link_pict></TMPL_VAR>” 49 width=100 vspace=2 border=0 >
50 </A>
51 </TD>
52 </TR>
53 <tr>
54 <td width=”100%” bgcolor=”#4aa5ff” valign=”top”>
55 <font color=”white”>Carrello spesa</FONT>
56 </TD>
57 </TR>
58 <tr>
59 <form method=”post”
60 action=”<TMPL_VAR NAME=link_form></TMPL_VAR>” 61 name=”FORM_<TMPL_VAR NAME=id></TMPL_VAR>”> 62 <td width=”100%” bgcolor=”#fee7b1” valign=”baseline”>
63 </td>
64 </FORM>
65 </TR>
66 </TABLE>
67 </TD>
68 </TR>
37 </TABLE>
38 <!—CENDà 39 </body> 40 </html>
|
Il processo che porta alla creazione della pagina dei prodotti può essere quindi graficamente schematizzato dalla seguenti figura.
Alcune pagine contengono del codice JavaScript necessario al funzionamento del sistema stesso.
Ne è un esempio il codice JavaScript presentato nel paragrafo relativo alla direttiva <TMPL_IF> ove il codice relativo alla pagina products.htm era necessario ad aggiornare il frame superiore e quello laterale.
Va da se che se tale codice dovesse essere modificato o addirittura eliminato vi possono essere delle discrepanze tra le informazioni contenute nei vari frame.
Altro esempio di codice JavaScript importante ai fini del funzionamento del sistema è il codice necessario alla validazione dei campi di input nei vari form quale, per esempio, nei vari step del wizard di aggiunta nuovo utente al sistema. Tale codice è necessario ad assicurare la coerenza dei dati inseriti.
Va da se che se tale codice viene eliminati possono accadere degli effetti imprevedibili.
Per esempio, se nello step 1 si elimina il codice JavaScript necessario a verificare che le due password inserite siano identiche si ottiene che il sistema continua a funzionare ma potrebbe accadere che un errore di battitura nell’inserimento della prima password, quella che poi viene effettivamente salvata nel sistema, impedisca all’utente registratosi di poter entrare nel sistema in quanto la password inserita risulta differente da quella che l’utente pensa di aver digitato.
Da quanto detto fin ora risulta chiaro che le pagine HTML possono essere modificate tramite qualunque editor HTML avendo l’accortezza di:
1) controllare dopo ogni modifica la coerenza delle varie direttive inserite nel file aiutandosi, al limite, con il programma COLORIZE;
2) modificare quanto meno possibile il codice JavaScript e, se proprio necessario, farlo con cognizione di causa;
3) fare sempre una copia di backup del file HTML funzionante in modo da poter sempre ripristinare una condizione funzionante.
A parte questo è utile ricordare alcuni accorgimenti necessari ad evitare errori ed inutili perdite di tempo durante lo sviluppo dell’impostazione grafica del prodotto.
Se si tratta di un editor visuale, ossia di un editor che mostra la pagina così come poi viene vista dal browser, quale per esempio il Microsoft FrontPage, è utile attivare la visualizzazione dei TAG non standard nel file HTML.
In FrontPage, per esempio, ciò si fà attivando il
pulsante
.
I TAG non standard tra cui, in particolar modo, le direttive interne del sistema
saranno così visibili e visualizzate tramite l’icona
.
A cosa serve ciò? Server ad evitare errori del seguente tipo. Supponiamo di avere del testo all’interno del tag <TMPL_VAR> come il seguente:
<TMPL_VAR NAME=var>Testo d’esempio</TMPL_VAR>
Questo blocco di codice se non attivata la visualizzazione dei TAG non standard, viene visto dal FrontPage come:
Supponiamo ora di voler colorare in rosso il testo che poi apparira all’interno della direttiva al posto della scritta “Testo d’esempio”. Per fare ciò selezionamo dall’editor il testo e impostiamolo come rosso.
Non meravigliatevi se, una volta visualizzata dal browser il testo continuerà ad avere come colore il nero.
L’enigma è sciolto se si va a guardare al codice HTML una volta eseguita la codifica del colore del testo dall’ambiente grafico. Che che si trova è il seguente codice:
<TMPL_VAR NAME=var><FONT color=”#FFFF00”>Testo d’esempio</FONT></TMPL_VAR>
Come si vede il tag FONT è stato inserito dall’editor HTML all’interno della direttiva <TMPL_VAR> e quindi l’impostazione del colore rosso per il testo viene eliminato dall’elaborazione fatta dal motore di rendering del sistema.
Il modo corretto per avere il codice relativo alla variabile var di colore rosso è quello di ottenere dall’editor HTML il seguente codice:
<FONT color=”#FFFF00”><TMPL_VAR NAME=var>Testo d’esempio</TMPL_VAR></FONT>
Per fare ciò attivare la modalità di visualizzazione dei
TAG non standard premendo il pulsante
e
selezionare oltre che il testo anche le icone
che
lo delimitano.
Si può ora verificare che uil risultato finale risulterà correttamente formattato in rosso.
Un’altra cosa su cui bisogna prestare attenzione durante la modifica del codice è ricordare sempre che alcune zone del codice HTML non verranno mai ritornate effettivamente al browser. Ricordare che, per esempio,nella direttiva <!---CSTART--> tutto ciò esterno a questa e alla direttiva <!--CEND-->
