Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Introduzione

Progettare la struttura del sito è importante...
Progettare la struttura del sito è importante...
Link copiato negli appunti

Prima di iniziare la costruzione di un sito web, è buona cosa stilare un progetto che ne comprenda gli scopi, il tipo di utilizzo, di
aggiornamento, di utenti a cui farà riferimento.
Tralasciando i particolari, trattati diffusamente nei corsi e nelle lezioni per webmaster di HTML.it, mi limiterò ad analizzare alcuni punti
focali, e di immediata comprensione.

Dimensioni e proporzioni

Per motivi che mettiamo da parte (assolutamente inventati), decidiamo che il sito debba avere delle proporzioni particolari: la larghezza del
filmato deve essere i 7/3 dell'altezza. Vogliamo quindi che il sito si espanda in orizzontale più che in verticale.

Proporzioni filmato

Preciso che non esiste una dimensione "giusta", anche se di solito i filmati in flash vengono inseriti in una pagina html in modo che non ci sia la necessità di usare le barre di scorrimento, per visualizzarli interamente, a scelta del
designer un filmato potrebbe essere anche 200x800. Le dimensioni e le proporzioni del progetto sono così discrezionali, che a volte possono
essere dettate esclusivamente dal gusto.

Inoltre, non vogliamo che il filmato venga visualizzato nella finestra principale del browser, bensì in una finestra secondaria, aperta come
popup tramite javascript. Questo ci permetterà di aggiungere alcuni attributi, come la costanza delle proporzioni e dimensioni in caso di
ridimensionamento, e un certo controllo sulla posizione rispetto alle altre finestre.

Infine, dal momento che vogliamo che le dimensioni siano costanti (così da essere sicuri di cosa vedrà l'utente), per non affaticare gli
occhi di chi usa una risoluzione come 1600x1200, o "uscire dal monitor" di chi naviga a 640x480, ridimensioneremo automaticamente il
filmato a seconda dei casi.

Requisiti di sistema

Plugin

È dato di fatto che i browser più recenti vengano rilasciati con il plugin per il Flash5 già installato: altrettanto certo però è che
moltissime persone, per le ragioni più disparate, utilizzino ancora browser datati, con il plugin assente o capace di supportare solo versioni
inferiori alla 5.
Per questo motivo, bisogna prendere in considerazione la maggior parte, se non l'interezza, dei casi possibili, ed eventualmente lasciare
all'utente una certa discrezionalità sulle scelte da fare.

Offriremo quindi all'utente, approdato alla pagina iniziale del nostro sito, tre diverse opzioni:

  1. la possibilità di scaricare il plugin aggiornato (tramite un collegamento alla pagina di download del sito della Macromedia);
  2. la possibilità di visualizzare il sito in versione html (qualora non potesse scaricare il plugin, come ad esempio nelle aule computer
    delle scuole o dei campus universitari);
  3. la possibilità di visualizzare la versione in Flash.

Qualora l'utente scelga di visualizzare la versione in flash, una pagina di controllo verificherà la presenza effettiva del plugin. In caso sia presente, aprirà la pagina in flash, altrimenti offrirà nuovamente più scelte, compresa quella di procedere comunque (il controllo sul plugin non è sicuro al 100%).

Processore

Per questo sito prediligeremo un funzionamento veloce e fluido alla presenza di grandi effetti grafici. Quindi eviteremo il più possibile
l'uso di gradienti, di animazioni frame a frame, di effetti alpha, di immagini e suoni.
Inoltre, per poter rendere i movimenti più scattanti, alzeremo il frame rate, dal valore di default di 12 frame al secondo, a quello di 24
frame al secondo: questo potrebbe rendere il filmato meno gestibile per le CPU più lente, ma mescolando con un po' di attenzione leggerezza e velocità, riusciremo ad ottenere un prodotto largamente compatibile.

Banda

Per quanto riguarda la velocità di scaricamento a disposizione dell'utente finale, ci sono tre metodi fondamentali volti a rendere le attese le più brevi possibile. L'uso di suoni in streaming, l'uso delle librerie condivise, e l'ottimizzazione del filmato.

In questo caso non utilizzeremo le prime due: il suono in streaming non si presta ai loop (ogni ripetizione costa in termini di peso), e non
ci consente di controllarne il volume, le librerie condivise invece sono ben lungi dall'essere efficaci, sopratutto perché agli oggetti condivisi non possono essere applicati script, se non nella libreria stessa.

Quello che faremo allora sarà ottimizzare il filmato, con tutti i metodi che abbiamo a disposizione. Il che significa:

  • riduzione dei gradienti a favore di colori solidi
  • riduzione o eliminazione delle animazioni frame a frame, a favore dell'uso di script
  • utilizzo diffuso di simboli presenti nella libreria del filmato, sotto forma di istanza
  • utilizzo di pochi suoni e di poche immagini importate, e comunque di ridotta qualità
  • utilizzo di poche Font, e dei caratteri dispositivo
  • divisione del filmato in porzioni indipendenti

Per divisione del filmato, intendo dire questo: avremo un filmato principale, contenente il menu di navigazione, e vari filmati esterni da caricare solo su richiesta dell'utente. In questo modo, l'attesa per vedere la schermata principale sarà ridotta all'osso, e l'utente deciderà quanto e cosa aspettare.

Filmato introduttivo

Il nostro sito sarà sì dotato di un filmato introduttivo, però da visualizzare solo alla prima visita. Le volte successive, l'intro dovrà
essere saltata a piè pari, per non annoiare inutilmente l'utente. Questo lo otterremo direttamente da Flash, senza l'utilizzo di metodi javascript o la scrittura di cookies.

Inoltre, tutti i preloader presenti in tutti i filmati saranno fatti in modo da non essere visibili ai caricamenti successivi al primo.

Sezioni indipendenti

Come già accennato, il sito sarà diviso in sezioni indipendenti, per ridurre i tempi d'attesa: in queste sezioni spiegherò diverse
tecniche molto richieste. Naturalmente i metodi utilizzati non sono gli unici possibili, e a seconda dei casi ce ne possono essere di migliori
o più efficaci: l'importante è studiare il sistema che più si adatta alle nostre necessità.

Spiegherò quindi come creare diversi scrolling di testo, di cui uno con uno scroller oltre ai pulsanti, la creazione di finestre trascinabili, due differenti slide di immagini, l'invio di messaggi tramite il client di posta (nessun linguaggio esterno), l'interazione con il browser, il controllo del suono.

Accorgimenti vari

Oltre alle cose già accennate, ce ne sono altre che cito qui senza ordine di importanza.

Una delle cose che vogliamo, è controllo del suono di sottofondo. Non ci limiteremo a creare un pulsante per fermare e uno per avviare il
suono, ma anche un controllo per il volume, in due sistemi differenti.

L'interazione con il browser si basa fondamentalmente nel richiamo di funzioni javascript, di solito inserite nella pagina html che incorpora il filmato. In questo caso, invece, richiameremo funzioni raccolte in un file .js, in modo da mantenere il codice il più pulito possibile.

Daremo all'utente la possibilità di decidere sull'utilizzo di un cursore personalizzato, e di un piccolo effetto grafico di contorno.
Permetteremo inoltre la stampa in vettoriale di una pagina composta da scritte e immagini, non visibile sullo stage.

Altro piccolo accorgimento molto apprezzato, è quello di ridurre al minimo l'utilizzo di pulsanti, sostituendoli con movieclip. Questo per eliminare la tanto sgradita manina che si forma al passaggio su un pulsante: infatti la comprensione della presenza di un'area cliccabile, può essere indotta semplicemente tramite effetti definibili di "rollover". Naturalmente questo accorgimento diventa inutile nel caso dell'uso di puntatori personalizzati.

Ti consigliamo anche