31 Oct 2016

Guía para Desarrolladores iOS: Desde Objective-C hasta Swift

Clases y Estructuras

A diferencia de Objective-C, Swift no requiere que crees documentos de interfaz e implementación por separado para clases y estructuras personalizadas. Mientras aprendes sobre Swift, aprenderás a definir una clase o estructura en un solo documento y la interfaz externa para esa clase o estructura se hace disponible automáticamente para el uso de otro código.

Definir Clases

Las definiciones de clase son my sencillas:

class Bottle
{
   var volume: Int = 1000
   
   func description() -> String
   {
       return "This bottle has \(volume) ml"
   }
}
let b = Bottle()
print(b.description())

Como puedes ver, declaración e implementación están en el mismo documento. Swift ya no utiliza un encabezado ni documentos de implementación. Agreguemos una etiqueta a nuestro ejemplo:

class Bottle
{
   var volume: Int = 1000
   var label:String
   
   func description() -> String
   {
       return "This bottle of \(label) has \(volume) ml"
   }
}

El compilador se quejará, ya que la etiqueta es una variable no-opcional, y ésta no mantendrá un valor cuando se ejemplifica una Bottle (Botella). Necesitamos agregar un inicializador:

class Bottle
{
   var volume: Int = 1000
   var label:String
   
   init(label:String)
   {
       self.label = label
   }

   func description() -> String
   {
       return "This bottle of \(label) has \(volume) ml"
   }
}

O podríamos usar tipo Opcional para una propiedad, el cual no necesita ser inicializado. En el siguiente ejemplo convertimos en volumen un Número entero Opcional:

class Bottle
{
   var volume: Int?
   var label:String
   
   init(label:String)
   {
       self.label = label
   }

   func description() -> String
   {
        if self.volume != nil
        {   
               return "This bottle of \(label) has \(volume!) ml"
           }
           else
           {
               return "A bootle of \(label)"
           }
   }
}

Estructuras

El lenguaje Swift también tiene structs, pero son mucho más flexibles que en Objective-C. El siguiente tutorial de código define un struct:

struct Seat
{
    var row: Int
    var letter:String
    
    init (row: Int, letter:String)
    {
        self.row = row
        self.letter = letter
    }
    
    func description() -> String
    {
        return "\(row)-\(letter)"
    }
}

Como las clases en Swift, las estructuras pueden tener métodos, propiedades, inicializadores y se ajustan a los protocolos. La diferencia principal entre clases y estructuras es que las clases se pasan por referencia, mientras que las estructuras lo hacen por valor.

Este ejemplo demuestra el pasar las clases por referencia:

let b = Bottle()
print(b.description())    // "b" bottle has 1000 ml

var b2 = b
b.volume = 750
print(b2.description())    // "b" and "b2" bottles have 750 ml

Si intentamos hacer algo similar con struct, notarás que las variables se pasan con valores:

var s1 = Seat(row: 14, letter:"A")
var s2 = s1
s1.letter = "B"
print(s1.description())    // 14-B
print(s2.description())    // 14-A

¿Cuándo debemos usar struct y cuándo usamos class? Al igual que en Objective-C y C, usa structs cuando necesites agrupar algunos valores y espera que sean copiados en vez de referenciados o colores RGB.

La instancia de una clase es conocida tradicionalmente como un objeto. Sin embargo, las clases y estructuras Swift son mucho más cercanas en funcionalidad que en otros lenguajes y se puede aplicar mucha funcionalidad a instancias de tipo estructura o clase. Por esto, el término más general utilizado en referencia Swift es instancia, el cual se aplica a cualquiera de estos dos.

Aprende lo básico sobre las clases y estructuras Swift aquí.

Propiedades

Como vimos anteriormente, las propiedades en Swift se declaran con la palabra clave var dentro de la definición de una clase o estructura. También podemos declarar con la instrucción let.

struct FixedPointNumber
{
    var digits: Int
    let decimals: Int
}

var n = FixedPointNumber(digits: 12345, decimals: 2)
n.digits = 4567    // ok
n.decimals = 3     // error, decimals is a constant

También ten en cuenta que las propiedades de la clase son fuertemente referenciadas, a menos que uses el prefijo weak como palabra clave. Sin embargo, hay algunas sutilezas con propiedades no-opcionales de weak, así que lee el capítulo Contabilidad de referencia automática en la Guía Swift de Apple..

Propiedades Calculadas

Las propiedades calculadas no almacenan un valor. Por el contrario, proporcionan un getter y un setter opcional para recuperar y establecer otras propiedades y valores indirectamente.

El siguiente código proporciona un ejemplo de un valor calculado sign:

enum Sign
{
    case Positive
    case Negative
}

struct SomeNumber
{
    var number:Int
    var sign:Sign
    {
        get
        {
            if number < 0
            {
                return Sign.Negative
            }
            else
            {
                return Sign.Positive
            }
        }
        
        set (newSign)
        {
            if (newSign == Sign.Negative)
            {
                self.number = -abs(self.number)
            }
            else
            {
                self.number = abs(self.number)
            }
        }
    }
}

También podemos definir propiedades de solo lectura con solo implementar un getter:

struct SomeNumber
{
    var number:Int
    var isEven:Bool
    {
        get
        {
            return number % 2 == 0
        }
    }
}

En Objective-C, las propiedades usualmente se respaldan con una variable de instancia, declarada explícitamente o creada automáticamente por el compilador. Por otra parte, en Swift, una propiedad no tiene una variable de instancia correspondiente. Es decir, no se puede acceder directamente al almacén de respaldo de una propiedad. Supón que tenemos esto en Objective-C:

// .h
@interface OnlyInitialString : NSObject

@property(strong) NSString *string;

@end

// .m

@implementation OnlyInitialString

- (void)setString:(NSString *newString)
{
    if (newString.length > 0)
    {
        _string = [newString substringToIndex:1];
    }
    else
    {
        _string = @"";
    }
}

@end

Ya que en Swift las propiedades calculadas no tienen un almacén de respaldo, necesitamos algo como esto:

class OnlyInitialString
{
    var initial:String = ""
    var string:String
    {
        set (newString)
        {
            if countElements(newString) > 0
            {
                self.initial = newString.substringToIndex(advance(newString.startIndex, 1))
            }
            else
            {
                self.initial = ""
            }
        }
        get
        {
            return self.initial
        }
    }
}

Las propiedades se explican con más detalle aquí

 

Continuará

Hay muchas cosas más importantes y nuevas que aprender en Swift como programación genérica, interacción con las bibliotecas Objective-C, cierres, optional chaining y sobrecarga de operadores. Un solo tutorial no puede describir completamente un nuevo lenguaje, pero no tengo dudas de que se escribirá mucho más sobre programación Swift. Sin embargo, creo que esta lectura rápida ayudará a muchos desarrolladores Objective-C, quienes no han encontrado el tiempo, ni detalles de aprendizaje sobre el lenguaje Swift, ponte en marcha y deja que el pájaro Swift te lleve a nuevas alturas.

 

El artículo original lo pueden encontrar en Totpal.

 

12 Oct 2016

Un Tutorial Paso-a-Paso para tu Primera Aplicación AngularJS

Cargando Datos del Servidor

Como ya sabemos cómo mostrar los datos de nuestro controlador en nuestra vista, es momento de traer datos en vivo desde un servidor RESTful.

Para facilitar la comunicación con los servidores HTTP, AngularJS proporciona los servicios $http y $resource. El primero es una capa en la parte superior de XMLHttpRequest o JSONP, mientras que el último proporciona un mayor nivel de abstracción. Vamos a utilizar $http.

Para abstraer nuestras llamadas a la API del servidor desde el controlador vamos a crear nuestro propio servicio personalizado, el cual va a capturar los datos y actuará como una envoltura alrededor de $http al añadirlo a nuestro services.js:

angular.module('F1FeederApp.services', []).
  factory('ergastAPIservice', function($http) {

    var ergastAPI = {};

    ergastAPI.getDrivers = function() {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    return ergastAPI;
  });

Con las dos primeras líneas, creamos un nuevo módulo (F1FeederApp.services) y registramos un servicio dentro de ese módulo (F1FeederApp.services). Nótese que pasamos $http como parámetro a ese servicio. Esto le dice al motor de inyección de dependenciade Angular, que nuestro nuevo servicio requiere (o depende) del servicio $http.

De una manera similar, tenemos que decirle a Angular que incluya nuestro nuevo módulo en nuestra aplicación. Vamos a registrarlo con app.js, reemplazando nuestro código existente con:

angular.module('F1FeederApp', [
  'F1FeederApp.controllers',
  'F1FeederApp.services'
]);

Ahora, lo único que tenemos que hacer es ajustar nuestra controller.js un poco, integrar ergastAPIservicecomo una dependencia, y estaremos listos para continuar:

angular.module('F1FeederApp.controllers', []).
  controller('driversController', function($scope, ergastAPIservice) {
    $scope.nameFilter = null;
    $scope.driversList = [];

    ergastAPIservice.getDrivers().success(function (response) {
        //Dig into the responde to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
  });

Ahora, recarga la aplicación y revisa el resultado. Observa que no hicimos ningún cambio en nuestra plantilla, pero añadimos una variable nameFilter a nuestro alcance. Vamos a poner esta variable en uso.

Filtros

¡Estupendo! Tenemos un controlador funcional. Pero sólo muestra una lista de conductores. Vamos a añadir algunas funciones mediante una simple entrada de búsqueda de texto, que filtrará la lista. Vamos a añadir la siguiente línea a nuestro index.html, justo debajo de la etiqueta <body>:

<input type="text" ng-model="nameFilter" placeholder="Search..."/>

Ahora estamos haciendo uso de la directriz ng-model. Esta directriz une nuestro campo de texto a la variable $scope.nameFilter y se asegura de que su valor esté siempre al día con el valor de entrada. Ahora, vamos a visitar index.html una vez más y hagamos un pequeño ajuste en la línea que contiene la directriz ng-repeat:

<tr ng-repeat="driver in driversList | filter: nameFilter">

Esta línea le dice a ng-repeat que, antes de dar salida a los datos, la matriz driversList debe ser filtrada por el valor almacenado en nameFilter.

En este punto, entran los datos bidireccionales binding: cada vez que un valor se introduce en el campo de búsqueda, Angular asegura inmediatamente que el $scope.nameFilter que asociamos a él se actualice con el nuevo valor. Dado que binding funciona en ambos sentidos, el momento en el que el valor nameFilter se actualiza, la segunda directriz asociada a la misma (es decir, ng-repeat) también recibe el nuevo valor y la vista se actualiza inmediatamente.

Actualiza la aplicación y observa la barra de búsqueda.

Observa que éste filtro buscará la palabra clave en todos los atributos del modelo, incluyendo los que no estamos usando. Digamos que sólo queremos filtrar Driver.givenName y Driver.familyName: En primer lugar, añadimos a driversController, justo por debajo de la línea $scope.driversList =[];:

$scope.searchFilter = function (driver) {
    var keyword = new RegExp($scope.nameFilter, 'i');
    return !$scope.nameFilter || keyword.test(driver.Driver.givenName) || keyword.test(driver.Driver.familyName);
};

Ahora, de vuelta a index.html, actualizamos la línea que contiene la directriz ng-repeat:

<tr ng-repeat="driver in driversList | filter: searchFilter">

Actualiza la aplicación una vez más y ahora tenemos una búsqueda por nombre.

Rutas

Nuestro próximo objetivo es crear una página de datos del conductor, la cual nos permitirá hacer clic en cada conductor y ver los detalles de su carrera.

En primer lugar, vamos a incluir el servicio $routeProvider (en app.js) lo que nos ayudará a lidiar con estas variadas rutas de aplicación. A continuación, añadiremos dos de estas rutas: una para la tabla del campeonato y otro para los datos del conductor. Aquí está nuestra nueva app.js:

angular.module('F1FeederApp', [
  'F1FeederApp.services',
  'F1FeederApp.controllers',
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
	when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).
	when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}).
	otherwise({redirectTo: '/drivers'});
}]);

Con éste cambio, la navegación hacia http://domain/#/drivers cargará el driversController y buscará la vista parcial que se va a renderizar en partials/drivers.html. ¡Pero espera! No tenemos ninguna vista parcial todavía, ¿verdad? Vamos a tener que crearlas también.

Vistas Parciales

AngularJS te permitirá unir tus rutas a los controladores y vistas específicas.

Pero primero, tenemos que decirle a Angular dónde renderizar estas vistas parciales. Para ello, usaremos la directriz ng-view, modificando nuestra index.html para reflejar lo siguiente:

<!DOCTYPE html>
<html>
<head>
  <title>F-1 Feeder</title>
</head>

<body ng-app="F1FeederApp">
  <ng-view></ng-view>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
</body>
</html>

Ahora, cada vez que naveguemos a través de nuestras rutas de aplicaciones, Angular cargará la vista asociada y la renderizará en lugar de la etiqueta <ng-view>. Lo único que tenemos que hacer es crear un archivo con el nombre partials/drivers.html, y poner nuestra tabla de campeonato HTML allí. También vamos a utilizar esta oportunidad para vincular el nombre del conductor a nuestra ruta de los detalles del conductor:

<input type="text" ng-model="nameFilter" placeholder="Search..."/>
<table>
<thead>
  <tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
  <tr ng-repeat="driver in driversList | filter: searchFilter">
	<td>{{$index + 1}}</td>
	<td>
  	<img src="img/flags/{{driver.Driver.nationality}}.png" />
   	<a href="#/drivers/{{driver.Driver.driverId}}">
   	    	{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
   	  </a>
   	</td>
   <td>{{driver.Constructors[0].name}}</td>
   <td>{{driver.points}}</td>
  </tr>
</tbody>
</table>

Por último, vamos a decidir lo que queremos mostrar en la página de detalles. ¿Qué tal un resumen de todos los hechos relevantes sobre el conductor (por ejemplo, fecha de nacimiento, nacionalidad), junto con una tabla que contiene sus resultados recientes? Para hacer eso, añadimos a services.js, lo siguiente:

angular.module('F1FeederApp.services', [])
  .factory('ergastAPIservice', function($http) {

    var ergastAPI = {};

    ergastAPI.getDrivers = function() {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverDetails = function(id) {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverRaces = function(id) {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'
      });
    }

    return ergastAPI;
  });

Esta vez, proporcionamos la identificación del conductor al servicio para que podamos recuperar la información relevante de un conductor específico. Ahora, modificamos controllers.js:

angular.module('F1FeederApp.controllers', []).

  /* Drivers controller */
  controller('driversController', function($scope, ergastAPIservice) {
    $scope.nameFilter = null;
    $scope.driversList = [];
    $scope.searchFilter = function (driver) {
        var re = new RegExp($scope.nameFilter, 'i');
        return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
    };

    ergastAPIservice.getDrivers().success(function (response) {
        //Digging into the response to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
  }).

  /* Driver controller */
  controller('driverController', function($scope, $routeParams, ergastAPIservice) {
    $scope.id = $routeParams.id;
    $scope.races = [];
    $scope.driver = null;

    ergastAPIservice.getDriverDetails($scope.id).success(function (response) {
        $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; 
    });

    ergastAPIservice.getDriverRaces($scope.id).success(function (response) {
        $scope.races = response.MRData.RaceTable.Races; 
    }); 
  });

Lo importante a notar aquí es que solo inyectamos el servicio $routeParams en el controlador del conductor. Este servicio nos permitirá acceder a nuestros parámetros de URL (para el :id, en este caso) utilizando $routeParams.id.

Ahora que tenemos nuestros datos en el alcance, sólo necesitamos la vista parcial restante. Vamos a crear un archivo con el nombre partials/driver.html y agregamos:

<section id="main">
  <a href="./#/drivers"><- Back to drivers list</a>
  <nav id="secondary" class="main-nav">
    <div class="driver-picture">
      <div class="avatar">
        <img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
        <img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
        {{driver.Driver.givenName}} {{driver.Driver.familyName}}
      </div>
    </div>
    <div class="driver-status">
      Country: {{driver.Driver.nationality}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
      Birth: {{driver.Driver.dateOfBirth}}<br/>
      <a href="{{driver.Driver.url}}" target="_blank">Biography</a>
    </div>
  </nav>

  <div class="main-content">
    <table class="result-table">
      <thead>
        <tr><th colspan="5">Formula 1 2013 Results</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Round</td> <td>Grand Prix</td> <td>Team</td> <td>Grid</td> <td>Race</td>
        </tr>
        <tr ng-repeat="race in races">
          <td>{{race.round}}</td>
          <td><img  src="img/flags/{{race.Circuit.Location.country}}.png" />{{race.raceName}}</td>
          <td>{{race.Results[0].Constructor.name}}</td>
          <td>{{race.Results[0].grid}}</td>
          <td>{{race.Results[0].position}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</section>

Observa que ahora estamos dándole buen uso a la directriz ng-show. Esta directriz sólo mostrará el elemento HTML si la expresión proporcionada es true (es decir, ni false, ni null). En este caso, el avatar sólo aparecerá una vez que el objeto conductor ha sido cargado en el alcance, por el controlador.

Últimos Toques

Añade un montón de CSS y renderiza tu página. Deberías terminar con algo como esto:

Ahora estás listo para iniciar tu aplicación y asegúrate de que ambas rutas están funcionando como deseas. También puedes añadir un menú estático a index.html, para mejorar las capacidades de navegación del usuario. Las posibilidades son infinitas.

EDITADO (mayo de 2014): He recibido muchas peticiones para una versión descargable del código que construimos en este tutorial. Por lo tanto, he decidido hacerlo disponible aquí (despojado de cualquier CSS). Sin embargo, la verdad es que no recomiendo descargarlo, ya que ésta guía contiene cada paso que necesitas para generar la misma aplicación con tus propias manos, que será un ejercicio de aprendizaje mucho más útil y eficaz.

Conclusión

En este punto del tutorial, hemos cubierto todo lo que necesitarías para escribir una aplicación sencilla (como un informador de Fórmula 1). Cada una de las páginas restantes en el demo en vivo (por ejemplo, tabla del campeonato de constructores, detalles del equipo, calendario) comparten la misma estructura y conceptos básicos que hemos revisado.

Por último, ten en cuenta que Angular es un marco muy potente y que apenas hemos tocado la superficie, en términos de todo lo que tiene que ofrecer. En la parte 2 de éste tutorial, vamos a dar ejemplos de por qué Angular se destaca entre sus semejantes en marcos MVC front-end: capacidad de prueba. Vamos a revisar el proceso de escribir y ejecutar pruebas unitarias con Karma, lograr la integración continua con Yeomen, Grunt, y Bower y otros puntos fuertes de éste fantástico marco front-end.

 

El artículo original lo pueden encontrar en Totpal.

26 Sep 2016

Diseñando un Mejor Portal Web: Los Fundamentos Primero

BY ALEX GUREVICH – FREELANCE DESIGNER @ TOPTAL

 

¿Cuántas veces has terminado un proyecto, sólo para mirar atrás y decir: “¡Si tan sólo pudiera regresar en el tiempo y hacerlo todo de nuevo con lo que sé ahora!?” Al menos yo lo he pensado.

A todos nos pasa; estamos emocionados por un nuevo proyecto. Hacemos chistes con el cliente sobre el sitio web actual, firmamos los contratos y luego comienzan los planes y prototipos. Cuando se trata de proyectos pequeños este tipo de estrategias podrían funcionar. Pero cuando se trata de proyectos grandes, el crecimiento repentino y cambios no planeados después de la primera presentación. Y si llegas a terminar el proyecto, probablemente acabarás con una monstruosidad que se parece a lo que debías arreglar, sólo que éste lucirá un poco mejor que el original.

Un excelente diseño de flujo de trabajo comienza con un buen proceso de planificación.

Un excelente diseño de flujo de trabajo comienza con un buen proceso de planificación.

Un buen diseño y una buena experiencia de usuario no empiezan con un prototipo o maqueta atractiva, o con un plano, sino con una base conceptual que se centra en los objetivos de la empresa. Y dichos objetivos no son “Hagamos un sitio web más sencillo y bonito.” Como tú eres responsable de la UX y UI (Experiencia de Usuario e Interfaz del Usuario), por lo que es necesario asegurarse que los usuarios tengan la mejor experiencia en la interfaz que se está diseñando. Y para lograr esto, se debe planificar a fondo desde el principio.

Investigación Inicial para el Diseño de Páginas Web

Una vez que se termina la investigación inicial del campo del cliente y el de su competencia, lo siguiente es saber con qué se va comenzar. Se puede tener un precio separado para este análisis (que se incluirá en la cotización final del proyecto). Esto evitará cotizaciones altas y ambiguas que supuestamente incluirán cualquier ítem que salga más adelante.

El cliente que se tratará como ejemplo es una organización sin fines de lucro en el campo de la arqueología. La compañía explora y protege sitios arqueológicos en el sur-oeste del país. Actualmente, el sitio web está descomunalmente desorganizado. Imagina montañas y montañas de contenido poco organizado en un antiguo portal cms. Teniendo esto en cuenta, el primer paso es organizar el contenido.

Paso 1: Familiarización con el contenido

Cuando estás construyendo una casa nueva, no derrumbas todas las paredes sin antes sacar lo que está dentro de la misma. El primer objetivo sería ir dentro de todas las habitaciones y sacar todo el contenido. En diseño hablado (Design Speak), debemos ir a todas las entradas y determinar cuáles deberían ser estáticas y cuales tienen material para ser tipo post.

Al tener la información se puede hacer una estrategia para organizar mejor el sitio. En principio no se comprueba lo que debe ser eliminado definitivamente y que no, debido a que en el mundo real no se trabaja de esta forma. Cada parte del portal está asignado a un equipo de trabajo, debido a que hay mucho contenido. Lo mejor es clasificar todo primero.

Por lo general se comienza con la página principal y luego se van analizando el resto de las páginas. De esta forma, tengo un esquema del sitio web antes de la primera reunión. Aunque este no fue el caso para el proyecto que tenemos aquí, por qué la mayoría de los enlaces estaban escondidos en el contenido y no eran accesibles en la navegación inicial del portal, (si la cotización del proyecto se basó en la navegación principal o la página principal, este será el momento en el que te arrepientes). Una vez se habló con diferentes personas en el equipo del cliente, se pudo aclarar la situación para continuar.

Al final, la solución fue hablar con el cliente y tener una sesión de intercambio de ideas (brainstorming). Durante esta sesión se le pidió al cliente identificar las características, el contenido, el flujo de trabajo y el enfoque de la página web. Luego se establecieron los siguientes núcleos (core types), algunos son nuevos y otros ya estaban establecidos:

Better Website Design Workflow

La parte más difícil de este proyecto es que los enlaces no estaban disponibles a primera vista, sino ocultos dentro del contenido del sitio. Y una vez que se habló con el cliente y el equipo del mismo, se pudo continuar con el proyecto.

Paso 2: Creación del Enfoque, Simplificación y Organización

Con el contenido de la casa fuera de la misma, empaquetado y etiquetado, es momento de hacer los planos para una nueva casa que tendrá un mejor estilo y mostrará el contenido de mejor manera. Pero antes de llegar a ello, se debe crear el enfoque.

Según el cliente, los usuarios que visitan la página web buscan información sobre arqueología, tanto como sus proyectos de investigación, ver los próximos eventos, o leer la revista mensual. A pesar de que estas son las áreas de contenido es donde terminan los usuarios, el sitio web no se desenvuelve en torno a ellas; para poder encontrar el foco del portal, debes prestar atención al núcleo de la organización.

Se delimitó que la “localización” está en el centro de los contenidos. Sin la ubicación o localización no existirían los sitios arqueológicos, ruinas, museos o exposiciones. En el fondo, la arqueología se desenvuelve en torno a las ubicaciones.

Una vez se tiene el enfoque es momento de simplificar y organizar. Abajo, se despliega el contenido que se sacó del sitio que no tenía relación con ubicaciones, tales como las páginas del equipo, informes anuales, y así sucesivamente. Luego de ordenar y categorizar el contenido, se obtuvo este mapa:

Website Design Workflow

Ahora se tienen dos áreas principales “Cosas por hacer” y “Ubicaciones ”. En “Cosas por hacer” se tratan todos los temas que tienen que ver organización, mientras que en “Lugares” se cubre el contenido relacionado a una ubicación específica. Es posible que el usuario promedio no sepa el nombre del video o el del proyecto, pero si la ubicación de donde se desarrolló. Por ejemplo, en la sección de proyectos, el usuario podría encontrar el que le interesa a través de su ubicación.

Además, hay un color para cada tipo de post. Desde el punto de vista organizativo, los eventos, exposiciones, clases y exposiciones online son todos, esencialmente, eventos, sólo que hay diferentes tipos.

En el sitio actual había una página estática para una revista, y una para la tienda. Se decidió eliminar el paso adicional de ir a la tienda, y en su lugar tener una plantilla para artículos de la revista en la tienda. El resto es sencillo: una página con información acerca de la organización, un enlace directo a la tienda, una página de donaciones (por qué esas páginas generan ganancias y necesitan una sección en el navegador principal), también nuevas páginas para actualizaciones y un enlace directo a la tienda/donaciones. Debido a que esas páginas generan dinero, merecen un lugar en la navegación principal. Ahora se tiene el plano del proyecto, y es momento de vincular contenido a la misma.

Paso 3: Looping al Cliente

En el mapa del sitio exhibido con anterioridad, se incluyen los tipos de páginas pero no el mapa de los contenidos. Como de seguro ya sabrán, la mayoría de los problemas se producen una vez el cliente comienza a agregar contenido al sitio. Para evitar esta situación se hace un loop con el cliente desde el principio. Lo siguiente es crear un documento de Google con el mapa del sitio que tenemos, y luego enviárselo al cliente para que nos diga cuál es el contenido actual y cómo lo quiere mapear en la nueva estructura.

Si algo no encaja se puede resolver más adelante. Esto es uno de los pasos más importantes, debido a que no sólo involucra al cliente sino que también nos deja saber cualquier problema de la estructura antes de comience la implementación. Para el proyecto que estamos tratando, resultó que se cambiaron algunos elementos del mapa del sitio con respecto al menú; cómo el cliente tenía varias páginas de donaciones, la solución fue crear un post único para las mismas.

Creación de Estructura Visual a través de Wireframing

Lo siguiente es crear una estructura visual para el sitio. Para que la función del sistema trabaje exitosamente, y para lograr la idea de “todo relacionado a la ubicación”, se creó una relación bidireccional entre los diferentes tipos de posts.

Esta es la idea: Cuando un visitante llega al sitio de arqueología y escoge el Gran Cañón, no sólo verá la información sobre el lugar, sino que también encontrará los eventos, proyectos, exposiciones y cualquier otra cosa que el cliente haya enlazado en relación a la página del Gran Cañón. Y así terminamos con algo como esto:

Website Design Workflow

La página de índice de ubicaciones muestra los lugares más recientes en la parte superior. La barra de búsqueda es lo primero que verá el usuario al entrar en la página. Cuando el usuario entra en el sitio, podrá ver el mapa de Google en un 80% de la pantalla, y cuando escoja un punto en el mismo o van viendo la página, aparecerán la red de listas para facilitar su búsqueda.

En una página individual de ubicación la navegación principal estará a la izquierda, debido a que es la información más relevante, mientras que la información meta relacionada al lugar estará a la derecha. Cuando se diseña un plano, para obtener una buena composición se debe tener bloques de elementos primarios, secundarios y terciarios bien definidos. Así el ojo humano seguirá cada uno sin quedarse estancado en un solo elemento.

En este diseño, el usuario empezará en la cabecera del sitio, y luego continuará hacia el bloque de contenido, y después la información a la derecha. Cada segmento de contenido relacionado se muestra en orden de relevancia e importancia. Si el usuario está leyendo sobre el Gran Cañón, por ejemplo, probablemente a esto le seguirán fotos y un mapa del lugar.

Este sitio es esencialmente educacional, por lo que después vendrá “En relación a esta ubicación”. Debido a que el cliente no tiene mucha información única asociada con cada ubicación, se combinó el contenido apenas usado en un bloque exclusivo debajo del menú del sitio.

Colocando miniaturas de la revista y los videos en contenido relacionado añade elementos visuales adicionales y guía a los usuarios hacia la página de “compra”. La página está terminada al mostrarle las ubicaciones, ya que esto incentiva a los usuarios a seguir explorando el sitio web.

El siguiente paso es continuar con esta estructura para otros tipos de posts. Éstos son algunos de ellos:

Better Website Design Workflow

Ahora que se tiene un modelo general para los tipos de posts, me puedo concentrar en la página principal. Al igual que con todo interfaz de usuario, el primer paso es llegar a la meta de la página principal. La investigación del cliente mostró que muchos usuarios se tropiezan con el sitio sin entender completamente lo que es. Por lo tanto, una introducción y un texto de bienvenida debe ser lo primero que ven los usuarios. El nuevo enfoque central gira en torno a lugares y éste debe ser el bloque secundario, seguido de lo que está pasando en ArchaeologySouthwest.org (la revista actual, blog, eventos, noticias, etc.). Esta es la iteración del proceso de diseño:

Better Website Design Workflow

Con V1, se creó un diseño básico que se asemeja a la página inicial. No hay mucha jerarquía; lo primero que un usuario verá es el lugar destacado y luego se perderá en las columnas. Con V2, se creó una columna separada que hace que sea más fácil de seguir. Sin embargo, todavía se puede mejorar. Aquí es donde el conocimiento del contenido juega un papel importante. Se sabe que ArchaeologySouthwest.org no tiene más de dos eventos sucediendo a la vez, por lo que no tiene sentido tener muchos en la página de inicio. En V3, el foco está en los próximos eventos de manera que si va a haber más de dos, el usuario puede hacer clic en un botón “más” y ver el resto. También se hizo un énfasis adicional en la revista actual, ya que es fuente de dinero del cliente. Los usuarios comienzan en la parte superior y con el uso de un patrón F, se mueven hacia abajo. Así que ahora, el flujo del ojo es Localización> Bienvenido> Revista> Eventos> Noticias.

Ahora que se tiene un wireframe visual y estructura del sitio es mucho más fácil solidificar características y cómo funcionarán las cosas. Se tiene otra reunión con el cliente para repasar la funcionalidad real (que ahora sale a la luz) y el flujo de la interacción del usuario. Se sabe que todavía habrá ajustes en el final, pero serán solo ajustes y no cambios en todo el proceso. Lo más importante es que no habrá sorpresas.

 

Diseño de páginas web

Ahora viene la parte emocionante. La conversión del wireframe a algo que la gente va a usar y apreciar. Con este diseño, se quería reforzar el flujo mucho más mediante el uso de las marcas de colores y la tipografía. La guía de estilo del cliente es el siguiente:

Website Design Workflow

Comenzando con la tipografía

La tipografía es la base de un buen diseño y es por eso que se determinó desde el comienzo. La mayor parte de su identidad utiliza los tipos de letra Univers Condensed Light y Adobe Caslon. No había reglas sobre cuándo Adobe Caslon se iba a utilizar, pero se notó que no se utiliza tan a menudo como Universe. Se llevó a cabo un pequeño estudio de la tipografía para ver qué uniones creaban el mejor ambiente para una organización sin fines de lucro, humilde y profesional, sin que se viera diferente en comparación con su garantía actual.

Al hacer comparaciones de la tipografía, está claro que Adobe Caslon hará un gran trabajo como tipografía del título, y Universe para subtítulos. Al tener los títulos principales en mayúsculas le da a la marca un toque más personal. Tenerlo todo en mayúsculas hace que la Arqueología se sienta como una entidad corporativa.

Better Website Design Workflow

Para los encabezados principales, se va a usar Adobe Caslon, y el uso de Univers Condensed Light para todo lo demás para que coincida con su garantía de marca actual.

La creación de la apariencia de la página web

Se quería crear una experiencia ligera y abierta para los usuarios, quienes deben sentir que esta organización sin fines de lucro los toma en serio sin ser fríos y corporativo.

Basándonos en la base de los datos de análisis, la mayoría de los visitantes entran desde computadoras de escritorio (probablemente porque la mayoría de las personas visitan el sitio para investigar) y, por tanto, el enfoque inicial se centró en el diseño para los usuarios de computadoras de escritorio. Este resultó ser el diseño final:

Al entrar desde una computadora de escritorio, quería que los usuarios vieran de inmediato la ubicación ofrecida, texto de bienvenida y los próximos eventos seguidos por parte del título de la revista. De esta manera la gente puede ver que hace la compañía, y lo que están promoviendo antes de que tengan que desplazarse en la mayoría de los dispositivos portátiles. Con el uso de una sombra suave en la columna izquierda se le da más atención y se solidifica la jerarquía.

En los dispositivos móviles las prioridades son un poco diferentes, ya que los usuarios tienen acceso a la información sobre la marcha, los eventos son más importantes y por eso están más arriba en la lista. El diseño completo termina así:

Se actualizó el botón de donación en el pie de página para que sea más cándido cambiándolo por una oración en lugar de un botón.

Se actualizó el botón de donación en el pie de página para que sea más cándido cambiándolo por una oración en lugar de un botón.

Creación del Resto

A continuación, se puede aplicar de igual modo, este concepto de diseño en nuestros otros diseños.

Sabemos con certeza que los usuarios llegan a la página de detalles por dos razones: o bien que quieren aprender más sobre el punto de referencia, o ya saben acerca de esta ubicación y solo buscan información (direcciones, números de teléfono, etc.). Por lo tanto, es importante presentar las dos opciones de inmediato para que nuestros usuarios no pierdan tiempo en la búsqueda.

Better Website Design Workflow

Se decidió romper la columna de datos fuera del área de contenido para darle más peso, así como hacer la página más interesante. Esto ayuda a crear una jerarquía de composición de modo que cuando el usuario llega a la página, ven primero el título, seguido por las imágenes de la galería y la columna de detalles meta a continuación. Esto asegura que notarán la información meta adicional inmediatamente. Un poco de arreglo adicional a la columna mantiene los ojos en ella y hace que sea más fácil de hojear la información.

El cliente no va a tener muchos videos y revistas relacionadas con cada ubicación, por lo tanto, sólo estamos exhibiendo artículos y si hay algo más pueden hacer clic en el enlace. La vista móvil colapsa como es de esperarse con el contenido apareciendo primero, y luego la meta-información. Los videos y revistas fueron hechos de último en nuestra página móvil, ya que son menos importantes para los usuarios de móviles. Otras secciones internas siguen esta misma estructura y wireframes para crear una buena experiencia y flujo constante.

Reflexionando sobre el proceso de diseño se puede ver que la mayoría del tiempo se gastó en la organización y la planificación. Mientras que solo el 30% del tiempo se dedicó al diseño. A menudo, cuando los diseñadores muestran su trabajo, son deshonestos acerca de cuánto tiempo se dedica a la organización de Google docs, en lugar de hacer mockup llamativos. Por lo tanto, muchos otros diseñadores saltan directamente a los mockup y terminan con proyectos descarrilados y clientes insatisfechos. No hay una forma única para planificar, sólo se tiene que hacer, si quiere tener un proyecto exitoso. Déjanos tus comentarios sobre cómo es tu proceso, o cómo se diferencia – Sería interesante ver los flujos de trabajo de los demás.

 

El artículo original lo pueden encontrar en Totpal.

06 Sep 2016

La nueva ola del Emprendimiento

BY MATT SWANSON – MANAGING PARTNER @ SILICON VALLEY SOFTWARE GROUP

#CEO #Entrepreneur #SiliconValley

 

La economía del siglo XXI, con un coste de varios billones de dólares, ha permitido que la tecnología tenga una mayor apertura. Esta ha sido impulsada por tendencias que han cambiado la naturaleza de los empresarios; especialmente, cómo estos serán caracterizados en un futuro. Asimismo, serán los ejecutivos industriales con potencial en el ámbito tecnológico, los más demandados por startups emergentes.

En el 2007, Apple reformó completamente la industria tecnológica con el lanzamiento del iPhone. Es difícil imaginar que tan sólo han pasado ocho años desde el lanzamiento del primer smartphone mejor vendido, sin embargo, no se puede negar su impacto en todo el mundo. Más allá de la creación de una nueva dimensión científica, surgió un fenómeno mundial que cambió tanto el destino de los teléfonos móviles como el de la industria tecnológica. Mediante la creación de tecnología intuitiva para las masas, los consumidores empezaron a verla como algo más que una simple herramienta laboral. Economistas, abogados, médicos,ingenieros y personas de todos los sectores económicos no sólo tenían una herramienta para la productividad, sino una indispensable pieza tecnológica que adoptaron como algo indispensable en sus vidas.

Por eso mismo, estos consumidores pueden ahora apuntar hacia ahora hacia un nuevo estándar de ciencia utilizable. Hay que recordar que la tecnología es un fenómeno cambiante que necesita de constante renovación. El software legal engorroso que no permita al abogado buscar casos fuera de la oficina ya no es aceptable. Para aquellos fuera del silo de Silicon Valley, entre las conversaciones que se pueden escuchar durante el almuerzo, un trabajador podrá decir: “¿No sería bueno si hubiera una aplicación para… ?”. Por desgracia, estas conversaciones ocurren a menudo demasiado lejos de los oídos de Silicon Valley; que todavía está dominada por la charla de lo que será el próximo WhatsApp o Instagram. Aun así, un nuevo tipo de empresario está emergiendo y reaccionando a los retos que desafían a su sector. No obstante, a pesar de que estos empresarios cuenten con bastante iniciativa y con oportunidades de hacer un impacto para cambiar el mundo, muchas veces, estos ejecutivos no encajan dentro del arquetipo fundador que muchos inversores de Silicon Valley buscan.

Décadas anteriores vieron cambios similares en las caracterizaciones del empresario. Durante los años 90, cobra auge el MBA de Harvard el cual aplica técnicas de gestión tradicionales para aprovechar las tecnologías novedosas de internet. Por otra parte, la primera década del siglo XXI trajo consigo la “Ciencia de la Computación de Stanford de 22 años” la cual aplicó tecnología a una industria inestable. Ahora, en esta década, estamos respondiendo a una nueva ola de la iniciativa empresarial compuesta por ejecutivos de la industria de la ciencia, con la intención de impulsar la tecnología aún más y deshacerse de cualquier industria no tecnológica.

Durante los últimos 2 años he tenido la oportunidad de ver de primera mano este cambio como el socio gerente de Silicon Valley Software Group (SVSG), una firma de directores enfocada en ayudar a las empresas con su estrategia de tecnología. SVSG ha visto empresarios que van desde productores de cine y vocalistas de las bandas de rock más famosas, hasta ejecutivos de viajes y gerentes de fondos; todos tratando de mejorar en su área a través del uso de la tecnología. Después de una serie de compromisos similares, surgieron algunas observaciones:

En cada compañía, los empresarios miran como la adopción de la tecnología crea nuevas oportunidades. Por consiguiente, los ejecutivos se concentran en un producto en específico el cual surja de esta apertura científica. Sin embargo, he podido notar que estos empresarios no tenían mayor experiencia con la tecnología. Es más, la mayoría de estos empresarios no tenían conexiones pertinentes con la comunidad de Silicon Valley. Y fue entrar a este círculo lo cual les permitió darse cuenta de las oportunidades que la ciencia de la tecnología presenta.

La combinación de capital de crecimiento, el talento multidisciplinar y mentores que fomentan mejores prácticas en base a cómo crear un hiper-crecimiento, es comúnmente dado por sentado por empresarios que forman parte del ecosistema. Sin embargo, la desconexión entre los que forman parte de Silicon Valley y los que se encuentran afuera es impactante. Muchas de las empresas que SVSG ha encontrado no tienen la capacidad de reunir capital estratégico en un primer inicio debido a que sus negocios son demasiado arriesgados en cuanto a ciertos errores comunes que las compañías de Silicon Valley no cometen. Por esto mismo, conceptos tan simples como la metodología de lean startup son bienvenidos para impulsar a estos empresarios no nativos de Silicon Valley.

Estos nuevos fundadores tienen ahora como misión crear un vínculo más fuerte con Silicon Valley. Hasta la fecha, esto se ha visto obstaculizado debido de la mentalidad estrecha de esta región. Sin embargo, las fuerzas del capitalismo se impondrán y estos nuevos empresarios encontrarán su propia comunidad para colocarse alrededor. Los inversores de Keen guiarán a la manada y aprovecharán los mercados existentes para generar el cambio. Incubadoras y aceleradores surgirán con enfoque en los empresarios con experiencia en la industria tecnológica. Nos encontramos en un boom de tecnología el cual ha permitido la apertura de un sinnúmero de maneras de aplicar esta a industrias las cuales no han demostrado ningún cambio en las últimas décadas. Para los que están sentados en la oficina de la esquina, ha llegado el momento de salir porque hay mercados para interrumpir.

El artículo original lo pueden encontrar en Totpal.

 

29 Ago 2016

Construyendo una Compañía a Distancia

Por: JAN SCHULZ-HOFEN

Si me preguntan, trabajar a distancia es lo mejor hay. Actualmente estoy escribiendo desde un bar en una pequeña playa en una isla remota en el sur de Tailandia. Cuando levanto la vista de mi laptop, sólo veo el infinito océano y sus aguas cristalinas. Disfrutaré de esta mañana sin distracciones y me concentraré en mi trabajo porque el resto del equipo ni siquiera se ha despertado. Las zonas horarias funcionan muy bien para los equipos distribuidos.

Mi colega Thomas recientemente habló con 11 Líderes en Gestión de Proyectos (11 Thought Leaders in Project Management) sobre el impacto que genera trabajar a distancia en una compañía; algunos expertos en Scrum argumentaron que los equipos distribuidos pueden trabajar juntos de forma efectiva, mientras que otros estuvieron fuertemente en desacuerdo.

Entiendo sus preocupaciones; no puedes simplemente abrir las puertas de la empresa y liberar a todos en la jungla. No está garantizado que terminarás con un negocio próspero. Un ejemplo claro es el de Marissa Mayer en Yahoo, en el famoso recorte laboral de trabajo a distancia en 2013 (axed remote work), cuando sintió que algunos empleados estaban abusando del mismo.

Entonces, ¿cómo puede lograr una compañía tecnológica el trabajo a distancia? Continúa leyendo. La siguiente historia está basada en nuestra experiencia en Planio y cómo logramos que el trabajo a distancia funcionara.

Entra en Planio, mi Compañía a Distancia

Existen una cantidad de cosas que me motivaron a comenzar mi compañía. Separarme del trabajo del cliente, al tiempo que mantenía todos los beneficios de trabajar como freelancer sin una ubicación fija fue uno de los motivos.

En 2009, me encontraba bajo la sombra de unos cipreses en un hermoso jardín al estilo mediterráneo, desde donde podía ver las colinas toscanas, mientras trabaja arduamente en un nuevo proyecto: Planio.

En una herramienta de gestión de proyectos para personas como yo: desarrolladores. Planio ayuda a crear proyectos de clientes de forma más organizada y transparente, mientras reduce el número de herramientas y plataformas que se necesitan para realizar el trabajo. Planio está basada en Redmine de código-abierto (Un proyecto de software de código abierto basado en Ruby on Rails*), el cual he utilizado a distancia con mis clientes desde sus comienzos. En cierta forma, el trabajo a distancia ya se encuentra en ADN de Planio.

Hoy en día, mi pequeño proyecto paralelo ha crecido hasta convertirse en una empresa de verdad. Somos un equipo de 10 personas, prestando servicio a más de 1,500 negocios en el mundo. Tenemos una oficina en Berlín, pero muchos de nosotros trabajamos a distancia.

En este artículo, indagaré en los principios, herramientas y lecciones que me han ayudado a lo largo de los años. Después de leerlo, espero puedas diseñar el software de tu compañía para que sea remote-friendly desde el principio.

“Hablar no cuesta nada. Muéstrame el código.” Linus Torvalds

Cada Jueves tenemos una conferencia por video-llamada (All-hands conference) donde discutimos lo que hicimos la semana anterior, y lo que haremos a futuro.

Al principio, pasamos mucho tiempo discutiendo ideas antes de decidir qué hacer, pero descubrimos que es mucho más difícil cuando algunos miembros del equipo tienen una mala conexión a Internet y no puedes verlos.

Ahora usualmente solo “hacemos las cosas” y después lo discutimos, creamos un prototipo que funcione con algunas ideas esenciales y después hablamos sobre eso. Por ejemplo, recientemente nos encontramos con algunos problemas de desempeño con nuestros repositorios de Git. En lugar de discutir y analizar todas las formas en las que podíamos ahorrarnos un par de milisegundos por aquí y allá con cada propuesta, mi colega Holger simplemente construyó sus mejoras sugeridas (Speeding up Git at Planio) en una prueba de concepto en un servidor en staging hacia donde dirigimos parte de nuestro tráfico. Esto resultó bastante bien y estas ideas irán a producción.

Este método hace que todos se enfoquen en la acción en vez de hablar. El tiempo invertido en escribir código es recompensado al ver que pasamos menos tiempo andando con rodeos.

Utiliza la Comunicación Escrita

La comunicación en tiempo real inhabilita la claridad. Llamar a un compañero cuando necesitas algo es fácil e instintivo, pero no es siempre tu mejor opción. No puedo recordar cuantas veces empecé a escribir un correo o una nota de Planio para luego resolver el problema mientras redactaba.

Zach Holman, uno de los primeros ingenieros contratados en GitHub, está de acuerdo en que: “El texto es explícito. Al forzar la comunicación a través de un método escrito, fuerzas a las personas a formular mejor sus ideas.”

La comunicación escrita también te hace más respetuoso del tiempo de los demás, en especial cuando vives a varias zonas horarias de distancia. Una comunicación inmediata puede disruptiva; puede ser que la persona se encuentre tratando de averiguar porque un sistema o proceso no funcionó correctamente. En cambio con un correo, él o ella puede leerlo cuando le sea más conveniente, y dar una respuesta adecuada.

Se tan Transparente como sea Posible

Pasar mucho tiempo preocupándose por las políticas de oficina no es la forma más propicia para enviar un software que funcione, y la claridad o transparencia promueve la confianza. No es una coincidencia que compañías a distancia, como Buffer, tengan una transparencia radical. En el caso de Buffer, la empresa comparte información sobre los ingresos y salarios de todos sus empleados.

Automattic, la compañía detrás WordPress.com, también pone énfasis en la transparencia. En el libro “El Año sin Pantalones” (The Year Without Pants), Scott Berkun comparte su experiencia trabajando a distancia para Automattic, y que todas las decisiones y discusiones están disponibles para los empleados en su plataforma de debate P2 como parte de su énfasis en la transparencia.

La función de chat en Planio funciona de forma similar. Los debates están abiertos para todo el mundo y los historiales de chat están conectados automáticamente desde los problemas que se discutieron para que nadie quede de lado; incluso los nuevos empleados pueden leer las decisiones que se tomaron anteriormente y por qué. Cuando comencé a desarrollar la función para chatear, considere agregar una función para chatear en privado con otros, pero cuando los debatimos en equipo, llegamos a la conclusión de que era mejor no hacerla para tener la mayor transparencia posible en el equipo.

Me parece que la transparencia en equipo es fundamental para equipos remotos. Por ejemplo, imagina por un momento que acabas de unirte a un equipo de desarrolladores a distancia. Quizás nunca has conocido a tus nuevos colegas. No conoces las reglas tácitas de comportamiento. Puede ser que te preocupe si estás realizando un buen trabajo o no. ¿Tus compañeros de trabajo están siendo sarcásticos o sus cumplidos son en realidad sinceros? ¿Estarán discutiendo en privado si eres un buen ingeniero?

Digitaliza tus Sistemas

Escogemos nuestros servicios de acuerdo a lo que ofrecen en plataformas online, desde los proveedores de teléfono hasta los bancos (algunos incluso ofrecen un pequeño incentivo financiero si decides dejar los papeles, además es genial para el medio ambiente). Yo tengo la fortuna de tener un abogado y un contador para Planio a los que no les importa enviar correos o mensajes por Google Hangouts, en lugar de decirme que vaya hasta sus oficinas. (En realidad recomiendo preguntar sobre ello en la primera reunión). Y puntos extra si se logra que firmen con una herramienta de gestión de proyectos y formen parte de tu equipo.

Hemos estado digitalizando nuestro correo postal; en Planio usamos un servicio llamado Dropscan, el cual recibe nuestras cartas, las escanea y reenvía las más importantes a las personas indicadas. No te gustaría que un amigo las agarrara y las leyera en Skype. Si no puedes encontrar un proveedor que escanee tu correo postal en tu país o ciudad, algunos sitios ofrecen membresías virtuales para tener una dirección postal física mientras no estés en la zona.

Para aquellas compañías que aún siguen enviando correo, existen servicios para que nunca haya necesidad de visitar una oficina postal nuevamente. Nosotros utilizamos una empresa de imprenta Alemana con una API (interfaz de programación de aplicaciones) que automáticamente envía una carta junto con una calcomanía a cada nuevo cliente de Planio. Es algo que a la gente le encanta, y no tenemos que imprimir y enviar nada. Algunas alternativas internacionales son Lob y Try Paper.

¿Deberías tener una Presencia Digital?

En un co-working en la Isla tropical Koh Lanta, Tailandia, me di cuenta que alguien en rol de apoyo para una gran plataforma de e-commerce estaba constantemente en una video conferencia con el resto del equipo. Sqwiggle ofrece una función similar de “presencia” para equipos remotos.

Supongo que demandar que todos los empleados estén “presentes” mediante video mientras trabajan puede basarse en el miedo de que los empleados abusen de los beneficios del trabajo a distancia. En mi experiencia, este no es el caso. En el co-working tropical se siente cierta urgencia en el aire, a pesar de los atuendos casuales y los cócteles de coco. Las personas están concentradas tranquilamente en sus laptops; es como si quisieran que el trabajo a distancia funcione y muestre resultados para mantenerse lejos de una oficina para siempre.

Nos dimos cuenta que no necesitamos una presencia digital porque tenemos un nivel de confianza muy alto con todo el equipo. También me parece que es importante respetar la privacidad de todos. Si tu empresa está haciendo el cambio de oficina física a trabajo remoto, la presencia digital puede ayudar a calmar esos problemas de desconfianza en los gerentes más ansiosos.

Escoge Bootstrapping en lugar de Capital de Riesgo

La mayoría de los capitalistas de riesgo buscan resultados descomunales, por lo que prefieren un pequeño estallido de 12-meses de trabajo de un equipo en lugar de un ritmo más sustentable. Front App, una nueva empresa fundada por Y Combinator, la aceleradora de Silicon Valley, alquiló una casa en la bahía durante su estadía de tres meses en el programa de la misma aceleradora. La meta es optimizar para evaluar una idea empresarial rápidamente.

Dada esta mentalidad de resultados desmesurada, puede ser que sea algo difícil convencer a un capitalista de riesgo que financie una estadía en un playa de Camboya. Es por ello que muchas empresas respaldadas (como Buffer o Treehouse) que se dedican al trabajo a distancia, primero tenían ventajas. Buffer era rentable antes de que se invirtiera en ella, mientras que Ryan Carson, el fundador de Treehouse, ya había demostrado sus habilidades con otra compañía.

Pero he aquí otra opción que es mejor que capitalismo de riesgo: Bootstrapping. Lo cual significa financiar una empresa con los ingresos de sus primeros clientes. En mi opinión, es el mejor enfoque porque permite fundar tu empresa con tus propios términos y mantenerte en control. Sin embargo, muchas veces se requiere tener dos trabajos o trabajar de forma freelance mientras se saca la compañía a flote. Me tomó aproximadamente dos años trabajando en Planio y proyectos para clientes (con mi agencia desarrollo de software LAUNCH/CO) para poder empezar de lleno, pero valió la pena.

Bootstrapping también te fuerza a construir un negocio que genere ingresos desde el principio, lo cual me parece mucho más saludable. Una pista: Construir un B2B SaaS hace que todo sea mucho más fácil que crear una aplicación de consumidores, debido a que las empresas están más dispuestas a pagar suscripciones mensuales si se le agrega importancia. Se deben vender muchas aplicaciones de consumidores en iPhone a $0.99 para cubrir un mes de pago de así sea el equipo más pequeño.

Bootstrapping también te fuerza a construir un negocio que genere ingresos desde el principio.

Ponle el Precio a tus Productos Estratégicamente

Uno de nuestros primeros clientes era una gran empresa tecnológica con billones de ingresos al año. Obviamente, estaba encantado cuando nos escogieron por encima de competidores más grandes y mejor establecidos. Sigue siendo un cliente satisfecho, pero ahora nos hemos alejado de grandes empresas; he descubierto que se necesitan muchas reuniones en persona y se los lleve de la mano antes de convertirse en un cliente.

Como dice Jason Lemkin en su artículo sobre cómo escalar al éxito para SaaS (Scaling Your Customer Success Team), cuando tienes una gran empresa, alguien tendrá que tomar un jet dos veces al año para visitarlos. Si tienes una empresa pequeña de dos o tres personas, esa persona serás tú, el CEO, el CMO y el CSO todos-en-uno, el hámster con exceso de trabajo.

Manteniendo los precios en el rango modelo de unos $49/$99/$249 como ha sugerido el desarrollador ahora empresario Patrick McKenzie, esto significa que no se tendrá que contratar un equipo empresarial de ventas, y luego tener que ganar la inmensa cantidad de dinero que un equipo así requiere. Tú, el cliente, no esperaras que el CEO de una empresa aparezca en Navidad con una caja de chocolates cuando estas pagando $249 al mes.

Desarrolla en Código Abierto

Un negocio con respaldo de riesgo basado en software propietario está muy bien cuando juegas “El Ganador se lleva Todo” y eres dueño del mercado. Cuando eres una compañía de bootstrap, el software de código abierto puede darte ventajas y alcance que no podrías haber logrado de otra forma.

Existe una precedencia de empresas tecnológicas rentables construyendo negocios en base a código abierto; el famoso código abierto Rails de Basecamp les ha garantizado ingenieros de alta calidad para el resto de la eternidad. GitHub se ha convertido en un unicornio, aprovechando el proyecto de código abierto Git que Linus Torvalds comenzó a gestionar con las fuentes de Kernel de Linux. Nuestros amigos en Travis-CI comenzaron un proyecto de código abierto, crearon una campaña en Crowdfunding y luego lo convirtieron en un negocio de bootstrap a distancia (la cual también hace campaña para la diversidad tecnológica a través de su fundación).

Planio está basada en Redmine y nosotros contribuimos muchas de nuestras características y mejoras a la comunidad. Esto funciona muy bien en muchas formas; nuestras contribuciones y compromiso con la comunidad ayuda a que el proyecto de código abierto avance y Planio se exhibe a potenciales clientes. Para nosotros, es la forma más auténtica de desarrollar la marca; al mostrar nuestro código y responder las discusiones técnicas abiertas, demostramos que sabemos lo que estamos haciendo.

Contrata Profesionales Certificados

Contratar una flota de pasantes cada año solo tiene sentido si se planea que el número de empleados crezca tan pronto como se llegue a la próxima ronda de financiación.

La externalización de tareas es fácil si se trata de copiar-y-pegar, pero en realidad no se quiere externalizar losDevOps (Desarrolladores y Operaciones) a alguien con la tarifa más baja por hora, cuando tienes miles de clientes dependiendo de tus servidores: querrás tener profesionales certificados como los que se encuentran en Toptal.

Matt Mullenweg, fundador de la plataforma de código abierto para blogs WordPress, declaró que al concentrarse en la calidad significó que su compañía, Automattic, pudiese contratar a candidatos experimentados que manejan el ambiente de trabajo no estructurado de una compañía a distancia.

Eso significa que “audiciona” candidatos dándoles un trabajo pago en un proyecto por varias semanas, y luego los contrata basándose en su desempeño. Automattic descubrió que este método es mucho más efectivo que los tradicionales CV’s y cartas de presentación para encontrar los candidatos adecuados.

Resalta la Calidad de Vida

Trabajar toma una increíble cantidad de tiempo año tras año. No debería ser algo que haces solo para terminarlo y ya; si es así, probablemente terminarás desperdiciando gran parte de tu vida. La mejor fuente de inspiración y el ingrediente principal para grandes resultados es un ambiente de trabajo que sea inspirador, agradable y divertido. Viajar, aprender, y socializar con otras personas de diferentes culturas hace que el trabajo sea menos como un sacrificio o un mal necesario (al menos en mi vida), que cuando trabajas en una oficina de nueve a cinco.

Trabajar toma una increíble cantidad de tiempo, año tras año. No debería ser algo que haces solo para terminarlo y ya.

No se trata solo de viajar por el mundo, aunque también está el aspecto de la libertad personal. Los padres pueden pasar más tiempo con sus hijos gracias a que evitan un viaje de dos horas. No tienes que vivir en Silicon Valley para ganar el sueldo de San Francisco. Tal vez tu otra mitad también obtenga un trabajo en el extranjero y no tengas que estar limitado a la terrible decisión de quedarte con tu trabajo y continuar tu carrera, o convertirte en un “cónyuge de traslado” con opciones profesionales limitadas.

Artículo original: https://www.toptal.com/business-intelligence/bootstrapped-construyendo-una-compa%C3%B1%C3%ADa-a-distancia/es

23 Ago 2016

¿Podrán los compradores y desarrolladores adaptarse al Marketing de Proximidad In-Store?

Hoy en día, los consumidores utilizan más que nunca sus smartphones para comprar en la App Store.

Una encuesta reciente de Google asegura que un 80% de los compradores están usando sus teléfonos para decidir qué adquirir. Los vendedores y emprendedores han comenzado a tomar en cuenta esta manera de comprar, y han empezado a cambiar los análisis de locación móvil y Marketing de Proximidad.

Publicaciones como Techcrunch y Adweek tienen artículos de distribuidores que están lanzando programas pilotos de transmisores de Bluetooth casi a diario. Los ejemplos más recientes incluyen: Target, Country Market y Urban Outfitters.

Una vez que dejas de lado toda la locuacidad, ¿qué significa exactamente este cambio? Significa que el mundo se está adaptando a ti. El mundo está reaccionando a tu presencia, específicamente a ti como individuo.

El Marketing de Proximidad es un concepto excelente, pero muchas personas se preocupan que se ahogarán en spam una vez que opten por él.

Sí, es un concepto interesante. Hablar sobre esto alrededor del mundo traerá diferentes reacciones, desde inquietudes sobre problemas de privacidad hasta la idea de que tu teléfono va estar lleno de spam sin parar con promociones de Viagra, pero si piensas en la idea, hay ciertos conceptos que son realmente atractivos.

La Personalización es un Beneficio Clave

Echemos un vistazo a una forma de personalización muy común que todos conocemos. Las parejas casadas tienen cada uno tiene un llavero individual para su automóvil (FBO). Cuando el esposo entra al automóvil, los espejos se ajustan, el asiento se desliza hacia atrás, y la estación de radio cambia a su estación de radio favorita de las mañanas. Cuando su esposa use el carro esa noche, el automóvil regresa a sus preferencias. Ese es un ejemplo de una muy útil personalización. Ahora, imagina si una tienda pudiera hacer eso por ti.

Hemos visto personalizaciones en línea que se vuelven cada vez más sofisticadas en la última década, con plataformas como Google AdWords y la Red de Audiencia de Facebook (Facebook Audience Network), y la suma de las tecnologías del Marketing de Proximidad está haciendo posible la expansión de la personalización dentro de las tiendas, efectivamente cerrando la brecha entre los estados digital y físico. Existen excitantes y escalofriantes posibilidades sobre esto.

Entonces, ¿por qué los distribuidores no pueden vivir sin esto? El distribuidor podrá ahora entender el comportamiento del comprador más allá de la información TPV (Terminal Punto de Venta). Los distribuidores actualmente tienen la capacidad de analizar los patrones de tráfico, entregar ofertas personalizadas, medir tiempos de permanencia, construir los perfiles de confianza de los clientes y hasta demostraciones físicas del test A/B. ¿Y qué obtiene el comprador? Integrando esta tecnología a la aplicación del distribuidor, el comprador obtiene una experiencia ultra personalizada a través de ofertas específicas para clientes, cupones para locaciones específicas e información contextual tales como mapas y menús.

Pero la pregunta que sigue apareciendo es: ¿Los compradores se podrán adaptar a éste tipo de experiencia? Si los usuarios no adoptan la tecnología, las gráficas de Palo de Hockey (Hockey Sticks Graphs) nunca se llevarán a cabo para los distribuidores. Pienso en una historia que he escuchado muchas veces de Sheryl Sandburg durante sus presentaciones. A los usuarios les asustaba cuando salió por primera vez el identificador de llamadas. Pensaban que el concepto de saber quién llamaba antes de contestar era horripilante. Ahora, más de veinte años después, no contestamos el teléfono sin saber primero quién llama. La percepción de tecnología de los usuarios cambió completamente en las últimas dos décadas.

Parece un consenso general entre los inversionistas y vendedores que alguien descubra y gane la carrera del Marketing de Proximidad.

Casos de Uso del Marketing de Proximidad

Remodelación de Cocina

Finalmente has tomado la decisión de remodelar tu cocina después de 30 años, pero no sabes por dónde empezar. Entras el departamento de cocina de una ferretería y un empleado te informa sobre una aplicación que te sirve de guía con el complicado y extenso proceso de remodelar su cocina. Luego de descargar la aplicación, se le dan una serie de fáciles direcciones que muestran cómo utilizarla. Comienza por escoger tus nuevos gabinetes y encuentras un estilo que le gusta pero no están en el color que te gusta. Al hacer uso de una etiqueta inteligente de muestras (etiquetas por la que desliza el dedo para recibir información contextual), puedes ver colores adicionales disponibles por orden especial. Guardas el estilo y color en tu perfil. Mientras te diriges a escoger encimeras, la aplicación te notifica que no olvides escoger los equipos para tu gabinete. Una vez escogido, te diriges hacia las encimeras.

La aplicación ha estimado que hasta ahora has pasado 20 minutos en el departamento de cocina. El cual ofrece un 5 por ciento de descuento, que incentiva a hacer una compra hoy. De las 10 muestras de encimeras que el vendedor tiene a mano, la mayoría de los usuarios de la aplicación, solo prestan atención a 4 de ellos. El distribuidor sabe que tal vez sea el momento preciso para cambiar las otras seis con opciones más modernas. Ya que hay estilos que pueden estar de moda dependiendo de la región, el distribuidor podría analizar las estadísticas desglosadas por segmentos.

Después de encontrar una encimera que te guste, lo guardas en tu perfil y agregas una etiqueta de entrega para así ver cuánto tiempo tarda esa encimera en ser instalada. Si tienes una pregunta sobre qué tan rústica es esa encimera, tocas un botón que informa a un empleado de la tienda que necesitas asistencia. La aplicación te ha guiado satisfactoriamente a través de éste proceso, de tal manera que te hace sentir confiado hasta el punto que piensas que la cocina de tus sueños se hará realidad.

Entorno Minorista

En el entorno minorista, las zonas inteligentes y etiquetas pueden ser usadas de muchas maneras. A continuación, algunos ejemplos de este entorno.

Una familia entra a una tienda con la aplicación para revisar las últimas ofertas que el distribuidor ha publicado. Después de agregar los cupones que les interesa a la aplicación, continúan caminando por la tienda. Los compradores ahorran dinero y tiempo porque la aplicación les dice la ruta más rápida para escoger todo lo de su lista. Si falta un cupón, la aplicación alerta al comprador.

Las Cadenas de tiendas ya han reconocido el potencial del Marketing de Proximidad, junto con decenas de nuevas tiendas.

La familia decide comprar un nuevo televisor, y después de estar en el departamento electrónico por cinco minutos, se les pregunta si necesitan asistencia. Responden afirmativamente, y un empleado trae un televisor del depósito para ellos. Luego, pasan una etiqueta que les muestra accesorios, información del almacén de la tienda, y productos relacionados de la misma marca. Fácilmente, pueden ver que funciona para ese TV, y encontrar los cables apropiados en el siguiente pasillo.

Los servicios de la aplicación están integrados a plataformas comercio electrónico comercio móvil, para que los usuarios puedan usar los botones de “Comprar Ahora” que simplemente envía el producto a la puerta de casa. La familia decide no molestarse con apretar el televisor en su automóvil, en vez de esto, decide que se les entregue en su hogar esa tarde.

En la salida de la tienda, la aplicación reconoce que el tiempo de espera en el área de cajas es más largo del que a los managers les gustaría para la buena experiencia de los clientes, así que más cajeros son enviados a las áreas de caja.

Concierto al Aire Libre

Un grupo de amigos irá a un concierto al aire libre con varios escenarios. Los promotores del concierto crearon una aplicación que ayuda a los asistentes al concierto a navegar el evento. La aplicación tiene muchas características útiles como horarios, código de barra para el acceso a las áreas VIP, e información sobre los puestos de comida.

Los promotores del evento también instalaron Bluetooth Low Energy (Bajo Consumo) beacons en el evento para que la aplicación pueda proveer información contextual a los asistentes basada en su locación. Mientras esperan en las largas colas para la cerveza, se le notifica al grupo que las colas son menos cortas en los puestos de cerveza a media cuadra. Cuando una banda está a punto de empezar a tocar, se les avisa a los amigos que es mejor que vayan a ese escenario.

Cuando se dirigen al escenario, se les pasa un cupón que les da un 20 por ciento de descuento en una Camiseta, en la tienda de mercancía. Al salir, la aplicación les avisa donde se encuentra la salida más cercana y rápida, según su ubicación.

 

Fuente: https://www.toptal.com/mobile/podr%C3%A1n-los-compradores-y-desarrolladores-adaptarse-al-marketing-de-proximidad-in-store/es

29 Jun 2016

La H-1B: El viaje de un desarrollador iOS desde Honduras hasta Silicon Valley

Por estos días, vivo en la gran ciudad de San Francisco. Obtuve un trabajo que amo, y uno con el cual soñé con tener durante mucho tiempo. Parece fácil ahora, pero no siempre fue así.

Cómo empezó todo

Nací en San Pedro Sula, un pequeño pueblo en la esquina noroeste de Honduras. Comencé a programar cuando tenía 12 años. Todo empezó con BASIC. Un día, estaba jugando un vídeo juego y se colgó. Cuando ví la pantalla llena de códigos de error y mensajes, me picó la curiosidad—entonces comencé a aprender algunos comandos BASIC, que eventualmente me llevaron a comprar libros de programación sobre Clipper, Turbo Pascal, C, C++, etc. Fue genial. Tenía todo el tiempo del mundo para gastar programando cualquier cosa que quisiera: sin limites de tiempo (aparte de la escuela, que no era tan demandante como un trabajo de tiempo completo) o responsabilidades de adulto.

file

Muchos años más tarde, a la edad de 15 años, mi padre estaba teniendo problemas con una aplicación defectuosa de contabilidad. Le dije que podía crear una versión mejor—sin realmente entender en dónde me estaba metiendo (nunca había abierto una base de datos SQL). Entonces compré algunos libros más y me puse a trabajar. (Nota: Esto sucedía en la época en donde Internet no era algo predominante como lo es hoy: estaba viviendo en un país del tercer mundo, e Internet llegó a finales de 1997, 5 años después de haber comenzado a programar).

Sueños y ambiciones

Recuerdo que me dije a mí mismo: “Quiero ser un ingeniero informático”. Por supuesto, no tenía idea exactamente qué es lo que eso abarcaba, pero sabía que me gustaban las computadoras (estoy hablando de esos viejos y cuadrados monitores de fósforo verde, PCs lentas con DOS—horribles, por supuesto, ahora que tenemos de esos brillantes nuevos sistemas operativos).

Entonces, siendo un ingenuo de veinte y tantos, decidí que quería emigrar hacia los EEUU—pero por supuesto, eso es un camino largo e inestable.

Recuerdo muy claramente que en mi segundo o tercer viaje a los EEUU (solíamos ir de vacaciones), decidí que quería vivir ahí. Todo era tan avanzado! Por supuesto que hoy, con la globalización e Internet, las diferencias no son tan vastas, pero brechas en el crecimiento y en el progreso pueden seguir viéndose en el desarrollo de infraestructura, la inestabilidad política, el índice de delincuencia, etc.

file

Entonces, siendo un ingenuo de veinte y tantos, decidí que quería emigrar hacia los EEUU—pero por supuesto, eso es un camino largo e inestable.

Por esos tiempos, mi padre tenía una empresa de contabilidad, y habían empezado a tener problemas con su aplicación contable. El desarrollador era obstinado y sin deseos de ayudar, entonces mi padre empezó a buscar alternativas. El quería que me ponga al día como programador, fue a la universidad local—el único lugar donde vendían libros avanzados de programación—y se abarrotó de recursos. Fue un mundo nuevo para mí: tenía una de esas nuevas (en esa época) PCs de monitor de fósforo verde con un procesador de 5 MHz, 256kb de memoria RAM y un disco rígido de 10mb de capacidad. Usaba de esos viejos discos mecánicos, por lo que podías oír todo lo que estaba procesando. El teclado era también mecánico y el sonido al teclear era placentero. 10 años más tarde todavía seguía trabajando en la misma aplicación contable; ahora, sin embargo, lo vendía a clientes, con una interfaz en Windows, una base de datos SQL y conectividad vía Internet.

Yendo a la quiebra

Por esos tiempos, decidí dejar la universidad y empezar mi propia compañía. Había estado trabajando con mi padre, de alguna manera: dividíamos las ganancias de la aplicación contable (a pesar de que era mi idea y ejecución, el invirtió mucho tiempo enseñándome contabilidad). Así que tomamos caminos separados: él seguía vendiendo la versión actual de la aplicación y yo me embarqué a crear una nueva. Pero como descubriría pronto, el negocio de desarrollo de software en Honduras no es ningún paseo en el parque: los clientes no quieren pagar por tus servicios, y ellos ven siempre el desarrollo de software como una tarea relativamente fácil dado que no requiere trabajar con un producto tangible; a menudo, no perciben el valor en el software al no crear ganancias inmediatas, haciéndolo más difícil de vender.

Del lado del negocio, había contratado a algunos de los mejores estudiantes de la carrera (a quienes encontré cuando volví a la universidad). Pero con el tiempo, comencé a usar demasiados títulos: CEO, contador, Representante de RRHH, Servicio y Soporte al cliente, Jefe de proyecto, y (mi favorito) Desarrollador. Yo sólo quería programar, pero se volvió demasiado difícil mientras mantenía todos esos roles. Eventualmente, nos encontramos con problemas, como que nuestros clientes no estaban pagando a tiempo y luchábamos para encontrar nuevos proyectos: cuando tienes a los mejores talentos alrededor, estos quieren ser bien pagados, y estábamos pagando bien; pero los clientes no estaban respondiendo como esperábamos. Además, el vivir en un país del tercer mundo había desalentado cualquier tipo de interés de inversión. Tendría que haber ido con un modelo de negocio distinto, pero estaba demasiado ocupado haciendo malabares con todos mis títulos. Al final, la compañía quebró, y a mi me quedó una tonelada de deudas, empleados enojados y un gusto amargo en la boca. Tenía que empezar de nuevo desde el principio.

El SDK de iPhone

file

150mil descargas de aplicaciones pagas después, demostré que tenía razón.

Lo que más importa es cómo nos levantamos de vuelta cuando enfrentamos la derrota, y cómo aprendemos de nuestros errores. Empezar de nuevo y re-pensar todo es desalentador, pero eso es lo que tenía que hacer. Mi esposa me ayudó durante esos momentos difíciles y me empujó a hacer cosas que no pensé que podría ser capaz. Así que empecé a trabajar en mi aplicación contable de nuevo, pero sin ningún dinero para marketing era muy difícil de promover. Los ingresos eran escasos, y necesitaba mantener a mi familia. Tuve que cambiar de marcha. Alrededor de la misma época, Apple introdujo el SDK de iPhone. Sonaba como una plataforma arriesgada para mí; además, era nuevo con el Mac en sí. (mi transición al Mac empezó con el iPhone y unHackintosh, que me dejó probar el sabor de OS X sin desembolsar dinero en una máquina costosa). Algunos de mis amigos se reían y me ignoraban por completo cuando decía que iba a desarrollar para el iPhone; pero realmente creía que había dinero de por medio en la App Store. 150mil descargas de aplicaciones pagas después, demostré que tenía razón; aunque, por supuesto, esos números solos no cuentan la historia completa:la economía de la App Store es compleja, realmente necesitas invertir en tu producto y encontrar clientes para crear valor a largo plazo. Y para eso, necesitas un equipo. Así que aunque le estuviera yendo bien a mi aplicación, no era sostenible (desde el punto de vista del negocio) para seguir desarrollándola por mi cuenta. A pesar de todo, había demostrado lo que podía hacer—entonces, un día, me levanté y me dije a mi mismo que finalmente emigraría a los EEUU.

Como pude descubrir, emigrar a los EEUU no era una tarea fácil. Probablemente la ruta más simple era conseguir una Green Card por medio de un miembro de la familia, pero mi opción más cercana era mi hermano, que había nacido en los EEUU; sin embargo, el vivía con nosotros en Honduras y no podía pedir por nadie ya que no estaba trabajando en ese momento. Y aunque pudiera, el proceso podría llegar a tomar 15 años (Nota:los hermanos tienen menor preferencia en lo que respecta a miembros familiares para el patrocinio de la Green Card). Mi solución era crear una compañía estadounidense. Conseguí que un amigo invirtiera y empezamos a crear juegos para iPhone y iPad. En los papeles, todo parecía genial; pero, por supuesto, la economía de la App Store nos demostró lo contrario. Pronto, estábamos necesitando más dinero; mi amigo no había anticipado eso. Al final, publicamos una aplicación (había otra en desarrollo, pero nunca fue finalizada debido a problemas de financiación). De vuelta, las cosas parecían poco prometedoras. Decidí perseguir lo que creí que era mi último recurso: trabajar para una compañía de EEUU.

Consiguiendo un empleo

Es duro ser contratado por una compañía de EEUU desde el extranjero. Me postulé para varias posiciones, pero el primer problema era que requerían relocación: ellos tendrían que solicitar y patrocinar una visa de trabajo. El proceso era caro en términos de tiempo (hasta un año, si no hay visa disponible en ese momento) y dinero (por ej., honorarios de abogados). Así que, en vez de eso, comencé buscando trabajo por medio de un sitio de trabajo independiente online. En teoría, es un buen servicio. Pero, al principio, debes empezar por construir confianza—lo cual es duro. Hay también hordas de desarrolladores que cobran menos que el promedio sólo para llamar la atención; por esto, es difícil ser bien pagado. Terminé haciendo un sólo proyecto por medio del sitio, que valía 8 horas de trabajo.

Más tarde, fui contactado por Toptal con lo que parecía una muy buena oportunidad: ellos contratan grandes programadores y los conectan con los clientes. Además, puedo trabajar desde casa, y para una empresa de EEUU. Aparecí en sus radares por medio de mi trabajo en la App Store, pero todavía tenía que pasar un estricto proceso de selección, haciendo de todo, desde comprensión de textos hasta trivia de programación, desde algoritmos de optimización hasta sesiones de programación cronometradas. Lo más memorable fue la entrevista final, que incluía discutir uno de mis proyectos y guiando a un ingeniero de Toptal por algunas partes de mi código para demostrar que era realmente mío.

Luego de que Toptal me aceptara dentro de su red de desarrolladores, fui puesto en una lista de espera. Una vez que el cliente muestra interés en un desarrollador en particular, este entrevistará a ese candidato (cómo en una entrevista de trabajo normal) para asegurarse que es el adecuado. Antes de mi primer entrevista, estaba bastante nervioso. Comenzó con el cliente explicando lo que se esperaba de mí, así como también el proyecto en general, y haciendo preguntas todo el tiempo para comprobar sí había entendido todo. Mientras la entrevista avanzaba, las cosas no estaban yendo como esperaba, y las preguntas se fueron volviendo cada vez más específicas y técnicas. Terminaron contratando a alguien más. En retrospectiva, fue bueno que no me hayan querido: una semana después, fui entrevistado por quien, eventualmente, terminó siendo mi empleador a tiempo completo.

Me preparé mejor para la siguiente entrevista, la cual fue tan bien como podría haber esperado: hablamos más sobre mi experiencia cómo desarrollador, y la compañía se familiarizó con mi enfoque para solucionar problemas. Tres días después, había firmado contrato y comencé a trabajar para este nuevo cliente via Toptal.

Trabajé para Life360 via Toptal al menos 9 meses. Su producto estrella es una aplicación móvil de localización de familiares, pero inicialmente estuve trabajando sólo en algunos proyectos paralelos: la primera, una aplicación de alertas de terremotos; y la segunda, un escáner policial. Por algunos meses, mi flujo de trabajo consistía principalmente en: recibir requerimientos de alto nivel de Life360, devolviendo bocetos y preguntas, e integrando sus respuestas dentro de esas aplicaciones, repetía este ciclo varias veces. Estaba en contacto con un diseñador y algunos empleados de Life360 (la compañía tenía sólo cinco o seis en esa época), pero tenía mucha autonomía. Era liberador trabajar desde casa: no tenía que viajar a diario y había creado un ambiente de trabajo sin distracciones.

Pronto me encontré más y más profundamente integrado con el equipo—había demostrado mi valor, por decirlo de alguna manera, con estos dos proyectos iniciales. Para Diciembre, me preguntaron si quería formar parte del equipo a tiempo completo en San Francisco—Acepté con entusiasmo y ellos empezaron el papeleo. Para Enero, estaba atendiendo reuniones diarias de Scrum (virtualmente, ya que estaba todavía en Honduras), describiendo mi trabajo del día anterior y mi lista de tareas para lo que seguía. Mi flujo de trabajo se volvió más organizado, y me comprometí más con la empresa.

Reubicación

Era un sueño hecho realidad: había hecho un gran trabajo para una compañía de EEUU, y estaba en camino de reubicarme—pero todavía faltaban varios obstaculos a superar. En primer lugar, nunca había completado mi carrera universitaria. Aunque no es estrictamente necesario para trabajar en una empresa de tecnología en estos días, sí se necesita el título de bachiller para calificar para una visa de tipo H-1B. Así que tuve que terminar mi carrera; esto requería de un compromiso de seis meses a un proyecto de mayor escala, el cual tenía justo el tiempo necesario para completar.

Aunque no es estrictamente necesario para trabajar en una empresa de tecnología en estos días, sí se necesita el título de bachiller para calificar para una visa de tipo H-1B

El abogado llenó el papeleo el 1ero de Abril, el día en el que el proceso de la visa tipo H-1B abre (al momento del envio, dejó la sección del diploma cómo “pendiente”, dado que el tipo de visa H-1B es limitado y podía enviar la documentación más tarde). Terminé mi proyecto a tiempo, atendí a mi ceremonia de graduación y recibí un diploma.

Desde ese punto en adelante, la compañía que te contrata tiene que ser muy abierta, por sobre todo, y muy paciente. El proceso para la aplicación de la visa empieza en Abril; si optas por la opción del proceso premium, obtienes tus resultados de la USCIS en dos semanas. Luego de eso, todavía tienes que pasar por un proceso de entrevistas, punto en el cual todavía te pueden denegar la visa; pero si todo sale bien, puedes entrar a los Estados Unidos después del 1ero de Octubre — seis meses después de la fecha de la aplicación, y no antes. Esto significa que no puedes trabajar para esa compañía hasta que realmente consigas la visa de tipo H-1B, lo cual puede ser un problema: la compañía necesita resolver como continuar trabajando remotamente mientras esperan que la visa se active. En mi caso, la compañía decidió contratarme como un desarrollador independiente, facturar mis horas como servicios profesionales, y no rompió ninguna ley de inmigración y trabajo.

Volé a San Francisco el 1ero de Octubre de 2012. El objetivo que había ansiado desde que puedo recordar fue finalmente completado.

Fuente: https://www.toptal.com/freelance/el-viaje-de-un-desarrollador-ios-desde-honduras-hasta-silicon-valley/es

28 Jun 2016

¿Por qué hay tantos Pythons?

 

Toptal blog screen shot 2013 09 18 at 1.33.10 pm

BY CHARLES MARSH – HEAD OF COMMUNITY @ TOPTAL (TRANSLATED BY PABLO FABREGAT)
#IronPython #Jython #PyPy #Python #RPython #RubyPython
110
SHARES

This article was originally written in English

Python es asombroso.

Sorprendentemente, esa es una declaración bastante ambigua. ¿A qué me refiero con ‘Python’?, ¿Me refiero a la interfaz abstracta de Python?, ¿Me refiero a CPython, la implementación común de Python (y no confundir con Cython, que son similares en sus nombres)?, ¿O me refiero a algo completamente distinto? Tal vez me esté refiriendo indirectamente a Jython, o IronPython, o PyPy. O tal vez me he ido al extremo y estoy hablando de RPython o RubyPython (los cuales son cosas muy, muy distintas).

Mientras las tecnologías mencionadas anteriormente son llamadas de formas parecidas y referenciadas de la misma manera, algunas de ellas sirven para propósitos completamente distintos (o, al menos, operan de maneras completamente distintas).

A lo largo de mi tiempo trabajando con Python, me topé con toneladas de estas herramientas .*ython. Pero no hasta hace poco me tomé el tiempo de entender qué es lo que son, cómo funcionan y por qué son necesarias (a sus maneras).

En este artículo, voy a empezar desde cero y recorreré varias implementaciones de Python, concluyendo con una introducción detallada a PyPy, el cual creo es el futuro del lenguaje.

Todo empieza con entender que es lo que ‘Python’ realmente es.

Si tienes un buen entendimiento sobre código binario, máquinas virtuales y parecidos, siéntete libre de saltarte esta parte.

“Python es interpretado o compilado?”

Este es un punto común de confusión para principiantes en Python.

La primera cosa que hay que saber es que ‘Python’ es una interfaz. Existe una especificación sobre lo que Python debería hacer y cómo debería comportarse (cómo con cualquier interfaz). Y hay múltiples implementaciones (como en cualquier interfaz).

Lo segundo que hay que saber es que ‘interpretado’ y ‘compilado’ son propiedades de una implementación, no de una interfaz.

Entonces, la pregunta no está realmente bien formada.

¿Python es interpretado o compilado? La pregunta no está realmente bien formada.
Dicho esto, para la implementación más común (CPython: escrito en C, usualmente llamado simplemente ‘Python’, y seguramente lo que estás usando si no tienes idea de lo que estoy hablando), la respuesta es: interpretado, con algunas partes compiladas. CPython compila** el código fuente de Python a *bytecode, y en ese momento interpreta ese bytecode, ejecutándolo sobre la marcha.

* Nota: no es una ‘compilación’ en sentido tradicional de la palabra. Normalmente, decimos que ‘compilar’ es tomar el código de alto nivel y convertirlo en código binario. Pero es un tipo de ‘compilación’.

Veamos la respuesta un poco más de cerca, ya que nos permitirá entender algunos de los conceptos que surgirán más adelante en el artículo.

Bytecode vs. código binario

Es muy importante entender la diferencia entre bytecode y código binario (o nativo), tal vez mejor ilustrada con ejemplos:

C compila a código binario, que luego es ejecutado directamente en tu procesador. Cada instrucción le indica a tu CPU que mueva cosas alrededor.
Java compila a bytecode, que luego es ejecutado en la máquina virtual de Java(Java Virtual Machine, ó JVM), una abstracción de una computadora que ejecuta programas. Cada instrucción es entonces manejada por la JVM, que interactúa con tu computadora.
En términos breves: código binario es más rápido, pero bytecode es más portable y seguro.

El código binario se ve distinto, dependiendo de tu máquina, pero bytecode se ve igual en todas las maquinas. Se podría decir que el código binario está optimizado para tu configuracion.

Volviendo a CPython, el proceso en el conjunto de herramientas sucede de la siguiente manera:

CPython compila tu código Python a bytecode
Ese bytecode es entonces ejecutado en la Máquina Virtual CPython
Los principiantes asumen que Python es compilado a raíz de los archivos .pyc. Hay alguna verdad en esto: el archivo .pyc es bytecode compilado, que es después interpretado. Entonces si haz ejecutado código Python y ya tienes un archivo .pyc disponible, el mismo va a ejecutarse más rápido la segunda vez ya que no necesitará recompilar el bytecode.
Maquinas virtuales alternativas: Jython, IronPython, y más

Cómo mencioné anteriormente, Python tiene varias implementaciones. De vuelta, como mencioné antes, la más común es CPython. Ésta es una implementación de Python escrita en C y es considerada la implementación ‘por defecto’.

¿Pero, qué pasa con las alternativas? Una de las más prominentes es Jython, una implementación en Java que utiliza la JVM. Mientras CPython produce bytecode para ser corrido en la VM de CPython, Jython produce bytecode de Java para correr en la JVM (esto es lo mismo que es producido cuando se compila un programa en Java).

“¿Por qué usaría alguna vez una implementación alternativa?”, podrías preguntar. Bueno, para empezar, esas diferentes implementaciones juegan muy bien con diferentes conjuntos de tecnologías.

CPython hace muy fácil el escribir extensiones C para tu código Python porque al final es ejecutado por un intérprete de C. Por otro lado, Jython, facilita trabajar con otros programas en Java: puedes importar cualquier clase de Java sin mayor esfuerzo, evocando y utilizando tus clases Java dentro tus programas Jython. (Nota aparte: si no pensaste en esto detalladamente, es una locura. Estamos en un punto donde puedes mezclar y triturar diferentes lenguajes y compilarlos todos en una misma esencia. Como fue mencionado por Rostin, los programas que mezclan código Fortran y C están desde hace un tiempo. Así que, por supuesto que esto no es algo necesariamente nuevo. Pero sigue siendo genial.)

Cómo ejemplo, esto es código Jython válido:

[Java HotSpot(TM) 64-Bit Server VM (Apple Inc.)] on java1.6.0_51
>>> from java.util import HashSet
>>> s = HashSet(5)
>>> s.add(«Foo»)
>>> s.add(«Bar»)
>>> s
[Foo, Bar]
IronPython es otra implementación popular de Python, escrita enteramente en C# y apuntando a la tecnología .NET. En particular, corre con lo que se podría llamar la Máquina Virtual .NET,Common Language Runtime (CLR)de Microsoft, comparable con la JVM.

Podrías decir que Jython : Java :: IronPython : C#. Corren en sus respectivas VMs, puedes importar clases C# en tu código IronPython y clases Java desde tu código Jython, etc.

Es totalmente posible sobrevivir sin tocar alguna vez una implementación de Python no-CPython. Pero hay ventajas que se obtienen desde el cambio, muchas de ellas son dependientes de la tecnología que uses. ¿Usas muchos lenguajes basados en la JVM? Jython puede ser para tí. ¿Todo lo que haces es sobre la tecnología .NET? Tal vez debas probar IronPython (y tal vez ya lo hayas hecho).

Por cierto: mientras que esto no sería una razón para usar una implementación diferente, nota que estas implementaciones sí difieren en comportamiento más allá de como tratan tu código fuente en Python. Sin embargo, esas diferencias son comúnmente menores, y se disuelven o emergen con el tiempo mientras estas implementaciones se encuentran bajo un activo desarrollo. Por ejemplo, IronPython usa cadenas Unicode por defecto; Sin embargo, CPython, por defecto usa ASCII para versiones 2.x (fallando con un error de codificación UnicodeEncodeError para caracteres no-ASCII), pero sí soporta cadenas Unicode por defecto para las versiones 3.x.

Compilación Justo-a-Tiempo: PyPy y el futuro

Por lo tanto, tenemos una implementación de Python escrita en C, una en Java una en C#. El próximo paso lógico: una implementación de Python escrita en… Python. (El lector educado encontrará esta notación levemente engañosa).

Aquí es donde las cosas se ponen confusas. Primero, discutamos sobre compilación Justo-a-Tiempo (Just-in-Time, ó JIT).

JIT: El por qué y el cómo

Recordemos que el código binario es mucho más rápido que bytecode. Bueno, ¿y si pudiéramos compilar algunas partes de nuestro bytecode y luego correrlo como código nativo? Tendríamos que pagar algún precio al compilar a bytecode (por ej., tiempo), pero si el resultado fuese más rápido, eso sería genial! Esa es la motivación de la compilación JIT, una técnica híbrida que mezcla los beneficios de los interpretadores y los compiladores. En términos básicos, JIT quiere utilizar compilación para acelerar un sistema interpretado.

Por ejemplo, un enfoque común tomado por la compilación JIT:

Identificar bytecode que es ejecutado frecuentemente.
Compilar a código binario.
Almacenar el resultado en memoria caché.
Siempre que el mismo bytecode sea encontrado para ejecutar, en vez de usarlo, ejecutar el código binario precompilado y cosechar los beneficios (por ej., aumentos de velocidad)
De esto se trata PyPy: llevar JIT a Python (mira el Apéndice para ver esfuerzos anteriores). Hay, por supuesto, otros objetivos: PyPy apunta a ser multiplataforma, bajo en consumo de memoria e independiente del conjunto de tecnologías. Pero JIT realmente se vende por si solo. Como promedio de un puñado de pruebas de tiempo, se dice que mejora el rendimiento a un factor de 6.27. Para un mayor análisis, véase este cuadro del PyPy Speed Center:

Like what you’re reading?Get the latest updates first.

Enter your email address…
Get Exclusive Updates
No spam. Just great engineering and design posts.
PyPy es difícil de entender

PyPy tiene un gran potencial, y a estas alturas es muy compatible con CPython (así que puede correr Flask, Django, etc.).

Pero hay mucha confusión alrededor de PyPy (véase, por ejemplo, esta propuesta sin sentido para crear un PyPyPy…). En mi opinión, eso es principalmente porque PyPy es actualmente dos cosas:

Un intérprete de Python escrito en RPython (no Python (he mentido antes). RPython es un subconjunto de Python con tipos estáticos. En Python, es “prácticamente imposible” razonar rigurosamente acerca de tipos (¿Por que es tan difícil? Bueno, considera el hecho que:

x = random.choice([1, «foo»])
sería código Python válido (créditos a Ademan). ¿De qué tipo es x? ¿Cómo podemos razonar acerca de tipos de variables cuando los tipos ni siquiera son estrictamente forzados?). Con RPython, sacrificas algo de flexibilidad, pero a cambio es muchísimo más fácil razonar sobre manejo de memoria y demás, lo cual permite optimizaciones.
Un compilador que compila código RPython para varios objetivos y agrega JIT. La plataforma por defecto es C, por ej., un compilador RPython-a-C, pero también puedes apuntar a JVM y otros.
Únicamente para mayor claridad, me referiré a ellos como PyPy (1) y PyPy (2).

¿Por qué necesitarías esas dos cosas, y por qué bajo el mismo techo? Piénsalo de esta manera: PyPy(1) es un intérprete escrito en RPython. Entonces toma el código Python del usuario y lo compila a bytecode. Pero el interpretador en sí (escrito en RPython) tiene que ser interpretado por otra implementación de Python para poder correr, ¿Verdad?

Bueno, podríamos simplemente usar CPython para correr el intérprete. Pero eso no sería lo suficientemente rápido.

En cambio, la idea es que usemos PyPy(2) (también conocido cómo RPython Toolchain)-Set de herramientas RPython) para compilar al interpretador de PyPy a código que otra plataforma (por ej., C, JVM o CLI) pueda correr en nuestra máquina, agregando también JIT. Es mágico: PyPy agrega dinámicamente JIT a un interpretador, generando su propio compilador! (De vuelta, esto es una locura: estamos compilando un interpretador y agregando otro compilador independiente por separado).

Al final, el resultado es un ejecutable independiente que interpreta el código fuente Python y explota las optimizaciones de JIT. Que es lo que justamente queríamos! Es un gran bocado, pero tal vez este diagrama ayude:

Reiterando, la verdadera belleza de PyPy es que podemos escribir nosotros mismos un puñado de interpretadores Python distintos en RPython sin preocuparnos por JIT (salvo algunas sugerencias). PyPy entonces implementaría JIT por nosotros usando el set de herramientas de RPython/PyPy(2).

De hecho, si nos ponemos aún más abstractos, podrías, teóricamente, escribir un interpretador para cualquier lenguaje, alimentar a PyPy con él, y obtener un JIT para ese lenguaje. Esto es porque PyPy se enfoca en optimizar el interpretador actual, en vez de los detalles del lenguaje que está interpretando.

Podrías, teóricamente, escribir un interpretador para *cualquier* lenguaje, alimentar a PyPy con él, y obtener un JIT para ese lenguaje.
Divagando un poco, me gustaría mencionar que JIT en sí mismo es absolutamente fascinante. Usa una técnica llamada tracing (ó seguimiento), la cual se ejecuta de la siguiente manera:

Correr el interpretador e interpretar todo (sin agregar nada de JIT)
Perfilar levemente el código interpretado.
Identificar operaciones que hayas realizado antes.
Compilar esos pedazos a código binario.
Para más información, este documento es altamente accesible y muy interesante.

Para ir concluyendo: usamos el compilador RPython-a-C de PyPy (u otra plataforma) para compilar el interpretador implementado RPython de PyPy.

Concluyendo

¿Por qué es tan genial? ¿Por qué vale la pena perseguir esta idea tan loca? Creo que Alex Gaynor lo describió muy bien en su blog: “[PyPy es el futuro] porque ofrece mejor velocidad, más flexibilidad y es una mejor plataforma para el crecimiento de Python.”

En resumen:

Es rápido porque compila código fuente a código nativo (usando JIT).
Es flexible porque agrega JIT a tu interpretador con muy poco trabajo adicional.
Es flexible (de nuevo) porque puedes escribir tus interpretadores en RPython, lo cual hace que sea más fácil de extender que, digamos, C de hecho, es tan fácil que hay un tutorial para escribir tus propios intérpretes.
Apéndice: Otros nombres que tal vez hayas oído

Python 3000 (Py3k): nombre alternativo para Python 3.0, un mayor, compatible-con-versiones-anteriores lanzamiento de Python que alcanzó la escena en 2008. El equipo de Py3k predijo que llevaría alrededor de cinco anos para que esta versión sea completamente adoptada. Y mientras que la mayoría (cuidado: se dice que es anecdótico) de los desarrolladores de Python siguen usando Python 2.x, la conciencia de Py3k entre la gente está incrementándose.
Cython: un super set de Python que incluye bindings (ó enlaces)para llamar funciones de C.
Objetivo: permitirte escribir extensiones en C para tu código Python
Además te permite agregar tipos de variables estáticos a tu código Python, permitiéndole que sea compilado y alcanzar rendimiento parecido al de C.
Es similar a PyPy, pero no es lo mismo. En este caso, estás forzado a escribir el código del usuario antes de pasarlo al compilador. Con PyPy, escribes simplemente código Python, y el compilador maneja cualquier optimización.
Numba: : un “compilador especializado justo-a-tiempo” que agrega JIT a código Python anotado. En términos más básicos, le das algunas indicaciones y acelera partes de tu código. Numa viene como parte de la distribución Anaconda,un set de paquetes para manejo y análisis de datos.
IPython: muy diferente a todo lo que hemos discutido hasta ahora. Es un ambiente de procesamiento para Python. Interactivo y con soporte para herramientas gráficas y experiencia de navegador, etc.
Psyco: un modulo de extensión de Python, y uno de los primeros esfuerzos de JIT en Python. De todas formas, ha sido marcado como “sin mantenimiento y muerto”. De hecho, el desarrollador principal de Psyco, Armin Rigo, ahora trabaja en PyPy.
Enlaces de lenguaje

RubyPython: un puente entre las máquinas virtuales de Ruby y Python. Permite embeber código de Python dentro de tu código de Ruby. Defines donde Python comienza y termina, y RubyPython calcula los datos entre las VMs.
PyObjc: enlaces de lenguaje entre Python y Objetive-C, actuando como un puente entre ellos. Prácticamente, eso significa que puedes utilizar librerías de Objective-C (incluyendo todo lo que necesitas para crear aplicaciones de OS X) desde tu código Python, y módulos de Python desde tu código Objective-C. En este caso, es conveniente que CPython esté escrito en C, el cual es un subconjunto de Objective-C.
PyQt: mientras PyObjc te ofrece una interfaz para los componentes gráficos de OS X, PyQt hace lo mismo para el framework de QT, permitiendote crear completas interfaces gráficas, acceso a bases de datos SQL, etc. Otra herramienta dirigida a traer la simplicidad de Python a otros frameworks.
Frameworks JavaScript

pyjs (Pyjamas): un framework para crear aplicaciones web y de escritorio en Python. Incluye un compilador Python-a-Javascript, un conjunto de widgets, y algunas herramientas más.
Brython: una máquina virtual de Python escrita en JavaScript para permitir que el código de Py3k sea ejecutado en navegadores.

Contenido traducido por Pablo Fabregat, miembro de TransBunko, un mercado de traducciones técnicas.

 

Fuente: https://www.toptal.com/python/por-que-hay-tantos-pythons/es

28 Jun 2016

Init.js: Una guía de los Por Qué y Cómos en el conjunto de tecnologías de JavaScript

 

La Historia

Entonces, tú y tu cofundador tienen esta genial idea para un negocio, ¿verdad?

Has estado agregando características en tu cabeza.

Frecuentemente, le preguntas a tus potenciales clientes sus opiniones, y todos ellos la aman.

Ok, entonces la gente la quiere. Hay hasta un poco de dinero para hacer. Y la única razón por la cual ellos no pueden obtenerla es porque no las has implementado—todavía.

Entonces, finalmente, te sientas un día y dices “¡Hagámoslo!”. Pronto, estás tratando de averiguar cómo aplicar la lógica de negocio de tu aplicación, la funcionalidad asesina que va a llevar adelante al producto: tienes una idea de cómo hacerlo, y ahora sabes que puedes hacerlo.

“¡Listo!¡Funciona!” dices. ¡Tu prueba de concepto es un éxito! Todo lo que queda por hacer es empaquetarlo en una aplicación web.

“Ok, hagamos el sitio”, dices.

Y entonces, te das cuenta de la verdad: necesitas elegir un lenguaje de programación; necesitas elegir una plataforma (moderna); necesitas elegir algunos frameworks (modernos); necesitas configurar (y comprar) espacio, base de datos y proveedores de alojamiento; necesitas una interfaz de administración; necesitas un sistema de permisos; necesitas un administrador de contenidos.

Quieres ser escueto, quieres ser ágil. Quieres usar tecnologías que te ayudaran a tener éxito en el corto-y largo-plazo. Y no son siempre fáciles de elegir

Tienes que tomar decenas y decenas de decisiones de arquitectura . Y quieres tomar las correctas: quieres usar tecnologías que te permitan desarrollo rápido, iteración constante, máxima eficiencia, velocidad, robustez y más. Quieres ser escueto, quieres ser ágil. Quieres usar tecnologías que te ayudaran a tener éxito en el corto-y largo-plazo. Y no son siempre fáciles de elegir.

“Estoy abrumado”, dices, mientras te vas sintiendo abrumado. Tu energía no es la misma de antes. Tratas de encajar las piezas, pero es demasiado trabajo.

Tu prueba de concepto se marchita y muere lentamente.

La Propuesta

Luego de abandonar toneladas de ideas de esta forma, decidí diseñar una solución. La llamo el proyecto ‘Init’ (Inicio)(ó init.js).

El corazón de la idea es tener un simple proyecto que inicie todos los demás, dejar que el desarrollador o el fundador técnico tomen esas decisiones al mismo tiempo y recibir una plantilla apropiada para empezar basada en esas decisiones. Se lo que van a decir los detractores, “Una solución no puede aplicarse a todos los problemas” (Odiadores odiarán). Y puede que estén en lo cierto. Pero podemos hacer nuestro mejor esfuerzo para crear una solución aproximada, y creo que Init se acerca bastante.

Para lograr mejor este objetivo, tenemos que tener algunas ideas claves en mente. Cuando estaba desarrollando Init, consideré:

  • ComponentesLa modularización es una característica clave de cualquier sistema ya que te permite reusar componentes de software a través de distintos proyectos—lo cual es el principal objetivo de Init. Pero la modularización también viene con una “reemplazabilidad” por producto, la cual será nuestra mejor aliada a la hora de atacar varios tipos de problemas con “casi” la misma solución.
  • Facilidad de DesarrolloPara algunos problemas, en algún lado hay una mejor solución escrita en [Brainf*ck](https://en.wikipedia.org/wiki/Brainfuck). ó jodecerebros). Pero implementar esa solución (en Brainf*uck) sería casi imposible de escribir, y mucho menos de leer. Te costaría tiempo y una enorme cantidad de esfuerzo. En general, deberías usar lenguajes y plataformas que hagan al desarrollo fácil, y no difícil para tí (o alguien que puede trabajar con él más tarde).
  • ComunidadCualquier plataforma que elijas, asegúrate que tenga una gran comunidad, y una que te pueda ayudar con los problemas más comunes y con los que no lo son tanto. Recuerda: jQuery puede no ser la librería másrápida, la más limpia, o la más elegante—pero es un ganador sólo por su comunidad.

Teniendo estos objetivos en mente, voy a mostrarte como hice mis propias decisiones al crear Init.

En su núcleo, Init se aprovecha del paradigma ‘full-stack JavaScript’ (algunas personas se refieren a él, o a una parte de él, como el MEAN Stack). Al trabajar con este conjunto, Init es capaz de usar solamente un sólo lenguaje mientras crea un ambiente increíblemente flexible y con todas las funciones para desarrollar aplicaciones web. En resumen, Init te permite usar JavaScript no solamente para desarrollo del lado cliente y servidor, pero también para construir, testear, maquetar, y más.

Pero bajemos un poco la velocidad y preguntémonos: ¿es realmente una buena idea usar JavaScript?

Por qué elegí JavaScript

Soy desarrollador web desde 1998. Por esas épocas usabamos Perl para la mayoría de nuestro desarrollo del lado del servidor, y aún desde esos tiempos teníamos JavaScript del lado del cliente. Las tecnologías web del lado servidor han cambiado inmensamente desde entonces: fuimos a través de oleada tras oleada de distintas tecnologías y lenguajes cómo PHP, ASP, JSP, .NET, Ruby, Python, solo por nombrar algunas. Los desarrolladores comenzaron a darse cuenta que usando dos distintos lenguajes para ambientes cliente y servidor estaba complicando las cosas. Los intentos iniciales para unificar bajo un mismo lenguaje intentaban crear componentes cliente del lado del servidor y compilarlos en JavaScript. Esto no funcionaba como se esperaba y muchos de esos proyectos fallaron (por ejemplo, ASP MVC reemplazando los formularios web de ASP.NET, y podría decirse queGWT será reemplazado por Polymer). en un futuro cercano). Pero era una excelente idea, en esencia: un lenguaje único en el cliente y el servidor, permitiéndonos reusar componentes y recursos (esta es la clave:recursos).

La respuesta era simple: usar JavaScript en el servidor.

De hecho, JavaScript nació con JavaScript Server Side en Netscape Enterprise Server, pero el lenguaje simplemente no estaba listo en esa época. Luego de años de prueba y error, Node.js finalmente emergió, lo cual no solo puso a JavaScript en el servidor, pero además promovió la idea de programación no-bloqueante, cambiando la forma en la que escribimos “fread”(I/O) para siempre (lee más aquí.

En una oración: la programación no-bloqueante apunta a poner tareas que consumen tiempo a un lado, usualmente especificando que se debería hacer una vez que estas tareas se hayan completado, y permitiendo que el procesador maneje otros pedidos mientras tanto.

Pero esas ideas no eran nuevas—entonces, ¿por que se volvieron tan populares con Node.js? Simple, la programación no-bloqueante puede ser alcanzada de distintas formas. Tal vez la más fácil es usar callbacks y un evento en bucle. En la mayoría de los lenguajes, esa no es una tarea fácil: mientras que los ‘callbacks’ son una característica común en algunos lenguajes, un evento en bucle no lo es y usualmente te encuentras aferrándote a librerías externas (por ejemplo: Python, con Tornado). Pero en JavaScript, los callbacks son construidos dentro del lenguaje, como también el evento en bucle, y casi cualquier programador que haya incursionado en JavaScript está familiarizado con ellos (o al menos los han usado, aunque no entiendan del todo que significa un evento en bucle). De repente, cada una de las startup en el Planeta Tierra podía reusar desarrolladores (por ej., recursos) tanto en el lado cliente cómo en el lado del servidor, resolviendo el problema de “Se necesita Gurú Python”.

De repente, cada una de las startup en el Planeta Tierra podía reusar desarrolladores (por ej., recursos) tanto en el lado cliente cómo en el lado del servidor, resolviendo el problema de “Se necesita Gurú Python”.

Entonces, ahora tenemos una plataforma increíblemente rápida (gracias a la programación no-bloqueante) con un lenguaje de programación que es increíblemente fácil de usar (gracias a JavaScript). Pero, ¿Es suficiente? ¿Perdurará? Estoy seguro que JavaScript va a tener un importante lugar en el futuro. Déjame decirte por qué:

  • Programación FuncionalJavaScript fue el primer lenguaje de programación que llevó el paradigma funcional a las masas (por supuesto, Lisp llegó primero, pero la mayoría de los desarrolladores nunca han construido una aplicación en Lisp lista para ser usada en producción). Lisp y Self, influencias principales de Javascript, están llenos de ideas innovadoras. Esas ideas pueden liberar nuestras mentes para explorar nuevas técnicas, patrones y paradigmas. Y todos ellos llevan a JavaScript. Mira monads, codificación Church, o incluso (para un ejemplo más práctico) la colección de funciones](http://underscorejs.org/#collections), de Underscore.js las cuales pueden salvarte líneas y líneas de código.
  • Objetos Dinámicos y herencia PrototipadaLa programación orientada a objetos sin clases (y sin las interminables herencias de clases) permite rápido desarrollo (crear objetos, agregar métodos y usarlos) pero, lo más importante, reduce el tiempo de refactorización durante tareas de mantenimiento dejando que el desarrollador modifique instancias de objetos en vez de clases. Esta velocidad y flexibilidad pavimenta el camino para el desarrollo rápido.
  • JavaScript es InternetJavaScript fue diseñado para Internet, ha estado aquí desde el principio, y no va a irse. Todos los intentos por destruirlo han fallado, mira, por ejemplo, la caída de los Applets Java, el reemplazo de VBScript de Microsoft, TypeScript (que compilaba a JavaScript), y la caída de Flash en manos del mercado móvil y HTML5. Es imposible reemplazar Javascript sin romper millones de páginas web, así que nuestro objetivo a largo plazo debería ser el de mejorarlo. Y no hay nadie mejor para esa tarea que el Technical Committee 39 de ECMA.Ok, alternativas a JavaScript nacen todos los días, cómo CoffeeScript, TypeScript, y los los millones de lenguajes que compilan a JavaScript. Esas alternativas pueden ser útiles para etapas de desarrollo (por medio de mapeos de código fuente), pero fallarán al tratar de suplantar JavaScript a largo plazo por dos razones: sus comunidades nunca serán más grandes, y sus mejores funcionalidades serán adoptadas por el script de ECMA (por ej., JavaScript). JavaScript no es como un lenguaje ensamblador: es un lenguaje de programación de alto nivel con código fuente que puedes entender—entonces deberías entenderlo.
Ahora, gracias al proyecto Esprima, puedes crear tus propias herramientas para jugar con el código fuente, modificándolo, cambiando su estilo, agregando comentarios, instrumentando, y todo de tipo de cosas que puedas imaginar al jugar con el Árbol de Sintaxis Abstracta de tu programa como si estuvieses jugando con un Árbol DOM.

JavaScript de extremo a extremo: Node.js y MongoDB

Entonces, esas son las razones para usar JavaScript. Ahora, voy a usar JavaScript como una razón para usar Node.js y MongoDB.

  • Node.jsNode.js es una plataforma para construir aplicaciones de red rápidas y escalables—eso es básicamente lo que dice el sitio de Node.js. Pero Node.js es más que eso: es el entorno de ejecución preferido por cualquier aplicación con acceso de E/S en JavaScript. Incluso si no planeas escribir tu aplicación del servidor principal con Node.js, puedes usar herramientas creadas construidas encima de Node.js para mejorar tu proceso de desarrollo. Por ejemplo: Mocha.js para unit testing, Grunt.js para tareas de construcción automatizadas, o incluso Brackets para completar edición de código.Entonces, si vas a escribir aplicaciones de JavaScript para servidor o cliente, deberías familiarizarte con Node.js, porque vas a necesitar usarlo diariamente. Hay algunas interesantes alternativas), pero ninguna de ellas llega siquiera al 10% de la comunidad de Node.js.
  • MongoDBMongoDB es una base de datos NoSQL basada en documentos que usan JavaScript como su lenguaje de consultas, permitiendo completar de extremo-a-extremo la plataforma JavaScript. Pero esa no es siquiera la razón principal para elegir esta base de datos.MongoDB es una base de datos sin esquema que permite persistir tus objetos de una manera flexible y por lo tanto adaptarse más rápidamente a los cambios en los requisitos. Además, es altamente escalable y basado en map-reduce, lo cual lo hace adecuado para aplicaciones con muchos datos. MongoDB es tan flexible que puede ser usado como una base de datos de documentos sin esquema, un almacén de datos relacional (aunque le faltan transacciones),o incluso almacenamiento de clave-valor para respuestas de caché.

Modularización de Servidor con Express.js

Modularización en el lado del servidor nunca es fácil. Pero con Express.js (y Connect.js) vino la idea de‘middleware’(ó software intermedio). En mi opinión, middleware es la mejor forma de definir componentes en el servidor. Si quieres compararlo con un patrón conocido, se acerca bastante a los tubos y filtros.

La idea básica es que tu componente es parte de una tubería. La tubería procesa el pedido (entrada) y genera una respuesta (salida), pero tu componente no es responsable por la respuesta completa. En cambio, solo modifica lo que necesita y luego delega hacia la otra pieza de la tubería. Cuando la última pieza de la tubería termina su proceso, la respuesta se envía al cliente.

Nos referimos a estas ‘piezas de tubería’ como ‘middleware’. Claramente, podemos crear dos tipos demiddleware:

  • Intermedios: Esos que procesan el pedido y la respuesta, pero no son del todo responsables por la respuesta en sí, entonces delegan al siguiente middleware.
  • Finales: Esos que toman la responsabilidad por completo en la respuesta final. Ellos procesan y modifican el pedido y la respuesta, pero no necesitan delegar al siguiente middleware. En la práctica, se recomienda que delegues a un siguiente middleware, de todas maneras, para permitir flexibilidad en la arquitectura (por ej., agregar más middleware después), aunque ese middleware no exista (en ese caso la respuesta irá directamente al cliente)

Como ejemplo concreto, considera un componente ‘usuario administrador’ en el servidor. En términos de middleware, tendríamos tanto finales como intermediarios. Para nuestros finales, tendríamos características tales como crear un usuario y listar usuarios. Pero antes que podamos realizar esas acciones, necesitamos nuestros intermediarios para autenticación (ya que no queremos pedidos que creen usuarios sin autenticar). Una vez que creamos estos intermediarios para autenticación, podemos simplemente conectarlos en cualquier lado que queramos para convertir una característica sin autenticación existente en una con autenticación.

Aplicaciones de una sóla página

El proyecto Init enfoca en crear aplicaciones de una sóla página (SPAs-Single-Page Applications). Muchos desarrolladores web se han tentado más de una vez en probar construir SPAs. Desarrollé usando varias (principalmente propietarias), y puedo decir con confianza que son simplemente el futuro de las aplicaciones web. ¿Alguna vez comparaste una SPA con una aplicación web regular en una conexión móvil? La diferencia de respuesta es de decenas de segundos.

¿Alguna vez comparaste una SPA con una aplicación web regular en una conexión móvil? La diferencia de respuesta es de decenas de segundos.

Las SPA son el futuro de la web—¿entonces por que harías tu producto en un formulario antiguo? Un argumento común que escucho es que la gente está preocupada por el SEO. Pero si manejas las cosas correctamente, esto no debería ser un problema: Google mismo tiene un muy buen tutorial sobre como hacerlo, y hay muy buenos comentarios aquí también.

MV* del lado del cliente con Backbone.js, Marionette.js y Twitter Bootstrap

Mucho se ha dicho acerca de los MVC* frameworks para SPAs. Es una decisión complicada, pero voy a decir que el top 3 son Backbone.js, Ember.js, y Angular.js.

Los tres son bien considerados. ¿Pero cual de ellos es el mejor para tí?

Desafortunadamente, tengo que admitir que tengo una experiencia muy limitada con Angular.js, así que voy a dejarlo fuera de esta discusión. Ahora, Ember.js y Backbone.js representan dos maneras distintas de atacar el mismo problema.

Backbone.js es minimalista, simplista y te ofrece lo suficiente para crear una simple SPA. Por otro lado, Ember.js es un framework completamente profesional para crear SPAs. Tiene más adornos, pero también una curva de aprendizaje más grande.

Dependiendo del tamaño de tu aplicación, la decisión puede ser tan fácil como mirar el ratio de featuresUsed/featuresAvailable(características Usadas/Disponibles), lo cual te dará una gran pista.

En el caso de Init, quería cubrir la mayoría de los escenarios, así que elegí Backbone.js para creación fácil de SPAs, con Backbone.Marionette.View para modularización. De esta forma, cada componente es una simple aplicación, y la aplicación final puede ser tan compleja como queramos que sea.

Estilizar es también un desafío, pero podemos, de vuelta, contar con frameworks para rescatarnos. Para CSS, no hay nada mejor que Twitter Bootstrap, que ofrece un completo set de estilos que ya están listos para usar y sonfáciles de personalizar.

Booststrap fue creado usando el lenguaje LESS que es de código abierto, así que podemos modificarlo si así lo necesitasemos. Viene con una tonelada de controles de usabilidad que están bien documentados en el sitio de Bootstrap. Además, hay un modelo de personalización que te permite crear tus propios controles. Definitivamente es el hombre para este trabajo.

Mejores prácticas: Grunt.js, Mocha.js, Chai.js, RequireJS y CoverJS

Finalmente, deberíamos definir algunas de nuestras mejores prácticas, y buscar en como Init puede ayudarte a implementarlas y mantenerlas. Nuestra solución está centrada en varias herramientas, que están basadas en Node.js.

  • Mocha.js and Chai.js:Estas herramientas te permiten mejorar tu proceso de desarrollo aplicando TDD o BDD, proveyendo la infraestructura para organizar tus tests unitarios y un lanzador para correrlos automáticamente.Hay miles de frameworks para test unitarios para JavaScript. ¿Entonces, por que usar Mocha.js? La respuesta corta: es flexible y completo.La respuesta larga: tiene dos características importantes (interfaces, reporters) y una ausencia importante (assertions). Déjenme explicarles.
    • Interfaces: tal vez estés acostumbrado a los conceptos de TDD de suites y tests unitarios, o tal vez prefieras ideas BDD de especificaciones de comportamiento con “describe” y “it should”. Mocha.js te permite usar los dos acercamientos.
    • Reporters: correr tu test generará reportes de resultados, y puedes darle formato a esos resultados usando varios reporters. Por ejemplo, si tienes que alimentar un servidor de Integración Continua, puedes encontrar un reporter para hacer exactamente eso.
    • Falta de una librería de assertions: : lejos de ser un problema, Mocha.js fue diseñado para dejarte usar la librería de assertions que prefieras, ofreciendo más flexibilidad. Hay muchas opciones, pero ahí es donde Chai.js entra en acción.

    Chai.js es una librería de assertions flexible que permite usar cualquiera de los tres más importantes estilos de assertions:

    • Assert: Estilo de assertion clásico de la vieja escuela. Ej.:
        assert.equal(variable, ”valor”);  
      
    • Expect: Tipo de assertion encadenable más comúnmente usado en BDD. Ej.:
        expect(variable).to.equal(“valor”);
      
    • Should: También usado en BDD, pero prefiero Expect porque Should porque suena repetitivo con la especificación de comportamiento _’it _(“should do something..”-” eso debería hacer algo”). Ej.:
        variable.should.equal(“valor”);
      

    Chai.js se combina perfectamente con Mocha.js. Usando solamente estas dos librerías, puedes escribir tus test en TDD, BDD, o cualquier estilo imaginable.

  • Grunt.js:Grunt.js permite automatizar tareas de construcción, cualquier cosa desde simples archivos concatenados copiados y pegados, a plantillas precompiladas, estilo compilado de lenguaje (por ej., SASS y LESS), test unitario (con mocha.js), linting y compresión de código (ej., con UglifyJS o Closure Compiler). Puedes agregar tu propia tarea automatizada a Grunt, o buscar en el registro de Grunt, donde hay cientos y cientos de plugins disponibles (de vuelta, usando herramientas con grandes comunidades detrás paga bien). Grunt también puede monitorear tus archivos y disparar acciones cuando estos son modificados.
  • RequireJS:RequireJS puede sonar como otra forma de cargar modulos con AMD, pero puedo asegurarte que es mucho más que eso. Para entender por qué, primero debemos mencionar la idea del namespacing de modulos (ej., demo.views.hola), lo que evita contaminar el namespace global envolviendo cada módulo en su propio namespace. El problema es, estos módulos no son reusables: si modificas el namespace de una ‘instancia’, estás modificando el namespace de todas las ‘instancias’. En contraste con eso, RequireJS permite definir módulos reusables desde el principio. (Además, te ayudará a adoptar Dependency Injection para evitar que tus modulos accedan variables globales).
  • CoverJS:Cobertura de código es una medida métrica para evaluar tu testing. Como el nombre implica, te dice cuanto código está cubierto en tu conjunto de tests actual. CoverJS mide la cobertura de código de tus tests instrumentando declaraciones (en vez de líneas de código cómo JSCoverage) y generando una versión instrumentada de tu código. También genera reportes para alimentar tu servidor de integración continua.

Usando _Branches_ (_ramas_) para alternar características

Cuando empecé Init, necesitaba una manera para que los usuarios activen y desactiven varias características que podrían llegar a querer en su proyecto. Decidí tomar un enfoque radical con el sistema de ramas de git para implementar esta funcionalidad.

En esencia, cada rama representa una característica o funcionalidad que un usuario podría querer incluir. Si estás empezando un proyecto desde el principio, empieza por la rama mínima que necesitas, y luego agrega otras tecnologías fusionando la rama con las otras deseadas. Por ejemplo, digamos que quieres empezar tu proyecto con Backbone.js y Marionette.js. Bueno, puedes empezar en la rama Backbone.js y fusionarla con la rama Marionette, continuando desde ahí para cada pedazo de funcionalidad que quieras agregar.

Por ahora, la idea de fusionar para agregar funcionalidad puede solo ser usada para plantillas de tecnología (ej., Backbone, Node, Express). Pero en el futuro, serás capaz de alternar entre back-end (ej., desde MongoDB a Postgres) e implementaciones del lado cliente.

Empieza un proyecto con Init y haz un deploy en Heroku hoy

Nunca ha habido una manera más fácil de empezar un proyecto. Dirígete al repositorio de GitHub, fijate la rama con los últimos commits (ahora mismo es usermanager, aunque esto puede cambiar en el futuro) y entonces:

  1. Crea un directorio para tu proyecto (o usa uno existente).
  2. Crea tu repositorio con “git init” (o usa un repositorio existente)
  3. Agrega un servidor remoto con Init
     git remote add init git: //github.com/picanteverde/init.git
    
  4. Descarga la rama que quieras
    git pull init usermanager
    
  5. Obtén el archivo de procesos de Heroku
     git pull init heroku-webprocess
    
  6. Con el Heroku Toolbelt instalado, crea una aplicación
     heroku create
    
  7. Haz un push a la rama master a Heroku
     git push heroku master
    
  8. Visita tu aplicación en funcionamiento en Heroku!

Ahora puedes empezar a desarrollar tu característica asesina con solo unas líneas de código. No solo eso, sino que estarás desarrollando con las últimas y más eficientes tecnologías en una suite de desarrollo lo más automatizada posible.

Espero que puedas usar Init para comenzar tu próxima gran idea. Recuerda Revisar el repositorio de Init para ver correcciones y características—su desarrollo es bastante activo, y espero con ansias escuchar sus comentarios.

 

fuente: https://www.toptal.com/javascript/init-js-una-gu-a-de-los-por-qu-y-c-mos-en-el-conjunto-de-tecnolog-as-de-javascript/es