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.
¿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
Permite establecer el tipo de documento.
Indica el inicio del código HTML.
Establece el comienzo del encabezado del documento.
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.
Permite vincular iconos o archivos externos, como por ejemplo hojas de estilo. Se define dentro del encabezado.
El listado del ejemplo debe incorporarse en la cabecera del documento, después de la etiqueta y antes de . 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 . Para aplicar la clase creada a un párrafo, debemos escribir:
Texto del párrafo
. Esta opción también puede ser aplicada a otras etiquetas, como por ejemplo a . 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:
Texto del párrafo
En este caso, definimos los estilos dentro de la etiqueta párrafo (
) 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:
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. Contacto
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 y se cierra con . 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 y , es el texto que muestra el navegador, es decir lo que se imprime en pantalla. Si deseamos utilizar una imagen con enlace, en lugar de un texto, debemos escribir el siguiente código:
Como vemos, la estructura es similar. Con la etiqueta img src, se debe definir el nombre y la ruta de la imagen que deseamos que se vea en lugar del enlace. Las 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 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:
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
. Para definir una fila, se utiliza
, y
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.
País
Ciudad
Argentina
Buenos Aires
www.redusers.com
45
01.qxp
13/10/2009
03:51 p.m.
PÆgina 46
1. DISEÑO DEL SITIO Y CSS
Paraguay
Asunción
Uruguay
Montevideo
Como vimos, la tabla se abre con la etiqueta
y se cierra con
. 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
, por ejemplo:
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
.
País
Si lo que deseamos es aplicar una imagen, tanto a la etiqueta
como a
, podemos agregarle la propiedad background e indicar la ruta del archivo de imagen y su nombre, como vemos en el siguiente ejemplo:
País
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
, mientras que con
se cierra. En el ejemplo que vemos a continuación, ubicaremos una capa en una página y le aplicaremos una imagen de fondo.
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 .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
. 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
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
, 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