Documente Academic
Documente Profesional
Documente Cultură
LIBROS DE COMPUTACIN
usershop.redusers.com
Webmaster profesional
Captulo
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
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
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.
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.
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
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.
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.
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
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.
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.
Se conoce como RGB a la combinacin que se forma con los colores de luz primarios: rojo, verde y azul. Un ejemplo de esto es la pantalla de un monitor o de un televisor. Por su parte, CMYK es la combinacin que se logra al combinar en impresin los colores cian, magenta, amarillo y negro; las impresoras utilizan este sistema.
26
www.redusers.com
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.
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
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?
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
Cmo se pueden definir estilos de texto para todas las pginas de un sitio?
DESCRIPCIN
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
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
margin
padding
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
Puede recibir valores RGB o el nombre del color en ingls. Por ejemplo: color: #33CC33; color: green;
border-style
Se le puede asignar un valor none, dotted, solid, double, groove, ridge, outset o inset. Por ejemplo: border-style: none;
border-width
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).
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
Cmo se pueden definir estilos de texto para todas las pginas de un sitio?
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.
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.
38
www.redusers.com
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
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.
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
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.
40
www.redusers.com
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
El enlace se define con etiqueta <a> y se cierra con </a>. Con el parmetro href, se indica el sitio o pgina web de destino; en este ejemplo, enviamos a la pgina de contacto del sitio (contacto.htm). En caso de enviar a un sitio web, se debe indicar la direccin URL completa, por ejemplo, http://www.direcciondemisitioweb.com/ contacto.htm. Lo que queda envuelto entre las etiquetas <a> y </a>, es el texto que muestra el navegador, es decir lo que se imprime en pantalla. Si deseamos utilizar una imagen con enlace, en lugar de un texto, debemos escribir el siguiente cdigo:
<a href=contacto.htm><img src=img/imagen.gif width=175 height=192 /></a>
Como vemos, la estructura es similar. Con la etiqueta img src, se debe definir el nombre y la ruta de la imagen que deseamos que se vea en lugar del enlace. Las propiedades width (ancho) y height (alto) establecen las dimensiones, en pixeles, con las que se muestra la imagen en pantalla.
Figura 26. Utilizar imgenes, en lugar de texto, para crear links, es una opcin que puede resultar ms atractiva para el usuario y que, a su vez, brinda mejores alternativas para disear.
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
Qu efectos es posible aplicar a los links de una pgina y cmo se pueden establecer para un sitio?
El estilo que definimos en el listado anterior puede incluirse en el encabezado del documento, entre las etiquetas <style type=text/css> y </style> o bien agregarse a una hoja de estilos independiente. En el ejemplo, podemos ver que, en primer lugar, definimos las 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.
Qu aspectos deben considerarse para disear y establecer el formato de las tablas de un sitio?
<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.
46
www.redusers.com
Qu aspectos deben considerarse para disear y establecer el formato de las tablas de un sitio?
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.
Con este listado, definimos una capa que se dibujar a partir de la esquina superior izquierda de la pantalla, o de la divisin que la contenga; tendr unas dimensiones
48
www.redusers.com
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.
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
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.
#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>
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
En qu casos se recomienda disear una pgina con dimensiones fijas y cundo, con porcentuales?
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
En qu casos se recomienda disear una pgina con dimensiones fijas y cundo, con porcentuales?
si no contemplamos todos los aspectos del diseo. Al igual que las dimensiones expresadas en pixeles, el porcentaje puede aplicarse a las propiedades width (ancho) y height (alto) de los elementos que lo admitan. Dentro de una misma pgina web, pueden utilizarse medidas en pixeles o en porcentaje, aunque hay que evaluar con cuidado en qu casos puede ser til optar por esta alternativa. Para indicar que un valor est expresado en pixeles, se utiliza px, por ejemplo: height=100px. Para establecer que el valor es porcentual, se usa el smbolo %, por ejemplo: width=10%. Como veremos en el punto 13 de este captulo, ms all de la decisin que tomemos en cuanto a utilizar medidas porcentuales o fijas, es fundamental que el sitio se muestre centrado en todas las resoluciones de monitores ya que, de lo contrario, el diseo no lucir de la mejor manera.
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?
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.
Cmo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?
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
Cmo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?
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.
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
Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS?
Para lograr que ese simple listado tenga el aspecto de un men, debemos definir los estilos necesarios mediante CSS. Si el estilo lista no nos desagrada, pero deseamos mejorarlo, podemos recurrir a la siguiente alternativa.
#EstiloMenu { list-style-type:square; }
Con list-style-type, definimos el tipo de vieta por utilizar. En este caso, definimos un cuadrado (square), pero tambin podemos determinar un crculo (circle), ningn objeto (none). Tambin es posible utilizar una imagen pequea, si cambiamos la lnea por list-style-image:url(imagen.gif). El valor que aparece entre parntesis debe ser modificado por la ruta y el nombre de la imagen que deseamos incluir. Ahora que conocemos la opcin ms simple, veremos cmo mejorar el aspecto visual del men para, por ejemplo, mostrarlo de manera horizontal, con una imagen de fondo, otra posibilidad tambin puede ser un color, y con un efecto al pasar el mouse por encima de los elementos.
#EstiloMenu { width: 900px; height: 40px; background: #c3c3c3 url(fondoMenu.gif); background-repeat: repeat-x; } #EstiloMenu ul { list-style: none; margin: 0; padding: 0; } #EstiloMenu li { float: left; border-right: 1px solid #c3c3c3; border-left: 1px solid #fff; } #EstiloMenu li a { display: block;
www.redusers.com
63
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
Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS?
Internet. Se pueden aplicar todas las caractersticas de texto que hemos visto en CSS: color, tipografa, etctera. En este caso, se agrega display: block; para lograr que se vea cada tem como un bloque, o bien como un botn. Como podemos ver, #EstiloMenu li a:hover nos permite definir las caractersticas que tomar el elemento del men cuando el mouse pase por encima, en este caso, el color de fondo que tendr el texto, es decir, el botn.
Figura 49. Cuando incorporamos el men en nuestro sitio, debemos asegurarnos de que se integre de manera adecuada con el diseo.
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
Cules son las diferentes opciones de mens que se pueden crear al utilizar CSS?
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