El Color de nuestros programas???

[[Chris]]

Empezado por maeyanes

Está excelente la ventana amigo. Solo que me tomaré el abuso de hacerte unos comentarios sobre ella:
1. La letra del TToolbar no es la misma que el DBGrid (inconsistencia). Siempre preocura usar la letra definida para el sistema, en caso de Vista y W7, Segoe UI.

2. En lo personal, preferiría que el DBGrid no tuviera bordes. Estos provocan ruido visual.

3. El texto de las celdas de datos para Clave y Descripción creo que están demasiado juntas. Dificulta un poco la lectura de la segunda columna.

4. El campo de búsqueda es demasiado angosto.

5. En la parte inferior de la ventana hay un espacio en blanco. Sino le vas a dar utilidad a este espacio es mejor que lo quites. Si lo dejas crearás expectativas de que allí debe aparecer algo en ciertas condiciones.

5. El icono de la acción Imprimir es inconsistente con el estilo del resto de los iconos en el TToolbar. Puedes utilizar un set de iconos diminutos llamado Fugue, son los mejores en estilo en mi opinión. Además incluye iconos para todas y más de las acciones que te puedes imaginar.

Por último, quisiera ver esa misma venta sobre el efecto Glass de Windows AERO .

Saludos!

[[maeyanes]]

Hola...

Empezado por Chris

Está excelente la ventana amigo. Solo que me tomaré el abuso de hacerte unos comentarios sobre ella:

No es abuso, se agradecen los comentarios.

1. La letra del TToolbar no es la misma que el DBGrid (inconsistencia). Siempre preocura usar la letra definida para el sistema, en caso de Vista y W7, Segoe UI.

El formulario está en desarrollo, ya está cerca de lo que será la versión final y ando afinando los detalles visuales, la parte de las fuentes es uno de esos.

2. En lo personal, preferiría que el DBGrid no tuviera bordes. Estos provocan ruido visual.

Voy a probar que tal queda sin los bordes.

3. El texto de las celdas de datos para Clave y Descripción creo que están demasiado juntas. Dificulta un poco la lectura de la segunda columna.

Ya veo, voy a ver la forma de darle algún tipo de separación.

4. El campo de búsqueda es demasiado angosto.

El campo se puede hacer más grande de acuerdo al gusto del usuario y estoy implementando una forma de que se guarde este tamaño al cerrar el formulario.

5. En la parte inferior de la ventana hay un espacio en blanco. Sino le vas a dar utilidad a este espacio es mejor que lo quites. Si lo dejas crearás expectativas de que allí debe aparecer algo en ciertas condiciones.

Ese espacio está pensado para dar un poco más de información sobre el registro que está seleccionado.

5. El icono de la acción Imprimir es inconsistente con el estilo del resto de los iconos en el TToolbar. Puedes utilizar un set de iconos diminutos llamado Fugue, son los mejores en estilo en mi opinión. Además incluye iconos para todas y más de las acciones que te puedes imaginar.

Tienes razón, voy a buscar un ícono que sea más consistente con los otros.

Por último, quisiera ver esa misma venta sobre el efecto Glass de Windows AERO .

Bueno, esta ventana en si es MDIChild, por lo que no tiene el efecto Glass, pero tengo una prueba por ahí donde si se nota el efecto, deja tenga un tiempo y hago una captura para mostrarlo.

Saludos!

Saludos...

[[Delphius]]

Empezado por Chris

5. El icono de la acción Imprimir es inconsistente con el estilo del resto de los iconos en el TToolbar. Puedes utilizar un set de iconos diminutos llamado Fugue, son los mejores en estilo en mi opinión. Además incluye iconos para todas y más de las acciones que te puedes imaginar.
Saludos!

¿Donde está la inconsistencia? O a que te refieres por inconsistencia. A mi me parece de lo más normal, una impresora. ¿Cuál es el problema? No hay demasiadas opciones para representar la acción de Imprimir.

Saludos,

[[Chris]]

Empezado por Delphius

¿Donde está la inconsistencia?

Los iconos para las acciones Nuevo y Editar son en 2D, mientras que el de Imprimir está en 3D. Aparte de eso, el estilo y paleta de colores del último difiere de los dos primeros. Por eso es que creo existe una inconsistencia amigo.

Saludos,
Chris

[[maeyanes]]

Aquí una muestra de como se ve en Aero con efecto Glass:

Activa:



Inactiva:




Saludos...

[[Delphius]]

Empezado por Chris

Los iconos para las acciones Nuevo y Editar son en 2D, mientras que el de Imprimir está en 3D.

Bueno... pero es un detalle menor, es poca cosa. No creo que sea para tanto.

Empezado por Chris

Aparte de eso, el estilo y paleta de colores del último difiere de los dos primeros. Por eso es que creo existe una inconsistencia amigo.

¿Estilo? ¿Que estilo?
¿Y cómo le sabes que tiene una paleta de color diferente?

Me parece que esto si ya se va para la 5ta pata al gato

O sera que yo poca importancia le doy al tema de lo estético que no me pongo a ver si todos son 3D o si tienen sombra, o si están basados en una misma paleta... Mientras la aplicación funcione y el usuario pueda distinguir bien lo que hace cada cosa.

Saludos,

[[Chris]]

Empezado por maeyanes

Aquí una muestra de como se ve en Aero con efecto Glass:
...

Haz satisfecho mis espectativas
De hecho quería ver cómo el efecto "Glass" se aplicaba bajo los controles de Ruta y el Edit de Búsqueda. De hecho tengo curiosidad cómo lo has hecho. Lo que yo he investigado sobre el tema, requiere de muchas llamadas a la API de DWM.

Saludos,
Chri

[[Chris]]

Empezado por Delphius

Bueno... pero es un detalle menor, es poca cosa. No creo que sea para tanto.

O sera que yo poca importancia le doy al tema de lo estético que no me pongo a ver si todos son 3D o si tienen sombra, o si están basados en una misma paleta... Mientras la aplicación funcione y el usuario pueda distinguir bien lo que hace cada cosa.

La parte visual de la aplicación también importa desde mi punto de vista. Si te fijas, Apple se distingue de la competencia por el estilo. Por el empeño que ponen en cada detalle de la GUI. No se trata de que te exijas los mismos estándares de Apple, pero si puedes hacer algo mejor, por lo menos haz el intento. No te olvides que las cosas primero entran por la vista.

Una regla de oro para el desarrollo de software es la consistencia, y ésta se aplica para la interfaz y sus detalles.

Saludos,
Chris

[[Delphius]]

Empezado por Chris

La parte visual de la aplicación también importa desde mi punto de vista. Si te fijas, Apple se distingue de la competencia por el estilo. Por el empeño que ponen en cada detalle de la GUI. No se trata de que te exijas los mismos estándares de Apple, pero si puedes hacer algo mejor, por lo menos haz el intento. No te olvides que las cosas primero entran por la vista.

Una regla de oro para el desarrollo de software es la consistencia, y ésta se aplica para la interfaz y sus detalles.

Saludos,
Chris

No si, entiendo lo que dices y estoy de acuerdo. En mi caso si bien dije poca... no quiere decir nula.
De que debería cuidar mejor la apariencia, pues si te lo creo... te lo creo perfectamente. Es que para esas cosas no tengo mucha mano.

Si tu no me hubieras dicho de las inconsistencias no me hubiera enterado.

Saludos,

[[maeyanes]]

Hola...

Empezado por Chris

Haz satisfecho mis espectativas
De hecho quería ver cómo el efecto "Glass" se aplicaba bajo los controles de Ruta y el Edit de Búsqueda. De hecho tengo curiosidad cómo lo has hecho. Lo que yo he investigado sobre el tema, requiere de muchas llamadas a la API de DWM.

Saludos,
Chri

La verdad que si me dio mucho trabajo lograr el efecto deseado. En si, cuando detecto que se está dibujando en un área con efecto Glass, el dibujo lo hago usando bitmaps de 32Bits con canal alpha, de esta forma logro la semitransparencia y solo uso la API de GDI.

También hago uso de algunas funciones de la unidad UXTheme para dibujar el texto con transparencia y otras funciones que cree usando como base los ejemplos mostrados en esta web: Delphi Heaven.

Ambos controles, el de los breadcrumbs y el searchbox, apenas los estoy desarrollando y aunque ya tienen la funcionalidad básica, aún les falta.


Saludos...

[[Chris]]

Empezado por maeyanes

La verdad que si me dio mucho trabajo lograr el efecto deseado. En si, cuando detecto que se está dibujando en un área con efecto Glass, el dibujo lo hago usando bitmaps de 32Bits con canal alpha, de esta forma logro la semitransparencia y solo uso la API de GDI.

También hago uso de algunas funciones de la unidad UXTheme para dibujar el texto con transparencia y otras funciones que cree usando como base los ejemplos mostrados en esta web: Delphi Heaven.

Ambos controles, el de los breadcrumbs y el searchbox, apenas los estoy desarrollando y aunque ya tienen la funcionalidad básica, aún les falta.

Realmente haz logrado realizar un trabajo muy limpio y profesional. Te felicito mucho por ello. Yo también he estado investigando y haciendo pruebas al respecto. Lo único que no he podido lograr es obtener el efecto de extender la barra de ventana cuando se está en AERO Basic. Cosa que parece que tú me has ganado

Por otro lado, para el BreadCrumb puedes revisar este componente, talvez te sea de utilidad.

Saludos,
Chris

[[maeyanes]]

Hola...

Empezado por Chris

Realmente haz logrado realizar un trabajo muy limpio y profesional. Te felicito mucho por ello. Yo también he estado investigando y haciendo pruebas al respecto. Lo único que no he podido lograr es obtener el efecto de extender la barra de ventana cuando se está en AERO Basic. Cosa que parece que tú me has ganado

Bueno, en realidad es un TPanel, al cual le cambio el color dependiendo si la ventana está activa o inactiva, esto capturando los mensajes de windows en la ventana MDIChild.

Código Delphi [-]
interfase

type
  TMDIChildForm = class(TForm)
  private
    procedure WMNCActivate(var Message: TWMNCActivate); message WM_NCACTIVATE;
  end;

implementation

procedure TMDIChildForm.WMNCActivate(var Message: TWMNCActivate);
begin
  inherited;
  if Message.Active then
    pnlCaption.Color := clGradientActiveCaption
  else
    pnlCaption.Color := clGradientInactiveCaption
end;

Por otro lado, para el BreadCrumb puedes revisar este componente, talvez te sea de utilidad.

Ese componente ya lo conocía, es más, de ahí saqué la idea de hacer mi versión del control.

El control, el cual llamo TmeycBreadcrumbsView, ya hace gran parte de la funcionalidad deseada, solo me falta la parte de navegar usando el teclado.

Aquí unas capturas de su funcionamiento:

Mouse Over:


Menu Popup:

Saludos,
Chris

Saludos...

[[Chris]]

Empezado por maeyanes

Bueno, en realidad es un TPanel, al cual le cambio el color dependiendo si la ventana está activa o inactiva, esto capturando los mensajes de windows en la ventana MDIChild.

Muy ingeniosa tu solución con el panel amigo. Creo que probaré la idea en este prototipo que había estado trabajando.


Por último, me queda la duda de por qué te descantaste por los componentes que te he mencionado?

Saludos,
Chris

[[maeyanes]]

Por último, me queda la duda de por qué te descantaste por los componentes que te he mencionado?

Pues por muchas razones, la principal es que esos componentes no están pensados para dibujarse sobre Glass, si los pones en un área con Glass se dibujan mal, otra de las razones es que esos están pensados para usarse solo para navegar el sistema de archivos de Windows, aunque la versión nueva parece que está un poco desligada de esa situación.

Y pues también quería imitar si no al 100%, si casi al 100% la funcionalidad de los controles que tiene Windows.


Saludos...

[Kipow]

Empezado por Chris

Muy ingeniosa tu solución con el panel amigo. Creo que probaré la idea en este prototipo que había estado trabajando.


Por último, me queda la duda de por qué te descantaste por los componentes que te he mencionado?

Saludos,
Chris

Excelente utilidad, podrias darme alguna idea para poder implementar algo similar?

[negrokau]

Empezado por Chris

Muchas gracias Javier! Lo únicos componentes que utilizo son los JEDI. De ahí, se trata de mucho Custom Drawing para una apariencia pulida y seguir un patrón de diseño para que todo luzca uniforme a la vista.

Hola amigo Chris, me gusta mucho tu interfaz... me gustaria que me ayudes, si no es molestia a utilizar los componentes que usaste para tener una apariencia no igual a la tuya pero que sea llamativa si... gracias y disculpa por las molestias...

[[Chris]]

Empezado por negrokau

Hola amigo Chris, me gusta mucho tu interfaz... me gustaria que me ayudes, si no es molestia a utilizar los componentes que usaste para tener una apariencia no igual a la tuya pero que sea llamativa si... gracias y disculpa por las molestias...

Encantado! Solo dime como. Primeramente, utilizo el componente TJVDBGrid. Los demás controles son los incluidos en Delphi. Para realizar la aplicación utilicé Delphi 2009. Todos los controles están disponibles en versiones anteriores, excepto TButtonedEdit.

La aplicación de dónde vienen las capturas de pantalla, se llama Biolab. Sigue este hilo para descargarla e instalar la última versión de pruebas que puse a disposición. El Grid utiliza tecnicas de DoubleBuffering. Si pruebas la aplicación notarás que no hace ningún tipo de Flickering por esta misma razón.

Por último, hice unas modificaciones al control TJvDBGrid. Las documenté en esta entrada de mi Blog.

Saludos!

[[AzidRain]]

Muy buenas las últimas soluciones publicadas pero creo que los desarrolladores debemos desarrollar y los diseñadores gráficos diseñar. A mi también me pasó que me metía a esos embrollos de hacer los íconos que aunque técnicamente casi cualquier desarrollador mas o menos avispado puede realizar no se compara con lo que puede hacer un diseñador gráfico. Aquí en el changarro normalmente diseñamos con iconos "estandar" que ya tenemos y luego ponemos a trabajar a nuestro diseñador gráfico (externo) obviamente explicándole que concepto queremos transmitir, entorno de uso, empresa, etc. Y el nos regresa un bonita colección de íconos, paleta de colores, etc. y todo con coherencia visual. Que cuesta un poco más pues sí, pero obviamente ese costo lo paga el cliente y además obtiene un producto totalmente personalizado exclusivamente para él.

Por otro lado como ya comenté anteriormente, no basta que nuestro software se vea bonito, sino que resuelva problemas para los que nos contratan. Es horrible que te digan, "Se ve muy bien pero no me da el reporte tal como lo necesitamos..."

Consejo: Hacer que el software haga primero lo que tiene que hacer aunque se vea feo...mostrarlo para aprobación y luego ya con toda libertad "embellecerlo".

[Casimiro Notevi]

Empezado por AzidRain

Aquí en el changarro normalmente diseñamos con iconos "estandar" que ya tenemos y luego ponemos a trabajar a nuestro diseñador gráfico (externo) obviamente explicándole que concepto queremos transmitir, entorno de uso, empresa, etc. Y el nos regresa un bonita colección de íconos, paleta de colores, etc. y todo con coherencia visual. Que cuesta un poco más pues sí, pero obviamente ese costo lo paga el cliente y además obtiene un producto totalmente personalizado exclusivamente para él.

¿Se puede ver algún ejemplo?

[DarkDudae]

A mí me gusta que el look de los programas se aleje un poco de lo que estamos acostumbrados a ver en Windows. Por eso siempre intento usar mucho contraste de color y muchos iconos. Aquí os paso una captura:



Si queréis ver más capturas, os podéis pasar por mi carpeta de imágenes de dropbox:Galería de imágenes de TouchVent

Un saludo