Costruire un Sito Web 1a Lezione: Martedì 30 Gennaio Introduzione In questa lezione Che cos'è un sito internet? Spazio web (gratuito e pagamento): domini Programmi necessari Le prossime lezioni Per iniziare La realizzazione di un sito Internet è da considerarsi una vera e propria opera di costruzione, dovremo avere ben chiaro sin dall’inizio cosa vogliamo ottenere con il nostro sito e come ottenerlo Il processo può essere suddiviso in quattro fasi: Progettazione Costruzione Test Pubblicazione Esiste una fase successiva: la manutenzione del sito Cosa e a chi? Dobbiamo chiarire a noi stessi quali sono le motivazioni che ci spingono a creare un sito; dobbiamo porci queste due domande: Cosa voglio comunicare? A chi lo voglio comunicare? A chi è rivolto il sito? Concentriamoci sulla seconda domanda Si nota che i principianti sono molto attenti alla grafica mentre i tecnici amano il testo puro Dovremmo trovare un giusto compromesso tra una grafica accattivante, e la necessità di avere un sito rapido e funzionale Perché avere un sito web? Se abbiamo motivazioni valide per comunicare qualcosa a qualcuno, la “World Wide Web”, “www”, ossia la rete di connessione mondiale, è un valido strumento per attuare questa idea Fino a pochi anni fa, chiunque desiderasse comunicare con un grande numero di persone incontrava molti problemi e doveva prevedere spese più o meno grandi Oggi, con Internet, la stessa operazione è diventata semplice, gratuita e anche divertente Cos’è Internet? Internet rappresenta la connessione di milioni di computer che si scambiano dati fra loro utilizzando un linguaggio comune All’inizio, solo scienziati ed enti di stato, potevano utilizzare computer interconnessi a distanza Le reti erano militari o, comunque private, e necessitavano l’inserimento di complicati comandi e codici per poter trasmettere anche una semplice lettera da un punto all’altro del mondo La differenza tra computer e sistemi operativi complicava le cose La creazione di un linguaggio comune chiamato HTML, ha risolto il problema Che cos'è un sito internet? Un sito web o sito internet (spesso abbreviato in sito) è un insieme di pagine web, ovvero una struttura ipertestuale di documenti accessibili con un browser tramite World Wide Web su rete Internet Una pagina web è una pagina del World Wide Web, di solito nel formato HTML (l'estensione del file è htm o html) con collegamenti ipertestuali che abilitano la navigazione da una pagina o una sezione all'altra L'ipertesto è un insieme di testi o pagine leggibili con l'ausilio di un'interfaccia elettronica, in maniera non sequenziale, per tramite di particolari parole chiamate collegamenti ipertestuali (hyperlink o rimandi) Un web browser è un programma in grado di interpretare il codice HTML e visualizzarlo in forma di ipertesto L'HTML è il codice col quale la maggioranza delle pagine web nel mondo sono composte: il web browser consente perciò la navigazione nel web. HTML e Browser L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere. Il Browser è il programma che usate quando navigate nel Web e svolge principalmente due compiti: scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo legge i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro; inoltre i vari files associati a quel documento (ad esempio le immagini, o i filmati in flash) vengono disposti secondo le indicazioni del codice html HTML e Browser (continua) Oltre ad Internet Explorer, il browser più diffuso, esistono altri browser Lo "storico" Netscape Navigator, con cui la Microsoft ha ingaggiato una vera e propria guerra Il browser Mozilla, che nasce da Netscape Una parte di utenti (si tratta sempre di una minoranza) utilizza poi Opera, un browser norvegese celebre per la sua velocità di visualizzazione delle pagine. Per ciascuno di essi esistono poi differenti versioni a seconda del sistema operativo (Windows, Mac OS, Linux, o altri). E’ importante sin dall'inizio acquisire una mentalità multibrowser, perché il mestiere del webmaster non consiste tanto nel conoscere nei minimi dettagli il codice HTML, quanto piuttosto nel sapere come il codice HTML verrà visualizzato sul computer dell'utente: infatti uno dei lavori più difficili è quello di riuscire a far vedere correttamente il proprio sito con i browser e le piattaforme più svariate. Dov’è l’HTML? In qualsiasi momento è possibile visualizzare il codice HTML delle pagine che stiamo visitando. Con Internet Explorer: Visualizza > HTML Con Mozilla : Visualizza > Codice Sorgente La struttura Ora che abbiamo chiarito cosa vogliamo ottenere da Internet, inizieremo a strutturare il nostro sito Con struttura possiamo intendere due fondamentali architetture: La struttura del sito La struttura delle pagine La struttura del sito La struttura del sito comporta la disposizione dei vari files che costituiranno il sito; per rendere il nostro lavoro ordinato e facilmente consultabile sia durante la realizzazione che durante la manutenzione in futuro, conviene dividere le pagine dalle immagini, i filmati ecc. La struttura delle pagine La struttura della pagina, invece, è caratterizzata dalla formattazione del testo e dagli elementi grafici in essa inseriti In particolare, la grafica, per molti utenti di Internet è fondamentale Nonostante sia penalizzante per la navigazione, immagini e filmati sono più pesanti da scaricare rispetto al testo, un sito ben strutturato graficamente, aiuta la sua comprensione e rende il sito più caratteristico e gradevole Grafica e web Ci affideremo quindi al nostro buon gusto ed alla dimestichezza che abbiamo con i vari programmi di grafica e fotoritocco che, da diverso tempo hanno tutti integrato degli appositi comandi per ottimizzare le immagini da utilizzare sul web, o addirittura, creano addirittura delle pagine mantenendo il layout dell’immagine originale Fra i programmi di fotoritocco più utilizzati troviamo Photoshop di Adobe che include Image Ready, applicazione apposita per l’ottimizzazione delle immagini di Photoshop per il web Oppure Fireworks di Macromedia, che oltre ad integrarsi perfettamente con il web editor Dreamweaver, è diventato un must per la progettazione e creazione di grafica per il web Inoltre esistono programmi come Freehand o CorelDraw che servono a disegnare componenti grafici quali strutture, pulsanti, icone, sfondi, ecc. Le regole di base per costruire un sito Abbiamo ora le idee più chiare di ciò che dovremo fare per costruire un sito attraente e funzionale Oltre a possedere un buon occhio, un webmaster deve conoscere gli aspetti prettamente teorici che rendono il sito facilmente navigabile Anche nell’ambito della creazione dei siti, esiste il detto “prevenire è meglio che curare” Elenchiamo quindi una serie di consigli fondamentali per evitare di creare pagine web non funzionali o non funzionanti Le parole d’ordine per chi lavora a contatto con la Rete sono compatibilità e velocità di consultazione Le regole di base per costruire un sito - continua Non tutti gli utenti del sito, avranno la nostra risoluzione dello schermo, quindi per evitare di utilizzare pagine che devono essere visualizzate ad una risoluzione di 1280 x 1024 Durante la navigazione può risultare seccante dover sempre utilizzare le barre di scorrimento per visualizzare il contenuto delle pagine E’ quindi consigliabile concentrare il contenuto delle nostre pagine in brevi e chiare frasi Dividere su più pagine argomenti troppo lunghi Le regole di base per costruire un sito - continua E’ consigliato vivamente, di utilizzare caratteri standard (Times New Roman, Arial, ecc.), cioè quelli predefiniti dai diversi sistemi operativi, in quanto font più particolari, nonostante creino effetti suggestivi, vengono visualizzati con il font disponibile sul sistema dell’utente, visualizzando la pagina diversamente da come è stata progettata Le regole di base per costruire un sito - continua Nonostante l’avvento delle nuove tecnologie, tipo ADSL, porti le velocità di connessione, ad essere sempre più rapide, conviene sempre limitare la grandezza dei files che compongono il nostro sito Di conseguenza, dividere concettualmente il sito in tre categorie: La parte informativa La parte di servizio La parte dinamica Le regole di base per costruire un sito - continua Cerchiamo inoltre, di rendere il sito chiaro e facilmente navigabile, perché gli utenti di Internet hanno a disposizione l’intera rete e poco tempo e voglia di rimanere davanti a una pagina che richiede 20 o più minuti per caricare un’immagine o un’icona consideriamo questi utenti persi Quindi, è consigliato poter offrire all’utente la possibilità di trovare con un solo clic ciò che sta cercando attraverso l’utilizzo di menu o barre di navigazione Inoltre, cercare di utilizzare immagini ed una formattazione del testo chiara e coerente con il messaggio che il sito vuole comunicare Le regole di base per costruire un sito - continua Buon gusto e rispetto nei confronti della comunità di Internet, aiutano a ottenere comprensione anche in caso di errori e distrazioni od errori Cercate di ottenere un feedback da parte dell’utente, inserendo in ogni pagina il collegamento all’indirizzo di posta elettronica per ricevere commenti consigli e impressioni varie Quale software utilizzare? Come avviene la creazione delle pagine web? In teoria è sufficiente possedere un computer e un editor di testi (Blocco Note) Anche se può sembrare strano, il blocco note di Windows è più che sufficiente per creare siti Internet rispettabili Questo comporta un’approfondita conoscenza del linguaggio HTML, che non è una competenza di acquisizione così immediata Ma oltre al blocco note? Fortunatamente, esistono software che aiutano il webmaster a creare pagine senza dover scrivere tutto il codice manualmente Durante questo corso, utilizzeremo Dreamweaver, di Macromedia, che può essere considerato il miglior strumento che un webmaster possa utilizzare per la creazione di siti sia statici che dinamici Dreamweaver non è l’unico software per costruire e gestire siti: il diretto concorrente si chiama FrontPage di Microsoft e fa parte della suite Office Allora perché serve imparare l’HTML? Nonostante esista una vasta scelta di software che aiutano nella creazione di pagine web in modo molto intuitivo, è consigliabile vivamente l’uso e lo studio del codice HTML, necessario per poter ottenere una maggiore padronanza del nostro sito Spazio web (gratuito e pagamento): domini Un sito internet, per essere visibile da tutti, deve essere presente su un computer (web server) continuamente reperibile su Internet, in grado di distribuire i contenuti di un sito a chi ne faccia richiesta nel web Un web server è un programma (e, per estensione, il computer) che si occupa di fornire, su richiesta del browser una pagina web Due possibilità di web server: Se il nostro computer è continuamente collegato ad Internet possiamo utilizzare il nostro computer per svolgere questo compito (soluzione sconsigliata anche per via della configurazione ostica di un programma web server) Trasferire le pagine HTML del sito che vogliamo rendere disponibile su Internet, dal nostro computer ad un computer ospite che offre il servizio desiderato (cioè di web server) SOLUZIONE CONSIGLIATA Web server a pagamento e gratuiti Esistono alcuni web server che ospitano le nostre pagine ma a fronte di un pagamento (di solito esiguo, intorno ai 30 euro annui) Per fortuna esistono anche web server che ospitano le nostre pagine gratuitamente (a volte in cambio di un po’ di pubblicità che comparirà magicamente all’interno del nostro sito) Chi vuole fare un lavoro serio deve rivolgersi ad un web server Chi vuole divertirsi e niente di più, può tranquillamente rivolgersi ad un web server gratuito Cosa offre un web server? Dello spazio su disco! Alcuni web server offrono uno spazio limitato (10, 20, 100, 200 Mbyte) altri uno spazio illimitato (di solito quelli a pagamento) Bisogna considerare che lo spazio medio occupato da una pagina HTML contenente solo testo è pari a 4-5 Kbyte Quindi un sito Internet composto da 100 pagine HTML di solo testo avrà una dimensione di circa 500 Kbyte! Ovviamente la dimensione occupata dal nostro sito Internet tende a salire se prevediamo di utilizzare anche delle immagini, suoni, video ecc. Web server a pagamento Aruba.it Dominio + SpazioWeb illimitato + 5 caselle email = € 20.66 + IVA l'anno Ottimo rapporto servizi/costo Indirizzo: http://www.aruba.it Consultingweb Dominio + 50 MB Spazio + 10 email = € 39 + iva annui Indirizzo: http://www.consultingweb.it/ Web server gratuiti Angelfire - 5 Mega di spazio gratis Geocities - 11 Mega di spazio gratis Vantaggi: Se il tuo sito misura meno di 200 kb, Angelfire non interferisce sulla struttura della pagina. Altrimenti può richiedere l'inserimento di un banner nella pagina. Dopotutto, il motivo per cui lo spazio è gratis, è che viene pagato dagli sponsor che si fanno pubblicità sui siti più grandi ospitati. Indirizzo: http://angelfire.lycos.com/ Svantaggi: Il servizio è conosciuto per essere abbastanza lento, ma siccome spesso vengono apportati dei miglioramenti, fai meglio a farti un'idea andando a visitare alcune pagine ospitate da Geocities. Per avere l'autorizzazione ad essere ospitato, devi mettere sul tuo sito un link per la pagina principale di Geocities; dopotutto, Geocities è sostentato dagli sponsor che mettono le loro pubblicità sulle pagine principali. Indirizzo: http://geocities.yahoo.com/home/ Altervista – Spazio web espandibile fino all'infinito (si parte da 100MB) Vantaggi: Nessun elemento pubblicitario inserito forzosamente nelle pagine che carichi Opinione personale: IL MIGLIOR SERVER WEB GRATUITO Indirizzo: http://home.altervista.org/site/ Programmi necessari Programmi necessari 2 Usiamo l’FTP Per pubblicare le pagine su uno spazio web viene fornito l’indirizzo FTP: vediamo come comportarci per trasferire i files Uno dei programmi più semplici da utilizzare è WS_FTP, disponibile sia nella versione gratuita che a pagamento WS_FTP Per copiare i files è sufficiente inserire l’indirizzo FTP del nostro server, il nostro ID e la password WS_FTP - continua WS_FTP - continua Per copiare un files, dal nostro computer al server lo si seleziona, quindi si preme il pulsante di trasferimento WS_FTP - continua Dreamweaver mette a disposizione Site, un validissimo strumento per pubblicare le pagine in rete WS_FTP - continua Dreamweaver, esegue le operazioni di connessione, e di autenticazione WS_FTP - continua Supponiamo di voler pubblicare il file foto.gif sul server WS_FTP - continua WS_FTP - continua WS_FTP - continua Al termine del trasferimento, il file viene visualizzato anche nella parte sinistra della finestra Prossime lezioni 2a Lezione: Martedì 6 Febbraio che cos'è l'html? comandi principali Esempi 3a Lezione: Martedì 13 Febbraio comandi html avanzati esempi