Volver a la portada de Duiops
Volver al
Web de Duiops


Portada | Diseño de un sitio Web de principio a fin | Cómo hacer una página Web

Cómo hacer una página Web

Arriba

 

¿Has querido alguna vez ser famoso?

Internet ofrece una oportunidad sin precedentes a todos aquellos que quieran hacerse promoción a sí mismos. Para promocionar, por ejemplo, tus poemas o las canciones de tu grupo de música, antes tenías sólo que convencer a la gente, y ahora pagar grandes sumas de dinero. Sin embargo, ahora la tecnología del World Wide Web te permite ahorrar este paso intermedio y ofrecer en el dominio público tus talentos por un coste realmente económico.

 

Lo que hay que saber sobre la gente

Hacer tu propia pagina personal en la red no es un ejercicio de ego. Desde los primeros tiempos, la red ha sido fundada sobre la gente. Antes de que hubiera enormes páginas Web comerciales de prestigio, había páginas personales. Mucha de la gente responsable de los contenidos originales de la red al principio de los 90 han continuado explorando la capacidad comercial de su medio preferido, algunos con gran éxito. E Internet continua expandiéndose. Mas y mas gente esta conectándose a la Web, enriqueciéndola con sentido comercial y de comunidad. Construyendo una pagina personal, te estableces como un miembro de esa comunidad.

Crear tu página personal es también un acto de valor. Cualquier cosa que publiques en la red de repente esta "ahí fuera", desnuda en la pantalla, dispuesta a ser buscada en los buscadores, recogida en los índices, analizada por los estadísticos y los antropólogos, y aleatoriamente premiada con navegantes anónimos. Elige el contenido con cuidado. Las siguientes son unas buenas reglas para el creador:

Pero diseñar un sitio Web es también un acto de coraje. Cualquier cosa que publiques en Internet estará allí, a disposición de todo el mundo, podrá ser encontrado por los motores de búsqueda, o capturado por los indexadores, analizado por estadísticos y antropólogos, o aleatoriamente visitado por navegantes anónimos. Elige tu contenido con cautela. Lo siguiente son unas cuantas máximas, adecuadas para el que publica su página:

bulletNunca pongas nada que no dirías a tu madre - Nunca pongas nada de lo que no hables en el trabajo
bulletNunca pongas nada que pueda ser considerado una calumnia o un insulto
bulletTen cuidado cuando uses
material de otra gente. Los problemas de copyright son importantes cuando se trata de contenidos Web

Más que tu propia prudencia, el mecanismo principal para regular el contenido de tu página debe ser la primera enmienda.

Otros países pueden tener limitaciones sobre los contenidos Web impuestos por sus propios gobiernos, pero generalmente, la Web se ha mantenido como un entorno libre y abierto.

Para la mayor parte, en la mayoría de los casos, la red se mantiene como un espacio creativo único, increíble y libre donde te esta permitido decir o hacer literalmente lo que quieras - retransmitir un video de ti mismo teniendo un Web, por ejemplo, o hacer una retransmisión en directo de tu recital de piano - si miedo a regulación o recriminación de ninguna clase.

CUIDADO

Por supuesto, el derecho a expresarse uno mismo es siempre mejor si va acompañado de sentido de la responsabilidad. Recuerda, una gran variedad de gente encontrara tu pagina, incluyendo algunos de diferentes culturas y formas de ser y, mas importante, niños. Es importante pensar detalladamente tus contenidos Web.

 

Planea tu página

Mucha gente interpreta la total libertada de Internet como una excusa para no tener organización. Obviamente, se puede crear sin nada, pero para asegurarse de que tu página vale la pena ser visitada, es necesario que el diseñador Web piense en ello antes.

 

Tú y tu proveedor de servicio Internet.

La primera cosa que necesitas es encontrar un sitio para tu página. Si ya tienes acceso a Internet, es bastante más fácil de lo que puedas pensar. Muchos ISP (Proveedores de Internet) comerciales como Terra, Eresmas, Wanadoo, ofrecen varios megabytes preparados para tu pagina como parte de tu paquete mensual estándar. Si aún no has contratado ningún ISP pero tienes acceso a la red a través de tu trabajo, hay varias páginas de Internet que te ofrecen hospedaje gratuito (mira el apartado siguiente):

 

EN EL WEB

Los siguientes sitios Web ofrecen espacio gratuito para colocar allí páginas Web.

Geocities: http://www.geocities.com/.

Tripod: http://www.tripod.com/

Angelfire: http://www.angelfire.com/

Xoom: http://www.xoom.com/home/

Pásate también por algunos directorios del Web tales como http://www.whowhere.com/, http://www.four11.com/, y http://www.switchboard.com/. Muchos de estos
sitios te permiten modificar tu entrada en sus directorios.

Si no tienes acceso a Internet, empieza por lo más simple. Probablemente habrás recibido algunos CD-ROMs con kits de acceso gratuitos, ofertas a tu email, o llamadas al teléfono de tu empresa, estas últimas ofreciéndote un número de horas de conexión gratuita como un incentivo para adquirir sus servicios. Y también hay que considerar las empresas que ofrecen tarifa plana a un precio módico, con nuestro módem de siempre, o las compañías de cable o ADSL.

He aquí algunos criterios que debes valorar cuando escojas un proveedor de acceso a Internet:

Coste. Debe ser uno que pida una pequeña cuota mensual sin ningún cargo añadido. Rechaza todos aquellos que el coste es por minuto o por hora. Muchos ISPs hacen descuentos si en vez de pagar la cuota mensual pagas la trimestral, semestral, o anual.

Conectividad. Debes poder marcar el teléfono de tu ISP donde quiera que estés, inclusive en las horas de máximo tráfico. Una cuota mensual que sea una ganga no lo será tanto si a lo que tienes acceso es a una señal siempre ocupada. Y una vez que hayas conectado... ¿es cercana o igual a la velocidad de tu modem? No merece la pena adquirir un módem más rápido si tu ISP no es capaz de soportar esa velocidad. Como regla de oro, deberías poder conectar a la máxima velocidad a la hora que sea en un máximo de tres intentos.

Confianza. ¿Su servidor Web está siempre accesible? A veces los ordenadores donde los ISPs almacenan sus páginas Web necesitan ser reiniciados, tiempo durante el cual tu página Web no será públicamente accesible. Deberás asegurarte que el lugar donde pongas tu página tenga el menor tiempo de inactividad. Como regla, el servidor donde almacenes tu página Web debe ser accesible al menos un 95% del tiempo, mejor un 99%.

Servicio. Especialmente si eres un recién llegado al mundo de la conexión a Internet, querrás que tu ISP ofrezca un excelente servicio de atención al cliente. Los buenos ISPs tienen una parte del sitio Web de la empresa dedicado a responder preguntas sobre el servicio. Cualquier proveedor debe incluir en su cuota mensual un número de teléfono gratuito de soporte técnico, que puedas llamar cuando necesites ayuda. En resumen y como regla, procura de tu proveedor tenga un teléfono gratuito de servicio técnico, poder llamar en horario comercial los 7 días a la semana, incluidos sábados y domingos, y tardar el mínimo tiempo posible en contactar con un técnico, evitando los contestadores automáticos.

 

¿Cuánto espacio necesitas?

Pregunta a tu ISP cuanto espacio tienes en tu cuenta. Ten cuidado: a veces los ISP te proporcionan una cierta cantidad de espacio de disco, pero ese espacio también se utiliza para guardar tu correo. (Cuanto mas tiempo uses un servidor de correo, mayor cantidad de correo te llegara, te sorprendería saber cuanto ocupa y lo rápido que lo llena). Si tu correo y tu Web comparten espacio, esto no es un gran problema, debes estar manejar bien tu correo y asegurarte de que no malgasta espacio. Descarga el correo que quieras conservar al final de cada mes, borra los mensajes que no quieras guardar al final de la semana.

La cantidad de espacio que necesitaras depende de lo que quieras poner. Fotos escaneadas pueden ser grandes ficheros si las pones sin control (trataremos sobre fotos mas adelante). Incluso si manejas inteligentemente los tamaños de los ficheros, una pagina personal con muchos dibujos distintos puede llegar a ocupar fácilmente 2 o 3 Mb. Los ficheros de sonido son también ficheros muy grandes -un solo fichero puede ocupar más de un megabyte. Si eres bueno con la música puedes evitar este problema usando MIDIs o ficheros RealAudio.

Existe una buena regla para tontos: 4Mb. de tamaño es un buen comienzo para tu pagina personal, pero probablemente crezca hasta los 8. Te darás cuenta de que cuando el tiempo pase, tu pagina ira ocupando progresivamente mas y mas espacio, subirás nuevas fotos, escribirás nuevas cosas que querrás publicar, montaras nuevas paginas y conseguirás llenar tu cuota de disco. En este punto vale la pena pagar para aumentarla hasta los 8Mb. 8Mb. es un buen punto de equilibro para una pagina personal, si tu pagina crece hasta los 12Mb. deberías pensar en dividirla y crear sub-sitios separados.

 

¿Que tipo de software debo usar?

No debería sorprenderte que alguien haya inventado el "middleware" (Software intermediario). Hablando estrictamente, un software intermediario es aquel que te permite escribir mas fácilmente programas.

Tú ya conoces algún software intermediario que son editores Web. Además de los paquetes comerciales como: Adobe PageMill o Microsoft FrontPage, algunos ISP ofrecen "editores Web" que premite construir tu Web por formularios online. La información introducida en los formularios se inserta en plantillas HTML. Voilá ya esta tu pagina.

No es necesario decir, que no te habrías leído este manual hasta aquí si quisieras que otro hiciera tu  página. Y eso es básicamente lo que hace el software intermediario. Te hace mas fácil crear tu pagina Web tomando todas las decisiones por ti, escribiendo el código por tu y subiendo las pagina a la red (ver capitulo "Herramientas HTML").

En algunos casos es software intermediario puede ser útil. El código HTML complicado suele ser a menudo mas eficientemente creado por un editor WYGIWYS que escribiéndolo a mano (suponiendo que el software intermediario produzca buen código, algo que no esta necesariamente garantizado). Pero para una composición Web básica, puede llevarte tan poco tiempo escribir a mano el código que aprender a usar el software intermediario.

De igual forma, puede ayudar el que el software intermediario te sugiera algún tipo de diseño cuando estas decidiendo como quieres que sea tu pagina Web, pero quieres que la decisión final sea tuya.

 

<Ayuda>Si te ofrecen software intermediario de diseño Web como parte de tu acceso a Internet o con
otro software asociado, deberías jugar con el para ver si te puede ayudar a hacer alguna sugerencia
interesante. De todas formas, no merece la pena invertir una cantidad de dinero en software
intermediario a menos que tengas en mente una aplicación profesional.
 

Por ultimo confía en tu habilidad para componer HTML, y escribe el código tu mismo. Estarás mas contento con el producto definitivo.

Componiendo y transfiriendo ficheros

Aunque hay muchos editores de texto en muchas cuentas shell de los ISPs, el mejor lugar para componer tu código HTML esta en tu propio ordenador. Como se decía en el capitulo 3 los editores de texto como SimpleText en Mac o Notepad/Wordpad en Windows 9X, son rápidos, fáciles de manejar e inmunes al lag de la red, un problema habitual cuando trabajas en una maquina remota.

Microsoft Word97 ofrece una opción HTML en el menú Salvar Como..., pero esta opción casi no funciona, el código producido es de mala calidad y omite gran parte de los diseños especiales que has especificado en tu pagina escribiéndolos. Es mejor introducir las etiquetas HTML a mano, elegir salvar el documento como texto puro y añadir la extensión .html manualmente.

Después de haber obtenido tus ficheros .html en tu ordenador y listos para ser subidos, te encuentras con el problema de como colocarlos realmente. No, no necesitas darle al botón de publicar de tu software intermediario para que lo haga por ti. La respuesta es un antiguo estándar de Internet llamado File Transfer Protocol o FTP (lee el capitulo 46 "Publicando sitios en Internet").

Puedes obtener tanto programas FTP gráficos como de línea de comandos en la red.

EN EL WEB

Visita las paginas siguientes para conseguir programas de FTP:

bulletC|NET: www.download.com
bulletStroud's Consummate Winsock Apps: http://cws.Internet.com
bulletTUCOWS : www.tucows.com

 

CUIDADO

Ten en cuenta que estas buscando clientes FTP y no servidores FTP

 

Los ISP pueden además tener sus propios métodos para transferir los ficheros, GeoCities por ejemplo cuenta con una pagina de upload que te permite navegar por tu disco duro, seleccionar ficheros localmente y luego subirlos a tu directorio Web en el servidor de GeoCities. El navegador Netscape también cuenta con una opción de subida dentro de su menú fichero que funciona de la misma manera. El FTP suele ser más eficiente que la subida vía Web fichero a fichero porque te permite seleccionar más de un fichero a la vez.

 

CUIDADO

Acostúmbrate a usar el programa FTP antes de confiar tu pagina Web a el. Lo último que desearías es descargar una versión antigua de un fichero encima del nuevo cuando tratabas de subirlo.

 

Eligiendo el contenido

¿Entonces que poner en tu página personal?. Un vistazo por Internet revela un espectro de sitios tanto tan enormes que intimidan como tan sosos que aburren. Tu meta ahora es bastante simple, no ser soso. No te preocupes si la pagina que creas no gana premios. Tu pagina cambiara con tus intereses y personalidad, no debe ser una obra de arte que se exprese como deseas. No te sientas distinto o apartado del fenómeno online, recuerda que Internet es un sitio donde "cualquiera" puede ser publicado.

Con el riesgo de tratar lo obvio, la red es un sitio "realmente enrome". Colocar una página entera acerca de ti puede ser una idea interesante cuando consideras la cantidad de gente capaz de ver
cualquier página personal. Debes considerar, que "cualquiera" de los millones y millones de gente online pues pasar por tu pagina, y eso te debe inspirar precaución.

¿Que puedes hacer para expresarte pero permanecer seguro?

bulletTener cuidado cuando publicas cualquier foto sobre ti que consideres que puede ser descargada por otros. Si deseas eliminar problemas, asegúrate de que sean fotos adecuadas para cualquiera.
bulletAlgunos vendedores poco nobles buscan a trabes de páginas personales buscando direcciones de email, una vez que encuentren la tuya, la añaden a su enorme lista de mailing y la venden a varios compradores. Esto acaba siendo una mayor cantidad correo no deseado de la que te puedes ocupar. Hay algunas formas para evitarlo:
bulletPuedes preferir no poner tu email en tu página Web. Si quieres que la gente sea capaz de mandarte correos, añade una libro de visitas o un formulario(veremos esto mas tarde).
bulletDe la misma manera crea un vinculo que tenga un texto o imagen distinto de tu correo E-mail <a href="mailto:sapiens@aya.yale.edu">Julia</a>
bulletEscribe tu correo de forma que los humanos lo entiendan pero los programas recolectores de direcciones no, por ejemplo: sapiens@aya.yale.edu como sapiens(arroba)aya(punto)yale(punto)edu. Asegurate de explicar como traducirlo, en caso de que los humanos tampoco la entiendan.

 

Atrévete a ser diferente

Tu quieres que tu pagina sea única, excitante y sobre todo tuya. Hay miles y miles de paginas personales en la red, muchas de las cuales son idénticas entre si. Tú no quieres que tu página se una a las sosas y sin sentido. Si alguien aterriza en tu página mientras navegaba en la red, quieres que se entretenga.

¿Que significa "diferente" en una pagina personal? No necesariamente significa que tenga los últimos avances de la red. Solo porque tu pagina este animada con multimedia de gran ancho de banda y applets complejos no significa que sea especial. Tampoco implica que una aproximación en blanco y negro minimalista donde no acabas las frases. Recuerda, una buena pagina tiene debe su éxito tanto a sus
contenidos como a su estilo.

Tu página debe ser tan diferente como tú eres. ¿Que te hace ser diferente? ¿Tienes hobbies especiales, talentos o intereses que no han sido bien expresados por nadie mas en la red? Incluso si ya existen páginas acerca de tus pasatiempos preferidos ¿puedes añadir algo nuevo y fresco?

Más importante aun, ¿cuales son tus rasgos más notorios de tu personalidad que no están representados en ninguna parte de la red? Eso es lo que hará tu página diferente - y merecerá el viaje de los visitantes a tu página.

Qué funciona en la red

Otro factor importante cuando estas planeando el contenido de tu pagina es si fácil o no colocarlo en la red. Por ejemplo una novela es difícil de publicar en la red. Imagina bajar atravesando paginas y paginas de texto que daña a la vista. El comic es igual de ineficiente en la red, porque la mayor parte del tiempo estarás esperando a una gran imagen, mientras que tardaras muy poco en leértelo una vez que este bajado.

La red es un medio propio, como la televisión o la radio, y suele ser equivocado con un periódico o un libro. Hay una serie de cosas que debes tener en cuenta cuando publicas para un medio particular. Aquí están una serie de parámetros a tener en cuenta cuando selecciones contenido para tu página personal:

bulletLa primara pagina que ve un navegante -tu pagina índice- será mas efectiva si no requiere desplazarse verticalmente. Esto in indica que no se deba desplazar, de hecho debe tener , si conlleva un sistema de navegación grafica encima de otro textual (lo veremos mas tarde en este capitulo). Tu página de inicio debe cargar rápido y dar al visitante una imagen inmediata del contenido de la página.
bulletSi tu pagina principal tiene añadidos que requiere interpretes especiales en el navegador cliente (plugins, java ...), asegúrate de que se pueda visualizar para la gente que no los tiene.

Aquí hay una serie de ayudas para maximizar la velocidad de descarga:

bulletNinguno de tus ficheros .html debe ser mayor de 65kb. Si los son divídelos en fichero más pequeños y enlázalos con vínculos de atrás y adelante al final de los mismos.
bulletNinguna de tus imágenes debe ser mayor de 45Kb. Si tienes una razón por la que quieras tener imágenes más grandes o mas detalladas pon una versión en miniatura de las mismas y crea un vínculo a las grandes. Esto permite al visitante esperar si quiere a las imágenes más grandes.

 

Creando un tema

Un tema en tu pagina personal si mas que una forma de impresionar visualmente, es una manera efectiva de magnificar el impacto de tu contenido, haciendo que la pagina repita lo que eres aun mas claramente. Como Disney World o Hard Rock Cafe, asociar un tema común dará a tu página tanto un estilo como una autenticidad personal, y al igual que el castillo en Disney World como el coche de Hard Rock Cafe, el tema de tu página hará que cada detalle individual sea distintivo de ti.

Como la Web es por encima de todo un lugar visual, el tema debe estar basado en una serie de motivos visuales, una plantilla de color común y una fuente propia son un buen punto para empezar (ver capitulo 19: "Trabajando con fuentes").

Puedes preferir un formato claro y limpio con un color sólido de fondo, una barra lateral simple, unas imágenes que concuerden y una fuente básica o puedes querer un tema alegre, enmarañado con colores intensos e imágenes excitantes. Pero ten cuidado, recuerda que tu pagina debe ser legible sin herir los ojos de nadie.

También puedes querer desarrollar una imagen de marca para usar a trabes de tus páginas, como tengo en mi página personal. Un pequeño y rápido de cargar gif de un elemento de tu elección -un mapa del mundo, tu personaje de dibujos animado preferido, un bate, una animal concreto o una flor- pueden servir como la base de tu logo personal, incorporando ese logo en tu temas personalizara mucho mas tus
paginas.

Enseña tus colores verdaderos (los 216)

En el capitulo 27 "Formatos de gráficos Web" puedes aprender acerca de la paleta de 216 colores que la mayoría de navegadores interpretan. Hay hasta siete colores diferentes que puedes especificar cuando creas tu tema:

bulletColor de fondo
bulletColor de la fuente
bulletColor de los vínculos
bulletColor del vinculo activo
bulletColor de vinculo visitado
bulletColor de la barra lateral/decorativo
bulletColor de fondo de las celdas de una tabla

Los diseñadores Web responsable elegirán de entre los 216 colores. Los mas aventureros pueden ir mas lejos, escogiendo colores a trabes de un programa de imágenes como el Photoshop, anotando el valor de las componentes RGB y traduciéndolas en hexadecimal, usando una de las muchas utilidades disponibles online o trabajando con una calculadora científica (ver capitulo 24 "Conceptos de color")

 

EN EL WEB

bulletUn convertidor RGB-HEX online basado en Java esta disponible en:
www.cen.uiuc.edu/~mhossai/java/color.html

 

Por supuesto, algunas páginas personales son más irreverentes en su acercamiento al color. Esto también es perfectamente aceptable -no hay una policia del color que te perseguirá para que sigas un tema determinado!

Fuentes

Los navegadores no han sido históricamente tan inteligentes con las fuentes como los procesadores de texto, los navegadores solo reconocían si la fuente era de anchura fija o variable (esto es si la anchura de un letra era constante o no). Los nuevos avances en HTML han permitido a los navegadores ser más listos. Hay una etiqueta común <FONT> que tiene atributos (ver capitulo 19), y HTML 4.0 soporta que la fuente se controle con hojas de estilo. Para mas información sobre hojas de estilo lea el capitulo 12 "Introduciendo hojas de estilo".

Usar fuentes nos permite especificar el tipo de letra con el que aparecerá la página personal -una parte importante de tu tema.

Es puede elegir entre las fuentes TrueType, las de Windows, las de Macintosh, las fuentes Serif, las San Serif, cualquier clase de fuente que te guste. El único detalle es que para que el navegante pueda ver la fuente especificada, "debe tener esa fuente instalada en su ordenador".

Si usas fuentes comunes, no debería ser un problema, incluso si usas una fuente única y excitante que no tiene la mayoría de la gente y no es una fuente propietaria puedes ofrecer la descarga de la fuente en tu página para que la gente la vea como tú quieres.

 

Construyendo la navegación

Una vez que has elegido el contenido de la pagina y marcado un tema común, el siguiente paso en la construcción de tu pagina es pensar como concuerda todo. Querrás que tu página tenga un sistema de navegación que sea fácil de usar y de construir, uno que puedas manejar sin software intermediario y uno que no confunda a la audiencia. Aquí hay unas claves para construir tu sistema de navegación:

bulletNombre de fichero: Algunos - con o sin la ayuda de software intermediario- elige numerar sus ficheros HTML como un modo de seguirles el rastro. Esto nunca funciona. Es mucho mejor idea nombrar tus ficheros de forma descriptiva, recordaras su contenido mucho mas rápidamente y fácilmente mas tarde (ver capitulo "Cómo administrar la página WEB localmente"). Por ejemplo, digamos que eres un violinista. Diste un recital en 1996. Creas la pagina "Detalles del recital" con el programa del recital, fotos tocando el violín y sonidos de grabación en directo. Luego digamos en 1999 buscas ese fichero como es más probable que lo encuentres ¿como 1996_recital.html o como 00125.html?.
bulletDirectorios: Dependiendo de tu ISP es posible que puedas crear subdirectorios en tu directorio Web principal. Si puedes hacerlos, este es otro gran método para seguir el resto a los ficheros. Algunos preferirán guardar todas las imágenes en un directorio y todos los sonidos en otro. Otros harán directorios sobre un tema específico para varios temas en sus páginas personales. Volvamos al ejemplo del recital de violín. Si todos esos ficheros de sonido e imágenes del recital estuvieran en el mismo directorio que la pagina 1996_recital.html, los comandos HTML serán fácilmente abreviados: <IMG SRC="adagio.jpg"> en vez de especificar la URL completa en cada etiqueta de imagen. Además podrías tener otro fichero llamado adagio.jpg talvez de tu recital de 1998, en un directorio diferente y no habría conflictos.
bulletVínculos: La clave de la navegación en cualquier página es la estructura de sus vínculos. ¿Puedes llegar des de cualquier pagina a cualquier otra en poco tiempo? ¿Hay páginas accesibles solo si las vinculas desde otras? Tal vez puedas agrupar algunas páginas en categorías para facilitar la navegación. Para cualquier solución, asegúrate de que sepas siempre como llegar a la página a la que quieres llegar -y que otros también puedan. De otra forma, las páginas pueden perderse y llenar tu precioso espacio de disco. Te asombrarías de cuanta paginas se perdidas aparecen haciendo una limpieza de tu pagina personal al cabo de un año de haberla publicado.
Demasiados vínculos: estratifica tu mundo

Si te acercas con la mentalización adecuada, tu página personal crecerá como un enjambre. Debes estar constantemente pensando en nuevas ideas de diseño, nuevas cosa que poner e innovaciones que la harán más especial. Y por cada nuevo fichero que añadas, tendrás un nuevo vinculo con el que tratar. Antes de de que te des cuenta, tendrás tantas paginas en tu directorio que empezara a parecerse a un armario desordenado. Y ordenar ese armario puede tomarte tu tiempo.

Se puede eliminar el problema del orden instituyendo un "sistema de almacenaje" en tu directorio Web. Piensa en capas. Cuando sea posible, agripa fichero en subdirectorios y organiza los subdirectorios fuera de tu pagina principal. Si no son posibles los subdirectorios, agrupa los ficheros con una palabra común en su nombre de forma que instantáneamente sepas sobre lo que tratan: 1996-recital.html, 1996_recital.adagio.jpg y demás. Crea "familias" de ficheros que estén relacionados, si un fichero no es específico de ningún área colócalo como "común" o "compartido".

HotList vs Barra de navegación

Entonces ¿cual es el metodo mas adecuado para ordenar vínculos?. Hay un compromiso entre flexibilidad y simplicidad. Si ya has realizado tu ejercicio de agrupación, podrás probablemente obtener una lista constante de temas a los que enlazar. En ese caso, puedes crear una barra de navegación - un imagen o serie de imágenes que están vinculadas a las partes mas importantes de tu pagina personal (ver capitulo "Diseñando gráficos especiales"). Esta barra da a tu visitante una visión rápida y consiga de los contenidos de tu página. Existe un peligro en crear una barra de navegación demasiado pronto o cuando la página todavía no esta terminada o evoluciona demasiado rápido. Lo que debes hacer entonces, hasta que tu pagina este terminada, es navegar a trabes de una hotlist o sea una lista de texto plano con vínculos -esta es una manera menos romántica de hacer las cosas pero es mas flexible y funcional para una pagina en rápido crecimiento. Puedes pasarte a una barra de navegación en cualquier momento. Las hotlists son también útiles para paginas en transición, si te decides a rediseñar tu pagina, un rápido vistazo a tus viejos ficheros te puede ayudar a reorganizar y mantener la funcionalidad de la pagina mientras reorganizas.

H3: navegación para todos

La mayoría de las navegantes que te visiten usaran navegadores estándar como Netscape o Internet Explorer. La supremacía de Navigator/Explorer ha tenido el efecto de que muchos diseñadores Web se han vuelto "vagos". ¿Por que crea una versión solo texto de tu sitio si casi todos pueden ver imágenes?

Hay cierta verdad acerca de que los navegadores han evolucionado mucho, y con ellos la posibilidad  del navegante medio de aprovechar completamente un diseño visual de la página. Todavía es una buena suposición el que el 10 o 20 por ciento de los visitantes no usan Navigator/Explorer. Para esa gente, hay algunas cosas que puedes añadir a tu pagina para hacerla mas accesible si que te cueste una gran
cantidad de tiempo (ver capitulo "HTML del mundo real").

Lo primero de todo es recordar el atributo ALT de las imágenes. Los usuarios de navegadores modo texto como Lynx se molestan por los diseñadores Web vagos que olvidan etiquetar sus imágenes. Esto es más importante si usas una barra de navegación grafica entre las áreas de tu página personal. El usuario de Lynx no será capaz de navegar por tu página a menos que etiquetas los botones y las áreas vinculadas de tu barra de navegación. Mantener gente en tu página siempre merece un poco de esfuerzo.

Segundo, no todos tienen una conexión veloz. Algunas personas con antiguos módems o conexiones lentas pueden encontrarse esperando y esperando a que tus imágenes aparezcan en sus pantallas. Una pequeña versión de tu barra de navegación en texto al final de tu página índice puede arreglar el problema, la gente puede simplemente ir a la parte de tu página que le interese sin esperar a que se descargue una imagen de navegación.

Finalmente, ten en cuenta la los navegantes que no tienen montones de plug-ins instalados en sus navegadores. Esto no significa que debas dejar de lado todos esos extras emocionantes, solo que la página no debe basarse en ellos. Haz la siguiente prueba: prueba a ver tu página en un navegador lento, de solo texto o sin plugins. Piensa en formas de optimizar el contenido de las páginas para ese tipo de navegadores sin tener que rehacer la página. Tu audiencia te lo agradecerá.

 

Escaneando y tratando fotos

La mejor manera para alegrar tu pagina personal son unas imágenes bien colocados y visualmente atractivas. Existen un montón de imágenes en varios repositorios de Internet, encuentra las que te gusten, juega con ellas en tu programa preferido de manipulación de imágenes y ya estarán listas para usar. Las únicas imágenes sobre las que tienes toda la responsabilidad son tus propias fotos.

Esto es menos imponente de lo que parece. Si no tienes tu propio escáner, podrás alquilar por algo parecido a cinco dólares por media hora en la tienda de fotocopias más cercana a tu casa. Escoge un puñado de imágenes que te gustaría tener en tu pagina personal, escanealas y optimizarlas. Si no estas familiarizado con el software de escaneo, los empleados de la copistería te pueden ayudar. Si eres un afortunado poseedor de un escáner, un rápido vistazo al manual te ayudara a manejarlo perfectamente.

Lo escáneres normalmente digitalizan las imágenes en un formato llamado TIFF. Te darás cuenta de que este formato no es adecuado para la Web por su tamaño. Escanear las fotos en formato JPG acaba con estos problemas. De todas formas el formato JPG esta optimizado para fotografías, si escaneas algo que no sean fotografías, como dibujos, deberías usar el formato GIF.

El formato de imagen general (GIF) limita los colores de la paleta de 256 colores. También usa un formato de compresión de imágenes distinto al del formato JPG. En general el formato GIF es más adecuado para imágenes con pocos colores, mientras que para imágenes de muchos colores es mas adecuado el formato JPG. Si tienes dudas, prueba a salvarlo como ambos formatos y ver cual obtiene un tamaño menor.

Programas útiles y donde conseguirlo

La primera cosa que necesitas una vez que tienes un disquete con un puñado de imágenes escaneadas es conseguir un programa de retoque fotográfico. El mejor del mercado es Adobe PhotoShop, un programa comercial de fácil obtención en cualquier tienda de ordenadores. Es el programa con mas opciones y mas robusto del mercado en estos momentos y con un precio adecuado a su calidad.

Para aquellos interesados en otros programas de manipulación de imágenes, también existe programas shareware con muchas opciones de las que tiene PhotoShop sin el elevado precio del primero.

Uno de los mas populares de estos es el Jasc Paint Shop Pro, que te puedes descargar de cualquier pagina de programas shareware de Internet. Para mas información sobre programas alternativos visita el capitulo "Utilidades para gráficos Web".

Para visualizar y convertir fichero de imágenes, Microsoft ahora coloca el programa Photo Editor con el paquete Office 97. Si no eres un fan de Microsoft, también puedes descargarte LView Pro, uno de los programas originales de imágenes Web. LView proporciona además la opción de crear GIF con fondos transparentes.

Animar GIFs puede hacerse fácilmente con GIF Construction Set de Alchemi MindWorks, que puede ser descargado desde las páginas de shareware o también desde su página principal: www.mindworkshop.com. Esta es una buena manera para añadir algo de animación a tu página personal sin necesidad de la utilización de plugins. Se comprime una serie de imágenes GIF en una secuencia, el programa crea un
índice y lo que resulta es otro fichero GIF tiene casi el mismo tamaño que los ficheros originales. Simplemente introduce el GIF en tu código HTML de la misma forma que lo harías con cualquier otra imagen y el tratara con la animación.

Diversión con mapas de imágenes

Si has evolucionado a una barra de navegación y quieres que sea algo distinto a una serie de botones, un mapa de imagen puede ser lo que necesites. Un mapa de imagen empieza con la imagen que tu elijas (los navegadores antiguos solo soportan mapas de imágenes de ficheros GIF pero los navegadores actuales como Navigator/Explorer también soportan ficheros JPG). Luego seleccionas una serie de zonas de la imagen para que sean enlazadas con ficheros a tu elección.

Los mapas de imágenes son uno de los casos para los que los programas intermediarios son de gran ayuda. Un programa shareware llamado MapEdit, disponible en www.boutell.com, es uno de los mejores para generar el código de los mapas de imágenes. (También lo puedes hacer tu mismo pero suele ser muy costoso)

MapEdit te permite seleccionar áreas de la imagen pinchando y arrastrando, una vez que has creado el polígono de tu elección alrededor del área adecuada, el programa te pedirá que introduzcas la URL del fichero a enlazar. El código se salva en el fichero que especifiques -no necesitas copiar y pegar.

Ten en cuenta que es más eficiente usar un mapa de imágenes en el lado del cliente que en el lado del servidor. Es un mapa de imágenes del lado del servidor, solo el ordenador donde se guarda el fichero sabe hacia donde apuntan los enlaces. Habrás visto este tipo de mapas de imágenes al colocar el puntero sobre la zona activa aparecerá un formula numérica en vez de un nombre de fichero en la parte inferior de la pantalla. Los mapas de imágenes del lado del cliente enseñan al ordenador del visitante adonde apuntan los vínculos, colocar el ratón encima de un mapa de imágenes de cliente te mostrara el nombre del fichero al que apunta el vínculo.

Los mapas de imágenes no deben ser "islas". En otras palabras, no hagas que tu mapa de imagen la única forma de navegar por tu página. Como se ha mencionado anteriormente, una barra de navegación con fuente reducida al final de tus páginas, puede solucionar el problema de carga de tu página.

Obtener comentarios

Una de las partes mas excitantes de tener una pagina personal en Internet son los comentarios que podemos obtener. La gente experimentara con ella y se divertirá con ella o no le gustara, comentarla, dar ideas para mejorarla, a veces incluso ofrecer un vinculo desde sus propias paginas personales. Para asegurarte de que recibes todos los comentarios, debes de colocar en tu página formas de comunicarse contigo.

Recuerda los problemas de la gente que pueda visitar tu página. No debes airear tu dirección de correo demasiado en tu página si no quieres obtener correo de extraños. De la misma manera si tu pagina no trata sobre temas que puedan atraer a gente indeseable y eres un poco aventurero tal vez debas añadir un vinculo de correo (ver capitulo "Enlazando las páginas") para obtener esos comentarios, nuevos
contactos y un mayor sentido de comunidad en la red.

La función "mailto:"

La manera mas sencilla de que los navegantes te envíen un correo es añadir un vinculo directo
"mailto:" en tu pagina. El HTML para esto es simple:

<code>Me gustaría que me escribieras a <A HREF="mailto:sapiens@aya.yale.edu">sapiens@aya.yale.edu</A>!

La función "mailto:" lanza el programa de correo asociado al navegador que tiene tu visitante. Este no es siempre el programa elegido por el navegante. En el caso de que tu navegante no tenga configurado su programa de correo, insertar tu dirección de correo en cualquier otra parte de tu Web permitirá a tus navegantes copiarla a su programa de correo.

Libros de visita

Un libro de visita en otra solución para el problema de los programas de correo no configurados. Los navegadores pinchan en el vínculo de tu libro de visitas y son guiados a una página conteniendo un formulario HTML de tu construcción. Pregunta lo que quieras en el formulario, te sorprenderá ver lo que la gente responde.

Puedes recibir los resultados del formulario en texto puro en tu correo especificando un vinculo "mailto:" a tu dirección como la "acción" de tu formulario. también existen agentes que tratan la información de tu formulario en la red, yo recomiendo General Form Manager, un script freeware por el productor shareware italiano Sarum, cuya pagina principal el www.sarum.com. Un ejemplo del código de activación de un CGI (ver capitulo "Scripts CGI y preprocesamiento") se puede ver en el siguiente ejemplo de código. Tu ISP o tu servicio de alojamiento pueden ofrecerte sus propios agentes de proceso de formularios.

<FORM action="http:saatel.it/users/lore/cgi-bin/gfp" method=get> <INPUT type="hidden" name "sendto" value="sapiens@aya.yale.edu">

Un libro de visitas es una manera segura de asegurar la pagina en contra del spam, la gente que "quiera" comunicarse contigo acerca de tu pagina "puede", y la gente que se recolecta direcciones de correo no se molestara en rellenar tu libro de visitas.

Caso en concreto: La evolución de una pagina personal

Al principio de 1997, Juan  decidió que quería establecerse en Internet. Su carrera la había dado ciertos conocimientos sobre diseño: había editado anteriormente un periódico de una empresa antes de cambiarse al trabajo de especialista de diseño de una imprenta, después había empleado una gran cantidad de tiempo buscando sobre sus hobbies preferidos, el cine y la música, y finalmente se decidió a montar su propia página personal en Internet.

El ISP de Juan

Juan eligió contratar a un ISP local antes que uno nacional. Como residente de Madrid, Juan encontró un cierto ISP adecuado para él. El paquete básico le dió 5Mb. de espacio Web y una dirección de correo por 9 € al mes.

El contenido de Juan

Juan quiso que su página remarcara tres cosas importantes: sus hobbies, su casa y familia y su carrera. Tenía un montón de contenidos listos para la primera sección. Como cocinera amateur, una de las metas de Juan para montar su página era publicar algunas recetas propias. También había hecho hace poco un tour por Europa y quería compartir sus mejores fotos del viaje con algunos amigos que hizo allí. Así tuvo su propia página, como su familia y sus amigos. Otra de las páginas se creó alrededor de varias modificaciones que hizo Juan a su casa en 1997. Como muchas paginas personales, la de Juan contenía su biografía, una lista de vínculos y un libro de visitas. Pronto decidió usar su página personal para ayudarse a buscar un trabajo colocando un curriculum online y reverenciando su URL en todos los curriculums escritos que enviaba.

El tema de Juan

Juan no escogió un tema fuertemente visual o un look común entre sus páginas. Prefirió dar a cada una su propio carácter, siendo su tema simplemente un línea de navegación al final de las paginas. Juan acabo sus paginas con una flecha apuntando al inicio, el color de la flecha cambiaba según el esquema de colores de cada pagina.

Un tema no tiene porque ser una plantilla para cada área de tu página, cualquier vínculo visual común que unifique los diferentes temas de tu página personal bastara.

La navegación de Juan

Juan empezó su página con un hotlist pero, siendo una persona muy visual, pronto se paso a una barra de navegación basada en un mapa de imagen.

Se encontró con un problema común con las barras de navegación: el contenido de su página continúo creciendo. Después de varios meses de dejar su barra de navegación estática, Juan añadió algún contenido nuevo -fotos de su recién pintada cocina y salón. Entonces no había espacio en su mapa de imagen para arreglos de la casa.

El código siguiente es el código fuente de su mapa de imagen:

<MAP NAME="mapaindice"> <IMG border=0 src="mapaindice.gif" usemap="#indexmap"> <default href=indice.htm>
<AREA SHAPE=RECT COORDS="0,2,105,59" onMouseOver="windows.status='Amigos y familia'; return true"
HREF="amigos.html">
<AREA SHAPE=RECT COORDS="0,60,105,121" onMouseOver="windows.status='Enlaces'; return true"
HREF="enlaces.html">
<AREA SHAPE=RECT COORDS="0,124,103,211" onMouseOver="windows.status='Firma mi libro de visitas'; return true"
HREF="librovisitas.html">
<AREA SHAPE=RECT COORDS="0,214,103,280" onMouseOver="windows.status='Poesía'; return
true" HREF="poesia.html">
<AREA SHAPE=RECT COORDS="107,1,220,140" onMouseOver="windows.status='Album de fotos'; return true"
HREF="fotos.html">
<AREA SHAPE=RECT COORDS="156,141,220,213" onMouseOver="windows.status='Mi carrera'; return true" HREF="Mi carrera.html">
<AREA SHAPE=RECT COORDS="106,142,153,214" onMouseOver="windows.status='Curiosidades'; return true"
HREF="curiosidades.html">
<AREA SHAPE=RECT COORDS="222,81,314,181" onMouseOver="windows.status='Piano'; return true"
HREF="piano.html">
<AREA SHAPE=RECT COORDS="222,182,313,280" onMouseOver="windows.status='Colección de chistes'; return
true" HREF="humor/">
<AREA SHAPE=RECT COORDS="222,0,314,79" onMouseOver="windows.status='Amigos'; return true"
HREF="amigos.html">
</MAP>

Solventó el problema añadiendo un vinculo Casa en su pequeña barra de navegación textual y después actualizaría la imagen mas tarde.

Las imágenes de Juan

La mayoría de la página personal de Juan esta hecha con fotos. Una razón es que puso su Web para poder publicar sus fotos del viaje a Europa, también mantiene una foto de cada persona mencionada en la pagina de Amigos y Familia.

Es una fan de PhotoShop y hace poco que se ha comprado un scanner.

Otras características de la pagina de Juan

Usa un script CGI para procesar su libro de visitas, que le fue proporcionado por su ISP, el siguiente código es el que utiliza con el script CGI.

 

<HTML>
<HEAD>
<TITLE>¡Firmalo!</TITLE>
</HEAD>
<body text="#ffffff" link="#33ccff" vlink="#ff99ff" bgcolor="black">
<P align=center><IMG src="el libro.gif" alt="El libro">
<BR><BR> Hola y bienvenido a mi página Web. Espero que me firmes el libro de visitas y que
me cuentes tu opinión
<FORM action="http://www.servidor.com/cgi-bin/mail.cgi" method=get>
<INPUT type=hidden name="whoto" value="juan@servidor.com">
<INPUT TYPE=hidden name="url" value="http://www.servidor.com/~juan/gracias.htm">
<TABLE BORDER>
<TR><TD><B>Tu nombre:</B>
<TD><INPUT TYPE="text" NAME="sender" VALUE="" SIZE=30, MAXLENGTH=50>
<BR>
<INPUT TYPE=hidden name="Respuesta del libro de visitias" size=30>
<TR><TD><B>Tu ciudad:</B>
<TD><INPUT TYPE NAME="l" VALUE="" SIZE=30, MAXLENGTH=50>
<BR>
<TR><TD><B>Tu edad:</B><TD><INPUT TYPE="text" NAME=’2" VALUE="" SIZE=3, MAXLENGTH=3>
<INPUT TYPE="radio" NAME="3" VALUE="MYOB">No es asunto tuyo
<TR><TD><B>Tu género:</B> <TD>
<INPUT TYPE="radio" NAME="4" VALUE="Masculino">Masculino
<INPUT TYPE="radio" NAME="4" VALUE="Femenino">Femenino
<BR> <TR><TD><B>Tu signo astrológico:</B><TD><select name="5">
<OPTION> <OPTION>Aries
<OPTION>Tauro
<OPTION>Geminis
<OPTION>Cancer
<OPTION>Leo
<OPTION>Virgo
<OPTION>Libra
<OPTION>Escorpio
<OPTION>Sagitario
<OPTION>Capricornio
<OPTION>Acuario
<OPTION>Piscis
</SELECT> <BR>
<TR><TD><B>Yu direccion de email :</B><TD>
<INPUT TYPE="text" NAME="7" VALUE="" SIZE=30 MAXLENGTH=80><BR>
<TR><TD><B>Tu URL:</B><TD><INPUT TYPE="text" NAME="8" VALUE="http://" SIZE=50, MAXLENGTH=100
</TR>
</TABLE>
<P> <B>Cuentame algo sobre ti:</B><BR>
<TEXTAREA NAME="12" ROWS=9 COLS=72>Bien, desde que te conocí...
</TEXTAREA><P> <INPUT TYPE=submit VALUE="¡Envia todo a Juan!">
<INPUT TYPE=reset VALUE="Quiero empezar de nuevo. Borrar el formulario">
</FORM> <P align=center><IMG src="arriba.gif">
</body>
</HTML>

 

Para mas información acerca de CGI y formularios, leer el capitulo "Scripts CGI y preprocesamiento"

Nuestro amigo Juan ha añadido últimamente un archivo de ficheros de texto graciosos, pero no creó una pagina HTML como índice de estos ficheros.

En vez de eso los colocó en un directorio llamado "humor", al cual ella creó directamente un vinculo. Pulsando en el vinculo, en ausencia de de un fichero índice, aparece la lista por defecto de todos los ficheros en ese directorio. Este es el método más simple y más flexible de asegurarse de que la lista siempre concuerda con los ficheros presentes.

En general, una pagina bastante satisfactoria, con bastante expresividad, identidad, sentido común y conocimiento Web detrás de ella.

Sigue el consejo de este capitulo, y no hay duda de que tu pagina personal estará funcionando enseguida.

En adelante

Añade JavaScript a tu pagina personal. Visita el capitulo "Añadiendo JavaScript" - ¿Quieres algunos consejos sobre diseño y estructura de paginas? Pásate por el capitulo "Diseño efectivo de paginas" - ¿Acabaste con tu pagina personal y quieres una para tu negocio? Vista el capitulo "Planeando un sitio de Internet de un pequeño negocio"

 

Arriba


 © 1997-2009 Duiops (http://www.duiops.net)
 Prohibida la reproducción parcial o total de los textos o las imágenes.

 Para comentarios, usar las direcciones e-mail de contacto