Watch, Follow, &
Connect with Us

Jose Perez’s Blog

HTML5 Builder – Interfaz de Usuario – Página de Bienvenida

Este post es una traducción del post "HTML5 Builder – UI – Welcome Page" escrito por José León en su blog.


Si usted ha utilizado anteriormente RadPHP XE2, lo primero que notará cuando se ejecuta el IDE por primera vez, es la nueva interfaz de usuario. Dicha interfaz de usuario rompe el vínculo entre RAD Studio y RadPHP, es decir, en el pasado, ambos productos tenían una apariencia y comportamiento parecidos, pero esto vez no ha sido así. Hemos aprovechado la oportunidad y hemos desarrollado una nueva interfaz de usuario, especialmente adecuada para esta herramienta. Probablemente, algunos conceptos no funcionarán para otras herramientas, ni siquiera para RAD Studio, pero ese no era el objetivo final.

Para la nueva interfaz de usuario, hemos tomado algunas pautas básicas:

  • Simplificar la anterior interfaz de usuario, asustaba a los nuevos usuarios.
  • Eliminar el desorden tanto como sea posible, como también muchas opciones en la pantalla al mismo tiempo, el usuario confunde.
  • Ganar espacio de edición para evitar la necesidad de usar la barra de desplazamiento.
  • Prestar atención a cómo utilizan los usuarios el producto y qué herramientas son realmente útiles en función de lo que dichos usuarios están haciendo.
  • Y por último, desarrollar una nueva interfaz de usuario moderna y atractiva visualmente.

Así que, teniendo todo esto en mente, vamos a analizar la nueva interfaz de usuario paso a paso. Primero vamos a echar un vistazo a la página de bienvenida en RadPHP XE2:

Página de Bienvenida de RadPHP XE2

Puede pinchar encima de la imagen para hacerla más grande.

Preste atención en todas las flechas rojas:

  • El panel estructura (Structure) está vacío
  • El Inspector de Objetos (Object Inspector) está vacío
  • El Gestor de proyectos (Project Manager) está vacío
  • La paleta de herramientas (Tool Palette) muestra los elementos del repositorio
  • Existen una gran cantidad de acciones en la paleta de herramientas (Tool Palette) que están desactivadas
Con tanto panel perdemos espacio en la pantalla, y además la paleta de herramientas que muestra los elementos del repositorio es una "solución" para mostrar algo ahí cuando el área de contenido no está mostrando el Diseñador de formularios (Form Designer). ¿Cuántas veces has usado la paleta de herramientas (Tool Palette) para crear un nuevo formulario? Probablemente ninguna.
Ahora echemos un vistazo a la página de bienvenida de HTML5 Builder:

Welcome Page H5B

Podemos observar que:

  • La mayor parte del espacio de la pantalla se usa para mostrar las noticias en vez de usarse para mostrar paneles vacíos.
  • No se muestran herramientas que no ese contexto no son necesarias. Acabamos de abrir la herramienta y no hay ningún proyecto abierto por lo que no hay necesidad de abrir el Inspector de Objetos (Object Inspector), paleta de herramientas (Tool Palette), estructura (Structure), etc.
  • Tenemos a la izquierda las opciones globales que se pueden utilizar. Veremos más información de los contextos en próximos artículos.
Por otro lado, cabe destacar que los iconos son más grandes, estamos usando PNG con transparencia, y el esquema de color es oscuro, siguiendo las tendencias de otras herramientas como Photoshop o Visual Studio 2012. Daremos más información sobre el estilo oscuro en otro artículo.
Espero que este artículo le haya ayudado a entender los porqués y los cómo de la nueva interfaz de usuario, y por favor, no dude en publicar un comentario.  El interfaz de usuario de HML5 Builder ya no está ligada a la interfaz de usuarios de RAD Studio, así que nos va a ser más sencillo para nosotros implementar los cambios que los usuarios soliciten.

Este post es una traducción del post "HTML5 Builder – UI – Welcome Page" escrito por José León en su blog.
Posted by José Pérez on November 6th, 2012 under html5builder |


Comments are closed.



Server Response from: BLOGS1