¿Cómo haremos eso? Bueno, algo simple (y muy tonto, quizá). Copiaremos aquí todas las listas de ajustes que hemos solicitado para pulir el sitio. Advertimos que sin el contexto que provee la conversación que envuelve estos textos, los ajustes en cuestión no se entenderán en lo absoluto, así como pueden resultar repetitivos y/o contradictorios, y omitimos numerosos detalles que nos ha dado pereza recopilar aquí, por no mencionar que puede haber errores tipográficos derivados de las pésimas técnicas de copiado-pegado usadas para extraer el texto de nuestra conversación con Sib y editarlas para el formato de blogger en el menor tiempo posible.
No obstante, lo más importante aquí es dejar en claro que esta publicación no sirve para nada, como el título ya lo sugiere.
Buen provecho.
17/08/2020
Sólo dos detalles:
1) Creo que al texto del pie de página aún le falta un poco de aire (morado) en la parte superior. Unos dos o tres pixeles, para que se vea bien centrado en la barra.
2) No he pensado qué deberíamos hacer con los links cuando el cursor esté sobre ellos… O sea, supongo que debería resaltarse el vínculo, ¿Un cambio de color ligero bastaría para eso? (en cuyo caso, el logo debería enviártelo también en ese otro color, no?
17/08/2020
Notas generales:
1) Para pantallas pequeñas, el inconveniente es que todos los elementos en la página se ajustan igual (como un zoom), cuando en esta página tan vacía sería mejor reducir los márgenes para que los elementos encajen en una pantalla vertical. Envío un ejemplo adjunto.
2) No obstante, los ajustes actuales funcionan de maravilla para cuando la página se adapta a pantallas grandes, quizá porque el formato sigue siendo horizontal…
3) Por lo tanto, lo mejor sería ocupar los valores actuales para pantallas grandes (PC), y ajustar los márgenes antes que los objetos en pantallas pequeñas (Móvil). ¿Es muy complicado eso? (nosotros creemos que sí, por eso no planeamos una versión móvil)
Notas puntuales:
1) El tamaño del logo de tachibana y el texto "acceder" no se ajustan igual, supongo que porque uno es texto y otro imagen. Te envío el svg normal (blanco) y en mouseover (amarillo) de los dos objetos juntos, por si ayuda.
2) Sobre el cuerpo de la página (área gris), le convendría un borde más delgado. Creo que tiene cuatro pixeles de grosor. Con dos debería bastar.
3) Igual sobre el cuerpo, funciona bien el ajuste de tamaño, pero en una pantalla pequeña podría eliminarse el fondo negro. Algo así como "Cuando la pantalla mida menos de 800px, el cuerpo ocupará 100% del ancho en lugar del ??% que suele tener", es casi lo mismo que ya mencionamos antes.
4) Probablemente el gif debería conservar su tamaño original siempre (ya sea en pantallas grandes o pequeñas), pues hacerlo grande lo pixelea, y hacerlo pequeño lo haría muy pequeño.
5) En lugar de guiones morados pusimos 5 espacios transparentes. Puede funcionar mejor al ajustar la pantalla.
6) Cambiamos el texto del pie de página por algo más breve.
18/08/2020
Comentario general:
Creo que lo más complicado será el texto (y algunos objetos), en lo que respecta a darle un buen tamaño, interlineado, y márgenes (todo, mientras la página sigue siendo ajustable). Especialmente porque a lo largo del sitio hay MUUUCHO texto. Solicitamos tu extrema paciencia para con nuestra minuciosidad en ese aspecto.
Sobre la página de inicio:
1) Prácticamente perfecta, salvo que en la versión móvil, la barra inferior se queda congelada, y al deslizarte hacia abajo, la barra no baja.
2) Sería bueno que la versión de PC tuviera un poco más de aire sobre el logo de tachibana. Si eso hace que la versión móvil se desajuste, mejor que se quede así.
3) Recuerda que el texto del pie de página (que cambié por "Traducción de LIF, Ver créditos aquí") se tendrá que quitar de esta página. No es urgente, pero cabe mencionarlo.
4) El gif actual mide 300x300, pero tendremos que cambiarlo a 340x340. Supongo que eso se ajustará cuando te mande los gifs. Eso quizá pase hoy.
Sobre la página rutas:
1) Creo que el audio estaría mejor sin loop. ¿Tú qué opinas de eso?
2) Sobre "< volver", si se desacomoda al pasar a la versión móvil, quizá podría ayudar un espacio duro ( ) para evitar que se corte la palabra… Por cierto, que aún tiene la tipografía por default. "<" es Fira Code Bold y el resto Fira Code regular, igual que en "Rutas de navegación". En realidad, sólo el "<" debería ser un link (que pasa a amarillo en mouseover).
3) Olvidé mencionar que el logo de tachibana es un link que dirige al menú del juego, pero pues aún no existe esa página.
4) ¿Ayudaría si dejamos que la barra superior tenga un alto predeterminado en todas las páginas, y que sólo se ajuste el espacio horizontal entre objetos (para que los objetos no cambien de tamaño)?
8.5) ¿Crees que valdría la pena que la barra superior sea siempre visible (o sea, que esté anclada a la parte superior de la pantalla)? Yo creo que sí.
5) Sobre el texto en la versión móvil. Me gusta cómo se comporta, y el tamaño que tiene la letra en todas partes, pero creo que necesita más aire alrededor de todo, y quizá uno o dos pixeles de interlineado extra. Te mando un ejemplo de eso en un momento. (Por cierto, ¿sí es Fira code regular la tipografía del texto? A mí me parece Medium)
6) Sobre el texto en la versión de PC. Los títulos (bold, centrados) quedan bien en la versión móvil, pero creo que en la versión de PC ya no hace falta ajustar el tamaño (O sea, convendría que el tamaño en la versión de PC fuera fijo, o que todo se escalara pot igual (como si fuera sólo un zoom). En general, serviría darles un mayor puntaje, y reducir el resto del texto uno o dos pixeles/puntos. (y al igual que antes, le serviría un poco más de espacio vertical entre cada párrafo, el diseño original podría ser guiarte en eso).
7) Falta el texto que no te envié.
19/08/2020
1) La página de inicio la veo perfecta. Sólo le falta el mouseover al botón de acceder… Probemos a dejar sólo el texto como link (anaranjado y amarillo), y que el logo se quede como simple imagen.
2) Siendo que la tipografía del texto base realmente es Fira Regular (y no Medium), creo que se ve más gruesa de lo que habíamos contemplado… Para compensar eso (sólo en el bloque de texto, no en el título o en las barras superior e inferior), en lugar de blanco, serviría bajarle el tono a #F3F3F3 (Acabamos de notar que eso mismo es lo que hicimos en el blog hace mucho tiempo… Caray, discord funciona igual).
3) La barra morada que divide los últimos dos párrafos en "rutas" queda mejor con 2px de grosor… De hecho, creo que toda barra morada que se use en el futuro se verá mejor con ese grosor.
4.1) (versión móvil) El título me gusta más con 7vw en lugar de 8vw, y se ve mejor centrado. (hace nada descubrí las unidades "vw y vh". Parecen útiles y engañosas)
4.2) En los subtítulos (alineados a la izquierda), en lugar de tener 1% de espacio arriba y abajo, mejor que tengan 20px arriba y cero abajo (o su equivalente en %).
5.1) (versión PC) El texto de "< volver", el de "Rutas de navegación", y la caja de texto forman una escalera que no se ve muy agradable. Sería mejor si todo eso estuviera alineado. (Estuvimos jugueteando con el código, y nos gustaron los valores de 0% 16% 0% 16% de margen para "top-menu", y para el div de "contenido" un ancho de 80%, y margen de 30 y 80px superior e inferior respectivamente (o su equivalente en %). Al título no supe cómo moverle…)
5.2) A los subtítulos (centrados / h3) les queda mejor 2vw en lugar de 1.5 Y al párrafo básico le quedaría bien 1.3 de "line height" en lugar del 1.15 que tiene…
6) Duda: ¿Dónde obtuviste tú la tipografía de Fira? (Notamos que no es exactamente la misma que usamos en el diseño. La única diferencia notoria es el número cero, así que sólo es curiosidad)
21/08/2020
Créditos (versión móvil)
1.1) Los títulos en el Staff (de color azul claro) aparecen del mismo tamaño que el título ("Staff original"). (En la versión de escritorio se ve bien)
1.2) Por algún motivo, aunque el texto está centrado, la caja de texto luce desplazada hacia la izquierda (Lo cual, parece que se debe a que originalmente son dos columnas).
1.3) Por cierto, el nombre de Nakahara Jyunji viene escrito así en los créditos del juego, pero toda referencia en internet indica que su nombre se escribe "Junji", así que quitemos esa "y" que sale sobrando.
2) Sobre los comentarios que hicimos antes, faltó ajustar el margen del div de "contenido", el cual necesita un margen de 40 y 80px superior e inferior respectivamente (o su equivalente en %).
3) El subtítulo "h3 class="h3 h3-subtitulo" luce bien en la versión móvil, pero se hace pequeño en la versión de escritorio.
4) El "<" en "< volver" debería ir en bold. Sólo ese glifo.
5) La palabra "Acceder" en su estado normal quedaría mejor en naranja, para que no desentone con los demás links que ocupan ese mismo color.
Y ya… Por el momento no percibimos nada más que requiera cambios.
… ¿Crees que eso de la barra sea cosa de Github?
23/08/2020
En general 1) El div de contenido tiene "width: 55% / margin-bottom: 4% / margin-top: 2%". Creo que requiere 70, 15, y 4% respectivamente. (habrá que ajustar también el título de la sección y los objetos en la barra superior para que sigan estando alineados a la caja de texto)
G2) En la versión de PC, al hacer zoom out para simular el aspecto de la página en un monitor grande, Los objetos y títulos lucen bien, pero el texto de párrafo conserva su puntaje original. (o sea, se ve pequeño al hacer zoom out) ¿Es porque ocupa unidades fijas? Supongo que en la versión de escritorio funciona mejor el texto de tamaño variable, mientras que en móvil el tamaño fijo es lo mejor. ¿Se puede hacer eso? ¿Es posible ocupar diferentes unidades de medida para el texto/objetos según el tamaño del monitor? (O sea, sería perfecto poder ocupar pixeles para el tamaño del texto en móvil, y "vh/vw" en el texto para PC)
Acerca de 1) En "Diferencias en la navegación" borra las últimas dos palabras del párrafo ("Por ejemplo:"), pues el ejemplo en cuestión aún no está disponible.
A2) Creo que h3 class="h3 h3-subtitulo" debe esfumarse. Es decir, tiene un comportamiento extraño, y aunque puede ajustarse, debería bastar con ocupar el párrafo normal en bold. (Imagen adjunta 1)
Créditos 1) Eso del "h3" realmente tiene propiedades muy extrañas. (Imagen adjunta 2) No sé ni cómo explicarlo xD
C2) El párrafo "staff-cargo" tiene algo extraño: Ocupa "FiraCode-Medium", pero aparte de eso está en "font-weight: bolder". Esas dos propiedades juntas hacen que la letra quede demasiado gruesa. Según los ajustes que encontré, debería verse mejor en "FiraCode" con "font-weight: bold".
C3.1) Noté que "staff-subtitulo" está en "vw" y "staff-cargo" está en "px". No sé si eso pueda ser un problema o tenga un propósito que no entiendo, sólo lo noté. (Aplica el comentario general de antes sobre el tamaño de la fuente)
C3.2) Dicho eso, al hacer zoom out, veo que "staff-subtitulo" conserva bien su apariencia, pero el resto del texto no. Habrá que ajustar eso. (Aplica el comentario general de antes sobre el tamaño de la fuente)
C3.3) Dicho eso, creo que se vería mejor si todo el texto en esta página (excepto la nota legal) tuviera el mismo tamaño de fuente. (1.3 o 1.5vw se ven bien en mi pantalla / o un equivalente al tamaño de "staff-nombres", que está en 10px actualmente)
C4) Veo que las columnas las hiciste con "div", y quizá por eso la versión móvil muestra imperfecciones. ¿Crees que esto serviría para que mejorar eso? https://www.html6.es/t17_columnas.html
O quizá con tablas… pero no sé…
C5) Hay varios textos que deberían ir en "staff-cargo" y no lo están. (Imagen adjunta 3)
28/08/2020
Ahora, algunas indicaciones del menú principal.
1) Me gustaría que los sitios A y B, así como todos los niveles fueran una misma página (es decir, que al pasar de un nivel a otro, cambiaran los archivos en la pantalla, en lugar de dirigirte a otra página, esto para que el audio no se corte/reinicie durante la navegación) ¿Es posible? ¿Se entiende siquiera la explicación?
2) Puedes hacer caso omiso de las dimensiones de pantalla que especifiqué, sólo tómalas como referencia en la medida de lo necesario.
3) El orden de los archivos (últimas dos imágenes a la derecha) es importante.
4) El audio acá sí va en loop.
30/08/2020
1) Todos los archivos tienen 6 letras. (No es Dc001, sino Dc1001).
2) Los números de los niveles no tienen la tipografía correcta, y a veces quedan muy pequeños. Deberían funcionar bien con un tamaño variable similar al de los párrafos en las secciones ya hechas, aún si en lugar de cuatro filas de números (en PC), al final necesitamos más. El nivel activo va en blanco y en bold.
3.1) La posición del logo de Tachibana y el ancho del contenedor principal (área gris) debería ser consistente respecto a las otras páginas ya programadas, por eso las medidas que indiqué en el ejemplo de diseño ya no son útiles.
3.2) Ahora que lo veo, la barra superior en móvil tiene "padding: 4vw 4vw 4vw 4vw", y le quedaría mejor 2, 4, 2, 4… lo cual aplica también a las páginas ya hechas :|
4) Al hacer clic en el logo de tachibana, debería llevarte a la página de inicio. (Quizá deberíamos hacer eso mismo con el logo en las páginas ya programadas, y quitar el "< volver" de aquellas…)
5) En PC, la imagen de "Nivel 04" estorba a veces (hace que el contenedor de íconos no esté centrado, sino más a la izquierda).
6) Falta el loop de audio de fondo, que el gif sea variable, y aquello de las rutas en la barra superior.
7.1) Sobre los íconos: le vendría bien más aire arriba al contenedor de íconos en PC. (creo que tiene 2%. 4% parece funcionar mejor)
7.2) Para los archivos, el vínculo debería ser el ícono junto con el texto (aunque sólo el ícono cambia de color con mouseover).
7.3) Veo los íconos muy apretados a veces y muy separados en otras. Ya que son svg, sí se vale escalarlos, si bien, el tamaño actual en pixeles es el mínimo para PC, y el óptimo para móvil. Supongo que el ideal en general es que la proporciónentre el tamaño de los íconos y la distancia entre estos sea la constante, y que lo demás se ajuste a eso.
04/09/2020
En fin, antes de apagar la computadora, te envío los comentarios pendientes sobre el menú de juego…
1) Los números de los niveles aún tienen la tipografía por default (El tamaño ya está bien).
2) El sitio y nivel activos (A y 04, en blanco y bold) no deberían ser clickeables, y los demás deberían cambiar a amarillo con mouseover.
3.1) Al nombre de los archivos (texto abajo de los íconos) le sobra el subrayado.
3.2) El ícono "Dc" debería llamarse "Dc1". En principio no afecta, pero es el nombre correcto, y es "SSkn01" (ambas S en mayúscula y sólo con un cero)
3.3) Los íconos y la imagen que indica el nivel actual aún se ven pequeñas cuando hago zoom-out (para simular el aspecto en monitores mayores a 1600x900), para cualquier tamaño de pantalla menor a eso, no hay problema.
4) El link en la barra inferior ya puede ajustarse para que dirija a la página de créditos (y activar el color amarillo para mouseover).
5) Por algún motivo, al ver la página en horizontal (en mi tablet), Lain se estira… (sucedía en github, y aún ocurre) (adjunto imagen)
[Ahora, lo complicado]
6) (Hablando del ancho de la página en pixeles) Aún me conflictúa que el menú del juego tenga tres "estados" (≤800 | 801-1280 | >1280) mientras que el resto del sitio sólo tiene dos (≤900 | >900) que ni siquiera coinciden con los del menú. Antes que decantarnos por uno u otro, o replantear todo… ¿Se entiende lo que dije? (y en caso de que sí…) ¿Hay algún estándar al que convenga acoplarnos, o estamos en terreno abierto?
11/09/2020
Generales 1) El texto "Sitio A" aún es clickeable (no debería serlo, pues es el sitio activo)
G2) ¿Los íconos aún no tienen el cambio de color/imagen en mouseover, y de vínculo visitado porque esos vínculos aún no llevan a ninguna parte? De ser así, está bien, queda pendiente para más adelante.
G3) Recuerda que no es archivo Dc001 (Dc---), sino Dc1001 (Dc1---), y no Sskn001 (Sskn---), sino SSkn01 (SSkn--, con las dos S en mayúsculas y sólo dos dígitos)
G4) ¿No has conseguido evitar que la barra inferior se quede atascada en pantallas pequeñas?
Móvil 1.1) El número de los niveles (excepto el 04) aún está en la tipografía por default.
M1.2) Dicho eso, la distancia vertical entre los niveles (grid-row-gap) debería ser mayor, pues al usar los dedos en el móvil, el clic no es muy preciso. (me parece que 10px funciona bien)
M2.1) El tamaño de los íconos funciona bien (fijo, en pixeles)
M2.2) El tamaño de la tipografía bajo los íconos no funciona bien (sigue en tamaño variable, creo que entre 14 y 18px le queda bien)
M3.1) [Sobre la rejilla de íconos] A menos de 400px de ancho funcionan bien las 4 columnas, de 400 a 550 funcionan mejor 5 columnas, de 550 a 740 caben bien las 6, y arriba de 740 ya encajan las 8 originales. ¿Para hacer eso tendrías que hacer 4 estados diferentes para el móvil, o se puede hacer sólo la rejilla ajustable?
M3.2) Creo que también le vendría bien algo de espacio vertical (grid-row-gap). Algo entre 5 y 10px a lo mucho.
M3.3) Creo que la distancia mínima entre la rejilla de archivos y el gif de Lain debería ser la misma que existe entre el gif y la barra inferior. (Creo que la distancia mínima actual es de cero, así que a veces quedan muy pegados la rejilla y el gif)
M4) La barra superior presenta cierta altura en la página de inicio y en el menú, pero otra diferente en las demás páginas (prefiero el tamaño usado en estas últimas).
PC 1) Todo funciona perfecto en mi monitor a pantalla completa (1600x900), excepto la rejilla de niveles, a ésta le vendría mejor tener 5 columnas en lugar de 6.
Pc 2) Por otra parte, en pantallas menores a 1600 de ancho, los íconos comienzan a apretarse en horizontal, y el texto de los íconos (con dimensión variable) se vuelve muy pequeño en relación a los íconos (con dimensión fija). Creo que los íconos y texto de tamaño fijo funcionan bien entre 901 y 1600px de ancho, lo que falla en ese rango es el tamaño de la rejilla y sus márgenes. No he encontrado un ajuste apropiado porque no entiendo el comportamiento de el área donde está la rejilla (imagen adjunta).
Pc 3) Por su parte, en pantallas mayores a 1600 de ancho, el único problema es que los íconos y el indicador del nivel activo (en la esquina superior derecha) tienen dimensiones fijas, así que lucen más pequeños entre más grande la pantalla.
…
15/09/2020
Ufff… Pues ya estamos cerca… Van correcciones!
General) Acabo de notar que el menú pasa al formato móvil de 950px hacia abajo, pero el resto del sitio lo hace de 900px hacia abajo… o sea, hay una discrepancia de 50px allí D:
…
Móvil 1) El número de los niveles (excepto el 04) aún está en la tipografía por default.
M2) Ya revisé, y el problema con la barra superior del índex y el menú de juego (top-menu) no era el tamaño de ésta, sino el padding de su contenedor (div class="up-line color-line"), que tiene 4vw de cada lado, cuando debería tener 2vw 4vw 2vw 4vw.
M3) Veo que en la versión móvil pasaste los íconos a tamaño variable en lugar de hacer que la rejilla se adapte para mostrar más o menos columnas con íconos de tamaño fijo. Eso funciona bien. Sólo veo los íconos algo pequeños. En lugar de 12vw queda mejor 15vw. La tipografía ya está bien así tal cual.
M4) Me gustaría agregar un espacio muy pequeño entre los íconos y el texto. Creo que ponerle 1vw de margin-top al texto (p class="archive-link") funciona bien. (Sólo en la versión móvil. En PC no hace falta)
…
PC1) [de 951-1300px] los íconos quedan mejor a 65px de ancho (tamaño fijo). Por su parte, la tipografía queda mejor a 14px. Cuando lo ajusté eso generó que la rejilla se salga del contenedor en tamaños de pantalla pequeños, así que tocará evitar que eso suceda (Imagen adjunta)
Pc2) [de 1301 hacia arriba] Los íconos quedan mejor a 5vw, pues a 1.3 quedan muy pequeños. La tipografía, por su parte, queda mejor a 1.1vw en lugar de 0.9. Por su parte, el espacio vertical entre filas (grid-row-gap) está en 0px. Queda mejor a 1vw.
16/09/2020
Puess… En principio ya está. La mayoría de estos cambios son más bien para perfeccionarla, pero luego de esto, sí o sí, ya pasamos a lo que sigue.
…
M1) Ya vi por qué la lista de niveles en la versión móvil sigue apareciendo con la tipografía por default. Resulta que en font-family usa FiraCode-Regular en lugar de FiraCode (pues el -Regular está de más, al parecer)
M2) Aún sucede esa cosa rara de la barra inferior voladora, y como Lain parece estar anclada a la barra, pues se ve raro ¿No has averiguado qué sucede allí? (imagen adjunta)
PC0) Creo que la imagen que indica el nivel actual no debería estar suelta (sólo está allí, debajo de la línea morada). En realidad no parece afectar en nada, pero me llamó la atención. Si crees que está bien así, así que se quede.
PC1) En lugar de width: 70% en la rejilla de íconos, le pondría 77%. Del mismo modo, le pondría un margin-top de 6% en lugar del 4% actual. Si eso estropea algo, déjalo como ya está.
PC2) Hay que agregar un margin-top de 0.3vw al texto debajo de los íconos. (casi no se nota, pero al hacer zoom, el texto y su respectivo ícono se empiezan a juntar. Con este ajuste lo evitaremos)
PC3) Creo que grid-row-gap y grid-column-gap funcionan mejor con medidas variables (1.5vw funciona bien en ambos parámetros, tanto por debajo como por encima de los 1300px).
PC4.1) Si te fijas, al pasar de 1300 a 1301 hay un salto muy drástico en el aspecto de la rejilla y los íconos. Por eso mencionaba que de 1300 hacia abajo conviene usar medidas fijas para los íconos (65px) y el texto debajo de éstos (14px), y ya que estamos, también para la imagen que indica el nivel actual (90px). Así también evitamos que al acercarnos a 900px de ancho queden muy pequeños estos elementos.
PC4.2) El único problema con esto es que cerca de 900px de ancho la rejilla apenas cabe, y por el margin-left: 8% la rejilla se sale de su contenedor. ¿No se puede alinear la rejilla entera al centro del contenedor para ahorrarnos el margin-left: x%? (Imagen adjunta)
30/09/2020
General 1) El texto de los diálogos va en #F3F3F3, y para toda la columna izquierda queda mejor #D3D3D3
G2) El nombre de quien dice el diálogo (Lain: o Touko:) va en negrita.
G3) Creo que el reproductor de audio no está centrado entre las dos líneas moradas (en vertical). No veo ningún padding o margin que pueda ser la causa, pero al menos en mi pantalla, se ve un poco arriba del centro… (PD: ¿Esto no serviría de base para personalizarlo? https://jsfiddle.net/mgaskill/zo3ede1c/ … Aunque como mencioné, no le veo problema a usar la versión por default)
G4) Hay algunos casos en los que harán falta saltos de línea en los diálogos. Imagen adjunta es la mejor manera en que se me ocurre manejarlos. ¿Hay alguna opción más elegante que los nbsp para agregar la sangría después de los "br"? (Si no la hay, no problem)
G5) En lugar de que esa sección a la izquierda se llame dictionary-left-section, yo le pondría foot-notes, porque las anotaciones abarcan más que sólo definiciones…
…
PC1) [Debajo de 1300px de ancho] Usemos el texto en tamaño fijo. Me gustaría que el texto de los diálogos pasara de 1.7vw a 17px, el de los metadatos del archivo p class="subtitle-info" de 1.2vw a 14px, y el de las notas <p> (no tiene class= por algún motivo ó_ò) de 1.5vw a 12px. Por último, el título del archivo queda mejor en 40px y los tags en 12px.
PC2) Sobre la grid de los diálogos <section class="dialogos">, en lugar de grid-column-gap: 10px, usemos 1vw, y en lugar de grid-row-gap: 20px, que sea .5vw
PC3) Recuerda que a menos de 1300, el gif debe tener tamaño fijo (200px). Y ya que lo veo, creo en general se ve mejor sin el contorno morado.
PC4) [Arriba de 1300] Acá el gif sí debe ser escalable. 16vw funcionaría bien.
PC5) El tamaño del título funciona bien como ya está (3vw), lo mismo para los tags (1vw) y las notas al pie (0.9vw). Por otra parte, Los metadatos quedan mejor en 1.1 en lugar de 0.8, y los diálogos que están en 1.0 quedan mejor a 1.3.
PC6) Por último, el tamaño de la rejilla donde están los diálogos queda mejor a 70% de ancho en lugar de 50.
…
Móvil 1) El tamaño de todo el texto e imagen… ¡Ya quedó bien! (Inserte Pikachu sorprendido), sólo bajaría el tamaño del texto de las notas de 20 a 14px.
M2)A la rejilla de diálogos le falta un margin-bottom de aproximadamente 8% (de hecho, esto también podría aplicar a la versión de escritorio, sólo que ahora no se nota allá porque hay poco texto). El mismo comentario podría aplicarse al contenedor de las notas.
M3) ¿Será posible hacer que debajo de 450px de ancho, el texto de los diálogos se muestre como "block" en lugar de "grid"? (Imagen adjunta) En caso de que no, dejémoslo como está.
26/10/2020
Comencé a revisar la página desde cero, pero apenas revisé el index y las primeras páginas (créditos, acerca de y rutas) en la versión móvil, porque creo que esas son las que requieren ajustarse respecto a la página de audio. (La mayoría de los cambios son de pasar medidas variables a fijas)
[Generales]
G1) Envío un gif para ponerlo al fondo (a manera de mosaico) en los archivos de audio, video, etc. Sólo aplica para la versión de escritorio (pues en la versión móvil ni siquiera hay fondo). Debería verse igual que el background que uso en el blog.
G2) Cambiemos el texto del pie de página para simplificarla e incluirte. ¿Qué tal Lif+Sib, 2020. Créditos? (el link estaría en la palabra Créditos). Dicho eso, creo que ese vínculo aún no lleva a ninguna parte en ninguna de las páginas existentes hasta ahora, sin mencionar que en el index y en la página de créditos ese vínculo es redundante.
[versión móvil - Página de inicio]
M1) Al logo de tachibana cambiémosle el height: 15vw a 50px, y dejemos el texto debajo del logo a 24px en lugar de 4vw.
M2) Asimismo, al gif quitémosle el borde morado, añadámosle un max-height: 340px, y cambiémosle el height: 80vw a 90vw.
M3) Después, al class="item" cambiémosle el font-size: 3.5vw a 16px. Al contenedor nav class="menu", ajustémosle el padding 2% 0% 2% 0% a 4% 0% 10% 0%, qutémosle el "flex-direction: column" (para que quede en row), y al texto cambiémosle los guiones para que sólo sea uno entre cada link (" - " en lugar de " - - ") (Eso sí, no entiendo por qué es un "nav" en lugar de un "div")
M4) Por último, al texto en el pie de página (que no tiene class) cambiémosle el font-size: 3.2vw a 14px.
…
[versión móvil - Acerca de, créditos, rutas]
M5) Hagamos que los class="contenido", "title" y "top-menu" tengan aparte de width: 90%, un max-width: 650px
M6) Al párrafo class="contenido-text" cambiémosle el font-size: 4vw a 17px.
M7) Así mismo, al párrafo class="title" cambiemos el font-size: 7vw a 35px.
M8) Al subtítulo class="h3"cambiémosle el font-size: 5vw a 26px, y el margin: 4% 0% 4% 0% a 1% 0% 1% 0%.
M9) Luego, en el class="staff-subtítulo" cambiémosle el font-size de 4vw a 20px, en el class="staff-nombres" de 3.5vw a 14px, y en "staff-cargo" de 3.8vw a 14px también.
M10) Ahora, el class="h3 h3-subtítulo-staff" parece redundante, pues creo que le funcionan bien las mismas propiedades del class="staff-cargo", mientras que los créditos que ocupan class="contenido-text" style="text-align: center;" quedarían bien con el class="staff-nombres"
M11) Luego, al subtítulo class="h3 h3-subtitulo" cambiemos el font-size: 4vw a 17px.
M12) Quitemos el texto de "< volver" y que el logo de tachibana sea el hipervínculo que lleva al index. y cuando tenga el cursor encima, que pase a ser amarillo (adjunto el logo en ambos colores). Creo que se puede pre-cargar ese segundo svg con <link rel="preload" as="image" href="-----" /> para que al poner el cursor allí, la imagen no tarde en aparecer. Ya de paso, hagamos que el logo tenga aparte de height: 5vw, un min-height: 30px.
01/11/2020
Unos detalles antes de seguir:
1) Faltó poner el gif del fondo (a manera de mosaico) en archivo audio (Sólo aplica para la versión de escritorio). No sé si será definitivo, pero a ver qué tal queda.
2) Al logo en el cabezal le vendría bien un min-height: 27px (en versión móvil y pc)
3) Al class="subtitulo-routes" hay que cambiarle el font-size: 4.5vw a 17px (versión móvil)
4) Parece que no subiste el hover del logo de tachibana. (Según esto, debería estar en /img/svg/Home_hover.svg)
5) En el index, cuando la pantalla es muy vertical, queda un espacio blanco debajo del footer. (Antes no se notaba porque los links debajo del gif ocupaban espacio)
6) En la página de créditos sobra el link que lleva a allí mismo.
…
7) (versión PC) Creo que el tamaño del div del contenido principal (class="medium") podríamos definirlo de manera diferente. Actualmente tiene margin: 0% 8% 0% 8%. Podríamos quitar eso y poner width: 84%; min-width: 900px (Lo cual, requeriría añadirle a la versión móvil un min-width: 100% para que no se rompa la cosa). Esto serviría para que la transición entre la versión de PC y la de móvil sea más suave.
?) Ahora lo difícil… En los archivos de audio ya hicimos que hubiera 3 estados. 900px hacia abajo, 901 a 1300, y 1301 hacia arriba. En el estado de en medio usamos dimensiones fijas para los objetos, mientras que los contenedores siguen siendo adaptables (esto para que el texto no quede muy pequeño al acercarnos a los 900px de ancho)… Entonces, ¿podrías dejar el estado -900 como ya está, dejar los parámetros que ahorita están en PC para +1300, y en medio de eso, usar el tamaño del texto e imágenes que se ahorita se ocupan en la versión móvil (en pixeles)?
11/11/2020
Tres ajustes pequeños en la página de créditos:
1) Al texto "• Agradecimientos •" le sobra el class "staff-cargo"
2) Al texto "Diseño de personajes y director de animación" agrégale un "br" antes del "y"
3) Quitar vínculo que lleva a allí mismo.
(A partir de acá, señalo los cambios en negritas, si no está en negritas, está bien)
[Index]
Móvil (hasta 900)
Imagen logo | height: 50px -> 45px
Texto bajo logo | font-size: 24px -> 18px
Gif | height: 90vw; max-height: 340px
class="item" | font-size: 16px
Créditos | font-size: 14px -> 13px
PC (desde 1301)
Imagen logo | height: 3.5vw
Texto bajo logo | font-size: 1.4vw
Gif | height: 25vw
class="item" | font-size: 1.25vw
Créditos | font-size: 1vw
Media (de 901-1300) [Esto es lo nuevo!]
Imagen logo | height: 45px
Texto bajo logo | font-size: 18px
Gif | height: 340px
class="item" | font-size: 16px
Créditos | font-size: 13px
[Acerca de / Créditos / Rutas]
Móvil (hasta 900)
Logo tachibana | height: 5vw; min-height: 27px
class="title" | font-size: 30px
class="h3" | font-size: 26px
class="contenido-text" | font-size: 17px -> 16px
class="h3 h3-subtitulo" | font-size: 17px -> 16px
class="staff-subtitulo" | font-size: 20px
class="staff-nombres" | font-size: 14px
class="staff-cargo" | font-size: 14px
class="subtitulo-routes" | font-size: 17px
PC (desde 1301)
Logo tachibana | height: 2vw; min-height: 27px -> 32px
class="title" | font-size: 3vw -> 2.5vw
class="h3" | font-size: 2vw
class="contenido-text" | font-size: 1.2vw
class="h3 h3-subtitulo" | font-size: 1vw -> 1.2vw
class="staff-subtitulo" | font-size: 1.3vw -> 1.5vw
class="staff-nombres" | font-size: 0.9vw -> 1.1vw
class="staff-cargo" | font-size: 1vw -> 1.1vw
class="subtitulo-routes" | font-size: 1vw -> 1.1vw
Media (de 901-1300) [Nuevo!]
Logo tachibana | height: 32px
class="title" | font-size: 32px
class="h3" | font-size: 26px
class="contenido-text" | font-size: 16px
class="h3 h3-subtitulo" | font-size: 16px
class="staff-subtitulo" | font-size: 20px
class="staff-nombres" | font-size: 14px
class="staff-cargo" | font-size: 14px
class="subtitulo-routes" | font-size: 14px
14/11/2020
[General]
1) Agregar al body overflow-x: hidden (para que cerca de 900px, no aparezca un scroll horizontal)
2) Quitemos los bordes morados del div class="medium" (En todas las páginas. Se ve mejor)
[Faltó la versión 901-1300 del index]
Imagen logo | height: 45px
Texto bajo el logo | font-size: 18px
Gif | height: 340px
class="item" | font-size: 16px
Lif + Sib 2020 | font-size: 13px (Esto también falta en las demás páginas, que sólo tienen versión - y +900)
[Index]
No sé porqué el div class="up-line color-line" tiene tantos padding (imagen adjunta). Creo que a la versión -900 le basta con 14px, lo mismo para la intermedia… Y en +1300 basta 1.1vw en lugar de 1.5vw
[Rutas / Acerca de / Créditos] (-900)
Al logo de Tachibana démosle un max-height: 32px, y al div class="up-line color-line" ajustémosle el padding: 2vw 4vw 2vw 4vw -> 1vw 4vw 1vw 4vw
[Rutas / Acerca de / Créditos] (901-1300)
class="subtitulo-routes" | font-size: 14px -> 16px
class="staff-cargo" | font-size: 1.1vw -> 14px (Este class sólo tiene versión - y +900)
[Rutas / Acerca de / Créditos] (+1300)
class="subtitulo-routes" | font-size: 1.1vw -> 1.2vw
[Créditos]
Lo siguiente va con el class="staff-cargo"y no con "h3 h3-subtitulo"
Sobre la traducción
Sobre The Nightmare of Fabrication (Dc1029)
Varios
Proyecto dirigido en su totalidad (etc…)
[Acerca de]
Lo siguiente va con el class="staff-cargo" y no con "h3 h3-subtitulo"
Sobre la obra original
Sobre esta adaptación de la obra
Dicho eso, el class="h3 h3 subtitulo" ya no se ocupa para nada.
¿Os habeis divertido? Nosotros no. Lol.
Ahora, toca esperar a que nos dé por escribir una publicación de verdad…
Antes de que acabe el año…
Nos veremos entonces…
O tal vez no…
En fin…