Cómo crear un chatbot con Inteligencia Artificial

Cómo crear un chatbot con Inteligencia Artificial

 

Usa la poderosa herramienta de aprendizaje de Google para crear un chatbot con Inteligencia Artificial.

Crear un chatbot con inteligencia artificial. La Inteligencia Artificial (IA) nos permite crear nuevas formas de ver los problemas existentes, desde replantearnos las estrategias del entorno hasta cómo aprendemos. Tus proyectos, ya sean aplicaciones, páginas web o juegos, pueden aprovechar la IA para hacerlos más atractivos, fáciles de usar y con resultados más valiosos. Uno de estos métodos consiste en crear un chatbot en lenguaje natural para ayudar a los usuarios a interactuar con tu sitio.

Para crear un chatbot con inteligencia artificial, utilizaremos el nuevo conjunto de herramientas Dialogflow de Google. Aprovecha el potente aprendizaje de la herramienta, así como la comunicación de voz a texto. Se puede incorporar directamente en tu sitio web como un widget o personalizarse según tus necesidades.

Comencemos este tutorial para crear un chatbot con Inteligencia Artificial:

01. Crear una cuenta

Dirígete a dialogflow.com y crea tu cuenta. Inicia sesión y acepta los permisos para que Dialogflow tenga acceso a tu cuenta.

02. Crear un agente

Dialogflow utiliza el término ‘agente’ para representar instancias de tu IA. Piensa en el agente como la inteligencia virtual que estás creando. Podrías tener muchos agentes trabajando para ti, cada uno con su propia personalidad y propósito.

Haz clic en el botón «Crear agente» e introduce un nombre para tu agente: Ejemplo: «HAL9000».

03. Crear una intención

Primero, necesitas crear una intención. Estamos definiendo la «intención» de las entradas del usuario. Haz clic en «Crear intención» y ponle el nombre,  por ejemplo «Abrir puertas». Presiona ‘Guardar’.

Crear una intención

04. Entrena a la IA para este propósito

Entrena a la IA para este propósito proporcionando frases que un usuario pueda usar. La IA PNL utilizará estas y otras variaciones derivadas para entrenar al agente. Añade las siguientes frases de formación en la ventana ‘Frases de formación’ y añade todas las que quieras:

«Abre las puertas de la bahía de la cápsula, Hal.
«Abre las puertas».
¡Déjame entrar, Hal!

frases de formación

05. Añadir respuestas

A continuación, debe añadir algunas respuestas con las que el agente responderá. Se introducen en la ventana `Respuestas’. Prueba algunas como esta:

Me temo que no puedo hacer eso.
No puedo hacer eso ahora mismo.
A continuación, pulsa `Añadir respuestas’ y `Guardar’ en la parte superior de la pantalla. Verás notificaciones de que el agente está siendo entrenado y entonces está listo.

Añadir respuestas

06. Prueba el chatbot

En el lado derecho de la pantalla hay una herramienta de prueba. El chatbot utilizará el servicio de voz a texto de Google para traducir tu voz a texto si lo pruebas. Deberias ver los resultados de tu solicitud y la respuesta que el agente de AI seleccionó. ¡Muy bien!

07. Crear y utilizar una entidad

Las entidades son conceptos que pueden ser definidos y reutilizados en las respuestas del agente como variables. Vamos a entrenar a la IA para que entienda cuando un usuario está expresando una emoción y luego usarla en su respuesta al usuario.

En el menú de la izquierda, haga clic en ‘Entidades’. Escribe ‘emoción» para el nombre de tu nueva entidad. Mantén marcada la opción ‘Definir sinónimos’. Haz clic en la tabla de abajo y escribe «enojado» como primera emoción. Luego haz clic a la derecha y añade sinónimos como «loco», «molesto», etc. Luego añade otra entrada para «asustado» y usa los sinónimos «asustado», «aterrorizado», etc., que te gusten. Presiona ‘Guardar’ cuando termines.

Esto ha entrenado al Agente a entender que ‘enojado’ y ‘asustado’ son emociones que un usuario puede comunicar. Todos esos sinónimos son variaciones que pueden ocurrir. La IA también generará algunos.

Crear y utilizar una entidad

08. Crear una nueva intención

Ahora vamos a crear una nueva intención para usar la entidad «emoción» que hemos creado. Llama a esta intención ‘emociones’ y haz clic en’Guardar’.

A continuación, añade nuevas frases de formación como «me estás asustando», «me estás volviendo loco» y «estoy muy enfadado», utilizando variaciones de palabras clave enfadado y asustado. Esto capacitará al agente para comprender las diversas formas en que un usuario puede expresar esta expresión emocional.

Notarás que el sistema resalta las palabras asustadas y enojadas para ti. Ya los está marcando como entidades. También ha añadido una entrada en la ventana `Acciones y parámetros’. Esto te permite usar estas entidades en tus respuestas del mismo modo.

Crear una nueva intención

09. Añade una respuesta usando la nueva entidad `emoción’.

En la ventana Respuestas, añade nuevas respuestas que utilicen esta nueva entidad. Fíjate en el ‘$’ para indicar la Entidad $emoción. Intenta añadir estas respuestas:

Lamento que sientas $emoción, Dave.
«Sentir $emoción es una respuesta humana, Dave».
Haz clic en «Añadir respuestas» y pulsa el botón «Guardar» en la parte superior de la pantalla para guardar la intención completa.

10. Prueba tu chatbot de nuevo

Intente decir o escribir las siguientes frases en la herramienta de prueba.

Me estás haciendo enojar mucho, Hal.
Me estás asustando.
¿Notan cómo respondió usando «asustado» con el segundo? Usó nuestro sinónimo ‘asustado’ para saber que queríamos decir asustado. Muy bien.

Siéntete libre de jugar con esto, así como de añadir más intentos y respuestas que te gusten y luego añadiremos esto a una página web.

11. Activar la integración web

Para añadirlo a tu página web, haz clic en ‘Integraciones’ en el menú de la izquierda. A continuación, haz clic en la casilla `Web Demo’ para activar esta opción.

Activar la integración web

Aparecerá una ventana emergente que te mostrará un enlace directo para que puedas probar tu integración de inmediato. También mostrará un fragmento de código que puedes usar para soltar el widget en tu propio sitio web. Copia ese fragmento al portapapeles para que puedas pegarlo en tu sitio.

12. Crear una página web básica y añadir el fragmento

Crea una página básica de HMTL e incluye ese fragmento de código a continuación. Prueba el siguiente código y súbelo a tu servidor o ejecútalo en tu servidor local. Reemplace el fragmento de abajo con el que ha copiado de su agente Dialogflow:

<!DOCTYPE html>
<html>
<head>
	<title>NET - AI Chatbot</title>
</head>
<body>
	<iframe
    allow=”microphone;” width=”350”height=”430” src=”https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa”>
</iframe>
</body>
</html>

Acabas de crear un chatbot con inteligencia artificial

Con este último paso habrás integrado tu primer chatbot en tu página web, y por su puesto, si te ha parecido interesante este artículo, te recomiendo leer este otro, Cómo Diseñar Para La Web En 2019 / Nuevas Tendencias.

 

Los 25 Mejores Consejos de Ecommerce que Necesitarás Para Promocionar Tu Tienda Online

Los 25 Mejores Consejos de Ecommerce

La evolución de ecommerce hasta dominar las compras

Decir que el comercio electrónico cambió el panorama de cómo se comercializan y venden los bienes sería una infravaloración. Hoy, encuentras más links en la red hablando sobre consejos de ecommerce que encontrando links sobre centros comerciales. Es una realidad.

Desde la introducción de la World Wide Web, no ha habido escasez de artículos que subrayen lo útil que ha sido para nuestras vidas. Pero eran pocas las empresas que imaginaban un mundo en el que el comercio (que hasta ahora estaba reservado a las tiendas físicas) en Internet dominaría la forma en el que se movían los productos.

La importancia del ecommerce no se pone suficientemente de manifiesto en el hecho de que aporta un poco más de 1 millón de productos vendidos cada día. El punto culminante es el hecho de que desde que el ecommerce se inició como un canal de comercio, el comercio en sí mismo ha visto un aumento del 24% de lo que el mercado era antes de esta «forma de vida».

Mientras que al principio, quería dedicar un blog sólo a consejos de comercio electrónico y por qué los propietarios de negocios necesitan tener una tienda online….

Pero después de mirar más a fondo, me di cuenta de que ya hay mucha información sobre por qué es importante hacer esto.

Por lo tanto, decidí tomarme un tiempo e incluir también mis experiencias y lo que sé que funciona para mis clientes.

A continuación comparto mi lista de los 25 mejores consejos de comercio electrónico que necesitas para promocionar tu tienda online

Al investigar sobre las sugerencias en ecommerce que ayudarán a hacer crecer tu tienda online, los dueños de negocios a menudo se quedan atascados con información bien cotejada y presentada que tal vez ni siquiera necesiten conocer o que no tienen los medios para ejecutarlas. Y mucho menos ver resultados espectaculares. Te sorprenderá lo que vas a encontrar en este articulo sobre consejos de comercio electrónico. Vayamos directamente al grano.

Consejos de Ecommerce (#1): Diseño de páginas web

Todo lo que haces para comercializar tu marca utilizarás tu sitio web como un centro. Tu propia sala de exposición en línea, por así decirlo. Desde el descubrimiento hasta la realización de una compra. Todo se hará en o a través de tu sitio web. Es el elemento más importante que hará o romperá tu negocio.

Por lo tanto, haz que el diseño sea lo más fácil posible para el usuario.

Para dárselo, simplemente piensa en el problema que tu negocio está tratando de resolver para los consumidores. Ahora piensa en cómo encontrarían una solución a su problema en tu sitio web.

¿Es fácil? Debería serlo.

Por ejemplo, para un sitio web de un restaurante, esto equivale a tener un menú fácil de leer y una opción de pedido con un solo clic. Y añadiendo comentarios positivos de otros clientes.

Hay algunos diseñadores web realmente buenos que entienden el panorama del comercio electrónico y lo que se necesita para diseñar un sitio web que hará una experiencia de usuario encantadora.

Si te gusta este consejo, entonces continúa y trabaja hasta llegar a nuestro consejo número 25.

Consejos de Ecommerce (#2): Piense en móvil primero

Se estima que el 71% de los usuarios son más activos con el móvil. Esto significa que todos los movimientos, desde una simple búsqueda hasta la realización de un pedido, ya se están llevando a cabo a través de un dispositivo móvil.

Un estudio de investigación predijo recientemente que para el año 2020, el 35% de todas las ventas de comercio electrónico se realizarán a través de un teléfono móvil. Esa es una gran revelación. De hecho, Google también ha publicado un estudio según el cual más del 50% de todas las búsquedas en Google se realizan en un dispositivo móvil.

Estas cifras seguirán aumentando, sin duda. Es por eso que Google ahora prioriza las búsquedas de su índice para los móviles. Lo que significa que todas las empresas que quieren mantenerse a la cabeza en los rankings de búsqueda, necesitan tener un sitio web que esté diseñado de manera eficiente para las pantallas móviles.

Con el mundo en movimiento, cada vez más móvil, donde las cosas que antes tardaban días en completarse, ahora se pueden hacer con un simple clic en unos pocos segundos. Todo ello sin tener que salir de la comodidad de tu hogar.

Tanto es el poder de tener un primer enfoque móvil, que Google mismo te da herramientas gratuitas para analizar cómo está funcionando tu sitio web en el móvil y qué puedes hacer para mejorar la experiencia del usuario en el móvil.

Seguramente necesitarás profesionales de ecommerce experimentados para implementar una estrategia sólida para tu negocio a largo plazo. Pero estas herramientas pueden ayudarte a empezar.

Consejos de Ecommerce (#3): Venta en redes sociales

Primero vino el Internet que hizo las cosas simples para nosotros. Permitiendo a los consumidores descubrir más fácilmente las marcas, realizar transacciones y hacer negocios con ellas.

Luego vinieron los medios sociales, que permiten a los usuarios expresar sus pensamientos y discutir temas. Y las marcas se dieron cuenta.

Con más y más de un público objetivo que frecuenta los canales sociales, los medios sociales son ahora una forma esencial para que tu marca se comunique con tus clientes potenciales. Esto da lugar a los medios sociales como canal de venta de marcas. No sólo directamente, sino también de forma interactiva.

Encuentro esto como uno de los consejos más efectivos para que las marcas vendan online. Los mensajes de compra ayudan a comercializar tus marcas en los canales en los que los usuarios se comunican entre sí. Tener una fuerte estrategia de medios sociales puede hacer maravillas para el crecimiento de su tienda online.

Consejos de Ecommerce (#4): Escucha Social

La escucha social funciona perfectamente como una extensión de la venta social. Como ya he comentado anteriormente, los medios sociales se han convertido en una parte importante del viaje de un cliente. Aún más cuando se trata de compartir críticas y comentarios después de haber comprado/usado un producto en particular.

Los canales de los medios sociales han dado a los clientes la posibilidad de expresar sus opiniones sin ninguna repercusión. Sin embargo, esto se ha convertido en una especie de desafío para los ecommerces. Estar siempre alerta y hacer un seguimiento de los usuarios que hablan de tus marcas, para que puedas tomar las medidas oportunas.

También ha dado una tremenda oportunidad para que las marcas se involucren con su audiencia de una manera significativa a través de paneles de discusión y/o comentarios y vendan sus productos online.

Hay muchas marcas que responden y se comprometen con los consumidores. Pero lo que realmente importa es cómo te comprometes. He aquí un ejemplo de un negocio que lo hizo tan bien que lo resume todo.

Un pasajero en un vuelo Jet Blue tweeteó sobre el episodio de su primer vuelo a bordo. ¿Qué hizo Jet Airways? No sólo respondieron a su tweet deseándole lo mejor, sino que lo hicieron a los 6 minutos de su tweet. Si ese no es el ejemplo perfecto de escucha y compromiso social, no sabemos cuál es.

Consejos de Ecommerce (#5): Anuncios Nativos

En el espíritu de consejos de comercio electrónico, la publicidad nativa es otra gran manera de promover tu tienda online colocando anuncios en un sitio web en una forma nativa. Para que parezca parte del contenido de la página web.

Estos tipos de anuncios no parecen tan agresivos y pueden promover tu tienda de ecommerce.

Así, por ejemplo, si desea promocionar tu tienda online que vende zapatos de senderismo, puede publicar anuncios nativos en sitios web que tengan contenido relacionado con el senderismo. Imagínate el impacto positivo que esto puede tener en tus ventas de ecommerce.

Consejos de Ecommerce (#6): Audiencias similares en Facebook

Este es otro consejo de gran impacto que sugiero a muchos de mis clientes. Es una excelente manera de promocionar una tienda online existente. Donde creo audiencias personalizadas en Facebook que consisten en sus fans de la página, usuarios que les han comprado antes o han visitado su sitio web.

Luego, uso esas audiencias para encontrar usuarios que tienen una demografía y un comportamiento de compra similares. Estas se llaman audiencias similares y es una gran manera de promover tu tienda online sin pagar para promocionar a personas que puedan no encajar en tu perfil de audiencia objetivo.

Consejos de Ecommerce (#7): Anuncios de Google Shopping

Las campañas de pago de Google son una gran manera de llegar a los usuarios de alta intención cuando se trata de mostrar a la gente los anuncios basados en lo que están buscando.

Por ejemplo, si la gente está buscando «la mejor aspiradora para pelo de mascota», entonces Google hace un buen trabajo al mostrarles primero anuncios en los que se les indica dónde pueden comprar aspiradoras para resolver su problema. Claro, se necesita un montón de ofertas y algoritmos agradables, pero ahí es donde se encuentra la esencia de los anuncios de Google.

Siguiendo el ejemplo de Amazon, Google se dio cuenta rápidamente de que cada vez más personas buscan recomendaciones directas de productos en Google y esperan ver los mejores productos disponibles en un momento dado. Esto les hizo introducir los anuncios de Google Shopping Ads.

Aparecen en la parte superior de la página de resultados cuando estás buscando un producto en particular. Google saca la mejor lista de los mejores productos de las tiendas de comercio electrónico y se la muestra al usuario.

Consejos de Ecommerce (#8): retargeting

Es difícil orientarse a través de las posibilidades del comercio electrónico y no mencionar el retargeting. Es uno de los consejos de ecommerce más subestimados que hay. El retargeting es una forma de dirigirse a un usuario que te ha visitado o comprado con recordatorios promocionales.

Puedes volver a dirigirte a los usuarios que aún no te han comprado pero que han visitado tu sitio web. O puede dirigirse a personas que han hecho una compra que indica que les puede gustar otro producto que ofrezcas.

Utilizando tácticas de marketing efectivas, puedes volver a centrarte en los usuarios que ya han interactuado con anterioridad con página web.

Consejos de Ecommerce (#9): Anuncios de prueba A/B y landing pages

La promoción de una tienda online puede ser una tarea desalentadora si no sabes realmente qué tipo de contenido será efectivo para tu audiencia potencial. ¿Qué contenido hará que compren un producto de tu tienda?

Tu trabajo no sólo se detiene en la creación de bonitos estilos para el sitio web  o en la creación de una campaña publicitaria efectiva en medios sociales.

Necesitas evolucionar constantemente la experiencia del usuario final probando diferentes páginas de destino, anuncios e incluso correos electrónicos!

Consejos de Ecommerce (#10): Colocación de productos

Así como los anunciantes colocan productos en escenas de películas icónicas, tu negocio de ecommerce también puede colocar sutilmente productos en el contenido en el que tu audiencia está interesada.

Utilizando la segmentación por palabras clave, he ayudado a clientes a promocionar sus tiendas no sólo a través de campañas de búsqueda de pago, sino también mediante la segmentación por palabras clave en artículos de contenido en toda la web, así que, trabaja mucho tu blog.

Consejos de Ecommerce (#11): Ten una Estrategia de SEO

Con el auge del comercio digital, el ecommerce fue el origen de muchos gigantes en línea como Amazon. Y con ello aumentó la confianza de tales servicios web sólo para llevar a cabo sus propias tiendas de comercio electrónico online sin ninguna ubicación física.

La naturaleza de este modelo de negocio ha hecho que sea importante para estas empresas tener una gran visibilidad online. Si quieres sobrevivir en el competitivo panorama digital actual, apenas hay margen de error. Por no mencionar la ausencia de una estrategia SEO para tu tienda online.

Desde el uso de palabras clave populares en las páginas de tu sitio web hasta la actualización de tus meta tags y encabezados para mantener tu relevancia. Es extremadamente importante tener una estrategia completa de SEO para mantenerse por delante de tu competencia.

Consejos de Ecommerce (#12): Email Marketing y carritos abandonados

Los avances de las herramientas digitales y el software de email marketing han hecho posible segmentar tu público objetivo e incluso automatizar las campañas de email marketing hacia ellos. Una de estas tácticas que recomiendo es automatizar un email a los usuarios que han abandonado la tienda con productos en el carrito sin finalizar la compra.

La redirección de estos segmentos de usuarios con un correo electrónico automatizado es una táctica útil que ayuda a aumentar las conversiones. Es interesante ver cuántos programas de email marketing automatizan esta tarea para que no tengas que preocuparte de perderte este lucrativo segmento.

Consejos de Ecommerce (#13): Uso de Newsletters

Las newsletters son muy parecidas a las suscripciones mensuales a las revistas. Sólo que está online y se envía directamente a tu bandeja de entrada. Te da la oportunidad de conectarte con tu público objetivo mientras promocionas tu tienda de comercio electrónico.

Las newsletters pueden ser de diferentes tipos de contenido. Dependiendo de tu objetivo de comunicación, esto puede variar desde consejos de tu sector hasta ofertas promocionales. Todo lo cual atrae más tráfico a tu tienda online. Las newsletters forman un capítulo importante en mi libro de consejos de comercio electrónico que todo negocio necesita usar.

Consejos de Ecommerce (#14): Estrategia de Contenido

El contenido puede ser la única cosa que puede hacer o romper tu negocio online. Después de todo tus consumidores están buscando una gran experiencia de usuario cuando vienen a tu sitio web. Una estrategia de contenido consistente basada en cada canal puede amplificar lo que los usuarios encuentran cuando visitan tu sitio web.

Artículos de blogs y videos de testimonios de usuarios son sólo algunos de los trucos que son tácticas efectivas de ecommerce para aumentar el tráfico a tu tienda.

Consejos de Ecommerce (#15): Entradas del blog

El blogging es sin duda una gran manera para que las empresas de ecommerce compartan información valiosa con su público objetivo. Información que agregará valor a su experiencia y les dirá algo que no saben ya.

Las marcas utilizan los blogs para afirmar su posición como líderes de opinión en el mercado. Cuando se trata de comercio electrónico, he encontrado bastante interesante ver cuán efectivos pueden ser los «artículos sobre cómo hacerlo».

Para este tipo de modelo de negocio en el que no hay interacción física entre los consumidores y los vendedores, siempre se fomenta la información adicional sobre el producto. Además de alojar palabras clave populares, cómo los blogs pueden demostrar el uso de un producto y elevar la experiencia del usuario final.

Consejos de Ecommerce (#16): Marketing de Influencer

Se trata más bien de una nueva táctica que las empresas utilizan para comercializar sus productos online. Podrían ser celebridades, artistas, atletas, estilistas, etc. Tienen una gran cantidad de seguidores leales en los medios sociales y a menudo se vuelven virales con su contenido. Con una gran estrategia de marketing de influencia, las marcas pueden aprovechar la popularidad de un influencer y asociarse con estos profesionales para promover la tienda o su producto. Este es uno de los consejos más efectivos de ecommerce y puede ser aprovechado a través de una gama de tácticas diferentes.

Consejos de Ecommerce (#17): Aproveche las nuevas herramientas como los podcasts

Con un mercado digital en continuo crecimiento, las nuevas tecnologías hacen que la tecnología de ayer sea obsoleta. Por lo tanto, es hora de mirar hacia adelante a la nueva innovación. Los podcasts son una de esas innovaciones. Son archivos de audio que se transmiten en directo y que el usuario puede escuchar descargando o suscribiéndose.

Este se convirtió en un canal particularmente popular debido a que el mundo se volvió más móvil a principios del siglo XXI. Las marcas ahora tienen la oportunidad de conectarse con sus clientes potenciales mientras viajan o se encuentran de viaje.

Los móviles han hecho posible que los usuarios escuchen un podcast instantáneamente. Aprovechar estas nuevas tácticas de marketing puede ayudar a tu negocio a mantenerse por delante de la competencia y promover tu tienda al mismo tiempo.

Consejos de Ecommerce (#18): Uso de Testimonios y Reseñas

El 90% de los compradores online toman sus decisiones de compra basándose en los comentarios de los productos. No es de extrañar que gigantes del comercio electrónico como eBay y Amazon hayan dado gran importancia a las reseñas en sus páginas de productos.

Piensa en la última vez que compraste un producto online. Lo más probable es que tú mismo hayas sido influenciado por una reseña online de alguna manera. Nuestro siguiente consejo de ecommerce habla de eso. El uso de testimonios y comentarios de clientes es una gran manera de promover tus productos de eCommerce.

Genera mucha confianza en tu tienda online y es definitivamente algo que los usuarios potenciales querrían ver antes de tomar una decisión de compra.

Consejos de Ecommerce (#19): Uso de las preguntas frecuentes

Navega por cualquier sitio web popular y encontrarás una cosa en común: todos tienen una sección dedicada a las preguntas más frecuentes.

Es útil incluir una sección de pre-respuestas a preguntas populares que un usuario pueda tener sobre los productos. Esta es una manera popular de retener el tráfico en una tienda de ecommerce y asegurarse de que está compartiendo suficiente información con sus usuarios antes de que ellos tomen una decisión de compra.

Consejos de Ecommerce (#20): Crear urgencia con ofertas

Si has estado en conciertos o eventos, habrás visto cómo los organizadores de eventos crean una urgencia al promover los descuentos por pago anticipado. Del mismo modo, las tiendas de ecommerce también pueden beneficiarse de descuentos en función del tiempo. Son una gran manera de captar a una audiencia interesada.

Por supuesto, no quieres parecer demasiado barato con sólo promocionar descuentos en tu feed de medios sociales. Pero una oferta bien programada puede ayudarte a aumentar las ventas.

Consejos de Ecommerce (#21): Tenga una buena política de envío y devolución

Tener una política de devolución justa para tus productos de ecommerce es una necesidad. Especialmente si se tiene en cuenta la competencia en el mercado actual. Lo mismo ocurre con una política de envío competitiva en todos tus productos. Esto se ha convertido en algo más que un hecho, pero tener buenas políticas puede promover tu negocio de ecommerce y animar a los usuarios a probar tu empresa.

Consejos de Ecommerce (#22): Más opciones de pago y proceso de pago fácil

Cuando se acuñó el término ecommerce y se iniciaron las transacciones, sólo había un actor de pago en el juego: Visa. Y sus servidores tardaban entre 7 y 14 minutos en dejar salir a un cliente.

Ahora, con muchos más actores, las tecnologías de pago han cambiado y este proceso se interrumpe en tan sólo unos segundos. La compra fácil es un gran indicador de la experiencia del usuario final y, al igual que su política de envío, un cambio de juego.

Consejos de Ecommerce (#23): Facilita que se pongan en contacto contigo mediante chats o whatsapp.

Vivimos en un mundo donde la información se comparte libremente y a menudo se confunde con las expectativas. Los usuarios de hoy en día quieren tomarse su tiempo para comprar un producto y al mismo tiempo quieren tener la opción de ponerse en contacto con el propietario de la tienda casi inmediatamente. Pocas marcas hacen esto bien, pero las que lo hacen son las últimas ganadoras en el juego de ecommerce.

Consejos de Ecommerce (#24): Ten programas de fidelidad y de recomendación del sitio.

Probablemente ya lo sepas, pero para que conste, dilo en voz alta. Es más fácil retener a un cliente que adquirir uno nuevo.

Un estudio reciente del ecommerce puso el acento en este hecho diciendo que más del 50% de sus clientes existentes están dispuestos a probar sus otros productos. Un porcentaje que baja a sólo el 12% cuando se trata de nuevos clientes.

Es un poco más barato retener los viejos también. Por lo tanto, aconsejo que las empresas no se pierdan la inclusión de algún tipo de programa de fidelización en su modelo de negocio. Y cuando se trata de consejos de comercio electrónico que ayudan a promover su tienda en línea, este toma el centro del escenario con seguridad.

Consejos de Ecommerce (#25): Anuncios en Amazon

Google podría tener a la anunciante asombrado con su popular motor de búsqueda. Pero cuando se trata de búsquedas de productos, Amazon no debe ser olvidado. Más del 60% de las búsquedas de productos comienzan en Amazon y este número aumenta constantemente.

Esta es la razón principal por la que he recomendado Amazon Advertising a mis clientes en los últimos tiempos. Aparte de tener una tienda en Amazon, colocar anuncios en esta plataforma es una gran manera para que los negocios de ecommerce promocionen su tienda online. Y al igual que Google, Amazon también tiene un modelo de pago por clic. Esto significa que sólo pagas cuando un usuario hace clic en el anuncio de tu producto.

8 pasos para un diseño web accesible para todos

Diseño web accesible

Descubre cómo crear un diseño web accesible con estos sencillos consejos

La accesibilidad es un derecho humano y, en algunos países, por ley. De hecho, en 2018 se produjo un gran aumento de las demandas de accesibilidad web. Ahora los diseñadores están empezando a darse cuenta de que un diseño web accesible es una necesidad. Con esto en mente, aquí te doy los ocho principales consejos para asegurar que tu diseño web esté optimizado para ser accesible y lo más inclusivo posible.

Si decides revisar los elementos accesibles de tu sitio web y te das cuenta de que tu diseño web necesita una actualización total, aquí te explico las principales tendencias del diseño web para 2019.

A continuación los 8 pasos para un diseño web accesible:

01. Definir la accesibilidad

La accesibilidad y el diseño inclusivo a veces se mencionan indistintamente, pero no reconocer la distinción entre ellos puede tener consecuencias drásticas. El diseño de accesibilidad consiste en eliminar obstáculos para que todos los usuarios puedan utilizar las aplicaciones y sitios web que diseñamos.

A continuación, recordemos que los tamaños de fuente más grandes reducen el obstáculo «no puede leer el texto», por lo que o bien permitimos que ciertos usuarios cambien a un «modo de accesibilidad» alternativo, o bien creamos una versión accesible, pero separada, a la que se puede acceder mediante un enlace en la navegación. Ahora, esto no sólo difumina la línea entre accesible e inaccesible (ya que los usuarios con discapacidad visual todavía lo tienen que localizar), sino que no es del todo inclusivo, porque hemos aislado a estos usuarios. Han sido segregados, se les ha hecho sentir diferentes, y para colmo, hemos tenido que diseñar y desarrollar dos versiones de nuestra interfaz, gastando tiempo y esfuerzos adicionales.

Una fuente más grande para todos

En su lugar, podríamos haber diseñado simplemente una interfaz singular, más inclusiva, donde la fuente sea más grande para todos. Después de todo, incluso los usuarios que no son discapacitados visuales se beneficiarán de poder leer el texto más fácilmente, y es por esto que el diseño inclusivo es un triunfo tanto para los usuarios discapacitados como para los no discapacitados. El diseño inclusivo no disminuye la experiencia de los que no están discapacitados. De hecho, la gran mayoría de las reglas de accesibilidad definidas por el WCAG – Web Content Accessibility Guidelines, se duplican como consejos de usabilidad que, si se implementan, beneficiarán a todos los usuarios.

02. Simplificar el lenguaje

Cuando se trata de la palabra escrita, hay una gran variedad de consideraciones a tener en cuenta si queremos diseñar experiencias que se adapten a todo el mundo. Está la simplicidad de las palabras mismas (que puede afectar a los que tienen dificultades para leer), está la tipografía (que puede afectar a los usuarios con discapacidad visual), y está la consistencia (que puede afectar a los que tienen discapacidades cognitivas). Y, por supuesto, el diseño subóptimo afecta tanto a los que no están discapacitados como a los que sí lo están.

Cómo mejorar la tipografía y, por tanto, la legibilidad:

Alinear el texto sólo a la izquierda o a la derecha
Enlaces subrayados para un mayor contraste visual
Aplicar el espaciado de línea por lo menos 1.5 veces el tamaño de la fuente
Espaciado entre párrafos: al menos 1,5 veces el espacio entre líneas
Ancho de párrafo: no más de 80 caracteres

Cómo reducir la carga cognitiva:

Usar un lenguaje sencillo
Definir abreviaturas en el primer uso
Asegurarse de que el texto del enlace se describa de forma eficaz
Coincidir URLs idénticas con texto de enlace idéntico
Estructurar el contenido de forma lógica utilizando encabezados claros.

03. Optimizar el contraste de color

El contraste de color es una medida de lo bien que se distinguen los colores de dos elementos de diseño. La unidad de esta medida es una proporción, y hay una proporción mínima a la que apuntar. Suponiendo que varios elementos de diseño cumplan con la relación mínima de contraste de color definida por el WCAG, no sólo estamos permitiendo la legibilidad a los usuarios con discapacidad visual, sino que la estamos potenciando para aquellos que no la tienen también. Esta es una de las muchas maneras en que diseñamos inclusivamente con un esfuerzo prácticamente nulo.

Entonces, ¿cuál es el requisito mínimo, y cómo lo comprobamos? En primer lugar, los analizadores de contraste de color como Stark pueden utilizarse para medir la relación de contraste de color. Sin embargo, la proporción mínima a la que debemos llegar depende del elemento en sí, es decir, si se trata o no de un elemento importante de la interfaz de usuario, como un icono o un campo de formulario, o, si el elemento es textual, si el tamaño de la fuente es pequeño o grande, ya que las fuentes más grandes son más legibles incluso antes de retocar el contraste.

Estos son los requisitos de la relación de contraste de color para el texto sobre el fondo, tal como lo define el WCAG:

14pt negrita o 18pt normal: 4.5:1 (7:1 es mejor)
Negrita de 14pt o normal de 18pt, y más: 3:1 (4.5:1 es mejor)

Estos son los requisitos para los elementos de la interfaz de usuario:

Objetos gráficos (como gráficos): 3:1
Concéntrate, desplaza el cursor y los estados activos: 3:1
Iconos y elementos de formulario en los que se puede hacer clic: 3:1

La aplicación Stark mencionada anteriormente también puede simular el aspecto de nuestro diseño para usuarios con diferentes tipos de daltonismo: después de todo, el 4,5% del mundo es un gran número de usuarios potenciales. Si te resulta difícil conseguir un contraste óptimo con los enlaces de un cuerpo de texto, subrayalos para que los enlaces sean más fáciles de detectar, porque algunos usuarios daltónicos no ven el contraste de color en absoluto.

04. Ayudar a los usuarios a corregir errores

Los errores a menudo resultan una nube de confusión, especialmente cuando el usuario no sabe exactamente lo que hizo, o cómo arreglarlo. Los errores son inevitables, especialmente para el usuario moderno que se apresura a interactuar con las interfaces, fuertemente armado con su modelo mental, y es por esto que ayudar a los usuarios (discapacitados o no) a superar sus errores es vital para la accesibilidad.

Naturalmente, el escenario más común en el que el usuario puede cometer un error es al rellenar un formulario, y a menudo como resultado de una variedad de discapacidades, es decir, dificultad de comprensión como resultado de una discapacidad cognitiva, introducción de datos incorrectos como resultado de una discapacidad motora, etc. En primer lugar, si podemos corregir el error del usuario de forma programada, entonces se evitará la crisis. Un ejemplo de esto en acción podría ser añadir https:// a su URL si aún no ha sido añadido, en lugar de forzar al usuario a arreglarlo por sí mismo.

Considera estos otros consejos para reducir los errores:

Utiliza siempre etiquetas de formulario para describir los campos.
Y marcadores de posición para mostrar un ejemplo de entrada aceptable
Habilitar la función de autollenado y autocompletar para reducir los requisitos de escritura

Y estos consejos para ayudar a los usuarios a corregir errores:

Mostrar los errores de formulario claramente en tiempo real
Permita que el usuario verifique sus datos antes de enviarlos.
Importante y a menudo se olvida: ¡no hagas que los usuarios se sientan estúpidos!

05. Saltar al Contenido Principal

Saltar al contenido principal es una característica de accesibilidad relativamente oscura dirigida a aquellos que navegan por las interfaces de usuario con lectores de pantalla. Lo más probable es que nunca hayas oído hablar de esta función; así de inclusiva es. Los lectores de pantalla, o simplemente aquellos que en su mayoría navegan por las interfaces de usuario utilizando el teclado, tabulan a través de los destinos mediante la tecla de tabulación. Si no está desactivada, es probable que lo hayas experimentado de todas formas al saltar a través de los campos del formulario en un navegador web de escritorio, ya que es mucho más fácil que hacer clic.

Saltar al contenido principal es una mejora de la accesibilidad para ayudar a este subconjunto de usuarios a escapar de la repetitividad evitando la navegación principal; esto funciona al tener el primer elemento de la pestaña un enlace que salta al contenido principal. Es oscuro para aquellos que no usan lectores de pantalla porque este enlace sólo se muestra una vez con pestañas. Intenta buscar algo en Google y luego presiona la tecla de tabulación.

También es importante indicar visualmente qué elemento está actualmente enfocado, ya que el índice de pestañas puede cambiar a una ubicación inesperada (índices de pestañas y, por lo tanto, lectores de pantalla leídos de arriba hacia abajo). En términos de código CSS, esto a menudo aparece como si fuera una sombra azul, pero en realidad es un esquema, ¡así que asegúrate de no sobreescribir este estilo!

06. No crees presión (diseño web accesible)

A nadie le gusta sentirse presionado, pero para las personas con discapacidades motoras o cognitivas, la presión puede provocar ansiedad. Las interfaces se han vuelto mucho más dinámicas con el paso de los años, a medida que más y más tareas pueden ser completadas usando un dispositivo. Lamentablemente, demasiadas experiencias dinámicas son el resultado de que los diseñadores intentan hacer que las interfaces de usuario sean más imaginativas a costa de la usabilidad. Un consejo útil sería simplificar el diseño y eliminar elementos dinámicos innecesarios.

Esto incluye carruseles, ventanas emergentes, alertas y animaciones que distraen.

A continuación, veamos cómo podemos hacer que estos elementos, en caso de que los necesitemos, sean accesibles para las personas con discapacidades. En primer lugar, necesitamos añadir un nivel de control para la reproducción automática de medios que exija atención, ya que esto podría añadir una cantidad incómoda de carga cognitiva adicional para las personas con discapacidades cognitivas. La regla es, tal y como se define en la WCAG 2.0, que si el medio se ejecuta durante más de tres segundos, debe ser controlable. Cualquier otra cosa que se desplace, parpadee o se mueva automáticamente sin que el usuario tenga que interactuar con ella (es decir, animaciones y carruseles) también debería ser controlable si dura más de cinco segundos.

Los movimientos inesperados son desagradables

Por lo general, los movimientos de comunicación inesperados son desagradables para los usuarios y es mejor evitarlos. Ten en cuenta que una regla similar se aplica a los elementos que parpadean más de tres veces por segundo, especialmente si es de alto contraste y rojo, ya que esto puede provocar convulsiones.

En cuanto a los mensajes de chat, alertas, recordatorios, noticias, etc, los usuarios deben poder limitar su frecuencia para disponer de más tiempo para leer y comprender lo que se está comunicando, y también es aconsejable dejar que el usuario descarte fácilmente cualquier alerta u obstrucción visible con la tecla esc. La presión para llevar a cabo una tarea es a veces inevitable, ya que algunas interfaces (como las interfaces bancarias) pueden tener un tiempo de espera por razones de seguridad, y naturalmente estas alertas tienen que ser obvias. En este escenario, a los usuarios con discapacidad que necesiten más tiempo se les debe ofrecer la oportunidad de hacerlo, haciéndole saber a la interfaz que el usuario no la ha abandonado y que por error dejó sus datos expuestos.

07. Relevo con los desarrolladores

Cuando se trata de mejorar la accesibilidad, los desarrolladores deben compartir la mitad de la responsabilidad, especialmente cuando se trata de hacer que las interfaces de usuario sean fáciles de leer para el lector de pantalla. La optimización del diseño web accesible para lectores de pantalla se realiza principalmente entre bastidores y no afecta en absoluto a los usuarios no discapacitados, lo que hace que estos sitios web sean muy inclusivos para los usuarios de todas las capacidades.

Para aquellos que se lo pregunten, un lector de pantalla ayuda a los usuarios con discapacidad visual leyendo en voz alta lo que hay en la pantalla. ¿Pero qué hay de las imágenes? ¿Qué pasa con los iconos sin etiquetas de texto? ¿Cómo es que los lectores de pantalla transmiten exactamente elementos de diseño sin descripción de texto, y cómo estas tecnologías de asistencia cambian rápidamente el enfoque a puntos de referencia clave como la búsqueda y la navegación? Bueno, aquí es exactamente donde el desarrollador entra en escena.

Repasemos algunos de los aspectos clave en el diseño web accesible:

Utilizar elementos HTML semánticos como <nav> y <header>.
Utiliza las funciones de referencia de ARIA para añadir más contexto a los elementos HTML
Declarar el lenguaje (correcto) (guía WCAG aquí)
Formar siempre elementos
Utilice «texto alt» (Error! Nombre de archivo no especificado.) para alternativas de texto a las imágenes puedes revisar este artículo.
Proporcionar opciones sin JS y nunca utilizar scripts en línea.

08. Elige gestos sencillos

La elección de gestos sencillos en lugar de gestos complejos ganará a los usuarios no discapacitados, al tiempo que hará que las interfaces de usuario sean accesibles para los usuarios discapacitados. Los gestos tienden a diferir entre aplicaciones y sitios web. En primer lugar, está la cuestión de las expectativas del usuario; por ejemplo, es bastante normal que las interacciones en las aplicaciones de pantalla táctil se produzcan al pasar el dedo por la pantalla, pero los usuarios no suelen pensar en pasar el dedo por un sitio web (ni siquiera por un sitio web para móviles). Aparte de eso, ¿hay algo que vaya más allá de la simple pulsación y el clicteo para los usuarios discapacitados?

La respuesta es sí, pero también son un poco intimidantes para los usuarios no discapacitados, con la posibilidad de que el swiping sea una excepción, ya que se puede hacer sólo con el pulgar. Quiero decir, ¿alguna vez has intentado girar un mapa de Google? Es una experiencia muy quisquillosa, y para aquellos con alguna discapacidad motora sería una tarea casi imposible de llevar a cabo. Dado que Google Maps no ofrece una forma alternativa de rotar utilizando botones en los que se pueda hacer clic, esta funcionalidad no es accesible ni inclusiva.

¿Realmente necesitamos este gesto?

Así que tenemos que preguntarnos caso por caso, ¿realmente necesitamos este gesto complejo? Por ejemplo, ¿funcionaría una columna estática y vertical tan bien como un carrusel deslizante? En ambos escenarios tendríamos el contenido desbordando la vista de cualquier manera, así que ¿qué es lo que realmente consigue un carrusel de deslizamiento? ¿Podría ser el swiping una mejora progresiva para los usuarios no discapacitados? Más simple es mejor en este caso.

Mientras tanto, asegúrate de que los objetivos de las tomas sean al menos 44px2 (para que sean fáciles de tocar y hacer clic, y también para el diseño web accesible visualmente) y razonablemente espaciados (para reducir el número de clics de error).

La mejor plantilla gratis para WordPress

plantilla gratis para Wordpress

 

No busques más, aquí tienes la mejor plantilla gratis para WordPress

Shapely es la mejor plantilla gratis para WordPress que puedes descargar. Es una página potente y versátil con un diseño perfecto de píxeles y una funcionalidad excepcional. Es, con mucho, el tema gratuito de WordPress más avanzado disponible en la actualidad, con un montón de opciones de personalización inigualables. Esta plantilla viene con varios widgets de página de inicio que pueden ser usados para agregar portafolios, testimonios, secciones parallax, información sobre tu producto o servicio, llamadas a la acción y mucho más.

Soporte para plugins

Shapely soporta la mayoría de los plugins de WordPress gratuitos y premium como WooCommerce, Jetpack, Gravity Forms, Contact Form 7, Yoast SEO, Google Analytics by Yoast y mucho más. No hace falta decir que esta plantilla es fácil de usar y es totalmente responsive, lo que hace que se vea sensacional en cualquier dispositivo móvil o tablet.

Esta plantilla es muy adecuada para todo tipos de negocios, landing pages, portafolios, ecommerces, tiendas, negocios locales, sitios web personales, pero puede ser modificado para ser utilizado como blog, revista o cualquier otro sitio web mientras se destaca su configuración única de una página. Este va a ser la última plantilla gratis para WordPress que querrás usar porque es mucho mejor que todo lo que has visto y te dará los mejores resultados en SEO ya que está muy bien optimizada toda su estructura.

Características de esta plantilla gratis para WordPress

Responsive & Flat Design

Responsive & Flat Design

Esta plantilla se ha desarrollado utilizando el framework Bootstrap 3 frontend, lo que la hace totalmente sensible y optimizada para todos los dispositivos móviles como iPad, iPhone, Android y Windows Phone. Ejecuta el enfoque «Mobile First».

Listo para pantallas retina

Texto nítido, colores vibrantes, gráficos impresionantes, imágenes nítidas, sensación de calidad superior y hermosos iconos vectorizados en pantallas HiDPI (Retina).

Soporte para el Personalizador de WordPress

Shapely tiene docenas de opciones para una personalización adicional. Puedes editar la información de copyright del pie de página, cambiar el color del elemento, añadir imagen de hero, modificar secciones y mucho más.

Plugin Hero Image incluido

Podrás poner una imagen a pantalla completa, hará que tu contenido más importante se destaque. También es genial para llamar a la acción con estilo.

Compatible con WooCommerce

Compatible con WooCommerce

WooCommerce ya no tendrás que pagar por una plantilla para WooCommerce ya que puedes conseguirlo ahora de forma gratuita. Construye tu propia tienda online con facilidad con esta plantilla gratis para WordPress.

Lista para la traducción de esta plantilla gratis para WordPress

La plantilla está lista para su traducción y es multilingüe. Hay mucha información disponible sobre cómo traducir plantillas de WordPress. Si no encuentras tu idioma pueden ayudarte con ello.

Iconos Font Awesome

Esta plantilla tiene un soporte incorporado para Font Awesome. Estos son iconos vectoriales que pueden ser usados en cualquier color y tamaño y en cualquier parte de tu página web.

Completa documentación de esta plantilla gratis para WordPress

Las funciones más importantes están explicadas en la páginas de documentación, de detalla como incluir o modificar cualquiera de las opciones que están integradas en la plantilla.

Puedes descargar la plantilla o ver la demostración en los siguientes enlaces:

Descargar plantilla    DEMO

Si tienes cualquier duda o puedes personalizar cualquier opción, no dudes en dejar un comentario y estaré encantado de ayudarte:)

Y una recomendación para acabar, si quieres tener más información acerca de WordPress te recomiendo este libro que seguro será de tu interés: WordPress 5. La guía completa

Plantilla gratis para Prestashop 1.7 BizKick Responsive Theme

Plantilla gratis para Prestashop 1.7

 

Te presento esta plantilla gratis para Prestashop 1.7

Si no tienes presupuesto para desarrollar tu tienda online, hoy te traigo esta increible plantilla gratis para Prestashop 1.7.

BizKick es una plantilla gratuita para Prestashop 1.7, plantilla es perfecta para crear una tienda de moda, tienda de accesorios, tienda de zapatos o accesorios. Es un excelente punto de partida para crear tu negocio online. Puede ser adecuada para cualquier tipo de tienda de eCommerce, incluyendo Digital, Móvil, Moda, Bolsos, Zapatos, Accesorios, etc.

Esta plantilla gratis para Prestashop 1.7 tiene características avanzadas que hará que tu tienda online se convierta en más profesional con un diseño limpio y con clase. Es totalmente responsive y se ve impresionante en todo tipo de pantallas y dispositivos.

Características de esta plantilla gratis para Prestashop 1.7

Móvil Responsive

Plantilla gratis para Prestashop 1.7

Ya sabes por qué tu sitio debe ser responsive? A tus clientes les encantará y a Google también. no es ninguna sorpresa que hoy en día vivimos en la era móvil, si tu tienda no está adaptada a todos los dispositivos perderás ventas, y esta plantilla está adaptada al 100%.

Plantilla con diseño atractivo

diseño atractivo de Plantilla gratis para Prestashop 1.7

Esta plantilla  proporciona un diseño llamativo. Obliga a tu visitante a volver a tu tienda online y a disfrutar de los contenidos y servicios que proporcionas. Es una de las plantillas gratuitas con mejor diseño que podrás encontrar.

Optimizada para SEO

Optimizada para SEO

¿Desea obtener tráfico en tu tienda online? Esta plantilla gratis para Prestashop 1.7 está muy bien  optimizada para SEO, por lo que puedes estar seguro de tu buen posicionamiento en los motores de búsqueda.

Código limpio

Código limpio

Esta plantilla está muy bien codificada y optimizada. Si tienes conocimientos de programación podrás personalizar esta plantilla muy fácilmente. La plantilla proporciona un código limpio que es fácil de entender.

Instalación con un solo clic

Súper fácil instalar esta plantilla! Puedes instalar fácilmente tanto la plantilla como los plugins con un solo clic.

Bien documentada

Bien documentado significa que tienes toda la información relacionada con la plantilla, plugin o plantillas HTML de una manera comprensible, lo que te facilitará personalizarla para tu negocio.

Enlaces para descargar o ver la demo de esta plantilla:

DEMO   Descargar plantilla

Si tienes cualquier duda acerca de la instalación o personalización de esta plantilla no dudes en dejar un comentario y estaré encantado de ayudarte 🙂

Y para finalizar, te dejo este libro que te puede ayudar, si no tienes experiencia en programación te ayudará a crear tu tienda online: PrestaShop 1.7. Crear un sitio de comercio electrónico

Las 10 mejores herramientas para la experiencia de usuario

Las mejores herramientas para mejorar la experiencia de usuario

Echamos un vistazo a las herramientas para mejorar la experiencia de usuario para mejorar tu página web.

Las pruebas de usuario son una parte esencial del diseño UX, por lo que es clave tener las mejores herramientas para mejorar la experiencia de usuario. Si entiendes cómo interactúan los diferentes tipos de usuarios con tu diseño, puedes asegurarte de que estás ofreciendo la mejor experiencia de usuario posible. Puedes averiguar rápidamente por qué los visitantes no se están convirtiendo en usuarios o clientes habituales, y mejorar su experiencia haciendo ajustes esenciales.

El proceso de pruebas de usuario puede llevar mucho tiempo. Imagínate tener tu propio laboratorio de pruebas, contratar y despedir a tus propios consumidores objetivo y desarrollar el hardware necesario: costoso y de largo recorrido. Afortunadamente, hay un montón de herramientas de pruebas de usuario que te ayudará a evitar todo eso. Ofrecen las herramientas para supervisar el comportamiento de los usuarios y recopilar comentarios importantes para que puedas resolver cualquier problema y crear tu diseño en la mejor versión posible.

Elige la mejor opción en herramientas para mejorar la experiencia de usuario

En este artículo, echaremos un vistazo -sin ningún orden en particular- a algunos de los programas de pruebas de usuario más útiles y populares para que puedas empezar. Cuál de ellas se convierte en tu herramienta de pruebas de usuario dependerá en gran medida de tus necesidades y de la interfaz que más te atraiga. Te sugiero que pruebes las versiones de prueba gratuitas de esta lista, para ver qué tan bien se adapta cada una de ellas a tus necesidades antes de dar el paso.

01. Userlytics

Userlytics

Userlytics es la plataforma de pruebas de usuarios remotos ideal

Desde: $49

Userlytics es la plataforma de pruebas de usuario remota perfecta, diseñada para permitirte registrar las interacciones de los usuarios con un sitio web, una aplicación móvil o un prototipo. Esta herramienta utiliza un software de pruebas remotas picture-in-picture para capturar la expresión facial y los comentarios de audio del usuario mientras prueba tu sitio, con el fin de proporcionar una imagen completa de cómo responde y reacciona en tiempo real.

No se necesita ningún hardware ni configuración complicada para empezar a utilizar Userlytics. Es una excelente manera de descubrir de forma rápida y económica los puntos flojos de tu aplicación móvil, o descubrir por qué los usuarios están haciendo lo que están haciendo en tu sitio web.

02. UsabilityHub

UsabilityHub Herramientas para mejorar la experiencia de usuario

Pon tu diseño delante de los nuevos usuarios y obten comentarios rápidamente

Desde: gratis

¿Debería colocar la barra de navegación a la izquierda o a la derecha? ¿Prefiere la gente el diseño A o el diseño B? Tomar decisiones de diseño puede ser frustrante, especialmente cuando se trata de averiguar qué diseño es la mejor solución. Aquí es donde entra en juego UsabilityHub: Está diseñado para ayudarte a resolver cualquier debate sobre diseño de una vez por todas. UsabilityHub incluye cinco paquetes de pruebas diferentes que te permiten capturar y analizar las preferencias de los usuarios y tomar una decisión segura.

Simplemente carga una imagen de la interfaz de tu página web, la interfaz de usuario de la aplicación móvil o el diseño del software y asigna una tarea para que los usuarios la completen, luego espera los resultados. UsabilityHub proporcionará un informe que incluye mapas térmicos que indican dónde han hecho clic los usuarios. Incluso puede configurar una prueba de cinco segundos para capturar la primera impresión del usuario de tu diseño.

Con este software de pruebas de usuario también puedes cargar múltiples diseños y preguntar a los usuarios qué versión prefieren y por qué, crear pruebas de navegación para determinar los puntos de abandono (ideal para visitas de usuarios complicados), y organizar una encuesta para recopilar los comentarios de los usuarios.

Hay una opción básica gratuita de esta herramienta – sólo tendrás que pagar si quieres que UsabilityHub te proporcione sujetos de prueba.

03. Lookback Herramientas para mejorar la experiencia de usuario

Lookback mejorar la experiencia de usuario

Habla con los usuarios mientras exploran tu página web (no después)

Desde: $49/mes
Gratuito: prueba

Lookback es un software de grabación de experiencia de usuario simplificado. Con él puede grabar el ordenador o dispositivo móvil de un usuario de forma interna o remota, sin necesidad de equipo adicional.

Lo que hace que Lookback sea único es que puede unirse a la sesión de pruebas en vivo y hablar con el usuario mientras éste explora tu diseño, hace preguntas o realiza una entrevista. Muchos otros programas de pruebas de usuario sólo proporcionan un informe o grabación después de que las pruebas han sido completadas, pero con Lookback, puedes programar pruebas y verlas a medida que se llevan a cabo en tiempo real, y hablar con el usuario directamente con preguntas de seguimiento. Es una manera fácil de obtener una respuesta inmediata.

04. TryMyUI

TryMyUI

Haz que tu sitio web sea probado por usuarios reales y vea los resultados

Desde: gratis (pago por resultado)

TryMyUI es un servicio de pruebas de usabilidad destinado a ayudarte a descubrir cómo puedes mejorar tu sitio web o aplicación móvil. Con él, puedes configurar tu propio test personalizado con tareas específicas para que los usuarios las lleven a cabo, y encontrar la base de usuarios adecuada a través de una amplia gama de datos demográficos. También puedes ver la grabación de los usuarios que realizan las pruebas que tu has establecido.

Alternativamente, puede utilizar el servicio TryMyUI Stream. Esto se instala en tu sitio web para recopilar información en tiempo real sobre cómo interactúa el usuario, lo que te permite encontrar errores e identificar los UX defectuosos con el buscador de frustraciones de la IA de Stream. Esto ayuda a identificar los caminos que están tomando los usuarios y cuáles conducen al éxito y al fracaso.

05. Hotjar

Hotjar

Hotjar es una plataforma de análisis y retroalimentación todo en uno

Desde: gratis

Hotjar contiene una gran cantidad de herramientas útiles para ayudarle a analizar y recibir comentarios útiles para tu página web. Crazy Egg (número 8 de nuestra lista) puede ser el software de pruebas de usuario que te viene a la mente cuando piensas en mapas de calor, pero Hotjar también los tiene. Estos te ayudan a ver a qué partes de tu interfaz están atrayendo a tu audiencia, y están obteniendo la mayor cantidad de clics.

Con Hotjar también puedes ver grabaciones de las rutas del ratón de las personas para indicar exactamente cómo están navegando por tu sitio, y la utilidad Conversion Funnels te permite saber en qué momento la gente abandona un proceso de compra o registro. Estas características pueden ser muy perspicaces. El embudo te ayuda a identificar exactamente qué parte de tu sitio necesita ser ajustado para obtener mejores resultados de tu diseño.

Hay algunas otras grandes funcionalidades dentro de esta herramienta, incluyendo el análisis de formularios y las encuestas de retroalimentación. Hotjar definitivamente debería estar en su lista de software de pruebas de usuario.

06. Reflector

Reflector experiencia de usuario

Transmitir por secuencias una pantalla de móvil a tu ordenador

Desde: $14.99 Prueba gratuita

Screen mirroring app Reflector no está diseñado específicamente para pruebas de usabilidad, pero es útil para probar cómo funciona el diseño de tu aplicación en móviles. Esta herramienta envía de forma inalámbrica la pantalla de tu teléfono o tableta a tu PC o Mac para que puedas ver cómo la gente utiliza tu aplicación. Reflector también incluye capacidades de grabación para que pueda revisar tus sesiones de pruebas más tarde o compartirlas y presentarlas a una audiencia.

07. UserTesting

UserTesting

Contratar y registrar fácilmente a un usuario que interactúa con tu sitio web

Desde: $49 por sesión de video (hasta 15 sesiones)

Una de las mejores y más sencillas maneras de registrar a los usuarios que interactúan con tu sitio web, junto con sus respuestas, es a través de video utilizando UserTesting.

Con este software de pruebas de usuario puedes elegir tu público objetivo y asignar a los usuarios una tarea a realizar en tu sitio web o aplicación. Tu prueba puede ser ejecutada en un escritorio, tableta o dispositivo móvil. A cambio, UserTesting registrará las opiniones de personas reales mientras interactúan con tu web/app, para que puedas entender realmente por qué los usuarios hacen lo que hacen. Puedes probar UserTesting gratuitamente.

08. Crazy Egg Herramientas para mejorar la experiencia de usuario

Crazy Egg

Los mapas de calor te ayudan a identificar lo que los usuarios están haciendo en realidad

Desde: $29/mes
Prueba gratuita

Descubre cómo interactúan los visitantes en tu página web con gafas de rayos X utilizando Crazy Egg. Esta herramienta de mapas de calor te ayuda a entender lo que la gente está haciendo en tu sitio web y por qué los visitantes pueden no estar convirtiéndose en usuarios o clientes regulares. Los mapas de calor identifican los objetos de tu web en los que se hace clic y las fuentes de tráfico desde las que se hace referencia a ellos.

Una característica extremadamente útil en Crazy Egg es el mapa de desplazamiento, que identifica hasta qué punto los visitantes se desplazan por una página antes de abandonarla por completo. Otras características útiles incluyen la capacidad de monitorizar el número de clics en cada elemento de una página y de realizar pruebas A/B.

09. Inspectlet

Inspectlet

Registra a los usuarios activos en tu web como si estuvieras mirando por encima de sus hombros.

Desde: gratis

Inspectlet es un software de pruebas de usuario que registra a tus visitantes y monitorea exactamente lo que están haciendo en tu página web, incluyendo los enlaces en los que hacen clic, el movimiento del ratón, el desplazamiento y las pulsaciones de teclas. Puedes observar a cada visitante como si estuvieras mirando por encima de su hombro.

Además de registrar la interacción del usuario en tu web, Inspectlet incluye un mapa de calor, que te permite identificar las secciones a las que los visitantes están prestando atención. El mapa de calor también incluye el seguimiento de los ojos, información sobre qué es lo que más se ha pulsado y hasta qué punto los visitantes se desplazan por las páginas. Y como ventaja adicional, la herramienta de análisis de formularios destaca qué elementos son los más problemáticos para los visitantes y en qué aspectos están fallando más.

10. Optimizely

Optimizely

Optimice el UX de tu web con pruebas A/B

Precio a petición

Las pruebas A/B son una forma extremadamente efectiva de probar los cambios planificados en una página web en comparación con el diseño existente para determinar qué versión produce los resultados más positivos. Google ofrece su propio software de pruebas A/B llamado Google Optimize, que te permite realizar experimentos en tu sitio web.

Sin embargo, un software más robusto para pruebas A/B es Optimizely. Esta herramienta ofrece varias características fáciles de usar para ayudarte a construir tus pruebas, incluyendo pruebas multivariadas – una técnica para probar múltiples variables en una página web. Puedes crear experiencias personalizadas y dirigirte a audiencias específicas al presentar nuevos diseños a los visitantes, incluyendo la selección de diferentes URLs, navegadores y regiones geográficas.

Optimizely es un conjunto de herramientas, pero está dirigido a negocios serios, lo que se refleja en el precio.

Mejora tu página web con esta recomendación

Si te ha gustado este artículo y estás interesado en mejorar tu página web, te invito que leas este artículo sobre las 7 Reglas Del Diseño Web Que Siempre Hay Que Cumplir.

Los 12 mejores sitios web para descargar imágenes premium

descargar imágenes premium

 

Los mejores sitios para encontrar fotografías de calidad para tus proyectos y descargar imágenes premium.

Descargar imágenes premium. Puede ser muy frustrante cuando se tiene un gran idea para un proyecto y no encuentras la fotografía perfecta porque no se tiene el presupuesto para encargar el trabajo a un fotógrafo. Hay varias maneras de manejar esta situación: Puedes realizar la fotografía tu mismo, tratar de encontrar más dinero para el proyecto, o, podrías utilizar un sitio web de arte de valores.

Algunas personas imaginan que tales páginas web estarán llenos de clichés sosos y cansados, pero este ya no es el caso. En su lugar, los sitios web de fotografía de stock ahora ofrecen una enorme y ecléctica variedad de fotografías e ilustraciones en varios estilos y tamaños, creadas por miles de talentosos fotógrafos. Aunque, por supuesto, es poco probable que te gusten todas las imágenes que aparecen en ellas.

Hay muchas páginas de fotografías en internet, desde compañías más grandes donde la ilustración es sólo una parte de su oferta, hasta sitios más pequeños que se enfocan puramente en fotografías. A continuación encontrarás una lista de algunos de los mejores sitios para que los visites. Espero que encuentres lo que buscas.

01. Adobe Stock

Adobe Stock descargar imágenes premium

Adobe Stock te permite probar instantáneamente imágenes en sus aplicaciones CC

Adobe Stock es tan hábil como uno esperaría que fuera. Se integra con todas sus aplicaciones CC, lo que facilita la previsualización de una fotografía de stock o vector dentro de tus diseños y, a continuación, la licencia se ajusta a tus necesidades. Repleto de fotografías, vectores e ilustraciones de alta calidad, es también una gran plataforma para vender tus propios archivos. Si deseas realizar una prueba, Adobe ofrece una prueba gratuita de 30 días con 10 imágenes.

02. Getty Images

Getty Images descargar imágenes premium

Getty Images es muy conocido por sus fotos, pero también por su gran cantidad de ilustraciones.

Getty Images es enorme. Se trata principalmente de un portal de fotografía, pero su biblioteca también incluye cientos de miles de ilustraciones, todas las cuales se pueden buscar a través de un panel de búsqueda completo y fácil de usar, y que cubre todos los temas que se te ocurran. La oferta de fotografía tiende a inclinarse más hacia un estilo limpio y contemporáneo, y es fácil filtrar los resultados por factores como el color y el estilo.

03. iStock

iStock descargar imágenes premium

iStock tiene una amplia gama de fotografías

iStock es una versión micro-stock más pequeña de su hermana mayor, Getty Images. Esto significa que iStock tiene algunas de las mismas características que Getty Images, así que puedes filtrar los resultados de búsqueda por color, por ejemplo. También puede encontrar el espacio vacío que buscas en el diseño de texto y mostrar los resultados en consecuencia.

Esto es enormemente refrescante dada la cantidad de tiempo que a veces puede tomar encontrar el hilo correcto. Las ilustraciones de iStock están un poco más basadas en vectores que la mayoría de las de esta lista. Pero su área http://www.shutterstock.com/?utm_medium=Affiliate&utm_source=10078&utm_campaign=Skimbit%20Ltd.&irgwc=1&tpl=10078-42119de distribución es extensa y relativamente barata.

04. Shutterstock

fotografías en Shutterstock descargar imágenes premium

No hay sólo fotografías en Shutterstock, también hay muchas ilustraciones.

Aunque puedas pensar en ella como una biblioteca de fotografía, Shutterstock ofrece una gran cantidad de ilustraciones entre su colección de imágenes en constante expansión. Ya sea que busques vectores elegantes, ilustraciones llamativas o simples imágenes prediseñadas, deberías poder encontrar fácilmente lo que estás buscando con facilidad.

05. YouWorkForThem

YouWorkForThem

La misión de YouWorkForThem es ser la mejor fuente de recursos de diseño del mundo.

YouWorkForThem ha estado trabajando en un nicho único, orientados al diseñador durante décadas (por no mencionar las fuentes y las fotos también). El servicio proporciona actualmente más de 240.515 gráficos de más de 484 artistas y diseñadores, todos con licencias fáciles y asequibles. También hay disponibles opciones de licencias personalizadas.

06. Old Book Illustrations

Old Book Illustrations

Aquí encontrarás fotografías antiguas escaneadas de libros antiguos

Si estás buscando un estilo de imágenes antiguas, este sitio es genial – y también gratuito. Todas las imágenes son escaneadas de libros antiguos y de dominio público, por lo que no hay derechos que tratar. Es una estupenda colección: las categorías incluyen plantas, animales, edificios y monumentos, ornamentos y patrones.

07. The British Library

The British Library

Una enorme colección de más de un millón de imágenes

La Biblioteca Británica ha compartido más de un millón de imágenes de esta colección de dominio público en Flickr. Gran parte de ella son ilustraciones y obras de arte al viejo estilo; también hay miles de fotografías, mapas, anuncios vintage, dibujos botánicos, historietas vintage y otras imágenes interesantes.

08. Flickr: The Commons

Flickr: The Commons

The Commons comparte gemas ocultas de todo el mundo

Este proyecto pretende reunir y organizar las obras de arte y las colecciones fotográficas puestas a disposición del público por diversas instituciones, como universidades, museos y bibliotecas.

09. Stock Illustrations

Stock Illustrations

Me encanta la sección de animales de este sitio

La pista está en el nombre. Stock Illustrations presenta ilustraciones de stock contemporáneas adecuadas para el mundo de la publicidad, el diseño gráfico y la edición. Tanto si buscas un estilo, un tema o una obra de un artista en particular, hay una gran función de búsqueda que te ayudará a encontrar rápidamente las imágenes adecuadas para tu proyecto.

10. Ikon

Ikon

Ikon alberga una amplia gama de arte en stock, que se puede ver por estilo y tema.

El sitio web de Ikon parece bastante misterioso – hay demasiado estilo sobre la usabilidad, así que la navegación lleva algún tiempo. Pero sí alberga una buena gama de arte de archivo, visible por estilo, que incluye ilustración fotográfica, arte vectorial, digital y lineal, y temas que van desde la belleza y la moda, hasta el transporte y los personajes.

11. Image Zoo

Image Zoo

La fotografía de Image Zoo es más tradicional que la mayoría de los sitios.

Image Zoo tiene una gran colección de ilustraciones tradicionales, que se pueden buscar por palabra clave, nombre del artista o tema (lo que significa en realidad el nombre de la imagen individual). Las imágenes son, en general, menos contemporáneas que algunos de los otros sitios de ilustraciones que se enumeran aquí, y algunas recuerdan ligeramente a las ilustraciones tradicionales de los libros de texto educativos.

12. The iSpot

The iSpot

The iSpot cuenta con ilustraciones de una amplia gama de talentosos artistas

El sitio web de iSpot ofrece un gran número de ilustraciones tradicionales, por lo que es improbable que encuentre fotografías aquí. Se cubren muchos estilos diferentes, de una amplia gama de artistas con mucho talento. Puedes buscar ilustraciones utilizando palabras clave por categoría, tema, estilo y medio, así como el nombre del artista y la fecha en que fue subido.

Descargar imágenes premium

Si te ha gustado este artículo, pero no tienes presupuesto ni para unas fotografías o ilustraciones premium, te recomiendo que visites este otro, Los 5 mejores recursos gratuitos de iconos vectoriales gratis en 2018, y ya sabes, no olvides compartir los artículos!

Los mejores portátiles para programación en 2019

portátiles para programación

 

Portátiles para programación. La programación web (a menudo utilizada indistintamente con ‘codificación’) significa cosas diferentes para personas diferentes. El corazón de la programación en cualquier lenguaje no es particularmente exigente – sólo estás escribiendo líneas de texto, que cualquier computadora debería ser capaz de manejar. Sin embargo, siempre es bueno tener algo de potencia bajo el capó.

Por estas razones, creo que el mejor portátil para programar en 2019 es el Huawei MateBook 13. Se presenta con algunas grandes especificaciones a un precio muy razonable (y es super-portátil, también). Sigue leyendo para conocer mi ranking de ordenadores portátiles para programación, adecuados para una amplia gama de presupuestos, además de un resumen de lo que deberías estar buscando.

Los mejores portátiles para programación: Qué buscar

Como dije antes, la programación se basa esencialmente en la escritura de texto, por lo que se puede hacer en casi cualquier máquina. Sin embargo, hay algunas características que marcarán la diferencia en el flujo de trabajo de un programador.

El tamaño de pantalla perfecto para la programación es un debate interesante. Con más área de pantalla en un ordenador portátil de 15 pulgadas, es más fácil leer el código y hacer ajustes GUI, pero generalmente se pierde algo de la portabilidad de un portatil más pequeño. He trabajado en  portatiles de tamaños de pantalla de 13 pulgadas, y recientemente tuve la oportunidad de probar el nuevo e impresionante portátil LG Gram de 17 pulgadas. El LG Gram tiene una pantalla masiva que acomoda aún más código, pero sin el peso y el volumen de un portátil típico de 17 pulgadas.

Más memoria significará que los entornos de desarrollo integrado (IDEs) más pesados de la actualidad, como Visual Studio, funcionarán sin problemas y facilitarán los cambios cuando se trabaje con diseños de sitios web complejos que tengan grandes cantidades de código de fondo. Los programas grandes y complejos se compilan más rápido con un procesador más rápido.

Por último, si crees que tu nueva idea va a ser el próximo gran éxito en la App Store de Apple, necesitas un portátil que ejecute MacOS para usar Xcode, el IDE de Apple que se utiliza exclusivamente para desarrollar aplicaciones para iPhone, iPad y Mac. Del mismo modo, si estás pensando en trabajar con el desarrollo de juegos en un entorno como UnrealEd o Unity, como parte de tu proyecto, tampoco puedes ignorar el rendimiento de los gráficos.

Huawei MateBook 13

01. Huawei MateBook 13

Por su portabilidad, rendimiento y precio, es un de los mejores portátiles para programación.

CPU: Intel Core i5 – i7 de octava generación | Gráficos: Gráficos Intel UHD 620, Nvidia GeForce MX150 2GB GDDR5 | RAM: 8GB | Almacenamiento: 256GB – 512GB SSD | Tamaño: 21.1×28.6×1.2cm | Peso: 1.3kg | OS: Windows 10
Ligero y delgado
Asequible
Mucho rendimiento del procesador
Memoria limitada a 8 GB
Sólo dos puertos USB-C

El Huawei MateBook 13

es mi elección como el mejor portátil para la programación en este momento. Huawei irrumpió en el mercado telefónico con su excelente gama de teléfonos a precios competitivos, y ahora lo hace de nuevo con los portátiles: este portátil tiene grandes especificaciones para el trabajo de codificación.

Por un precio de venta (relativamente) modesto, obtendrá toda la potencia de un chip Core i5 o Core i7, una pantalla nítida, brillante y de alta resolución de 13 pulgadas y un montón de almacenamiento SSD. Hace que Apple (y otros fabricantes de alta gama) parezcan ladrones. Además, también es un súper portátil, ya que pesa sólo 1,3 kg y tiene menos de 1,5 cm de grosor. Vale la pena echar un vistazo antes de pensar en otra cosa.

Vista en España   comprar en amazon Huawei MateBook 13
Vista en EEUU  comprar en amazon Huawei MateBook 13

LG Gramo 17

02. LG Gram 17

17″ de espacio en pantalla en un portátil increíblemente ligero.

CPU: Intel Core i7-8565U (quad core, 4.6GHz Max Turbo Boost) | Gráficos: Gráficos Intel UHD 620 | RAM: 16 GB | Almacenamiento: 512GB SSD | Tamaño: 38.1×21.1×1.7cm | Peso: 1.34kg | OS: Página principal de Windows 10

Potente procesador de cuatro núcleos
Mucha memoria
Sin tarjeta gráfica
Opciones de personalización limitadas

el LG Gram de 17 pulgadas

Construido con una aleación superligera de magnesio y carbono, el LG Gram es considerado el portátil de 17 pulgadas más ligero del mundo, con sólo 1,7 cm de grosor. Si te gusta la idea de tener una pantalla de ordenador portátil más grande para editar código, entonces un modelo de 17 pulgadas será la elección correcta, pero la mayoría de los portátiles de 17 pulgadas son desafortunadamente gruesos, pesados y difíciles de transportar. Con el LG Gram 17, no tienes que hacer esa concesión – además tienes una especificaciones que asegurará que cualquier herramienta de programación funcione sin problemas.

LG ha equipado la magnífica pantalla IPS WXGA (2560×1600) de Gram 17 con un aspecto nítido y brillante, una alta precisión de color, un procesador Intel Core i7 de cuatro núcleos, una tarjeta SSD de 512 GB y 16 GB de memoria. Esto es suficiente rendimiento para masticar cualquier IDE de peso pesado.

Vista en España   comprar en amazon LG Gram 17
Vista en EEUU  comprar en amazon LG Gram 17

 

Dell Inspiron 14 5000

03. Lenovo ThinkPad P1

Rendimiento de primera calidad de grado profesional

CPU: Seis Core Intel Core i7 / Xeon | Gráficos: Nvidia Quadro P2000 | RAM: 8-16GB | Almacenamiento: 256GB-4TB | Tamaño: 36.2×24.6×1.8cm | Peso: 1.7kg | OS: Windows 10 Home / Pro

Rendimiento increíble en un chasis delgado
Una de las mejores pantallas en un portátil
El ethernet por cable ha cambiado a un nuevo’mini’ estándar
No es mucho más barato que los modelos premium de Apple

Completando nuestra selección de los mejores portátiles para la programación está el ThinkPad p1. Con este modelo, Lenovo ha tomado el tipo de experiencia informática que la mayoría de nosotros asumimos que sólo es posible con una estación de trabajo de escritorio alojada en una gran caja debajo de un escritorio, y no sólo la ha hecho portátil, sino que la ha apretado en una forma que, en grosor, se parece a la de un Ultrabook.

Procesadores Xeon de calidad profesional

Es el único portátil de este tamaño que ofrece procesadores Xeon de calidad profesional, con hasta seis núcleos, una tarjeta gráfica Nvidia Quadro P2000 y hasta 64 GB de memoria. PuedeS rellenarlo con hasta 4 TB de almacenamiento nVME SSD y optar por una pantalla de 15,6 pulgadas y 4K que no sólo es sensible al tacto, sino también es precisa en cuanto al color. Es una gran estación de trabajo de uso general, capaz de realizar todo tipo de trabajo de diseño visual y tareas de gran intensidad de procesador.

Por supuesto, también funciona muy bien para la codificación. Esto se debe en parte al excelente diseño del teclado de Lenovo, pero en general el ThinkPad P1 está muy bien construido, incluyendo un chasis semirrígido que puede sobrevivir a golpes ligeros, una selección muy buena de puertos, la retención de dos puertos USB Gen 1 originales, así como dos nuevos puertos USB tipo C con capacidad para Thunderbolt y HDMI. No te equivoques, si lo que quieres es rendimiento en bruto, este es el portátil que necesita.

Vista en España  comprar en amazon Lenovo ThinkPad P1
Vista en EEUU  comprar en amazon Lenovo ThinkPad P1

Microsoft Surface Laptop 2

04. Portátil Microsoft Surface 2

Programación de Windows en el propio hardware de Microsoft

CPU: Intel Core i5 – i7 | Gráficos: Gráficos Intel UHD 620 | RAM: 8 GB – 16 GB | Almacenamiento: 128GB – 1TB SSD | Tamaño: 30.8x 22.3×1.4cm | Peso: 1.25kg | OS: Windows 10

Gran diseño
Potente
Un único y miserable puerto USB 3
El lápiz táctil se vende por separado

Como viene Microsoft, el Surface Laptop 2

Ofrece efectivamente una experiencia pura de Windows 10, lo que lo convierte en un punto de referencia para probar y desarrollar software de Windows. Tiene un gran diseño, una sólida carcasa de aluminio y un teclado muy cómodo. La nueva versión viene en negro mate y ofrece especificaciones bastante robustas, con un Core i7, hasta 16 GB de memoria, 1 TB de almacenamiento SSD y una pantalla de 13,5 pulgadas de alta resolución que funciona con el lápiz táctil Surface Pen de Microsoft.

Vista en España  comprar en amazon Microsoft Surface 2
Vista en EEUU  comprar en amazon Microsoft Surface 2

Apple MacBook Pro 13

05. MacBook Pro de 13 pulgadas

El magnífico y polifacético portátil Mac

CPU: 2-4 núcleos | Gráficos: Intel Iris Plus 640-655 | RAM: 8-16GB | Almacenamiento: 128GB-2TB | Tamaño: 30.4cm x 21.2cm x 1.5cm | Peso: 1.37kg | OS: MacOS

Los Mac son la única opción para el desarrollo de iOS
Portátil pero potente
El Touch Bar puede ser de uso limitado
La opción de cuatro núcleos aumenta significativamente el precio

El MacBook Pro de 13 pulgadas

Mientras que el MacBook de Apple y el recién actualizado MacBook Air son los portátiles Apple más portátiles de la gama, con su reciente actualización, el MacBook Pro de 13 pulgadas. es ahora nuestra primera opción para trabajar con Xcode en el desarrollo de aplicaciones para iOS y MacOS.

Las CPUs Intel de cuatro núcleos y ocho generaciones son ahora una opción que ofrece mejoras en el rendimiento general, lo que hace que este MacBook sea portátil y potente. Aunque puede pesar un poco más que los modelos de MacBook mencionados anteriormente, el aumento de rendimiento valdrá la pena a la hora de realizar tareas de procesamiento exigentes, como los proyectos de codificación para trabajos pesados.

Y como los Macs pueden ejecutar Windows a través de bootcamp o en una máquina virtual como Parallels, podrás usar tu Mac para desarrollar aplicaciones para cualquier plataforma del mundo.

Vista en España  comprar en amazon MacBook Pro de 13 pulgadas
Vista en EEUU  comprar en amazon MacBook Pro de 13 pulgadas

Asus Zenbook UX-430

06. Asus Zenbook UX-430

Portátil y asequible, el Zenbook es un gran ordenador portátil para la programación

CPU: Intel Core i3-i7 a 2,4-2,7 GHz | Gráficos: Nvidia GeForce 940MX | RAM: 4-16GB | Almacenamiento: 128-512GB | Tamaño: 32.4×22.5×1.59cm | Peso: 1.25kg | OS: Windows 10 Home Pro

Ligero y delgado
Disponible en cuatro colores
Sin opción de cuatro núcleos
Geforce 940MX es ligeramente limitada

Alternativa a los portátiles para programación grandes

A pesar de los estereotipos anticuados de programadores atrapados en dormitorios y oficinas, muchos programadores ven la profesión como altamente sociable – ya sea trabajando juntos en proyectos de grupo, o asistiendo a uno de los numerosos talleres y conferencias que existen en todo el país.

En ese caso, es posible que prefieras una alternativa a los portátiles más grandes que te he sugerido y, en su lugar, pon la portabilidad en la parte superior de tu lista de deseos. El Asus Zenbook UX-430 de 14 pulgadas
es una opción ultraportátil – pesa sólo 1,25 kg y mide 15,9 mm – sin un precio muy elevado. Sin embargo, aunque el Zenbook es delgado y tiene un buen precio, tiene una especificación que sigue siendo excelente para el trabajo de codificación.

Vista en España  comprar en amazon Asus Zenbook UX-430
Vista en EEUU  comprar en amazon Asus Zenbook UX-430

HP Envy 13

07. HP Envy 13

Un portátil totalmente metálico de primera calidad para trabajos de codificación

CPU: Intel Core i7-8565U (quad core, 4.6GHz Max Turbo Boost) | Gráficos: Gráficos Intel UHD 620 | RAM: 16 GB | Almacenamiento: 512GB SSD | Tamaño: 38.1×21.1×1.7cm | Peso: 1.34kg | OS: Página principal de Windows 10

Diseño totalmente metálico de alta calidad
Muchos caballos de potencia
Opciones de almacenamiento limitadas en comparación con algunos competidores

La última HP Envy 13 (2018)

Es una gran elección para los programadores. HP hizo grandes cambios en su popular portátil Envy de 13 pulgadas con el último rediseño, añadiendo un procesador Intel Core i7 de octava generación, aumentando la memoria y reduciendo el tamaño y el peso. Junto con su pantalla táctil de 1080p de alta calidad, ahora es a la vez potente y súper portátil. Pero quizás el cambio más notable es el impresionante diseño totalmente metálico, que cubre incluso las teclas y alrededor del área de la pantalla, lo que le da a este portátil el sobrenombre de «Envidia».

El teclado tiene mucho recorrido, con teclas de subida y bajada de página, y el trackpad es lo suficientemente grande como para ser extremadamente cómodo, dos aspectos críticos de un portátil a tener en cuenta para largas sesiones de codificación.

Vista en España  comprar en amazon HP Envy 13
Vista en EEUU  comprar en amazon HP Envy 13

 

HP Spectre Folio

8. HP Spectre

Un 2 en 1 de gama alta que es ideal comoportátiles para programación.

CPU: Intel Core i5-8200Y – Intel Core i7-8500Y | Gráficos: Gráficos Intel UHD 615 | RAM: 8-16GB | Almacenamiento: 256GB SSD | Tamaño: 15.4x23x3.2cm | Peso: 1.49kg | OS: Windows 10 Home 64

Hermoso acabado de cuero
Diseño 2 en 1
Caro para portátiles para programación

El Folio HP Spectre de 13,4 pulgadas (portátiles para programación)

El Folio HP Spectre de 13,4 pulgadas es un gran dispositivo 2 en 1 para programadores. Por lo general, elegimos portátiles para programación en lugar de una tableta para la codificación pura, pero un 2 en 1 es un buen sustituto, ya que le ofrece un entorno en el que también puede probar aplicaciones para tablet.

Este ejemplo de gama alta rezuma calidad gracias a su preciosa funda de cuero, que le ha valido el nombre de Folio. También hay una gran especificación interna: con hasta 16 GB de memoria y un procesador Core i7, no va a defraudar en cuanto al rendimiento, pero puede dejar un hueco en tu cartera.

Vista en España  comprar en amazon HP Spectre
Vista en EEUU  comprar en amazon HP Spectre

Y una recomendación para terminar

Si te ha gustado este artículo y has decidido comprar alguno de los portátiles de arriba, te recomiendo acceder a mi artículo Fundamentos del JavaScript y aprende a programar con tu nuevo equipo!

Fundamentos de JavaScript: Sintaxis y estructura

Fundamentos de JavaScript: Sintaxis y estructura

 

Fundamentos de JavaScript: Sintaxis y estructura. Como con cualquier otro lenguaje, los lenguajes de programación se definen por conjuntos de reglas. Las reglas (o sintaxis) son las que seguimos cuando escribimos nuestro código, que forman la estructura lógica de nuestros programas.

Este artículo marca el comienzo de una serie que voy a escribir sobre el aprendizaje de los fundamentos de JavaScript. Asegúrate de seguirme si quieres seguir la pista!

Vamos a sumergirnos en los bloques de construcción de JavaScript. Estaremos buscando valores (literales y variables), camel casing, unicode, semicolores, sangría, espaciado blanco, comentarios, sensibilidad a las mayúsculas y minúsculas, palabras clave, operadores y expresiones! 😅

Al tomarnos el tiempo para aprender los fundamentos, estaremos en camino hacia la construcción de un código más funcional y legible!

Comencemos con los fundamentos de JavaScript: Sintaxis y estructura.

Valores de JavaScript

En JavaScript hay dos tipos de valores: Valores fijos (o literales) y Valores variables (variables).

Literales

Los literales se definen como valores que están escritos en nuestro código, como números, cadenas, booleanos (verdadero o falso), así como objetos y matrices (no se preocupe demasiado por ellos todavía). Algunos ejemplos incluyen:

10          // A number (can be a decimal eg. 10.5)
'Boat'      // A string (can be in double "" or single '' quotes)
true        // A boolean (true or false)
['a', 'b']                           // An array
{color: 'blue', shape: 'Circle'}     // An object

Nota: Estaré mirando los tipos de datos en detalle en mi próximo artículo, ¡manténte en sintonía!

Variables

Las variables se denominan valores que almacenan datos. En JavaScript declaramos nuestras variables con las palabras clave var, let o const, y asignamos valores con el signo igual =.

Por ejemplo, la clave se define como una variable. Al que se le asigna el valor abc123:

let key;
key = abc123;

¿Cuándo usar var? No lo hagas. En realidad, sólo debería utilizarse cuando se trabaja con código heredado. Es la antigua sintaxis pre-ES6.

¿Cuándo usar let? Utilízalo si tu variable necesita ser actualizada dentro del programa (puede ser reasignada).

¿Cuándo usar const? Úsalo si tu variable tiene un valor constante. Debe asignarse en el momento de la declaración y no puede reasignarse.

Camel Case

¿Qué pasa si nuestro nombre de variable consiste en más de una palabra? Por ejemplo, ¿cómo declararíamos una variable que deseamos llamar «first name»?

¿Podríamos usar guiones? Ejemplo first-name, No, están reservados para las sustracciones en JavaScript.

¿Qué hay de los subrayados? Ejemplo first-name, Podríamos, pero tiene una tendencia a hacer que nuestro código parezca desordenado y confuso.

¿La solución? Camel Case!Ejemplo firstName. La primera palabra es minúscula, la primera letra de cualquier palabra subsiguiente es mayúscula. Esta es la convención dentro de la comunidad.

Nota: Sin embargo, es bastante aceptable nombrar tus variables const en mayúsculas con guiones bajos, por ejemplo, const DEFAULT_PLAYBACK_SPEED = 1; esto dejaría claro a los demás que el valor es fijo. De lo contrario, sólo tienes que seguir con camelCase!

Unicode

JavaScript utiliza el juego de caracteres unicode. Unicode cubre casi todos los caracteres, puntuaciones y símbolos que hay! Comprueba la referencia completa. Esto es genial, ya que podemos escribir nuestros nombres en cualquier idioma, e incluso podríamos usar emojis como nombres de variables (¿por qué no? 🤷🏻).

Semicolores

Los programas JavaScript se componen de una serie de instrucciones conocidas como sentencias. Como por ejemplo:

// These are all examples of JavaScript statements:
let a = 1000;
a = b + c;
const time = Date.now();

Las sentencias JavaScript a menudo terminan en punto y coma.

Sin embargo, los puntos y coma no siempre son obligatorios. JavaScript no tiene ningún problema si no los utiliza.

// Still perfectly valid!
let a = 1000
a = b + c
const time = Date.now()

Sin embargo, hay algunas situaciones en las que son obligatorias. Por ejemplo, cuando usamos un bucle para un bucle, así:

for (i = 0; i < .length; i++) { 
  // code to execute
}

Sin embargo, cuando se utiliza una expresión en bloque, no se deben incluir los puntos y comas después de los refuerzos rizados, por ejemplo:

if (name == "Samantha") {
  // code
}                           // <- no ';'
//o,
function people(name) {
  // code
}                           // <- no ';'

Sin embargo, si estamos usando un objeto, como:

const person = {
  firstName: "Samantha",
  lastName: "Doe",
  age: 30,
  eyeColor: "blue"
};                          // el ';' es obligatorio

Entonces se requieren nuestros ;’s

Con el tiempo comenzarás a memorizar dónde pueden y dónde no pueden usarse los puntos y coma. Hasta entonces, es aconsejable usarlas al final de todas las frases (¡con la excepción de las frases en bloque!).

Además, es una convención común utilizarlos de todas formas, se considera una buena práctica, ya que reduce la probabilidad de errores.

Nota: Una vez que realmente empieces a usar JavaScript, empieza a usar un linter como ESLint. Automáticamente encontrará errores de sintaxis en tu código y te hará la vida mucho más fácil!

Hendiduras

En teoría podríamos escribir todo un programa JavaScript en una sola línea. Sin embargo, esto sería casi imposible de leer y mantener. Es por eso que usamos líneas y sangrados. Usemos una sentencia condicional como ejemplo:

if (loginSuccessful === 1) {
  // code to run if true
} else {
  // code to run if false
}

Aquí podemos ver que cualquier código dentro de un bloque está sangrado. En este caso es nuestro código de comentario // código para ejecutar si es verdadero y luego // código para ejecutar si es falso. Puede elegir entre sangrar las líneas con unos pocos espacios (2 o 4 son comunes) o con una pestaña. Es totalmente su elección, lo principal es ser consistente!

Si estamos anidando nuestro código, lo sangraríamos así:

if (loginAttempts < 5){
  if (loginAttempts < 3){
    alert("< 3");
  } else {
    alert("between 3 and 5");
  }
} else {
  if (loginAttempts > 10){
    alert("> 10");
  } else {
    alert("between 5 and 10");
  }
}

Aplicando la sangría tendrás un código mucho más limpio, más fácil de mantener y más fácil de leer!

Espacio en blanco

JavaScript sólo requiere un espacio entre palabras clave, nombres e identificadores, de lo contrario cualquier espacio en blanco es completamente ignorado. Esto significa que en lo que se refiere a la lengua, no hay diferencia entre las siguientes afirmaciones:

const visitedCities="Melbourne, "+"Montreal, "+"Marrakech";
const visitedCities = "Melbourne, " + "Montreal, " + "Marrakech";

Estoy seguro de que encontrarás la segunda línea mucho más legible. Y otro ejemplo:

let x=1*y;       
let x = 1 * y;

Una vez más, la segunda línea es mucho más fácil de leer y depurar! Así que siéntete libre de espaciar tu código de una manera que tenga sentido! Por esta razón, también es un uso aceptable del espacio en blanco:

const cityName         = "Melbourne";
const cityPopulation   = 5000001;
const cityAirport      = "MEL";

Comentando

Un comentario es un código no ejecutable. Son útiles para proporcionar una explicación de algún código dentro de un programa. Y también para ‘comentar’ una sección de código para prevenir la ejecución – a menudo usada cuando se prueba una pieza de código alternativa.

Hay dos tipos de comentarios en JavaScript:

// Comment goes here
/* Comment goes here */

La primera sintaxis es un comentario de una sola línea. El comentario va a la derecha del //

El segundo es un comentario de varias líneas. El comentario va entre los asteriscos /* aquí *//

Un comentario multilínea más largo:

/* This is 
a comment spanning
multiple lines */

Identificadores

En JavaScript, el nombre de una variable, función o propiedad se conoce como identificador. Los identificadores pueden consistir en letras, números, $ y _. No se permiten otros símbolos y no pueden comenzar con un número.

// Valid :)
Name
name
NAME
_name
Name1
$name
// Invalid :(
1name
n@me
name!

Sensibilidad a las mayúsculas y minúsculas

JavaScript distingue entre mayúsculas y minúsculas! Un identificador llamado test es diferente de Test.

El siguiente paso arrojará un error:

function test() {
  alert("This is a test!");
}
function showAlert() {
  Test();                     // error! test(); is correct
}

Para asegurarnos de que nuestro código es legible, lo mejor es intentar variar nuestros nombres, para que no se encuentren identificadores demasiado similares.

Palabras reservadas

Hay un número de palabras dentro de JavaScript que no pueden ser usadas como identificadores. Esas palabras están reservadas por el idioma, ya que tienen funcionalidad incorporada. Como por ejemplo:

break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum, extends, super, const, export, import.

No necesitas memorizar estas palabras! Si obtienes algún error sintáctico extraño que apunte a una variable, puedes comprobar la lista y cambiar el nombre.

Operadores JavaScript

Los operadores aritméticos + - * y/  se utilizan principalmente cuando se realizan cálculos dentro de JavaScript, como por ejemplo:

(2 + 2) * 100

El operador de asignación = se utiliza para asignar valores a nuestras variables:

let a, b, c;
a = 1;
b = 2;
c = 3;

Expresiones JavaScript

Una expresión es cuando combinamos valores, variables y operadores para calcular un nuevo valor (conocido como evaluación). Como por ejemplo:

10 * 10    // Evalúa a 100
let x = 5
x * 10     // Evalúa a 50
const firstName = "Javi";
const lastName = "Niguez";
firstName + " " + lastName;    //Evalúa a: Javi Niguez

Conclusión sobre fundamentos de JavaScript: Sintaxis y estructura

Y ahí vamos! El objetivo de este artículo (Fundamentos de JavaScript: Sintaxis y estructura) es proporcionar una visión general de la sintaxis y estructura básicas de JavaScript. Hemos analizado muchas de las convenciones comunes, sin embargo, recuerda que puede ser algo flexible, especialmente cuando se trabaja en entornos de colaboración con sus propios estándares particulares.

La sintaxis y la estructuración juegan un papel importante tanto en la funcionalidad de nuestros programas como en la legibilidad y mantenibilidad del código.

Espero que este artículo le haya sido útil! Nos vemos en el próximo artículo y recuerda dejar cualquier pregunta en los comentarios de abajo. Estaré encantado de ayudar!

Cómo crear un entorno de desarrollo localhost

entorno de desarrollo local

 

Cómo crear un entorno de desarrollo localhost. Aprende a construir sitios web en tu propio ordenador sin tener que acceder al sitio en vivo.

Un entorno de desarrollo local te permite utilizar tu propia máquina para ejecutar tu sitio web, en lugar de utilizar una proporcionada por una empresa de alojamiento web. Puedes personalizar la configuración sin preocuparse de que afecte a tu sitio en directo, así como realizar y probar el desarrollo del sitio antes de cargarlo. Eliminar el riesgo al construir algo hace que el proceso de desarrollo sea mucho menos estresante.

Otra ventaja de trabajar localmente es que no es necesario estar conectado a Internet. Si tienes un wifi lento, te gusta trabajar en el jardín o estás de viaje, no hay necesidad de buscar una señal wifi todo el tiempo.

El tiempo que se pasa en FTP preparando una pagina web y esperando a que el sitio se actualice realmente se acumula a lo largo de un día de desarrollo. Un entorno local te permitirá centrarte en el código y en las partes divertidas de la construcción de sitios web.

Este tutorial asume que estás en un Mac, y el tutorial para empezar con Valet se enfoca en esto. Para una alternativa de PC, pruebe Homestead.

Un conocimiento básico de Terminal es bueno, aunque debería ser capaz de seguirlo, ya que los comandos son bastante simples. Se trata principalmente de conseguir que se instalen y se pongan en marcha los componentes necesarios.

Comenzar entorno de desarrollo localhost

Después de completar este tutorial, habrás configurado PHP, Homebrew y Composer en tu máquina, instalado Valet y aprendido a configurar sitios locales en entorno de desarrollo localhost.

01. Instalar Homebrew

El primer paso aquí es instalar Homebrew. Escriba el siguiente comando en su Terminal.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

02. Instalar PHP

02. Instalar PHP

A continuación necesitamos instalar/actualizar a PHP7, así que comprueba usando php -v. Si necesitas instalar, puede escribir:

brew install homebrew/php/php70

Si reinicias tu ventana Terminal y escribes php -v de nuevo, debería mostrar v7 instalado.

03. Instalar Composer

Necesitarás descargar Composer, y luego ponerlo en un directorio que sea parte de su PATH.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

04. Muévete a tu PATH (Ruta de acceso)

Ahora mueve Composer a un directorio dentro de tu ruta. Una vez hecho esto, puedes comprobar tu acceso a él escribiendo composer-v.

mv composer.phar /usr/local/bin/composer

05. Comprueba tu PATH (ruta de acceso)

Si escribes echo $PATH, verás lo que contiene. Si no lo hace, escribe lo siguiente para agregarlo.

export PATH=$PATH:~/.composer/vendor/bin

06. Requiere Valet globalmente

Ahora que tenemos las piezas instaladas, podemos continuar con la instalación de Valet. Primero, vamos a verificar que nada esté usando el puerto 80. Escribe lo siguiente, y si no devuelve nada, estamos listos para empezar.

netstat -an | grep "\.80" | grep LISTEN

07. Instalación de Valet

Usamos Composer para instalar el paquete Valet por nosotros, y luego podemos ejecutar la instalación de valet.

Composerglobal require laravel/valet
valet install

08. Directorios Park/unpark

Crea un directorio para tus sitios de desarrollo y díle a Valet que los sirva. Ten en cuenta que las carpetas dentro de este pueden ser accedidas como subdominios.

# move to your projects directory
cd ~/projects/valet/
valet park

09. Olvídate de los directorios

De la misma manera que para estacionar, si ya no deseas que una carpeta sirva a través de Valet, simplemente usa el comando olvidar desde dentro del directorio.

with spaces //
valet forget

10. Enlace/desenlace de directorios

También puedes enlazar a directorios. Esto te permite elegir el nombre que utiliza.

cd ~/projects/valet/subproject/
# link the subproject directory to make it accessible at HYPERLINK "http://subproject.dev" \hhttp://subproject.dev
valet link subproject

11. Comparte tu sitio con el mundo

Puedes compartir tu url de desarrollo local con el mundo exterior. En el directorio de tu proyecto, escriba valet share y se creará una URL que podrás utilizar.

12. Uso de una base de datos

Necesitarás instalar la base de datos de tu elección – para WordPress, podemos seguir adelante e instalar MySQL.

brew install mysql

13. Elija una herramienta de base de datos

Con una base de datos configurada, una herramienta para importar y exportar datos es útil, ya que no tenemos phpMyAdmin o similar con Valet.

14. Descargar Sequel Pro

Descargar Sequel Pro

Estamos utilizando Sequel Pro, ya que ofrece una interfaz sencilla. Puedes descargarlo aquí.

15. Conectar la base de datos

Utilizando la configuración predeterminada de MySQL, agrega los siguientes detalles y prueba tu conexión.

Host: 127.0.0.1
Username: root
Password: (leave blank)

16. Configurar un sitio de WordPress

16. Configurar un sitio de WordPress

Con todo en su lugar, configura un sitio de WordPress. Cree una nueva carpeta dentro de su directorio de Valet e instale WordPress Core.

17. Añadir una base de datos

17. Añadir una base de datos en entorno de desarrollo localhost

En Sequel Pro, crea una nueva base de datos con el mismo nombre que la carpeta que creó. Actualiza el archivo wp-config para adaptarlo.

18. Prueba que todo funciona

Pruebe que todo funciona en el entorno de desarrollo localhost

Ahora, si abres tu navegador y navegas a (tu-carpeta).test deberías ver la pantalla de instalación de WordPress. Sigue a partir de aquí como de costumbre.

19. Llegar más lejos

Valet no es sólo para ejecutar instalaciones de WordPress, sino que fue creado originalmente para el desarrollo de Laravel. Ya sea que estés construyendo algo a medida en PHP o usando un framework, puedes crear fácilmente un nuevo sitio creando un nuevo directorio para él en tu carpeta raíz.

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)