Category: Diseño

Verificar si el archivo existe Vue Js

¿En qué casos nos podría interesar verificar que un archivo existe o no en nuestro servidor u otro?

Este es un caso real:

Tenemos una plataforma multilenguaje y queremos crear de forma dinámica los archivos en varios lenguajes. Para ello hemos creado un sistema de gestión de archivos en el que se puede utilizar el mismo registro para llamar a los distintos archivos en los distingos lenguajes. Es decir, podemos tener un manual en ES y EN.

Ahora bien, en Vue Js tenemos una estructura en la que no necesitamos decirle manualmente qué archivo escoger, si no que queremos que lo haga dinámicamente al cambiar de idioma. Aquí es donde nos vendrá de lujo esta función.

<a :href=»‘/’+locale+’/media/archivo.pdf'» class=»pdf-link»>{[ translations.label_download ]}</a>

Este es nuestro link que va a variar en los distintos idiomas.

¿Pero qué tal si hemos subido el archivo sólo en un idioma? Podemos evaluar si existe o no con la siguiente función.

He añadido además un caso en el que la evaluación puede estar condicionada a una acción. A la hora de hacer un clic, toggle se accionará y verificará que, para empezar esa estructura de html exista con el .length y a partir de allí empezar a buscar de cada registro encontrado si existe el archivo en el servidor.

Utilizar Mailtrap como Inbox para Desarrollo

Hace poco hemos tenido un problema a la hora de gestionar los correos que utilizabamos desde nuestro entorno de desarrollo. Hemos descargado datos del entorno de producción y hemos utilizado correos reales para hacer pruebas sin querer queriendo. Nuestra intención no era enviarlos, habíamos creado unas condiciones pero nos olvidamos de añadir una condición más y se hizo el envío a unos cuantos. No fueron muchos pero, ¿y si se hubiera enviado el correo a todo el mundo? Estoy seguro que a alguno más le ha pasado esto mismo, ha utilizado su entorno de desarrollo para hacer pruebas de emailing y justo coincide que los correos de prueba son correos reales.

Pues bien, para evitar esto vamos a gestionar de ahora en adelante nuestros correos con un servicio gratuito y fácil de instalar en nuestro framework, sea el framework que sea.

Hablo de Mailtrap.io qué, como su misma página dice, es un entorno para el testeo de emailing seguro para desarrolladores: «SAFE email testing for dev teams«.

Es un servidor de SMTP creado por y para desarrolladores, para testear, ver, analizar y compartir emails enviados desde el entorno de desarrollo sin tener que «espamear» a emails reales. Podemos utilizar Mailtrap desde Localhost, Stage, QA…

Tendremos la posibilidad de analizar el diseño, datos estructurados y otras opciones relacionadas con el envío de correo.

Mailtrap - Serever Smpt

 

PRECIOS

Este servicio es gratuito pero si queremos más, obviamente tendremos que pagar. Según el plan que elijas podrás obtener menos o más beneficios.

Mailtrap - Pricing

Plugins Esenciales para Progamar con Notepad++

Notepad++ es la herramienta más utilizada por programadores de todo el mundo por ser gratuita, potente y muy ligera y permitir programar en los diferentes lenguajes que existen.

Puedes descargarte la aplicación en https://notepad-plus-plus.org/download/v7.4.2.html

Para poder trabajar con notepad++ y ser un PRO necesitaremos unas herramientas extras que he recopilado para uso personal y profesional.

AutoSave

¿Cuantas veces no se te ha calado el PC o el Notepad y has tenido que cerrar perdiendo todo lo que has realizado?

Pues con olvídate de una vez de este problema. Configura que el documento se guarde automáticamente pasado unos minutos. Además añade la opción de que si haces clic fuera de la aplicación todos los documentos abiertos se guarden.

Descarga AutoSave desde el administrador de plugins de Notepad++.

Emmet

Diseñado para Fast Coding con Notepad++. Tiene muchas abreviaturas y utilidades que harán que programes mucho más rápido.

Entra en la página web principal para conocer lo simple que es utilizar esta herramienta.

MultiClipboard

Esta extensión nos permite disponer en todo momento de un historial sobre el texto copiado para poder pegarlo de nuevo fácilmente en caso de necesitar un determinado párrafo que ya hayamos utilizado anteriormente pero que hayamos sustituido del portapapeles al copiar cualquier otra cosa.

Podemos descargar esta extensión desde el siguiente enlace.

 

Explorer

Permite colocar un explorador de archivos en la parte izquierda de la ventana para poder buscar y abrir cualquier documento o archivo sin necesidad de buscarlo desde el explorador de Windows.

Podemos descargar esta extensión desde el siguiente enlace.

Compare

Podemos comparar fácilmente 2 archivos de texto (o de código) para buscar todo aquel texto idéntico entre ambos o el que es diferente para poder realizar las acciones necesarias, por ejemplo, modificarlo o corregirlo.

Podemos descargar Compare desde el siguiente enlace.

NppMenuSearch

Añade un buscador al editor que permite buscar resultados en los diferentes menús de la aplicación, por ejemplo, si escribimos “Chrome” nos mostrará todas las opciones de menú correspondientes a Google Chrome sin tener que repasar los menús uno a uno.

Podemos descargar NppMenuSearch desde el siguiente enlace.

 

Preview HTML

Esta extensión es imprescindible para los programadores y diseñadores de páginas web. Permite abrir un nuevo apartado dentro del editor donde se mostrará en tiempo real la página web que estamos creando en HTML y CSS sin necesidad de abrir un navegador web para ello.

Podemos descargar Preview HTML desde el administrador de plugins de Notepad++.

Quick Color Picker

En una hoja de estilos CSS te muestra un preview del color en los tipo HEX/RGB/RGBA/HSL/HSLA y te da la posibilidad de abrir una paleta de colores y remplazar el ya existente.

Puedes descargarlo desde el administrador de plugins de Notepad++

Documentación: https://github.com/nulled666/nppqcp

Shopify – Apps y Theme gratuitos para comenzar a vender

En shopify puedes añadir Addons o Plugins que te ayudarán a mejorar ventas, el posicionamiento y el diseño de tu página ecommerce.

1. Shopify Free Themes

Para empezar como se debe, lo primero que vamos a elegir es una plantilla. La más recomendable es la plantilla MINIMAL pero tienes otras plantillas que puedes probar en el listado de themes gratuitos que te ofrece shopify.

La plantilla MINIMAL me gusta porque contiene unos cuantos features básicos que ayudan a construir una página  web de forma muy completa:

  1. ✔ El típico Slideshow que todos necesitamos para ofrecer a primera vista nuestros productos estrella u ofertas especiales
  2. ✔ Home page video que ahora se lleva en muchísimas páginas actuales
  3. ✔ Lista de productos principales que puedes agrupar según lo necesites
  4. ✔ Menús anidados tipo Drop-down (No todas las plantillas te dejan anidar menús)
  5. ✔ Lista de logotipos de tus marcas
  6. Y mucho más…

2. Product Reviews

Si quieres obtener una valoración de tus productos necesitarás esta App oficial de Shopify:

  1. ✔ Te ayudará a que los demás clientes tengan más confianza a la hora de comprar tus productos
  2. ✔ Es SEO amigable para ayudar a aumentar el posicionamiento en Google
  3. ✔ Se puede personalizar para que quede exactamente como quieras

Shopify Product Reviews APP

3. Privy – Free email popups with exit intent

Privy te ayuda a obtener de forma amigable nuevos suscriptores a tu página:

  1. ✔ Puedes configurar los popups para que se muestre un mensaje personalizado para los usuarios que visitan tu página
  2. ✔ Es compatible con las plataformas de marketing más conocidas como Mailchimp, Bronto, Klaviyo, Soundest, Constant Contact, SendGrid, Adroll, Zapier…
  3. ✔ Configura una acción para aquellos que quieran abandonar tu web, cuando lleven un tiempo en ella o cuando hayan añadido productos en el carro de compras…

Privy for Shopify

4. Instafeed

Instafeed es para aquellos que tienen ya una cantidad de seguidores razonable en Instagram. Esto permitirá poder mostrar los últimos posts de Instagram en la página web.

  1. ✔ Añade un feed de tus posts actuales en tu página ecommerce
  2. ✔ Configura el número de imagenes que quieres mostrar y el tamaño de cada imagen para adaptarla a tu web
  3. ✔ Crearás un gancho para que tus clientes para te sigan en Instagram y mantenerlos actualizados de nuevos productos

InstaFeed Shopify

Qué es Shopify - manuprieto.es

¿Qué es Shopify?

Shopify es una plataforma de comercio electrónico pensada para que pueda utilizarlo cualquier persona que quiera vender productos On-Line sin tener muchos conocimientos de diseño y páginas web. Simplemente con tener un poco de buen gusto y tener las ideas claras, puedes obtener una página con todo lo que necesitas.

Puedes elegir entre más de 100 plantillas profesionales para tiendas, o si tienes algo de conocimiento puedes crear tu propio diseño usando HTML y CCS.

Una vez entras en el sistema, éste te ofrece un sin fin de herramientas para poder diseñar y gestionar de forma sencilla pero a la vez con un potencial increíble tu propia tienda virtual.

Si no lo tienes claro tienes 14 días de prueba GRATIS

Generador de Nombre de Empresas

Utilizando solamente una palabra clave realizará una búsqueda de dominios disponibles para que puedas empezar tu empresa.

Una vez elegido el nombre puedes comenzar una prueba gratuita de 14 días. Tendrás todo lo que necesitas para comenzar a venderlo.

Tienda Online desde Facebook

Si ya te has hecho con una cantidad importante de seguidores en Facebook, puedes dar un paso adelante con Shopify.

Es fácil integrar la tienda virtual en Facebook, añadiendo solamente los productos que quieres vender por este medio, ya que la herramienta cuenta con un sistema de gestión de productos avanzada y completa.

Plantillas Shopify

Sólo se pueden añadir plantillas compatibles para esta plataforma. Puedes crear la tuya propia a partir de una gratuita, pero hay que tener mucho cuidado con lo que haces ya que a veces puedes meter la pata. Lo bueno es que el mismo sistema tiene un editor de archivos HTML / CSS y funciona de maravilla.

Lo más recomendable por experiencia propia es elegir una plantilla de pago que tenga los complementos necesarios y no te de trabajo de más a la hora de diseñar y construir el diseño de tu página web.

PLANTILLAS GRATUITAS SHOPIFY

Las plantillas gratuitas están bien para empezar, pero no son tan potentes como una de pago. Se pueden modificar lo justo y te pueden ayudar si lo que necesitas un diseño sencillo y sin muchas complicaciones. La que más me gusta de todas es la Minimal ya que tiene las opciones que todos buscamos: Slider de imagenes principales, sección de productos, sección de marcas….

Precios

Los precios varían según el caso de cada vendedor. Si eres un vededor que necesita algo rápido y sencillo, con el plan básico tienes lo que necesitas para crear una tienda virtual sin limitaciones. Mi recomendación es empezar por este plan y a medida que el negocio siga creciendo cambiar de plan y amortizar los gastos de la plataforma cada mes.

Iconfinder

Iconos Gratuitos

Esta es una recopilación de algunos sitios web que nos ofrecen un sin fin de iconos gratis. Algunos de estos iconos son solamente de uso personal, pero existe la posibilidad de obtener una licencia si vamos a utilizarlo de forma comercial.

Iconfinder

ICONFINDER Busca a través de más de 1 millón de iconos y miles de packs de iconos de distintos diseñadores. Tienes la opción de descargar miles de iconos gratuitos. Pero dentro de esta web tienes la opción de crearte una cuenta mensual y pagar 9$ por un servicio STARTER (Deja descargar 25 iconos como máximo por mes) o 29$ por el servicio UNLIMITED (Este es l más reocmendado porque como dice el nombre, no hay limite de descargas y viene bien para cualquier proyecto sea grande o pequeño). Esto según tus necesidades.

Iconos de Varios Diseñadores

Planes

IconDrawer ofrece una amplia gama de iconos gratuitos y de stock para diversos usos: web, escritorio y móviles, diseño gráfico de interfaz de usuario, presentaciones e impresión, barra de herramientas de software. Iconos de alta calidad y botones de hasta 512 × 512 píxeles es una gran adición a su diseño gráfico y soluciones de negocio.

Buttons

Classic Icons

Flaticon ofrece a diseñadores iconos seleccionados minusiosamente por el mismo equipo de Flaticon para ofrecer la mayor calidad en cuanto a imágen. Son iconos totalmente vectorizados los cuales se pueden instalar en un proyecto personal como comercial. Como en las anteriores, hay una versión Premium que es la que te deja utilizar los iconos de forma gratuita en cualquier proyecto. Para usar los iconos en modo Freemium simplemente hay que atribuir los derechos a Flaticon y podrás utilizarlos en los sitios que quieras.

Flaticon Packs

Planes Premium

Como aprender Flex CSS fácilmente

Hay muchísimas guías, tutoriales y vídeos que podemos encontrar en la web para aprender como utilizar Flexbox. ¿Pero cual es la manera más fácil de aprender a hacer algo? Empecemos.

¿Qué es Flexbox?

Flexbox te ayuda a crear páginas «flexibles» y «adaptativas» utilizando CSS.

Puedes encontrar información más completa para entender lo que es Flexbox y como funciona en http://www.emenia.es/flexbox-la-caja-flexible-css3/

Ahora que has leído un poco y ya sabes de que va la historia, imagina que quieres crear una página donde quieres añadir varias imagenes y quieres que auotmaticamente se adapten al contenedor según vayas redimensionando tu página o accedas a ella en dispositivos distintos.

¿Como lo harías? Yo antes utilizaba porcentajes, nth-childs, float left, clear left, margins… Unas cuantas opciones para poder hacer que un contenedor pueda adaptarse según el número de items y estos se adapten al dispositivo o al tamaño de la pantalla.

Esto ya queda en el pasado. «El futuro es ahora viejo», usa FLEXBOX.

La manera de aprender facilmente como funciona Flexbox y todas las opciones que te ofrece es jugando. Así es amigo, JUGAR es lo que mejor se nos da a todos y si aprendes jugando, mejor que mejor, ¿NO?.

Pero para aprender de verdad, tienes que entrar a esta página http://flexboxfroggy.com. Empieza desde cero con una explicación breve y una guía fácil en cada paso.

REQUERIMIENTOS: Saber CSS y saber inglés.

¿Por qué debo actualizar mi navegador?

Los navegadores antiguos como el Internet Explorer 6, 7 y 8 o Safari para Windows no muestran las páginas y sitios web dentro de los estándares actuales, están llenos de «bugs», por lo que no ofrecen fiabilidad, ni estabilidad y estan sometidos a graves problemas de seguridad de virus y el «malware».

Como diseñador y programador web siempre recomiendo utilizar Google Chrome a todos porque así no deberían tener ningun tipo de problemas con incompatibilidades de diseño en una web optimizada. En algunos casos es casi imposible que ellos puedan optar por otro navegador ya que algunas empresas capan sus sistemas a versiones antiguas de Windows.

Un ejemplo es el caso de los ayuntamientos. Algunos ayuntamientos tienen instalado Windows XP y no pueden instalar otro navegador que no sea Internet Explorer. Un error muy grave si se ve desde la Seguridad de cualquier Sistema ya que, como he dicho antes, pueden haber brechas de seguridad que pueden llevar a una catastrofe si alguien accede a sus archivos.

¿Qué navegador debo utilizar?

Dentro del gran abanico de diferentes navegadores web estas son las opciones más populares en la red

Opera

Opera es un navegador rápido y seguro. Desarrollado en Europa y utilizado por millones de personas alrededor del mundo. Ahora con bloqueo de publicidad incorporado, una función de ahorro de la batería y una VPN gratuita.

Mozilla Firefox

Descarga Mozilla Firefox, el navegador gratuito desarrollado por una organización mundial sin ánimo de lucro cuyo objetivo es darle a los usuarios el control de su vida digital. ¡Hazte con Firefox para Windows, macOS, Linux, Android e iOS!

Google Chrome

Google Chrome es un navegador web rápido, seguro y gratuito, diseñado para la Web actual. Pruébalo en tu ordenador, móvil o tablet.

Internet Explorer

Internet Explorer es el navegador más utilizado por todo el mundo. Descarga la versión más actualizada para obtener la mejor experiencia en las páginas web.

¿Quieres recomendar un Navegador?

Rellena el formulario y añadiré tu navegador favorito

Facebook News Feed WordPress Drupal Joomla CMS

Facebook News Feed es una herramienta gratuita y fácil de manejar para mostrar los posts de nuestra página oficial en cualquier sección de nuestra web.

Además, el iframe automáticamente se adapta a cualquier dispositivo (Responsive). Puedes instalarlo en WordPress, Joomla, Drupal o cualquier tipo de plataforma CMS.

 Configura para personalizar el Iframe 


Crea una animación GIF a partir de un Vídeo

 

Si necesitamos crear un video para mostrar un “Paso a Paso” es muy sencillo utilizando una herramienta gratuita que nos proporciona ezgif.com

logo

Una vez probada es una herramienta de las que hay que guardar en «Favoritos» ya que no es nada compleja y nos va a ayudar a crear todo tipo de animaciones GIF sin tener que comprar o descargar un software especifico en nuestro PC.

Lo primero que tenemos que hacer es seleccionar que video vamos a convertir:

2016-06-27 at 10-38-13

 

Ahora hacemos clic en el botón de Upload!

El vídeo que he subido es un vídeo de 1 minuto y 17 segundos en formato .mp4 y un peso de 2mb. Ha tardado más o menos 1 minuto en subirse con una conexión de fibra optica (100mb)

Ahora lo que nos pide una vez el vídeo se ha cargado en la plataforma es un tiempo de inicio y fin . Así podremos cortar el vídeo en la sección que necesitemos:

Convert video to animated GIF

Podemos seleccionar los tiempos de inicio y fin con el Preview del vídeo que se ha cargado. Utilizando la barra de desplazamiento seleccionamos el Start Time (Tiempo de inicio) haciendo clic en el botón azúl de la derecha Use current position (Utilizar la posición actual). Así se cargará ese tiempo en la casilla de inicio. Hacemos exactamente lo mismo, desplazando un poco más adelante, para recoger el End Time (Tiempo de fin).

En mi caso he elegido cortar el vídeo para mostrar 15 segundos a partir del segundo 5 hasta 20.535, que es lo que me ha recogido al hacer clic en el botón «Use current position» para el «End time».

En Size he elegido en principio la primera opción la opción Original (up to 960px) y me ha generado un gif de un peso de 322KB. Luego he elegido el de 600xAUTO que me parecía conveniente para poder dar una calidad óptima y reducida para colgarlo en una página web y así reducir el tiempo de carga. Esta vez se ha reducido a 135KB.

Las demás opciones las he dejado en default y ahora es el momento de hacer clic en Convert to GIF!

Una vez generado se cargará el GIF generado debajo del mismo botón en la sección Output gif

Convert video to animated GIF (1)

Puedes descargarte el resultado simplemente haciendo clic derecho en la imagen GIF y descargandolo al escritorio.

Lo que hace esta herramienta perfecta es que tenemos la posibilidad de editar el GIF que se ha generado. En este ejemplo no vemos las imagenes de los iconos pero, si sabemos un poco de edición de imagenes, sabremos lo que nos ofrece los botone sde crop, resize, effects…

En este caso he utilizado la herramienta CROP para poder cortar la sección que me interesa mostrar utilizando el seleccionable habilitado y haciendo clic en Crop it!  Debajo de la misma aparecerá el resultado en la sección Cropped image:

Crop animated gif

 

A partir de aquí podemos descargar la imagen o seguir editando la animación GIF hasta obtener el resultado que deseamos.