Costruire un Sito Web

1. Costruire un Sito Web 1a Lezione: Martedì 30 Gennaio - Introduzione

2. In questa lezione • Che cos'è un sito internet? • Spazio web (gratuito e pagamento): domini • Programmi necessari • Le prossime lezioni

3. 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

4. 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?

5. 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

6. 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

7. 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

8. 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.

9. 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

10. 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à multi-browser, 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.

11. 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

12. 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

13. 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.

14. 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

15. 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.

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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.

28. 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/

29. Web server gratuiti • Angelfire - 5 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/ • Geocities - 11 Mega di spazio gratis • 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/

30. Programmi necessari

31. Programmi necessari 2

32. 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

33. WS_FTP • Per copiare i files è sufficiente inserire l’indirizzo FTP del nostro server, il nostro ID e la password

34. WS_FTP - continua

35. WS_FTP - continua • Per copiare un files, dal nostro computer al server lo si seleziona, quindi si preme il pulsante di trasferimento

36. WS_FTP - continua • Dreamweaver mette a disposizione Site, un validissimo strumento per pubblicare le pagine in rete

37. WS_FTP - continua • Dreamweaver, esegue le operazioni di connessione, e di autenticazione

38. WS_FTP - continua • Supponiamo di voler pubblicare il file foto.gif sul server

39. WS_FTP - continua

40. WS_FTP - continua

41. WS_FTP - continua • Al termine del trasferimento, il file viene visualizzato anche nella parte sinistra della finestra

42. Prossime lezioni • 2a Lezione: Martedì 6 Febbraio • che cos'è l'html? • comandi principali • Esempi • 3a Lezione: Martedì 13 Febbraio • comandi html avanzati • esempi