Diario
Por fin he conseguido tener un minutito (algo más de 2 días) para crear el apartado de la web dedicado a este proyecto Arqueografía en el que estuve trabajando un par de años, realizando innumerables cianotipias de palimpsestos digitales.
No tenía claro en qué apartado poner esta página, que podía ser tanto libro objeto (3D) como poesía visual, como un proyecto…
Quizá mi obsesión por ordenar lo inordenable está llegando a límites ridículos. (Hace años que llegó, no pienso engañar a nadie)
Me gusta sentirme casi un hacker por hacer algo tan básico como explorar el código de una página web que visito y de la que no puedo hacerme con algún contenido, como por ejemplo esta fotografía que se usaba como «background» en un carrusel de imágenes y que aparentemente no podía descargarse.
Para ello la acción es tan simple como pinchar con el botón derecho sobre cualquier parte y elegir la opción «Inspeccionar» para ver el código fuente o un cachito específico del mismo.
A partir de ahí, encontrar el enlace a la imagen, en este caso:
https://laterrazadelsantodomingo.es/sites/default/files/styles/background_home/public/sd-255_1.jpg
y llevárselo a una pestaña nueva del navegador en cuestión.
Y, como dice mi hermana, pues ya estaría. 🙂
Quiero probar una absoluta tontería probando cómo funciona elevar un número a otro, y el resultado a un tercero, pero todo en HTML con las etiquetas básicas «sup»
XXX
Seguramente me decepcionará porque no creo que esté pensado para esto, pero lo voy a publicar sea lo que sea… Sin hacer, ni siquiera, una prueba previa ni, por supuesto, pedirle a una IA que lo haga por mí. ¡Qué aburrido lo de las inteligencias artificiales!
y rizando el rizo…
2222
Esta semana he estado personalizando el blog (este diario en el que escribo) y la web de Clave 53 con el fin de homogeneizar las 3 webs que van a estar relacionadas, que son la web de Clave 53, la web de Giusseppe.net, que a su vez es trina, así que incluye las páginas HTML hechas por mí, el wordpress en el que estoy escribiendo ahora mismo y la aplicación Piwigo que sirve como soporte a los álbumes de fotografías que utilizo en la web, y por último la aún no realizada web de la «Editorial» que está a medio camino entre la de Clave 53 y la de Giusseppe, lo que me ha condicionado a elegir una tríada de colores «armónicos» así que será con fondos verdes donde la de Clave 53 es morada y la de Giusseppe es naranja y algún juego similar con los tres colores básicos que he decidido que sean:
Para personalizar el blog, que está realizado usando una plantilla denominada Tulsi he utilizado el siguiente código extra (extraído y adaptado desde la web de giusseppe.net):
/* Cabeceras */
.entry-header {
padding: 30px;
background-color: #333;
-webkit-animation: slide-in-left 3s both;
animation: slide-in-left 3s both;}
h1.entry-title {font-size: 2em}
h2.entry-title a {color:#ff9900;}
h2.entry-title a:hover {color:#FFF;}
a, a:visited {
color: #ffffff;
font-weight: bold;
}
a:hover {color:#ff9900}
/* Marco Redondeado */
/* Marcos redondeados */
main {
padding: 10px;
box-shadow: 0 0 30px rgba(255,159,0,0.7);
}
/* Quotes */
blockquote {
font-size:1em;
color: grey
}
/* Widgets */
.widget-title {
background-color: #333;
font-size: 16px;
-webkit-animation: slide-in-right 3s both;
animation: slide-in-right 3s both;
}
.sidebar .widget {
font-size: 12px;
background-color: #ff9900;
color: black;
}
.sidebar .widget a, .sidebar .widget a:visited {
color: black;
font-weight: bold;
}
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
Me envía mi querida y admirada Ana Matey publicidad de sus estupendos Talleres de Creación y le comento, algo tontamente, que cuando se ve su mensaje, aparece una ristra de datos técnicos que no deberían estar ahí, seguramente puestos por la plantilla wordpress que debe de estar usando en su sitio web.
Y es que estas tonterías entre «simplificarnos» la vida con plantillas de WP evitando desarrollos HTML personalizados, supone que muchas veces acabamos teniendo «morralla» de código generado y que no sabemos de dónde ha salido. Pero, supuestamente, ha sido fácil generarlo. Lo que no suele ser es fácil modificarlo.
Espero que mi amiga no se tome a mal mi comentario que pretende ser constructivo.
A modo de taburete, la web en la que he estado trabajando desde primeros de marzo hasta ahora es una y es trina, sí, se trata de 3 patas que sustentan una especie de triunvirato que espero que no acabe tan mal como el famoso juliano.
El esqueleto o lo que la aglutina es lo que llamo la base que está hecha casi «from scratch» en lo que se refiere al estilo, al aspecto, al comportamiento en diferentes dispositivos…
Sobre ella (o bajo ella, no sé) hay instalada una base de datos que gestiona, desde el 2011, mi diario, en el que escribo, como su nombre indica, casi diariamente, excepto en temporadas estivales o fiestas de guardar (el 1 de mayo o el 6 de diciembre).
De hecho, elegir el estilo del wordpress que la muestra me llevó gran parte del mes de marzo, hasta que di con una combinación de dos «themes» que me gustaban y de los que personalicé el definitivo, que pasó también a influir para unificar el estilo que usaría en las otras 2 patas de esta web trifásica.
Pero lo más sofisticado fue cuando decidí que no quería utilizar ninguna de las herramientas más habituales de gestión de álbumes de fotos o imágenes para almacenar el material visual que tenía (que había tenido previamente en picassa, luego en google-photos, o para el que había desarrollado o implementado «sliders» de javascript más o menos engorrosos).
Así que «inventé la rueda» instalando en mi hosting una aplicación llamada Piwigo (open source para más datos) que maneja y almacena las imágenes: la galería.
Subirlas a ese espacio requerían, para no ser demasiado pesadas en término de tamaño de archivo, su procesamiento, reducción de resolución, renombrado para evitar caracteres especiales, minúsculas para homogeneizar, etc… que hice gracias a la programación, pues hablamos de más de 3000 imágenes.
Unificar estas tres componentes y que parezcan una sola web y no múltiples ha sido complejo, pero lo más difícil todavía fue revisar reordenar y modificar todo el trabajo que tenía más o menos mal documentado desde el 2008 (fecha de la última actualización importante de la web) hasta hoy.
12 años de trabajo que han sido fructíferos en términos de obra, de producción casi industrial, de proyectos complejos y largos… muchos de los cuales no habían visto la luz hasta hoy.
Ahora siento un alivio considerable y una extraña sensación de vacío, sigo teniendo material en curso, en lo que estoy trabajando que aún no está en esta web, pero ya sé dónde ponerlo cuando acabe.
En resumen:
Han sido meses de confinamiento y agradezco (a mí mismo, supongo) haber tenido el tiempo para poder afrontar algo como esto que muchas de las veces, mientras lo estaba haciendo dudaba que tuviese el más mínimo sentido en esta época de red social y publicación en plantilla.
Espero que me dure el trabajo principal, si no una docena de años como la anterior web, por lo menos más de 5 años.
Modificando mi página web, me encuentro con que, finalmente, acabo generando una especie de plantilla (hecha a mano, como debe ser todo molde) que hace que casi toda la web sea relativamente homogénea, lo que me simplifica la vida, obviamente, pero también aburre un poco porque tienes la sensación de que todas las páginas que estás visitando son un poco más de lo mismo… Pero qué le voy a hacer. Es mi forma de ser.
Aquí dejo la plantilla HTML y en breve publicaré también los documentos CSS y el javascript necesario para hacer una página responsive manejando una estructura de archivos HTML con más de 100 páginas individuales.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Página Personal de Giusseppe Domínguez">
<meta name="Keywords" content="Arte, Taller, Curso, Clase, Poesía, Escritura, Creatividad, Giusseppe Domínguez, Clave 53, Experimentación">
<meta name="author" content="Giusseppe Domínguez">
<title>Giusseppe Domínguez</title>
<link rel="stylesheet" href="../estilos/gsp2020.css">
<link rel="shortcut icon" href="../img/gsp.ico">
<script src="../js/jquery.min.js"></script>
<script src="../js/gsp.js"></script>
</head>
<body>
<!-- Menú superior -->
<script type="text/javascript">
creaheader('../'); // Crea menú - top (logo-header y nav)
</script>
<main>
<section>
<a name=ACCIONES></a>
<article>
<hgroup>
<h1>Acciones</h1>
<h3>Performances, Acciones, Poesía Escénica...</h3>
</hgroup>
<div class="content">
<p>AQUÍ VA EL CONTENIDO</p>
</div> <!-- /content -->
</article> <!-- /article -->
</section> <!-- / #main-content -->
</main>
<!-- Footer -->
<script type="text/javascript">
creafooter(); // Crea footer (copyright y ref: giusseppe.net)
</script>
</body>
</html>
Después de la actualización del «theme» de WordPress que realicé ayer en el entorno de producción, he comenzado lo que podríamos denominar el ajuste fino.
La verdad es que estoy fascinado con las posibilidades que tiene CSS3, como generar animaciones tan sencillamente como diciendo «trasládete de acá a allá«… más o menos. Es formidable y ya había hecho uso de ello en la web del proyecto La Consulta, especialmente en el apartado de mostrar el tamaño aumentado de las imágenes de los garbanzos contados cuando se pasa el ratón por encima.
Es tan tentador usarlo una vez que se conoce que puede acabar pareciendo un circo en el peor de los sentidos. De momento, sólo incorporaré alguna traslación de «cajitas» en el blog y cuando comience (que ya estoy a punto) a remodelar la web, usaré las mismas, además de intentar utilizar los mismos colores, así que lo he añadido a un archivo CSS llamado animaciones.css que estoy creando a partir de la fantástica herramienta encontrada en animista.net.
Me habría gustado utilizar «@import» en el CSS adicional dentro del tema de wordpress, pero parece que no es viable hacerlo, así que me obliga a tener duplicadas (con lo poco que eso me gusta) esas directivas tanto en el hueco que la edición del tema WordPress me permite, así como en el archivo CSS /estilos/animaciones.css de la raíz de mi web.
De momento, dejo el código que ha generado esta aplicación online en esta entrada, por si alguna vez vuelvo a necesitarla:
.slide-in-left {
-webkit-animation: slide-in-left 3s both;
animation: slide-in-left 3s both;}
.slide-in-right {
-webkit-animation: slide-in-right 3s both;
animation: slide-in-right 3s both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-5-8 11:22:35
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
Tras años pidiéndomelo, el día 6 de diciembre de este pasado 2018 comencé a desarrollar la web para www.carmendelarosa.com teniendo en cuenta que su mantenimiento pueda ser hecho por Carmen sin mi implicación, así como la exigible calidad de «responsive«, es decir, que se visualice (vea quedaba muy vulgar) bien en dispositivos móviles así como en pantalla de ordenador.
La web anterior estaba hecha usando tan solo el VI y un básico HTML con CSS, pero sin tener nada de javascript ni, desde luego, cumplir muchas de las exigencias (porque lo son) del buscador universal para que la web esté mejor posicionada. Por ejemplo, usar FRAMES es algo que ha quedado obsoleto y, en parte, razonablemente, porque así aseguran que la parte incluida en la web visitada es material «interno» y no que en uno de los «frames» se cuele material procedente de otro lugar inadecuado. Curiosamente, los IFRAMEs campan a sus anchas, cuando hace tiempo se consideraban potencialmente peligrosos por esto mismo.
La estructura de la anterior versión era muy simple y la he copiado en varias ocasiones para implementar una página web con rapidez y eficacia: un marco superior (frame) para un índice, un marco inferior (frame) para una firma o nota al pie y un marco central (main frame) destinado a la información de cada una de las secciones accesibles desde el índice.
Este esquema permitía hacer una página muy sencillamente y ordenada, aunque con pocas posibilidades de búsquedas y, a medida que el tamaño de la web aumentaba, la complejidad interna hacía que las referencias entre archivos pudiese resultar difícil de «trazar», aunque teniendo ordenadas las carpetas del sitio se facilitaba bastante y permitía modificar pequeñeces con celeridad.
Pasar a utilizar un blog de wordpress para «programar» una web era algo a lo que me mostraba muy reticente, pero reconozco que es sencillo una vez elegido un tema «potente» que elimina casi por completo la preocupación «estilística» (fuera el engorro de programar reglas CSS sin tener nociones muy avanzadas), derivándola a la personalización del entorno de manera visual, lo que lo hace asequible a casi cualquier neófito como yo en esto de los blogs usados como web.
Este lunes he estado programando la web del proyecto !ç~ñ¿.# (aunque programar nunca debió usarse para codificar HTML). He dividido la misma en las mismas secciones del proyecto en Verkami, lo que fue bastante práctico a la hora de estructurar la información que tenía en mi cabeza sobre el trabajo que estaba haciendo.
Ha quedado adaptada a la hechura antigua de toda mi página personal (giusseppe.net) que no deja de estar claramente obsoleta, pero modificarla puede llevarme tanto tiempo como ignorar todo lo que he hecho hasta hoy y pasar página (página web, se entiende) para hacer una nueva en un futuro más o menos lejano.
