best counter
GNU/Linux. MuyLinux

Estilos CSS para GTK+

29/08/2010| por | 8 comentarios

Los desarrolladores de motores de temas para GNOME/GTK+ están de enhorabuena pues se ha comentado por los blogs de los desarrolladores de GTK+ que el futuro para este toolkit gráfico pasa por algo muy similar a las famosas CSS u hojas de estilo en cascada. Dichas hojas de estilo son usadas para separar estructura de presentación a la hora de desarrollar una web, y son las encargadas (como su nombre indica) de darle estilo a la web en que modifiquen.

 imagen12Estilos CSS para GTK+

Pues bien, resulta que se está desarrollando una especie de parser CSS adaptado para decorar las GUIs que hagan uso de esta característica, usando una sintaxis muy similar a la de las CSS originales. Esto es, cualquiera que tenga cierta experiencia en creación de web con CSS podrá decorar la interfaz de su programa de manera sencilla, rápida y eficaz.

De esta manera, podremos modificar o crear GUIs ricas en contenido visual y sin afectar a la párte lógica del programa (el código fuente) facilitando de esta manera el trabajo a la hora de realizar aplicaciones gráficas destinadas a potenciar la ayuda visual y espectacularidad de las mismas. Un ejemplo sencillo de como funcionaría este sistema podría ser lo siguiente, mediante el cual se establece un color de fondo personalizado para los llamados Check Buttons, los que solemos marcar para seleccionar una opción dentro de un programa

/* Coloca un color de fondo al tipo
* GtkCheckButton y todos los "heredados"
* del mismo
*/
GtkCheckButton{
    background-color: #14a414;
}

 imagen22 500x447Estilos CSS para GTK+

Como verán los lectores dedicados al diseño web, la sintaxis es idéntica a la de CSS, solo que en vez de usar los identificadores de los tags de HTML, se usan los nombres de los diversos widgets de GTK+. Otro ejemplo mostrando las capacidades de animación integradas podrías ser lo que sigue a continuación

/* Transiciones animadas para el check button.
* Para los botones, al igual que para los tags
* en html, se pueden definir varios estados
*/
GtkCheckButton:active{
    transition: 200ms ease-in-out;
}

Las ventajas de este proyecto son varias:

  • Los elementos se renderizarán usando Cairo, la biblioteca gráfica de dibujo vectorial de GNOME, por lo que el rendimiento general de toda la interfaz se verá mejorado.
  • Los distintos widgets podrán decorarse cada uno de manera independiente.
  • Se da soporte a animaciones, de modo que los motores de estilo ya no necesitarán implementar por si mismos dicha función, asegurandose una compatibilidad uniforme para todos los temas que hagan uso de dichas animaciones.

De hecho una versión preliminar del llamado GtkStyleContext ya se puede probar, aunque aún falta que los desarrolladores de motores de estilo creen algunos compatibles con dicha característica.Aunque esto no es nada nuevo para los amigos de KDE/Qt, que llevan ya un tiempo soportando esta misma característica, desde luego podemos afirmar que será un paso de gigante en el campo de la personalización y edición de interfaces gráficas en lo referente a GTK+. Si quereis saber más, no os olvideis de pasar por el blog de Carlos Garnacho, desarrollador de GNOME que ha dado a conocer dicha característica.

Hay 8 comentarios

  1. 1

    El asunto de los temas dará mucho juego y diversidad a las aplicaciones de GTK, sobre todo por las animaciones.

    El hecho de separar la lógica de la interfaz ya se hacía de manera muy sencilla con Glade. Hace algún tiempo programé un sistema para hacer copias de seguridad de la lista de paquetes instalada en el sistema (Debian) usando Python + pyGTK + Glade y me fue muy bien. El software, por si a alguien le interesa se llama TinyBackup:

    http://siondream.com/blog/desarrollo-informatica/tiny-backup-pygtk-y-glade/

    Saludos.

  2. 2
    redtitle dice:

    Perdon por mi ignorancia..¿esto quiere decir que a la hora de diseñar, por ejemplo, cualquier interfaz gráfica de una aplicación, se hará al igual que el diseño de una hoja de estilo css?

    gracias, un saludo

    • 3
      Garolard dice:

      @redtitle Según lo que pude averiguar, no, no se diseñarán las interfaces con un archivo CSS, sino que dichas interfaces se podrán personalizar usando esta nueva características.

      Es decir, yo puedo diseñar una interfaz con Glade que usará los controles por defecto del sistema. Pero, si yo tengo puesto un tema que use X motor de temas, y dicho motor soporta el nuevo GtkStyleContext, podré personalizar la interfaz de todo el sistema o de una aplicación en concreto mediante esta sintaxis similar a CSS.

  3. 5
    Ahó dice:

    Lo que queremos es integración de GTK+ con las Qt; Qt es capaz de tomar un tema GTK e integrarlo ferpectamente, pero ¿qué hace GTK por su parte?

    Si implementan esa integración, dejaremos de tener pegas con los escritorios.

    • 7
      Anónimo dice:

      Pues yo prefiero esto. Hacer un tema no puede ser más fácil.

      A ver si es que GTK+ va a tener que incluir soporte para sus “competidores”. Yo no uso aplicaciones hechas en QT porque tanto si se integran, como si no, significa consumir mucha memoria al cargar ambas librerías.

      Si en KDE, que tiene muy buenas aplicaciones como K3B y Amarok, necesitan adaptar los temas de GTK+ porque algunas aplicaciones populares no tienen versión en QT, pues o alguien las porta o QT incorpora esa función. Pero está claro que si GTK+ no tiene ese problema, no tiene la necesidad de implementar esa compatibilidad. Todo depende de la cantidad de usuarios que tengan esa necesidad.

  4. 8
    jado92mx dice:

    Yo veo una avalancha de temas en GNOME-Look que aprovecharán al máximo todo ésto y harán lucir las GTK del siglo XXII :P

    Aún no entiendo del todo la magnitud del concepto, pero me estoy adentrando en él.

    Saludos!
    JaD!

Escribe tu comentario