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

1

FORMATO LAYOUT

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

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

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

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

Piastrellatura:Distanze

Individuazione delle img attraverso XPath nel file di configurazione

<clean type="distance"><rowpost where="//td//img[(@width =

following::tr[1]/td//img/@width) and (following::tr[1]/td//img/@height='1')]"/>

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

Piastrellatura:DistanzeRighe CASO 1 Creazione di una riga (successiva a quella contenentela slice con attributo height<1px) con due colonne: - img con height=‘1’ e nome: nome-file_r*_c* - spacerCASO 2 Creazione di una colonna contenente l’img con attributo

height=‘1 Creazione di una riga (successiva a quella contenentela slice con attributo height<1px) con due colonne: - img con height<1 px - spacer

7

Piastrellatura:DistanzeRighe- CAS0 1 (1)<tr><!– row 1 --><td rowspan=“2” colspan=“2”></td><td rowspan=“2”> </td><td colspan=“6”><td colspan=“6”><img name=“Stefy.gif” src=“..” width=“423”<img name=“Stefy.gif” src=“..” width=“423”height=“143” border=“0” alt=“”> </td> height=“143” border=“0” alt=“”> </td> <td><td><img src=“spacer.gif” width=“1” height=“143”border=“0” alt=“”> </td> <tr> <tr><!-- row 2 --><td colspan=“6”><img name=“main_r2_c4” src=“..”

width=“423”height=“1” border=“0” alt=“”> </td><td><img src=“spacer.gif” width=“1”height=“1”Border=“0” alt=“”> </td></tr>

8

Piastrellatura:DistanzeRighe - CASO 1 (2)No Spacer<tr><!– row 1 --><td colspan=“2”></td><td> </td><td colspan=“6”><td colspan=“6”><img name=“Stefy.gif” src=“..” width=“423”<img name=“Stefy.gif” src=“..” width=“423”height=“144” border=“0” alt=“”> </td> height=“144” border=“0” alt=“”> </td> <td/><td/> </tr> <tr><td/></tr>

With Spacer<tr><!– row 1 --><td colspan=“2”></td><td> </td><td colspan=“6”><td colspan=“6”><img name=“Stefy.gif” src=“..” width=“423”<img name=“Stefy.gif” src=“..” width=“423”height=“144”height=“144” border=“0” alt=“”> </td> border=“0” alt=“”> </td> <td><td><img src=“spacer.gif” width=“1” height=“144”border=“0” alt=“”> </td> <tr> <tr> <tr><!-- row 2 --><td colspan=“6”/></tr>

9

Piastrellatura:DistanzeRighe - NoSpacer

10

Piastrellatura:DistanzeRighe - WithSpacer

11

Piastrellatura:DistanzeRighe - CASO 2 (1)<tr><!– row 1 --><td rowspan=“2” colspan=“2”></td><td rowspan=“2”> </td><td colspan=“7”><td colspan=“7”><img name=“main_r1_c4” src=“..” <img name=“main_r1_c4” src=“..”

width=“423”width=“423”height=“1” border=“0” alt=“”> </td> height=“1” border=“0” alt=“”> </td> <td><td><img src=“spacer.gif” width=“1” height=“1”border=“0” alt=“”> </td> <tr> <tr><!-- row 2 --><td colspan=“7”><img name=“Stefy” src=“..” width=“423”height=“143” border=“0” alt=“”> </td><td><img src=“spacer.gif” width=“1”height=“143” border=“0” alt=“”> </td></tr>

12

Piastrellatura:DistanzeRighe - CASO 2 (2)

13

Piastrellatura:DistanzeRighe - CASO 2 (3)<tr><!– row 1 --><td rowspan=“2” colspan=“2”></td><td rowspan=“2”> </td><td colspan=“7”><td colspan=“7”><img name=“main_r1_c4” src=“..” <img name=“main_r1_c4” src=“..”

width=“423”width=“423”height=“1” border=“0” alt=“”> </td> height=“1” border=“0” alt=“”> </td> <td><td><img src=“spacer.gif” width=“1” height=“1”border=“0” alt=“”> </td> <tr> <tr><!-- row 2 --><td colspan=“7”><img name=“Stefy” src=“..” width=“423”height=“143” border=“0” alt=“”> </td><td><img src=“spacer.gif” width=“1”height=“143” border=“0” alt=“”> </td></tr>

<tr><!– row 1 --><td colspan=“2”></td><td> </td><td colspan=“7”><td colspan=“7”><img name=“Stefy” src=“..” width=“423”<img name=“Stefy” src=“..” width=“423”height=“144” border=“0” alt=“”> </td> height=“144” border=“0” alt=“”> </td> <<td/> <tr> <tr><td/></tr>

14

Piastrellatura:DistanzeColonne

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

Piastrellatura:DistanzeColonne - CASO 1 (1)<tr><!– row 5 --><td colspan=“11”></td><td> </td><tr><!– row 6 --><td colspan=“7”></td><td><a href=“fvstretch” ...><td><a href=“fvstretch” ...><img name=“last1” src=“..” width=“11”<img name=“last1” src=“..” width=“11”height=“35” border=“0” alt=“”>>/a></td> height=“35” border=“0” alt=“”>>/a></td> <td><img name=“main_r6_c9” src=“”

width=“1”height=“35” border=“0” alt=“”></td><td colpan=“2”></td><td><img src=“spacer.gif” width=“1”height=“35” border=“0” alt=“”> </td></tr>

16

Piastrellatura:DistanzeColonne - CASO 1 (2)

17

Piastrellatura:DistanzeColonne - CASO 1 (3)<tr><!– row 5 --><td colspan=“11”></td><td> </td><tr><!– row 6 --><td colspan=“7”></td><td><a href=“fvstretch” ...><td><a href=“fvstretch” ...><img name=“last1” src=“..” width=“11”<img name=“last1” src=“..” width=“11”height=“35” border=“0” alt=“”>>/a></td> height=“35” border=“0” alt=“”>>/a></td> <td><img name=“main_r6_c9” src=“”

width=“1”height=“35” border=“0” alt=“”></td><td colpan=“2”></td><td><img src=“spacer.gif” width=“1”height=“35” border=“0” alt=“”> </td></tr>

<tr><!– row 5 --><td colspan=“10”></td><td> </td><tr><!– row 6 --><td colspan=“7”></td><td><a href=“fvstretch” ...><td><a href=“fvstretch” ...><img name=“last1” src=“..” width=“12”<img name=“last1” src=“..” width=“12”height=“35” border=“0” alt=“”>>/a></td> height=“35” border=“0” alt=“”>>/a></td> <td/><td colpan=“2”></td><td><img src=“spacer.gif” width=“1”height=“35” border=“0” alt=“”> </td></tr>

18

Piastrellatura:DistanzeColonne - CASO 2 (1)<tr><!– row 3 --><td colspan=“11”></td><td> </td><tr><!– row 4 --><td><img name=“main_r4_c1” src=“”

width=“1”height=“235” border=“0” alt=“”></td> <td><a href=“fvstretch” ...><td><a href=“fvstretch” ...><img name=“vert” src=“..” width=“15”<img name=“vert” src=“..” width=“15”height=“235” border=“0” height=“235” border=“0”

alt=“”>>/a></td> alt=“”>>/a></td> <td colpan=“3”></td>...........<td><img src=“spacer.gif” width=“1”height=“235” border=“0” alt=“”> </td></tr>

19

Piastrellatura:DistanzeColonne - CASO 2 (2)

20

Piastrellatura:DistanzeColonne - CASO 2 (3)<tr><!– row 3 --><td colspan=“11”></td><td> </td><tr><!– row 4 --><td><img name=“main_r4_c1” src=“”

width=“1”height=“235” border=“0” alt=“”></td> <td><a href=“fvstretch” ...><td><a href=“fvstretch” ...><img name=“vert” src=“..” width=“15”<img name=“vert” src=“..” width=“15”height=“235” border=“0” height=“235” border=“0”

alt=“”>>/a></td> alt=“”>>/a></td> <td colpan=“3”></td>...........<td><img src=“spacer.gif” width=“1”height=“235” border=“0” alt=“”> </td></tr>

<tr><!– row 3 --><td colspan=“10”></td><td>...</td><tr><!– row 4 --><td/> <td><a href=“fvstretch” ...><td><a href=“fvstretch” ...><img name=“vert” src=“..” width=“16”<img name=“vert” src=“..” width=“16”height=“235” border=“0” height=“235” border=“0”

alt=“”>>/a></td> alt=“”>>/a></td> <td colpan=“3”></td>...........<td><img src=“spacer.gif” width=“1”height=“235” border=“0” alt=“”> </td></tr>

21

Problemi da risolvere Eliminare <td/> e <tr/> Nel caso in cui la colonna generata da

Fireworks giace esattamente tra due colonne di uguale altezza, incremento di 1 px l’attributo “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

Piastrellatura:Sovrapposizioni

Individuazione delle img attraverso XPath nel file di configurazione

<clean type=“overlap">

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

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 un’img “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

Piastrellatura:Sovrapposizioni Righe - CASO 2CASO 2Se 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

Piastrellatura:Sovrapposizioni Righe - CASO 1(1)<tr><td colspan=2>a</td><td>b</td><td colspan=6>c w=423 h=144</td><td> spacer w=1 h=144</td></tr><tr><td rowspan=2>d</td><td rowspan=2 colspan=3>e</td><td rowspan=2>f</td><td rowspan=2 colspan=3>g</td><td rowspan=2>h</td><td>spacer w=1 h=1</td></tr><tr><td> spacer w=1 h=26</td></tr>

26

Piastrellatura:Sovrapposizioni Righe-CASO 1 (2)

27

Piastrellatura:Sovrapposizioni Righe-CASO 1 (3)<tr><td colspan=2>a</td><td>b</td><td colspan=6>c w=423 h=144</td><td> spacer w=1 h=144</td></tr><tr><td rowspan=2>d</td><td rowspan=2 colspan=3>e</td><td rowspan=2>f</td><td rowspan=2 colspan=3>g</td><td rowspan=2>h</td><td>spacer w=1 h=1</td></tr><tr><td> spacer w=1 h=26</td></tr>

<tr><td colspan=2>a</td><td>b</td><td colspan=6>c w=423 h=144</td><td/></tr><tr><td >d</td><td colspan=3>e</td><td>f</td><td colspan=3>g</td><td >h</td><td/></tr><tr><td/></tr>

28

Piastrellatura:Sovrapposizioni Righe-CASO 2 (1)<tr><td rowspan=2>a</td><td rowspan=5>b</td><td>c w=323 h=143</td><td> spacer w=1 h=143</td></tr><tr><td rowspan=3 colspan=3>e w=323

h=28</td><td> spacer w=1 h=1</td></tr><tr><td>d w=185 h=26</td><td> spacer w=1 h=26</td></tr><tr><td>main_r4_c1 w=16 h=1 </td><td rowspan=2>g w=169 h=255</td><td>spacer w=1 h=1</td></tr><tr><td>f</td>.................</tr>

29

Piastrellatura:Sovrapposizioni Righe-CASO 2 (2)

30

Piastrellatura:Sovrapposizioni Righe-CASO 2 (3)<tr><td colspan=2 rowspan=2>a</td><td rowspan=5>b</td><td>c w=323 h=143</td><td> spacer w=1 h=143</td></tr><tr><td rowspan=3 colspan=3>e w=323

h=28</td><td> spacer w=1 h=1</td></tr><tr><td colspan=2>d w=185 h=26</td><td> spacer w=1 h=26</td></tr><tr><td>main_r4_c1 w=16 h=1 </td><td rowspan=2>g w=169 h=255</td><td>spacer w=1 h=1</td></tr><tr><td>f</td>.................</tr>

<tr><td colspan=2>a</td><td rowspan=3>b</td><td>c w=323 h=144</td><td/><tr><td colspan=2>d w=185 h=27</td><td >e w=323 h=27</td><td/><tr><td>f</td><td>g w=169 h=254</td><td>i</td>............<td/></tr>

31

Piastrellatura:Sovrapposizioni Colonne - CASO 1

CASO 1 Width slice=width bitmap Incremento di 1 dell’attributo “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 quest’ultima viene divisa in due (o più) parti:

32

Piastrellatura:Sovrapposizioni Colonne - CASO 2CASO 2 Width slice=width bitmap + 1px “colspan” slice++ La slice contenuta nella stessa riga ma colonna precedente ha

width<1px Incremento di 1 dell’attributo “colspan” di tutte le colonne delle righe

precedenti contenenti img che occupano la medesima colonna della slice “overlap”

CASO PARTICOLARESe la slice ‘copre’ una slice che occupa più righe quest’ultima 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

Piastrellatura:Sovrapposizioni Colonne - CASO 2 (1)

34

Piastrellatura:Sovrapposizioni Colonne - CASO 2 (2)<tr><!-- row 1 --><td colspan="2">A</td><td rowspan="2" colspan="2">B width="112" height="171" </td><td colspan="4">C</td><td>spacer width="1" height="144" </td></tr><tr><!-- row 2 --><td colspan="2">D</td><td colspan="4">E</td><td>spacer</td></tr><tr><!-- row 3 --><td>F</td><td>G</td><td>main_r3_c3" width="111" height="254" </td><td colspan="4">H width="300" height="254"</td><td>I</td><td>spacer.gif"</td></tr>

35

Piastrellatura:Sovrapposizioni Colonne - CASO 1+CASO 2

36

Piastrellatura:Sovrapposizioni Colonne - CASO 1+CASO 2 (1)<tr><!-- row 1 --><td colspan="2">A</td><td rowspan="2" colspan="3">B width="112" height="171" </td><td colspan="3">main_r1_c6 width="323" height="144" </td><td>spacer width="1" height="144" </td></tr><tr><!-- row 2 --><td colspan="2">D</td><td colspan="3">E</td><td>spacer width="1" height="27" </td></tr><tr><!-- row 3 --><td>F</td><td colspan="2">G width="170" height="254" </td><td colspan="2">main_r3_c4 width="111" height="254" </td><td colspan="2">H</td><td>I</td><td>spacer.gif</td></tr><tr><!-- row 4 --><td colspan="6">L</td><td colspan="2">M</td><td>spacer.gif</td></tr>

37

ZONE LIBERE - Distanze