Premessa.
Questo breve testo non pretende di essere una guida alla creazione di siti internet ne un manuale sul linguaggio HTML ma bensì un semplice compendio di quello che è stata la mia esperienza nel creare una pagina web avendo a disposizione uno spazio limitato. Inoltre il sottoscritto non intende presentarsi come detentore di alcuna verità assoluta , quindi tutto quello che seguirà e da considerarsi unicamente una serie di semplici suggerimenti, spero utili.
Fate le dovute premesse, entriamo dunque nel vivo della questione.
La Pianificazione.
La prima cosa che ho imparato a mie spese, è che per ottenere dei buoni risultati in un lavoro qualsiasi, bisogna avere ben chiaro quello che si vuole ottenere. Quindi il mio consiglio e di armarsi di carta e penna e mettere sulla carta tutte le caratteristiche e gli scopi che vogliamo ottenere dalle nostre pagine web. Per esempio, nel creare la mia pagina personale qui su CittaNet io mi sono prefissato i seguenti scopi:
1) Farmi una effettiva pubblicità, quindi far capire esattamente di cosa mi occupo e quali servizi offro. 2) Fornire un motivo per visitare le mie pagine e soprattutto per far si che vengano rivisitate più volte. 3) Creare una pagina il più possibile professionale e accattivante. 4) Evitare il più possibile il ricorso ad una grafica eccessiva per non esaurire i famosi 30k senza essere riuscito a comunicare nulla. A questo punto conviene farsi un giro sulla rete per farsi un idea di quello che si può fare e di quello che non conviene fare per poi decidere quale taglio grafico e tipografico dare al nostro sito.
Una questione di stile.
Ecco le mie conclusioni dopo codesto giretto turistico:
Gli stili che emergono dalla rete non sono poi molti, vediamoli:
Quello che va per la maggiore ultimamente a quanto pare e il taglio Rotocalco o rivista, vedi per esempio http://www.virgilio.it/ e moltri altri. Questi siti sono caratterizzati da un fondo bianco con una striscia, più o meno colorata, sul lato sinistro , una o più immagini sulla parte alta della pagina e anche piccole immagini sparse fra le righe di testo che fungono anche da link. Trovo questo stile piuttosto incisivo e piacevole e con le dovute accortezze si presenta buono per il nostro scopo, quindi analizziamone la costruzione delle parti principali. La banda laterale. Questa generalmente contiene incolonnati i collegamenti alle altre pagine o siti e viene ottenuta molto semplicemente utilizzando per lo sfondo un immagine lunga e stretta (generalmente 100 pixel di altezza per 800 di lughezza) di cui la prima parte circa 128 pixel e del colore o texiture della banda in questione. Ecco un esempio:
questo è il tag da inserire subito dopo l’ intestazione della vostra pagina per impostare l’immagine di sfondo.
<body background="nomeimmagine.gif" text="#000000" vlink="#FFFF00">
In alcuni siti al posto di semplici collegamenti ipertestuali ,sulla banda viene posizionata una immagine cliccabile o mappa questo e molto bello ma tremendamente costoso in termini di spazio e tempo di caricamento.
Per posizionare i testi e le immagini in modo abbastanza preciso occorre fare molti tentativi o utilizzare una tabella con il bordo invisibile per posizionare gli elementi dentro le singole celle. Facendo un po’ di esperimenti si riescono a ottenere effetti veramente interessanti. Molto utile in questo caso l’utilizzo di un editor html che permetta di vedere immediatamente il risultato sul video mentre si costruisce la pagina.
Altro stile diffuso, anche se a mio avviso è decisamente banale e quello classico, cioè immagine con logo in testa ,sfondo variamente colorato, generalmente realizzato utilizzando immagini di sfondo grigie tipo filigrana .quasi sempre presentano i collegamenti ipertestuali sparsi nel testo. Comunque detiene il pregio di essere semplice da realizzare ed essere poco costoso in termini di risorse. Queste pagine possono essere vitalizzate con qualche scritta in movimento o qualche gif animata.
Per le scritte in movimento si può utilizzare:
<h1 align="center"><font size="4"><marquee bgcolor="#FFFFCC" height="24" scrollamount="7" width="95%">Benvenuti nella mia pagina</marquee></font></h1>
da notare che non funziona con NetScape 2 che comunque presenta la scritta ferma quindi non si perde il messaggio.
Per le gif animate, attenzione allo spazio hanno generalmente dimensioni di parecchi Kb essendo formate ta un insieme di più immagini. Comunque:
<img src="gifanimata.gif" align="middle" border="4" width="100" height="41" start="fileopen" loop="infinite">
Ultimo stile che analizzerò e quello che ho deciso di utilizzare per le mie pagine cioè quello basato sui frame.
Questo metodo di costruzione delle pagine , più complesso forse dei precedenti, è a mio avviso e anche quello che rende maggiormente piacevole la navigazione pur utilizzando poche risorse.
Questo metodo , generalmente indicato se si vuole pubblicare più pagine, permette risparmiando risorse e tempo di caricamento, lasciando fissi gli elementi grafici più pesanti e variando solo il contenuto testuale questo permette di dare un aria decisamente professionale alle nostre pagine .
Per costruire una pagina basata sui frame si può procedere come segue. Si crea la pagina principale in questo modo
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Pagina principale</title> </head> <frameset cols="20%,80%"> <frameset rows="100"> <frame src="pagsinstra.HTM" name="BarraSinistra "> #questo è il frame che contiene i # collegamenti alle altre pagine <frameset rows="100,80%"> <frame src="Intestazione.HTM" name="Intestazione "> # Questo e il frame dove posizionare # il logo ecc ecc <frame src="main.HTM" name="main"> # Questo e il frame che conterrà le pagine selezionate dalla barraSinistra </frameset> <noframes> <body> <p> </p> </body> </noframes> </frameset> </html> Nota Io ho utilizzato solo tre frame ma nulla vieta di utilizzarne di più.
Poi si realizzano le singole pagine. Prima occorre realizzare le pagine, PagSinistra.htm ,Intestazione.htm, main.htm e poi via tutte le altre. Per un esempio concreto vi consiglio di dare un occhiata a quelle che ho realizzato per il mio sito su CittaNet (FAX).
Attenzione per i collegamenti nella pagSinistra si dovrà specificare in quale frame visualizzare le singole pagine (in questo caso ‘main’) dove paginaN.htm e la pagina che si vuol far caricare dentro il frame Main.
a href="PaginaN.HTM" target="main"><font size="4"><b>NomePagina </b></font></a>
Naturalmente esistono altri stili e infinite variazioni sul tema a voi il piacere di scoprirli e analizzarli.
Lo Scopo Ed infine dare uno scopo agli altri per visitare la vostra pagina: Per ottenere questo, ho inserito alcune pagine di link a risorse e siti interessanti, comunque pertinenti con il contenuto del mio sito, questo allo scopo di far sì, che il mio sito, possa diventare un puto di partenza per altre navigazioni e quindi un luogo dove tornare ogni tanto per vedere se ci sono novità.
Rifiniture e Collaudo.
Una volta realizzate le pagine secondo lo stile scelto, consiglio di riunire il tutto, documenti html, immagini, mappe ecc. in una sola directory, al fine di valutare lo spazio utilizzato e infine procedere al collaudo del tutto. Si può utilizzare a tal scopo un qualunque browser (meglio se più di uno) caricando la pagina iniziale e provando i vari link, importante e assicurarsi che la navigazione non finisca in vicoli cechi cioè che sia sempre possibile ritornare alla pagina iniziale o a quella precedente e comunque buona norma rendere disponibile un link alla pagina principale del server che ospita la vostra pagina .
Altre regole più o meno importanti sono:
1) Utilizzare per i vari file nomi in formato 8+3 caratteri cosi da garantire il funzionamento con ogni server 2) Utilizzare per le proprie pagine nomi il più possibili univoci, onde evitare conflitti con pagine già esistenti sul server da evitare dunque nomi come ‘Index.atml’,’Main.html’,’Immagine1.gif’,’Sfondo.gif’,ecc,ecc. 3) Evitare di inserire link a pagine precarie che potrebbero sparire dopo pochi giorni o mesi per non essere costretti ad aggiornare continuamente le vostre pagine, ad esempio ‘Relazioni su seminari e conferenze ,pagine di offerte speciali ,riviste poco accreditate ecc , ecc. 4) Assicurarsi che gli elementi inseriti immagini e altro non siano coperti da diritti vari (difficile da coprire, lo so ma doveroso) 5) Non utilizzare se possibile collegamenti a immagini residenti su altri server, questo, se da una parte permette di risparmiare parecchio spazio, dall’altro rende precaria la propria pagina , aumenta il tempo si caricamento e quasi sicuramente scoccia tremendamente al proprietario del suddetto server. 6) Inserire sempre il proprio indirizzo di posta elettronica in fondo alla pagina così da permettere a chi visita la vostra pagina di mettersi in contatto con voi .meglio ancora un bel mailto
<a href="MAILTO:indirizzo@di.email.it"><font size="2"><b>Il Vostro Nome </b></font></a>
E questo per il momento e tutto, comunque attendo fiducioso le vostre critiche e le vostre esperienze che non mancherò di inserire in questo testo .
Zanchetta Fabio Alias FAX EMAIL nfabio@mbox.vol.it