Documentos de Académico
Documentos de Profesional
Documentos de Cultura
PÆgina 1
CONTENIDO
1 | DISEÑO DEL SITIO Y CSS
¿Qué diferencias existen entre HTML, XHTML y CSS, y cuándo
es conveniente utilizar cada uno? ¿Qué aplicaciones pagas Esta obra explica, en forma práctica y clara, cómo superar los problemas
y gratuitas existen para diseñar y administrar un sitio web?
¿Qué tipografías se pueden utilizar al diseñar? y más… más frecuentes y complejos que, tarde o temprano, enfrenta todo adminis-
trador de sitios web en su trabajo cotidiano.
2 | APARIENCIA Y MEJORAS MULTIMEDIA
¿De qué forma se puede crear una imagen con transparencias Ya sea que se trate de amateurs, administradores accidentales o profesio-
para incorporar en un sitio web? ¿De qué modo se puede crear nales del desarrollo o el diseño, este libro les brindará el marco adecuado
un banner sin utilizar Flash? ¿Cuál es la mejor opción para
montar una emisora de radio online? ¿Cómo se puede para entender completamente el rol que tendrán que desempeñar y cómo
transmitir video en vivo por Internet? y más… hacerlo de modo profesional, a través de soluciones rápidas y eficientes.
3 | COMPATIBILIDAD CON NAVEGADORES Y MÓVILES En sus páginas se abordan temas tan diversos como: migración y backup,
¿Qué navegadores deben contemplarse al diseñar un sitio? FTP, problemas con elementos multimedia, streaming, compatibilidad,
¿De qué forma se puede detectar el navegador y la resolución
de pantalla del usuario? ¿Cómo se puede optimizar el tamaño reducción de tiempos de carga, seguridad, y mucho más.
de una página web y su tiempo de carga? ¿Qué navegadores Finalmente, conoceremos las tendencias actuales y exploraremos las tec-
existen para dispositivos móviles? y más…
nologías que se encuentran en desarrollo o en crecimiento y que son mate-
4 | CÓDIGO Y ESTRUCTURA DEL SITIO ria obligada para dominar la Web 2.0.
¿Qué es y para qué se puede utilizar AJAX? ¿De qué forma
se pueden crear gráficos como los que se generan en Excel?
¿De qué forma se puede incorporar un buscador en un sitio?
¿Cómo se puede incorporar un chat a un sitio web? ¿Cómo
se crea un formulario? y más…
PREVENGA Y SOLUCIONE LOS DELITOS INFORMÁTICOS MÁS PELIGROSOS APRENDA CÓMO ARMAR REDES SIN CONCIMIENTOS PREVIOS
MANUALES USERS I 352 páginas I ISBN 978-987-663-008-5 200 RESPUESTAS I 320 páginas I ISBN 978-987-1347-86-5
01.qxp 13/10/2009 04:58 p.m. PÆgina 13
HTML
Con la llegada de la World Wide Web, fue fundamental contar con un lengua-
je que se transformara en un estándar en la construcción de páginas web. A prin-
cipios de la década del noventa, nace el HyperText Markup Language, nom-
bre que podría traducirse como lenguaje de marcado (o etiquetado) de hipertexto,
HTML. Aún hoy es la base de las páginas web que vemos en Internet, poten-
ciado con las ventajas que ofrecen las nuevas tecnologías.
HTML utiliza etiquetas que permiten enriquecer o agregar contenido adicional,
14 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 15
www.redusers.com 15
01.qxp 13/10/2009 03:51 p.m. PÆgina 16
16 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 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).
❘❘❘
¿QUÉ ES ASP?
ASP es una tecnología que fue creada por Microsoft. Permite el desarrollo de páginas 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 tradu-
cirse como páginas activas de servidor.
www.redusers.com 17
01.qxp 13/10/2009 03:51 p.m. PÆgina 18
CSS
Uno de los conceptos que ha crecido de manera notable en el mundo del diseño
web, es la utilización de hojas de estilo (Cascading Style Sheets) conocidas como
CSS. Las características que ofrece CSS resultan muy prácticas para el armado de
un sitio, ya que permiten realizar una separación 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 características que ofrece CSS tam-
bién 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 opción en el diseño de las páginas o de un sitio web.
Por sus características, CSS puede incorporarse en un documento HTML o
XHTML, o bien incluirse como un archivo aparte. Existen dos formas de incor-
porar CSS en un documento HTML. La primera consiste en declarar los estilos
y sus características en la cabecera del documento (entre las etiquetas <head> y
</head>). Esta opción puede ser útil para definir los estilos que tendrá sólo una
página en particular y no serán 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 opción, ya que no colabora con la separación 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 páginas
o se procede a integrarlos con lenguajes de programación, es recomendable colocar
los estilos en un archivo específico, tal como veremos en el punto 6 de este capítulo.
Figura 4. Algunos navegadores, como Internet Explorer o Mozilla Firefox, permiten desactivar
los estilos de un sitio para lograr una visualización de él sin tener esta característica habilitada.
18 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 19
¿Qué aplicaciones pagas y gratuitas existen para diseñar y administrar un sitio web?
www.redusers.com 19
01.qxp 13/10/2009 03:51 p.m. PÆgina 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 co-
lor. 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 opción de trabajar con editores resulta muy útil para quienes tienen experien-
cia en programación o si se necesita realizar ajustes puntuales. Sin embargo, para
los diseñadores web, armar un sitio desde línea de código puede resultar poco ami-
gable. Como respuesta a este problema, se adoptó el concepto WYSIWYM para
aplicaciones de edición de páginas web. Estas siglas, que en inglés 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 más visual que el ofreci-
do por un editor de código, es el que se impone hoy por hoy en el mundo del di-
seño web. La tendencia actual también marca que cada vez son más los progra-
mas de este tipo que permiten trabajar en tiempo real con la vista simulada y la
línea de código, para brindarle mayor versatilidad al usuario.
Programas gratuitos
Dentro de las aplicaciones gratuitas, se destaca WYMeditor, un editor open sour-
ce (código abierto) que puede trabajar con XHTML y CSS, además de integrarse
con ASP, PHP y Javascript. Al ser una alternativa open source, soporta la inclusión
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 aplicación libre que permite la edición de páginas HTML.
Presenta gran facilidad de uso y puede ser manejado por todo tipo de usuarios
que deseen armar un sitio web.
❘❘❘
¿QUÉ ES PHP?
20 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 21
¿Qué aplicaciones pagas y gratuitas existen para diseñar y administrar un sitio web?
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 año 1997. A raíz 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 ver-
sión CS4 de este software fue lanzada en septiembre de 2008. Entre las principales ven-
tajas que ofrece Dreamweaver, se destaca su alto grado de personalización en las vistas,
el agregado de nuevas funcionalidades, vista de código con marcado y ayuda de sintaxis.
www.redusers.com 21
01.qxp 13/10/2009 03:51 p.m. PÆgina 22
22 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 23
¿Qué aplicaciones pagas y gratuitas existen para diseñar y administrar un sitio web?
<oXygen/>
Con <oXygen/> podemos acceder a una plataforma de edición y creación de pági-
nas XML, HTML y XHTML. Ofrece una interfaz visual WYSIWYG y la posibili-
dad de editar y validar código. Este producto cuenta con dos versiones: <oXygen/>
XML Editor y <oXygen/> XML Author. Para acceder a la descarga de una versión
de evaluación, 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 13/10/2009 03:51 p.m. PÆgina 24
Colores RGB
Para determinar los colores de un sitio web, es fundamental tener en cuenta que
el resultado de nuestro diseño será visto en una pantalla, ya sea un monitor o
bien la de un dispositivo móvil. Por tal motivo, la elección de colores debe rea-
lizarse sobre la base de una composición RGB. En HTML, los colores RGB pue-
den ser representados en modo hexadecimal con el símbolo # antepuesto. Por
FRONTPAGE
24 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 25
Figura 11. Para quienes utilizan editores web del tipo WYSIWYM, como
Dreamweaver, la elección de un color resulta mucho más sencilla,
ya que el programa ofrece una paleta a la vista para elegir el tono deseado.
www.redusers.com 25
01.qxp 13/10/2009 03:51 p.m. PÆgina 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 poten-
ciar esta alternativa, podemos suscribirnos al RSS del sitio y, de esta forma, es-
tar al tanto de las actualizaciones que se producen en la página.
Si lo deseamos, también contamos con la opción de ingresar una dirección URL
para conocer la paleta de colores utilizada. Para acceder a este beneficio, ingre-
samos al sitio web en www.colorcombos.com.
Figura 13. Color Combos ofrece una buena variedad de paletas, permite realizar búsquedas
personalizadas y brinda muchas facilidades, pero sólo se ofrece en inglés.
❘❘❘
DIFERENCIAS ENTRE RGB Y CMYK
Se conoce como RGB a la combinación 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 combinación que se logra al combinar en impresión los colores cian, magenta,
amarillo y negro; las impresoras utilizan este sistema.
26 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 27
www.redusers.com 27
01.qxp 13/10/2009 03:51 p.m. PÆgina 28
Figura 16. Si desconocemos las fuentes que están instaladas en Windows, podemos
acceder a ellas a través del Panel de Control/Apariencia y personalización/Fuentes.
28 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 29
¿Qué tipografías pueden utilizarse en el diseño de un sitio web y cuáles son las recomendadas?
Por el contrario, las tipografías 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 comparación visual entre ellas, en la pantalla de la computadora o en un papel.
Es importante señalar que se pueden marcar otras divisiones entre tipografías. Por
ejemplo, la letra Courier presenta características que la definen como serif, por
su terminación, pero además es monoespaciada. Esta especificidad hace que ca-
da uno de los caracteres, escritos con tipografía Courier, ocupe el mismo espacio.
La mayoría de las tipografías no utilizan esta característica. 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 tipografía no se encuentre en el sistema, como en
el ejemplo que se muestra a continuación.
La etiqueta <font> debe estar contenida dentro del cuerpo del documento, es de-
cir después de <body> y antes de </body>. Su función es definir las característi-
cas del texto. A través de la propiedad face, podemos establecer la tipografía con
la que se mostrará el texto y sus posibles reemplazos. Como vimos en el ejemplo
www.redusers.com 29
01.qxp 13/10/2009 03:51 p.m. PÆgina 30
❘❘❘
¿QUÉ SON LAS FUENTES TRUETYPE?
Las fuentes TrueType conforman un estándar entre las tipografías. 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 través de Internet,
tanto en forma gratuita como arancelada.
30 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 31
¿Cómo visualizar los sitios que no muestran los caracteres de manera correcta?
Figura 18. Si nuestro sistema no cuenta con los paquetes de fuentes y configuración
adecuada, el contenido en otros idiomas no será visto de manera correcta.
Para que el navegador tenga la información necesaria de cómo debe mostrar una pá-
gina, existen etiquetas específicas que permiten dar información sobre el tipo de do-
cumento, el idioma y el juego de caracteres que se necesita utilizar. Se recomienda
tener muy presente esta opción, para lograr una mejor compatibilidad con todos los
navegadores del mercado y, además, para colaborar con el trabajo de rastreo de los
buscadores de Internet. Algunos programas, como Dreamweaver, pueden introdu-
cir el código inicial de manera predeterminada.
Figura 19. Quienes utilizan Dreamweaver como editor, cuentan con una opción
para definir la codificación y otras características del documento HTML.
Si debemos iniciar un documento desde cero, por nuestros propios medios, el có-
digo por ingresar al comienzo es el siguiente:
www.redusers.com 31
01.qxp 13/10/2009 03:51 p.m. PÆgina 32
<html lang=”es”>
Si se desea aclarar el idioma y el país, o región, se deben escribir las letras que lo
identifican, separadas por un guión. Por ejemplo, para especificar el idioma inglés
y el país Estados Unidos, hay que escribir:
<html lang=”en-US”>
32 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 33
¿Cómo se pueden definir estilos de texto para todas las páginas de un sitio?
www.redusers.com 33
01.qxp 13/10/2009 03:51 p.m. PÆgina 34
Una de las grandes ventajas que nos ofrece la utilización de CSS es la posibili-
dad de definir estilos de texto, que podrán ser incorporados en las páginas que
componen el sitio. Otro de los puntos positivos, que nos brinda trabajar con es-
ta modalidad, es que resulta mucho más sencilla cualquier modificación ya que,
al cambiar las propiedades del estilo, éstas se aplicarán a los textos de todas las
páginas vinculadas. En la tabla que veremos a continuación, analizaremos
las principales propiedades que se pueden aplicar por medio de CSS, tanto para
texto como para otros elementos.
PROPIEDAD DESCRIPCIÓN VALORES4
color Permite establecer un color. Puede recibir valores RGB o el nombre del color
en inglés. Por ejemplo:
color: #000099;
color: blue;
font-family Se utiliza para definir Se pueden indicar nombres de fuentes o de
la familia tipográfica. familias. Es posible indicar más de un valor,
separado por coma. Por ejemplo:
font-family: Arial, sans-serif;
font-size Permite definir el tamaño Puede recibir un valor numérico o el tamaño
de una fuente. escrito en inglés. Por ejemplo:
font-size:10pt;
font-size: medium;
font-weight Se utiliza para establecer Puede recibir el valor normal, bold, bolder,
el grosor de una fuente. lighter o un número entre 100 y 900
(de cien en cien). Por ejemplo:
Font-weight: 700;
font-style Permite establecer Se le puede aplicar un valor normal,
el estilo de fuente. oblique o italic. Por ejemplo:
font-style: italic;
text-decoration Permite definir si un texto Puede tener un valor none, underline,
tendrá subrayado overline o line-through. Por ejemplo:
o se verá tachado. text-decoration: underline;
text-transform Se utiliza para hacer que Se le puede asignar capitalize, uppercase,
el texto tenga la primera lowercase o none. Por ejemplo, para todo
letra en mayúsculas el texto en mayúsculas:
(letra capital), todas las text-transform: uppercase;
letras en mayúsculas o
todo en minúsculas.
line-height Es un atributo que permite Puede recibir el valor normal o uno numérico.
establecer el interlineado, Por ejemplo:
definiendo el alto de la línea. line-height: 10px;
34 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 35
¿Cómo se pueden definir estilos de texto para todas las páginas de un sitio?
www.redusers.com 35
01.qxp 13/10/2009 03:51 p.m. PÆgina 36
<style type=”text/css”>
.miestilo {
font-family: “Times New Roman”, Times, serif;
font-size: 12px;
font-style: italic;
color: #000066;
}
</style>
36 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 37
¿Cómo se pueden definir estilos de texto para todas las páginas de un sitio?
En este caso, definimos los estilos dentro de la etiqueta párrafo (<p>) y separamos
las propiedades con ;. Si bien en el ejemplo tenemos todo en un mismo lugar, en
este caso, perdemos las ventajas de abstracción del diseño, que brinda CSS, debido
a que el contenido y la apariencia quedan en un mismo lugar. Además, en un ar-
chivo más extenso, declarar los estilos dentro del cuerpo del texto hace más engo-
rrosa la lectura del código al quitarle claridad.
Otro aspecto que debemos remarcar es que también es posible agregarle propieda-
des a un selector existente. Por ejemplo, si deseamos que todos los encabezados de
máximo nivel de una página sean de color azul, podríamos declarar lo siguiente en
la sección destinada para CSS en el encabezado del documento.
h1 {
color: blue;
}
Con estas líneas, definimos el color para los Encabezados 1 del HTML, pero tam-
bién podríamos definir otras propiedades relativas a la forma en que se representa
el texto en pantalla. Este ejemplo también podría realizarse con la aplicación del
concepto de clase, como ya hemos visto.
Si bien su historia podría remontarse un poco más en el tiempo, fue en el mes de diciembre de
1996 cuando tuvo su primera revisión el nivel 1 de CSS, también conocido como CSS1. Esta fecha
podría marcarse como su lanzamiento público. CSS2 aparece en mayo de 1998. Por su parte, CSS3
se mantiene en desarrollo y algunos navegadores ya son compatibles con sus características
www.redusers.com 37
01.qxp 13/10/2009 03:51 p.m. PÆgina 38
@CHARSET “UTF-8”;
.miestilo1 {
font-size: 10px;
color: #3333CC;
}
38 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 39
¿Qué efectos es posible aplicar a los links de una página y cómo 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 extensión.
www.redusers.com 39
01.qxp 13/10/2009 03:51 p.m. PÆgina 40
Figura 25. En los primeros años de auge de la web, los links, por lo general, se representaban
al subrayar la palabra o frase que enlazaba hacia otra página o referencia de Internet.
Hoy en día, la representación básica de un link en HTML ofrece las mismas carac-
terísticas que conocimos en sus comienzos, sin embargo, con la utilización de CSS
y código Javascript, es posible lograr efectos mucho más interesantes.
<a href=”contacto.htm”>Contacto</a>
40 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 41
¿Qué efectos es posible aplicar a los links de una página y cómo se pueden establecer para un sitio?
El enlace se define con etiqueta <a> y se cierra con </a>. Con el parámetro href, se in-
dica el sitio o página web de destino; en este ejemplo, enviamos a la página de contac-
to del sitio (contacto.htm). En caso de enviar a un sitio web, se debe indicar la direc-
ción 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 código:
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 pro-
piedades width (ancho) y height (alto) establecen las dimensiones, en pixeles, con
las que se muestra la imagen en pantalla.
Figura 26. Utilizar imágenes, en lugar de texto, para crear links, es una opción que puede
resultar más atractiva para el usuario y que, a su vez, brinda mejores alternativas para diseñar.
www.redusers.com 41
01.qxp 13/10/2009 03:51 p.m. PÆgina 42
a:focus: se utiliza para establecer cómo se muestra un enlace que tiene el foco sobre
él. Una manera de hacer foco sobre un enlace es, posicionados sobre la página acti-
va, pulsar la tecla TAB. Si bien esta alternativa no es muy utilizada, es una opción
que aún tiene validez y puede servir en algunos casos puntuales.
a:hover: esta opción se activa cuando el usuario pasa el mouse por encima del link.
Es, quizás, una de las acciones más 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 en-
cuentran casi todas las opciones que ofrece CSS para un texto común, por ejem-
plo: pasar a negrita, cambiar el color, subrayar, cambiar el tamaño de la fuente,
etcétera. De manera habitual, estas opciones se definen junto con el estilo de tex-
to que se utilizará. En el siguiente listado, veremos un ejemplo de aplicación, 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 13/10/2009 03:51 p.m. PÆgina 43
¿Qué efectos es posible aplicar a los links de una página y cómo 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 más claro para indicarle al usuario que existe un enlace sobre ese texto.
CSS también nos permite trabajar con imágenes. Una alternativa que podemos utilizar
en las imágenes 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 código CSS.
#imagenenlace img {
border: 2px solid #333333;
border-width: 2px 2px 2px;
}
www.redusers.com 43
01.qxp 13/10/2009 03:51 p.m. PÆgina 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 ha-
cer que coincida el nombre con la etiqueta id del objeto HTML. Para aplicarlo so-
bre una imagen, es posible incluirla en una capa y escribir el siguiente código:
En el código, debemos reemplazar los valores de href, scr, img alt y longdesc, por
los que deseemos utilizar en la página 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.
A diferencia de lo que muchos piensan, la Web 2.0 no es un nuevo estándar de Internet, sino
un concepto que hace referencia a la evolución de la Web hacia un formato de mayor partici-
pación e interacción 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 13/10/2009 03:51 p.m. PÆgina 45
¿Qué aspectos deben considerarse para diseñar 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 opción es que, como hemos visto
antes, nos permite definir estilos que podrán ser utilizados en todas las páginas del
sitio si lo deseamos. Es importante destacar que, también, existen otras formas de
aplicar efectos a los enlaces utilizando Javascript, Flash u otros lenguajes o tecno-
logías disponibles para desarrollos de sitios web.
Figura 29. Adobe Flash es una aplicación que, entre sus funciones básicas,
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 13/10/2009 03:51 p.m. PÆgina 46
</tr>
<tr>
<td>Paraguay</td>
<td>Asunción</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 ningún diseño, la tabla luce simple y muy poco atractiva.
46 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 47
¿Qué aspectos deben considerarse para diseñar y establecer el formato de las tablas de un sitio?
<td bgcolor=”#99CCCC”><b>País</b></td>
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>País</b></td>
Si buscamos una solución que nos sea útil para poder reutilizarla, en el listado
que veremos a continuación, definiremos un estilo CSS que nos permite apli-
carlo 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;
}
www.redusers.com 47
01.qxp 13/10/2009 03:51 p.m. PÆgina 48
Figura 32. Luego de aplicar las propiedades de CSS, la tabla cambia su aspecto
y obtenemos un resultado que podremos integrar en nuestro diseño.
Con este listado, definimos una capa que se dibujará a partir de la esquina superior
izquierda de la pantalla, o de la división que la contenga; tendrá unas dimensiones
Muchas personas ligadas a la programación prefieren editar páginas HTML con un editor de códi-
go. Quienes provienen del mundo del diseño, por lo general, eligen aplicaciones WYSIWYM. Para
ofrecer una solución que pueda ser útil para todos, muchos programas WYSIWYM permiten traba-
jar con una vista de diseño, otra vista de código y, también, una vista que combina ambas opciones.
48 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 49
de 750x500 pixeles y utilizará una imagen de fondo que no se repetirá. Esta capa,
así definida, sólo mostrará la imagen de fondo. Si deseamos mostrar otros elemen-
tos dentro de ella, ya sean otras capas, tablas o cualquier otro objeto HTML, de-
bemos 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 di-
mensiones y la posición que adquiera la capa que lo contiene. Si deseamos mos-
trar una capa dentro de otra, podríamos hacerlo con <div><div></div></div>. Con
esta opción, creamos capas anidadas vacías y sin propiedades. A cada una de ellas,
podemos asignarle las características 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.
www.redusers.com 49
01.qxp 13/10/2009 03:51 p.m. PÆgina 50
50 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 51
Por otra parte, con la etiqueta <iframe>, podemos incorporar otro documento del
mismo tipo, como si se tratara de un nuevo elemento flotante. Además de la ruta
del documento, puede tener asignadas dimensiones, bordes y propiedades de trans-
parencia, entre otras opciones. La utilización de marcos puede presentar algunos
problemas de compatibilidad con navegadores antiguos.
www.redusers.com 51
01.qxp 13/10/2009 03:51 p.m. PÆgina 52
#CapaTransparente {
z-index: 2;
background-color: black;
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
filter: alpha(opacity=30);
}
- opacity: define el nivel de transparencia estándar. Se utiliza, por ejemplo para Opera.
-moz-opacity: es una propiedad específica para la familia de navegadores que utili-
zan el código Mozilla.
- khtml-opacity: se utiliza para los navegadores que utilizan el framework WebKit,
por ejemplo Google Chrome, Safari y Konqueror.
- filter: alpha: se utiliza para lograr compatibilidad con la familia de navegadores
Microsoft Internet Explorer. También puede aplicarse de la siguiente manera:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30).
Para aplicar el estilo creado a una capa, lo asignamos a la id y luego ubicamos nor-
malmente la capa dentro del diseño de nuestra página.
La transparencia de un material está dada por las características que presenta para dejar
pasar la luz. Se dice que un elemento es opaco cuando no permite que la luz pase a través
de él. Por otra parte, un objeto translúcido permite pasar la luz, pero no deja ver de mane-
ra definida lo que hay del otro lado.
52 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 53
Debemos tener en cuenta que todo lo que se encuentre contenido dentro de la eti-
queta <div> tendrá asignada las características de transparencia. Por este motivo, por
lo general, será recomendable el manejo de manera independiente de la capa con trans-
parencia, para no afectar otros elementos de la página que no deseemos que tomen
estas características. Es importante destacar que el efecto de transparencia también
puede utilizarse en otros elementos a los que pueden aplicarse estilos, como las tablas.
www.redusers.com 53
01.qxp 13/10/2009 03:51 p.m. PÆgina 54
54 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 55
¿En qué casos se recomienda diseñar una página con dimensiones fijas y cuándo, con porcentuales?
Figura 41. La resolución de pantalla debe ser soportada tanto por la placa de video,
como por el monitor. De lo contrario, no tendremos una visualización adecuada.
www.redusers.com 55
01.qxp 13/10/2009 03:51 p.m. PÆgina 56
El lenguaje HTML nos permite trabajar con medidas porcentuales en diversos ele-
mentos, 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 ejem-
plo un <div>) en lugar de definir su medida exacta en pixeles.
Como podemos darnos cuenta, la ventaja de utilizar un valor porcentual para los ele-
mentos que componen una página web es que se adaptarán según las dimensiones
que les ofrezca la pantalla. Además, con un diseño adecuado, utilizando valores por-
centuales, se puede aprovechar el máximo 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 resolución para la cual fue optimizado el sitio.
La desventaja de utilizar medidas porcentuales en el diseño reside en que los ele-
mentos pueden modificarse de tal forma que aparezcan movidos en la pantalla,
56 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 57
¿En qué casos se recomienda diseñar una página con dimensiones fijas y cuándo, con porcentuales?
si no contemplamos todos los aspectos del diseño. 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 página web, pueden utilizarse medidas en pixeles o en por-
centaje, 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 utili-
za px, por ejemplo: height=”100px”. Para establecer que el valor es porcentual,
se usa el símbolo %, por ejemplo: width=”10%”.
Como veremos en el punto 13 de este capítulo, más allá de la decisión que to-
memos 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 diseño no lucirá de la mejor manera.
❘❘❘
¿QUÉ ES UN PIXEL?
Pixel es una palabra que proviene del término inglés picture element y que hace referencia a la
unidad de color más pequeña que conforma una imagen digital. Para representar un color, ca-
da pixel puede tomar un valor diferente, que está dado por la profundidad de color de la ima-
gen. Por ejemplo, una profundidad de 24 bits permite 16.777.216 colores.
www.redusers.com 57
01.qxp 13/10/2009 03:51 p.m. PÆgina 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 diseñar un sitio. Por ejemplo, ve-
amos qué ocurre con un rectángulo que, en su interior, tiene un texto. Debemos
tener en cuenta que el rectángulo se encuentra dentro de una página que también
posee sus bordes, por lo cual, podríamos pensar que el rectángulo se encuentra
dentro de otro rectángulo que, en este caso, es la página. La distancia que hay en-
tre el borde de la página y uno de los lados del rectángulo es el margen (margin),
que puede ser superior, inferior, derecho o izquierdo. Ahora bien, el espacio que
existe entre los lados del rectángulo y el texto interior es lo que se conoce como
padding. Para entender aún mejor esto, debemos pensar que el texto está envuel-
to en su propia caja imaginaria o caja de texto.
58 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 59
¿Cómo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?
Contenido: espacio donde se ubica el texto o el elemento que actúa como contenido.
Padding: espacio entre el contenido y el borde del objeto contenedor.
Borde contenedor: es la línea que determina los límites 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 representación de la página
web en el navegador.
Una vez que comprendemos estos conceptos, será nuestra tarea aplicarlos según lo que
deseemos lograr en nuestro diseño. Por ejemplo, establecer un valor de padding suele
ser muy útil para evitar que un texto interior se vea muy encimado sobre las líneas 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.
www.redusers.com 59
01.qxp 13/10/2009 03:51 p.m. PÆgina 60
Figura 45. El problema de centrado puede ser imperceptible para algunos usuarios,
pero un buen diseñador 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 sería: <div align=”center”>.
Sin embargo, en diseños que puedan presentar ciertos aspectos más complejos,
deberemos tener en cuenta algunos conceptos adicionales. En primer lugar, es
importante destacar que, además de las diferencias entre las distintas configura-
ciones posibles de pantallas, también hay diferencias entre los diferentes tipos de
navegadores, tema sobre el cual profundizaremos en el capítulo 3 de este libro.
Sin olvidar esto, para resolver un problema de centrado de una página, podre-
mos aprovechar las ventajas que brinda CSS. Para lograrlo, definiremos una
capa que actuará como contenedora de los elementos o bien de las demás capas
que formen parte de la página. A continuación, veremos un ejemplo, que puede
agregarse a la sección 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 13/10/2009 03:51 p.m. PÆgina 61
¿Cómo 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 lar-
go. 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 página (100%). Con las líneas margin: 0px auto; y text-align:center;, lo-
gramos que el contenido se muestre centrado en los navegadores más populares,
como Internet Explorer y Mozilla Firefox.
www.redusers.com 61
01.qxp 13/10/2009 03:51 p.m. PÆgina 62
<ul>
<li>Elemento 1 de menu</li>
<li>Elemento 2 de menu</li>
<li>Elemento 3 de menu</li>
</ul>
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, simple-
mente, recurrimos a la etiqueta href, y la utilizamos de la forma que ya hemos visto.
62 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 63
¿Cuáles son las diferentes opciones de menús 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 viñeta por utilizar. En este caso, definimos
un cuadrado (square), pero también podemos determinar un círculo (circle), ningún
objeto (none). También es posible utilizar una imagen pequeña, si cambiamos la lí-
nea por list-style-image:url(imagen.gif). El valor que aparece entre paréntesis debe
ser modificado por la ruta y el nombre de la imagen que deseamos incluir.
Ahora que conocemos la opción más simple, veremos cómo mejorar el aspecto
visual del menú para, por ejemplo, mostrarlo de manera horizontal, con una ima-
gen de fondo, otra posibilidad también 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 13/10/2009 03:51 p.m. PÆgina 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 asigna-
mos 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ú hori-
zontal. En #EstiloMenu, definimos el ancho (width), el alto total del menú
(height), la imagen que tendrá de fondo y un color con background. También
definimos que se repita en el eje X con la propiedad background-repeat.
En #EstiloMenu ul, definimos que no tenga viñetas y los valores de margin y
padding, en este caso lo indicamos en 0.
En #EstiloMenu li, al utilizar la opción float: left;, indicamos que los ítems aparez-
can 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 border-
left, también podríamos trabajar sobre los otros bordes si lo deseáramos.
Con #EstiloMenu li, definimos las propiedades que tendrá el elemento del menú,
el cual será un enlace a una página interna, a otra página o bien a un recurso de
64 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 65
¿Cuáles son las diferentes opciones de menús que se pueden crear al utilizar CSS?
Internet. Se pueden aplicar todas las características de texto que hemos visto en
CSS: color, tipografía, etcétera. En este caso, se agrega display: block; para lograr
que se vea cada ítem como un bloque, o bien como un botón.
Como podemos ver, #EstiloMenu li a:hover nos permite definir las características que
tomará el elemento del menú cuando el mouse pase por encima, en este caso, el co-
lor de fondo que tendrá el texto, es decir, el botón.
❘❘❘
¿QUÉ SIGNIFICA URL?
El término Uniform Resource Locator, abreviado habitualmente como URL, hace referencia a una
cadena de caracteres que se utilizan para identificar un recurso informático que puede estar alo-
jado en un servidor. En Internet, se utiliza para ubicar la dirección donde se encuentra un archi-
vo, por ejemplo, una imagen o un documento HTML.
www.redusers.com 65
01.qxp 13/10/2009 03:51 p.m. PÆgina 66
Figura 50. Con la versión online del generador, podremos acceder a una buena cantidad
de opciones para crear un menú que luego puede ser guardado en formato SWF.
66 www.redusers.com
01.qxp 13/10/2009 03:51 p.m. PÆgina 67
¿Cuáles son las diferentes opciones de menús que se pueden crear al utilizar CSS?
... RESUMEN
En este capítulo, conocimos las características principales de HTML, XML, XHTML y CSS.
Recorrimos las aplicaciones pagas y gratuitas para diseño de páginas web. Aprendimos qué
tipografías utilizar al diseñar una página y cómo establecer el conjunto de caracteres ade-
cuado para cada una. Trabajamos sobre los estilos que pueden aplicarse a los links para lo-
grar efectos según su estado. Detallamos cómo se puede trabajar con tablas, capas y estilos.
Analizamos las mejores opciones para establecer las dimensiones, márgenes y centrado de
una página. Por último, vimos las opciones de las que disponemos para crear un menú.
www.redusers.com 67
01.qxp 13/10/2009 03:51 p.m. PÆgina 68
✔ ACTIVIDADES
5 ¿Qué fuentes deben utilizarse al diseñar 4 Centre el contenido de una página para que
un sitio? se vea de manera correcta en distintos na-
vegadores y configuraciones de pantalla.
6 ¿En qué casos es conveniente utilizar una
hoja de estilos externa? 5 Cree un menú personalizado con la utiliza-
ción de CSS.
7 ¿Cómo se le aplican estilos CSS a una tabla?
68 www.redusers.com
REDISEÑO BOMBOS LIBROS - ISSU - Base Editable - Sep 10.indd 1 08/09/2010 15:54:03