Taller: Traducció de Softcatalà a XHTML i CSS [part 1]
Publicat el 11/05/2004
Objectiu
Passar el layout de Softcatalà a XHTML 1.0 Strict i CSS 2.1. Es mantindrà l'estructura i la ubicació dels elements però canviarà la estètica.
nota: Aquest taller ha agafat Softcatalà només com a exemple d'un html basat en taules, el redisseny és fictici.
1. Detectar les grans zones del layout
És una estructura de tres columnes amb capçalera i peu (S'ha de tenir en compte que les pàgines interiors passen a dues columnes amb capçalera i peu).
- zona A: conté el nom del lloc, el menú principal i la explicació de qui són.
- zona B: conté seccions de segon nivell.
- zona C: conté una secció destacada i la secció de notícies.
- zona D: conté el cercador i seccions de segon nivell.
- zona E: conté una rèplica del menú principal i informació legal.
2. Entrant a l'XHTML, DOCTYPE i metadades
Al còdi original trobem el següent inici:
<html>
<head>
<LINK REL="SHORTCUT ICON"
HREF="http://www.softcatala.org/softcatala.ico">
<title>Informàtica i programari en català</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-- -->
</style>
<link rel="stylesheet" href="/css/softcatala.css">
</head>
I quedaria
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="ca"
xml:lang="ca">
<head>
<title>Informàtica i programari en català</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon"
href="http://www.softcatala.org/softcatala.ico"
type="image/ico" />
<link rel="stylesheet" href="/css/softcatala.css"
media="screen" type="text/css" />
</head>
Els script de la pàgina original els he suprimit. Si fossin necessaris s'afegiria la sentència següent:
<script src="/js/script.js" type="text/javascript"></script>
3. Dins el body, la capçalera
la capçalera original és un caos de taules i imatges innecessaries
<body
onLoad="MM_preloadImages('/imatges/cap/top_r2_c4_F2.gif')"
topmargin="0" marginheight="0" bgcolor="#FFFFFF"
background="/imatges/cap/fons.jpg" link="#006600" >
<table border="0" cellpadding="0" cellspacing="0" width="700" align="center">
<tr><!-- spacing row, 1 height. -->
<td><img name="FwShim_Col_0" src="/imatges/sp.gif" width="81" height="1" border="0"></td>
<td><img
name="FwShim_ColA_1" src="/imatges/sp.gif" width="105" height="1"
border="0"></td>
<td><img name="FwShim_Col_2" src="/imatges/sp.gif" width="97" height="1" border="0"></td>
<td><img name="FwShim_Col_3" src="/imatges/sp.gif" width="103" height="1" border="0"></td>
<td><img name="FwShim_Col_4" src="/imatges/sp.gif" width="90" height="1" border="0"></td>
<td><img name="FwShim_Col_5" src="/imatges/sp.gif" width="96" height="1" border="0"></td>
<td><img name="FwShim_Col_6" src="/imatges/sp.gif" width="128" height="1" border="0"></td>
</tr>
<tr><!-- row 1 -->
<td colspan="7" background="/imatges/cap/top_r1_c1.gif">
<div align="center"></div>
</td>
<td><img name="FwShim_Row_0" src="/imatges/sp.gif" width="1" height="65" border="0"></td>
</tr>
<tr><!-- row 2 -->
<td><img
src="/imatges/cap/top_r2_c1.gif" name="top_r2_c1" width="81"
height="90" border="0"></td>
<td><img
src="/imatges/cap/top_r2_c2.gif" name="top_r2_c2" width="105"
height="90" border="0"></td>
<td><img
src="/imatges/cap/top_r2_c3.gif" name="top_r2_c3" width="97"
height="90" border="0"></td>
<td><a href="/index.htm#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image62','','/imatges/cap/top_r2_c4_F2.gif',1)"><img
name="Image62" border="0" src="/imatges/cap/top_r2_c4.gif" width="103"
height="90"></a></td>
<td><img
src="/imatges/cap/top_r2_c5.gif" name="top_r2_c5" width="90"
height="90" border="0"></td>
<td><img
src="/imatges/cap/top_r2_c6.gif" name="top_r2_c6" width="96"
height="90" border="0"></td>
<td><img
src="/imatges/cap/top_r2_c7.gif" name="top_r2_c7" width="128"
height="90" border="0"></td>
<td><img name="FwShim_Row_1" src="/imatges/sp.gif" width="1" height="90" border="0"></td>
</tr>
<tr><!-- row 3 -->
<td><img
src="/imatges/cap/top_r3_c1.gif" name="top_r3_c1" width="81"
height="44" border="0"></td>
<td><img
src="/imatges/cap/top_r3_c2.gif" name="top_r3_c2" width="105"
height="44" border="0"></td>
<td><img
src="/imatges/cap/top_r3_c3.gif" name="top_r3_c3" width="97"
height="44" border="0"></td>
<td><img
src="/imatges/cap/top_r3_c4.gif" name="top_r3_c4" width="103"
height="44" border="0"></td>
<td><img
src="/imatges/cap/top_r3_c5.gif" name="top_r3_c5" width="90"
height="44" border="0"></td>
<td><img
src="/imatges/cap/top_r3_c6.gif" name="top_r3_c6" width="96"
height="44" border="0"></td>
<td><img
src="/imatges/cap/top_r3_c7.gif" name="top_r3_c7" width="128"
height="44" border="0"></td>
<td><img name="FwShim_Row_2" src="/imatges/sp.gif" width="1" height="44" border="0"></td>
</tr>
<tr><!-- row 4 -->
<td colspan="7" bgcolor="#FFFFCC">
<div align="center"><font
face="Verdana, Arial, Helvetica, sans-serif"
class="Txt-pequeBolcolor"><img src="/imatges/sp.gif" width="1"
height="15">[
<a
href="/index.htm">Inici</a> | <a href="/quisom.htm">Qui
som</a> | <a href="/projectes">Projectes</a>|
<a
href="/forum">Fòrums</a> | <a
href="/contacte.htm"> Escriu-nos</a>
|<a href="/botiga"
target="_new"> Botiga </a> | <a
href="http://linux.softcatala.org" target="_new">GNU/Linux</a>
| <a href="/mac.htm" target="_top"> Mac</a>| <a href="/traductor">Traductor
</a>|<a
href="/llistes">Llistes</a>|<a
href="/enllacos.htm">Enllaços</a>|<a
href="/ajuda">Ajuda</a>
] </font></div>
</td>
<td><img name="FwShim_Row_3" src="/imatges/sp.gif" width="1" height="16" border="0"></td>
</tr>
</table>
quedaria un pel més simple
<body>
<div id="contenidor">
<div id="cap">
<h1>SoftCatalà</h1>
<p>
<strong>Softcatalà.</strong> f.Organització sense...
<p>
</div>
<div id="menuprincipal">
<h2 class="ocult">Menú</h2>
<p class="ocult">
<a href="#contingut">saltar el menú</a>
</p>
<ul>
<li><a href="">Inici</a></li>
<li><a href="">Qui som</a></li>
<li><a href="">Projectes</a></li>
<li><a href="">Fòrums</a></li>
<li><a href="">Escriu-nos</a></li>
<li><a href="">Botiga</a></li>
<li><a href="">GNU/Linux</a></li>
<li><a href="">Mac</a></li>
<li><a href="">Traductor</a></li>
<li><a href="">Llistes</a></li>
<li><a href="">Enllaços</a></li>
<li><a href="">Ajuda</a></li>
</ul>
</div>
Totes les taules de la capçalera queden eliminades, només tenien un ús estructural.
Tots els elements i atributs que donaven estètica a la pàgina també han estat eliminats
S'ha afegit un <div id="contenidor"> que tindrà com a única funció permetre centrar la pàgina horitzontalment.
Un <div id="cap"> que conté el titular de primer nivell i una descripció.
Un <div id="menuprincipal"> que engloba un títol de segon nivell per marcar la secció, un enllaç per saltar el menú i un llistat amb els enllaços del menú.
La classe "ocult" tindrà la funció d'ocultar els elements a la presentació visual. Es podrien eliminar aquests elements però donen una bona estructura al document i permeten a qui usa lectors de pantalla a saltar el menú si així ho vol.
4. Dins el body, el cos
El cos també és un caos de taules i millor no posar el còdi original. Si algú el vol veure pot anar a Softcatalà o visitar-ne una còpia
El primer és tenir més o menys clar com es farà el CSS ja que el còdi XHTML en aquest cas serà fet a mida.
Tot el contingut del cos quedarà dins d'un div amb un id="cos". Dins d'aquest un div per les seccions esquerra, dreta i central. En aquest ordre.
<div id="cos">
<div id="esquerra">
Seccions de la columna esquerra
</div>
<div id="dreta">
Seccions de la columna dreta
</div>
<div id="contingut">
Seccions centrals
</div>
</div>
L'ordre és important ja que al CSS s'utilitzarà la propietat float per posicionar les dues columnes (esquerra i dreta).
L'estructura de cada secció serà similar. Un div amb un identificador per així poder controlar-les, en cas de volguer-ho, independentment. Dins un titol de segon nivell i després el contingut s'estructurarà en funció del que demani.
Només hi ha una exepció, per l'apartat "Top 10" s'utilitza una taula, ja que són dades tabulars.
La secció "Articles" quedarà de la següent manera:
<div id="articles">
<h2>Articles</h2>
<ul>
<li>
<a href="URI">Article 1</a>
<a href="URI">Article 2</a>
<a href="URI">Article 3</a>
<a href="URI">Article 4</a>
</li>
</ul>
</div>
El cas de la secció de "Notícies" serà una mica diferent, hi entren en joc titols de tercer nivell.
<div id="noticies">
<h2>Notícies</h2>
<h3>Titol de la notícia</h3>
<p>Cos de la notícia</p>
<p class="firmanoticia">Firma de la notícia</p>
<h3>Titol de la notícia</h3>
<p>Cos de la notícia</p>
<p class="firmanoticia">Firma de la notícia</p>
</div>
Al paràgraf del cos de la notícia s'hi pot afegir una classe per marcar a quina categoria pertany i associar-li una imatge via CSS.
La alternativa seria posar la imatge dins l'XHTML just després del titol de tercer nivell. A l'exemple hi ha els dos casos.
5. Dins el body, el peu
El peu serà un div amb un id="peu" i dins un address.
<div id="peu">
<address>Informació del copyright</address>
</div>
Aquesta no és l'única manera d'estructurar el contingut però és la que m'ha semblat més senzilla sense haver de fer massa complicat el CSS.