Por fin he terminado (quedará algún fleco) el diseño y/o programación de la web del proyecto La Consulta: Caso 30.
He logrado que sea visible en todo tipo de dispositivos optimizando su visionado en todos ellos, así como en medios paginables (impresoras), haciendo incluso posible su impresión página a página sin separación de párrafos o bloques de preguntas y respuestas.
El color elegido para el menú superior de la versión móvil (para pantallas de menos de 750 píxeles) ha sido casual y no causal, dado que lo encontré en un ejemplo y me gustó. Lo mantuve porque creo que los móviles tienen cierta necesidad de color que, sin embargo, en las pantallas de ordenador resulta saturante.
En lugar de la utilización de una imagen para el famoso icono «hamburguesa«, preferí utilizar una letra griega (Xi) en mayúsculas, muy en consonancia con el resto del proyecto: Ξ.
Otro tema que me tuvo muy perturbado era el de usar un diseño que el posicionamiento de Google no viese mal (maldito SEO), lo que conllevaba dejar de utilizar, entre otras cosas, mis amados frames y framesets, óptimos para menús y pies de página o para ventanas laterales fijas, pero que dado el desarrollo del posicionamiento en pantalla mediante CSS parecen obsoletos, casi como yo.
Así que prescindí de ellos, pero había algo que no me gustaba de esta nueva forma y era el tener que repetir «código» HTML en cada uno de los ficheros o páginas estáticas de las que está compuesta la web en cuestión.
No quería pasar por la utilización de JavaScript (por dar soporte a los usuarios más paranoicos posibles) y barajé la opción de usar PHP o, incluso, algún tipo de aplicación en el servidor, pero me parecía realmente matar moscas a cañonazos. Terminé optando por una solución de compromiso que, no obstante, me resulta interesante:
<!-- Menú superior --> <noscript> <iframe id="cabecera" src="topmenu.html"></iframe> </noscript> <script type="text/javascript"> creaheader(); // Crea menú - top (logo-header y nav) </script>
Naturalmente, la sección correspondiente al footer, está resuelta de la misma manera.
La función creaheader() está definida en un archivo llamado laconsulta.js en el siguiente fragmento:
// Funciones para crear menú navegador de la página web
// Función que crea un menú de cabecera
function creanav() {
var text= '<nav>' +
'<ul>' +
'<li class="submenu"><a href="genesis.html">Génesis</a>' +
'<ul class="children">' +
'<li><a href="genesis.html">a</a></li>' +
'<li><a href="laconsulta.html">b</a></li>' +
'<li><a href="origen.html">c</a></li>' +
'</ul></li>' +
'<li class="submenu"><a href="exodo.html">Éxodo</a>' +
'<ul class="children">' +
'<li><a href="exodo.html">x</a></li>' +
'<li><a href="exodoexit.html">ω</a></li>' +
'</ul></li>' +
'<li class="submenu"><a href="levitico.html">Levítico</a>' +
'<ul class="children">' +
'<li><a href="levitico.html">α</a></li>' +
'<li><a href="leviticodetalle.html">β</a></li>' +
'<li><a href="leviticopeaton.html">γ</a></li>' +
'<li><a href="leviticoinversion.html">δ</a></li>' +
'</ul></li>' +
'<li class="submenu"><a href="numeros.html">Números</a>' +
'<ul class="children">' +
'<li><a href="numeros.html">1</a></li>' +
'<li><a href="numerosh.html">e</a></li>' +
'<li><a href="numeroslibro.html">π</a></li>' +
'<li><a href="numerosapp.html">i</a></li>' +
'</ul></li>' +
'<li class="submenu"><a href="deuteronomio.html">Deuteronomio</a>' +
'<ul class="children">' +
'<li><a href="deuteronomio.html">א</a></li>' +
'<li><a href="garbanzosfoto.html">ב</a></li>' +
'<li><a href="garbanzosvideo.html">ג</a></li>' +
'<li><a href="garbanzospresupuesto.html">ד</a></li>' +
'</ul></li>' +
'</ul>' +
'</nav>';
document.write(text);
}
// Función que crea un logo-header lateral superior
function crealogoheader() {
var text='<a id="logo-header" href="index.html">' +
'<span class="site-name">La Consulta Caso 30</span>' +
'<span class="site-desc">Giusseppe Domínguez</span>' +
'</a> ';
document.write(text);
}
// Función que crea un menú superior para móviles
function creamenubar() {
var text='<div class="menu_bar">' +
'<a href="#" class="bt-menu"><span>Ξ</span>La Consulta Caso 30</a>' +
'</div>';
document.write(text);
}
// Función que crea el header superior (menú top)
function creaheader() {
document.write('<header>');
crealogoheader();
creamenubar();
creanav();
document.write('</header>');
}
Y ya que estoy emocionándome con esto de mostrar códigos, mostraré también el que uso para organizar los diferentes bloques de reglas de estilo CSS3, un genérico consulta.css que incluye cuando procede los distintos archivos css (para pantallas de PC, para móviles, para impresoras):
/************************************************
Archivo consulta.css para aplicar estilos de manera particular
en los distintos medios de la web http://laconsulta.giusseppe.net
************************************************/
@viewport {
zoom: 1.0;
width: device-width;
}
@import url("consultamovil.css") only screen and (max-width: 750px);
@import url("consultascr.css") only screen and (min-width: 750px);
@import url("consultaprint.css") only print;
Estoy especialmente orgulloso de haber sido tan detallista como para que la impresión de algo tan complejo como esos «acordeones» de preguntas y respuestas pueda ser realizada sin la ruptura de los bloques en páginas separadas, mediante la inclusión en el fichero acordeon.css de las siguientes líneas que evitan esa medida que habría ocurrido de manera automática:
@media print {
.acordeon input { display: none; }
.acordeon label {
display: block;
color: white;
background: #666;
}
.pregunta-respuesta {
page-break-inside: avoid;
}
}
Ahora sé que será una web poco visitada y que la obsesión por el posicionamiento SEO es absurda y ni hablar de las manías que vengo habiendo demostrado y mostrado durante este desarrollo, pero he aprendido bastante en el proceso y alguna de esas cosas será reutilizada en un futuro no muy lejano cuando tenga que remodelar la web de la Asociación Cultural Clave 53.