Color Asset Creator

La gestión de colores en proyectos para iOS, iPadOS, macOS o visionOS ha evolucionado mucho en los últimos años. Apple introdujo los color assets como parte de los catálogos de recursos de Xcode, ofreciendo una forma estructurada y escalable de definir la paleta de una aplicación. Sin embargo, la interfaz gráfica actual de Xcode para crear y editar estos recursos presenta graves problemas de accesibilidad para desarrolladores ciegos.

La gestión de colores desde la interfaz gráfica de XCode implica interactuar con controles visuales complejos, selectores de color, paneles flotantes y zonas de arrastre que no siempre exponen correctamente su información a las APIs de accesibilidad. Esto provoca dificultades a la hora de crear o modificar conjuntos de colores o de definir comportamientos en los conjuntos creados.

Con el proyecto Color Asset Creator se propone una solución concreta: una extensión de Xcode diseñada específicamente para crear color assets de forma accesible, aprovechando una interfaz basada en código y controles estándar que sí son compatibles con tecnologías de apoyo.

En lugar de depender del panel visual de Xcode, la extensión ofrece una interfaz basada en formularios y controles estándar que se integran con VoiceOver y con el resto de tecnologías de apoyo. De este modo, un desarrollador ciego puede definir un nuevo color con nombre de forma estructurada, introducir los valores de sus componentes de color mediante campos de texto y controles accesibles y generar los ficheros y entradas necesarias en el catálogo de recursos del proyecto.

Qué son los color assets en Xcode

En XCode, los catálogos de recursos (asset catalogs) permiten agrupar imágenes, colores, símbolos y otros elementos bajo una estructura común, normalmente en ficheros Assets.xcassets. Dentro de estos catálogos, los color assets son definiciones de color con nombre que pueden utilizarse en cualquier parte de la app, tanto en código como en interfaces visuales.

En lugar de definir colores “al vuelo” con valores RGB o hexadecimales dispersos por el código, los color assets permiten centralizar la paleta en un único lugar. Cada entrada de color se guarda como un conjunto (.colorset) con su correspondiente definición interna, tal y como describe la documentación oficial de Apple sobre los tipos de color.

Estos color assets pueden adaptarse a diferentes condiciones: por ejemplo, ofrecer variantes específicas para modo claro y modo oscuro, o para distintos espacios de color. De este modo, el mismo nombre de color se ajusta automáticamente según el contexto visual del sistema, lo que facilita la creación de interfaces coherentes, accesibles y visualmente consistentes.

Qué es Fastlane

Dentro del desarrollo de software es habitual que los entornos de desarrollo incluyan muchas herramientas para realizar tareas relacionadas con el mantenimiento y la publicación de una aplicación software. Pero la mayoría de estas herramientas integradas en los entornos de desarrollo funcionan de forma manual requiriendo una completa atención por parte de la persona que está desarrollando el software.

La automatización de procesos dentro de la ingeniería del software se ha demostrado como uno de los caminos más beneficiosos para aumentar la productividad y la fiabilidad del software. Por esta razón han ido apareciendo multitud de herramientas que permiten realizar más tareas y procesos que los entornos de desarrollo y, sobre todo, automatizar estos procesos.

¿Qué es Fastlane?

Fastlane es una de estas herramientas que permiten automatizar muchos de los procesos y tareas relacionadas con el desarrollo de software para iOS y Android.

Esta herramienta creada por Felix Crause consiste en un conjunto de servicios y aplicaciones ejecutadas desde la línea de comandos (CLI) utilizando lenguaje Ruby y permite automatizar muchos de los procesos que se realizan con Android Studio y Xcode.

Entre las diversas tareas que permite automatizar Fastlane están las siguientes:

  • Creación de capturas de pantalla para la tienda de aplicaciones
  • Despliegue de la app dentro de entornos de betatesting como Test flight.
  • Publicación del proyecto en la tienda de aplicaciones
  • Firma de paquetes de software para la distribución del proyecto
  • Ejecución de planes de tests

Como todas estas automatizaciones se ejecutan desde la línea de comandos es muy fácil incluir scripts de la Terminal para realizar comprobaciones o actualizaciones de recursos para la distribución de nuestro proyecto software.

En futuros artículos veremos algunas de estas automatizaciones con más detalle.

La instalación de fastlane es muy sencilla y su uso consiste principalmente en la ejecución de ciertos comandos de Terminal en la propia carpeta raíz de nuestro proyecto software. Este uso de la Terminal hace que el uso de Fastlane resulte más accesible que utilizar ciertas herramientas visuales incluidas en Xcode o Android studio.

Puedes obtener documentación, ejemplos y más información en la página oficial de Fastlane.

Cómo convertir una extensión de Chrome a Safari

Las extensiones de un navegador web es un pequeño programa que permite ampliar la funcionalidad de nuestro navegador para mejorar nuestra experiencia cuando utilizamos la World Wide Web.

Aunque actualmente todas las extensiones de navegador se crean utilizando HTML, CSS y Javascript si es cierto que no hay una compatibilidad completa entre los navegadores y sus extensiones ya que cada navegador ofrece librerías internas distintas para sus extensiones.

Por suerte para nosotros Apple ha proporcionado herramientas para convertir extensiones de Google Chrome para hacerlas compatibles con Safari, el navegador de Apple.

Primeros pasos

En primer lugar esta conversión de extensiones de navegador sólo se puede realizar en equipos que estén ejecutando MacOS 10.15 Catalina o superior. Además debemos tener instalado en nuestro equipo Mac el entorno de desarrollo XCode en su versión 12 o superior. Podemos encontrar XCode en la MacAppStore.

Obteniendo el código de la extensión de Chrome

Una vez tengamos nuestro equipo con MacOS preparado debemos obtener el código fuente de la extensión que queramos convertir. Para obtener el código de una extensión debemos descargarla en formato zip. Podemos seguir las instrucciones de este artículo sobre cómo descargar extensiones de Chrome.

Preparando el proyecto para XCode

Una vez tengamos el fichero ZIP con el código de la extensión debemos descomprimirlo en una carpeta con ruta conocida ya que necesitaremos esa ruta para preparar el proyecto para XCode.

Una vez conocida la ruta debemos abrir la Terminal de Mac y ejecutar el siguiente comando de Terminal indicando la ruta a la carpeta descomprimida previamente:

xcrun safari-web-extension-converter ruta_a_la_carpeta_descomprimida_de_la_extensión

Tras introducir el comando y esperar unos segundos debemos pulsar la tecla ENTER para continuar el proceso.

Tras terminar el proceso se abrirá Xcode con el proyecto para compilar la extensión para Safari. Pulsando el botón de Run se procederá a su compilación.

Una vez compilado y ejecutado el sistema nos pedirá permisos para poder configurar Safari con la extensión.

Si no poseemos un perfil de desarrollador de Apple deberemos activar la opción de Permitir extensiones no firmadas del menú de Desarrollo de Safari para poder ejecutar la extensión sin problemas.

Mostrar el tiempo de compilación en Xcode

Xcode es el entorno de desarrollo de Apple para crear aplicaciones para MacOS, iOS, ipadOS, TvOS y WatchOS.

Xcode durante el proceso de compilación o build realiza multitud de tareas. A veces cuando el proyecto va creciendo este tiempo se dispara. Hay muchas estrategias para reducir el tiempo de compilación pero a veces estas estrategias no funcionan como esperamos y puede que en lugar de reducir el tiempo de compilación lo estemos aumentando.

Xcode tiene un temporizador interno para mostrar el tiempo total que requiere una operación de build. Para mostrar este temporizador en la interfaz de Xcode debemos ejecutar el siguiente comando en la Terminal de MacOS mientras Xcode está cerrado:

defaults write com.apple.dt.Xcode ShowBuildOperationDuration YES

Cuando volvamos a abrir Xcode y ejecutemos una operación de build cuando esta finalice bien por error o bien por éxito se nos indicará el tiempo de compilación dentro del activity indicator de Xcode. Esta ventana se encuentra dentro de la toolbar superior de Xcode.

Atajos de teclado útiles en XCode

A la hora de mejorar nuestra productividad utilizando una herramienta lo ideal es conseguir que algunas tareas repetitivas o la activación de algunas funciones que ofrece la herramienta se consiga realizar en el menor tiempo posible. Esta mejora en la productividad la podemos conseguir utilizando atajos de teclado.

Xcode es el entorno de desarrollo de Apple para sus distintas plataformas de software. Ofrece multitud de funciones y posee multitud de atajos de teclado. Incluso nos ofrece la oportunidad de crear atajos nuevos, redefinirlos o mejorar su comportamiento.

En este artículo comparto alguno de los atajos de teclado que más utilizo con esta herramienta.

Moverse entre zonas del proyecto

A veces lo ideal para encontrar algo es saber cómo moverse rápidamente. Cuando tenemos un proyecto con muchos archivos esto es indispensable.

Saltar entre archivos de un grupo

Control + 5

Al usar este atajo de teclado desde un editor nos aparecerá una lista de todos los ficheros que están contenidos en el mismo grupo que el fichero que estemos editando en ese momento. De esta forma podemos saltar entre ficheros agrupados de forma rápida.

Saltar entre elementos del fichero actual

Control + 6

Con este atajo de teclado accederemos a una lista de todas las declaraciones de variables, métodos, marcas y demás símbolos del fichero que estemos editando. De esta forma podemos ver de un vistazo todo lo que hay y saltar al punto que necesitemos.

Saltar a una línea

Comando + L

Con este atajo podremos mover el foco de edición a una línea concreta del fichero que estemos editando.

Abrir rápidamente

Mayúscula + Comando + O 

Este comando nos abrirá un popup para encontrar rápidamente algún elemento del proyecto sea un fichero, una clase o la declaración de un método.

Lo interesante de este comando es que cuando estamos en el elemento que queremos abrir si pulsamos enter lo abriremos en el editor principal pero si pulsamos Option+Enter lo abriremos en el editor secundario

Mostrar en el explorador de proyecto

Mayúscula + Comando + J

Con este atajo se abrirá el panel del explorador de proyecto focalizando el fichero que tengamos abierto en el editor. Esto es útil para cuando el depurador o el compilador nos lleva a un fichero de código donde se localiza un error o warning. De esta forma nos podemos orientar en el árbol de ficheros del proyecto de forma más clara.

Controlando el espacio

A veces la pantalla de Xcode se llena de demasiada información o elementos y no nos permite concentrarnos o ver con claridad qué estamos haciendo.

Para gestionar las áreas de visualización de Xcode tenemos los siguientes atajos.

Ocultar/mostrar el inspector

Opción + Comando + 0

El inspector de objetos es un panel muy útil cuando estamos utilizando Interface Builder, añadiendo idiomas a los recursos o gestionando la dependencia de ficheros entre targets. El resto del tiempo de uso de Xcode no lo utilizamos para nada. Por esta razón viene bien saber qué se puede ocultar y mostrar fácilmente.

Mostrar y ocultar el área de depuración

Comando + Mayúsculas + Y

El área de depuración ocupa un espacio importante y es una zona que sólo utilizamos cuando estamos realizando pruebas. Por esta razón también es interesante ocultarla cuando no se utilice.

Mover el foco al editor

Control + Comando + Mayúsculas + Enter

Con este atajo de teclado el editor se ampliará para ocupar todo el espacio disponible

Esto viene bien cuando, por ejemplo, al intentar leer código con VoiceOver notamos que no lee líneas de código completas. Esto se debe a que algún otro panel o área de Xcode está limitando el área de visualización del editor.

Pausar/reanudar visión del canvas

Comando + Opción + P

A veces nos interesa que la simulación del cambas de la vista SwiftUI se refresque o nuestro equipo va corto de recursos y es mejor desactivar esta simulación.

Ocultar/mostrar canvas

Comando + Opción + Enter

Cuando estamos editando una View de SwiftUI puede que nos interese ocultar el canvas de previsualización para ahorrar recursos.

Conclusión

Con esta lista de atajos podemos mejorar sustancialmente nuestra productividad en Xcode pero hay muchos más atajos e incluso podemos crear los nuestros gracias a las opciones de personalización de MacOS y Xcode.

Merece la pena explorar un poco esta gran herramienta que ofrece tantas posibilidades.

Primeros pasos con Swift

Swift es un nuevo lenguaje de programación creado por Apple buscando atraer a nuevos desarrolladores. La propia compañía lo describe en su página oficial de Swift como un lenguaje potente y sencillo de aprender.

Realmente Swift, en comparación con otros lenguajes, tiene una curva de aprendizaje menor y las herramientas proporcionadas por Apple para desarrollar con él lo hacen un lenguaje muy apropiado como primera opción para aprender a programar.

Recientemente Apple ha decidido donar su lenguaje a la comunidad de código abierto lo que permitirá a Swift estar presente en otras plataformas por lo que desarrollar una aplicación para iOS, OSX, Linux y otras plataformas será algo habitual en Swift.

Programando en Swift

Para programar en un lenguaje de programación lo primero que necesitamos son herramientas de desarrollo compatibles con ese lenguaje. Si somos usuarios del sistema operativo MacOS X sólo debemos ir a la aplicación de la Mac AppStore y descargar el entorno de desarrollo de Apple más conocido como xCode.

xCode, como otras aplicaciones específicas para una profesión, no es una herramienta sencilla de comprender con un primer vistazo pero tampoco es una tarea imposible. Iremos conociendo poco a poco esta herramienta junto con el aprendizaje de Swift en una serie de artículos publicados en este blog.

Para programar en otra plataforma distinta a MacOS X hay varias alternativas proporcionadas por la comunidad de código abierto de Swift los cuales trabajan en un compilador para varias plataformas. Actualmente el compilador funciona para el sistema operativo Linux.

Otra alternativa para ir practicando con Swift mientras aprendemos es utilizar una herramienta online creada por IBM para este objetivo. Esta herramienta es conocida como IBM Swift Sandbox y nos ofrece la posibilidad de crear y ejecutar un Playground de Swift a través de nuestro navegador web. Esta herramienta web, aunque recientemente ha solucionado algunos problemas de compatibilidad con dispositivos móviles para poder programar en cualquier momento desde cualquier lugar, presenta algunas barreras de accesibilidad relacionadas con el uso de esta herramienta por parte de usuarios de productos de apoyo por lo que se recomienda utilizar en su lugar xCode o el compilador de Swift para Linux. Esperemos que pronto esté disponible este compilador para otros sistemas operativos.

¿Qué es un Playground de Swift?

Con la creación de Swift Apple también desarrolló nuevas herramientas y conceptos que ayuden a los desarrolladores a realizar su trabajo con mayor efectividad. Una de sus creaciones es el Playground de Swift. Un Playground de Swift es un mini proyecto de aplicación que nos permite probar de forma rápida y controlada partes de código antes de que decidamos introducir ese nuevo código en nuestro proyecto de trabajo. Esto permite probar algoritmos y funciones de una forma cómoda, segura y, además, Apple ha incorporado herramientas de monitorización en los Playgrounds para obtener el rendimiento de los algoritmos ejecutados así como permitir hacer una depuración más intensa de nuestro código.

Nuestro primer programa en Swift

Supongamos que vamos a utilizar xCode para crear nuestro primer programa en Swift. Al abrir xCode aparecerá una ventana de bienvenida. En ella habrá diversos botones, entre ellos encontramos uno que nos permite empezar con un Playground de Swift de forma rápida, es el botón con el título Get started with a playground. Una vez pulsado nos pedirá que demos un nombre a nuestro fichero de Playground y seleccionar una de las plataformas para nuestro Playground: iOS, OSX o TVOS. Tras esto se nos consultará dónde guardar el fichero de nuestro Playground. Con esto xCode ya puede crear el entorno de desarrollo para que empecemos a jugar con nuestro Playground de Swift.

xCode presenta en su interfaz un area de menú con una barra de herramientas con las principales opciones de ejecución, depuración y visualización, y un area de trabajo. Los usuarios de VoiceOver pueden identificar estas zonas fácilmente si utilizan el gesto de dejar de interactuar con el item varias veces (VO+Mayúsculas+flecha arriba). Explorando la ventana desde arriba a la izquierda siguiendo la exploración hacia la derecha encontrará la barra de herramientas, identificada como Toolbar, una zona para controlar las pestañas abiertas en xcode y un area de trabajo. Este area de trabajo es identificada por VoiceOver con el título de ruta de nuestro proyecto, sería algo parecido a MyPlayground.playground split group. Interactuando con el area de trabajo encontraremos varios subcontenedores:
el editor de código, la barra de debug, la zona de debug y varias zonas relacionadas con el diseño visual de la interfaz. Esta zona puede que contenga todos, algunos o ningunos de estos subcontenedores ya que podemos modificar la visualización de xCode en las opciones del menú View de la barra de menú de xCode. Por ahora sólo nos interesa el subcontenedor donde se encuentra el editor de código, VoiceOver lo identificará con el nombre de nuestro fichero en edición; la barra de debug y el panel de debug o depuración, dentro de este panel encontraremos la opción de ejecución para nuestro Playground.

En el editor de código encontramos que ya hay escrito un código de ejemplo:


//: Playground - noun: a place where people can play
import Cocoa
var str = "Hello, playground"

Prueba a borrar todo ese código, escribir el siguiente código y pulsar el botón Execute que hay en la barra de debu:


print("Hola mundo!")

Tras ejecutar el código veremos que el texto Hola mundo! aparece en el area de depuración. ¡Enhorabuena, has creado tu primer programa en Swift!

Puede que sólo encuentres la barra de debug, identificada por VoiceOver como debug bar group y no encuentres el panel de debug, identificado por voiceOver como debug group. Esto puede suceder porque este panel de depuración se puede ocultar. Para hacer que se vea podemos entrar en la barra de debug y pulsar el botón show debug area o usar la opción de la barra de menú de xCode en el menú View o el atajo de teclado ()Comando+Mayúsculas+Y).

Un primer paso de otros muchos

Pensaréis que este programa no vale para nada pero si habéis seguido las instrucciones hasta aquí se supone que habéis adquirido los primeros conocimientos para comenzar a aprender Swift ya que ahora sabéis lo siguiente:

  • Saber escribir código y ejecutar código en un Playground
  • Usar la función print() que muestra un texto por pantalla

En futuros artículos iremos aprendiendo más cosas sobre este lenguaje de programación.