Corso di Informatica II. Corso di Informatica II. Corso di Informatica II. Orario lezioni 05/03/2009. Ing. Dario Sguassero. Ing.

Transcript

1 Lezione del 3 marzo 2009 Creare un sito web Orario lezioni Il nuovo orario di lezioneè: martedì venerdì In questo modo il corso terminerà a fine marzo. Creazione di un sito 05/03/

2 Layout Posizione menù Innanzitutto bisogna scegliere il layout della pagina, in particolare posizione e voci del menù: larghezza della pagina: legata alla dimensione della finestra o fissa (e sua posizione) Posizione e voci del menù: solo in alto, a fianco oppure su più lati 05/03/ /03/ Griglia principale Realizzazione menù Si scompone la pagina in una griglia e si realizza la tabella che la deve contenere: solitamente una tabella più esterna determina la posizione e dimensioni rispetto alla finestra una seconda tabella definisce gli spazi per i menù che poi vengono creati tramite altre tabelle Utilizzare un unica tabella è più complesso perché bisogna unire molte celle 05/03/ I menù sono solitamente tabelle con un unica riga o colonna Le voci possono essere dei link testuali, ma solitamente sono realizzati con immagini Un vantaggio di questa tecnica è che modificando l immagine posso aggiornare il menù in tutte le pagine del sito (ma non il relativo collegamento ) 05/03/

3 Larghezza tabelle Dimensione tabella e colonne Può essere impostata come valore assoluto (pixel) oppure relativo (alla dimensione della finestra del browser, solitamente 100%) Comunque verrà estesa alla dimensione minima del suo contenuto (perciò dimensione di celle e colonne hanno priorità) Se occupa più della larghezza della finestra del browser verrà attivata la barra di scorrimento orizzontale del programma 05/03/ Dimensioni colonne Dimensioni celle Lo stesso vale anche per la dimensione delle colonne Prima viene riservato lo spazio per le colonne con larghezza espressa in pixel, poi lo spazio rimanente viene suddiviso tra quelle con larghezza in percentuale Raramente si vincola l altezza delle righe Essendo una griglia, l altezza e la larghezza delle celle è la maggiore tra quelle della stessa riga e colonna Può essere impostata come valore assoluto (pixel) oppure relativo (alla dimensione della tabella) Comunque verrà estesa alla dimensione minima del suo contenuto 05/03/ /03/

4 Esempi layout Per ottenere un risultato come posso: 50% 50% centrare la tabella o inserirla in una colonna centrata di una tabella 05/03/ Tabelle per linee Per disegnare una linea orizzontale si può usare il tag <HR>, ma non supporta personalizzazioni Spesso invece si usa una cella vuota alta pochi pixel con sfondo colorato Inserendoci un immagine creata appositamente è possibile anche visualizzare delle righe sfumate o generare altri effetti 05/03/ Esempio 1: piccolo sito aziendale Minisito aziendale I siti per piccole ditte sono solitamente minimali, composti da 5-10 pagine statichei cui contenuti ricalcano quelli del depliant aziendale. Sono graficamente accattivanti ma hanno poco testo, al più una gallery dei prodotti offerti Le parti dinamiche (news, forum, area riservata ) sono troppo spesso abbandonate, per non parlare del riferimento 05/03/

5 Problema Struttura sito Creare un piccolo e semplice sito aziendale con: presentazione dell azienda pagine con i prodotti/servizi principali contatti Requisiti: navigazione tramite menù orizzontale Prodotti Homepage Servizi Contatti 05/03/ /03/ Struttura pagina Menù sito aziendale Utilizzare uno schema di questo tipo menù menù menù menù menù testo foto Il menù principale contiene: rimando all homepage (sempre presente!) presentazione, valori, storia, vision e/o mission dell azienda prodotti venduti e/o principali servizi offerti presentazione delle lavorazioni, metodi, strumentazione, tecnologia utilizzata contatti e mappa stradale 05/03/ /03/

6 Icone per menù Per recuperare velocemente dei pulsanti da utilizzare nel menù si può: partire da immagini scrivere icon seguito dal nome in inglese del pulsante che state cercando es. homepage selezionare nel menù a tendina immagini piccole o medie salvare l icona scelta con il tasto destro e il comando salva immagine con nome 05/03/ Mappe Per recuperare velocemente una mappa da utilizzare nella pagina contatti: partire da maps cercare l indirizzo esatto della ditta premere il tasto Prtscr (o Stampa ) effettuare l incolla su Irfanview, tagliare l immagine e salvarla come.jpg Verificare prima i termini d uso dell immagine! 05/03/ Esempio 2: photogallery Problema Si vuole visualizzare una galleria di immagini, suddivise per categoria, che potrebbero essere: l album delle foto personali il catalogo dei prodotti aziendali aggiungendo un piccolo commento per ogni foto Si suppone che le immagini originali siano tutte di grande formato (oltre i 2 Mpixel) 05/03/

7 Requisiti Preparazione immagini Si vuole una pagina indice che consenta di scegliere l album da visitare Deve essere prevista una preview delle immagini su una pagina leggera da caricare I pulsanti di navigazione devono consentire di muoversi tra le pagine senza dover ricorrere ai pulsanti del browser, e senza dover scorrere tutta la lista per uscire da un album Creare con Irfanviewuna seconda serie di immagini rimpicciolite (thumbnails) Per la singola foto usare il comando menù immagine ridimensiona e poi salva con nome (aggiungere al nome un suffisso per distinguerle dalle originali) Es. da foto_nonna1.jpg (3000x2000) creare foto_nonna1_small.jpg 150x100 05/03/ /03/ Preparazione immagini in serie Irfanviewconsente di eseguire operazioni su gruppi di immagini Copiare tutte le immagini in un altra cartella, quindi Irfanview menù converti in serie: seleziona conversione in serie-rinomina avanzate ridimensiona imposta dimens. percorso del nome: $N_small selezionata la cartella delle foto, aggiungi tutti quindi avvia ridurràe rinominerà tutte le foto! 05/03/ Struttura Elenco album Album 1 Album 2 Album 3 Foto1 Foto2 Foto3 Foto4 05/03/

8 Pagina foto 1 Pagina foto 2 Ha un titolo, la foto, eventualmente dei commenti Come pulsanti di navigazione bisogna prevedere almeno: 1. Indietro (eccetto per la prima foto) 2. Avanti (eccetto per l ultima foto dell album) 3. Torna all indice dell album BUS Classico autobus di Gozo, superaffollato ma molto economico indietro torna all indice avanti 05/03/ /03/ Pagina foto 3 <HTML> <HEAD><TITLE>Malta: bus pagina 2</TITLE></HEAD> <BODY> <H1 ALIGN= center >BUS</H1> <P ALIGN= center ><IMG SRC= foto1.jpg ></P> <P ALIGN= center >Classico autobus di Gozo</P> <TABLE><TR> <TD><A HREF= pag1.html >prec</a></td> <TD><A HREF= index_album1.html >prec</a></td> <TD><A HREF= pag3.html >prec</a></td> </TR></TABLE></BODY> Indice album 1 Si può iniziare dalla creazione della pagina con l indice del primo album Deve avere un titolo e sotto un griglia con l elenco delle miniature delle foto dell album che collegano alle pagine con le singole foto Se ci sono più album ci sarà un pulsante per tornare all indice degli album, che è costruito allo stesso modo 05/03/ /03/

9 Indice album 2 TITOLO ALBUM: MALTA TEATRO ABITAZIONE TIPICA BUS CHIESA VICOLO GROTTA GOZO MARE FORTEZZA Torna all indice degli album 05/03/ Indice album 3 <H1>MALTA</H1> <TABLE> <TR> <TD><A HREF= pag1.html ><IMG SRC= foto1_s.jpg ></A></TD> <TD><A HREF= pag2.html ><IMG SRC= foto2_s.jpg ></A></TD> <TD><A HREF= pag3.html ><IMG SRC= foto3_s.jpg ></A></TD> </TR> [ ] </TABLE> <A HREF= index_albums.html >Torna all indice</a> 05/03/ Risorse gratuite per il web Moduli In ogni sito ormai è previsto l inserimento di moduli per rendere il sito più interattivo: un formonline per la raccolta dei contatti degli utenti o dei CV (in alternativa alla ) un carrello della spesa o un formper la raccolta degli ordini e inoltre: un contatore di accessi o un modulo statistiche per monitorare le visite al sito 05/03/

10 Risorse Servizi di Google Le risorse sono disponibili sottoforma di: programma aspo phpda incorporare nel sito (una fase di configurazione è sempre richiesta) modulo online (script, iframe, ecc.) da incorporare nell html del sito I moduli online sono spesso gratuiti perché richiedono l iscrizione ad un sito e la visualizzazione di un marchio, perciò sono una fonte indiretta di pubblicità 05/03/ A titolo esemplificativo vediamo alcuni servizi offerti da Google: analytics per le statistiche di accesso al sito docsper i formonline maps per la cartografia interattiva I primi due richiedono l iscrizione, il terzo solo nella versione più avanzata (API di GoogleMaps) 05/03/ Google Analytics 1 Google Analytics 2 Effettuata la registrazione su accede dalla pagina selezionando prima la lingua italiana Al primo utilizzo è richiesta la registrazione del sito da monitorare Inserite i dati del sito e proseguite 05/03/ /03/

11 Google Analytics 3 Google Analytics 4 Inserite tutti i dati richiesti e proseguite con l accettazione del contratto copiare il codice proposto nell header di ogni pagina Dopo 24 ore saranno disponibili i dati sugli accessi al sito: 05/03/ /03/ Google Analytics 5 Le statistiche presentano diversi dati utili: Google Analytics 1 Effettuata la registrazione su accede dalla pagina selezionando prima la lingua italiana 05/03/ /03/

12 Google Analytics 6 Si può impostare la periodicità dell invio Google Docs 1 Accedere dalla pagina con le credenziali create per Gmail Nei settingsimpostare la lingua italiana e il fuso orario corretto, quindi SAVE Per creare un modulo nel menù selezionare nuovo modulo 05/03/ /03/ Google Docs 2 Compilato titolo e descrizione si possono modificare le domande preimpostatecliccandoci sopra e selezionando l icona Google Docs 3 Per aggiungere una domanda scegliere il tipo dal menù superiore Per creare serie di domanda simili utilizzare il pulsante duplica Alla fine cliccare su Salva e poi Altre azioni Incorpora Il codice <iframe> è da copiare all interno del <body></body>, dove andrà posizionato il questionario 05/03/ /03/

13 Google Docs 4 Tipo di domanda Google Docs 5 I risultati si potranno vedere ed esportare come foglio di calcolo Testo Testo del paragrafo Scelta multipla Caselle di controllo Scegli da elenco Scala (1-n) oppure come statistiche dal menù modulo riepilogo 05/03/ /03/ Google Maps Per incorporare una mappa interattiva nel sito effettuare la ricerca di un indirizzo su cliccare su Link ed incorporare il codice <iframe> all interno del <body></body> 05/03/