laconsulta.giusseppe.net

laconsulta

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">&omega;</a></li>' +
      '</ul></li>' +
      '<li class="submenu"><a href="levitico.html">Levítico</a>' +
      '<ul class="children">' +
        '<li><a href="levitico.html">&alpha;</a></li>' +
        '<li><a href="leviticodetalle.html">&beta;</a></li>' +
        '<li><a href="leviticopeaton.html">&gamma;</a></li>' +
        '<li><a href="leviticoinversion.html">&delta;</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">&pi;</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">&#1488;</a></li>' +
        '<li><a href="garbanzosfoto.html">&#1489;</a></li>' +
        '<li><a href="garbanzosvideo.html">&#1490;</a></li>' +
        '<li><a href="garbanzospresupuesto.html">&#1491;</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>&Xi;</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.

Hoy me cambié el procesador

Resulta que mi DNI incluye un 386 entre sus dígitos, cifra que me sirve para recordarlo pues es uno de los procesadores de uno de los innumerables ordenadores que he tenido a lo largo de mi vida.

Hoy, al intentar acceder a los servicios telemáticos de uno de los bancos en cuyos servidores consta la información sobre la cantidad de dinero que se supone que tengo (la propiedad de algo tan abstracto es sumamente difusa), fallé en la autenticación o proceso por el cual informo de algo que se supone que sólo yo sé para proceder a garantizarme el acceso a sus servicios: Introduje repetidamente un 286 donde debía ir el 386.

Ese sí que había sido mi primer PC, técnicamente hablando, pues anteriormente sólo había contado con «chismes» del tipo spectrum (con y sin plus(+)).

Había adquirido (mis padres lo hicieron posible (gracias)) un Intel 802861 (llamado oficialmente iAPX 286, también conocido como i286 o 286) que era un microprocesador de 16 bits de la familia x86, que puse a trabajar desde el primer día para realizar cálculos de mecánica cuántica.

Anteriormente, en las aulas de informática de uno de los módulos de la facultad de ciencias de la UAM había utilizado los obsoletos 8086 y 8088, amén de mis amados UNIX en arquitectura RISC, siendo ya entonces multitarea y multiusuario de manera nativa.

IMG_4936

Al 4004 lo sucedieron el 8008 en 1972 y en 1974 el 8080, cada vez logrando mayor capacidad. En 1978, Intel comenzó a comercializar el procesador 8086, un ambicioso chip de 16 bits potencialmente capaz de ser el corazón de computadoras de propósito múltiple. El 8086 se comercializó en versiones desde 4,77 y hasta 10 MHz.

IBM adoptó al hermano menor del 8086 (el 8088, un procesador con un bus de datos interno de 16 bits, pero con el bus externo de 8 bits, lo que permitía aprovechar diseños y circuitos para sistemas de 8 bits) para basarse en él y lanzar la línea de computadoras más exitosa de la historia: el IBM PC (1981) y el IBM XT (eXtended Technology) (1983)

[Extraído de Wikipedia sobre x86]

Aquellos no contenían disco duro propio en los ordenadores disponibles y había de ir dependiendo de un MS-DOS (o IBM-DOS o DR-DOS…) que se insertaba, con suerte, en una de las dos disqueteras de cinco pulgadas y cuarto.

Por supuesto, nos olvidábamos felizmente de que en otros ordenadores había entornos gráficos amigables (X) que hacían más sencilla su utilización.

De ahí a hoy no hay más que una evolución divertida, en la que el RISC ha pasado a formar parte del ARM (esa R) y estos a ser la base de los dispositivos móviles más utilizados, entre otras cosas.

Pero esto ya es otra historia y aquella parece estar siendo contada en la preciosa serie de Halt and Catch Fire.

news-140506-halt-and-catch-fire_full

El final de Defiance

He terminado de ver la tercera y última temporada de una serie entretenida, ambientada en un presunto Saint Louis, Missuri, después de una invasión extraterrestre, titulada Defiance, tirando a mala, pero con divertimentos varios para frikis del steampunk madmax-apocalíptico.

Como diría mi amiga Aída: para entendernos, esta serie sería una mezcla entre Galáctica y Mad Max, con un protagonista inverosímil de principio a fin.

[youtube_sc url=https://youtu.be/miG1GsSz7WE]

Para ser una serie no muy buena (por ser eufemístico), ha resultado tener un final precioso. Cosas que se logran cuando no aparecen los actores, que, en esta ocasión, eran lo peor del producto.

Solaris

abSOLARISuta/ abSOLARISutamente/ abSOLARISutidad/ abSOLARISutismo/ abSOLARISutista/ abSOLARISutorio, ria/ abSOLARISuto, ta/ abSOLARISvederas/ abSOLARISvedor, ra/ abSOLARISver/ acriSOLARISado, da/ acriSOLARISador, ra/ acriSOLARISar/ aeroSOLARIS/ aguaSOLARIS/ antiSOLARISar/ aparaSOLARISado, da/ arcoSOLARISio/ arSOLARISla/ aSOLARISación/ aSOLARISador, ra/ aSOLARISamiento/ aSOLARISanar/ aSOLARISapar/ aSOLARISar (1)/ aSOLARISar (2)/ aSOLARISdadar/ aSOLARISdar/ aSOLARISeada/ aSOLARISeado, da/ aSOLARISeamiento/ aSOLARISear/ aSOLARISeo/ aSOLARISvamiento/ atajaSOLARISaces/ atornaSOLARISado, da/ auSOLARIS/ bujaraSOLARIS/ camiSOLARISa/ camiSOLARISín/ caraSOLARIS/ ceSOLARISfaút/ circunSOLARISar/ conSOLARISa/ conSOLARISable/ conSOLARISación/ conSOLARISador, ra/ conSOLARISar/ conSOLARISativo, va/ conSOLARISatorio, ria/ conSOLARISdar/ conSOLARISidable/ conSOLARISidación/ conSOLARISidado, da/ conSOLARISidativo, va/ coroSOLARIS/ criSOLARIS/ criSOLARISada/ criSOLARISar/ delaSOLARISré/ derramaSOLARISaces/ desconSOLARISación/ desconSOLARISadamente/ desconSOLARISado, da/ desconSOLARISador, ra/ desconSOLARISar/ deSOLARISación/ deSOLARISado, da/ deSOLARISador, ra/ deSOLARISar/ deSOLARISazar/ deSOLARISdar/ deSOLARISladero/ deSOLARISlado, da/ deSOLARISlador, ra/ deSOLARISladura/ deSOLARISlamiento/ deSOLARISlar/ deSOLARISlón/ diSOLARISubilidad/ diSOLARISuble/ diSOLARISución/ diSOLARISutivo, va/ diSOLARISuto, ta/ diSOLARISvencia/ diSOLARISvente/ diSOLARISver/ enSOLARISerar/ enSOLARISvedera/ enSOLARISvedor, ra/ enSOLARISver/ extraSOLARISar/ fáSOLARIS/ fríSOLARIS/ friSOLARISero, ra/ gaSOLARISeno/ gaSOLARISero, ra/ gaSOLARISina/ gaSOLARISinera/ gaSOLARISinería/ gaSOLARISinero, ra/ geSOLARISreút/ giraSOLARIS/ gloSOLARISalia/ guardaSOLARIS/ hidroSOLARIS/ hidroSOLARISuble/ hieroSOLARISimitano, na/ inconSOLARISable/ inconSOLARISablemente/ indiSOLARISubilidad/ indiSOLARISuble/ indiSOLARISublemente/ inSOLARISación/ inSOLARISar/ inSOLARISdable/ inSOLARISencia/ inSOLARISentar/ inSOLARISente/ inSOLARISentemente/ inSOLARISidaridad/ inSOLARISidario, ria/ in SOLARISidum/ inSOLARISubilidad/ inSOLARISuble/ inSOLARISuto, ta/ inSOLARISvencia/ inSOLARISvente/ irreSOLARISuble/ irreSOLARISución/ irreSOLARISuto, ta/ jeroSOLARISimitano, na/ liSOLARIS/ mauSOLARISeo/ meSOLARISítico, ca/ miraSOLARIS/ moSOLARISina/ muSOLARISa/ noSOLARISogía/ noSOLARISógico, ca/ obSOLARISescencia/ obSOLARISescencia/ obSOLARISescente/ obSOLARISeto, ta/ obSOLARISeto, ta/ paparraSOLARISla/ paraSOLARIS/ periSOLARISogía/ péSOLARIS/ poSOLARISogía/ quitaSOLARIS/ quitaSOLARISillo/ raSOLARISiso/ reSOLARIS/ reSOLARISano, na/ reSOLARISgar/ reSOLARISi/ reSOLARISladero/ reSOLARISlar/ reSOLARISlar/ reSOLARISuble/ reSOLARISución/ reSOLARISutamente/ reSOLARISutivo, va/ reSOLARISutoriamente/ reSOLARISutorio, ria/ reSOLARISuto, ta/ reSOLARISvente/ reSOLARISver/ reSOLARISviente/ roSOLARISi/ salSOLARISáceo, a/ sintaSOLARIS/ sobreSOLARISar (1)/ sobreSOLARISar (2)/ SOLARIS (1)/ SOLARIS (2)/ SOLARIS (3)/ SOLARIS (4)/ SOLARISacear/ SOLARISacio/ SOLARISada/ SOLARISado/ SOLARISador, ra/ SOLARISadura/ SOLARISamente/ SOLARISana/ SOLARISanáceo, a/ SOLARISanar/ SOLARISanera/ SOLARISanina/ SOLARISano (1)/ SOLARISano (2)/ SOLARISapa/ SOLARISapadamente/ SOLARISapado, da/ SOLARISapamiento/ SOLARISapar/ SOLARISape/ SOLARISapear/ SOLARISapo (1)/ SOLARISapo (2)/ SOLARISar (1)/ SOLARISar (2)/ SOLARISar (3)/ SOLARISar (4)/ SOLARISariego, ga/ SOLARISario/ SOLARISárium/ SOLARISaz/ SOLARISazar/ SOLARISazo/ SOLARISazoso, sa/ SOLARISdada/ SOLARISdadero, ra/ SOLARISdadesco, ca/ SOLARISdadito/ SOLARISdado/ SOLARISdador, ra/ SOLARISdadote/ SOLARISdadura/ SOLARISdán/ SOLARISdar/ SOLARISdeo/ SOLARISeá/ SOLARISeado, da/ SOLARISeamiento/ SOLARISear/ SOLARISecismo/ SOLARISedad/ SOLARISedoso, sa/ SOLARISedumbre/ SOLARISejar (1)/ SOLARISejar (2)/ SOLARISejo/ SOLARISemne/ SOLARISemnemente/ SOLARISemnidad/ SOLARISemnizador, ra/ SOLARISemnizar/ SOLARISén/ SOLARISenoide/ SOLARISeo/ SOLARISer (1)/ SOLARISer (2)/ SOLARISera (1)/ SOLARISera (2)/ SOLARISercia/ SOLARISería (1)/ SOLARISería (2)/ SOLARISero/ SOLARISerte/ SOLARISeta/ SOLARISetar/ SOLARISetear/ SOLARISetero, ra/ SOLARISetilla/ SOLARISevación/ SOLARISevamiento/ SOLARISevantado, da/ SOLARISevantamiento/ SOLARISevantar/ SOLARISevanto/ SOLARISevar/ SOLARISfa/ SOLARISfatada/ SOLARISfeador, ra/ SOLARISfear/ SOLARISfeo/ SOLARISferino, na/ SOLARISfista/ SOLARISicitación/ SOLARISicitador, ra/ SOLARISícitamente/ SOLARISicitante/ SOLARISicitar/ SOLARISícito, ta/ SOLARISicitud/ SOLARISidar/ SOLARISidariamente/ SOLARISidaridad/ SOLARISidario, ria/ SOLARISidarizar/ SOLARISideo/ SOLARISidez/ SOLARISidificación/ SOLARISidificante/ SOLARISidificar/ SOLARISiloquiar/ SOLARISiloquio/ SOLARISimán/ SOLARISimitano, na/ SOLARISio/ SOLARISípedo, da/ SOLARISipsismo/ SOLARISista/ SOLARISitaria/ SOLARISitariamente/ SOLARISitario, ria/ SOLARISitud/ SOLARISiviadura/ SOLARISiviantado, da/ SOLARISiviantar/ SOLARISiviar/ SOLARISivio/ SOLARISivión/ SOLARISivo/ SOLARISla/ SOLARISlado/ SOLARISlador/ SOLARISlamar/ SOLARISlar/ SOLARISlastre/ SOLARISlastría/ SOLARISlisparse/ SOLARISlo/ SOLARISlozante/ SOLARISlozar/ SOLARISlozo/ SOLARISmenar/ SOLARISo (1), la/ SOLARISo (2)/ SOLARISolateco, ca/ SOLARISombra/ SOLARISombría/ SOLARISomillo/ SOLARISomo/ SOLARISsonense/ SOLARISsticial/ SOLARISsticio/ SOLARIStadizo, za/ SOLARIStador, ra/ SOLARIStaní/ SOLARIStar/ SOLARIStería/ SOLARISterón, na/ SOLARIStero, ra/ SOLARIStura/ SOLARISubilidad/ SOLARISuble/ SOLARISución/ SOLARISucionar/ SOLARISutivo, va/ SOLARISuto/ SOLARISutrense/ SOLARISvencia/ SOLARISventar/ SOLARISvente/ SOLARISver/ subSOLARISador/ subSOLARISano/ subSOLARISar/ tornaSOLARIS/ tornaSOLARISado, da/ tornaSOLARISar/ valliSOLARISetano, na/ verSOLARISari/ videoconSOLARISa

(Dedicado, con todo mi cariño, a mi amiga Aída B. Márquez)

Me voy a dar un regalo

para el cumpleaños de mi amiga Aída
me voy a regalar
un viaje a verla
y compartir juntos
una cena
en un lugar fantástico
donde se puede comer
contenido y continente
llamado Oma’s Apotheke
se puede comer
hasta la bebida
hasta el mayor de los placeres
hasta la duda
y alimenta
alimenta
menta
está todo tan rico…
y mi amiga es tan mi amiga…
que me voy a hacer un regalo
sin dudarlo.

Casi, pensé en llegar andando.

Captura de pantalla de 2015-04-16 21:28:32

La Traviata, de Verdi

Estoy ilusionado como niño con zapatos nuevos (expresión claramente en desuso en esta tierra de consumismo desmesurado) con la asistencia esta tarde a mi primera noche en la Ópera.

En diciembre, carente de ideas, le sugerí a Carmen que nos regalásemos mutuamente entradas para la ópera. Ella había pedido (sutilmente) desde hacía años tener como regalo una entrada a la ópera en el Teatro Real, pero siempre que yo había hecho algún intento me había encontrado con lo mismo: un desmesurado precio que no podía asomarme a pagar.

Este año, algo mejor de dinero y, como todos, pleno de objetos así que sin necesitar otro superfluo, le ofrecí a Carmen que yo le regalaba su entrada y ella a mí la mía.

Elegimos La Traviata, de Giuseppe Verdi, porque es algo más conocida que las otras que presentaba la programación del Teatro Real y para una primera vez, pensamos, sería mucho más «amable» reconocer alguna que otra parte de la pieza.

Pero siempre habrá quien no pueda pagar la cantidad que pagamos o que no le apetezca. Por suerte, también hay versiones completas en youtube:

[youtube_sc url=https://youtu.be/n3N2tYOXm4E]

Hoy no me apetece hablar de la deriva hacia la privatización que todo bien cultural de este país está teniendo, pero extraído directamente de la página web del teatro real:

El Teatro Real es una de las instituciones culturales con mayor relevancia y prestigio en el ámbito nacional y cuenta, asimismo, con una gran proyección internacional.

De cara a mantener este posicionamiento y continuar con su iniciativa de acercar su proyecto artístico a la sociedad civil, más allá del ámbito institucional, el Teatro Real apuesta firmemente por aquellas iniciativas destinadas a fomentar la participación privada en el sostenimiento de sus actividades, tanto a través de las diferentes figuras y posibilidades de patrocinio corporativo, como de la filantropía personal, ambos activos esenciales de esta institución.

Pues menos mal que es de las de mayor prestigio y relevancia…

Ayer descubrí WhatsApp Web

Es una forma interesantísima de utilizar WhatsApp.

La app de mensajería por excelencia de la era smartphone, ha desarrollado un avance singular que siempre eché en falta: una aplicación web que permite acceder a la app de manera que se puedan enviar mensajes desde cualquier ordenador, o cualquier dispositivo, que tenga un teclado y un navegador.

Esto la convierte en la herramienta idónea para seguir comunicándose con quienes están en esta modernez de smartphonelandia y tienen una conexión a Internet (se puede no tener ¿!!?) desde casa mientras se trabaja, por ejemplo.

Es posible que el problema sea esta misma onmipresente disponibilidad de la app, que puede conllevar una agobiante sobrecarga de mensajes innecesarios en momentos en los que se requiera concentración o «enfoque».

Esto, de nuevo, me lleva a cierta necesidad que cada día veo más acuaciante de diferenciar el uso profesional que se hace de la telefonía y las redes en general de telecomunicaciones y el uso personal que se hace de las mismas.

Es decir, quiero poder recibir un mensaje de whatsapp de un alumno mientras estoy trabajando, pues sé que lo que quiere decirme puede ser «urgente» o requerir mi intervención, o informarme de algo que puedo querer saber con prontitud, pero, por el contrario, durante esa parte de mi tiempo, puedo querer estar desconectado (salvo emergencias) de mensajes de amigas o familia.

También (durante las vacaciones o fiestas de guardar y en otras franjas horarias) puede darse justo la situación contraria: no estar para el trabajo y sí para los amigos íntimos o la familia.

Surge más de un problema cuando ambos círculos se mezclan, como suele ser habitual, pero al menos es minimizar el problema a algún tipo de intersección y no a una maximalista unión de conjuntos que acaba por englobar al mundo mundial.

De momento, mientras no sea demasiado molesto, estoy contento de haber descubierto la posibilidad de usar WhatsApp vía Web y haberla estrenado con unos mensajes a mi querida Aída B.

Una falsa performance

Podría pensarse perfectamente que se trata de una performance.

Es más, podría afirmar que lo fue, que fue una performance realizada en Hamburgo, Alemania, y engrosar así mi curriculum como artista de acción, pero la verdad (la mía) es que no lo fue.

Fue una acción (una serie de acciones) que hice con un poco de descontexto, pero sin intención de reclamar para ella la entidad de objeto artístico. Así que no lo fue, no fue una pieza de arte de acción, aunque hubiera habido acción, descontexto e incluso algún público parcialmente participativo.

Pero podría venderla como lo contrario… y hasta me la comprarían como tal, porque hay quienes me quieren mucho y me comprarían cosas tan distantes que me darían mucho mayor prestigio como artista.

Pero no, yo sé que no lo era. Sé que no. Sé que quise hacer otra y no me llevé el material que me hacía falta (un texto maravilloso de Jaime Vallaure escrito en ocasión a la convocatoria de la Chamalle 10).

Podría pensarse que se trata de una performance, pero lo que la diferencia de una performance real es que yo sé lo que sé… ¿se entiende?

Pues eso.

Esto no es una broma