anch'io Siti Web by Peter Parker

.:::;ì:i

;*:'#,'i;rfu ,ffi.'+tt :#E. -:.*t

'i+#F'

A-E='ffiE.flsàE

slfi Tanti

progetti pratici

.-'"

iiil

lla

-rè1,

j-rì(

t*..i rr,.i. Cr +.3 !!.-.1 +,'l -1 * :i -- §-^: j ir- rit- P , :&i -§! l .i.: ,. :; r:'+:i" - --. .:.: _! ", ,-..., ì! .i i'

-f

colleziona

ffiU §ruYffiffiruffiY ffi& ffiffituffiffirewffi

Usr*rr":* i! s*ftwfir# U[urst* ]r#r"ffitr#ffitrffi ffi&&# ffi#trffi#Freffi#ffi **fi gml§eri* Iink imsYì*gÉrci, vi#**

esHE

PER CHI INIZIA:

PER CHI HA GIA UN SITO E VUOLE FARE SUL SERIO: . Css: impara a ulilizzare i fogli di stile

maggiore fruibilità dei siti

. Cerca le foto in una banca dati online

tecnologia Asp per creare ed eseguire applicazioni seruer la

per Web designer e sviluppatori

. Professione aÉ director:

interattive e dinamiche

ffi'n

EDrzroNr MASTER

ffiillllllllllllflffilll I

il primo documento

italiano riconosciuto dal W3C con le linee da seguire per una

per formattare correttamente gli elementi di una pagina

. Programmazione:

Accessibilità:

stabilire le linee qualita visiva garantire la guida grafiche e

fiufllifirrr

oSt Web-Annoll nroB(26)de N'7/09 Edtore EdizioniN/asterSpA

Anch

24Febbtaia 2011 '€4,99-Perodictàsettlmanae Reg Trb.dlCs DLStrbutoreesc!svoper taa Parrn S.pA Codce SSN2038BB53

-.:

i-.

non perdere la 27" USCITA disponibile dal 3 MARZO ritì

lii "§

ll corso per imparare arealizzare il proprio sito o crearsi una professione

SitiWeb cH.lT_$BRA

Corso avanzato per Mac e iPhone

Conso avanzato

videe digital,e

t0LLEZl0t{ALl

TASTIERE "PIANOFORTE

TUTTI! Scopri come abbonaÉi

e ricevere tutti ifuscicoli comodamente a casa tua su http//abbonamenti.edmmter.it/rolhzionabili

§r§ffi

ÉDITOBET Ediloni Master S.p.A. Se.J-^ di Mllano: Viale Fodanini n. 23 20134 Milano Sede di Hende: C.da Lecco. 64 87036 Rende (CS)

sitiwèb Anno ll - n.rc B (26) del 24 Febbaio 201 PerJodìcità settìmanaìe Res. Trib. di Cs N' 7/09 Cod. ISSNI 2Ò38-8853 e-mail: anchiositiweb@edmasterìt

PRESIDENTE E AMMINISTfiATOEÉ DELEGATOI Massimo Sesti DIREilORE GENEBALE: Massimo Rizzo

preùo inùo del materialé difettato. La sostì' tuzione srà eftetiuaia se il problema sarà riscontEto e segnalaio entrc e non oltre 10 giomi dalla data effettiva di acquisto in edimla ; 1-' pur 'i verd ra a:lorizzati. facendo'ecle' timbro postale dì restituione del materiaìe

SEBVIZIO CLÌEHTI n.1S.50,50,51'

A'n..,,.,rq

,,r^.,

rss.m.00,01,,.,,,,,,*,,

@ sruidoclienti@èdÉasGiÉ

lnvrare | sLpporto o IeHoso.1 bJ5ld cniL\a a:

to.roni Mds,er Serui/iocrerl

Va'.-

2,27 24124 M ano

APREIRATI DIREITORE EDITOÉIALE: Massimo Mattone DIREITORE RESPONSABILE: Massimo Sestì

EESPONSABILE EDIIORIALET Roberto Catuone BESPONSABILE Dl PROGETTO EDITORI,ALE Maflo Bencivinni COLTABORATORI: F. Vaccaro. D- Cere. R. Speretta. U. Beiori. G. Candalise

REALIZAZIONE GRAFICAT CBOM-AIIKA s.r.l. ABT DIRECTOB: Mano Veltri RESPONSABILE GBAFICO Dl PFOGETIOT Lmnardo Cocerio BESPONSABÌLE AEEA TECNICA: Gìancaì'lo Sicìlia IMPAGINAZÒNE: E fizuti. F. GrandÌnettl PUBBLICITA: MASTER ADVEBTISING s.r.1. Via Fabio Filzi, 21 "29124Mtano e-mail: advetising@edmastelit f el 02 83 1 2121 1 . F ax O2 8312120'l

Costo aretGu doppìo del prezo dì copedina + € 5,32 (spedilone rcn coniere). Per richlesie con uo minimo dÌ tre titolir il prezzo dl copedina + € 5,32 Gpedìzione ccn coriere) Prjma di invìare j pagamenti, verìficare la dìsponìbilità delle cooie areh?te al num. 199.50.50.51.. La dchiesta contenente i Vs. datÌ 199.50.00.05", amqrafideÌlnomedellarjMsta,dovràèssereinviataviafaalnum. oppure via posta a EDIZIONI M.ASTER S.p.A ViaF. Ftlzt,27 - 20124 Milana, dopo avere effettuato il pagamenlo, srcondo le modalita di seguito elencate: "C,/a post, n.16821878 o vaglìa postale (inviando copia delia dcevuta del veEa" (a copia):

menlo insieme alla richiesta)i " Asseqno bancano non tmsfuribile (da ìnvia61 ìn busta chiusa iosieme alla richiesta): . Carla di credito Msa. Cartasì o Eurocard/Mastercard (nviaFdo la Vs. autonzzazione. ll numero di carta di credito, la data di scadenza, I intestatario della carla e il codice C1ry2, cioè le ultime 3 cifre del codice numerico riportato sul retro della cada)r - Bonifico barcano intestato a EDIZIONI MASTER S.p.A. c/Ò BCC Mediocmti S.C,AR-L. (inviare copia della distìnla insieme IBAN: IT85Q0706280881000000012000 alla riehiesid. SOSTITUZIONE: Qualora nei prodotl fossero dnvenuti difettì o impedeJoni che ne limitassero la fruizìone da Darle dell'ulente, è prryÌsta la sostiiuziooe gmtuita,

STAMP.A: Gc6ca Edlloriale Pnnting, via E. Matteì, 106, Bologna DISTRIBUTORE ESCLUSMO PER LITAUA: Pamni S.p.A., Via diSania Comelia. 9 - 00060 Fomello (Hm)

Finlto dl siampare neÌ mese di Febbraio 2o1

Nessuna pade delìa rivista può essere iin alcun modo nprodod, senza autohzzrone scritia di Edizìoni Master Manoscntli e fota odqinalÌ anche se non plbbli@ti non si reslitu ìscono. Edizoni Masier non sanà in alcun caso responsbile per ì danni direti elo ìndireti deriEnti dalÌ dilÉo dei programmi contenuti nel suppodo muhimediale allegato alla dvista e/o per eventualì anomalie degli slessi. Nessuoa esponsabllità è inolke, assunta da Edizioni Master rer danni derivantì da virus infomslìci nÒn dconosciuti daqli anlvltus uflicìali all ato delìa mastedzzazione dél suppo(o. NomÌ e marchl proteiti sono citaU senza indìmré irelativibreveti. Wndes è un marchlo egigtÉto di MicrosoftCorpoÉtion.

''Rjsoetare l'uomo e l'ambiente if; cui esso we e ìavora è una @ire di tulto cò che facciamo e di ogni d4isìone che prendiamo per assìcurare che le nostre opeazìonì slano basate sul @ntinuo migliommènio delle pefomance ambientali e sulla prevenzlone deil'lnouìnamento '

ffi L'( fl

ffi""n*"",or", ,*,.o r4ool N.slsl.EMAS \#Y

"i;.1+

1)"!:ì*-" ?

La linea estetica che

un sito deve seguire

Un "bel" sito riesce a calamitare l'afrenzione.

l'art director a stabilire Ie linee guida grafiche e a garantire Ia qualità visiva di un progetto Web E

'è poco da fare: anche se un sito è ben progettato, propone servizi interessanti e si contraddistingue per l'affidabitità e le prestazioni, ma è graficamente confuso (o, peggio, brutto), difficilmente avrà successo. Sul Web, cosi come in altri campi detla comunicazione, bisogna tenere in grande considerazione l'aspetto estetico dei propri prodotti. Non solo perché un sito bello riesce a carpire meglio l'attenzione dei navigatori, ma anche, e soprattutto, perché pagine Web di scarsa fattura estetica o, semplicemente, dall'aspetto "fuori moda" trasmettono un'idea generale di scarsa qua-

lità e affidabilità. Uart director è [a persona che, in un progetto Web, si occupa di definire i criteri estetici da seguire nelta reatizzazione det sito e di rendere tangibili

artistico. La direzione artistica di un servizio Web implica lo svolgimento di diverse attività che si alternano a seconda delia fase stessa progettuale, reaLizzativa o manutentiva

committente

(la

cosiddetta

brand identity). Un sito, ad esempio, dedicato alla scelta di una compagnia assicurativa per la propria auto deve avere un'estetica coerente, che sia

del sito in cui ci si trova. In semplice e rassicurante. linea di principio, la finalità deil'intervento dell'art direc- 2. TINEE GUIDA tor è garantire la qualità vi- E IMMAGINE COORDINATA siva del progetto, dando ade- Condivisi gii scenari generali guate indicazioni operative a con committente e concept grafici, interaction designer e designer, l'art director si occusviluppatori. pa di reatizzare una serie di materiati grafici e testuali 1. PROGETTAZIONE che serviranno per codifiDETTESTETICA care te tinee guida estetiNel momento stesso in cui un che del progetto. Tra questi committente decide di inizia- materiali, si contano bozze re un nuovo progetto Web, grafiche, raccolta di elementi ii committente, awalendo- e oggetti grafici standardizsi dell'attività di un concept zati riutilizzabili, loghi, tadesigner, definisce quella che volozze di colori, sfumature può essere definita come t'es- e temi ricorrenti. Accompasenza stessa del sito che dovrà gnati da adeguate istruzioni essere reaLizzato. Appena questo concetto di base è stato de-

concetti per loro natura ambigui e poco definiti, come "bel10" e "brutto".

finito, lArt director interpreta le indicazioni di committente

COSA FA ['ART DIRECTOR? Art director può essere tradotto in italiano come direttore

e concept designer, e ipotizza scenari estetici corrispondenti sia alte finatità e aLle caratteristiche principali del sito, sia all'immagine dell'azienda

testuali, questi

documenti, prodotti in formato digitale, ma spesso anche stampati su supporti cartacei, diventano riferimenti condivisi tra tutti coloro che realizzano il sito e hanno come scopo garantire il coordinamento estetico di chi lavora alla produzione del sito.

Sapere che un colore non può essere usato net design delt'home page, che Io stite

detle immagini nette news deve attenersi a quelto esemptificato nelle bozze grafiche o avere a disposizione riferimenti tecnici come l'angoto di arrotondamento degti sPigoti o [e dimensioni dei tratti dette linee sono, infatti, indicazioni utiti per mantenere omegeneo l'asPetto del prodotto finale.

CONTROTLO

DEI

RISUTTATO E MODIFICHE ESTETICHE NEt TEMPO Quando iI progetto è terminato,

qualora preveda una manuten-

zione nel tempo, ad esemPio per ta pubblicazione di notizie

l'arricchimento con nuove sezioni e funzionaLità, t'art director si preoccupa del mantenimento degti standard estetici iniziati. Se, a distanza di mesi o anni dal lancio del progetto, questa figura Professionale verificasse la necessità di restyling grafici dovuti, tra le altre cose, all'evolversi delte

tendenze estetiche dei siti o al mutamento dette finatità e degli obiettivi del sito, sarà suo compito definire nuove linee guida estetiche e coordinare le modifiche visive al sito.

COMPETENZE E CONOSCENZE La forte connotazione artistica ed estetica delllart director non deve trarre in inganno. ProPrio per la specificità det ruolo, per essere un buon art director non basta soto avere uno spiccato gusto artistico Personale, ma, soprattutto, occorre approfondire con studi tecnici e continui aggiornamenti quelle che sono [e tendenze nel mondo det Web design, delt'arte e del gusto comune, su cui si basa ta nozione stessa di "bellezza". Dal punto di vista degli studi, te scuole professionali e te università di design, ma anche queile che trattano di illustrazione, grafica o di disciPline umanistiche, come estetica e storia dell'arte, costituiscono percorsi formativi Privilegiati

Figura 1 - Tra le attività richieste all'Art director, c'è la realizzazione ditavole ehozze grafiche che riportano, per esempio, schemi di colori utilizzabili nellarealizzazione del sito

ligura2-

Tra

per chi vuole fare l'art director. Conoscere, inoltre, i timiti tecnici e le potenziatità dei linguaggi di programmazione per il Web e [e funzionatità dei software grafici, oltre che dei dispositivi con cui si Può accedere al sito Web realizzato, contribuisce a definire linee guida estetiche effettivamente concretizzabiti da sviluPPatori e grafici.

It KIT DEIL,ART DIRECTOR Dal punto di vista degli strumenti software e hardware, l'art director solitamente si serve di programmi di grafica e iilustrazione come PhotoshoP, Adobe lllustrator, Flash e Dreamweaver. Non sono richieste competenze tecniche avanzate nel campo delta Programma-

zione

o de[a realizzazione:

una buona conoscenza di base è già sufficiente. Da considerare, infine, la necessità di assicurare, sin dalla prima ProtoItpizzazione, la comPatibitità del prodotto finale con i vari browser oggi disponibili.

icompiti dell'Art director rientra lo studio di

loghi ed elementi che possano essere utilizzati da grafici e designer in modo ricorrente nel progetto Web

round, I'estremo della linea è disegnato con un semicer-

chio con il diametro largo quanto la larghezza della linea stessa; square, l'estremo della Iinea è disegnato aggiungendo un quadrato largo quanto la larghezza della linea ed alto la metà del l'i m postazione del lo spes-

sore della linea stessa;

Figura 15

o lineJoin, consente di spe-

Pattern di un'immagine

La funzione drawPattern crea rettangolo, riempendolo con un'immagine che è ripetuta in verticale (figura 15). Ciò è stato possibile perché, prima di invocare la funzione fittRect, abbiamo impostato la proprietà fittStyte con un oggetto di tipo CanvasPattern, ritornato dalla funzione createPattern, che ha preso come primo argomento un oggetto HTMTImageElement e come secondo parametro una stringa indican-

LA PROPRIEIA OLOBALCOMPOSITE

cificare come disegnare il punto di unione tra più linee indicando uno dei seguen-

te la modaiità di

ripetizione, che può essere: repeat-x, repeat-y, repeat (per entrambe le direzioni) e no-repeat. Vediamo, infine, quali sono le proprietà che consentono di cambiare lo stile di renderizzazione delle linee:

valori stringa: round, i punti di unione deLle linee sono disegnati come angoli arrotondati; bevet, i punti di unione delle linee sono disegnati come spigoli smussati; miter, i punti di unione delle linee sono disegnati aggiungendo un triangolo.

o lineWidth, il

suo valore è un numero di tipo double indicante lo spessore di una linea;

lineCap, permette di decidere come disegnare gli estremidi una linea indicando uno dei seguenti valori stringa: butt, l'estremo della Iinea è disegnato con una linea perpendicolare alla direzione della Iinea stessa;

La funzione drawlineStyle disegna una linea rossa con uno spessore di 10 unità, una linea verde con gli estremi che finiscono con dei semicerchi e due linee bLu unite in modo che tale punto di unione sia disegnato con degli spigoti smussati (figura 16):

OPERATION Ogni browser ha un supporto, più o meno completo, dei valori attribuibili alla proprietà g I obalCo m posite Operation. lnfatti, nel caso di Firefox, I'esecuzione della funzione drawlnCompositeMode, non renderizza correttamente le immagini sorgente e destinazione per i vafori darker e copy. Figura 16 - Esempi di differenti stili di linea

engolo c = 454

Figura 17 - Applicazione di un effetto di scaling

Figura 18 - Applicazione di un effetto di rotazione

doppio detla targhezza e con La seguente funzione doRotan !!rywio!!1 la metà dell'altezza risPetto te disegna un rettangolo rosso Canvas.gc.lingw!d!l' = I 9j ai valori originariamente im- (figura 18) che, però, aPPare ruotato, perché il canvas ha postati. ,c_q1va_1gq,qt19!esty._l"g llerll i caqyq-gc,!ee!nlqllQi Ciò avviene perché abbiamo subito una rotazione di 45o q4 qYe tqil-o' !.U' utilizzato, sul contesto grafi- sull'asse delle x grazie atl'in9 ! Y4-s-,g Canvas.gc.lineTo(1 0, 00); co, la retativa funzione scale vocazione del metodo rotate alla quate abbiamo Passato, al quale abbiamo passato tale come primo argomento, il angolo di rotazione espresso, valore 2 rappresentante un però, in radianti: EFFETTI DI fattore x di scaling e come TRASFORMAZIONE doRotate: function 0 [ Nel canvas possiamo abilitare secondo argomento, il valore ua1 degre_e !l;!! 4ll i seguenti effetti di trasfor- 0.5, rappresentante un fatto- vq gdg : lvla,!!f ! / 80,1 _!9919e1 mazione che incideranno sul- re y di scaling: // ruoto il canvas di 45" le successive operazioni di gc,ry!4!e( f d I i ? !!v?_s. disegno: ridimensionamento, doScale: lunction 0 t lalvag,gc.fillSlyle = #FF_000011i _ rotazione, e trastazione. Cqryqq,gg,fl!lRect00, 0, 25Q. 70I Vediamoli in dettaglio, Par- // apn!190 q1a !149,f9ryq2!9ne !_i scq [19 l tendo con ta descrizione della Canv-as.gc.scale(2, 0.5); #0000lFlli funzione doScate, che dise- canlag.sq.!!l!§!ylg = I Infine, la funzione doTrangna un rettangolo btu (figura c41vq1gc.,f!l!!q9!(20,_!0. 1 0!, 1 00); slate disegna un rettangolo 17) che sarà disegnato con il ] verde i cui punti di origine drawlineStyle: function 0

[

x=0 e y=0 inizieranno

alle coordinate x=50 e V=50 perché canvas ha subito una

traslazione verso questi ultimi mediante l'invocazione del metodo translate (figura 19): doTranslate: function 0

[

xqy l{_traslo !! q1n1q1.!!_!-0-p1xe,lpqr

Q1yas.gc.tra1§14!el50r!_0)i Cqnyaq.gc,trllStylg

C,a1v4s-gc.f!!lReq(Q,

Figura 19 - Applicazione di un effetto di traslazione

]

::t_00FF0Oli

0 2!0,

50);

Migliorare l'aspetto delle pagine Web lmpariamo a utilizzare i fogli di stile per formattare correttamente gli elementi di una pagina Web fogli di stile sono una sintassi (insieme di norme di scrittura) standardizzata per la "presentazione" dei contenuti presenti in una pagina Web. Sono un linguaggio con cui descrivere come devono apparire i testi, Ie immagini e tutti gli elementi delle nostre pagine attraverso una serie di "regole" da applicare ai diversi elementi. I fogli di stite in inglese Css, Cascade style she-

et, permettono di contro[are una serie di aspetti degli etementi di una pagina Html, dove per elementi intendiamo quanto racchiuso tra i tag Html:

. .

colore

dove

hl è il Tag, che viene "ri-

definito" dalla regola Css, detto anche selettore. Font-size la proprietà del selettore che andiamo a modificare (vedremo moite

rÈ51i,Ì:=

:li+li-

contenuti di una pagina Web dalle informazioni necessarie per "presentare" i contenuti stessi. Questa separazione faci[ta la gestione deile pagine. Grazie all'utilizzo ragionato dei Css possiamo modificare ta viparatamente

altre proprietà), mentre 140% è valore che impostiamo per la proprietà del selettore. iI termine sualizzazione velocemente, senza Cascade indica un'appticazione modificare contenuti presenti, "a cascata". Possiamo intuire il semplicemente sostituendo i file significato pensando che awemo Css che gestiscono la sua "renderegole che valgono per tutti i te- izzazione" (visualizzazione reasti di una pagina, poi regole che ltzzata dal browser sul nostro mosi applicano ai testi all'interno di nitor). Consideriamo il seguente, un certo "btocco" e, per finire, re- breve esempio di codice Html in gole che si applicano solo ai testi cui non sono utitizzate le funzioche rappresentano dei link att'in- nalità dei Css: terno di quei specifico blocco di codice Htmt. A questo punto, per 3t ì.!!ongr<em>{ont face="Arial, il testo dei link all'interno del H e!ye!i_cq, _sa ry se1lfll s!4 {l+.!_ blocco, abbiamo più regole che color= "#000033 "> saranno applicate in cascata. Nel I F()GLI DI STILE PER MIGI-IORARE caso di "conflitto" fra regole, la TASPETTO DELLE PAGINE. regola più "vicina" all'elemento !4 g!l> </9 m> _.4I g 1gr.Ih L Helyeti cq. considerato sarà quella che mo- <h2>_ {ont lqq =lryE! " "-+_111 sa ns-serif size= "visualizzazione" dificherà la di tale elemento. Approfondiamo color="#333333"> questo argomento nel prosieguo, "c,ARArTERllTf c trE lB ln q! pALl ql! con i prossimi progetti di questo c !§, -v{'rrAq G ! _[ ryMlc G!. </font></h2> capitolo.

le proprietà dei caratteri la dimensione la posizione

Vediamo subito un esempio di regota di un fogLio di stite. It risultato finale è Iaumento della dimensione dei caratteri det 40% per tutti i testi presenti ailinterno del Tag <h1>: hl t tql!-Stzq

]

140:/?i

VANTAGGI E SVANTAGGI

Css permettono

di gestire

se-

Possiamo notare come

formativo:

il testo in-

Per capire la portata di questi "vantaggi", possiamo collegarci al sito ur,tw.csszengarden.com e, cliccando sui Link a destra, vedere

stesso contenuto possa in diverse vesti grafiche modificando le regole Css come

essere presentato associate.

FOGTI STILE: LE REGOLE Iniziamo, creando le nostre prime regole. In basso, ii codice di una pagina Html che visualizza del testo: Figura 1 - lmmagini della stessa pagina con fogli di stile diversi tratte <lD0CTYPE html PUBLIC

da www.csszengarden.com

" !NI-3C!!ùTD

XHtml I.0 Transitional//EN" " http ://www.w3.

,I FOGL] D] STILE

PER

queste problematiche offrendoci i seguenti vantaggi:

MIGLIOMRE

UASPETTO DELLE PAGINI.

CARATTERISTICHE PRINCIPALI

DEI

CSS,

interrotto dalle informazioni di "presentazione" e risulti, quindi, poco

vANIAGGI E SvANIAGGIi sia

leggibile. Questo è uno svantaggio nel momento in cui dobbiamo modificare/aggiornare il testo delia pagina, in quanto è difficile trovare le informazioni da modi ficare. Inoltre, aggiungendo altro testo ci troveremo a ripetere queste "formattaziont" per tutti i paragrafi successivi. In questo caso lo svantaggio è duplice: la dimensione della pagina (in termini di Kbyte), che aumenta considerevolmente rendendo la trasmissione e Ia visuahzzazione più lenta; ta difficoltà di modificare la formattazione di una tipotogia specifica di testo, in quanto tale formattazione appare duplicata molte volte e necessita di agire su ogni occorenza. Css affrontano

risolvono)

codice Html più leggibile

org/IR/xhtml I /DTD/

xhmll {ransitional.dtd">

quindi più facile da aggiornare; facitità nel modificare l'aspetto di un intero sito modificando i fite dei Css che lo descrivono; maggior controllo sull'aspetto della pagina, in particolare su posizione e proprietà grafiche degli elementi della stessa;

possibilità di creare "nuovi" Tag (elementi) per gestire la wsualtzzazione person altzzata dei contenuti; possibilità di lavorare sulla pagina a livelli (layer), con un controllo preciso degli stessi; conformità con gli standard del Weh e migliore visualizzazione da parte dei browser e degli smartphone; maggiore accessibilità ai con-

tenuti

grazie alla separazione degli stessi dalle informazioni per la loro presentazione;

pagine più leggere da caricare e memorizzare, dato che vi è meno codice all'interno.

8859-1 "

</hqad>

.bqdy,

1!1>! foG!! D!sT!!UE! L&#82,17i4§lETT0

E!!E

MIGL!0B4RE

PAG

!,N

E5/h

<h2>CARATTE!!!T[H! PRIN c !!AL! D!l

!s_s, VnNTagG! E S,VAl,l-TagG!,

<F>!

C91pe1p.e_tto.tto d!

4h2>_

gqltrle sqparq

tamente i contenuti di una pag'na web dalle informazioni necessarie per pr qenlalg qugll!

qg!tgl'uu<p>

</body>

</html>

It risultato è visibile in figura 2. Modifichiamo ora la visualizzazione del testo, cambiando il tipo di carattere, la sua dimensione e il colore grazie alluso di alcune regole Css inserite allinterno della pagina. Vedremo, poi, come gestire queste regole in un file esterno. Per ora lavoriamo ali'in-

terno della pagina stessa.

</html>

yogllamq!ayqry19

<!D0CTYPE html PUBLIC " -l lWSCl IDTD

I1 codice che abbiamo inserito all'interno del Tag .head, ci permette di modificare il comporta-

font-size:,

mento det Tag <h1> come possia-

<h!ml rylns="http//www.w3.org/1 999/xhtml">

mo vedere confrontando le due immagini di figr-rra 2 e figura 3. Net dettagtio il codice seguente:

sono le proprietà che andiamo a modifi care. In particolare, lavoria-

font-family:, xHtm! !.0 T1q19!!!o ry //EN ll "

http//www.w3.org/IUxhtml /DTD/ 1

xhtml 1 {ransitional.dtd

<head>

i!_:

!tr f

<!--

o(lqryly{rf

color:,

mo su delle proprietà relative al font e al colore del blocco <h1>, (ci sono quasi 100 proprietà definite per llutilizzo con i Css, le scopriremo passo passo). Per finire:

al, Hqtueti g?,

sans-serif;

A1qal, H9lv9!1-cq,

</style>

lo111.q!4e1!40%;

color: #006;

!4ns

s_gr!!i

140%;

]

#F00;

ci permette di inserire le

regole

Css nella pagina Html su cui stia-

sono i valori da assegnare alle pro-

mo Lavorando. I1 codice:

prietà. In genere, ogni proprietà ammette un numero ristretto di valori da scegliere in un insieme. Nel nostro caso abbiamo:

ont-family: Arial, Helvetica,

sans-serif;

<body>

font-size: t40%;

<l'1>!

l,oGL! Dl S-IILE PER !!!GL!oRARE

color: #F00;

L&#82

;ASPEIr0_

D!IL!

PIG!l'l E</lt I

<h2>_q4!ATrEx!§rLcHE f E!!!c! pAL!

> DE

] !

c§s, vAl'rrAGG! E§yANTAGG!: </h2>

<p>l

rappresenta la regola Css vera e propria che modifica il comportamento del Tag <h1>. Nel dettaglio abbiamo questi elementi:

Css permettono di gestire

separatamente i contenutidi q1a p4S!ry wgb dq!!g ![91ma419{

ry9es94!9 pqq

presentare questi contenuti.</p>

Da notare che:

</body>

-e

h1 è ilselettore, identifica ilTag su cui

. !

una fra le famiglie di font riconosciute: Arial, Hetvetica, sans-serif; una dimensione in percentuale: l40olo; un valore esadecimale che identifica un colore: #F00.

dopo ogni coppia proprietà-

i.,..-,.-..J,---,..i=.,.:..,.-

I FOGLI DI STILf PER IIIIGLIORARE L'ASPETTO DELLE PAGI].IE CAR{TTERISTICHE PRNCIP.\LI

DII

CSS.

\INTAGGI

E S1".\IIAGGT.

I FOGLI

STILE FER MIGLIORARE L'ASPETTO DELLE PAGINE

CARATTERISTIC'HE PRINCIPAI,I DtrI CSS. \J^4.\I.{GGI E SVA\T.\GGI. lalipenìèrròilod1:ènn.r.parlEnc,neilolldìuniirÌap:ìgrr.\cbrlù;inlìtriurorinrlcs.riep..pr.iÈilrarèqk.n

tigura2-

La pagina

daltitolo "Corso Css" visualizzata

con i browser Firefox, Explorer e Chrome

-il,..ur

Figura 3 - La stessa pagina con regole Css per modificare

il titolo

vatore c'è un ";" (anche per llultima proprietà); ogni coppia proprietà-valore occupa una sua riga: non è necessario, ma è buona norma

per la leggibilità delle nostre regole;

nome delle proprietà è fissato rigidamente, dobbiamo ricopiarlo esattamente come appare nelle definizioni, che scopriremo assieme. Per quanto riguarda i selettori e i valori, in alcuni casi potremo scegliere liberamente il valore, in attri dowemo rifarci ai valori ammessi all'interno di un insieme predefinito.

XHTMT PER TUSO DEI CSS Nella pagina di esempio che abbiamo presentato ci sono istruzioni di cui approfondiamo ora il significato. Sono istruzioni che ci garantiscono che le regole Css che scriviamo vengano interpretate correttamente. Scopriamo il significato di:

frames che non considereremo, in quanto meno flessibili. tiindicazione del modello permette al browser di interpretare correttamente il nostro codice per creare la pagina da visualizzare.

Senza llistruzione D0CIYPE il modatità browser :uttltzza "Quirks", interna, per riconoscere i nostri Tag e le nostre regole Css. La modalità Quirks varia fra browser e browser e, quindi, non potremo essere certi che le nostre

pagine vengano visualizzate correttamente. Non dimentichiamo, allora, il D0CTYPE. Per quanto riguarda la seconda istruzione relativa a xmtns, stiamo indicando al browser dove trovare il namespace che descrive gli elementi del nostro D0CTYPE. Per avere una

pagina "ben formata" inseriamo anche questa informazione (molti editor Html inseriscono automaticamente queste istruzioni). Analizziamo ora l'istruzione che si trova all'interno del Tag .head> .rye-tq!tlp-qqq

1!D Q CIYP rlm E

u,!!!

";1iv'l,3

Q/iDT0

ts0885g-'t"

9,99

xhtml">

di codice che scriveremo nelle pagine in cui useremo i Css. Con la prima istruzione informiamo il browser che stiamo scrivendo del codice XHtml 1.0 (o standard corrente per i linguaggi per it Web in attesa di una maggiore diffusione de[Htmt 5) e di utiìizzare il modello transitional per interpretare la pagina che stiamo creando. Esistono altri modelli: strict e Queste sono le prime righe

m!!!1aq1!914rd!!L _<h-!r,[m!p= httfl/qqry,wQ.qrg/1

!9$=ll oltg ttt:lyp gllc

cq{q$="texUhtml; charset=

XHtml 1.0 Transitional//EN"

11lr{p11Ury,.ryrqry/H/rllm!l/DID/xh

jv3

cui fare attenzione è rappresenta-

ta nelìjesempio seguente: L&#821 7;ASPETT0

Si tratta del testo LASPETTO in cui il simboio dellapostrofo è stato sostituito dal codice &#8217;. Solo usando questa codifica ab-

biamo la garanzia che vedremo visualizzato [apostrofo correttamente. Per rispettare lo standard XHtml 1.0 ci sono altri caratteri che dobbiamo scrivere codificati quando vengono inseriti nel testo che vogliamo visualizzare:

& diventa &amp > diventa &$ Più in generale, le regole da seguire per rispettare 1o standard XHtml 1.0 transitional nella scrittura del codice sono le seguenti:

. . . .

Qui diciamo al browser quale insieme di caratteri stiamo utilizzando: IS0-8859-1. Questa informazione è fondamentale perché il browser possa visuali zzare corret-

tamente caratteri che digitiamo. Senza approfondire troppo, possiamo dire che

caratteri spe-

ciali, ad esempio quelli accentaèéòàùi, potrebbero apparire come simboli sconosciuti se non utilizziamo questa istruzione. In alternativa, potremmo utilizzare l'insieme di caratteri utf-8 che soddisfano, comunque, le nostre esigenze. Un'altra particolarità a

diventa &lt

nomi dei tag sempre in minuscolo;

doppi apici per tutti i valori degti attributi; un valore per ogni attributo; chiudere tutti Tag, anche quelli vuoti come .br /> o .img src="immaginejpg" />.

uno standard per la regole di visuadelle scrittura ltzzazione dei contenuti per il Css sono

Web. Gli standard vengono, però,

"interpretati" dai diversi produttori di browser in modo diverso. I browser più vecchi - IE 6.0 in particolar modo -, non applicano correttamente le regole Css. Ci saranno, quindi, dei casi in cui sarà necessario applicare dei "fix" alle regole per ottenere una visualizzazione corretta.

t.-' .

;.;!rÉ .

.ll:l!:i-'-::r:.:r::jJ.::.i,.1ii.ai

#;i;ìjl:i:ai:;|i;;=.,-.:..*,.r..,.r.,,,;,,rrrr;ji,,rr.,,r,r,,*,*,.,,,,,,r,,,,,,,*.r,-_ji!,li!;;i;ii!iÌli,;j.;ii.! 1. :: : :

:ilr.!aì:;a:::i :ì : ::.::i:tii.,;

Alla scoperta di Asp La

tecnologia Microsoft per la creazione di script

lato seryer che consentono di creare ed eseguire app

icazioni se rye r We b nte rattive e

d in a m ic h e

hi ha avuto navigare

modo di

Web

suoi tnizi, ricorderà sicuramente che era una collezione di semplici pagine Html stati-

che, collegate tra loro tramite link ipertestuali. Lo scopo principale, allora, era rendere disponibiti documenti correlati, come in un enorme ipertesto. Ben presto, tuttavia, con la diffusione di Internet è nata la necessità di una maggiore interattività tra l'utente e il server Web. UHtml, quindi, non era più sufficiente, e questo ha indirizzato gli sfor-

zi nello sviluppo di strumenti per rendere it Web sempre più "dinamico". In un primo momento venne introdotto uno standard che consentisse di far comunicare le richieste Http con una applicazione residente sul server, lo standard Cgi (Common gateway

interface). Uinterfaccia Cgi, purtroppo, presentava limiti non di poco conto. Ad esempio, anche per elaborazioni piuttosto semplici un Cgi può richiedere molte risorse al server e in certi casi ciò può portare a ritardi sulla rispo-

sta o a un eccessivo carico di lavoro sul server stesso: non

molto dinamico,

Componenti di 1#indow+ È possibile aggiungere o rimuovere componenti dit#indows XP.

Fer aggiungere tl rimuovere icomponenti. selezionarne la casella di conhollo. 5e la casella È ambreggiata. sarà in+tallata solo Farte del csmponente. Fer vi+ualiazarne il csntenuto, scegliere Deltagli. Componenti: l..t::',r.], - :i3r4:lilÈ:, ir+

Savices flSl

8.0

B.0MB

utlDok t xolÈsr

lVr l;'-1

5'=rvtzt dr rÈtÈ

htB r.

u -ì,ilD

=J +.{ Scrviri far

ìBhiR

Descri:iune: lnclude

il supporto Web e FTP oltre al +upporta di FrontPage. hansarioni. pagin* ASP, connessinni a database.

richiests. sull'unità:

Spazio totale su disco Spazio dirponibile

58.[

I3334.2

i--l-----l

4"",t"

I _-_-___t

Figura

llinstallazione di lis in Windows XP

ettaqli.. l

lf ffi;l

insomma.

Per superare questo genere di

problemi, Netscape prima

Microsoft dopo, pensarono di aggiornare i propri browser in modo tale che fossero in grado di interpretare particolari linguaggi, detti di scripting, grazie ai quali effettuare alcune sempiici elaborazioni. In questo modo si permetteva al server Web di alleggerire il proprio carico di lavoro e ciò diede una spinta decisiva verso te attuali capacità interattive del Web.

I fr tnturnut lnformahon . i _vÌ,.15N LrFlorer

Progeci 7,8 e 9

successo ottenuto dat client-side scripting portò in breve tempo allo sviluppo di linguaggi di scripting integrati nel server Web (serverside), come, ad esempio, in Netscape Enterprise Server. Seguendo questa tendenza, Microsoft, rilasciando la versione 3.0 di Internet information server (Iis), introdusse sul mercato degti scripting, la tecnologia Active seryer pages (Asp), con l'idea di sfruttare non solo le potenzialità degli strumenti server dedicati atta connettività, ma tutte le risorse offerte dat server Microsoft.

irì'

*fffi*t

rrrm*afi or §erYices

Introdgzione lnternet Info.mriion Serliaes 5.1 ,iiiS) è il sÈft;zio ,he ,.npll.ce '. Web o' w no_r,s ^P pubblicÈ2ione di informèzionl su una rÈte lnt.ènÈi. pc. ètl nFsrè ,i cor Le-Jro e .,q-rdt i d:

Il serur?ro web è iil ese.uzione.

fì all w

N6n è statà inrPastÀ1a una paqtna Web PreddÌnità EEr gti utenti Chiurqre tenti di €onnereEi a qo*13 §tro visuala.rà àttralmente una Pagilta in tase di alleflimento. Il seruer Èeb rn uio hd rndividunto r sequenti filè . onre po'sffirc4,,," weL predefinde: AIudIrente def.uh."spr,detautt.htmy'efautt.asp,inde,.hrm,risEtad.a.p. esi*e iols isstaÌ.asp.

Per agqiunqere do.umenii al sita Web ptedefinito, sàlvàre i

.:\inetFub\ìffitoot\. W ^

Pr6enlaziotrè dr Irs 5-1 r" lnlnrmdr,Ò, se^r.es usr 5 I Micrusofi vJindcrrs XP Proless oEl Er"** int€gra effl.a.ra del freb .el si§tÉNa cperaiivo tqrndo{s. Coi M è sempli.e L

condivrde.e file e stÈmpanl e c.eare èpÈlcazicni E. p!bblicare le inlormèÈioni sll web in tuiiÈ si.ù.e.2ò. iu mcdo da misÌioEre ! § stema di ccndrvi:ioo€ dèlle rnlcrmazronr della propria crsènizzaziene, Ils è uca Flafrafo.mè che consenie dl disi.ibui.e e e .eèiizzare soluzronl Cr .*mnlercis elee.rri.o.cn lè mBtsimè 5lcùrezza

esplorèzione della documentazione, è possib,ile e . r( ,.1 p rlsEnÈe sin(mnizzò E .a 13 51nq13 sommario. utilizlare l3 s.heda cercò per individ!iae un argonìento da visuaLzzaae, fère alic sLl re,dt.uo..llegère'1.,41,,n6r 5g o sch-dc so$rmado e infine €ul pulsante SincEonizza Lè

,ile in

porucr - derlarEo^r=rlo :iPlto e'-

Bg - Fpc5,bil.!es,'e ll5t èìte E:r..ce

6e$icne .cmputer dr vrndcYri XP oppure mediante I'essuzion€ di s.rlpt. L Lrtrii?zo dellò ccosole ccnrente inolife di ..ndrridere cce altri ute.li iramite il BÉb ll .onienùii ier liti e deL se.ver qÈstltr con Ifte.net lnfn.mation SÈrviEes. L a..esse allo srÈF-in di 1Is i.amite lts scnsaie ccnsente di conliqurèrè € p.oprietà e le impeÉiazrani 9iÙ .cmuni d un ausl;ctszicne. è Èarsible

. Inddlldzione di IIs: pro€edlrE Pèr installtsre ils, ÈggiunBere e rimuovere conponenti ed elenrare le dlredory rimènenb dopo la proEedurÈ di disinstallÈzione.

. Funziondlità: elenco delle nuove funziEnèlitè Internei Infsmrèt,on s*ices 5.1 e delle

funziEnÈlità già presenti nÈlle tersionÌ

utilizère tè

tigwa2 - Attivazione di lis in Windows

Anche oggi, per i Web designer già capaci di realizzare contenuti Htm[, gli script sul lato server scdtti in Asp costituiscono un modo semplice per iniziare a creare applicazioni Web reati più compies-

dello Com. Con Asp, infatti, oltre ai moduli di script VBScript e JScript già forniti di default, è anche possibile insta[are moduli aggiuntivi di script per Perl, Rexx e Python forniti da aitri produttod.

se. Se, ad esempio, si desidera

memorizzare le informazioni di moduti Html in un database, personalizzare siti in base alle preferenze dei visitatori o utilizzare funzioni Html diverse in base al browser, Asp offre soluzioni a[ probtema di indubbia sempticità. Se si conoscono già linguaggi di script quali VBScript o JavaScript, imparare a usare Asp non presenta particotari difficottà. Inoltre, se si desidera sfruttare la competenza maturata con attri linguaggi di script, ne[e pagine Asp è possibile utilizzare qualsiasi linguaggio di script per cui si è installato un modulo di script compatibile con il mo-

r.d,caLd

èll'interno del somftìari.. . Iqtcj!j!é!g: informèzioni tsÉgiornate per l'installè?ione e I utili?zo cèrreto di Internet lnformètion S€rvices.

Gesùone inteerata

lI5. SopB alsr slilùpÈat3 un lrtc

A COSA SERVE E COME FUNZIONA ASP Detto in poche parole, le pagine Asp sono completamente integrate con i file Html, facili da creare e capaci di utilizzare te diverse risorse disponibiti su un server Web. Grazie ad Asp è, quindi, possibile realizzare un sito che possa sfruttare [e diverse tecnologie in modo trasparente. Una pagina Asp è un file testuale che contiene tre parti: L. Testo 2. marcatori Html 3. comandi di script Come detto,

pagine

Asp

impiegano al loro interno tinguaggi di scripting. A differenza dei linguaggi di programmazione, i tinguaggi di scripting hanno una sintassi facititata e, in genere, offrono funzionalità ridotte, ma sufficientemente potenti da consentire la reaLizzazione di complesse applicazioni Weh.

I file Asp sono identificati all'interno det server mediante l'uso dell'estensione .asp. Grazie a questa, il server riconosce il tipo di file in questione e, utilizzando t'appropriato interprete (asp.dll), esegue il

processamento della pagina. Poiché gli script vengono eseguiti sul server anziché sul ctient, server Web svolge tutto il, tavoro necessario per Ia generazione delte pagine Htm[ inviate ai browser. Gl,i script sut lato server, quindi, non possono essere copiati facilmente, poiché a[ browser viene restituito solo il risul-

GESTI()NE DI INTERNET INF()RMATI(}N SERVICES . Procedura guidata per la creazione di Lo snap-in lnternet lnformation Services presente in Windows XP directory virtuali; o Possibilità di amministrare le installae Gestione lis presente in Windows Seven, sono gli strumenti zioni di lnternet lnformation Services su forniti da Microsoft per la gestione una rete. del server lis. Grazie ad essi Per aprire Io snap-in lis: dal menu di awio è possibile gestire numerose scegliere lmpostazioni e quindi Pannelcaratteristiche e funzionalità del lo di controllo. server Web lis, ad esempio, per Aprire Strumenti di amministrazione, rendere disponibile il contenuto, infine aprire lnternet lnformation Serconfigurarne I'elaborazione delle vices. richieste, le impostazioni di sicurezza, ecc. Gli sviluppatori Nota: Lo snap-in lnternet Information Serpossono utilizzare questi stru menti vices è uno strumento amministrativo per per verificare le impostazioni del lis 5.I che è stato integrato con altre funselver di sviluppo come se si zioni di amministrazione di Windows 2000. trattasse del server di produzione in Nelle versioni precedenti questo strumento cui effettivamente si pubblicheranno era denominato Gestione servizio Internet. le applicazioni Web. Avremo modo di utilizzare e analizzare u lteriormente GESTIONE IIS IN WINDOWS SEVEN questi strumenti nel corso dei ln Windows 7, la versione numero 7 di lis successivi progetti. porta con sé anche un nuovo strumento di gestione chiamato, per I'appunto, GestioGESTIONE IIS IN WINDOWS XP ne lis. Per aprire Gestione lis occorre fare Lo snap-in Iis è lo strumento fornito in clic sul pulsante Start, quindi scegliere Windows XP per la gestione di Iis 5.1. Lo Pannello di controllo. snap-in include le seguenti caratteristiche: . lmpostazioni aggiuntive per il server, ad esempio per Ia gestione di un sito Ftp, per isolare applicazioni, mappare tipi MIME o designare moduli di script aggiuntivi;

Nel Pannello di controllo fare clic su Sistema e manutenzione e poi su Strumenti di amministrazione. Infine, in Strumenti di amministrazione è sufficiente fare clic su Gestione lnternet

lnformation Services (lis).

tato dello script e gti uten- Nella pratica, ecco cosa sucesempio un database); possono ti non visualizzare cede quando si utilizza una 3. il risultato dell'elaborazioi comandi script che hanno pagina Asp: ne viene inviato al browser creato ta pagina visualizzata. Se provano a visualizzare il codice delta pagina, vedono solo l'Html risultante dall'elaborazione degti script lato server più l'eventuale codice di script lato client come, ad esempio, JavaScript.

browser dell'utente richiede una pagina Asp; 2. it Web server interpreta i comandi definiti net codice Asp, se necessario coinvolgendo altri componenti presenti sul server (ad L.

per ta visualizzazione. Da quanto detto fin qui, si capisce che, per far funzionare ie proprie pagine Asp, si ha bisogno di un server Web. Si tratta di un processo sempre attivo su una macchina con-

Àltiirazio:r* r: ii:.:lti.;azi*ne deiie f urrìcnalità 1.11i:rCor,'rs {J fun:icnalità, :el*ìonare la relativa casella dì contrqilo. Per disettir.arla. cle:elsicnrre la relativa casella di ccntralle {Jna casella piene ìndice parte della funzionalità, ':he È attivata :cla Per attiuare sna

G ,

lltErnEt Jnfcrnlèticn 5Er.,cE: Ser. er FTF

G Senizi '*.eb , A Funzrcnalttà Funzìcnalìta ::r i4 ,

:sP,I

HTTP,-cnrunr per

lc:rìluppo

applirazìonì

-,,

]ET

. a61 iÉ. EstEn.iìbiliià,NET l;,j - EltenliÉni I5API i,fl , Filiri ISÀPI llil. ler,'er-5idelnclude l-f,l

' u

t:,

)';t -- i; t,

Fun:icnalrtà prr:tr:ioni

: "d Sicrrtea Strumenri di llEltionE U/Eb -E-

Figura 3 - Le pagine di benvenuto e della guida in XP

nessa a Internet, che ascolta richieste Http su una porta (ia porta 80), reperisce it documento (oppure esegue

it programma/script)

richiesto e restituisce il risultato al ctient Web. Inoltre, la facoltà di interagire con applicazioni Com, consente alle pagine Asp di co[oquiare con siste-

mi di posta etettronica (ad

esempio, Smtp server) oPPure interagire con applicazioni Microsoft come Mts (Microsoft transaction manager e Message queue seruer). Infine, attraverso la tecno[ogia Activex, è possibile estendere le funzionalità di Asp, progettando, ex-novo, altri oggetti.

INSTATTAZIONE DI IIS IN WINDOWS XP Internet information services non viene installato Per impostazione predefinita in Windows XP Professionat. Per installare Iis e per instatlare o rimuovere componenti, oc-

Figura 4 - La pagina di benvenuto di IisT

corre fare clic su Start, selezionare la voce Pannetto di controtto e poi Instattazione appticazioni. Nella colonna sinistra delta finestra di dialogo che si apre, bisogna, quindi fare clic su Installazione componenti di Windows. Si apre una nuova finestra in cui, nell'elenco Componenti di Windows, occorre selezio-

nare Internet Information Services (Iis) (figura 1). Dopodiché, è sufficiente fare clic su Avanti e seguire le istruzioni visualizzate.

Per verificare che it server Web sia insta[ato e funzioni correttamente, bisogna aprire i[ browser e digitare http:// localhost. Se il tutto è andato a buon fine, si dovrebbe leggere [a pagina di benvenuto del server e un'altra finestra con la guida. Dopo l'installazione di lis, oItre ai file di configurazione, viene creata un'apposita directory "C:\InetPub".

Al suo interno troviamo ulteriori carteile (figura 5). Tra queste, la più interessante per i nostri scopi è la directoty "wwwroot". E denominata home directory ed è la posizione predefinita in cui pubblicare i nostri siti e [e pagine Asp.

INSTALIAZIONE DI IIS IN WINDOWS 7 Anche in Windows 7, Iis non viene installato d'ufficio. Fortunatamente, anche in questo caso l'operazione è Piuttosto semplice. Clicchiamo su

Start/Panetto di controtlo, selezioniamo Programmi e

funzionatità e,

successiva-

voce Attivazione o disattivazione delte funzionalità Windows (figura 2). Netla lista che si presenta, spuntiamo ed espandiamo la voce Internet Information Services. Possiamo osseruare che non tutte te voci figlie sono state selezionate in mente,

TECNOLt)GIE SERVER SIDE disporre gratuitamente del server web lis (lnternet lnformation Service) e di uno dei linguaggi di scripting sviluppati dalla casa di Redmond: Asp o Asp.NET. Quest'ultimo è un linguaggio orientato agli oggetti e richiede le competenze di un programmato. un server Web; re esperto. Sul fronte Database, è possibi. un database management system; le affidarsi al semplice Access (compreso . un Iinguaggio di script. nella suite Microsoft Office), a MySql o a un server Microsoft Sql. Chi vuole sviluppare applicazioni Web Anche se, di norma, un server Web ridinamiche utilizzando software open siede su sistemi hardware dedicati, lo si può installare anche su un normale persource, dovrà rivolgersi all'ambiente denominato Amp. L'acronimo indica una piattasonal computer, con lo scopo principale forma che prende il nome dalle iniziali dei di sviluppare e testare il proprio sito e Ie proprie pagine web in locale, prima di componenti software con cui è realizzata: pubblicare il tutto online. Apache, MySql e Php. Normalmente tale configurazione gira su Linux, ma è anche Anche I'impiego di un database è ormai possibile lavorare su Windows e Mac. fondamentale per lo sviluppo di applicaPiù strutturata ancora è invece la tecnolozioni web. La maggior parte dei servizi gia Jsp (Java Server Page) che consente forniti dai moderni siti web è possibile grazie ai risultati delle cosiddette query la creazione di pagine dinamiche utiliz(interrogazioni) eseguite su database. zando il linguaggio Java. Le pagine Jsp Si può implementare il proprio ambiente di vengono elaborate da un Servlet Engine sviluppo scegliendo fra diverse piattaforJsp (come ad esempio Tomcat) presente sul server Web. Anche in questo caso, me e tecnologie. AI momento, le tecnologie più utilizzate si come già detto per Asp.NET, si tratta di possono suddividere grossomodo in base una tecnologia piuttosto complessa che richiede notevoli competenze nell'ambito al sistema operativo e al linguaggio di script in uso. Chi si affida a Microsoft può della programmazione. Per iniziare a realizzare pagine che utilizzano un linguaggio di script funzionante su server, è necessario disporre dell'ambiente di sviluppo adatto, composto essenzialmente dai seguenti componenti:

Figura 5 - La cartella inetpub e

il suo contenuto in XP e Seven i=..:i:i' i :1ii.:iri: !.1{:1

;iÈì;ìÌ1:ii:t

i;:-;;-::1 i,'11.: li'|:! !.:

minati da Microsoft comandi script primari, in quanto etaborati utilizzando il linguaggio di script primario. Per impostazione predefinita, il tinguaggio di script primario

Lx,i,§ ii

':":1""::.",'

è VBScript, ma è anche possi-

bile impostare un linguaggio predefinito diverso come, ad esempio, JScript. NeII'esempio che segue, creiamo una pagina Html contenente un semplice comando script: .Htm!,

Figura 6 - La nostra pagina in esecuzione

<hody> Dala e o14; 1"/"= no\O

o/">t

automatico. Conviene farlo ambiente di sviluppo, cre- </bgdy> adesso, avendo cura di atti- ando una cartella con nome </Html> vare la casella Servizi Web e "Miosito" all'interno di tale tutte le voci al suo interno, directory. Fatto questo, siamo In questo codice abbiamo rifacendo particolare attenzio- finalmente pronti a iniziare la chiamato Ia funzione Now0 ne a tutte le Funzionalità scoperta del linguaggio Asp. di VBScript che ci restituisce per [o svituppo di applica- Uno script sul lato server è co- la data e l'ora correnti. Quando zioni, tra cui, soprattutto, stituito da una serie di istru- it server interpreta questa paAsp. Clicchiamo, infine, su 0k zioni che consentono di inol- gina, sostituisce .%= NowQ per confermare. Dopo un paio trare i comandi al server Web o/o, con il risuttato della fundi minuti la procedura avrà in ordine sequenziale. zione (la data e l'ora correntermine e potremo verificare Chi ha già svituppato siti Web ti) e restituisce la pagina al

avrà probabilmente familiarità con script sul lato client, digitando http://tocathost come JavaScript, eseguiti nel nella barra degli indrrtzzi browser. Nei file Asp gti script del browser. In questo caso, sono distinti dat testo e dai il corretto funzionamento del tag Html tramite delimitatori. server ci verrà confermato Mentre nel caso, ad esempio, dalla pagina di benvenuto di del linguaggio Html questi IisT (figura 4). delimitatori sono i simboli di minore (.) e maggiore ('), tA PRIMA PAGINA ASP che racchiudono i tag Html, Per creare i file asp è possi- Asp utilizza i detimitatori <% bile utitizzare qualsiasi editor e o/o> per racchiudere i comandi testo. Per pubblicare un file di script. È possibite inserire asp sul Web, si deve salvare il tra i delimitatori qualsiasi cofile in una directory all'inter- mando vatido per il linguagno del sito Web: C:\Inetpub\ gio di script che si intende wwwro ot. Possiamo, quindi, utilizzare. I comandi inseriti iniziare a impostare il nostro tra i delimitatori sono denocorretto funzionamento del server, anche in questo caso

l:i:#;iijÈiiiriii*

ili:';i":,';''i:'::'

browser per la visuaiizzazione finale. Per verificarne corretto funzionamento, occorre aprire, quindi, il file dal brow-

ser, digitando

il relativo Url

(ad esempio: "http://local st/ mi o sito/ miofile. asp ") .

È bene ricordare sempre che

le pagine asp devono

essere

elaborate dal server e non è quindi possibile richiedere un file asp digitando il reiativo percorso fisico (ad esem-

pio: "C:\Inetpub\wwwroot\ miosito\miofite.asp"). Se tutto è andato a buon fine, dovremmo vedere

nostra pagina Web che mostra la data odierna (figura 5).

-,,,*r...,.,,.*,..,.,,...,..-,

,..;jli=ii:iiliiiij;

Grafi ca per il Web Nato per facilitare la pubbltcazione di tmmagini su lnternet, il formato Png è diventato popolare

.9.§*".*#r!§§§!J!!\

f nsoursrrr i ! §

Livello:base

Leggi anche:Volume 1, Web design/Gmfica/ Progeto 8

i |

anche in altrr contesti Ecco i suoi segreti el

1.995

un gruppo

di sviluppatori indipendendiede vita al formato

grafico Png (Portabte network graphics). 11 loro obiettivo era trovare un'alternativa gratuita e libera all'aliora popoLarissimo e usatissimo Gif, su cui i detentori del brevetto introdussero il pagamento di royalty. Solo nel gennaio del 1"997, però, il formato fu riconosciuto come standard dal World Wide Web Consortium (W3C, urww.w3.org).

Come il Gif, anche il Png è un formato per la memorizzazione di immagini grafiche, Ie cui caratteristiche tecniche lo rendono particolarmente adatto a un uso orientato al Web. Innanzitutto, le immagini archiviate con questo

di grigi, ma non riesce a gestire le animazioni, che, agli albori di Internet, hanno fatto la fortuna del Gif.

NATO PER

IL WEB

Grazie alla sua capacità di gestire te trasparen ze, Png viene utilizzato per la realtzzaztone dei layout

Un particolare della stessa immagine

delle pagine Internet, anche in virtù del supporto nativo da parte di quasi tutti i principaìi browser. Ii grande escluso è Explorer, che fino alla versione 6 non aveva il supporto per le trasparenze (introdotto solo con le versioni 7 e 8) e che, tuttora, soffre di problemi nella gestione di questo for-

inferiore, ma dimensioni più contenute

in formato Jpeg (a sinistra) e Png (a

destra): la prima ha una qualità di poco

:utiltzza, invece, un algoritmo De-

flate di tipo lossless (senza perdita di dati), che mantiene tutte le informazioni relative aLlimmagine, riducendone solo le dimensioni finaìi.

mato.

UNA SFIDA AD ARMI PARI

di cotori a 24 bit (Rgb, Red green blue) o a32 bit (Rgba, dove A

DOPPIA EFTICIENZA Le dimensioni dei fiie archiviati in formato Png riescono a rimanere compatte grazie altuso di

Nato per competere con Gif, Png si comporta bene anche se confrontato con il formato Jpeg, del quale riesce a superare la qualità

sta per Atpha channel, owero il canale delle trasparenze), rispetto agli 8 bit (con cui è possibi le riprodurre solo 256 cotori) del formato Gif. Rispetto a quest'ultimo, inoltre, il formato Png può riprodurre anche immagini in scala

una doppia compressione. La prima, di tipo lossy (con perdita di dati), simile a quella rttltzzata dal formato Jpeg, permette di ridurre le informazioni da visualizzarc avideo, anatzzando il colore dei pixei adiacenti. La seconda

a scapito però di dimensioni maggiori. In Linea di massima, l'utitizzo del formato Jpeg viene consigliato per [e immagini fotografiche e Png per quatsiasi attro contenuto grafico. In ambito fotografico, inoltre, Png paga il prezzo di non supportare i dati Exif usati per tenere traccia di informazioni, come la data di creazione, la fotocamera uutilizzata, i valori di esposizione e altri dati accessori.

formato possono avere una scata

TIFT Lossless No

Sì

24/ 48

brt

senza troppi problemi,

Foto d'autore per il sito Ecco come cercarle drrettamente dal desktop del

f nsoursrrr i

cornputer in una banca dati onltne, con immagtni e video dedicati ai Web designer oogle è uno degli strumenti migliori per trovare immagini. Chi gestisce un blog o un sito, molto spesso, usa proprio la funzionalità Immagini del motore di ricerca. Non sempre, però, questa soluzione è applicabile. Google, infatti, nel proporre i

risuitati di una ricerca, non distingue le immagini coperte da copyright da quelle utitizzabili liberamente. Per evitare di imbattersi in problemi di questo tipo, è megLio affidarsi a un servizio ad hoc. Ce

ne sono molti. A titolo di esem- loro volta, messe in vendita. Per pio parliamo di Fototia (www. usare veLocemente il servizio, fotolia.it), servizio ontine che possiamo fare ricorso al tool Fopropone una banca dati con im- tolia Desktop 2.0, compatibile magini libere da didtti (royat§ con Mac 0S X, Windows e Linux. free), di alta qualità e a prezzi Permette di cercare direttamente abbordahili, soprattutto per chi dai desktop nella collezione di immagini di Fotolia. IJapplicazione opera in ambito professionale. Per ricercare e scaricare un'im- è disponibile attindirizzo ttlw,ttt. magine da Fotolia, occorre es- fotolia.com/desldop. Per instalsere iscritti al servizio. Attivato larla basta che sul computer sia l'account, è possibile scaricare le presente Adobe Air 2.0 (it link è immagini di altri utenti e pro- http :// get.adobe.com/ air) e avporne di proprie, che saranno, a viare lleseguibile.

ANCHE IOCCHIO VUOLE LA SUA PARTE Ecco come scaricare fotografie di buona qualità da usare sul nostro sito

i§{= F{Xl {il}§Er" s^L *r}:!{t§ ;dÉ*} Per installare Fotolia De-

sktop 2.0 awiamo I'ese-

ffi Per iscriversi al servizio, }Wclic in alto a destra su M Sign up. Verifichiamo

guibile, accettiamo le condizioni di licenza e impostia- che la connessione lnternet sia atmo le preferenze di installazio- tiva. ll browser si apre alla pagina ne. Completata la procedura,

primo awio impostiamo la lingua italiana e clicchiamo su Ok (se non siamo ancora utenti Fotolia).

di registrazione. Inseriamo i nostri dati: in pochi istanti riceveremo una e-mail con un link per attivare l'account.

ffi§ffi§&*ffi§ m *ffiffiffi8Y§ Con il campo testuale effettuiamo le ricerche. Cliccando su Gompra crediti, in alto a destra, possiamo acquistare crediti. Col link a sinistra organizziamo le foto che ci interessano in gallerie e le met-

tiamo nel carrello. ll tutto, owiamente, prima di acquistarle.

Haccessibilità parla fi nalmente itatiano ;{

[lwa rilascia il primo documento ufficiale in lrngua

§ $

1.".{,,".r*'*'*'**'-

salienti da seguire nel realizzare contenuti Web

quotidianamente, facendo grandi passi verso la multimedialità (llesempio più recente è la futura specifica W3C Htmt 5), ma soprattutto verso ta multicanatità, ossia la disponibitità su differenti tipologie di media. Con llevoiuzione delle tecnologie Web based è, pertanto, necessaria un'evoluzione delle tecniche di svituppo per garantire che tutti gli utenti possano fruire delle

Questa evoluzione tecnologica ha

sibility guidelines): la versione ufficiale in lingua inglese è disponibile allindirizzo Web vruw, w3.org/TR/WCAG20, mentre la versione ufficiale in lingua itaLiana è raggiungibile atl'indirizzo

portato

W eb

informazioni e dei servizi erogati tramite applicazioni Web. VERSO UN+ MAGGIORE

FRUIBILITA DEI SITI

il consorzio internazionale W3C (Wortd Wide Web Consortium, vvww.w3.org) al rilascio - dopo 10 anni di lavoro - di una nuova versione delle linee guida per Iaccessibitità dei contenuti Web (Wcag, lVeb content accesf*Sf$i::iei.le

ng/=l

v,rww.w 3 . or g/

chiama "accessibilità" che, a livello normativo italiano è definita come "la capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalle conoscenze

gt,/LL-

. §access Criteria * ?**§:qr§*§x*E

l4rjf

Slanrd*,,-d

. Princlples . Guidelines

§uccess Criteria

. Conforma*ce

{5§ sr,'{,:*:gi .. -j *** *sgi:iii* i**it*i*; r" s,": pq** ;"lrt*:

{'dli;:..ja,

. *.*'n;:et

a-fÉ

irl*

* Fr-+Ei:-

t Èa \f1é

*ì:*;!i:ti*=

* É.*g*,-rt*g

* J'a:.i

Figura 1 - Struttura dei documenti inclusi nelle Wcag 2.0

. §x*+p!* :eer*rl*=

* fi.*$*,Jlf*g

:r*egd:,ir*g

ansl ati ons

WCAG2O-1t. Questa tematica si

'Éuidelines

& F(É:11 -,:ÉÉ

Livellorbase: § j Leggi anche:Volume1, § Gesrlre e agglornarel Progecl 1e 3l ,,1§.,t

italiana in materia di accessibilità Ecco i punti

a rete Internet evolve

r nEaursrrr

Tga*iliilil*5

i."

dei siti Web e detle informazioni erogate anche ai sogget-

Frimcipi

con disabilità, tra i maggiori beneficiari dellutilizzo delle nuove tecnologie, che consentono di non doversi spostare per ottenere un documento, un prodotto, ecc. Spesso, quando si parla di accessibitità si pensa che la tematica

persone con disabiLità, esempi reati, risorse di riferimento per approfondire, nonché collegamento alle tecniche specifiche

per ogni singola linea guida

sia limitata alle pubbliche amministrazioni, ma ciò non corrisponde al vero. Esistono norma-

Figura2 - Le caratteristiche di un documento accessibi le: percepibile,

utilizzabile, comprensibile, robusto

tecnoiogiche, di erogare servizi e dare informazioni fruibili, senza discriminazioni, anche da parte di coloro che, a causa di disabilità, necessitano di tecnologie assistive o configurazioni particolari". In poche parole, significa applicare una serie di regole tecniche

che, se soddisfatte globalmente, consentono maggiore

fruibitità

tive nazionali che inseriscono nel reato di discriminazione (diretta indiretta) anche comportamenti che creano "svantaggio" a utenti con disabilità e pertanto, ad esempio, un sito di commercio elettronico in cui un disabile non può fare acquisti può essere soggetto a denuncia da parte dei di sabile stesso (o deLllassociazione che lo rappresenta) con richiesta di rimozione della problematica e danni morali.

LA STRUTTURA DELLE WCAG 2.0 Le Wcag 2.0 sono strutturate al fine di agevolarne la comprensione sia da parte di tecnici sia da parte di poliry-maker (persone che devono creare deile linee guida / norme) e, pertanto, sono fornite su più documenti (figura 1):

o Figura 3 - 0gni principio contiene linee guida che aiutano a rispettare

il principio stesso

documento WCAG 2.0: è normativo principale, strutturato in principi, linee guida, criteri di successo e indicazioni su come ottenere la conformità. Laffiliazione tra principi, linee guida e criteri di successo è disponibile in figura 1. Understanding WCAG 2.0: si tratta di una serie di documenti non normativi che raccoglie la finalità, benefici per le

criterio di successo. Techniques for WCAG 2.0: Una serie di tecniche per specifiche tecnologie (Html, Css, script, Fiash, Pdf...), contenente anche annotazioni sul supporto delle stesse da parte di browser e tecnologie assistive, nonché esempi (codice), coiiegamenti a risorse per approfondimento e modalità di test.

QUATTRO PRINCIPI struttura delle Wcag 2.0 è basata su quattro principi fondamentali delllaccessibilità: se anche soto uno di questi principi non viene rispettato, gti utenti con disabitità non saranno assotutamente in grado di utitizzare it Web (figr-rra 2): La

1) Percepibite: Le informazioni e componenti deiìlinterfaccia utente devono essere presentati agli utenti in modo da poter essere percepiti. Questo significa che Iutente deve essere in grado di percepire le indicazioni indipendentemente daila propria disabilità. componenti 2) Utitizzabite: dell'interfaccia utente devono essere navigabili e utilizzabili. Significa che l'utente deve essere in grado di interagire con componenti dell'interfaccia, owero linterfaccia non può richiedere azioni per le quali un utente non è in grado di

agire.

3) Comprensibite: Le informa-

iI principio (da 1 a 4) e un numero progressivo interno allo stesso (figura 3). TINEA GUIDA 1.1: ALTERNATIVE TESTUAI.I Dare alternative testuali per qual-

siasi contenuto non di testo, in modo che possa essere trasforFigura

4 - Un esempio di player

multimediale con lingua dei segni

zioni e

il funzionamento

dei

componenti dell'interfaccia utente devono essere comprensibiti. Questo significa che gli utenti devono essere in grado di capire le informazioni, nonché il funzionamento delt'interfaccia utente. 4) Robusto: Ii contenuto deve essere sufficientemente robusto per essere interpretato in modo affidabile dalla maggior parte dei programmi utente, comprese le tecnologie assistive. Significa che gli utenti devono essere in grado di ac-

mato in altre forme fruibiti secondo le necessità degli utenti. Ad esempio, stampa a caratteri ingranditi, Braille, sintesi vocale, simboli o un linguaggio più semplice. Lo scopo di questa linea guida è garantire che tutti i contenuti non testuati siano disponibiti anche sotto forma di testo. I1 termine si riferisce al testo etettronico e non a quello rappresentato sotto forma di immagini. Questo considerando che il testo elettronico ha il beneficio di essere interpretato da qualsiasi tecnologia Web e può essere rappresentato in modo visivo tramite ingrandimenti, in modo tattile, per mezzo del sonoro. Esempi: Un non vedente potrà comprendere le immagini grazie a

cedere al contenuto anche con

testi alternativi, mentre un non

l'evoluzione delle tecnologie, owero il contenuto deve risultare accessibite net presente come nel futuro.

udente potrà comprendere i diaioghi grazie a contenuti testuali. Per giungere aila conformità di questa linea guida è, pertanto, necessario che qualsiasi oggetto fornisca un'alternativa testuale

LE DODICI TINEE GUIDA Ogni principio contiene linee gui

c0nsona.

da. Lo scopo è, appunto, aiutare a

rispettare il principio, garantendo che il contenuto sia direttamente accessibile al maggior numero di persone possibili e che sia in grado di essere rappresentato in forme diverse per soddisfare le di verse necessità sensoriali, fisiche e capacità cognitive. La numerazione delle linee guida richiama

TINEA GUIDA 1.2: TIPI DI MEDIA TEMPORIZZATI Lo scopo di questa linea guida è fornire [accesso ai media tem-

porizzati e sincronizzati. Nei criteri di successo sono inclusi i seguenti media: solo audio, solo video, audio-video, audio e/o deo combinati con interazioni. I

media possono essere preregistra-

oppure in tempo reale (live). Esempi: Sarà necessario fornire sottotitoli (o interpretazione tramite lingua dei segni) per persone non udenti, audiodescrizioni delle azioni per gli utenti non vedenti oppure fornire una trascrizione completa dei contenuti (figura 4). TINEA GUIDA 1.3: ADATTABILE

Creare contenuti che possano essere rappresentati in modatità differenti (ad esempio, con layout più semplici), senza perdere informazioni o struttura. Lo scopo di questa linea guida è garantire che tutte [e informazioni siano disponibiti in una forma che possa essere com-

presa datt'utente, ad esempio, con lettura a voce alta oppure utilizzando un'impostazione grafica più semplice. Se tutte le informazioni vengono fornite in modo da poter essere comprese dal software dellutente, sarà più facile garantirne la portabitità in altre forme di comunicazione (visuali, uditive, ecc.). Per giungere alla conformità di questa linea guida è necessario rendere percepibiti le informazioni, la struttura, le relazioni e le funzionalità dei contenuti presenti nella pagi na Web garantendo, ad esempio, un corretto ordine di lettura dei contenuti.

ttNEA GUIDA 1.4: DISTINGUIBITE Rendere più semplice agli utenti la visione e l'ascolto dei contenuti, separando quelli in primo piano dallo sfondo. Lo scopo di

questa linea guida è garantire che tutte le informazioni pre-

Customize this Quick Reference Technologies: Te(hn ques {awa\is shown) 'rH-lÌ\4L tlShow CSS techfliques and fa l!res Synchron zed lvled a techn ques atd fa lures y'Shos1 SMIL techn q!es and fai !res y'Sfor'r' alieit-s de S.ripting te.hnlq!e! and fai ures y'Show Seùe!s dÉ Script ng te.hn que5 and fal ure5 :liShow W-AI AR A te{h! ques and 1É ures

lshovi

Levels: y'ghow Leve A Success Cdteria /Show Leve AA S!c.e;s CrltÈr a

Tshow L-"ve AAA Succes5 Crlter a

Sections: lshos/ Sllf a ent Techniqre5 and Fai lres ,y'ShÉw Adv son/ Tecirn ques

Figura 5 - Al link www.w3.org/WAl/

WCAG20/quickref è possibile selezionare dinamicamente le tecniche Wcag 2.0

to contrasto tra testo e sfondo,

consente a chi opera con tastie-

mentre per quelle sonore è fondamentale assicurarsi che Iutente possa comprendere i contenuti audio senza interferenze dovute a suoni di sfondo. Per giungere alla conformità di questa tinea guida ci sono una serie di criteri di successo, tra cui [utilizzo di caratteri teg gibiti e ridimensionabili, Uuso di adeguati contrasti tra testo principale e sfondo, con la possibilità di disabilitare [audio di sottofondo net caso in cui rendesse incomprensibile i contenuti sonori principali.

re, sistemi

senti ne[a modatità predefi-

nita di

visuatizzazione siano

maggiormente accessibiti da parte delle persone con disabilità. Tra gli obiettivi principali c'è la separazione tra informazioni in primo piano e quelle di sfondo: per

le presentazioni visive, è necessario, quindi, garantire un adegua-

TINEA GUIDA 2.1: ACCESSIBITE DA TASTIEM Rendere disponibili

tutte le funzionalità tramite tastiera. Lo scopo di questa linea guida è garantire che tutte le parti presenti nel contenuto siano acces-

sibiti tramite i tasti.

Questo uso

emulazione deila tastiera (comandi vocali, uso del mouse con una tastiera virtuate) o con tecnologie assistive, di poter interagire con la maggior parte dei contenuti. Per giungere alla conformità di questa linea guida, ci sono una serie di criteri di successo, tn cui [operatività tramr'te tastiera senza richiedere particolari tempistiche di esecuzione e la possibitità di passare il focus da un oggetto al successivo tramite il solo uso deila tastiera. TINEA GUIDA 2.2: ADEGUATA DISPONIBILITÀ DI TEMPO Dare agli utenti tempo sufficiente per leggere e utilizzare i contenuti. Lo scopo di questa linea guida è garantire che

navigatori siano in grado di comptetare i compiti richiesti dal contenuto con i propri tempi di risposta

1.1.1 Flon-text Content: All r*n-t*.tt tÉti!€itt that is

tt tlte us*r has. a t*.:{t *lt*rnaiÈv+ tlìat serue* tlra purFosÈÉHceirt fot tl"re citrlati,]n* listeel belaw. eEuivalent

present*cl

ilevÈlA)

f"i.r,rtt:r

ilrl*el

l 'l l l-llii*rsiaf{llll! l!-!

SufficientTee l'rr':iques for 1.1.1 - Non4ert f,or*Ént Éituiltion A: lt * sholtr desrriFtioh càfi servà th§ Éamè purpo§* and FrÉàeht*ls 5àmè iEfor'ffstiogl à', É14 Rah.tèht iantÈfit: fùi rirr!-r te;{ i:rli1:Èi]t ifin: :ÈriÈ: -,i rtr,-l t-'lr:ljll[-. I rr:.,:lt: '':-r: r.:i- -,: . :-it.jil-l!?:rj

f!![Eiis

U$lrrq

,rue;hn:qu;li*teÈheiaw

f§ Figura 6

La modalità

di lettura delle Wcag 2.0 per tecnici

individuate. Molte persone con disabilità hanno bisogno di più tempo per portare a termine alcuni compiti rispetto alla maggior parte degli utenti: possono richiedere più tempo sia per rispondere fisicamente che per leggere i contenuti. Oppure, possono accedervi tramite tecnoLogie assistive, che richiedono

C*lor Picker

Per giungere alla conformità di questa linea guida ci sono una serie di criteri di successo, tra cui la possibilità di interrompere e/o personatizzare, il tempo di esecuzione dei contenuti di una pagina Web.

TINEA GUIDA 2.3:

IIII&@IIE§W@ @Eg@@W8Htrtrtrtr§

CoIor;

ftnnDnnnnnilEn

Folegour:dl irick

IITT§ffiIIE§§@

Backg;ou-r:rl: pick

EnnnnnnEnntrn

ffiffiffiffi88tr*ffiHEil

IIAEE I

Change

ralùrs

@EEB@ffi@

@@gffiEEfrÉGEtrN

EnnntrtrEtrntrnn

più

tempo di interazione.

+ODfi

Randtrrrr Text

§§.ffi@HEBBffiBBB @BffiEtrtrtrEGHtrD

EENDNtrNtrEtrtrN ffiffi88ffiffiBffiffiBffiffi

§HEiltrrtrilE3trtrtr nn nE ilt] Dtr nn trtr Lo:'e:ri ips,-Ltrr clolo:' -cit a:riet. ffi&&ffiffiEi&M@mEB .Pr ullamcor"l:er. r.elir nr-rBa portti m§ mm nil n- iln t]n lit p, et ;rak*uada farues ac tu:'1:i,r nn IE nn nn nt] Etr I 1'r1 tr-1:tIlr3 non lor:err. Feller:terclue srt an-ret ar-rgr-re. hrr:d::erit ÉBÈt, terrpr-r* ir:. po:.ta r'+1. turl:i=. Phaselh-r= rr::rla I Figura 7 - Esempio di selettore di colori accessibile

COI{VULSTONI Bisogna stare attenti a non svilup-

pare contenuti che possano causare attacchi epitettici. Lo scopo di questa linea guida è garantire che i[ contenuto contrassegnato

come conforme atte Wcag 2.0, eviti tipi di lampeggiamento che sono più suscettibili a causare attacchi epitettici se visualizzati anche soto per uno o due secondi appena. Alcuni utenti con disturbi convulsivi, infatti, possono avere attacchi epilettici nel caso di contenuti tampeggianti. Per giungere alla conformità di questa linea guida ci sono una serie di indicazioni da rispettare, tra cui il suggerimento di non implementare contenuti lampeggianti e, ove necessario, verificare che Ia frequenza di lampeggio non rientri in intervalli ritenuti pericolosi (definiti nel glossario Wcag 2.0 come soglia generale o soglia del rosso), oppure che non superino i tre lampeggi per secondo.

TINEA GUIDA 2.4: NAVIGABIIE Dare funzionalità supporto

TINEA GUIDA 3.1: LEGGIBILE

al[utente per navigare, trovare contenuti e determinare la pro-

comprensibile. Lo scopo di questa linea guida è permettere che iI contenuto testuate possa essere tetto sia da utenti sia da tecnotogie assistive e di garantire ta disponibitità detle informazioni necessarie per

pria posizione. Lo scopo di questa

linea guida è aiutare gli utenti a trovare i contenuti di cui hanno bisogno e di consentire toro di tenere traccia det[esatta posizione. Questi compiti molto spesso sono difficili per gii utenti con disabilità, in quanto per la ricerca, la navigazione e l'orientamento è importante che llutente sia in grado di comprendere la sua posizione attuale allinterno del contenuto. Per giungere alla conformità di questa tinea guida ci sono una serie di indicazioni da rispettare, tra cui limitare i[ numero di tink presenti nella pagina, consentire modalità per navigare agevotmente tra i diversi blocchi e rendere tutti i cottegamenti chiaramente identificabiti.

Rendere

testo teggibile

comprensione. Le persone con disabilità, infatti, possono

interpretare il testo in modalità differenti: c'è chi avrà un'espe-

rienza visiva, chi uditiva.

Per

qualcuno, invece, sarà un'esperienza tattile, mentre per altri ancora potrà essere sia visiva che uditiva. Per giungere alla conformità di questa linea guida ci sono una serie di criteri di successo tra cui, la necessità di definire [a tingua principate del documento, eventuali cambi di lingua per blocchi di testi e, le espansioni di acronimi ed ab-

breviazioni.

Irutern«tionat Webmasfers éss * cia§an

Sei rn, iÉraa

Decennale di iWA: spazio e visibilità agli associati! l:rl.rl:.il::r.'-r-,

Ullimi interventi

r; :t :: : :.,::l; 1j:::ll.:::;r:::

;i.:3

grusnd :C10 I|!A IIALY, I3 eeziÈne it5lièrra di ItJAlHtrG. cùnrpiÈ 10 sn6i. Cùn lbccasione, vrgta lè.ricinÀn:À del{'erÈsto VÉneziÀcaflp 2010 {1, nrova tleri ICT di !:ef,ezri. di.uj l'àss5.iÉziÒne è ir;rtnsr tÈ.nicoì r:hÈ 9i terri prèsso le fèsÈ dèll'À.lenale di Verlezia dal I al 4 luqlilr 2C10, pÈr il ghr+a sabÀto: lug,io 2010 É prÈlisfÀ un'iiltera grcrneté dÈdicatÀ Àl nrrtrc ilècefrnrlÈ, .on uil aFposlta lccatian iÌl'inter*o dÈJl'Eventa fieristi.o. Quest'Ènso,. tra I'aJio, il Venezià.snip h. al suppo.to dèlllAgef,zià ,lell'lrrfl$!èrioie iMrnislrù Fér I'lnnùvaziqn€ è {E Tecnùi6giÈj, FORI']EZ e TelecÉm ltsiia. l{ei Frlrssirn giornr srrà dtspÒnitlil€ Lrn prsgrèmm? detiègliilil cel

Figura 8 -

:ii'.,,

ll blog dell'lwa ltaly (http//hlog. iwa.it) ricco di risorse, consigli e aggiornamenti normativi in materia di accessibilità

TINEA GUTDA 3.2:

TINEA GUIDA 3.3: ASSISTENZA

assistive. Lo scopo di questa linea

PREVEDIBITE

NELTINSERIMENTO

Creare pagine Web che appaiano

Aiutare gli utenti a evitare gli errori e agevolarLi nella loro correzione. Lo scopo di questa linea guida

guida è sostenere la compatibitità con i programmi utente

e, soprattutto, che siano prevedibili. Lo scopo di questa tinea guida è aiutare gti utenti con disabitità, presentando i contenuti in un ordine chiaro, da pagina Web a pagina Web, rendendo prevedibite i[ comportamento di componenti funzionati e interattivi. Ad esempio, persone che usano sistemi di ingrandimento dello schermo possono vedere solo alcune delle parti della pagina. Garantendo una navigazione coerente tra le diverse pagine, llutente potrà spostarsi tra i contenuti in modo molto più agevole. Per giungere alla conformità di questa linea guida, sono stati codificati una serie di criteri di successo, tra cui la richiesta di fornire una navigazione consistente (mantenendo, ad esempio, una struttura di menu costante tra le differenti pagine Web del sito).

è aiutare gti utenti a ridurre i[ numero degli errori gravi e irreversibiti, incrementando la

attuati e futuri, in particolare con le tecnologie assistive (At). Questo è attuabile se ci si impegna a garantire che gli autori non

producano contenuti che interrompono Iesecuzione delle tecnologie assistive (ad esempio, errori di marcatura) oppure che le aggirino (ad esempio, uti-

possibilità di notificare all'utente stesso possibiti errori oppure, aiutandoLi a capire le azioni che dowebbero intraprendere per correggerli. Per giungere alla conformità di questa linea guida ci sono una serie di criteri di successo, tra

ltzzando codice di marcatura non convenzionale) e a fornire ale tecnotogie assistive te informa-

cui la richiesta di fornire i messaggi di errore, descrivendoli in

zioni necessarie sullo stato dei contenuti, in modo da garantirne

modo chiaro e in forma testuale, fornendo, altresi, modalità di supporto per coreggere le inesattezze efo per evitare errori successivi (ad esempio, disponibilità di gui de contestuali).

l'interazione.

TINEA GUTDA 4.1: COMPATIBITE

Garantire la massima compatibilità con i programmi utente attuali e futuri, comprese le tecnologie

Per giungere aila conformità di questa linea guida, come per le altre sin qui descritte, ci sono una serie di criteri di successo, tra cui la richiesta di consultare e impostare in modo programmatico il nome (name), il ruolo (role), lo stato (state), le proprietà (proprieties) e i valori (vatues) degli oggetti, notificandone la modifica anche alle tecnologie assistive.

ll negozio è seruito Dopo i parametrl di configurazione fondamentali

diViftueMaft, è il momento di dare uno sguardo al front-end, owero la pafte che sarà visibile el

progetto preceden- corrieri e opzioni per presentate abbiamo iniziato ad re al meglio i prodotti. In que-

analtzzare il pannello di configurazione del componente VirtueMart per creare un e-commerce con Joomta. In particolare, abbiamo definito negozio, metodi di pagamento accettati,

sta seconda parte, continuiamo con Uanalisi del back-end per poi concentrarci sui moduli da rendere visibiti nel front-end. In particolare, esaminiamo le spedizioni e le impostazioni relative

alle tariffe dei vari corrieri, evidenziando alcune problematiche. Infine, l'attenzione si sposta sui moduli intergrati da VirtueMart all'interno di Joomla per la visualizzazione del carretlo della spesa e per l'implementazione di altre utili funzionalità.

tlUALCHE IMPOSTAZIONE PER INIZIARE Diamo uno sguardo ad alcuni parametri per il buon funzionamento del nostro negozio

At-tQt"rorE

lvlt

Accediamo alla parte amministrativa di Jo-

orU,

quindi spostiamoci nella configu razione O"t componente da Gomponenti/ViÉueMaÉ. A questo punto, facciamo clic sul menu IVA e dall'elenco a discesa, scegliamo la voce Aggiungi

Aliquota lVA. 63

l.i-lr e!n 5ofrBe.iLb:!.

QU/\LE TMPOSTA

4fh Nella finestra che appare, selezioniamo Ia -D nazione. mentre nell'ultima casella in basso

&inseriamo

l'aliquota

o.2o che indica I'lva al

ADESSO LE SPEDIZIONI 4th Spostiamo la nostra attenzione sul menu # Spedizioni dove e possibile definire nuo-

vi corrieri e relative tariffe. Facciamo clic su Nella finestra vi-

20%.Per rendere effettive le impostazioniappena in-

Spedizioni/Nuovo corriere.

serite, facciamo clic sul pulsante Salva posto in alto a destra della finestra.

re nella lista delcorrieri.

sualizzata, inseriamo il nome e ordine che dovrà ave-

il Àh"...

ùÀ,

:::aÈ::1

É:ffiffi1É1t§*§st{*wr}

TUTTI I PAHAMETHI

TAEIFFA DA ITPPLICARE

Poco più in basso, occorre specificare le naDefiniamo ora la tariffa per il cornere appena zioni in cui spediremo i nosin prodotti. Per creato. Selezioniamo la voce Spedizioni/ farlo, basta tenere premuto il tasto Ctrl e Crea Tariffa e nella finestra che sarà visualizzata, inseriamo una descrizione e indichiamo selezionare dall'elenco ivari Paesi. Più sotto, occorre a quale corriere attribuire la tariffa, scegliendolo specificare I'intervallo dei CAP (siveda a proposito il dall'omonima

casella.

box d'approfondimento), l'intervallo di peso, ecc. l!'.!,lAlffi

lrnw

tu:moe

Uno stesso corriere potrà fomire fasce di

f ,

::"ffi i;ilx;'""."""Ji1i: Tì: ; j;i:

(4uÉ

uF.

A**te"q"res*i

r.altri fornitori/produttori di un prodotto. Linformazione puo, poi, comparire in ciascuna

scheda prodotto. Ogni produttore deve appartenere a una categoria da definire nel menu Produttore/

do occorre creare tariffe specifiche, variando divolta in volta il costo, gli intervalli di peso di CAP e le nazioni coperte.

Aggiungi Gategoria Produttore.

!4§d.!v{: i!1 I : *b Fr&Ér j&e4p"*é

e,-*-.*"."*

@yce"Én**""1

q.jàtg&{}

È# q#

:!4

TOCCA AI PBODUTTORI !; Dal menu Produttori, possiamo aggiunge-

AITEE SITUAZIONI

F"@

fu6PE1trwÀh'@.

nl}:

ALCUNI DETTAGLI

CLIENTI IN ORDINE

ALTRE INFO

Definita la categoria, clic

Produttore/AgProduttore.

giungi

Possiamo, così, indicare il nome del produttore e inserire informa-

zioni che Io riguardano, come, ad esempio, ilsito, I'e-maile una scheda dettagliata dell'azienda con tanto di immagini e altri elementi multimediali.

9ij'tr##*',1ffi::T 1(}iltt",t"r:':,l;E applicare a ciascun gruppo condizio-

ni diverse. Per impostare tutto cio facciamo clic su Clienti/Aggiun-

gi Gruppo Glientie

nella scheda

visualizzata, inseriamo le varie opzionicome Nome gruppo ed uno

sconto

da applicare.

informazioni che nguardano il gruppo. Ad esempio, possiamo inserire un testo che ricorda lo

scopo per cui quel particolare gruppo usufruisce di sconti (politiche di sconti per volumi di vendita, ecc.).

CURIAMO LA VETRINA Rendiamo visibili i moduli per Ia gestione del negozio da parte degli utenti

I MODULI CHE CI INTEBE§SAhiO Nella parte amministrative di Joomla, clicchiamo su Estensioni/Gestione Moduli e

scorriamo I'elenco per individuare il gruppo di moduli relativi al componente (di solito iniziano con il suffisso VirlueMart).

ArrruAztoNE til Gonso CARBELLO DELLA SPESA nfiODrFlcilr FINALI 4fÈ Tutti i modull inerenti al #L Dopo aver attivato il mocomponente

aff &

com-

mercro ererrronrco sono

€ orro. vrsuarzzramo rn an- &Htx"iiliii#:11: *Ft"prira il sito, in modo da -E nostre esigenze. Rien-

inizialmente disattivati. Attiviamo

scoprire I'aspetto del componente.

Nella home page in basso a sinistra,

modulo

ViÉuemaÉ Shop-

ping cart;

selezioniamolo e facciamo clic sul pulsante rosso (quello con la x).

ffiilCO

scorgiamo il carrello che riassume i totali e I'elenco dei prodotti in esso contenuti.

un nome per il modulo, scegliamo la posizione e I'ordinamento.

PRODOTTI I1'I }|OMT PAGE

Quando ci colleghiamo a un sito e-commerce, generalmente, notiamo subito la presenza dell'elenco prodotti nell'home page. Per ottenere una situazione simile in Joomla, m od if ch a m o e i m postaz on i d i visualizzazione della home. Dal pannello amministrativo clicchiamo su Menu/Menu Principale. i

tnamo nella parte amministrativa e selezioniamo il modulo del carrello. A questo punto, inseriamo

LETAn|FTI

ilil

lndividuiamo nell'elenco il menu predefinito bolitamente denotato da una stella di colore giallo). Clicchiamo, quindi, su Gambia Tipo e nella successiva finestra scegliamo I'opzione VirtueMart. ln tal modo, saranno visualizzate in home page tutte le categorie dei prodotti disponibili.

CI0nffiffiI

Per le tariffe relative alle spedizionioccorre fare una ricerca sui siti ufficiali deivaricorrieri. Individuata la tariffa più conveniente, trascriviamola nei parametri di configurazione delle tariffe stesse. Occorre specificare, però, che alcuni

corieri hanno tariffu diverse per i Cap disagiati. Bisognerebbe scoprire questiCap così da configurare Ie spese di spedizione in modo ap' propriato, creando per lo stesso corriere tariffe differenziate per interualli di Cap,

E ADESSO GLI ULTIMI RITOCCI|I Esploriamo i moduli che ci consentono di personalizzare l'aspetto del nostro negozio ?"":':':r"

ffismuL* p§ffi LA &§*Effic&

AruCffi§ §L§EE§H{3UV

Rientriamo nel pannello amministrativo di Joomla e clicchiamo su Estensioni/Gestione Moduli. Dall'elenco dei moduli, selezioniamo e attiviamo il modulo ViÉueMart search che, in pratica, attiva una casella per effettuare ricerche solo sui prodotti in magazzino.

ffi }ffi &

Un altro modulo utilizzato spesso nei siti di commercio elettronico e il VirtueMaÉProductscroller. ln sostanza, il modulo mostra le immagini dei prodotti di una categoria

EffiF*SFAgE*ru§ G§US?§

*cc*€É*

gffi

Accedendo ai dettagli del modulo scroller,

€ W

possiamo, anzitutto, definire un titolo, I'attivazione e la posizione in cuidovrà apparire. Nella parte destra possiamo, invece, configurare i parametri del modulo. Scegliamo se mostrare o meno il nome, ll prezzo e il link

Aggiungi al carrello.

specificata, facendole scorrere

verticale oppure

orizzontale.

§ ffi §

&s-LE &g§§grus§sru§

Poco più in basso possiamo decidere le di-

mensioni in pixeldel riquadro in cuiscorrono le immagini e, ancora, la velocita di scorrimento, I'allineamento il colore del testo e la sua dimensione. lnsomma, tutto il necessario per adattare almeglio il modulo.

Vlruel",l&tr Currency SÈ1ec:or :

t-§-ajl6 Eù'o

.:i r't:iili:

----- j rrrli.r::r.,rr

GL§ &UGT*§ ruE*§UL§ ffi Dopo aver salvato le scelte, diamo uno l% sguardo a quelli che sono gli altri moduli. In W particolare, VirtueMart top ten consente

*{§eL§ w&L§Y&?

di mostrare i dieci prodotti più venduti in home page.

cySelector. Accedendo alle sue proprieta,

Owiamente, accedendo ai parametri del modulo,

possibile selezionare le valute che saranno vi-

possiamo decidere divisualizzarne di più o di meno.

sualizzare.

g@ Per dare la possibilità di pagare con moffineta diversa dall'euro, possiamo visuaW lizzare il modulo VirtueMart_Currene

Un gfl4get ad hoc

per il tuo icoogle Ecco ciò che occorre per confezionare

una mini-applicazione che si aggiorna

automaticamente, sfruttando i seruer di BigG i

notevole impatto e di incredibile comodità, i Google Gadget sono stati creati dal colosso di Mountain View con lo specifico intento di consentire a tutti gti internauti, ai provider di servizi e ai semplici utenti Google di avere a disposizione web-content in grado di sfruttare le funzioni dei server di Google nelle proprie pagine Web, sui propri desktop e sulle home

page personatizzate di iGoogle. Questi gadget, dunqug sono mini-appticazioni che convo-

gtiano agU utenti contenuti Web dinamici: si aggiornano automaticamente, sfruttando te strutture informatiche e i server di BigG. Queste piccole applicazioni sono state ideate appositamente per mettere in contatto gti sviluppatori con i clienti "enthusiastic" e per rendere le informazioni universalmente accessibili a tutti gli utenti individuali.

COME SI ACCEDE A IGOOGLE gadget, è necessario utiliziGoogle è Ia pagina intelzare iGoogle. Per attivare ligente personalizzata di questa funzionalità, bisogna page, home Google. Questa grazie alle nuove funzionalità semplicemente accedere al possibilità motore di ricerca dalla fineintrodotte, alle di personalizzazione e all'opstra del proprio browser, digiportunità di inserire gadget tando I'indirizzo www.google. già pronti o sviluppabili 4 cliccare sul link iGoogle, presente in alto a destra e proprie esigenze, secondo le accedere con il proprio acconsente di avere subito in pagina gli tutti strucount (anche quello GMail) un'unica al la homep age avanzata, menti Internet necessari per proprie poter le attività. Per cliccando sul Iink Accedi, posto in alto a destra. preparare ad hoc i propri

in contesti differenti: un utente può scegliere di usare i suoi gadget preferiti per personahzzare

Web sono divenute cosi diffuse e famose, da spingere Google stessa a creare un catato-

go di libero accesso per

cosA 0rFR0N0

la propria pagina iGoogle (www, google.com/ig), le pagine Web dei siti sviluppati autonomamente e il desktop del proprio Pc, in quanto i gadget possono essere attivati tramite l'applicazione Google Desktop (http://desktop.

google.com).

di contenuti

tutti gti

svituppatori e i Web designer, che possono copiare liberamente sulle proprie pagine Web migtia-

I1 fattore che ha decretato un

Nate ad appannaggio dei soli uten-

successo cosi imponente dei gad-

get di Google è, in sostanza, la possibilità di utilizzare gli stessi

registrati al servizio per [uso nelle home page personaltzzate

ia di mini-applicazioni differenti, tra cui giochi, clip news, meteo, mappe, calendari, agende, sistemi di annotazione e quant'altro suggerisca la fantasia. Queste applicazioni possono essere utili sia in ambito business sia in ambiente

di iGoogle, queste piccole finestre

consumer.

GOOGLE GADGET?

ffieffi

ffi

ffi *& w§ffi§ Fffi*F§§$§*ru§§E§

ivari gadget, Google ha reso disponibili anche quelli dedicatiai publisher. Sitratta dei Google Gadget Ads (www. google.com/ adwords/ gadgetad s/i n dex. htmù sono, sostanzialmente, piccoli box che contengono annunci pubblicitari interattivi, video, animazioni simili

Tra

COME SI CREA

UNA MINI

APPTICAZIONE Ualtro punto di forza dei

GoogLe

Gadget è da ricercare nella possibilità che BigG dà a ogni utente

di creare [e proprie mini-appticazioni. Non è, quindi, necessario utilizzare i gadget che già vengono forniti, ma chiunque può decidere di confezionare a proprio uso e consumo un gadget, che risponda perfettamente alle proprie esigenze. Tutto ciò è possibile grazie al fatto che i Gadget di Googte sono semplici file Xml faciLmente modificabili: è possibile scrivere del codice Html o Javascript nel tag <Content type="..."><!IGDATAI...]]>, che poi verrà reinterpretato datte Api Google per richiamare le risorse dal server di BigG ed eseguirle sul sito ospite. A questo punto, si potrebbe pensare che per poter plasmare il proprio gadget perso-

nalizzato sia necessario essere sviluppatori esperti di codice Html o

Javascript: in realtà, anche con un facile copia e incolla nei punti giusti di un semplice fiie Xml, si può avere ta propria mini-applicazione già pronta all'uso.

a mini-siti ampiamente personalizzabili, Sono molto utili per promuovere i propri contenuti, prodotti e seruizi attraverso la Google Content Network. Sitratta di contenutidinamici originali che possono essere "embeddati" in qualsiasi pagina Web.

di codice, anche se conoscere i IL GADGET DI YOUTUBE linguaggi di programmazione specifici può sempre tornare utile. È, però, essenziale conoscere bene la struttura del file Xml da cui Iapp ha origine: bisogna, dunque, "sporcarsi le mani".

Tornando allhome page di iGoogle, vediamo subito, in primo piano, Ueditor appena attivato, con

un file di default (hetto.xmt) atquanto scarno, ma utile per comprendere appieno la struttura del Per proseguire è necessario un accodice dei gadget. Per chi è già più count Google (wv,rw.google.com/ awezzo ai tinguaggi di programaccounts), anche quello GMail va mazione. è possibile accedere al bene, una home page di Google file provaASW.xmt, cUccando impostata su iGoogle e un gadget su Eite/0pen from URt e digispecifico, nella fattispecie l.'edi- tando lindinzzo http ://hosting. tor dei Googte Gadget. Una volta g mo dul e s. c o m/ ig / g a dg ets avuto [accesso alliGoogle, quindi, file/1 1807 7 1844806020055 1 bisogna attivare il Google Gadget 2/pr ovaASWxml. Questo g adget, Editor, un ambiente di sviluppo creato appositamente per i lettoche consente di visionare e modi- ri di anch'io Siti Web, mostra un ficare il listato dei fite Xmt di ogni semptice esempio di come intemini-applicazione per creare, uti- grare un video YouTube all'interhzzare e pubblicare in piena auto- no di un Google Gadget. Se camnomia il proprio gadget. Per farlo, biando video it tink non funziona, bisogna cliccare su Aggiungi Ete- dalla pagina di YouTube, dopo menti e, nella casella di ricerca, aver cticcato sul pulsante Codice digitare Googte Gadget Editor. A questo punto si ha immediatamente accesso a tutta la libreria di gadget messi a disposizione da BigG e da tutti gli attri utenti. Fra questi, dobbiamo scegliere l'ultimo Google Gadget Editor della -:r: 1r"l.ilr. lista, quello fornito ufficialmente da Google (liqira L), aggiungen-

cosA occoRRE

dolo a iGoogle semplicemente con

Per poter confezionare ad arte un proprio gadget, non bisogna

un clic sul pulsante Aggiungi,

Figura 1 - ll Google Gadget Editor,

esattamente come abbiamo fatto per gli altri.

nel catalogo dei gadget di Google,

essere necessariamente esperti

permette di lavorare con i listati Xml

p§ffi

Figura2 - [opzione da spuntare se non si riesce a caricare il video selezionato

§L §§* §§E* ffiru #&reffi§§ Tutti i gadget possono essere pubblicati non solo sulla propria home page iGoogle, ma anche sulle pagine Web di un sito proprietario. Per capire come ottenere il codice da integrare nelle proprie pagine, selezioniamo un qualsiasi gadget dal catalogo messo a disposizione da Google, cliccando sultitolo del gadget stesso, e utilizziamo gli strumenti dedicati ai Webmaster, selezionando il link lncorpora questo gadget. Si apre una pagina nella quale è lasciata all'utente la possibilità di personalizzare alcune proprietà del gadget. Altermine della custo mizzazione, otteniamo il codice diembedded semplicemente cliccando sul pulsante Ottieni il codice. !

da incorporare, spuntiamo llopzione Utitizza vecchio codice di incorporamento (ricura 2). At di tà di quale file si scelga di anahzzare, si può notare, fin da subito, come il codice abbia una struttura bipartita. La prima parte del file: <?xml version="1.0" encoding="UTF-8"?>

il gadget deve avere (personalizzabili tramite gli attributi height e width). La seconda sezione del listato

re le dimensioni che

helgh!=11385">

</embed></object>

</div>

rl, </Content>

<co1!e1t type=" html"

</Module>

ric oÀiÀr

<div><object width="480"

raccoglie il codice Html o Javascript (in questo esempio è codice html) con la quale è programmato il gadget in ogni sua partico-

height="385"> <param name="movie" va I u e= "

http://www.yo utub e.c om/v/

rYKWR2Kb3Ag?f s=

&amp;hl=it_lT">

in realtà, la carta di identità det gadget. Per chi è abituato allHtml, si potrebbe paragonare questa porzione di codice al tag <head> e ai metadata contenuti. La prima riga è assolutamente necessaria, in quanto è lintestazione standard di qualsiasi file Xml. La seconda Unea di codice indica che il file contiene un gadget, mentre <ModulePrefs> è la forma breve di "Module Preferences" e contiene tutte le informazioni relative al gadget, fra le quali il titolo, la descrizione, l'autore e tante altre proprietà come la possibitità di scrolling (scrolling="true") oppuè,

<param name="allowFullscreen" value="true"> <lparam> <param name="allowscriptaccess" ya !u

e=llq!wayg" > <l Far gm>

cati

n/x-sh oc kwave-flash

allowscriptaccess="always" allowfullscreen="true" width="480"

!a1i(:

z:;

!ii3€,:

*i!e*gi§&*i

l:' I

<11o.::::-i',.i:*lè=!i..ii.,.iir ia rx.i,r FpÉ=

iri:

lare funzione. I1 tag <Content type="...">, indica atte Api di Google se il tinguaggio che segue è Html o Javascript, a seconda di quanto specificato fra apici, mentre la dicitura <![GDATA[ avverte le Api di Google che da ii avrà inizio il codice che dowà essere re-interpretato per renderfunzionante. Questa sezione

r l: hrtp:,r/hò*rq...-12lprcva6È inl*

tri.lti='rr leiotrF iì

ÀnrioF:l:l ].r:,)r'àlrlÙr-llcidon=i'::l-

''i.f-.i

arihor .bortùe=

! .'

Figura 3 - Dalla hana degli indirizzi del browser si può recuperare I'Url presso il quale viene effettuato da Google il caching del file Xml

,i. . ,..: :.

può, dunque, essere modificata a piacere, digitando direttamente iL codice, secondo le proprie necessità. InoLtre, ogni avanzamento nel lavoro può essere subito

visionato, cliccando sul pannello Preview, alla cui azione corrisponde linterpretazione del codi ce, per dare ailutente un'anteprima sulìlaspetto e le funzionalità offerte dal gadget al termine del lavoro. Grazie alla versatilità detta piattaforma Google, anche i neofiti possono creare un gadget senza conoscere una riga di codice. Ad esempio, copiando, in questa seconda sezione del file, il listato di Embedded offerto da YouTube su ogni suo video, è possibile ottenere un Google Gadget in grado di mostrare il filmato direttamente in streaming, da implementare su iGoogle, sulle proprie pagine Web o sul desktop del proprio Pc.

UN URL COME MINISITO Un'aitra funzione interessante,

è fornita dal seguente

codice

d'esempio: <?xm! verylgn=lll,0ll

un gadget basato su un Url e costruito in tal modo, altro non è che un minisito, attraverso il quale convogliare agli utenti i propri contenuti. Dunque, con un po' di fantasia e dimestichezza con IHtml e col copia e incolLa, anche gli utenti a digiuno di programmazione possono ottenere ottimi risultati. </Contenb e </Module> sono righe non modificabili, sempre necessarie e indicano la fine

&Li1 I

aqt!!

Figura 4

41c+i:. .t . ..'

;

La funzione Aggiungi feed o

gadget permette di recuperare un gadget direttamente dall'indirizzo Url di caching

del fite Xmt.

si apra una finestra del browser METTI IN TUNZIONE IL WIDGET Una volta terminata ta stesura della sezione centrale det file e, quindi, la compilazione del gadget, è necessario procedere allattivazione delìlapp per poter usufruire delle sue potenzialità

per recupenre l'indirizzo del server Google nel quale verrà posto in cache il gadget (figura 3). A questo punto, nella home page, è di nuovo necessario cliccare su

nella home page di iGoogle o sul proprio sito. Dapprima è consigliabite salvare il listato digitato nelleditor (tramite la funzione Fite/Save as). Poi è sufficiente cliccare sul nome del file che compare in alto a destra, perché

l'lJrl ottenuto precedentemente e cliccare su Aggiungi (figura 4). Comparirà un awiso di pro-

Aggiungi elementi, selezionare Aggiungi feed o gadget dal fondo della pagina, indicare

tezione, ma procedendo con un clic su 0k, si riuscirà a inserire il proprio gadget nella home page di iGoogle.

encqdlng:llu[;a]li7

<Module> <ModulePrels title="News da Wintricks" wld!h=11375 ll nel gh!=1142

</ModulePrefs> <Content type="url " href ="httpy'/news. w!

gric ks,iVwel/hlm " /> !

</Module>

Possiamo analtzzare Ia penultima

riga, nella quale il tag <Content type="..."> contiene la parola chiave url, per indicare alle Api di

contenuto successivo sarà un indirizzo Web, mentre la proprietà href="..." contiene lindirizzo del sito dai quale recuperare le informazioni. Insomma, Google che

$&§$r§' il rffi$ffiTfi, il*ruUru§fi EAM§L$!

Terminata la preparazione di un qualsiasi gadget è possibile procedere a una sua pubblicazione, affinché tutti gli utenti ne traggano beneficio. E sufficiente collegarsial sito http://wvvw. google. co m / i g/ sub m it? hl = it, accettare le cond izion i di uti zzo del seruizio, indicare l'indirizzo Url presso il quale è stato effettuato il caching del file Xml e cliccare su lnvia. ln questo modo, si procederà alla pubblicazione del gadget presso il catalogo messo a disposizione da Google a tutti i suoi utenti.

:".

:i:l:"1"1-'"

'Pèr:m"os!'

Pochi clic e sei online Crea il tuo sito personale con gallerie di immagini, vrdeo e lrnk. Con tl giusto software e le nostre

dritte è dawero sernpliclssimo a qualche tempo nelia nostra casella di posta eiettronica troviamo messaggi di amici che ci invitano a visitare i loro siti personali e le loro gallerie di immagini. E quando ci chiedono il nostro indiizzo? Siamo costretti a dire che, per motivi di

tempo, ancora non ìiabbiamo preparato, oppure che è "in costruzione". Oramai tutti, chi più chi

meno, hanno un sito o un blog personale. Dobbiamo, quindi, trovare una soluzione. Rimbocchiamoci le maniche e prendiamo le immagini degli eventi più impor-

tanti della nostra vita, archiviate sul Pc. Registriamoci a uno dei tanti siti online che offrono servizi di hosting Web (che ospitano siti) e usiamo WebEasy (giunto alla versione 8) per creare in pochi minuti un sito da pubbtcare in Rete.

DOWNLOAD DEL SOFTWARE g§ Puntiamo il browser all'indiizzo www.webe asysite.com/ltalia e clicchiamo su Prova gratuita. E Si awia il download della versio-

ADESSCI HINSTALLAZIONE

ne trial del prodotto (perfettamente funzionante, ma solo per 14 giorni).

della licenza, lasciamo selezionata I'opzione Versione di prova e clicchiamo ancora su Avanti.

I'eseguibile, awiamolo con un doppioclic. ll wizard ci guida nell'installazione. Clic-

^dLScaricato

-§ &chiamo

Avanti,

:^'-:*'": : ::.[ll::'É ffi*

accettiamo le condizioni

H.-i.*---.-*

iL:"-. :i;:1... E ffi

1,.."ò".r."1r.d.

AV\dIAMO IL PROGfrAMMA éb,Awiamo il software. Civlene chiesto di regi-

€strarci:

nmandiamo I'operazione con un clic su Si apre la scher-

Q#negistrarsi in seguito.

mata delcentro attività: clic su Nuovo sito web e, in Assistente sito Web, su Successivo.

FACCIAMO LE PMESENYAZIONI 4E Scelto il modello Guida per creazione €EJoetsonale_ in Famiglia e Personale, -TTclicchiamo Successivo e inseriamo le informazioni personali. Possiamo sostituire l'immagine predefinita cliccando sulla miniatura.

AI§Cilg é{ YSUYEJBE

LE I1IOSTNH §T§frIE E rn Fare migliore conoSfrscenza con re org,ranrc *Jrnu oescnzrone .eg, even-

PBCDISP§ruMMO ! LINK... 4àNell'anteprima della pa-

ci fa visita. Clic su Successivo per proseguire. Lasciamo vuoto il campo Gollegamento e confermiamo con

magine associata a un evento e

selezioniamo Gollegamento. Dal menu a tendina Tipo scegliamo File e digitiamo il nome della

il video che desideriamo inserire e clicchiamo Godice da incorporare. Copiamo (Gtrl+C) iltesto evidenziato. Ritomiamo in We-

Aggiungi a lista argomenti.

galleria fotografica che creeremo

bEasy e usando i pulsanti

Nelle schermate successive inseriamo i link ai siti dei nostri amici.

in seguito (nel nostro caso Gitain-montagna.html). Clicchiamo OK.

visualizziamo la pagina nella quale

PER LE FOTO.".

... UIUA GALLTRY!

ti da mostrare a chi

Terminiamo cliccando Fine.

PAL TUBO AL §ITO 5L Selezioniamo Inserisci/ l**co-ponenter GotleEgamento dinamico. Seguiamo le indicazioni del wizard, selezionando il tab YouTube. Allo step lnserire codice

(Gtrl+V) il codice copiato da YouTube (Passo

html

incolliamo

7), clicchiamo Successivo

Fine. Ancora un clic nella pagina per inserire il video e trasciniamolo nella posizione desiderata.

tlg::"i::;,il:i:;:

"""

EEffettuiamo

I'assegnazio-

{ r"di altri collegamenti. Nel A browser Web canchiamo

Pagina Successiva

desideriamo collocare il video.

§{}d;':+#;fjt SHi#ntfl§:lri sci e nella barra verticale a destra

e poi su Sito Web in quella orizzontale. Scegliamo la cartella di destinazione e premiamo OK.

Andiamo in File/Nuovo/Sito Web, clicchiamo Successivo e scegliamo il modello Assistente FotoAlbum in Famiglia e Personale.

cartella con le immagini associamo a ciascuna Nome e Descrizione. Salviamo il progetto.

Selezioniamo Gostruisci/Sito Web. Nella finestra Costruisci

sito web clicchiamo Seleziona caÉella e scegliamo la directory nella quale abbiamo salvato le pa-

gine personali

(passo 9).

PBOIIITI PEB LA PUtsBLICITZIOHE Completiamo ilwizard e salviamo. Nella casella Pa.{§ f gina indice digitiamo il nome del link associato § § all'evento, nel nostro caso Gita'in-montagna.

html Clicchiamo Ok. Con la stessa procedura, creiamo ed esportiamo gli album relativi agli altri eventi. Adesso il sito è finalmente pronto per essere trasferito nel nostro spazio Web.