ITS Lab/ IS G.Minzoni INTRODUZIONE AL WEB DESIGNER

Transcript

1 ITS Lab/ IS G.Minzoni INTRODUZIONE AL WEB DESIGNER Il Web DESIGNER è l'arte di creare template e layout per siti o per singole pagine Web che abbiano le caratteristiche di: essere comunicative; essere graficamente accattivanti; avere colori, toni ed elementi indicati all'oggetto del sito; veloci da caricare; fare un utilizzo parsimonioso di immagini e concentrare effetti sui CSS. essere usabili, navigabili accessibili. Vediamo adesso cosa si intende, in gergo, per template e layout. In effetti non esiste grandissima differenza, dato che, tradotto in termini di uso più quotidiano, si tratta in entrambi i casi dell'aspetto di un sito e delle relative pagine che lo compongono. Per essere però più precisi possiamo dire che: il template è l'aspetto complessivo della pagina, formata dall'impaginazione, dal logo, dal menu di navigazione, dagli elementi grafici e multimediali, dal contenuto, da eventuali elementi pubblicitari, etc... il layout è inteso come lo scheletro che dovrà contenere tutti gli elementi del template, ovvero le tabelle HTML o dei semplici livelli stilizzato e disposti esclusivamente con i CSS, come le regole dell'usabilità e dell'accessibilità consigliano. Allo scopo di soddisfare tutte le enormi esigenze descritte in queste poche righe introduttive, è necessario: 1. conoscere una serie di linguaggi per il Web; 2. conoscere una serie di software per il design e per la grafica; 3. acquisire una forma-mentis da designer. Indicheremo una serie di risorse tra cui i linguaggi ed i software da conoscere, dalle quali è possibile attingere per ampliare il proprio know-how è iniziare un percorso per definire una propria formazione professionale nell'ambito del Web design. I linguaggi da conoscere: HTML e CSS In genere il primo linguaggio che un neofita del Web impara è l'html dato che non si tratta di un linguaggio di programmazione bensì di marcatura degli elementi e dell'ipertesto; per questo motivo è semplice da imparare ma... posso assicurarvi che non è semplice poi tirare fuori dei siti ben fatti. Che si tratti o meno di un concetto nuovo è bene fissare un concetto: l'html da solo serve a poco, anche restando in tema di Web design e non di programmazione. All'HTML è necessario affiancare i fogli di stile CSS per dare un tocco grafico ed artistico non solo migliore, ma anche più potente e versatile alle pagine di un sito. Un buon designer deve sapere che ogni singolo carattere scritto nel codice HTML di una pagina rappresenta un byte ed è quindi bene ottimizzare il codice al fine di non rendere inutilmente pesante una pagina. Anche in questo caso ci vengono incontro i CSS, dato che questo stesso codice <p><font color="#ff0000">hello, World in rosso!</font></p> può essere scritto come segue <p>hello, World sempre in rosso!</p> ottenendo lo stesso effetto impostando questo codice in un foglio di stile CSS p { color: #FF0000; 1

2 } ed è possibile anche ottenere altri effetti come il grassetto, il corsivo, il sottolineato, la bordatura, senza cambiare di una virgola il codice HTML ma agendo sul CSS p { color: #FF0000; border: Solid 1px #000000; } Prego quindi vivamente di approfondire questi due linguaggi. I software da conoscere: Dreamweaver Anche se la perfetta conoscenza dell'html e dei CSS è fondamentale, a mio avviso almeno per il 90%, è molto comodo per un Web designer usufruire di alcuni software di sviluppo, chiamati anche Editor HTML i quali, attraverso funzioni visive di tipo WYSIWYG (What You See Is What You Get, ovvero quel che vedi è quel che ottieni) facilitano e velocizzano il compito di creazione del layout e dell'intero template di una pagina. Esistono moltissimi software per la gestione del design di una pagina Web ma noi prendiamo in considerazione Dreamweaver della Adobe; a mio avviso il miglior software in assoluto che un designer possa desiderare. In definitiva: Dreamweaver permette la completa gestione di un sito dal punto di vista del design, offrendo una vasta gamma di strumenti grafici e la possibilità di inserire anche script DHTML ed elementi multimediali; ha anche la caratteristica di essere un buon gestore di script lato server come ASP e PHP. I software per la grafica: Photoshop e Flash Una pagina Web va corredata da immagini, sia per chiarezza e per rendere meglio il senso descrittivo, sia per una questione di professionalità, dato che i soli HTML e CSS da soli non possono rendere, graficamente parlando, quanto un'immagine. Nell'utilizzo delle immagini, tuttavia e come in qualsiasi cosa, ci sono pro e contro. Oltre a rendere più accattivante e descrittivo una pagina Web, un'immagine rende la pagina stessa anche più lenta e difficile da caricare. Lo stesso discorso vale per i filmati o elementi multimediali in genere: un utilizzo oculato tende ad abbellire una pagina, ma un eccesso tende a renderla molto o addirittura troppo lenta da caricare e l'utente (io sono uno di questi) tende a chiudere la pagina prima che venga del tutto caricata, a meno che non so per certo che sono interessato al contenuto e non a vedere quanto sono belli e bravi quelli che l'hanno fatta. E' importante non mettersi in competizione se non con se stessi: lo scopo è quello di ottenere il miglior risultato nei tempi più brevi possibile e con meno sforzo possibile, evitando anche appesantimenti in fase di caricamento. I migliori software di grafica e di grafica multimediale attualmente sul mercato sono Adobe Photoshop e Flash i quali si occupano rispettivamente: della gestione, della creazione e dell'ottimizzazione delle immagini; della creazione di elementi multimediali. In definitiva: Photoshop permette di creare immagini sia secondo le regole della grafica vettoriale che della grafica bitmap, permettendo la loro perfetta gestione e l'ottimizzazione; permette di salvare immagini nei migliori formati disponibili, tra cui JPEG, GIF e PNG. Flash permette la realizzazione di filmati, giochi, elementi come menu e banner e di interi siti; la sua potenza sta nel fatto che, grazie ai suoi strumenti, è possibile creare elementi sia usando semplicemente detti strumenti che includendo vero e proprio codice di scripting, chiamato ActionScript. 2

3 Tecniche di design: layout e tabelle Vediamo adesso di mettere in pratica quanto appreso fino a questo momento in tema di Web design e di costruzione (o che dir si voglia creazione) di layout e template per una pagina Web. Esistono decine e decine di interfacce standard per la realizzazione di un sito, di un portale o di una Web application ma adesso ci limiteremo a prendere in considerazione le mere tecniche di realizzazione. Prendiamo in considerazione il seguente sito: Presenta le seguenti caratteristiche: un layout centrato rispetto all'intero schermo, ottimizzato per essere visualizzabile a dimensione 900X700 senza far comparire le barre di scorrimento orizzontali, decisamente antiestetiche e poco professionali; troviamo poi la barra orizzontale contenente il logo sulla sinistra ed un elemento di comune utilità come un motore di ricerca interno sulla destra; al di sotto troviamo una barra orizzontale (blu) in cui poter piazzare un menu o uno spot testuale, o qualsiasi altro elemento di generica utilità; anche in questo caso lo scopo principale è creare un gioco di colori; a questo punto inizia la fase riguardante i contenuti veri e propri del sito, ovvero i menu contestuali laterali ed il corpo centrale della pagina che contiene materialmente i contenuti della pagina o della sezione corrente. Usabilità e accessibilità nel Web designer Siamo arrivato ad una nota dolente del lavoro di un Web designer, ovvero realizzare i propri lavori in modo da renderli conformi alle norme dell'usabilità e dell'accessibilità, il che non è un compito semplice e a volte addirittura ingrato, ma davvero fondamentale. Prima di affrontare i pro ed i contro e di vedere quali linee guida seguire allo scopo di rendere i propri lavori usabili ed accessibili, tentiamo di capire cosa intendiamo per usabilità ed accessibilità di un sito Web. 3

4 Per usabilità si intende il principio secondo il quale un sito deve essere semplicemente navigabile, ovvero in cui compaia il famoso menu molliche di pane * o barra di navigazione e dove i veri e propri menu di navigazione ** siano disposti e gestiti ad hoc. L'accessibilità, invece, non è un concetto in qualche modo astratto come quello dell'usabilità ma esistono regole concrete legate alla gestione di particolari elementi del template della pagina quali i menu ed i link in generale ***, i form **** e la struttura vera e propria della pagina Web in questione. Nei due capitoli precedenti, ad esempio, abbiamo visto come costruire un layout utilizzando le tabelle ed i livelli ed abbiamo accennato che i livelli, stilizzati con i CSS, permettono non solo una maggiore velocità di caricamento della pagina, ma si tratta anche di una tecnica testata per browser particolari come dispositivi per cellulari e palmari e per browser per disabili. * Il menu molliche di pane è un classico esempio di usabilità in cui vediamo il percorso logico della pagina locale, come in questa pagina Homepage + Chi siamo + Lezione... e torna molto utile all'utente per "capire dov'è e come tornare indietro". E' possibile realizzare questo tipo di menu sia con script lato server o lato client che identifichi il percorso fisico del file sul server Web e ne costruiscano la dinamica, sia a mano... soluzione meno pratica ma altrettanto funzionale. ** I menu di navigazione di un sito si definiscono usabili quando, ad esempio, la voce del menu corrispondente alla pagina corrente resti in qualche modo evidenziata. Altra importante caratteristica dei menu di navigazione che rendono un sito usabile è quella di inserire un box con link contestuali a seconda della sezione del sito in cui ci si trova. Immaginiamo un portale generico che offre tre servizi: in ognuna delle sezioni inserire tutti i link specifici della sezione di appartenenza, in modo da rendere più semplice ed appetibile la navigazione da parte dell'utente. **** Grazie alle Access Key (chiavi di accesso) possiamo permettere ad un utente che non voglia usare il mouse, che non abbia per una qualsiasi causa il mouse, oppure ad un disabile, di navigare il nostro menu di navigazione attraverso il solo utilizzo della tastiera, creando ad hoc degli shortcut, ovvero tasti di scelta rapida. ***** Sempre grazie alle Access Key possiamo rendere accessibile anche un form HTML ad un utente che non dispone della possibilità di utilizzare il mouse. I concetti di accessibilità e di Web designer, rivolti al futuro, sono indissolubilmente legati al concetto di XHTML, ovvero all'estensione dell'html reso valido a tutti gli effetti. In conclusione vi dico che riuscendo ad seguire queste linee guida in concomitanza della creazione di un layout piacevole e professionale vuol dire aver fatto un buon lavoro, da vero designer professionista! Siti, portali ed applicazioni Il Web designer, in generale, non ha il compito di "far funzionare" un sito, ma solo il compito di renderlo accattivante, veloce, accessibile, usabile e quant'altro. Far funzionare il sito è compito del programmatore, ma il Web designer deve mettere a disposizione del programmatore un template adatto al tipo di sito da realizzare. Il termine sito è piuttosto generico. Esistono diverse categorie di siti, probabilmente alcune decine, ma per praticità ci limiteremo a distinguerli in tre macrocategorie: Siti Per sito intendiamo una vetrina di prodotti, una presentazione personale o aziendale. Insomma, un sito è inteso come una presentazione senza particolari pretese dal punto di vista programmatico e con moltissime pretese da un punto di vista sia di design che puramente grafico. Portali Un portale è un punto di raccolta di informazioni, news ed articoli a 360 gradi o per un determinato settore. Un esempio di portale a 360 gradi potrebbe essere Libero. Applicazioni Un'applicazione Web non è altro che la trasduzione di un generico software gestionale (scritto ad esempio in Visual Basic o in C++ o in Java, etc...) in interfaccia Web. Lo scopo di questa distinzione cosi netta è far capire che è necessario essere ferrati nella creazione di layout e template atti a soddisfare diverse esigenze di diversi potenziali clienti. 4

5 Nei prossimi tre capitoli vedremo come definire le struttura base di queste tre tipologie di siti Web. Strutturare un sito Web Nel capitolo precedente abbiamo visto che ci sono notevoli differenza, in termini di aspetto e quindi di design, tra un sito vetrina, un portale ed un'applicazione ad interfaccia Web. In questo capitolo vediamo, con degli esempi, come strutturare un sito vetrina per noi stessi o per un nostro potenziale cliente. Un sito vetrina, appunto, necessita di molta grafica e di un design non complicatissimo, dato che il lavoro maggiore è demandato al grafico. Il designer altro non deve fare che costruire un layout adatto ad ospitare le immagini utilizzate per il logo, per i menu e per elementi grafici in generale, costruiti ad hoc dal grafico e tagliati in maniera tale da essere ospitati nelle celle della tabella strutturale della pagina. Naturalmente non è detto che un sito vetrina debba essere composto necessariamente da grosse immagini adattate ad hoc o di filmati Flash che svolgano ruoli determinanti piuttosto che essere impiegati come elementi secondari come titoli, menu di navigazione etc... Ragion per cui possiamo immaginare di costruire un sito dal bell'aspetto anche con poche immagini e molti CSS ed effetti DHTML. Il tutto dipende da alcuni fattori, legati per lo più alle esigenze del cliente, al quale vanno fatte presente cose tipo l'accessibilità e l'usabilità del sito, la pesantezza e la lentezza di caricamento, potenziali problemi di compatibilità e di corretta visualizzazione della pagina e cosi via. Vediamo un esempio di sito particolarmente accattivante da cui prendere spunto (solo come idea naturalmente) per lo sviluppo di un sito vetrina. Il sito mostrato nell'immagine precedente, è appunto un classico esempio di un sito dedicato alla presentazione di un'attività, nel caso specifico di uno sport, ma può essere preso da esempio per la realizzazione di qualsiasi, modificando naturalmente le immagini e le diciture dei link a seconda delle proprie esigenze. 5

6 Raccomando particolare attenzione all'impaginazione ed al modo in cui le immagini sono state accuratamente tagliate e disposte nel layout della pagina; attenzione anche al metodo in cui sono stati predisposti i menu in modo da essere semplici, visibili ed accattivanti al tempo stesso. Strutturare un portale Web Un portale Web è una raccolta di informazioni, link e servizi strutturata gerarchicamente e divisa in categorie, eventuali sottocategorie ed argomenti finali. La struttura grafica di un simile lavoro si discosta, per esigenze, notevolmente da quella di un sito vetrina, preso in esame nel capitolo precedente. Un portale è in genere anche ricco di spot (banner di varie dimensioni) e pubblicità a prodotti e servizi interni o esterni. A seconda delle esigenze viene scelto un template differente. Le esigenze variano molto spesso anche in tempi brevi, quindi è necessario organizzarsi in partenza in maniera tale da ottenere il massimo risultato col minimo sforzo in fase di aggiornamento. In merito alla pubblicità, ad esempio, ci sono periodi in cui sono più cliccati banner o spot testuali di determinate dimensioni e forma ed è quindi importante, per chi fa di un portale un'attività economica, organizzarsi in maniera ottimale senza far diventare le proprie pagine dei curiosi alberi di Natale dove l'unica cosa che spicca sono gli spot. Strutturare un'applicazione Web Da alcuni anni ormai moltissime aziende ed enti preferiscono commissionare o addirittura revisionare i propri software gestionali verso l'interfaccia Web. Un'applicazione Web, quindi, non è altro che un software gestionale, con tanti di autenticazione e maschere di inserimento, modifica, cancellazione, calcolo e ricerca dei dati da e verso un database, scritti con un linguaggio di scripting lato server come ASP, ASP.NET, PHP, JSP, CGI, Cold Fusion etc... Per quanto povera di pretese a livello grafico, un'applicazione Web risulta in genere il compito più duro da sviluppare a livello di design, dato che, in genere, la figura del designer e del programmatore è divisa in due persone diverse e spesso l'una non conosce a pieno il lavoro dell'altra e si finisce per creare lavori poco accattivanti. E' quindi necessario, almeno, avere conoscenza del lavoro dell'altro al fine di trovare una buona, se non ottimale, integrazione nell'ambito dello sviluppo di un'applicazione Web. Ho tenuto a precisare questa cosa perchè mi sono trovato molto spesso, in varie aziende, a collaborare con designer o programmatori ed essere a mia volta, sui vari progetti, designer o programmatore di quel progetto ed una buona conoscenza di entrambe le competenze ha giovato sia a me che ai colleghi, e non meno alla buona riuscita del software finale sia dal punto di vista grafico che programmatico. 6