Progetti pratici e casi applicativi - Principi di web design

Principi di Web design – Appendice online

Progetti pratici e casi applicativi

Capitolo 1 – Progetti pratici1. Scaricate e installate l’ultima versione dei seguenti browser, se necessario:

• InternetExplorer

• Firefox

• Opera

• Safari

• Google Chrome

2. CreateunfileHTMLdibaseetestatelonelbrowser.

a. Copiateilfileproject1.htm dalla cartella Capitolo_01deifiledidatidisponibilisul sito del libro nella cartella omonima della vostra area di lavoro (createla se necessario).

b. Apritenell’editorHTMLilfileproject1.htm ed esaminate il codice. Notate che sonoinclusisoltantoglielementiHTMLdibasepercrearelesezionidell’in-testazioneedelcorpodeldocumento.<!DOCTYPE html><html><head>

</head><body>

</body></html>

c. Aggiungete l’elemento <title>conuntitoloperildocumentoeunelemento<meta>chedefiniscailtipodidocumento,comeevidenziatonelcodiceseguente:<!DOCTYPE html><html>

Principi di Web design - J. Sklar - (C) 2012 Apogeo

2 Principi di Web design – Appendice online

<head><title>Pagina web Progetto 1</title><meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1”></head><body></body></html>

d. Aggiungete un elemento <h1>conuntitolodiparagrafo.Taleelementodeveessere racchiuso all’interno dell’elemento <body>.<!DOCTYPE html><html><head><title>Pagina web Progetto 1</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><h1>Il World Wide Web</h1></body></html>

e. Salvateilfileevisualizzatelonelbrowser.DovrebbeapparirecomeillustratonellaFigura1.12.

Titolo del documento Titolo di testo

Figura 1.12 Aggiunta di un titolo di pagina e di un titolo di paragrafo alla pagina web.


Progetti pratici e casi applicativi 3

f. Aggiungetedueparagrafidicontenutoimmediatamentedopol’elemento<h1>.<!DOCTYPE html><html><head><title>Pagina web Progetto 1</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><h1>Il World Wide Web</h1><p>Il World Wide Web, abbreviato in WWW e comunemente noto come Web, è un sistema di documenti ipertestuali interconnessi a cui si accede via Internet.</p><p>Con un browser web si possono visualizzare pagine web contenenti testi, immagini, video e altri contenuti multimediali, e navigare tra di essi utilizzando collegamenti ipertestuali.</p></body></html>

g. Aggiungeteunoopiùparagrafieunelencopuntato.<html><head><title>Pagina web Progetto 1</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><h1>Il World Wide Web</h1><p>Il World Wide Web, abbreviato in WWW e comunemente noto come Web, è un sistema di documenti ipertestuali interconnessi a cui si accede via Internet.</p><p>Con un browser web si possono visualizzare pagine web contenenti testi, immagini, video e altri contenuti multimediali, e navigare tra di essi utilizzando collegamenti ipertestuali.</p><p>Esistono molti tipi diversi di siti web, tra cui:</p><ul><li>social network</li><li>prodotti editoriali</li><li>wiki</li><li>commercio e cataloghi</li><li>portali di ricerca</li></ul></body></html>

h. Aggiungeteuncommendoafondopaginacheincludailvostronome.Icom-mentinonappaiononellafinestradelbrowser.<html><head><title>Pagina web Progetto 1</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><h1>Il World Wide Web</h1><p>Il World Wide Web, abbreviato in WWW e comunemente noto come Web, è un sistema di documenti ipertestuali interconnessi a cui si accede via Internet.</p><p>Con un browser web si possono visualizzare pagine web contenenti testi, immagini, video e altri contenuti multimediali, e navigare tra di essi utilizzando collegamenti ipertestuali.</p><p>Esistono molti tipi diversi di siti web, tra cui:</p>


<ul><li>social network</li><li>prodotti editoriali</li><li>wiki</li><li>commercio e cataloghi</li><li>portali di ricerca</li></ul></body></html>

i. Salvateilfileevisualizzatelonelbrowser.DovrebbeapparirecomeillustratonellaFigura1.13.

Elencopuntato

Paragrafi

Figura 1.13 Il file del Progetto 1 completato.

3. AggiungeteregoledistileCSSaunfileHTMLdibaseetestatelonelbrowser.

a. Createunacopiadelfileproject1.htm e rinominatela in project2.htm.

b. ConuneditorHTMLapriteilfileproject2.htm. Cambiate il titolo in “Pagina webProgetto 2”.Cambiate il commento a fine documento in“PaginawebProgetto2,autoreLuigi”.Salvateilfile.

c. Apriteilfileproject2.htmnelbrowser.AppariràcomenellaFigura1.14.

Figura 1.14 Il file iniziale del Progetto 2.

d. Tornateall’editorHTMLeaggiungeteunelemento<style>nellasezione<head> incuiinserirelevostreregoledistile,evidenziatenelcodiceseguente.Lasciateunarigaoduedispaziobiancotraitag<style>.<html><head><title>Pagina web Progetto 2</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css"></style></head><body><h1>Il World Wide Web</h1><p>Il World Wide Web, abbreviato in WWW e comunemente noto come Web, è un sistema di documenti ipertestuali interconnessi a cui si accede via Internet.</p><p>Con un browser web si possono visualizzare pagine web contenenti testi, immagini, video e altri contenuti multimediali, e navigare tra di essi utilizzando collegamenti ipertestuali.</p><p>Esistono molti tipi diversi di siti web, tra cui:</p><ul><li>social network</li><li>prodotti editoriali</li><li>wiki</li><li>commercio e cataloghi</li><li>portali di ricerca</li></ul></body></html>


e. Aggiungeteunaregoladistilecheimpostilaproprietàfont-familyperlapagina,comemostratodiseguito.Notatechelaregoladistilecontienesiaunfontspeci-fico(Arial)siaunodiripiego(sans-serif)perilcasoincuil’utentenondispongadelfontArial.<style type="text/css">body {font-family: arial, sans-serif;}</style>

f. Scriveteun’altraregoladistilecheaggiungaunbordosottileinferiorepienoall’elemento di titolo <h1>.<style type="text/css">body {font-family: arial, sans-serif;}h1 {border-bottom: solid thin;}</style>

g. Salvateilfileevisualizzatelonelbrowser.DovrebbeapparirecomeillustratonellaFigura1.15.

Figura 1.15 Il file del Progetto 2 completato.

4. VisitateilsitodelWorldWideWebConsortiumetrovateilvalidatorebasatosulWebpressovalidator.w3.org/unicorn.Validateilcodicedeidueeserciziprecedenti.

5. ConvertiteundocumentoditestoinHTMLpartendodazero.Apriteunfileditesto,salvatelocomefileHTMLepoiaggiungetetuttiglielementidimarkuppercreareunapaginawebdibase.Visualizzateilrisultatonelbrowserepoivalidateilfile.



6. ScaricateeinstallatealmenoduediversieditorHTMLconfunzionidieditingdelcodice.Scriveteunabreverelazionechedescrivalecaratteristichediciascuno.CreateundocumentoHTMLchecontengaesempirappresentativiesiavisualizzabilenelbrowser.

Capitolo 1 – Caso applicativo individualePercompletareilcasoapplicativodiquestolibro,chevieneseguitoneivaricapitoli,dovetecreareunsitowebcompletoeindipendente.Talesitodeveavere6–10paginechevisualizzinoalmenotre livellidi informazioni.Avoi la sceltadelcontenuto.Peresempio,poteteconcentrarvisuuntemalegatoallavoro,creareunsitodiinteresseper-sonale,operun’associazionenoprofit.Ilsitosaràvalutatosottol’aspettodellacoesione,dell’accessibilità,dell’aderenzaaglistandarddelW3Cedell’aspettovisuale.Perciascuncapitolocompletereteunadiversasezionedelprogetto.NelcasodelCapitolo1inizia-tecreandounapropostadiprogetto,conloschemariportatodiseguito.Nelseguitocompleteretediversepartidellaproceduradirealizzazionedelsito,ottenendoallafineunsitowebcompleto.

Proposta di progettoCreateundocumentoHTMLdiunaoduepaginechedescrivaglielementidibasecheincluderetenelsito.UtilizzateivostroeditorHTMLpreferito,oBlocconote.Inquestafaselapropostaèsostanzialmenteunabozza.NelcasodelCapitolo2avretelapossibilitàdimodificarlaedifornireancheidettaglideldesign.Inseriteiseguentielementi,oveapplicabili.

• Titolo del sito–Indicateiltitolodelsitoweb.

• Sviluppatore –Inseriteivostridatiequellidichiunquealtroabbialavoratoalsito.

• Motivazione o tema principale–Spigateilcontenutoegliobiettividelsito,peresempiosupportoclienti,catalogo/e-commerce,sitoinformativoodirisorsa(cfr.Capitolo3).

• Schema degli elementi principali –Descriveteleprincipalicaratteristichedelsito.

• Contenuti–Indicateunastimadelnumerodipagineweb.

• Pubblico a cui si rivolge–Descriveteilpubblicotipicoacuisirivolgeilsito.

• Considerazioni di design –Elencategliobiettivididesigndelsito.

• Fattori limitanti–Individuateifattoritecniciolegatialpubblicochepotrebberolimitare gli obiettivi di design del sito.

Capitolo 1 – Caso applicativo di gruppoPercompletareilprogettodigruppoperquestolibro,dovetecreareunsitowebcompletoeindipendente.Ilgruppoidealmentedovrebbeessereformatoda3–4membriassegnatidaundocente.Ilsitodevecontenereda16a20paginechevisualizzinoalmenotre



livellidiinformazioni.A voilasceltadell’argomento.Peresempio,poteteconcentrarvisuqualcosadiattinenteallavoro,creareunsitodiinteressepersonale,osviluppareunsitoperun’impresafittizia.Ilsitosaràvalutatosottol’aspettodellacoesione,dell’acces-sibilità,dell’aderenzaaglistandarddelW3Cedell’aspettovisuale.Perciascuncapitolocompletereteunadiversasezionedelprogetto.NelcasodelCapitolo1iniziatecreandounapropostadiprogetto,conloschemariportatodiseguito.Nelseguitocompleteretediversepartidellaproceduradirealizzazionedelsito,ottenendoallafineunsitowebcompleto.

Proposta di progettoCollaborateallacreazionediundocumentoHTMLdiunaoduepaginechedescrivaglielementidibasecheincluderetenelsito.UtilizzateivostroeditorHTMLpreferito,oBlocconote.Inquestafaselapropostaèsostanzialmenteunabozza.NelcasodelCapitolo2avretelapossibilitàdimodificarlaedifornireancheidettaglideldesign.Inseriteiseguentielementi,oveapplicabili.

• Titolo del sito–Indicateiltitolodelsitoweb.

• Ruoli di sviluppo –Individuateciascunmembrodelgruppoelesingoleresponsabilitàperilprogetto.

• Esigenza–Spigatel’esigenzacheilsitowebsoddisferà.Qualèloscopodelsito?Esisteungruppodiinteressilecuiesigenzenonsonosoddisfatte?Esisteunanicchiadidestinazionechestatecercandodiriempire?

• Motivazione o tema principale–Spigateilcontenutoegliobiettividelsito,peresempiosupportoclienti,catalogo/e-commerce,sitoinformativoodirisorsa(cfr.Capitolo3).

• Schema degli elementi principali –Descriveteleprincipalicaratteristichedelsito.

• Contenuti–Indicateunastimadelnumerodipagineweb.

• Pubblico a cui si rivolge–Descriveteilpubblicotipicoacuisirivolgeilsito.

• Considerazioni di design –Elencategliobiettivididesigndelsito.

• Piano di sviluppo, tappe e consegne intermedie –Utilizzandocomebaseidatidelpro-grammadi studio, realizzateunpianodi sviluppoche indichi tappeeconsegneintermedieperciascunmembrodelgruppo.

Capitolo 2 – Progetti pratici1. NavigatenelWebcercandoesempidisitichemostrinounbuondesign.

a. Utilizzandounprogrammadicatturadelloschermo,comequellofornitoconWindows7.0,catturatealcunepaginedalsitoprescelto,chemostrinoduelivellidi informazioni.Peresempio,catturate lapaginaprincipaleeunasecondaria.Descrivetecomeilayoutdelleduepaginesirapportinoaitipidiinformazioniealleesigenzedegliutenti.



b. Utilizzateglistrumentigraficidiunprogrammadielaborazionedeitestiodipresentazioneperinserireleimmaginidelleschermatecatturate,accompagnatedatestidescrittivicheindichinolecaratteristicheunificantidellepagine,comecoloricondivisi,font,graficaelayout,mediantedeicallout (testi collegati all’immagine daunafrecciaounalinea,comeinmoltefigurediquestolibro).Peresempio,MicrosoftWordfornisceunacategoria“Callout”traleformedidisegno.

c. Indicateleareadispaziobiancoattivoepassivo.

d. Spiegateseildesigndelsitoèadattoalcontenuto.

2. NavigatenelWebcercandoesempididesigndiscarsaqualitàinsitiWebimportantie conosciuti.

a. Utilizzandounprogrammadicatturadelloschermo,catturatealcunepaginedalsitoprescelto,chemostrinoduelivellidiinformazioni.Peresempio,catturatelapaginaprincipaleeunasecondaria.

b. Indicatemediante dei callout gli aspetti stridenti o incoerenti del sito, qualicambiamentiimprovvisineglielementididesign,qualiiltemaeillayout.

c. Elencatealcuniconsiglidettagliatipermigliorareildesigndelsito.

3. Scriveteunbrevesaggiodicriticadeldesigndiunsitoweb.Descriveteillayoutstrutturaledelsitoedeterminateseleinformazionisonopresentateinmodochiaroefacilmenteaccessibile.

4. NavigatenelWebcercando siti cheutilizzinometodidinavigazioneparticolari.Scriveteunbrevesaggioincuidescriveteperchéilmetodoutilizzatofunzionabeneono,oppurepresentateunabrevepresentazionedidiapositivechepotetepresentareaivostricompagnidistudio.

5. Trovateunsitowebcheavostroparerenecessitidimiglioramentineldesign.

a. Stampateduepaginedelsito.

b. Createdellecopiedeglioriginaliemettetedapartequestiultimi.

c. Ritagliateconleforbiciglielementiprincipalidiciascunapagina.Riposizionateglielementieincollateliinundesigncheritenetepossamigliorareilsito.

d. Metteteaconfrontoildesignoriginaleconilvostromigliorato.

6. Verificatelacompatibilitàtraivaribrowser.

a. Assicuratevidiavereinstallatonelvostrocomputeralmenoduebrowsernellaversionepiùrecente.

b. Esplorateunavarietàdisitiweb.Visualizzatevariepaginedeisitiall’internodidiversi browser.

c. Scriveteunadescrizionedettagliatadicomeivarisitisonovisualizzatineibrowsercheavetescelto.Cercateeventualidifettiditesto,layoutegrafica.



7. Provateunsoftwarediaccessibilità.Prelevateunaversionediprovadiunodeipro-grammi di lettura dello schermo indicati di seguito. Collegatevi a diversi siti web e utilizzateilsoftwareperlaletturavocale.Chiudetegliocchimentreascoltate.Scriveteunbrevesaggiochedescrivalavostraesperienza.

• Jaws,presso www.freedomscientific.com/downloads/jaws/jaws-downloads.asp

• WindowEyes,presso www.gwmicro.com/Window-Eyes/Demo

Capitolo 2 – Caso applicativo individualeVisualizzateildesigndipaginaperilvostrositorealizzandodeglischizzidialcunilayoutdipaginaperdiversi livelliinformatividelsito,comenellaFigura2.39.Peresempio,fateunoschizzodellapaginaprincipale,diunasecondariaediunapaginadicontenuti.Nonpreoccupatevicheglielementiabbianol’aspettoesatto,maindicateicomponentiprincipali,cometitoli,indicatoridinavigazione,collegamenti,areeditestoecosìvia.

1024 pixel

Testata della pagina

Articolo principaleImmagine

News 1 News 2

Link nav. Link pubbl.

Figura 2.39 Esempio di schizzo di una pagina.

Iniziateaorganizzareilsito.Createundiagrammacheindichilapaginaprincipale,lepaginadisezione,dicontenutoecosìvia.Indicateicollegamentitralepagine.Indicateseforniretesceltedinavigazionealternative,qualiunsommarioeunamappadelsito.



Capitolo 2 – Caso applicativo di gruppoLavoratealivelloindividualepercrearelavostravisionedeidesigndipaginaperilsito.Fateunoschizzoperalcunilayoutdipaginacorrispondentiadiversilivelliinformatividelsito.Peresempio,fateunoschizzodellapaginaprincipale,diunasecondariaediunapaginadicontenuto,comenell’esempiodellaFigura2.39.Nonpreoccupatevicheglielementiabbianol’aspettoesatto,maindicateicomponentiprincipali,cometitoli,indicatoridinavigazione,collegamenti,areeditestoecosìvia.Oraincontrateviconglialtridelgruppopercreareilayoutdipaginamettendoinsie-meleideemiglioridiciascuno.Organizzateilsito.Creatediagrammicheindichinolapaginaprincipale,lepaginadisezione,dicontenutoecosìvia.Indicateicollegamentitralepagine.Indicateseforniretesceltedinavigazionealternative,qualiunsommarioeunamappadelsito.

Capitolo 3 – Progetti pratici1. NavigatenelWebetrovateunsitochevipiace.Scriveteunabrevedescrizionedegli

obiettivi del sito.

2. NavigatenelWebetrovatesiticherientrinonelleseguenticategoriedicontenuti:

a. Vetrina

b. Editoria

c. Interessespecifico

d. Supportoprodotto

Scriveteunabrevedescrizionedicomeilcontenutoèpresentatoinciascunsitoweb,eindicatecomeciascunsitosifocalizzisulleesigenzedeisuoiutenti.

3. NavigatenelWebetrovateunsitochenoncontengaunmodulodifeedbackperl’utente.Scriveteunmodulodifeedbackcon10-15domandeechepotresteutilizzarenel sito. Adattate le domande al contenuto e agli obiettivi del sito.

4. NavigatenelWebper trovareesempidelle seguenti strutturedi siti,edescrivetecomeilcontenutosiadattiallastruttura.Riflettetesucomelastrutturasceltavadaavantaggioosvantaggiodell’efficaciaedellafacilitàdinavigazione.Determinateseilsitoforniscesufficientiinformazionidinavigazione.Stampatealcuniesempitrattidalsitoeindicatedovelastrutturadelsitoeleinformazionidinavigazionesonodisponibiliall’utente.

a. Lineare

b. Gerarchica

5. NavigatenelWebpertrovareunsitocheutilizzipiùdiuntipodistrutturaespiegateperchéritenetecheilcontenutotraggabeneficiodaquestacaratteristica.Consideratelestessedomandepostenell’esempiodellaFigura3.4dellibro.



6. Esistonoaltritipidistrutturachenonsonodescritteinquestocapitolo?Trovateunsitochenemostriuna.Createundiagrammadiflussodelsitoedeterminateinchemodotraggabeneficiodatalediversotipodistruttura.

7. Scriveteunpianodicollaudoperilvostrosito.

a. Createunasezioneperognivariabiledidesign.

b. Dettagliatetuttiipassaggideltestelediversevariabilidatestare.Indicateespli-citamentequalibrowsereversioniutilizzare,equalisistemioperativi.Dettagliatelevarierisoluzionidelloschermoelevelocitàdiconnessione.Elencatelepagineesatte da collaudare.

c. Eseguitelaproceduraditestperverificarechesiavalida.

8. Scriveteunesempiodiquestionariodifeedbackperl’utente.

9. Scriveteunpianodimanutenzioneperilsito.

a. Specificateunpianodiaggiornamentodeicontenutiper levarie sezionidelsito.

b. Specificateunpianodirevisionideldesign.

c. Pianificatelamanutenzionedeicollegamenti.

Capitolo 3 – Caso applicativo individualeScriveteunaspecificaperilsitocheavetedefinitoneiCapitoli1e2.InseritequantepiùinformazionipossibilidallapropostadiprogettocompletataperilCapitolo1.Assicuratevidi includere una mission.Determinatecomemisurereteilsuccessodelsitonelraggiungereisuoiobiettivi.Inseriteunadescrizionedelpubblicoacuisaràrivolto.Spiegatecomedetermineretelasoddisfazionedell’utenteriguardoilsito.Specificateelementitecnologicichepotrebberoinfluenzarelosviluppooilfunzionamentodelsito.Realizzateunflowchartdettagliatoperilsito,utilizzandoquellopreliminarecreatoperilCapitolo2.Createunnomedifileperognipagina,utilizzandounostandarddinomen-claturacoerente.Indicatetuttiicollegamentitralepagine.Scriveteunbreveriepilogochedescrivailflowchart.Spiegateperchéavetesceltoquellaparticolarestruttura,comesi adatti ai contenuti e come vada a vantaggio dell’utente.UtilizzateilayoutdipaginaabbozzatiperilCapitolo2ecreatedeiwireframeutilizzandounodeglistrumentigratuitielencatineltesto,ounprogrammadidisegno.

Capitolo 3 – Caso applicativo di gruppoCollaborateperscrivereunaspecificaperilsitodefinitoperiCapitoli1e2.InseritequantepiùinformazionipossibilidallapropostadiprogettocompletataperilCapitolo1. Assicuratevi di includere una mission.Determinatecomemisurereteilsuccessodelsitonelraggiungereisuoiobiettivi.Inseriteunadescrizionedelpubblicoacuisaràrivolto.Spiegatecomedetermineretelasoddisfazionedell’utenteriguardoilsito.Specificateele-mentitecnologicichepotrebberoinfluenzarelosviluppooilfunzionamentodelsito.



Lavorateindividualmenteperdeterminarelastrutturainformativacheritenetepiùadattaperiltipodicontenutidelsito.Poiincontrateviconglialtrielavorateingruppoperricavarelastrutturainformativadefinitivaprendendoilmegliodellavorodiciascuno.Realizzateunflowchartdettagliatoperilsito,utilizzandoquellopreliminarecreatoperilCapitolo2.Createunnomedifileperognipagina,utilizzandounostandarddinomen-claturacoerente.Indicatetuttiicollegamentitralepagine.Scriveteunbreveriepilogochedescrivailflowchart.Spiegateperchéavetesceltoquellaparticolarestruttura,comesi adatti ai contenuti e come vada a vantaggio dell’utente.UtilizzateilayoutdipaginaabbozzatiperilCapitolo2ecreatedeiwireframeutilizzandounodeglistrumentigratuitielencatineltesto,ounprogrammadidisegno.

Capitolo 4 – Progetti pratici1. VisitateilsitodelWorldWideWebConsortiumetrovateildocumentoCSS Techniques

for Web Content Accessibility Guidelines (www.w3.org/TR/WCAG10-CSS-TECHS). Scrivete un saggiochedescrivaivantaggidell’impiegodiCSSperl’accessibilitàeleprincipalifunzionalitàdiCSScheutilizzerestepergarantirecontenutiaccessibilisulWeb.

2. Dasoli,oconuncompagno,sceglieteunodeiprincipalisitiwebdellacategoriaeditoriale,peresempioquellodiunquotidianoodiunarivistanota.Esaminatelecaratteristichedistiledelsito.Qualistilicomunipossonoessereapplicatiintuttoilsito,qualititoli,paragrafiesottotitoli?Scriveteun’analisideirequisitidelsitoedelencateglistilicheincluderestenelfogliostiledelsitoinquestione.

3. InquestoprogettoavetelapossibilitàditestarealcunesempliciregoledistilesuundocumentoHTMLstandard,osservandoirisultatinelbrowser.

a. UtilizzandoilvostroeditorHTML,createunsemplicefileHTML(oapriteneuno esistente) che contenga gli elementi <body>, <h1> e <p>. Salvatelo con il nome csstest1.htm nella cartella Capitolo_04 nella vostra area di lavoro.

b. Aggiungete un elemento <style>nellasezione<head>, come mostrato nel codice seguente:<head><title>Documento di prova CSS</title><style type="text/css"></style></head>

c. Aggiungeteunaregoladistilecheutilizzibodycomeselettoreeimpostilapro-prietàcolor al verde, come mostrato di seguito:<style type="text/css">body {color: green;}</style>

d. Salvate csstest1.htmevisualizzatelonelbrowser.Tuttoiltestodeldocumentodovrebbeapparireverde.

e. Ora aggiungete una regola di stile che imposti gli elementi <h1> in colore nero:<style type="text/css">



body {color: green;}h1 {color: black;}</style>

f. Salvatecsstest1.htmevisualizzateilrisultatonelbrowser.

g. Infine,aggiungeteunaregoladistilecheimpostiunmarginedi30pixelperglielementi <p>:<style type="text/css">body {color: green;}h1 {color: black;}p {margin: 30px;}</style>

h. Salvate csstest1.htmevisualizzateilrisultatonelbrowser.

4. InquestoprogettoavetelapossibilitàditestarealcunetecnichediselezionedibasesuundocumentoHTMLstandard,osservandoirisultatinelbrowser.Salvateilfileevisualizzatelonelbrowserdopoavercompletatociascunpassaggio.

a. UtilizzandoilvostroeditorHTML,createunsemplicefileHTML(oapriteneuno esistente) che contenga gli elementi <body>, <h1>, <p>ecosìvia.SalvatelonellacartellaCapitolo_04nellavostraareadilavoro,conilnomecsstest2.htm.

b. Aggiungete un elemento <style>nellasezione<head>, come il seguente:<head><title>Documento di prova CSS</title><style type="text/css"></style></head>

c. Scriveteunaregoladistilecheutilizzibodycomeselettoreeimpostilaproprietàcolor a un colore di vostra scelta.

d. Trovatedueelementisullapagina,peresempio<h1> e <h2>,chepossanocondi-viderealcunecaratteristiche.Scriveteunasingolaregoladistilechesiapplichiaentrambiglielementi.Impostatelaproprietàcoloralrossoelaproprietàmargin a20px.

e. Trovateunelementochenecontengaunaltro,peresempiounelemento<b> o <q> all’interno di un elemento <p>. Scrivete una regola di selettore discendente chesiapplichiall’elementocontenutoeneimpostilaproprietàcolor al verde.

5. InquestoprogettoavetelapossibilitàditestarealcunetecnichediselezioneavanzatesuundocumentoHTMLstandard,osservandoirisultatinelbrowser.Salvateilfileevisualizzatelonelbrowserdopoavercompletatociascunpassaggio.

a. UtilizzandoilvostroeditorHTML,createunsemplicefileHTML(oapriteneuno esistente) che contenga gli elementi <body>, <h1>, <p>ecosìvia.SalvatelonellacartellaCapitolo_04dellavostraareadilavoro,conilnomecsstest3.htm.

b. Aggiungete un elemento <style>nellasezione<head>,comeèstatomostratoalpunto4.



c. Scriveteunaregolaperunselettorediclassedenominatoheading.Impostatelaproprietàcoloralrossoelaproprietàfont-sizeal200%.Applicatelaclasseheading a un elemento <h1> o <h2> nel documento.

d. Scriveteunaregolaperunselettorediclassedenominatoemphasis.Impostatelaproprietàcoloralbluelaproprietàbackground-color al giallo. Nel documento aggiungete un elemento <span>aungruppodiparolechevoleteevidenziare,poiapplicatelaclasseemphasis all’elemento <span>.

Capitolo 4 – Caso applicativo individualeRivedetelapropostadiprogettoelespecifichedelsitocreateperilCapitolo3.Come implementerete i fogli stileCSSnelvostro sito?Neicapitoli successivi imparereteacontrollare aspetti tipografici, spazi bianchi, bordi, colori e sfondi con gli stili CSS.Pensateaciascunadiquestecaratteristichedistileeacomeleapplichereteallevostrepagine.Inoltre,realizzateunelencodipossibilinomidiclassechepotresteusareperidentificareicontenuti.Peresempio,consideratel’usodinomidiclasseperleseguenticaratteristiche:

• Corpodeltesto

• Intestazione(anchesupiùlivelli)

• Pièdipagina

Capitolo 4 – Caso applicativo di gruppoRivedetelapropostadiprogettoelespecifichedelsitocreateperilCapitolo3.Ognimembrodelgruppohalaresponsabilitàdiuntemplate,comequellodellahomepage,quellodellapaginadisezione,quellodellapaginadiunarticolo.Neicapitolisuccessiviimparereteacontrollareaspettitipografici,spazibianchi,bordi,coloriesfondiconglistiliCSS.Decidetecomegestirequestecaratteristichedistilenelvostrosito.Ognimembrodelgruppodovrebbecreareunelencodistilisuggeritiediconvenzionisuinomidautilizzarenelsito.Peresempio,potresteaveretitolidiprimolivello,disecondolivelloediterzolivello.Qualinomiutilizzeretepermantenereuniformitàintuttoilsito?PotrestechiamarliTitolo-A, Titolo-Becosìvia.Inoltre,dovreteisolareeassegnareunnomeaidiversistiliditestoutilizzatinelsito.Peresempio,potresteavereunostilediversoperiltestodellapaginaprincipaleedellepaginesecondarie.Pensateallediverseproprietàdistilechesareteingradodimanipolare(fateriferimentoall’AppendiceBdeltesto)eacomepotreteusarle,gestirleeassegnarelorodeinomi.Riuniteilgruppoperrivedereleideediognimembroeraggiungereunaccordosuglistilieleconvenzioniperinomi.



Capitolo 5 – Progetti pratici1. Nellaseguenteproceduraimparereteautilizzareleproprietàlist-styleperglielen-

chi.FateriferimentoallaFigura5.27(riportatapiùavanti)perosservareirisultatiottenuti.Salvateilfileevisualizzatelonelbrowserdopoavercompletatociascunpassaggio.

Perapplicareleproprietàlist-style:

a. Apriteilfilelists.htmlnelvostroeditorHTMLesalvatelonellavostraareadilavoro con il nome lists1.html.

b. Copiateilfilediimmaginediamond.gif nella vostra area di lavoro.

c. Nelbrowser,apriteilfilelists1.html.InizialmenteappariràcomenellaFigura5.26.Notatecheilfilecontienetreelenchi:applichereteundiversostileacia-scuno.

d. Ilprimoelencoèunelencopuntatocheattualmentemostrailpallinodidefault(bullet).Scriveteunaregoladistilecheutilizziunselettorediclassecircleperselezionareunicamentel’elenco;impostatelaproprietàlist-style-type in modo dacambiarelostiledelpallinoincircle.ul.circle {list-style-type: circle;}

Figura 5.26 La pagina web in versione iniziale.


e. Oraapplicatelostilealprimoelencoaggiungendol’attributoclass all’elemento <ul>.<ul class=”circle”><li>Pane</li><li>Latte</li><li>Formaggio</li><li>Uova</li></ul>

f. Il secondoelenconellapaginaèunelencoordinatocheattualmentemostralostiledidefault(puntodecimale).Scriveteunaregoladistilecheutilizziunselettore di classe alphaperselezionareunicamentetaleelenco,eimpostatelaproprietàlist-style-type in modo da cambiare lo stile in upper-alpha.ol.alpha {list-style-type: upper-alpha;}

g. Oraapplicatelostilealprimoelencoaggiungendol’attributoclass all’elemento <ol>.<ol class=”alpha”><li>Primavera</li><li>Estate</li><li>Autunno</li><li>Inverno</li></ol>

h. Ilterzoelenconellapaginaèunelencononordinatocheattualmentemostralostiledidefault,bullet.Scriveteunaregoladistilecheutilizziunselettorediclasse imageperselezionareunicamentetaleelenco,eimpostatelaproprietàlist-style-imageaunvaloreURL,utilizzandoilfilediimmaginediamond.gif.ul.image {list-style-image: url(diamond.gif);}

i. Oraapplicatelostilealprimoelencoaggiungendol’attributoclass all’elemento <ol>.LaFigura5.27mostraildocumentofinito.<ul class=”image”><li>Abete</li><li>Pino</li><li>Olmo</li><li>Betulla</li></ul>


Cerchiovuoto

Letteramaiuscola

Immagine

Figura 5.27 La pagina web completata.

2. ModificateundocumentoHTMLesistenteinmododautilizzareiCSS.

a. CreateglistiliutilizzandoglielementiHTMLstandardesistentinelfile.

b. Testateilvostrolavoroinpiùbrowserperverificarechetuttiglistilisianocom-patibili.

c. Rimuoveteglistilieinseriteliinunfogliostileesterno.

d. CollegateilfileHTMLalfogliostile.Controllatecheilfilesiavisualizzatoinmodo corretto.

3. NavigatenelWebcercandoesempidibuonistilitipografici.Scriveteunabrevecriticachespieghiperchéicaratteriutilizzati funzionanobeneneisititrovati.Salvateestampatealcuneschermatedipaginewebdiesempiodaallegareallavostracritica.

4. NavigatenelWebcercandoesempidicattivistilitipografici.Scriveteunabrevecri-ticachespieghiperchéicaratteriutilizzatifunzionanomaleneisititrovati.Salvateestampatealcuneschermatedipaginewebdiesempiodaallegareallavostracritica.

5. Inquestoprogettoavetelapossibilitàdiverificareleproprietàrelativeafontetestosuiparagrafiditesto.Salvateevisualizzateilfilenelbrowserdopoavercompletatociascunpassaggio.

a. UtilizzandoilvostroeditorHTML,createunsemplicefileHTML(oapriteneunoesistente)checontengapiùelementi<p>ecosìvia.Salvatelonellavostracartella Capitolo_05 con il nome fonts1.html.

b. Aggiungete un elemento <style>allasezione<head>, come nel seguente codice<head><title>Documento di prova CSS</title>



• Icollegamentiipertestualisarannostandardoacoloripersonalizzati?

• Comegarantiretelaleggibilitàdeltesto?

• Qualesaràlalunghezzadiriga?

Capitolo 6 – Progetti pratici1. NavigatenelWebesceglieteunsitochemostriunabuonagestionedellospazio

biancoper aumentare la leggibilitàdel contenuto.Scriveteunabrevecriticadelmotivopercuilospaziobiancofunzionabene.

2. NavigatenelWebesceglieteunsitochepossabeneficiaredalleproprietàperiboxdisponibiliinCSS.Stampateunacopiadellapaginaeindicatedovecambieresteleproprietàdispaziaturaebordo.Scriveteunbrevesaggiochedescrivalemodifichechevoleteapportareeinchemodomigliorerebberolaleggibilitàdeicontenuti.

3. Inquestoprogettocreereteunboxditestoflottante.

a. Copiateilfilefloatactivity.html dalla cartella Capitolo_06deifiledidatidispo-nibili sul sito del libro nella cartella omonima della vostra area di lavoro (createla se necessario).

b. Apriteilfilefloatactivity.htmlnelvostroeditorHTMLesalvatelonellavostraarea di lavoro con il nome floatactivity1.html.

c. Apriteilfilefloatactivity1.html nelbrowser.AppariràcomenellaFigura6.30.

Figura 6.30 Il file HTML originale del progetto.



d. Esaminateilcodicedellapagina.Notatecheunaregoladistileesistenteimpostail background-colorperunaclassefloatbox,comesivedenelseguenteframmentodi codice:.floatbox {background-color: #ccddee;}

e. Questaclasseèapplicataalprimoelemento<p> del documento, come si vede nellaFigura6.30.IlvostroobiettivoèquellodiutilizzarevarieproprietàdeiboxpercreareunapaginafinitasimileaquelladellaFigura6.31.

Figura 6.31 Il file HTML completato del progetto.

f. Utilizzateleseguentiproprietàpercrearelacaselladitestoflottante:

• width

• height

• float

• padding

• margin-right

• border

• text-align

FatedelleproveconlediverseproprietàfinoaottenereunrisultatoilpiùpossibilevicinoallapaginamostratanellaFigura6.31.



4. Inquestoprogetto avete lapossibilitàdi testare leproprietàdeibordi.Salvate evisualizzateilfilenelbrowserdopoavercompletatociascunpassaggio.

a. UtilizzandoilvostroeditorHTML,createunsemplicefileHTML(oapriteneunoesistente)checontengaelementidititoloediparagrafo.Salvatelonellavostracartella Capitolo_06 con il nome borders.html.

b. Aggiungete un elemento <style>nellasezione<head> come mostrato nel seguente codice:<head><title>Documento di test CSS</title><style type="text/css"></style></head>

c. Fatedelleproveconidiversistilideibordi.Iniziateapplicandoleregoledistileseguenti agli elementi del documento:h1 {border: solid 1px black;}h2 {border-top: solid 1px; border-bottom: solid 3px;}p {border-left: double red; border-right: solid 1px;}

d. Fatedelleproveaggiungendoproprietàdipaddingperscostareiltestodaibordi.Leregoleseguentisonoutilizzabilicomeriferimentoperleprove:h1 {border: solid 1px black; padding: 20px;}h2 {border-top: solid 1px; border-bottom: solid 3px; padding-top: 15px; padding-bottom: 30px;}p {border-left: double red; border-right: solid 1px; padding-left: 30px; padding-right: 20px;}

e. Continuateasperimentareconleproprietàperibordieilpadding.Provateadag-giungereproprietàdicoloreemarginipervederecomeappaionoglielementi.

Capitolo 6 – Caso applicativo individualeCreateleconvenzionidelmodelloaboxperilvostrositoweb.Partitedalleclassiti-pografichecreateper ilCapitolo5.Riflettete suidiversi requisitidi spaziaturaper icontenutiestabilitecomesipossamigliorarelaleggibilitàutilizzandoleproprietàdeibox.AggiungetequesteinformazioniallapaginaHTMLconlaspecificadeicaratterichemostraesempididiversifontedimensioniedicomeutilizzarli.Prendetedecisionisumargini,paddingebordi,eselezionateglielementiacuisarannoapplicati.CreatepagineHTMLdiesempio“primaedopo”cheriflettanoildesignmigliorato.

Capitolo 6 – Caso applicativo di gruppoLavorateconilvostrogruppoperdecidereleconvenzionidelmodelloaboxperilvostrosito,tracuilespecifichedispaziaturapermigliorareleggibilitàechiarezza.PotresteaverelanecessitàdicrearepagineHTMLmockupperpresentarelevostreideeaimembridelgruppo.Prendetedecisionisumargini,bordi,paddingesucomeutilizzarlinelsito.Riflettetesullacreazionediboxflottanticonsezioniperevidenziareitesti,su



comestandardizzarel’aspettodellediversesezionidelsitoaumentandolospaziobianco,esucomeibordipossanoaiutareamettereinevidenzatitoliecolonne.Unavoltaraggiuntounconsensogenerale,tornatealavoraresulvostrotemplatedipagina.Crearealtrimockupdeldesign.Scambiateivostriesempiconquellidialtrimembridelgruppoperraggiungereunconsenso.

Capitolo 7 – Progetti pratici1. Createunapaginawebatrecolonnefissecontestataepièdipagina,comenellaFigura

7.29.Questapaginaèprogettataperunarisoluzionedelloschermodi1024×768pixel.

a. Copiate il filefixed_columns.html dalla cartella Capitolo_07dei filedidatidi-sponibilinelsitodellibronellacartellaomonimaall’internodellavostraareadilavoro (createla se necessario).

b. Apriteilfilefixed_columns.htmlnelvostroeditorHTMLesalvatelonellavostraarea di lavoro con il nome fixed_columns1.html.

c. Apriteilfilefixed_columns1.htmlnelbrowseredesaminateillayoutdipagina.

d. L’obiettivoèquellodiutilizzareivalorimostratinellaFigura7.29percreareunapaginafinitaconunlayoutatrecolonnefisse,unatestataeunpièdipagina.

Larghezza: 960 pxAltezza: 60 pxNo margini





Figura 7.29 Pagina web a tre colonne fisse con testata e piè di pagina.

2. RisolveteilproblemadelladiscesadiunacolonnavisibilenellaFigura7.30.LapaginawebfinitadovrebbeapparirecomeillustratonellaFigura7.31.



Figura 7.30 Problema di discesa di una colonna.

Figura 7.31 Soluzione del problema della discesa di una colonna.

a. Copiateilfilecolumn_drop.html dalla cartella Capitolo_07deifiledidatidisponibilisul sito del libro nella cartella omonima all’interno della vostra area di lavoro (createla se necessario).

b. Apriteilfilecolumn_drop.htmlnelvostroeditorHTMLesalvatelonellavostraarea di lavoro con il nome column_drop1.html.



c. Apriteilfilecolumn_drop1.htmlnelbrowseredesaminateillayoutdipagina.

d. L’obiettivoèquellodiregolareivaloriutilizzatiperlecolonneinmododacrearelapaginawebmostratanellaFigura7.31.

3. Risolvete ilproblemadelboxflottantevisibilenellaFigura7.32.LapaginawebfinitadovrebbeapparirecomeillustratonellaFigura7.33.

a. Copiate il filefloat_problem.html dalla cartella Capitolo_07dei filedidatidi-sponibilisulsitodellibronellacartellaomonimaall’internodellavostraareadilavoro (createla se necessario).

b. Apriteilfilefloat_problem.htmlnelvostroeditorHTMLesalvatelonellavostraarea di lavoro con il nome float_problem1.html.

c. Apriteilfilefloat_problem1.htmlnelbrowseredesaminateillayoutdipagina.

d. L’obiettivoèquellodiutilizzareelementiflottantienonpercrearelapaginawebmostratanellaFigura7.33.

Figura 7.32 Problema di flottaggio.



Figura 7.33 Soluzione del problema di flottaggio.

Capitolo 7 – Caso applicativo individualeUtilizzateglischizzididesigndelCapitolo6ecominciateacostruiredeimockupperivarilivellidipaginedelsito.Decideteseutilizzareundesignfissooflessibile.UtilizzandolecompetenzeacquisitenelCapitolo7deltesto,realizzateepresentatelayoutdipaginaperidiversilivellidiinformazionicheilsitoconterrà.Peresempio,dovetecreareunmockupperlahomepage,unoperlepaginedegliarticoli,unoperlepaginedisezione.Ricordateditestareivarimockupcondelcontenutotestuale,adiversedimensionidellafinestradelbrowsereadiverserisoluzionidelloschermo.Siateprontiaspiegarelevostrescelte,adesempioquellarelativaallayoutfissooflessibile.

Capitolo 7 – Caso applicativo di gruppoOgnimembrodelgruppohalaresponsabilitàdidiversitemplatedipaginaperidiversilivelliinformatividelsitoUtilizzandolecompetenzeacquisitenelCapitolo7deltesto,realizzateepresentatelayoutdipaginaperidiversi livellidiinformazionicheilsitoconterrà.Peresempio,unmembrodelgruppoèresponsabiledeldesigndellahomepage,unaltroperquellodellepaginedegliarticoli.Ricordateditestareivaritemplatedipaginacondelcontenutotestuale,adiversedimensionidellafinestradelbrowsereadiverserisoluzionidelloschermo.Siateprontiaspiegarelevostrescelte,adesempioquellarelativaallayoutfissooflessibile.



Capitolo 8 – Progetti pratici1. Fatepraticanell’usodellaproprietàCSSfloat.

a. Scaricate un’immagine dal sito del libro, o trovatene una di vostro gradimento.

b. Aggiungetedel testo attornoall’immagine.Fatedelleprovecon laproprietàfloatpervederecomesidisponeiltesto.

c. Testateilvostrolavoroinpiùbrowserperverificarecheladisposizionedeltestocorrisponda.

2. Fatepraticanell’usodellaproprietàCSSmargin con le immagini.


b. Aggiungetedel testo attornoall’immagine.Fatedelleprovecon laproprietàmarginperaggiungerespaziobiancoattornoall’immagine.

c. Testateilvostrolavoroinpiùbrowserperverificarechelaspaziaturadeltestocorrisponda.

3. Fatepraticanell’usodegliattributiwidth e heightperleimmagini.


b. Createunapaginasemplicecontenentetestoepiùimmagini.Nonspecificategli attributi width e height nel tag <img>.

c. Disattivatelavisualizzazionedelleimmagininelbrowsereapritelapagina.

d. Aggiungete leopportuneinformazionidi larghezzaealtezzaal tag<img>perogni immagine.

e. Dinuovo,disattivatelavisualizzazionedelleimmagininelbrowsereapritelapagina.Notateledifferenzetraiduerisultatiel’impattosullayout.

4. Inquestoprogettoaggiungeteun’immagineeinformazionidicoloreaunapaginaweb.Ilcodicechedoveteaggiungerealfileèevidenziatoingrassetto.

a. Copiateifilewildflowers.html e daisy.jpg dalla cartella Capitolo_08deifiledidatidisponibilisulsitodellibronellacartellaomonimaall’internodellavostraarea di lavoro (createla se necessario).

b. Avviateilvostroeditorditestieapriteilfilewildflowers.html.

c. Aggiungete un elemento <img>allapagina,immediatamentedopoiltag<p> di apertura,comeevidenziatonelcodiceseguente:<html><head><title>Fiori selvatici</title></head><body><h1>Fiori selvatici</h1>

(p)<img src=”daisy.jpg” /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euis mod tincidunt ut lacreet dolore magna aliguam



erat volutpat. ...corpo del testo...

adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex eacommodo consequat.</p></body></html>

d. Salvateilfileevisualizzatelonelbrowser.DovrebbeapparirecomeillustratonellaFigura8.42.

Figura 8.42 Aggiunta di un’immagine a una pagina web.

e. Aggiungeteattributiall’immagineperspecificareladimensioneeuntestoalter-nativo.Larghezzaealtezzasonoentrambedi100pixel.Gli attributi alt e title possonocontenereuntestodivostrasceltachedescrival’immagine,peresempio“Immaginedimargherita”.Ilcodicechesegueevidenziagliattributiaggiunti:<img src="daisy.jpg" width="100" height="100"alt="daisy image" title="La margherita selvatica" />



f. Fatescorrere il testo attorno all’immagine aggiungendo una regola di stile CSS a quest’ultima. Utilizzate l’attributo style con la proprietà float impostata aleft:<img src="daisy.jpg" width="100" height="100"alt="daisy image" title="La margherita selvatica"style=”float: left;” />

g. Salvateilfileevisualizzatelonelbrowser.DovrebbeapparirecomeillustratonellaFigura8.43.

Figura 8.43 L’immagine è un elemento flottante a sinistra del testo.

h. Regolateilmarginedestrodell’immagineaggiungendounaproprietàmargin-right all’attributo styleconilvaloredi20px,comeèmostratonelcodiceseguente:<img src="daisy.jpg" width="100" height="100" alt="daisy image" title="La margherita selvatica" style="float: left; margin-right: 20px;” />

i. Salvateilfileevisualizzatelonelbrowser.DovrebbeapparirecomeillustratonellaFigura8.44.



Figura 8.44 Aggiunta di un margine destro all’immagine.

j. Aggiungete un attributo style all’elemento <h1>percambiareilcoloreinverdeforesta(codiceesadecimale006633).Ilcodicecheseguemostral’elemento<h1> con l’attributo styleimpostato.<h1 style=”color: #006633”>Fiori selvatici</h1>

k. Finitelapaginaimpostandocomecoloredisfondounverdechiaro.Aggiungeteun attributo style all’elemento bodyeimpostatelaproprietàbackground_color al coloredicodiceesadecimale99cc99,comeèmostratonelcodiceseguente:<body style=”background-color: #99cc99”>

l. Salvateilfileechiudetel’editor,quindivisualizzatelapaginafinitanelbrowser.DovrebbeapparirecomeillustratonellaFigura8.45,conunatestataverdescuroeunosfondoverdechiaro.Riportiamodiseguitoilcodicecompleto.<html><head><title>Fiori selvatici</title></head><body style="background-color: #99cc99"><h1 style="color: #006633">Fiori selvatici</h1><p><img src="daisy.jpg" width="100" height="100" alt="daisy image" title="La margherita selvatica" style="float: left; margin-right: 20px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euis mod tincidunt ut lacreet dolore magna aliguam erat volutpat....corpo del testo...




adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex eacommodo consequat.</p></body></html>

5. Inquestoprogettoavetelapossibilitàdiapplicarealcunedelleproprietàperlosfondodescrittenelcapitolocorrispondentedel testo.FateriferimentoallaFigura8.47,riportatapiùavanti,perconfrontareirisultatiottenuti.Salvateilfileevisualizzatelonelbrowserdopoavercompletatociascunpassaggio.

a. Copiateifilemars.html e pattern1.jpg dalla cartella Capitolo_08deifiledidatidisponibilisulsitodellibronellacartellaomonimaall’internodellavostraareadilavoro.Poiapritemars.htmlnelvostroeditorHTML.

b. Apritenelbrowserilfilemars.html.DovrebbeapparirecomeillustratonellaFigura8.46.



Figura 8.46 La pagina web mars.html nello stato iniziale.

c. Esaminate ilcodice.Notate la sezione<style>, che attualmente contiene una regoladistilecheimpostalafamigliadifontel’altezzadellarigaperiltesto.Eccoilcodicecompleto:<html><head> <title>A Princess of Mars by Edgar Rice Burroughs</ title><style type="text/css">body {font-family: sans-serif; line-height: 1.25em;}</style></head><body><h1>A Princess Of Mars</h1><h3>by Edgar Rice Burroughs</h3><h3>Chapter 1 - On the Arizona Hills</h3>

<p>I am a very old man; how old I do not know. Possibly I am a hundred, possibly more; but I cannot tell because I have never aged as other men, nor do I remember any childhood. So far as I can recollect I have always been a man, a man of about thirty. I appear today as I did forty years and more ago, and yet I feel that I cannot go on living forever; that some day I shall die the real death from which there is no resurrection. I do not know why I should fear death, I who have died twice and am still alive; but yet I have



the same horror of it as you who have ...corpo del testo... Possibly the suggestions which I gained upon Mars, and the knowledge which I can set down in this chronicle, will aid in an earlier understanding of the mysteries of our sister planet; mysteries to you, but no longer mysteries to me.</p></body></html>

d. NelvostroeditorHTMLiniziateimpostandoilcoloredisfondoperlapaginaweb.Ildesignfinitoutilizzaunosfondomarrone.Scriveteunaregoladistilecheutilizzibodycomeselettoreeimpostilaproprietàbackground-color property a #cc6633(marronerossiccio):<style type="text/css">body {font-family: sans-serif; line-height: 1.25em; background-color: #cc6633;}</style>

e. Oracreatelostileperl’elemento<h1>chevisualizzailtestoinnegativo.Utilizzatecome selettore h1,specificatecomecoloredisfondo#663300(marronescuro)ecomecoloredeltesto#ffffff(bianco).Aggiungeteunpaddingdi.25em:h1 {color: #ffffff; background-color: #663300; padding: .25em;}

f. Aggiungeteun’immaginedisfondoperlapaginaweb(pattern1.jpg). Aggiungete laproprietàbackground-imageallaregoladistileesistenteperl’elemento<body>, poichévoleteapplicarel’immaginedisfondoall’interapagina.body {font-family: sans-serif; line-height: 1.25em; background-color: #cc6633; background-image: url(pattern1.jpg);}

g. Quandotestatelanuovaregoladistileaggiuntaalpunto5f,vedretechel’imma-ginedisfondovieneripetutafinoariempirel’interosfondodellapagina.Voletelimitarel’applicazionedell’immaginealmarginesinistro del browser. Aquestoscopo,utilizzatelaproprietàbackground-repeatimpostataarepeat-y. Aggiungete questaproprietàallaregoladistileesistente:body {font-family: sans-serif; line-height: 1.25em; background-color: #cc6633; background-image: url(pattern1.jpg); background-repeat: repeat-y;}

h.Oralosfondosiripetecorrettamentenellapartesinistradellafinestradelbrowser,mailtestosopradiessorisultailleggibile.Perrisolvereilproblema,aggiungeteunaproprietàmargin-leftpertuttiglielementicontenentitesto:<h1>, <h2>, <h3> e <p>.Specificateunvaloredi125px,comeèmostratonellaregolaseguente:h1, h2, h3, p {margin-left: 125px;}

i. Ilcodicefinitoperilfogliodistileèriportatodiseguito.LaFigura8.47mostralapaginawebcompletata.<html><head>



<title>A Princess of Mars by Edgar Rice Burroughs</title><style type="text/css">body {font-family: sans-serif; line-height: 1.25em; background-color: #cc6633; background-image: url(pattern1.jpg); background-repeat: repeat-y;}h1 {color: #ffffff; background-color: #663300; padding: .25em}h1, h2, h3, p {margin-left: 125px;}</style></head>


6. NavigatenelWebesceglieteunsitochepresentiunutilizzoefficacedelcolore,siapericontenuti,siaperlosfondo.Scriveteunabrevecriticachedescrivacomel’usodelcoloremigliorilaleggibilitàdelsitoel’accessodell’utentealleinformazioni.

7. NavigatenelWebesceglieteunsitoprofessionalenoto(nonunoamatoriale)chepotrebbetrarrevantaggiodaunamodificadelloschemadeicolori.Cercateproble-midileggibilitàdeltestosuicoloridisfondo,impiegodicolorinonstandardpericollegamenti,ecosìvia.Scriveteunbrevesaggiochedescrivalemodifichecheapplicherestepermigliorarel’usodelcoloreinquelsito.



Capitolo 8 – Caso applicativo individualeProcurateviocreatelagraficadautilizzaresullediversepaginedelvostrosito:banner,immaginidinavigazione,disezioneecosìvia.Aggiungetequestielementigraficiallepaginedi testdel sitoevisualizzateli indiversibrowserperassicurarvicheappaianocorrettamente.Riflettetesuidiversirequisitidicoloredeivostricontenutiedecidetecomepotrestemigliorare la leggibilità. Il colore può comunicare informazioni sulla struttura delleinformazioni?Determinatelesceltedicoloreperilsito.Sceglieteicoloriperiltesto,losfondodelletabelleelosfondodipagina.Stabilite gli standard grafici per il sito, attività che comprende quanto segue e nonsolo.

• Decideteseutilizzereteunaquantitàstandarddispaziobiancoattornoaogniele-mentografico.

• Determinate esattamente quali attributi dovrebbero essere inclusi in tutti i tag<img>.

• Formulateunostandardpertuttigliattributialt e title.

• Formulateuninsiemedibasediimmaginistandardperilsitoeutilizzatelocomestandardperiltestdeglielementigrafici.

• Determinateicoloridicollegamentivisitatienon.

Scriveteunbrevedocumentodistandardchepossaesserefornitoachiunquesiacoin-voltonellarealizzazionedelsito.

Capitolo 8 – Caso applicativo di gruppoLavorateinsiemealgruppoperdecideregraficaecoloriperilsito:banner,immaginidinavigazione,disezioneecosìvia,coloriperiltesto,losfondodelletabelleelosfondodipagina.Potrebbeessereutilepresentarealcunepaginecampionepermostrarelevostreideeaglialtrimembridelgruppo.Stabilite gli standard grafici per il sito, attività che comprende quanto segue e nonsolo.

• Decideteseutilizzereteunaquantitàstandarddispaziobiancoattornoaogniele-mentografico.

• Determinate esattamente quali attributi dovrebbero essere inclusi in tutti i tag<img>.

• Formulateunostandardpertuttigliattributialt e title.

• Formulateuninsiemedibasediimmaginistandardperilsitoeutilizzatelocomestandardperiltestdeglielementigrafici.

• Determinateicoloridicollegamentivisitatienon.



Scriveteunbrevedocumentodistandardchepossaesserefornitoachiunquesiacoin-voltonellarealizzazionedelsito.Unavolta raggiuntounconsensogenerale, tornatea lavorare sul templatedipaginaadottato nel progetto per il Capitolo 7. Create dei mockup più finiti del design escambiategliesempidilayoutconglialtrimembridelgruppo.Cercatecaratteristicheunificanticheforniscanoalsitounasuaidentità.Assicuratevicheicolorieglielementigraficiseguanounflussocoerentetraidiversilivellidipaginadelsito.Fateinmodocheletransizionidaunapaginaall’altranonsianotraumatiche.Tuttelepaginedevonopresentareun’identitàgraficachecostituiscaunaspettounificante.

Capitolo 9 – Progetti pratici1. IlsitowebdellibrocontienetuttiifileHTMLperilsitocampioneillustratonella

Figura9.2deltesto.Utilizzatelipercostruireunoschemadinavigazionealternativo.FateriferimentoalleillustrazionirelativeallastrutturadelleinformazionipresentatenelCapitolo3deltesto(Figureda3.8a3.16)peresempididiversimodellidina-vigazione.Sceglieteunastrutturaedesempidicodicediunsistemadinavigazioneutilizzabileperilmodello.

2. Inquestoprogettocostruireteunabarradinavigazioneorizzontale. Ilcodicedaaggiungereneifileèevidenziatoingrassetto.

a. Copiateilfilehorizontal nav bar.html dalla cartella Capitolo_09deifiledidatidisponibilisulsitodellibronellacartellaomonimaall’internodellavostraareadi lavoro (createla se necessario).

b. Avviateilvostroeditorditestieapriteilfilehorizontal nav bar.html.IlcodiceHTMLèunelencononordinatoconidnavlist.<ul id="navlist"><li><a href=" ">Benvenuti</a></li><li><a href=" ">Servizi</a></li><li><a href=" ">Portfolio</a></li><li><a href=" ">Chi siamo</a></li><li><a href=" ">Contatti</a></li><li><a href=" ">FAQ</a></li></ul>

c. Apriteilfilehorizontal nav bar.htmlinunbrowser.L’elencodovrebbeapparirecomeillustratonellaFigura9.32.

Figura 9.32 L’elenco non ordinato del file di navigazione orizzontale iniziale.



d. Nellasezionedellostilecreateunselettoreperl’elencodinavigazione:ul#navlist { }

e. Aggiungeteproprietàdistileperrimuoverelaspaziaturaeipallinididefaultdall’elenco non ordinato:ul#navlist { padding: 0; margin: 0; list-style-type: none;}

f. Scriveteun’altraregolacheselezioniglielementi<li>eliimpostiallavisualiz-zazioneinline:ul#navlist li{ display: inline;}

g. Scriveteunaterzaregolacheselezioniglielementi<a> contenenti il testo dei collegamenti.Aggiungeteunmarginedestroperinserireunpo’dispaziobiancotraognicollegamentonell’elencoorizzontale:ul#navlist a{ margin-right: 20px; }

h. Salvateilfileevisualizzatelonelbrowser.LabarradinavigazionefinitadovrebbeapparirecomeillustratonellaFigura9.33.

Figura 9.33 La barra di navigazione orizzontale completata.

3. Inquestoprogettocostruireteunabarradinavigazioneverticale.Ilcodicedaag-giungerealfileèevidenziatoingrassetto.

a. Copiateilfilevertical nav bar.html dalla cartella Capitolo_09deifiledidatidi-sponibilisulsitodellibronellacartellaomonimaall’internodellavostraareadilavoro (createla se necessario).

b. Avviateilvostroeditorditestieapriteil filevertical nav bar.html.IlcodiceHTMLrealizzaunelencononordinatoconidnavlist.<ul id="navlist"><li><a href=" ">Benvenuti</a></li><li><a href=" ">Servizi</a></li><li><a href=" ">Portfolio</a></li><li><a href=" ">Chi siamo</a></li><li><a href=" ">Contatti</a></li><li><a href=" ">FAQ</a></li></ul>

c. Apriteilfilevertical nav bar.htmlinunbrowser.L’elencodovrebbeapparirecomeillustratonellaFigura9.34.



Figura 9.34 L’elenco non ordinato visualizzato dal file della barra di navigazione verticale nella versione iniziale.

d. Nellasezionedellostilecreateunselettoreperlabarradinavigazione:

ul#navlist { }

e. Aggiungeteproprietàdistileperrimuoverelaspaziaturaeipallinididefaultdall’elenco non ordinato:ul#navlist { padding: 0; margin-left: 30px list-style-type: none;}

f. Createunasecondaregolacheselezioniglielementi<a> all’interno di elementi <li>:ul#navlist li a { }

g. Aggiungeteregoledistilecheimpostinolavisualizzazioneablockpericolle-gamenti.Rimuovetelasottolineaturadaltestodeicollegamenticonlaproprietàtext-decoration.Impostateunalarghezzadi140pixeleaggiungeteunbordopienodi2pixel.ul#navlist li a { text-decoration: none; display: block; width: 140px; border: 2px solid;}

h. Completatelabarradinavigazioneaggiungendo5pixeldipaddingperscostareil testo dei collegamenti dai bordi dei pulsanti.Aggiungete anche 5 pixel dimarginesuperioreperseparareverticalmenteipulsanti.ul#navlist li a { text-decoration: none; display: block; width: 140px; border: 2px solid; padding: 5px; margin-top: 5px;}

i. Salvateilfileevisualizzatelonelbrowser.LabarradinavigazionefinitaèillustratanellaFigura9.35.



Figura 9.35 La barra di navigazione verticale completata.

4. NavigatenelWebetrovateunsitochepresentiunbuonsistemadinavigazione.Scriveteunabrevenotachespieghiperchétalesistemaèefficaceecomesoddisfileesigenzedell’utente.Considerateiseguenticriteri.

a. Itestieleimmaginideicollegamentisonosensati?

b. Èfacileaccedereallefunzionalitàdelsito?

c. Èfacileeffettuarericercheneicontenuti?

d. Esisteunamappadelsitooun’altrafunzionalitàperorientarsi?

5. Trovateunsitowebdicommercioonline.

a. Esaminateleopzionidinavigazioneeindicatese,avostroparere,vadanoavan-taggiooasvantaggiodell’esperienzadiacquistoonline.

b. Spiegatecomesipotrebbemodificarelanavigazionepermigliorarnel’efficacia.

6. Trovateunarisorsainformativaonlinechepotrebbeessereutilizzataascopodiri-cerca.Esaminateleopzionidinavigazioneespiegatecomefacilitinoocomplichinoilprocessodiricercadapartedell’utente.Considerateledomandeseguenti.

a. L’interfacciautenteèconfusaoaiutaatrovareleinformazioni?

b. Lanavigazionehaunpesoprominenteosecondarioneldesigndellapagina?L’utentesasempredovesitrova?Itestideicollegamentisonoconcisiefacilidacapire?Ledestinazionideicollegamentisideterminanofacilmenteapartiredaitesti?

c. Quantoèprofondalastrutturadelsito?Quanticlicservonoperraggiungereleinformazionidesiderate?



7. NavigatenelWebpertrovareesempidisiticheavrebberobeneficiodaopzionidinavigazionemigliori.Utilizzandoesempitrattidaquelsito,spiegatecomeapporte-reste dei miglioramenti.

8. NavigatenelWebpertrovareunsitocheutilizzipiùmetodidinavigazioneespiegatesequestovaavantaggiodelsitoeperché.

9. Trovateunsitochepresentiunmetododinavigazionediversodaquellidescrittiinquestocapitolo.Descrivetetalemetodoestabiliteseèvantaggiosoeperché.

Capitolo 9 – Caso applicativo individualeEsaminateilflowchartcheavetecreatoperilvostrosito.Considerateirequisitidellanavigazioneinternaedesterna.Createunnuovoflowchartchemostrilavarietàdelleopzionidinavigazionechepensatediutilizzareperilsito.UtilizzandoilvostroeditorHTML,realizzatedegliesempidibarredinavigazioneadatteaivostricontenuti.Verificateinomideifile,primadiiniziarelacodifica.SalvatelevariebarredinavigazionecomefileHTMLseparaticheinseguitopotrannoessereinclusinellevostrepagineweb.Progettateglielementigraficidinavigazionecheintendetecreare.Fatedeglischizzidibanner,pulsantidinavigazioneealtrielementi.Trovatefontidielementigraficiutiliz-zabiliperlanavigazione;peresempio,poteteutilizzareraccoltediclipartdipubblicodominio(senzacopyright)disponibilisulWebperfrecceealtrielementi.

Capitolo 9 – Caso applicativo di gruppoInsiemealgruppoesaminateediscuteteilflowchartcheavetecreatoperilvostrosito.Considerateirequisitidellanavigazioneinternaedesterna.Conunlavorodigruppo,createunnuovoflowchartchemostrilavarietàdelleopzionidinavigazionechepensatediutilizzareperilsito.Assicuratevicheinomideifilesianostandardizzatiechetuttiimembridelgruppoconcordinosulleconvenzioniadottate.Lavorateinmodoindividualepercrearebarredinavigazionetestuali.UtilizzateilvostroeditorHTMLperrealizzaredegliesempidibarredinavigazioneadatteaivostricontenuti.SalvatelevariebarredinavigazionecomefileHTMLseparati.Riuniteilgruppoperconsentireatuttiimembridipresentareglischemidinavigazionerealizzati.Sceglieteloschemamigliore,ometteteinsiemelemiglioricaratteristichedivarischemipercreareilsistemadinavigazionedautilizzareperilsitodelgruppo.Lavorateinsiemealgruppoperprogettareglielementigraficidinavigazionechein-tendetecreare.Assegnateaivarimembridelgruppoilcompitodicompletareleattivitàrimanenti,checomprendonoilrealizzareschizzidibanner,pulsantidinavigazioneealtrielementi,eiltrovarefontidielementigraficiutilizzabiliperlanavigazione.Peresempio,poteteutilizzareraccoltediclipartdipubblicodominio(senzacopyright)disponibilisulWebperfrecceealtrielementi.



Capitolo 10 – Progetti pratici1. Inquestoprogettoavetelapossibilitàdiapplicarealcunedelletecnichediutilizzodelle

tabelledidatiappresenelCapitolo10deltesto.Mentreprocedete,fateriferimentoallaFigura10.23(riportatapiùavanti)perconfrontareirisultatiottenuti.Salvateilfileeverificateillavoronelbrowserdopoavercompletatociascunpassaggio.

a. Copiateilfileproject1.html dalla cartella Capitolo_10deifiledidatidisponibilisul sito del libro nella cartella omonima all’interno della vostra area di lavoro (createla se necessario).

b. Apriteilfileproject1.html.ÈunfileHTMLchecontienesoltantoglielementistrutturaliindispensabiliquali<head>, <body>ecosìvia.

c. Createunasemplicetabellaconquattrocolonneecinquerighe.Utilizzatedatidivostrascelta,ocopiatequelliindicatiqui.

d. Assicuratevidiincludereladidascaliaelarigadiintestazione.

e. VisualizzateilrisultatoinunbrowsereconfrontateloconlaFigura10.23.

Figura 10.23 Il primo progetto.

2. Continuatealavoraresulfileproject1.html.FateriferimentoallaFigura10.24perconfrontare i risultati. Salvate il file e verificate il lavoronel browser dopo avercompletatociascunpassaggio.

a. Aggiungeteleproprietàdistilepereffettuareleseguentiimpostazioninellatabellacontenutanelfile project1.html:

• tuttiibordicollassati

• famigliadifont:Arial

• bordotabella:solid 4px blue

• bordidellecelledellatabella:solid 1px black

• paddingdellecelledellatabella:10pixel

b. VisualizzateilrisultatoinunbrowsereconfrontateloconlaFigura10.24.



Figura 10.24 Il secondo progetto.


a. Applicatealladidascaliadellatabellaleseguentiimpostazioni:

• allineamentoasinistra

• dimensionedeicaratteri:.85em

• stilecaratteri:italic

• padding:10pixeldalbasso


Figura 10.25 Il terzo progetto.


a. Aggiungeteuncoloredisfondo(#929292)edeltesto(#fff)allecellediinte-stazionedellatabella.




Figura 10.26 Il quarto progetto.


a. Aggiungeteuncoloredisfondochecompaiaquandol’utentepuntasuunarigadidati(#66ccff).


Figura 10.27 Il quinto progetto.

Capitolo 10 – Caso applicativo individualeEsaminateicontenutichevoletepresentarenelvostrositoetrovatedatichepotrebberobeneficiaredall’usodiunatabella.Scriveteunabrevenotadiunapaginachespieghiperchésiaomenoutileservirsiditabelleperpresentareidati.Selavostraanalisiindical’utilitàdiunatabella,eseguitelarelativaprogettazioneeimplementazionenellepagineappropriate.



Capitolo 10 – Caso applicativo di gruppoLavorandoingruppo,esaminateicontenutichevoletepresentarenelvostrositoetrovatedatichepotrebberobeneficiaredall’usodiunatabella.Scriveteunabrevenotadiunapaginachespieghiperchésiaomenoutileservirsiditabelleperpresentareidati.Selavostraanalisiindical’utilitàdiunatabella,eseguitelarelativaprogettazioneeimplemen-tazionenellepagineappropriate.

Capitolo 11 – Progetti pratici1. Inquestoprogettorealizzeretedellecaselleditestocomeelementidimoduli.

a. NelvostroeditorHTMLapriteilfileblankform.html che si trova nella cartella Capitolo_11 della vostra area di lavoro.

b. Salvateilfileconilnometextbox.htmlnellastessaposizione.

c. Esaminateilcodice.IlfilecontienesoltantoglielementiHTMLdidefaulteunelemento <form> vuoto.

d. CostruiteilmodulomostratonellaFigura11.29.Fateriferimentoallatabellaseguenteperivaloridegliattributideivarielementi.

Tabella 11.3 Valori degli attributi per il modulo.

Nome Dimensione Maxlength

Via 20 35

Città 20 35

35Provincia 2

Cap 5 35

e. UtilizzateleproprietàCSSperallineareleetichettecomenellaFigura11.29.

Figura 11.29 Modulo con caselle di testo.



2. Orarealizzatelecaselledicontrollo.

a. NelvostroeditorHTMLapriteilfileblankform.htmlpresentenellacartellaCa-pitolo_11 della vostra area di lavoro.

b. Salvateilfileconilnomecheckbox.htmlnellastessaposizione.


d. CreateilmodulomostratonellaFigura11.30.

e. Raggruppatelecaselledicontrolloconl’attributonameimpostatoa“gusto”.

f. Aggiungeteetichetteassociateaciascunacaselladicontrollo.

Figura 11.30 Modulo con caselle di controllo.

3. Orarealizzateipulsantidiopzione.


b. Salvateilfileconilnomeradio.htmlnellastessaposizione.



e. Assicuratevichel’opzioneselezionatasia“SI”.

f. Raggruppateipulsantidiopzioneconunattributonameimpostatoa“offerta”.

g. Aggiungeteetichetteassociateaciascunpulsantediopzione.



Figura 11.31 Modulo con pulsanti di opzione.

4. Orarealizzateun’areaditesto.


b. Salvateilfileconilnometextarea.htmlnellastessaposizione.


d. CreateilmodulomostratonellaFigura11.32.L’areaditestoha6righeper35colonne.

Figura 11.32 Modulo con area di testo.



5. Orarealizzateunelencoadiscesaocaselladiselezione.


b. Salvateilfileconilnomeselect.htmlnellastessaposizione.



Figura 11.33 Modulo con elenco a discesa.

Capitolo 11 – Caso applicativo individualeCreateunmodulodifeedbackdell’utenteperilvostrosito.PotetefareriferimentoalmodulopresentatonelCapitolo3deltesto.Personalizzateitipididomandeinbasealcontenutodelsito,eutilizzatedomandechiuseedomandeaperte.Peresempio,chiedeteagliutentididareunvotoalsistemadinavigazionedelvostrosito,da1a5,einseriteancheun’areaditestoincuipossanodescriverelaloroesperienzadinavigazione.Anchesenonsareteingradodiattivareilmodulo(perchénondisponetediunoscriptadattoperelaborareidati),poteteillustrareitipididomandecheporresteagliutentipercapiremeglioleloroabitudininell’utilizzodelsito.



Capitolo 11 – Caso applicativo di gruppoOgnimembrodelgruppodevecreareunmodulodifeedbackdell’utente,comedescrittonelprecedentecasoapplicativoindividuale.Sieteliberidiprogettareilmodulocomevolete,madoveteincluderelefunzionalitàdinavigazione,lespecifichetipograficheeleconvenzionididesigndelsito.Poiriuniteilgruppoesceglietelemigliorifunzionalità,domandeecaratteristichedidesigntraquellipropostidaivarimembri.Createunnuovomodulocheriuniscatalielementieaggiungeteloalsitodelprogetto.

Capitolo 12 – Progetti pratici1. Createlapagina“DogWorld”descrittanelcorrispondentecapitolodeltestoutiliz-

zandoglistiliCSSperrealizzareunlayoutflessibile.Poteteutilizzarelastessagraficaeglistessicontenutiutilizzatiperrealizzareillayoutfissodescrittonelcapitolo.FateriferimentoalparagrafodelCapitolo7chedescrivelacreazionedilayoutflessibi-li.

2. Realizzateun“look”diversoperlahomepagedelsitoDogWorld,utilizzandoglielementigraficieicontenutiforniti.Inqualealtromodopotetedisporreillayoutpercreareundesigninteressanteeaccessibile?

3. Createunapaginasecondariaperil layoutdiDogWorld,pensataperfacilitarelaletturadapartedell’uomo.Utilizzateglielementigraficieicontenutidellapaginaprincipale.Progettatelepagineinmododanonotteneretransizionibrusche,uti-lizzandoinpartelostesso“lookandfeel”dellapaginaprincipale.

Capitolo 12 – Caso applicativo individuale e di gruppoMetteteapuntoilsitowebdelvostroprogettotestandoilprogettofinitoinpiùbrowsereapportandolenecessariemodificheperfavorirelacompatibilità.Seaveteadisposi-zioneun’areadihosting,trasferiteviilsitoperuntestonlinesuInternet.Senonl’avete,preparateunCD/DVDounachiavettaUSBdoveregistrareil sitopermostrarloadaltrepersone.Sepossibile,incaricate3-5personedirivedereilsitoedicompilareunmodulodifee-dbackonlineocartaceo.Compilateirisultatiescriveteunbrevearticolochedettagliirisultatideivostritestechecosaindicanoriguardol’efficaciadelvostroprogetto.Evi-denziateleareechepotrebberoesseremigliorateconiconsiglidegliutenti.Elencatetutteleipotesicheavetefattosulsitoweb,specificandosegliutentilehannoconfermateo contraddette.Seneaveteiltempoelapossibilità,preparateviapresentareeaspiegareilvostropro-gettoaicompagnidistudio.Preparateunabrevepresentazioneorale(10–15minuti)incuipotetepresentarelevostreideedidesigneimotiviallabasedelsito.Siateprontiarisponderealledomandeeadifenderelevostresceltediprogettazione.


Progetti pratici e casi applicativi - Principi di web design

Documents

Transcript of Progetti pratici e casi applicativi - Principi di web design