TUTOWEB: Tutoriales de Diseño gráfico en la Web
Tutorial: Páginas web con Corel Graphics Suite y CSS
Paso 3: Esqueleto, músculos y tendones
Codificar html a la usanza antigua: con tablas y etiquetas desfasadas, es -qué duda cabe- una tarea titánica y aburrida. Actualmente trabajando bajo los estándares web el código se reduce en forma impresionante, porque no necesitamos atiborrarlo de esos elementos arcaicos.
El xhtml (el sucesor del html) sólo alberga el contenido de la página y no los atributos de su presentación. De modo que podemos codificar manualmente sin miedo valiéndonos de un editor de código html.
Entre los programas para editar código html hay una oferta impresionante. Si tenemos Dreamweaver, Golive, u otro, perfecto pero no es algo que nos deba quitar el sueño. Escribir código bajo estándares reduce abismalmente la labor, así que codificar manualmente es saludable y hasta divertido. Entre los EDITORES HTML GRATUITOS de nivel profesional destacan:
HTML-Kit: Potentísimo editor de páginas web, trabaja únicamente a nivel de código. Limpia el código para hacerlo compatible con estándares web. (Español sólo en menúes)
First Page 2006: Algunos lo consideran el Dreamweaver gratuito, muy avanzado y con una interfaz super cómoda. Trabaja en vista código, diseño y previsualización. (Inglés)
NVU: Buen editor de páginas, con ventanas de diseño, código y previsualización. (Español)
Amaya: Creado por el W3C, es un híbrido entre navegador y editor de páginas web. Como no podía ser de otro modo, tiene pleno respaldo para estándares web. (Español)
Araneae: Sencillo editor de código muy práctico y mil veces más eficiente que el bloc de notas. Colorea el código y crea plantillas facilitando la edición html. (Español)
Mi abuelita diseñaba con tablas
Las tablas html han sido, durante años la salvación de muchos diseñadores web. Pero ahora estos elementos están desfasados porque añaden demasiado código y no permiten modificar la estructura tan fácilmente. Aunque los estándares no prohiben usarlas, se recomienda hacerlo sólo para mostrar datos tabulados. Su remplazante ideal: las etiquetas DIV, que son una especie de contenedores o bloques donde podemos almacenar los elementos que deseemos.
-A cada elemento de nuestra página lo dividimos en bloques. Según nuestro diseño en CorelDraw nuestros bloques serán los siguientes.
A cada uno tenemos que darle nombres descriptivos. Podemos aplicar bloques dentro de bloques y así sucesivamente.
-Estos bloques se representarán cada uno por medio de capas que utilizarán su respectivo nombre con una etiqueta <div> de apertura y una de cierre </div> . El div inicial esta acompañado de un Id, es decir, identificador del bloque para que podamos invocarlo por medio de las CSS. Ejemplo:
<div id="escena"> .....el contenido de la página... </div>
El Código...¡Ay, mamita!
El código xhtml no es un ser maléfico e indescifrable que muchos alguna vez imaginamos.
El hxtml consiste en una serie de etiquetas básicas, presentes invariblemente en todos los archivos xhtml y otras etiquetas que se usan de acuerdo a nuestras necesidades. El marcado base empieza con la declaración DOCTYPE o DTD. Con ello le indicamos a los llamados "Agentes de usuario", como dispositivos (pc, navegadores, teléfonos móviles, lectores de pantalla, etc.) que nuestro documento se ciñe a los estándares web. Es algo asi como:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Entonces llegamos al punto que el archivo base será así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titulo de Página</title> <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" /> </head> <body> ...el contenido de la página.... </body> </html>
Todo lo que se abre, se cierra
Dentro de las etiquetas body de apertura (<body>) y de cierre (</body>) ubicaremos nuestras etiquetas <div> según lo planeado en esta jerarquía:
Mandando a la tierra del olvido las aburridas y geriátricas tablas, el código con su jerarquía será tan simple como esto:
<body>
<div id="escena">
<div id="cabecera">Contenido de cabecera</div>
<div id="navSup">Contenido de navSup</div>
<div id="lateral1">Contendio de la lateral1</div>
<div id="lateral2">Contendio de la lateral2</div>
<ul id="navLateral">contenido de navLateral</div>
<ul id="navLateral2">contenido de navLateral2</div>
<div id="conText">Contenido del texto</div>
<div id="pie">Contenido de pie</div>
</div>
</body>
- Nunca debemos olvidar cerrar una etiqueta, ya sea esta DIV u otra de xhtml para evitar errores en la página. Cuando aumenta nuestro contenido, a veces resulta bastante difícil ver claramente cuál es la etiqueta de cierra de un bloque DIV determinado. Por esto, una muy buena práctica es poner comentario al cerrar la etiqueta DIV, por ejemplo:
<div id="lateral2"> ...Contenido de lateral muy extenso y con varios bloques anidados... </div><!--fin de #lateral2-->
El XHTML es el reemplazante del html, y está basado en el XML, un lenguaje que tiene por finalidad describir datos y no mostralos. El XHTML es html mejorado, y la base de los sitios con estándares, permitiendo que cualquier dispositivo pueda mostrar nuestras páginas y que éstas sean accesibles al mayor número de personas.
Esta es una guía breve sobre el XHTML.
Llenando el carrito del 'Super'
Ahora podemos insertar el contenido en su bloque DIV correspondiente. El texto lo podemos copiar y pegar de otra aplicación. Para las imágenes nos valemos de el comando 'Insertar imagen' de HTML-KIT:
- Para cumplir uno de los requisitos de Accesibilidad web, es importante incluir la etiqueta ALT para todas las imágenes que insertemos. Si usamos HTML-KIT, podemos hacerlo en la ventana que nos aparece al insertar imagen.
Una vez insertada nuestra imagen con su atributo ALT, el código quedará así:
<img src="imas/ima1.jpg" border="0" alt="Nuestro albergue"/>
Definir todas las etiquetas ALT para nuestras imágenes no es snobismo de webmaster sino un importante requisito de accesibilidad. Por ejemplo, si un usuario invidente utiliza un lector de pantalla para escuchar el contenido web, el dispositivo recurrirá a la etiqueta ALT para describirle su contenido.
- Todos los párrafos deben estar contenidos entre etiquetas <p> y </p> para el marcado correcto, mientras que el encabezado, los títulos y subtitulos deben marcarse con etiquetas h1, h2, h3, h4 h5 o h6 según necesitemos para establecer jerarquías de contenido textual.
<h1>Este será el encabezado</h1>
- Para la barra de navegación superior y lateral crearemos listas sin ordenar. Un ejemplo de lista en xhtml sería:
<ul> <li>>China</li> <li>>Japón</li> <li>Korea</li> </ul>
El resultado:
- China
- Japón
- Korea
El bloque de la barra de navegación superior, contiene una lista, por eso lo llamamos así
<ul id="navSup">
Así quedará nuestro código de la barra de navegación superior con sus enlaces:
<ul id="navSup"> <li><a href="index.htm">Portada</a></li> <li><a href="albergue.htm">Nuestro Albergue</a></li> <li><a href="proyectos.htm">Proyectos</a></li> <li><a href="tarifas.htm">Tarifas</a></li> <li><a href="expediciones.htm">Expediciones</a></li> <li><a href="mapas.htm">Mapas</a></li> <li><a href="contac.htm">Contáctenos</a></li> </ul>
¿Y usted cómo lo ve, señor?
Este será nuestro código completo con todo el "carrito lleno". Y no hemos necesitado los favores de "San Dreamweaver" ni del señor Frontapage, ni de ningún otro santo.
El archivo xhtml con todas sus etiquetas correspondientes se verá muy plano en un navegador; pero nos garantiza que cualquier lector de pantalla o dispositivo con acceso a internet podrá interpretarlo correctamente.
Nuestra página visualizada en un navegador es ésta. Obviamente que está feucha, porque necesita el maquillaje y el piling que sólo CSS le puede dar.
