Taller: Traducció de Softcatalà a XHTML i CSS [part 1]

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

Captura de pantalla de la pàgina principal de Softcatalà Dibuix de les zones del layout de Softcatalà

É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&ograve;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&ccedil;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.

L'exemple del còdi XHTML.

Comentaris

Comentat per erre el 11/05/04

Nunca he estructurado las páginas con divs. Creo que voy a hacer un par de ejemplos para probar basándome en estos apuntes. ¿Podrías facilitar las css que se necesitarían para comprender del todo este artículo? Soy nuevo en esto... igual estoy diciendo una barbaridad...

Gran post!!
Comentat per are el 12/05/04

la segona part del post serà com estructurar les CSS, si tot va bé demà passat ;) vaig creure convenient separar-ho en dos posts, així no és tan indigerible :D
Comentat per nikochan el 12/05/04

Bona iniciativa are ;)
Quan acabis de fer la reconstrucció del site, posa'l en coneixement dels de SoftCatalà, aviam si t'ho tenen en consideració, i es replantegen un canvi cap a l'estandarització.
Comentat per are el 12/05/04

gràcies :)
els hi vaig enviar un mail el dissabte i no han donat senyals de vida...
Comentat per erre el 12/05/04

Tienes toda la razón, separar los temas es lo mejor para llegar a conclusiones. Por ahora lo he entendido bien... eso es bueno, soy tu conejillo de indias.
Comentat per Et fa una Volldamm? el 13/05/04

Interessant taller de XHTML i CSS
A a-css s'està publicant un taller de com passar un disseny complexe basat en taules a un disseny semàntic correcte, emprant XHTML i CSS. El lloc web seleccionat pel taller és el de Softcatalà i de moment ja podem veure la primera part del treball: d...

a.css

Menú