Guida Alla Realizzazione Di Un Sito

G U I D AA L L AR E A L I Z Z A Z I O N E
D I U NS I T O
D A L L AAA L L AZ
N a n d oP a p p a l a r d o&S a r a P r e s e n t i
D a l l i n c o n t r oc o ni l c l i e n t e a l l a n c i oo n l i n ed e l s i t o
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
YourInspirationWeb |http://www.yourinspirationweb.com/ 1
GUIDAALLAREALIZZAZIONE
DIUNSITO
diNandoPappalardo&SaraPresenti
DALLA A ALLA Z
GuidaallarealizzazionediunsitodallaAallaZ
DiNandoPappalardoeSaraPresenti Copyright20092010YourInspirationWeb Primaedizione:Aprile2010
Licenza
TuttiicontenutidelpresentelibrosonopubblicatisecondolalicenzadiutilizzodiCreative Commons,salvodiverseindicazionituseiliberodiriprodurre,distribuire,comunicareal pubblico,esporreinpubblico,rappresentare,eseguireerecitarequestoperaalleseguenti condizioni: Attribuzione.Deviattribuirelapaternitdelloperaneimodiindicatidallautoreo dachitihadatoloperainlicenza. Noncommerciale.Nonpuoiusarequestoperaperfinicommerciali. Non opere derivate.Nonpuoialterareotrasformarequestopera,nusarlaper crearneunaltra.
Ognivoltacheusiodistribuisciquestopera,devifarlosecondoiterminidiquestalicenza, che va comunicata con chiarezza. In ogni caso, puoi concordare col titolare dei diritti dautoreutilizzidiquestoperanonconsentitidaquestalicenza.
Limitazionediresponsabilit
Gliautorieleditorehannofattoognisforzoperassicurarelaccuratezzadelleinformazioni contenute in questo libro. Tuttavia, questo rilasciato senza alcuna garanzia, espressa o implicita. N gli autori, n Your Inspiration Web, n i suoi concessionari o distributori saranno ritenuti responsabili per eventuali danni causati direttamente o indirettamente dalleistruzionicontenuteinquestolibroodasoftwareoprodottihardwaredescritti.
MarchieLoghi
TuttiiLoghieiMarchicitatiinquestolibrosonoproprietdeirispettiviproprietari.Tali LoghieMarchisonocitatinelpresentelibrosoltantoperscopididatticiesudiessiYour InspirationWebnonhaalcundiritto. PubblicatodaYourInspirationWeb Web:www.yourinspirationweb.com Email:info@yourinspirationweb.com
Autori SaraPresenti
Webdesigner,lavoranelcampodellagraficaedellosviluppowebdaanniealmomento oltreacollaborareconalcuneWebAgencygestisceconsuccessolasuaattivitdifreelance sottoilnomedimascaradesign 1 . Comemoltifreelancesiabituataagestirepiruoli,spaziandodallagraficacartaceaallo sviluppo del codice XHTML e CSS;nonostantequestolasuapassionerimane,sempree comunque,ildesign,soprattuttoperquantoriguardalagraficaperilweb.
NandoPappalardo
NandoamministratorediEdiGroup 2 , societ di comunicazione e formazione fondata nel2005. inoltre Trainer Microsoft e docente di Web Design con anni di esperienza anche comeprogettistaincorsidiFormazioneProfessionaleRegionalieprivati.
YourInspirationWeb
DallasimbiosidiNandoeSaranelMaggiodel2009hapresovita Your Inspiration Web 3 , unacommunitydedicataalwebdesignchestasemprepidiventandounvalidopuntodi riferimento nel settore e che offre quotidianamente guide, tutorial, consigli, risorse gratuite,utilitiesenumerosifontidiispirazioneperivostrilavori. YourInspirationWebstadiventandounprogettosemprepiambiziosoanchegraziealla collaborazione continuativa di alcuni professionisti del settore che si sono aggiunti stradafacendoalnostroteam.Unringraziamentoparticolarevaa:GiustinoBorzacchiello, NicolasGutierrez,MaurizioTarchini,IvanSignorile,DanieleNicolosieMarcoDiMauro. Persapernedipivisitalapagina 4 dedicataagliautoridiYIW. Un grazie di cuore va anche ad Antonino Scarf che da alcuni mesi si occupa di amministrareilforum 5 diYIW. Se vuoi contribuire a rendere questa community ancora pi grande e sei interessato a collaborare con noi, ti invitiamo a contattarci utilizzando il modulo contatti presente sul sito.
1 2
http://www.mascaradesign.it/ http://www.edigroup.it/ 3 http://www.yourinspirationweb.com/ 4 http://www.yourinspirationweb.com/autori/ 5 http://forum.yourinspirationweb.com/ YourInspirationWeb |http://www.yourinspirationweb.com/ 4
SOMMARIO
INTRODUZIONE...................................................................................................................12 QUALIARGOMENTISARANNOTRATTATI?.......................................................................................... 12 COMECAPIRELEESIGENZEDELCLIENTEALPRIMOINCONTRO?..........................................14 CHECOSILBRIEF?..................................................................................................................... 15 CHECOSAVUOLEILTUOCLIENTE?................................................................................................... 15 QUALISONOLEINFORMAZIONICHEILCLIENTETIDEVEDARE?...............................................................15 ECCOUNAPOSSIBILESTRUTTURADELNOSTROBRIEFALTERMINEDELLINCONTRO:....................................16 Intestazione........................................................................................................................ 16 Background......................................................................................................................... 16 Obiettivi.............................................................................................................................. 16 Target.................................................................................................................................16 Sintesi.................................................................................................................................17 Parolechiave...................................................................................................................... 17 Puntichiave........................................................................................................................ 17 CONCLUSIONI.............................................................................................................................. 17 COMECALCOLARECOSTIETEMPIDICONSEGNADIUNPROGETTOWEB?...........................18 COMECALCOLARECOSTIETEMPIDICONSEGNAEVITANDODISCRIVERECIFRESENZASENSO?......................19 Gliaspettiprincipalidelpianodiprogetto.........................................................................20 1videoIntroduzioneeinserimentodialcuneattivit(929).....................................21 2VideoInserimentocompletodelleattivitchecompongonoilprogetto(1632)...21 3VideoAggiuntadellerisorseeassegnazionedelleattivitdasvolgere(715).......22 4VideoAssegnazionecompletadiogniattivit(524)..............................................22 5VideoAssegnazionedelladuratadellesingoleattivit(1047)..............................22 6VideoCollegamentitralesingoleattivit(1246)..................................................22 CONCLUSIONI.............................................................................................................................. 22 COMEEVITAREFUTURIRIPENSAMENTIDAPARTEDELCLIENTE?.........................................24 REALIZZAZIONESITOWEB:ILCONTRATTODIVENDITAPERSONALIZZABILE................................................25 CONCLUSIONI.............................................................................................................................. 26 COMESVILUPPAREEORGANIZZARELASTRUTTURADIUNSITOWEB?................................28 DEFINIZIONEDELCONCEPT............................................................................................................ 29 MACOSLASTRUTTURADIUNSITOINTERNET?................................................................................ 30 ECHECOSLARCHITETTURADELLINFORMAZIONE?...........................................................................30 CHEDIFFERENZACTRASTRUTTURAEARCHITETTURADELLINFORMAZIONE?..........................................30 YourInspirationWeb |http://www.yourinspirationweb.com/ 5
TORNIAMOALNOSTROCASOPRATICO .............................................................................................. 31 ORADIREALIZZAREILWIREFRAME................................................................................................. 32 CONCLUSIONI.............................................................................................................................. 32 COMETROVARELISPIRAZIONEEDISEGNAREILLAYOUTDIUNSITOWEB?.........................34 CERCA(ETROVA)LAGIUSTAISPIRAZIONE.......................................................................................... 35 Fase1:Cerca...................................................................................................................... 35 Fase2:Esprimitestessoneidettagli.................................................................................. 36 Fase3:Imponitiunapausa................................................................................................. 36 LISPIRAZIONEARRIVATA,EORA?.................................................................................................. 36 INSERIAMOQUALCHEIMMAGINENELLAYOUT.................................................................................... 43 CURIAMOLATIPOGRAFIA ............................................................................................................... 44 INSERIAMOUNAGALLERYFOTOGRAFICA........................................................................................... 47 LULTIMOTOCCO......................................................................................................................... 48 COMEPRESENTARELABOZZAGRAFICAALCLIENTE?...........................................................52 CREARAPPORT............................................................................................................................ 53 EVITALARROGANZA..................................................................................................................... 53 SPIEGALECARATTERISTICHE........................................................................................................... 54 EVIDENZIAIPUNTIDIFORZA........................................................................................................... 54 SIITOLLERANTECONLEOBIEZIONI................................................................................................... 55 PENSIDIESSERENELGIUSTO?DIMOSTRALO...................................................................................... 55 EDIO,COMEFACCIOCONILTELELAVORO?........................................................................................ 56 CONCLUSIONI.............................................................................................................................. 56 COMEREALIZZARELEPAGINEINTERNEDOPOLACCETTAZIONEDELLABOZZA?...................58 ILPRIMOPASSOPERLAPROGETTAZIONEDELLEPAGINEINTERNE............................................................59 PROGETTARELAGRAFICASULLABASEDEICONTENUTI ..........................................................................60 INSERIAMOICOLLEGAMENTIALLESOTTOPAGINE............................................................................... 61 AGGIUNGIAMOQUALCHEELEMENTOGRAFICO................................................................................... 64 COMETRASFORMAREUNPSDIN(X)HTMLECSSSENZAPERDERCILARAGIONE?PARTE1...68 PREMESSA..................................................................................................................................69 PASSO1:COMEDISSEZIONARECORRETTAMENTEILNOSTROLAYOUT?....................................................70 PASSO2:METTIAMOLEMANISULNOSTROFOGLIODISTILE.................................................................71 PASSO3:ASSEGNIAMOUNPATTERNALBODY................................................................................... 72 PASSO4:INIZIAMOASCRIVERELENOSTREPRIMERIGHEDI(X)HTML....................................................73 PASSO5:DEFINIAMOILCONTENITOREDELSITO................................................................................. 75 PASSO6:DIVIDIAMOILCONTENITOREINDUECOLONNE......................................................................76 PASSO7:ILMOMENTODIAGGIUNGEREILFOOTER...........................................................................78 CONCLUSIONE............................................................................................................................. 80 YourInspirationWeb |http://www.yourinspirationweb.com/ 6
COMETRASFORMAREUNPSDIN(X)HTMLECSSSENZAPERDERCILARAGIONE?PARTE2...82 PASSO1:AGGIUNGIAMOLATESTATA.............................................................................................. 83 PASSO2:INSERIAMOILTESTONELLAPAGINA.................................................................................... 85 PASSO3:ADESSOTOCCAALFOOTER............................................................................................... 87 PASSO4:LANAVIGAZIONEDELSITO................................................................................................ 94 Eadesso,sottoconilcodice!.............................................................................................. 96 Lostatohoverdellanavigazione........................................................................................ 98 STATODIAVANZAMENTODELPROGETTO........................................................................................ 100 COMEINDICIZZAREUNSITOSENZAESSEREUNESPERTOSEO?..........................................102 CHEDIFFERENZACTRAINDICIZZAZIONEEPOSIZIONAMENTO? ...........................................................103 QUALISONOIPRINCIPALIASPETTIDAPRENDEREINCONSIDERAZIONEQUANDOSIOTTIMIZZAUNSITOPER OTTENEREUNBUONPOSIZIONAMENTO?........................................................................................ 104 COMEUTILIZZARECORRETTAMENTEILTAGTITLE?............................................................................104 Consigli............................................................................................................................. 105 CHECOSASONOIMETATAGECOMEUTILIZZARLI? ...........................................................................105 CHEIMPORTANZAHAILCONTENUTODELLANOSTRAPAGINA? .............................................................106 Consigli............................................................................................................................. 107 CHECOSASONOGLIHEADINGTAGSECOMEUTILIZZARLICORRETTAMENTE? ..........................................108 Consigli............................................................................................................................. 109 LATTRIBUTOALTDELLEIMMAGINIUTILEAIFINIDELPOSIZIONAMENTO?...........................................109 Caso1:Immaginiconcollegamentoipertestuale .............................................................109 Caso2:Immaginisenzacollegamentoipertestuale.........................................................109 CONCLUSIONI............................................................................................................................ 109 COMEASSICURARSIDINONAVERCOMMESSOERRORIPRIMADILANCIAREILSITO?........110 CHECOSADEVOCONTROLLAREPRIMADIPUBBLICAREILSITOONLINE?.................................................111 Analisidelcontenuto........................................................................................................ 111 Ottimizzazionemotoridiricerca....................................................................................... 111 Validazionedelcodice...................................................................................................... 112 Testdiaccessibilit........................................................................................................... 112 TestdifunzionalitsubrowsereSistemiOperatividiversi...............................................113 Testdifunzionalitsuimoduli.......................................................................................... 113 Analisidelleprestazionidelsito........................................................................................ 113 Ultimiaccorgimenti.......................................................................................................... 114 CONCLUSIONI............................................................................................................................ 114 CONSIDERAZIONIFINALI.............................................................................................................. 114 INDICEANALITICO.............................................................................................................116
Nullaavvienepercaso.Ciascunoilriverberodell'altronelflussodell'universo. [LaProfeziadiCelestinoJamesRedfield]
Introduzione
Questaguidacheticondurrtraclienti,preventivi,bozze,echipinehapinemetta puessereunvalidosupportoperlarealizzazionediunsitoweb, soprattutto se sei alle prime armi e vuoi acquisire nuove nozioni teoriche o imparare a lavorare in modo organizzato. Se invece sei un professionista, pu essere sempre spunto di crescita scoprire diverse tecnichedilavoroeconfrontarsiconesse.
Qualiargomentisarannotrattati?
Noncunargomentospecificoelimitato:sispazierunposututtiquellichesonoglistep chegeneralmentevengonoeseguitinellosviluppodiunprogettoweb,dalprimoincontro conilclienteelaconseguentestesuradelbrief,finoalcontrollofinaledaeffettuareprima dimettereilsitoonlineelanciarloufficialmente.Preventivo,contratto,ispirazione,design, sviluppo, indicizzazione unampia e completa panoramica su tutto ci che devi sapere prima,duranteedopolarealizzazionediunsito. Ovviamente, data la complessit e la vastit di alcuni argomenti trattati in questa guida (comeadesempiolafasedisviluppoegestionedelprogetto,lottimizzazioneperimotori diricerca,larchitetturadellinformazione,ecc)nonstatopossibileapprofondireinmodo dettagliato e totale ogni singolo argomento. In alcuni casi abbiamo cercato di segnalare materialediapprofondimentoerisorseesterne,inmododarendertimegliocomprensibili certipassaggidellanostraguida;perilrestoabbiamogiincantiereilproseguodiquesto eBook dove contiamo di analizzare nello specifico anche ci che in questa sede non abbiamotrattatooabbiamopotutoesporresolosuperficialmente. Ti auguriamo una buona lettura e ti invitiamo a contattarci per qualsiasi dubbio o informazione,segnalareeventualiimprecisioniosuggeriredeimiglioramenti. L indirizzocuiscrivere:info@yourinspirationweb.com.
Capitolo
Comecapireleesigenzedel clientealprimoincontro?
Iniziamoquestaguidaconlargomentocuoredelnostroprogetto: conoscere e capire le esigenze del cliente. Per conseguire un buon lavoro infatti fondamentale capire chi abbiamodifronteequalisonolesuerichiesteinmododapotersvolgeresuccessivamente un minuzioso lavoro di analisi per ogni informazione utile pervenutaci. Uno strumento essenzialepersvolgereedocumentareinmodocostruttivolanalisidiunclienteilbrief.
Checosilbrief?
la base di ogni buon progetto: si tratta di un documento contenente informazioni dettagliate sul tuo cliente,raccoltenellafasediincontroconloscopodiotteneretuttii datiegliinputnecessariperpianificarealmeglioiltuolavoro. Il brief inizia con lincontro del cliente, fase fondamentale per la riuscita di un buon progetto.Questoconcetto,nonostantepossasembrareovvioaipi,ancorasconosciutoa molti.Peresempioachi,sbagliando,sibuttaacapofittonellarealizzazionedibozzeenella stesuradipreventivipurignorandodicosanecessitailclientenellospecifico. Lavorare cos quasi sempre inutile: molto improbabile riuscire a soddisfare le esigenzedeltuoclienteagendopertentativiesenzaavereunvalidopuntodiriferimento. Immaginadiesserefermoinunportoqualsiasiconlatuabarcaeaduncertopuntodecidi disalparesenzaaverelaminimaideadellametadaraggiungere. Quanteprobabilitcisonoche,andandoacasosenzaunaprecisarottadaseguire,tivadaa schiantare sugli scogli? Quante possibilit ci sono di arrivare in un porto che magari peggiore rispetto a quello da dove sei partito? Altissime. E per svariati motivi. Il motivo principale perch non sai esattamente cosa vuoi e se non lo sai, hai zero possibilit di realizzarlo. Questoquellocuivaincontrochilavorainmododisorganizzato.
Checosavuoleiltuocliente?
Nel mondo ideale il cliente verrebbe da te con piglio deciso e saprebbe indicarti velocementedicosahabisogno.Manellarealt,spessoevolentieriilclienteconfusoeha le idee poco chiare su ci che gli occorre. In questo caso tocca a te ascoltarlo e condurlo versolesoluzionipiadatteperentrambi. Secqualcosadipocochiaro,poniglidomandesemplicieconcise:sarpifacile,perte, raccoglieredatiutilieallostessotempoeviteraialclientelafrustrantesensazionedinon esserecompreso.
Qualisonoleinformazionicheilclientetidevedare?
Sta a te cogliere le esigenze del tuo cliente e, sulla base di queste, indirizzarlo verso la giustasoluzione.
Tienicontocheilbriefdovrrispondereaiseguentiinterrogativi: 1. 2. 3. Achi:Qualiltargetacuivuolerivolgersi? Checosa:Checosasiproponealtarget?(Quallofferta?) Come: Come si pu dimostrare che lofferta valida? Quali sono le prove a sostegnodiquantosistadicendo? Qualilconcettochiavedacomunicarealtarget?
4.
Una volta ottenute le informazioni basilari, puoi entrare nel dettaglio. Puoi, cio, cominciareacondividereletueideeeadargomentareillavorodasvolgere. Puessereutile,inquestocontesto, visionare insieme al cliente eventuali siti dei suoi concorrenti:questocontribuiradartiunideasuisuoigustiesteticie tidarlospunto perinterrogarlosulleventualeaspettograficochedovravereilsuosito: Hadeicoloriaziendalidarispettare(vedilogo,brochure,insegne)? Hadellepreferenzeperquantoriguardaicolori? Desideraqualcheelementograficoinparticolare? Desideraunagalleriafotograficaoqualcheeffettoanimato? Fornirluiimaterialidainserire(comeadesempioleimmagini,illogoeitesti)?
Questoprocessotidarloccasionedicapiremeglioisuoibisogni.
Eccounapossibilestrutturadelnostrobriefalterminedellincontro:
Intestazione
Idettaglidellincontro:dataeluogo,titolodelprogetto,nomieruolodeipartecipanti.
Background
Chiilclienteechetipodiattivitsvolge.
Obiettivi
Cheobiettivisiponeilnostrocliente?Vendereisuoiprodotti?Ottenerevisibilit? Pubblicizzareisuoiservizi?
Target
Aqualetargetdesiderarivolgersi?Chisarannoipotenzialiclientie/ofruitoridel servizio?
Sintesi
Esattamente,qualilserviziochestarichiedendoepercuitihacontattato?
Parolechiave
Inquestasezionevannoannotatealcuneparolechiavechesecondoteriassumonoe identificanoinmodoconcisoilclienteelasuaattivit.Peresempio,seilnostrocliente fosseiltitolarediunadittadiautotrasporti,qualipotrebberoessereleparolechiave? Celerit,sicurezza,efficienza,stabilit.
Puntichiave
Sonoidettagliessenzialichedevonoesserenecessariamenteannotati. Peresempio:icoloriaziendali,illogo,leimmaginidautilizzare,lostiledelcliente.
Conclusioni
Adessosaicosasiaspettadateiltuoclienteehaiunideaabbastanzachiarasullavoroche tistatorichiesto. Primadistilareilpreventivo,deviprendertiunpoditempo. Ti assicuro che ci che a prima vista pu sembrare un facile lavoro di poche ore, pu rivelarsi unattivit lunga e tediosa: vuoi evitare, allora, di rimetterci e di lavorare in modoconfuso? Selarispostas,ticonsigliodileggereilprossimocapitolo:comecalcolarecostietempi diconsegnadiunprogettoweb?
Capitolo
Comecalcolarecostietempidi consegnadiunprogettoweb?
Dopoaverdefinitoconilclientequellachedovressereinlineadimassima la struttura generale e gli obiettivi del sito web (tipologia dei contenuti, numero di pagine, etc.) arrivailmomentodirealizzarneilpreventivodettagliato,ilqualedovrincludereanche costietempidiconsegnadellavorochecistatorichiesto.
Comecalcolarecostietempidiconsegnaevitandodiscriverecifre senzasenso?
Ilmodopicorrettoquellodilavorareperprogetti. La realizzazione di un sito web non un compito che si esegue con semplicit come qualcuno erroneamente potrebbe pensare, ma si tratta di un lavoro complesso che per essere realizzato bene necessita di un team di lavoro con diverse figure professionali coinvolte,ognunadellequaliricopreunospecificoruolonellarealizzazionedelprogetto. Analizziamo brevemente alcune delle figure professionali che possono intervenire nel processodisviluppo. Il project manager: chi si occuperdella gestione del progetto coordinando il team di lavoro, stabilendone il budget necessario, il numero delle risorse coinvolte,costietempidirealizzazione. Il team di sviluppo: che in base alla complessit del progetto pu essere compostoda: Il web concept designer: il compito del concept quello di dare una forma al progetto finale a partire dallidea, dalla strategia di comunicazioneedagliobiettividibusiness. Il web designer:coluicheprogettailsitonelsuocomplesso,nedecide laspetto,linterfacciautente,icolori,lalberoprincipaledinavigazione. Ilgrafico:suspecifichedatedalwebdesignerodalclientesioccupadella realizzazione del layout delle pagine e della grafica in generale che costituir il sito web. Il ruolo del grafico quello di trasmettere al visitatore, attraverso le immagini, le emozioni oggetto della comunicazione. Ilwebdeveloper:ilrealizzatoredellepaginedelsitoweb,ilsuoruolo di trasformare le varie specifiche del web designer in pagine web navigabili utilizzando il linguaggio specifico del web, XHTML, CSS, linguaggidi programmazione ASP,PHP,JSP, SQL, persvilupparescript e codificare le parti dinamiche che consentono una maggiore interattivit deisiti.
Il team dei contenuti:trasformagliappuntifornitidalcliente,intestoscrittonel linguaggio di chi si presume sar il visitatore e nella forma che lazienda ritiene necessariaperlatipologiadisito. YourInspirationWeb |http://www.yourinspirationweb.com/ 19
Il team del marketing:halaresponsabilitdidarevisibilitalsito,curandoche vi sia il traffico e lattinenza necessaria al raggiungimento degli obiettivi. Intervienefindallefasidiprogettazioneesviluppoassistendoilwebdesigner,il graficoelosviluppatore. WebMarketingStrategist:Proponeerealizzaprogettidicomunicazione ediserviziWebintuttelesuecomponenti:businessidea,posizionamento del prodotto/servizio, scelte tecnologiche, individuazione e chiusura partnership. Monitoraggio e aggiornamento continuo dei servizi offerti dalsito/portale.
Le figure professionali che partecipano alla progettazione variano in funzione della complessitdelprogettoedelbudgetaessodedicato. Per la realizzazione di piccoli lavori che hanno budget limitati spesso una persona pu ricoprirepiruolicontemporaneamente. Dopo aver dato un rapido sguardo a quelle che sono le figure professionali che possono essere coinvolte nello sviluppo del nostro sito web, indossiamo i panni di una di esse ed entriamonelruolodel Project Manager:iniziamoquindiconladefinizionediobiettivie compiti e la costruzione di programmi, per chiarire le fasi temporali in cui si dovranno realizzareicompitiedindividuareleresponsabilit. Il nostro cliente ci ha richiesto di realizzare non solo il sito web ma ha acquistato anche ulterioriserviziaggiuntivicomeilserviziodicopywritingeilserviziodiindicizzazionedel sito.
Gliaspettiprincipalidelpianodiprogetto
Gliaspettiprincipalidelpianodiprogettosonorappresentatida: 1. obiettivi del progetto:checosadeveesserefatto(nelnostrocasolosviluppodi unsitoweb); attivit da svolgere: come deve essere fatto (quali sono nel dettaglio tutte le attivitchedevonoessereeseguiteperportareatermineilprogetto); competenze necessarie: quali conoscenze e capacit verranno impiegate(quali figureprofessionalisarannocoinvoltenelprogetto); definizione e assegnazione: chi deve fare cosa (assegnare ogni risorsa alle attivitchedovrsvolgere);
2.
3.
4.
5.
scheduling del progetto: quando si deve fare (definire le fasi temporali in cui ognisingolaattivitdovresseresvolta); definizione e assegnazione delle risorse economiche di progetto: quanto costa(calcolareilcostodelprogettosullabasedellerisorsecoinvolteedeltempo necessarioperportareatermineilprogetto); sistema di controllo: come verificare (verifica dello stato di avanzamento del progetto);
6.
7.
Adessopassiamoallatopratico:ovviocheognunadiquestefasinonpuesseregestitain modomanuale,altrimentisaremmosempreinbaliadellerroreumanoedegliimprevisti. Cioccorrequindiunvalidostrumentodisupportocheautomatizziilpipossibileognifase egestiscainmodoordinatotuttoilprogetto. Online sono reperibili alcuni software open source(un valido esempio pu essere Planner 6 )chepossonorivelarsidigrandeaiutonellagestionedeiprogetti.Nelnostrocaso invece adopereremo Microsoft Project poich siamo soliti utilizzarlo per i nostri piani di lavoroeneabbiamopidimestichezza. Quellochesegueunoscreencastcompletosullagestionedellosviluppodiunsitowebper uncliente.Tifarcapirecomesiagratificanteeproficuolavorareinmodostrutturatoeti spiegherinmododettagliatocomeutilizzareilsoftware.
1videoIntroduzioneeinserimentodialcuneattivit(929)
Dopounabreveintroduzionevedraicomeinserirenelprogrammaalcunedelleattivitche dovrannoesseresvolte. http://nandop.blip.tv/file/2154320/
2VideoInserimentocompletodelleattivitchecompongonoilprogetto (1632)
In questo video terminerai di inserire tutte le singole attivit che compongono il tuo progetto.Ticonsigliodiseguirlosevuoisaperequalisono,neldettaglio,tuttelefasichesi susseguononellosviluppodiunsitoweb.Altrimentipuoipassaredirettamentealvideo3, che ti mostrer come aggiungere nel tuo progetto le varie risorse che interverranno nel processodisviluppoecomeassegnareloroleprimeattivitdasvolgere. http://nandop.blip.tv/file/2154684/
UrlperildownloaddiPlanner:http://live.gnome.org/Planner/Downloads YourInspirationWeb |http://www.yourinspirationweb.com/ 21
3VideoAggiuntadellerisorseeassegnazionedelleattivitdasvolgere (715)
Una volta inserite tutte le attivit, comincia a inserire le risorse e assegna a ogni singola attivitlarisorsapredispostaalsuosvolgimento. http://nandop.blip.tv/file/2154728/
4VideoAssegnazionecompletadiogniattivit(524)
Adessofiniraidiassegnareleattivitrimanenti.Sehaicapitocomesiassegnanoleattivit allesingolerisorseenontiinteressavedereilresto,puoipassarealvideo5incuistabilirai la durata di ogni attivit in modo che il software possa calcolarne il costo in modo automatico. http://nandop.blip.tv/file/2154858/
5VideoAssegnazionedelladuratadellesingoleattivit(1047)
In questo video assegnerai ad ogni attivit un lasso di tempo entro il quale deve essere svolta. Questo ti permetter di prevedere quanto tempo richiede lo svolgimento del progettoe,sullabasedeltempo,qualilsuocosto. http://nandop.blip.tv/file/2154854/
6VideoCollegamentitralesingoleattivit(1246)
Lultimo video ti mostrer come collegare tra di loro ogni attivit: quali sono le attivit critichechedevonoesserecompletateprimadipassareaquellesuccessive,equaliquelle chepossonoessererealizzatecontemporaneamente. http://nandop.blip.tv/file/2155160/
Conclusioni
Abbiamofinalmentedatounarispostaaquellacheeralanostradomandainiziale,adesso sappiamo come calcolare il costo reale e i relativi tempi di consegna di un progetto web evitandodicommettereerroriotralasciarequalcheaspettofondamentale. Nel prossimo capitolo vedremo un argomento sempre attuale e di grande rilievo nello sviluppodiunsitoweb:comeevitarefuturiripensamentidapartedelcliente?
Capitolo
Comeevitarefuturiripensamenti dapartedelcliente?
Dopoaverdefinitoconilclientequalisonolesueesigenzeecosaintenderealizzarenello specifico,siamoriuscitifinalmenteadeterminarnesiailcostodapreventivarecheirelativi tempi di consegna. Ora arrivato il momento di presentargli il tutto per laccettazione definitivadellavoro. Macomepossotutelarmidaeventualifuturiripensamentidapartedelcliente? Tutti i servizi offerti dalla tua Web Agency o, nel caso di freelance, direttamente da te titolaredipartitaIva,devonoesserefornitisullabasediunrapportoprofessionaletrate eilcliente.
Capitasemprepispessodiimbattersiin clienti che ci ripensano, che non pagano,che avanzano scuse sulla qualit del tuo prodotto e chi pi ne ha pi ne metta. Per evitare equivoci ed eventuali incomprensioni essenziale che il cliente approvi ogni punto del progetto e che tu possa contare su una contrattualistica sicura e affidabile, relativamente ai vari servizi offerti (siano essi hosting, sviluppo sito web, manutenzione sitoweb,ecc),costipreventivati,modalitdipagamento,tempidirealizzazione,propriet ecopyright,durataedirittodirecesso,ecc. Evita quindi di prendere accordi sulla fiducia, limitandoti a lavorare sulla base di consensiverbali:ognieventualeaccordopresoconiltuoclientedeveesseresempremesso nerosubiancoefirmatodaentrambeleparti. Sarebbebuonanormarivolgersiaun consulente contrattualeperfarsi predisporre un contratto standard,contuttelecondizionigeneralieunanotadilavorochedescrivain sintesi le caratteristiche del sito e i relativi tempi di realizzazione. Ovviamente il contratto standard andr poi adattato di volta in volta sulla base delleffettivo lavoro richiestodalcliente.
Realizzazionesitoweb:ilcontrattodivenditapersonalizzabile
Se non hai lapossibilit economicadi rivolgertiad un consulente contrattualeche curi personalmentelastesuradeltuocontrattodivenditastandard,inretepossibiletrovare un modello di contratto di vendita personalizzabile open source: OSCON 7 , che come riportatosulsito,risultaessereunodei contratti di venditapidiffusiinItalia,utilizzato dal2004dapiccoleegrandiaziende. I facsimili sono scaricabili gratuitamente dalla sezione download 8 e sono facilmente personalizzabili. Ilpacchettocontiene: Uncontrattoperlavenditadisoftware/sitiweb/servizi. Unanotadilavoro. Unaricevutaperprestazionioccasionali. Unacartaintestata.
7 8
http://www.oscon.it/ http://www.oscon.it/download YourInspirationWeb |http://www.yourinspirationweb.com/ 25
Se hai bisogno di aiuto per una corretta compilazione puoi scrivere una domanda sul forum 9 ocercaretraimessaggigipubblicati.
Conclusioni
In questo capitolo abbiamo visto quanto sia fondamentale fare affidamento su una contrattualisticasicuraalfinedi tutelare il tuo lavoro.Haiinoltrefattolaconoscenzadi Oscon,un contratto open sourcechepuoifacilmentepersonalizzareeusareperregolare irapporticoniltuocliente. Come puoi vedere dallimmagine sotto, sulla base del progetto realizzato nel capitolo precedenteadessopossibilecontrollarnelostatodiavanzamentodeilavori:conlafirma del contratto la nostra percentuale di completamento del progetto ha raggiunto quota 16%.
http://www.oscon.it/forum/ YourInspirationWeb |http://www.yourinspirationweb.com/ 26
Capitolo
Comesviluppareeorganizzarela strutturadiunsitoweb?
Nel capitolo precedente abbiamo raggiunto un ottimo traguardo. Il cliente ha accettato il nostropreventivo,firmatoilcontrattoecihacommissionatoillavoro. La prossima fase delicata e fondamentale per il nostro progetto: dobbiamo, infatti, realizzareilconcepteprogettarelastrutturadelsitoweb.
A svolgere questo incarico in genere la figura del Web Concept Designer che come abbiamovistonelsecondocapitolohailcompitodidareunaformaalprogettofinalea partiredallidea,dallastrategiadicomunicazioneedagliobiettividibusiness. CoordinandoilprogettoattraversolusodellasintassiedellasemanticadiInternet,ilWeb ConceptDesignerdefiniscelelineeguidaperlarchitetturadellinformazionedelsitoe necuraanchelimpostazionegraficaestrategicadeicontenuti.
DefinizionedelConcept
Questa attivit si riflette sullintero progetto del sito, dalla creazione dellalbero di navigazione alla fase produttiva e di aggiornamento, garantendo cos la coerenza comunicativaedespressiva. Pertanto studiando nel dettaglio il contenuto del Brief redattodurante la prima fase di incontri preliminari con il cliente sar necessario concepire quali sono gli obiettivi di business del progetto e definire quale strategia di comunicazione utilizzare per raggiungeretaliobiettivi. Da questo punto, proseguiremo aiutandoci con un esempio pratico: il tuo cliente il direttorediunascuolamaterna,conlesigenzadirappresentareilsuoasilosulweb. Graziealbriefsaiche:lobiettivodeltuoclientediesserefacilmenterintracciabileanche sulwebdaeventualinuoviclientiedidareaigenitorideibambinilapossibilitdiessere costantemente aggiornati sui programmi dellasilo (attivit scolastiche, mensa, ecc.). Il targetcuisirivolgesono,ovviamente,lefamiglie. Inoltre, ora che conosci le esigenze del tuo cliente e il suo target, puoi concentrarti sugli elementigraficieconcettualisucui,inunsecondotempo,dovrlavorareilgrafico. Possiamo stabilire i colori base da utilizzare nel progetto: ovviamente, giacch lattivit riguardailmondodeibambini,sarconsigliabilesceglierecolorivivacieaccesi.Nelcaso specifico, poich il logo dellasilo di colore rosso, potresti orientarti verso il rosso, larancione,ilgiallo. Le immagini dovranno richiamare i concetti di gioco e di allegria. Selezioneremo quindiimmaginiappropriateaquestoscopo:bambinichegiocano,cheridonoecheinogni casomanifestanosensazionipositiveerassicuranti. Sidovrtrasmetterelideachelaziendasiadegnadifiducia,seriaeattendibilemacheal tempo stesso non rinunci allallegria e alla vivacit, attributi essenziali per unattivita strettocontattoconilmondoinfantile. YourInspirationWeb |http://www.yourinspirationweb.com/ 29
Infine, unanalisi dei siti web dei maggiori competitordeltuoclienteputornartiutile per osservare quali strategie comunicative stiano adoperando e se tra queste ce n qualcunaparticolarmentedegnadinotaperiltuoprogetto. Dopo di che si passa a delineare quella che sar la struttura del sito e larchitettura delleinformazioni.
Macoslastrutturadiunsitointernet?
Per struttura di un sito web sintende la forma gerarchica che assumono i suoi collegamentiipertestualiapartiredallapaginaprincipale. Lastrutturaorganizzaicontenutidapresentareaiclientiinpilivellidinavigazionee puaverevarieampiezzeeprofondit. Per approfondire questo argomento ti consiglio la lettura di questo articolo 10 , in cui MaurizioBoscarolanalizzairisultatidiunaricerca 11 condottadaMichaelL.Bernard.
Echecoslarchitetturadellinformazione?
Larchitettura dellinformazione(odelleinformazioni)svolgeunruolofondamentalein ogniapplicazioneweb:permetteinfatti lorganizzazione logica e semantica dei dati e dei contenuti destinati alla fruizione e rende il sistema digitale usabile e facilmente accessibiledallutentefinale. Sevuoiapprofondirelargomentoriguardantelarchitetturadellinformazionetiinvitoa leggerelottimaguida 12 realizzatadaEmanuelaGugnelliperhtml.it.
Chedifferenzactrastrutturaearchitetturadellinformazione?
La struttura di un sito la forma gerarchica dellalbero composto dai collegamenti ipertestuali che partono dalla sua pagina principale. Larchitettura dellinformazione invecepermettedistabiliredeicollegamentitrainformazioniappartenentiadiversirami dellalberogerarchicoinmododaaccorciarneledistanze.
10 11
http://www.usabile.it/392009.htm http://www.surl.org/usabilitynews/42/hypertext.asp 12 http://webdesign.html.it/guide/leggi/44/guidaarchitetturadellinformazione/ YourInspirationWeb |http://www.yourinspirationweb.com/ 30
Torniamoalnostrocasopratico
Il web concept designer deve conoscere tutti gli standard della navigazione, al fine di rendereilpiagibilepossibileilsitoweballutenzachelovisiter. Inpratica,loscopodellanavigazionedi: farsichegliutentipossanotrovarevelocementeilcontenutochecercano; permettereagliutentidispostarsivelocementeeinmodologicotralepaginedel sito; chiarireagliutentiinqualesezionedelsitositrovanodurantelanavigazione;
Nelprogettochestairealizzando,sullabasedeicontenutichedovrannoessereinseritinel sito,lastrutturarisultalaseguente:
Dalla paginaprincipale (home) gli utenti potrannoaccedere direttamente alle tre sezioni basilaridelsito:lepagineasilo,attivitecontatti. Come puoi notare, la pagina asilo racchiude, al suo interno, due ulteriori pagine: StrutturaeIl personale;nellostessomodoanchedallapaginaattivitdiscendonoaltre trepagine:Attivitdidattiche,MensaeAttivitdiintrattenimento. Questasuddivisionepermetteagliutentiditrovareconfacilitcichestannocercando.
oradirealizzareilwireframe
Unavoltadefiniti struttura del sito e architettura dellinformazionesipupassarealla realizzazionedelWireframe 13 dapresentarealcliente che definisce in modo grafico la strutturadelsito.
Conclusioni
Perunsitovetrinadi4/5paginegeneralmentesemplicedefinirequellachepuesserela suastruttura,mapiilnumerodellepagineedeicontenutidapresentareaumentaetanto pidiventadifondamentaleimportanzaquestapartedelprogetto. Con questo capitolo terminiamo la fase teorica del nostro progetto.Il pi delle volte questa fase ignorata o sottovalutata da chi alle prime armi, ci auguriamo che questi primiquattrocapitolisianoriuscitiatrasmettertenelimportanza. Come puoi vedere dallimmagine sotto, dopo laccettazione del wireframe da parte del cliente,lostatodiavanzamentodelnostroprogettoharaggiuntoil23%.
13
http://it.wikipedia.org/wiki/Wireframe YourInspirationWeb |http://www.yourinspirationweb.com/ 32
A questo punto possiamo procedere con le due attivit successive: la prima riguarda lo sviluppodeicontenuti,argomentocheperilmomentononsartrattatoinquestolibro,ela seconda,chetratteremonelprossimocapitolo,riguardaildisegnodellabozzagrafica.
Capitolo
Cometrovarelispirazionee disegnareillayoutdiunsitoweb?
Sei arrivato a un punto cruciale del tuo progetto: la realizzazione grafica del layout. Disegnare un sito non per niente semplice e si deve avere a che fare con numerose incognite: trovare lispirazione, saperla tradurre graficamente, trovare il giusto compromessotraesteticaefunzionalit. Cominciamopergradi.
Cichehaiinmano,oltrealconcepteallastrutturadiquellochedovressereilsito,il seguentewireframe,realizzatonelprecedentecapitolo:
Sulla base di questo, e delle eventuali indicazioni su colori e immagini che ti sono state fornite,devirealizzareunagraficaefficienteegradevole.Dadoveiniziare?
Cerca(etrova)lagiustaispirazione
Loschermobiancoha,dasempre,terrorizzatotutti.Grandiprofessionisticompresi.Senon hailaminimaideadidoveiniziare,nonandarenelpanico.Iltortuosoprocessodi ricerca dellispirazionepuesseresuddivisointrefasi.Vediamoleinsieme.
Fase1:Cerca
La nascita delle numerose css gallery ha portato a tutti i grafici un notevole vantaggio: accedere ad un numero spropositato di layout su cui gettare uno sguardo e da cui imparare.Inutileelencartituttelegallery:cenesonouninfinit,esonoormaipichenote. Ti consiglio per di fare un salto su questa directory 14 , dove puoi trovare una lista abbastanza esauriente di quelle pi aggiornate. Mentre curiosi nelle gallery, a intuito
14
http://www.thecssgallerylist.com/ YourInspirationWeb |http://www.yourinspirationweb.com/ 35
troveraiqualcosachetisembraidoneoointeressanteperiltuoprogetto:colori,immagini, concetti,testi.Prendinotadituttocichesentipiidoneoalletueesigenze. Il consiglio:nonperderetroppotempoinquestafase.Potrestiinfatti influenzare il tuo disegno, con lunico risultato di produrre una grafica simile a quella di, e la regola generalechequandosicercadiricalcarelostilediqualcunaltro,sifiniscequasisempre conilrealizzarneunabruttacopia. In linea di massima, ti consiglio di buttare immediatamente gi qualcosa. Che sia anche semplicemente uno schizzo senza capo n coda, ti permetter di superare lansia da vuotoediriordinareleidee.
Fase2:Esprimitestessoneidettagli
Per esperienza posso dirti che, una volta trovato il giusto input, il pi fatto. Una volta messa gi la grafica della struttura, dovrai lavorare sulla cura dei dettagli. I font e la tipografia in genere, il posizionamento delle immagini e dei contenuti, gli arricchimenti estetici: ognuno di questi elementi contribuir a rendere il tuo lavoro particolareed esteticamente bello.Questafasenondasottovalutare:scegliereilgiusto font 15 , per esempio, pu portare via molto tempo e rivelarsi unattivit abbastanza complessa.
Fase3:Imponitiunapausa
Pu essere veramente frustrante aspettare unidea che non vuole saperne di arrivare. A questopunto,inutilerimanereimbronciatidavantialloschermo,martoriandosilamente. Bando agli indugi e ai tempi consegna: prenditi una pausa. Spegni il computer, fai una passeggiata,dormi, fai unadoccia,telefona a qualcuno. Qualsiasi attivit va bene, a patto chesiacorroboranteechenonabbianienteachefareconilwebdesign.Enonsentirtiin colpasenonrimaniancoratoalcomputer24oresu24:ungraficodevesaperaccettareche lintuizionegiustahaisuoitempi,sianoessimezzoraoduesettimane.
Lispirazionearrivata,eora?
Sefinalmentelatuafantasiahadecisodidarsidafare,cominciaariportaregraficamentele tueideeattraversounqualsiasiprogrammadigrafica(nelnostrocasoPhotoshop). Andiamo quindi adaprire il programma,impostandoledimensioni deldocumentoauna larghezzadi1680pxeunaltezzadi1200px,adunarisoluzionedi72dpi.
http://www.yourinspirationweb.com/2009/05/15/qualifontutilizzarenellosviluppodiun sitoweb/ YourInspirationWeb |http://www.yourinspirationweb.com/ 36

15
Anche se il sito sar sviluppato graficamente con una larghezza di 1680px, in modo che anche nei monitor 21 widescreen abbia una buona resa estetica, essenziale limitare i contenutiprincipaliinunadimensionedi960px,coscheanchechinavigaconrisoluzioni ancorapibasse(tenendocontocheormaisoloil5% 16 degliutentiutilizzarisoluzionipi bassedi1024768px)possavisualizzareilsitosenzadoverricorrerealfastidiososcrolling orizzontaledellafinestradelbrowser. Ilcalcolodafarefacileerapido:dai1680pxtotalitogliamoi960pxdiquellochesaril contenitore del nostro sito, e dividiamo il resto per due in modo che il contenitore sia centrato.Persegnareilimiti,inseriscineldocumentodueguide.
16
http://www.w3counter.com/globalstats.php YourInspirationWeb |http://www.yourinspirationweb.com/ 37
Cominciamo a dare un tocco di colore alla nostra pagina. Con lo strumento rettangolo disegniamoduesezionilaterali:ladestradi426pxelasinistradi654px.Datocheicolori sucuidobbiamoorientarcisonocoloricaldicomelarancioneeilrosso,coloriamoqueste sezionidiarancione(#ff7c0b;).
Percreareungradevolecontrasto,nelrettangolodidestra,invecedilimitarcialcoloredi sfondo,inseriamounpatterngranulosoeffettocarta. YourInspirationWeb |http://www.yourinspirationweb.com/ 38
Per applicare il pattern, facciamo doppio click sul livello del rettangolo per aprire la finestradeglistilidilivelloeselezioniamolopzioneSovrapposizionepattern.
Otteniamocosquestorisultato:
A questo punto disegniamo, nel centro della sezione di colore bianco, un rettangolo arrotondato (raggio 20) di 560px di larghezza e 232px di altezza. Questa sar la nostra testata,incuiinseriremounimmagineadattaarappresentarelattivitdelnostrocliente.
Il consiglio: se stai iniziando adesso a lavorare con Photoshop, abituati fin da subito a rinominare i livelli e a tenerli ordinati in gruppi: in un progetto grafico si possono sviluppare centinaia di livelli, e se non li organizzi fin dallinizio corri il rischio di non saperepidovemetterelemani.
Prima di proseguire, andiamo in cerca delle immagini da usare nel nostro progetto. Normalmente acquisto tutte le immagini su Fotolia 17 dove, con pochi euro, possibile trovare foto ed immagini ad alta risoluzione. Ti ricordo che, come gi scritto in questo articolo 18 , sconsiglio vivamente lutilizzo di immagini di scarsa qualit, oppure prese su googleimage. Come risultato della nostra ricerca abbiamo selezionato le seguenti immagini che, come definito nel brief, raffigurano bambini che giocano, si divertono, e nel generale immagini legatealmondodellinfanzia.
Ancheperlasceltadelleimmagini,fidatideltuoistintoeorientativersoimmaginiche,per ilorocoloriosoggetti,sentidiritenereadatte.Sceglineilmaggiornumeropossibile:inun secondotempofaraiunacernitadiquellemigliorichepotraiusarenelprogettografico. Aquestopuntodecidiamodiinserirelafotodelbambinoconilpupazzettonelrettangolo della testata. Innanzitutto dobbiamo ridimensionare la foto in modo che abbia le stesse dimensioni del rettangolo (o qualche pixel di pi, tanto per essere certi). Una volta ridimensionataclicchiamosu Modifica >> Definisci pattern esalviamolafotocomenuovo pattern,chechiameremobambinotestata.
17 18
http://it.fotolia.com/ http://www.yourinspirationweb.com/2009/05/20/comeevitaredirealizzaresitiamatoriali/ YourInspirationWeb |http://www.yourinspirationweb.com/ 41
Per applicare il pattern torniamo al nostro documento iniziale, apriamo la finestra degli stilidilivellodellivellocontenenteilrettangolodellatestataescegliamo sovrapposizione pattern. Dallelenco dei pattern disponibile selezioniamo quello appena creato e lo applichiamo.
Come vedi limmagine scelta non solo esprime i concetti basilari dellattivit del cliente, mailpupazzettodelbambinorichiamaancheilcolorearancionesceltoperilbackground. Ricordaticherispettareedevidenziareigiustiabbinamentidicolorepuesserelachiave delsuccessodeltuolayout.
Inseriamoqualcheimmaginenellayout
Labambinachedipingesullosfondoarancionelaintegriamosullasezionelateralesinistra, cos da creare un effetto spontaneo e originale: sembrer che la bambina stia, con il suo pennello,colorandolosfondodelnostrosito.Perarricchireiltuttoaggiungiamo,condei pennelli doodles facilmente reperibili in rete, un po di scarabocchi e disegni infantili. Casette, fiorellini, uccellini. Ricordati che il sito di un asilo e che, quindi, puoi anche esagerarecondisegniecolori. Nellangolo destro inseriamo infine la bambina con il cartellone: pu tornarci utile in un secondomomento.
Perammorbidirelaperturaelachiusuradelsito,aggiungiamoqualchenuvolettabianca, che arricchir lestetica della pagina e ci dar la possibilit di creare, nella sezione superiore, uno spazio vuoto dove poter inserire il logo dellasilo. (Ricordati che il logo devesempreesserebenvisibile,inaltoepossibilmenteposizionatoasinistra.) Perinserirelenuvolepossiamosceglieretradiverseopzioni:chihapiconfidenzaconil tantotemuto strumento pennapudisegnarlemanualmente,altrimentisonodisponibiliin rete diverse brush o shape che possono venirti in aiuto. Nel nostrocaso ho usatoqueste brush 19 .Vicinoallatestadisegniamounanuvolettapilarga,incuiinseriamoillogo.
19
http://www.bullmanu.com/public/wordpress/?p=2851 YourInspirationWeb |http://www.yourinspirationweb.com/ 43
Curiamolatipografia
Il nostro sito comincia a prendere forma. Inseriamo un po di contenuti, con lausilio del classicoLoremIpsum.Comefonthosceltounverdana12px,conuninterlineadi21px. Il consiglio:nontilimitareacopia/incollareil lorem ipsum,maformattailtestoinserito con un po di grassetti, una lista, o suddividendolo in paragrafi, cos da emulare il pi possibilecomesarilsitounavoltainseritiitestireali. Il risultato soddisfacente? La lettura chiara? I testi hanno i giusti margini e allineamenti? Sar pi facile notare, unavoltaformattatiitesti,eventualierrorinellatipografia. Nel nostro caso, per rispettare larmonia della pagina, abbiamo allineato i contenuti alla fotodellatestata,lasciandodaentrambiilati20pxdimargine.Inquestomodolapagina appareequilibrataeaggraziata.
A questo punto possiamo dedicarci alla scelta del font per i titoli delle pagine e per la navigazione.Esepericontenutidobbiamolimitarciaipochifontwebsafe,inquestocaso possiamo veramente sbizzarrirci, dato che, al momento della codifica, esporteremo tutto comeimmagine. Cerchiamounfontfrivoloegiocosoechesiintonibeneconlanostragrafica:cenesono davverotanti,manoiscegliamoilfestosoCocktailbubbly 20 perilmenudinavigazionee Bellerose 21 peritioli,perrichiamareilfontutilizzatonellogo.
20 21
http://www.dafont.com/cocktailbubbly.font http://www.dafont.com/Bellerose.Font YourInspirationWeb |http://www.yourinspirationweb.com/ 45
Consiglio: utilizza le guide per essere certo che ogni voce sia allineata con le altre e rispettalespaziaturetraunavoceelaltra;setrahomeeasilointercorreunmarginedi 30px, anche tutte le altre voci del men di navigazione dovranno avere, tra loro, questa distanza. Aggiungiamounpiccolotoccocreativo:utilizziamolabambinaconilcartelloneinseritain bassoadestracomeunaportatricedimessaggi.Potremoinserireunoslogan,lapartita ivadellazienda,oaltro.Nelnostrocasoinseriamoilnumeroditelefonodellasilo.
Per rendere pi vivace questo cartellone coloriamo ogni scritta di colore diversa e aggiungiamounbordoesternodi1pxdiuncolorepiacceso(finestradeglistilidilivello>> Traccia). YourInspirationWeb |http://www.yourinspirationweb.com/ 46
Inseriamounagalleryfotografica
Nel wireframe abbiamo visto che in home page, oltre al classico testo di presentazione, dovressereintegrataunapiccolagalleriafotografica. Nellapaginapoiinseriamountitolo,Galleryfotograficaperdividereilcontenutotestuale dalle foto e per far capire che si tratta di una sezione indipendente dal testo della home page. Con lo strumento rettangolo disegniamo qualche piccolo rettangolo arrotondato utilizziamoquestaformaperrichiamarelerotonditdellimmagineintestataecreiamo lenostrethumbnail.
Aquestopunto,propriocomefattoperlimmagineintestata,apriamolefotodainserire nelle thumbnail e le ridimensioniamo in base alle dimensioni dei nostri rettangoli. Clicchiamo su modifica >> Definisci pattern e applichiamo il pattern al rettangolo della gallery.Ripetiamoquestoprocedimentoperognifoto,finoacheognirettangolononavr comeriempimentounafotodiversa. YourInspirationWeb |http://www.yourinspirationweb.com/ 47
Abbiamoquasifinitoilnostrosito!Vogliamovederecomvenuto?
Lultimotocco
Questo layout gi bello, ma come se mancasse qualcosa. Non credi anche tu che le sezionilateralisianounpovuote?Bene,arricchiamoleconunpodigrafica.
Inseriamo nello sfondo un po di palloncini: usiamo un font un po particolare, SF balloons 22 ,inserendoqualchepalloncinoquael,didimensioniecoloridiversi. Nellasezioneconleffettocarta,facciamoinmodocheipalloncinisiintegrinonellosfondo inmodonaturale. Perfarlo,bastaselezionarecomemetododifusionesovrapponi(FinestraStilidilivello>> Opzioni di fusione >> Metodo di fusione), cos che il colore di sfondo del palloncino venga incisonellosfondo.
22
http://www.1001fonts.com/font_details.html?font_id=964 YourInspirationWeb |http://www.yourinspirationweb.com/ 49
Questoilrisultatofinale:
In pratica, gli utenti che navigano con una risoluzione dello schermo impostata ad una larghezzadi1024pxvisualizzerannosololasezioneA,gliutentichehannoimpostatouna larghezzadelloschermoparia1280pxvedrannolesezioniAeBecosviafinoadarrivare agli utenti che visualizzeranno lintero disegno (sezione C), cio coloro che hanno una risoluzionedelloschermoconunalarghezzadi1680px.
Soddisfatto del risultato? Abbiamo realizzato una pagina web con una grafica accattivante, allegra e moderna. Grazie alla cura dei dettagli, questo sito potr rappresentare al meglio il nostro cliente sul web e colpire positivamente i potenziali clienti. Haivistocomfacilecreareunbuonprogettoweb,unavoltatrovatalagiustaispirazione? Bastanounpodiesercizioedisensoestetico. Ora che abbiamo realizzato la nostra bozza, dobbiamo farla visionare al cliente e fare in modo, anche grazie a qualche piccola strategia psicologica, che la accetti senza stravolgerneepeggiorare,comesuccededisolitolaresagrafica.
Capitolo
Comepresentarelabozzagrafica alcliente?
Unavoltarealizzatala bozza grafica del sitodovraipresentarlaaltuocliente.Lafasedi accettazionedellabozza,tuttosommato,unprocessodivenditacomeunaltroestaate convincereilclientedellavaliditdeltuooperato. In questo modo puoi evitarti modifiche, spesso inutili, che il pi delle volte rovinano la qualitdeltuoprogettograficoecomportanounaperditaditempo.
Quando possibile, consigliabile presentare la bozza in modo diretto, cos da poternespiegare i dettagli senza il rischio di incorrere in equivoci dettati dalla distanza conilcliente.Ilcontattodiretto,inoltre,tidlapossibilitdiavvalertidiqualchetecnica che,comeciinsegnalaPNL,pudeterminareilsuccessodiqualsiasitrattativa. Sono gi stati scritti innumerevoli saggi e manuali sullapplicazione della programmazione neurolinguistica nelle fasi di vendita,maquestounargomentoche non mi compete e che quindi eviter di trattare nello specifico. In questo articolo mi limiter a riportarne qualche concetto base, che pu tornarti utile nel gestire i tuoi rapporti di lavoro. Oltre a questo, ti dar qualche piccolo consiglio per evitare di relazionartiinmodonegativoespiacevoleconiltuocliente.
Crearapport
UnodeiconcettiprimaridellaPNLlegatialla comunicazionelacapacitdi instaurare un rapport una sintonia con il tuo interlocutore. Si tratta di creare, attraverso meccanismipiomenospontanei,unfeelingmentaleconiltuocliente. Per creare questa sintonia puoi avvalerti di alcuni metodi come il rispecchiamento e il ricalco,tecnichenoteachiunqueabbiaunaconoscenza,ancheminima,dellaPNL. Entrambe le pratiche consistono nel ricalcare in modo sottile la persona, tramite la respirazione,igestioleespressioniverbali.Respirareconlostessoritmodeltuocliente, assimilarnelegestualitofaretuoilsuomododiesprimersitiaiuteracrearesintoniatra divoiefarinmodoche,alivelloinconscio,iltuoclientericonoscaversoditeunaffinit naturale. Detto in gergo, gli piacerai a pelle e difficilmente prover il desiderio di contraddirti. Ovviamentenonsitrattadiscimmiottareinmodosfacciatoiltuointerlocutore:semettiin pratica queste tecniche senza le giuste competenze teoriche e in modo approssimativo corri il rischio di ottenere leffetto contrario. Il tuo cliente infatti potrebbe sentirsi oltraggiatoerendersifacilmentecontocheituoiatteggiamentisonoartificiosi.E,inquesto caso,difficilmenteticoncederlasuafiducia. Sevuoisapernedipi,suquestosito 23 troviunpiccoloapprofondimento.
Evitalarroganza
Ancheseseituilgraficoehaidieciannidistudiodiesperienzaallespalle,nonarrogartiil dirittodimanifestareletuecompetenzeconarroganza.Frasicome:Seglielodicoio,cos
23
http://www.neurolinguistic.com/pnl/articles/hypnocomm/italy31hypnocomm.htm YourInspirationWeb |http://www.yourinspirationweb.com/ 53
oppure lasci fare a me sono assolutamente fuori luogo e ti rendono, agli occhi del tuo cliente,antipaticoesaccente. Ricordati che non sei pagato per fare ci che vuoi e che, soprattutto agli inizi, essenzialeinstaurareunrapportodifiduciareciprocaconiltuocliente.Iltuocompito quellodicapirelesueesigenzeeditradurleinmodoappropriatoinunprodottofinito. Eovviochesesiaffidatoate,evidentementeperchtiritienevalido,maattentoanon atteggiartiacampioneperquesto,dandotiariedagrandeartista.Cunagrandedifferenza tralesseresicurodellatuaprofessionalitelesserepresuntuoso.
Spiegalecaratteristiche
Presentare al cliente una bozza grafica, senza accompagnarla con unesauriente descrizione tecnica delle sue caratteristiche, uno degli errori pi comuni dei web designeralleprimearmi.Infattinonbastafarvederechehairealizzatounagraficacurata nei dettagli ed esteticamente gradevole: il pi delle volte il cliente ha necessit di capire checosastaguardandoeilperchdideterminatescelte. Perch hai usato quellimmagine nella testata? Con che criterio hai scelto i colori? Che attinenza ha quel particolare effetto grafico con il messaggio che si vuole comunicare? Il cliente deve capire che il tuo lavoro non frutto di scelte casuali e meramenteestetichemadiunostudioaccuratoedivalutazionioggettive.
Evidenziaipuntidiforza
Unavoltaespostelecaratteristichetecnichedeltuolavoro,cercadirichiamarelattenzione delclientesuglieventualipuntidiforzadeltuoprogettoecomeletuesceltecostituiscano unrealebeneficioperquellochesarilprodottofinale. Nel nostro caso potremmo catturare la sua attenzione spiegandogli che la grafica stata impostata per ottenere una buona resa estetica con le risoluzioni dei monitor attualmente in uso, in modo che indipendentemente dalla risoluzione dello schermo dellutentechenavigherilsito,questononperderlapropriaefficienzagrafica. Oppurepotremochiarirecheilcartellonetenutodallabambinainbassoadestracontiene il numero di telefono dellasilo perch, oltre a dare un tocco di colore, questo fa s che il contattotelefonicosiabenvisibileinhomepageeinvoglilutenteachiamareperchiedere informazioni. Selecaratteristichesonoimportantiperchspieganoiltuooperato,sottolinearneipunti diforzafasicheilclienteprendaconfidenzaconlabozzaelasentapisua. YourInspirationWeb |http://www.yourinspirationweb.com/ 54
Siitolleranteconleobiezioni
Nel nostro lavoro praticamente inevitabile ricevere critiche e obiezioni, e questo a prescindere dalla qualit del nostro progetto grafico. Tanto vale farsene una ragione: ci sar sempre qualcuno che non comprender o condivider le tue scelte estetiche e che, magariatorto,cercherdimodificareestravolgereiltuolavoro. Anche se non sempre facile, quando ricevi unobiezione, latteggiamento che devi teneresempreecomunquedimassimoetotalerispetto.Nonimporremailatuaopinione esoprattuttononprenderelobiezionecomeunaffrontopersonale:ilclientestamettendo indubbioalcunipuntideltuoprogetto,nonlatuapersonaoiltuooperato.Perci,faiun belrespiroeascoltailtuointerlocutorefinoinfondo,senzadissentireointerrompere. Nondimostrartiostilee,anzi,appenapuoicercadilenireleperplessitdeltuocliente.In che modo? Rivolgiti a lui con frasi come: Capisco le sue perplessit. Ora le spiego meglio perch ho fatto questa scelta oppure Dal suo punto di vista ha perfettamente ragione. Daltronde, per. In questo modo tu avrai lopportunit di esprimere in modo professionaleenonperentorioiltuopuntodivistasullobiezione,eluisisentircompreso easuoagio.
Pensidiesserenelgiusto?Dimostralo.
Ovviamentenonsemprepubastarelatuaparolaperconvincereilclientecheletuescelte sonoadatte. In fondo, la tua parolacontro la sua e se hai a che fare con una persona abbastanzaorgogliosa,difficilmenteriusciraiaspuntarlasenzailsupportodidatioggettivi chedianoattendibilitallatuaopinione. Vuoi convincerlo che il blu il colore pi adatto?Preparaarticoli,statistiche,sondaggi, piprovepossibilichepossanodaresupportoallatuatesi. Non riesce a riconoscere una grafica accattivante da una amatoriale?Cercailsitodi unattivit attinente alla sua e invitalo a un confronto dettagliato con la bozza che hai disegnato. Insiste ad avere lantiestetico contatore shinystat nel footer? Dimostraglicheisitipi bellieprofessionali(magariquellidelleaziendeinternazionalipifamose)nonlohanno,e chesicuramentecunmotivo. Ovviamentesiidiplomatico:ancheseisuoigustilascianoadesiderare,sicuramentenonti sardaiutorinfacciarglieloinmodopocodelicato.
Edio,comefaccioconiltelelavoro?
Prepara una scheda descrittiva, da allegare alla bozza, che descriva a fondo le tue scelte grafiche e, come da accordi con il tuo cliente, inviagli il tutto per email. Offriti di contattarlotelefonicamentequandolavisioner,cosdapoterglispiegareivaripuntie chiarire gli eventuali dubbi. Anche in un rapporto telefonico, importante far fronte alle obiezioniinmodoprofessionaleedimostrarsicorteseeapertoallecritiche.
Conclusioni
Siamo stati convincenti e il nostro cliente ha accettato senza troppe esitazioni la bozza grafica.Ilprossimopasso?Realizzarelepagineinternediquellochesarilsitointernet.E lofaremoinsiemenelprossimocapitolo!Perilmomentodaiunosguardoallapercentuale di completamento del tuo progetto che con la conclusione di questa fase ha raggiunto quota61%.
Capitolo
Comerealizzarelepagineinterne dopolaccettazionedellabozza?
Nelcapitolocinquehaivistocomepuesseresemplicecreare, conunpodimanualite fantasia,unottimabozzagraficaperilsitointernetdeltuocliente.Dopolaccettazionedi questa bozza, dovrai realizzarne le pagine interne: in realt, una volta disegnatala home page,ilrestoestremamentefacileinquantogeneralmentelastrutturadellealtrepagine rimarr identica ed a variare saranno solo alcuni elementi grafici e la disposizione dei contenuti.
Ilprimopassoperlaprogettazionedellepagineinterne
Vediamoquindicome progettare e realizzare graficamente le pagine interne del sito dellasilodeltuocliente.Primadituttosalviamoilfilesucuiabbiamolavorato,denominato home.psd, con un altro nome, nel nostro caso asilo.psd.In questo modo avremo la strutturagraficasucuilavorareenonintaccheremoilfiledellanostrapaginaprincipale. Ovviamente alcuni elementi non dovranno essere modificati: in questa grafica il logo, il men di navigazione e le illustrazioni di sfondo saranno mantenuti anche nelle pagine interne; ricordati che modificare eccessivamente gli elementi da una pagina allaltra del sito pu disorientare lutente e dare uno sgradevole effetto caotico alle pagine web. Questoconcettopuessereriassuntoinununica,esaurienteparola:coerenza. Cominciamoconil modificare la foto della testata:ilmioconsigliodisceglierepergli headerinterni,immaginicheimprimano,alprimosguardo,iconcettichelapaginaandr poiaillustraretestualmente.Peresempio,poichstailavorandosullapaginacheconterr la descrizione dellasilo dal punto di vista della struttura e del personale, preferibile utilizzare qualche foto dellasilo nido, delle stanze da gioco, oppure una panoramica esternadellastrutturastessa. Una volta selezionata limmagine che pi ritieni adatta, trasformala in pattern come abbiamofattonelcapitolocinque.Aquestopuntocliccasuglistilidilivellodelrettangolo checontienelafotoescegliilpatterndellanuovaimmaginedainserire.
Progettarelagraficasullabasedeicontenuti
Primadiimpostarelassettograficodiquestapagina,utilesaperequalisonoicontenuti chedovrannoessereinseriti:iltestosarlungo,enecessiterquindidiunospaziomolto ampio,orelativamentebreve?Dovrannoessereinseritedelleimmagini?Lapaginadovr contenere, come in questo caso, delle sottopagine interne?Questi sono solo alcuni dei fattoridaprendereinconsiderazioneprimadellaprogettazionegrafica. La pagina asilo ha un breve testo dintroduzione e contiene, come abbiamo visto nella strutturache stata definita, due collegamenti che porteranno alle pagine struttura e personale. Cominciamoquindiconilmodificareiltitoloeinserireilcontenutotestuale:questocidar una panoramica pi ampia sullaspetto che avr la pagina e sulla gestione degli spazi bianchi.
Comepuoivedereiltestodavverobreve,equestofaschelapaginaappaiavuotae,nel complesso, poco attraente. Dovremo inventarci qualcosa, ma questo lo faremo in un secondotempo.
Inseriamoicollegamentiallesottopagine
Intantodobbiamodeciderecomeinserire i collegamentidelle pagineinterne.Datoche consigliabile inserire i men di navigazione prima del contenuto testuale, spostiamo il testo in basso e ricaviamo uno spazio tra il titolo e il testo. A questo punto, sta a te e alla tua fantasia: chiaro che scrivere semplicemente i link testuali oltre a non essere molto accattivante dal punto di vista estetico, fa s che questi passinoinosservatiechevenganoquindifacilmenteignoratidallutente.
Con un po dimmaginazione, basta poco: disegniamo una nuvoletta arancione per richiamarelenuvolegiutilizzatenellagrafica,inseriamodietrolanuvola,limmagineun posfiziosadiunabambinadallosguardoimpertinente,qualchedoodleseilnostromen hagituttounaltroaspetto.
Adesso togliamo tutti gli altri elementi grafici appartenuti al file home.psd, che non abbiamo intenzione di utilizzare nella nostra pagina, come la bambina con il cartellone a destraelagalleriafotografica.Ilrisultatosarquesto:
Aggiungiamoqualcheelementografico
Lapartesuperioreokay,machiarochenecessario aggiungere qualche elementoin fondoallanostrapagina,cheinquestomomentoapparedecisamentescarna. Sta a te sperimentare: immagini, colori, disegni, pennelli, fai pi tentativi fino a che non troviunmodocreativoeadattodiriempirequellantiesteticospaziovuoto. Una buona idea, semplice ed efficace? Scegliamo unimmagine, nel nostro caso la seguente:
Einseriamolanellosfondo,abbassandolopacita60%.
Carina, vero? Adesso scegliamo un bambino che sar il testimonial della nostra pagina. Ricordati sempre lobiettivo primario: identificare lattivit in ogni elemento grafico delsito.
Posizioniamoilbambinosullosfondo,impostandoilmetododifusioneascurisciperfar sicheildisegnosullosfondofacciacapolinodalquadrettochetieneinmano.Ilrisultato questo: YourInspirationWeb |http://www.yourinspirationweb.com/ 65
Ovviamentenelquadrettoavremmopotutoinserireunoslogan,unbrevetestodescrittivo, oancheunatestimonianzadiqualchegenitoresoddisfatto,unpocomeabbiamofattocon il cartellone della bambina nellhomepage. Sei tu il grafico, quindi sta ate decidere come gestireeabbinareconcettiedesign. In dieci minuti abbiamo disegnato unottima pagina interna, giocando con immagini e coloriedintegrandoinmodoefficaceognielementografico.Eadesso? La prossima sfida sar la messa in codice della nostra bozza grafica: lappuntamento conlXHTMLeilCSSalprossimocapitolo.
Capitolo
CometrasformareunPSDin (X)HTMLeCSSsenzaperdercila ragione?Parte1

Ilnostrocompitoinquestocapitolosardidissezionareeinseguitodiricomporreilsito come in un puzzle, utilizzando i fogli di stile e l(X)HTML. una delle parti pi appassionantidellavoroperchtipermettediseguirelosviluppodelsitoveroeproprio edsempregratificantevedere latuaoperaprendereformamattonedopomattone.Per unosviluppatorewebpuessereunasoddisfazionemoltosimileaquellachepuprovare ungraficoquandoconcepisceillayoutdelsito.
Premessa
Iniziamoconilcopiarelacartellacheutilizziamocomemodellodibasequandositrattadi sviluppareunnuovositoweb.S,perchsarebbesolounosprecoditempodoverricreare ogni volta sempre la stessa struttura di base per il nuovo sito. Se non lhai ancora fatto alloraquestalavoltabuonapercreareiltuomodello. Ilmodellocontienenellordine: unacartelladenominatacssdovesonopresentiifoglidistiledicuisicomponeil nostro personale Framework CSS (quello che utilizziamo noi stato generato partendodallaversione0.7.1delframeworkBlueprint); una cartella denominata images che conterr tutte le immagini di cui si comporrilnostrosito; una cartella denominata include in cui collocare eventuali file da includere allinternodellenostrepagine; unacartelladenominatajsdoveposizionareifiledieventualiscriptjavascript; un file denominato index.php che contiene la struttura standard di un documentoweb(dichiarazionedoctype,head,principalimetatag,collegamentoai foglidistile,favicon,ecc); un file denominato robot.txt che conterr le regole utilizzate dagli spider per applicareeventualirestrizionidianalisisullepaginedelsito.
Passo1:Comedissezionarecorrettamenteilnostrolayout?
Prima di mettere le mani sul codice, di fondamentale importanza dissezionare ed esportareinmodocorrettolevariesezionidelnostrolayout.Dopounaccurataanalisi ciaccorgiamochenelnostrocasopreferibilesuddividerelapaginaintresezioni: La prima sezione avr una larghezza di 1680px, che comprender tutta lestensionedellimmagineinorizzontale,eunaltezzadi632px,indispensabileper visualizzare i palloncini posti lateralmente. Questa immagine sar il background dellasezioneprincipaledelsitochechiameremowrapper. La seconda sezione avr una larghezza di 1680px e unaltezza di 86px. Questa immaginesarilpatternassegnatoalbodychesiripeterverticalmentesullabase delcontenutotestualeinseritonelsito.Tistaraichiedendo:perchproprio86px? Si tratta di una dimensione minima che ci permette di replicare limmagine in verticale [backgroundrepeat:repeaty;] senza che si noti la ripetizione della stessa. Laterzasezioneavranchessaunalarghezzadi1680pxconunaltezzadi306px. Questaimmaginesarilbackgrounddellasezionefooterpredispostaallachiusura delnostrolayout.Inquestasezionesarinseritalagalleriafotografica.
Unavoltadefinitelevariesezioni,inPhotoshopnascondiilivellisuperflui,sucuiandremo a lavorare in un secondo momento. Nascondi i link laterali, il testo, le miniature della gallerye,comepuoivederedallimmagineinseritainprecedenza,lasciavisibilesololetre sezioniprincipali.
A questo punto devi esportare le sezioni, una per una. Con lo strumento selezione rettangolare,selezionaprimadituttolaprimasezione,standobenattentoalledimensioni stabiliteinprecedenza.unlavorominuziosodasvolgereconprecisionequasimaniacale: spessoancheunsolopixeldidifferenzapucomportareunafastidiosaperditaditempoe lavoro. Unavoltaselezionatalaprimasezione,cliccasulmenmodificaallavoce copia elementi uniti. Apri un nuovo documento che avr le dimensioni della sezione in memoria gi impostateinmodoautomaticoeincollalaselezione.Inquestomodoavraiundocumento che conterr solo limmagine di tuo interesse. Salva limmagine nella cartella images e seguilostessoprocedimentoconlealtreduesezionidelsito.
Passo2:Mettiamolemanisulnostrofogliodistile
Apriamo il file screen.css che si trova allinterno della cartella css con il nostro editor preferito.Laprimasezionecheandiamoacreareeche,chiameremo wrapper, conterr lo sfondo principale del nostro sito, con unaltezza minima di 632px, fondamentale per visualizzareipalloncinichesonopostilateralmente. Limmagineavrcosunadimensionedi1680pxdilarghezza(risoluzionemassimasucui stiamosviluppandolavisualizzazionedelsito)per632pxdialtezza. Sottounoscreenshotdellastessa:
#wrapper { height: auto!important; height: 632px; min-height: 632px; background-image: url('../images/bg1.jpg'); background-position: top center; background-repeat: no-repeat; width: 100%; }
Per ottenere limplementazione della propriet minheight anche su browser pi datati come Internet Explorer 6 (che non supporta tale propriet), ho sfruttato unaltra insufficienzadelbrowserMicrosoft.Qui 24 troviulterioridettaglisullasoluzioneadottata. Inquestomodovincoliamolasezionewrapperadavereunaltezzaminimadi632px.
Passo3:Assegniamounpatternalbody
Nelleventualit in cui il testodella pagina dovesse essere troppo lungo(dopo i 632px di altezza coperti dallimmagine che abbiamo assegnato come background a wrapper) lo sfondo ritornerebbe a essere vuoto. Per risolvere questo inconveniente sar necessario quindiaggiungereunpatternchedialideadicontinuitconlosfondoprecedente. Assegniamoalbodylimmaginedisfondodenominatapattern.jpgdi1680pxdilarghezza per86pxdialtezza.
24
http://www.constile.org/tips/minheight/ YourInspirationWeb |http://www.yourinspirationweb.com/ 72
body { font-size: 70%; color: #222; background: #fff; background-image: url('../images/pattern.jpg'); background-position: top center; background-repeat: repeat-y; font-family: verdana, Arial, Helvetica, sans-serif; }
Passo4:Iniziamoascriverelenostreprimerighedi(X)HTML
Prima di proseguire ulteriormente con il lavoro verifichiamo se quello che abbiamo concepitofunzionaalivellopratico.Apriamodunqueilfileindex.phpconilnostroeditor. Laprimapartedelfileconterrqualcosadelgenere:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Asilo Nido - YourInspirationWeb</title> <meta name="author" content="Your Inspiration Web" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />  </head>
Aggiungiamo queste poche righe di codice e andiamo a visualizzare il risultato su tutti i browser.
<body> <div id="wrapper"> </div> </body>
Esattamentequellochevolevamoottenere:comepuoinotareilpatterncheabbiamo assegnatoaltagbodysiripeteverticalmenteandandosiadintegrareperfettamentecon limmaginedisfondoutilizzatanellasezionewrapper.
Passo5:Definiamoilcontenitoredelsito
Creiamo una sezione che far da contenitore al nostro sito. Questa sezione, che chiameremocontainer,avrunalarghezzatotaledi960px(920pxsarladimensionedel box al quale assegneremo altri 20px di padding per lato, cos da ottenere la larghezza desiderata:920+20+20)esarcentratasulloschermo.
#container {width:920px;margin:0 auto;padding:20px;}
<body> <div id="wrapper"> <div id="container"> </div> </div> </body> Andiamo a visualizzare il risultato su tutti i browser. Se aggiungessimo un bordo nero a container,cosdarenderlovisibile,avremmoqualcosacomemostratonellimmaginesotto:
Allinterno di container andremo ad inserire i contenuti del sito i quali ne regoleranno automaticamentelaltezza.
Passo6:Dividiamoilcontenitoreinduecolonne
PerraggiungereunbuonposizionamentosuGoogleinfasediindicizzazioneimportante cheil contenuto testuale del sito venga inserito prima di ogni altra cosa,eccoperch dobbiamo fare in modo che la colonna di destra, quella che racchiuder poi il contenuto testualedellevariepagine,dovresserescrittaperprimanellanostrapaginahtml.
#right { float: right; padding: 0 65px 0 20px; width: 560px; } #left { margin-right:645px; width:260px; } Utilizzando questa tecnica CSS raggiungiamo lobiettivo che ci siamo prefissati, adesso la colonna di destra (#right) potr essere inserita per prima allinterno della pagina html e poi,aseguire,lacolonnadisinistra(#left). Diamodunqueunosguardoalmarkup(X)HTML: <body> <div id="wrapper"> <div id="container"> <div id="right">  </div> <div id="left">  </div> <div class="clearer"></div> </div> </div> </body> Aggiungendo un bordo alle due colonne e assegnando unaltezza provvisoria di 400px in mododarenderlevisibilisulloschermo,possiamovisualizzareunanteprimadeiduebox (suivaribrowser)cheapparircomenellimmaginemostrata. YourInspirationWeb |http://www.yourinspirationweb.com/ 77
Ovviamenteibordielaltezzanelleduecolonnesonostatiimpostatisoloascopodidattico, questipoinonsarannopresentinelfogliodistiledefinitivo.
Passo7:ilmomentodiaggiungereilfooter
Lagalleriafotograficachesitrovainfondoallapaginasarcontenutainunaltrasezione delsitochechiameremofooter.Aquestasezioneimposteremounaltezzaparia306px comequelladellimmaginedisfondochegliandremoadassegnare.
#footer { width: 100%; height: 306px; background: url('../images/footer.jpg') no-repeat top center; }
Adesso realizziamo un box che servir da contenitore alla sezione footer in cui andremo dopoainserireilrelativocontenuto:lefotodellagalleriafotografica.
#containerFooter { width:390px; margin:0 auto; padding:0 250px 0 320px; }
Il markup (X)HTML che definisce la struttura del sito che stiamo sviluppando a questo puntodelprogettosimostrercos:
<body> <div id="wrapper"> <div id="container"> <div id="right">  </div> <div id="left">  </div> <div class="clearer"></div> </div> </div> <div id="footer"> <div id="containerFooter">  </div> </div> </body>
Diseguitounoscreenshotdellavorocheabbiamosvolto.
Niente male, possiamo dire di essere gi ad un buon 50% di completamento del lavoro riguardantequestafasedimessaincodicedelsito.
Conclusione
Comehaivisto,difondamentaleimportanza riuscire a dissezionare correttamente il layout che vogliamo ricomporre in codice. Basta commettere un piccolo errore in questaprimafaseeinevitabilmentecisiritrovaaperderetempopreziosonellosviluppo delmarkup(X)HTMLeCSSchenonprodurririsultatiaspettati. Altro aspetto fondamentale quello di verificare, passo dopo passo, la corretta visualizzazione del sito su tutti i principali browser in modo da correggere subito eventuali imperfezioni e non tralasciare dunque questa fase alla fine della realizzazione dellintera pagina come spesso pu capitare a chi alle prime armi. Nei casi peggiori potrebbeesserenecessariorimetterelemaniallinterocodicechesisviluppato. Nel prossimo capitolo vedrai i passi necessari per disporre i vari contenuti testata, navigazione, testo, galleria fotografica allinterno delle relative sezioni che abbiamo appenacreato,cosdacompletareilnostrolavoro.
Capitolo
CometrasformareunPSDin (X)HTMLeCSSsenzaperdercila ragione?Parte2

Seiprontoperricostruirelasecondapartedelpuzzle?Nelcapitoloprecedenteabbiamo visto come sviluppare in codice la struttura generale del nostro sito. Adesso continuiamoconilprocessodiricostruzioneevediamo come mettere in codice i vari contenutiallinternodellesingolesezionicheabbiamocreato. Armiamocidunqueditantapazienzaedeliminiamoognidistrazionedallanostramente.Si parte.
Passo1:Aggiungiamolatestata
Nellasezionedidestrapossiamoaggiungerelimmaginechefardaheaderalsito.
Aggiungiamoquindilarigadicodiceevidenziatainbassoallanostrapagina:
<body> <div id="wrapper"> <div id="container"> <div id="right">  <img src="images/header/header.jpg" alt="testata - foto bimbo" /> </div> <div id="left">  </div> <div class="clearer"></div> </div> </div> <div id="footer"> <div id="containerFooter"> </div> </div> </body> E adesso verifichiamo il sito su tutti i principali browser; ricordiamoci di eseguire sempre questoperazione alla fine di ogni step se non vogliamo trovarci con sgradevoli sorpresefinali.
Passo2:Inseriamoiltestonellapagina
Per scrivere il titolo del paragrafo Home, Sara ha utilizzato un carattere che richiama vagamentelostilediquellousatonellabarradinavigazione. Questocaratterenontraquellistandardsupportatidatuttiibrowsereperevitareche il testo Home possa essere visualizzato con altri caratteri su certi browser, procediamo nel modo seguente: esportiamo il titolo del paragrafo come immagine e lo carichiamo cometale,subitosottolatestata. Per distanziarlo un podalla testata gli assegniamo un padding (top e bottom) di 20px. Successivamenteaggiungiamoiltesto. Diamounosguardoalcodice:
h1 {padding:20px 0;} <div id="right">  <img src="images/header/header.jpg" alt="testata - foto bimbo" /> <h1><img src="images/home.gif" alt="home" /></h1> <p> <strong>L'asilo nido AltroSpazio</strong> un servizio educativo che risponde ai bisogni dei bambini dalla nascita ai tre anni di vita favorendone un equilibrato sviluppo fisico e psichico. </p> <p> I bambini sono divisi in vari gruppi, per et, e insieme giorno dopo giorno <strong>consolidano la propria identit personale e sociale</strong> allo stesso tempo. </p> <p> Sono stati predisposti degli spazi per le attivit quotidiane a seconda delle richieste dei vari gruppi: </p> <ul> <li>Il <strong>laboratorio della manipolazione</strong>, del colore e travasi.</li> <li>La <strong>zona della comunicazione</strong> con un angolo morbido per la lettura di storie.</li> <li>La zona della <strong>casetta e dei travestimenti</strong></li> <li>Il salone per il <strong>gioco motorio</strong></li> </ul> <p> I gruppi sono omogenei per et e vengono seguiti dalla stessa educatrice per tutto il ciclo scolastico. </p> </div>
Edeccoilnostrositoprenderesemprepiforma:
Passo3:Adessotoccaalfooter
Aggiungiamo la galleria fotografica nel footer della nostra pagina. Carichiamo le quattro immaginiallinternodellapagina:
<div id="footer"> <div id="containerFooter"> <a href="#"> <img src="images/gallery/img001.jpg" alt="foto 1" /> </a> <a href="#"> <img src="images/gallery/img002.jpg" alt="foto 2" /> </a> <a href="#"> <img src="images/gallery/img003.jpg" alt="foto 3" /> </a> <a href="#"> <img src="images/gallery/img004.jpg" alt="foto 4" /> </a> </div>
Per evitare che le immagini della galleria coprano la scritta Galleria fotografica, come mostratonellafotosotto,necessariospostarleleggermentepiinbasso.
Aggiungiamodunqueun paddingtop di 90pxallasezionedenominatacontainerFooter cheavevamocreatonellalezioneprecedente,questodovrebbebastareaspostarelefotoin bassotantoquantoserve:
#containerFooter { width: 390px; margin: 0 auto; padding: 90px 250px 0 320px; }
Ci siamo. Ma c ancora qualcosa che non va. Non ti sembra che le foto appaiono troppo attaccatetradiloro? Facciamoinmododidistanziarleunpotradiloro,anchesenondimoltopoichlospazio che abbiamo a disposizione non lo permette. Aggiungendo un piccolo padding alla loro destradovremmoottenereleffettodesiderato:
#containerFooter img { padding-right: 2px; }
In questo modo diciamo al browser di aggiungere un paddingright di 2px a tutte le immaginichesitrovanoallinternodellasezionedenominatacontainerFooter.
Cos facendo per lultima immagine andata a capo sulla seconda riga. Questo succede perch limmagine, con i due pixel di paddingright che gli abbiamo assegnato, fuoriesce dallasezionecontainerFooter. Vediamocomepossiamorisolvereilproblema. La soluzione pi immediata sarebbe quella di eliminare linutile paddingright di 2px sullultima foto e vedere se questo semplice accorgimento di per se basta a risolvere il problema. YourInspirationWeb |http://www.yourinspirationweb.com/ 89
Utilizzeremo un selettore di valore attributo per tentare di eliminare in modo professionalelinconveniente:
#containerFooter img[alt="foto 4"] { padding-right:0; }
Ed ecco finalmente ottenuto il risultato desiderato, limmagine con attributo alt=foto 4 adesso ha paddingright uguale a zero pixel e questo semplice accorgimento basta a non farlaandareacaposullarigasuccessiva.
Perconcludereillavoroconlasezionefooterandiamoadaggiungerelascritta:Guardale altrefoto,allineandolaadestrasottolefoto. Sulnostrofogliodistilecreiamounaclassechecipermettadiallineareiltestosulladestra delcontenitore:
.alignRight { text-align:right; }
E successivamente assegniamo questa classe al paragrafo che contiene la scritta da allineareadestra:
<div id="footer"> <div id="containerFooter"> <a href="#"> <img src="images/gallery/img001.jpg" alt="foto 1" /> </a> <a href="#"> <img src="images/gallery/img002.jpg" alt="foto 2" /> </a> <a href="#"> <img src="images/gallery/img003.jpg" alt="foto 3" /> </a> <a href="#"> <img src="images/gallery/img004.jpg" alt="foto 4" /> </a> <p class="alignRight"> <a href="#">>> Guarda le altre foto</a> </p> </div> </div>
Definiamoancheicolorideicollegamentiipertestuali: YourInspirationWeb |http://www.yourinspirationweb.com/ 91
/* Link */ a {color:#ca4608; text-decoration:none;} a:link, a:visited {color:#ca4608;text-decoration:none;} a:active, a:hover {color:#621303;text-decoration:underline}
Eanchelasezionefooterstataportataatermine. Adessoseproviaverificareilsitosututtiibrowser,tiaccorgeraichesuInternetExplorer 6lultimaimmaginedellagalleriafotograficacontinuaadandareacapo;ilmotivodovuto alfattochequestobrowsernonsupportaiselettoridivaloreattributoequindilultima immagine, per Internet Explorer 6, continua ad avere un paddingright di 2px. Per risolverequestoproblemasipucreareunfogliodistileappositoperquestobrowser. Come?Utilizzandoicommenticondizionalichepermettonodispecificareunfogliodistile specificoperInternetExplorer6nelmodochesegue:

Aggiunta la riga precedente allinterno della sezione <head></head> della nostra pagina, passiamo a creare un nuovo foglio di stile denominato ie6.css e salviamolo sotto la cartellacssdelnostrosito.Graziealcommentocondizionalecheabbiamoinseritoprima, questo foglio di stile sar caricato solo dai browser Internet Explorer nelle versioni inferioriallasette.
Adessoapriamoilfogliodistileie6.csseaggiungiamoquestarigadicodice:
#containerFooter img {padding-right:1px;}
Inquestomodo,soloperchiutilizzaunbrowserInternetExplorerversioneinferiorealla sette,ilpaddingrightassegnatoalleimmaginidellagalleriasardiunsolopixelpiuttosto chedue. Ovviamenteinquestocasosipotevarisolvereinaltrimodi,comeperesempiocreareun nuovoidconpaddingzerodaassegnaresoloallultimaimmaginedellagalleriafotografica, maperfinididatticihopreferitoutilizzarequestometodo.Coshaiavutomododi vedere in pratica sia lutilizzo dei selettori di valore attributo che lutilizzo dei commenti condizionali. Diamounosguardoalnostrositoprimadipassareallultimopunto:
Passo4:Lanavigazionedelsito
Comeavrainotato,ancheperilinkdellanavigazionestatousatounfontchenonrientra tra quelli standard. Occorre, quindi, esportare ogni singola voce del men di navigazionecomeimmagine. Perarricchirelanavigazione,abbiamodecisodiaggiungereuneffettohoversuilink,cos chealpassaggiodelmouselescrittecambinodicolore.Perrealizzarequestoeffettoconi CSS necessario esportare ogni singola voce del men in entrambi gli stati: di colore biancoilinknellorostatonaturale,digiallonellostatohover. Vediamocomefare,passodopopasso. Iniziamoconilselezionarelevocidelnostromendinavigazione.Possiamoaiutarciconle guide:
Nelnostrocasolesezionihannotuttiunaltezzadi84px.Questoperch,utilizzandoquesto metodo,necessariochetutteleimmaginiesportateabbianolastessaaltezza. Con lo strumento rettangolo selezioniamo la sezione del link in questo caso home , copiamo la selezione (Modifica > Copia elementi uniti) e incolliamo limmagine in un nuovodocumento. YourInspirationWeb |http://www.yourinspirationweb.com/ 94
Attenzione, per! Il nuovo documento dovr avere unaltezza doppia a quella dellimmagineesportata,inquantodopodovremoincollarelastessasezionemaconillink di colore giallo che servir per lo stato hover. Apriamo quindi un nuovo documento di altezza168px(84px*2)eincolliamolanostraselezione. Dovresti avere qualcosa del genere, con la sezione appena incollata in alto e uno spazio vuotoinbasso:
Aquestopuntotorniamonellanostrahomepage,cambiamoilcoloreallascrittahomee copiamonuovamentelaselezione.
Adessotorniamoallaltrodocumentoe,nellospaziovuoto,incolliamolaselezioneappena copiata.
In questo modo abbiamo unimmagine di 168px che comprende entrambi gli stati del link, attivo e hover.Inquestipassaggidevistareattentoafareinmodocheentrambele sezioni incollate (il link di colore bianco e quello di colore giallo) siano della stessa dimensioneeposizionatiesattamentenellostessopunto. Una piccola imprecisione, anche di un solo pixel, comporta uno sgradevole effetto spostamentosuilink,unavoltaincodice.
Eadesso,sottoconilcodice!
Per concludere andiamo a realizzare lultima parte di codice aggiungendo la navigazione allinternodellasezionedenominataleftcheavevamodefinitonelcapitoloprecedente. Definiamopassodopopasso,nelnostrofogliodistile,lalistacheconterrlanavigazione delnostrosito. Iniziamoconlassegnareunmargineinaltoallanavigazionecosicchpossainiziareunpo aldisottodellogoefacciamoinmododiannullarequelfastidiosocerchiettochedidefault vienevisualizzatonelleliste:
ul#nav { list-style-type: none; margin: 180px 0 0 0; padding: 0; }
Adessopertuttiglielementidellalistachehannouncollegamentoipertestuale,facciamo in modo che leventuale testo scritto non sia visualizzato sullo schermo (textindent: 9999px)poichutilizzeremodelleimmaginiperrappresentarelevarievocidinavigazione al posto del testo (le immagini che abbiamo precedentemente esportato dal nostro psd), YourInspirationWeb |http://www.yourinspirationweb.com/ 96
allineiamo il contenuto a destra (float:right) e impostiamo a zero eventuali margini e padding.
ul#nav li a { padding: 0; margin: 0; float: right; text-indent: -9999px; }
Poi creiamo degli ID che denominiamo home, gestione, struttura, eventi e contatti, e che successivamente assegneremo ad ogni rispettiva voce della navigazione, e facciamo in modocheabbianotuttilastessaaltezza:84pixel.
li#home a, li#gestione a, li#struttura a, li#eventi a, li#contatti a { height:84px; }
Oradefiniamolimmaginedisfondochedovressereutilizzatadaognisingolavocedella navigazione, assegnando la relativa larghezza per ciascuna e il percorso in cui si trova limmagine:
li#home a { width: 134px; background: url('../images/nav/home.gif') no-repeat; } li#gestione a { width: 226px; background: url('../images/nav/gestione.gif') no-repeat; } li#struttura a { width: 210px; background: url('../images/nav/struttura.gif') no-repeat; } li#eventi a { width: 133px; background: url('../images/nav/eventi.gif') no-repeat; } li#contatti a { width: 176px; background: url('../images/nav/contatti.gif') no-repeat; }
Anche se le nostre immagini hanno una dimensione reale di 168 pixel, sul sito ne verr visualizzata effettivamente solo una porzione dato che nella regola precedente abbiamo definitopertuttiglielementidellanavigazioneunaltezzaparia84pixel.
Lostatohoverdellanavigazione
Infine per definire lo statohover di ogni elemento basta applicare una semplice regola a tutti gli elementi della navigazione utilizzando le pseudoclassi :hover e :focus. In questo modo possiamo assegnare la seconda parte dellimmagine che abbiamo impostato come sfondodicendodivisualizzarelaporzionedimmaginecheciinteressa.
/*stato hover nav*/ li#home a:hover,li#home a:focus,li#gestione a:hover,li#gestione a:focus,li#struttura a:hover,li#struttura a:focus,li#eventi a:hover,li#eventi a:focus,li#contatti a:hover,li#contatti a:focus { background-position: 0px -84px; }
Adesso andiamo a scrivere il codice (X)HTML che ci permetter di visualizzare la navigazionedelsitoallinternodellasezionesinistra: <div id="left">  <ul id="nav"> <li id="home"><a href="#" title="Home page">home</a></li> <li id="gestione"><a href="#" title="la gestione">la gestione</a></li> <li id="struttura"><a href="#" title="la struttura">la struttura</a></li> <li id="eventi"><a href="#" title="eventi">eventi</a></li> <li id="contatti"><a href="#" title="contatti">contatti</a></li> </ul>  </div> Verificalacorrettavisualizzazionedelsitosuivaribrowser. YourInspirationWeb |http://www.yourinspirationweb.com/ 99
Dovrebbe vedersi perfettamente su tutti i maggiori browser utilizzati. Possiamo dire di aversvoltounbuonlavoro.Seisoddisfattodelrisultato? GuardalaLivePreview 25 delsito.
Statodiavanzamentodelprogetto
Realizzata la home page del sito possiamo mettere in codice tutte le altre pagine che in linea di massima hanno una struttura quasi simile a quella appena realizzata, il che semplificanotevolmenteillavoroecomportaunragguardevolerisparmioditempo. Conclusalafasedellosviluppoincodicedellebozzegrafichepossiamoconsiderareadun buon 99% lo stato di avanzamento generale del nostro progetto, come dimostrato dalla figurainbasso.
Ilsitoprontoperesseremessoonlineeormaimancanosolopochistepperterminareil nostrolavoro.Ilprossimopassaggiosardi ottimizzare il sito per unindicizzazione di base,aspettodanontrascuraresesivuolerenderlofacilmentereperibile. Vuoisapere come indicizzare il sito senza essere un esperto SEO?Scopriloleggendoil prossimocapitolo.
25
http://www.yourinspirationweb.com/example/psd_to_xhtml/ YourInspirationWeb |http://www.yourinspirationweb.com/ 100
Capitolo
Comeindicizzareunsitosenza essereunespertoSEO?
Neicapitoliprecedentiabbiamovistocome concepire e sviluppare la realizzazione del sitocheilnostroclientecihaaffidato,ilqualesembraesseremoltosoddisfattodellavoro finora svolto. E adesso? Possiamo anche aver realizzato un sito di notevole impatto grafico e comunicativostandoattentiatutteledirettivecheilclienteharichiestoma, se nessunosadellesistenzadiquestosito,inrealtcomesenonesistesse,comesenon fossemaistatorealizzato. Il sito serve a ben poco se nessuno lo visita. Capirai che diventa di fondamentale importanzaquindi indicizzare il sito sui principali motori di ricercae ottimizzarne le pagine al fine di ottenere anche un buon posizionamento. Andiamo con ordine e vediamocomeprocedereeacosafareattenzione.
Chedifferenzactraindicizzazioneeposizionamento?
Iniziamoinnanzituttoconilfornirequalchenozioneteoricaevediamoche differenza c traindicizzazioneeposizionamento,terminispessousatiinmodononappropriato. Indicizzare un sito sui motori di ricerca significa aggiungere il sito nellindice dei motori, cos da comunicarne la sua presenza indipendentemente dalla posizione che gli sar assegnata. Per aggiungere il sito neglindici dei vari motori esistono delle apposite paginededicate;peresempioperGooglelapagina:www.google.it/addurl/.
Posizionare un sito nei motori di ricerca significa riuscire ad ottenere un buon risultatointerminedivisibilitfacendoinmodocheilsito,peralcunechiavidiricercao combinazionidiparolechiavi,siatraiprimirisultatirestituitidalmotore. Per ottimizzare il posizionamento del sito bisogna intervenire sulla strutturadiogni singola pagina (X)HTML (e non solo sullhomepage come erroneamente fanno in molti) stando attenti a valutare alcuni aspetti presi in considerazione dai vari motori per posizionareirisultatiallinternodeiloroindici. Comeprimopassoconvienequindiprogettareunsitoottimizzato al fine di ottenere un buon posizionamentoesuccessivamentesiprocedeconla registrazione nei motori di ricerca:operazionedaeffettuareperfarconoscereilsitoamilionidipotenzialiutenti.
Qualisonoiprincipaliaspettidaprendereinconsiderazionequando siottimizzaunsitoperottenereunbuonposizionamento?
Tra gli aspetti principali da prendere in considerazione c il corretto utilizzo del Tag Title, dei Meta Tag, il contenuto del documento, la struttura della pagina (X)HTML, lattributoALTdelleimmagini,icollegamentiipertestuali. Inquestocapitolodaremosolounosguardopiuttostosuperficialeaiprincipali aspettida prendere in considerazione, per la vastit dellargomento trattato sarebbe necessario dedicargliuninteraguida,cosachetralaltroabbiamoinprevisionedifare. Adessoperbandoallecianceeandiamoavederequestiprincipaliaspetti.
ComeutilizzarecorrettamenteiltagTitle?
In fase di posizionamento il Tag Title uno degli aspetti maggiormente presi in considerazione dai vari motori di ricerca, proprio per questo motivo fondamentale utilizzarlo in modo opportuno. Google e gli altri motori di ricerca prendono in considerazione solo questo Tag per assegnare il titolo a una pagina (quando non lo modificano in base ad altri fattori come il prenderlo da DMOZ 26 se il sito inserito su quelladirectory). Cerca di inserire allinterno del Tag Title alcune combinazioni di parole chiave per cui desideriposizionareilsito. Vediamosubitolesempiopraticoconilsitodellasilo. Dopoavereseguitounattenta analisisulleprincipalicombinazionidiparolechiaveda indicizzare,sidecisodidareprioritalleseguenti:Letturastorie,giocomotorio,asilo nidoSestoSanGiovanni,asilonidoMilano,asilonidoLombardia. Il Tag Title della pagina che abbiamo realizzato a questo punto potrebbe avrebbe una diciturasimile:
26
http://www.dmoz.org/World/Italiano/ YourInspirationWeb |http://www.yourinspirationweb.com/ 104
<title> Letture storie, gioco motorio | AltroSpazio Asilo Nido Sesto San Giovanni, Milano, Lombardia </title>
Consigli
Staiattentoa non esagerare con il numero di parole chiave che inserisci allinterno del Tag Title altrimenti rischi di perdere il valore delle chiavi principali o addirittura di esserebannato(esclusodairisultatidellericerche)daimotori. Limita la lunghezza del titolo tra 50 e 80 caratteri incluso spazi, anche se alcuni sostengonochecisipuspingerefinoa160caratteri. Inserirecomeprimaparolalaparolachiavedaposizionare.Ingenereleparolechiave collocatealliniziodeltitoloriesconoadottenereunposizionamentomigliore. Se le combinazioni di parole chiavi scelte saranno presenti anche allinizio del contenutodellapagina,questesarannorafforzateulteriormente.
ChecosasonoiMetaTagecomeutilizzarli?
I Meta Tags (o Meta Dati) sono dei Tag che sinseriscono allinterno dell<head> del documento e risultano invisibili allutente che visita la nostra pagina. Si parlato molto dellimportanzadeiMetaTagedicomequestisianopresiinconsiderazionedaivarimotori di ricerca in fase di posizionamento. Ma di qualche settimana addietro la notizia 27 ufficiale che Google non prende in considerazione ai fini del posizionamento il Meta Tag Keywords, in passato molto abusato da chi, cercando di fare il furbo, inseriva in questoMetaTagcentinaiadiparolepensandodimigliorareilposizionamentodelproprio sito. IprincipaliMetaTagutilizzatiinfasediottimizzazionesonoil Meta Tag Keywords(che contieneunelencodiparolechiaviocombinazionidellestesse)eilMetaTagDescription (il quale contiene una breve descrizione del contenuto della pagina: questo quello che generalmente,neirisultatidiunaricerca,visualizzatosubitosottoiltitolodellapagina).
http://googlewebmastercentral.blogspot.com/2009/09/googledoesnotusekeywords metatag.html YourInspirationWeb |http://www.yourinspirationweb.com/ 105

27
Vediamone la struttura tipo in un esempio pratico, ecco quindi come sarebbero aggiunti questidueMetaTagnellapaginadelnostroAsiloNido:
<meta name="keywords" content="Letture storie, gioco motorio, Altrospazio Asilo Nido, Sesto San Giovanni, Milano, Lombardia"> <meta name="description" content="L'asilo nido AltroSpazio un servizio educativo che risponde ai bisogni dei bambini dalla nascita ai tre anni di vita favorendone un equilibrato sviluppo fisico e psichico.">
Inquestapaginaweb 28 puoivederecomeGoogletrattaiprincipaliMetaTag. Tuttoqui?Ovviamenteno. Perottimizzareilsitoaifinidiunbuonposizionamentocomeavevoaccennatooccorre lavorare anche sul contenuto e sulla struttura della pagina, perch, come vedremo, grazie a tanti piccoli accorgimenti (collegamenti ipertestuali, titoli, immagini, contenuto, ecc)chesiriescearaggiungereilrisultatodesiderato.
Cheimportanzahailcontenutodellanostrapagina?
Content is the power sostiene qualcuno. In realt proprio vero, il contenuto della nostrapagina,eilmodoincuiquestosemanticamenteredatto,fadavveroladifferenza.
http://www.google.com/support/webmasters/bin/answer.py?answer=79812&query=+il+tag+t itolo&topic=&type= YourInspirationWeb |http://www.yourinspirationweb.com/ 106

28
SembracheGoogleeseguaunconfrontotrale prime parole inserite subito dopo il Tag Body e il testo contenuto allinterno del Tag Title della pagina. Se c corrispondenza, si ottieneindubbiamenteunbuonranking. Daquestosideducechepreferibiledisolitoiniziareilcontenutodellanostrapagina con del testopiuttostocheconunimmagine,unmendinavigazioneoaltro.Eccoperch in fase di codifica del markup (X)HTML del nostro sito, se ben ricordi, abbiamo fatto in modo (utilizzando la potenza dei fogli di stile) che il contenuto potesse essere inserito subitodopoilTag Body(anchesevisivamentesullatosinistroavevamoprimalabarradi navigazione). SottopuoivedereilcodiceCSSutilizzatoperottenereilrisultatodesiderato:
#right { float: right; padding: 0 65px 0 20px; width:560px; } #left { margin-right: 645px; width: 260px; }
Cisonoanchealtrielementiallinternodel contenuto di una pagina che contribuiscono maggiormente alla valutazione e indicizzazione della stessa, come ad esempio le parole evidenziate in grassetto allinterno dei Tag <b>keywords</b> e <strong>keywords</strong>, il testo inserito allinterno degli Heading Tags (<hn>keywords</hn>),icollegamentiipertestuali,iltestoinseritoallinternodellattributo AltdelTagImg,ecc.
Consigli
Parecheleprime2025paroleinseritesubitodopoilTagBodysianoquellechehanno pirilevanzaalfinedellassegnazionediunbuonranking. Ricordati di validare sempre il codice (X)HTML delle tue pagine al fine di renderlo facilmenteleggibiledatuttiibrowseredaglispiderdeivarimotoridiricerca.Pervalidare
il markup (x)html puoi utilizzare lo strumento messo a disposizione dal W3C, HTML VALIDATOR 29 .
Non evidenziare le parole in grassetto attraverso i fogli di stile come nellesempio sotto:
.grassetto { font-weight: bold; }
Altrimentiglispidernoncomprendonochelaparolaenfatizzata.
ChecosasonogliHeadingTagsecomeutilizzarlicorrettamente?
Gli Heading Tags servono a strutturare semanticamente il contenuto delle nostre pagine,ilcorrettoutilizzodiquestiTagtiaiuteradaremaggiorerilevanzaadeterminate combinazionidiparolechedesideriindicizzare. Dal punto di vista semantico servono a suddividere gerarchicamente il contenuto del documento in titoli, sottotitoli, titoli di paragrafi, sottotitoli di paragrafi, ecc sono suddivisi in sei livelli che vanno da <h1></h1>, <h2></h2> fino ad arrivare a <h6></h6>. E molto importante, quando possibile, suddividere il contenuto in paragrafi utilizzando correttamentequestiTag.
29
http://validator.w3.org/ YourInspirationWeb |http://www.yourinspirationweb.com/ 108
Consigli
Le parole contenute allinterno del Tag <h1></h1> sono quelle cui Google da maggiore rilevanza. Dal punto di vista semantico questo Tag utilizzato per indicare il Titolodelcontenutodellapagina. Occhioagliabusi:consigliatononutilizzarepidiunTag<h1></h1>perpagina. Se il contenuto del sito inizia con del testo e questo racchiuso allinterno del tag <h1></h1>Googledarmaggiorerilevanzaalleeventualikeywordspresenti.
LattributoALTdelleimmaginiutileaifinidelposizionamento?
PerquantoriguardalarilevanzadellattributoALTaifinidelposizionamentocisonodue casidaprendereinconsiderazione:
Caso1:Immaginiconcollegamentoipertestuale
Le parole chiave inserite allinterno dellattributo ALT di unimmagine che possiede un collegamentoipertestualesonopresemoltoinconsiderazionedapartediGoogle.
Caso2:Immaginisenzacollegamentoipertestuale
Le parole chiave inserite allinterno dellattributo ALT dimmagini che non hanno un collegamento ipertestuale non sono prese molto in considerazione ai fini di un buon posizionamento ma contribuiscono ugualmente ad aumentare la densit delle parole chiavepresentiallinternodellapagina.
Conclusioni
Inquestocapitoloriguardantelindicizzazioneelottimizzazionedelsito,abbiamovisto chepossibileotteneredeidiscretirisultatianchesenzaconoscereicomplessialgoritmi utilizzatidaivarimotoridiricerca.Avrainotatoanchecome,scrivendounmarkuppulito, semanticoevalidato,ilpidellavorogisvoltoinfasedicodifica. Ricorda che lindicizzazione e il posizionamento sono degli aspetti fondamentali nella realizzazione di un sito e non vanno assolutamente sottovalutati altrimenti si rischia di rendereinesistenteilnostrositoannullandotuttoillavorofinorasvolto.
Capitolo
Comeassicurarsidinonaver commessoerroriprimadi lanciareilsito?

Edeccocigiuntiallultimoappuntamentodiquestaguidadedicataallarealizzazionediun sito internet. Siamo partiti dal primo incontro con il cliente e, passo dopo passo, ti abbiamoaccompagnatofinoalcompletamentodellinteroprogetto. Ma siamo proprio sicuri di aver finito il lavoro? Siamo stati davvero attenti a tutto? Scopriamoloinsiemeinquestultimocapitolo.
Checosadevocontrollareprimadipubblicareilsitoonline?
Per evitare di caricare online il sito con possibili errori, dimenticanze o altro, assolutamenteconsigliatoeseguiredelle operazioni di verifica e test,correggendo,dove necessario,eventualidisattenzioni. Vediamoneldettaglioqualisonogliaspettiprincipalidaprendereinconsiderazione.
Analisidelcontenuto
Grande importanza deve essere dedicata allanalisi del contenuto perch questo il messaggiochesartrasmessoagliutenti,assicuratidunqueche: Il testo non contenga errori, la grammatica sia corretta e utilizzi vocaboli adeguati. La punteggiatura e lutilizzo di apostrofi o virgolette siano utilizzati in modo corretto. Iblocchiditestononsianotroppolunghielepaginenonsianotroppopesanti. Eventuali caratteri speciali siano sostituiti con il loro corrispettivo codice html (entityname 30 ),comeperesempiolutilizzodella&commercialeodelsimbolo delleurochedevonoessererappresentatirispettivamentedaicodici&e €. Tutti i collegamenti ipertestuali, interni ed esterni, siano validi e puntino correttamenteallerelativepaginedidestinazione.
Ottimizzazionemotoridiricerca
Abbiamodettonelleultimeduelezionicheper posizionare bene il sito negli indici dei motoridiricercaindispensabiletenerecontodialcuniaspetti,quindiassicuratidiaver: Inseritoititoliinmodoadeguato(utilizzandocorrettamentedellechiavidiricerca percuidesideriposizionareilsito)sututtelepagine. Inserito il Meta Tag Description contenente una breve descrizione per ogni pagina. Scrittoilcontenutoinmodosemanticoutilizzandolasuddivisionegerarchicadegli HeadingTags(<h1></h1>periltitolodelcontenutodellapagina,<h2></h2>peri titolideiparagrafi,ecc.)
30
http://www.w3schools.com/tags/ref_entities.asp YourInspirationWeb |http://www.yourinspirationweb.com/ 111
Aggiunto il codice di Google Analytics su tutte le pagine per tenere traccia delle statistiche di accesso utilissime in un secondo momento per analizzare landamentoeilsuccessodelsito.) CreatounaSitemapdelsitoutilizzandounodeitantistrumentidisponibilionline. Creatoilfilerobot.txt(usalosenecessario).
Validazionedelcodice
Assicuratidiaver scritto codice corretto.Sulwebpuoitrovarealcunistrumentimessia disposizionepervalidarelacorrettezzadeicodicichehaisviluppato: Validazione del codice (X)HTML (utilizza questo strumento 31 messo a disposizione dal W3C per validare le singole pagine oppure questaltro strumento 32 pereseguirelavalidazionesuuninterosito); Validazione del codice CSS (utilizza questo strumento 33 ) per eseguire la validazionedeifoglidistileutilizzatisultuosito; Validazionedelcodicejavascript.
Testdiaccessibilit
Assicuraticheiltuositosiaaccessibileanchepergliutenticheutilizzanobrowserdiversi daquellistandardcomepotrebbeessere,peresempio,unoscreenreader. Inpocheparole,unsitoaccessibiledeveessere: Visualizzabileenavigabileanchesenzailcaricamentodeifoglidistile. Difacilecomprensioneeusufruibileanchesenzailcaricamentodelleimmagini(ci sonoutenticheperdiverseesigenzepossonoaverdisattivatoilcaricamentodelle immagini,faiinmodocheperogniimmaginecisiauntestoalternativochepossa sostituirle). UsufruibileanchesenzailcaricamentodieffettiJavaScript(peresempio,unmen di navigazione realizzato interamente in javascript renderebbe il sito completamenteinnavigabileperunutentecheutilizzaunbrowserconjavascript disabilitato).
31 32
http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/ 33 http://jigsaw.w3.org/cssvalidator/ YourInspirationWeb |http://www.yourinspirationweb.com/ 112
TestdifunzionalitsubrowsereSistemiOperatividiversi
Primadimettereilsitoonlinesarebbeopportunoeseguirealcuni test di funzionalitper verificarne il corretto funzionamento anche su sistemi diversi da quello con cui lo abbiamosviluppato. Accertatidunquecheilsitosiacorrettamentevisualizzabileefunzionante: Su tutte le versioni dei principali browser (Internet Explorer, Firefox, Chrome, Safari,ecc.)esuiprincipaliSistemiOperativi(Windows,OSX,Linux,ecc). Adoperando le principali risoluzioni dello schermo utilizzate dagli utenti (16801050,16001200,12801024,1024768,ecc).
Testdifunzionalitsuimoduli
Inoltre verifica anche il corretto funzionamento di ogni eventuale modulo (contatti, prenota,ecc.)presentesulsito: Invia una mail al tuo indirizzo di posta elettronica e verificane la corretta ricezione. Controllacheiltestodellemailricevutasiaquellodefinito. Verificailcorrettofunzionamentodelleventualecontrolloantispam. Accertaticheilcontrolloerroriimpostatosueventualicampidelmodulofunzioni inmodocorretto. Assicurati che sia visualizzato un messaggio che indichi allutente lesito dellavvenutoinvio.
Analisidelleprestazionidelsito
Altro fattore da non trascurare il tempo di caricamento per ogni pagina del sito: infatti, alcune statistiche dimostrano che il tempo di attesa massimo da parte dellutente corrispondeacircatotsecondi,dopodichtendeadabbandonarelapagina.Capiraiche quindiindispensabileperilsuccessodelnostrositofareinmodochetuttelepaginesiano caricateinunintervalloinferioreaitotsecondi. Verificadunque: Lavelocitdicaricamentoeladimensionediognisingolapagina. La dimensione di ogni immagine e, se necessario, riducila con un programma di fotoritoccoottimizzandolaperlutilizzosulweb.
Che i CSS siano ottimizzati e utilizzati in modo corretto: in particolare cerca di evitarelaridondanzadiregolechepossonoessereaccorpatetradiloro. Le dimensioni dei file Javascript, CSS e (x)HTML, comprimendoli quando necessario.
Ultimiaccorgimenti
Nonostante non siano requisiti indispensabili per il successo di un sito web, ti consiglio infinediprendereinconsiderazione: La personalizzazione della pagina di errore 404 (file non trovato) in modo da offrire allutente la possibilit di scegliere un contenuto alternativo o di tornare facilmenteallapaginaprincipaledelsito. Lacreazionediunafaviconchepossafacilmenteidentificareilsito.
Conclusioni
Inquestocapitoloabbiamovistoqualisonoi controlli da eseguire prima di lanciare il sitoonline,inmododaaccertarcidinonavertralasciatoproprionulla. Tempofaavevotrovatosuunsito un elenco con i principali accorgimenti da tenere in considerazione; a tal proposito ho deciso di realizzarne uno anchio sulla base degli argomenti affrontati in questarticolo e di condividerlo con te 34 . Potrebbe tornarti molto utiledurantelafasediverificafinale.
Considerazionifinali
Conquestocapitolohaufficialmentefinelanostra guida completa alla realizzazione di un sito: insieme abbiamo affrontato il lungo processo che va dal primo incontro con il cliente alla messa online del sito. stato un lavoro duro ma siamo certi di aver dato il massimoinognifase. Anchesealcuniargomenticomeperesempiolindicizzazioneacausadellalorovastit e complessit sono stati trattati solo superficialmente, non preoccuparti: nostra intenzionecontinuarearealizzarearticolipimirati,conulterioriapprofondimentisu diversiaspettidiquestaguida.
34
http://www.yourinspirationweb.com/download6 YourInspirationWeb |http://www.yourinspirationweb.com/ 114
INDICEANALITICO
A
accettazionedellabozza.................................49 alberodinavigazione......................................26 analisidelcontenuto....................................107 architetturadellinformazione........................27 Assegniamounpattern ...................................69 attivitchecompongonoilprogetto..............17 attivitdasvolgere.........................................16 attributoALT.................................................105
D
disegnareillayoutdiunsitoweb...................31 Disegnareunsito............................................31 dissezionare....................................................65 doodles...........................................................59
E
esportarelesezioni .........................................68
B
bozzagrafica.............................................49;55 brief..........................................................11;12 budget............................................................16
F
favicon..........................................................110 figureprofessionali.........................................15 fogliodistile...................................................68 font.................................................................42 footer..............................................................75 FrameworkCSS...............................................66
C
cliente.......................................................10;49 collegamentiipertestuali................................87 combinazionidiparolechiave......................100 commenticondizionali....................................88 competenze....................................................16 comunicazione................................................50 Concept ...........................................................26 consulentecontrattuale.................................21 contrattodivendita........................................21 contrattodivenditapersonalizzabile.............21 contrattostandard ..........................................21 contrattualistica..............................................21 costietempidiconsegna...............................14 costipreventivati............................................21 cssgallery........................................................32
G
galleriafotografica..........................................83 galleryfotografica.....................................44;60 gestionedeiprogetti......................................17 GoogleAnalytics...........................................108 grafico.............................................................15
H
HeadingTags........................................103;104
I
indicizzareunsito...........................................98 indicizzazione..................................................99 InternetExplorer6 ..........................................88 ispirazione .......................................................31
P
paginadierrore404.....................................110 pattern......................................................35;69 pennelli...........................................................40 Photoshop..........................................33;37;67 Planner...........................................................17 posizionamento........................................73;98 posizionamentosuGoogle.............................73 prestazionidelsito ........................................109 preventivo......................................................14 programmazioneneurolinguistica..................50 projectmanager.............................................15 ProjectManager.............................................16 PSDin(X)HTMLeCSS.....................................78 pseudoclassi..................................................94 pubblicareilsitoonline................................107
L
lincontrodelcliente......................................11 lavorareperprogetti......................................15 loremipsum....................................................41
M
MetaDati......................................................101 MetaTagDescription................................107 MetaTagKeywords..................................101 MetaTagDescription....................................101 MetaTags.....................................................101 MicrosoftProject............................................17 modalitdipagamento ...................................21 motoridiricerca...........................................100
R
rapport............................................................50 realizzazionediunsitoweb............................15 realizzazionegraficadellayout.......................31 ricalco.............................................................50 ricercadellispirazione....................................32 ricomporreilsito............................................65 risoluzionedelloschermo...............................48 rispecchiamento.............................................50 robot.txt........................................................108
N
navigazione.....................................................27 notadilavoro ..................................................21
O
obiettividelprogetto......................................16 obiezioni.........................................................52 opensource....................................................17 operazionidiverificaetest ...........................107 organizzarelastrutturadiunsitoweb...........25 OSCON............................................................21 ottimizzareilposizionamento.........................99 Ottimizzazionemotoridiricerca...................107
S
sceltadelfontperititoli.................................42 schedulingdelprogetto..................................17 selettoredivaloreattributo...........................86 shinystat.........................................................52 sistemadicontrollo........................................17 Sitemap.........................................................108 statistichediaccesso....................................108 strategiadicomunicazione.............................26 strutturadiunsitointernet............................27 strutturaresemanticamente........................104
T
TagBody.......................................................103 tagTitle.........................................................100 teamdeicontenuti.........................................15 teamdelmarketing........................................16 teamdisviluppo.............................................15 telelavoro ........................................................53 tempodicaricamento..................................109 Testdiaccessibilit.......................................108 Testdifunzionalit.......................................109 thumbnail.......................................................44 trasformareunPSDin(X)HTMLeCSS............65
V
Validazionedelcodice..................................108 velocitdicaricamento.................................109
W
webconceptdesigner .....................................15 WebConceptDesigner...................................25 webdesigner..................................................15 webdeveloper................................................15 WebMarketingStrategist ...............................16 wireframe.......................................................28
I nq u e s t ag u i d ap a r l i a mod i t u t t i q u e l l i c h es o n og l i s t e pc h eg e n e r a l me n t ev e n g o n o e s e g u i t i n e l l os v i l u p p od i u np r o g e t t owe b , d a l p r i moi n c o n t r oc o ni l c l i e n t eel a c o n s e g u e n t es t e s u r ad e l b r i e f , f i n oa l c o n t r o l l of i n a l ed ae f f e t t u a r ep r i mad i me t t e r e i l s i t oo n l i n eel a n c i a r l ou f f i c i a l me n t e . P r e v e n t i v o , c o n t r a t t o , i s p i r a z i o n e , d e s i g n , s v i l u p p o , i n d i c i z z a z i o n e u n a mp i aec o mp l e t ap a n o r a mi c as ut u t t oc i c h ed e v i s a p e r ep r i ma , d u r a n t eed o p ol ar e a l i z z a z i o n ed i u ns i t o .
N a n d oP a p p a l a r d o
N a n d oa mmi n i s t r a t o r ed i E d i G r o u p , s o c i e t d i c o mu n i c a z i o n ee f o r ma z i o n ef o n d a t an e l 2 0 0 5 . i n o l t r eT r a i n e r Mi c r o s o f t ed o c e n t ed i We bD e s i g nc o na n n i d i e s p e r i e n z aa n c h ec o mep r o g e t t i s t ai nc o r s i d i F o r ma z i o n eP r o f e s s i o n a l eR e g i o n a l i ep r i v a t i .
S a r a P r e s e n t i
We bd e s i g n e r , l a v o r an e l c a mp od e l l ag r a f i c aed e l l os v i l u p p owe bd a a n n i ea l mo me n t oo l t r eac o l l a b o r a r ec o na l c u n eWe bA g e n c yg e s t i s c e c o ns u c c e s s ol as u aa t t i v i t d i f r e e l a n c es o t t oi l n o med i ma s c a r a d e s i g n .H au n ap a s s i o n ev i s c e r a l ep e r i l d e s i g n ,s o p r a t t u t t op e r q u a n t o r i g u a r d al ag r a f i c ap e r i l we b .

Guida Alla Realizzazione Di Un Sito

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guida Alla Realizzazione Di Un Sito

Caricato da

Copyright:

Formati disponibili

G U I D AA L L AR E A L I Z Z A Z I O N E

http://www.mascaradesign.it/ http://www.edigroup.it/ 3 http://www.yourinspirationweb.com/ 4 http://www.yourinspirationweb.com/autori/ 5 http://forum.yourinspirationweb.com/ YourInspirationWeb |http://www.yourinspirationweb.com/ 4

UrlperildownloaddiPlanner:http://live.gnome.org/Planner/Downloads YourInspirationWeb |http://www.yourinspirationweb.com/ 21

http://www.oscon.it/ http://www.oscon.it/download YourInspirationWeb |http://www.yourinspirationweb.com/ 25

http://www.oscon.it/forum/ YourInspirationWeb |http://www.yourinspirationweb.com/ 26

http://www.usabile.it/392009.htm http://www.surl.org/usabilitynews/42/hypertext.asp 12 http://webdesign.html.it/guide/leggi/44/guidaarchitetturadellinformazione/ YourInspirationWeb |http://www.yourinspirationweb.com/ 30

http://it.wikipedia.org/wiki/Wireframe YourInspirationWeb |http://www.yourinspirationweb.com/ 32

http://www.thecssgallerylist.com/ YourInspirationWeb |http://www.yourinspirationweb.com/ 35

http://www.yourinspirationweb.com/2009/05/15/qualifontutilizzarenellosviluppodiun sitoweb/ YourInspirationWeb |http://www.yourinspirationweb.com/ 36

http://www.w3counter.com/globalstats.php YourInspirationWeb |http://www.yourinspirationweb.com/ 37

Percreareungradevolecontrasto,nelrettangolodidestra,invecedilimitarcialcoloredi sfondo,inseriamounpatterngranulosoeffettocarta. YourInspirationWeb |http://www.yourinspirationweb.com/ 38

http://it.fotolia.com/ http://www.yourinspirationweb.com/2009/05/20/comeevitaredirealizzaresitiamatoriali/ YourInspirationWeb |http://www.yourinspirationweb.com/ 41

http://www.bullmanu.com/public/wordpress/?p=2851 YourInspirationWeb |http://www.yourinspirationweb.com/ 43

http://www.dafont.com/cocktailbubbly.font http://www.dafont.com/Bellerose.Font YourInspirationWeb |http://www.yourinspirationweb.com/ 45

http://www.1001fonts.com/font_details.html?font_id=964 YourInspirationWeb |http://www.yourinspirationweb.com/ 49

http://www.neurolinguistic.com/pnl/articles/hypnocomm/italy31hypnocomm.htm YourInspirationWeb |http://www.yourinspirationweb.com/ 53

Posizioniamoilbambinosullosfondo,impostandoilmetododifusioneascurisciperfar sicheildisegnosullosfondofacciacapolinodalquadrettochetieneinmano.Ilrisultato questo: YourInspirationWeb |http://www.yourinspirationweb.com/ 65

CometrasformareunPSDin (X)HTMLeCSSsenzaperdercila ragione?Parte1

http://www.constile.org/tips/minheight/ YourInspirationWeb |http://www.yourinspirationweb.com/ 72

<body> <div id="wrapper"> </div> </body>

Esattamentequellochevolevamoottenere:comepuoinotareilpatterncheabbiamo assegnatoaltagbodysiripeteverticalmenteandandosiadintegrareperfettamentecon limmaginedisfondoutilizzatanellasezionewrapper.

#container {width:920px;margin:0 auto;padding:20px;}

#containerFooter { width:390px; margin:0 auto; padding:0 250px 0 320px; }

CometrasformareunPSDin (X)HTMLeCSSsenzaperdercila ragione?Parte2

Aggiungiamodunqueun paddingtop di 90pxallasezionedenominatacontainerFooter cheavevamocreatonellalezioneprecedente,questodovrebbebastareaspostarelefotoin bassotantoquantoserve:

#containerFooter { width: 390px; margin: 0 auto; padding: 90px 250px 0 320px; }

#containerFooter img { padding-right: 2px; }

In questo modo diciamo al browser di aggiungere un paddingright di 2px a tutte le immaginichesitrovanoallinternodellasezionedenominatacontainerFooter.

Utilizzeremo un selettore di valore attributo per tentare di eliminare in modo professionalelinconveniente:

#containerFooter img[alt="foto 4"] { padding-right:0; }

Perconcludereillavoroconlasezionefooterandiamoadaggiungerelascritta:Guardale altrefoto,allineandolaadestrasottolefoto. Sulnostrofogliodistilecreiamounaclassechecipermettadiallineareiltestosulladestra delcontenitore:

E successivamente assegniamo questa classe al paragrafo che contiene la scritta da allineareadestra:

Definiamoancheicolorideicollegamentiipertestuali: YourInspirationWeb |http://www.yourinspirationweb.com/ 91

/* Link */ a {color:#ca4608; text-decoration:none;} a:link, a:visited {color:#ca4608;text-decoration:none;} a:active, a:hover {color:#621303;text-decoration:underline}

#containerFooter img {padding-right:1px;}

ul#nav { list-style-type: none; margin: 180px 0 0 0; padding: 0; }

allineiamo il contenuto a destra (float:right) e impostiamo a zero eventuali margini e padding.

ul#nav li a { padding: 0; margin: 0; float: right; text-indent: -9999px; }

li#home a, li#gestione a, li#struttura a, li#eventi a, li#contatti a { height:84px; }

http://www.yourinspirationweb.com/example/psd_to_xhtml/ YourInspirationWeb |http://www.yourinspirationweb.com/ 100

YourInspirationWeb |http://www.yourinspirationweb.com/ 101

YourInspirationWeb |http://www.yourinspirationweb.com/ 102

YourInspirationWeb |http://www.yourinspirationweb.com/ 103

http://www.dmoz.org/World/Italiano/ YourInspirationWeb |http://www.yourinspirationweb.com/ 104

http://googlewebmastercentral.blogspot.com/2009/09/googledoesnotusekeywords metatag.html YourInspirationWeb |http://www.yourinspirationweb.com/ 105

http://www.google.com/support/webmasters/bin/answer.py?answer=79812&query=+il+tag+t itolo&topic=&type= YourInspirationWeb |http://www.yourinspirationweb.com/ 106

YourInspirationWeb |http://www.yourinspirationweb.com/ 107

.grassetto { font-weight: bold; }

http://validator.w3.org/ YourInspirationWeb |http://www.yourinspirationweb.com/ 108

YourInspirationWeb |http://www.yourinspirationweb.com/ 109

Comeassicurarsidinonaver commessoerroriprimadi lanciareilsito?

YourInspirationWeb |http://www.yourinspirationweb.com/ 110

http://www.w3schools.com/tags/ref_entities.asp YourInspirationWeb |http://www.yourinspirationweb.com/ 111

http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/ 33 http://jigsaw.w3.org/cssvalidator/ YourInspirationWeb |http://www.yourinspirationweb.com/ 112

YourInspirationWeb |http://www.yourinspirationweb.com/ 113

http://www.yourinspirationweb.com/download6 YourInspirationWeb |http://www.yourinspirationweb.com/ 114

YourInspirationWeb |http://www.yourinspirationweb.com/ 115

YourInspirationWeb |http://www.yourinspirationweb.com/ 116

YourInspirationWeb |http://www.yourinspirationweb.com/ 117

YourInspirationWeb |http://www.yourinspirationweb.com/ 118

YourInspirationWeb |http://www.yourinspirationweb.com/ 119

YourInspirationWeb |http://www.yourinspirationweb.com/ 120

Potrebbero piacerti anche