Forem: Ayoze Barrera 🇮🇨

Como crear una guía de estilo con Figma

Ayoze Barrera 🇮🇨 — Sun, 01 Mar 2020 14:54:29 +0000

La imagen de un proyecto es súper importante, y va a influenciar al usuario directamente para que siga utilizando la aplicación y la identifique rápidamente o para que salga huyendo confuso y asustado.

Cuando trabajan varios diseñadores o programadores en un proyecto muy grande, lo mejor es crear una guía de estilo para que nadie se salga del guión y acabe diseñando algún componente fuera de tono en comparación al resto.

Para evitar esto, existen las guías de estilos.

Así que cuando llega alguien nuevo al proyecto, le podemos dar la bienvenida con una bonita guía de estilos.

Que es una guía de estilo

Una guía de estilos, como bien dice su nombre, es una guía para saber que materiales se deben de usar para seguir construyendo, como por ejemplo, que tipografía usar en los títulos, cuáles son los colores principales de la aplicación, que sombras utilizar, y cualquier aspecto que queramos definir.

En nuestra empresa, hemos creado una guía de estilos muy simple para una aplicación que llevamos desarrollando cuatro años: Fleetview.

Nuestra guía de estilo ha servido a otros compañeros para poder crear manuales y vídeos sobre la aplicación.

Hemos decidido hacerla en Figma ya que es una aplicación increible y nos permite exportar cualquier elemento en vectorial.

Que elementos añadir

Podemos añadir los elementos que consideremos más importantes, y en nuestro caso fueros los siguientes:

Branding

Los logos de la aplicación y sus variantes. Cualquier otra variante que no esté aquí definida no estará permitida.

Paleta de colores

Colores principales y secundarios.

Tipografía

La tipografía que usamos en el logo, en los títulos y en los párrafos. De cada uno de ellos definimos la familia, peso, tamaño, altura de línea, espaciado entre letras, color y un ejemplo.

Iconos

El sistema de iconos que usa la aplicación. Si hay que diseñar un icono nuevo, debe tener el mismo tamaño y mismo el grosor en las líneas.

Componentes

Los componentes más importantes que utilicen algunos de los aspectos anteriores.

Y todo junto pues se vería así:

Hasta la próxima batalla!

🖖

Mapeando tus movimientos con React y Leaflet

Ayoze Barrera 🇮🇨 — Mon, 24 Feb 2020 12:12:45 +0000

Hoy en día usamos mapas para todo… para buscar direcciones, consultar cuál es el mejor camino a tomar para llegar a un punto en concreto, para promocionar un local, o simplemente viajar desde casa (asi es, he visto a youtubers que se pasan horas dando vueltas por paises gracias a los mapas… y hacen visitas!)

Pues por ese motivo vamos a ver cómo podemos hacer un mapa con nuestros movimientos.

Moves app

Moves

Para registrar los movimientos, aunque hay otras, he usado la aplicación moves.

Moves se ejecuta en segundo plano y nos permite importar tus movimientos en diferentes formatos, y uno de ellos es geojson.

Para empezar nos vamos a la página web de moves. Allí nos permitirá importar lo registrado desde nuestro dispositivo.

Configuración

Lo primero será instalar los paquetes de leaflet y react-leaflet:

$ npm -i S leaflet react-leaflet

React-leaflet lo que hace es cargar componentes pero sin renderizar nada, simplemente usa los métodos de leaflet en el lifecycle del componente.

Podríamos conseguir nuestro mapa sin react-leaflet pero lo he usado anteriormente y ayuda mucho.

El mapa

Ya estamos listos para empezar así que lo primero será importar los paquetes que vamos a necesitar.

import { Map, TileLayer } from 'react-leaflet';
import L from 'leaflet';

De momento solo he importado dos componentes de react-leaflet: Map y TileLayer. Esto es lo básico que necesitarás para mostrar un mapa.

También he importado leaflet porque vamos a usar el método circleMarker para poder tratar los puntos de los geojsons de nuestros datos.

Map

Capa principal del mapa que controla el zoom, bordes y el centro. Lo que vayamos a representar en el mapa, lo pasaremos como hijos.

TileLayer

Componente que se encargará de mostrar los tiles correspondientes en base al zoom y al centro.

Este componente necesita la propiedad url que será al montarse.

Para este ejemplo, voy a usar un mapa en blanco y negro, pero puedes encontrar mas urls aquí.

https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.png

Ah! Antes de poder usar nuestro mapa, necesitaremos importar el css de leaflet, que puedes encontrar en su apartado de descargas.

Configurados estos dos componentes, deberíamos de tener algo muy parecido a esto:

Tanto rollo para tener un mapa vacío?

Calma… ahora viene lo bueno 😁

Nuestros movimientos

Moves, aparte de ofrecerte muchos formatos, también te separa los datos en movimientos diarios, semanales, mensuales, anuales y por último, todos en un mismo fichero. Yo voy a utilizar mis lugares visitados separados por años. En concreto los de 2016, 2017 y 2018.

Para ello voy a usar una capa de GeoJSON de leaflet, que como no, también lo tenemos como componente en react-leaflet:

import { Map, TileLayer, GeoJSON } from 'react-leaflet';

El siguiente paso sería importar los datos de nuestros movimientos:

import places2016 from './data/places_2016.js';
import places2017 from './data/places_2017.js';
import places2018 from './data/places_2018.js';

Después, tenemos que usar el componente GeoJSON como un children más en nuestro component Map:

<Map style={styles.map} center={props.center} zoom={props.zoom}>
  <TileLayer url={props.url} />
  <GeoJSON
    data={places2016}
  />
</Map>

Además de pasarle los datos a la capa GeoJSON, el componente necesita la propiedad style, que es una función que usará internamente para aplicar el style que queramos a cada elemento de nuestro geojson:

function getStyle(feature, layer) {
  return {
    weight: 1,
    opacity: 1,
    color: '#000'
  }
}

Cuidado! La función anterior solo te servirá para elementos que NO sean de tipo Point.

Dentro de mis geojsons, solo tengo elementos de tipo Point, asi necesitaré utilizar una propiedad extra: pointToLayer.

const geojsonMarkerOptions = {
  radius: 4,
  fillColor: "#EE4266",
  color: "#000",
  weight: 0,
  opacity: 1,
  fillOpacity: 0.4
}

function pointToLayer(feature, latlng) {
  return L.circleMarker(latlng, geojsonMarkerOptions);
}

En mi caso, el componente GeoJSON se queda de la siguiente manera:

<GeoJSON
  data={places2016}
  pointToLayer={pointToLayer}
/>

Ya casi terminamos!

Como voy a representar tres geojsons diferentes, y quiero representarlos con diferentes colores, tengo que crear tres funciones diferentes de pointToLayer

<Map style={styles.map} center={props.center} zoom={props.zoom}>
  <TileLayer url={props.url} />
  <GeoJSON
    data={places2016}
    pointToLayer={pointToLayer2016}
  />
  <GeoJSON
    data={places2017}
    pointToLayer={pointToLayer2017}
  />
  <GeoJSON
    data={places2018}
    pointToLayer={pointToLayer2018}
  />
</Map>

Este es el resultado final del componente:

Voilá, nuestro mapa estaría listo:

Nos vemos en la próxima batalla!

🖖🏼

Cómo crear un paquete de Node

Ayoze Barrera 🇮🇨 — Fri, 14 Feb 2020 10:02:24 +0000

Cuando vamos a crear un proyecto nuevo, nos pasamos una gran parte del tiempo copiando y pegando código de antiguos proyectos… ¿para que vamos a reinventar la rueda?

El nacimiento de nuestra librería personal

Para empezar, creamos una carpeta con el nombre del paquete, yo lo llamaré capua-package-sample, y dentro ejecutamos el siguiente comando de npm para generar nuestro package.json:

$ npm init --yes

Este comando te creará un package.json básico extrayendo información de la carpeta donde se ejecuta.

Deberíamos de tener algo parecido a esto:

{
  "name": "capua-package-sample",
  "version": "1.0.0",  
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Ayoze Barrera",
  "license": "ISC"
}

Fichero principal

Ahora que tenemos el package.json, necesitamos crear el fichero que se usará cuando se importe nuestro paquete. Este fichero se especifica en la propiedad main, y por defecto es index.js.

En este fichero, para nuestro ejemplo, exportaremos cualquier cosa, como por ejemplo una función sencilla:

exports.myAwesomeFunction = function () {
  return 'b' + 'a' + + 'a' + 'a';
}

Esta función debería de devolver «baNaNa».

Ahora solo faltaría subirlo a nuestro repositorio o publicarlo en npm!

Instalando nuestro paquete

Si has publicado el paquete sabrás como instalarlo, pero si no lo has hecho, quizás no sepas… pues es muy fácil, solo tienes que ejecutar el siguiente comando:

$ npm install <git-service>:<git-user>/<repo-name>

Si no rellenamos el servicio, buscará en github por defecto, pero soporta muchos otros… para saber más mira la documentación de npm install.

$ npm install -S github:capua/capua-package-sample
└── capua-package-sample@1.0.0  (git://github.com/capua/capua-package-sample.git#e5903fa2a1e4ee1e751a53fb0aa420cba07e949a)

Y ya solo tendríamos que importarlo:

import { myAwesomeFunction } from 'capua-package-sample';

myAwesomeFunction(); // => "baNaNa"

Nos vemos en la próxima batalla!

Mapeando con Javascript

Ayoze Barrera 🇮🇨 — Mon, 10 Feb 2020 16:56:11 +0000

Este post fue publicado originalmente en julio del 2015

Hablaremos de Mapbox y aprenderemos a manejar y reproyectar nuestros datos geoespaciales con QGIS, para añadirlos a un mapa estilizado por nosotros.

El mundo de la cartografía es enorme, y puedo decir que me queda mucho por descubrir. Este artículo es parte de la experiencia que he obtenido en un proyecto reciente.

Antes de trastear con nuestros datos geoespaciales, primero necesitamos nuestro lienzo, el mapa.

Mapbox es una plataforma para crear y usar mapas, y está basada en la librería de LeafletJS. Tiene un buen abanico de herramientas, datos y servicios que se conectan muy bien entre sí, por ejemplo, podemos estilizar un mapa con Mapbox Studio, una aplicación que usa CartoCSS para darle vida a nuestro mapa junto con otras utilidades, para luego conectarlo con la librería Mapbox.js para jugar con nuestros datos vía Javascript.

Y eso amigos, en resumen, es lo que haremos hoy 🤗.

El plan starter nos permite estilizar un mapa y guardar 100mb de datos en los servidores de Mapbox. Si subes los datos a los servidores de ellos, luego podríamos usarlos en Mapbox Studio para estilizarlos junto a nuestro mapa, pero en nuestro caso no lo haremos así, lo haremos con js usando geojsons a través de la librería Mapbox.js.

Tarifas de Mapbox

Mapbox Studio

Mapbox Studio está disponible para OS X, Windows y Linux. Incluso tenemos acceso a su código en github.

Hablemos de sus posibilidades.

Datos

Gran Canaria con la vista previa a la izquierda y vista de datos a la derecha

Nos permite añadir nuestros propios geodatos, además de todos los datos que nos ofrece por defecto, como calles, terreno, satélite… con la posibilidad de controlarlos y de inspeccionarlos a nuestra merced.

Estilo

Podemos darle colores y formas a nuestro mapa gracias al preprocesador de estilos CartoCSS desarrollado por Mapbox. También tenemos acceso a una coleccion de iconos llamados Maki que están optimizados para tres tamaños diferentes y a un catálogo de tipografías con la posibilidad de añadir la nuestra propia.

Las posibilidades de la aplicación son mayores, pero con esto nos bastará para cumplir con el objetivo del artículo.

Empecemos

Vamos a crear nuestro mapa.

Nuevo proyecto en Mapbox Studio.

Cuando vamos a crear un nuevo proyecto, tenemos la posibilidad de elegir un mapa o de añadir datos propios para luego usarlos en algún mapa. En nuestro caso, como nuestros datos irán de la mano con js, vamos a experimentar un poco con CartoCSS. Elegiré el de Run, Bike and Hike.

Lo primero que vemos al elegir el mapa es que además de éste, tenemos la hoja de estilos a nuestra derecha separadas en varios ficheros. En estos ficheros tenemos todo el estilo que forma Run, Bike and Hike y será el que modifiquemos para conseguir nuestra “obra”.

Empezaré por cambiarle el color al mar. Para cambiar el aspecto de un elemento del mapa, debemos saber su identificador. Simplemente tenemos que ponernos en la vista de datos haciendo click en el botón que está a la derecha del zoom.

En esta vista, si hacemos click en algún punto del mapa, aparecerá un tooltip con la información de todos los datos de ese lugar. También podemos irnos a la sección Layers (Capas) del menú lateral izquierdo, el cual nos desplegará una ventana con la lista de todos los elementos que tenemos actualmente en nuestro mapa. Si os fijáis en la parte superior de esta ventana, veremos que los datos están bloqueados. Eso se debe a que se necesita un orden específico de capas para que el mapa funcione bien y en el caso de que quisiéramos añadir datos nuestros no podríamos, a menos que editemos el fichero project.yml y borremos el listado de capas. En nuestro caso no necesitamos desbloquearlo.

Una vez que sepamos el identificador del agua tenemos que identificarlo en nuestro proyecto. Lo encontraremos en el fichero bg.

#water {
  polygon-fill: @water; //relleno del polígono
  polygon-gamma: 0.5; //gamma, para reducir huecos entre polígonos
  ::shadow { //symbolizer
    polygon-fill: @water; //otro relleno
    opacity:0.9; //opacidad
    comp-op: screen; //operación de composición. efecto screen
    image-filters: agg-stack-blur(10,10); //sombra del agua(costas)
  }
  [zoom>12] { //estilo para zoom superior a 12
    polygon-gamma: 0.75; 
  }
}

Las posibilidades son muy amplias: cambiar bordes, sombras, añadir patrones, aplicar efectos entre los elementos, pero no me complicaré mucho (ya me luciré mas tarde jaja) así que simplemente cambiaré algunos colores y la tipografía. Tal vez en algún artículo escriba sólo de CartoCSS y sus posibilidades, pero de momento podéis consultar la documentación para aprender todo lo que ofrece CartoCSS.

Mapa antes y después del cambio

Una vez tengamos nuestro mapa, tenemos que subirlo al servidor de Mapbox para generar un ID el cual usaremos más tarde porque de momento, tenemos que hablar un poco de los datos geoespaciales.

Datos geoespaciales

Los datos geoespaciales o datos espaciales sirven para representar features (puntos, líneas o áreas) en una superficie. Estos datos pueden tener una tabla de datos con información.

Para poder tratarlos, usaremos un GIS (Geographic information system) donde podremos hacer una infinidad de cosas relacionadas con la geografía, como administrar los datos de cada punto, representar los datos o cambiarles la proyección, por nombrar algunas.

El GIS que usaremos se llama QGIS, de código abierto, el cual aparte de tener las herramientas típicas de un sistema geográfico, tiene una buena comunidad de plugins muy interesantes. Ya le dedicaremos un artículo en el futuro.

Hagamos lo que hagamos con nuestros datos, lo que nos interesa es, recordad, un fichero geojson.

En el caso de que no tengamos a mano ningún fichero, podéis generar uno entrando en geojson.io, un editor a tiempo real, con la posibilidad de agregar features fácilmente y con muchas opciones para la exportación. También lo uso para visualizar ficheros y saber si están bien proyectados.

En la siguiente parte cargaremos nuestros datos en un mapa con la librería de javascript mapbox.js o leaftlet.js.

Github también tiene un buen API de mapas. Subid algún fichero a Gist y lo podréis comprobar. Éste es el mío

Lo vamos a dejar por aquí!

En la siguiente parte cargaremos nuestros datos en un mapa con la librería de javascript de mapbox o leaftlet.

🌎

Que comiencen los juegos

Ayoze Barrera 🇮🇨 — Mon, 03 Feb 2020 16:39:11 +0000

Capua es un blog de desarrollo & experiencia de usuario.

Tras una lucha “sangrienta” para conseguir el nombre de usuario capua en GitHub, ya no tenemos excusas para compartir nuestras locuras. Hace mucho tiempo que teníamos en mente este proyecto, pero al fin nos hemos puesto las pilas.

Capua

Por contar un poco de donde procede el nombre del blog, nos gusta la temática romana, y Capua, antigua capital de Campania, tuvo el primer anfiteatro del mundo romano, donde los gladiadores dominaban la arena.

Los desarrolladores, desde siempre, tienen que reciclarse diariamente pues cada día salen nuevas tecnologías u otras se van actualizando, y para conseguir eso creemos que debemos ser como los gladiadores de la antigua Roma, capaces de enfrentarnos a cualquier bestia que se nos ponga por delante.

Si has visto o si eres fan de spartacus, es posible que te suene todo esto de Capua. También te será familiar nuestro grito de guerra:

“Por Capua!”

Nuestra intención es compartir artículos interesantes de las cosas que hemos ido aprendiendo o que nos han enseñado a lo largo de los diferentes proyectos que hemos realizado.

Quiénes somos…

Ayoze Barrera 🇮🇨Follow

Javascript freak 🤓 · Loving React ⚛· Fixie user 🚲 · Patriots fan 🏈!

Mario Blas 🇮🇨Follow

Web app developer • JavaScript • React

…y donde estamos

Las Palmas, Canary Islands, Spain ☺

Contenido

Nuestros artículos se centrarán principalmente en dos campos, desarrollo y diseño. No descartamos hablar alguna vez de tecnología… o algún juego, quien sabe!

Desarrollo

Estamos constantemente desarrollando aplicaciones con frameworks, servicios y plataformas de última hora.

Nuestro mundo gira principalmente en torno a Javascript y todas las tecnologías relacionadas con éste lenguaje.

Actualmente, nuestra librería principal es React.

Diseño

Le damos mucha importancia al diseño de la experiencia de usuario (UX). UX es la calidad de experiencia que tiene un usuario cuando usa un diseño concreto.
Algunas tecnologías de las que usamos nos permiten tener mayor flexibilidad en nuestra aplicación para así conseguir una UX más elaborada…

Probablemente hablemos de todo un poco, pero intentando no aburrir ☺.

Objetivos

Somos algo novatos en el mundo de los blogs, pero intentaremos estar a la altura.

Unos de los objetivos que pretendemos conseguir con Capua es crecer como redactores. No queremos tener un blog de textos copiados, y puestos para rellenar simplemente por tener muchos artículos y visitas.

Le dedicaremos tiempo a cada artículo para intentar conseguir lo mejor de nosotros mismos. Y eso nos ayudará a conseguir otro de nuestros objetivos, la creación de nuestro propio imperio, nuestro lugar. Tenemos muchas ideas que llevamos guardando mucho tiempo.

Ya veremos hacia donde crece esto y con quien.

Dicho esto… Capua queda inaugurado!

Hasta el próximo artículo ☺