Upload
lauro-ferrara
View
229
Download
0
Embed Size (px)
Citation preview
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