• Publicidad

Cambio de aspecto de las cajas de código y entradas de texto

¿Tienes algo interesante que decir? ¿O quizá algo no tan interesante? Aquí tenemos un espacio para compartir todo lo que queramos decir y que no cabe en ninguno de los otros foros.

Cambio de aspecto de las cajas de código y entradas de texto

Notapor explorer » 2009-04-10 21:06 @921

Esto es una pequeña actualización del comentario que puse hace cuatro años (madre mía, ¡como pasa el tiempo!)
Introducción
En un foro de programación, uno de los elementos más importantes es la presentación del código. Ha de ser claro y fácil de leer. Y lo mismo a la hora de introducirlo, cuando escribimos un nuevo mensaje.

Bueno, pues como ya sabéis, en este foro se permiten poner una serie de marcas alrededor de la sección de código, en cada mensaje, para que el motor de presentación lo redibuje en fuente monoespaciada y con colorines.

Eso está muy bien, pero podría ser mejor.

El problema
En mi navegador, yo veo las cajas de código en fuente monoespaciada normal, y las cajas de código Perl (y de cualquier otro código) en el tipo de fuente Courier New, en tamaño 9 o 10 puntos.

El caso es que hay mejores formas de presentar el código Perl: la fuente Courier New tiene demasiados "adornos" en sus letras. Y además, es muy pequeña para mi cansada vista. Así que para mí es muy cansado verlo de esa manera.

Y no puedo cambiar esas opciones de presentación a las que yo quiera, porque la página está basada en estilos predefinidos, y no tendrá en cuenta las preferencias de usuario del navegador web.

Y lo mismo podemos decir de la caja de edición de nuevos mensajes: está en letra no monoespaciada, lo cual dificulta sobremanera la introducción de código fuente con un mínimo de cuidado en cuanto a indentación de las líneas. Lo ideal es que estuviera en fuente monoespaciada.

La solución
Bueno, una solución que podemos adoptar los usuarios de este foro es la de modificar la presentación de la página en cuanto es presentada en nuestros navegadores, a la forma que nosotros deseemos.

Estas son las instrucciones que permitirán modificar el aspecto de las cajas de código, código Perl, y caja de edición de nuevos mensajes. Estarán basadas en el navegador Firefox y en la instalación de un complemento que se usa precisamente para modificar la presentación de páginas desde el lado del usuario. La elección de Firefox es obvia: es un programa que permite ser mejorado mediante centenares de complementos.

El complemento a instalar es el GreaseMonkey. Este complemento, a su vez, nos permite instalar cientos y cientos de añadimos más, pero solo nos centraremos en el que nos interesa: Page Recolorization.

Instalación
Primero instalamos el GreaseMonkey -con la opción Complementos del Firefox- y reiniciamos Firefox.

Luego descargamos el Page Recolorization y lo editamos con un editor de textos cualquiera. Solo nos interesa modificar la línea que empieza por var styles =.

Ahí es donde haremos los cambios interesantes. Indicaremos dónde y cómo queremos ver los elementos de pantalla de este foro.

A modo de ejemplo, esta es mi línea:
Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
var styles = '.perl, .post { font-family: "xos4 Terminus", Courier, "Courier New", sans-serif; font-size: 11pt; font-weight : bold; background-color: #FFFFFF; border: #D1D7DC; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px }';
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


Lo que hay delante de las llaves es el "dónde". Pondremos, separados por comas, los estilos que queremos modificar con el estilo definido a continuación. Los más importantes son:
  • .perl: se refiere a las cajas de presentación de código Perl
  • .code: a las cajas de código normal (code)
  • .post: a la caja de edición de nuevo mensaje.

Luego, entre llaves, está el estilo que quiero en esas cajas. Como veis, he puesto un fondo de caja completamente blanco, he elegido un tipo de letra "xos4 Terminus", negrita, y de 11 puntos de altura, que para mi me va perfecto para leerlo de forma muy cómoda en pantalla. Si no tenéis esa fuente -muy recomendable para programar-, podéis usar cualquier otra monoespaciada que tengáis a mano. O la Courier misma. Lo importante es que luego podéis indicar que esté en negrita (sale con más fuerza en pantalla), y con más altura (más legible para la gente mayor :)).

Bueno, después de estos cambios, los grabáis en disco. Vais al Firefox recién abierto, y en Archivo, elegid la opción de Abrir archivo.... Seleccionáis el fichero Page Recolorization que acabáis de modificar y aceptáis. Se debería abrir el diálogo de confirmación de que estáis agregando un nuevo script para Greasemonkey. Así lo hacéis. Y ya está instalado. Solo queda indicar en donde se activará.

En la barra de estado, abajo, y en el menú Herramientas, se puede acceder a la opción Administrar scripts... de Greasemonkey. Al entrar ahí, seleccionáis el Page Recolorization y en la parte derecha, en Páginas incluidas, agregáis la siguiente dirección: http://perlenespanol.* .

Y ya está. Solo tenéis que navegar entre los foros, y ver la nueva forma de ver los códigos, mucho más claros y grandes. Y a la hora de escribir un nuevo mensaje, la caja está en fuente monoespaciada. Ahora es muchísimo más cómodo introducir código.

Mejoras añadidas
Hay una mejora que me ha venido igual de fantástica con estos foros (y por ende a cualquier otro), es el poder redimensionar las -a veces- minúsculas cajas de edición de texto de las páginas web.

Por lo general, son suficientes para meter un texto más o menos breve, pero hay muchas ocasiones en las que estás escribiendo mucho texto o un código que es muy ancho.

En ese momento desearías poder "estirar" la caja de texto para trabajar de forma más cómoda.

Bueno, pues eso se resuelve muy fácilmente con otro complemento para Firefox: Resizeable Textarea (bueno, hay más de uno, incluso el Textarea Resize o el Element Resizer para el Greasemonkey). Con solo la ayuda del ratón, se puede cambiar de tamaño al que nosotros queramos.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14486
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Publicidad

Volver a Pasando el rato

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados

cron