Diferencias

Muestra las diferencias entre dos versiones de la página.

--- locomotive:aplicaciones:otros:family_treemaker_v5 [2026/05/18 12:28] – creado jesus
+++ locomotive:aplicaciones:otros:family_treemaker_v5 [2026/05/18 12:47] (actual) – jesus
@@ Línea 31: / Línea 31: @@
     padding: 2px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;
   }
-  .portada-ficha-container img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
+  .portada-ficha-container img { width: 100%; height: 100%; object-fit: cover; }
   .datos-ficha { flex: 1; min-width: 300px; }
@@ Línea 58: / Línea 58: @@
   }
-  /* --- GRID DE ELEMENTOS MULTIMEDIA (CAPTURAS, DISCOS, ETC) --- */
+  /* --- GRID DE ELEMENTOS MULTIMEDIA --- */
   .media-grid-center {
     display: grid;
@@ Línea 89: / Línea 89: @@
   }
-  /* Contenedores centrados individuales */
+  /* Contenedores centrados individuales y en paralelo */
   .block-center-container {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    align-items: center;
+    gap: 30px;
+    align-items: flex-start;
     justify-content: center;
     text-align: center;
-    margin: 15px 0;
+    margin: 20px 0;
+  }
+  .caratula-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 300px;
   }
@@ Línea 118: / Línea 126: @@
   .download-list a:hover { background-color: rgba(0, 255, 0, 0.2); }
-  /* --- INTERFAZ MODAL INTERACTIVA RETRO --- */
+  /* --- INTERFAZ MODAL INTERACTIVA RETRO (TAMAÑO REAL FORZADO) --- */
   .crt-modal-overlay {
     display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-    background-color: rgba(0, 7, 0, 0.9); z-index: 9999;
+    background-color: rgba(0, 7, 0, 0.95); z-index: 9999;
-    justify-content: center; align-items: center; cursor: pointer;
+    cursor: pointer; overflow: auto; padding: 20px; box-sizing: border-box;
   }
   .crt-modal-overlay::after {
-    content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    content: " "; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
-    background-size: 100% 4px; pointer-events: none;
+    background-size: 100% 4px; pointer-events: none; z-index: 10000;
+  }
+  .crt-modal-wrapper {
+    display: flex; justify-content: center; align-items: center; min-width: 100%; min-height: 100%;
   }
   .crt-modal-content {
-    max-width: 90%; max-height: 90%; border: 4px solid #00ff00;
+    border: 4px solid #00ff00; box-shadow: 0 0 30px #00ff00; background-color: #000;
-    box-shadow: 0 0 30px #00ff00; background-color: #000;
+    max-width: none !important; max-height: none !important; width: auto !important; height: auto !important;
-    animation: zoom-in-crt 0.2s ease-out;
+    display: block; margin: auto; animation: zoom-in-crt 0.18s ease-out;
   }
-  @keyframes zoom-in-crt { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+  @keyframes zoom-in-crt { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
   @media (max-width: 700px) {
@@ Línea 140: / Línea 151: @@
     .dato-linea { flex-direction: column; }
     .media-grid-center { grid-template-columns: repeat(2, 1fr); }
+    .block-center-container { flex-direction: column; align-items: center; }
   }
 </style>
-<!-- MODAL CRT ÚNICO PARA PANTALLA COMPLETA -->
+<!-- MODAL CRT ÚNICO PARA PANTALLA COMPLETA A TAMAÑO REAL -->
 <div id="crtModal" class="crt-modal-overlay" onclick="closeCrtModal()">
-  <img id="crtModalImg" class="crt-modal-content" src="" alt="Full Screen Retro View">
+  <div class="crt-modal-wrapper">
+    <img id="crtModalImg" class="crt-modal-content" src="" alt="Full Screen Retro View">
+  </div>
 </div>
@@ Línea 153: / Línea 167: @@
     var modalImg = document.getElementById("crtModalImg");
     modalImg.src = imgElement.src;
-    modal.style.display = "flex";
+    modal.style.display = "block";
+    document.body.style.overflow = "hidden"; // Deshabilita scroll de la web de fondo
   }
   function closeCrtModal() {
     document.getElementById("crtModal").style.display = "none";
+    document.body.style.overflow = ""; // Restablece scroll de la web
   }
 </script>
@@ Línea 165: / Línea 181: @@
   <div class="ficha-libro-crt">
     <div class="portada-ficha-container">
-      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p1.JPG" alt="Family Treemaker v5" onclick="openCrtModal(this)">
+      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_new.JPG" alt="Family Tree Maker v5">
     </div>
     <div class="datos-ficha">
@@ Línea 172: / Línea 188: @@
         <img src="/lib/exe/fetch.php?media=botones:reino_unido.jpg" class="bandera-pais">
       </div>
-      <div class="dato-linea"><span class="dato-etiqueta">APLICACIÓN:</span><span class="dato-valor">Family Treemaker v5</span></div>
+      <div class="dato-linea"><span class="dato-etiqueta">APLICACIÓN:</span><span class="dato-valor">Family Tree Maker v5</span></div>
       <div class="dato-linea">
         <span class="dato-etiqueta">COMPAÑÍA:</span>
         <span class="dato-valor">
-          <a href="doku.php?id=companias:locomotive_systems" class="link-editorial">Locomotive Software</a>
+          <a href="doku.php?id=companias:locomotive_software" class="link-editorial">Locomotive Software</a>
         </span>
       </div>
@@ Línea 182: / Línea 198: @@
         <span class="dato-etiqueta">DISTRIBUIDORA:</span>
         <span class="dato-valor">
-          <a href="doku.php?id=companias:locomotive_systems" class="link-editorial">Locomotive Software</a>
+          <a href="doku.php?id=companias:locomotive_software" class="link-editorial">Locomotive Software</a>
         </span>
       </div>
@@ Línea 202: / Línea 218: @@
         <span class="dato-etiqueta">SINOPSIS:</span>
         <span class="dato-valor" style="margin-top: 5px; text-align: justify; color: #aaffaa; font-style: italic;">
-          Única cabecera española dedicada en exclusiva y de forma monográfica al ecosistema PCW. Destacó por un nivel técnico superior, ofreciendo soluciones de hardware y software profesional (CP/M, Logo, Mallard BASIC) en un momento donde las revistas generalistas ignoraban la plataforma. Su corta vida comercial la ha convertido en la "joya de la corona" para los coleccionistas de Amstrad en España.
+          Una de las herramientas de bases de datos más singulares del entorno Amstrad PCW. Diseñado de forma nativa por Locomotive Software, el programa permite estructurar y procesar genealogías familiares complejas a través de Mallard BASIC, exportando informes detallados mediante las rutinas del sistema y la impresora nativa del PCW.
         </span>
       </div>
@@ Línea 212: / Línea 228: @@
     <div class="pcw-section-title">A> DESCRIPCIÓN</div>
     <div style="text-align: justify; line-height: 1.6; color: #00ff00;">
-      <p style="margin-bottom: 15px;">Programa que crea el árbol genealógico. Próximamente.</p>
+      <p style="margin-bottom: 15px;"><strong>Family Tree Maker v5</strong> representa una excelente muestra del software de utilidad doméstica avanzada que se desarrolló para la línea <strong>Amstrad PCW</strong> a principios de la década de los 90. Desarrollado directamente por los arquitectos del sistema operativo de la máquina, <strong>Locomotive Software Ltd.</strong>, el programa fue lanzado en <strong>1992</strong> en un formato de distribución de bajo coste (bolsa de plástico protectora con inserto frontal), lo que permitía abaratar costes comerciales frente a las tradicionales cajas de cartón rígido.</p>
-      <p style="margin-bottom: 15px;"><strong>PCW Magazine</strong> fue una de las publicaciones más esperadas y nació con el objetivo de llenar el vacío informativo que sufría la comunidad de usuarios del Amstrad PCW, al tratarse de una revista dedicada exclusivamente a esta gama de ordenadores, que durante años había quedado en un segundo plano frente a otras plataformas más populares. Representó uno de los proyectos editoriales más ambiciosos y, a su vez, efímeros del ecosistema Amstrad en España. Su aparición respondió a la demanda de numerosos usuarios que se sentían desplazados por las publicaciones generalistas más centradas en la gama CPC o en los compatibles PC por la prensa informática generalista.</p>
+      <p style="margin-bottom: 15px;">A nivel técnico, el programa saca provecho del entorno <strong>Mallard BASIC</strong> y se ejecuta de forma óptima tanto en los sistemas base como el PCW 8256 y 8512, como en la gama tardía de disqueteras de 3.5 pulgadas (PCW 9512). Su función principal consiste en gestionar e indexar bases de datos genealógicas complejas. A través de un sistema de menús optimizado para teclado, el usuario puede introducir enlaces familiares cruzados, fechas de nacimiento, defunciones, matrimonios y notas biográficas detalladas de cada individuo.</p>
-      <p style="margin-bottom: 15px;">La revista fue concebida como una publicación de alta calidad técnica y monográfica, dedicada exclusivamente a la arquitectura de las máquinas 8256, 8512 y 9512. Sin embargo, a pesar de la gran expectación generada, su trayectoria comercial fue extremadamente corta: El <strong>número 1 de PCW Magazine</strong> se publicó en <strong>enero de 1991</strong>, con el anuncio explícito de un segundo número previsto para julio de 1991, tal y como indicaba la propia revista. Sin embargo, no se publicaron más números, lo que evidenció las dificultades comerciales de la cabecera y limitó su recorrido editorial. A pesar de ello, la revista representó un intento serio y ambicioso de consolidar una publicación especializada en el ecosistema PCW en un momento en el que la plataforma ya comenzaba a perder presencia en el mercado. La publicación desapareció de los quioscos sin previo aviso.</p>
-      <p style="margin-bottom: 15px;">Entre sus objetivos principales estaba ofrecer un reflejo fiel y actualizado de todo lo relacionado con el software y el hardware del Amstrad PCW, tanto a nivel nacional como internacional. Sus contenidos buscaban servir de guía y apoyo práctico al usuario, cubriendo desde aplicaciones profesionales y formación, hasta juegos, listados, manejo avanzado de programas, noticias del sector y secciones de correo.</p>
+      <p style="margin-bottom: 15px;">La preservación e importancia histórica de este título radica en su rareza y en su posterior ciclo de vida: tras el cese de operaciones a gran escala de Locomotive Software, los derechos y stock remanente pasaron a formar parte de la herencia gestionada por <strong>SD Microsystems</strong> (Steve Denson), permitiendo que la comunidad mantuviera acceso a este software especializado hasta su completa preservación digital.</p>
-      <p style="margin-bottom: 5px; color: #00ff00; font-weight: bold;">VOCACIÓN Y CONTENIDO EDITORIAL</p>
+      <p style="margin-bottom: 5px; color: #00ff00; font-weight: bold;">CARACTERÍSTICAS TÉCNICAS RELEVANTES</p>
-      <p style="margin-bottom: 10px;">PCW Magazine no solo buscaba ser un catálogo de novedades, sino un órgano de apoyo y formación para el usuario. Su línea editorial se centraba en:</p>
       <ul style="list-style-type: none; padding-left: 20px; margin-bottom: 15px;">
-        <li style="margin-bottom: 8px;"><span style="color: #008800;">[#]</span> <strong>Soporte Técnico Local:</strong> Priorizaba el análisis de hardware y software desarrollado en España, sirviendo de guía práctica para el mercado nacional.</li>
+        <li style="margin-bottom: 8px;"><span style="color: #008800;">[#]</span> <strong>Generación Automática:</strong> Capacidad de procesar relaciones complejas de ascendencia y descendencia de forma estructurada en memoria.</li>
-        <li style="margin-bottom: 8px;"><span style="color: #008800;">[#]</span> <strong>Secciones Especializadas:</strong> Guías de formación en aplicaciones profesionales (procesadores de texto, hojas de cálculo) y secciones lúdicas ("Guía para el jugador").</li>
+        <li style="margin-bottom: 8px;"><span style="color: #008800;">[#]</span> <strong>Salida por Impresora:</strong> El programa integra rutinas nativas para volcar el árbol y fichas individuales en papel a través de las impresoras de aguja de Amstrad.</li>
-        <li style="margin-bottom: 8px;"><span style="color: #008800;">[#]</span> <strong>Interacción con la Comunidad:</strong> Secciones de correo, consultas técnicas y listados de código (Type-ins), esenciales para la fidelidad del lector.</li>
+        <li style="margin-bottom: 8px;"><span style="color: #008800;">[#]</span> <strong>Estructura en BASIC:</strong> El núcleo del programa utiliza la velocidad de procesamiento de Mallard BASIC para las llamadas del sistema.</li>
-        <li style="margin-bottom: 8px;"><span style="color: #008800;">[#]</span> <strong>Actualidad y Manejo:</strong> Trucos para el sistema operativo CP/M y análisis profundos de productos.</li>
       </ul>
-      <p style="margin-bottom: 5px; color: #00ff00; font-weight: bold;">UN FINAL INESPERADO</p>
-      <p>Aunque el proyecto contaba con una factura impecable y contenidos muy completos, el mercado informático de 1991 estaba virando agresivamente hacia los sistemas de 16 bits y el entorno Windows. Esto, sumado a posibles dificultades de distribución, provocó que <strong>PCW Magazine</strong> quedara como una pieza de coleccionista, siendo hoy uno de los ejemplares más raros y buscados de la hemeroteca de Amstrad en España.</p>
     </div>
   </div>
@@ Línea 253: / Línea 261: @@
   <div class="pcw-section-box">
     <div class="pcw-section-title">A> EMBALAJE ORIGINAL</div>
-    <div style="color: #00ff00; margin-bottom: 15px;"> En las siguientes imágenes podéis comprobar el empaquetado original. </div>
+    <div style="color: #00ff00; margin-bottom: 15px; text-align: center;"> En las siguientes imágenes podéis comprobar el empaquetado original. </div>
-    <div class="block-center-container">
+    <div class="block-center-container" style="flex-direction: row; gap: 20px;">
-      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p2.JPG" style="max-width: 340px;" onclick="openCrtModal(this)">
+      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p1.JPG" style="max-width: 240px;" onclick="openCrtModal(this)">
+      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p2.JPG" style="max-width: 240px;" onclick="openCrtModal(this)">
     </div>
-    <p style="text-align: center; font-style: italic; color: #008800; margin-top: 10px;">Próximamente</p>
   </div>
@@ Línea 263: / Línea 271: @@
   <div class="pcw-section-box">
     <div class="pcw-section-title">A> CARÁTULAS</div>
+    <p style="color: #00ff00; margin-bottom: 5px;">A continuación podéis examinar las carátulas del software.</p>
+    <p style="color: #008800; font-size: 0.9em; margin-bottom: 20px;">Medida real de la carátula: Ancho: 14,85 cm x Alto: 21,10 cm</p>
-    <div class="block-center-container" style="margin-bottom: 30px;">
+    <div class="block-center-container" style="flex-direction: row; gap: 30px;">
-      <p style="color: #00ff00; font-weight: bold; margin-bottom: 10px;">[ AQUÍ TENÉIS LA CARÁTULA ORIGINAL ]</p>
+      <div class="caratula-wrapper">
-      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_old.JPG" style="max-width: 500px;" onclick="openCrtModal(this)">
+        <p style="color: #00ff00; font-weight: bold; margin-bottom: 10px;">ORIGINAL</p>
-    </div>
+        <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_old.JPG" onclick="openCrtModal(this)">
+      </div>
-    <div class="block-center-container">
-      <p style="color: #00ff00; font-weight: bold; margin-bottom: 5px;">[ AQUÍ TENÉIS LA CARÁTULA RESTAURADA ]</p>
+      <div class="caratula-wrapper">
-      <p style="color: #008800; font-size: 0.85em; margin-bottom: 10px;">Medida real de la carátula: Ancho: 14,85 cm x Alto: 21,10 cm</p>
+        <p style="color: #00ff00; font-weight: bold; margin-bottom: 10px;">RESTAURADA</p>
-      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_new.JPG" style="max-width: 500px;" onclick="openCrtModal(this)">
+        <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_new.JPG" onclick="openCrtModal(this)">
+      </div>
     </div>
   </div>
@@ Línea 279: / Línea 290: @@
   <div class="pcw-section-box">
     <div class="pcw-section-title">A> DISCO ORIGINAL</div>
-    <div style="color: #00ff00; margin-bottom: 15px;"> Disco original suministrado con Family Treemaker. </div>
+    <div style="color: #00ff00; margin-bottom: 15px; text-align: center;"> Disco original suministrado con Family Treemaker. </div>
     <div class="media-grid-center">
       <div class="media-item-center"><img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_disk_front.jpg" onclick="openCrtModal(this)"></div>
@@ Línea 299: / Línea 310: @@
     <p style="color: #00ff00; font-weight: bold; margin-bottom: 5px;">SOFTWARE / PROGRAMA</p>
     <p style="color: #aaffaa; font-size: 0.9em; margin-bottom: 10px; text-align: justify;">
-      Las imágenes de disco, se han obtenido de la versión original de Family Treemaker, han sido grabadas y verificadas.
+      Las imágenes de disco se han obtenido de la versión original de Family Treemaker, han sido grabadas y verificadas.
     </p>
     <ul class="download-list" style="margin-bottom: 25px;">
@@ Línea 311: / Línea 322: @@
     <p style="color: #00ff00; font-weight: bold; margin-bottom: 5px;">DOCUMENTACIÓN / MANUALES</p>
     <p style="color: #aaffaa; font-size: 0.9em; margin-bottom: 10px; text-align: justify;">
-      A continuación puede descargar el manual del programa Family Treemaker o verlo en línea. La hoja del manual mide: Ancho 14,85 cm x Alto: 21,10 cm
+      A continuación puede descargar el manual del programa Family Treemaker o verlo en línea.
     </p>
     <ul class="download-list">