Ver el código de «Factibilidad técnica de un texto poético»

{{Proyecto
|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
|Año de Inicio=2013
|Año de Término=2013
|Carreras Relacionadas=Diseño Gráfico
|Profesor=Michèle Wilkomirsky,
|Alumnos=Idar González,
}}


=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. 

<gallery>
Image:IMG 0742.PNG|PDF sin hacer zoom, así se muestra al abrir
Image:IMG 0743.PNG|PDF con zoom hasta ajustar la columna
Image:IMG 0744.PNG|PDF con zoom para leer cómodamente
</gallery>

==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.

[[Archivo:Chart-1.jpg]]

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,

{{#widget:YouTube|id=Oqu1--AzM7U}}

====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.
<gallery>
image:IMG 0751.PNG|Ejemplo de Flipboard, transformando el contenido 
image:IMG 0752.PNG|Continuación de la misma página en Flipboard
</gallery>

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.

<gallery>
image:IMG 0753.PNG|Navegación en safari desde iPhone
image:IMG 0754.PNG|Modo lector activado desde iPhone
</gallery>

=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. 

[[http://www.mobify.com/blog/6-reasons-mdot-websites-are-dead-ends/|Este 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. 

[http://www.abookapart.com/products/mobile-first | Sitio A Book Apart, Mobile First]

[http://zurb.com/word/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.

[http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_pre_width| 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=
[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Un%20golpe%20de%20Dados/home2.html 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á). 

[http://generatedcontent.org/post/21279324555/viewportunits Enlace 1 de referencia]
[http://www.sitepoint.com/new-css3-relative-font-size/ 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.

[[Archivo:Golpedadoscomp.gif|770px]]

===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'''

[[Archivo:Golpedados.gif|700px]]

''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. 

[[Archivo:IMG 0776.PNG|350px]] [[Archivo:IMG 0777.PNG|350px]]

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.

[[Archivo:IMG 0778.PNG|350px]]

==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. 

[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Un%20golpe%20de%20Dados/home2.html 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). 

[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Un%20golpe%20de%20Dados/home.html Proporción Blanco]

'''COMPARACIONES'''

[[Archivo:IMG 0885.PNG|350px]] [[Archivo:IMG 0886.PNG|350px]]

Modo Landscape

[[Archivo:IMG 0887.PNG|350px]] [[Archivo:IMG 0888.PNG|350px]]

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.

[http://caniuse.com/viewport-units 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.

[https://github.com/saabi/vminpoly?utm_source=html5weekly&utm_medium=email 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.

[https://code.google.com/p/chromium/issues/detail?id=124331 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.

[https://bugs.webkit.org/show_bug.cgi?id=87846 | 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.

[https://github.com/IdarGonzalez/ResponsivePoeticTexts/blob/master/Un%20golpe%20de%20Dados/home2.html Legibilidad]

[https://github.com/IdarGonzalez/ResponsivePoeticTexts/blob/master/Un%20golpe%20de%20Dados/home.html 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'''

[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Primer%20poema%20de%20Amereida/amereida.html Primer Poema de Amereida]

==Código HTML - GitHub==

[https://github.com/IdarGonzalez/ResponsivePoeticTexts/blob/master/Primer%20poema%20de%20Amereida/amereida.html HTML]

[https://github.com/IdarGonzalez/ResponsivePoeticTexts/blob/master/Primer%20poema%20de%20Amereida/css/style.css CSS]

==En función de la legibilidad móvil==

[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Primer%20poema%20de%20Amereida/amereidalectura.html 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.

[http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho 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.


[[Archivo:Amereidaproporciones.png|770px|center]]

==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


[[Archivo:Momentos.jpg|600px|center]]

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

[[Archivo:Conceptoamereida.png|500px|center]]

==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.

[[Archivo:Amereidacomparacion1.jpg|700px|center]]

[[Archivo:Amereidacomparacion2.jpg|700px|center]]

[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Primer%20poema%20de%20Amereida/amereidalectura.html Sin justificación]

[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Primer%20poema%20de%20Amereida/amereidajustificado.html 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===

<nowiki><div class="pagina"> <!-- comienzo de una página --></nowiki>

<nowiki><div class="blanco-mediaPag"></div></nowiki>

			<nowiki><pre></nowiki>
¿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?
			<nowiki></pre></nowiki>

<nowiki></div>				<!-- fin de una página --></nowiki>


----

==Enlace final==

[https://dl.dropboxusercontent.com/u/9815315/ResponsivePoeticTexts/Primer%20poema%20de%20Amereida/amereidafinal.html Versión final]