Caso de ejemplo, un widget dentro de otro widget de tipo tab. Al inicializarse, el tamaño del widget interno es 0, por lo que algunos scripts que afecten a los desplazamientos de posicionamiento no funcionarían correctamente. Para detectar y poder interactuar en casos en los que no tengamos un evento definido podemos utilizar lo siguiente:
Categoría: General
Algunos comandos linux
Útiles para diversas situaciones, como inyecciones de código y esas cosas: Busca un texto en el contenido de ficheros:
Leaflet providers
Leaflet es una biblioteca de mapas ligera y fácil de usar. Los estilos en Leaflet se establecen a traves de «tiles» que van por encima de la geolocalización del mapa. Estos pueden establecerse a través de proveedores externos o con los builts-in del propio Leaflet. La empresa stamen lo explica y lo hace bastante bien… Seguir leyendo Leaflet providers
Code Patterns
A collection of code snippets to help you optimize your web projects: https://web.dev/patterns/ CSS Layout Popular layouts and patterns made with CSS https://csslayout.io/
Too many redirects – SSL y WordPress en infraestructuras especiales
En alguna ocasión nos ha pasado al desplegar un sitio WordPress en alguna institución que tienen una infraestructura de sistemas importante, con balanceadores de carga, sistemas de caché Varnish, esas cosas… Problema: tu web WordPress funcionaba en tu entorno Dev, pero al desplegarla correctamente en su nuevo server, haciendo «todo lo que hay que hacer»,… Seguir leyendo Too many redirects – SSL y WordPress en infraestructuras especiales
Saber la huella digital con la que se firmó una apk
Cito desde https://www.flipandroid.com/cmo-puedo-saber-qu-keystore-se-utiliz-para-firmar-una-aplicacin.html (muchas gracias por esa info, FlipAndroid … descomprima el APK y extraiga el archivo /META-INF/ANDROID_.RSA (este archivo también puede ser CERT.RSA, pero sólo debe haber un archivo .RSA). Entonces emita este comando: Obtendrá huellas dactilares de certificados como estas: MD5: B3:4F:BE:07:AA:78:24:DC:CA:92:36:FF:AE:8C:17:DB SHA1: 16:59:E7:E3:0C:AA:7A:0D:F2:0D:05:20:12:A8:85:0B:32:C5:4F:68 Signature algorithm name: SHA1withRSA A continuación, utilice el keytool… Seguir leyendo Saber la huella digital con la que se firmó una apk
Servicios AI de los grandes para proyectos más modestos
En determinados proyectos podemos encontrar la necesidad de realizar un análisis de lenguaje natural como datos estructurados (https://wit.ai/), utilizar algoritmos de inteligencia artificial para realizar «smart matching» entre miembros de una red social propia, como un club de antiguos estudiantes o posibles partners de negocios… Todo ello hasta hace poco tiempo era inaccesible para pequeños… Seguir leyendo Servicios AI de los grandes para proyectos más modestos
Herramientas de futuro: Solidity
Blockchain, Smart Contracts,… Palabras que suenan a «brujería». Pero estamos mirando mucho ese asunto aquí en Si2. Todo nos lleva a ello. https://solidity-es.readthedocs.io/es/latest/ Cualquier tecnología lo suficientemente avanzada es totalmente indistinguible de la magia. Arthur C. Clarke
Añadir espacio de disco en un CENTOS (y otros)
Unas anotaciones a modo de chuleta, más info en las referencias de abajo. Cuando ampliamos espacio en una máquina virtual hay que tocar cositas en el LVM ( Logical Volume Manager ) para que tu linux sepa que tiene ese disco, y lo puedas usar. fdisk -l te mostrará el espacio nuevo que has añadido… Seguir leyendo Añadir espacio de disco en un CENTOS (y otros)
Incidencias al subir por primera vez a la App Store
Con Apple a veces «suceden cosas». Problema: No existe el App ID (o bundle… o Id del Pack) al intentar subir la primera BuildIr a xCode > Seleccionar Proyecto… Tab Signing & Capabilities y AÑADIR una capability (Push). Luego si no la utilizas se puede quitar. Con esto, se crea correctamente (si el usuario tiene… Seguir leyendo Incidencias al subir por primera vez a la App Store
wp_list_pluck: extraer array de valores desde un array de arrays.
No es un traba lenguas, paso a explicarlo: Imagina que tienes un array que a su vez contiene otros arrays, que todos tienen las mismas propiedades. Ej: Y nosotros buscamos tener todos los nombres de las recetas que contiene el array, tal que así: Para ello podemos usar la función de WordPress wp_list_pluck pasando como… Seguir leyendo wp_list_pluck: extraer array de valores desde un array de arrays.
Herramientas de validación de accesibilidad
Si bien la accesibilidad web no se limita (o no debería) a realizar tests automáticos, sino a la incorporación de buenas prácticas desde el inicio de la vida de un proyecto (en la fase de evaluación de viabilidad, toma de requisitos…), hay herramientas que permiten ayudar en proyectos ya construidos para tomar decisiones. Quizá WAVE… Seguir leyendo Herramientas de validación de accesibilidad
Amcharts + From data to Viz
Amcharts Librería de visualización de datos + plugin de WordPress, unos efectos muy bien conseguidos, con una intro bastante currada en su web, hecha a base de sus propias herramientas de visualización. AmCharts 4 incluye gráficos y mapas de geolocalización. From data to Viz Es una web donde te guían hacia el gráfico más apropiado… Seguir leyendo Amcharts + From data to Viz
Enlaces Interesantes Febrero ’19
Librería de patrones para productos de salud mental (y salud en general): https://www.designpatternsformentalhealth.org/ Leyes de la UX: https://lawsofux.com/ Icon Jar para recoger todos tus iconos: https://geticonjar.com/Unicons, es una colección de más de 1000 line-icons con un estilo rounded en svg perfectos para UI.: https://iconscout.com/unicons Para generar fuentes de iconos: http://fontello.com/ IBM Design Language, merece la… Seguir leyendo Enlaces Interesantes Febrero ’19
Remove Image Background…Aumático
….y funciona bastante bien con la mayoría de las fotos. Es mágico. https://www.remove.bg/
Archia de atipo
Hace tiempo que seguimos los trabajos de atipo foundry y su formato de distribución de fuentes. Archia es una slab con serifas y partes de tipo curiosamente combinadas en formas curvas y rectas. http://atipofoundry.com/fonts/archia
Cargar los CSS de Elementor en header
Cuando usamos bloques de Elementor como templates (headers o footers) y los cargamos con actions desde nuestro functions.php, los estilos personalizados son encolados por Elementor en el footer, esto produce flickerings y cargas de elementos css con lag. Para solucionarlo y llevarnos todos los estilos CSS producidos por Elementor a la cabecera tendremos que encolar… Seguir leyendo Cargar los CSS de Elementor en header
unDraw: Open Source Illustrations
Un proyecto open source de la ilustradora Katerina Limpitsouni que por el nombre parece pretender ser el unsplash de las ilustraciones rollo flat que se lleva ahora en todas las compañías de seguros médicos y startups. Parece que está bien mantenido, actualizado y que tiene un buscador que funciona bastante bien. Se pueden usar en… Seguir leyendo unDraw: Open Source Illustrations
Old Book Illustrations
Recurso para ilustrar o aplicaciones gráficas. Se trata de ilustraciones y grabados antiguos: https://www.oldbookillustrations.com/ Sobre los derechos de uso esto es lo que comentan desde la webOld Books Illustrations We don’t limit the use of the illustrations available on our site, but we accept no responsibility regarding any problem, legal or otherwise, which might result… Seguir leyendo Old Book Illustrations
Ritmo vertical en tipografía web
Artículo para calcular correctamente un buen ritmo vertical en la tipografía de nuestra web: https://24ways.org/2006/compose-to-a-vertical-rhythm/ Herramientas Calcula la escala de tamaños tipográficos según el ratio y tamaño base de tu texto: Modular Scale. Herramienta similar a la anterior en la que puedes cargar tipografías de Google Fonts: Type Scale Cálculo del grid para ritmo vertical:… Seguir leyendo Ritmo vertical en tipografía web
Web link a un contacto de WhatsApp específico
Para crear un enlace en nuestra web que nos abra la aplicación WhatsApp y una ventana de chat con el contacto o número de teléfono especificado. En otras palabras poner un enlace estilo Contáctame por WhatsApp (Es un enlace de prueba con un teléfono ficticio). Para añadir un prefijo, por ejemlo de país simplemente ponedlo… Seguir leyendo Web link a un contacto de WhatsApp específico
Generar guías de estilo basadas en diseño atómico
Generador de Guías de estilos basada en PHP y NODE para crear guías de estilos fundamentadas en los elementos del diseño atómico: átomos, moléculas, organismos… https://patternlab.io/ Demo: http://demo.patternlab.io/ Sobre Atomic Design (Autor Brad Frost): http://bradfrost.com/blog/post/atomic-web-design/ Más referencias, la alabada guía de estilo de MailChimp cuenta con bastantes enlaces a recursos interesantes: https://ux.mailchimp.com/patterns/about Style Guide Podcast… Seguir leyendo Generar guías de estilo basadas en diseño atómico
Recursos Tipográficos
Matej Latin está elaborando una muy buena lista de recursos de tipografía web basados en apps, herramientas, plugins and otros recursos para web designers y web developers. https://betterwebtype.com/web-typography-resources
Pequeñas cosas con WP-CLI: llamandolo desde php en línea de comandos para scrapear datos
WP-CLI es la caña, y muy útil para casos como éste: tenemos unos 11.000 usuarios en una instalación WordPress, sin avatar. Este caso es un poco particular, porque el avatar lo vamos a sacar de una plataforma privada, sin API… pero el mismo modelo es aplicable, por ejemplo, si tenemos usuarios de twitter para cada… Seguir leyendo Pequeñas cosas con WP-CLI: llamandolo desde php en línea de comandos para scrapear datos
Can I Use?
Herramienta web de cabecera, para saber si una propiedad, tecnología o formato está soportado por los navegadores y en qué versiones no lo está. Por ejemplo, necesitábamos conocer si object-fit —maravillosa propiedad CSS3 para recortar imágenes— estaba soportado por la mayoría de los navegadores. Con regocijo Can I Use nos confirma que podemos usarlo con… Seguir leyendo Can I Use?
Formatear salida de cantidades
Con esta función podremos mostrar grandes cantidades con un formato más legible y cómodo. Ejemplo: 11259 –> 11.3 K Fuente: https://gist.github.com/RadGH/84edff0cc81e6326029c
Pantallazos Enhanced en MAC
Aplicación muy completa para macOS que te permite manipular pantallazos al vuelo, pudiendo añadir comentarios, flechas y demás gráficos, con tan sólo arrastrar y soltar. Skitch: https://evernote.com/intl/es/products/skitch
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
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/
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 :)
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,…)
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… Seguir leyendo Crear y generar una clave SSH para gitlab
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… Seguir leyendo Enlaces: Jupyter, Mapbox, d3js, React
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)
Cómo empezar un proyecto con React Native
Cómo crear un proyecto con react native y primeros pasos.
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/
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
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… Seguir leyendo Debugging API’s y HTTP connections
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
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… Seguir leyendo Imagen principal del sitio para OpenGraph / Facebook
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/
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
ScrollTo Javascript que funciona bien y es simple
https://github.com/flesler/jquery.scrollTo
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
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
Formatear texto HTML + negrita en UILabel
Interpretar un texto con etiquetas HTML no es tarea fácil en iOS. Para interpretar las etiquetas habrá que usar el siguiente código: let textFormat = try! NSAttributedString( data: textToFormat!.dataUsingEncoding(NSUnicodeStringEncoding, allowLossyConversion: true)!, options: [ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType], documentAttributes: nil) Si el anterior código no interpreta etiquetas <b> o <strong> (iOS 9), habrá que utilizar el siguiente código. Añadir… Seguir leyendo Formatear texto HTML + negrita en UILabel
Jugando con los permalinks de WordPress: pasar parametros en la URL
Una de las funcionalidades de Mostrosity, nuestro juego GPL, es la de compartir el personaje que el jugador va personalizando (vía Twitter, Facebook,…). Ya que tenemos una tabla en una base de datos donde vamos almacenando qué opción tiene seleccionada el usuario para cada parte del cuerpo (Brazo nº 3, Pies nº2, sonido nº5,…) nos… Seguir leyendo Jugando con los permalinks de WordPress: pasar parametros en la URL
D3.js para dar vida a los datos
D3 ayuda a dar vida a los datos a través de HTML, SVG, and CSS. Si te preocupan que se cumplan los estándares web, D3 da soporte para todas las capacidades de los browser modernos. Combina potentes componentes para visualización y manipulación del DOM. http://d3js.org/
Diseño de prototipos para Android Wear y Apple Watch
Prototipar una App siempre ahorra tiempo y alinea las expectativas del cliente con el trabajo a realizar. Para ello, hay que estudiar bien las directirces de diseño que Sr. Google y Sr. Apple nos facilitan. Aquí están. Recursos Android Wear: http://blog.fluidui.com/design-resources-for-android-wear/ Apple Watch: http://blog.fluidui.com/design-resources-for-apple-watch/
iOS – Creación de Targets
Si queremos una configuración distinta para nuestro proyecto, por ejemplo para crear la versión lite o la versión pro de nuestra aplicación, seguir los siguientes pasos para realizar una configuración personalizada: Pulsar sobre la cabecera de nuestro proyecto en la vista de carpetas, esto abrirá la configuración del proyecto (General, Build Settings, Info…) En la… Seguir leyendo iOS – Creación de Targets