Revist Users Webmaster Profesional PDF

por Damin De Luca
CONCTESE CON LOS MEJORES
LIBROS DE COMPUTACIN
usershop.redusers.com
CREACIN, EXPANSIN Y MONETIZACIN DE BLOGS

MANUALES USERS I 352 pginas I ISBN 978-987-1347-96-4
ESTRATEGIAS PARA POSICIONAR SU NEGOCIO EN LA WEB

PROFESSIONAL TOOLS I 288 pginas I ISBN 978-987-1347-82-7
PREVENGA Y SOLUCIONE LOS DELITOS INFORMTICOS MS PELIGROSOS
APRENDA CMO ARMAR REDES SIN CONCIMIENTOS PREVIOS

200 RESPUESTAS I 320 pginas I ISBN 978-987-1347-86-5
MANUALES USERS I 352 pginas I ISBN 978-987-663-008-5
Webmaster profesional
Captulo
Diseo del sitio y CSS

Para comenzar a dar respuesta a las dudas y problemas ms frecuentes que enfrenta un diseador o un desarrollador de sitios web, en el primer captulo de este libro, abordaremos las soluciones relacionadas con el diseo del sitio, trabajo con tablas, utilizacin de capas, creacin de diferentes tipos de mens y aplicacin de estilos CSS.
SERVICIO DE ATENCIN AL LECTOR: usershop@redusers.com
Cules son las diferencias y ventajas de la utilizacin de HTML, XHTML y CSS? 14 Qu aplicaciones pagas y gratuitas existen para disear y administrar un sitio web? 19 Qu herramientas nos ayudan a elegir la paleta de colores para un sitio? 24 Qu tipografas pueden utilizarse en el diseo de un sitio web y cules son las recomendadas? 28 Cmo visualizar los sitios que no muestran los caracteres de manera correcta? 30 Cmo se pueden definir estilos de texto para todas las pginas de un sitio? 33 Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio? 39 Qu aspectos deben considerarse para disear y establecer el formato de las tablas de un sitio? 45 Cmo 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 disear una pgina con dimensiones fijas y cundo, con porcentuales? 54 Cul es la mejor forma de establecer los mrgenes de una pgina y sus elementos? 58 Cmo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla? 59 Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS? 62 Resumen 67 Actividades 68
1. DISEO DEL SITIO Y CSS
Cules son las diferencias y ventajas de la utilizacin de HTML, XHTML y CSS?

Para lograr comprender cmo funciona Internet y las tecnologas que conviven en su infinita telaraa, es importante conocer su evolucin; nace como un proyecto militar denominado ARPANET. Este desarrollo se concreta en 1969, ao en el cual se produce la primera transmisin por esta va. A principios de la dcada del setenta, cuando an la conectividad era muy rudimentaria, Ray Tomlinson crea el correo electrnico, una invencin que, renovaciones mediante, se mantiene vigente hasta nuestros das. Hacia fines de la dcada del ochenta, Internet logra su punto de inflexin, cuando se crea lo que conocemos como World Wide Web o WWW.
Figura 1. La entidad que determina los estndares que se utilizan en la Web, World Wide Web, es conocida como W3C (World Wide Web Consortium) y se encuentra en la direccin www.w3.org.
HTML
Con la llegada de la World Wide Web, fue fundamental contar con un lenguaje que se transformara en un estndar en la construccin de pginas web. A principios de la dcada del noventa, nace el HyperText Markup Language, nombre que podra traducirse como lenguaje de marcado (o etiquetado) de hipertexto, HTML. An hoy es la base de las pginas web que vemos en Internet, potenciado con las ventajas que ofrecen las nuevas tecnologas. HTML utiliza etiquetas que permiten enriquecer o agregar contenido adicional,
14 www.redusers.com
al estructurar texto y otros elementos que conoceremos ms adelante. Cabe destacar que no es un lenguaje de programacin ya que, entre otras cosas, no puede ofrecer las funciones y el trabajo con variables, que s brindan los lenguajes de programacin. La ventaja del HTML es su versatilidad para trabajar con distintos lenguajes y tecnologas. Por eso, a pesar de sus limitaciones, mantiene su importancia en el armado de sitios web. Dentro de un documento HTML, se puede agregar cdigo de lenguajes, como por ejemplo Javascript. Tambin, es posible incluir etiquetas para mostrar imgenes, hipervnculos, pelculas Flash o reproductores multimedia. Por otra parte, los desarrolladores que trabajan con PHP, ASP o .NET tienen la posibilidad de incluir fragmentos de cdigo HTML dentro de la programacin, 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 captulo 3 de este libro, analizaremos la compatibilidad de un sitio con estos.
Figura 2. La mayora de los navegadores modernos ofrecen una opcin para mostrar el cdigo fuente de las pginas web.
El lenguaje HTML ha evolucionado a travs de los aos y es identificado por versiones. Su revisin actual es la 4.01, que fue dada a conocer en el ao 1999. HTML5 an est en desarrollo. En la tabla 1, veremos las etiquetas ms importantes de este lenguaje.
www.redusers.com 15
ETIQUETA HTML <!DOCTYPE> <html> <head> <title>
DESCRIPCIN DE SU FUNCIN4 Permite establecer el tipo de documento. Indica el inicio del cdigo HTML. Establece el comienzo del encabezado del documento. Se incluye dentro de la cabecera y sirve para indicar el ttulo del documento. Por lo general, este dato puede verse reflejado en la barra de ttulo del navegador al acceder a una pgina.
<link> <style> <script> <body> <h1> <h2> <h3> <h4> <h5> <h6> <p> <blockquote> <br> <a> <table> <div> <frame>
Permite vincular iconos o archivos externos, como por ejemplo hojas de estilo. Se define dentro del encabezado. Se utiliza para definir los estilos CSS y cdigos Javascript que se incluyen dentro del documento. Se ubica dentro del encabezado. Esta etiqueta se utiliza con el fin de incorporar un cdigo script. Indica el comienzo del cuerpo del documento y envuelve el contenido que se muestra en la ventana del navegador. Estas etiquetas, que se utilizan dentro del cuerpo del documento, permiten definir los distintos niveles de ttulo que admite el estndar HTML. <h1> es el de mayor importancia, y <h6>, el de menor jerarqua.
Define un prrafo. Mediante esta etiqueta, es posible asignar una sangra al texto. Con esta opcin, se agrega una lnea en blanco en el flujo. Acta como si fuera creada con Enter en un procesador de texto. Permite definir la direccin de un enlace y el texto que ste muestra en pantalla, entre otras opciones. Posibilita definir una tabla. Dentro de ella, se utiliza <tr> para crear una fila y <td> para una celda. Envuelve el rea de un contenido. Se utiliza para la construccin de capas. 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> <img> <b>
Envuelve los elementos de un formulario. Esta etiqueta es utilizada para mostrar una imagen en pantalla. Se utiliza para envolver texto en negrita o bold. En la actualidad, se extiende la opcin 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> <u>
Se utiliza para envolver texto en itlica o cursiva. Se emplea para envolver texto subrayado.
Tabla 1. Cdigo de las etiquetas HTML ms importantes y descripcin de su funcin.

16 www.redusers.com
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 gua de XML en castellano, publicada por la oficina espaola de W3C.
El trmino en ingls eXtensible Hypertext Markup Language es un estndar conocido como XHTML y cuya traduccin 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 formacin de los documentos, tal como lo establecen las reglas del XML.
ASP es una tecnologa que fue creada por Microsoft. Permite el desarrollo de pginas web que son procesadas e interpretadas por un servidor que devuelve un resultado al cliente, para ser visualizado en el navegador. ASP significa Active Server Pages, que en castellano puede traducirse como pginas activas de servidor.
QU ES ASP?
www.redusers.com
17
CSS
Uno de los conceptos que ha crecido de manera notable en el mundo del diseo web, es la utilizacin de hojas de estilo (Cascading Style Sheets) conocidas como CSS. Las caractersticas que ofrece CSS resultan muy prcticas para el armado de un sitio, ya que permiten realizar una separacin entre lo que es la estructura del contenido y la forma de representarlo en la pantalla. Es importante destacar que, si bien algunas de las caractersticas que ofrece CSS tambin pueden lograrse mediante HTML, CSS ofrece una mayor cantidad de efectos y opciones para personalizar textos y elementos en general, lo que representa otra de las ventajas de integrar esta opcin en el diseo de las pginas o de un sitio web. Por sus caractersticas, CSS puede incorporarse en un documento HTML o XHTML, o bien incluirse como un archivo aparte. Existen dos formas de incorporar CSS en un documento HTML. La primera consiste en declarar los estilos y sus caractersticas en la cabecera del documento (entre las etiquetas <head> y </head>). Esta opcin puede ser til para definir los estilos que tendr slo una pgina en particular y no sern utilizados en otras. La segunda alternativa es incluir los estilos y sus propiedades dentro del cuerpo del HTML, es decir dentro de las etiquetas <body> y </body>. Se recomienda desestimar el uso de esta opcin, ya que no colabora con la separacin de la estructura, debido a que no permite tener todos los estilos en un solo lugar para ser modificados. Para trabajar con estilos en un sitio, en especial cuando se utilizan en varias pginas o se procede a integrarlos con lenguajes de programacin, es recomendable colocar los estilos en un archivo especfico, tal como veremos en el punto 6 de este captulo.
Figura 4. Algunos navegadores, como Internet Explorer o Mozilla Firefox, permiten desactivar los estilos de un sitio para lograr una visualizacin de l sin tener esta caracterstica habilitada.
18 www.redusers.com
Qu aplicaciones pagas y gratuitas existen para disear y administrar un sitio web?

Si contamos con el suficiente conocimiento de HTML, la creacin de una pgina web puede llevarse a cabo con un simple editor de texto, como puede ser el Bloc de notas de Windows. En este caso, slo debemos escribir el cdigo que deseamos utilizar y guardar el archivo con extensin HTM o HTML. Estas aplicaciones que permiten editar texto plano, son suficientes para crear una pgina web. Si bien esta afirmacin es vlida, hay que tener en cuenta que, para afrontar desarrollos de mayor complejidad, esta alternativa no nos ofrece demasiada ayuda. La eleccin 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 nmero de opciones que tiene la aplicacin. Si nuestro deseo es trabajar con cdigo, para luego probarlo en un navegador, una opcin que nos ayudar en gran medida consiste en buscar un editor que reconozca las etiquetas HTML y nos ofrezca ayuda en su creacin. Dentro de esta gama de aplicaciones, encontraremos software gratuito que permite editar cdigo. UltraEdit es un potente editor de cdigo capaz de trabajar con XHTML, HTML, PHP, Java, Javascript y Perl, entre otros lenguajes. Permite indentado automtico, Drag & drop y chequeo de palabras mientras se escribe, entre otras opciones. Se puede obtener una versin trial desde www.ultraedit.com/ downloads/ultraedit_download.html.
Figura 5. Las caractersticas de UltraEdit lo ubican como una excelente opcin tanto para el uso personal como profesional.
www.redusers.com 19
PSPad es un editor que cuenta con una licencia freeware y es apto para correr en sistemas Windows. Reconoce sintaxis de diferentes lenguajes, y las resalta con color. Entre los lenguajes soportados, se encuentran HTML, XHTML, PHP, Perl, VBScript, Java y JavaScript, entre otros. Para descargar los archivos relacionados con este programa, debemos acceder a www.pspad.com/es/download.php. La opcin de trabajar con editores resulta muy til para quienes tienen experiencia en programacin o si se necesita realizar ajustes puntuales. Sin embargo, para los diseadores web, armar un sitio desde lnea de cdigo puede resultar poco amigable. Como respuesta a este problema, se adopt el concepto WYSIWYM para aplicaciones de edicin de pginas web. Estas siglas, que en ingls significan What You See Is What You Mean, hacen referencia a que lo que se ve en pantalla es lo que se obtiene como resultado. Este modelo, mucho ms visual que el ofrecido por un editor de cdigo, es el que se impone hoy por hoy en el mundo del diseo web. La tendencia actual tambin marca que cada vez son ms los programas de este tipo que permiten trabajar en tiempo real con la vista simulada y la lnea de cdigo, para brindarle mayor versatilidad al usuario.
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 (cdigo abierto) que puede trabajar con XHTML y CSS, adems de integrarse con ASP, PHP y Javascript. Al ser una alternativa open source, soporta la inclusin de plugins, skins y es adaptable en su totalidad a las necesidades del desarrollador. Para descargarlo, hay que ingresar en www.wymeditor.org/download. KompoZer es otra aplicacin libre que permite la edicin de pginas HTML. Presenta gran facilidad de uso y puede ser manejado por todo tipo de usuarios que deseen armar un sitio web.
PHP es un lenguaje de programacin de pginas dinmicas muy difundido en Internet, cuya primera versin fue lanzada a mediados de la dcada del noventa. Las pginas desarrolladas en PHP se alojan en servidores web que interpretan el cdigo ante un requerimiento del usuario, para poder ofrecer el resultado en un navegador.
20
QU ES PHP?
www.redusers.com
Figura 6. KompoZer es una aplicacin 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 ao 1997. A raz del xito alcanzado por sus versiones posteriores, Adobe adquiri los derechos del programa y es esta empresa la que, en la actualidad, tiene en sus manos el desarrollo del producto. La versin CS4 de este software fue lanzada en septiembre de 2008. Entre las principales ventajas que ofrece Dreamweaver, se destaca su alto grado de personalizacin en las vistas, el agregado de nuevas funcionalidades, vista de cdigo con marcado y ayuda de sintaxis.
Figura 7. Dreamweaver permite editar y crear archivos que utilizan cdigo HTML, XML, ASP, PHP, CSS y JavaScript, entre otras opciones.
www.redusers.com 21
Adems de sus caractersticas como editor, Dreamweaver ofrece una completa respuesta para administracin: permite tanto definir distintos sitios como trabajar con ellos, subir y descargar archivos, sin olvidar la ventaja de sincronizar la informacin entre el equipo local y el servidor. Dreamweaver es un software pago que funciona en Windows XP (SP2 o superior), Windows Vista y tambin en sistemas Mac OS X. Este producto se puede conseguir dentro de las suites de diseo comercializadas por Adobe o bien es posible descargarlo, en una versin 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 ms destacados.
Para realizar la descarga de Dreamweaver o de cualquiera de los otros productos ofrecidos como demostracin, 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 aplicacin a travs de la cual Microsoft brinda una alternativa para el diseo de sitios web. Ofrece un entorno de trabajo basado en el concepto WYSIWYM, agrega la opcin de trabajo en lnea de cdigo y tiene la capacidad de trabajar con los estndares ms 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
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 botn Evaluar, correspondiente al producto elegido.
<oXygen/>
Con <oXygen/> podemos acceder a una plataforma de edicin y creacin de pginas XML, HTML y XHTML. Ofrece una interfaz visual WYSIWYG y la posibilidad de editar y validar cdigo. Este producto cuenta con dos versiones: <oXygen/> XML Editor y <oXygen/> XML Author. Para acceder a la descarga de una versin de evaluacin, hay que ingresar en www.oxygenxml.com/download.html.
Figura 10. <oXygen/> ofrece opciones muy completas para trabajar con desarrollos web, tanto para crear y editar archivos, como para manejar proyectos.
www.redusers.com 23
Qu herramientas nos ayudan a elegir la paleta de colores para un sitio?

Aunque para muchos parezca una tarea trivial, la eleccin 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 eleccin puede deslucir de manera considerable el resultado final. Es parte clave del trabajo de un buen diseador poder captar la esencia de un sitio, para plasmarla en la combinacin de colores que mejor se adapte al estilo concordante con los contenidos que se desean transmitir.
Cmo transmitir sensaciones a travs de los colores

Adems de su funcin esttica, los colores permiten transmitir sensaciones. Una posible separacin que se puede hacer entre ellos, es ubicarlos como clidos o fros. Los colores clidos son los que transmiten un clima ntimo y cercano. Tambin pueden dar una sensacin de pasin y calidez. Dentro de esta clasificacin 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 fros 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 ms apagados. Para dar un ejemplo de esto, se dice que son algunos metales, fuertemente identificados con el fro, los que suelen tomar estos colores como base. Al elegir un color, se debe tener muy presente su tonalidad, luminosidad y saturacin, para ubicarlo en el lugar apropiado y mantener la armona del diseo.
Colores RGB
Para determinar los colores de un sitio web, es fundamental tener en cuenta que el resultado de nuestro diseo ser visto en una pantalla, ya sea un monitor o bien la de un dispositivo mvil. Por tal motivo, la eleccin de colores debe realizarse sobre la base de una composicin RGB. En HTML, los colores RGB pueden ser representados en modo hexadecimal con el smbolo # antepuesto. Por
FRONTPAGE
Frontpage es un editor de pginas web, cuyo desarrollo estuvo en manos de Microsoft a partir de mediados de la dcada del noventa. Logr cierta popularidad en aquellos aos, acompaado por el crecimiento que Internet adquira en todo el mundo. En la actualidad, se ha discontinuado y cedi su lugar a Expression Web.
24
www.redusers.com
ejemplo, el color rojo se representa como #ff0000 y el amarillo como #ffff00. Color Cop es una aplicacin libre que permite obtener el valor de colores que despus se puede utilizar en el desarrollo de pginas web o en otras aplicaciones. Al ingresar en la direccin del sitio: http://colorcop.net/download, tenemos la posibilidad de descargar el software para su utilizacin.
Figura 11. Para quienes utilizan editores web del tipo WYSIWYM, como Dreamweaver, la eleccin de un color resulta mucho ms sencilla, ya que el programa ofrece una paleta a la vista para elegir el tono deseado.
Sitios web para elegir paletas de colores

COLOURlovers es un sitio web que brinda la posibilidad de elegir colores, paletas y diseos de patrones (patterns). Este espacio se nutre por la contribucin 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 pgina principal, se puede acceder a las ltimas novedades subidas por los usuarios, calificar y dejar comentarios, entre otras opciones.
www.redusers.com 25
Color Combos es una alternativa que nos permite crear nuestra propia paleta de colores. Entre otras opciones, se encuentra la posibilidad de acceder a las paletas subidas por los usuarios que desean compartir sus combinaciones. Para potenciar esta alternativa, podemos suscribirnos al RSS del sitio y, de esta forma, estar al tanto de las actualizaciones que se producen en la pgina. Si lo deseamos, tambin contamos con la opcin de ingresar una direccin URL para conocer la paleta de colores utilizada. Para acceder a este beneficio, ingresamos al sitio web en www.colorcombos.com.
Figura 13. Color Combos ofrece una buena variedad de paletas, permite realizar bsquedas personalizadas y brinda muchas facilidades, pero slo se ofrece en ingls.
Aplicaciones para elegir paletas de colores

ColorSchemer Studio es una aplicacin 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 versin de evaluacin desde www.colorschemer.com.
Se conoce como RGB a la combinacin que se forma con los colores de luz primarios: rojo, verde y azul. Un ejemplo de esto es la pantalla de un monitor o de un televisor. Por su parte, CMYK es la combinacin que se logra al combinar en impresin los colores cian, magenta, amarillo y negro; las impresoras utilizan este sistema.
26
DIFERENCIAS ENTRE RGB Y CMYK
www.redusers.com
Figura 14. Existe una versin para utilizar en lnea, llamada Color Schemer Online, a la que se puede acceder desde la direccin web www.colorschemer.com/online.html.
Otra alternativa que tenemos a nuestro alcance se llama colorbrowser. Su funcin principal es ayudarnos con la organizacin y la edicin de paletas de colores. Ofrece varias opciones de exportacin, y se puede acceder a la pgina principal del proyecto ingresando en http://code.google.com/p/colorbrowser.
Figura 15. Colorbrowser es una aplicacin sencilla de tecnologa Adobe AIR que puede ser til para aquellas personas que necesitan trabajar con paletas de colores.
www.redusers.com 27
Qu tipografas pueden utilizarse en el diseo de un sitio web y cules son las recomendadas?
Al disear un sitio web, no se puede dejar de contemplar las tipografas que se utilizarn en su creacin. 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 tipografas, 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 diseo grfico. En consecuencia, al abordar el diseo 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 estn instaladas en Windows, podemos acceder a ellas a travs del Panel de Control/Apariencia y personalizacin/Fuentes.
Desde hace unos aos, se ha popularizado el concepto de fuentes seguras para utilizar en sitios web, al que, en idioma ingls, 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 ms 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 caractersticas. Dentro de este concepto, se pueden sealar las fuentes serif, que son aquellas que cuentan con algn 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
Qu tipografas pueden utilizarse en el diseo de un sitio web y cules son las recomendadas?
Por el contrario, las tipografas que se identifican como sans serif son las que no presentan este remate, en este grupo se incluyen Arial y Verdana, entre otras.
Figura 17. Para comprender claramente las diferencias entre una fuente serif y una sans serif, basta realizar una comparacin visual entre ellas, en la pantalla de la computadora o en un papel.
Es importante sealar que se pueden marcar otras divisiones entre tipografas. Por ejemplo, la letra Courier presenta caractersticas que la definen como serif, por su terminacin, pero adems es monoespaciada. Esta especificidad hace que cada uno de los caracteres, escritos con tipografa Courier, ocupe el mismo espacio. La mayora de las tipografas no utilizan esta caracterstica. Por ejemplo, en un texto escrito con Verdana, la letra i ocupa menos lugar que la m.
Fuentes y reemplazos
Una ventaja que presenta el lenguaje HTML es la posibilidad de establecer fuentes de reemplazo, en caso de que una tipografa no se encuentre en el sistema, como en el ejemplo que se muestra a continuacin.
<font face=Arial, Helvetica, sans-serif>Texto de prueba</font>
La etiqueta <font> debe estar contenida dentro del cuerpo del documento, es decir despus de <body> y antes de </body>. Su funcin es definir las caractersticas del texto. A travs de la propiedad face, podemos establecer la tipografa con la que se mostrar el texto y sus posibles reemplazos. Como vimos en el ejemplo
www.redusers.com 29
anterior, adems de las fuentes de reemplazo se puede indicar la familia. Otras propiedades que es posible aplicar a <font> son size (tamao de la fuente) y color (color de la fuente). Como podremos ver en el punto 6 de este captulo, tambin se puede establecer una fuente y sus propiedades por medio de CSS.
Fuentes en imgenes y animaciones

Para resolver las situaciones en las que es imprescindible utilizar una tipografa determinada, por ejemplo, para crear un logotipo, se puede recurrir a la incorporacin de una imagen, generada con un programa de creacin y edicin, como por ejemplo Adobe Photoshop o Gimp. De igual forma, se puede proceder para una animacin, 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 diseadores web. Cabe destacar que las tipografas empleadas al generar una pelcula 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 diseador.
Cmo 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 fenmeno global que abarca a personas de todo el mundo. Este suceso comunicacional y cultural tambin implica una enorme cantidad de contenidos escritos en muchos idiomas y dialectos. Los sistemas operativos en castellano estn preparados para visualizar juegos de caracteres de los lenguajes que comparten la misma codificacin, pero pueden requerir la instalacin de paquetes adicionales para otros lenguajes, como el rabe o el chino. Por esta causa, un navegador en espaol puede ver sin problemas pginas escritas en ingls 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.
Las fuentes TrueType conforman un estndar entre las tipografas. Su uso se encuentra muy extendido en sistemas Windows, Mac OS y Linux. Se pueden instalar de manera sencilla y existe una importante cantidad de familias disponibles para descargar a travs de Internet, tanto en forma gratuita como arancelada.
30
QU SON LAS FUENTES TRUETYPE?
www.redusers.com
Cmo visualizar los sitios que no muestran los caracteres de manera correcta?
Figura 18. Si nuestro sistema no cuenta con los paquetes de fuentes y configuracin adecuada, el contenido en otros idiomas no ser visto de manera correcta.
Para que el navegador tenga la informacin necesaria de cmo debe mostrar una pgina, existen etiquetas especficas que permiten dar informacin sobre el tipo de documento, el idioma y el juego de caracteres que se necesita utilizar. Se recomienda tener muy presente esta opcin, para lograr una mejor compatibilidad con todos los navegadores del mercado y, adems, para colaborar con el trabajo de rastreo de los buscadores de Internet. Algunos programas, como Dreamweaver, pueden introducir el cdigo inicial de manera predeterminada.
Figura 19. Quienes utilizan Dreamweaver como editor, cuentan con una opcin para definir la codificacin y otras caractersticas del documento HTML.
Si debemos iniciar un documento desde cero, por nuestros propios medios, el cdigo por ingresar al comienzo es el siguiente:
www.redusers.com 31
<!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 codificacin de la pgina, cabe destacar que existen atributos especficos de idioma y regin que se pueden aplicar a la etiqueta <HTML>. Para indicar que un documento est escrito en espaol, se debe escribir de siguiente :
<html lang=es>
Si se desea aclarar el idioma y el pas, o regin, se deben escribir las letras que lo identifican, separadas por un guin. Por ejemplo, para especificar el idioma ingls y el pas Estados Unidos, hay que escribir:
<html lang=en-US>
Si el problema persiste en algunos equipos puntuales, se puede recomendar al usuario que verifique la configuracin de su navegador. En el caso de Internet Explorer, debe ir al men Ver/Codificacin o en Mozilla Firefox a Ver/Codificacin de caracteres. Por defecto, en ambos casos, debera estar seleccionada la opcin Unicode.
Figura 20. Si en pginas de uso frecuente se visualizan de manera incorrecta algunos caracteres, es muy probable que est mal configurada la codificacin del navegador.
32 www.redusers.com
Cmo se pueden definir estilos de texto para todas las pginas de un sitio?
Como hemos visto antes, las tipografas de un sitio son parte de su identidad. Desde un punto de vista esttico y para mantener homogeneidad entre las pginas que lo componen, es importante definir desde el comienzo los estilos de texto que se utilizarn.
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
Una de las grandes ventajas que nos ofrece la utilizacin de CSS es la posibilidad de definir estilos de texto, que podrn ser incorporados en las pginas que componen el sitio. Otro de los puntos positivos, que nos brinda trabajar con esta modalidad, es que resulta mucho ms sencilla cualquier modificacin ya que, al cambiar las propiedades del estilo, stas se aplicarn a los textos de todas las pginas vinculadas. En la tabla que veremos a continuacin, analizaremos las principales propiedades que se pueden aplicar por medio de CSS, tanto para texto como para otros elementos.
PROPIEDAD color DESCRIPCIN Permite establecer un color. VALORES4 Puede recibir valores RGB o el nombre del color en ingls. Por ejemplo: color: #000099; color: blue; font-family Se utiliza para definir la familia tipogrfica. Se pueden indicar nombres de fuentes o de familias. Es posible indicar ms de un valor, separado por coma. Por ejemplo: font-family: Arial, sans-serif; font-size Permite definir el tamao de una fuente. Puede recibir un valor numrico o el tamao escrito en ingls. 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 nmero entre 100 y 900 (de cien en cien). Por ejemplo: Font-weight: 700; font-style Permite establecer el estilo de fuente. text-decoration Permite definir si un texto tendr subrayado o se ver tachado. text-transform Se utiliza para hacer que el texto tenga la primera letra en maysculas (letra capital), todas las letras en maysculas o todo en minsculas. line-height Es un atributo que permite establecer el interlineado, definiendo el alto de la lnea. Puede recibir el valor normal o uno numrico. Por ejemplo: line-height: 10px; Se le puede aplicar un valor normal, oblique o italic. Por ejemplo: font-style: italic; Puede tener un valor none, underline, overline o line-through. Por ejemplo: text-decoration: underline; Se le puede asignar capitalize, uppercase, lowercase o none. Por ejemplo, para todo el texto en maysculas: text-transform: uppercase;
34
www.redusers.com
PROPIEDAD text-align text-indent
DESCRIPCIN
VALORES4 o justify. Por ejemplo: text-align: left;
Se utiliza para alinear el texto. Se le puede aplicar un valor left, right, center Permite establecer un indentado. Se puede asignar un valor numrico expresado en pixeles o pulgadas. Por ejemplo: text-indent: 15px; text-indent: 4in;
background-color
Ofrece la posibilidad de asignar un color de fondo a un elemento.
Puede recibir valores RGB o el nombre del color en ingls. Por ejemplo: color: #FF0000; color: red; Se debe asignar el nombre y la ruta donde se encuentra alojada la imagen. Por ejemplo: background-image: url(http://www.misitio.com/imagne.jpg) Puede utilizarse para izquierda (margin-left), derecha (margin-right), abajo (margin-bottom) y arriba (margin-top). Se le asignan valores numricos que pueden estar expresados en pixeles, pulgadas o porcentajes. Por ejemplo: margin-top: 8px;
background-image
Se utiliza para establecer una imagen de fondo para un elemento.
margin
Permite asignar un margen para un elemento.
padding
Se utiliza para indicar el espacio entre un elemento y su interior.
Puede utilizarse para izquierda (padding-left), derecha (padding-right), abajo (padding-bottom) y arriba (padding-top). Se le asignan valores numricos que pueden estar expresados en pixeles, pulgadas o porcentajes. Por ejemplo: padding-right: 1in;
border-color
Permite establecer el color del borde de un elemento.
Puede recibir valores RGB o el nombre del color en ingls. Por ejemplo: color: #33CC33; color: green;
border-style
Se emplea para definir el estilo de un borde.
Se le puede asignar un valor none, dotted, solid, double, groove, ridge, outset o inset. Por ejemplo: border-style: none;
border-width
Permite asignar un ancho a un borde.
Se le asignan valores numricos que pueden estar expresados en pixeles o en pulgadas. Por ejemplo: border-width: 2px;
Tabla 2. Tabla de los atributos ms utilizados en CSS, descripcin de su uso y valores que pueden recibir.
www.redusers.com 35
Figura 22. Si ingresamos en www.w3.org/Style/CSS, podremos obtener informacin y novedades sobre Cascading Style Sheets (CSS).
Hojas de estilo dentro del documento HTML

Al hablar de las caractersticas de CSS, en el punto 1 del presente captulo, 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 sern vlidos slo para el documento en cuestin. A continuacin, 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, despus de la etiqueta <head> y antes de </head>. En este caso, definimos una clase de texto al especificar la familia de fuentes, el tamao, el estilo y su color. Como podemos ver,
36 www.redusers.com
para incluir los estilos, en la cabecera escribimos <style type=text/css>. Al finalizar todo el cdigo CSS que deseamos incluir en el documento, cerramos con </style>. Para aplicar la clase creada a un prrafo, debemos escribir: <p class=miestilo>Texto del prrafo</p>. Esta opcin tambin 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 prrafo, sin declararlo en la cabecera, deberamos proceder de la siguiente forma:
<p style=font-family: Times New Roman, Times, serif; font-size:12px; fontstyle: italic; color: #000066;> Texto del prrafo</p>
En este caso, definimos los estilos dentro de la etiqueta prrafo (<p>) y separamos las propiedades con ;. Si bien en el ejemplo tenemos todo en un mismo lugar, en este caso, perdemos las ventajas de abstraccin del diseo, que brinda CSS, debido a que el contenido y la apariencia quedan en un mismo lugar. Adems, en un archivo ms extenso, declarar los estilos dentro del cuerpo del texto hace ms engorrosa la lectura del cdigo al quitarle claridad. Otro aspecto que debemos remarcar es que tambin es posible agregarle propiedades a un selector existente. Por ejemplo, si deseamos que todos los encabezados de mximo nivel de una pgina sean de color azul, podramos declarar lo siguiente en la seccin destinada para CSS en el encabezado del documento.
h1 { color: blue; }
Con estas lneas, definimos el color para los Encabezados 1 del HTML, pero tambin podramos definir otras propiedades relativas a la forma en que se representa el texto en pantalla. Este ejemplo tambin podra realizarse con la aplicacin del concepto de clase, como ya hemos visto.
HISTORIA DEL CSS

Si bien su historia podra remontarse un poco ms en el tiempo, fue en el mes de diciembre de 1996 cuando tuvo su primera revisin el nivel 1 de CSS, tambin conocido como CSS1. Esta fecha podra marcarse como su lanzamiento pblico. CSS2 aparece en mayo de 1998. Por su parte, CSS3 se mantiene en desarrollo y algunos navegadores ya son compatibles con sus caractersticas
www.redusers.com
37
Figura 23. Al ingresar en http://jigsaw.w3.org/css-validator, accedemos a un validador de cdigo CSS que ofrece un completo informe de los problemas que se pueden encontrar en los archivos analizados.
Hojas de estilo externas

La utilizacin de estilos en archivos externos a los documentos HTML es una opcin que ofrece muchas ventajas, porque nos permite manejar todos los estilos de un sitio de manera independiente. Esta alternativa nos ofrece una mejor diferenciacin entre el contenido y la forma en que se muestra en pantalla. La opcin 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 extensin .CSS y estn conformados por una estructura muy simple, ya que en ellos slo se deben incluir los estilos de texto que se utilizarn, de la misma forma que si lo hiciramos en el encabezado. Se pueden crear con un editor que reconozca el cdigo, como los que hemos visto en el punto 2 de este captulo o desde cualquier otro editor de texto. Como primera lnea del archivo CSS, es recomendable indicar el juego de caracteres utilizado y, luego, declarar los estilos, como vemos en el ejemplo a continuacin.
@CHARSET UTF-8; .miestilo1 { font-size: 10px; color: #3333CC; }
38
www.redusers.com
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
.miestilo2 { font-size: 12px; color: #3399FF; }
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 extensin.
Figura 24. Cada nivel o especificacin de CSS incluye las caractersticas de las versiones previas y adems agrega nuevas funcionalidades. Por ejemplo, CSS nivel 3 incluye todas las caractersticas del nivel 2 e incluye nuevas.
Una de las caractersticas ms 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 pginas que lo componen. Adems, les ofrece la alternativa de acceder a otros espacios recomendados, que pueden brindar contenidos de inters o bien ser auspiciantes que ofrecen sus servicios.
www.redusers.com 39
Figura 25. En los primeros aos de auge de la web, los links, por lo general, se representaban al subrayar la palabra o frase que enlazaba hacia otra pgina o referencia de Internet.
Hoy en da, la representacin bsica de un link en HTML ofrece las mismas caractersticas que conocimos en sus comienzos, sin embargo, con la utilizacin de CSS y cdigo Javascript, es posible lograr efectos mucho ms interesantes.
La ubicacin de los links

La ubicacin de los enlaces en una pgina no es un asunto menor, debido a que su disposicin, dentro del diseo, 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 ms adelante, los enlaces pueden figurar como un texto en HTML, ser enriquecidos por propiedades CSS, crearse con cdigo Javascript o bien ponerse como imgenes, entre otras opciones. Es importante tener en cuenta que hay que elegir la opcin indicada, segn el diseo del sitio y tambin tener en cuenta la funcin que deseamos asignarle al enlace creado. Por ejemplo, se podra 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 mayora de los casos, esta opcin no es la ms relevante en el esquema de un sitio web, por lo cual puede tener una ubicacin de menor peso y un tipo de link ms discreto. En el captulo 6, cuando recorramos las caractersticas de optimizacin del sitio (SEO), veremos los lugares ms destacados para incluir enlaces de publicidad, pero, por lo pronto, podemos decir que, en todos los casos, los links que el usuario percibir como ms accecibles, son los que estn 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 grficos (estticos 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
El enlace se define con etiqueta <a> y se cierra con </a>. Con el parmetro href, se indica el sitio o pgina web de destino; en este ejemplo, enviamos a la pgina de contacto del sitio (contacto.htm). En caso de enviar a un sitio web, se debe indicar la direccin URL completa, por ejemplo, http://www.direcciondemisitioweb.com/ contacto.htm. Lo que queda envuelto entre las etiquetas <a> y </a>, es el texto que muestra el navegador, es decir lo que se imprime en pantalla. Si deseamos utilizar una imagen con enlace, en lugar de un texto, debemos escribir el siguiente cdigo:
<a href=contacto.htm><img src=img/imagen.gif width=175 height=192 /></a>
Como vemos, la estructura es similar. Con la etiqueta img src, se debe definir el nombre y la ruta de la imagen que deseamos que se vea en lugar del enlace. Las propiedades width (ancho) y height (alto) establecen las dimensiones, en pixeles, con las que se muestra la imagen en pantalla.
Figura 26. Utilizar imgenes, en lugar de texto, para crear links, es una opcin que puede resultar ms atractiva para el usuario y que, a su vez, brinda mejores alternativas para disear.
Agregar efectos a los links con CSS

Una opcin 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 opcin predeterminada para mostrar un enlace cuando carga la pgina por primera vez y no ha recibido ninguna accin del usuario. a:visited: establece la apariencia de los enlaces que han sido visitados por el usuario.
www.redusers.com 41
se utiliza para establecer cmo se muestra un enlace que tiene el foco sobre l. Una manera de hacer foco sobre un enlace es, posicionados sobre la pgina activa, pulsar la tecla TAB. Si bien esta alternativa no es muy utilizada, es una opcin que an tiene validez y puede servir en algunos casos puntuales. a:hover: esta opcin se activa cuando el usuario pasa el mouse por encima del link. Es, quizs, una de las acciones ms comunes porque se considera de mucha utilidad. a:active: se activa cuando el usuario hace clic sobre el enlace. Entre las propiedades que se pueden aplicar a cada uno de estos estados, se encuentran casi todas las opciones que ofrece CSS para un texto comn, por ejemplo: pasar a negrita, cambiar el color, subrayar, cambiar el tamao de la fuente, etctera. De manera habitual, estas opciones se definen junto con el estilo de texto que se utilizar. En el siguiente listado, veremos un ejemplo de aplicacin, que nos permitir comprender mejor el tema.
.MiEstilo { font-family: Verdana, Arial, sans-serif; color: #000000; } a:link { text-decoration: none; color: #2400ff; } a:visited { color: #ff0000; text-decoration: none; } a:focus { color: #001eff; text-decoration: none; font-style: italic; } a:hover { text-decoration: underline; color: #8c7de7; } a:active { text-decoration: none; color: #6a7cff; }
a:focus:
42
www.redusers.com
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 caractersticas generales del texto en este caso la fuente, sus reemplazos posibles y el color que tendr aplicado de manera predeterminada. En las siguientes lneas del cdigo podemos apreciar cmo se especifica la forma en que se debe mostrar un enlace segn su estado. Por ejemplo, en a:link, definimos el color que tendr de manera predeterminada el link y, tambin, especificamos que no tendr decoracin, es decir que no se ver subrayado. Para los siguientes estados, definimos que cambie el color. Adems, 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 ms claro para indicarle al usuario que existe un enlace sobre ese texto.
CSS tambin nos permite trabajar con imgenes. Una alternativa que podemos utilizar en las imgenes que tienen enlaces es aplicarles un borde y hacer que cambie su color cuando el mouse pasa por encima. Para ello, primero definimos el siguiente cdigo CSS.
#imagenenlace img { border: 2px solid #333333; border-width: 2px 2px 2px; } #imagenenlace a:hover img { border: 2px solid #d4d4d4; border-width: 2px 2px 2px; color: #CCCCCC; }
www.redusers.com
43
Cuando dentro de los estilos utilizamos # para definirlos, podemos usar su nombre para referenciarlo en un objeto HTML, por ejemplo, con una capa. Debemos hacer que coincida el nombre con la etiqueta id del objeto HTML. Para aplicarlo sobre una imagen, es posible incluirla en una capa y escribir el siguiente cdigo:
<div id=imagenenlace align=center> <a href=http://www.direcciondejemploweb.com/><img alt=Texto de la imagen src=img/imagen.jpg longdesc=Descripcin de la imagen/></a></p> </div>
En el cdigo, debemos reemplazar los valores de href, scr, img alt y longdesc, por los que deseemos utilizar en la pgina web.
Figura 28. Cuando se aplica la propiedad alt a una imagen, en algunos navegadores, por ejemplo en Internet Explorer, veremos el texto al pasar el mouse por encima.
QU ES LA WEB 2.0?
A diferencia de lo que muchos piensan, la Web 2.0 no es un nuevo estndar de Internet, sino un concepto que hace referencia a la evolucin de la Web hacia un formato de mayor participacin e interaccin de los usuarios. La Web 2.0 est identificada con aplicaciones web, blogs y redes sociales, entre otros servicios.
44
www.redusers.com
Qu aspectos deben considerarse para disear y establecer el formato de las tablas de un sitio?
Todos los efectos que se generen con CSS para los links pueden ser incluidos en una hoja de estilo externa. La ventaja de utilizar esta opcin es que, como hemos visto antes, nos permite definir estilos que podrn ser utilizados en todas las pginas del sitio si lo deseamos. Es importante destacar que, tambin, existen otras formas de aplicar efectos a los enlaces utilizando Javascript, Flash u otros lenguajes o tecnologas disponibles para desarrollos de sitios web.
Figura 29. Adobe Flash es una aplicacin que, entre sus funciones bsicas, permite crear links o botones, pero su potencia resulta mucho mayor, ya que es una herramienta pensada para crear proyectos multimedia profesionales.
<table>.
Las tablas son elementos HTML que se crean a travs de la etiqueta 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 continuacin, veremos un ejemplo de una tabla de pases y ciudades.
<table width=400 id=Tabla 1> <tr> <td><b>Pas</b></td> <td><b>Ciudad</b></td> </tr> <tr> <td>Argentina</td> <td>Buenos Aires</td>
www.redusers.com
45
</tr> <tr> <td>Paraguay</td> <td>Asuncin</td> </tr> <tr> <td>Uruguay</td> <td>Montevideo</td> </tr> </table>
Como vimos, la tabla se abre con la etiqueta <table> y se cierra con </table>. Se le asigna el nombre con la propiedad id. Se utiliza width para indicar el ancho que ocupa la tabla. Este valor est expresado en pixeles.
Figura 30. Sin aplicarle ningn diseo, la tabla luce simple y muy poco atractiva.
Aplicar formato a una tabla

En el ejemplo anterior, describimos cmo se forma una tabla y sus caractersticas bsicas. Para enriquecer el aspecto de una tabla, se pueden aplicar propiedades de cdigo HTML o agregar un estilo CSS, opcin que nos puede ser til para repetir el diseo en otras tablas de la pgina o del sitio. Entre las caractersticas que se pueden establecer en una tabla, se encuentra su alineacin y la de los elementos contenidos en sus celdas. Tambin es posible definir estilos y grosores para sus bordes. Por ltimo, existe la posibilidad de aplicar imgenes 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
La propiedad bgcolor tambin puede ser aplicada a una celda si la utilizamos con la etiqueta <td>.
<td bgcolor=#99CCCC><b>Pas</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>Pas</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 solucin que nos sea til para poder reutilizarla, en el listado que veremos a continuacin, definiremos un estilo CSS que nos permite aplicarlo a una o a varias tablas de un sitio.
table.paises { font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#FFFFFF; text-align:center; background-color:#333333; } table.paises td{ border:2px solid #CCCCCC; }
Con table.paises, definimos las propiedades de la tabla y su contenido. Con table.paises td, definimos caractersticas especficas de las celdas, en este caso, las propiedades de sus bordes.
www.redusers.com 47
Figura 32. Luego de aplicar las propiedades de CSS, la tabla cambia su aspecto y obtenemos un resultado que podremos integrar en nuestro diseo.
Cmo es posible crear una capa y ubicarla dentro de otra?

El concepto de capas se ha extendido en el mbito informtico a diferentes tipos de aplicaciones. En lo que respecta especficamente al armado de una pgina web, las capas o divisiones permiten manejar elementos de una manera independiente. Uno de los aspectos ms destacado de una capa es que puede ubicarse con precisin dentro de una pgina y, adems, permite que se le asigne un estilo personalizado para definir su aspecto. Tambin, se le pueden aplicar propiedades de visibilidad, grados de transparencia y orden como elemento en la pgina. La etiqueta que se utiliza para abrir una capa o divisin es <div>, mientras que con </div> se cierra. En el ejemplo que vemos a continuacin, ubicaremos una capa en una pgina 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 divisin que la contenga; tendr unas dimensiones
EDITORES DE CDIGO HTML VS. PROGRAMAS WYSIWYM

Muchas personas ligadas a la programacin prefieren editar pginas HTML con un editor de cdigo. Quienes provienen del mundo del diseo, por lo general, eligen aplicaciones WYSIWYM. Para ofrecer una solucin que pueda ser til para todos, muchos programas WYSIWYM permiten trabajar con una vista de diseo, otra vista de cdigo y, tambin, una vista que combina ambas opciones.
48
www.redusers.com
Cmo 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, slo mostrar la imagen de fondo. Si deseamos mostrar otros elementos dentro de ella, ya sean otras capas, tablas o cualquier otro objeto HTML, debemos declararlos antes de cerrar con la etiqueta </div>.Todo aquello que quede determinado dentro de este bloque se mover y ajustar de acuerdo con las dimensiones y la posicin que adquiera la capa que lo contiene. Si deseamos mostrar una capa dentro de otra, podramos hacerlo con <div><div></div></div>. Con esta opcin, creamos capas anidadas vacas y sin propiedades. A cada una de ellas, podemos asignarle las caractersticas que deseemos.
Figura 33. Dentro de un <div> se pueden incluir otros elementos, como por ejemplo un texto, una imagen, una tabla o incluso, otros contenidos multimedia.
Antes de continuar, debemos detenernos un instante en el valor de position. De manera predeterminada, su valor es static, es decir que los elementos se presentan en pantalla uno a continuacin del otro, tal como lo definimos en el cdigo que generamos. Si asignamos un valor relative, las coordenadas de los elementos se fijarn a partir de la posicin que les correspondera por el flujo. Si optamos por utilizar absolute, podremos asignar una posicin sin tener en cuenta cmo se encuentren ubicados los elementos en el flujo. Como vemos en el ejemplo, al tener en cuenta el contenedor, la posicin se puede establecer con top y left, entre otras opciones. En la prctica, deberemos decidir en qu casos es conveniente anidar capas y cuando tenerlas independientes. Una posibilidad muy til es ordenarlas por medio de la opcin z-index, que es la que permite determinar el orden en el que se superponen o apilan las capas. Esta propiedad hace que un elemento se ubique dentro del eje Z, es decir, el que da la profundidad para los objetos tridimensionales. Puede tener asignado un valor numrico que, al ser menor que el de otro, indicar que el elemento est ms atrs.
www.redusers.com 49
Figura 34. La posibilidad de controlar el orden de las capas puede tener variadas aplicaciones, por tal motivo, es importante comprender cmo debe utilizarse z-index, porque puede ayudarnos a solucionar muchos problemas.
La alternativa de utilizar frames

Si bien, hoy en da, est en auge la utilizacin de la etiqueta <div>, cabe recordar que tambin es posible mostrar pginas HTML dentro de otras, con la opcin que ofrecen los marcos o frames. Con esta alternativa, se puede dividir la pgina 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 aos en el diseo web, ya que existen otras alternativas que brindan mayor versatilidad.
50 www.redusers.com
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. Adems de la ruta del documento, puede tener asignadas dimensiones, bordes y propiedades de transparencia, entre otras opciones. La utilizacin de marcos puede presentar algunos problemas de compatibilidad con navegadores antiguos.
Figura 36. Para saber ms sobre la utilizacin de frames, podemos ingresar en www.w3.org/TR/html401/present/frames.html.

Como vimos en el punto 9, las capas pueden tener asignadas diferentes propiedades. Una alternativa que resulta de suma utilidad en el diseo de una pgina web consiste en asignarle, a uno o ms elementos, un grado de transparencia, para permitir que se vea de manera parcial un fondo. A esta funcin es posible darle diversas aplicaciones prcticas, pero, al utilizarla, es importante contar con los elementos de la pgina ordenados con la funcin z-index, que ya hemos visto. Para utilizar esta opcin con transparencias, si hay una imagen de fondo, debera tener el menor valor, luego le seguira 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 eleccin del color que se aplicar a la capa y cmo se representa segn 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
#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 continuacin, veremos las caractersticas de cada una de las propiedades utilizadas en el listado. - opacity: define el nivel de transparencia estndar. Se utiliza, por ejemplo para Opera. -moz-opacity: es una propiedad especfica para la familia de navegadores que utilizan el cdigo 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. Tambin 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 diseo de nuestra pgina.
<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 caractersticas que presenta para dejar pasar la luz. Se dice que un elemento es opaco cuando no permite que la luz pase a travs de l. Por otra parte, un objeto translcido permite pasar la luz, pero no deja ver de manera definida lo que hay del otro lado.
52
www.redusers.com
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 tamao 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 caractersticas de transparencia. Por este motivo, por lo general, ser recomendable el manejo de manera independiente de la capa con transparencia, para no afectar otros elementos de la pgina que no deseemos que tomen estas caractersticas. Es importante destacar que el efecto de transparencia tambin puede utilizarse en otros elementos a los que pueden aplicarse estilos, como las tablas.
Figura 38. Algunos navegadores, como Internet Explorer 6, pueden mostrar un alerta y bloquear el efecto de transparencias en pginas ubicadas en el equipo local. Al publicarlas en Internet, no se mostrar el mensaje.
www.redusers.com 53
En qu casos se recomienda disear una pgina con dimensiones fijas y cundo, con porcentuales?
Hace algunos aos, el estndar 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 estndar de 1024x768 pixeles, respetado por muchos sitios web hoy en da. Los nuevos monitores ya han superado la marca de las 17 y tambin el formato. Las dimensiones estndares de pantallas con relacin 4:3 (como los televisores antiguos), estn dando paso a los modelos wide screen de relacin 16:9.
Figura 39. Las pantallas wide, como su nombre lo indica, son ms anchas que las estndares (4:3), permiten mostrar un rea similar a la que ofrece el cine, pero en dimensiones menores.
Estas caractersticas, sumadas a que, en la actualidad, se encuentran pantallas de 19, 20, 22, entre otras alternativas, hace que exista una gran variedad de tamaos y, por ende, de resoluciones de pantalla, ya que cada una de estas opciones tiene asociada una resolucin recomendada. El dilema de tener que disear un sitio sin saber en qu pantalla ser visualizado influye en el diseo que vamos a realizar. Quienes deciden inclinarse por un diseo con dimensiones fijas utilizan como unidad de medida el pixel. Para lograr mayor compatibilidad, se puede optar por disear en una medida de 800x600 pixeles, sin embargo, en la actualidad, cada vez ms diseadores toman como estndar la resolucin 1024x768, impuesta por los monitores estndares de 17 pulgadas.
54 www.redusers.com
Figura 40. Si bien no es necesario contar con una placa de video de ltima generacin para realizar un diseo web, es importante que esta nos permita visualizar la mayor cantidad de resoluciones posibles.
Figura 41. La resolucin de pantalla debe ser soportada tanto por la placa de video, como por el monitor. De lo contrario, no tendremos una visualizacin adecuada.
Cualquiera sea la opcin que tomemos en el diseo, es recomendable poner un color o una imagen de fondo que logre armona con el sitio, ya que en las pantallas de ms resolucin se ver en mayor extensin, en especial hacia los costados.
www.redusers.com 55
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, segn la configuracin 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 pgina web es que se adaptarn segn las dimensiones que les ofrezca la pantalla. Adems, con un diseo adecuado, utilizando valores porcentuales, se puede aprovechar el mximo espacio disponible en cada una de las resoluciones. En cambio, al hacerlo fijo, desaprovechamos parte del rea de pantalla si el usuario no tiene configurada la resolucin para la cual fue optimizado el sitio. La desventaja de utilizar medidas porcentuales en el diseo reside en que los elementos pueden modificarse de tal forma que aparezcan movidos en la pantalla,
56 www.redusers.com
si no contemplamos todos los aspectos del diseo. Al igual que las dimensiones expresadas en pixeles, el porcentaje puede aplicarse a las propiedades width (ancho) y height (alto) de los elementos que lo admitan. Dentro de una misma pgina web, pueden utilizarse medidas en pixeles o en porcentaje, aunque hay que evaluar con cuidado en qu casos puede ser til optar por esta alternativa. Para indicar que un valor est expresado en pixeles, se utiliza px, por ejemplo: height=100px. Para establecer que el valor es porcentual, se usa el smbolo %, por ejemplo: width=10%. Como veremos en el punto 13 de este captulo, ms all de la decisin que tomemos en cuanto a utilizar medidas porcentuales o fijas, es fundamental que el sitio se muestre centrado en todas las resoluciones de monitores ya que, de lo contrario, el diseo no lucir de la mejor manera.
Figura 43. Si ingresamos en www.w3counter.com/globalstats.php, podremos conocer estadsticas actualizadas, mes por mes, sobre los navegadores y resoluciones de pantalla ms utilizadas por los usuarios.
Pixel es una palabra que proviene del trmino ingls picture element y que hace referencia a la unidad de color ms pequea que conforma una imagen digital. Para representar un color, cada pixel puede tomar un valor diferente, que est dado por la profundidad de color de la imagen. Por ejemplo, una profundidad de 24 bits permite 16.777.216 colores.
QU ES UN PIXEL?
www.redusers.com
57
Cul es la mejor forma de establecer los mrgenes de una pgina y sus elementos?
En la tabla 2 de este captulo, 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, tambin, 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 diseos, 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 disear un sitio. Por ejemplo, veamos qu ocurre con un rectngulo que, en su interior, tiene un texto. Debemos tener en cuenta que el rectngulo se encuentra dentro de una pgina que tambin posee sus bordes, por lo cual, podramos pensar que el rectngulo se encuentra dentro de otro rectngulo que, en este caso, es la pgina. La distancia que hay entre el borde de la pgina y uno de los lados del rectngulo es el margen (margin), que puede ser superior, inferior, derecho o izquierdo. Ahora bien, el espacio que existe entre los lados del rectngulo y el texto interior es lo que se conoce como padding. Para entender an mejor esto, debemos pensar que el texto est envuelto en su propia caja imaginaria o caja de texto.
58 www.redusers.com
Cmo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?
MARGIN Y PADDING DE UN SITIO
GUA VISUAL
Contenido: espacio donde se ubica el texto o el elemento que acta como contenido. Padding: espacio entre el contenido y el borde del objeto contenedor. Borde contenedor: es la lnea que determina los lmites del objeto contenedor (puede estar visible o no). Margin: determina la distancia entre el objeto contenedor y la ventana. Borde de la ventana: es el borde del rea de representacin de la pgina web en el navegador.
Una vez que comprendemos estos conceptos, ser nuestra tarea aplicarlos segn lo que deseemos lograr en nuestro diseo. Por ejemplo, establecer un valor de padding suele ser muy til para evitar que un texto interior se vea muy encimado sobre las lneas de una caja. En cambio, margin puede ser til si pretendemos separar columnas. En algunos casos, estas opciones pueden trabajar en forma conjunta para ofrecer mejores resultados.
El problema de centrado de una pgina web es uno de los ms frecuentes para un diseador. 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
Figura 45. El problema de centrado puede ser imperceptible para algunos usuarios, pero un buen diseador no debe omitir nunca este tema en sus trabajos.
En algunos casos, para solucionar los problemas de centrado, puede ser suficiente asignar el atributo de centrado a una capa para que los elementos contenidos se muestren de esa manera. Esto sera: <div align=center>. Sin embargo, en diseos que puedan presentar ciertos aspectos ms complejos, deberemos tener en cuenta algunos conceptos adicionales. En primer lugar, es importante destacar que, adems de las diferencias entre las distintas configuraciones posibles de pantallas, tambin hay diferencias entre los diferentes tipos de navegadores, tema sobre el cual profundizaremos en el captulo 3 de este libro. Sin olvidar esto, para resolver un problema de centrado de una pgina, podremos aprovechar las ventajas que brinda CSS. Para lograrlo, definiremos una capa que actuar como contenedora de los elementos o bien de las dems capas que formen parte de la pgina. A continuacin, veremos un ejemplo, que puede agregarse a la seccin de estilos o en el archivo de estilos externo.
body { background-color: #778f92; margin: auto; background-image: url(fondo.jpg); background-repeat: repeat-x; background-attachment:fixed; background-position: 0px 0px;
60
www.redusers.com
} #contenedor { position:relative; left:0px; width:900px; height:100%; margin: 0px auto; text-align:center; }
Para body, definimos una imagen que se repetir durante el eje X. Para ese ejemplo, puede utilizarse un JPG de 4 5 pixeles de ancho, y entre 600 y 650 pixeles de largo. Puede armarse como un degradado, en el cual el ltimo pixel inferior coincide con el color de fondo (background-color). Las propiedades de centrado de los elementos se encuentran en #contenedor. En este caso, definimos un ancho fijo (900px) y una altura porcentual para abarcar toda la pgina (100%). Con las lneas margin: 0px auto; y text-align:center;, logramos que el contenido se muestre centrado en los navegadores ms populares, como Internet Explorer y Mozilla Firefox.
Figura 46. Podemos ajustar de diferente manera los mrgenes, segn nuestras necesidades de diseo, pero lo fundamental es obtener un diseo centrado que se vera de manera adecuada en todos los navegadores.
www.redusers.com 61
Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS?
Los mens son elementos que, desde hace muchos aos, se han ganado un importante lugar en el armado del entorno grfico de las aplicaciones informticas. Con el auge de Internet y la necesidad de brindarles a los usuarios una manera prctica y ordenada de acceder a la informacin, 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 mens para sitios webs han evolucionado, tanto en las funcionalidades que pueden brindar, como tambin en el diseo que ofrecen para ser ms atractivos al pblico. Con los conceptos que aprendimos en el punto 7 de este captulo, conocimos cmo 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 separacin de la estructura del diseo. Por este motivo, si creamos un men HTML, pero basado su aspecto visual en estilos CSS, podremos realizar cambios de una manera ms sencilla.
Disear 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 an el resultado est lejos de parecer un men.
62 www.redusers.com
Para lograr que ese simple listado tenga el aspecto de un men, debemos definir los estilos necesarios mediante CSS. Si el estilo lista no nos desagrada, pero deseamos mejorarlo, podemos recurrir a la siguiente alternativa.
#EstiloMenu { list-style-type:square; }
Con list-style-type, definimos el tipo de vieta por utilizar. En este caso, definimos un cuadrado (square), pero tambin podemos determinar un crculo (circle), ningn objeto (none). Tambin es posible utilizar una imagen pequea, si cambiamos la lnea por list-style-image:url(imagen.gif). El valor que aparece entre parntesis debe ser modificado por la ruta y el nombre de la imagen que deseamos incluir. Ahora que conocemos la opcin ms simple, veremos cmo mejorar el aspecto visual del men para, por ejemplo, mostrarlo de manera horizontal, con una imagen de fondo, otra posibilidad tambin puede ser un color, y con un efecto al pasar el mouse por encima de los elementos.
#EstiloMenu { width: 900px; height: 40px; background: #c3c3c3 url(fondoMenu.gif); background-repeat: repeat-x; } #EstiloMenu ul { list-style: none; margin: 0; padding: 0; } #EstiloMenu li { float: left; border-right: 1px solid #c3c3c3; border-left: 1px solid #fff; } #EstiloMenu li a { display: block;
www.redusers.com
63
color: #515e5e; text-decoration: none; font-family: Verdana, Arial, Helvetica; font-size: 11px; font-weight: 500; padding: 10px 7px 10px 7px; } #EstiloMenu li a:hover { color: #fff; background: #819292; }
Para aplicar el estilo, podemos ubicar el listado en una capa, a la cual le asignamos id=EstiloMenu.
Figura 48. El resultado de aplicarle un estilo a la lista le da una verdadera apariencia de men.
Como podemos ver en la figura 48, para este ejemplo creamos un men horizontal. En #EstiloMenu, definimos el ancho (width), el alto total del men (height), la imagen que tendr de fondo y un color con background. Tambin definimos que se repita en el eje X con la propiedad background-repeat. En #EstiloMenu ul, definimos que no tenga vietas y los valores de margin y padding, en este caso lo indicamos en 0. En #EstiloMenu li, al utilizar la opcin float: left;, indicamos que los tems aparezcan uno al lado del otro, es decir, de manera horizontal. Luego definimos el grosor, el color y el estilo de los bordes laterales con las propiedades border-right y borderleft, tambin podramos trabajar sobre los otros bordes si lo deseramos. Con #EstiloMenu li, definimos las propiedades que tendr el elemento del men, el cual ser un enlace a una pgina interna, a otra pgina o bien a un recurso de
64 www.redusers.com
Internet. Se pueden aplicar todas las caractersticas de texto que hemos visto en CSS: color, tipografa, etctera. En este caso, se agrega display: block; para lograr que se vea cada tem como un bloque, o bien como un botn. Como podemos ver, #EstiloMenu li a:hover nos permite definir las caractersticas que tomar el elemento del men cuando el mouse pase por encima, en este caso, el color de fondo que tendr el texto, es decir, el botn.
Figura 49. Cuando incorporamos el men en nuestro sitio, debemos asegurarnos de que se integre de manera adecuada con el diseo.
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 captulo 6. Pero tambin existen otras alternativas que nos brindan interesantes prestaciones, como por ejemplo, los mens creados con Flash o con cdigo Javascript. Para quienes no conocen Flash, pero desean contar con una botonera,
El trmino Uniform Resource Locator, abreviado habitualmente como URL, hace referencia a una cadena de caracteres que se utilizan para identificar un recurso informtico que puede estar alojado en un servidor. En Internet, se utiliza para ubicar la direccin donde se encuentra un archivo, por ejemplo, una imagen o un documento HTML.
QU SIGNIFICA URL?
www.redusers.com
65
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 lnea que ofrece el sitio.
Figura 50. Con la versin online del generador, podremos acceder a una buena cantidad de opciones para crear un men que luego puede ser guardado en formato SWF.
Si buscamos alternativas con una mayor variedad de posibilidades, encontramos Flash Menu Labs, una aplicacin que puede obtenerse en versin de prueba si ingresamos en su sitio web http://flashmenulabs.com.
Figura 51. En la seccin Examples, podremos ver algunos ejemplos muy interesantes de las creaciones que es posible realizar con Flash Menu Labs.
66 www.redusers.com
Otra opcin 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 creacin de un men.
Figura 52. Al ingresar en la seccin Demo del sitio http://mootools.net/, podremos ver variadas opciones, como efecto acorden o mens que se contraen.
... RESUMEN
En este captulo, conocimos las caractersticas principales de HTML, XML, XHTML y CSS. Recorrimos las aplicaciones pagas y gratuitas para diseo de pginas web. Aprendimos qu tipografas utilizar al disear una pgina y cmo establecer el conjunto de caracteres adecuado para cada una. Trabajamos sobre los estilos que pueden aplicarse a los links para lograr efectos segn su estado. Detallamos cmo se puede trabajar con tablas, capas y estilos. Analizamos las mejores opciones para establecer las dimensiones, mrgenes y centrado de una pgina. Por ltimo, vimos las opciones de las que disponemos para crear un men.
www.redusers.com
67
ACTIVIDADES
TEST DE AUTOEVALUACIN
1 Defina qu es HTML. 2 Indique las caractersticas principales de CSS. 2 Determine distintos efectos para los esta3 Qu es la cabecera de un documento HTML y qu se incluye en ella? 3 Aplique un fondo en una pgina y cree en4 Cules son las ventajas que ofrece un editor WYSIWYM? 5 Qu fuentes deben utilizarse al disear un sitio? 6 En qu casos es conveniente utilizar una hoja de estilos externa? 7 Cmo se le aplican estilos CSS a una tabla? 8 Qu funcin cumple la etiqueta < div> en la estructura de un documento HTML? 9 De qu forma se establecen dimensiones fijas en una pgina y en qu casos es recomendable? 10 Qu diferencias hay entre padding y margin? 5 Cree un men personalizado con la utilizacin de CSS. cima una capa con transparencias sobre la cual debe mostrar un texto. 4 Centre el contenido de una pgina para que se vea de manera correcta en distintos navegadores y configuraciones de pantalla. dos de un link en una pgina.
ACTIVIDADES PRCTICAS
1 Ayudado con una herramienta web o con la aplicacin que elija, defina la paleta de colores de su sitio.
68
www.redusers.com

Revist Users Webmaster Profesional PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Revist Users Webmaster Profesional PDF

Uploaded by

Copyright:

Available Formats

por Damin De Luca

CONCTESE CON LOS MEJORES

CREACIN, EXPANSIN Y MONETIZACIN DE BLOGS

ESTRATEGIAS PARA POSICIONAR SU NEGOCIO EN LA WEB

PREVENGA Y SOLUCIONE LOS DELITOS INFORMTICOS MS PELIGROSOS

APRENDA CMO ARMAR REDES SIN CONCIMIENTOS PREVIOS

MANUALES USERS I 352 pginas I ISBN 978-987-663-008-5

Diseo del sitio y CSS

SERVICIO DE ATENCIN AL LECTOR: usershop@redusers.com

1. DISEO DEL SITIO Y CSS

Cules son las diferencias y ventajas de la utilizacin de HTML, XHTML y CSS?

Cules son las diferencias y ventajas de la utilizacin de HTML, XHTML y CSS?

1. DISEO DEL SITIO Y CSS

ETIQUETA HTML <!DOCTYPE> <html> <head> <title>

<form> <img> <b>

Tabla 1. Cdigo de las etiquetas HTML ms importantes y descripcin de su funcin.

Cules son las diferencias y ventajas de la utilizacin de HTML, XHTML y CSS?

1. DISEO DEL SITIO Y CSS

Qu aplicaciones pagas y gratuitas existen para disear y administrar un sitio web?

Qu aplicaciones pagas y gratuitas existen para disear y administrar un sitio web?

1. DISEO DEL SITIO Y CSS

Los programas WYSIWYM

Qu aplicaciones pagas y gratuitas existen para disear y administrar un sitio web?

1. DISEO DEL SITIO Y CSS

Microsoft Expression Web

Qu aplicaciones pagas y gratuitas existen para disear y administrar un sitio web?

1. DISEO DEL SITIO Y CSS

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

Cmo transmitir sensaciones a travs de los colores

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

Sitios web para elegir paletas de colores

1. DISEO DEL SITIO Y CSS

Aplicaciones para elegir paletas de colores

DIFERENCIAS ENTRE RGB Y CMYK

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

1. DISEO DEL SITIO Y CSS

1. DISEO DEL SITIO Y CSS

Fuentes en imgenes y animaciones

QU SON LAS FUENTES TRUETYPE?

1. DISEO DEL SITIO Y CSS

1. DISEO DEL SITIO Y CSS

PROPIEDAD text-align text-indent

VALORES4 o justify. Por ejemplo: text-align: left;

Ofrece la posibilidad de asignar un color de fondo a un elemento.

Se utiliza para establecer una imagen de fondo para un elemento.

Permite asignar un margen para un elemento.

Se utiliza para indicar el espacio entre un elemento y su interior.

Permite establecer el color del borde de un elemento.

Se emplea para definir el estilo de un borde.

Permite asignar un ancho a un borde.

1. DISEO DEL SITIO Y CSS

Hojas de estilo dentro del documento HTML

HISTORIA DEL CSS

1. DISEO DEL SITIO Y CSS

Hojas de estilo externas

.miestilo2 { font-size: 12px; color: #3399FF; }

Para incluirlo en el archivo HTML, dentro del encabezado, escribimos lo siguiente:

1. DISEO DEL SITIO Y CSS

La ubicacin de los links

Crear un link en HTML

Agregar efectos a los links con CSS

1. DISEO DEL SITIO Y CSS

1. DISEO DEL SITIO Y CSS