I siti web dinamici:loro progettazione e costruzione                       prof. P. Losapio                 Docente di Inf...
STRUTTURA ED OBIETTIVI DEL CORSOObiettivoCostruire un sito web delle cattedrali  andriesiStruttura 15 ore (5 lezioni) Pe...
ALCUNI TERMINI IMPORTANTIHTML = Linguaggio di creazione degli ipertesti (HyperText Markup Language).Ipertesto = un testo...
ALCUNI TERMINI IMPORTANTIPagina Web = un ipertesto costruito con il linguaggio HTML.Sito web = un insieme di pagine web ...
ALCUNI TERMINI IMPORTANTIBrowser (si legge ‘broser’) = programma che serve per cercare e visualizzare pagine web. Interne...
La ricerca e la visualizzazione di unapagina web                                     1. Si indica nel browser      BROWSER...
Come progettare un sito web        I passi e le regole di base da      seguire per progettare un buon                     ...
La Gabbia o Griglia diimpaginazioneLa gabbia, ovvero l’insieme di regole cheservono per organizzare i contenuti (testo,imm...
Griglia a dimensioni fisse                        Tutte le componenti della                        pagina hanno una larghe...
Griglia a dimensioni fluide                        Tutte le componenti della                        pagina hanno una largh...
La Gabbia o Griglia diimpaginazione                         Griglia a larghezza fissa                         (indipendent...
La Gabbia o Griglia diimpaginazione                         Griglia a larghezza a                         tutto schermo   ...
Lo sfondoEvitate gli sfondi a tinte piatte, possono dare dei problemi di leggibilitàEvitate un’immagine composta come sf...
Esempi di sfondo                   Esempio di sfondo a                   tinta    unita    con                   colore tr...
Esempi di sfondo                   Esempio di sfondo                   composto   troppo                   forte.
Esempi di combinazione colore testo/sfondo                Sfondo         Sfondo Sfondo molto   mediamente     semplice, co...
Esempi di sfondo                   Esempio di sfondo                   con contenuto della                   pagina    pos...
Regole per la composizione della grigliaLo schermo può essere suddiviso in aree in base alla loro visibilità, ovvero alla ...
Un esempio di home pageLogo in                       Barra delalto a dx                      titolo in                    ...
Il tipo di carattereIl testo deve essere facilmente leggibile ed il tipo   carattere deve essere indipendente dal browser....
La dimensione del carattereLa dimensione deve essere uguale o superiore ai 10pt.Arial 10 pt             Arial 12 ptVerdana...
Lo stile del carattereCorsivo - Il testo corsivo attira locchio perché è in contrasto con la forma del corpo del testo ma...
Esempio di testo con stili nonappropriatiIl 23 Aprile 2009 la Dirigente Scolastica, i docenti e gli alunnipartecipanti al ...
Esempio di testo con stili appropriatiIl 23 Aprile 2009 la Dirigente Scolastica, i docenti e gli alunnipartecipanti al Pro...
Il carattere: tipo, dimensione ecoloreRegola generale:“utilizza sempre pochi font (tre o quattro)e poche dimensioni, per d...
Le immaginiEvitate di usare troppe animazioni: creano confusioneTroppe immagini disturbano il navigatore nella ricerca d...
Riepilogo1. Stabilite il layout (gabbia) della pagina2. Stabilite il contenuto della barra del titolo   (intestazione) con...
Riepilogo6. Non usate troppe immagini soprattutto   animate7. Usate i caratteri consigliati, non più di   tre o quattro, e...
Riepilogo10.Usate uno sfondo troppo ricco di colori   e di oggetti per evitare di rendere poco   leggibile il testo
Upcoming SlideShare
Loading in...5
×

I siti web dinamici

120

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
120
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

I siti web dinamici

  1. 1. I siti web dinamici:loro progettazione e costruzione prof. P. Losapio Docente di Informatica
  2. 2. STRUTTURA ED OBIETTIVI DEL CORSOObiettivoCostruire un sito web delle cattedrali andriesiStruttura 15 ore (5 lezioni) Periodo: Aprile - Giugno
  3. 3. ALCUNI TERMINI IMPORTANTIHTML = Linguaggio di creazione degli ipertesti (HyperText Markup Language).Ipertesto = un testo collegato ad altri testi tramite un legame detto link.WWW (o Web) = (World Wide Web) la rete mondiale che permette di pubblicare documenti, immagini, video, foto ed ipertesti.
  4. 4. ALCUNI TERMINI IMPORTANTIPagina Web = un ipertesto costruito con il linguaggio HTML.Sito web = un insieme di pagine web legate tra loro.Server Web = un computer che contiene uno o più siti web.Indirizzo = un insieme di numeri o di lettere che servono a raggiungere una specifica pagina web. L’indirizzo inizia sempre HTTP:// ad es. http://www.gazzetta.it/calcio http://194.20.158.242/calcio
  5. 5. ALCUNI TERMINI IMPORTANTIBrowser (si legge ‘broser’) = programma che serve per cercare e visualizzare pagine web. Internet Explorer è un esempio di browser.Sito web statico = sito web che contiene pagine web che non cambiano frequentemente.Sito web dinamico = sito web che cambia automaticamente e di frequente
  6. 6. La ricerca e la visualizzazione di unapagina web 1. Si indica nel browser BROWSER l’indirizzo della pagina webhttp://www.gazzetta.it voluta 2. La richiesta arriva al server web che contiene la pagina web indicata 3. Il server web risponde inviando al browser la pagina web 4. Il browser riceve la pagina web e la visualizza SERVER WEB www.gazzetta.it
  7. 7. Come progettare un sito web I passi e le regole di base da seguire per progettare un buon sito web
  8. 8. La Gabbia o Griglia diimpaginazioneLa gabbia, ovvero l’insieme di regole cheservono per organizzare i contenuti (testo,immagini, video ecc...) all’interno delmonitor.
  9. 9. Griglia a dimensioni fisse Tutte le componenti della pagina hanno una larghezza fissa. Si può costruire con le tabelle e con i livelli (layer)
  10. 10. Griglia a dimensioni fluide Tutte le componenti della pagina hanno una larghezza espressa in percentuale. Si può costruire con le tabelle e con i livelli (layer)
  11. 11. La Gabbia o Griglia diimpaginazione Griglia a larghezza fissa (indipendente dalla larghezza massima della finestra). La griglia non si adatta alla dimensione massima della finestra.
  12. 12. La Gabbia o Griglia diimpaginazione Griglia a larghezza a tutto schermo (dipendente dalla larghezza massima della finestra). La griglia si adatta alla dimensione massima della finestra.
  13. 13. Lo sfondoEvitate gli sfondi a tinte piatte, possono dare dei problemi di leggibilitàEvitate un’immagine composta come sfondo, può creare confusione e mettere in secondo piano il contenuto della paginaSe il colore dello sfondo è a tinta unita scegliete sfumature chiare o pastelloIl contenuto della pagina deve essere sempre posto in risalto rispetto allo sfondoIn generale, locchio umano trova molto gradevoli le forme irregolari ma uniformi, ma la sua sensibilità riconosce immediatamente, con disappunto, un motivo standard ripetuto allinfinito.
  14. 14. Esempi di sfondo Esempio di sfondo a tinta unita con colore troppo forte.
  15. 15. Esempi di sfondo Esempio di sfondo composto troppo forte.
  16. 16. Esempi di combinazione colore testo/sfondo Sfondo Sfondo Sfondo molto mediamente semplice, con pieno che pieno che pochi colori rende poco rende che rende leggibile il abbastanza facilmente testo leggibile il leggibile il testo testo
  17. 17. Esempi di sfondo Esempio di sfondo con contenuto della pagina posto in risalto con elementi di colore diverso dello sfondo
  18. 18. Regole per la composizione della grigliaLo schermo può essere suddiviso in aree in base alla loro visibilità, ovvero alla facilità con la quale vengono viste:1. L’area in alto è quella che viene vista per prima rispetto all’area sottostante2. L’area posta a sinistra è quella che viene vista prima rispetto all’area centrale e destra (sequenza di lettura da sinistra verso destra)Partendo da queste considerazioni, le aree sono viste nel seguente ordine:1. L’area in alto a sinistra è quella vista per prima in assoluto (occupata in genere dal logo aziendale)2. L’area in alto (a seguire verso destra) contenente la barra del titolo3. L’area immediatamente sottostante occupata in genera dalla barra del menù4. L’area immediatamente sotto a sinistra, occupata dal menù di secondo livello5. L’area di contenuto centrale e destro6. Il piè di pagina
  19. 19. Un esempio di home pageLogo in Barra delalto a dx titolo in alto Barra delSottomenù menù in alto a sxInformazioni in primo Informazioni piano in secondo al centro piano a dx
  20. 20. Il tipo di carattereIl testo deve essere facilmente leggibile ed il tipo carattere deve essere indipendente dal browser.Esempi di carattere consigliati: Arial, Verdana, Helvetica, Trebuchet, TahomaEsempi di carattere sconsigliati: Times New Roman, Impact, Comic Sans MS, Georgia
  21. 21. La dimensione del carattereLa dimensione deve essere uguale o superiore ai 10pt.Arial 10 pt Arial 12 ptVerdana 10 pt Verdana 12 ptGeorgia 10 pt Georgia 12 ptTrebuchet Ms 10pt Trebuchet Ms 12ptCourier New 10 pt Courier New 12 ptTimes New Roman 10 pt Times New Roman 12 ptImpact 10 pt Impact 12 ptComic Sans Ms 10 pt Comic Sans Ms 12 pt
  22. 22. Lo stile del carattereCorsivo - Il testo corsivo attira locchio perché è in contrasto con la forma del corpo del testo ma non è molto leggibile sullo schermoGrassetto - Il testo in grassetto conferisce risalto. Il grassetto è leggibile su schermo, ma usate il grassetto per evidenziare singole parole e non intere frasi.Sottolineato - È buona norma evitare la sottolineatura nei documenti web poichè generalmente indica un collegamento ipertestuale.Testo colorato – da evitare all’interno di una frase perchè può essere confuso come link.
  23. 23. Esempio di testo con stili nonappropriatiIl 23 Aprile 2009 la Dirigente Scolastica, i docenti e gli alunnipartecipanti al Progetto Comenius “Allevamento eco-compatibile”accoglieranno in Aula Magna la delegazione del Berufskolleg Westdi Essen, partner dell’Ipsia nel progetto europeo. La delegazione,composta da 14 alunni specializzati in Chimica, Meccanica eMeccatronica, e da 5 docenti, coordinati dalla prof.ssa AndreaMetschke, sarà impegnata nella realizzazione di una macchinaselezionatrice di mitili, alimentata da un impianto fotovoltaico.La visita, che durerà fino al 30 Aprile, comprenderà, oltre alleattività più inerenti alla costruzione della macchina, anche visiteaziendali e culturali alla scoperta del territorio piceno.La coordinatrice del progetto, prof.ssa Stefania Talvacchia, augura atutti buon lavoro e buona permanenza.
  24. 24. Esempio di testo con stili appropriatiIl 23 Aprile 2009 la Dirigente Scolastica, i docenti e gli alunnipartecipanti al Progetto Comenius “Allevamento eco-compatibile”accoglieranno in Aula Magna la delegazione del Berufskolleg West diEssen, partner dell’Ipsia nel progetto europeo. La delegazione,composta da 14 alunni specializzati in Chimica, Meccanica eMeccatronica, e da 5 docenti, coordinati dalla prof.ssa AndreaMetschke, sarà impegnata nella realizzazione di una macchinaselezionatrice di mitili, alimentata da un impianto fotovoltaico.La visita, che durerà fino al 30 Aprile, comprenderà, oltre alleattività più inerenti alla costruzione della macchina, anche visiteaziendali e culturali alla scoperta del territorio piceno.La coordinatrice del progetto, prof.ssa Stefania Talvacchia, augura atutti buon lavoro e buona permanenza.
  25. 25. Il carattere: tipo, dimensione ecoloreRegola generale:“utilizza sempre pochi font (tre o quattro)e poche dimensioni, per dare alle pagine unaspetto più chiaro, inoltre, per dareuniformità, applica sempre lo stesso tipo dicarattere e la stessa combinazione di stili”
  26. 26. Le immaginiEvitate di usare troppe animazioni: creano confusioneTroppe immagini disturbano il navigatore nella ricerca delle informazioniOgni funzione del sito (ricerca, messaggio da scrivere, freccia sinistra e destra) devono avere sempre lo stesso simbolo grafico associatoInserire nel sito il logo dell’azienda che permette di tornare alla pagina principale (home) del sito.
  27. 27. Riepilogo1. Stabilite il layout (gabbia) della pagina2. Stabilite il contenuto della barra del titolo (intestazione) con logo aziendale, nome dell’azienda3. Stabilite il contenuto della barra del menù, tenendo conto che va sempre inserita la voce ‘Home’, in prima posizione4. Stabilite il contenuto del piè di pagina5. Stabilite il contenuto della homepage e delle pagine seguenti
  28. 28. Riepilogo6. Non usate troppe immagini soprattutto animate7. Usate i caratteri consigliati, non più di tre o quattro, e con poche dimensioni diverse8. Per il testo usate colori che non creano molto contrasto con lo sfondo9. Ad ogni funzione del sito associate sempre la stessa immagine
  29. 29. Riepilogo10.Usate uno sfondo troppo ricco di colori e di oggetti per evitare di rendere poco leggibile il testo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×