DISPENSA CORSO WEB DESIGNER

Transcript

1 DISPENSA CORSO WEB DESIGNER Già da qualche anno internet è entrato a far parte della nostra vita quotidiana. Tutti i giorni apriamo il browser (il programma che utilizziamo per navigare in internet) e cerchiamo in rete tutto quello che è compatibile con i nostri interessi: dall orario del film che vogliamo vedere al cinema a come raggiungere un luogo nel quale dobbiamo recarci per la prima volta. Ma come è possibile tutto ciò? Cos è realmente internet? E come si costruiscono quelle che noi chiamiamo pagine web? Cos è Internet? Internet è una rete che, attraverso diversi tipi di collegamenti (cavi, connessioni satellitari, connessioni radio, ecc.), mette in comunicazione diversi computer a cui tutti possiamo accedere, per disporre di una serie di servizi che essa ci mette a disposizione. Uno dei principali servizi di internet è sicuramente il WWW (World Wide Web) che permette di navigare e di usufruire di una serie vastissima di contenuti (multimediali e non) e di servizi accessibili a tutti. Una caratteristica importante del web è che esso è composto da un insieme di nodi che vengono chiamati Link (collegamenti) formando un enorme ipertesto, collegando tra loro le pagine e quindi le informazioni in esse contenute. Storia del Web in breve La storia del web è cominciata quando Tim Berners-Lee, ricercatore al CERN di Ginevra, scrive la prima versione dell HTML (HyperText Markup Language) che è il linguaggio con cui tutt ora si definisce la struttura della pagina internet e, con il suo collaboratore Robert Cailliau, inventa il WWW pubblicando nell agosto del 1991 il primo sito web, utilizzato solo dalla comunità scientifica. Nell aprile del 1993 il CERN decide di rendere pubblica la tecnologia di base del web e nel 1994 Tim Berners-Lee fonda il W3C (World Wide Web Consortium), un organizzazione non governativa che ha come obiettivo quello di sviluppare al massimo le potenzialità del World Wide Web stabilendo degli standard tecnici inerenti sia ai linguaggi con cui le pagine vengono strutturate e formattate, sia ai protocolli di comunicazione che permettono ai computer di dialogare tra di loro. Attualmente l'ultima versione disponibile dell HTML che il W3C ha approvato è la 4.01, resa pubblica il 24 dicembre Dopo un periodo di sospensione, in cui il W3C si è focalizzato soprattutto sulle definizioni di XHTML (applicazione a 1

2 HTML di regole e sintassi in stile XML) e dei fogli di stile (CSS), nel 2007 è ricominciata l'attività di specifica con la definizione (ancora in corso) di HTML5, attualmente allo stato di bozza all'ultima votazione. La conseguenza di tutto ciò è stata un sempre più crescente flusso di informazioni consultabili da chiunque e la possibilità da parte di qualsiasi individuo di diventarne parte attiva creandosi il proprio sito web condividendo le informazioni con milioni di altri utenti praticamente in tempo reale. Sono nate inoltre diverse figure professionali nuove tra cui quella del Web designer. Figura 1 Primo sito web pubblicato da Tim Bernes-Lee Il Web Designer Il web designer è una figura professionale che ha diverse competenze: In parole povere è l architetto del sito. È il responsabile della progettazione, della grafica, dell interattività, dell usabilità e dell accessibilità del sito, consentendo a tutti gli utenti di trovare le informazioni che cercano nel modo più veloce e semplice possibile e consentire al progetto visibilità e diffusione tramite canali internet quali social network, circuiti pubblicitari, motori di ricerca e così via. Un altro compito importante del web designer è quello del comunicatore. Esso infatti deve essere in grado di capire le necessità che il cliente ha nella realizzazione del progetto e di renderle compatibili con quelle dell utente finale valutando la tecnologia da impiegare, le possibilità e i limiti che si possono incontrare confrontandosi continuamente con il cliente e con gli eventuali collaboratori. Nella realizzazione di un sito web ci sono alcuni concetti che il web designer deve sempre tenere a mente: 2

3 Quali sono gli obiettivi che si vogliono raggiungere con Internet? Qual è il profilo socio-professionale del pubblico? Quali tipi di contenuti e servizi potrebbero interessare il target e fare parte o meno del sito? Di quali tecnologie, finanziamenti, competenze c'è bisogno per fornire questi servizi? Chi sono i concorrenti, come sono organizzati i loro siti, di quali strategie si avvalgono? Che tipo di interazioni ci sono e ci potrebbero essere con i il target del sito, quali bisogni potrebbero insorgere? Quali sono gli obiettivi a breve, medio e lungo termine del sito che si va a progettare? Quale potrebbe essere l'andamento del sito tra un anno? Con quali criteri misurare il successo e il gradimento? Una cosa fondamentale è capire le esigenze del cliente. Esso non sempre ha le idee chiare sul progetto che vuole realizzare, sarà quindi compito del web designer definire lo scopo del sito e il target di utenti a cui questo si deve riferire, il tutto senza perdere di vista il budget che il cliente ha messo a disposizione per la realizzazione del progetto e tenendo conto della concorrenza che il sito web potrebbe avere. Nella realizzazione del sito web inoltre si deve sempre tenere in considerazione che l utente medio non sempre ha conoscenze di base sulla realizzazione tecnica di un sito e quindi la cosa che viene giudicata più spesso è la grafica e l impatto emozionale che questa trasmette. Questo non vuol dire però che la struttura del sito, l usabilità e la funzionalità non siano importanti. Un sito bellissimo e con dei colori eccezionali sarà abbandonato in pochi secondi se i contenuti non catturano l interesse dell utente che non trovando quello che cerca si sposterà su altre pagine web. Si deve trovare quindi un punto di incontro tra una grafica accattivante e una struttura funzionale e semplice da usare. Le fasi del lavoro Le prime fasi della realizzazione di un sito sono essenzialmente tre: 1. Raccolta del materiale utile per realizzare il sito web come ad esempio logo dell azienda, depliant, fotografie, testi ecc. 2. stabilire la struttura delle pagine, i menù di navigazione e il modo in cui verranno disposti i contenuti nella pagina. 3. Realizzazione della bozza (o delle bozze) da fare approvare al cliente 3

4 Bisogna farsi consegnare dal cliente più materiale possibile e possibilmente in versione digitale. Se venissero consegnate foto, testi e loghi in versione cartacea bisognerebbe procedere alla digitalizzazione del materiale con conseguente perdita di tempo e aumento del costo. Una particolare attenzione si deve concentrare sul logo: bisogna chiedere al cliente se è in possesso di un logo in formato vettoriale (formato che non perde qualità quando lo si ridimensiona) per essere più liberi nella realizzazione del sito, altrimenti bisognerebbe riprodurlo in vettoriale e quindi bisognerebbe aumentare in modo ulteriore il costo del sito per recuperare il tempo perso. La prima cosa da fare quando si lavora alla struttura del sito invece, è definirne la sua alberatura. La struttura gerarchica prevede un albero rovesciato che partendo dall apice descrive in generale le informazioni e passa ai livelli sempre più dettagliati. Ne vediamo un esempio nella figura 2. Figura 2 - Alberatura di un sito Come vediamo nell immagine il sito è organizzato in modo logico: ad esempio quando si arriva alla pagina assistenza clienti si ha la possibilità di visitare due ulteriori pagine: la pagina Servizio post vendita che conterrà un breve testo con riportato il numero di telefono dell assistenza e Download center che darà la possibilità di scaricare le schede tecniche o alcuni manuali. Un altra cosa importante nella realizzazione di un sito è sicuramente il menù di navigazione: saper realizzare un sito web non basta se non si è capaci di guidare il visitatore nel proprio sito. Creare una buona struttura e fornire agli utenti un aiuto per muoversi senza che essi debbano pensare troppo vuol dire avere un'interfaccia di navigazione alla portata di tutti. Attraverso il menù di navigazione un utente dovrebbe sempre sapere in che pagina si trova, che pagine ha visitato e che pagina visiterà se questi cliccherà su una determinata voce. Un altra cosa da tenere in considerazione è che all interno di un sito i menù possono anche essere più di uno: a volte suddividere le informazioni su due gruppi può migliorare l usabilità del sito. 4

5 Figura 3 Esempio di sito web con due menù di navigazione Dopo aver stabilito la struttura del sito e il menù di navigazione bisogna decidere come posizionare i contenuti all interno delle pagine. Bisogna quindi creare un wireframe, una sorta di pre-bozza, una guida visiva che rappresenta la struttura scheletrica del sito web. Il wireframe manca di solito dello stile tipografico, del colore o della grafica, in quanto l'obiettivo principale risiede nella funzionalità, il comportamento, e la priorità dei contenuti. In altre parole, si concentra su ciò che uno schermo fa e non su ciò che sembra. Il wireframe può essere un disegno a matita, oppure può essere prodotto per mezzo di una vasta gamma di applicazioni di software libero o commerciale. Figura 4 Esempio di wireframe 5

6 L ultimo punto che dobbiamo affrontare prima della realizzazione vera e propria del sito è la realizzazione della bozza grafica. La bozza grafica è un istantanea del sito finito, un immagine che verrà presentata al cliente e che gli farà capire in che modo abbiamo pensato il progetto. La bozza grafica viene solitamente creata con dei programmi specifici come Photoshop, Illustrator e Fireworks che sono programmi che permettono di elaborare immagini, creare disegni vettoriali e, appunto, bozze grafiche. È indispensabile inoltre tenere conto di alcune limitazioni derivanti dal dispositivo che sarà utilizzato per vedere il sito, ad esempio la dimensione dello schermo, la scelta dei caratteri utilizzabili e la velocità di connessione Al momento della presentazione della bozza grafica è importante far capire al cliente che se si vuole fare alcune modifiche al progetto questo è il momento migliore per farle. Farle successivamente, quando abbiamo già cominciato a creare il sito vero e proprio, oltre che a farci perdere tempo per rifare un lavoro già fatto, si rischierebbe di sporcare il codice scritto penalizzando qualitativamente il sito. È importante inoltre che l approvazione venga firmata. Programmi usati dal web designer I programmi usati dai web designer sono molti. Vediamo quali sono: Adobe PHOTOSHOP Photoshop è senza dubbio uno dei migliori programmi in commercio per il fotoritocco e l elaborazione delle immagini. Grazie a questo programma abbiamo la possibilità di elaborare immagini in modo professionale e, grazie ad alcuni strumenti che esso offre, possiamo emulare tecniche utilizzate nei laboratori fotografici per il processamento delle immagini, le tecniche di pittura e di disegno. Un'importante funzione del programma è data dalla possibilità di lavorare con più "livelli", permettendo di gestire separatamente le differenti immagini che compongono l'immagine principale. Photoshop è principalmente un programma di grafica raster (o bitmap) e quindi lavora direttamente sui pixel di un immagine a differenza di altri programmi che analizzeremo successivamente che invece trattano la grafica vettoriale. Una cosa molto apprezzata di questo software è la possibilità di espandere le sue potenzialità attraverso l uso di plug-in. Figura 5 interfaccia grafica di Photoshop CS6 6

7 Adobe DREAMWEAVER Dreamweaver è un programma inizialmente sviluppato da un azienda chiamata Macromedia e successivamente acquistato dalla Adobe. È un programma che serve appositamente a creare siti web. Con questo programma infatti si può utilizzare sia un interfaccia del tipo WYSIWYG (un acronimo che sta per What You See Is What You Get, cioè quello che vedi è quello che ottieni) con la quale possiamo creare un sito senza scrivere codice, sia un interfaccia di tipo testuale che ci aiuta a comprendere e a scrivere meglio il codice colorando in modo diverso ogni tipo di istruzione data. Inoltre ci aiuta con la stesura del codice suggerendoci l istruzione che ci stiamo accingendo a scrivere, velocizzando così il nostro lavoro. L interfaccia che ci permette di inserire il codice a mano è quella preferita dai web designer perché ci consente di avere un controllo totale sul progetto su cui stiamo lavorando, l interfaccia di tipo WYSIWYG è più per i principianti che non conosco alcun codice. Figura 6 interfaccia grafica di Dreamweaver CS6 Adobe FIREWORKS Fireworks è un programma molto apprezzato per la creazione delle bozze grafiche da presentare al cliente. Nell interfaccia grafica è molto simile a Photoshop ma è un programma più orientato al web offrendoci una serie di strumenti per agevolare la creazione delle bozze, banner animati e in alcuni casi ci aiuta perfino con la realizzazione del sito stesso. Figura 7 interfaccia grafica di Fireworks CS6 7

8 FILEZILLA Client Filezilla Client è un programma completamente gratuito che ci permette di trasferire su un server tutti i file del sito che abbiamo creato consentendoci quindi, in poche parole, di pubblicarlo. I file possono essere trasferiti attraverso diversi protocolli, uno fra tutti l FTP (file transfer protocol) che, come dice il nome stesso, è stato studiato appositamente per trasferire dei file. Il programma è multipiattaforma ed è possibile scaricarlo a questo indirizzo: Figura 8 interfaccia grafica di Filezilla Client WAMP e MAMP Quando si crea un sito web si ha bisogno di alcuni strumenti necessari per la visualizzazione e per l utilizzo del sito su cui stiamo lavorando, proprio come se fosse già stato pubblicato in rete. Questo ci permette di renderci conto del risultato finale e ci aiuta soprattutto nella realizzazione di siti dinamici. Per agevolare questo lavoro esistono delle piattaforme chiamate wamp e mamp, che installano contemporaneamente questi strumenti nel nostro computer e sono specifiche per ogni sistema operativo: wamp per windows e mamp per Macintosh. Esiste anche un versione per Linux (Lamp) ma non verrà trattata in questo manuale. I nomi di queste piattaforme taforme sono degli acronimi che contengono le iniziali della versione del sistema operativo a cui sono destinate e l iniziale di tutte le applicazioni che vi sono inserite all interno: Windows, oppure Mac Apache MySQL PHP Nel dettaglio possiamo dire molto sinteticamente che Apache è lo strumento che permette di visualizzare il sito web come se fosse pubblicato in rete; 8

9 MySQL è un Relational database management system (sistema per la gestione di basi di dati relazionali), un codice che permette di interrogare il database collegato ad un sito dinamico; PHP (Hypertext Preprocessor) invece è un linguaggio di scripting che permette la creazione di pagine web dinamiche e di applicazioni web. Ecco i siti dove possiamo scaricare le varie piattaforme: Wamp: Mamp: NOTA: i siti web si dividono in due grandi categorie: I siti statici I siti dinamici I siti statici sono generalmente siti che non vengono aggiornati molto spesso e l utente non ha possibilità di modificarne i contenuti. Per farlo infatti si deve operare direttamente sul codice. I siti dinamici sono essenzialmente dei siti web collegati ad un database dove il cliente può autonomamente aggiornare i contenuti senza dover contattare ogni volta il web designer. Inoltre i siti dinamici offrono una grande interattività con l utente che potrà visualizzare solo i contenuti che gli interessano. 9

10 I primi tag dell XHTML I tag sono degli elementi che indicano la struttura di un documento HTML (o XHTML). Vediamo ora quali sono i primi tag che impareremo creando direttamente la nostra prima pagina web. Apriamo il programma Dreamweaver, dal menù file clicchiamo sulla voce Nuovo e dalla finestra nuovo documento selezioniamo la voce HTML. Successivamente, prima di cliccare sul pulsante crea, controlliamo che nella voce tipo di documento sia selezionata la voce XHTML 1.0 Transitional. Figura 9 Finestra Nuovo documento in dreamweaver Comparirà una finestra simile a quella mostrata nella figura 10, se non dovesse comparire cliccare sul pulsante codice nella barra degli strumenti presente nella parte superiore della finestra. 10

11 Figura 10 Documento XHTML Prendendo come riferimento la figura 10 possiamo notare che nella prima riga compare l elemento DOCTYPE che informa il browser sul linguaggio che stiamo utilizzando, nel nostro caso XHTML 1.0 Transitional. Nella riga successiva troviamo il tag <html xmlns=" che rappresenta l apertura del documento HTML; per chiudere il documento invece, troviamo il tag </html>. Tra il tag che apre il documento e quello che lo chiude troviamo il tag <head> che contiene informazioni che non vengono visualizzate direttamente sulla nostra pagina web ma che sono comunque molto importanti, ad esempio il tag <meta /> che specifica informazioni di vario tipo e il tag <title> </title> nel cui interno verrà specificato il titolo che vogliamo dare alla pagina. Dopo la chiusura del tag </head> troviamo subito il tag <body> che contiene il corpo del sito cioè tutto quello che vedremo all interno della nostra pagina web. NOTA: Quasi tutti gli elementi hanno un tag di apertura e uno di chiusura: ad esempio quando viene aperto il tag che indica l apertura del corpo del sito si scrive <body> mentre per chiuderlo si scrive </body>. In qualche caso però non esiste il tag di chiusura, ad esempio nel tag br, che come vedremo tra poco serve per andare a capo riga, viene semplicemente inserito uno slash prima della chiusura della parentesi angolare. Infatti per fare in modo che il testo vada in una nuova riga basta semplicemente scrivere <br /> I TITOLI: da <h1> </h1> a <h6> </h6> Ora, posizioniamoci subito dopo il tag <body> e premiamo il tasto invio. Premiamo il tasto tab e iniziamo a scrivere il titolo del nostro documento utilizzando il tag <h1> in questo modo: <h1>titolo del mio primo sito web</h1> come riportato nella figura 11 11

12 Figura 11 Tag <h1> A questo punto salviamo il documento utilizzando la voce salva con nome dal menù file e apriamo il file salvato. Si aprirà il nostro browser che visualizzerà il contenuto della pagina creata. Figura 12 Risultato della pagina creata Il tag <h1> è un tag specifico per definire il titolo dei contenuti della pagina. Esso ha sei livelli (da <h1> </<h1> a <h6> </h6>) pensati per definire un importanza tra il titolo e i relativi contenuti. Proviamo quindi a vedere come vengono visualizzati i diversi livelli del tag seguendo la procedura indicata nella figura 13. Figura 13 Livelli del tag da <h1>..</h1> a <h6> </h6> Salviamo il documento e visualizziamo il risultato nel browser ricordandoci di aggiornare la pagina. 12

13 Figura 14 Risultato dei livelli del tag da <h1>..</h1> a <h6> </h6> CREARE PARAGRAFI CON IL TAG <p> </p> Dopo aver imparato come creare il titolo di un contenuto di una pagina vediamo come inserire i paragrafi. Riprendiamo il documento XHTML creato in precedenza con dreamweaver e modifichiamolo come indicato nella figura 15. Figura 15 Utilizzo del tag <p> Il testo inserito all interno del tag <p> </p> ora è considerato dal browser un paragrafo. Salviamo la pagina e vediamo il risultato nel browser. Figura 16 Visualizzazione del tag <p> sul browser 13

14 MANDARE A CAPO RIGA UN TESTO CONTENUTO IN UN PARAGRAFO CON IL TAG <br /> Spesso si ha la necessità di mandare a capo riga il testo contenuto in un paragrafo. Contrariamente a quello che si potrebbe pensare non basta premere semplicemente il tasto invio perché il browser non capirebbe l istruzione. Per andare a capo quindi abbiamo bisogno di un tag specifico: il tag <br>. Vediamo l esempio nella figura 17. Figura 17 Tag <br /> inserito all interno di un paragrafo Il risultato che verrà visualizzato sarà il seguente: Figura 18 - Risultato nel browser del tag <br /> IL TAG <strong> Il tag strong viene utilizzato per mettere in enfasi una parola o una frase in un testo più complesso. Figura 19 - Il tag <strong> 14

15 Come possiamo vedere nella figura 20 la parola pagina, contenuta all interno del tag strong, risulta essere enfatizzata, mentre il testo all esterno non ha subito nessuna variazione. Figura 20 - Risultato ottenuto utilizzando il tag <strong> I COMMENTI Quando si lavora con una pagina web spesso risulta fondamentale inserire dei commenti all interno del documento. I commenti sono delle note che il web designer scrive nel documento HTML e che gli servono per capire com è strutturato il contenuto della pagina web. Risultano utili soprattutto quando il documento su cui stiamo lavorando è un documento fatto diverso tempo fa e che dobbiamo modificare, oppure nel caso in cui sia stato fatto da un altra persona. Inserendo i commenti in punti specifici del documento abbiamo la possibilità di mantenere l orientamento anche in file molto complessi e lunghi. La sintassi è la seguente: <!-- questo è un commento --> e ci permette di commentare i vari punti della pagina. Ad esempio: <!-- menu di sinistra --> <!-- barra in alto --> <!-- eccetera --> Proviamo ora ad inserire un commento nella pagina che abbiamo creato. Figura 21 - I Commenti HTML Come detto qualche riga più sopra i commenti servono esclusivamente agli addetti ai lavori, quindi se cerchiamo di aggiornare la pagina sul browser i contenuti visualizzati non cambieranno di una virgola. 15