Professional Documents
Culture Documents
qxp
14/10/2009
11:58 p.m.
Pgina 13
Webmaster profesional
Diseo
del sitio y CSS
Para comenzar a dar respuesta
a las dudas y problemas
ms frecuentes que enfrenta
un diseador o un desarrollador
de sitios web, en el primer captulo
de este libro, abordaremos
las soluciones relacionadas
con el diseo del sitio, trabajo
con tablas, utilizacin de capas,
creacin de diferentes tipos
de mens y aplicacin de estilos CSS.
Captulo
01.qxp
14/10/2009
11:58 p.m.
Pgina 14
HTML
Con la llegada de la World Wide Web, fue fundamental contar con un lenguaje que se transformara en un estndar en la construccin de pginas web. A principios de la dcada del noventa, nace el HyperText Markup Language, nombre que podra traducirse como lenguaje de marcado (o etiquetado) de hipertexto,
HTML. An hoy es la base de las pginas web que vemos en Internet, potenciado con las ventajas que ofrecen las nuevas tecnologas.
HTML utiliza etiquetas que permiten enriquecer o agregar contenido adicional,
14
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 15
15
01.qxp
14/10/2009
11:58 p.m.
Pgina 16
ETIQUETA HTML
DESCRIPCIN DE SU FUNCIN4
<!DOCTYPE>
<html>
<head>
<title>
<link>
Permite vincular iconos o archivos externos, como por ejemplo hojas de estilo.
Se define dentro del encabezado.
<style>
Se utiliza para definir los estilos CSS y cdigos Javascript que se incluyen
dentro del documento. Se ubica dentro del encabezado.
<script>
<body>
<h1>
<h3>
<h4>
<h5>
<h6>
<p>
Define un prrafo.
<blockquote>
<br>
Con esta opcin, se agrega una lnea en blanco en el flujo. Acta como
<a>
Posibilita definir una tabla. Dentro de ella, se utiliza <tr> para crear
<div>
<frame>
Se emplea para definir un marco. Trabaja junto con <frameset>, que determina
<img>
<b>
<i>
<u>
www.redusers.com
14/10/2009
11:58 p.m.
Pgina 17
XML y XHTML
XML, cuyas siglas significan eXtensive Markup Language, es considerado como
un metalenguaje que define reglas, al permitir que otros lenguajes se basen en ellas.
Su desarrollo pertenece al World Wide Web Consortium (W3C).
01.qxp
QU ES ASP?
ASP es una tecnologa que fue creada por Microsoft. Permite el desarrollo de pginas web que
son procesadas e interpretadas por un servidor que devuelve un resultado al cliente, para ser
visualizado en el navegador. ASP significa Active Server Pages, que en castellano puede traducirse como pginas activas de servidor.
www.redusers.com
17
01.qxp
14/10/2009
11:58 p.m.
Pgina 18
CSS
Uno de los conceptos que ha crecido de manera notable en el mundo del diseo
web, es la utilizacin de hojas de estilo (Cascading Style Sheets) conocidas como
CSS. Las caractersticas que ofrece CSS resultan muy prcticas para el armado de
un sitio, ya que permiten realizar una separacin entre lo que es la estructura del
contenido y la forma de representarlo en la pantalla.
Es importante destacar que, si bien algunas de las caractersticas que ofrece CSS tambin pueden lograrse mediante HTML, CSS ofrece una mayor cantidad de efectos
y opciones para personalizar textos y elementos en general, lo que representa otra
de las ventajas de integrar esta opcin en el diseo de las pginas o de un sitio web.
Por sus caractersticas, CSS puede incorporarse en un documento HTML o
XHTML, o bien incluirse como un archivo aparte. Existen dos formas de incorporar CSS en un documento HTML. La primera consiste en declarar los estilos
y sus caractersticas en la cabecera del documento (entre las etiquetas <head> y
</head>). Esta opcin puede ser til para definir los estilos que tendr slo una
pgina en particular y no sern utilizados en otras.
La segunda alternativa es incluir los estilos y sus propiedades dentro del cuerpo del
HTML, es decir dentro de las etiquetas <body> y </body>. Se recomienda desestimar
el uso de esta opcin, ya que no colabora con la separacin de la estructura, debido
a que no permite tener todos los estilos en un solo lugar para ser modificados.
Para trabajar con estilos en un sitio, en especial cuando se utilizan en varias pginas
o se procede a integrarlos con lenguajes de programacin, es recomendable colocar
los estilos en un archivo especfico, tal como veremos en el punto 6 de este captulo.
Figura 4. Algunos navegadores, como Internet Explorer o Mozilla Firefox, permiten desactivar
los estilos de un sitio para lograr una visualizacin de l sin tener esta caracterstica habilitada.
18
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 19
19
14/10/2009
11:58 p.m.
Pgina 20
PSPad es un editor que cuenta con una licencia freeware y es apto para correr en
sistemas Windows. Reconoce sintaxis de diferentes lenguajes, y las resalta con color. Entre los lenguajes soportados, se encuentran HTML, XHTML, PHP, Perl,
VBScript, Java y JavaScript, entre otros. Para descargar los archivos relacionados con
este programa, debemos acceder a www.pspad.com/es/download.php.
La opcin de trabajar con editores resulta muy til para quienes tienen experiencia en programacin o si se necesita realizar ajustes puntuales. Sin embargo, para
los diseadores web, armar un sitio desde lnea de cdigo puede resultar poco amigable. Como respuesta a este problema, se adopt el concepto WYSIWYM para
aplicaciones de edicin de pginas web. Estas siglas, que en ingls significan What
You See Is What You Mean, hacen referencia a que lo que se ve en pantalla es
lo que se obtiene como resultado. Este modelo, mucho ms visual que el ofrecido por un editor de cdigo, es el que se impone hoy por hoy en el mundo del diseo web. La tendencia actual tambin marca que cada vez son ms los programas de este tipo que permiten trabajar en tiempo real con la vista simulada y la
lnea de cdigo, para brindarle mayor versatilidad al usuario.
Programas gratuitos
Dentro de las aplicaciones gratuitas, se destaca WYMeditor, un editor open source (cdigo abierto) que puede trabajar con XHTML y CSS, adems de integrarse
con ASP, PHP y Javascript. Al ser una alternativa open source, soporta la inclusin
de plugins, skins y es adaptable en su totalidad a las necesidades del desarrollador.
Para descargarlo, hay que ingresar en www.wymeditor.org/download.
KompoZer es otra aplicacin libre que permite la edicin de pginas HTML.
Presenta gran facilidad de uso y puede ser manejado por todo tipo de usuarios
que deseen armar un sitio web.
01.qxp
QU ES PHP?
20
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 21
Adobe Dreamweaver
En el mbito profesional, Dreamweaver ha logrado ubicarse en un lugar de privilegio
entre las preferencia de los usuarios. En su origen, este programa fue desarrollado por
una empresa llamada Macromedia y lanzado en el ao 1997. A raz del xito alcanzado
por sus versiones posteriores, Adobe adquiri los derechos del programa y es esta
empresa la que, en la actualidad, tiene en sus manos el desarrollo del producto. La versin CS4 de este software fue lanzada en septiembre de 2008. Entre las principales ventajas que ofrece Dreamweaver, se destaca su alto grado de personalizacin en las vistas,
el agregado de nuevas funcionalidades, vista de cdigo con marcado y ayuda de sintaxis.
21
01.qxp
14/10/2009
11:58 p.m.
Pgina 22
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 23
<oXygen/>
Con <oXygen/> podemos acceder a una plataforma de edicin y creacin de pginas XML, HTML y XHTML. Ofrece una interfaz visual WYSIWYG y la posibilidad de editar y validar cdigo. Este producto cuenta con dos versiones: <oXygen/>
XML Editor y <oXygen/> XML Author. Para acceder a la descarga de una versin
de evaluacin, hay que ingresar en www.oxygenxml.com/download.html.
Figura 10. <oXygen/> ofrece opciones muy completas para trabajar con desarrollos
web, tanto para crear y editar archivos, como para manejar proyectos.
www.redusers.com
23
01.qxp
14/10/2009
11:58 p.m.
Pgina 24
Colores RGB
Para determinar los colores de un sitio web, es fundamental tener en cuenta que
el resultado de nuestro diseo ser visto en una pantalla, ya sea un monitor o
bien la de un dispositivo mvil. Por tal motivo, la eleccin de colores debe realizarse sobre la base de una composicin RGB. En HTML, los colores RGB pueden ser representados en modo hexadecimal con el smbolo # antepuesto. Por
FRONTPAGE
Frontpage es un editor de pginas web, cuyo desarrollo estuvo en manos de Microsoft a
partir de mediados de la dcada del noventa. Logr cierta popularidad en aquellos aos,
acompaado por el crecimiento que Internet adquira en todo el mundo. En la actualidad, se
ha discontinuado y cedi su lugar a Expression Web.
24
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 25
Figura 11. Para quienes utilizan editores web del tipo WYSIWYM, como
Dreamweaver, la eleccin de un color resulta mucho ms sencilla,
ya que el programa ofrece una paleta a la vista para elegir el tono deseado.
25
14/10/2009
11:58 p.m.
Pgina 26
Color Combos es una alternativa que nos permite crear nuestra propia paleta de
colores. Entre otras opciones, se encuentra la posibilidad de acceder a las paletas
subidas por los usuarios que desean compartir sus combinaciones. Para potenciar esta alternativa, podemos suscribirnos al RSS del sitio y, de esta forma, estar al tanto de las actualizaciones que se producen en la pgina.
Si lo deseamos, tambin contamos con la opcin de ingresar una direccin URL
para conocer la paleta de colores utilizada. Para acceder a este beneficio, ingresamos al sitio web en www.colorcombos.com.
Figura 13. Color Combos ofrece una buena variedad de paletas, permite realizar bsquedas
personalizadas y brinda muchas facilidades, pero slo se ofrece en ingls.
01.qxp
Se conoce como RGB a la combinacin que se forma con los colores de luz primarios: rojo,
verde y azul. Un ejemplo de esto es la pantalla de un monitor o de un televisor. Por su parte,
CMYK es la combinacin que se logra al combinar en impresin los colores cian, magenta,
amarillo y negro; las impresoras utilizan este sistema.
26
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 27
Otra alternativa que tenemos a nuestro alcance se llama colorbrowser. Su funcin principal es ayudarnos con la organizacin y la edicin de paletas de colores.
Ofrece varias opciones de exportacin, y se puede acceder a la pgina principal
del proyecto ingresando en http://code.google.com/p/colorbrowser.
27
01.qxp
14/10/2009
11:58 p.m.
Pgina 28
Figura 16. Si desconocemos las fuentes que estn instaladas en Windows, podemos
acceder a ellas a travs del Panel de Control/Apariencia y personalizacin/Fuentes.
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 29
Qu tipografas pueden utilizarse en el diseo de un sitio web y cules son las recomendadas?
Por el contrario, las tipografas que se identifican como sans serif son las que no
presentan este remate, en este grupo se incluyen Arial y Verdana, entre otras.
Figura 17. Para comprender claramente las diferencias entre una fuente serif y una sans serif,
basta realizar una comparacin visual entre ellas, en la pantalla de la computadora o en un papel.
Es importante sealar que se pueden marcar otras divisiones entre tipografas. Por
ejemplo, la letra Courier presenta caractersticas que la definen como serif, por
su terminacin, pero adems es monoespaciada. Esta especificidad hace que cada uno de los caracteres, escritos con tipografa Courier, ocupe el mismo espacio.
La mayora de las tipografas no utilizan esta caracterstica. Por ejemplo, en un
texto escrito con Verdana, la letra i ocupa menos lugar que la m.
Fuentes y reemplazos
Una ventaja que presenta el lenguaje HTML es la posibilidad de establecer fuentes
de reemplazo, en caso de que una tipografa no se encuentre en el sistema, como en
el ejemplo que se muestra a continuacin.
<font face=Arial, Helvetica, sans-serif>Texto de prueba</font>
La etiqueta <font> debe estar contenida dentro del cuerpo del documento, es decir despus de <body> y antes de </body>. Su funcin es definir las caractersticas del texto. A travs de la propiedad face, podemos establecer la tipografa con
la que se mostrar el texto y sus posibles reemplazos. Como vimos en el ejemplo
www.redusers.com
29
14/10/2009
11:58 p.m.
Pgina 30
01.qxp
Las fuentes TrueType conforman un estndar entre las tipografas. Su uso se encuentra muy
extendido en sistemas Windows, Mac OS y Linux. Se pueden instalar de manera sencilla y
existe una importante cantidad de familias disponibles para descargar a travs de Internet,
tanto en forma gratuita como arancelada.
30
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 31
Cmo visualizar los sitios que no muestran los caracteres de manera correcta?
Figura 18. Si nuestro sistema no cuenta con los paquetes de fuentes y configuracin
adecuada, el contenido en otros idiomas no ser visto de manera correcta.
Para que el navegador tenga la informacin necesaria de cmo debe mostrar una pgina, existen etiquetas especficas que permiten dar informacin sobre el tipo de documento, el idioma y el juego de caracteres que se necesita utilizar. Se recomienda
tener muy presente esta opcin, para lograr una mejor compatibilidad con todos los
navegadores del mercado y, adems, para colaborar con el trabajo de rastreo de los
buscadores de Internet. Algunos programas, como Dreamweaver, pueden introducir el cdigo inicial de manera predeterminada.
Figura 19. Quienes utilizan Dreamweaver como editor, cuentan con una opcin
para definir la codificacin y otras caractersticas del documento HTML.
Si debemos iniciar un documento desde cero, por nuestros propios medios, el cdigo por ingresar al comienzo es el siguiente:
www.redusers.com
31
01.qxp
14/10/2009
11:58 p.m.
Pgina 32
Si se desea aclarar el idioma y el pas, o regin, se deben escribir las letras que lo
identifican, separadas por un guin. Por ejemplo, para especificar el idioma ingls
y el pas Estados Unidos, hay que escribir:
<html lang=en-US>
Si el problema persiste en algunos equipos puntuales, se puede recomendar al usuario que verifique la configuracin de su navegador. En el caso de Internet Explorer,
debe ir al men Ver/Codificacin o en Mozilla Firefox a Ver/Codificacin de caracteres.
Por defecto, en ambos casos, debera estar seleccionada la opcin Unicode.
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 33
Cmo se pueden definir estilos de texto para todas las pginas de un sitio?
33
01.qxp
14/10/2009
11:58 p.m.
Pgina 34
Una de las grandes ventajas que nos ofrece la utilizacin de CSS es la posibilidad de definir estilos de texto, que podrn ser incorporados en las pginas que
componen el sitio. Otro de los puntos positivos, que nos brinda trabajar con esta modalidad, es que resulta mucho ms sencilla cualquier modificacin ya que,
al cambiar las propiedades del estilo, stas se aplicarn a los textos de todas las
pginas vinculadas. En la tabla que veremos a continuacin, analizaremos
las principales propiedades que se pueden aplicar por medio de CSS, tanto para
texto como para otros elementos.
PROPIEDAD
DESCRIPCIN
VALORES4
color
font-family
font-size
de una fuente.
font-weight
font-style
Permite establecer
el estilo de fuente.
text-decoration
text-transform
tendr subrayado
o se ver tachado.
text-decoration: underline;
letra en maysculas
el texto en maysculas:
text-transform: uppercase;
letras en maysculas o
todo en minsculas.
line-height
34
establecer el interlineado,
Por ejemplo:
line-height: 10px;
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 35
Cmo se pueden definir estilos de texto para todas las pginas de un sitio?
PROPIEDAD
DESCRIPCIN
VALORES4
text-align
Se utiliza para alinear el texto. Se le puede aplicar un valor left, right, center
o justify. Por ejemplo: text-align: left;
text-indent
Permite establecer
un indentado.
background-color
Ofrece la posibilidad de
a un elemento.
color: #FF0000;
color: red;
background-image
para un elemento.
background-image:
url(http://www.misitio.com/imagne.jpg)
margin
para un elemento.
padding
y su interior.
border-color
border-style
el estilo de un borde.
border-width
a un borde.
35
01.qxp
14/10/2009
11:58 p.m.
Pgina 36
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 37
Cmo se pueden definir estilos de texto para todas las pginas de un sitio?
En este caso, definimos los estilos dentro de la etiqueta prrafo (<p>) y separamos
las propiedades con ;. Si bien en el ejemplo tenemos todo en un mismo lugar, en
este caso, perdemos las ventajas de abstraccin del diseo, que brinda CSS, debido
a que el contenido y la apariencia quedan en un mismo lugar. Adems, en un archivo ms extenso, declarar los estilos dentro del cuerpo del texto hace ms engorrosa la lectura del cdigo al quitarle claridad.
Otro aspecto que debemos remarcar es que tambin es posible agregarle propiedades a un selector existente. Por ejemplo, si deseamos que todos los encabezados de
mximo nivel de una pgina sean de color azul, podramos declarar lo siguiente en
la seccin destinada para CSS en el encabezado del documento.
h1 {
color: blue;
}
Con estas lneas, definimos el color para los Encabezados 1 del HTML, pero tambin podramos definir otras propiedades relativas a la forma en que se representa
el texto en pantalla. Este ejemplo tambin podra realizarse con la aplicacin del
concepto de clase, como ya hemos visto.
www.redusers.com
37
01.qxp
14/10/2009
11:58 p.m.
Pgina 38
38
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 39
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
.miestilo2 {
font-size: 12px;
color: #3399FF;
}
En el valor de href, se indicar la ruta y el nombre del archivo CSS, con su extensin.
39
01.qxp
14/10/2009
11:58 p.m.
Pgina 40
Figura 25. En los primeros aos de auge de la web, los links, por lo general, se representaban
al subrayar la palabra o frase que enlazaba hacia otra pgina o referencia de Internet.
Hoy en da, la representacin bsica de un link en HTML ofrece las mismas caractersticas que conocimos en sus comienzos, sin embargo, con la utilizacin de CSS
y cdigo Javascript, es posible lograr efectos mucho ms interesantes.
40
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 41
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
El enlace se define con etiqueta <a> y se cierra con </a>. Con el parmetro href, se indica el sitio o pgina web de destino; en este ejemplo, enviamos a la pgina de contacto del sitio (contacto.htm). En caso de enviar a un sitio web, se debe indicar la direccin URL completa, por ejemplo, http://www.direcciondemisitioweb.com/
contacto.htm. Lo que queda envuelto entre las etiquetas <a> y </a>, es el texto que
muestra el navegador, es decir lo que se imprime en pantalla. Si deseamos utilizar una
imagen con enlace, en lugar de un texto, debemos escribir el siguiente cdigo:
<a href=contacto.htm><img src=img/imagen.gif width=175 height=192
/></a>
Como vemos, la estructura es similar. Con la etiqueta img src, se debe definir el
nombre y la ruta de la imagen que deseamos que se vea en lugar del enlace. Las propiedades width (ancho) y height (alto) establecen las dimensiones, en pixeles, con
las que se muestra la imagen en pantalla.
Figura 26. Utilizar imgenes, en lugar de texto, para crear links, es una opcin que puede
resultar ms atractiva para el usuario y que, a su vez, brinda mejores alternativas para disear.
41
01.qxp
14/10/2009
11:58 p.m.
Pgina 42
a:focus:
se utiliza para establecer cmo se muestra un enlace que tiene el foco sobre
l. Una manera de hacer foco sobre un enlace es, posicionados sobre la pgina activa, pulsar la tecla TAB. Si bien esta alternativa no es muy utilizada, es una opcin
que an tiene validez y puede servir en algunos casos puntuales.
a:hover: esta opcin se activa cuando el usuario pasa el mouse por encima del link.
Es, quizs, una de las acciones ms comunes porque se considera de mucha utilidad.
a:active: se activa cuando el usuario hace clic sobre el enlace.
Entre las propiedades que se pueden aplicar a cada uno de estos estados, se encuentran casi todas las opciones que ofrece CSS para un texto comn, por ejemplo: pasar a negrita, cambiar el color, subrayar, cambiar el tamao de la fuente,
etctera. De manera habitual, estas opciones se definen junto con el estilo de texto que se utilizar. En el siguiente listado, veremos un ejemplo de aplicacin, que
nos permitir comprender mejor el tema.
.MiEstilo {
font-family: Verdana, Arial, sans-serif;
color: #000000;
}
a:link {
text-decoration: none;
color: #2400ff;
}
a:visited {
color: #ff0000;
text-decoration: none;
}
a:focus {
color: #001eff;
text-decoration: none;
font-style: italic;
}
a:hover {
text-decoration: underline;
color: #8c7de7;
}
a:active {
text-decoration: none;
color: #6a7cff;
}
42
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 43
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
Figura 27. En algunos casos, puede ser una ventaja no utilizar el subrayado para un link, pero,
en otros, puede resultar ms claro para indicarle al usuario que existe un enlace sobre ese texto.
CSS tambin nos permite trabajar con imgenes. Una alternativa que podemos utilizar
en las imgenes que tienen enlaces es aplicarles un borde y hacer que cambie su color
cuando el mouse pasa por encima. Para ello, primero definimos el siguiente cdigo CSS.
#imagenenlace img {
border: 2px solid #333333;
border-width: 2px 2px 2px;
}
#imagenenlace a:hover img {
border: 2px solid #d4d4d4;
border-width: 2px 2px 2px;
color: #CCCCCC;
}
www.redusers.com
43
01.qxp
14/10/2009
11:58 p.m.
Pgina 44
Cuando dentro de los estilos utilizamos # para definirlos, podemos usar su nombre
para referenciarlo en un objeto HTML, por ejemplo, con una capa. Debemos hacer que coincida el nombre con la etiqueta id del objeto HTML. Para aplicarlo sobre una imagen, es posible incluirla en una capa y escribir el siguiente cdigo:
<div id=imagenenlace align=center>
<a href=http://www.direcciondejemploweb.com/><img alt=Texto de la
imagen src=img/imagen.jpg longdesc=Descripcin de la imagen/></a></p>
</div>
En el cdigo, debemos reemplazar los valores de href, scr, img alt y longdesc, por
los que deseemos utilizar en la pgina web.
Figura 28. Cuando se aplica la propiedad alt a una imagen, en algunos navegadores,
por ejemplo en Internet Explorer, veremos el texto al pasar el mouse por encima.
QU ES LA WEB 2.0?
A diferencia de lo que muchos piensan, la Web 2.0 no es un nuevo estndar de Internet, sino
un concepto que hace referencia a la evolucin de la Web hacia un formato de mayor participacin e interaccin de los usuarios. La Web 2.0 est identificada con aplicaciones web, blogs
y redes sociales, entre otros servicios.
44
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 45
Qu aspectos deben considerarse para disear y establecer el formato de las tablas de un sitio?
Todos los efectos que se generen con CSS para los links pueden ser incluidos en una
hoja de estilo externa. La ventaja de utilizar esta opcin es que, como hemos visto
antes, nos permite definir estilos que podrn ser utilizados en todas las pginas del
sitio si lo deseamos. Es importante destacar que, tambin, existen otras formas de
aplicar efectos a los enlaces utilizando Javascript, Flash u otros lenguajes o tecnologas disponibles para desarrollos de sitios web.
Figura 29. Adobe Flash es una aplicacin que, entre sus funciones bsicas,
permite crear links o botones, pero su potencia resulta mucho mayor,
ya que es una herramienta pensada para crear proyectos multimedia profesionales.
www.redusers.com
45
01.qxp
14/10/2009
11:58 p.m.
Pgina 46
</tr>
<tr>
<td>Paraguay</td>
<td>Asuncin</td>
</tr>
<tr>
<td>Uruguay</td>
<td>Montevideo</td>
</tr>
</table>
Como vimos, la tabla se abre con la etiqueta <table> y se cierra con </table>. Se
le asigna el nombre con la propiedad id. Se utiliza width para indicar el ancho
que ocupa la tabla. Este valor est expresado en pixeles.
Figura 30. Sin aplicarle ningn diseo, la tabla luce simple y muy poco atractiva.
46
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 47
Qu aspectos deben considerarse para disear y establecer el formato de las tablas de un sitio?
Si lo que deseamos es aplicar una imagen, tanto a la etiqueta <table> como a <td>,
podemos agregarle la propiedad background e indicar la ruta del archivo de imagen
y su nombre, como vemos en el siguiente ejemplo:
<td background=img/imagen.jpg><b>Pas</b></td>
Si buscamos una solucin que nos sea til para poder reutilizarla, en el listado
que veremos a continuacin, definiremos un estilo CSS que nos permite aplicarlo a una o a varias tablas de un sitio.
table.paises {
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
text-align:center;
background-color:#333333;
}
table.paises td{
border:2px solid #CCCCCC;
}
47
01.qxp
14/10/2009
11:58 p.m.
Pgina 48
Figura 32. Luego de aplicar las propiedades de CSS, la tabla cambia su aspecto
y obtenemos un resultado que podremos integrar en nuestro diseo.
Con este listado, definimos una capa que se dibujar a partir de la esquina superior
izquierda de la pantalla, o de la divisin que la contenga; tendr unas dimensiones
48
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 49
de 750x500 pixeles y utilizar una imagen de fondo que no se repetir. Esta capa,
as definida, slo mostrar la imagen de fondo. Si deseamos mostrar otros elementos dentro de ella, ya sean otras capas, tablas o cualquier otro objeto HTML, debemos declararlos antes de cerrar con la etiqueta </div>.Todo aquello que quede
determinado dentro de este bloque se mover y ajustar de acuerdo con las dimensiones y la posicin que adquiera la capa que lo contiene. Si deseamos mostrar una capa dentro de otra, podramos hacerlo con <div><div></div></div>. Con
esta opcin, creamos capas anidadas vacas y sin propiedades. A cada una de ellas,
podemos asignarle las caractersticas que deseemos.
Figura 33. Dentro de un <div> se pueden incluir otros elementos, como por ejemplo
un texto, una imagen, una tabla o incluso, otros contenidos multimedia.
Antes de continuar, debemos detenernos un instante en el valor de position. De manera predeterminada, su valor es static, es decir que los elementos se presentan en
pantalla uno a continuacin del otro, tal como lo definimos en el cdigo que generamos. Si asignamos un valor relative, las coordenadas de los elementos se fijarn
a partir de la posicin que les correspondera por el flujo. Si optamos por utilizar
absolute, podremos asignar una posicin sin tener en cuenta cmo se encuentren
ubicados los elementos en el flujo. Como vemos en el ejemplo, al tener en cuenta
el contenedor, la posicin se puede establecer con top y left, entre otras opciones.
En la prctica, deberemos decidir en qu casos es conveniente anidar capas y cuando tenerlas independientes. Una posibilidad muy til es ordenarlas por medio de la opcin
z-index, que es la que permite determinar el orden en el que se superponen o apilan las
capas. Esta propiedad hace que un elemento se ubique dentro del eje Z, es decir, el que
da la profundidad para los objetos tridimensionales. Puede tener asignado un valor
numrico que, al ser menor que el de otro, indicar que el elemento est ms atrs.
www.redusers.com
49
01.qxp
14/10/2009
11:58 p.m.
Pgina 50
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 51
Por otra parte, con la etiqueta <iframe>, podemos incorporar otro documento del
mismo tipo, como si se tratara de un nuevo elemento flotante. Adems de la ruta
del documento, puede tener asignadas dimensiones, bordes y propiedades de transparencia, entre otras opciones. La utilizacin de marcos puede presentar algunos
problemas de compatibilidad con navegadores antiguos.
51
01.qxp
14/10/2009
11:58 p.m.
Pgina 52
#CapaTransparente {
z-index: 2;
background-color: black;
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
filter: alpha(opacity=30);
}
52
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 53
Debemos tener en cuenta que todo lo que se encuentre contenido dentro de la etiqueta <div> tendr asignada las caractersticas de transparencia. Por este motivo, por
lo general, ser recomendable el manejo de manera independiente de la capa con transparencia, para no afectar otros elementos de la pgina que no deseemos que tomen
estas caractersticas. Es importante destacar que el efecto de transparencia tambin
puede utilizarse en otros elementos a los que pueden aplicarse estilos, como las tablas.
53
01.qxp
14/10/2009
11:58 p.m.
Pgina 54
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 55
En qu casos se recomienda disear una pgina con dimensiones fijas y cundo, con porcentuales?
Figura 41. La resolucin de pantalla debe ser soportada tanto por la placa de video,
como por el monitor. De lo contrario, no tendremos una visualizacin adecuada.
Cualquiera sea la opcin que tomemos en el diseo, es recomendable poner un color o una imagen de fondo que logre armona con el sitio, ya que en las pantallas
de ms resolucin se ver en mayor extensin, en especial hacia los costados.
www.redusers.com
55
01.qxp
14/10/2009
11:58 p.m.
Pgina 56
El lenguaje HTML nos permite trabajar con medidas porcentuales en diversos elementos, como puede ser en tablas y capas. Por ejemplo, es posible establecer que
una tabla ocupe el 80% del espacio que tiene disponible en su contenedor (por ejemplo un <div>) en lugar de definir su medida exacta en pixeles.
Como podemos darnos cuenta, la ventaja de utilizar un valor porcentual para los elementos que componen una pgina web es que se adaptarn segn las dimensiones
que les ofrezca la pantalla. Adems, con un diseo adecuado, utilizando valores porcentuales, se puede aprovechar el mximo espacio disponible en cada una de las
resoluciones. En cambio, al hacerlo fijo, desaprovechamos parte del rea de pantalla
si el usuario no tiene configurada la resolucin para la cual fue optimizado el sitio.
La desventaja de utilizar medidas porcentuales en el diseo reside en que los elementos pueden modificarse de tal forma que aparezcan movidos en la pantalla,
56
www.redusers.com
14/10/2009
11:58 p.m.
Pgina 57
En qu casos se recomienda disear una pgina con dimensiones fijas y cundo, con porcentuales?
si no contemplamos todos los aspectos del diseo. Al igual que las dimensiones
expresadas en pixeles, el porcentaje puede aplicarse a las propiedades width (ancho)
y height (alto) de los elementos que lo admitan.
Dentro de una misma pgina web, pueden utilizarse medidas en pixeles o en porcentaje, aunque hay que evaluar con cuidado en qu casos puede ser til optar
por esta alternativa. Para indicar que un valor est expresado en pixeles, se utiliza px, por ejemplo: height=100px. Para establecer que el valor es porcentual,
se usa el smbolo %, por ejemplo: width=10%.
Como veremos en el punto 13 de este captulo, ms all de la decisin que tomemos en cuanto a utilizar medidas porcentuales o fijas, es fundamental que el
sitio se muestre centrado en todas las resoluciones de monitores ya que, de lo
contrario, el diseo no lucir de la mejor manera.
01.qxp
QU ES UN PIXEL?
Pixel es una palabra que proviene del trmino ingls picture element y que hace referencia a la
unidad de color ms pequea que conforma una imagen digital. Para representar un color, cada pixel puede tomar un valor diferente, que est dado por la profundidad de color de la imagen. Por ejemplo, una profundidad de 24 bits permite 16.777.216 colores.
www.redusers.com
57
01.qxp
14/10/2009
11:58 p.m.
Pgina 58
Figura 44. Definir los valores de margin y padding nos puede ser muy til especialmente
en sitios donde trabajamos con varias columnas de texto, para que no quede encimado
Para comprender este tema de una manera sencilla, pensemos en una alternativa
que podemos encontrar, de forma cotidiana, al disear un sitio. Por ejemplo, veamos qu ocurre con un rectngulo que, en su interior, tiene un texto. Debemos
tener en cuenta que el rectngulo se encuentra dentro de una pgina que tambin
posee sus bordes, por lo cual, podramos pensar que el rectngulo se encuentra
dentro de otro rectngulo que, en este caso, es la pgina. La distancia que hay entre el borde de la pgina y uno de los lados del rectngulo es el margen (margin),
que puede ser superior, inferior, derecho o izquierdo. Ahora bien, el espacio que
existe entre los lados del rectngulo y el texto interior es lo que se conoce como
padding. Para entender an mejor esto, debemos pensar que el texto est envuelto en su propia caja imaginaria o caja de texto.
58
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 59
Cmo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?
GUA VISUAL
Contenido: espacio donde se ubica el texto o el elemento que acta como contenido.
Padding: espacio entre el contenido y el borde del objeto contenedor.
Borde contenedor: es la lnea que determina los lmites del objeto contenedor
(puede estar visible o no).
Margin: determina la distancia entre el objeto contenedor y la ventana.
Borde de la ventana: es el borde del rea de representacin de la pgina
web en el navegador.
Una vez que comprendemos estos conceptos, ser nuestra tarea aplicarlos segn lo que
deseemos lograr en nuestro diseo. Por ejemplo, establecer un valor de padding suele
ser muy til para evitar que un texto interior se vea muy encimado sobre las lneas de
una caja. En cambio, margin puede ser til si pretendemos separar columnas.
En algunos casos, estas opciones pueden trabajar en forma conjunta para ofrecer
mejores resultados.
59
01.qxp
14/10/2009
11:58 p.m.
Pgina 60
Figura 45. El problema de centrado puede ser imperceptible para algunos usuarios,
pero un buen diseador no debe omitir nunca este tema en sus trabajos.
En algunos casos, para solucionar los problemas de centrado, puede ser suficiente
asignar el atributo de centrado a una capa para que los elementos contenidos se
muestren de esa manera. Esto sera: <div align=center>.
Sin embargo, en diseos que puedan presentar ciertos aspectos ms complejos,
deberemos tener en cuenta algunos conceptos adicionales. En primer lugar, es
importante destacar que, adems de las diferencias entre las distintas configuraciones posibles de pantallas, tambin hay diferencias entre los diferentes tipos de
navegadores, tema sobre el cual profundizaremos en el captulo 3 de este libro.
Sin olvidar esto, para resolver un problema de centrado de una pgina, podremos aprovechar las ventajas que brinda CSS. Para lograrlo, definiremos una
capa que actuar como contenedora de los elementos o bien de las dems capas
que formen parte de la pgina. A continuacin, veremos un ejemplo, que puede
agregarse a la seccin de estilos o en el archivo de estilos externo.
body {
background-color: #778f92;
margin: auto;
background-image: url(fondo.jpg);
background-repeat: repeat-x;
background-attachment:fixed;
background-position: 0px 0px;
60
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 61
Cmo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?
}
#contenedor
{
position:relative;
left:0px;
width:900px;
height:100%;
margin: 0px auto;
text-align:center;
}
Para body, definimos una imagen que se repetir durante el eje X. Para ese ejemplo,
puede utilizarse un JPG de 4 5 pixeles de ancho, y entre 600 y 650 pixeles de largo. Puede armarse como un degradado, en el cual el ltimo pixel inferior coincide
con el color de fondo (background-color).
Las propiedades de centrado de los elementos se encuentran en #contenedor. En
este caso, definimos un ancho fijo (900px) y una altura porcentual para abarcar
toda la pgina (100%). Con las lneas margin: 0px auto; y text-align:center;, logramos que el contenido se muestre centrado en los navegadores ms populares,
como Internet Explorer y Mozilla Firefox.
61
01.qxp
14/10/2009
11:58 p.m.
Pgina 62
La etiqueta <ul> se utiliza para definir una lista conformada por elementos que, a su
vez, se envuelven con la etiqueta <li>. Para agregar un link a los elementos, simplemente, recurrimos a la etiqueta href, y la utilizamos de la forma que ya hemos visto.
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 63
Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS?
Para lograr que ese simple listado tenga el aspecto de un men, debemos definir los
estilos necesarios mediante CSS. Si el estilo lista no nos desagrada, pero deseamos
mejorarlo, podemos recurrir a la siguiente alternativa.
#EstiloMenu {
list-style-type:square;
}
Con list-style-type, definimos el tipo de vieta por utilizar. En este caso, definimos
un cuadrado (square), pero tambin podemos determinar un crculo (circle), ningn
objeto (none). Tambin es posible utilizar una imagen pequea, si cambiamos la lnea por list-style-image:url(imagen.gif). El valor que aparece entre parntesis debe
ser modificado por la ruta y el nombre de la imagen que deseamos incluir.
Ahora que conocemos la opcin ms simple, veremos cmo mejorar el aspecto
visual del men para, por ejemplo, mostrarlo de manera horizontal, con una imagen de fondo, otra posibilidad tambin puede ser un color, y con un efecto al
pasar el mouse por encima de los elementos.
#EstiloMenu {
width: 900px;
height: 40px;
background: #c3c3c3 url(fondoMenu.gif);
background-repeat: repeat-x;
}
#EstiloMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#EstiloMenu li {
float: left;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #fff;
}
#EstiloMenu li a {
display: block;
www.redusers.com
63
01.qxp
14/10/2009
11:58 p.m.
Pgina 64
color: #515e5e;
text-decoration: none;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-weight: 500;
padding: 10px 7px 10px 7px;
}
#EstiloMenu li a:hover {
color: #fff;
background: #819292;
}
Para aplicar el estilo, podemos ubicar el listado en una capa, a la cual le asignamos id=EstiloMenu.
Figura 48. El resultado de aplicarle un estilo a la lista le da una verdadera apariencia de men.
Como podemos ver en la figura 48, para este ejemplo creamos un men horizontal. En #EstiloMenu, definimos el ancho (width), el alto total del men
(height), la imagen que tendr de fondo y un color con background. Tambin
definimos que se repita en el eje X con la propiedad background-repeat.
En #EstiloMenu ul, definimos que no tenga vietas y los valores de margin y
padding, en este caso lo indicamos en 0.
En #EstiloMenu li, al utilizar la opcin float: left;, indicamos que los tems aparezcan uno al lado del otro, es decir, de manera horizontal. Luego definimos el grosor,
el color y el estilo de los bordes laterales con las propiedades border-right y borderleft, tambin podramos trabajar sobre los otros bordes si lo deseramos.
Con #EstiloMenu li, definimos las propiedades que tendr el elemento del men,
el cual ser un enlace a una pgina interna, a otra pgina o bien a un recurso de
64
www.redusers.com
14/10/2009
11:58 p.m.
Pgina 65
Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS?
Internet. Se pueden aplicar todas las caractersticas de texto que hemos visto en
CSS: color, tipografa, etctera. En este caso, se agrega display: block; para lograr
que se vea cada tem como un bloque, o bien como un botn.
Como podemos ver, #EstiloMenu li a:hover nos permite definir las caractersticas que
tomar el elemento del men cuando el mouse pase por encima, en este caso, el color de fondo que tendr el texto, es decir, el botn.
01.qxp
QU SIGNIFICA URL?
El trmino Uniform Resource Locator, abreviado habitualmente como URL, hace referencia a una
cadena de caracteres que se utilizan para identificar un recurso informtico que puede estar alojado en un servidor. En Internet, se utiliza para ubicar la direccin donde se encuentra un archivo, por ejemplo, una imagen o un documento HTML.
www.redusers.com
65
01.qxp
14/10/2009
11:58 p.m.
Pgina 66
Figura 50. Con la versin online del generador, podremos acceder a una buena cantidad
de opciones para crear un men que luego puede ser guardado en formato SWF.
www.redusers.com
01.qxp
14/10/2009
11:58 p.m.
Pgina 67
Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS?
... RESUMEN
En este captulo, conocimos las caractersticas principales de HTML, XML, XHTML y CSS.
Recorrimos las aplicaciones pagas y gratuitas para diseo de pginas web. Aprendimos qu
tipografas utilizar al disear una pgina y cmo establecer el conjunto de caracteres adecuado para cada una. Trabajamos sobre los estilos que pueden aplicarse a los links para lograr efectos segn su estado. Detallamos cmo se puede trabajar con tablas, capas y estilos.
Analizamos las mejores opciones para establecer las dimensiones, mrgenes y centrado de
una pgina. Por ltimo, vimos las opciones de las que disponemos para crear un men.
www.redusers.com
67
01.qxp
14/10/2009
11:58 p.m.
Pgina 68
ACTIVIDADES
TEST DE AUTOEVALUACIN
1 Defina qu es HTML.
ACTIVIDADES PRCTICAS
1 Ayudado con una herramienta web o con la
aplicacin que elija, defina la paleta de co-
lores de su sitio.
de CSS.
2 Determine distintos efectos para los esta3 Qu es la cabecera de un documento
cin de CSS.
7 Cmo se le aplican estilos CSS a una tabla?
8 Qu funcin cumple la etiqueta < div> en la
estructura de un documento HTML?
9 De qu forma se establecen dimensiones
fijas en una pgina y en qu casos es
recomendable?
10 Qu diferencias hay entre padding
y margin?
68
www.redusers.com