PROGETTARE CREARE PUBBLICARE IL SITO WEB DI UNA IFS I.S. CARLO DELL ACQUA 1 Legnano
INDICE INTRODUZIONE pag. 3 FASI DI LAVORAZIONE DI UN SITO WEB pag. 4 ANALISI DI MARKETING PROGETTAZIONE E INFORMATION ARCHITECTURE DEFINIZIONE DEI COLLEGAMENTI CLASSIFICAZIONE DEI COLLEGAMENTI COMUNICAZIONE pag. 6 STANDARD DI NAVIGAZIONE pag. 8 WEB DEVELOPMENT DENOMINAZIONE DELLE PAGINE WEB IL SITO WEB DI UNA IFS pag. 10 REGISTRAZIONE DOMINIO IFS PUBBLICAZIONE SITO WEB COME RICHIEDERE UNO SPAZIO WEB 2
INTRODUZIONE Il sito web di una IFS deve essere la vetrina dei suoi prodotti/servizi e presentare l azienda. Importante è l organizzazione ragionata dei contenuti e la corretta impaginazione con grafica attraente e allo stesso tempo accessibile. In questo documento sono riportate alcune informazioni utili nelle diverse fasi di sviluppo di un sito web. Nel contesto produttivo della creazione di un sito web, l'approccio user oriented riguarda tutte le fasi della progettazione. Progettare e sviluppare siti web accessibili non significa rinunciare a qualcosa, ma al contrario arricchire la pagina stessa con componenti che la completino e la rendano più adatta alla consultazione in qualunque circostanza. PROTEZIONE DEL DIRITTO D'AUTORE E DI ALTRI DIRITTI CONNESSI AL SUO ESERCIZIO Si ricorda che sono protette (Legge 633/1941 e modifiche DL. 68/2003) le opere dell'ingegno di carattere creativo che appartengono alla letteratura, alla musica, alle arti figurative, all'architettura, al teatro ed alla cinematografia, qualunque ne sia il modo o la forma di espressione. Sono altresì protetti i programmi per elaboratore come opere letterarie ai sensi della convenzione di Berna sulla protezione delle opere letterarie ed artistiche ratificata e resa esecutiva con legge 20 giugno 1978, n. 399, nonché le banche di dati che per la scelta o la disposizione del materiale costituiscono una creazione intellettuale dell'autore. 3
FASI DI LAVORAZIONE DI UN SITO WEB ANALISI DI MARKETING Analisi delle risorse, budget, tempi di realizzazione, opportunità. Definizione degli obiettivi e dei target del sito a breve e medio termine (Internet business plan). Le ricerche di mercato andrebbero usate nella valutazione di un sito per capire quanto il proprio client target potenziale trovi utili i contenuti principali e stabilire la tipologia di sito web. PROGETTAZIONE E INFORMATION ARCHITECTURE Analisi delle risorse informative attuali e potenziali (pubblicazioni, redazioni, dbk, etc). Fondamentale è mantenere alta la qualità dei contenuti, ogni altro aspetto è secondario, compreso il look & feel, la facilità d'uso e la promozione, seguendo il piano di marketing on-line. Stesura del concept, definizione delle diverse aree del sito e loro relazioni. L'Information Architecture è il processo di organizzazione, etichettazione e visualizzazione dei sistemi di navigazione e ricerca degli ipertesti. Esistono diversi modi per organizzare le informazioni all interno di un sito web: sequenziale, albero orizzontale, albero verticale, grafo. L'albero orizzontale ha i pregi della semplicità d'uso di un testo lineare e ha i vantaggi di flessibilità dell'ipertesto. Ma non scade nella carenza di organizzazione del grafo, né nell'eccessivo annidamento dell'informazione di un albero verticale. Una buona Information Architecture si ottiene organizzando il sistema dei collegamenti ai vari documenti dell'ipertesto rende un sito facile da usare, aiutando le persone a trovare e maneggiare l'informazione con successo (e aiuta i visitatori a ritornare). 4
DEFINIZIONE DEI COLLEGAMENTI Organizzazione del sito: indica i modi in cui le informazioni sono raggruppate Sistemi di etichettatura: sono essenzialmente i nomi e le definizioni con cui vengono indicati i gruppi dei contenuti Sistemi di navigazione: strutture dell'interfaccia come barre di navigazione e mappe che aiutano l'utente a interagire con il contenuto del sito Sistemi di ricerca: aiutano a formulare le domande che possono portare a documenti rilevanti. CLASSIFICAZIONE DEI COLLEGAMENTI Link Topici: il testo sottolineato che conduce a ulteriori informazioni riguardo all'argomento trattato. Non tutti sono d'accordo nell'inserire dei collegamenti dentro il testo, si corre il rischio di spezzare troppo la lettura, gli approfondimenti si possono collocare nella barra di destra. Link associativi: vengono usati per indicare altre pagine dal contenuto simile o correlato a quella attuale, che l'utente potrebbe perciò trovare interessante. Non sono vere e proprie guide alla navigazione del sito, ma piuttosto forme di "manipolazione" della navigazione. Link strutturali: sono link usati per connettere fra loro diversi livelli della struttura del sito. E' importante che i link strutturali vengano ripetuti identici su tutte le pagine, cosicché l'utente possa sapere quali opzioni di navigazione aspettarsi e in che rapporto stanno tra i loro gli argomenti in cui ci si muove. Generalmente i link strutturali sono quelli che alloggiano sulle barre di navigazione (o menu). 5
COMUNICAZIONE Analisi dei bisogni e individuazione del target, è la prima cosa da fare. Cosa devo promuovere Quanti articoli o prodotti devo proporre Chi sono i miei interlocutori Quanti utenti potenziali può avere il mio sito La grafica può avere diverse funzioni in un sito tra cui: Icone per la navigazione Mappe Icone informative Immagini Immagini di sfondo Banners Titoli Loghi e intestazioni Layout, look & feel della home page, look & feel dei template del sito, Storyboard e grafica di eventuali animazioni. Quando si vogliono inserire alcuni di questi elementi, la prima cosa di cui tener conto è la portata del download. I colori piatti delle gif sono di grande aiuto, pesano poco e se ben scelti sono di sicuro effetto. Le home invase dalle gigantografie fotografiche sono ormai in disuso a causa dei problemi di caricamento. Le pagine dovrebbero contenere un documento intero, anche se è meglio tenere una pagina un po' allungata che spezzarla in parte prima e parte seconda: è fastidioso per i lettori ritrovarsi a dover attendere un nuovo caricamento quando sono già immersi nella lettura. Occorre fare sempre molta attenzione ai tempi di caricamento delle pagine: un link presuppone il caricamento di una nuova pagina, se al contrario porta ad aprire un file video o un mp3, va sempre reso con un icona e va indicata la dimensione del file in kbyte; evitando di indicare il tempo di download, perché è un dato troppo relativo. I PRINCIPALI OBIETTIVI DEGLI ELEMENTI GRAFICI DI UN SITO Organizzare al meglio i link nella home page Gerarchizzare il contenuto Promuovere i contenuti principali con colori e layout. Minimizzare la possibilità di fraintendimenti e confusione. Organizzare la home page creando aree chiare e ben distinguibili. Organizzare l'informazione in gruppi visivi, basati sugli argomenti o sulle analogie che hanno dal punto di vista dell'utente Promuovere argomenti e novità Associare visivamente nomi pregnanti per ogni link Rendere al meglio la struttura di navigazione Organizzare i link in aree tematiche 6
Occorre fare attenzione a non accumulare troppi link. Quando i visitatori hanno di fronte una home page vorrebbero avere la sensazione di cogliere al volo tutte le possibili direzioni. Raggruppare le scelte in aree tematiche aiuta: le aree devono essere estremamente chiare, con al massimo 5-7 voci per area. Evitare bottoni come "avanti" "indietro". E' sempre meglio usare del testo che spieghi dove il link porterà (es: "Leggi l'articolo completo", "Le immagini della premiazione"). I rollover aiutano a distinguere tra grafica decorativa e di navigazione, e soprattutto danno l'impressione che l'interfaccia reagisca immediatamente alla presenza dell'utente. Vanno costruiti con attenzione, evitando stravolgimenti strani, è meglio usare variazioni di colore piuttosto che di formato (in genere un testo che si trasforma in grassetto, provoca spostamenti non voluti in tutto il testo). In genere è preferibile usare il blu per il colore dei link. È meglio evitare di usare testi sottolineati se non si tratta di link. Anche il maiuscolo risulta poco leggibile: può funzionare solo per brevi parole. Un'abitudine piuttosto deleteria è quella di far partire il client di posta elettronica quando si clicca su "contatti", è meglio allora progettare un form di immissione. Il plugin è un programma non autonomo che interagisce con un altro programma per ampliarne le funzioni. Ad esempio, un plugin per un software di grafica permette l'utilizzo di nuove funzioni non presenti nel software principale. Proprio perché richiede software specifici è bene non eccedere con questi oggetti ed in ogni caso prevedere link per scaricate gratuitamente i plug-in. 7
STANDARD DI NAVIGAZIONE Gli elementi strutturali vanno messi dove le persone si aspettano di trovarli, le interfacce web sono diventate uno standard e i link strutturali dei siti andrebbero posizionati in questo modo: Contenuti principali: centro pagina Barre di navigazione primarie: orizzontalmente nella parte superiore della pagina Barre di navigazione secondarie: verticalmente sulla sinistra Ritorno alla home/intestazione del sito: in alto a sinistra Ogni riferimento al contenuto della pagina (intestazione) deve essere sempre ben chiaramente visibile, in genere sotto il menu di navigazione. WEB DEVELOPMENT Integrazione tra look & feel e Html e altri linguaggi (css, javascript, dhtml) Il World Wide Web Consortium (W3C), insieme con altri gruppi e organismi di standardizzazione, ha fondato le tecnologie per la creazione e interpretazione di contenuti basati sul Web. Queste tecnologie, che noi chiamiamo standard del Web, sono accuratamente progettate per offrire tutti i vantaggi del Web al maggior numero di utenti e, nello stesso tempo, per assicurare lunga vita a qualsiasi documento pubblicato sul Web. Progettare e costruire secondo questi standard è più semplice, riduce i costi di produzione e consente di realizzare siti accessibili ad un maggior numero di persone. I siti sviluppati seguendo queste linee guida continueranno a funzionare correttamente anche quando i browser tradizionali si evolveranno e nuovi dispositivi per Internet faranno il loro ingresso sul mercato. Le tecnologie a disposizione per implementare un sito web sono davvero moltissime e ognuna di esse ha delle caratteristiche ben specifiche. Html e' il linguaggio standard per realizzare pagine web. E' arrivato alla versione 4 (cosi' detto Dhtml) anche se, quella ufficialmente riconosciuta e che non crea nessun problema di compatibilita' tra i browser, e la 3.2. I migliori programmi sul mercato per realizzare pagine web in formato Html sono sicuramente WEB SITE, DreamWeaver e Frontpage, anche se è possibile creare siti web con strumenti meno professionali (per informazioni collegarsi ai siti http://www.html.it e http://www.porteapertesulweb.it) Java e javascript sono invece 2 linguaggi informatici che vengono utilizzati soprattutto per creare effetti grafici (come ad esempio le immagini che cambiano quando ci si posiziona sopra il cursore del mouse), oppure per interagire con i moduli web (se ad esempio si vuole obbligare l'utente a compilare certi campi). Le Applet Java rallentano però il download delle pagine web e possono in qualche caso creare dei problemi di compatibilità. 8
DENOMINAZIONE DELLE PAGINE WEB I contenuti sono organizzati in pagine web, ogni pagina web è un file. Portare i contenuti in home page e organizzarli in aree chiare e distinte è una delle soluzioni migliori nel web: toglie l'incognita dei troppi click, e punta sulla flessibilità. E opportuno salvare tutte le pagine web e gli oggetti in esse contenute in un unica directory. Ogni sito deve avere una home page, è opportuno salvarla con il nome index.htm, qualsiasi estensione si usi (es. index.html, index.htm, index.php). Tutte le altre pagine possono essere denominate liberamente, ricordarsi che è preferibile non usare spazi o caratteri speciali(es. 'recensioni_citta.htm' e non 'recensioni città.htm') e usare tutte lettere minuscole. Per le immagini controllare sempre che il percorso nel codice sia sempre esatto. Codice: <img src="immagine.gif"> se l'immagine è nella cartella principale <img src="cartella/immagine.gif"> se l'immagine è in un altra cartella 9
IL SITO WEB DI UNA IFS Il sito web di una IFS deve essere la vetrina dei prodotti e presentare l azienda, per questo motivo è importante inserire l indirizzo del sito fra i dati fondamentali dell anagrafica dell impresa IFS, in questo modo sarà raggiungibile direttamente dal negozio elettronico sulla piattaforma CONFAO http://www.ifsconfao.net/ifs/simuifs/index.php Nella Sezione di destra del negozio elettronico di una IFS è possibile accedere al Sito Web della IFS cliccando su Vai al sito. Si ricorda che l indirizzo http del sito web, dominio IFS, viene inserito dal Docente Referente cliccando sul tasto Sito web da Menu Referente Scheda IFS. REGISTRAZIONE DOMINIO IFS Una volta create le pagine è necessario registrare un dominio presso un fornitore di hosting. Il servizio di hosting consiste nella possibilità di trasferire le proprie pagine web su di un web server dopo aver scelto un nome di dominio appropriato (breve e significativo). Tutti i siti creati dalle IFS della Lombardia sono pubblicati sul portale regionale www.weblombardia.it Le IFS richiedono il servizio al Simucenter WEB LOMBARDIA compilando l apposito form di richiesta spazio web pubblicato nell area riservata di www.ifsweb.it Ricordarsi, una volta conclusa la compilazione del form per la richiesta di uno spazio web per la pubblicazione dei materiali prodotti dalla propria Impresa Formativa Simulata, di inviarlo utilizzando apposita funzione. Verrà inviata automaticamente, presso l'indirizzo specificato, una mail di conferma con il riepilogo dei dati inviati. Il nome dello spazio web assegnato e le relative credenziali di accesso saranno assegnate previa verifica. Seguirà una successiva comunicazione da parte del Simucenter con la comunicazione dei relativi dati di accesso. Le IFS riceveranno via mail dal Simucenter WEB LOMBARDIA le credenziali di accesso. Si ricorda che il SIMUCENTER REGIONALE non è responsabile dell'uso connesso all'indirizzo assegnato. 10
PUBBLICAZIONE SITO WEB La pubblicazione delle pagine web avviene utilizzando il protocollo FTP per il trasferimento dei file. E necessario utilizzare un client ftp, ossia un programma per poter trasferire file sullo spazio web (FileZilla, WS Ftp client, Leap FTP). Verificare che le porte 20 e 21 del server ftp siano raggiungibili tramite internet, potrebbero essere bloccate da qualche Firewall. In molti programmi il trasferimento avviene semplicemente trascinando i file tra due finestre; una volta apertasi la root (la cartella principale) copiare dalla finestra corrispondente al client su cui si sta lavorando i file e "incollarli" nella finestra dello spazio web. Per accedere al server FTP e trasferire i propri file occorre disporre delle credenziali di accesso, nome utente e password, ricevute dal Simucenter WEB LOMBARDIA - web.lombardia@ifsweb.it 11