1 Introducción
2 Diez puntos básicos de un buen diseño
3 Estudio previo
3.1 Introducción.
3.2 Propósito el sitio.
3.3 Visitantes del sitio.
3.4 Recogida de información.
3.5 Definición de la estructura
4 Diseño gráfico
4.1 Tamaño de las páginas.
4.2 Tipos de páginas en un sitio Web.
4.3 Imágenes.
4.4 Composición de la página. Maquetación.
5 Organización de archivos.
5.1 Convenciones de denominación.
  5.1.1 Nombres de archivo mal escritos.
  5.1.2 Nombres de archivo poco claros.
  5.1.3 Longitud de los nombres de archivo.
  5.1.4 Extensiones de archivo correctas.
  5.1.5 Estructura de directorios.
5.2 Guardar archivos.
6 Apéndice. Un resumen en 28 cuestiones.

Introducción

En el desarrollo de este tema estudiaremos los diferentes aspectos a tener en cuenta para elaborar un sitio Web adaptado a las necesidades de la información que se vaya a presentar en el mismo.
Inicialmente, las páginas web resultaban muy sencillas, limitándose a una serie de documentos que ofrecían únicamente información a modo de texto y unas pocas fotografías, “maquetadas” solamente mediante el uso del HTML. Sin embargo el rápido desarrollo que ha sufrido la red, ha hecho que se desarrollen una serie de nuevas herramientas aplicables a la realización de páginas web, que afectan tanto a nivel de programación como de diseño.
Esto ha provocado la aparición de sitios cada vez más complejos, y con un volumen de documentos mucho mayor. Lo que requiere, que, para que el visitante no “se pierda” navegando mientras busca la información que desea, se realice previamente una perfecta planificación y estructuración de los contenidos antes de ponerse a escribir ni una sola línea de código.
Además, estas nuevas herramientas afectan tanto a la programación en si del sitio (jsp, asp, php, javascript, java, .....), como a su aspecto gráfico (flash, realidad virtual ..), lo que ha provocado que, cada vez más, no sea posible que una única persona realice todo el trabajo, sino que será necesario formar un equipo de trabajadores que realicen cada uno su parte, por lo que todas las tareas a realizar deberán estar planificadas, repartidas y perfectamente coordinadas desde el primer momento.
Por otra parte, hay que tener muy presente las necesidades de cada trabajo de manera separada. El tipo de empresa, el producto que se vende, el público al que va destinado.... son datos muy importantes a tener en cuenta a la hora de planificar el sitio web.

Diez puntos básicos de un buen diseño.


Estudio Previo

Introducción.

boceto en papel de una página webEl paso previo es planificar detalladamente los contenidos y la estructura de la web. Aquí se trabaja mejor con lápiz y papel, y deben anotarse todas las ideas que surgen. Ya se verá si son o no aplicables. Debemos meditar bien la estructura de la web, para que los cambios que se deban introducir después de empezar no supongan demasiadas complicaciones. Para empezar a preparar el diseño de las páginas conviene utilizar papel cuadriculado, para tener una idea exacta de las proporciones y la composición. Podemos buscar inspiración e ideas viendo qué hacen en otros sitios web: qué estructura de navegación tienen, qué colores emplean, el tratamiento tipográfico...Debemos preparar una lista de las secciones y pensar un orden lógico para estructurarlas. Existen diversos modelos de navegación; lineal, en red, en árbol... el menos flexible y desaconsejable es el lineal, excepto si el sitio tiene un contenido narrativo, puesto que hace más difícil moverse de una parte de la web a otra.

Propósito del sitio

Lo primero que debemos preguntarnos a la hora de planificar un buen sitio web es ¿para qué creamos este sitio?. Puede parecer una pregunta trivial, pero es de gran importancia, ya que si tenemos claro el objetivo a conseguir, el resto del trabajo resultará mucho menos costoso.
No es lo mismo realizar un sitio web para publicar un manual para desmontar el motor de un automóvil, que uno cuyo objetivo es mostrar un catálogo de productos, ni otro en el que se pretenda vender esos productos, o uno en el que se ofrezca banca electrónica.  En todos ellos, las herramientas a utilizar, los lenguajes de programación empleados y el aspecto visual de las páginas, también serán diferentes y deberán amoldarse, primando unos aspectos en detrimento de los otros, con el fin de conseguir el objetivo final del sitio: ofrecer información, hacer el sitio atractivo para que el visitante se quede en el y vea nuestros productos, aumentar la seguridad de las transacciones de dinero ....

Visitantes del sitio

Una vez tengamos claro el propósito del sitio, debemos preguntarnos quién va a ser nuestro cliente (persona o entidad para la que vamos a crear el sitio) y qué tipo de personas van a visitarlo.
Nuestro cliente será quien defina los contenidos a incluir en la página web. Debemos adaptar el diseño y el aspecto de las páginas a la imagen corporativa de la empresa o entidad para la que crearemos el sitio. No olvidemos que lo que haremos será “su imagen” en la red.
Lo segundo, es decir, el tipo de público al que el sitio web va destinado, marcará la forma en la que presentemos esa información. No es lo mismo crear un sitio que será visitado por personas con experiencia en la navegación por Intenet que uno en el que accederán personas con unos mínimos conocimientos sobre el tema.
Si nuestros visitantes van a ser “novatos” en la navegación, debemos hacer que el sitio sea lo más claro posible, con menús de navegación accesibles, y claros y una estructura que posibilite al visitante la localización de la información al menor número posible de cllics del ratón.
Sin embargo, si los que nos visitan son usuarios avanzados en temas de navegación por Internet, podemos concedernos algunas pequeñas licencias a la hora de diseñar los menús, o presentar los contenidos.

1

Si vamos a diseñar una tienda on-line, a través de la cual se van a realizar transacciones de dinero, debemos preocuparnos no solo porque esa transacción sea segura, sino también porque el formulario en el que el usuario debe introducir sus datos sea lo más sencillo y claro posible, además de que todo el entorno le proporcione una imagen de seguridad. Es decir, no sólo el viaje de la información debe ser seguro, sino que además debe parecerlo.
Y por último, si el sitio web que estamos creando está destinado a personas del mundo del diseño, nuestro sitio debe tener un aspecto muy atractivo, y un diseño gráfico muy perfeccionado. En este caso potenciaremos la imagen frente a la información o navegabilidad, aunque sin olvidarnos nunca de esta última.
De cualquier manera, y cualquiera que sea el caso en el que nos encontremos, nuestro sitio web debe ser lo más claro y navegable posible, para evitar que el usuario se “pierda” entre enlaces y documentos.

Recogida de información

Una vez completadas las dos primeras fases, es el momento de recopilar toda la información que necesitaremos para realizar el trabajo. Logotipos, fotografías, folletos, textos .... cualquier cosa que pueda ayudarnos a hacernos una idea de cómo es la empresa para la que realizaremos el trabajo, cómo ha realizado campañas de publicidad previas, a qué tipo de público las dirige, etcétera.
Una vez tengamos la información en nuestro poder, ha llegado el momento en organizarla y estructurarla, para realizar un buen organigrama de nuestro sitio, lo que definirá la estructura final que tendrá.
Es el momento de “darle la lata” al cliente y pedirle que nos proporcione todos los materiales que necesitemos para comenzar a trabajar.

Definición de la estructura

Una vez recopilada la información a incluir, será necesario organizarla y estructurarla para hacer que el visitante pueda acceder a ella con la mayor facilidad.
El entorno web, está considerado como no lineal, es decir, que en lugar de seguir la información de forma lineal, como en el caso de la lectura de un libro, la web capacita a los visitantes para hacer clic sobre un enlace y saltar a información complementaria  y sitios relacionados.
Esto crea al diseñador de sitios web la necesidad de proporcionar un sentido a la web para que los visitantes encuentren una estructura lógica y no se pierdan entre enlaces y enlaces. Uno de los puntos más importantes a definir en nuestro sitio web es qué estructura utilizaremos para organizar los contenidos, y donde colocaremos los enlaces.

Estructura jerárquica

1

Parte de una página principal, mediante la cual podemos acceder a diferentes páginas secundarias que a su vez nos dan acceso a nuevas páginas de 3er nivel, que pueden dar acceso a su vez a páginas de nivel inferior.

1

Dispondremos de un menú en la página principal que nos permitirá acceder a las páginas de 2º nivel en las que habrá un nuevo menú para acceder a las de 3er nivel y así sucesivamente.
Cada una de las páginas individuales deberá tener enlaces para acceder a las diferentes secciones principales, así como a la página inicial.

Estructura lineal

1

Se trata de una estructura que, partiendo de la página principal va recorriendo el resto de las páginas de una en una, como si de las páginas de un libro se tratara.
El sistema de menús en este caso, pasa por una página de entrada que nos lleva a la primera página de contenidos, y desde cada una de las páginas de contenidos tendría dos enlaces, uno para ir a la siguiente y otra para volver a la anterior.
Es extraño que este tipo de estructuras lineales se empleen como estructura básica de un sitio web, aunque si es muy utilizado en combinación con la anterior para organizar los contenidos de un apartado concreto, en determinadas circunstancias. En ese caso se habla de una estructura jerárquica-lineal, o mixta.

Lineal con jerarquía

Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea.

1
Estructura compleja mezcla de lineal y jerárquica. Muy habitual en la red.

Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente este tipo de estructura.

1
Disposición menos habitual de las páginas de un sitio Web.

Red

La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente.
Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad.

1

Frames

El usuario dispone de un menú permanente, desde el que puede acceder a todas las diferentes secciones del sitio web. Desde estas secciones, puede partir cualquier otro tipo de organización, sea jerárquica, lineal o mixta.

Diseño gráfico

Una vez hemos decidido cual será la estructura que tendrá nuestro sitio, los datos que vamos a incluir y como vamos a organizarlos, ha llegado el momento de pensar en el aspecto.
Lo primero a tener en cuenta, es qué colores vamos a utilizar. Para ello tendremos que fijarnos en la información recopilada, folletos, logotipos etc. y decidirnos por los colores corporativos de la empresa o, en su defecto, por colores que vayan acordes con esa imagen.
Para empezar a diseñar, además de los colores a utilizar, tendremos que tener presente para qué tamaño de pantalla vamos a hacerlo. Hoy por hoy, y dado que la mayoría de los usuarios de Internet trabajan con resoluciones de 1024x768, adaptaremos nuestros diseños a ese tamaño.
Comenzaremos por arrancar el programa de diseño gráfico que prefiramos para plasmar una portada y un modelo de página de contenidos, de modo totalmente gráfico. Podemos plasmar 2 ó 3 modelos diferentes para que sea nuestro cliente final el que elija el que más le guste o nos pida que recombinemos ideas de dos de ellos ....
Una vez decidido el aspecto y la estructura que tendrá la página web, es el momento de empezar a desarrollar código HTML.

Tamaño de las páginas

Consideraciones

El tamaño de nuestras páginas es importante a la hora de iniciar el diseño gráfico de las mismas, y es la primera cuestión que debemos resolver. No existe un tamaño único pero si hay una serie de normas que nos llevarán a la elección del tamaño más adecuado.
Hay que evitar la necesidad de utilizar un “scroll” horizontal, la presencia de este es el primer síntoma de un mal diseño. Para esto fijaremos el tamaño mínimo recomendado para visualizar correctamente nuestra página ( en muchos sitios aparece en la parte inferior de la página una indicación con el tamaño de pantalla y el/los navegadores para los cuales la página ha sido optimizada) teniendo en cuenta cual es el tamaño de pantalla que usan la mayoría de los “internautas”;  actualmente las estadísticas indican que este tamaño es 1024x768 px por lo que nuestro diseño no debería ser mayor de 1000 px de ancho ( dejamos algo debido a la barra de ·scroll” vertical) quizás algo menos ya que no todos los navegadores tienen las mismas dimensiones en su pantalla (no obstante aún se solicitan muchos trabajos para tamaño de pantalla máximo de 800x600px). En cuanto a la altura, dependerá del contenido y de las siguientes consideraciones.

1

Tipos de páginas en una web.

Aquí consideramos algunas de las alternativas principales para el diseño de las páginas web y los sitios, para los diferentes niveles de estructura de que los dotemos.
Típicamente, una web tiene una página de inicio, índice, portada o homepage; de ésta dependen una serie de páginas de sección que permiten a su vez acceder a las diferentes páginas de contenido: artículos, páginas de catálogo, listas, fichas de productos, formularios... Esta estructura esencial puede complicarse más o menos, por ejemplo, introduciendo diferentes subsecciones y profundizando así la estructura. En general no es buena idea crear un esquema de navegación muy ramificado, porque confunde a muchos visitantes; para webs muy extensas es preferible una portada sin demasiado detalle porque también puede despistar; es preferible enlazar con las principales secciones y desde éstas, ir detallando la estructura.
Los criterios para diseñar las páginas correspondientes a cada nivel son distintos, respecto de la organización del espacio, el uso del color e imagen y la elección de la tipografía. En general, podemos considerar que a cada uno de los tres niveles (portada / secciones / artículos) las restricciones que podemos aplicar son las que detallamos en el gráfico siguiente:

1

Naturalmente, debe haber una cierta consistencia en el estilo gráfico y tipográfico de los tres niveles: no ha de parecer que, más que niveles distintos, sean webs distintas. Debemos plantearnos si optamos por un estilo gráfico basado en:

  • fotografías,
  • imágenes realistas,
  • imágenes simples en color o blanco y negro,
  • imágenes estilo cómic o caricatura,

iconos simples (símbolos, signos y señales),  o una combinación aceptable de más de una de estas opciones: pero cuidado con las mezclas indigestas. Por ejemplo, en una web de diseño sobrio, funcionan bien imágenes icónicas simples, pero desentonan mucho las imágenes caricaturescas.

La página de portada.

1La página de portada es un elemento decisivo de la web. Dado que es habitualmente el punto de entrada en nuestro sitio, la imagen que proyecta debe ser la deseada: el visitante debe adivinar qué se ofrece -o al menos sentir curiosidad por saberlo y navegar más adentro para verlo por sí mismo. Por tanto, conviene dedicar mucho más esfuerzo, proporcionalmente, a esta página, para hacerla atractiva, funcional y única.
Desde la página índice debemos proporcionar acceso a las páginas de secciones principales de nuestra web, aunque no es buena idea llenar el espacio con descripciones detalladas de éstas. Si queremos un índice general que incluya todas las páginas y secciones, puede ser más funcional añadir un enlace a una página diferente con un mapa de la web o sitemap. El estilo saturado de información de muchos portales de acceso a Internet no es recomendable para muchos proyectos; el exceso de opciones puede resultar desconcertante para muchos visitantes. Muchas webs que anteriormente tenían este aspecto superpoblado han optado por un cambio en la portada y hacerla más simple. Los portales más recientes, como Inicia (http://www.inicia.es) han reducido la carga informativa en la portada.
Se pueden anunciar de algún modo las novedades en la web, bien con un pequeño mensaje, bien con un enlace a una página donde se explica en detalle. Existen servicios como Freefind.com que crean automáticamente una página con las novedades, de modo que siempre está actualizada.
En la página inicial es más fácil recurrir al lenguaje visual que al escrito. Los textos deben ser concisos y claros, indicando qué encontraremos en la web o suscitando la curiosidad e interés del visitante. Probablemente, es en la página de inicio donde más podemos usar la imaginación y creatividad. No es necesaria una estructura previsible: podemos, casi debemos sorprender y entretener. Es un buen lugar para utilizar algo llamativo, como una película de Flash o efectos de mouseover. Lo mejor para encontrar inspiración es una vuelta por la web y ver qué hace otra gente. Algunos libros son particularmente útiles para el diseño de las páginas, por ejemplo muy manejable y inspirador Recetario de diseño gráfico de L. Koren y R. Wippo Meckler (ed. G. Gili.)

Las páginas de secciones y subsecciones.

1La Web debe estar constituida por secciones lógicas y bien estructuradas. Una página de sección dará acceso a los artículos relacionados; al añadir nuevos artículos bastará modificar la página de sección añadiendo un enlace. Para identificar las secciones -y distinguir unas de otras- se puede utilizar un color distintivo para cada una, combinado con un icono o imagen exclusiva. En muchas webs se utiliza una barra de navegación en la que se indica en qué sección estamos con un color diferente, o modificaciones semejantes, por ejemplo, oscureciendo o difuminando el resto de la barra de navegación.
Para decidir el diseño de las páginas de sección, no debemos perder de vista la facilidad con que podamos actualizarlas, añadiendo accesos a las nuevas páginas de contenido que incluyamos más adelante. Finalmente, en la mayoría de casos deben evitarse los marcos o frames. Este sistema navegación no ofrece ventajas significativas respecto de una barra de navegación dentro de la misma página y presenta una lista larga de inconvenientes (y resulta más difícil preparar todo.) Excepto para casos especiales, por ejemplo, un catálogo de imágenes de productos, no es una opción aconsejable.

Las páginas de contenidos o artículos.

1Realmente, éstas son las páginas de la Web. El resto no es más que un añadido para llegar aquí de la forma más fácil... pero son piezas clave, dada la forma en que se navega. Para un libro, la portada y el índice no tienen tanta importancia. Pero, por analogía, un buen diseño de portada puede ayudar mucho a mejorar las ventas de una publicación.
El principal criterio de las páginas de contenido es la claridad expositiva. El texto debe ser fácilmente legible, con una correcta distribución y ancho de las líneas adecuado. Las ilustraciones deben ser funcionales y el uso del color, en correspondencia, debe ser más sobrio que en la portada.
La distribución del texto en columnas, tan común en los medios impresos, presenta un problema en las páginas web. Ya que la unidad que se muestra en pantalla no es una hoja, sino una pantalla de tamaño variable, el texto en dos columnas o tres, en las páginas web no se distribuye de la forma previsible, de arriba abajo y de izquierda a derecha. Las columnas son, de hecho, independientes entre sí y el texto no fluye automáticamente. Así, no hay forma de crear un texto continuo realmente funcional para leer en pantalla. Por este motivo, una solución muy utilizada es optar por columnas asimétricas. La columna pequeña contiene enlaces, información adicional, pequeñas ilustraciones... y la columna más ancha tiene el cuerpo del texto y las imágenes mayores.
Para ir avanzando en la lectura de los artículos no debería ser necesario volver a las páginas del nivel superior. Para ello conviene proporcionar una o varias barras de navegación que lleven a las principales secciones, y botones para avanzar y retroceder, o moverse rápidamente por la página. Si ésta tiene una cierta longitud, es una buena idea colocar un botón para subir sin necesidad de desplazarse por la página con el ratón o los cursores (el estándar es una flecha que apunta hacia arriba.)

Imágenes

Composición de la página. Maquetación.

Llegados a este punto ya conocemos las diferentes maneras de crear una página web usando programas de edición gráfica y de texto, editores de html. Ahora se trata de adquirir una serie de conocimientos que nos faciliten nuestra tarea de diseño gráfico.

Desarrollo completo de un sitio con un programa gráfico.

Cada vez más existe la tendencia a desarrollar conceptos gráficos para un diseño web completos dentro de un mismo programa, hasta llegar al montaje de la página web misma. En contraste, durante los primeros años de la web, lo habitual era preparar cada uno de los elementos por separado. Las recientes versiones de programas como ImageReady, Fireworks o Xara permiten desarrollar los elementos gráficos de navegación, incluyendo html dinámico con “rool-over”, barras desplegables, mapas de imagen, etc... Este tipo de programas no sólo preparan toda la parte gráfica, sino que también son capaces de generar el código html necesario para colocar cada imagen en su sitio debido.

1
Normalmente, el diseñador empieza creando un prototipo a pantalla completa dentro de un programa de gráficos, aunque en una fase preliminar es frecuente que las ideas se manejen en papel, a modo de bocetos. Dentro de un programa de gráficos, las opciones de reglas y guías (estableciendo las unidades en píxels) son especialmente útiles para colocar con precisión los elementos gráficos y de navegación, los espacios asignados al texto y demás partes de la página. La resolución de pantalla que actualmente es el estándar es 800 por 600 píxeles tendiendo cada vez más a 1024x768. Si nuestro monitor permite trabajar cómodamente a una resolución mayor, la pantalla podrá acomodar una vista completa del desarrollo gráfico de la página web y al mismo tiempo las paletas y espacio de trabajo del programa en que trabajamos.
Inicialmente es mejor trabajar en modo de color completo RGB. Si es necesario ya reduciremos el número de colores de las diferentes partes de la imagen al recortarla y optimizar.

Recorte de imágenes (slicing)

Una vez el prototipo de página está listo debemos tomar varias decisiones:
¿Qué partes incorporarán texto normal y qué partes serán gráficos?
¿Debemos incluir efectos de javascript con algunos elementos (por ejemplo, efectos de “roll-over”-- cambios al pasar el ratón)?
¿Es posible sustituir parte del modelo con una imagen de fondo, o con una celda de tabla en color? Con estas alternativas economizaremos tamaño final en la página completa.
Para recrear la estructura de la página de forma que el navegador la muestre correctamente, se puede optar:
Por un mapa de imagen con la imagen completa que hemos creado, bien como jpg, bien como gif o png. Resultaría poco flexible y probablemente el tamaño del fichero sería bastante grande (a menos que pueda resolverse con pocos colores y que contenga grandes áreas homogéneas, en el caso de un gif). De todos modos, esta opción puede ser la más conveniente en algunos proyectos.
Cortar el prototipo en fragmentos que se optimizarán separadamente; algunos trozos no se guardarán como gráficos, sino que serán casillas de una tabla, o el fondo mismo de la página.
Aparentemente, la segunda opción reviste mucha más complicación. Si queremos crear una réplica en html de lo que hemos preparado como prototipo en el programa de gráficos, será necesario en primer lugar colocar con mucho cuidado una serie de guías para cortar a lo largo de ellas, evitando que falten píxeles o que haya superposiciones. Una forma de facilitar esta operación es activar la opción de "ajustar a las guías" en el programa.
Una vez preparadas las guías, simplemente seleccionamos los trozos con la herramienta de selección rectangular, copiamos. Abrimos una ventana nueva para la selección (algunos programas automáticamente asignan el tamaño de la selección actual al nuevo archivo; si no es así, basta tomar nota de este tamaño en el momento de seleccionar los fragmentos). Esta imagen parcial se optimiza y se guarda con el nombre que se quiera. El proceso se repite para cada una de las partes de la imagen que sea necesario guardar como gráfico: las partes que puedan resolverse como una celda vacía pueden dejarse.
Finalmente es necesario montar todo en forma de disposición de tablas o capas. Para ello nos hará falta el editor de html que utilicemos habitualmente.

1

Todo este proceso se puede simplificar mucho utilizando un programa que sea capaz de trocear la imagen y reconstruirla en forma de tabla html. Existen algunas utilidades gratis de este tipo, que pueden localizarse en servidores de programas como Softonic. Por otro lado, también es posible realizar el proceso de forma automática en los programas profesionales para edición gráfica para la web: Fireworks, Xara, ImageReady (incluído en Photoshop) El control que ofrecen herramientas de este tipo es muy grande y realmente pueden ahorrar tareas aburridas y concentrarse en el proceso creativo.
Por último está la decisión de generar un layout a base de tablas o a base de capas. Hasta hace poco tiempo, este dilema estaba fuera de lugar. La única manera realista de llegar a la mayor parte de usuarios era generar páginas web basadas en tablas anidadas. Sin embargo, desde hace unos meses, con la llegada de browsers que realmente soportan bien el estándar de html 4.01, con capas y dhtml, ya es viable plantearse esta alternativa; ésta presenta numerosas ventajas, en especial que el código resultante es mucho más limpio, más flexible y con posibilidades de interacciones dinámicas.

Cambios en bloque

A menudo hace falta obtener imágenes de un tamaño constante, con una resolución de colores y formato diferente, recortadas de una determinada manera, etc. por ejemplo, para preparar páginas con vistas en miniatura. Este trabajo puede resultar más bien pesado si se lleva a cabo con muchas imágenes. Sería deseable automatizar el proceso, utilizando funciones avanzadas de algunos programas. Estas operaciones pueden hacerse con las funciones de macro o acciones, pero algunas aplicaciones tienen una opción especializada en el menú (batch processing). Para llevar a cabo los cambios, basta elegir la carpeta o los ficheros y especificar el tipo de cambios a realizar.
Conviene investigar dentro de las opciones de nuestro programa cómo utiliza estos cambios en bloque, puesto que pueden automatizar y realizar con suma facilidad tareas que de otro modo serían pesadas y rutinarias. Así, puede prepararse una macro (que recibe diferentes nombres según el programa, tales como actions) para generar miniaturas de 100 px. de ancho con todos los gráficos de una carpeta en un solo paso.
Pero no sólo puede ser preciso efectuar cambios en los contenidos gráficos. También nos encontraremos con textos que se deben actualizar a menudo, tales como extractos de noticias o resúmenes de actualidad, enlaces que han cambiado... estos cambios pueden ser una auténtica pesadilla.
Cada programa de edición web tiene sus propias estrategias para actualizar los cambios en el texto, los enlaces... más o menos eficientes y fáciles de usar. Muchos programas permiten resolver parte de estos problemas de actualización y mantenimiento con sus sistemas de plantillas y librerías.

Cambio del tamaño de las imágenes

Operaciones tales como el recorte de una imagen, trasformaciones de simetría (obtener la imagen vuelta del revés horizontal o verticalmente) son muy comunes en el desarrollo de proyectos. Por fortuna, estas operaciones no revisten complicación alguna y se trata de un solo clic, sin merma de calidad en el nuevo gráfico.
Sin embargo, el cambio de tamaño de un gráfico de mapa de bits, tal como un gif, un jpg o un png tiene sus peculiaridades, derivadas de la naturaleza misma de estos formatos. En general, dada la resolución fija de un mapa de bits, el cambio de tamaño implica adaptar a las nuevas dimensiones la información original y esto implica una cierta pérdida de calidad. Una imagen a color de 24 bits, como un JPEG, se puede beneficiar de un proceso de escalado más suave que difumina los contornos para disimular el cambio de tamaño. Las imágenes con un número limitado de colores (256 o menos, como los GIF) sólo pueden cambiarse de tamaño con un sistema más bruto y que da contornos más escalados, la típica imagen de un gráfico de ordenador realizado con poco cuidado. Para escalar con mayor finura un GIF (o cualquier otro gráfico con un número limitado de colores) el procedimiento adecuado es:
1) aumentar la resolución a color de 24 bits o color RGB;
2) Aplicar el cambio de tamaño
3) Reducir de nuevo la profundidad de color.
Sin embargo, no puede decirse que absolutamente siempre sea mejor escalar en modo de color completo. Para pequeños gráficos en los que interese mantener la definición, puede ser incluso conveniente el proceso más basto de escalado de la imagen. Pueden probarse las dos alternativas para ver cuál da mejores resultados.
Otra situación en la que se debe decidir el modo de escalado, es la importación de un fichero EPS o en formato de Adobe Illustrator hacia un programa de edición en mapa de bits como Photoshop. En este caso, no habrá problemas de pérdida de calidad con la ampliación, puesto que partimos de un formato vectorial que se puede escalar sin problemas; ahora bien, puede elegirse una importación con bordes suavizados o con bordes normales. Para dibujos de tipo lineal o técnico puede ser conveniente la segunda opción.
La forma más obvia de despreocuparse de la merma de calidad por el escalado de los gráficos es preparar los originales en una aplicación de dibujo vectorial y guardar una copia en ese formato. Evidentemente esto es posible para logotipos, texto, imágenes más o menos simples, pero no para fotografías.
Cuando se trata de preparar grandes cantidades de páginas con gráficos que tengan una estructura idéntica, es muy conveniente utilizar un componente o utilidad del programa que permita su generación automática. Por ejemplo el programa

Irfanview (www.infraview.com) también hace algo parecido. El trabajo tedioso que pueden ahorrar es muy considerable.< /p>

Control del color

Uno de los factores a tener en cuenta en el proceso de producción para la web es la consistencia en el uso del color a través de los cambios de formato y programas de edición. No se trata de una cuestión marginal, puesto que los gráficos para la web se basan mayoritariamente en un formato que soporta sólo un rango de colores limitado: el GIF. En efecto, al poder incluir tan sólo 256 colores, todos aquellos que estén fuera de este margen se deberán convertir en uno u otro de los colores indexados en el fichero. Los programas de gráficos tienen diferentes formas de controlar esta limitación: bloquear determinados colores del gráfico original para asegurarnos de que sí estén presentes en la versión GIF,  crear tramas o difusión de puntos para simular los colores no incluidos en la tabla del fichero, etc.
Existe el riesgo de que un proyecto se vea seriamente retardado, por problemas de conversión de colores al reducir la versión original a un formato indexado. Por tanto, es imprescindible un control exacto de qué colores se están utilizando y especificando en las diferentes fases de producción, tanto gráficas como de programación. Recordemos los diferentes sistemas en que se pueden especificar los colores en los programas de ordenador (artículo sobre el color, sección de Diseño gráfico). Es probable que nos encontremos ante la necesidad de convertir continuamente colores de formato decimal a hexadecimal. Algunos programas tienen esta capacidad y no supone problema alguno; si no es así, puede recurrirse a alguna pequeño programa o incluso a la calculadora del sistema. Por ejemplo, para pasar colores de decimal a hexadecimal:

No es sorprendente que muchos programas de edición de gráficos incorporen utilidades destinadas a recoger muestras de color no limitadas a los gráficos abiertos en el programa, sino incluso desde cualquier punto del escritorio o cualquier otra ventana abierta. Si nuestro programa no tiene esa capacidad existe una posibilidad simple: efectuar una captura de pantalla del área que contiene el color a muestrear, y a partir de ésta efectuar la lectura del color en cuestión. Más cómodo y rápido es emplear una aplicación sumamente útil llamada Eyedropper (cuentagotas) que, una vez abierta, se sitúa discretamente en la barra de tareas, en forma de icono: un cuentagotas que da nombre al programa. Si queremos saber cuál es exactamente cualquier color de la pantalla, en la aplicación que sea, basta hacer clic sobre el icono del cuentagotas (

http://eyedropper.inetia.com). Otra utilidad parecida, ColorPic tiene más opciones, entre ellas la de guardar unos "chips" de color mientras se van eligiendo.

Montaje de la página con tablas.

A menudo, las tablas se asocian a diseños rígidos y poco elegantes, en especial si pensamos en una tabla de estadísticas, con las celdas separadas por líneas. En realidad, las tablas son la herramienta bàsica del diseño gráfico, y en particular, del diseño de páginas web. ¿Dónde están las tablas, si no se ven? Con frecuencia, están presentes sin ser muy aparentes, ya que suelen utilizarse tablas sin contornos lineales. Mucho más elegante: separar la información de las casillas con el espacio blanco.
De algún modo, el diseño con tablas limita las posibilidades, pero al mismo tiempo es beneficioso tener una retícula a la que adaptar el diseño: esto facilita la consistencia y la armonía de las diferentes secciones y páginas.
El diseño de páginas web ha estado condicionado durante años a lo que se podía hacer -y a lo que no se podía hacer- con tablas. Los sistemas de aplicación de formato más flexibles y potentes, como las hojas de estilo CSS, no se han podido utilizar con seguridad por el deficiente soporte en distintos navegadores. Sin embargo, existen trucos que permiten adaptar las tablas a casi cualquier necesidad de layout:
El uso de imágenes de 1 píxel, transparente, que se pueden reutilizar las veces que se quiera con diferentes dimensiones para actuar como espaciador y colocar, por ejemplo, los elementos de una tabla en posiciones específicas.

Tablas anidadas.

Crear filas o columnas de una anchura muy reducida para simular líneas sólo a un lado de las celdas.

1Estos trucos, por suerte, pronto serán innecesarios (e incluso pueden resultar cómicos.) De momento, siguen vigentes para garantizar una compatibilidad muy amplia de las páginas, y los programas de edición visual a menudo generan páginas con un código recargado, basado en estos trucos, que resulta difícil de editar fuera del programa original.

Las capas.

Con la adopción del estándar de las hojas de estilo en cascada (CSS) por los navegadores de última generación, éstos son capaces de representar páginas web con diseños mucho más flexibles que los que inicialmente permitían. En particular, existe la definición de capas o layers, que permite un control absoluto de las dimensiones y posición de los elementos de la página. Una capa es un contenedor de texto, imagen, etc. que está colocado en una posición determinada. Las capas pueden superponerse y, mediante scripts, pueden hacerse móviles (para arrastrarlas con el ratón, o para que se muevan en una animación preestablecida.) El uso de capas, evidentemente, hace posible un control muy preciso del diseño gráfico de las páginas web.
Con un buen programa, capaz de manejar capas (como los que comentamos en nuestros artículos sobre diseño web), podemos crear un diseño de página sofisticado y preciso.  Con una precisión al píxel, como suele decirse. Estos programas, tales como Dreamweaver o GoLive, incluyen una opción de retícula y guías para ayudar a colocar los elementos con la máxima exactitud.

Solución para el problema de la compatibilidad html.

Hasta ahora, muchos desarrolladores han preparado incluso dos versiones alternativas de la misma web para evitar problemas de compatibilidad con navegadores que no soporten los estándares más actuales. Si esto parece una tarea interminable, lo es sólo en apariencia. En realidad, con un buen editor visual como Dreamweaver, o GoLive es extremadamente simple convertir tablas en capas o viceversa, ¡con un sólo clic del ratón! Una vez se tienen las dos versiones alternativas de las páginas web, pueden subirse ambas al servidor y colocar en las páginas un script que reconoce el navegador del visitante, de manera que dirige la página, si es preciso, a la versión soportada por su navegador.
Dicho esto, es muy criticable que todavía se usen navegadores que no están adaptados a los estándares actuales (¡la mayoría de los cuales datan de 1996-97!) Dado que la mayoría son gratis no hay motivo para tener un navegador anticuado o que no cumpla los estándares: con ellos es posible una web mejor diseñada, más dinámica y más adaptable al visitante. Más detalles en

www.webstandards.org ...

Frames

Un diseño de páginas basado en marcos (frames) se basa en unos contenedores que alojan páginas web que se han diseñado por separado y que, de hecho, se pueden mostrar independientemente en una ventana del navegador. No faltan ejemplos de páginas con frames, pero es un sistema que la mayoría de diseñadores prefiere evitar, puesto que tiene más inconvenientes que ventajas. La ventaja que suele citarse es la facilidad de actualizar los enlaces de una sección: basta cambiar una página, la que contiene los enlaces. La lista de inconvenientes sería larga, pero, por ejemplo, un sistema de frames suele tener sentido para albergar una barra de navegación fija en un pequeño marco, mientras que el mayor contiene la página a la que se vaya a acceder. Sin embargo, si un visitante llega directamente a una de esas páginas, y no contiene los elementos de navegación, se puede encontrar con una página "huérfana". Y si a ésta le añadimos los elementos que faltan ¿para qué queremos el frame?
Los marcos internos (iframe) pueden tener utilidades muy diversas. Por ejemplo, son una manera eficaz de incorporar contenido variable en una sola pantalla, sin la complicación de configurar un script. Uno de los usos más frecuentes es el de presentar un anuncio, independiente del resto del contenido de la página. De este modo, el anunciante, una vez contratado el espacio en nuestra web, puede actualizar por su cuenta el espacio de que dispone y nosotros no debemos ocuparnos de nada.
Si damos algunas vueltas a la idea podemos encontrar otras aplicaciones. Los marcos pueden servirnos para mostrar páginas web distintas e independientes (que pueden estar en servidores distintos) en una sola pantalla del navegador. De este modo, por ejemplo, podemos tener una parte en la que acordemos mostrar las últimas noticias sobre un determinado tema, presentadas por la Web X. Nuestra tarea acabará al definir el marco para X, al que corresponde la URL de ese sitio. Cada vez que los responsables de X actualicen su contenido, éste aparece al día en su propio marco, sin que nosotros tengamos que intervenir para nada. Se trata, evidentemente, de un sistema cómodo y con interesantes posibilidades.

Maquetar con HTML dinámico.

Las capas tienen una ventaja enorme a la hora de resolver determinados tipos de maquetación. Lo que sería muy complejo con el sistema tradicional de tablas anidadas puede ser elegantemente simple con CSS. Además, es posible aprovechar el espacio en forma tridimensional (superponer parcialmente capas, hacerlas visibles sólo ante determinados eventos...)
Una idea interesante para el uso de capas es preparar una interfaz que aproveche además los comportamientos dinámicos asociados a ellas (DHTML). Así, podemos diseñar una interfaz semejante a la del sistema de ventanas, con una serie de contenedores libremente movibles, o sistemas de menús desplegables que no sólo economizan espacio, sino que tienen un funcionamiento familiar para la mayoría de usuarios. Colocar mucha más información de la inicialmente visible en una misma página tiene la ventaja de que se puede mostrar inmediatamente, una vez descargada la página por completo, y de una forma interactiva, y sin abrumar al usuario con una gran cantidad de texto. Por ejemplo, en una pantalla con un esquema de un edificio se pueden contemplar detalles de las estructuras al hacer clic en cada uno de los puntos numerados.
Hasta hace relativamente poco sólo los sitios más vanguardistas apostaban plenamente por estas técnicas mientras que ahora se inclinan más por Flash como herramienta para crear contenidos dinámicos e interactivos, mientras que la mayoría de proyectos empresariales, negocios online, etc. Apostaban por páginas más conservadoras que pudieran llegar a la mayoría de usuarios, con independencia de que hayan actualizado sus navegadores o no.

Diseñar con Java, Flash y otras tecnologías.

El uso de Flash, Java y otras tecnologías puede hacer de las páginas algo aún más atractivo y con funcionalidades sorprendentes. Ahora bien, su uso debe ponderarse y tener en cuenta que es posible que parte de la audiencia no logre acceder a esos contenidos por una inadecuada configuración de su navegador. En el caso de puntos de acceso en una red local, es posible que cada terminal no pueda instalar el plugin solicitado y, por tanto, debe tenerse en cuenta si realmente lo que se va a ofrecer no puede resolverse con html normal e imágenes. Cuando existe una diferencia muy significativa de tamaño de ficheros, complejidad y efectividad, debe apostarse por la alternativa que resulta más claramente favorable. En caso de que realmente no haya una gran diferencia es mejor utilizar el “html” convencional.
Los applets de Java pueden aportar funciones extendidas a nuestra web, pero no es aconsejable que tengan un papel imprescindible a partir de las páginas iniciales. Los problemas de configuración en los usuarios son comunes y por tanto es conveniente preparar un sitio que ofrezca la mayor parte de contenidos y recursos prescindiendo de Java, y ubicar los applets en páginas concretas. No es mala idea avisar de que el funcionamiento correcto de estas depende de la correcta configuración del navegador.
Flash es algo fabuloso, pero sólo para determinados supuestos. Su uso indiscriminado -e inadecuado- es una de las peores chapuzas en la web actual. Hoy resulta fácil crear espectaculares animaciones de títulos que rotan, se acercan y alejan, explotan y se reconstruyen... ¿y qué? También es fácil crear (o conseguir ya hechos) animaciones, títulos tridimensionales, o aplicar texturas hiperrealistas. Al final, todos estos efectismos gratuitos (en el doble sentido de la palabra: cuestan poco o nada y no vienen a cuento) son un indicador preciso de la falta de gusto de un diseñador o del amateurismo con que se ha planteado la web.
Aún así, llama la atención el hecho de que muchas páginas, incluidos proyectos realizados con muchos recursos, presentan inacabables películas de Flash que no son más que un obstáculo irritante para acceder al contenido. La descarga de enormes animaciones que nada aportan (aparte del lucimiento del diseñador) es irritante para el usuario, que se pregunta ¿para esto he tenido que esperar tanto?
Como todas las cosas, Flash debe utilizarse con gusto y cuando puede resolver situaciones que difícilmente pueden abordarse con otros recursos.

Organización de Archivos

No podemos olvidar que, un sitio web no es más que un conjunto de archivos gráficos, multimedia y de texto enlazados entre sí, y que es rara la vez que no es necesario modificar alguno de ellos en un momento posterior a la entrega del trabajo.
Por eso es tan importante que la página quede bonita y esté bien organizada de cara al cliente, como que esos archivos que componen el sitio estén bien ordenados y distribuidos en diferentes carpetas.
Además, los nombres que les demos a los archivos, sean los suficientemente claros y descriptivos como para que localizar uno de ellos concreto sea lo más rápido y sencillo posible.
Los archivos se gestionan de manera diferente en cada plataforma, sin embargo, para que los archivos se presenten de una manera correcta en un servidor web, deben seguir una reglas específicas para que sean fácilmente legibles en las diferentes plataformas.

Convenciones de denominación

Los principales problemas a la hora de poner nombres a los archivos son:

Nombres de archivo mal escritos:

Para evitar problemas con los nombres de archivo mal escritos, basta con seguir estas sencillas normas:
No utilices espacios: Incluso aunque estemos acostumbrados a utilizarlos en otras aplicaciones, o cuando desarrollamos otros tipos de trabajo. La inserción de espacios en los nombres de los archivos que se vaya a publicar provocará que el navegador no localice correctamente el archivo en cuestión. En lugar de espacios utilice guiones normales, o guiones bajos.
No utilices caracteres extraños o específicos de su idioma: Utilice a la hora de nombrar los archivos letras, números, guiones y guiones bajos. Las letras acentuadas, ñ, paréntesis, signos de dólar, signos de tanto por ciento, etc. están totalmente prohibidos en los archivos que se vayan a publicar en un sitio web.
Pon los puntos en el sitio correcto: Sólo se debe utilizar el punto, para separar un nombre archivo de su extensión.
Utilice sólo letras minúsculas en los nombres y extensiones: Los servidores UNIX distinguen las mayúsculas y minúsculas de los nombres de archivo, por lo que INDEX.htm, index.Htm e Index.HTM, en un sistema operativo UNIX serían 3 archivos diferentes. Aunque localmente estemos trabajando con un sistema Windows, es conveniente que, para prevenir posibles problemas con archivos no encontrados, debido a una mayúscula fuera de sitio, desde el principio nos acostumbremos por norma a utilizar solo nombres de archivo en letras minúsculas.

Nombres de archivo poco claros

Una de las mejores maneras de organizar nuestro trabajo es dar a los archivos nombres comprensibles. Esto es tanto más importante cuantos más archivos formen parte de nuestro proyecto.
La página principal del sitio, siempre por norma debe llamarse index.htm.
Si vamos a tener un número muy elevado de archivos en el sitio, una sugerencia que podría resultar muy útil es establecer un código de 2 ó 3 letras, después un nombre lógico, y si fuera necesario, un valor numérico final que indicara una fecha o una parte de una serie. Por ejemplo:
index.htm
es_nuevo.htm
es_objetivo.htm
es_biografia1.htm
es_biografia2.htm
Lo más importante es ser coherente y sobre todo, elegir un sistema que funcione a sus gusto y exigirse a si mismo utilizarlo siempre.

Longitud de los nombres de archivo

Un nombre de archivo demasiado largo, podría provocar que el nombre fuera truncado, haciendo que el archivo resulte ilegible para el navegador, y en el mejor de los casos una URL más larga de lo necesario y por lo tanto más difícil de recordar.
Una buena regla sobre la longitud de un archivo es crear nombres lógicos sin que el prefijo tenga mucho más de 8 caracteres. Un nombre de 10 caracteres es perfectamente aceptable, pero uno de veinte no.

Extensiones de archivo correctas

1Con los archivos HTML estándar hay dos opciones principales para las extensiones de los archivos .htm y .html
Elegir uno u otro depende del servidor en el que se vayan a alojar las páginas. Si su servidor requiere una extensión .html, deberá utilizar esta, pero en cambio, si su servidor se basa en un sistema operativo Windows o Linux, podrá optar libremente por cualquiera de las dos. En la mayoría de los casos podrá utilizar cualquiera de ellas, pero mantenga la coherencia a la hora de elegir. Nunca mezcle ambas extensiones en el mismo sitio: producirá problemas y dará lugar a errores que de otra manera no cometería.
Otras extensiones que son utilizadas en sitios web, están relacionadas con programas como CGI o PERL, ASP, javascript, etc. Algunas de ellas son:
.htmlx;.shtml;.pl; .asp;.cgi;.php;.css
En cuanto a los archivos gráficos, estos solo son aceptados si tienen nombres adecuados. Utilice para los gráficos en formato GIF, la extensión .gif, para los JPEG la extensión .jpg, (NO .jpeg) y para los PNG la extensión .png.

Estructura de directorios

Si vamos a trabajar con un sitio pequeño en el que sólo existen pocas páginas y algunos archivos gráficos, bastará con que todo esté en un solo directorio, pero cuando comencemos a trabajar con sitios más grandes, que contengan muchos archivos HTML, gráficos, y otros medios resultará casi imposible administrar el sitio si no se distribuyen en directorios de manera lógica.
Como normas generales, los pasos a seguir para crear un nuevo sitio web serán:
        1.- Crea una nueva carpeta en tu disco duro
        2.- Asígnale un nombre identificativo relacionado con el proyecto por ejemplo, sitio_web_cliente.
        3.- Dentro de esa carpeta crea una subcarpeta denominada img, o imagen, o images.
        4.- Coloque los archivos .htm en la carpeta creada en la carpeta sitio_web_cliente., pero fuera de img, esta carpeta (sitio_web_cliente.), será considerada la “raíz”.
        5.- Coloque todas las imágenes en la carpeta img.
Si el proyecto toma dimensiones mayores, y necesitamos incluir más tipos diferentes de archivos, basta con ampliar esta idea, creando las subcarpetas necesarias para la correcta organización de la información. Por ejemplo, podríamos tener una subcarpeta con los elementos multimedia, llamada “media”, y otra con los scripts que pudiéramos necesitar programar y que podríamos llamarla “prg” o algo similar..

Guardar Archivos

Al trabajar con un número elevado de archivos diferentes, no es raro que el día que nos levantamos con mal pie, eliminemos accidentalmente algo en lo que habíamos invertido horas de trabajo, guardemos cosas en una zona equivocada del ordenador, demos a nuestros archivos extensiones incorrectas, etc. Por eso es más que recomendable seguir los siguientes consejos:


Apéndice 1. Un resumen en 28 cuestiones.

gif suele funcionar mejor con las imágenes que presentan colores planos o una gama escasa de matices, como textos, logotipos, gráficos. Funciona con colores indexados.
jpg funciona mejor con imágenes tipo fotográfico.. Puede tener pérdidas de calidad, aunque en la mayoría de los casos son inapreciables.
png donde se necesite un gif, casi siempre es mejor usar un png.


inicio Descargas Contacto Ayuda Trucos