En esta ocasión vamos a hablar acerca de la disposición de los elementos de nuestro blog, para eso he cambiado la apariencia de mi blog, aquí una imagen de como se veía antes del cambio:
En la imagen, el título del blog se encuentra sobre un espacio ancho de color oscuro y la letra es blanca; debajo, a la izquierda en una columna gruesa se desarrollan los contenidos y a la derecha en una columna mucho más delgada está la foto de la autora del blog, o sea mi foto y mis datos personales.
Debajo se encuentra el listado de artículos publicados.
Ahora he cambiado la plantilla y se encuentra de la siguiente manera:
Todo está dividido en dos columnas, a la izquierda encontramos la columna más delgada donde se encuentra el título del blog, debajo mi perfil y debajo el menú. En la columna derecha está el contenido principal y ocupa un espacio mucho más ancho.
Por qué elegí esta nueva plantilla?
Simple! para mostrar lo que NO debemos hacer, primero, debo decir que es casi ilegible porque tiene un fondo de punticos que se enreda con los textos escritos y yo que veo muy poco tengo dificultad para leer.
Segundo, los menús y barras de navegación no son prácticos cuando se ubican a la izquierda o en la parte superior porque cuando utilizamos un lector de pantalla estos leen por supuesto de arriba a abajo y de izquierda a derecha por lo que terminaremos escuchando miles de veces la lista del menú.
A continuación voy a enumerar varias soluciones propuestas por el Profesor Carlos Egea en su libro Diseño web para todos y todas, editorial Icaria.
1. Elegir una plantilla con la barra de menú a la derecha.
2. Si no quiere cambiar la plantilla edite el código HTML y trasládela a la derecha.
3. Insertar en el código HTML un vínculo de salto de barra de navegación.
Depende de nosotros escoger la opción que más nos convenga de acuerdo al diseño y usabilidad de la página; vamos a hacer la prueba cambiando la columna hacia el lado derecho:
Vamos al editor de HTML, y buscamos la línea de código que dice <!-- Begin #sidebar --> y cortamos todo hasta llegar a otra que dice <!-- End #sidebar -->
Acabamos de cortar el contenido de la columna izquierda y lo vamos a trasladar a la derecha así que buscamos la línea que dice !-- End #main --> y lo pegamos después.
Y listo, guardamos y probamos, ¿ te sirvio? a mi no! pero eso depende de como haya sido diseñada la plantilla, puede que a ti si te sirva.
En el caso que no funcione vamos a buscar el siguiente código:
#main {
width:450px;
float:right;
padding:50px 0 20px;
font-size:85%;
}
Este código nos está dando las características de la columna principal: ancho, posición, margen y tamaño de fuente, actualmente la posición está alineada a la derecha donde dice float: right; así que reemplazamos por float: left; y la mandamos a la izquierda.
Repetimos la operación para la columna del menú:
#sidebar {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
}
Esta vez cambiamos float:right; por float: left;
En la imagen aparece la columna del menú de navegación hacia el lado derecho.
Revisemos brevemente la tercera opción, crear el vínculo de salto del menú:
Primero copia el siguiente código:
.ocultar {display:none;}
Este código nos sirve para crear un elemento que no es visible dentro del diseño de la página pero que igualmente existe. Lo pegamos antes de </style>:
Ahora buscamos donde poner ese elemento invisible, como queremos saltar el menú lo podemos ubicar después del título entradas anteriores entonces buscamos:
<h2 class="sidebar-title"><$I18NPreviousPosts$></h2>
y enseguida escribimos:
<p class ="ocultar"><a href="#contenido">saltar menu</a>
Acabamos de crear un hipertexto que dice saltar menú y que nos va a direccionar hacia el inicio del contenido, entonces justo antes del contenido debemos poner el marcador:
<A NAME="contenido"> contenido </A>
que pegamos antes de la línea:
<div class="post"><a name="<$BlogItemNumber$>"></a>
Solo podemos saber si funcionó con un lector de pantalla.
