Categorías
General

Microformatos / Datos estructurados

Algunas referencias útiles para enriquecer la info de una web con JSON-LD https://technicalseo.com/seo-tools/schema-markup-generator/ http://schema.org/Corporation https://search.google.com/structured-data/testing-tool/u/0/ https://developers.google.com/search/docs/guides/search-gallery

Categorías
Recursos UX

Avataaars library para Sketch

Biblioteca de avatares de los cuales puedes intercambiar elementos, pelo, ropa, accessorios, colores, razas… de Pablo Stanley (Gracias Amigo) Para Sketch! For free! Avataaars

Categorías
General

Descubre los últimos patrones de diseño UI de iOS

Mobbin es una colección de los últimos patrones de diseño móvil de apps que representan lo mejorcito en diseño actualmente. Inspiración desde unas cien apps iOS y unos cinco mil patrones (captaruados desde un iPhone X) disponibles en la plataforma. https://mobbin.design/

Categorías
General

Netiquette en #Slack

Y, generalizando, en conversaciones (semi)públicas / «virtuales»; social-media related. https://www.fastcompany.com/3054413/everything-you-are-afraid-to-ask-about-slack-etiquette Parece bastante sentido-común. Y sonreir un poco, si es posible, sumando en lugar de restando :)

Categorías
Recursos UX

Encontrar los colores correctos para visualización de datos

En este artículo abordan el porqué y cómo se deben elegir correctamente los colores para hacer distinguibles y accesibles nuestros datos en gráficos y otros medios de visualización de datos. https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283 Chroma.js steppeer: http://gka.github.io/palettes/#colors=#1EA1F2,#E4F1F9|steps=7|bez=1|coL=1

Categorías
UX

Design Genome de Invision

Análisis estructural por parte de Invision, mediante datos y entrevistas, de grandes organizaciones que prestan gran atención al diseño de sus productos. Tanto las estructuras, procesos de diseño, conjunto de herramientas… Cada una sigue una metodología distinta. https://www.invisionapp.com/enterprise/design-genome/

Categorías
WordPress

Theme Premium WordPress Para Magazine o Blog

Theme estilo magazine bien diseñado con una gran experiencia, lectura inmersiva. Buenas valoraciones. https://themeforest.net/item/paperback-magazine-wordpress-theme/13511026  

Categorías
General

Electron.js

Un apunte para el futuro (aunque hace siglos que no desarrollamos Apps desktop):  https://electronjs.org/ es la solución para desarrollo en escritorio (Atom, Slack,…)

Categorías
General

Crear y generar una clave SSH para gitlab

1. Seguimos las siguientes instrucciones para comprobar primero si tenemos una clave ya en el equipo (nuestra o de otro usuario) y posteriormente poder generar una y guardarla en el fichero de claves: https://docs.gitlab.com/ee/ssh/README.html 2. Abrimos los Profile Settings en nuestra cuenta de Gitlab y copiamos la clave que acabamos de generar: https://gitlab.com/profile/keys 3. Es importante […]

Categorías
UX

Open source fonts y libre–revivals

Fundición open source con tipografías muy interesantes: https://www.theleagueofmoveabletype.com/ El diseñador Pablo Impallari lidera varios revivals de tipografías míticas y clásicas en formato open source: http://www.impallari.com/

Categorías
Recursos UX

Enlaces: Datos en mapas

http://www.therefugeeproject.org/ https://citygeographics.org/ http://luminocity3d.org/Population.html#population_density_2011/7/52.600/-2.500 https://pudding.cool/2018/10/city_3d/ https://www.strava.com/heatmap https://labs.strava.com/ https://earthengine.google.com/timelapse/ http://livingcities.here.com/ Proyecto con interesante forma de disponer multitud de mapas: Home: https://resourcewatch.org/ Explore: https://resourcewatch.org/data/explore Topics: https://resourcewatch.org/topics/cities   Acumular filtros en mapas: https://webapps.acep.org/utils/spa/match#/search/map Carto / Producto de análisis de datos en Mapas En el blog del producto Carto encontramos fantásticos ejemplos de resolución de problemas de visualización de espacios […]

Categorías
Recursos

Carbón: tu código a imagen

Herramienta web para pasar código formateado en multitud de lenguajes a una imagen estática, se pueden elegir diferentes estilos y color de fondo (incluso transparente). Enlace: https://carbon.now.sh/

Categorías
Recursos UX

Fotos (de stock, de calidad, «gratis»)

En Sí2 pagamos nuestra mensualidad a Adobe Stock, porque lo heredamos desde Shutterstock,.. y ahí seguimos. Porque consideramos muy importante «reconocer» a los autores, y una forma de hacerlo es ésta, con un poquito de dinero a una megacorporación ;-) Sí, en serio, hay gente que se gana la vida (ya menos, pero bueno, porque […]

Categorías
Android iOS

Firmar y publicar App (Android e iOS)

Veremos los pasos a realizar para firmar y publicar una app tanto para Android como para iOS. Android Para Android, debemos de seguir los siguientes pasos sacados de la web: 1. Establecer los iconos, para ello, vamos a Android Asset Studio y lo generamos a través de «Launcher icon generator» 2. Modificar –en caso de […]

Categorías
General

Enlaces: Jupyter, Mapbox, d3js, React

En la newsletter de mapbox han anunciado soporte para visualizar datos de Jupyter Notebooks. Es código abierto y parece que se están barajando como un estándar para compartir datos y conocimiento científico. Eso lo he sabido por este post de paradigma digital, donde explican un poco en qué consiste: https://www.paradigmadigital.com/dev/jupyter-data-science-aplicada/ Básicamente son archivos (notebooks) conteniendo […]

Categorías
WordPress

Configurar servidor para wordpress

En primer paso, hay que asegurarse de que el servidor está actualizado, para ello escribimos (en el caso de que sea centos): yum update -y Una vez actualizado, instalamos los paquetes necesarios para wordpress yum install -y httpd mariadb-server mariadb php php-mysql php-fpm php-pecl-memcache mod_ssl openssl (previo a esto instalar Mariadb10) # vi /etc/yum.repos.d/MariaDB.repo [mariadb] […]

Categorías
UX

Botones dinámicos en Sketch con Paddy

Botones dinámicos de forma sencilla Hoy hemos estado creando unos botones dinámicos gracias a Paddy. Se trata de un plugin para Sketch que te permite en entre otras opciones de espaciado automático entre elementos, crear cajas con el padding que nosotros determinemos. Es decir es una buena manera de definir botones y labels en símbolos […]

Categorías
UX

Resolver problemas con símbolos en Sketch

Sketch es una herramienta muy buena para el diseño de interfaces pero tiene ciertos bugs que a veces te sacan de quicio. Uno de ellos es que cuando copias y pegas un símbolo que estas utilizando en una pantalla, en lugar de tener que estar insertando —algo muy normal en el flujo de trabajo de […]

Categorías
UX

Cómo exportar Sketch a HTML

En SI2 usamos Sketch para diseñar interfaces. Una de las razones es la flexibilidad que te aporta trabajar con los plugins disponibles, ya sean gratutitos o de pago, existe bastante comunidad de usuarios y empresas desarrollando plugins para infinidad de utilidades. Otra de las razones es que el diseño «se traduce» de forma considerablemente fiel a los estándares HTML/CSS u […]

Categorías
WordPress

Recategorizar posts en WordPress

Bulk move Enlazamos un fantástico plugin para reorganizar entradas, sobre todo en rediseños de blogs, cuando queremos limpiar muchas categorías que se han ido utilizando a lo largo de la historia de la página y han dejado de utilizarse para sintetizarse en nuevas u otras ya existentes. Es muy sencillo de utlizar, una vez instalado […]

Categorías
General

Recopilación de componentes para React Native

Animaciones https://airbnb.design/lottie/ Gráficos https://github.com/indiespirit/react-native-chart-kit Navegación https://reactnavigation.org Visual https://react-native-training.github.io/react-native-elements/ https://nativebase.io/ https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/ (paneles expansibles)

Categorías
General

Cómo empezar un proyecto con React Native

Cómo crear un proyecto con react native y primeros pasos.

Categorías
UX

PhotoSwipe Responsive Lightbox

PhotoSwipe es un plugin JavaScript sin dependencias, siendo uno de los mejores lightbox que hemos usado en SI2 para desarrollos a medida. Por varios motivos: Es ligero. Responsive. Sin dependencias. Customizable. Botones de compartir en redes sociales. Swipable en dispositivos móviles. Diseñado con gusto. Soportado por bastantes navegadores.* Amplia documentación. Proyecto vivo en github. Licencia […]

Categorías
General

Expresiones regulares

Dos aproximaciones distintas a un mismo problema: dar con esa expresión regular que te va a quitar cien líneas de código. Potente; elegante. http://regexr.com/ https://regex101.com/

Categorías
Git

Fichero comprimido con los últimos cambios (GIT)

Para crear un archivo comprimido que contenga únicamente los archivos modificados de una rama comparándola con otra rama, usar los siguientes comandos (UNIX): git diff dev..master –name-only | xargs tar -rf nombre-archivo.tar Para descargar una rama del repositorio: git checkout –track origin/nombre_rama

Categorías
General

Ejemplos varios de react native

Web con código de ejemplos con react native https://rnplay.org — Editado por Ángel ;) para añir este referencia: https://github.com/fangwei716/30-days-of-react-native

Categorías
UX

Optimización de carga web / testmysite de Google

Quizá no es la herramienta más completa, pero sí muy sencilla para tener rápidamente una visión general de donde hay que optimizar. https://testmysite.withgoogle.com En realidad, es una presentación muy visual de PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

Categorías
Android iOS UX

UX en móviles: La mejor forma de pedir permisos a usuarios

Recomendable recopilación de consejos y estrategias a seguir para ser mantener una experiencia de usuario lo más amigable posible a la hora de que los usuarios concedan permisos para nuestra app. Construye una estrategia ¿Cuándo preguntar al usuario? ¿Cómo preguntar al usuario? ¿Cómo preguntar al usuario? Premiar al usuario y recursos para poder hacerlo ¿Cómo […]

Categorías
Android General iOS

Debugging API’s y HTTP connections

Cuando trabajamos con APIs desde Apps móviles a veces aparecen «brujas»: se supone que el API de servidor funciona, se supone que estamos haciendo las llamadas correctas desde nuestro código, pero la respuesta no es la esperada. Ante estos casos, lo mejor es simplificar (siempre KISS), y no dar nada por supuesto: Realizar llamadas manuales […]

Categorías
WordPress

Añadir campos personalizados de WordPress en la edición rápida y proceso por lotes

Adjuntamos un tutorial localizado y testeado por nuestro WordPress Developer @flewps para añadir en nuestra edición de posts la posibilidad de hacer «Quick Edit & Bulk Edit» con campos personalizados. Tutorial: http://wpdreamer.com/2012/03/manage-wordpress-posts-using-bulk-edit-and-quick-edit/

Categorías
Android UX

Android Experiments

Para la edición de este año no llegamos, pero para el que viene tenemos Buenos Propósitos… ;-) https://www.androidexperiments.com/

Categorías
General UX

Triangulator

Aplicación en html5, disponible para su descarga (funciona en browser pero hay que descargarla) a partir de una imagen crear una ilustración vectorial a base de triángulos. Autores: http://somestuff.ru/I Enlace de descarga Gracias a la aportación de nuestra UX Designer, Luciana Laura  

Categorías
Android

Youtube Data API – Code Samples

Recuperar lista de vídeos subidos por uno mismo, usando oAuth, es un buen ejemplo de uso del API de Youtube (v3). Aquí tenemos un ejemplo (en Google Developers, otra referencia para tener siempre a mano): https://developers.google.com/youtube/v3/code_samples/java#retrieve_my_uploads Esta referencia es interesante, paso a paso: http://lookthiscode.blogspot.com.es/2013/01/utilizando-youtube-data-api-v3-desde.html

Categorías
UX WordPress

Scroll back to top plugin

Las páginas con mucho scroll están de moda y el usuario necesita volver arriba de forma más fácil. Para cuando hay poco tiempo y todo es tan fácil como instalar un plugin de WordPress y dar un poco de estilo (si eso). https://wordpress.org/plugins/scroll-back-to-top/

Categorías
WordPress

Cheat Sheet: Búsquedas avanzadas con WordPress

Recurso para refrescar trozos de código muy útiles para hacer custom loops y forms de búsqueda avanzada con WordPress, muy currado como todo lo que hacen en SmashingMagazine: https://www.smashingmagazine.com/2016/03/advanced-wordpress-search-with-wp_query/

Categorías
UX

Take a breath…

A veces desarrollamos cosas solo por aprender por el camino, por demostrar que sabemos hacerlo. Algo así debieron pensar los chicos de Polona, Librería Nacional de Polonia, cuando fabricaron esta herramienta tan útil como inútil (salvo que seas un secuestrador en potencia). Pero merece la pena ver lo bien que trabajan su interfaz.. Y pronto […]

Categorías
General

Imagen principal del sitio para OpenGraph / Facebook

WordPress está cada vez más vinculado a Jetpack (no es obligatorio, pero empieza a dar cositas tan chulas como Photon que cuesta trabajo no instalarlo en casi todas las webs que sacamos). Una de las cosas que hace bien es gestionar el opengraph (resumiendo mucho, lo que se ve en Facebook cuando compartimos). Suele pasar […]

Categorías
UX WordPress

Columnas personalizadas en listado Admin de WordPress

Un plugin chulébrico (y casi imprescindible) para cuando empezamos a añadir campso meta como locos en lso Custom Post types, y calro, queremos poder localizar por esos en el listado de admin… Admin Columns

Categorías
General UX

MixItUp JS para filtrar dinámicamente

Plugin Javascript para filtrar inline mediante etiquetas, botones o selects. Muy  sencillo, flexible y ordenable. https://mixitup.kunkalabs.com/

Categorías
WordPress

Que llega… AMP (Accelerated Mobile Pages)

Lo explica perfectamente Fernando Plaza en Ayuda WP, con este plugin «imprescindible»: http://ayudawp.com/personalizar-amp/ Y para ampliar: http://ayudawp.com/amp-wordpress/ http://ayudawp.com/amp-seo-wordpress/ Por cierto, claro: Datos del dominio ampproject.org Domain Name: AMPPROJECT.ORG Domain ID: D177248413-LROR WHOIS Server: Referral URL: http://www.markmonitor.com Updated Date: 2015-10-31T03:45:45Z Creation Date: 2015-08-31T16:13:25Z … Registrant ID: mmr-87489 Registrant Name: DNS Admin Registrant Organization: Google Inc. Registrant […]

Categorías
Android General iOS

React Native y su integración con App IOS

https://medium.com/@clayallsopp/2016-the-year-react-native-eats-mobile-development-83e8482f78a6#.3iibom90h Integración con App IOS existente, creando una vista: https://facebook.github.io/react-native/docs/embedded-app-ios.html#content  

Categorías
UX WordPress

Mobile First (y httpS omnipresente)

Solo un recordatorio a un par de enlaces que solemos tener en cuenta por aquí: – https://design.google.com/ – (su nuevo «Resizer», que parece funcionar solo con https, hay que ponerse las pilas con https://letsencrypt.org/ , de paso): http://design.google.com/resizer/ — Editado tras el comentario de Dani: De hecho, lo curioso de esta historia es que hay […]

Categorías
WordPress

Migrando: Imágenes destacadas en WordPress from anywhere

Es un caso muy concreto, pero que nos sucede sobre todo cuando remodelamos una web antigua que tiene muchas entradas. Tanto si venimos de un WP bastante antiguo como de otro CMS, puede que no se esté usando el campo «featured image» y en su lugar haya un meta field, u otro mecanismo. Hay plugins […]

Categorías
iOS

Persistiendo datos en iOS

iOS de forma nativa tiene su propia herramienta, Core Data. Un ejemplo fácil para comenzar y hacerse con esta herramienta: https://github.com/iascchen/SwiftCoreDataSimpleDemo Ejemplos de insert, update y delete: https://www.andrewcbancroft.com/2015/02/18/core-data-cheat-sheet-for-swift-ios-developers/#update-single-entity

Categorías
General

ScrollTo Javascript que funciona bien y es simple

https://github.com/flesler/jquery.scrollTo

Categorías
iOS

iOS – Custom Fonts

Tres pasos para añadir una nueva fuente a iOS: Añadir fuente .ttf o .otf al proyecto. Asegurarse que de que se selecciona el Target del proyecto al añadir la fuente. Modificar el info.plist del proyecto añadiendo una variable de tipo Array con el nombre «Fonts provided by application» y añadir una línea de tipo String por […]

Categorías
General UX

Enlaces para la inspiración: Form/SingUp Logins + Representación de datos

Inspiración para Login Forms, experiencia de usuario y diseño: https://medium.com/muzli-design-inspiration/login-sign-up-inspiration-for-mobile-apps-aeff34090bbd#.pcub3315r   Inspiración para representación visual de Big Data e inforgrafías: https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7#.drbi9zrd5   Librería d3 útil: http://nvd3.org/ Listado de ejemplos d3: http://christopheviau.com/d3list/gallery.html Combinando mapas y gráficas: http://bl.ocks.org/tnightingale/4718717 Tablas con header estático: http://addepar.github.io/ember-table/#/horizon

Categorías
General

Gitlab to Github

Para pasar un repositorio de gitlab a github, es necesario realizar los siguientes dos pasos:   1. Añadir la ruta remota (github) en nuestro repositorio local git remote add github https://yourLogin@github.com/yourLogin/yourRepoName.git 2. Realizar un push mirror hacia la ruta creada: git push –mirror github

Categorías
Android UX Wear

Clockwise framework

Algunos recursos muy interesantes de usTwo, útiles para diseñar y programar watch faces para Android Wear. Incluye guías de diseño y desarrollo, algunas plantillas útiles en Illustrator, skectches… http://wear.ustwo.com/resources/

Categorías
UX WordPress

Profundizando en D3.js con ejemplos

Algunos sitios con ejemplos interesantes utilizando D3.js, o sólo como inspirtación, o para ver cosas bonitas: – http://christopheviau.com/d3list/gallery.html – https://github.com/mbostock/d3/wiki/Gallery – http://bost.ocks.org/mike/ – http://blog.udacity.com/2015/01/15-data-visualizations-will-blow-mind.html Continuará…