Diseños web

Estos son los diseños que tengo realizados para la futura versión de EsLoMas.com

Tal como se ve en el diseño de la página, se basará en una combinación de colores amarillos y azules sobre un fondo gris oscuro, y un contenido sobre fondo blanco. Esta combinación permitirá una buena legibilidad dado el contraste de los contenidos sobre fondo blanco y el fondo oscuro de la página. Los colores amarillos y azules se utilizarán de manera homogénea en el web para indicar enlaces, secciones seleccionadas, pestañas de subsección, cuadros de opciones…

En cuanto a la estructura de contenidos tal como se puede apreciar estará formada por un menú superior correspondiente a las secciones principales del web. En el caso de que una sección tenga subsecciones se mostrarán en forma de pestañas, estando en primer plano la seleccionada. Otra alternativa a la utilización de las pestañas era poner el menú en el lateral de la derecha, pero esto hacía que se separase mucho la ubicación de las secciones y las subsecciones en la página, y dado que las subsecciones se prevé que sean reducidas se ha adoptado esta opción.

En la parte inferior de la página habrá un conjunto de enlaces secundarios así com un enlace a la mi sección personal dentro del web. Esto último no tengo todavía demasiado claro si lo dejaré así, o si lo enlazaré desde el menú superior, o si será un web diferente enlazado y gestionado con el mismo CMS.

En cuanto a las tipografías y colores, los contenidos están con una Verdana de tamaño 10 y color #444444. Para los títulos utilizo la misma fuente con un color azul #395692 que tendré que llevar hacia algún estándar. Este azul es el que se utiliza en todos los enlaces. Se utilizan también grises #eeeeee para fondos de cajas e información secundaria como fechas. El gris #cecece lo reservo para los bordes de las cajas grises y para separar partes de contenidos, como los comentarios de un post de blog. En estos casos se utiliza letra de color blanco sobre el fondo gris. En lo que se refiere a los amarillos, los botones del menú y las cajas de destacados de la derecha se basan en un color #FACB02 y un fondo para las cajas #FEFEE4, que seguramente sea necesario llevar hacia alguna tonalidad más estándar. Para el fondo de la página se utiliza un gris oscuro #808080.

Estos son los diseños que tengo realizados:

• Listado de artículos: en esta página se muestra un listado con los artículos más recientes de la subsección «JavaScript&DHTML» dentro de «Tecnología Web». Se muestran los dos primeros con un título más grande junto a la fecha de edición, autor y un pequeño resumen, y el resto con una plantilla reducida sin resumen y con menor tamaño de letra en los títulos. La página se completa con una caja que contiene los posts más recientes del blog que corresponde a la sección. En principio tengo previsto crear un blog categorizado de forma similar al web, quizás al comienzo en base a las secciones, y si va creciendo o hay gente que quiera colaborar, añadir algunas subsecciones.
• Artículo: se muestra un artículo que consta de varias páginas. En una pequeña barra de iconos al comienzo se muestran los elementos de paginación y los iconos de impresión, enviar a un amigo, enlazar y valorar. Debajo se muestra el contenido de la primera página del artículo, junto a una pequeña ficha del autor. Esta pequeña ficha se podría completar con algo más de meta-información sobre al artículo, al igual que sucede en Evolt.org o en el gestor de contenidos Mambo. Debajo del texto del artículo se mostrarán los comentarios realizados que en principio se contempla obtenerlos a partir de un foro tipo phpBB o como comentarios básicos gestionados por el CMS
• Blog: se muestran los blogs de un determinado día con sus comentarios, y un formulario para realizarlos. Se muestra también una ficha del responsable del blog (en realidad de esta sección del blog) y un calendario para acceder a diferentes fechas. Hay sitios que he visto (no recuerdo cuáles) en los que los comentarios se muestran identificando mediante colores los realizados por el autor del resto, me parece una buena idea que posiblemente incorpore de alguna forma.

La idea es desarrollar todo esto en CSS con el objetivo de aprender a dominar esta tecnología, esperemos que sea posible 😉