LPCU 170

Tapa webmaster.qxp

14/10/2009

12:58 p.m.

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 y gratuitas existen para diseñar y administrar un sitio web? ¿Qué tipografías se pueden utilizar al diseñar? y más…

2 | APARIENCIA Y MEJORAS MULTIMEDIA ¿De qué forma se puede crear una imagen con transparencias para incorporar en un sitio web? ¿De qué modo se puede crear un banner sin utilizar Flash? ¿Cuál es la mejor opción para montar una emisora de radio online? ¿Cómo se puede transmitir video en vivo por Internet? y más…

3 | COMPATIBILIDAD CON NAVEGADORES Y MÓVILES ¿Qué navegadores deben contemplarse al diseñar un sitio? ¿De qué forma se puede detectar el navegador y la resolución de pantalla del usuario? ¿Cómo se puede optimizar el tamaño de una página web y su tiempo de carga? ¿Qué navegadores existen para dispositivos móviles? y más…

4 | CÓDIGO Y ESTRUCTURA DEL SITIO ¿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…

Esta obra explica, en forma práctica y clara, cómo superar los problemas más frecuentes y complejos que, tarde o temprano, enfrenta todo administrador de sitios web en su trabajo cotidiano.

Ya sea que se trate de amateurs, administradores accidentales o profesionales del desarrollo o el diseño, este libro les brindará el marco adecuado para entender completamente el rol que tendrán que desempeñar y cómo hacerlo de modo profesional, a través de soluciones rápidas y eficientes.

En sus páginas se abordan temas tan diversos como: migración y backup, FTP, problemas con elementos multimedia, streaming, compatibilidad, reducción de tiempos de carga, seguridad, y mucho más.

Finalmente, conoceremos las tendencias actuales y exploraremos las tecnologías que se encuentran en desarrollo o en crecimiento y que son materia obligada para dominar la Web 2.0.

5 | BLOGS AVANZADO CON WORDPRESS ¿Cómo crear y administrar un blog? ¿Cómo instalo Wordpress en un servidor propio? ¿Cómo se configuran sus opciones principales? ¿De qué forma pueden personalizarse las opciones de comentarios? y más…

6 | SEO (SEARCH ENGINE OPTIMIZATION) ¿Qué técnicas se deben tener en cuenta para posicionar un sitio? ¿Qué es el PageRank y qué importancia tiene en el posicionamiento? ¿Cuáles son las mejores formas de promocionar un sitio? ¿Qué se debe contemplar para posicionar blogs? ¿Qué sistemas de publicidad se pueden agregar a un sitio para ganar dinero? y más…

7 | ADMINISTRACIÓN DEL SITIO ¿Qué características son importantes al decidir la contratación de un hosting? ¿Cómo se registra un nombre de dominio? ¿Cómo personalizar las páginas de error de un sitio? ¿Qué herramientas existen para el desarrollo en equipo? y más…

8 | IMPORTACIÓN, EXPORTACIÓN Y BACKUP ¿Cómo se exporta información de aplicaciones de Office a formato HTML? ¿Cómo se puede convertir un PDF en HTML? ¿Cómo se realiza el backup de un sitio? ¿Qué aspectos hay que tener en cuenta al migrar el sitio a un nuevo servidor? y más…

NIVEL DE USUARIO PRINCIPIANTE

INTERMEDIO

AVANZADO

EXPERTO

redusers.com En este sitio encontrará una gran variedad de recursos y software relacionado, que le servirán como complemento al contenido del libro. Además, tendrá la posibilidad de estar en contacto con los editores, y de participar del foro de lectores, en donde podrá intercambiar opiniones y experiencias.

PROFESSIONAL WEBMASTER This book is the best way to learn how to solve the most frequent problems that, sooner o later, any website administrator has to face in his everyday work. It is aimed for amateurs, hobbyists, designers, programmers and developers, and anyone who wants to give quick and efficient solutions.

por Damián De Luca

RT_Bombo_LIBROSolucionesWebmasters.qxp

28/09/2009

16:33

Página RT2

CONÉCTESE CON LOS MEJORES

LIBROS DE COMPUTACIÓN usershop.redusers.com

CREACIÓN, EXPANSIÓN Y MONETIZACIÓN DE BLOGS

ESTRATEGIAS PARA POSICIONAR SU NEGOCIO EN LA WEB

MANUALES USERS I 352 páginas I ISBN 978-987-1347-96-4

PROFESSIONAL TOOLS I 288 páginas I ISBN 978-987-1347-82-7

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

Webmaster profesional

Diseño del sitio y CSS Para comenzar a dar respuesta a las dudas y problemas más frecuentes que enfrenta un diseñador o un desarrollador de sitios web, en el primer capítulo de este libro, abordaremos las soluciones relacionadas con el diseño del sitio, trabajo con tablas, utilización de capas, creación de diferentes tipos de menús y aplicación de estilos CSS.

SERVICIO DE ATENCIÓN AL LECTOR: usershop@redusers.com

Capítulo

1

¿Cuáles son las diferencias y ventajas de la utilización de HTML, XHTML y CSS? 14 ¿Qué aplicaciones pagas y gratuitas existen para diseñar y administrar un sitio web?

19 ¿Qué herramientas nos ayudan a elegir la paleta de colores para un sitio?

24 ¿Qué tipografías pueden utilizarse en el diseño de un sitio web y cuáles son las recomendadas? 28 ¿Cómo visualizar los sitios que no muestran los caracteres de manera correcta?

30 ¿Cómo se pueden definir estilos de texto para todas las páginas de un sitio?

33 ¿Qué efectos es posible aplicar a los links de una página y cómo se pueden establecer para un sitio? 39 ¿Qué aspectos deben considerarse para diseñar y establecer el formato de las tablas de un sitio?

45 ¿Cómo es posible crear una capa y ubicarla dentro de otra? 48 ¿Es posible mostrar una capa con una transparencia de fondo?

51 ¿En qué casos se recomienda diseñar una página con dimensiones fijas y cuándo, con porcentuales?

54 ¿Cuál es la mejor forma de establecer los márgenes de una página y sus elementos? 58 ¿Cómo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?

59 ¿Cuáles son las diferentes opciones de menús que se pueden crear al utilizar CSS? 62 Resumen 67 Actividades 68

01.qxp

13/10/2009

03:51 p.m.

PÆgina 14

1. DISEÑO DEL SITIO Y CSS

¿Cuáles son las diferencias y ventajas de la utilización de HTML, XHTML y CSS? Para lograr comprender cómo funciona Internet y las tecnologías que conviven en su infinita telaraña, es importante conocer su evolución; nace como un proyecto militar denominado ARPANET. Este desarrollo se concreta en 1969, año en el cual se produce la primera transmisión por esta vía. A principios de la década del setenta, cuando aún la conectividad era muy rudimentaria, Ray Tomlinson crea el correo electrónico, una invención que, renovaciones mediante, se mantiene vigente hasta nuestros días. Hacia fines de la década del ochenta, Internet logra su punto de inflexión, cuando se crea lo que conocemos como World Wide Web o WWW.

Figura 1. La entidad que determina los estándares que se utilizan en la Web, World Wide Web, es conocida como W3C (World Wide Web Consortium) y se encuentra en la dirección www.w3.org.

HTML Con la llegada de la World Wide Web, fue fundamental contar con un lenguaje que se transformara en un estándar en la construcción de páginas web. A principios de la década del noventa, nace el HyperText Markup Language, nombre 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, potenciado 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

¿Cuáles son las diferencias y ventajas de la utilización de HTML, XHTML y CSS?

al estructurar texto y otros elementos que conoceremos más adelante. Cabe destacar que no es un lenguaje de programación ya que, entre otras cosas, no puede ofrecer las funciones y el trabajo con variables, que sí brindan los lenguajes de programación. La ventaja del HTML es su versatilidad para trabajar con distintos lenguajes y tecnologías. Por eso, a pesar de sus limitaciones, mantiene su importancia en el armado de sitios web.

Dentro de un documento HTML, se puede agregar código de lenguajes, como por ejemplo Javascript. También, es posible incluir etiquetas para mostrar imágenes, hipervínculos, películas Flash o reproductores multimedia. Por otra parte, los desarrolladores que trabajan con PHP, ASP o .NET tienen la posibilidad de incluir fragmentos de código HTML dentro de la programación, para ofrecer datos al usuario y realizar representaciones en pantalla.

Para poder visualizar un documento HTML, se necesita un software capaz de interpretarlo. A este tipo de aplicaciones, se las conoce como navegadores, dentro de los que se pueden mencionar, con sus diferentes versiones: Internet Explorer, Mozilla Firefox, Google Chrome, Safari y Opera, entre otros. En el capítulo 3 de este libro, analizaremos la compatibilidad de un sitio con estos.

Figura 2. La mayoría de los navegadores modernos ofrecen una opción para mostrar el código fuente de las páginas web.

El lenguaje HTML ha evolucionado a través de los años y es identificado por versiones.

Su revisión actual es la 4.01, que fue dada a conocer en el año 1999. HTML5 aún está en desarrollo. En la tabla 1, veremos las etiquetas más importantes de este lenguaje. www.redusers.com

15

01.qxp

13/10/2009

03:51 p.m.

PÆgina 16

1. DISEÑO DEL SITIO Y CSS

ETIQUETA HTML

DESCRIPCIÓN DE SU FUNCIÓN4

<!DOCTYPE>

Permite establecer el tipo de documento.

<html>

Indica el inicio del código HTML.

<head>

Establece el comienzo del encabezado del documento.

<title>

Se incluye dentro de la cabecera y sirve para indicar el título del documento.

Por lo general, este dato puede verse reflejado en la barra de título del navegador al acceder a una página.

<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 códigos Javascript que se incluyen dentro del documento. Se ubica dentro del encabezado.

<script>

Esta etiqueta se utiliza con el fin de incorporar un código script.

<body>

Indica el comienzo del cuerpo del documento y envuelve el contenido

<h1>

Estas etiquetas, que se utilizan dentro del cuerpo del documento,

que se muestra en la ventana del navegador. <h2>

permiten definir los distintos niveles de título que admite el estándar

<h3>

HTML. <h1> es el de mayor importancia, y <h6>, el de menor jerarquía.

<h4> <h5> <h6> <p>

Define un párrafo.

<blockquote>

Mediante esta etiqueta, es posible asignar una sangría al texto.

<br>

Con esta opción, se agrega una línea en blanco en el flujo. Actúa como

<a>

Permite definir la dirección de un enlace y el texto que éste muestra

si fuera creada con Enter en un procesador de texto. en pantalla, entre otras opciones. <table>

Posibilita definir una tabla. Dentro de ella, se utiliza <tr> para crear una fila y <td> para una celda.

<div>

Envuelve el área de un contenido. Se utiliza para la construcción de capas.

<frame>

Se emplea para definir un marco. Trabaja junto con <frameset>, que determina el conjunto de marcos. Por otra parte, la etiqueta <iframe> permite insertar un marco en el documento, sin necesidad de que pertenezca a un conjunto.

<form>

Envuelve los elementos de un formulario.

<img>

Esta etiqueta es utilizada para mostrar una imagen en pantalla.

<b>

Se utiliza para envolver texto en negrita o bold. En la actualidad, se extiende la opción de reemplazar esta etiqueta por <strong>, que fuerza al navegador a dar énfasis o reforzar el texto destacado, por lo general, al mostrarlo en negrita.

<i>

Se utiliza para envolver texto en itálica o cursiva.

<u>

Se emplea para envolver texto subrayado.

Tabla 1. Código de las etiquetas HTML más importantes y descripción de su función.

16

www.redusers.com

13/10/2009

03:51 p.m.

PÆgina 17

¿Cuáles son las diferencias y ventajas de la utilización de HTML, XHTML y CSS?

Por lo general, en HTML se encierra contenido con etiquetas de apertura y de cierre: por ejemplo, para marcar un texto en cursiva, se debe escribir <i>Texto a mostrar</i>. Algunas etiquetas especiales, como puede ser <br>, no envuelven un contenido, por lo cual no necesitamos cerrarlas.

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).

Figura 3. Cuando ingresamos en www.w3c.es/divulgacion/guiasbreves/tecnologiasXML, encontramos una guía de XML en castellano, publicada por la oficina española de W3C.

El término en inglés eXtensible Hypertext Markup Language es un estándar conocido como XHTML y cuya traducción al castellano es lenguaje extensible de marcado de hipertexto. Éste utiliza etiquetas, al igual que el HTML, pero exige mayores requisitos en cuanto a estructura y formación de los documentos, tal como lo establecen las reglas del XML.

❘❘❘

01.qxp

¿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 traducirse como páginas activas de servidor.

www.redusers.com

17

01.qxp

13/10/2009

03:51 p.m.

PÆgina 18

1. DISEÑO DEL SITIO Y CSS

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 tambié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 incorporar 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?

¿Qué aplicaciones pagas y gratuitas existen para diseñar y administrar un sitio web?

Si contamos con el suficiente conocimiento de HTML, la creación de una página web puede llevarse a cabo con un simple editor de texto, como puede ser el Bloc de notas de Windows. En este caso, sólo debemos escribir el código que deseamos utilizar y guardar el archivo con extensión HTM o HTML. Estas aplicaciones que permiten editar texto plano, son suficientes para crear una página web. Si bien esta afirmación es válida, hay que tener en cuenta que, para afrontar desarrollos de mayor complejidad, esta alternativa no nos ofrece demasiada ayuda. La elección entre un tipo de editor y otro se basa, principalmente, en el conocimiento que tenemos sobre el lenguaje HTML. Las ventajas de trabajar con este tipo de editores es que no nos encontramos limitados por el número de opciones que tiene la aplicación.

Si nuestro deseo es trabajar con código, para luego probarlo en un navegador, una opción que nos ayudará en gran medida consiste en buscar un editor que reconozca las etiquetas HTML y nos ofrezca ayuda en su creación. Dentro de esta gama de aplicaciones, encontraremos software gratuito que permite editar código.

UltraEdit es un potente editor de código capaz de trabajar con XHTML, HTML, PHP, Java, Javascript y Perl, entre otros lenguajes. Permite indentado automático, Drag & drop y chequeo de palabras mientras se escribe, entre otras opciones. Se puede obtener una versión trial desde www.ultraedit.com/ downloads/ultraedit_download.html.

Figura 5. Las características de UltraEdit lo ubican como una excelente opción tanto para el uso personal como profesional. www.redusers.com

19

13/10/2009

03:51 p.m.

PÆgina 20

1. DISEÑO DEL SITIO Y CSS

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 opción de trabajar con editores resulta muy útil para quienes tienen experiencia 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 amigable. 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 ofrecido por un editor de código, es el que se impone hoy por hoy en el mundo del diseño web. La tendencia actual también marca que cada vez son más los programas 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.

Los programas WYSIWYM Existe una variada oferta entre los programas WYSIWYM. Desde aquellos gratuitos, disponibles para diversas plataformas, hasta potentes suites multimedia de uso profesional, pensadas para el trabajo individual o en equipo.

Programas gratuitos Dentro de las aplicaciones gratuitas, se destaca WYMeditor, un editor open source (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.

❘❘❘

01.qxp

¿QUÉ ES PHP?

PHP es un lenguaje de programación de páginas dinámicas muy difundido en Internet, cuya primera versión fue lanzada a mediados de la década del noventa. Las páginas desarrolladas en PHP se alojan en servidores web que interpretan el código ante un requerimiento del usuario, para poder ofrecer el resultado en un navegador.

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?

Figura 6. KompoZer es una aplicación que resulta compatible con Windows, Linux y Mac OS X. Puede ser descargada desde el sitio web: http://kompozer.net.

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 versión CS4 de este software fue lanzada en septiembre de 2008. Entre las principales ventajas 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.

Figura 7. Dreamweaver permite editar y crear archivos que utilizan código HTML, XML, ASP, PHP, CSS y JavaScript, entre otras opciones. www.redusers.com

21

01.qxp

13/10/2009

03:51 p.m.

PÆgina 22

1. DISEÑO DEL SITIO Y CSS

Además de sus características como editor, Dreamweaver ofrece una completa respuesta para administración: permite tanto definir distintos sitios como trabajar con ellos, subir y descargar archivos, sin olvidar la ventaja de sincronizar la información entre el equipo local y el servidor.

Dreamweaver es un software pago que funciona en Windows XP (SP2 o superior), Windows Vista y también en sistemas Mac OS X. Este producto se puede conseguir dentro de las suites de diseño comercializadas por Adobe o bien es posible descargarlo, en una versión de prueba, desde el centro de descarga de productos de Adobe: www.adobe.com/es/downloads.

Figura 8. Desde su centro de descargas, Adobe ofrece, a los usuarios, la posibilidad de acceder a versiones de prueba de sus productos más destacados.

Para realizar la descarga de Dreamweaver o de cualquiera de los otros productos ofrecidos como demostración, debemos crear una cuenta en el sitio de Adobe. El proceso es gratuito y requiere pocos pasos. Luego nos podremos autenticar y realizar la descarga, disponible en diversos idiomas, incluido el castellano.

Microsoft Expression Web Expression Web es la aplicación a través de la cual Microsoft brinda una alternativa para el diseño de sitios web. Ofrece un entorno de trabajo basado en el concepto WYSIWYM, agrega la opción de trabajo en línea de código y tiene la capacidad de trabajar con los estándares más utilizados en Internet en la actualidad. Cuenta con diversas herramientas para manejar y administrar hojas de estilo CSS. Este programa puede desarrollarse tanto con ASP.NET como con PHP. Para ejecutar Microsoft Expression Web 2 es necesario contar con Windows XP (SP2 o superior) o Windows Vista. Este producto se puede obtener en diferentes idiomas, incluido el castellano.

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?

Figura 9. Para obtener Microsoft Expression Web se debe ingresar en www.microsoft.com/spain/expression/try-it/Default.aspx y hacer clic en el botón Evaluar, correspondiente al producto elegido.

<oXygen/> Con <oXygen/> podemos acceder a una plataforma de edición y creación de páginas XML, HTML y XHTML. Ofrece una interfaz visual WYSIWYG y la posibilidad 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

1. DISEÑO DEL SITIO Y CSS

¿Qué herramientas nos ayudan a elegir la paleta de colores para un sitio?

Aunque para muchos parezca una tarea trivial, la elección de la paleta de colores que se utilizará en un sitio web consiste en una labor que debe realizarse con cuidado, ya que una mala elección puede deslucir de manera considerable el resultado final. Es parte clave del trabajo de un buen diseñador poder captar la esencia de un sitio, para plasmarla en la combinación de colores que mejor se adapte al estilo concordante con los contenidos que se desean transmitir.

Cómo transmitir sensaciones a través de los colores Además de su función estética, los colores permiten transmitir sensaciones. Una posible separación que se puede hacer entre ellos, es ubicarlos como cálidos o fríos.

Los colores cálidos son los que transmiten un clima íntimo y cercano. También pueden dar una sensación de pasión y calidez. Dentro de esta clasificación se encuentran los tonos del amarillo, naranja y rojo. Un claro ejemplo de esto son el sol y el fuego, representados por los colores mencionados.

Por su parte, los colores fríos son aquellos que sirven para marcar distancias y, en algunos casos, describir situaciones de tristeza. Entre los colores que se ubican en este rango, se encuentran azul, cian, violeta y verde, en especial en sus tonos más apagados. Para dar un ejemplo de esto, se dice que son algunos metales, fuertemente identificados con el frío, los que suelen tomar estos colores como base.

Al elegir un color, se debe tener muy presente su tonalidad, luminosidad y saturación, para ubicarlo en el lugar apropiado y mantener la armonía del diseño.

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 realizarse sobre la base de una composición RGB. En HTML, los colores RGB pueden ser representados en modo hexadecimal con el símbolo # antepuesto. Por

FRONTPAGE Frontpage es un editor de páginas web, cuyo desarrollo estuvo en manos de Microsoft a partir de mediados de la década del noventa. Logró cierta popularidad en aquellos años, acompañado por el crecimiento que Internet adquiría en todo el mundo. En la actualidad, se ha discontinuado y cedió su lugar a Expression Web.

24

www.redusers.com

01.qxp

13/10/2009

03:51 p.m.

PÆgina 25

¿Qué herramientas nos ayudan a elegir la paleta de colores para un sitio?

ejemplo, el color rojo se representa como #ff0000 y el amarillo como #ffff00.

Color Cop es una aplicación libre que permite obtener el valor de colores que después se puede utilizar en el desarrollo de páginas web o en otras aplicaciones.

Al ingresar en la dirección del sitio: http://colorcop.net/download, tenemos la posibilidad de descargar el software para su utilización.

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.

Sitios web para elegir paletas de colores COLOURlovers es un sitio web que brinda la posibilidad de elegir colores, paletas y diseños de patrones (patterns). Este espacio se nutre por la contribución de los usuarios y permite registrarse de manera gratuita. Entre los servicios adicionales, se destacan un foro de discusiones y un blog que aporta muy buenas ideas sobre todo lo relacionado con los colores.

Figura 12. Para acceder a COLOURlovers hay que ingresar en www.colourlovers.com.

Desde la página principal, se puede acceder a las últimas novedades subidas por los usuarios, calificar y dejar comentarios, entre otras opciones. www.redusers.com

25

13/10/2009

03:51 p.m.

PÆgina 26

1. DISEÑO DEL SITIO Y CSS

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 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, ingresamos 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.

Aplicaciones para elegir paletas de colores ColorSchemer Studio es una aplicación que nos permite utilizar una rueda de colores para seleccionar los tonos de nuestra paleta. Podemos guardar nuestros trabajos y realizar funciones avanzadas. Está disponible para Windows y MAC OS X. Se puede descargar una versión de evaluación desde www.colorschemer.com.

❘❘❘

01.qxp

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

¿Qué herramientas nos ayudan a elegir la paleta de colores para un sitio?

Figura 14. Existe una versión para utilizar en línea, llamada Color Schemer Online, a la que se puede acceder desde la dirección web www.colorschemer.com/online.html.

Otra alternativa que tenemos a nuestro alcance se llama colorbrowser. Su función principal es ayudarnos con la organización y la edición de paletas de colores.

Ofrece varias opciones de exportación, y se puede acceder a la página principal del proyecto ingresando en http://code.google.com/p/colorbrowser.

Figura 15. Colorbrowser es una aplicación sencilla de tecnología Adobe AIR que puede ser útil para aquellas personas que necesitan trabajar con paletas de colores. www.redusers.com

27

01.qxp

13/10/2009

03:51 p.m.

PÆgina 28

1. DISEÑO DEL SITIO Y CSS

¿Qué tipografías pueden utilizarse en el diseño de un sitio web y cuáles son las recomendadas?

Al diseñar un sitio web, no se puede dejar de contemplar las tipografías que se utilizarán en su creación. En este sentido, es importante destacar que las fuentes que visualizará el navegador son las que se encuentran instaladas en el sistema del usuario. Si tenemos en cuenta que, al instalarse el sistema operativo, solamente se incluye un reducido conjunto de tipografías, esto hace que las posibilidades sean acotadas, ya que no todos los usuarios cuentan con los packs adicionales de fuentes que pueden disponer, por ejemplo, los especialistas en diseño gráfico. En consecuencia, al abordar el diseño de un sitio, hay que utilizar las familias de fuentes que aseguren compatibilidad y se encuentren en los diversos sistemas donde pueda ser visualizado.

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.

Desde hace unos años, se ha popularizado el concepto de fuentes seguras para utilizar en sitios web, al que, en idioma inglés, se lo suele denominar web-safe fonts. Utilizar estas fuentes nos brinda mayor certeza en cuanto a lo que el usuario podrá visualizar en su navegador. Entre las fuentes más populares incluidas en Windows y en otros sistemas, se encuentran Arial, Courier New, Georgia, Times New Roman, Verdana, Trebuchet y Lucida Sans.

Es posible reunir las fuentes por familias, que son las que permiten agrupar por estilo y características. Dentro de este concepto, se pueden señalar las fuentes serif, que son aquellas que cuentan con algún tipo de remate o de adorno en sus puntas o extremos, que las distingue, como por ejemplo Times New Roman o Georgia.

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 cada 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. <font face=”Arial, Helvetica, sans-serif”>Texto de prueba</font>

La etiqueta <font> debe estar contenida dentro del cuerpo del documento, es decir después de <body> y antes de </body>. Su función es definir las características 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

13/10/2009

03:51 p.m.

PÆgina 30

1. DISEÑO DEL SITIO Y CSS

anterior, además de las fuentes de reemplazo se puede indicar la familia.

Otras propiedades que es posible aplicar a <font> son size (tamaño de la fuente) y color (color de la fuente). Como podremos ver en el punto 6 de este capítulo, también se puede establecer una fuente y sus propiedades por medio de CSS.

Fuentes en imágenes y animaciones Para resolver las situaciones en las que es imprescindible utilizar una tipografía determinada, por ejemplo, para crear un logotipo, se puede recurrir a la incorporación de una imagen, generada con un programa de creación y edición, como por ejemplo Adobe Photoshop o Gimp.

De igual forma, se puede proceder para una animación, pero mediante el uso de otras herramientas, como Adobe Flash, una de las aplicaciones que ha ganado un lugar destacado en la preferencia de los diseñadores web. Cabe destacar que las tipografías empleadas al generar una película en Flash quedan incorporadas en el archivo. Por este motivo, no es necesario que el usuario las tenga instaladas en su PC y, por lo tanto, le brinda mayor libertad al diseñador.

¿Cómo visualizar los sitios que no muestran los caracteres de manera correcta?

A esta altura del siglo XXI, no hay dudas de que Internet es un fenómeno global que abarca a personas de todo el mundo. Este suceso comunicacional y cultural también implica una enorme cantidad de contenidos escritos en muchos idiomas y dialectos.

Los sistemas operativos en castellano están preparados para visualizar juegos de caracteres de los lenguajes que comparten la misma codificación, pero pueden requerir la instalación de paquetes adicionales para otros lenguajes, como el árabe o el chino. Por esta causa, un navegador en español puede ver sin problemas páginas escritas en inglés o en italiano, pero, a veces, presentan caracteres incorrectos u ofrecen la descarga de un paquete adicional si el contenido está en idiomas que manejan otro alfabeto, distinto del latino, utilizado por el idioma castellano.

❘❘❘

01.qxp

¿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 documento, 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 introducir 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

1. DISEÑO DEL SITIO Y CSS

<!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> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />

Si bien no afectan la codificación de la página, cabe destacar que existen atributos específicos de idioma y región que se pueden aplicar a la etiqueta <HTML>. Para indicar que un documento está escrito en español, se debe escribir de siguiente : <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”>

Si el problema persiste en algunos equipos puntuales, se puede recomendar al usuario que verifique la configuración de su navegador. En el caso de Internet Explorer, debe ir al menú Ver/Codificación o en Mozilla Firefox a Ver/Codificación de caracteres.

Por defecto, en ambos casos, debería estar seleccionada la opción Unicode.

Figura 20. Si en páginas de uso frecuente se visualizan de manera incorrecta algunos caracteres, es muy probable que esté mal configurada la codificación del navegador.

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?

¿Cómo se pueden definir estilos de texto para todas las páginas de un sitio?

Como hemos visto antes, las tipografías de un sitio son parte de su identidad. Desde un punto de vista estético y para mantener homogeneidad entre las páginas que lo componen, es importante definir desde el comienzo los estilos de texto que se utilizarán.

Figura 21. Definir los estilos de un sitio nos permite identificarlo como marca, concepto, o bien dentro de un rubro o especialidad. www.redusers.com

33

01.qxp

13/10/2009

03:51 p.m.

PÆgina 34

1. DISEÑO DEL SITIO Y CSS

Una de las grandes ventajas que nos ofrece la utilización de CSS es la posibilidad 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 esta 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 la familia tipográfica.

Se pueden indicar nombres de fuentes o de 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 de una fuente.

Puede recibir un valor numérico o el tamaño escrito en inglés. Por ejemplo: font-size:10pt; font-size: medium;

font-weight

Se utiliza para establecer el grosor de una fuente.

Puede recibir el valor normal, bold, bolder, lighter o un número entre 100 y 900 (de cien en cien). Por ejemplo: Font-weight: 700;

font-style

Permite establecer el estilo de fuente.

Se le puede aplicar un valor normal, oblique o italic. Por ejemplo: font-style: italic;

text-decoration

text-transform

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;

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

34

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;

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?

PROPIEDAD

DESCRIPCIÓN

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

Se puede asignar un valor numérico expresado

un indentado.

en pixeles o pulgadas. Por ejemplo: text-indent: 15px; text-indent: 4in;

background-color

Ofrece la posibilidad de

Puede recibir valores RGB o el nombre del color

asignar un color de fondo

en inglés. Por ejemplo:

a un elemento.

color: #FF0000; color: red;

background-image

Se utiliza para establecer

Se debe asignar el nombre y la ruta donde se

una imagen de fondo

encuentra alojada la imagen. Por ejemplo:

para un elemento.

background-image: url(http://www.misitio.com/imagne.jpg)

margin

Permite asignar un margen

Puede utilizarse para izquierda (margin-left),

para un elemento.

derecha (margin-right), abajo (margin-bottom) y arriba (margin-top). Se le asignan valores numéricos que pueden estar expresados en pixeles, pulgadas o porcentajes. Por ejemplo: margin-top: 8px;

padding

Se utiliza para indicar el

Puede utilizarse para izquierda (padding-left),

espacio entre un elemento

derecha (padding-right), abajo (padding-bottom)

y su interior.

y arriba (padding-top). Se le asignan valores numéricos que pueden estar expresados en pixeles, pulgadas o porcentajes. Por ejemplo: padding-right: 1in;

border-color

Permite establecer el color

Puede recibir valores RGB o el nombre del color

del borde de un elemento.

en inglés. Por ejemplo: color: #33CC33; color: green;

border-style

Se emplea para definir

Se le puede asignar un valor none, dotted,

el estilo de un borde.

solid, double, groove, ridge, outset o inset.

Por ejemplo: border-style: none;

border-width

Permite asignar un ancho

Se le asignan valores numéricos que pueden

a un borde.

estar expresados en pixeles o en pulgadas.

Por ejemplo: border-width: 2px;

Tabla 2. Tabla de los atributos más utilizados en CSS, descripción de su uso y valores que pueden recibir. www.redusers.com

35

01.qxp

13/10/2009

03:51 p.m.

PÆgina 36

1. DISEÑO DEL SITIO Y CSS

Figura 22. Si ingresamos en www.w3.org/Style/CSS, podremos obtener información y novedades sobre Cascading Style Sheets (CSS).

Hojas de estilo dentro del documento HTML Al hablar de las características de CSS, en el punto 1 del presente capítulo, dijimos que puede incluirse dentro del documento HTML o bien en un archivo externo. Si elegimos la primera alternativa, es conveniente declarar los estilos en la cabecera del HTML y serán válidos sólo para el documento en cuestión. A continuación, veremos de qué manera se define una clase para aplicar como estilo a un texto. <style type=”text/css”> .miestilo { font-family: “Times New Roman”, Times, serif; font-size: 12px; font-style: italic; color: #000066; } </style>

El listado del ejemplo debe incorporarse en la cabecera del documento, después de la etiqueta <head> y antes de </head>. En este caso, definimos una clase de texto al especificar la familia de fuentes, el tamaño, el estilo y su color. Como podemos ver, 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?

para incluir los estilos, en la cabecera escribimos <style type=”text/css”>. Al finalizar todo el código CSS que deseamos incluir en el documento, cerramos con </style>.

Para aplicar la clase creada a un párrafo, debemos escribir: <p class=”miestilo”>Texto del párrafo</p>. Esta opción también puede ser aplicada a otras etiquetas, como por ejemplo a <body>. Una clase puede ser utilizada para un único elemento o para varios. Si deseamos incluir el estilo directamente en un párrafo, sin declararlo en la cabecera, deberíamos proceder de la siguiente forma: <p style=”font-family: Times New Roman, Times, serif; font-size:12px; fontstyle: italic; color: #000066;”> Texto del párrafo</p>

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 archivo más extenso, declarar los estilos dentro del cuerpo del texto hace más engorrosa la lectura del código al quitarle claridad.

Otro aspecto que debemos remarcar es que también es posible agregarle propiedades 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 tambié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.

HISTORIA DEL CSS 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

1. DISEÑO DEL SITIO Y CSS

Figura 23. Al ingresar en http://jigsaw.w3.org/css-validator, accedemos a un validador de código CSS que ofrece un completo informe de los problemas que se pueden encontrar en los archivos analizados.

Hojas de estilo externas La utilización de estilos en archivos externos a los documentos HTML es una opción que ofrece muchas ventajas, porque nos permite manejar todos los estilos de un sitio de manera independiente. Esta alternativa nos ofrece una mejor diferenciación entre el contenido y la forma en que se muestra en pantalla. La opción mencionada resulta muy útil cuando se necesita realizar modificaciones, ya que simplifica el trabajo de manera notable.

Los archivos de hojas de estilo llevan la extensión .CSS y están conformados por una estructura muy simple, ya que en ellos sólo se deben incluir los estilos de texto que se utilizarán, de la misma forma que si lo hiciéramos en el encabezado. Se pueden crear con un editor que reconozca el código, como los que hemos visto en el punto 2 de este capítulo o desde cualquier otro editor de texto.

Como primera línea del archivo CSS, es recomendable indicar el juego de caracteres utilizado y, luego, declarar los estilos, como vemos en el ejemplo a continuación. @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; }

Para incluirlo en el archivo HTML, dentro del encabezado, escribimos lo siguiente: <link type=”text/css” rel=”stylesheet” href=”./css/nombredearchivo.css” />

En el valor de href, se indicará la ruta y el nombre del archivo CSS, con su extensión.

Figura 24. Cada nivel o especificación de CSS incluye las características de las versiones previas y además agrega nuevas funcionalidades. Por ejemplo, CSS nivel 3 incluye todas las características del nivel 2 e incluye nuevas.

¿Qué efectos es posible aplicar a los links de una página y cómo se pueden establecer para un sitio?

Una de las características más importante de los sitios web es su capacidad de enlazar otros contenidos, ya sean del propio sitio o bien de otros lugares. Esta posibilidad es la que permite estructurar un sitio y dar a conocer a los visitantes las diferentes páginas que lo componen. Además, les ofrece la alternativa de acceder a otros espacios recomendados, que pueden brindar contenidos de interés o bien ser auspiciantes que ofrecen sus servicios. www.redusers.com

39

01.qxp

13/10/2009

03:51 p.m.

PÆgina 40

1. DISEÑO DEL SITIO Y CSS

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 caracterí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.

La ubicación de los links La ubicación de los enlaces en una página no es un asunto menor, debido a que su disposición, dentro del diseño, define su atractivo y la posibilidad que existe de que el usuario los vea y le resulte tentador hacer un clic en ellos. Como veremos más adelante, los enlaces pueden figurar como un texto en HTML, ser enriquecidos por propiedades CSS, crearse con código Javascript o bien ponerse como imágenes, entre otras opciones. Es importante tener en cuenta que hay que elegir la opción indicada, según el diseño del sitio y también tener en cuenta la función que deseamos asignarle al enlace creado. Por ejemplo, se podría incluir una imagen animada muy llamativa para definir el enlace que conduce a la ayuda de uso de un sitio y, a su vez, ubicarla en la cabecera para que resulte bien visible. Sin embargo, en la mayoría de los casos, esta opción no es la más relevante en el esquema de un sitio web, por lo cual puede tener una ubicación de menor peso y un tipo de link más discreto.

En el capítulo 6, cuando recorramos las características de optimización del sitio (SEO), veremos los lugares más destacados para incluir enlaces de publicidad, pero, por lo pronto, podemos decir que, en todos los casos, los links que el usuario percibirá como más accecibles, son los que estén ubicados a menor distancia del contenido que está leyendo. Por lo general, se ubican a la izquierda o en la parte superior de la pantalla, como por ejemplo ocurre con las botoneras que, al fin y al cabo, son un conjunto de enlaces que pueden representarse como texto o como gráficos (estáticos o animados).

Crear un link en HTML Antes de centrarnos en los efectos que se pueden generar sobre los links, veamos de qué manera se crea un enlace en HTML. <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 indica el sitio o página web de destino; en este ejemplo, enviamos a la página de contacto del sitio (contacto.htm). En caso de enviar a un sitio web, se debe indicar la direcció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: <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 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.

Agregar efectos a los links con CSS Una opción para darle un estilo distinto o para decorar un enlace consiste en aprovechar las opciones que nos ofrece CSS, entre las que encontramos: a:link: define las propiedades del link, cuando no ha sido visitado, ni tiene el mouse sobre él, ni tampoco el foco. Es la opción predeterminada para mostrar un enlace cuando carga la página por primera vez y no ha recibido ninguna acción del usuario. a:visited: establece la apariencia de los enlaces que han sido visitados por el usuario. www.redusers.com

41

01.qxp

13/10/2009

03:51 p.m.

PÆgina 42

1. DISEÑO DEL SITIO Y CSS

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 activa, 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 encuentran casi todas las opciones que ofrece CSS para un texto común, por ejemplo: 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 texto 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?

El estilo que definimos en el listado anterior puede incluirse en el encabezado del documento, entre las etiquetas <style type=”text/css”> y </style> o bien agregarse a una hoja de estilos independiente. En el ejemplo, podemos ver que, en primer lugar, definimos las características generales del texto —en este caso la fuente—, sus reemplazos posibles y el color que tendrá aplicado de manera predeterminada. En las siguientes líneas del código podemos apreciar cómo se especifica la forma en que se debe mostrar un enlace según su estado. Por ejemplo, en a:link, definimos el color que tendrá de manera predeterminada el link y, también, especificamos que no tendrá decoración, es decir que no se verá subrayado. Para los siguientes estados, definimos que cambie el color. Además, para a:hover (cuando el mouse está encima del enlace) indicamos que se muestre subrayado y para a:focus (cuando se hace foco en el enlace) especificamos que se muestre el texto inclinado, con el estilo italic.

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; } #imagenenlace a:hover img { border: 2px solid #d4d4d4; border-width: 2px 2px 2px; color: #CCCCCC; }

www.redusers.com

43

01.qxp

13/10/2009

03:51 p.m.

PÆgina 44

1. DISEÑO DEL SITIO Y CSS

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 código: <div id=”imagenenlace” align=”center”> <a href=”http://www.direcciondejemploweb.com/”><img alt=”Texto de la imagen” src=”img/imagen.jpg” longdesc=”Descripción de la imagen”/></a></p> </div>

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.

¿QUÉ ES LA WEB 2.0?

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 participació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 tecnologí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.

¿Qué aspectos deben considerarse para diseñar y establecer el formato de las tablas de un sitio?

Las tablas son elementos HTML que se crean a través de la etiqueta <table>. Para definir una fila, se utiliza <tr>, y <td> para crear una celda.

A las tablas, se les puede asignar un nombre y propiedades, como colores y bordes. A continuación, veremos un ejemplo de una tabla de países y ciudades. <table width=”400” id=”Tabla 1”> <tr> <td><b>País</b></td> <td><b>Ciudad</b></td> </tr> <tr> <td>Argentina</td> <td>Buenos Aires</td>

www.redusers.com

45

01.qxp

13/10/2009

03:51 p.m.

PÆgina 46

1. DISEÑO DEL SITIO Y CSS

</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.

Aplicar formato a una tabla En el ejemplo anterior, describimos cómo se forma una tabla y sus características básicas. Para enriquecer el aspecto de una tabla, se pueden aplicar propiedades de código HTML o agregar un estilo CSS, opción que nos puede ser útil para repetir el diseño en otras tablas de la página o del sitio.

Entre las características que se pueden establecer en una tabla, se encuentra su alineación y la de los elementos contenidos en sus celdas. También es posible definir estilos y grosores para sus bordes. Por último, existe la posibilidad de aplicar imágenes o colores a las celdas o a la tabla en su conjunto. Si deseamos establecer el color de la tabla, podemos hacerlo por medio de la propiedad bgcolor, dentro de la etiqueta <table>, por ejemplo: <table width=”400” border=”0” cellspacing=”0” bgcolor=”#000099” id=”Tabla 1”>

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?

La propiedad bgcolor también puede ser aplicada a una celda si la utilizamos con la etiqueta <td>. <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>

Figura 31. Cuando utilizamos una imagen de fondo para una celda o una tabla, debemos tener en cuenta sus dimensiones y colores para que no perjudique la lectura del texto mostrado.

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 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; }

Con table.paises, definimos las propiedades de la tabla y su contenido. Con table.paises td, definimos características específicas de las celdas, en este caso, las propiedades de sus bordes. www.redusers.com

47

01.qxp

13/10/2009

03:51 p.m.

PÆgina 48

1. DISEÑO DEL SITIO Y CSS

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.

¿Cómo es posible crear una capa y ubicarla dentro de otra?

El concepto de capas se ha extendido en el ámbito informático a diferentes tipos de aplicaciones. En lo que respecta específicamente al armado de una página web, las capas o divisiones permiten manejar elementos de una manera independiente. Uno de los aspectos más destacado de una capa es que puede ubicarse con precisión dentro de una página y, además, permite que se le asigne un estilo personalizado para definir su aspecto. También, se le pueden aplicar propiedades de visibilidad, grados de transparencia y orden como elemento en la página. La etiqueta que se utiliza para abrir una capa o división es <div>, mientras que con </div> se cierra.

En el ejemplo que vemos a continuación, ubicaremos una capa en una página y le aplicaremos una imagen de fondo. <div style=”position:absolute; top:0px; left:0px; width:750px; height:500px; background-image: url(img/fondo.jpg); background-repeat: norepeat”></div>

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

EDITORES DE CÓDIGO HTML VS. PROGRAMAS WYSIWYM Muchas personas ligadas a la programación prefieren editar páginas HTML con un editor de código. 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 trabajar 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

¿Cómo es posible crear una capa y ubicarla dentro de otra?

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 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 posición que adquiera la capa que lo contiene. Si deseamos mostrar 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.

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 continuación del otro, tal como lo definimos en el código que generamos. Si asignamos un valor relative, las coordenadas de los elementos se fijarán a partir de la posición que les correspondería por el flujo. Si optamos por utilizar absolute, podremos asignar una posición sin tener en cuenta cómo se encuentren ubicados los elementos en el flujo. Como vemos en el ejemplo, al tener en cuenta el contenedor, la posición se puede establecer con top y left, entre otras opciones.

En la práctica, deberemos decidir en qué casos es conveniente anidar capas y cuando tenerlas independientes. Una posibilidad muy útil es ordenarlas por medio de la opción 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 numérico que, al ser menor que el de otro, indicará que el elemento está más atrás. www.redusers.com

49

01.qxp

13/10/2009

03:51 p.m.

PÆgina 50

1. DISEÑO DEL SITIO Y CSS

Figura 34. La posibilidad de controlar el orden de las capas puede tener variadas aplicaciones, por tal motivo, es importante comprender cómo debe utilizarse z-index, porque puede ayudarnos a solucionar muchos problemas.

La alternativa de utilizar frames Si bien, hoy en día, está en auge la utilización de la etiqueta <div>, cabe recordar que también es posible mostrar páginas HTML dentro de otras, con la opción que ofrecen los marcos o frames. Con esta alternativa, se puede dividir la página en áreas o subventanas con un elemento contenedor que defina el conjunto con la etiqueta <frameset> y cada uno de sus marcos con <frame>. La ruta del documento que será incrustado se determina por medio del atributo src.

Figura 35. Los frames o marcos no son tan utilizados como hace algunos años en el diseño web, ya que existen otras alternativas que brindan mayor versatilidad.

50

www.redusers.com

01.qxp

13/10/2009

03:51 p.m.

PÆgina 51

¿Es posible mostrar una capa con una transparencia de fondo?

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 transparencia, entre otras opciones. La utilización de marcos puede presentar algunos problemas de compatibilidad con navegadores antiguos.

Figura 36. Para saber más sobre la utilización de frames, podemos ingresar en www.w3.org/TR/html401/present/frames.html.

¿Es posible mostrar una capa con una transparencia de fondo?

Como vimos en el punto 9, las capas pueden tener asignadas diferentes propiedades. Una alternativa que resulta de suma utilidad en el diseño de una página web consiste en asignarle, a uno o más elementos, un grado de transparencia, para permitir que se vea de manera parcial un fondo. A esta función es posible darle diversas aplicaciones prácticas, pero, al utilizarla, es importante contar con los elementos de la página ordenados con la función z-index, que ya hemos visto. Para utilizar esta opción con transparencias, si hay una imagen de fondo, debería tener el menor valor, luego le seguiría la capa transparente y, por último, la capa que debe quedar arriba, por ejemplo, un texto, como se muestra en la figura 34.

Otro aspecto importante es la elección del color que se aplicará a la capa y cómo se representa según el grado de transparencia que se le aplique. En primer lugar, definimos el estilo CSS para la capa; para ello, utilizamos las opciones que permitan que el efecto funcione en todos los navegadores. www.redusers.com

51

01.qxp

13/10/2009

03:51 p.m.

PÆgina 52

1. DISEÑO DEL SITIO Y CSS

#CapaTransparente { z-index: 2; background-color: black; opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; filter: alpha(opacity=30); }

La propiedad background-color define el color que se utilizará para la transparencia, en este caso, está asignado black (negro). Cuanto menor sea el valor aplicado a las propiedades de transparencia, menos opaco será el objeto. Por ejemplo, un elemento con opacidad 0, no será visible; por el contrario, si tiene las propiedades de opacidad en 1 (o 100 en el filtro alpha), en ese caso será totalmente opaco. A continuación, veremos las características de cada una de las propiedades utilizadas en el listado.

- 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 utilizan 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 normalmente la capa dentro del diseño de nuestra página. <DIV id= “Layer2” STYLE=”position:absolute; top:155px; left:200px; width:500px; height:378px;”></div>

LA TRANSPARENCIA DE LOS MATERIALES 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 manera definida lo que hay del otro lado.

52

www.redusers.com

01.qxp

13/10/2009

03:51 p.m.

PÆgina 53

¿Es posible mostrar una capa con una transparencia de fondo?

Figura 37. El efecto de transparencia es ideal para utilizarlo, por ejemplo, con una imagen de fondo y un texto encima. Siempre es conveniente que el texto tenga un tamaño y color que lo mantenga legible.

Debemos tener en cuenta que todo lo que se encuentre contenido dentro de la etiqueta <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 transparencia, 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.

Figura 38. Algunos navegadores, como Internet Explorer 6, pueden mostrar un alerta y bloquear el efecto de transparencias en páginas ubicadas en el equipo local. Al publicarlas en Internet, no se mostrará el mensaje. www.redusers.com

53

01.qxp

13/10/2009

03:51 p.m.

PÆgina 54

1. DISEÑO DEL SITIO Y CSS

¿En qué casos se recomienda diseñar una página con dimensiones fijas y cuándo, con porcentuales?

Hace algunos años, el estándar de monitores estaba dado por pantallas de 14”, que, por lo general, se configuran en resoluciones de 640x480 pixeles o en 800x600 pixeles. La llegada de los monitores de 17” impuso el estándar de 1024x768 pixeles, respetado por muchos sitios web hoy en día. Los nuevos monitores ya han superado la marca de las 17” y también el formato. Las dimensiones estándares de pantallas con relación 4:3 (como los televisores antiguos), están dando paso a los modelos wide screen de relación 16:9.

Figura 39. Las pantallas wide, como su nombre lo indica, son más anchas que las estándares (4:3), permiten mostrar un área similar a la que ofrece el cine, pero en dimensiones menores.

Estas características, sumadas a que, en la actualidad, se encuentran pantallas de 19”, 20”, 22”, entre otras alternativas, hace que exista una gran variedad de tamaños y, por ende, de resoluciones de pantalla, ya que cada una de estas opciones tiene asociada una resolución recomendada.

El dilema de tener que diseñar un sitio sin saber en qué pantalla será visualizado influye en el diseño que vamos a realizar. Quienes deciden inclinarse por un diseño con dimensiones fijas utilizan como unidad de medida el pixel. Para lograr mayor compatibilidad, se puede optar por diseñar en una medida de 800x600 pixeles, sin embargo, en la actualidad, cada vez más diseñadores toman como estándar la resolución 1024x768, impuesta por los monitores estándares de 17 pulgadas.

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 40. Si bien no es necesario contar con una placa de video de última generación para realizar un diseño web, es importante que esta nos permita visualizar la mayor cantidad de resoluciones posibles.

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.

Cualquiera sea la opción que tomemos en el diseño, es recomendable poner un color o una imagen de fondo que logre armonía con el sitio, ya que en las pantallas de más resolución se verá en mayor extensión, en especial hacia los costados. www.redusers.com

55

01.qxp

13/10/2009

03:51 p.m.

PÆgina 56

1. DISEÑO DEL SITIO Y CSS

Figura 42. Al visualizar un sitio en diferentes resoluciones de pantallas y versiones de navegadores, el fondo puede verse en algunos casos y en otros no, según la configuración del equipo.

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 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 porcentuales, 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 elementos pueden modificarse de tal forma que aparezcan movidos en la pantalla, 56

www.redusers.com

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 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 símbolo %, por ejemplo: width=”10%”.

Como veremos en el punto 13 de este capítulo, más allá de la decisión 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 diseño no lucirá de la mejor manera.

Figura 43. Si ingresamos en www.w3counter.com/globalstats.php, podremos conocer estadísticas actualizadas, mes por mes, sobre los navegadores y resoluciones de pantalla más utilizadas por los usuarios.

❘❘❘

01.qxp

¿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, 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

13/10/2009

03:51 p.m.

PÆgina 58

1. DISEÑO DEL SITIO Y CSS

¿Cuál es la mejor forma de establecer los márgenes de una página y sus elementos?

En la tabla 2 de este capítulo, cuando hablamos de atributos CSS, hicimos referencia a margin y a padding. El primer concepto se refiere al margen de un elemento y, como vimos, puede establecerse para cada uno de los lados (arriba, abajo, izquierda o derecha). Por otra parte, padding se utiliza para definir el espacio en el interior de un elemento y, también, se asigna a cada uno de los lados. Sus valores pueden estar expresados en porcentaje, pulgada o pixel. Muchas veces, estos dos conceptos suelen confundirse porque, en algunos diseños, ofrecen resultados similares; sin embargo, resulta relevante saber en qué casos es recomendable optar por uno o por otro.

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, veamos 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 entre 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á envuelto 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?

● MARGIN Y PADDING DE UN SITIO

GUÍA VISUAL

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.

¿Cómo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?

El problema de centrado de una página web es uno de los más frecuentes para un diseñador. Si recorremos sitios de Internet, y los visualizamos en diferentes resoluciones de pantalla -es diferente cuando comparamos monitores de proporciones 16:9 con los de 4:3-, descubriremos que, en muchas ocasiones, este problema no está resuelto de una forma adecuada para ser compatible con las necesidades de todos los usuarios. En este punto, analizaremos las soluciones posibles. www.redusers.com

59

01.qxp

13/10/2009

03:51 p.m.

PÆgina 60

1. DISEÑO DEL SITIO Y CSS

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 configuraciones 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, podremos 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 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 página (100%). Con las líneas margin: 0px auto; y text-align:center;, logramos que el contenido se muestre centrado en los navegadores más populares, como Internet Explorer y Mozilla Firefox.

Figura 46. Podemos ajustar de diferente manera los márgenes, según nuestras necesidades de diseño, pero lo fundamental es obtener un diseño centrado que se vera de manera adecuada en todos los navegadores. www.redusers.com

61

01.qxp

13/10/2009

03:51 p.m.

PÆgina 62

1. DISEÑO DEL SITIO Y CSS

¿Cuáles son las diferentes opciones de menús que se pueden crear al utilizar CSS? Los menús son elementos que, desde hace muchos años, se han ganado un importante lugar en el armado del entorno gráfico de las aplicaciones informáticas. Con el auge de Internet y la necesidad de brindarles a los usuarios una manera práctica y ordenada de acceder a la información, éstos se convirtieron en una herramienta muy importante a la hora de crear interfaces para sitios web.

De igual forma que ha ocurrido con las aplicaciones, los menús para sitios webs han evolucionado, tanto en las funcionalidades que pueden brindar, como también en el diseño que ofrecen para ser más atractivos al público.

Con los conceptos que aprendimos en el punto 7 de este capítulo, conocimos cómo aplicar diferentes opciones de estilos a un link. Así podemos darnos cuenta, que esos efectos son muy similares a los que se utilizan con frecuencia para crear un menú.

Como ya hemos explicado anteriormente, una de las ventajas del CSS consiste en permitir la separación de la estructura del diseño. Por este motivo, si creamos un menú HTML, pero basado su aspecto visual en estilos CSS, podremos realizar cambios de una manera más sencilla.

Diseñar un menú con estilos CSS a partir de una lista En este ejercicio, en primer lugar, crearemos el contenido del menú, utilizando las etiquetas de lista que ofrece HTML. El siguiente listado se ubicará dentro del cuerpo del documento en el lugar donde debe aparecer el menú. <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, simplemente, recurrimos a la etiqueta href, y la utilizamos de la forma que ya hemos visto.

Figura 47. Si visualizamos el ejemplo que preparamos en un navegador, veremos que aún el resultado está lejos de parecer un menú.

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 imagen 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

1. DISEÑO DEL SITIO Y CSS

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. 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 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, 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

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 color de fondo que tendrá el texto, es decir, el botón.

Figura 49. Cuando incorporamos el menú en nuestro sitio, debemos asegurarnos de que se integre de manera adecuada con el diseño.

Otras alternativas para crear un menú Crear un menú utilizando HTML y aplicando estilos con CSS tiene muchas ventajas, incluso de cara al posicionamiento de un sitio, como veremos en el capítulo 6. Pero también existen otras alternativas que nos brindan interesantes prestaciones, como por ejemplo, los menús creados con Flash o con código Javascript. Para quienes no conocen Flash, pero desean contar con una botonera,

❘❘❘

01.qxp

¿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 alojado en un servidor. En Internet, se utiliza para ubicar la dirección donde se encuentra un archivo, por ejemplo, una imagen o un documento HTML.

www.redusers.com

65

01.qxp

13/10/2009

03:51 p.m.

PÆgina 66

1. DISEÑO DEL SITIO Y CSS

pueden probar lo que ofrece el sitio http://flash-menu.net. Allí encontramos la posibilidad de descargar una herramienta para generar nuestro propio menú o para acceder al generador en línea que ofrece el sitio.

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.

Si buscamos alternativas con una mayor variedad de posibilidades, encontramos Flash Menu Labs, una aplicación que puede obtenerse en versión de prueba si ingresamos en su sitio web http://flashmenulabs.com.

Figura 51. En la sección Examples, podremos ver algunos ejemplos muy interesantes de las creaciones que es posible realizar con Flash Menu Labs.

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?

Otra opción atractiva que tenemos, es la posibilidad que ofrece Mootools, un framework de Javascript que brinda muchos efectos interesantes, entre ellos, varias opciones para utilizar en la creación de un menú.

Figura 52. Al ingresar en la sección Demo del sitio http://mootools.net/, podremos ver variadas opciones, como efecto acordeón o menús que se contraen.

... 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 adecuado para cada una. Trabajamos sobre los estilos que pueden aplicarse a los links para lograr 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 TEST DE AUTOEVALUACIÓN 1 Defina qué es HTML.

ACTIVIDADES PRÁCTICAS 1 Ayudado con una herramienta web o con la aplicación que elija, defina la paleta de co-

2 Indique las características principales

lores de su sitio.

de CSS. 2 Determine distintos efectos para los esta3 ¿Qué es la cabecera de un documento

dos de un link en una página.

HTML y qué se incluye en ella?

3 Aplique un fondo en una página y cree en4 ¿Cuáles son las ventajas que ofrece un editor WYSIWYM?

cima una capa con transparencias sobre la cual debe mostrar un texto.

5 ¿Qué fuentes deben utilizarse al diseñar

4 Centre el contenido de una página para que se vea de manera correcta en distintos na-

un sitio?

vegadores y configuraciones de pantalla.

6 ¿En qué casos es conveniente utilizar una 5 Cree un menú personalizado con la utiliza-

hoja de estilos externa?

ción de CSS. 7 ¿Cómo se le aplican estilos CSS a una tabla?

8 ¿Qué función cumple la etiqueta < div> en la estructura de un documento HTML? 9 ¿De qué forma se establecen dimensiones fijas en una página y en qué casos es recomendable?

10 ¿Qué diferencias hay entre padding y margin?

68

www.redusers.com

REDISEﾃ前 BOMBOS LIBROS - ISSU - Base Editable - Sep 10.indd 1

08/09/2010 15:54:03