Desarrollo web Monterrey

Desarrollo web Monterrey 

4.-Diseño del sitio

El diseño del sitio Web del Departamento de Ciencias de la Comunicación cuenta con una misma estructura que se repite a lo largo de sus páginas. La misma se muestra en la figura 2.2 (pág. 96) y está conformada por:

• Banda de localización. Señala la sección o el tema de la página y la pertenencia al Departamento de Ciencias de la Comunicación. Se repite en cada página, en el mismo lugar y con idéntica tipografía y colores (naranja, negro y blanco). Se trata de un archivo gráfico en formato GIF, de 650 píxeles de largo por 33 píxeles de alto. No posee enlaces.
• Hipertexto de navegación básica. Por debajo de la banda superior, las páginas presentan vínculos hipertextuales que señalan el recorrido de navegación. En negrita se resalta el lugar donde se encuentra el usuario y hacia la izquierda se despliega el recorrido realizado. No existe vinculación hacia otras secciones y para hacia un área diferente el usuario debe retornar a la home page.
• Cuerpo de página. Está conformado por texto e imágenes y –en algunos casos- por vínculos que apuntan hacia uno mismo lugar dentro de la página. Los formatos para presentar los gráficos de las páginas son GIF o JPG. El hipertexto dentro del cuerpo de la página señala hacia otras partes del mismo documento, hacia otras páginas del sitio o hacia sitios externos. No existe una indicación que permita al usuario saber de qué tipo de vínculo se trata.

paginas web gratis

 

Estructura de página del actual sitio Web del Departamento

• Enlaces inferiores. Casi sobre el final, las páginas del sitio poseen uno o dos botones que enlazan hacia la home page o secciones como “Carreras y Planes” o “Área de Producción”. No hay vínculo hacia otras secciones del sitio, sino solo aquella que contiene la página que se está visitando.
• Pie de página. Al final de cada una de las páginas se encuentra la información de copyright, el año de creación de la página, la referencia hacia la institución a la que pertenece el sitio –Facultad de Ciencias Humanas, Universidad Nacional de Río Cuarto- y una dirección de correo electrónico.

En general, podemos afirmar que las diferentes páginas del sitio mantienen una estructura más o menos semejante, a excepción de la home page y algunas páginas interiores como la que brinda información sobre las materias (carrera3.htm). Algunas páginas presentan errores en la parte inferior al haberse omitido un salto de línea entre el texto “Facultad de Ciencias Humanas” y “Departamento de Ciencias de la Comunicación”.

Una vez analizadas las páginas en su estructura general, nos detendremos brevemente en algunos puntos específicos del diseño.

• Longitud de página. En general, se utilizan páginas cortas con algunas excepciones como la página donde se muestra información sobre las materias de las carreras (carrera3.htm).
• Naranja, negro y blanco son los colores predominantes del sitio. Los vínculos hipertextuales presentan su fisonomía clásica: texto en azul y subrayado, mientras que los botones con hipervínculos mantienen los tres colores predominantes de la interfaz. El color naranja escogido no pertenece a la paleta web safe que garantiza una reproducción sin alteraciones en usuarios con diferente equipamiento de hardware y software.
• Gráficos. Como señalamos anteriormente, se emplean solamente los formatos GIF y JPG, y se excluye PNG. Los GIFs utilizados son estáticos y no existen animaciones en la página. Para la inserción de los gráficos se utilizaron las etiquetas WIDTH y HEIGHT, a fines de que el usuario pueda visualizar el tamaño de los gráficos antes de su descarga. También se incluyó la etiqueta ALT para añadir información sobre el gráfico.
• No se utilizaron iconos en las páginas del sitio. En su lugar, hay gráficos que simulan botones de una aplicación multimedia donde un pequeño dibujo acompaña la información que indica hacia dónde enlaza el vínculo. En la home page los gráficos también están acompañados de bandas con información textual.
• Se utilizó la tipografía “Arial” en tamaño 2 para el cuerpo de la página donde se encuentra la información. Sobre la redacción, se trata de textos breves y utilizan algunos recursos visuales para facilitar el “hojear” la página como listas con viñetas, separación de párrafos y líneas no demasiado extensas. En referencia a la titulación de los textos, la misma está realizada con imágenes gráficas lo que provoca problemas como: a) se ve primero el cuerpo del texto que el título; b) los títulos no pueden ser hallados por los motores de búsqueda; c) en cuanto al estilo, se observa que no hay consistencia entre el título y el bloque de texto, ya que se emplean tipografías y colores diferentes.
• Se utilizan tablas con porcentajes relativos para evitar líneas de texto demasiado extensas que recorran la ventana de navegación de una punta hacia otra. No se utilizan recursos como tablas anidadas o tablas apiladas.
• No se utilizan.
• Contenido multimedia. Es escaso. En “Área de Producción” se reproducen fotografías, portadas de revistas y se puede descargar un archivo ejecutable que reproduce un sonomontaje.
• Presentación de enlaces. Como se señaló en el punto 2.2, las páginas no poseen vínculos estructurales para acceder a las diferentes secciones o áreas, solo se permite avanzar o retroceder en una misma línea temáticojerárquica. Los enlaces hipertextuales que aportan más información sobre un tema al que se está haciendo referencia son escasos.
• Firma y fecha. Está presente en el pie de página a lo largo de todo el sitio.
• Derechos de autor y copyright. En el pie de página se indica que el contenido pertenece a la UNRC, aunque no existe mayor información sobre cómo proceder en caso que un usuario desee reproducir el contenido o realizar un vínculo hacia algunas de las páginas.,

crear pagina web

4.1 Recapitulación y síntesis sobre el diseño del sitio

Por la cantidad de elementos que intervienen en el análisis del diseño del sitio Web creemos importante sintetizar las consideraciones expresadas anteriormente y establecer algunos puntos generales que permitan identificar claramente situaciones problemáticas. Por su importancia específica en un sitio y su diseño diferentes, presentamos por separado el análisis de la home page y las páginas internas.

Home page

En nuestra opinión, la página principal del sitio es la que presenta el mayor número de inconvenientes con respecto a su diseño. En primer lugar, es preciso señalar que la página está compuesta casi en su totalidad por elementos gráficos, lo cual provoca que su descarga sea lenta. Si tomamos una velocidad de conexión promedio de 28.8 kbps, solamente el gráfico de la derecha demora más de 20 segundos en descargarse en la computadora del usuario. Lynch y Horton (2000) señalan que los diseños más efectivos para la Web son aquellos donde se combina cuidadosamente texto, enlaces y elementos gráficos relativamente pequeños, premisa que está ausente en el diseño en la home page del sitio.

Por otra parte, si el usuario ha deshabilitado la opción de descarga de gráficos o no puede visualizarlos por algún otro motivo (problemas en el servidor, velocidad de conexión muy baja) el 80% de la pantalla queda en blanco. Solamente hay información en formato de texto el límite inferior donde se repiten los enlaces gráficos en hipertexto y se encuentra el pie de página.

Además, la presencia de los vínculos alienados en la izquierda sugiere al usuario que los mismos se encontrarán a lo largo de todas las páginas del sitio, cuando en realidad debe retornar a la home page para acceder a diferentes secciones.

En cuanto a los aspectos positivos, se puede destacar que la home page presenta los rasgos distintivos de la interfase que se mantienen en las páginas interiores (colores, bordes redondeados en las barra que sirven de fondo al texto, tipografía). A ello debe sumarse que la página principal mantiene una consistencia gráfica al utilizar un mismo estilo en los botones, mantener presente en la imagen de la derecha los colores predominantes como naranja, negro y blanco. Por otra parte, se utilizan gráficos sencillos que ilustran de las secciones hacia donde enlazan.

Páginas interiores

Las páginas interiores mantienen una estructura sencilla que se repite a lo largo de cada una de ellas: banda de localización e identificación del sitio, ruta de enlaces seguidos, cuerpo y pie de página. La programación de las páginas también es sencilla, puesto que se utilizan las etiquetas básicas del HTML.

En general, no hay grandes fallas respecto del diseño: la información de las páginas es legible, se identifica correctamente a través de una banda localizadora y la ruta de enlaces permite recordar el recorrido y volver a cualquiera de los puntos anteriores. Sin embargo, existen varios aspectos sobre los cuales se pueden realizar mejoras.

Uno de los principales puntos a considerar es que falta una mayor integración gráfica entre los elementos que componen el sitio para lograr un estilo más fuerte y consistente, que no se apoye solamente en los colores y la curvatura de las barras y figuras. Se hace necesario lograr una mayor unificación entre el texto y los gráficos, con el fin de que el usuario pueda leer la página en conjunto como una unidad visual. Se revela la importancia de contar con elementos como vínculos estructurales repetidos en cada una de las páginas, más espacio para los colores identificativos del sitio Web, o disposición de la información en bloques, para reforzar rasgos distintivos del sitio. En síntesis, es preciso pensar en un repertorio de elementos gráficos que le imprima mayor carácter y personalidad al sitio Web, y que permita mostrar una interfaz más consistente.

sitio web

Otros aspectos relacionados con el diseño susceptibles de ser mejorados son:

• Control de longitud de página en documentos extensos. Unificar el largo de las páginas y dividir aquellas que sean demasiado extensas (Fernández-Coca, 1998; Lynch y Horton, 2000).
• Desarrollar una barra de navegación o una columna de enlaces. Para permitir una mejor navegación del sitio e incorporar elementos de identificación, podría evaluarse la conveniencia de desarrollar una barra de navegación o ubicar los enlaces estructurales en una columna (Lynch y Horton, 2000; Nielsen, 2000). El desarrollo de una iconografía propia en el sitio Web también contribuye en ambos aspectos (Fernández-Coca, 1998).
• Utilizar colores web safe. Al menos en los grandes bloques de color del sitio, es aconsejable utilizar colores que se reproduzcan de igual modo en usuarios con diferente equipamiento de hardware o software (Lynch y Horton, 2000).
• Optimizar la estructura del sitio para una resolución. La banda identificativa del sitio posee un largo de 650 píxeles, con lo cual excede la pantalla en una resolución de 640×480 píxeles o es pequeña para una de 800×600. Es conveniente organizar la estructura del sitio para que se adecue a una de estas resoluciones. Resulta interesante también considerar la posibilidad de desarrollar una estructura compatible con ambas resoluciones (Nielsen, 2000). En todo caso, el pie de página debería indicar si existe una resolución recomendada.
• Corregir la titulación de textos y utilización de hipertexto. Como se señaló anteriormente, utilizar gráficos en la titulación produce varios inconvenientes, por lo es aconsejable reemplazarlos por texto y estructurarlos de acuerdo con lo enunciado en el punto 3.4.7 del primer capítulo. Además, debe analizarse la posibilidad de utilizar hipertextos para ampliar información o establecer relaciones asociativas en el cuerpo central informativo de la página.
• Mejorar la presentación de los vínculos. Como señala Nielsen (2000) añadir títulos a los vínculos presenta importantes ventajas y prácticamente ningún problema. Por otra parte, ya hemos insistido en la necesidad de desarrollar vínculos estructurales a las diferentes áreas o secciones del sitio. Estos vínculos deberían estar agrupados y convenientemente diferenciados del resto de los vínculos de las páginas.
• Añadir información de copyright y derechos de autor. Debido a la facilidad con la cual es posible duplicar información en la Web, es necesario ofrecer a los usuarios una política de derechos de autor, en la que se detalle si está permitida la reproducción de información, bajo qué condiciones y cuáles son las sanciones legales susceptibles de ser aplicadas en caso de violación de las normativas (Fernández-Coca, 1998).
• Corregir defectos en pie de páginas. Algunas páginas presentan defectos en la información colocada al pie como falta de saltos de línea o alineación irregular.

Desarrollo web Monterrey

#Disenoweb #paginasweb #desarrolloweb