Es el momento de comenzar con nuestra guía para que puedas crear tu propio TPV para usar en un iPad. Antes de empezar a desarrollar tablas y formularios como locos tenemos que tener en cuenta una serie de consideraciones dado que, diseñar para iPad, requiere que pensemos en nuestros dedos en vez de en nuestro ratón y esto hará que varíe ligeramente la forma en la que hemos estado diseñando el programa de facturación con FileMaker en este mismo blog.

Un iPad tiene dos características fundamentales que lo diferencian sobremanera con respecto a un PC de escritorio, iMac o PC con windows, disponemos de una pantalla más pequeña y el puntero (nuestros dedos) es más grande que el puntero de un ratón. Así que, desde ya mismo debes hacerte esta imagen mental, nuestro TPV desarrollado con FileMaker debe tener los botones, cuadros de texto, imágenes, cuadros informativos, etc, más grandes para que podamos leerlos cómodamente en una pantalla tan pequeña y además, hacerlo todo más grande nos favorecerá el “atinar” cuando interactuemos con nuestros dedos, en contrapartida, tendremos menos espacio para incluir cosas en pantalla.

¿Me caben menos cosas?

En cierto modo si. Si hiciéramos una copia exacta de nuestro programa de facturación que desarrollamos para escritorio en el iPad podrías comprobar que todo sale mucho más pequeño y que costaría muchísimo, no solo leer en pantalla, sino pulsarle con el dedo a los objetos de nuestra aplicación. Si has sigo seguidor fiel de nuestros artículos y has creado el programa de facturación te animo, antes de que sigas con esta nueva serie, a que lo pruebes en el iPad y compruebes por ti mismo las carencias y defectos que tendremos que mejorar a la hora de hacerlo para nuestra tablet.

¿Como lo ejecuto en el iPad?

Seré breve, una aplicación desarrollada con FileMaker, bien en Mac o en Windows, solo necesita que tengas en el iPad instalado el FileMaker Go que además es completamente gratuito. No necesitas pagar más licencias para ello. Hasta que expliquemos las distintas opciones que tienes, de momento puedes pasar el fichero al FileMaker Go de tu iPad mediante iTunes. Una vez allí, abres FileMaker Go y seleccionas el fichero que contiene tu TPV. Más adelante lo veremos con más detalle.

Ok, menos espacio y todo más grande

Efectivamente, has captado la idea, todo lo que hagamos lo haremos teniendo en cuenta esa premisa. Tendremos que decidir que información debemos dejar fuera del TPV para iPad, quizás para integrarla en la aplicación de escritorio, que sea menos relevante en el iPad, aunque ya veremos que los chicos de FileMaker nos ofrecen en esta última versión, FileMaker 13, una serie de nuevas herramientas diseñadas específicamente para interactuar con la tablet sin necesidad de prescindir de algunas opciones.

Las guías y los estilos

Si has hecho la prueba de pasar el programa de facturación al iPad habrás podido comprobar que, milagrosamente, todos los formularios de la aplicación caben perfectamente en el iPad, nada se queda fuera, ¿pero si mi aplicación no está pensada para esta pantalla, que ha pasado? pues que FileMaker Go automáticamente adapta todo tu formulario, por muy grande que sea, a la pantalla del iPad. Pero aun así algo falla, mira sino como queda en mi iPad:

Pasa que tengo mucho espacio desaprovechado a la derecha y en la parte inferior porque esta aplicación la desarrollamos para escritorio no teniendo en cuenta las dimensiones de nuestro iPad. Para evitar esos problemas usaremos las guías que trae FileMaker para las distintas pantallas, iPad horizontal o vertical, iPhone horizontal o vertical, de forma que cuadraremos perfectamente nuestro diseño a estas pantallas.

Po otro lado usaremos los estilos, con ellos vamos a conseguir uniformidad en colores y diseño en todas nuestras pantallas y, otra cosa muy importante, FileMaker incluye muchos de ellos diseñados concienzudamente para que se vean estupendamente en nuestras pantallas táctiles. No solo incluyen los colores sino que además adaptan el tamaño de la letra a la mejor opción para nuestros dispositivos. Todo esto nos ahorrará innumerables horas de trabajo y diseño. Mira que bien luce en mi iPad la pantalla de empleados de mi TPV utilizando los estilos y adaptándolo con las guías:

Yo creo que se ve la diferencia perfectamente. Todo queda mucho más bonito, mas cuadrado, mejor organizado, más fácil de utilizar con nuestros dedos.

¿Empezamos?

¡Pues claro!, se que lo estás deseando desde hace ya un par de meses que planteamos este nuevo reto, así que ¿a qué estás esperando? Abre FileMaker, yo estoy usando FileMaker 13 y muchas de las cosas que haremos de aquí en adelante sólo están disponibles en esta versión, te recomiendo que te pongas al día.

Selecciona “Crear una nueva base de datos….”

Ponle de nombre “TPV” y pulsa aceptar. Lo primero que habrá creado FileMaker será una tabla con el nombre “TPV”, nuestra primera tabla que nosotros utilizaremos a modo de tabla de configuración de nuestro TPV, como veremos más adelante. Esta tabla también es la que FileMaker nos muestra como base para el primer formulario que nosotros utilizaremos como menú principal de nuestro TPV.

Lo primero que haremos será activar las guías para que cuadren con nuestro iPad. En la parte superior derecha pulsa sobre el botón de las guías y selecciona la resolución del iPad vertical. Podríamos usar cualquiera de ellas e incluso crear varias pantallas según esté el iPad en horizontal o vertical, FileMaker tiene la capacidad de detectar en que dispositivo se está ejecutando y, nosotros mediante sus guiones, podríamos decidir que pantalla mostrar al usuario, ¿No es fantástico?.

Y a continuación activaremos el tema pulsando sobre el botón situado junto al “Selector de campos”:

Como puedes comprobar, de entre todos los disponibles, para nuestro diseño, yo he elegido el “Luminoso táctil”. Todos los temas que en su nombre incluye “Táctil” están especialmente diseñados para nuestros iPads y iPhones. Puedes probar cualquier tema por si alguno te gusta más.

Ya tenemos la base sobre la que empezar a diseñar la pantalla principal. Puedes ir buscando iconos para colocar en los botones que pondrás en esta pantalla. ¿Que no sabes donde encontrar iconos? la red está llena de ellos, por poner un ejemplo puedes descargarte muchos de ellos iconfinder, aquí encontrarás muchos de pago, pero también muchos gratuitos y muy buenos.

Aunque el diseño del TPV pueda variar a según vayamos desarrollando estos artículos y según las necesidades con las que nos iremos encontrando, puedes empezar a diseñar los botones según la siguiente imagen:

No te preocupes de momento por la funcionalidad de los botones, solo colócalos, ponles la imagen y el texto. Poco a poco iremos asignándole las acciones que deberán de hacer.

Si no sabes como poner los botones y añadirles una imagen te recomiendo que visites el artículo donde hablábamos sobre los formularios en FileMaker.

Esto es el principio, para los próximos artículos daremos las pautas para crear la gestión de empleados, tablas, formulario, botones, interacción con el usuario, etc.