viernes, 28 de julio de 2017

¿Cuánto Tiempo Puede Tu Startup Sobrevivir Sin Un CFO A Tiempo Completo?

by Scott Brown - Freelance Finance Expert @ Toptal (translated by Yesica Danderfer) - Utilizado con permiso

El valor de un CFO para una compañía joven es un tema bastante competitivo y acalorado. Muchos discuten que son “añadidos” innecesarios y que un pequeño equipo de finanzas con conocimiento y bien entrenado puede satisfacer las necesidades del negocio. Por otro lado, los CFOs traen una perspectiva más profunda y estratégica que puede ayudar a las compañías a prepararse para el futuro y optimizar sus operaciones actuales.

La parte más importante del asunto es que mientras los CFOs añaden un valor significativo bastante más grande que un equipo junior de finanzas, estos suelen ser muy caros.

Para que un negocio navegue este dilema con éxito, se requiere primeramente entender qué roles, necesidades y caminos se encontrará en el camino. Eventualmente, los negocios más exitosos superarán su staff inicial de contadores y necesitarán gran profundidad en sus cargos mientras que el número de dimensiones en la función financiera se incrementa. Si entienden cuáles serán sus necesidades eventuales de antemano entonces habrá muchas formas en las cuales los negocios pueden cubrir sus riesgos y obtener lo que necesitan, cuando lo necesitan, sin comprometerse financieramente de más.

La gran pregunta puede no ser cuánto puedes sobrevivir, pero qué tan pronto comenzarás a obtener beneficios de las contribuciones de un líder financiero excepcional. En más de mis 15 años de experiencia como director y consultor de finanza, he aprendido que la mejor forma de juzgar si una compañía debe o no contratar un CFO es evaluando dónde están parados en cuanto a lo que se refiere en “jerarquía de necesidades”, lo cual explicaré a continuación. El siguiente análisis le ayudará a tu negocio a identificar dónde están en esa jerarquía y puede ser una guía para contratar personal que mejor se adapte a sus necesidades actuales y cómo avanzar al siguiente nivel.

La Jerarquía de Necesidades al igual que “La Jerarquía de Necesidades de Maslow”, dice que un negocio tiene una jerarquía de gestión de necesidades. Estas se ven reflejadas en la siguiente tabla.

 



Mientras más básicas sean las necesidades, más básicas serán las habilidades necesarias para poder satisfacerlas. Cuando las necesidades progresan también lo hacen las habilidades, como así también el conocimiento requerido para satisfacer esas necesidades. Las necesidades básicas son administrativas y pueden satisfacerse con entrenamiento técnico, pero necesidades avanzadas necesitan un componente estratégico las cuales son cubiertas de mejor manera por alguien con una amplia experiencia en negocios.

Las necesidades de los negocios crecen con un ritmo diferente basados en la industria, oportunidad de mercado, ambiciones y recursos. Una necesidad no puede ser satisfecha si una necesidad anterior no ha sido cubierta.

Nivel 1: Negociar


La necesidad más básica de un negocio es la habilidad de poder realizar transacciones. Al hacerlo, me refiero a comprar y vender productos y servicios, y hacer contactos.

Transacciones básicas requieren mantener un registro básico - a lo que llamo chequera de contabilidad. Esto puede hacerse por cualquiera en el negocio y no requiere conocimiento previo en finanzas o contabilidad. Por lo general supone a un negocio que sólo registre transacciones en la chequera y luego utilice el cambio en la apertura y cierre del balance/s para juzgar su éxito y salud financiera.

Las ventajas de la chequera de contabilidad son claras: es barato y requiere un mínimo esfuerzo. Se puede hacer rápidamente y no requiere personal especializado. Los negocios que recién empiezan son entonces quienes puedan inclinarse a este tipo de actividad, lo cual tiene sentido. Sin embargo, aunque sean transacciones básicas, muchos negocios se encuentran en serios problemas porque han conducido transacciones sin graduarse de usar una chequera de contabilidad a usar contabilidad “real”.

Un negocio que recién está empezando puede darse cuenta que puede mantenerse a flote operando de esta forma, pero no es sustentable para ningún negocio que quiera sobrevivir a la larga, mucho menos desarrollarse.

 

Nivel 2: Mantener Un Registro


La contabilidad real se centra alrededor de la necesidad de tener un registro correcto de las transacciones realizadas y esto puede llevarse a cabo por un “tenedor de libros” o a medida que la complejidad de las transacciones se incrementa, un contador. Un propietario puede ciertamente satisfacer esta necesidad mientras que el tiempo y las habilidades lo permitan, pero debe tener en cuenta de la oportunidad de costo de hacerlo.

El rol del tenedor de libros es registrar toda actividad proveniente de las fuentes de transacciones, como balances de banco e inventario. Por lo general, un tenedor de libros requiere ser supervisado por un contador externo o el dueño del negocio. Suele lograrse una mejor flexibilidad para el negocio si se usa un servicio subcontratado de contabilidad externo pero requiere de más comunicación y revisión.

Mientras que un tenedor de libros y contador están enfocados en registrar transacciones históricas y actividad con grados variables de exactitud y conformidad, un contador se diferencia de un tenedor de libros en el hecho de que están entrenados para altos standards de desempeño más profesionales.

Este entrenamiento y educación les otorga habilidades para que puedan garantizar que la completud y tiempo de la actividad financiera ha sido registrada apropiadamente. Cuentas preparadas por contadores deberían ser requerimientos de una compañía que un día buscarán financiación externa.

Recientemente trabajé con un cliente que no sólo tenía un muy buen registro de GAAP (Principios Contables Generalmente Aceptados) para un negocio que recién comienza pero también me sorprendió por tener un catálogo bastante completo de todas sus obligaciones contractuales. Si bien no habían muchas, su fundador fue un CFO y sabía que cuando llegase el momento, prestamistas e inversores requerirían divulgación masiva de toda obligación contractual. El registrar sus transacciones contractuales desde el principio, están en una mejor forma para eventualmente reunir capital.

Para negocios que quieran mayor supervisión sin costos significativamente altos, suele tener sentido usar un recurso externo para periódicamente revisar el trabajo del tenedor de libros, especialmente si, a diferencia de mi cliente, el líder no tiene experiencia contable. Esto puede incluirse con trabajo de preparación de impuestos o por un CFO retenido fraccionalmente.

Por fortuna para aquellas firmas conscientes de sus costos la habilidad de poder capturar transacciones ha cambiado significativamente en la última década; el mundo ya no es uno donde los datos se manejen de forma manual. Mucho de esto ha sido reemplazado por aplicaciones de software y otros recursos de IT, y esto tiene implicaciones, por supuesto, en el costo de estructura de un negocio (el punto siendo que el software que reemplaza al trabajo humano para abaratar costos).

Generalmente, negocios que todavía están en este nivel de la Jerarquía de las Necesidades pueden salirse con la suyas en cuanto a no tener un CFO. Al final, el requerimiento principal es sólo una gestión correcta de transacciones llevadas a cabo por el negocio. Como esta tarea es aún bastante básica y puede ser hecha por cualquier trabajador entrenado dentro de la misma empresa, o por un trabajador contratado medio tiempo, seguramente no requerirá los servicios de un CFO más dedicado y experimentado.

La Ilusión Del Fintech


Mientras que datos financieros y operacionales son sustraídos de muchas fuentes a sistemas alojados de contabilidad, el foco ha cambiado de introducir datos de forma manual a asegurar la calidad de estos datos y cómo son capturados.

Sin embargo, cuando no es implementado de forma correcta, estas aplicaciones de software pueden engañar a negocios haciéndoles creer que sólo porque los datos están en el sistema estos son correctos, cuando en realidad no lo son.

En muchas formas, la adopción del Fintech se ha convertido en la nueva Chequera de Contabilidad para algunos negocios –los datos contables siendo la caja de recibos en el sistema pero sin añadir valor.

Como resultado, los sistemas de contabilidad e interfaces operacionales necesitan ser instaladas por alguien con un buen entendimiento de principios contables. Quickbooks, uno de los software contables más populares, dice que: “Mientras que tu negocio –e ingresos– crecen, gestionar tus finanzas puede convertirse en una tarea para la cual no tienes el tiempo o conocimiento.

Específicamente, en cuanto a evadir temas legales se refiere, los contadores suelen valer su tiempo en oro”.

Este es un momento donde tendría sentido para una compañía involucrar a un consultor financiero para asegurarse que las aplicaciones estén apropiadamente integradas y que hay normas organizadas para asegurar que el uso de aplicaciones soporten la función de reporte financiero.

Otra compañía con la cual recientemente he hecho una consultoría necesitaba arreglar la implementación defectuosa de un software que localiza inventario. La compañía había experimentado un crecimiento significante en sus primeros cuatro años pero había fallado estableciendo apropiadamente calendarios de impuestos de ventas e items impositivos. Esto resultó en reportar incorrectamente una suba rápida de impuestos de ventas durante varios años.

Trabajé en el negocio de arreglar esta implementación y archivar los retornos correctos.

Desgraciadamente, durante muchos meses, el costo de las sanciones e intereses excedió los impuestos de ventas reales a vencer. Al arreglar la implementación otras oportunidades para mejorar fueron identificadas y aplicadas, y el cliente puede ahora reportar rentabilidad en tiempo real por línea de producto a través de su sistema contable. También ha usado esto para hacer ajustes a su combinación de productos y ahorrar sumas significativas a la empresa.

Aún así, el proyecto sirvió como gran ejemplo de problemas potenciales relacionados al Fintech. Incluso cuando un sistema financiero basado en el IT esté correctamente conectado, requerirá una revisión regular de los datos y acuerdos contables. Estas actividades requieren no sólo un buen entendimiento de contabilidad sino también habilidad para asimilar datos operacionales en registros financieros.

Nivel 3: Cobertura De Confianza


Con transacciones estando apropiadamente justificadas, un negocio puede empezar a reportar en la actividad de dicho negocio. La clave aquí es que los reportes comiencen a tomar forma de líneas de negocios (ej., los ingresos del departamento de ventas y sus costos), o tareas de negocios específicas (ej., servicio al cliente), al contrario de simplemente reportar sólo las transacciones del negocio (ej., ingresos).

De nuevo, FinTech está hecho para que el reporte completo sea más costeable y robusto que nunca antes visto. Las escuelas de negocios han evolucionado en los últimos años para asegurar a sus graduados con un fuerte entendimiento de Fintech y sus innumerables aplicaciones. Incluso cursos dedicados a eso han estado apareciendo por doquier.

Dicho esto, es importante saber cómo los reportes se utilizarán previos a poner en su lugar un sistema de reportaje. Aunque es siempre un requerimiento tener exactitud, reportar para propósitos internos no necesita ser abordado y revisado de la misma forma que aquellos reportes utilizados para propósitos externos. Dependiendo cómo la actividad haya sido capturada, los reportes pueden ser presentados de numerosas formas pero siempre con la advertencia: “Basura dentro = Basura fuera”.

El propósito principal es comunicar información transaccional en el nivel apropiado para la audiencia en cuestión. Si esto puede ser logrado por el tenedor de libro o contador, su trabajo ya está hecho. Si no, el negocio necesitará de alguien quien pueda convertir apropiadamente la información contable en comunicaciones significativas.

Un problema muy común que veo con regularidad en los etapas iniciales en varios negocios es que utilizan sistemas dispares como fuentes para sus reportes, y como resultado, nunca están seguros si han capturado los datos apropiadamente en dichos reportes.

No tener una simple fuente de datos lleva a capturar menos del 100 por ciento de lo que se pretendía, o en algunos casos hasta la duplicación de más del 100 por ciento de la actividad que se reporta.

Reportajes exitosos deben ser rigurosos, específicos y completos, especialmente si estos negocios en etapas iniciales están preparándose para ir en alza hacia un financiamiento de Serie A.

Es usualmente en esta etapa que en la Jerarquía de Necesidades un CFO comienza a ser más relevante. Después de todo, tomando los registros de transacciones, cortando y trozándolos para comenzar a satisfacer y guiar el día a día del negocio necesita de un conocimiento y juicio más profundo. Sin embargo, una opción bastante común aquí es buscar ayuda de un CFO externo de medio tiempo. En mi experiencia esta es la razón por la cual me involucro en el negocio, y es también donde encuentro que puedo comenzar a añadir más valor.


Reportes Financieros: ¿Finalidades o Medios?


Cada dueño de negocio que ha tenido una pila de reportes financieros en sus manos dados por su contador te dirá que estos por sí solos son frustrantes y de poco valor. En muchas instancias crean ambigüedad para el dueño y hacen de su trabajo algo más complicado.

Tener reportes por sí solos no son la meta final, ya que deberían ser un medio para poder entender actividad financiera. Por ejemplo, no es suficiente saber que la posición final de dinero en el período actual cambió por una cierta suma si no puedes identificar cuáles actividades condujeron al cambio.

Anteriormente en mi carrera trabajé con un cliente que no entendía que ser un negocio estacional causaba fluctuaciones considerables en la necesidad del capital trabajado mientras que cuentas pendientes de pago y posiciones de inventario crecía durante períodos pico. Su tenedor de libro les proveía con reportes de balance de dinero pero sin ninguna explicación. Trabajé con ellos para identificar métricas como volumen de inventario y días de ventas pendientes que podían monitorear para dar un mejor reflejo de cómo le estaba yendo al negocio y también cómo ayuda a predecir las futuras posiciones del dinero.

Como mencioné con anterioridad, los reportes creados para uso externo sirven un propósito diferente que gestionar reportes creados para uso interno. Si fueran creados para uso interno entonces son los medios por los cuales el negocio aprende sobre sus actividades y descubre oportunidades para actuar.

Es más probable que un negocio se desarrolle en alza cuando los reportes son generados por una persona que es muy habilidosa en analizar e interpretar datos financieros contenidos en reportes. Esta persona puede identificar cuando reportes estándar necesitan más detalles y puede crear análisis ad hoc cuando tiene sentido. Sabiendo cuándo llevar esto al próximo nivel y cómo hacerlo sólo viene con experiencia.

Particularmente, los negocios experimentando cambios rápidamente no pueden darse el lujo de saltarse la interpretación de información contenida en reportes financieros. De hecho, deberían confiar considerablemente en ellos (y en cosas como dashboards o KPIs) para navegar esta etapa con tranquilidad. Pero crear dashboards significativos no es tan fácil como suena, requiere entendimiento de qué factores conducen al negocio y qué señales envían. Algunas KPIs pueden ser puramente financieras donde otras pueden ser una mezcla de datos financieros y operacionales. Un líder experimentado en finanzas sabrá cómo juntar esta información o dirigir a otros para hacer lo mismo.

Nivel 4: Planeamiento Financiero


Con un registro exacto de actividad histórica y análisis de los factores que influenciaron éxitos y fallas, un negocio puede utilizar la información reunida para desarrollar predicciones financieras.

Como dice el dicho: “no puedes saber hacia dónde vas hasta saber dónde has ido”.

El proceso de crear predicciones no es nada parecido a los pasos para registrar actividades contables y requiere un conjunto diferente de herramientas y habilidades.

Compañías con modelos de negocio que cambian rápidamente se benefician mucho más de predicciones regulares y, de nuevo, no deberían saltarse este paso. Mientras más rápido el negocio cambie, más grande será el riesgo asociado con no planear, e incluso grande será la necesidad para actualizaciones más frecuentes en el progreso hacia el plan.

Un pronóstico ideal sería el del pronóstico ondulante y debería siempre proyectar 12 meses en cualquier momento; esto es especialmente cierto para negocios estacionales. El pronóstico debería incluir tres declaraciones financieras: beneficios y pérdidas, gastos capitales y flujos de dinero. El liderazgo puede entonces trabajar con el resto del negocio para asegurarse que éste tiene suficientes recursos para llegar a su meta basada en necesidades. El equipo de finanzas busca escalar los recursos del negocio para responder a las necesidades de planificación con no más y menos de lo que es necesario, para que las oportunidades y/o recursos no sean desperdiciados.

Las compañías que están en este nivel de Jerarquía de Necesidades seguramente necesitarán de un CFO. Como se mencionó anteriormente, un CFO a medio tiempo podría ser suficiente, pero habría una colaboración y relación cercana laboral con gestionamiento para poder llegar a pronósticos financieros significativos, y con suerte, precisos.

Nivel 5: Colaboración Estratégica


Negocios que aspiran a crecer y mejorar continuamente también esperarán lo mejor de su equipo de gestión de finanzas. El producto final definitivo del equipo de gestión de finanzas es la colaboración estratégica, donde la función financiera se asocia con otras áreas del negocio y es una parte integral del proceso estratégico financiero. Esto sólo puede ser logrado una vez el negocio entienda dónde ha estado y hacia dónde quiere ir.

La visión estratégica incluye decisiones de precio a largo plazo, análisis de escenarios, expansión internacional, adquisición de decisiones, y muchas otras decisiones de alto nivel. La colaboración estratégica es el resultado de la asimilación de nuevas fronteras en las metas a largo plazo del negocio.

Un líder financiero estacional que puede colaborar con los negocios para crear estrategias financieras viables es indispensable en esta etapa.

Elige Finanzas “Lean”


En el medio ambiente del negocio de hoy en día, organizaciones “lean” están probando que con la disciplina financiera correcta, las compañías pueden lograr resultados significativos con menos recursos de lo que fue una vez posible.

Dicho por Christian Gheorghe , el CEO de Tidemark, “Incluso una financiera profesional de medio nivel puede mover el planeamiento de una organización, su presupuesto, y pronosticar procesos más allá de planillas de Excel para que gestores puedan tener datos y analíticos necesarios para entender esos escenarios donde se preguntan “qué pasaría si”, y poder utilizar analíticos predictivos y pronósticos”.

Al incrementar el interés de la fuerza laboral y recursos financieros, negocios con gran crecimiento son más ágiles y mejores para responder a condiciones de negocio cambiantes. Mientras que el FinTech tiene limitaciones, está convirtiéndose en un gran facilitador. Por ejemplo, le da al negocio la habilidad de acoger el trabajo remoto lo cual permite retener una gran calidad de talento a un precio más bajo de compensación. El software que gestiona contabilidad y finanzas mucho mejor soporta el uso de centros de servicios subcontratados.

La tecnología colaborativa ha hecho fácil para negocios aguantarse a contratar recursos de finanza a tiempo completo y aún así tener acceso a una gran piscina mundial de individuos talentosos. Los negocios pueden ahora entablar CFOs fraccionales y juntas consultoras, y contratar a un CFO a tiempo completo más adelante, para poder al mismo tiempo llegar a sus metas y satisfacer sus necesidades para un liderazgo financiero más sofisticado.

Dicho esto, mientras se acercan ciertas metas, un líder financiero estacional que puede crear una estrategia financiera viable es indispensable. Esto es especialmente cierto cuando un negocio está intentando crecer a grandes pasos a través de una cantidad de rondas financieras externas. Mientras que consejeros, VCs y consultores pueden poner a una compañía a través de etapas de inversión tempranas, esperar demasiado puede resultar en un CFO que no tendrá suficiente tiempo para aprender el negocio antes de que la actividad pre-IPO comience.

Encontrar el CFO correcto el cual quiera unirse a la aventura podría tomar un tiempo. Paul Holland de Foundation Capital dijo que “No es poco común que tome varios meses encontrar y contratar a un CFO de gran calidad. El tiempo estimado ideal para poder contratar a dicho CFO es de entre 12 y 18 meses antes del IPO”.

Otro desafío para las compañías sin un CFO en este ambiente es llevar registro de regulaciones. Por ejemplo, cuando ASC606 se efectúe se requerirá que los negocios con inversores externos reporten sus ingresos de forma diferente a cómo lo hacían tradicionalmente.

En conclusión, pese a que contratar un CFO no tiene que ser una prioridad principal en las etapas iniciales del ciclo de vida de una compañía, si el negocio sigue creciendo tanto como sus ambiciones, un CFO es requerido para efectivamente manejar las necesidades crecientes del negocio.

Cinco Preguntas Para Hacer Cuando Se Construya Una Función Financiera


A continuación dejo unas preguntas claves que un negocio debería considerar la contratación de su personal contable y de finanzas:

  • ¿Estarás buscando inversores por fuera? Si es así, es importante que utilices procesos contables apropiados y normas en su lugar cuanto antes.
  • ¿Tu negocio está cambiando rápidamente? Una actitud transaccional enfocada históricamente será limitada en su habilidad de ayudar a identificar oportunidades y amenazas. Adicionalmente, si el negocio cambia, puede que también lo haga el proceso contable.
  • ¿Cuánta habilidad en gestión de finanzas tienes y cuánto tiempo puedes utilizar en ello? Incluso si eres competente con contabilidad y finanzas, cada hora que pases en las finanzas es al menos una hora que no puedes utilizar haciendo lo que haces mejor.
  • ¿Qué cantidad de reservas financieras puedes tener listas en caso de sorpresas? Con menos visibilidad y planeamiento, las sorpresas pueden ser más frecuentes y grandes. Necesitarás reservas más grandes de dinero.
  • ¿Qué tan complejas son tus operaciones? Como máquinas y casi todo lo demás, mientras más complejas tus operaciones y finanzas, más experiencia y habilidad tu negocio necesitará tener para adecuadamente gestionar, reportar y planificar.
 https://www.toptal.com/finance/interim-cfos/-cu%C3%A1nto-tiempo-puede-tu-startup-sobrevivir-sin-un-cfo-a-tiempo-completo-/es

miércoles, 19 de julio de 2017

Por Qué Los Startups Necesitan Una Guía De Estilo

by Benoît Chabert - Designer @ Toptal (translated by Yesica Danderfer) - Utilizado con permiso

Incluso para un diseñador con experiencia, crear una nueva guía de estilo para un producto es difícil—hay muchas direcciones de diseño posible, y el proceso puede rápidamente convertirse en algo abrumador. La vida del startup es bastante agitada, rápida, y llena de clichés como “la perfección es la enemiga de tener algo hecho”, “muévete rápido y rompe cosas”, o “lancemos ahora, arreglemoslo después”.

Crear una guía de estilo bajo dichos eslóganes y prioridades fluctuantes es desafiante, pero es necesario si queremos que el diseño de un producto tenga éxito a largo plazo.

Sistema de diseño de UX, guía de estilo, y librería de componentes de BBC
La Experiencia Global de Lenguaje (GEL) de la BBC explica el propósito de cada componente y cómo deberían ser utilizados.

En años recientes, hemos escuchado mucho sobre sistemas de diseño, guías de estilo, librerías de patrones, y diseño atómico. Y si bien estas herramientas son muy útiles, usarlas puede sentirse como un exceso cuando lo único que quieres es crear un par de pantallas para un MVP o demo de una app.

Sin embargo, tener una guía de estilo no sólo mejorará tu proceso de diseño en general, sino que también hará de tu app algo más sólido y consistente.

Hablemos primero sobre los principales beneficios de las guías de estilo, y después enfoquémonos sobre los desafíos en un ambiente de startup. Finalmente, hablaremos sobre cómo una guía de estilo siempre evolucionan como un documento viviente.

Las 5 Principales Razones De Por Qué Una Guía De Estilo Es Una Buena Idea

 

1. Una Guía De Estilo Hace De los Diseños Algo Concreto Y Del Branding Algo Claro

Siendo un sólo diseñador en un startup—lo cual suele ser el caso—no hay muchas oportunidades para revisar y desafiar decisiones de diseño muchas veces tomadas por otras personas en el equipo.

Aunque muchos podrían estar trabajando en colaboración, los diseños no necesariamente son compartidos con otros. Esto significa que hay sólo una persona validando diseños finales.

Una guía de estilo proveerá a un startup una guía y documentación para referencia. Desafiará algunas de las decisiones de diseño hechas por el diseñador o por el equipo porque tendrán que validarlas en el contexto global de la app. Diseñar un componente de UI porque funciona bien en una pantalla no alcanzará; un diseño bien pensado debería resolver un sólo problema de diseño en una situación, al igual que un problema generalizado que se pueda encontrar en otras pantallas de la app.

Componentes repetidos de un UI merecen estar en una guía de estilo
El diseño UI de esta app usa el título “contacto” de forma repetida, un candidato ideal para ser incluído como componente en una guía de estilo. (by Ivan Bjelajac on Dribbble)

Una guía de estilo hace que todo el estilo del diseño en general, guías de marca, especificaciones, y reglas disponibles para todos en tu compañía, y tan sólo a un click de distancia. Pueden ir a una URL para fácilmente acceder a ella o descargarla en PDF. El diseño se convierte en el trabajo de todos—no es sólamente la responsabilidad del equipo de diseño. Es una aproximamiento más prudente que mejorará el UI de tu producto.

Guía de lenguaje de IBM en la web
IBM almacena sus guías de “lenguajes de diseño” online lo cual hace las cosas más fáciles para todos, incluso públicas, para que puedan ser vistas.

 

2. Una Guía De Estilo Hará De Tu Diseño Algo Más Consistente

Provee una suerte de diccionario para tu lenguaje de diseño de UI. Puedes usar la misma terminología cuando quieres comunicar algo que ya has expresado. Imagina si tuvieramos diferentes palabras para expresar la misma cosa:
  1. “Está lloviendo, necesito mi paragüas.”
  2. “Está lloviendo, necesito mi paragüüüass”
  3. “Está lloviendo, necesito mi paragüaaass”

Hará del lenguaje algo poético, pero es difícil de entender. Fundamentalmente, es la misma idea con el UI de un sitio o una app. Para que sea fácil de usar, deberías inventar sólo una nueva “palabra” cuando realmente estés creando algo nuevo. De esta forma, estarás atado a una estricta regla que dice, “Sólo componentes que resuelvan un problema repetido de diseño a través del producto serán permitidos en el producto y subsecuentemente en la guía de estilo.”

La consistencia hace de tu producto algo más amigable para el usuario; un producto altamente usable se traduce en ventas y más compromiso de marketing.

Pantallas del proceso de onboarding de una app
Pantallas de onboarding por lo general utilizan animaciones o efectos visuales que no están presentes en el resto de la app. Les da a los diseñadores una buena oportunidad para crear un nuevo layout.
(por Murat Gursoy on Dribbble).

3. Reusar El Mismo Sistema De Componentes Hace Que Tu App Sea Fácil De Usar


Como en el ejemplo del lenguaje, tener consistencia es clave. Cada vez que cada componente es entendido por el usuario, cuando se utilice de nuevo y en un contexto distinto, las personas ya estarán familiarizadas con el comportamiento anterior. En lo que respecta a interacciones de usuario, esta consistencia mejora en general la usabilidad del producto.

El UI de Eventbritte reutiliza componentes comunes.
Eventbrite usa un layout de tres íconos en muchas de tus secciones. Cuando un usuario se cruza con estos componentes de nuevo, ya estarán familiarizados con su comportamiento en general.

Trabajando con un sistema de diseño basado en componentes ahorra tiempo y también hace de un producto algo fácil de actualizar. Si hay un problema de usabilidad con un componente en una cierta situación, se puede arreglar una vez que todos los otros posibles problemas con ese componente sean actualizados.

4. Una Guía De Estilo Hace De Tu App Algo Fácil De Desarrollar En El Largo Plazo


Cuando tu equipo está desarrollando un componente común para una pantalla, están desarrollando una solución que usarán también en otro lado. Esto ahorra tiempo de desarrollo—mucho, de hecho. Cuando tu compañía crece, esto significaría, quizás, ahorrar 10 veces horas de trabajo requeridas para crear una pantalla nueva.

5. Una Guía De Estilo Facilita La Eficiencia De Producción E Innovación


Crear una guiía de estilo hace que los diseños sean más accesibles y estén disponibles para el resto de la compañía. Los desarrolladores y diseñadores pueden prototipar una idea más rápido y fácilmente. Bootstrap es por lo general alagado por hacerle la vida fácil a los desarrolladores para crear un prototipo que funcione—tu guía de estilo sirve el mismo propósito. Provee una referencia base para un nuevo UI que puede ser creado por desarrolladores, sin que el equipo de diseño esté creando primero la pantalla (aunque el equipo de diseño debería hacer el QA o test de calidad de las pantallas finales).

La guía de estilo con el sistema de diseño de Shopify
El sistema de diseño de Shopify apodado, dubbed Polaris.

Los Desafíos De Un Startup, Una Guía De Estilo En Cambio Constante


Crear un sistema de diseño en un ambiente de startup no es tan lineal como parece ser en una compañía madura donde están acostumbrados a un proceso más simplificado. En una compañía más tradicional, el equipo de diseño desarrolla una investigación de UX, ideación, y experimentación, y después elaboran una guía de estilo de marca final. Este proceso no es para todas las compañías, ya que los startups funcionan en un ambiente donde su visión y requerimientos de producto no siempre están en constante cambio. Trabajan con MVPs (productos mínimos viables), versiones incompletas de sus apps que son usadas para probar sus ideas y mostrarlo a usuarios potenciales.

En lo que a crear un estilo de guía se refiere, esto puede convertirse en un problema.

En un ambiente donde siempre se está evolucionando, un diseñador está usualmente en apuros para crear un estilo de guía que supuestamente será algo “fijo”. Un diseñador no tendrá el tiempo para realmente pensar a través de todos los componentes que están siendo creados, aunque pueden aparecer en el último release de la app. Facebook famosamente cambió su menú “hamburger” por una navegación en tabs cuando maduraron un poco. ¿Crees que quien haya puesto el menú hamburger ahí también lo añadió a la guía de estilo de Facebook?

También podrías considerar que no es aún el momento para crear una guía de estilo. Podrías darte cuenta que a largo plazo vas a necesitar una, pero que ahora es más importante producir pantallas en serie. Lo que es más, necesitarás unas páginas de marketing para promover tu app. De repente, tu diseño necesita redoblar la apuesta, y mientras estás creando pantallas, empiezas a ver el valor de tener una guía de estilo que pueda mantener la marca de tu compañía y diseños consistentes.

El problema es que no sabes exactamente cuando es el momento adecuado para intercambiar flexibilidad por estabilidad. Tienes que decidir cuándo deberías comenzar a enfocarte en la guía de estilo y cuándo deberías concentrarte en crear pantallas. Un aproximamiento óptimo podría ser producir una guía de estilo al mismo tiempo que estás entregando pantallas–de esta forma podrás tener lo mejor de ambos mundos.\

Comienza Con Algo de Inspiración UI



Una buena forma de comenzar, especialmente si no eres un diseñador, es coleccionar ejemplos de estilos de diseños que te gustan, o algo más importante, a lo que crees que los usuarios van a responder. Colecciona cuantos ejemplos puedas, y ponlos en una carpeta o tablón de InVision/Niice, etc. Pueden ser usados como referencia e inspiración en conjunto con tu sensibilidad de diseño. Puedes construir sobre ellos luego para crear una librería de patrones.

Por ejemplo, cuando estaba trabajando en una guía de estilo para una compañía promoviendo artistas en la industria del entretenimiento, nos preguntamos si los fondos claros u oscuros tendrían un gran impacto en nuestros usuarios. Miré cientos de sitios web diferentes en juegos/películas/producciones visuales para ver cómo usaban fondos claros y oscuros.

Guía de estilo de color del sitio web del video juego Star Wars Battlefront 2
El sitio web del juego Star Wars Battlefront 2 usa colores oscuros mientras que el sitio web de EA usa una paleta más clara.

Hice una hoja de referencia donde resalté los patrones más comunes. Un patrón que identifiqué fue que las compañías en la industria tienden a usar fondos más oscuros cuando presentan sus productos, pero usan fondos blancos en sus esfuerzos de marketing, eCommerce, y tiendas.

No tienes que ir en tal profundidad, pero me di cuenta que tener referencias visuales ayuda, no sólo en crear una guía de estilo, pero también en recordar algunos de los casos de uso que podrías necesitar diseñar. Una vez que te sientes bien con respecto a las referencias que coleccionaste, puedes comenzar a trabajar en el diseño visual.

Moodboard
Diferentes mood boards que usan distintas referencias.
(fuentes: Summer Teal Simpson Hitch; Vivek Venkatraman; Amber en Dribbble)

Diseña Componentes Sólidos De UI


Mientras se trabaja en startups, es más difícil crear componentes que crear páginas–al menos al principio. Cuando diseñas una página, por lo general tienes una idea de cómo será usada. Eso no es necesariamente el caso cuando diseñas un componente; estás intentando diseñar para un caso de uso específico, pero quieres que sea parte de un sistema de diseño universal, y debes abordarlo de esa forma. Por ejemplo, podrías querer crear un componente para una sub-navegación con tres botones. También podrías querer trabajar con cuatro, cinco, o diez botones, y necesitarán funcionar en mobile, tablet y desktop. Deberás pensar más allá.

Guía de estilo para Operator, una compañía de eCommerce
La guía de estilo de Operator especifica cómo cada componente reaccionará basado en navegación y jerarquía visual. (fuentes: Kerem Suer en Dribbble)
Quieres un cierto nivel de persistencia o poder fijo en un componente. Componentes comunes no deberían cambiar demasiado, y deberían ser reutilizables en muchos lugares a través de tu producto. Por ejemplo, si estás sólo interesado en una app de iOS, entonces querrás testear tus componentes basados en el número de opciones o longitud de contenido, no necesariamente el tamaño de pantalla. La idea es que si es viable en el UI en muchos lugares de tu app, entonces sabes que es un componente que tiene el potencial de ser parte de tu guía de estilo.

Sistema de diseño de Salesforce con componentes comunes y sus usos
El Sistema De Diseño Lightning de Salesforce indica cuán flexible un componente es y si puede o no ser adaptable a una interface mobile.
Un startup necesita empezar desde prácticamente la nada misma y moverse rápidamente. Tu jefe podría querer una pantalla diseñada para el final del día, y eso significa que no podrás realmente desarrollar una guía de estilo y luego diseñar la pantalla. Lo que es aún peor, podrías estar diseñando una guía de estilo con componentes que nunca verán la luz del día porque la visión de la compañía ha cambiado. Como suelen decir, es mejor lanzar ahora.

Librería de componentes con UI kit analítico de Salesforce
El kit UI de Salesforce Analytics es una librería de componentes comunes que en teoría serán reusados en cada app. (fuente: Eli Sebastian Brumbaugh)
Crear una buena guía de estilo lleva tiempo, y porque se convertirá en en la base de tu sistema de diseño, querrás hacerlo bien. En un ambiente de startup, necesitarás trabajar en tu guía de estilo con todo en mente. ## La Guía De Estilo Como Un Documento Viviente

Deberías pensar de tu guía de estilo como un trabajo en progreso. Como un startup que intenta descifrar su estrategia, vas a tener que resolver tu guía de estilo en el camino. La editarás y ajustarás a lo largo del tiempo hasta que se convierta en la base de tu UI. Un aproximamiento útil es comenzar con el primer mockup al mismo tiempo de que comienzas con tu guía de estilo. Abre dos archivos con tu software favorito (en mi caso, Sketch); uno llamado nombre de página y otro guía de estilo. Mientras trabajas en el diseño de una pantalla, puedes comenzar a poner semillas en tu guía de estilo con elementos que forman tu diseño.

Trabajando en una guía de estilo simultánea en Sketch
Un ejemplo de proyecto de startup con dos archivos abiertos. La guía de estilo en la izquierda y la pantalla mobile a la derecha.
Mientras más trabajas en más de estas guías, te darás cuenta casi de inmediato que hay algunos componentes que son importantes que se incluyan en la guía de estilo. Por ejemplo, si te has decidido por un estilo de icono, entonces todos tus íconos pueden ir en la guía desde el comienzo.

Usualmente creo una sección llamada “iconos hasta ahora”. Y si en algún punto alguien necesita un ícono, primero tienen que revisar esta sección antes de crear uno nuevo.

Librerías de iconos en guías de estilo y librerías de componentes comunes
Salesforce, Yelp y Mapbox todos tienen extensivas librerías de iconos para sus apps. Tu gúia de estilo debería también contener elementos de UI que se usen a través de toda tu app.

Otros items obvios para considerar son colores, selectores, títulos, encabezados, textos de cuerpo, etc. Si estás usando un estilo especial para marketing, puedes considerar ponerlo en tu guía de estilo y etiquetarlo apropiadamente. Está bien si no estás completamente seguro de un item en particular, puedes refinar los elementos de UI en tu sistema de diseño después cuando la oportunidad llegue, y actualizar la guía correctamente. No te olvides, la guía de estilo es un documento viviente, especialmente en un startup.

Elementos de formularios web en la guía de estilo

Eventualmente, cuando comienzo a poner layouts en la guía, sé que estoy comenzando a alcanzar un punto donde todos los componentes deberían estar cerca de su estado final. Esta parte marca el momento crítico del proceso de creación de la guía de estilo–¡ahora puedes celebrar! Una buena forma de celebrar semejante logro es crear un logo o icono (considera ponerle un nombre) para la versión 1.0 de la guía.

Algunas personas hasta imprimen el logo/icono como un sticker para que el equipo tenga algo similar a un trofeo. Ese también es el punto donde usualmente voy hacia la forma más tradicional de trabajar con la guía la cual es abrir dicha guía primero, y luego crear un nuevo archivo para cualquier interfaz sea necesaria.

Conclusión


Como diseñador, al crear una guía de estilo tan temprano sea posible, te estarás asegurando de que tu startup se adhiera a un estándar bastante alto de calidad. Podrá ser desafiante, pero vale la pena todo el esfuerzo puesto en ella. Una guía sólida y bien hecha no sólo te ayudará a tener un buen producto, sino que también reducirá el costo desarrollo.

Hay una forma de haxer esto posible en un ambiente acelerado donde se toman decisiones rápidas y donde a veces los diseños deben cambiar rápidamente. Con suerte, el proceso descrito anteriormente ayudará a diseñadores en cualquier startup a lidiar con los desafíos de complejidad y velocidad y al mismo tiempo crear una guía de estilo fuerte para el beneficio del producto.

https://www.toptal.com/designers/ux/porque-los-startups-necesitan-una-guía-de-estilo/es

domingo, 9 de julio de 2017

Programación Visual con Node-Red: Conectando el Internet de las Cosas con Facilidad

by Jesus Dario Rivera - Freelance Software Engineer @ Toptal (translated by Marisela Ordaz) - Utilizado con permiso

A través de la programación, hacemos que las máquinas imiten un comportamiento complejo siguiendo secuencias de instrucciones simples. Utilizar lenguajes de programación textual como Asambly, C, Python y JavaScript, es una de las formas principales de hacerlo.

Los diseñadores de estos lenguajes de programación han pasado horas y horas tratando de hacer que la experiencia de los programas de escritura sean lo más fácil posible a través de una sintaxis expresiva, fuertes construcciones de programación y cadenas de herramientas poderosas.

Sin embargo, todos estos lenguajes de programación comparten un rasgo común: el código fuente textual.

Escribir programas en texto funciona y en la mayoría de los casos funciona bien. Sin embargo, la capacidad de expresar programas visualmente es a menudo deseable. Ser capaz de diseñar el flujo de información a través de diversos componentes de un sistema más grande es normalmente todo lo que se necesita.

Las herramientas visuales de programación también son indulgentes con cualquier persona que sea nuevo en la programación y que les es difícil manejar diversos conceptos como las variables, indicadores, señales, alcances, y así sucesivamente.

Connect Hardware Devices With APIs Using Node-RED

Node-RED es una herramienta de programación visual. Muestra visualmente las relaciones y funciones, y permite al usuario programar sin tener que escribir una lengua. Node-RED es un editor de flujo basado en el navegador donde se puede añadir o eliminar nodos y conectarlos entre sí con el fin de hacer que se comuniquen entre ellos.

En Node-RED, cada nodo es uno de los siguientes dos tipos: un nodo de inyección o un nodo de función. Los nodos de inyección producen un mensaje sin necesidad de entrada y lanzan el mensaje al siguiente nodo conectado a éste. Los nodos de función, por el contrario, tienen una entrada y realizan algún trabajo en él. Con una gran cantidad de estos nodos para elegir, Node-Red hace que el conectar los dispositivos de hardware, APIs y servicios en línea sea más fácil que nunca.

Primeros Pasos con el Node-Red

Node-Red se basa en Node.js. Para instalar el Node-Red, necesitas tener tanto Node.js instalado como NPM. Con NPM, es muy fácil instalar Node-Red: npm install -g node-red

El editor de flujo de Node-Red es una aplicación basada en navegadores web. Para poder utilizarlo, ejecuta Node-Red:
npm install -g node-red

Node-RED’s flow editor is a web browser based application. To be able to use it, run Node-RED:
node-red
&hellip y vaya a http: // localhost: 1880.

¡Hola Mundo!


¿Qué tutorial de programación para principiantes está completo sin aprender a decir “Hola, mundo”? Vamos a empezar por probar exactamente eso:
  1. Arrastra y suelta un nodo de inyección en el editor de flujo. Después, haz doble clic y fija la carga útil como cadena y escribe “Hola mundo”.
  2. Arrastra y suelta un nodo de depuración, de la misma manera como lo hiciste con la inyección.
  3. Conéctalos.
  4. Haz clic en el botón “Deploy” en la esquina derecha.
  5. Haz clic en el botón azul justo a la izquierda del nodo de inyección.
Inténtalo. Verás algo como esto:



Sólo JavaScript

Con Node-Red, no te limites con simples nodos y funcionalidades. Como Node-Red está construido sobre Node.js, todo está impulsado por JavaScript. Los nodos son, de hecho, Node.js módulos. Se pueden encontrar en http://flows.nodered.org/, entonces para añadirlos a tu panel de la izquierda se pueden simplemente “instalar con NPM “. De hecho, puedes desarrollar tu propio flujo y subirlos al repositorio de flujo. Las aplicaciones pueden ser tan complejas como desees ya que puedes escribir JavaScript en los nodos de función dentro del editor de código que proporciona Node-Red.

Ya que la plataforma se basa en Node.js, ésta se aprovecha del mismo modelo orientado a eventos y sin bloqueos. Así que una aplicación construida en Node-Red puede ejecutarse en hardware de bajo costo como el Raspberry Pi, así como en la nube.

Ahora Nos Vamos a Meter en las Grandes Ligas: Es hora de Automatizar el Hogar

Para demostrar cómo Node-Red se ajusta en el ámbito del Internet de las Cosas, vamos a construir una aplicación para cambiar el color de una bombilla inteligente. No todo el mundo puede tener el mismo sistema de iluminación inteligente a su disposición, pero no hay nada de qué preocuparse, ya que se puede encontrar el módulo Node-Red apropiado desde el repositorio oficial de flujo. Sin embargo, para hacer las cosas aún más fácil vamos por algo más inteligente.

Déjmae presentarte a Netbeast. Es una plataforma de código abierto para el desarrollo de aplicaciones para los aparatos y dispositivos del Internet de las cosas sin tener que preocuparse por los detalles como los protocolos inalámbricos, compatibilidad de marca, o tener que saber cómo tratar con cada API específica que existe. ¡Nos permite utilizar los dispositivos virtuales que actúan como los de verdad! Así que incluso si no tienes una bombilla inteligente, tienes una virtual disponible.

Podemos instalar el paquete de NPM de Netbeast para Node-Red a nivel mundial así:
npm install -g node-red-contrib-netbeast

El netbeast-red node representará el panel de control Netbeast, lo que traducirá sus primitivas API para todos los dispositivos inteligentes que tienes en casa. ¡Afortunadamente, también está disponible como un módulo!

Inicia Netbeast:
npm install -g netbeast-cli
netbeast start

Esto hará que el panel esté disponible en el puerto 8000 y SSL en 8443. A continuación, abre el navegador a http://localhost:8000 y navega a Explore. Ahí podemos encontrar muchas aplicaciones y plugins. Busca las marcas de tus bombillas inteligente (Philips Hue, LIFX, Wemo) o si no tienes una, intenta descargar el plugin de la bombilla. ¡Comprueba que los plugins del panel contienen uno de estos!


La insignia amarilla indica que los plugins se están ejecutando, pero no pueden encontrar ningún dispositivo. Haz clic en el plugin de la bombilla para crear una bombilla virtual. Cualquier otro dispositivo que se descubra debe aparecer en la red.

Con todo en su lugar, volvamos al trabajo. Haremos un flujo simple:
  1. Arrastra y suelta un nodo de inyección.
  2. Arrastra y suelta el nodo Netbeast.
  3. Arrastra y suelta un nodo de depuración.
  4. Conecta todo como se muestra a continuación:


Ahora vamos a enviar una petición HTTP al panel de control. Al usar la API Netbeast se tendrá que enviar a través del nodo de inyección un JSON que contiene los valores que queremos que se activen en nuestra bombilla.



¡Presiona el botón para inyectar el color y la energía a todas tus bombillas inteligentes!


Cada tema representa un tipo diferente de dispositivo. Así que hay temas no solo para las luces, sino también para la música, calefacción, y el vídeo; así como sensores para la humedad, la presencia, la temperatura, y la lista continúa. Puedes encontrar en tu documentación una lista de temas y su estructura recomendada para ser traducido a todo tipo de dispositivos. Este motor de la IO es novato, pero potente. Un código abierto que permite a los desarrolladores reutilizar la información para crear escenarios realmente conectados, siendo de este modo inteligente.

Ahora Adentrémonos Más

A continuación, vamos a crear un segundo flujo usando otro plugin, un detector de ruido ambiental para utilizarlo como un iniciador para cambiar el color de la bombilla como un semáforo de ruido. En este tutorial vamos a utilizar uno virtual, así que no hay necesidad de comprar un nuevo hardware.

Vamos a empezar haciendo clic en el botón “más” en el editor de Node-Red.

Ve de nuevo al Panel http://localhost:8000/explore a la sección Explorar y busca Volume-Plugin. Se trata de una aplicación web muy rudimentaria que se aprovecha de getUserMedia() dentro del navegador para capturar la información multimedia desde una simple aplicación HTML. Por lo tanto, es probable que sólo funcione en los navegadores modernos.

Haz clic en él para abrir, al igual que con la bombilla virtual. En él se solicita permiso para grabar desde el micrófono. A continuación, enviará los mensajes al intermediario MQTT de Netbeast, que será compartido a través de todo el panel de control, y así podremos suscribirnos. Para lograr esto sólo necesitaremos arrastrar y soltar un nodo de netbeast-trigger en el editor node red. A continuación, vamos a insertar una función entre el trigger y el nodo Netbeast, para decidir cuando está demasiado alto y cuando no. Además, deberíamos utilizar algunos nodos de depuración para comprobar si todo está bien. El esquema ahora se verá algo como esto:



Ahora, vamos a introducir algún código en el nodo de función tooLoud. Sí, sé que prometí que podrías programar sin necesidad de codificar, ¡pero ya he demostrado que puedes! Y se puede tratar de combinar los diferentes elementos disponibles u otros nodos del registro para llevar a cabo lo siguiente.
var volume = msg.payload.volume

node.log(volume)

if (volume < 50) {
    return { topic: 'lights', payload: { power: 1, color: '#00CC00'}}
} else if (volume < 75) {
    return { topic: 'lights', payload: { power: 1, color: '#CCCC00'}}
} else {
    return { topic: 'lights', payload: { power: 1, color: '#FF0000'}}
}
Este fragmento de código bastante simple está regresando una de las tres cargas útiles para el siguiente nodo con un código de color específico, dependiendo del nivel de volumen reportado por el nodo anterior.

¡Ahora estamos listos para continuar! Vamos a presionar el botón Deploy de nuevo y armemos un griterío. ¡Veamos cómo cambia la bombilla de un color a otro de inmediato!

Ya que el micrófono y el navegador web que estás utilizando podrían ser diferentes, no dudes en ajustar los valores de la función y umbrales, y también juega con los valores de color para ver cómo cambia tus bombillas.

Crea tus Propios Plugins



Esta bombilla en CSS puro se inspiró en éste cssdeck.

Como habrás notado, la bombilla virtual anterior es muy rudimentaria, por lo que es posible que desees modificarla. O mejor aún, puedes crear tus propios controladores para un hogar inteligente.

Así que vamos a pasar por el proceso de crear un plugin virtual para Netbeast, lo que te permitirá crear tus propios controles para dispositivos inteligentes.

Puedes utilizar el paquete netbeast-cli para generar como por arte de magia algunos códigos.

Mediante la ejecución de netbeast create myplugin --plugin tendríamos un proyecto básico como el siguiente:
myplugin
├── README.md
├── index.js
├── package.json
└── test.js
 

Frontend

Ahora, vamos a empezar a mimetizar la bombilla con un frontend. Los controladores de dispositivos por lo general no van a tener uno, así que el comando de andamio no incluye una carpeta pública todavía. Vamos a crear un directorio public dentro del proyecto y colocamos allí los siguientes archivos HTML, CSS y JS.

index.html

<head>
  <title>Netbeast Bulb Plugin</title>
  <link rel="stylesheet" href="bulb.css" media="screen" charset="utf-8">
</head>

<body>
  <div class="top-decoration"></div>
  <div id="plugin front-end">
  </div>
  <div class="bulb-container small">
    <div class="bulb light">
      <div id="bulb">
        <div class="bulb top"></div>
        <div class="bulb middle-1"></div>
        <div class="bulb middle-2"></div>
        <div class="bulb middle-3"></div>
        <div class="bulb bottom"></div>
      </div>
      <div id="base">
        <div class="screw-top"></div>
        <div class="screw a"></div>
        <div class="screw b"></div>
        <div class="screw a"></div>
        <div class="screw b"></div>
        <div class="screw a"></div>
        <div class="screw b"></div>
        <div class="screw c"></div>
        <div class="screw d"></div>
      </div>
    </div>
  </div>
    <div class="code-container">
      <pre><i class="txt-red">beast</i>(<i 
        class="txt-green">'lights'</i>).<i  
        class="txt-blue">set</i>({
  <i class="txt-green">color</i>: <i  
    class="txt-green">"<input id="color" type="text" 
    class="color" name="color" value="00fea5">"</i>,
  <i class="txt-green">power</i>: <i  
    class="txt-green">"<input id="power" type="text" 
    class="power" name="power" value="on">"</i>
})</pre>
    <button id="run-btn">
      RUN
    </button>
  </div>

  
  <script type="text/javascript" src="bulb.js"></script>
  
  <script type="text/javascript" src="socketio.js"></script>
  
  <script type="text/javascript" src="hw-api.js"></script>
</body>

bulb.css

section {
  float: left;
  padding: 20px 50px 20px 50px;
}

.bulb-light {
  border: 0;
  background: transparent;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block;
  z-index: 1;
}

#bulb { opacity: 1; z-index: 3; display: block;}

.bulb.top {
  border: 0;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  padding: 0;
  border-radius: 999px;
  background: #E7E7E7;
}

.bulb.middle-1 {
  margin: -75px auto 0 auto;
  width: 190px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 55px solid #E7E7E7;
}

.bulb.middle-2 {
  margin: -22px auto 0 auto;
  width: 178px;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-top: 50px solid #E7E7E7;
}

.bulb.middle-3 {
  margin: -20px auto 0 auto;
  width: 182px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 30px solid #E7E7E7;
}

.bulb.bottom {
  width: 184px;
  height: 65px;
  margin: -8px auto 0 auto;
  padding: 0;
  border-radius: 0 0 999px 999px;
  background: #E7E7E7;
}

#base { position:relative; z-index: 2; }

.screw {
  transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  padding: 0;
}

.screw-top {
  margin: -18px auto -4px auto;
  padding: 0;
  width: 132px;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 21px solid #D3D3D3;
  border-radius: 999px;
}

.screw.a {
  background: #DDD;
  width: 150px;
  height: 15px;
  border-radius: 999px;
  margin: -1px auto 0px;
}

.screw.b {
  background: #D9D9D9;
  width: 135px;
  height: 15px;
  margin: -1px auto 0px;
}

.screw.c {
  margin: -1px auto 0px;
  width: 78px;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 20px solid #DDD;
  border-radius: 8px;
}

.screw.d {
  margin: 0 auto;
  width: 15px;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 15px solid #444;
}

.on #light {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

.bulb.top, .bulb.bottom {
  transition: all 0.5s ease-in-out;
}

.bulb.middle-1, .bulb.middle-2, .bulb.middle-3 {
  transition: all 0.5s ease-in-out;
}
Con estos archivos HTML y CSS, ya se debería poder ver una forma de bombilla en tu navegador. ¡Abre el archivo HTML para ver en vivo! ¿Está funcionando? Bien, ahora vamos a darle algunas funciones.

bulb.js

Este archivo imitará el comportamiento de una bombilla con un simple clic de encendido. Al hacer click para apagarla, establecerás un par de funciones que serán utilizadas un poco después para cambiar su color a través de Netbeast.
var color = document.getElementById('color')
var power = document.getElementById('power')
var bulb = document.getElementById('bulb')
var button = document.getElementById('run-btn')
var light = document.getElementById('light')

button.onclick = function toggleBulbState () {
  changeBulbParams({ color: color.value, power: power.value })
}

function setBulbParams (params) {
  if (params.power === 'off') {
    params = { color: 'E7E7E7' }
  }
  console.log('set params', params)

  var bulb_parts = ['.bulb.middle-1', '.bulb.middle-2', '.bulb.middle-3']

  document.querySelector('.bulb.top').style.boxShadow = '0px 0px 98px #'
  params.color

  document.querySelector('.bulb.top').style.backgroundColor = params.color
  document.querySelector('.bulb.bottom').style.backgroundColor = params.color
  bulb_parts.forEach(function (className) {
    document.querySelector(className).style.borderTopColor = params.color
  })
}

function changeBulbParams (params) {
  console.log('change params', params)
  /* Overwrite html fields if necessary */
  color.value = params.color || color.value
  power.value = params.power || power.value
  setBulbParams({color: color.value, power: power.value})
}
Luego, todo comenzará a tener sentido: los campos y el botón de ejecución, ¡ahora podrás comenzar a probar los diferentes colores de tu nueva bombilla virtual! Sin embargo, la razón por la que vinimos hasta aquí es para hacer otro dispositivo de nuestro ecosistema del Internet de las Cosas.

hw-api.js

El último de front-end JS realizado por nosotros mismos, simula una conexión inalámbrica con el servidor, como lo haría un WiFi o bombilla Bluetooth con su mando a distancia, tales como un teléfono, un servidor o un hub. ¡Es la interfaz que el código plugin utilizará para controlarlo!
var socket = io.connect()

socket.on('connect', function () { console.log('ws:// bulb is online') })
socket.on('disconnect', function () { console.log('ws:// connection with 
           bulb lost') })

socket.on('set', function (params) {
   changeBulbParams(params) // uses functions from bulb.js!
})

socket.on('get', function () {
  const params = { power: power.value, color: color.value }
  socket.emit('params', params)
})
Por último, necesitamos que la biblioteca WebSocket sea incluida en nuestro HTML para que la interfaz esté lista. Puedes copiar el código fuente de https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js y pegarlo en un archivo llamado socketio.js. Desde un terminal con curl o wget, lo puedes hacer así de simple:
curl https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/
             socketio.js  > public/socketio.js
Tendríamos ahora una estructura de archivos que se ve así:
myplugin
├── README.md
├── index.js
├── package.json
├── public
│   ├── bulb.css
│   ├── bulb.js
│   ├── hw-api.js
│   ├── index.html
│   └── socketio.js
└── test.js

Backend

Ahora vamos a implementar la interfaz con el dispositivo y registrarlo en el motor Netbeast. Éste escuchará los websockets para detectar si alguna bombilla se ha instalado en la red, y luego hará un POST a la API del panel de control para que los nuevos recursos estén disponibles.
Por eso, vamos a echar un vistazo a los archivos que generamos antes:

package.json

Este archivo contiene todas las dependencias y la información necesaria para ejecutar tu aplicación. Netbeast utiliza el habitual package.json también para recuperar cierta información, como el nombre o el tipo. ¡Es importante especificar que este paquete es un plugin!
{
  "name": "myplugin",
  "version": "0.0.0",
  "description": "Netbeast plugin for... ",
  "main": "index.js",
  "netbeast": {
    "bootOnLoad": true,
    "type": "plugin"
  },
  "dependencies": {
    "bluebird": "^3.3.5",
    "body-parser": "^1.15.0",
    "express": "^4.13.4",
    "minimist": "^1.2.0",
    "mocha": "^2.3.2",
    "morgan": "^1.6.1",
    "netbeast": "^1.0.6",
    "socket.io": "^1.4.5",
    "superagent": "^1.8.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "node test.js",
    "start": "node index.js"
  },
  "repository": {
    "type": "git",
    "url": "GITHUB_REPOSITORY"
  },
  "keywords": [
    "iot",
    "netbeast",
    "plugin"
  ],
  "author": "YOUR_EMAIL",
  "license": "GPL 3",
  "bugs": {
    "url": "ISSUES_CHANNEL"
  },
  "homepage": "HOMEPAGE"
}

index.js

¡Éste es el código que se trae desde el panel de control de Netbeast para lanzar el plugin! Éste tendrá que aceptar el puerto a través de argumentos de línea de comando para saber dónde aceptar peticiones entrantes. Se lanzará como si escribiéramos node myplugin.js --port . ¡Recuerda tomar en cuenta el hashbang al principio! #!/usr/bin/env node.
#!/usr/bin/env node

var io = require('socket.io')()
var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// Netbeast apps need to accept the port to be launched by parameters
var argv = require('minimist')(process.argv.slice(2))

app.use(express.static('public')) // will serve our app in an HTTP server
app.use(bodyParser.json()) // will parse JSON API calls
app.use('/api', require('./plugin')(io)) 

var server = app.listen(argv.port || 31416, function () {
  console.log('Bulb plugin listening at http://%s:%s', server.address().address,
  server.address().port)
})

// we need websockets to push updates to browser view
io.listen(server)
Como se puede ver nos faltaba un archivo por iniciar, el que realmente implementa los controladores socket.io. ¡Nada sofisticado!

plugin.js

var express = require('express')
var netbeast = require('netbeast')

var router = express.Router()
var bulbParams // auxiliar variable, nasty way to transmit changes, but works

module.exports = function (io) {
  io = io
  
  // Create resource that works on lights topic and listens on /api route
  netbeast('lights').create({ app: 'myplugin', hook: '/api' })

  io.on('connection', function () { 
   console.log('ws:// bulb has connected to plugin') 
  })

  io.on('disconnection', function () { 
   console.log('ws:// bulb has disconnected from plugin') 
  })

  io.on('connect_failure', function (err) { console.trace(err) })

  router.post('/', function (req, res) {
    io.emit('set', {
      power: req.body.power,
      color: req.body.color,
    })
    res.status(200).json(req.body)
  })

  router.get('/', function (req, res) {
    io.emit('get')
    var timerReference = setTimeout(function () {
      if (bulbParams) {
        res.json(bulbParams)
      } else {
        res.status(200).json({ error: 'No bulb available' })
      }
    }, 3000)
  })

  return router
}

Inicia tu Aplicación

Ahora es el momento de probar la aplicación. Puedes empaquetarlo todo en un formato tar.gz y luego subir la aplicación a tu panel de control en la sección de arrastrar y soltar http://localhost:8000/install.
beast package # Compresses your app when ran in myplugin dir
¡Voilà! Ahora puedes ir a tus plugins y probarlo. Ve a la sección de red (http://localhost:8000/devices) para ver su funcionamiento y cambiar su color a partir de ahí.


Si algo sale mal o piensas que podrías haber olvidado un detalle, trata de ejecutar localmente con el nodo node index.js, y tal vez será más fácil de depurar que dentro del registro netbeast start.

Publicar su trabajo

Si deseas que la aplicación aparezca en el panel de control de la sección Explore de Netbeast, debes crear un repositorio en GitHub con la aplicación o plug-in de Netbeast, ambos incluidos en la descripción y README.md.
Para encontrar las aplicaciones que hacemos, usa la API de búsqueda de GitHub. Vemos los mismos resultados que aparecen cuando se realiza una solicitud GET a:https://api.github.com/search/repositories?q=netbeast+language:javascript
¡Sabrás que se mostrará tu aplicación, si parece hay!

¿Qué sigue?

Ambos proyectos son de open source y realmente han involucrado a las comunidades. Si deseas comenzar a crear tus propios flujos o nodos al Node-Red, echa un vistazo a su documentación oficial. Sigue los pasos descritos allí y podrás publicar tu propio nodo o flujo en poco tiempo.
Por otro lado, si quieres entrar en el interior Netbeast, puedes seguir su documentación también o echar un vistazo al repositorio del panel. Al usar la API Netbeast, no tienes que centrarte en los dispositivos individuales, marcas o tecnologías, así que dale una oportunidad. Puedes aprender más sobre esto en NetBeast.co y unirte a su Slack channel para discutir Node-RED, IoT o Node.js.
Si deseas instalar esto en una Raspberry Pi, Beagle Bone o servidor antiguo, lo convertirías en un Smart Hub fácil de hackear, ¡sin código! Hay instaladores ya hechos para ellos en ambos sitios.

Feliz hacking.

https://www.toptal.com/nodejs/programación-visual-con-node-red-conectando-el-internet-de-las-cosas-con-facilidad/es