DocDocDocDocDocDoc

Por qué el truco de la consola de Google Docs es la forma incorrecta de obtener una vista de dos páginas

El truco es inteligente como experimento visual, pero solo repinta Google Docs. No cambia el modelo del editor subyacente, por lo que el diseño puede verse bien aunque el comportamiento de edición aún parezca incorrecto.

Por eso el truco es tan seductor y tan engañoso al mismo tiempo. Primero resuelve la queja visual, lo que lo hace sentir inteligente, pero deja intacta la parte difícil: cómo se comporta el editor cuando realmente escribes, seleccionas, comentas y te mueves por el documento.

Esto ya no funciona en Chrome y Google Docs actuales

Google Docs ahora envía una Política de seguridad de contenido que requiere tipos confiables, por lo que el intento del bookmarklet de escribirHTML interno está bloqueado. En Chrome actual verás errores como "Este documento requiere TrustedHTML asignación" y "Error al establecer la propiedad 'innerHTML' en 'Elemento'".

Se trata de un cambio en el navegador y en Docs, no un error tipográfico en el fragmento. La página ahora aplica una política DOM más segura, por lo que la antigua La sobrescritura de DOM ni siquiera llega a aplicarse.

Incluso cuando esto funcionó, sólo cambió el diseño. Fue útil para mirar el documento, no para hacer que Google Docs es un mejor editor.

Antes y después del hackeo de la consola

Google Docs antes y después del hack de la consola, mostrando la transformación visual
La imagen hace evidente el problema: la pantalla cambia primero, pero el modelo de edición no.
FeatureHack de consoladoctordocdoc
Utiliza el comportamiento del editor compatible
Mantiene la ubicación del cursor y de los comentarios predecible
Sobrevive a los cambios de la interfaz de usuario de Google sin romperse
Se siente como un producto en lugar de un guión.

Evite los trucos frágiles. Abra el mismo documento de Google en un editor paralelo estable diseñado para la escritura diaria.

Es posible que haya visto el truco de la consola del navegador que obliga a Google Docs a adoptar un diseño pseudo de dos páginas. A primera vista parece útil: las páginas aparecen una al lado de la otra y un monitor ancho parece menos desperdiciado.

Esa impresión visual es todo el truco. No es un modo de edición real y no es una solución adecuada. Es una anulación rápida de DOM que hace que la pantalla se vea diferente.

Cómo funciona el truco

La publicación original de Coderwall de Jeremy en Coderwall describe el truco como un simple ajuste de CSS: hacer que los contenedores de la página llenen el ancho, hacer flotar las páginas hacia la izquierda y forzar el diseño a una vista falsa de dos columnas.

(function(d,t,z,s) {
      s = d.createElement(t);
      s.innerHTML = z+'-outer{left:0px !important;}'+z+'-outer,'+z+'-inner{width:100% !important;}.kix-page{float:left; width:48% !important;}';
      d.getElementsByTagName(t)[0].parentNode.appendChild(s);
      })(document, 'style', '.kix-zoomdocumentplugin');

El artículo original es de Jeremy en Coderwall, y la versión del bookmarklet está vinculada desde esa publicación.

En otras palabras, el truco es principalmente una anulación de estilo. No le enseña a Google Docs a editar de manera diferente. Simplemente persuade al navegador para que pinte la interfaz de una manera que parezca más bien dos páginas.

Por qué la página correcta no parece confiable

Google Docs todavía calcula la ubicación del cursor, las pruebas de acceso, la selección y los comentarios en torno a su modelo de diseño original. El truco solo vuelve a pintar donde aparecen las páginas en la pantalla, por lo que el resultado visual y el modelo de edición se separan.

¿Por qué no es la forma correcta?

El truco te brinda un resultado visual que parece inteligente por un minuto, pero un flujo de trabajo de escritura real tiene que sobrevivir al uso diario. Necesita estabilidad del cursor, selección predecible, comentarios que lleguen donde deberían y un diseño que siga siendo comprensible después de la décima edición del día.

El truco de la consola no pasa la prueba porque no es una característica del producto. Es una manipulación DOM. Una vez que lo tratas como un flujo de trabajo, los puntos débiles aparecen de inmediato.

Por qué DocDocDoc es diferente

  • El diseño y la edición se crean juntos: la vista en paralelo no es una copia de docs.google.com.
  • En realidad, es editable uno al lado del otro: no recibe la advertencia de solo la página izquierda que a menudo aparece con los hacks de CSS.
  • Se mantiene más cerca de la ruta admitida: Los documentos se sincronizan a través de las API oficiales de Google en lugar de depender de suposiciones DOM internas.
  • Añade extras útiles: modo oscuro nativo, uso de ancho de estilo de franja de columnas y flujos de trabajo de renderizado LaTeX.

Cuando el truco sigue siendo útil

Si solo necesita una demostración rápida de solo lectura en su propia máquina, puede ser divertido probar el truco. Pero para la redacción, revisión o colaboración del día a día, un flujo de trabajo con diseño nativo es la opción más segura.

Ésa es la línea a tener en cuenta: demostración divertida, mal hábito. Si realmente está intentando trabajar, no debe confiar en un truco que Trusted Types pueda bloquear directamente, o que pueda dejar de funcionar en el momento en que Google cambie el nombre de una clase o vuelva a distribuir el editor.

El problema no es sólo la fragilidad. También es confianza. Un flujo de trabajo de escritura debe resultar aburrido de la mejor manera posible. En el momento en que un truco de diseño te hace dudar antes de hacer clic o seleccionar texto, ya ha cruzado la línea entre lo útil y lo que distrae.

Cómo se ve el diseño real

Esta es la versión utilizable: el documento sigue siendo legible y editable en lugar de tener que volver a pintarlo mediante un script.

En pocas palabras

El truco de la consola es una demostración inteligente, no una superficie de edición confiable. Si desea trabajar en paralelo con Google Docs en el que pueda confiar todos los días, utilice DocDocDoc en su lugar.

la respuesta rapida

Si tienes curiosidad, prueba el truco una vez como experimento visual. Si estás intentando escribir, revisar o colaborar, detente ahí. Un truco que sólo cambia la capa de pintura nunca será la respuesta adecuada para un documento en vivo.

La mejor pregunta no es si el truco puede hacer que la pantalla luzca diferente. La mejor pregunta es si te ayuda a terminar el documento. En la práctica, la respuesta es no. Solo fue útil para verlo, no para editarlo realmente.

Lo que la gente realmente persigue

La mayoría de las personas que buscan este truco en realidad no buscan CSS. Buscan aliviar la sensación de una sola página de Google Docs. Quieren que la página parezca más amplia, que la página siguiente permanezca a la vista y que todo el proceso de edición parezca menos agobiante.

Precisamente por eso el truco llama la atención. Parece responder a la queja real. Pero como solo cambia la capa visual, no puede ofrecer la estabilidad que necesita el flujo de trabajo de escritura diario.

Referencias y lecturas adicionales

Pruebe el flujo de trabajo estable en paralelo

Abra un documento de Google en DocDocDoc y edítelo en un verdadero espacio de trabajo de diseño amplio diseñado para escribir, no en un CSS frágil. hackear.