al suo unico
Implego: la corretta visualizazione di collezioni di dat
L iniziale mancanza di un linguaggio che per
LA STRUTTURA HTML
DIUNATABELLA
Le tabelle degli esempi che sequono, si basano su
tuna struttura HTML completa di tutti gli elementi
disponibil.lcontenuto sara suddivso ta intestazione
, footer e corpo . Utiizzeremo
elemento
e individueremo le colonne gre
ie agli elementi
e
. Tut i dati pert:
enti latabella saranno, in questo modo, correttamen:
te strutturati al suo interno, e quindi perfettamente
fruibli anche dagli screen readers.
_table id= Yable-one” summary="
Tpersonagoi
“
-
Lafont quel
pemetee al browser
ere cometarete
‘contenu in eso rachis,
Secondo questa log, slo
sop delelementa
&
‘uel diconrssegrare ste di
dat da visualize later dt
Sale. La deta conseguena di
tm tz appropri deh ele-
‘ment IML quel dave del
«odie contre ah standard
onto sot i profi del'c-
esi, anent, do,
saranopefetamente fb
quan sia ser agent”
del ent enerpretacoret-
‘amend mot rice,
20 ous
thead e tfoot Applichiamo un colore al testo e proce-
‘diamo con lo sfondo, assegnando un colore uniforme
peri browser meno evolu Utiiziamo, pol la proprieta
‘bockgroundtimage per generare un effettosfumnato, Qui
si@fttorcorso.ad una sfumatura vertical, che parte a
‘una tonalits chiara e degrada verso una pid scura dello
stesso color. La proprieta@ stata rpetuta con Faggiunta
del prefiss specific del vai browser (si legga la nota al
‘iguardo) istemato lo sfonde, abbiamo allineato verti
‘almente il testo, elo abbiamo trasformato in caratter
‘maluscol, Dopo aver regoato gli spaz\ intern alle celle
con la proprieta padding, abbiame fatto ricors alla pro-
Drietabox-shadow per creare un effetto di luce di 1px in
alto e a sinistra nella cella. La keyword inst (opzionale)
genera Yombra altinterno delfelemento, invece che
aifestero (impostazione predefnital. | successvi due
‘valor di 1px impostano la dstanza orizzontalee vertica-
le dal bordo delfelemento. | due valor successiv impo-
stano sfumatura e ampiezza delfombra (qui entrambi
Pati a0). nfne viene impostat i colore (una descrizio-
‘ne esauriente della proprietd box-shadow & offerta dal
‘Mozilla Development Network https/developer mori
{xora/En/CSS/Box-shadow). Non rimane che dichiarare
lo stile dele righe de corpo dela tabela:
UNA TAVOLA PITAGORICA
Con particolari tipi di tabelle diventa opportuno evi-
denziare al passaggio del mouse, non sololerighe, ma
{anche le colonne. Un esempio potrebbe essere quello
di una tavola pitagorica, dove ilvalore di ogni cela &
costitulto dal prodotto dei valor corispondent a riga
€ colonna. Purtroppo CSS non permette di utlizzare
la pseudo-classe :hover con elemento col Per questo.
bisognerd assegnare dinamicamente la colonna ad
luna classe: lo strumento da utlizzare, in questo caso,
& JavaScript: per dare semplicita ed efcienza agi
Setipt faremericors alla librera jQuery. I primo passo,
‘ome sempre, @ quello dl creare la strutture. Eccone un
strato:
_
-tho74/108¢/th>
‘At
alts "Partial” /> jt
title= "Supported!
"Supported" />
Nessuna novita di silievo nella struttura, a parte il
fatto che la tabella & stata inser nella div#contoiner.
Facciamo notare solo che le icone del browser non sono
presenti nel markup: saranno aggiunte nel foglio dstile
come sfondo delle celle. Veniamo quindi agli stil
sespre bene far segue ist
‘one pinadi peso.
(Una detagiata dain sulfa
omen dipole ind
ao beter tepint,
col ida"safan” />
‘ea, S908
seni
ons/vendorpectc
a i
com xix ialv
La div che contiene la tabella viene dimensionata a
‘640px ealineata al centro della pagina, Vene previsto
‘un padding ai 20px, in modo che la tabella contenuta
avra una larghezza di 60px. Passlamo, poi, alla tabella
‘alle colonne:
sable-one(
eth: 100%,
erdercolpee olase
eyo show
Fig. 3a gra mosracameapparea vite a abel che ania 3
cose prima insect eet. Come sede ate
pvfetarent bie acese rover utente non cee gig
B22 / Givgno201
huepu/wwwioprogrammoitecu uae ee cas Tae
[Neente da agglungere, se non che la prima colonna
‘avid una larghezza del 40%, mentre le altre del 15%,
Assegnamo, poi gi stil alle celle del ody:
rain yt aban dy
te et 2b
ertea an: ile
peng 0 25,
border tx se #0,
Socsiedor Ipc FT
Vengono stabilite le dimensioni della linea del testo,
‘allineamento verticale, padding, bordi e ombreggia-
tura esterna delle celle Passiamo poi alle celle delfin-
testazione e del footer:
‘#table-one theed thy
height: 96x;
border: 0;
vertical-align: bottom:
‘padding-bottom: 8px:
ao
‘Fable-one foot th{
lineheight: 42px;
border: 1px sold #160654;
>
Le proprieta sono le stesse ilustrate negli esempi
precedenti. Proseguiamo, quindi, assegnando uniim-
‘magine di sfondo alle celle dellintestazione che indivi-
7
‘table-one toot th:oth-chld(1}{
‘Subito dopo, impostiamo i colori di sfondo delle righe:
#table-one thogy trnth-chideven) {
background-color: FFF;
>
‘table-one tbody trshover {
background-color: 190(190, 187, 212);
>
Prevediamo, poi, le classi group e .open, che saranno
assegnate alla iga che sara agglunta successivamente
al DOM via Javascript:
‘able-one tbody tegroup
« =
background-color:
2 ———
_#table-one thody tgroup th (
background: ur. /imgs/200min.png) 989% center
no-repeat;
‘cursor: pointer;
>
‘table-one tbody tr.aroup.open th{
background: un./imgs/2oomout.pn9) 98% center
no-repeat:
>
Allariga viene dato un diveso colore dsfondo. Questa
Figa conterra un unico elemento th. A quest ultimo
viene assegnata un‘immagine di sfondo corrispon-
dente ad una lente di ingrandimento, che rendera
evidente che la cella @cliccabile. Tomeremo su questi
Uultimi due element successivamente, Ora definiamo le
tultime istruzioni CSS:
‘stable-one foot thnot(:nth-ci1)) {
background-color: 1g6(190, 387, 212);
—_ =
“#table-one caption {
caption-sie: bottom;
text-align: rh;
font-size: Sem:
— padding: 6;
pra
(——
LAGESTIONE DEL
COLOR! CON CSS3
ima delle inowanon appr
tate aS, coo poterano
sere dita in formato
sadecmale dove #7000 ta
perso, cana notaone
GB, dove soi bare
on 19825, 0,0. naga,
cra possible uizare ina
stan cl, come red ylow,
‘yen.
(653 ofte maggior posta
‘lla diane dt cal
‘Olu ale precedent soluzon,
‘nat, or possibile uae
le notion RGB, HSL SLA
Lapimafraionesatamente
‘ome oacone RB, con
Faginta dun quarto vale
‘he rapprseta lvl
‘pact (A taper), Quin
a5 0,03) sca
oso con epct al 3%.
HSL staph, station €
‘ighmes, sa onl, sta-
‘zone eluminst. 350
pub essere dhiaat cen hl,
100%, 1008). Un ss paca
30% pu eserecichianatcon
‘st, 10%, 100%, 0.3)
Sitenga present chee nuove
retain color non sno s-
porate cle vesioniobsolete
explorer sempre bene trae
uncolorealtenati wtizare
un metodo callaudate peri ve
hibronsee ee eeeson.
fan
any’
PROGRESSIVE
ENHANCEMENT
“Progestin enhancement”
slg garantie il ott fun-
‘oament dela versione base
un sto ad gn user gen,
‘agiungendo progrssiamene
funonnata pri browse pi
volt, Un esempi &offeto
al cnceto di ‘unobuse
Joc, ia uta mod
it seu d appcaions
avait he, partend da
‘una conta progetacone del
markup permet a tent
accede 2d ur aplcazione
anche senza i supporto ds
appa fron pert,
ma l tent dei browse pi
nami godanno dua pi
sca espera dnagaione.
P24 / Giugno 2012
ee
_vertial-aign:midale;
y =
Nel primo blocco si @ fatto rcorso alla pseudo-classe
mot, che agisce come un operatore di esclusione
(vengono selezionate le celle th che non sone i primi
discendenti dellelemento superior). Nientaltro da
‘aggiungere: la tabella € completa e accessbile anche
Ecol script:
‘staccument ready function) {
var frsttow = $(th:contans( input) rs) parent)
Var titeRow = $(-tr>
inut (cick to expand)
the sit
II problema da risolvere @ nascondere 0 visualizare le
Fighe corrispondenti ai vari tipi delelemento input e
_generare sopra di esse una nuova riga che, al click del
mouse, le renda visibil invsibil.La variable irstRow
tetra in. memoria la prima riga contenente una cella
th con la stringa “input. Con jQuery & uno scherzo
selezionare elemento corrispondente. Subito dopo,
nella variable titleRow viene memorizzata una nuova
riga, contenente un‘unica cella th, Manipoliamo ora la
‘nuova riga:
Lariga tileRow viene assegnataalla dasse group einseita
‘ne! DOM, al disopra dela prima iga contenentelastringa
input (frstRow: viene aggiunto pol event handle click.
\Vengono, infne,selezionate le alte righe contenenti la
stringa input siblings, che, sublto dopo, vengono nasco-
ste (fodeOut(). Soffermiamoci sulfevent handler click),
«essegnato alla riga memorizzata in tleRow.
cick funtion
Felse(
sthis)
_sibings(eontaine input)
fadeln(rormal), )
(this) toggleclass( open)
Al lick del mouse sulla ig, lo script verifica sla stessa
appartine alla classe open. Ses, tutte le righe “sorele”
Contenent la parola “input” vengono nascoste; al con-
traro, se a riga non appartene alla classe open, lerighe
‘vengono visualizate in ultimo si aggiungelrimuove la
classe con il metodo foggleClas). La rga & stata creata
via JavaScript, per evtare di generare un elemento non
utitzabile dai browser che non permettono Tesecuzione
degli scripts ariga ha un utita solo per gi “user agents”
che supportano JS, tanto vale crearla solo per questi
Llti. Una volta creata, la riga diventa ciccabile: ad un
primo click, il gruppo di rghe "input" viene visualizat.
‘Ad un altro cick viene nascosto, Una tabella i 25 righe,
viene cosi ad essere compattata dinamicamente in 8
righe. €evidente rutiita di una tale soluzione in tabelle
‘costituite da centinaia di righe. Ci feria, anche se ali
‘esempi potrebbero proseguire con soluzion sempre pit
‘accessible interative. Al lettore il compito di provare
ruove soluzion.
Carlo Daniele
ee -0
btp://wuwcioprogrammeit_Scarica l'App ufficiale
for per il tuo Smarphone
crea
eosin ol coe 1000]
ses di mano i consigli della
26
Doers sn tonne
oihepos dati pete Open soe
eSierea diet crepe duns rit
Ene ankiea thirconauardorvacce
dubs gece hee pe srr
pc WEVA Ons fey eel
nna crete Mb sbare sensed
travuatairal eso pps od vet
dstvac pets reenter
Asenel poset pan not gc a ee
“arg permet na range scree
Pee epi ter compere
reps une Inna ce cre hd pe
dat opr sare dios gee opponrla dp
pacts ena. poems
fit eed cacao eee,
ela dlearitcheorveumoxpomen
Totoeapdeaseiwavoalscuend a Man
Fig. Laschermatapinal i ebatrix
Questo prodotto @ particolarmente interessante perché
permette di gestre applicazioni web con una pratica e
Potente console, nonché di creare applicazion web utilis
zando alcuni template generici ma anche vere e propre
_applicazoni complete in tut idettagl.
INSTALLAZIONE
DIWEBMATRIX
Prima di poter instalare WebMatrix & necessario proce-
dere alfnstallazione di Web Platform installer (in allan
“installasone guidata Piattaforma Web 307, Potete instal
lare dretiamente tale prodoto, scaricandolo dalla pagi
a htaiwwaicrosof.com/weby/donnloads/platform,
sD oppure potete aware Finstalazone di WebMatrx
‘rovate anche il percorso locale dela cartel in cui sono
depositati ttt fle appartenenti alfapplicazione web,
oy La soluzione Open Source di Microsoft per lo sviluppo web
STUDIO
aumy”’
LA RACCOLTA WEB.
|i dea taceta we sono
Sti complete coprno ui ampla
‘gunna d appiazen mato
richest CS, frum, wi, log,
‘aco st eonmerce
cosa Nor ermal nt a
rt sono: WordPress, Orchard,
napCommerce, Dott,
Joo, Umbra, Kent,
Saber, BlgEacine, VA,
PB...Topi per ote een
caret
Gama:
Mato De Geto un appssio-
tod informatica 2360 ga,
‘na sopratut programm:
‘ve. ie aueat in ingegneria
informatica al Univers
Padova stat nominato
“Wrosoft VP pera categoria
sual asic autre dar ib
(compres "stl Basic 2010
spiegatoamia nena’ appen
ulate Edn FAG),
artical vide calabora con a
oommunity tecnica Dothetork.
1 Pubesereontatatoallind-
raz maioadeghetat
B30 / ciugno 2012
£89 selezionato, Ckchiamo ancora una volta il pusante
Continua eattenciamo che venga terminatalafase di pub-
blicazione dei fle delfapplcazione web. processo abba-
stanza lungo, dato che vengono pubblcate anche nume-
rose libre di supporta. Da quello che abbiamo vst, la
ceazione di un sto da un modelo fornito da WebMatrix
€ la sua pubblicazione nel nostro spazio web sono estre-
‘mamente semplic, ma non @ detto che le cose possano
andere sempre perl verso gusto. Vediamo perché.
fi: Feta dig pra nfguason depron abl
atone remit peristoweb
PROBLEMI CONIL SERVIZIO
DIHOSTING
Prendendo sempre come esempio la nostra appli-
‘azione “Pasticceria, ci sono alcune cose che posso-
no non funzionate. Per prima cosa, potrebbe essere
rnecessarioabiltareil supporto al NET Framework 4.0,
altrimenti anche Il sito pid semplice, svluppato con
tale versione, non funzionerd. Per esempio un sito
‘ploadato in Register.it hala versione 20, di default ed
quinci necessario modificare tale impostazione dal
pannello di controllo. Un altro problema con Register.
ite i fatto che non esiste la possibltd di indicare una
“priors” su quale pagina debba essere visualizata
per prima: la priorita& predefinita e non modificabile.
Inoltre, nelfelenco dei documenti da aprire quando
sciviamo Finditizo del sito (per esempio httpi/waw.
Fig. La compat pubblicazionevisualzataafinetest
omesitoit, senza specificare la pagina) non sono
previste le pagine con estensione shtml, come quelle
della nostra applicazione “Pasticceria™. Come possiamo
risolvere, quindi? La cosa migliore da fare @ creare una
pagina Default.htm con uno script JavaScript n grado
di reindirizzare_II browser alla pagina principale del
nostro sito, Il codice da utilizar é il seguente:
chemi
‘nein dere) eat cine care lindas dela pagina
ce si vl aggngere
“rere e902 second
=
=
“hest> coe es
scentens