Título	Factibilidad técnica de un texto poético
Tipo de Proyecto	Proyecto de Taller, Proyecto de Curso
Palabras Clave	factibilidad técnica, diseño gráfico, responsive, ediciones digitales, textos poéticos, amereida
Período	2013-2013
Carreras	Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Idar González
Profesor	Michèle Wilkomirsky

Problemática

Se introduce la problemática de transcribir la diagramación de la página, donde se construyen sus blancos y relaciones de elementos, a plataformas electrónicas.

¿Cuál es el método y camino para poder mantener el valor gráfico presentes en ediciones impresas, para luego ser traducidas a las pantallas digitales?

Extensiones y formatos

Si uno se plantea la idea de hacer una publicación digital, cabe preguntarse ¿Por qué no usar los archivos y programas que indicados para la lectura a través de pantallas?

Las extensiones de lectura que existen en lo digital son variadas, pero las más utilizadas son:

PDF (Portable Document Format) Formato que comprime el contenido de una manera fácil de envío, asegurándose que no importa dónde se abra, estén las tipografías e imágenes correctamente.

XPS (XML Paper Specification) Es básicamente un papel digital que se compone similar a una carpeta zip, con elementos vectoriales, al igual que PDF.

DOCX ( ) Es el formato de archivo Word, de Microsoft. Por lo tanto, este tipo de extensión requiere tener instalado Office para poder abrirlo.

Si bien todas estos formatos tienen la capacidad de mantener siempre su diagramación e incluso tipografías, no permite que se ajuste el contenido de manera óptima a la pantalla. En los siguientes ejemplos, se accede a un pdf desde un iPhone y si bien el pdf se ajusta a la pantalla de la plataforma, la tipografía y el contenido no lo hace, lo que lleva a hacer diferentes niveles de zoom y la lectura pasa a ser acompañada de una navegación constante entre los espacios del pdf, moviendo el lugar que uno va leyendo.

PDF sin hacer zoom, así se muestra al abrir
PDF con zoom hasta ajustar la columna
PDF con zoom para leer cómodamente

Plataformas

¿Cómo es la lectura en las plataformas móviles? ¿En qué ámbito se da?, generalmente cuando uno tiene una lectura en un aparato electrónico también se suman otras cosas, como el entorno, quizás viajando, caminando o estando al aire libre, además que por lo general en esos aparatos uno está acostumbrado a una rapidez, a lo inmediato.

Entonces, de por sí los aparatos digitales tienen que responder a un cierto tipo de cualidad al momento de la experiencia de lectura.

Por lo tanto, si estamos leyendo desde un aparato móvil y tenemos que estar leyendo por secciones, haciendo gestos con el dedo para ir navegando en el contenido, nos cansará más rápido que si fuese un scroll vertical.

Lector electrónico (e-reader)

Existen aparatos especialmente diseñados para la lectura, como por ejemplo:

Kindle

Sin duda que los Kindle son una de las mejores opciones para leer algún archivo, por la cualidad de contraste que tiene su pantalla, gracias a la tecnología e-ink, da una sensación muy cercana a una página de libro. Además, dentro de sus cualidades, existen diversas configuraciones, pensados en mejorar la experiencia misma del lector.

Entre sus propiedades, las más notorias en cuanto al tratado del texto y su contenido son:

Ajustes de fuente: Regular, Condensed o Sans-Serif Ajustes de interlineado: Pequeño, mediano o grande Ajuste de palabras por línea (márgenes): mínimo, menos o predeterminado

Sin duda que esto puede facilitar mucho al lector, dado sus necesidades, pero ¿qué sucede con el contenido? Se ve alterado, uno de las configuraciones más radicales del Kindle es llegar a dejar una palabra por línea, perdiendo totalmente el diseño de párrafo o en textos poéticos, los blancos del espacio donde la palabra se encuentra inscrita.

Sin embargo, los Kindle más recientes tienen la posibilidad de poder conectarse a internet y por lo tanto poder navegar por cualquier sitio, por suerte existen sitios que son responsivos y Kindle los lee hasta cierta manera,

Epub

Mobi

Tablet y móvil

Existen básicamente 2 grandes sistemas operativos de tablets: iOS y Android. Donde existe muchísima variabilidad, es en el tamaño de pantalla y sus resoluciones. Esto en sí genera una gran detención al momento de diseñar ya que se debe tener en cuenta la mayor parte posible de usuarios.

Existen aplicaciones que han resuelto muy bien el hecho de tomar un contenido y re-diseñarlo en función de la lectura, como por ejemplo: Flipboard.

Ejemplo de Flipboard, transformando el contenido
Continuación de la misma página en Flipboard

Además Safari, cuenta con un "Modo Lector", que es cercano a lo que se hace con Kindle, donde el contenido pierde toda coordenada original y el texto se transforma a un texto con Serif, ordenado de lado a lado de la pantalla.

Navegación en safari desde iPhone
Modo lector activado desde iPhone

Métodos factibles

Responsive Design

El mismo documento con todos los elementos son diseñados distintos para cada plataforma (diferencia de tamaños de pantallas) tenga un diseño coherente y sea una experiencia óptima, sin importar si se ingresa desde el PC, una Tablet o a través del Móvil.

Hasta hace un tiempo (y aún lo hacen algunos sitios), es que diseñaban aparte el contenido si acaso ingresaban desde el móvil, es por eso que cuando uno ingresa a algún portal como por ejemplo terra.cl, se agrega una m. al enlace (de móvil) y se visualiza pensado en el móvil. No es que sea responsive, sino que es diseño adaptativo, donde se detecta por dónde accede el usuario y ahí se le re-dirige a un enlace especial para móviles.

[artículo habla sobre el no usar m.nombredelsitio.com] Fundamentalmente, se llama a no usar esto, porque es una decisión de corto plazo, ¿qué pasará luego, para las tablets o televisores con conexiones a internet?, habría que otorgarle un enlace distinto para cada aparato.

¿Cómo transcribir la página a la pantalla?

Mobile First

Lo más sano sería ir al caso más extremo, diseñando para las resoluciones más pequeñas y en base a eso ir viendo cómo se va ajustando el texto a pantallas más grandes.

Mobile first es un concepto que propone Luke Wrobleski diseñar la interfaz desde el móvil de una manera consistente y que luego se vaya complejizando a medida que se va teniendo más espacio para ir introduciendo más elementos a la pantalla.

| Sitio A Book Apart, Mobile First

Artículo que habla del concepto

Etiquetas HTML+CSS

Existen atributos que nos podrían permitir usarlos para textos poéticos donde los espacios en blanco sí son medidos y que la visualización tenga que respetar el espacio introducido.

( & nbsp ;) es un atributo que signifca "No breaking space", donde se fuerza a no cortar la línea si es que el navegador lo está tirando hacia abajo, naturalmente porque el espacio (donde está contenida la frase) no lo está permitiendo. Es una herramienta útil pero no sé si sea tan eficaz para editar un texto con sólo este atributo.

< pre > es una etiqueta que significa Texto Predeterminado, en él, cada espacio, tabulaciones (para sangrías) escrito en el html, será respetado al modo de visualizarse, sino, normalmente esos espacios sólo quedarán reducidos a un espacio. Obviamente en el trabajo de Cascadas de estilo (CSS), el texto se puede formatear, desde la familia tipográfica, tamaño de la tipografía, el interlineado, el tamaño de columna de texto, etc. Al ser una etiqueta, podemos usarlo como una clase, una selección de texto que debe comportarse de una cierta manera.

Ejemplo en w3c schools

Nota: Se introducen espacios en las etiquetas y atributos para poder ser visualizadas en la wiki, de lo contrario se aplicarían a este texto.

Primera prueba

Primer intento de Un golpe de dados

El archivo está alojado en Dropbox, en una carpeta pública.

Viewport

Viewport es una unidad de media, relativa siempre a las dimensiones del navegador que esté visualizando el sitio. Por lo tanto, se adecúa mucho más a cualquier formato que esté viendo el enlace. En otras unidades de medida, como % o em y px, es que esas medidas deben estar inscritas exclusivamente bajo los @media screen que uno pueda determinar.

Es decir, se declaran las variables de diseño, en grilla y tamaños de elementos según la pantalla que acceda. Esto es muy util para cuando uno quiere que el diseño cambie según el tamaño de pantalla, pero para este caso, no es necesario, así que viewport nos permite decirle que siempre se ajuste al tamaño del navegador, ya sea en Viewport Width (Será un porcentaje según el ancho total del navegador), Viewport Height (Será un porcentaje según el alto total del navegador) ó las medidas mínimas-máxima (Tomará el tamaño -respectivo- entre alto y ancho y ahí lo configurará).

Enlace 1 de referencia Enlace 2 de referencia

COMPARACIÓN MEDIA SCREEN & VIEWPORT

Se puede apreciar que con Viewport, se logra usar con mayor precisión la disposición del texto. Aún así, con Media screen se puede lograr algo muy similar, pero sería con mucho más trabajo.

Algunas decisones tomadas

Los divs se miden en ViewPort

Los espacios blancos son identificados como un Span, cosa que nos permite determinar el valor exacto del espacio blanco. Esto sirve para que cuando pase a ser visto por una pantalla móvil, los espacios blancos sean menor, en proporción que el diseño en una pantalla más grande. Esto es para que la tipografía sea mayor que el espacio blanco, permitiendo una lectura cómoda.

La interlínea también será una variable, según el ancho de pantalla (Viewport)

Comparación entre los distintos formatos

Esto no asegura que el resultado sea exacto en cada dispositivo!

Problemas encontrados

Se debe sacrificar la autenticidad en valores de proporción, sino no sería una lectura óptima.

Existía un problema con la tipografía Bodoni, por alguna razón, dejaba de respetar los valores introducidos en el HTML bajo la etiqueta pre.

Por lo tanto, se prueba con la tipografía Georgia y ahí sí respeta los valores blancos.

El paso del francés al español, hace que las frases tengan distintos largos. Esto provoca una diferencia de ancho en algunas líneas. Por lo tanto, de manera temporal, aquellas líneas se les otorga un cuerpo de tipografía menor, hasta poder tener una traducción más confiable.

Correcciones LUNES 21 OCTUBRE

Tamaño tipográfico

La tipografía se ajusta para que no haya que comprimir las líneas más densas, así evitar tener una clase que comprima en términos de Kerning y en tamaño tipográficos.

2 variables: Proporción | Legibilidad

Se crean 2 tipos del mismo archivo, uno, donde se le da prioridad a la experiencia de lectura, esto implica un menor espaciado del blanco poético y esto permite tener un mayor tamaño tipográfico.

Experiencia de Lectura

La otra variante, es darle prioridad a la proporción entre el blanco y la tipografía, por lo tanto el tamaño tipográfico es mucho menor, pero se logra leer de forma más cómoda al pasar a modo apaisado del móvil (si es que lo soporta).

Proporción Blanco

COMPARACIONES

Modo Landscape

La diferencia es que en Experiencia de lectura, al ser visto en un dispositivo móvil el tamaño tipográfico es mayor y el tamaño del blanco es menor. Sin embargo, la diferencia es muy sutil.

Problemas con unidad de media Viewport

Existen problemas con ViewPort, con FireFox la tipografía se reajusta de manera automática a medida que se ajusta el tamaño del navegador. Sin embargo, con Chrome, no sucede lo mismo. Para que eso suceda, después de ajustar el tamaño, hay que refrescar el sitio y ahí se ajustan las tipografías.

Existen diversas discusiones en la web recientemente porque es un problema que aún no se soluciona. Existe una solución, que es a través de JavaScript, pero eso implicaría que los estilos tipográficos estén escritos en el HTML y no en CSS.

Acá aparecen las versiones de navegadores que soportan ViewPort como una unidad de medida relativa.

Sitio Caniuse.com

Este es un repositorio de GitHub, donde hablan del problema y dan la solución a través de JavaScript. Sin embargo, aún está en proceso de desarrollo.

Repositorio GitHub Viewport

Acá está el enlace a una discusión donde hay gente que habla de lo bueno que puede ser usar Viewport para mantener una mesura similar sin importar dónde se visualice el sitio. Sin embargo, aún no hay solución, la última respuesta es del día 18 de Octubre.

Sitio de Code Google

En esta discusión hablan de que el Padding (margen interno) sí se escala con viewport, pero no la tipografía. Aún sigue sin solucionarse.

| Webkit Bugs

Código HTML + GitHub

El código de HTML y CSS puede revisarse en el repositorio personal en GitHub. Acá está el enlace.

Legibilidad

Proporción Blancos

Primera poema Amereida

Se transcribe el primer poema de Amereida, se miden las columnas, la tipografía, los blancos verticales y la imagen. Todo está medido en viewport, por lo que se ajustará automáticamente.

Las medidas son coherentes con la medida del libro original de amereida, sin embargo, al visualizarlo en móvil, no es la lectura más cómoda. Al poner el dispositivo en modo Landscape (horizontal), se adquiere una legibilidad más cómda.

¿Quizás se podría ajustar más la tipografía en el móvil en función de la lectura?

Existen bloques de blancos que son construídos, de igual manera, son medidos proporcionalmente a la página. Son nombrados como :

"Blanco-1" que cubre un 74%,

"Blanco-2" cubre el 52%

"Blanco-pagEntera" que se extiende por el 100% de una página.

ENLACE PÚBLICO DROPBOX

Primer Poema de Amereida

Código HTML - GitHub

HTML

CSS

En función de la legibilidad móvil

Legibilidad Primer Poema de Amereida

Quizá si se piensa en mantener la proporción de la columna de texto y no necesariamente el valor de los blancos verticales externos, se puede llegar a un nivel de lectura mucho más cómodo. Sino, pasa que en móvil, en modo "Portrait", es decir, de modo vertical, la calidad de lectura es muy baja y sólo al pasar a modo "Landscape", se puede leer de una manera cómoda.

Por lo tanto, se piensa que quizá la proporción (en este caso), entre la tipografía y los blancos, se respetan dentro de la columna de texto y fuera de ella, se obvian en función de la lectura, similar a lo que ocurre en los PDF's ya editados de Amereida.

Se encierra la caja de contenido dentro de un borde de 1px para ver la diferencia de tamaño entre las columnas en las versiones.

La diferencia tipográfica pasa de ser 2.8vw (viewport width), a 4.2vw, para mantener el texto en su máximo tamaño sin que se corten frases donde no deben.

Segundo avance "Amereida, primer poema"

Se re-ajusta la proporción de los márgenes laterales, los blancos verticales y la tipografía. De esta manera el sitio se verá de la misma manera para todos los dispositivos.

Se establece un máximo de 1.7 zoom en dispositivos móvil, dejando como máximo zoom el ancho de la columna.

El tamaño mínimo del cuerpo (Body) del documento es de 320px, por lo tanto al achicar el navegador a un tamaño menor, se achica pero no el contenido, generando un scroll horizontal.

Se construye un índice para la navegación de las partes conceptuales de amereida.

metadatos de viewport

Proporciones

La forma de poder obtener medidas coherentes y equivalentes en la pantalla en relación al libro de amereida, fue escaneando una cantidad de páginas, de donde pudieran sacarse los márgenes superiores e inferiores, los laterales y los márgenes entre párrafo.

Aún así, existe un problema y es que la pantalla será siempre relativa a su ancho, la tipografía también estará constantemente siendo ajustada al tamaño del ancho del navegador/plataforma donde se esté visualizando el sitio. Por lo tanto tanto los márgenes laterales como los verticales deben estar medidos según el ancho total de la página, sino, en móvil se van a tener proporciones distintas a como se las tiene en un notebook, por ejemplo.

División en el contenido

Se decide establecer una partición gráfica de amereida. En el libro se pueden identificar 6 grandes momentos gráficos, cada uno de ellos es nombrado para esta ocasión basados en lo gráfico.

Primer Poema: Páginas 1 a la 10
Los mapas de américa: Páginas 11 a la 44
Blanco poético: Páginas 53 a la 88
Franja de texto: Páginas 89 a la 126
Blanco poético II: Páginas 126 a la 179
Final: Páginas 180 a la 191

Inclusión de anclas y elemento de navegación

Para poder dar paso a una navegación sana por el documento, es necesario incorporar elementos de navegación, pero sutilmente. No es conveniente pensar en algún elemento fijo en la pantalla, sino pasaría a ser un control y la idea es que sea una analogía directa con el libro.

La manera de solucionar esto es a través de índices, donde se van mostrando las secciones del libro y uno al apretarlo, es redirigido al ancla incrustado en determinado lugar. Al final de cada capítulo, vuelve a aparecer el mísmo ícono que despliega un nuevo índice, esta vez mostrando el capítulo ya leído (que está hacia arriba) en gris y tipografía blanca, mientras los siguientes se muestran en fondo blanco y tipografía gris, dando también una noción de dónde uno se encuentra en el documento total.

Concepto de navegación

La construcción del documento es bastante especial porque se transcriben elementos del libro a una composición en código, donde generalmente no se piensa ni construye de esa manera.

Si se pensara lo conceptual de la construcción, en un lenguaje taxonómico, sería algo así:

Índice inicial
Wrap (elemento que sostiene todo el contenido)
1. Contenido (donde se dimensiona según columna de texto)
  1. Página (Cada página del libro se inscribe como un div)
    1. Pre (El atributo que hace valer cada espacio y tabulación, a modo de párrafo)
  2. Fin de página
2. Fin de contenido
3. Índice entre capítulos
4. Contenido-bloque (Contenido que tiene otro tipo de diagramación y espacio)
  1. Página
    1. Pre
  2. Fin página
5. Fin contenido-bloque
fin wrap
Imágen (Se usa fuera del wrap ya que las imágenes se extienden al 95% del ancho)
Wrap
1. Contenido
  1. Etc... Hasta el final del contenido.

Justificación - Valores blancos

Existe un conflicto actualmente entre si acaso el texto se justifica o no, ya que al justificar se debe sacrificar los valores de espacio y tabulaciones que recoge el atributo < pre >. Aún se ve cómo solucionar este conflicto.

Sin justificación

Justificado

Componentes en código (elementos especiales)

Código del índice (Script de jQuery)

$('.index').click(function () { $('#indice').slideToggle(800); });

$('.cap-1').click(function () { $('#capitulos-1').slideToggle(800); });

$('.cap-2').click(function () { $('#capitulos-2').slideToggle(800); });

$('.cap-3').click(function () { $('#capitulos-3').slideToggle(800); });

$('.cap-4').click(function () { $('#capitulos-4').slideToggle(800); });

$('.cap-5').click(function () { $('#capitulos-5').slideToggle(800); });

$('.cap-6').click(function () { $('#capitulos-6').slideToggle(800); });

Código de interacción fluida al hacer scroll por anclas

$('a').click(function(){ $('html, body').animate({

       scrollTop: $( $.attr(this, 'href') ).offset().top
   }, 500);
   return false;

});

Ejemplo de la construcción de la 1era página

<pre> ¿no fue el hallazgo ajeno

  a los descubrimientos

- oh marinos sus pájaras salvajes el mar incierto las gentes desnudas entre sus dioses ! - porque el don para mostrarse equivoca la esperanza? </pre>

</div>

Enlace final

Versión final

Factibilidad técnica de un texto poético