1 FORMATO LAYOUT Potenziare e migliorare i layout delle pagine web create dinamicamente da ISA.

Presentazione sul tema: "1 FORMATO LAYOUT Potenziare e migliorare i layout delle pagine web create dinamicamente da ISA."— Transcript della presentazione:

1 1 FORMATO LAYOUT Potenziare e migliorare i layout delle pagine web create dinamicamente da ISA.

2 2 Pulizia del file.htm generato da Fireworks Tipo di layout Cancellazione delle righe e colonne con altezza o larghezza di 1 px Modifica degli attributi rowspan e colspan Cancellazione degli spacer Cancellazione delle righe o colonne vuote

3 3 Tipo di layout Piastrellatura: il layout è composto da sole slice Zone libere: il layout è composto da slice e zone libere Per entrambi i casi si distingue tra: Distanze Sovrapposizioni

4 4 Piastrellatura:Distanze Il layout è composto da sole slice Fireworks crea delle righe o colonne contenenti immagini con attributo height=1 o width=1 Generazione di spacer per ogni riga creata

5 5 Piastrellatura:Distanze Individuazione delle img attraverso XPath nel file di configurazione Pulizia delle stesse attraverso la funzione clean in ISA.asp Tale pulizia è effettuata tra la PreParsing e la PostParsing styleclean= clean(loadString(stylest,true),cleanStyleD)

6 6 Piastrellatura:Distanze Righe CASO 1 Creazione di una riga (successiva a quella contenente la slice con attributo height<1px) con due colonne: - img con height=1 e nome: nome-file_r*_c* - spacer CASO 2 Creazione di una colonna contenente limg con attributo height=1 Creazione di una riga (successiva a quella contenente la slice con attributo height<1px) con due colonne: - img con height<1 px - spacer

7 7 Piastrellatura:Distanze Righe- CAS0 1 (1) <img name=Stefy.gif src=.. width=423 height=143 border=0 alt=> height=143 border=0 alt=> <td> <img src=spacer.gif width=1 height=143 border=0 alt=> <img name=main_r2_c4 src=.. width=423 height=1 border=0 alt=> <img src=spacer.gif width=1height=1 Border=0 alt=>

8 8 Piastrellatura:Distanze Righe - CASO 1 (2) No Spacer <img name=Stefy.gif src=.. width=423 height=144 border=0 alt=> height=144 border=0 alt=> <td/> With Spacer <img name=Stefy.gif src=.. width=423 height=144 border=0 alt=> height=144 border=0 alt=> <td> <img src=spacer.gif width=1 height=144 border=0 alt=>

9 9 Piastrellatura:Distanze Righe - NoSpacer

10 10 Piastrellatura:Distanze Righe - WithSpacer

11 11 Piastrellatura:Distanze Righe - CASO 2 (1) <img name=main_r1_c4 src=.. width=423 height=1 border=0 alt=> height=1 border=0 alt=> <td> <img src=spacer.gif width=1 height=1 border=0 alt=> <img name=Stefy src=.. width=423 height=143 border=0 alt=> <img src=spacer.gif width=1 height=143 border=0 alt=>

12 12 Piastrellatura:Distanze Righe - CASO 2 (2)

13 13 Piastrellatura:Distanze Righe - CASO 2 (3) <img name=main_r1_c4 src=.. width=423 height=1 border=0 alt=> height=1 border=0 alt=> <td> <img src=spacer.gif width=1 height=1 border=0 alt=> <img name=Stefy src=.. width=423 height=143 border=0 alt=> <img src=spacer.gif width=1 height=143 border=0 alt=> <img name=Stefy src=.. width=423 height=144 border=0 alt=> height=144 border=0 alt=>

14 14 Piastrellatura:Distanze Colonne CASO 1 Creazione di una colonna (successiva a quella contenente la slice con attributo width<1px) con: - img con width=1 e nome: nome-file_r*_c* CASO 2 Creazione di una colonna (precedente a quella contenente la slice con attributo width<1px) con: - img con width=1 e nome: nome-file_r*_c*

15 15 Piastrellatura:Distanze Colonne - CASO 1 (1) <img name=last1 src=.. width=11 height=35 border=0 alt=>>/a> height=35 border=0 alt=>>/a> <img name=main_r6_c9 src= width=1 height=35 border=0 alt=> <img src=spacer.gif width=1 height=35 border=0 alt=>

16 16 Piastrellatura:Distanze Colonne - CASO 1 (2)

17 17 Piastrellatura:Distanze Colonne - CASO 1 (3) <img name=last1 src=.. width=11 height=35 border=0 alt=>>/a> height=35 border=0 alt=>>/a> <img name=main_r6_c9 src= width=1 height=35 border=0 alt=> <img src=spacer.gif width=1 height=35 border=0 alt=> <img name=last1 src=.. width=12 height=35 border=0 alt=>>/a> height=35 border=0 alt=>>/a> <img src=spacer.gif width=1 height=35 border=0 alt=>

18 18 Piastrellatura:Distanze Colonne - CASO 2 (1) <img name=main_r4_c1 src= width=1 height=235 border=0 alt=> <img name=vert src=.. width=15 height=235 border=0 alt=>>/a> height=235 border=0 alt=>>/a>........... <img src=spacer.gif width=1 height=235 border=0 alt=>

19 19 Piastrellatura:Distanze Colonne - CASO 2 (2)

20 20 Piastrellatura:Distanze Colonne - CASO 2 (3) <img name=main_r4_c1 src= width=1 height=235 border=0 alt=> <img name=vert src=.. width=15 height=235 border=0 alt=>>/a> height=235 border=0 alt=>>/a>........... <img src=spacer.gif width=1 height=235 border=0 alt=>... <img name=vert src=.. width=16 height=235 border=0 alt=>>/a> height=235 border=0 alt=>>/a>........... <img src=spacer.gif width=1 height=235 border=0 alt=>

21 21 Problemi da risolvere Eliminare e Nel caso in cui la colonna generata da Fireworks giace esattamente tra due colonne di uguale altezza, incremento di 1 px lattributo weight della colonna che giace nella parte sx Non gestito il caso in cui la riga generata da Fireworks giace tra due righe di uguale larghezza

22 22 Piastrellatura:Sovrapposizioni Individuazione delle img attraverso XPath nel file di configurazione Pulizia delle stesse attraverso la funzione clean in ISA.asp Tale pulizia è effettuata tra la PreParsing e la PostParsing styleclean= clean(loadString(stylest,true),cleanStyleO)

23 23 Piastrellatura:Sovrapposizioni Righe - CASO 1 CASO 1 Height slice=height bitmap La tr[1] successiva contiene colonne con attributo rowspan incrementato di 1 px (come tutte le colonne che occupano la riga) e unimg spacer.gif con attributo height=witdh=1 La tr[2] successiva contiene un solo un img spacer.gif con attributo width=1 e height=height[tr--]-1

24 24 Piastrellatura:Sovrapposizioni Righe - CASO 2 CASO 2 Se WIDTH SLICE OVERLAP=WIDTH SLICE COPERTA Height slice Overlap=height bitmap +1 e giace in una riga con uno spacer di attributi height=width=1 La colonna della tr[1] precedente contenente la slice coperta ha attributo height decrementato di1 e tutte le altre colonne hanno attributo rowspan incrementato di 1 px. Se WIDTH SLICE OVERLAP!=WIDTH SLICE COPERTA La riga contenente la slice overlap contiene un img creata da Fireworks con attributo height=1 e width=width slice coperta - width slice Overlap. Tutte le colonne di questa riga hanno attributo rowspan incrementato di 1 px.

25 25 Piastrellatura:Sovrapposizioni Righe - CASO 1(1) a b c w=423 h=144 spacer w=1 h=144 d e f g h spacer w=1 h=1 spacer w=1 h=26

26 26 Piastrellatura:Sovrapposizioni Righe-CASO 1 (2)

27 27 Piastrellatura:Sovrapposizioni Righe-CASO 1 (3) a b c w=423 h=144 spacer w=1 h=144 d e f g h spacer w=1 h=1 spacer w=1 h=26 a b c w=423 h=144 d e f g h

28 28 Piastrellatura:Sovrapposizioni Righe-CASO 2 (1) a b c w=323 h=143 spacer w=1 h=143 e w=323 h=28 spacer w=1 h=1 d w=185 h=26 spacer w=1 h=26 main_r4_c1 w=16 h=1 g w=169 h=255 spacer w=1 h=1 f.................

29 29 Piastrellatura:Sovrapposizioni Righe-CASO 2 (2)

30 30 Piastrellatura:Sovrapposizioni Righe-CASO 2 (3) a b c w=323 h=143 spacer w=1 h=143 e w=323 h=28 spacer w=1 h=1 d w=185 h=26 spacer w=1 h=26 main_r4_c1 w=16 h=1 g w=169 h=255 spacer w=1 h=1 f................. a b c w=323 h=144 d w=185 h=27 e w=323 h=27 f g w=169 h=254 i............

31 31 Piastrellatura:Sovrapposizioni Colonne - CASO 1 CASO 1 Width slice=width bitmap Incremento di 1 dellattributo colspan di tutte le colonne delle righe precedenti contenenti img che occupano la medesima colonna della slice overlap CASO PARTICOLARE ????? Se la slice copre una slice che occupa più righe questultima viene divisa in due (o più) parti:

32 32 Piastrellatura:Sovrapposizioni Colonne - CASO 2 CASO 2 Width slice=width bitmap + 1px colspan slice++ La slice contenuta nella stessa riga ma colonna precedente ha width<1px Incremento di 1 dellattributo colspan di tutte le colonne delle righe precedenti contenenti img che occupano la medesima colonna della slice overlap CASO PARTICOLARE Se la slice copre una slice che occupa più righe questultima viene divisa in due (o più) parti: La prima ha la width originaria e height=height slice coperta - height slice overlap e giace nelle righe precedenti quella contenente la slice overlap La seconda ha la width<1px rispetto la width originaria e height= height slice overlap

33 33 Piastrellatura:Sovrapposizioni Colonne - CASO 2 (1)

34 34 Piastrellatura:Sovrapposizioni Colonne - CASO 2 (2) A B width="112" height="171" C spacer width="1" height="144" D E spacer F G main_r3_c3" width="111" height="254" H width="300" height="254" I spacer.gif"

35 35 Piastrellatura:Sovrapposizioni Colonne - CASO 1+CASO 2

36 36 Piastrellatura:Sovrapposizioni Colonne - CASO 1+CASO 2 (1) A B width="112" height="171" main_r1_c6 width="323" height="144" spacer width="1" height="144" D E spacer width="1" height="27" F G width="170" height="254" main_r3_c4 width="111" height="254" H I spacer.gif L M spacer.gif

37 37 ZONE LIBERE - Distanze