Guia de Uso de La Diseno iOS en FileMaker

Gua de uso FileMaker
Mejores prcticas para el diseo de soluciones personalizadas de negocio para iPad & iPhone
Gua de uso FileMaker: Mejores prcticas para el diseo de soluciones personalizadas de negocio para iPad & iPhone Quin se beneficiar de esta gua? ................................................................................................... 3 Qu aprender? ...................................................................................................................................... 3 Paso 1 Planificacin de su solucin ................................................................................................ 5 Cuadro de decisiones de Solucin ..................................................................................................................................... 6 Paso 2 diseo de su Solucin ............................................................................................................ 8 Paso 3 Desarrollo de su Solucin .................................................................................................... 9 Configuracin inicial ............................................................................................................................................................. 11 Defina los lmites de su solucin mvil FileMaker .................................................................................................. 13 Tamaos de la pantalla ........................................................................................................................................................ 14 Cuadrculas ............................................................................................................................................................................... 15 Reglas .......................................................................................................................................................................................... 16 Guas ............................................................................................................................................................................................ 16 Guas dinmicas ...................................................................................................................................................................... 16 Crear su presentacin .......................................................................................................................... 17 Aada una barra de herramientas de estilo iOS ....................................................................................................... 17 Aada una lista de elementos que necesitan reponerse o estn en stock .................................................... 19 Aada botones para cambiar los artculos que se muestran en el portal ..................................................... 28 Aadir un botn para ir al detalle del artculo .......................................................................................................... 29 Aadir el valor total del inventario ................................................................................................................................ 30 Aadir un grfico mostrando las cantidades de artculos para cada categora .......................................... 31 Aada un mapa de la ubicacin actual del usuario ................................................................................................. 33 La presentacin final ............................................................................................................................................................ 35 Qu hacemos con el espacio restante? ........................................................................................................................ 35 Navegacin automtica para su nueva presentacin ............................................................................................. 36 Su propia solucin mvil: comprobacin final ......................................................................................................... 36 Pruebe y despliegue su solucin ..................................................................................................................................... 37 APNDICE: Familiarizndose con las herramientas de diseo de FileMaker ................... 38 Temas .......................................................................................................................................................................................... 38 Tratamiento del texto .......................................................................................................................................................... 39 Rellenos: colores slidos, degradados e imgenes .................................................................................................. 40 Bordes de lnea y formato de esquinas ........................................................................................................................ 42 Estados del objeto .................................................................................................................................................................. 44 Iconos y creatividad .............................................................................................................................................................. 46 Accesibilidad ............................................................................................................................................................................ 46 Recursos ................................................................................................................................................... 47
Gua de uso FileMaker: diseo de soluciones de negocio personalizadas para iPad & iPhone
Gua de uso FileMaker: mejores prcticas para el diseo de soluciones personalizadas de negocio para iPad & iPhone
Esta gua describe las mejores prcticas para el diseo de soluciones personalizadas de negocio para iOS. Estas soluciones se crean utilizando la Plataforma de FileMaker desde donde forma y funcin se unen para ayudarle a crear aplicaciones verdaderamente tiles que a sus usuarios les encantar. La Plataforma de FileMaker consiste en FileMaker Pro para crear soluciones, FileMaker Go la app de cliente gratuita para ejecutarlas en los dispositivos iOS, y el FileMaker Server para distribuir las soluciones y compartir la informacin a travs de los diferentes usuarios.
Quin se beneficiar de esta gua?

Esta gua est diseada para el uso de dos tipos de creadores de soluciones: 1. Aquellos que son nuevos en FileMaker y usarn FileMaker Pro y FileMaker Go por primera vez para crear soluciones personalizadas de negocio. 2. Usuarios existentes de FileMaker Pro que ya disponen de la versin de escritorio de su solucin de base de datos, y estn listos para crear versiones que funcionen en iPad e iPhone.
Qu aprender?
Aprender cmo planificar el diseo y desarrollo de la solucin de negocio personalizada para iOS, que no slo ayudar a los usuarios a realizar sus tareas sino que adems ser muy agradable de usar. Paso 1 Planificacin de la Solucin Comprender cmo son sus usuarios, qu tareas necesitan cumplir, dnde usaran la solucin y en qu dispositivos, son elementos claves para proporcionar las caractersticas y funciones que los usuarios necesitan. Paso 2 Diseo de su Solucin El prximo paso en la creacin de una experiencia realmente agradable para los usuarios es ser muy selectivo en los elementos que va a mostrar en una pantalla ms pequea y presentarlos de forma ptima para agilizar los flujos de trabajo. Paso 3 - Desarrollo de su Solucin Esta seccin proporciona las instrucciones de desarrollo paso a paso que muestran cmo llevar forma y funcin unidas para mantener a sus usuarios y que regresen a la solucin cada da.
Si todo esto le suena bien, vamos a empezar!
Recursos y gua Esta gua es un punto de inicio para usted y/o su equipo de desarrollo. Ms all de esta gua, existen una gran variedad de recursos de aprendizaje, trucos y consejos, mejores prcticas y tcnicas como parte del programa FileMaker TechNet. Conctese con otros desarrolladores a travs de los foros, o mire los vdeos para explorar y descubrir tcnicas ms avanzadas de la plataforma de FileMaker. Adicionalmente, si no est familiarizado con las herramientas de diseo y opciones, por favor consulte en el apndice de esta gua para obtener un tutorial bsico que cubre las herramientas y opciones principales.
Paso 1 Planificacin de su solucin

Entender su audiencia para proporcionar las caractersticas y funciones adecuadas Dedicar tiempo a entender su audiencia y sus necesidades de antemano, es el primer paso en el diseo de una solucin verdaderamente til y que sus usuarios adorarn. Pregunte a su equipo y a usted mismo las siguientes preguntas para planificar las caractersticas y funciones de su solucin: QUIN - Quin la usar? o Identifique los grupos, equipos, roles y nombres de los usuairos que usarn su solucin. QU Cules son los usos principales? o Cules sern las tareas principales que la solucin debera ayudar a cumplir a los usuarios? Diferentes equipos y grupos dentro de su empresa, pueden tener diferentes requisitos en la solucin, as que asegrese de listar qu tareas son las ms importantes y para qu grupos. o Qu tareas necesitarn los usuarios llevar a cabo con rapidez? o Existen tareas que necesitan realizarse en un orden especfico? DNDE Dnde se utilizar la solucin? o Se usar por ejemplo en una oficina, en la calle, de da, de noche, en un coche, cerca del agua, etc? o Qu postura los usuarios tendrn mientra la usan? De pie, sentados, con una mano, con dos manos? Cmo de precisos podrn ser los usuarios mientras la usan? Conocer estos aspectos le ayudar a definir el contraste, zonas tctiles y ms. CON QU Con qu dispositivos se usar y para qu tareas? o Qu tareas necesitan priorizarse para el acceso en el iPhone vs iPad? o Qu orientacin se usar ms a menudo? Apaisado, retrato o ambos? o Qu funciones de gestos, dictado de voz y captura de imagen se usarn en iPhone vs iPad? CUNDO Cundo se necesita implementar su solucin? o Esto le ayudar a empezar y crear un proyecto de solucin para empezar. o El desarrollo de la solucin puede tratarse de un proceso repetitivo, permitindole implementar nuevas versiones de su solucin para sus usuarios a medida que la perfecciona y mejora. Si esto es adecuado para su proyecto, establezca cmo y cundo deberan producirse las actualizaciones con la menor interrupcin posible para los usuarios. OTRAS APPS Qu apps complementarias van a utilizar o les gustara? o Qu apps se usarn junto con la solucin que est creando? o Qu apps les gustara usar a sus usuarios?
Esto le dar una inspiracin adicional para crear soluciones que a los usuarios les encantar.
Cuadro de decisiones de Solucin

Despus de contestar las preguntas anteriores, usted puede deducir decisiones que le ayudarn a definir su solucin. Realizar el seguimiento de stas en un simple cuadro le proporcionar una vista general de la definicin y decisiones de su solucin. He aqu un ejemplo de solucin de estado de inventario dirigido a directivos: Info Quin Qu Directivos de alto nivel Decisin Mantenerlo simple
Nmero de artculos Artculos a reponer Valor de inventario Unidades en stock
Aadir una presentacin con la informacin resumida Uso de un activador de guin OnFirstWindowOpen para determinar el SO y navegar a la presentacin adecuada cuando el usuario abra el archivo. Tema Ocano
Dnde
Entorno de oficina Movimiento de sala a sala Un vistazo del estado del inventario Cuadro con la informacin principal con opciones de profundizar fcilmente 10 das
Qu tareas en iPhone Qu tareas en iPad
Enfatizar la informacin ms importante Creacin de una presentacin para iPad, con una sencilla navegacin Optimizacin de funciones En el guin de acceso, incluir pasos para notificar al usuario si existe una nueva versin disponible. Hacer la experiencia de usuario similar de manera que no resulte irritante cuando el usuario cambia de aplicaciones
Cundo es la implementacin
Otras apps usadas
Calendarios Mapas
Seguir las convenciones iOS para garantizar una experiencia de usuario coherente
Paso 2 diseo de su Solucin

Hacer que realizar las tareas sea una delicia para los usuarios El diseo de las soluciones mviles es mucho ms que hacer una versin ms pequea de la de escritorio para iPhone o iPad. El tamao de la pantalla es importante, pero sern los elementos que muestra y cmo lo hace en esa pequea pantalla lo que har que su solucin sea una verdadera delicia... o un descarte. La experiencia de usuario debe ser fluida en cada dispositivo. He aqu algunas guas a seguir al disear sus soluciones para iOS: Cree presentaciones para cada tipo de dispositivo Crear presentaciones separadas para cada dispositivo garantiza que su solucin sea la mejor que puede haber para cada tipo de dispositivo. En la mayora de casos, no debera usar la misma presentacin para iPhone e iPad, o para el escritorio y el iPad. Uso principal El uso principal de cada presentacin debera ser inmediatamente evidente para el usuario. Sostenga un par de tareas rpidas en la presentacin de inicio, y asegrese que las tareas que se realizan frecuentemente son acesibles de forma instantnea. Simplicidad En vez de crear una nica presentacin compleja, cree varias presentaciones sencillas y claras con una navegacin intuitiva, y permita a los usuarios moverse por ellas segn necesiten. Tctil Los botones deberan ser de un mnimo de 44pt x 44pt para asegurar que se pueden presionar con un dedo. Agrupacin Cuando se muestran los datos agrupados en un formulario, asegrese de unir los campos relacionados y usar un radio de 10 pt en las esquinas de los campos exteriores. Minimizar la escritura En una interfaz tctil, escribir no siempre es el mtodo ptimo de entrada. Cuando sea posible, considere alternativas como valores de autointroduccin de campo, listas de valores, selectores de fecha, o incluso dictado en vez de mostrar el teclado. Utilice valores predeterminados de campo inteligentes, listas de valores, selectores de fecha, o incluso el dictado para aprovechar las capacidades nicas de los dispositivos iOS. Color La interfaz de usuario de su solucin mvil no debera competir con la informacin que est mostrando. Escoja un color base y otro complementario y cree a partir de esta paleta. Evite el uso de diferentes colores y reserve los colores de alta saturacin para los elementos que necesitan una atencin extra, como datos importantes o errores. Una buena forma de empezar es seleccionando uno de los temas incluidos en FileMaker, los cuales usan paletas de colores diseadas para trabajar bien juntas. Degradados Se pueden usar los degradados para dar dimensin a sus presentaciones. Los degradados son los ms adecuados para enfatizar elementos interactivos de una presentacin, como una barra de herramientas o un botn, o para crear una sensacin atmosfrica cuando se aplica como un gran degradado radial para el
fondo. Evite el uso de degradados en elementos que son menos importantes o que estn detrs de otros elementos. Mltiples ventanas evite abrir mltiples ventanas en su solucin. En vez de esto, permita al usuario navegar fcilmente por una presentacin dentro de la misma ventana de manera que les permita llevar a cabo la tarea prevista. Lea las [Apple] Human Interface Guidelines Las iOS Human Interface Guidelines describen los principios que le ayudarn a disear una interfaz de usuario y experiencia de usuario superlativa para su solucin iOS. Leerla le proporcionar la inspiracin y gua par hacer de su solucin una atractiva y potente herramienta para sus usuarios. Estas guas estn disponibles desde el sitio web de Apple.
Paso 3 Desarrollo de su Solucin

Esta seccin proporciona las instrucciones paso a paso para usar FileMaker Pro para desarrollar la interfaz de usuario as como el buen diseo de la solucin mvil FileMaker. Aprender cmo llevar a cabo forma y funcionamiento a la vez para que sus usuarios regresen a su solucin mvil da s y da tambin. El objetivo es crear una presentacin optimizada para iPad con una interfaz de estilo panel de control, tal y cmo se ilustra en las Figuras 1 y 2 en orientacin vertical y apaisada, esto har hincapi en la informacin resumida importante al tiempo que proporciona una forma fcil de descubrir ms informacin.
Figura 1: una presentacin con un panel de control en orientacin vertical
10
Figura 2: una presentacin con un panel de control en formato apaisado
Las siguientes instrucciones utilizan la solucin inicial de Inventario. sta es una de las diferentes soluciones incluidas con FileMaker Pro. De forma alternativa, puede crear la presentacin en su propio archivo, asumiendo que ya dispone de tablas definidas, campos y relaciones y que est listo para crear una interfaz de usuario para su solucin mvil. En este caso, sltese el paso 1 y empiece directamente en el paso 2.
Configuracin inicial
1) Creacin de la solucin inicial de Inventario a. En FileMaker Pro o FileMaker Pro Advanced, seleccione Archivo > Nueva desde Solucin Inicial. b. Seleccione la plantilla de Inventario. c. Seleccione una ubicacin para guardar su solucin inicial y haga clic en Guardar.
11
Figura 3: el dilogo de seleccin de la Solucin inicial
2) Creacin de una Nueva Tabla y Presentacin para el Panel de Control a. Abra Gestionar Base de datos usando los atajos del teclado Cmd+May+D o Ctrl+May+D, o bien seleccione Archivo > Gestionar > Base de datos. b. Cree una nueva tabla llamada Panel de Control. c. Haga clic en Aceptar para cerrar el Cuadro de dilogo Gestionar Base de datos. d. Haga clic en el botnEditar Presentacin, en la barra de herramientas de estado e. Haga clic en el botn Nueva presentacin/informe, en la barra de herramientas de estado. f. Seleccione Panel de control, en el men desplegable Mostrar registros de: g. Nombre la presentacin como Panel de Control iPad h. Seleccione Formulario estndar, como tipo de presentacin.
Figura 4: la primera pantalla del cuadro de dilogo de Nueva presentacin/informe
12
i. j. k. l.
Haga clic en Siguiente. Haga clic en Siguiente, sin especificar campos. Seleccione el tema Apariencia de ro Haga clic en Finalizar
Figura 5: la pantalla de seleccin del tema de la presentacin en el cuadro de dilogo Nueva presentacin/informe
Usted ahora ha creado la presentacin que usar en su panel de control de iPad.
Defina los lmites de su solucin mvil FileMaker

Los lmites son las medidas de ancho y alto que su presentacin puede ocupar en la pantalla. Si va a usar su solucin mvil en mltiples dispositivos, necesitar definir los lmites de cada dispositivo en presentaciones separadas para cada uno. Orientacin del dispositivo y ajuste automtico del tamao Las soluciones deben funcionar bien en las orientaciones vertical y horizontal y la funcionalidad bsica debe estar disponible en ambas orientaciones. Por ejemplo, los elementos visibles en el borde derecho de una presentacin con orientacin apaisada no deberan desaparecer o aparecer cortados cuando se rota la pantalla en orientacin vertical. Una clave para la preservacin del enfoque en la funcionalidad principal es el ajuste automtico del tamao, que permite cambiar el tamao de los objetos y que se deslicen a la posicin adecuada dependiendo de la orientacin. En esta seccin, a medida que aadimos elementos a la presentacin, aplicaremos el ajuste automtico del tamao segn se necesite.
13
Tamaos de la pantalla
FileMaker Pro incluye varios tamaos de la pantalla para que sea ms fcil definir los lmites de la pantalla de su solucin mvil. Cada tamao representa el espacio disponible en su presentacin, lo que se traduce en la pantalla del dispositivo menos el espacio utilizado por iOS y los elementos de la aplicacin FileMaker Go, como las barras de herramientas. Puede activar cualquier combinacin de tamao de pantalla, as como personalizar una. Para este ejercicio, usaremos tanto el tamao de la pantalla de iPad en vertical como la de iPad en horizontal, para ver el espacio de trabajo que funciona en ambas orientaciones.
Para establecer los lmites de la presentacin utilizando los Tamaos de la pantalla: a. Seleccione Vista > Modo Presentacin b. Haga clic en la flecha de tamaos de la pantalla, en la barra de herramientas de Presentacin. c. Seleccione iPad: 768 x 929 (vertical), desde el men desplegable para mostrar el tamao de la pantalla deseado. d. Haga clic de nuevo en el men desplegable y seleccione iPad: 1024 x 673 (horizontal).
Figura 6: lista desplegable de los tamaos de la pantalla
A continuacin, an en Modo Presentacin, vuelva a ajustar el tamao de la parte del cuerpo; de manera que la parte inferior del pie de pgina est a 717pt, justo debajo de la parte inferior del borde del tamao de pantalla iPad (vertical) (ya que un guin desactiva las barras de herramientas cuando se abre el archivo, nuestra presentacin puede tener 44pt ms que el tamao de pantalla). [Si la unidad de medicin actual en la pestaa de posicin son cm o pda, primero cambie las unidades de medida a pt. presionando sobre cualquier de las etiquetas de unidad hasta que se lea pt.]. Puede ajustar la parte del cuerpo haciendo clic en la etiqueta de parte y cambiando el valor de Altura en la pestaa de posicin del Inspector a 641 pt, o bien haciendo clic y arrastrando la lnea entre la parte del cuerpo y el pie de pgina. Usar el Inspector para cambiar la altura (y despus la anchura) es el mtodo ms preciso para establecer el tamao de los objetos y las partes de la presentacin.
14
Despus, cambie el ancho de la presentacin de manera que se alinee exactamente con el borde derecho del tamao de pantalla iPad (horizontal), o bien cambiando el valor de anchura en la pestaa del Inspector a 768 pt, o haciendo clic y arrastrando el borde derecho de la presentacin. Es importante que los bordes de su presentacin estn exactamente alineados con los tamaos de pantalla (o dentro del rea de pantalla disponible con las barras de herramientas desactivadas). Si no se alinean adecuadamente, los usuarios pueden encontrarse con el indeseado desplazamiento de pantalla, y su presentacin no se ajustar de forma correcta al rotar la orientacin de su dispositivo.
Figura 7: el borde derecho de la presentacin se alinea con el borde derecho del tamao de pantalla iPad: 767 x 929 (vertical)
Cuadrculas
Trabajar con una cuadrcula asegura que todo est bien organizado y colocado de forma ptima en la pequea pantalla del dispositivo. La cuadrcula muestra una serie de lneas que no se imprimen y se cruzan vertical y horizontalmente en una presentacin, con lo que puede usarlas para crear, ajustar el tamao, la posicin o alinear los objetos. Para mostrar las cuadrculas, seleccione Vista > Cuadrcula > Mostrar Cuadrcula. Cuando tiene que tomar decisiones sobre cmo alinear y colocar los objetos en su presentacin, use la cuadrcula subyacente para definir su ubicacin. Se puede configurar la presentacin de manera que los objetos se alineen a las lneas de la cuadrcula. Cuando mueve o cambia el tamao de un objeto, ste se alinear a la lnea de la cuadrcula secundaria ms cercana. Cuando aade nuevos objetos, stos se alinearn a la cuadrcula principal ms cerca. Para activar o desactivar el efecto de alinear a, seleccione Vista > Cuadrcula > Alinear a Cuadrcula. La distancia entre las lneas tambin se puede modificar introduciendo los valores del espacio entre la Cuadrcula Principal y los Pasos de la Cuadrcula Secundaria en la zona de Cuadrcula, en la pestaa de Posicin del Inspector. Un truco til es adaptar el espacio de la Cuadrcula Principal a las dimensiones del dispositivo (en este caso, 768 pt) y establecer los Pasos de la Cuadricula Secundaria a un divisor, como 32pt o 64pt. Puede crear fcilmente 2, 3 y 4 diseos de columna, mediante la alineacin de los objetos a las cuadrculas horizontal y vertical como se describe en la seccin Guas, a continuacin.
15
Reglas
Las reglas horizontales y las reglas verticales muestran las guas de lnea para realizar el seguimiento de la posicin del puntero cuando mueve el puntero por la presentacin. Cuando mueve un objeto, como un campo o botn, las guas tambin muestran la rea del objeto, lo que puede ayudar a ver el volumen que ste ocupa. Para mostrar las reglas, seleccione Vista > Reglas.
Guas
Una vez que tenga su espaciado de cuadrcula adecuado para su presentacin, coloque guas en la presentacin para indicar las columnas y las filas y active la opcin de compartir las guas para otras presentaciones. Para aadir guas a su presentacin, haga clic en la gua de la izquierda o arriba y arrstrela a la posicin deseada. Para ajustar la posicin de las guas, haga clic en las guas existentes y arrstrelas. La posicin se mostrar en la regla adecuada, as como en la pestaa de Posicin del Inspector. Las guas se pueden compartir con todas las presentaciones, por lo que puede ser til a la hora de colocar elementos en la misma disposicin para mltiples presentaciones. Las guas tambin se pueden bloquear o eliminar. Tambin puede activar la opcin Alinear a Guas. Debido a que las opciones Alinear a Cuadrcula y Alinear a Gua ejecutan funciones similares, considere las siguientes opciones: Active la opcin Alinear a Guas o Alinear a Cuadrcula, pero no ambas ya que puede ser difcil de discernir si sus elementos se alinean a una gua o a la cuadrcula. Al crear una presentacin, use la cuadrcula para configurar sus guas. Despus, desactive la cuadrcula y use nicamente la opcin Alinear a Guas. Use las guas para indicar las posiciones que se comparten a travs de las diferentes presentaciones y use slo Alinear a Cuadrculas mientras crea su presentacin.
Guas dinmicas
Las guas dinmicas son lneas sobre la marcha que aparecen cuando est moviendo un objeto, dibujando o cambiando su tamao coincidiendo con el espacio, alineacin o tamao de otros objetos de la presentacin. Pueden ayudarle a colocar y ajustar el tamao de objetos en armona con los otros elementos de su presentacin. Para mostrar u ocultar las guas dinmicas, seleccione Vista > Guas Dinmicas. Para ver las guas dinmicas en accin, actvelas, aada ms de un campo u objeto a una presentacin y arrastre uno de los objetos alrededor del otro. El objeto que estamos arrastrando se alinea con el otro y las guas dinmicas aparecen para indicar esta alineacin. A continuacin, cambie el tamao del objeto arrastrando el cuadro de seleccin. Las guas dinmicas aparecern cuando el tamao del objeto coincida con el tamao del otro o cuando uno de los bordes se alinee con el borde del otro objeto.
16
Crear su presentacin
Esta seccin describe los pasos para crear un Panel de Control para el iPad. Como hemos mencionado anteriormente, es importantsimo aplicar las opciones de tamao automtico para cada elemento, de manera que la presentacin funcionar como los usuarios esperan tanto en modo retrato como en modo apaisado. A continuacin, se incluyen las guas para aplicar este ajuste de tamao automtico. 1. Aada una barra de herramientas de estilo iOS En los dispositivos iOS, la barra de herramientas se extiende por lo general horizontalmente en la parte superior de su solucin mvil. Ejemplos de esto los encontramos en las apps de Mail o Calendario del iPad. Para aadir una barra de herramientas de estilo iOS a su solucin, modifique la parte de la cabecera que se aadi automticamente cuando creamos la nueva presentacin. Esta seccin describe cmo modificar esta parte para ajustarse al aspecto y la sensacin de la barra de herramientas que habitualmente encontramos en el iPad. Inspectores Abrir varios inspectores en el modo Presentacin puede facilitar el trabajo con una presentacin. Por ejemplo, puede mostrar la pestaa de Datos de un inspector y la de Apariencia en otro inspector para tener acceso a las opciones en cada pestaa por separado. Para abrir el primer Inspector, use el atajo del teclado Cmd+I o Ctrl+I o seleccione Vista > Inspector. Para abrir los inspectores adicionales, seleccione Vista > Nuevo Inspector. Adicionalmente, puede trabajar con un nico Inspector y utilizar los atajos del teclado (Cmd+1, Cmd+2 o Cmd+3 en Mac o Ctrl+1, Ctrl+2 o Ctrl+3 en Windows) para acceder a cada una de las pestaas cuando las necesite o abrir mltiples inspectores usando el mismo atajo del teclado para alternar entre ellos. a. Ajustar la parte de la cabecera Hay dos formas para ajustar la parte de la cabecera: Haga clic y arrastre el borde inferior de la parte de la cabecera y, vigilando la altura en la rea de Tamao de la pestaa Posicin del Inspector, cambie el tamao a 44 puntos. Haga clic en la etiqueta de la parte de la cabecera, en el lado izquierdo de la presentacin, y cambie la altura en la rea de Tamao de la pestaa Posicin del Inspector. b. Aada un ttulo a la barra de herramientas Hay tambin dos formas de aadir un ttulo a la barra de herramientas: Seleccione la herramienta de Texto en la barra de herramientas de estado. Haga clic en la cabecera y empiece a escribir. Tambin puede seleccionar la herramienta Texto y trazar un rectngulo en la cabecera para empezar a escribir. Si su texto es ms largo que el rectngulo, saltar a ms de una lnea para mantener el ancho del rectngulo.
17
Con la herramienta de Seleccin, simplemente haga clic en la cabecera y empiece a escribir.
Tenga en cuenta que si escribe en una parte diferente, como el cuerpo, el formato por defecto del texto es diferente del de la cabecera. Esta conciencia de donde est escribiendo es una funcin de los temas de FileMaker. Con cualquiera de los mtodos, centre el texto tanto dentro de la caja de texto como en la presentacin: 1. Haga clic fuera de la caja del texto (o presione la tecla Intro de su teclado) para volver a la herramietna de seleccin. Despus, o bien: Use el atajo del teclado Cmd+\ o Ctrl+\ seleccione Formato > Alinear Texto > Centro. O bien haga clic en el botn de Alineacin Centro, en la barra de herramientas de formato. 2. Arrastre el ttulo hacia el centro de la presentacin, dentro de la cabecera. Puede calcular la posicin restando el ancho del ttulo a partir del ancho de la presentacin, dividiendo por dos y colocando el borde izquierdo del ttulo sobre el valor obtenido. Alternativamente, alinee el ttulo con un objeto como la lnea o el rectngulo que ha configurado con el mismo ancho de la presentacin y que ha ubicado en el margen izquierdo de sta. Para centrar el ttulo con el objeto, arrastre el ttulo hasta que aparezca una gua dinmica que indicar el centro del ttulo respecto al centro del objeto, o bien selecione ambos y despus haga clic en el botn Alinear en centros verticales, en la pestaa Posicin del Inspector. Si arrastra el ttulo para alinearlo con el objeto y hay otros objetos en la presentacin, las guas dinmicas aparecern mientras mueve el ttulo. Asegrese de que est alineando el ttulo con el centro del objeto en vez de con los otros objetos. c. Aada un botn a la barra de herramientas La mayora de apps para iOS tienen slo unos pocos botones en la barra de herramientas, como un botn para aadir un nuevo registro y un botn para navegar a una rea diferente u otra vista. Para este panel de control, aada un botn para enviar la lista de inventario por correo electrnico. Puede copiar un botn con este guin de una presentacin existente en la solucin inicial de Inventario (en el grupo de presentacin de Escritorio) o siga los siguientes pasos en su presentacin: 1. Utilice la herramienta Botn de la barra de herramientas de estado, dibjelo en la esquina superior derecha de la cabecera. 2. Configure el botn para ejecutar el guin Enviar inventario por correo electrnico y seleccone Salir desde la lista desplegable de Guin actual. Haga clic en OK para cerrar el cuadro de dilogo para la configuracin del botn. 3. Escriba Enviar Inventario por E-mail en el nombre del botn. 4. Reduzca el tamao de letra a 14 pt y ajuste la posicin del botn, de manera que quepa en la cabereca y se ajuste cmodamente con las guas u objetos adecuados de la presentacin. 5. Para que su botn encaje con el estilo de la barra de herramientas, cambie el color de relleno del degradado, la lnea y el color del texto:
18
a. Seleccione el botn y en la pestaa Apariencia del Inspector, en la seccin Relleno de Grfico, seleccione el punto de degradado de la izquierda y muestrelo o configrelo con el color de la parte superior de la cabecera. (Para obtener una muestra de color, haga clic dentro del punto de degradado y seleccione la herramienta de colores desde la paleta. La heramienta de colores tiene el aspecto de una lupa. A continuacin, mueva su ratn sobre la rea de color que le interese. Al situarse encima del color que desea, haga clic. Esto configura el color seleccionado en la rea en la que est trabajando; en este caso, en los puntos de degradado). b. Seleccione el punto de degradado de la derecha y escoja la muestra de color en la parte inferior de la cabecera. c. Cambie el color de la lnea al color de la parte inferior de la cabecera. d. Cambie la fuente al color de relleno del cuerpo, de manera que sea visible con los nuevos colores del botn. En este punto, su cabecera debera tener un aspecto similar al una barra de herramientas estndar en iOS.
Figura 8: cabecera con un ttulo y un botn
2. Aada una lista de elementos que necesitan reponerse o estn en stock Para que el panel de control tenga sentido y sea til, debera contener informacin que muestre a los usuarios lo que necesitan saber de inmediato, as como herramientas que les ayuden a ejecutar sus tareas ms rpida y fcilmente. Para este panel de control, sera til ver una lista de los elementos que necesitan reponerse o que estn en stock, as como un grfico con una vista general del inventario. Creacin de la tabla y las relaciones Para ver una lista de los elementos que necesitan reponerse o que estn en stock, primero necesitamos aadir un campo a la tabla de Panel de Control y una relacin a la tabla Inventario: 1. Abra Gestionar base de datos mediante el atajo del teclado Cmd+May+D o Ctrl+May+D, o seleccione Archivo > Gestionar > Base de datos. 2. En la pestaa de Campos, cree un campo de texto de almacenamiento global llamado DisponibilidadPanel. 3. En la pestaa de Relaciones, cree una relacin entre la Ocurrencia de Tabla de Inventario y una nueva Ocurrencia de Tabla de Panel de Control:
19
a. Haga clic y arrastre una lnea desde DisponibilidadPanel, en la Ocurrencia de Tabla de Panel de Control, hacia Disponibilidad, en la OT de Inventario, (puede que tenga que desplazarse hacia abajo a travs de la lista de campos en la OT de Inventario para ver el campo Disponibilidad). b. O bien, seleccione la herramienta Crear una relacin en la parte inferior izquierda de la ventana de Gestionar base de datos, seleccione las OTs en cada columna, seleccione el campo Disponibilidad en la columna de Inventario y DisponibilidadPanel en la columna de Panel de control. 4. Cambie la relacin a una unin Cartesiana, que es la X al final de la lista desplegable ente las columnas de tablas. (Si cre la tabla mediante la opcin 3a de arriba, primero haga doble clic sobre la lnea de relacin, para que aparezca el cuadro de dilogo de Edicin de Relacin, y despus seleccione la X como el operador Cartesiano.)
Figura 9: Seleccionando la unin Cartesiana
5. Haga clic en OK para cerrar el cuadro de dilogo de Gestin de Base de datos.
20
Figura 10: Ocurrencias de Tabla (OT) con relaciones en el grfico de relaciones
21
Creacin del portal A continuacin, aada un portal basado en la nueva relacin: 1. En modo Presentacin, aada guas si no lo ha hecho ya y colquelas a 15 pt, 500 pts, 515 pt y 751 pt. Esto, efectivamente, divide la presentacin en 2/3 y 1/3 con un borde de 15 pt a la izquierda y a la derecha y un espacio de 15 pt entre las columnas. 2. Seleccione la herramienta de portal en la barra de herramientas de estado y arrstrela hacia la presentacin para crear un portal. 3. Cuando aparezca el cuadro de dilogo para la configuracin del portal, seleccione Inventario desde el men desplegable Mostrar registros relacionados de:
Figura 11: aadiendo un portal a la presentacin
4. Marque la casilla Mostrar barra de desplazamiento vertical. 5. Haga clic en el botn Especificar, al lado de Filtrar registros del portal. 6. Introduzca este clculo en la rea de clculo especfica: Panel de control::DisponibilidadPanel = Inventario::Disponibilidad (Aadiremos los botones para establecer el valor del Panel de control::DisponibilidadPanel ms tarde en el proceso.)
22
Figura 12: especificando el filtro de clculo
7. Haga clic en Aceptar. 8. En el Nmero de filas, introduzca 7 y haga clic en OK.
Figura 13: el cuadro de dilogo del portal
9. En el cuadro de dilogo Aadir campos al Portal, mueva los siguientes campos a la columna Campos incluidos: Imagen | Contenedor Artculo Unidades disponibles Coste Unitario
23
Figura 14: seleccionando los campos para el portal
10. Haga clic en OK. Ajustando el tamao del portal Su nuevo portal est ahora en su presentacin y seguramente lo deber alinear y ajustar su tamao. En primer lugar, como referencia mantenga un ojo en la pestaa de Posicin del inspector, mueva el portal a 144 pt por la parte superior de la presentacin y 15pt desde la izquierda, alinendolo as con la gua izquierda. O bien, en vez de arrastrar el portal, puede simplemente cambiar los valores de arriba e izquierda desde el inspector. Ahora, ajuste el tamao del portal de manera que el borde derecho se ajuste a la gua de 500 pt, haciendo que el portal tenga un ancho de 485 pt y el borde inferior, ajstelo a 684 pt (haciendo que tenga una altura de 542 pt). De nuevo, puede introducir los valores adecuados en la pestaa de Posicin del Inspector, o bien, haga clic y arrastre en la manija de la esquina del portal para ajustar su tamao. Puede ser difcil ajustar el tamao del portal a las dimensiones exactas con el Alinear a Gua y alinear a Cuadrcula activado arrastrando las manijas, as cambiar los valores desde el Inspector es el mtodo ms exacto.
24
Figura 15: valores de posicin y tamao en el Inspector para el portal
Ajustar los campos Ajuste el tamao del campo Imagen|Contenedor para que tenga un ancho de 70 pt por 70 pt de alto y ajuste tambin el tamao de los otros campos de manera que se ajusten cmodamente dentro del portal (es posible que quiera configurar el campo Artculo con 70 pt de alto si anticipa que los valores requerirn ms espacio). Tambin, seleccione todos los campos y elimine el relleno y la lnea (selecione Ninguno desde el men desplegable de Relleno en la pestaa de Apariencia del Inspector, despus seleccione Ninguno desde el men desplegable de Lnea o bien haga clic en la casilla Todos los bordes debajo del men desplegable de Lnea). El resultado debera ser similar al de la Figura 16:
25
Figura 16: atributos de Relleno y Lnea del campo configurados como Ninguno en el Inspector
Tamao automtico del portal Para que el portal y su contenido se ajusten correctamente cuando rotamos la pantalla del dispositivo, necesita configurar correctamente el tamao automtico. Para hacer esto, seleccione el portal (nicamente el portal, no los campos) y active cada uno de los iconos de candado en la rea de Tamao automtico en la pestaa de Posicin del Inspector (los iconos de candado estn activos cuando aparce un candado, mientras que cuando estn desactivados aparecen en gris dentro de un cuadrado blanco).
Figura 17: configuracin de posicin y tamao automtico del portal en el Inspector
Ahora su portal se expandir y se contraer segn sea necesario cuando el dispositivo rote. Tamao automtico de campos Los campos de dentro del portal se deberan configurar para que se ajusten de forma automtica y de una forma un poco diferente: el campo Imagen|Contenedor se debera bloquear arriba y a la izquierda, mientras que el campo Artculo se debera bloquear tanto
26
por arriba como por la izquierda y derecha. Cuando el portal se expande, el campo Imagen mantendr la posicin, mientras que el campo Artculo se expandir y los campos Unidades y Coste unitario se movern hacia la derecha para acomodarse al ancho del campo Artculo. Para todos los campos del portal, desmarque la opcin Entrada de datos tanto en el modo Visualizar como en el de Bsqueda (en la pestaa Datos del Inspector). Con la entrada de datos desactivada, los usuarios no podrn introducir datos en los campos o editar sus valores cuando toquen una fila. Aadir una fila al portal Ahora vamos a aadir una lnea divisoria entre cada fila, lo que har que la presentacin tenga un aspecto an ms adecuado para iOS. Seleccione la herramienta Lnea desde la barra de herramientas de estado y dibjela a lo largo de la parte inferior de los campos, en la primera fila del portal. Si mantiene la tecla de maysculas presionada mientras dibuja, restringir la lnea a la horizontal. (Mantener la tecla de maysculas presionada mientras dibuja una lnea vertical, la restringir a la vertical.) Mueva y ajuste el tamao de la lnea como necesite para ajustarla dentro y a travs de la fila del portal, por no en la barra de desplazamiento del portal. Use las opciones de Tamao automtico en la pestaa de Posicin del Inspector para activar el ancla de la lnea arriba, a la izquierda y a la derecha. De esta forma, la lnea se expandir con el portal cuando se cambie la orientacin. Aadir ttulos al portal A continuacin, aadimos los ttulos al portal. Haga doble clic en la herramienta de texto de la barra de herrmientas de estado (al hacer doble clic, bloquea la herramienta para un uso indefinido) y haga clic encima del campo Imagen. Escriba Imagen. Haga clic sobre cada uno de los campos y escriba el nombre correspondiente. Despus del ltimo ttulo, haga clic en la herramienta de seleccin de la barra de herramientas de estado para desactivar la herramienta texto (o presione dos veces Enter, no Retorno, en su teclado). Arrastre cada ttulo a su ubicacin final, utilizando las guas dinmicas para alinearlos con los otros ttulos, y posicinelos todos a la altura de 120 pt desde arriba. Cada campo en este tema tiene un margen de 5 pt en todos los lados, as que asegrese de alinear los campos consecuentemente. Los ttulos se deben configurar con un tamao de fuente de 16 pt para ahorrar espacio. Para seleccionar todos los ttulos, arrastre su puntero encima de stos (tenga en cuenta que si toca cualquier otro elemento, lo incluir en la seleccin). Cambie la fuente selecionando un tamao personalizado desde la barra de herramientas de formato o bien desde el men Formato > Tamao. (Muchos tamaos de letra pueden tambin configurarse usando los atajos del teclado, como Cmd+May+< o Ctrl+May+< para reducir el tamao o Cmd+May+> o Ctrl+May+> para aumentarlo). Para proporcionar la misma apariencia de objeto al portal y a sus ttulos, seleccione el rectngulo de esquinas redondeadas desde la barra de herramientas de estado y dibuje un cuadro alrededor de los ttulos. Ajuste el tamao del cuadro para que tenga el mismo ancho que el portal y establezca una altura de 34 pt. Colquelo a 112 pt desde arriba y alneelo a la izquierda del portal, entre las guas. Enve el cuadro al fondo, detrs de los ttulos. A continuacin, copie el estilo del portal haciendo clic en el botn Copiar estilo de objeto desde la pestaa de Apariencia del Inspector y aplquelo al cuadro seleccionndolo y
27
haciendo clic en el botn Copiar Estilo. Los ttulos destacarn ms con un color de relleno aplicado al cuadro. Pruebe un color basado en el color del cuerpo, con un poco menos de saturacin y con un poco ms de brillo. Finalmente, desactive las esquinas inferiores izquierda y derecha del cuadro usando las configuraciones de radio de esquina en la pestaa de Apariencia del Inspector, despus seleccione el portal y desactive las equinas superiores derecha e izquierda. Esquinas Estamos aceptando el valor predeterminado de 5 para las esquinas en estas instrucciones. Pruebe con nmeros ms grandes y pequeos en su propia presentacin para ver cul queda mejor, especialmente con grupos de campos. Los valores mayores funcionan mejor en iPad que en iPhone, por ejemplo. Alinear ttulos y campos Para hacer que el portal sea an ms atractivo a la vista, alinee los campos Unidades y Coste unitario a la derecha y fsicamente alneelos al borde derecho del campo, menos 5 pt por el margen (es el borde de los campos para este tema). En este punto, su presentacin debera tener un aspecto como el de la Figura 18:
Figura 18: los campos y los ttulos alineados los unos con los otros
Datos! Para mostrar los datos en el portal, aada registros a la Tabla de Inventario usando la presentacin Detalles de Producto, en el grupo de presentaciones de Escritorio. Asegrese de rellenar la categora, el artculo y el coste unitario. Adems, aada una imagen a cada registro. En la mayora de registros, aunque no en todos, haga clic en Aadir Transaccin para aadir al menos una entrada con la fecha, el nmero de lote, la descripcin y las cantidades de entrada y salida. De esta manera, habrn registros con el estado de En existencias mientras que habr otros tambin que tendrn el estado Requerido punto de pedido (esto est calculado en el campo Disponibilidad, basado en las Unidades disponibles y los campos de Punto de pedido). Una vez haya creado los registros de inventario, vuelva a su Panel de Control de iPad, para seguir creando la presentacin. 3. Aada botones para cambiar los artculos que se muestran en el portal Ya que el portal tiene un filtro basado en el valor del campo DisponibilidadPanel, los usuarios deben poder establecer el valor de Requerido punto de pedido o bien En existencias,
28
que son los valores que existen en el campo Disponibilidad, en la tabla de inventario. Para hacer que esto sea fcil para los usuarios, cree dos botones encima del portal. El primer botn debera ejecutar el paso de guin Establecer Campo para establecer DisponibilidadPanel a Requerido punto de pedido y debera etiquetarse como Pedido Requerido. De la misma forma, el segundo botn debera ejecutar el paso Establecer campo para configurar el campo DisponibilidadPanel como En existencias y etiquetaramos el botn como En existencias. Para que los botones parezcan que son parte de un slo objeto diseado, haga cada uno de ellos con un ancho que mida exactamente la mitad del portal (en este caso, cada botn debera tener un ancho de 242.5 pt). Alinee el primer botn con la gua izquierda situada a 15 pt por la izquierda, alinee el borde derecho del segundo botn a la gua a 500 pt y ambos botones alinelos con la misma altura, a 59 pt de la parte superior. Esto tiene el efecto de la colocacin de los botones en el espacio encima del portal, alineados uno junto al otro y sin espacios entre ellos. Cambie el tamao de los botones para que tengan un alto de 38 pt. A continuacin, utilizando la configuracin de las esquinas en la pestaa de Apariencia del Inspector, desactive las esquinas superiores e inferiores derechas del primer botn (el botn izquierdo). Despus, seleccione el segundo botn nicamente y deseleccione las esquinas izquierdas superior e inferior. Finalmente, ajuste el tamao automtico para ambos botones para que se bloqueen slo por la parte de arriba. Esto permite que los botones floten a la izquierda y a la derecha, centrados sobre el portal, segn cambie la orientacin. Para aportar un toque de elegancia y un acabado final, configure un Formato condicional para cada botn, si el campo DisponibilidadPanel contiene el valor establecido por el botn. Ya que el texto puede colocarse ms abajo del centro del botn, si hacemos que se ponga en negrita por el formato condicional, podemos optar por opciones que permitan cambiar el color del texto, el tipo de borde o el relleno del fondo. Configurar DisponibilidadPanel al abrir el archivo Si le gustara que los usuarios al abrir el panel vieran los artculos que deben pedirse o los que estn en existencias, aada un paso al guin que ejecute OnFirstWindowOpen para establecer el campo DisponibilidadPanel con el valor adecuado. 4. Aadir un botn para ir al detalle del artculo Para ayudar a los usuarios a navegar por los detalles de cada artculo del portal, aada un botn para ir al registro relacionado: 1. Seleccione la herramienta de botn desde la barra de herramientas de estado, para dibujar un botn sobre la primer fila del portal (en este punto no se preocupe por el tamao). 2. En el cuadro de dilogo de configuracin del botn, seleccione Ir a registro relacionado. 3. Haga clic en Especificar y seleccione Inventario desde el men desplegable. 4. En el men desplegable de Mostrar registro utilizando la presentacin, seleccione Detalles de Producto | iPad desde el dilogo Especificar presentacin.
29
5. 6. 7. 8. 9.
Haga clic en OK para cerrar el cuadro de dilogo Especificar presentacin. Marque la opcin contigua Mostrar slo registros relacionados. Haga clic en OK para cerrar el cuadro de dilogo Opciones de ir a registro relacionado Haga clic en OK para cerrar el cuadro de dilogo Configuracin del botn. Haga clic fuera del botn para consignar sin aadir un ttulo.
En este punto, el botn debe tapar la mayora de los campos. Entonces, debe situarlo detrs de los campos y formatearlo de manera que no difiera con el resto de la presentacin. Para mover el botn hacia detrs de los campos, primero cambie el tamao del botn, de manera que rellene el portal, cubriendo completamente los campos pero sin sobreponerse a la barra de desplazamiento. A continuacin, seleccione Disposicin > Mover al fondo. Para hacer que el botn se mezcle con el fondo, quite el relleno, la lnea y las esquinas del botn en la pestaa Apariencia del Inspector. Tambin bloquee el botn por arriba, izquierda y derecha, de manera que se ajuste junto con el portal ante los cambios de orientacin. Recuerde que ha desemarcado la opcin de entrada de datos en el modo visualizacin y bsqueda para los campos del portal, por lo que los usuarios no podrn introducir datos en los campos al tocar la fila. En vez de esto, activarn el botn. Ya que el botn tiene el estado pulsado aplicado de forma automtica, el botn ahora aparecer en toda la fila del portal detrs de los campos, cuando el usuario toca la fila (y por lo tanto, el botn). Tenga en cuenta que deber aadir un botn a la presentacin Detalle de producto | iPad, para volver a la presentacin Panel de control. Para asegurarse de que los usuarios estn viendo la informacin actual en el panel, cree un nuevo guin llamado Refrescar con un nico paso de guin: Refrescar Ventana [Vaciar resultados de memoria cach juntos]. En la presentacin del iPad Panel de control de inventario, active los activadores de guion OnRecordLoad y OnLayoutEnter, para que ejecuten este guin de Refrescar. La accin Refrescar Ventana tiene implicaciones para el visualizador aadido en el siguiente paso 7. Vea la seccin para ms detalles. 5. Aadir el valor total del inventario Para mostrar a los usuarios el valor total del inventario, cree un campo de clculo en la tabla Panel de control con este clculo: Sum(Inventario::Valor existencias) Aada el nuevo campo a la presentacin, a la derecha del portal, con el ttulo Valor total del inventario. En la pestaa de Datos del Inspector, en la seccin de Formato de datos, establezca el formato moneda y aplique las opciones adecuadas a sus requisitos (por ejemplo, un nmero fijo de decimales y con el separador de miles). Ajuste el tamao del campo para que encaje entre las guas que forman la columna derecha de la presentacin, con el borde izquierdo a 515 pt y el borde derecho a 752 pt (esto hace que el ancho del campo sea de 237 pt). Alinee la parte superior del campo con el portal a 144 pt y alinee el ttulo con los ttulos del portal. A continuacin, formatee el campo y el ttulo para que est alineado al centro, alneelos al centro uno con otro y bloquee ambos por arriba y por la derecha nicamente. Esto mantendr el ttulo y el campo a la derecha del
30
portal cuando la orientacin cambie. Finalmente, desmarque las opciones para permitir la entrada de datos en el campo, tanto en el modo visualizar como en el de presentacin, en la pestaa de Datos del Inspector. Para que el campo y su ttulo coincidan con el aspecto del portal, duplique el cuadro ubicado detrs de los ttulos del portal y ajuste su tamao para que coincida con el ancho del campo Valor total. Alinee el cuadro entre las guas, centrado con el texto y el campo, as como en la misma posicin superior que el cuadro original (122 pt). Enve el cuadro al fondo, de manera que est detrs del ttulo y active el candado por la parte de arriba y la derecha.
6. Aadir un grfico mostrando las cantidades de artculos para cada categora Una vista rpida del inventario ayudar a los usuarios a entender la imagen completa de su sistema. Este grfico se basar en un nuevo campo de sumario en el Inventario, configurado para el valor total de unidades disponibles. Cree el campo en la tabla Inventario antes de aadir el grfico a la presentacin (el campo lo hemos llamado UnidadesDisponibles en la lista de a continuacin). Para aadir el grfico, en modo Presentacin, seleccione la herramienta Grfico desde la barra de herramientas de estado y arrastre un rectngulo en la parte derecha del portal. En el cuadro de configuracin del grfico, especifique el formato de ste como se describe a continuacin: Ttulo del grfico: Cantidad por categora Tipo de grfico: Barras Ttulo del eje X: Cantidad Datos del eje X, especificar clculo: GetSummary(Inventario::sUnidadesDisponibles; Inventario::Categoria) Ttulo del eje Y: Categora Datos del eje Y, especificar nombre de campo : Inventario::Categoria Mostrar los puntos de datos en el grfico
Cambie las reas de Estilos y cambie el Tamao relativo del texto a -1. Vaya a la rea de Fuente de datos y seleccione los siguientes: Datos del grfico: Registros relacionados Tabla relacionada: Inventario Especifique el tipo de ordenacin de los registros relacionados: por Categora En la visualizacin del grfico cuando se ordena: Grupos de registros resumidos
31
Figura 19: las tres secciones del cuadro de dilogo Configuracin del grfico
Haga clic en Hecho para cerrar el cuadro de dilogo Configuracin del grfico. Ahora, ajuste el tamao del grfico para que encaje con la columna creada en su presentacin con las guas. El borde izquierdo debe estar alineado con la gua 515 pt y el borde derecho debe estar alineado con la gua de 752 pt. La altura necesaria depender en parte del nmero de categoras asignadas a los artculos de inventario y, parcialmente, a la cantidad de espacio disponible. Por ahora, hagamos el grfico con 229 pt de alto. Alneelo al borde superior a 192 pt (esto crea un hueco de 15 pt entre la parte inferior del campo de inventario total y la parte superio del grfico, reflejando el hueco entre los botones y el cuadro de ttulos encima del portal).
32
7. Aada un mapa de la ubicacin actual del usuario Para proporcionar todava ms informacin al usuario y aprovechar la funcin de localizacin de FileMaker Go, aada un visualizador web que apunte a la ubicacin actual del usuario en un mapa. Para aadir un visualizador web, seleccione la herramienta Visualizador Web desde la barra de herramientas de estado y dibuje un rectngulo en la parte inferior de la segunda columna. En el cuadro de dilogo del Visualizador Web, en la Direccin Web especifique este clculo: Let(p = Get(SystemPlatform); If(p = 3; "https://maps.google.com/maps?q=" & Substitute(Location(10; 5); " "; ""); "data:text/html, <body>Esta usando un " & If(p > 0; "Mac"; " ordenador Windows ") & "... Abra este archivo en un dispositivo iOS para ver el mapa de su ubicacin. </body>" ) ) El clculo evaluar en iOS la URL para un mapa de Google incluyendo la latitud y longitud del dispositivo, con una precisin de 10 metros. Tenga en cuenta que las funciones de Location y LocationValues no se calcularn en FileMaker Pro en un ordenador de escritorio o porttil, por eso el resto del clculo muestra un mensaje en vez de llamar a la URL que no realizara un clculo correctamente. Haga clic en OK para cerrar el cuadro de dilogo del visualizador web y ajustar el tamao con el mismo ancho que el grfico (237 pt) y 217 pt de alto, y alneelo al borde izquierdo a 515 pt y al superior a 468 pt. Bloquee el visualizador web en la parte de arriba y a la derecha, de manera que se ajuste al borde derecho, junto con el grfico, cuando la orientacin cambie. Para hacer coincidir el aspecto del portal con el del campo Valor Total, duplique el ttulo y el cuadro de encima del campo Valor Total y sitelo a 436 pt desde arriba (agrpelos juntos para ver el valor superior, seguidamente desagrpelos para continuar trabajando). De nuevo, esto deja un espacio de 15 pt entre el grfico y el pequeo cuadro, reflejando los otros espacios verticales y horizontales. Cambie el ttulo por Su Ubicacin. Es un mapa y los usuarios querrn hacer clic en l y querrn ver una versin ms grande. El mapa de Google incluye botones para gestionar el mapa, de manera que sera contraproducente aadir un botn directamente en el mapa. En vez de esto, convierta el cuadro del ttulo, situado encima del mapa, en un botn haciendo clic con el botn derecho encima del cuadro y seleccionando la opcin Configuracin del botn Establezca la ejecucin del paso de guin Abrir URL, sin dilogo, especificando la siguiente URL: Let( L = Substitute(Location(10; 5); " "; ""); If(Get(SystemVersion) 6; "maps://?ll="; "https://maps.google.com/maps?q=") & L )
33
Este clculo empieza con la funcin Let para declarar la variable L (para la localizacin), con el resultado de la funcin Location. A continuacin, comprueba la versin del sistema para vincularse a Apple Maps en iOS 6 o superior o a Google Maps en versiones anteriores a la 6 de iOS. Si le gustara que el mapa resultante pudiera tener zoom a un nivel diferente al que viene por defecto (el cual es 15 tanto en Apple Maps como en Google Maps), aada esto al final de la URL: & &z=19 //para un mayor zoom (cuanto ms alto es el nmero, mayor es el zoom) o & &z=10 //para un menor zoom Para indicar a los usuarios que pueden hacer clic sobre la pequea barra para ver el mapa ms grande, aada un rectngulo de 30 pt de ancho y 30 pt de alto, colquelo a 438 pt desde arriba y a 720 pt desde la izquierda; de manera que queden 2 pt dentro de los bordes de arriba y derecha desde el pequeo cuadro de ttulo. Aplique un relleno de imagen al rectngulo en la pestaa de Apariencia del Inspector y seleccione una imagen de un mapa (si usted no tiene ninguna a mano, puede encontrar imgenes de mapas en la red, o puede capturar un trozo de mapa de la ubicacin de su empresa). Escoja Seleccionar, desde el men desplegable debajo de la vista previa de la imagen. Bloquee el rectngulo por la parte superior y derecha de manera que se mueva con el cuadro del ttulo. Aunque puede adjuntar el botn al rectngulo, ste es ms pequeo que el tamao recomendable de 44 pt por 44 pt para botones tctiles. La imagen del mapa invita a los usuarios a apretar sobre ella y con el botn adjunto a la barra del ttulo, activarn el guin incluso si tocan la imagen indirectamente. Un ltimo apunte sobre la ejecucin: debido a que el visualizador web est usando una URL calculada basndose en la funcin Location, ste se refrescar en muchas ocasiones cuando se accede a la presentacin o se refresca, cuando el dispositivo iOS se reorienta, cuando los usuarios vuelven a la app, si se refresca manualmente la pantalla, etc. Si prefiere que el visualizador se refresque menos frecuentemente, utilice el guin para configurar el visualizador web a una URL con la ubicacin actual cuando el mapa debera actualizarse. Puede incluir el guin refrescar que es llamado por los activadores de guin de la presentacin o en un guin adjunto al botn que los usuarios tocan para actualizar el mapa o en un guin programado con un paso de guin de temporizador.
34
8. La presentacin final La presentacin final debera tener un aspecto parecido al de la Figura 20:
Figura 20: la presentacin final
9. Qu hacemos con el espacio restante? Recuerde que los elementos de esta presentacin estn configurados para ajustarse segn la orientacin. En vertical, ahora hay suficiente espacio debajo del visualizador web para mostrar otro pequeo elemento. Podra aadir: Un grfico mostrando la actividad de las ventas (basada en las transacciones de existencias, las unidades de salida) para las horas previas, das o semanas. Un portal con la tabla de transacciones de existencias, para ver los registros aadidos ms recientemente. Un visualizador web mostrando el grfico de precios de las acciones de la compaa.
35
Un panel de pestaas con notas de los clientes, citas y la lista de as tareas (lo que requerir crear tablas y otro esquema).
Si desea que aparezca un elemento en este espacio, ajuste el tamao de ste para que no sea ms ancho que el visualizador web y el ttulo, y no ms alto que el espacio entre la parte inferior del tamao de la pantalla del iPad (horizontal) y el tamao del iPad (vertical). De hecho, debera ser 30 pt ms pequeo que ese espacio para mantener los 15pt de espacio arriba y abajo. Bloquee el elemento arriba y a la derecha, y ubquelo detrs del visualizador web y del ttulo, de manera que est totalmente oculto, con la parte inferior del elemento alineada a la parte inferior del visualizador web. Cuando el iPad est en orientacin vertical, el elemento se desplazar hacia abajo y ser visible debajo del mapa. En orientacin apaisada, estar escondido detrs del mapa.
10. Navegacin automtica para su nueva presentacin En la solucin inicial de Inventario, el archivo est configurado para ejecutar un guin llamado Activar| On First Window Open cuando el usuario abre el archivo. Este guin incluye una comprobacin de la plataforma y segn sea, navega hacia la presentacin adecuada. Ahora que ha creado un Panel de Control para los usuarios de iPad, modifique este guin cambiando el primer paso de guin Ir a la Presentacin, despus de If [PatternCount ( Get ( ApplicationVersion ) ; iPad )] para que vaya a la nueva presentacin. Adems, como hemos sugerido anteriormente, aada un paso de guin para establecer el campo Panel de control::DisponiblidadPanel con o bien Pedido requerido o En Existencias, dependiendo de los productos que le gustara que los usuarios vean al acceder por primera vez a la presentacin del Panel de Control en el iPad. Si est usando un archivo diferente, asegrese de utilizar el activador de guin OnFirstWindowOpen, en Archivo > Opciones de Archivo> Activadores de guin, y configrelo para que compruebe la plataforma, navegue a la presentacin adecuada y establezca el campo.

Su propia solucin mvil: comprobacin final Una vez finalizado el diseo de su propia solucin, considere realizar una comprobacin final del diseo profesional y plantee las siguientes preguntas: Su diseo es equilibrado? o Hay un lado de la pgina ms denso o ms oscuro que el otro? Qu hay de la parte superior e inferior? Cambia de presentacin en presentacin? Si es as, esto ayudar al usuario al entendimiento de la pgina o le distraer? o Ha reducido el nmero de colores a aquellos que nicamente soportan su informacin y/o marca? o Ha utilizado cuadros y lneas con moderacin? Se podra sustituir alguna por tan slo un espacio? Tiene una jerarqua visual clara? o Entrecierre sus ojos. Dnde van sus ojos primero? Qu elementos destacan en la pgina? Son esos elementos los ms importantes para las tareas principales que el usuario realiza?
36
Existe una ruta clara que el ojo siga a travs de la pgina? Est en lnea esta ruta con el flujo de trabajo del usuario? La navegacin es consistente y fcil de entender? o Ha utilizado elementos similares, de la misma forma, dentro y a travs de las presentaciones? o Sus iconos y elementos de la interfaz de usuario dan sentido a otro software con el que sus usuarios se han encontrado? Los iconos y el lenguaje en la interfaz de usuario, son claros, consistentes y sin errores gramaticales? o
Pruebe y despliegue su solucin Cuando es el momento de probar su solucin, es tambin tiempo de pensar cmo implementarla. Va a alojarse en FileMaker Server para que los usuarios accedan remotamente? Es una app independiente que se implantar en cada dispositivo del usuario? Si es as, cmo los usuarios obtendrn la copia va un vnculo en una pgina web, en un correo electrnico, desde un servidor? Para obtener una gua sobre el desarrollo, consute la gua FileMaker How To Guide iOS Deployment Simplified, disponible en el sitio de FileMaker TechNet.
37
APNDICE: Familiarizndose con las herramientas de diseo de FileMaker

Si an no est familiarizado con FileMaker Pro, es importante entender las bases de cmo utilizar las herramientas de diseo de FileMaker y las opciones disponibles para usted. Las siguientes herramientas de diseo y opciones estn disponibles en FileMaker Pro 12 y cada una de ellas, utilizando como ejemplo la solucin inicial de Gestin de contenido: o Temas o Tratamiento del texto o Rellenos: fondos de color slidos, degradados e imgenes o Bordes de lneas y formato de esquinas o Estado de objetos o Iconos y creatividad o Opciones de accesibilidad
Temas
FileMaker Pro 12 viene con varios temas diseados especfficamente para utilizarlos en iPhone e iPad. Se llaman temas Apariencia e incluyen fondos coordinados, bordes, fuentes, sombras y mucho ms. Vamos a ver cmo los diferentes temas pueden afectar a la apariencia de una app:
1. Ejecute FileMaker Pro 12. 2. Seleccione Archivo > Nueva desde Solucin Inicial 3. Seleccione Gestin de contenido. 4. Seleccione Vista > Modo Presentacin.
5. Seleccione Presentaciones > Cambiar tema
6. Seleccione varios temas de la lista de temas de presentacin, para ver una vista previa
de cada tema. 7. Seleccione cualquiera de los temas que empiezan por Apariencia, de manera que puede ver los temas que estn especficamente diseados para el uso en apps de iPhone e iPad. Tome nota de aquellos que ms le gustan, de manera que los pueda aplicar al crear su app en el paso 4.
38
Figura 21: el tema nice es el tema con el que la solucin inicial de Gestin de contenido viene.
Figura 22: al seleccionar Apariencia gris claro, se aplica el tema especficamente diseado para utilizarse en iPhone e iPad.
Tratamiento del texto

Puede seleccionar una gran variedad de opciones para fuentes, tamaos, estilos, alineacin, orientacin y color del texto en su solucin. Para probar diferentes tratamientos del texto:
1. Seleccione Vista > Modo Presentacin. 2. Seleccione Vista > Ir a la presentacin > iPad > Detalles del contenido | iPad.
3. Haga clic en el elemento de texto <<Ttulo>>, para seleccionarlo.
4. Seleccione Formato > Fuente y elija cualquier otra fuente que le guste.
Las Soluciones iniciales de FileMaker normalmente utilizan Helvetica Neue, una fuente que se muestra bien en iPad e iPhone. Una breve lista de fuentes que funcionan bien a travs de los dispositivos y que debera considerar es la siguiente: o Helvetica Neue o Verdana o Gils Sans o Times New Roman o Georgia o Courier New
5. Seleccione Formato > Tamao, Estilo, Alinear Texto, Interlineado, Orientacin, Color
de Texto para ver todos los diferentes atributos del texto con los que puede trabajar.
39
Figura 23: cambiando el tamao del texto
Rellenos: colores slidos, degradados e imgenes

Los rellenos pueden consistir en colores de fondo slidos, degradados e imgenes y pueden aplicarse al texto, los botones, campos, objetos y mucho ms. Siga los siguientes pasos para experimentar con los rellenos:
1. Haga clic en el elemento de texto <<Ttulo>>, para seleccionarlo. 2. Seleccione Vista > Inspector (o utilice el atajo del teclado Cmd+I o Ctrl+I), si todava no
ve el Inspector en su pantalla.
3. Haga clic en la pestaa Apariencia.

4. Haga clic en el men desplegable de Relleno, en la seccin Grfico del Inspector.
40
Figura 24: aadiendo un color de relleno
5. Seleccione un relleno de Color Slido para cambiar el fondo a un color slido. Haga clic
en el selector de colores, en el cuadro de debajo, para seleccionar otro color que le guste.
6. Seleccione Relleno Degradado, de manera que pueda ver el efecto y ajustarlo con el
deslizador y otras opciones para ver la apariencia del degradado. Por ejemplo, vea los botones y las partes de la cabecera del tema nice y Gris claro, que estn creados para obtener diferentes efectos. Use mayores contrastes entre los puntos de color en la barra de degradado para aadir profundidad a las barras de herramientas y botones. No obstante, para fondos, en el objeto de la presentacin misma, use contrastes mnimos entre los puntos de color de un degradado lineal o radial con mucha distancia entre los puntos de inicio y final.
41
Bordes de lnea y formato de esquinas

Se pueden aplicar diferentes colores, anchos y patrones a los bordes de la lnea que rodean el texto, los botones, campos, objetos y mucho ms. Puede tambin cambiar el radio de las esquinas de un campo. Siga los siguientes pasos para cambiar los bordes de la lnea y el formato de las esquinas:
1. Haga clic en el campo Tipo para seleccionarlo. 2. Abra el Inspector, si an no lo tiene abierto en la pantalla. 3. Haga clic en la pestaa Apariencia.
4. Haga clic en el men desplegable de Lnea, en la seccin Grfico del Inspector.
Figura 25: cambiando los bordes
5. Seleccione Ninguno, Continua, Discontina y De puntos para ver los diferentes efectos. 6. Cambie el tamao de puntos de la lnea para hacerla ms o menos gruesa. 7. Haga clic en el cuadro de seleccin de Color para escoger cualquier color de la lnea.
42
8. Haga clic en la fila de iconos ubicados justo debajo para ver cmo el borde de la lnea
puede rodear completamente el campo o slo aparecer en el borde izquierdo, superior, derecho o inferior.
9. Para cambiar el Radio de esquina, cambie el valor del radio de 5 a 20 para ver cmo un
valor ms grande hace que la esquina sea ms redonda. Seleccione una variedad de valores para ver los diferentes efectos.
Figura 26: cambiando las esquinas
43
Estados del objeto

Para proporcionar a los usuarios informacin visual sobre las acciones a realizar en el modo Visualizacin, los objetos pueden formatearse para mostrar diferentes atributos. Por ejemplo, puede formatear un botn para mostrar diferentes colores de relleno (u otros atributos, como un borde distinto) cuando el usuario lo presiona. Para ver un Estado de objeto:
1. Haga clic en el texto Lista de contenidos, en la parte superior izquierda de la

presentacin.
2. Abra el Inspector, si an no lo tiene abierto en la pantalla. 3. Haga clic en la pestaa Apariencia. 4. Haga clic en Estado Normal y seleccione Activable. 5. Seleccione un Relleno de Color slido y seleccione cualquier color que le guste. De
forma alternativa, puede cambiar el brillo del color al 25%, incrementar el ancho del borde de 1 a 2 puntos y hacer que el color del borde sea ms claro...
Figura 27: modificando el estado de un objeto
44
Figura 28: el botn muestra la configuracin del estado activable
Esto har que el texto de la Lista de contenidos cambie cuando el usuario pase el ratn por encima en modo Visualizacin.
6. Seleccione cada una de las diferentes opciones en el men desplegable y experimente

con las diferentes opciones de estado para cada una: a. Estado normal: el objeto est disponible para el usuario, pero actualmente no est seleccionado. b. Estado enfocado: se ha activado el objeto. c. Estado activable: el usuario pone el puntero del ratn encima del objeto (slo para Mac y Windows, no en iOS) d. Estado pulsado: el objeto se ha pulsado o tocado pero an no se ha soltado.
45
Iconos y creatividad
Los iconos pueden ahorrarle espacio y funcionar a travs de mltiples lenguajes. Una bsqueda de imgenes en Internet le mostrar ejemplos de iconos que representan una accin en particular. Adems de los iconos, el logotipo de la empresa o escuela har la solucin mvil ms personal y corporativa para los usuarios. Dicho esto, siempre que sea posible, use los iconos e imgenes que son consistentes con las expectativas del uso principal de la app en el dispositivo. Deberan apoyar las tareas haciendo que stas sean ms fciles de realizar y nunca deberan restar valor o distraer del objetivo de la aplicacin. Tambin, tome nota que hay algunos smbolos comunes que se pueden malinterpretar en segn que contextos. Para evitar esto, pruebe sus iconos con una audiencia diversa. Los iconos para iOS normalmente tienen un fuente de luz que se encuentra por encima del centro. Por ejemplo los iconos de las app FileMaker Go para iPad e iPhone y el icono iOs de la app El tiempo:
Figura 29: iconos de iOS con la fuente de luz en la parte superior
Si est creando sus propios iconos y grficos, considere aplicar efectos para emular la fuente de luz. Con la pantalla retina, toda su creatividad e imgenes deben tener una resolucin suficientemente alta para que no quede borroso. Sin embargo, tenga en mente que cuanto ms grande es la imagen, ms tiempo de carga necesita. En general, use imgenes con 144DPI. Coloque los iconos en una ubicacin consistente a travs de las presentaciones. Los usuarios esperan tener en relativamente el mismo sitio los elementos y objetos de accin de la presentacin aunque cambien de presentaciones. Incluso si dos presentaciones tienen propsitos e informacin totalmente diferentes, una ubicacin consitente en botones de navegacin, iconos, etc. les ayudar a entender lo que estn viendo, as como utilizar la solucin de forma muy efectiva. Consulte diferentes Soluciones iniciales para ver varios ejemplos sobre el posicionamiento de los iconos, formatos y tamaos especficos para cada dispositivo. Adicionalmente, Apple proporciona las custom icon and image creation guidelines in its iOS Developer Library.
Accesibilidad
Para la mayora de usuarios, bloquee el nivel de zoom al 100% ya que lo ha configurado todo para funcionar de forma adecuada en el dispositivo. Los usuarios con deficiencias visuales
46
pueden ser capaces de trabajar con la aplicacin a un nivel superior de zoom y bloquearlo y desbloquearlo, mediante el uso del paso de guin Establecer Nivel de Ampliacin y sus opciones. Puede resultar til incluir una tabla de usuarios en su sistema y llevar el seguimiento si la opcin de zoom est activada o no para cada uno. Tan pronto como el usuario accede, un guin debera comparar su nombre de usuario con los nombres guardados en la tabla de usuarios y el guin debera entonces establecer el nivel de zoom y las opciones en concordancia con los ajustes guardados para ese usuario. De forma alternativa, la primera presentacin que los usuarios encuentran al acceder podra contener un botn para que los usuarios lo toquen o hagan clic, si prefieren trabajar con zoom. Por supuesto, este botn debera formatearse de manera que sea til para los usuarios con deficiencias visuales.
Recursos
Las lecturas recomendadas que han sido tiles para elaborar este artculo incluyen:
iOS Human Interface Guidelines Mobile First by Luke Wroblewski
Tambin estn disponibles para descargar otras Guas de uso FileMaker adicionales que cubren una gran variedad de temas, incluido el desarrollo de apps, la seguridad en equipos los de trabajo y la sincronizacin. Puede encontrar ests guas en www.filemaker.com/es. Tambin dispone de ms temas de ayuda, incluidos dentro de la aplicacin FileMaker Pro, que le ayudarn con los siguientes objetos de presentacin: Seleccionar objetos Uso del Inspector para formatear objetos Copiar, duplicar y eliminar objetos Copiar los atributos del estilo entre objetos y partes de la presentacin Mover objetos en una presentacin Ajustar el tamao de los objetos Establecer las opciones de Tamao automtico para los objetos de la presentacin Establecer e relleno, los estilos de la lnea y los bordes en los objetos Especificar el estado de un objeto Rellenar un objeto o una parte de la presentacin con un degradado de colores. Rellenar un objeto o una parte de la presentacin con una imagen Formatear grficos en una presentacin Proteger los objetos desde cambios Nombrar los objetos Definir los formatos condicionales de los objetos de la presentacin
47
2012 FileMaker, Inc. All rights reserved. FileMaker is a trademark of FileMaker, Inc., registered in the U.S. and other countries. The file folder logo is a trademark of FileMaker, Inc. All other trademarks are the property of their respective owners. Product specifications and availability subject to change without notice. THIS DOCUMENT IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, AND FILEMAKER, INC., DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTIBILITY OR FITNESS FOR A PARTICULAR PURPOSE, OR THE WARRANTY OF NON-INFRINGEMENT. IN NO EVENT SHALL FILEMAKER, INC., OR ITS SUPPLIERS BE LIABLE FOR ANY DAMAGES WHATSOEVER INCLUDING DIRECT, INDIRECT, INCIDENTAL, CONSEQUENTIAL, LOSS OF BUSINESS PROFITS, PUNITIVE OR SPECIAL DAMAGES, EVEN IF FILEMAKER, INC., OR ITS SUPPLIERS HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY. FILEMAKER MAY MAKE CHANGES TO THIS DOCUMENT AT ANY TIME WITHOUT NOTICE. THIS DOCUMENT MAY BE OUT OF DATE AND FILEMAKER MAKES NO COMMITMENT TO UPDATE THIS INFORMATION.
48

Guia de Uso de La Diseno iOS en FileMaker

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Guia de Uso de La Diseno iOS en FileMaker

Încărcat de

Drepturi de autor:

Formate disponibile

Gua de uso FileMaker

Quin se beneficiar de esta gua?

Si todo esto le suena bien, vamos a empezar!

Paso 1 Planificacin de su solucin

Cuadro de decisiones de Solucin

Nmero de artculos Artculos a reponer Valor de inventario Unidades en stock

Qu tareas en iPhone Qu tareas en iPad

Otras apps usadas

Paso 2 diseo de su Solucin

Paso 3 Desarrollo de su Solucin

Figura 1: una presentacin con un panel de control en orientacin vertical

Figura 2: una presentacin con un panel de control en formato apaisado

Figura 3: el dilogo de seleccin de la Solucin inicial

Figura 4: la primera pantalla del cuadro de dilogo de Nueva presentacin/informe

Usted ahora ha creado la presentacin que usar en su panel de control de iPad.

Defina los lmites de su solucin mvil FileMaker

Figura 6: lista desplegable de los tamaos de la pantalla

Con la herramienta de Seleccin, simplemente haga clic en la cabecera y empiece a escribir.

Figura 8: cabecera con un ttulo y un botn

Figura 9: Seleccionando la unin Cartesiana

5. Haga clic en OK para cerrar el cuadro de dilogo de Gestin de Base de datos.

Figura 10: Ocurrencias de Tabla (OT) con relaciones en el grfico de relaciones

Figura 11: aadiendo un portal a la presentacin

Figura 12: especificando el filtro de clculo

7. Haga clic en Aceptar. 8. En el Nmero de filas, introduzca 7 y haga clic en OK.

Figura 13: el cuadro de dilogo del portal

Figura 14: seleccionando los campos para el portal

Figura 15: valores de posicin y tamao en el Inspector para el portal

Figura 17: configuracin de posicin y tamao automtico del portal en el Inspector

Figura 20: la presentacin final

APNDICE: Familiarizndose con las herramientas de diseo de FileMaker

Tratamiento del texto

Figura 23: cambiando el tamao del texto

Rellenos: colores slidos, degradados e imgenes

3. Haga clic en la pestaa Apariencia.

Figura 24: aadiendo un color de relleno

Bordes de lnea y formato de esquinas

Figura 25: cambiando los bordes

Figura 26: cambiando las esquinas

Estados del objeto

1. Haga clic en el texto Lista de contenidos, en la parte superior izquierda de la

Figura 27: modificando el estado de un objeto

Figura 28: el botn muestra la configuracin del estado activable

6. Seleccione cada una de las diferentes opciones en el men desplegable y experimente

Figura 29: iconos de iOS con la fuente de luz en la parte superior

iOS Human Interface Guidelines Mobile First by Luke Wroblewski

S-ar putea să vă placă și