You are on page 1of 28

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM


Definicin de estndares de diseo de la interfaz.

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

ndice

OBJETIVO: ................................................................................................................................................... 3 INTRODUCCIN:............................................................................................................................................ 3 DEFINICIN DEL USO DE EXTJS Y DISEO DE LA INTERFAZ: ..................................................................................... 4 LAYOUT:...................................................................................................................................................... 4 CONTENEDORES:........................................................................................................................................... 5 Window:............................................................................................................................................... 5 Panel: ................................................................................................................................................... 6 TabPanel: ............................................................................................................................................. 6 BOTONES, TOOLBARS Y MENS: ....................................................................................................................... 7 Toolbars: .............................................................................................................................................. 7 Botones: ............................................................................................................................................... 7 Mens: ................................................................................................................................................. 7 CONTROLES DE CAPTURA: ............................................................................................................................... 8 Combo Box: .......................................................................................................................................... 9 TextField:............................................................................................................................................ 10 Number field: ..................................................................................................................................... 11 Radio Button: ..................................................................................................................................... 11 Check Box: .......................................................................................................................................... 12 Calendario: ......................................................................................................................................... 12 File upload: ........................................................................................................................................ 13 Slider field: ......................................................................................................................................... 14 DESPLIEGUE DE INFORMACIN: ...................................................................................................................... 15 GRIDS: ...................................................................................................................................................... 15 Paginacin: ........................................................................................................................................ 17 Edicin: .............................................................................................................................................. 19 Mensaje de espera: ............................................................................................................................ 20 Agrupacin:........................................................................................................................................ 21 GRAFICAS E IMGENES: ................................................................................................................................ 22 Grficas: ............................................................................................................................................. 23 Tableros: ............................................................................................................................................ 25 Imgenes: .......................................................................................................................................... 26 Data view: .......................................................................................................................................... 27 CONCLUSIONES:.......................................................................................................................................... 28

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Objetivo:

Definir las normas y convenciones que se debern de considerar en el diseo de la interfaz grfica de cualquier mdulo que forme parte del CRM, tomando en cuenta que solo sern impositivas para los desarrollos construidos con ExtJS y servirn como referencia para las herramientas construidas con otras tecnologas.

Introduccin:

El diseo de la interfaz de usuario crea un medio eficaz de comunicacin entre el usuario final y la aplicacin, si la aplicacin es difcil de usar el usuario tiende a cometer errores, sin importar las capacidades de la aplicacin si el usuario no es capaz de explotarlas se desperdiciarn y harn de nuestra aplicacin o de algunos componentes de la misma un conjunto de esfuerzos desperdiciados. Es por esto que una de las claves para construir una aplicacin de calidad es hacer un anlisis y diseo exhaustivo de la interfaz grfica, la cual debe presentar la mayor usabilidad posible adems de guardar un estndar para todos los componentes de la aplicacin. Los tres pilares sobre los que debemos construir una interfaz grfica son: -Dejar el control al usuario. -Reducir la carga de memoria al usuario. -Hacer que la interfaz sea consistente.

En base a esto el diseo debe contemplar diferentes aspectos como es el flujo de las acciones que el usuario realizar, el tiempo de respuesta, el tipo de usuario al que est dirigida la interfaz, herramientas de ayuda, manejo de errores, la legibilidad de las leyendas de los diferentes componentes, la accesibilidad, la internacionalizacin, la eficiencia y la flexibilidad. Las definiciones en el presente documento son exclusivas para la creacin de nuevos mdulos, las herramientas existentes que vayan a ser integradas al sistema CRM debern aproximarse a estas en la medida de lo posible con el nico objetivo de tener una interfaz lo ms consistente posible.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Definicin del uso de ExtJS y diseo de la interfaz: A continuacin se presentan las normas a seguir para el diseo de la interfaz utilizando ExtJS. Conforme ExtJS ha evolucionado ha ido aproximando cada vez ms las herramientas disponibles en el desarrollo de aplicaciones de escritorio a aplicaciones en web, presenta una gran variedad de herramientas que podemos configurar a placer para crear una interfaz realmente compleja y facilitar el uso de la misma al usuario, de forma que identificaremos los controles y herramientas ms utilizadas y definiremos las convenciones y configuraciones que debern utilizarse para que podamos crear un sistema con una interfaz grfica consistente. Layout:

El primer paso para construir una interfaz es definir la organizacin que tendrn los componentes de la misma, el tamao que esta tendr, etc. Debido a las caractersticas de CRM es necesario que nuestras aplicaciones sean lo ms flexible posible en cuanto a la resolucin de pantalla, la posicin de los controles y en la medida de lo posible el ordenamiento automtico de los controles. ExtJS provee una herramienta muy til para el manejo de la interfaz mediante la clase viewport la cual gestiona de manera automtica la posicin de los componentes, su tamao, el uso de scrollbars, etc. y adems nos proporciona los mtodos necesarios para definir el comportamiento que deseemos en cualquiera de los eventos anteriores o inclusive si alguno de los predefinidos no cumple con nuestras necesidades poder extenderlo para obtener el resultado esperado. De tal forma que toda nueva aplicacin deber implementar esta configuracin de layout con una alineacin central tanto en el eje horizontal como vertical, el diseo de la aplicacin deber de buscar evitar el uso de scrollbars en la mayora de los casos que se puedan presentar. En el caso de los widgets y herramientas propias del framework el layout ser definido a fit para que esta pueda ser incluida en cualquier zona de la aplicacin sin la necesidad de cambiar el cdigo original del componente, permitiendo as que la aplicacin pueda decidir en base al perfil y preferencias del usuario la forma en que se presenta la interfaz.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Contenedores:

Los contenedores son todos aquellos elementos en donde agregaremos los controles de nuestra interfaz, que nos ayudarn a organizarlos de la manera en que mejor nos convenga. A continuacin se presenta una lista de los diferentes contenedores proporcionados por ExtJS y las recomendaciones para la decisin del uso entre uno y otro.

Window: La ventana es el contenedor que utilizaremos para cuando sea necesario abrir pequeos formularios dentro de la aplicacin sin abandonar la misma. No se deber utilizar para desplegar elementos directamente en el layout.

El formato de ventana para CRM ser el que se muestra en la imagen superior tomando en cuenta solo los siguientes elementos:

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Ttulo: La barra de ttulo solo deber contener el ttulo de la ventana alineado a la izquierda, sin ningn tipo de botn de cierre, colapsar, minimizar, maximizar, opciones o alguno definido por el usuario. Toolbar: La barra de herramientas deber presentar las opciones de Regresar o Cerrar dependiendo del flujo de la aplicacin y el contexto de la ventana alineadas a la derecha. Si los controles de la ventana estn ligados a una sola accin, el botn que la desencadena podr incluirse en el toolbar de la ventana en caso contrario deber de estar en la barra de herramientas de cada uno de los contenedores internos de la ventana. Panel: El panel es el contenedor bsico que presenta ExtJS del que se extienden contenedores ms complejos. Es muy importante tener en cuenta a la hora de utilizarlo que no deber de generar un doble nivel a menos que debamos utilizarlo para el layout de la aplicacin en cuyo caso deberemos ocultar todos sus componentes visibles, de forma que solo exista una barra de herramientas, un borde, un ttulo, etc. En general debe ser usado como contenedor principal y debemos valernos de las herramientas de configuracin que ExtJS nos presenta para configralo para evitar diferentes niveles de contenedores. TabPanel: El tabPanel es una extensin de Panel que nos permite tener diferentes contenedores separados en pestaas, este elemento es muy til requerimos que el usuario capture gran cantidad de informacin, sin embargo es muy importante siempre tener el control de los diferentes elementos de todos los Panel, as como el momento en que deben ser renderizados, ya que si no controlamos el flujo el control puede caer en ciclos que afectan directamente en el rendimiento de la aplicacin

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Botones, toolbars y mens:

Toolbars:

Los toolbars de los contenedores debern estar formado solo por botones y mens, no se deber agregar ningn otro tipo de control especialmente de captura, la nica excepcin a esta regla podra darse en la creacin de widgets que realmente requieran la inclusin de estos campos como podra ser un grid que realiza bsquedas. Botones:

Los botones guardarn el formato de un icono asociado a la accin que realizan el cual deber tener un tamao de 16x16 pixeles seguidos de un texto a la derecha del icono que describa la accin del mismo.

Mens:

Los mens debern guardar el mismo formato que los botones, se podr excluir el uso de iconos en mens muy grandes donde se incremente la usabilidad de la aplicacin dando nfasis a las acciones que se utilizan con mayor frecuencia a travs de los iconos dejando as las dems acciones sin un icono asociado, el ttulo del men siempre deber presentar un icono.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Controles de captura:

Siempre que el usuario deba proporcionarnos cierta informacin deberemos de elegir entre los diferentes controles de captura que nos proporciona ExtJS, es importante elegir el que se adapte mejor a las necesidades de la aplicacin en base a sus caractersticas que se muestran a continuacin y que faciliten al usuario la utilizacin de la aplicacin al mximo posible. Deberemos elegir entre cada uno tomando en cuenta diferentes aspectos como es el tipo de dato, si proviene de algn catlogo predefinido, los diferentes valores que puede introducir el usuario y la forma ms gil de realizar la captura. Todos los campos de captura debern estar acompaados de una etiqueta utilizando el xType displayField la cual debe describir de forma concisa el objetivo del dato que se espera introduzca el usuario. Para los controles que permitan validaciones se deber configurar la aplicacin para que en caso de error las notificaciones se muestren del lado derecho del control (side).

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Combo Box: El Combo Box deber ser utilizado siempre que el usuario deba introducir un valor almacenado dentro de un catlogo y el valor de este campo no pueda ser diferente o no existir en el mismo. Este control nos permite mayor control sobre los datos que introduce el usuario.

Como podemos observar en la imagen adems nos permite definir un formato para presentar la informacin al usuario en este caso en especfico observamos un valor numrico en negritas que es el dato que el usuario deber seleccionar pero adems le proporcionamos informacin adicional para permitirle al usuario hacer una eleccin correcta. Siempre ser obligatorio definir un tamao de pgina para la utilizacin de este control se recomienda un tamao de diez, es importante evitar tamaos de pgina que provoquen que se despliegue un scrollbar vertical dentro de la lista del combo. Se debe dar la capacidad al control de poder buscar en el catlogo a travs de la captura del usuario, los campos que estarn disponibles para esta bsqueda debern ser campos claves y solamente los indispensables. El valor que tomar el campo siempre deber de mostrarse en negritas dentro del template de formato de la lista y la dems informacin en formato normal. Si un combo despliega un catalogo del cual utilizaremos un ID que no proporciona informacin al usuario sobre el valor o descripcin del mismo utilizaremos las propiedades de displayField y valueFieldpara manejar ambos valores evitando que al usuario se le muestren claves que no le proporcionen informacin relevante.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

TextField:

Cuando el usuario deba proporcionar a la aplicacin informacin de cualquier ndole que pueda tener cualquier cantidad de valores y que no pertenezca a ningn catlogo deberemos utilizar un control del tipo textField para el cual deberemos siempre definir las reglas de la informacin que ser posible capturar en este campo. Para definir las reglas de este campo utilizaremos un objeto de tipo vType definido en ExtJS y que deberemos de registrar a nivel aplicacin y no a nivel mdulo de forma que pueda ser utilizado por cualquier objeto perteneciente a la misma, es importante recordar que debemos controlar todos los flujos de respuesta de este objeto para evitar excepciones. El mensaje del objeto vType debe explicar de manera concisa los valores que el campo puede recibir, la longitud, etc. Esto depender de la definicin del campo. Este mensaje deber estar definido a nivel de la aplicacin en el archivo de configuracin de lenguaje facilitando as la internacionalizacin de la aplicacin con solo cambiar este archivo. A continuacin se muestra un ejemplo de un campo que solo recibe valores numricos.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Number field:

Number field es una extensin de textField diseada para la captura de cantidades que ofrece al usuario dos caminos para hacerlo, a travs de captura manual o a travs del mouse. Es importante recordar que este control deber ser utilizado solo en el caso de que se capturen nmeros con un rango de posibilidades pequeo generalmente no mayor a mil, ya que si el rango de posibilidades es mayor los usuarios generalmente tomarn la opcin de la captura manual y para quienes decidan utilizar la herramienta a travs del mouse se convertir en un proceso tedioso. El campo utiliza por default un vType predefinido para la captura de solo cantidades en base a los parmetros con los que creemos el objeto, sin embargo podemos agregar validaciones a travs de un nuevo vType definido por nosotros.

Radio Button:

El radio Button deber ser utilizado en el caso de que tengamos una lista de pocos valores predefinidos de los cuales el usuario pueda seleccionar solo uno, es importante tomar en cuenta que al utilizar este control con pocos valores provee de agilidad a nuestra aplicacin sin embargo si la cantidad de valores disponibles dentro de un grupo es muy alta el efecto es el contrario. Siempre debemos acceder a los valores de estos controles a travs de su ID y no de su valor, en el caso de que deseemos obtener solo el radio seleccionado como generalmente es el caso lo haremos a travs del ID del grupo del que forma parte.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Check Box:

El checkbox deber ser utilizado cuando el usuario pueda elegir uno o ms de un valor predefinido. El checbox es una herramienta muy poderosa ya que agiliza la utilizacin de la interfaz ya que limita la interaccin del usuario a un solo click sin embargo debe ser utilizado con precaucin ya que el presentar grandes grupos de controles de este tipo dificulta la labor del usuario para buscar el o los valores que desea capturar. Debido a que el checkbox es ExtJs es un objeto tal como cualquier otro control de este framework accederemos a su estado a travs del ID del mismo y no a travs de su valor para no generar conflicto con otros widgets que puedan contener un mismo elemento, permitiendo as a la aplicacin identificar adecuadamente el control al que hacemos referencia.

Calendario:

El calendario es una herramienta muy poderosa que permite al usuario la captura de una determinada fecha sin preocuparse del formato en que debe capturarla y que adems le permite navegar a travs de un calendario para que pueda hacer esta captura con solo utilizar el mouse, de forma que adems de agilizar el proceso incrementa las posibilidades que tiene el usuario para realizar esta captura. El calendario deber ser utilizado siempre que se solicite una fecha al usuario y deber de configurarse para mostrar el formato de fecha dd/mm/yyyy. En caso de que el calendario se encuentre dentro de algn otro componente como un editorGrid deber configurarse el mismo formato de fecha a ambos controles para que otros componentes puedan acceder al calendario ya que generalmente en estos casos no es necesario si interacta con otros componentes estos no podrn determinar su valor, como sera el caso de un rango de fechas o un grid dinmico.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Para la configuracin de rangos de fechas y validaciones dentro de este control siempre deber usarse objetos de tipo vType que reciban el control como parmetro y que se encarguen de determinar el comportamiento del mismo, esto es se evitar utilizar los eventos propios del control para la validacin del valor capturado por el usuario.

File upload: En ocasiones es necesario que el usuario sea capaz de subir archivos al servidor, para lo cual utilizaremos el control File Upload utilizando la configuracin que se muestra en la imagen, esto es a travs del xType filefield.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Slider field:

Slider field es un control muy especfico que deber ser utilizado con mesura especialmente en aplicaciones, ya que como cualquier contenedor su objetivo es el de obtener una cantidad o valor del usuario como cualquier otro campo de captura fue diseado tambin para mostrar de forma simple un conjunto de valores que al usuario le ser ms fcil identificar a travs de este control que leyendo nmeros o datos. De esta forma es necesario tener presente que las necesidades de nuestra aplicacin deber cumplir con estos requisitos de forma estricta para que decidamos utilizar este control, en caso de que as sea se recomienda no utilizarlo en aplicaciones solo en widgets. El acceso a los valores del mismo deber ser a travs de su ID y valor y nunca por su posicin en la forma o el texto de su etiqueta.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Despliegue de informacin:

Grids:
El grid es uno de los elementos ms utilizados en el despliegue de informacin de ExtJS gracias a la gran cantidad de herramientas y configuraciones que nos presenta para el formato, edicin y manejo de la informacin. Este elemento presenta herramientas de configuracin como agrupacin, operaciones matemticas sobre columnas, ordenamiento de columnas, paginacin, configuracin de templates para desplegar informacin, referencias, entre muchas otras. En cuanto a la interaccin con el usuario nos provee herramientas de configuracin como orden de los campos, ordenamiento de los valores de las columnas, eleccin de columnas visibles, edicin de datos, aadir datos a travs de drag and drop, etc. Existen diferentes tipos de grid definidos por ExtJS los cuales explotan de manera ms eficaz las diferentes capacidades del mismo y otras tantas extienden su funcionalidad aadiendo nuevas herramientas a travs de plugins. Debido a esta gran diversidad es necesario establecer parmetros bsicos e indispensables para todos los diferentes tipos de Grid y posteriormente estableceremos los parmetros bsicos para cada uno de estos o al menos los ms importantes. Un grid no deber de poder colapsarse a menos que se est desarrollando un widget. La informacin desplegada deber de ordenarse a travs de una clave a menos que las necesidades de la aplicacin la requieran de forma diferente.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Paginacin: Ningn grid deber presentar nunca un scrollbar a menos que la cantidad de informacin sea muy alta y el tiempo requerido para la obtencin de la misma sea muy bajo, en cualquier otro caso se utilizar paginacin y el tamao de la pgina ser igual al nmero de registros que despus de configurar el formato de presentacin pueda presentar el grid sin mostrar de forma automtica los scrollbar verticales.

El grid deber mostrar siempre el conteo total de registros tanto de la pgina. Se debern utilizar los controles de paginacin predefinidos as como la opcin de recargar la informacin, se evitar el uso de cualquier otro plugin para los controles de la paginacin.

Todas las acciones, botones y mens que se acten sobre el grid debern estar incluidas en el toolbar del mismo y no del elemento contenedor, estos debern presentar un icono de (16x16 pixeles) seguidos de la etiqueta que los identifica, sin importar la ndole del elemento. Podrn utilizarse diferentes alineaciones a conveniencia del desarrollador y en busca de aumentar la usabilidad de la aplicacin. En caso de querer incluir un campo de bsqueda para el grid este deber de ubicarse en el bbar al lado de los controles de paginacin y siempre deber realizar las bsquedas preferentemente solo sobre campos clave, el campo deber desplegar mediante la propiedad emptyText el objetivo del mismo ya que no se deber agregar un objeto displayField. El bbar no deber contener ningn tipo de elemento de accin ms que los utilizados para la paginacin y la realizacin de bsquedas. Cuando sea necesario permitir al usuario seleccionar ms de un registro para posteriormente realizar una accin sobre estos se deber utilizar el modelo de seleccin con checkbox a menos que esta accin sea la de edicin. Todos los campos editables debern apegarse a las reglas y normas definidas previamente en este documento para controles de captura a excepcin del despliegue de mensajes de error.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Templates de formato:

En caso de que se le quiera dar un formato especial al display de alguna columna, esta configuracin se har a travs de html y stylesheets. En caso de que se desee agregar referencias o acciones a las columnas se harn a travs de JavaScript. Si el grid acepta drag and drop deber validar que los datos que se agregan cumplan con el formato establecido y en caso de que no se as evitar su adicin para evitar errores en tiempo de ejecucin. En caso de que se requiera desplegar un registro en algn formato multilnea no deber de configurarse dentro de la definicin del grid si no que se deber hacer mediante stylesheets.

Si se desea cambiar el color automtico del estilo definido para una columna este deber representar una informacin adicional que el usuario pueda identificar, de otra forma se evitar hacer estos cambios de color.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Edicin:

Siempre que se requiera hacer una edicin sobre los datos de un grid se debern realizar sobre los campos del grid y no a travs de forms externos al mismo, las acciones debern de tener la capacidad de almacenar mltiples registros en un solo action. Todos los campos de captura debern podrn retornar a su valor inicial especialmente combos y calendarios para evitar que el usuario tenga que recargar el grid. El evento de actualizar no deber estar ligado a la seleccin de las columnas del usuario deber de realizarse sobre los elementos modificados a travs de las propiedades de los mismos.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Si se utiliza el plugin de grid row eidtor deber cumplir con las mismas especificaciones mencionadas anteriormente as como las especificadas en la seccin de campos de captura.

Mensaje de espera: Siempre que se est realizando alguna accin sobre el store ligado a un grid se deber de bloquear el grid y se deber desplegar un mensaje alusivo a la accin que se est realizando, para esto se utilizar el formato default de mensaje de espera solo se cambiar el texto conservando el formato.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Agrupacin: Siempre que sea necesario desplegar informacin agrupada para facilitar al usuario la identificacin de la misma se debern cumplir las siguientes normas. -El campo por el cual se agruparn los datos no deber mostrarse como columna, sin embargo estar disponible para que el usuario la muestre. -Deber mostrarse el conteo total de los registros contenidos en el grupo. Es importante recordar que para que este control adicione usabilidad a la interfaz debe de facilitar la identificacin de la informacin al usuario si se elige como campo agrupador un campo que gener gran cantidad de grupos o que no sea relevante haremos ms compleja la asimilacin de la informacin al usuario.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Graficas e imgenes:

Para la versin 3 y 4 de ExtJS el framework ha desarrollado gran cantidad de herramientas para la creacin de grficas as como de libreras de diseo. La interfaz de CRM deber evolucionar poco a poco en una interfaz totalmente rica en este tipo de elementos especialmente para los mdulos de reportes. La intencin es crear una interfaz en la cual el usuario no deba leer grandes cantidades de informacin para conocer el estatus de las ventas por ejemplo, si no que con una simple mirada a un tablero pueda tener una idea general del estatus. A continuacin se presentan diferentes ejemplos de estos elementos, los cuales tienen una mayor libertad en el diseo ya que dependen directamente de la informacin que despliegan y de las preferencias del usuario, el requisito indispensable sera permitir al usuario configurar de manera simple las opciones en que desea que estos elementos se le muestren, por ejemplo los colores, el tipo de grfica, la ubicacin en la pantalla, si la necesidad de conocimientos tcnicos, a travs de selectores de color, drag and drop, etc. El diseo de la interfaz debe reflejar en conjunto de manera precisa el objetivo de la misma si la necesidad de entrar al detalle de los datos, si la interfaz no cumple con estos requisitos es mejor omitir el uso de estos controles.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Grficas:

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Tableros:

Desde hace algunos aos todas las aplicaciones tanto de escritorio como web tienden a este tipo de interfaz especialmente para desplegar informacin, ya que a travs de este tipo de controles el usuario puede tener una visin general de la informacin con solo echar un vistazo de segundos a la aplicacin.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Imgenes:

Existen dos formas de mostrar imgenes en pantalla. A travs de formato html y a travs de las clases de dibujo nativo de ExtJS, por la naturaleza del proyecto no ser necesario utilizar dichas clases, las imgenes que sern requeridas se cargarn a travs de html. Ejemplo de imagen creada con las libreras nativas de ExtJS:

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Data view:

Otra de las herramientas de manejo de imgenes y desplegado de informacin que ha tomado gran popularidad es la de Data View, ya que permite al usuario gran capacidad de manipulacin de la interfaz y de la informacin. En base a los alcances de la primera fase del sistema CRM no existe la necesidad directa de utilizarla, de forma que no se establecer un estndar, se muestra a continuacin un ejemplo:

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

, S.A.B. DE C.V.

Subdireccin de Sistemas Comerciales

ESTNDARES DE DESARROLLO CRM

Conclusiones:
El presente documento ha identificado los principales recursos y herramientas que nos proporciona ExtJS para el diseo de la interfaz de nuestras aplicaciones, con esto se busca que todos los grupos que participen en el desarrollo diseen de forma consistente y estndar para cada uno de estos grupos. Por otra parte la funcionalidad completa de CRM estar formada por una gran cantidad de herramientas construidas en diferentes tecnologas, tambin es necesario que estos grupos conozcan estos elementos para que aproximen en la medida de lo posible sus aplicaciones a lo definido en este documento, para que conforme vayamos evolucionando con la aplicacin podamos unificar mas y mas todas estas herramientas. Las normas establecidas en el presente solo sern impositivas para los desarrollos construidos con ExtJS, el documento no define los temas, colores, estilos, iconos y dems elementos que debern ser utilizados ya que su principal objetivo es mejorar la usabilidad de la aplicacin de forma que se dejarn estas definiciones para la etapa de requerimientos.

PARA USO INTERNO NICAMENTE/ PROPIEDAD DE TELMEX

You might also like