Mobile First: la importancia de implementarlo en tu diseño web

               

Los celulares son los dispositivos que utiliza la mayoría de los usuarios hoy en día para navegar por internet, hacer sus compras online o gestionar sus redes sociales y correo electrónico. Que una web se adapte a las características especiales de este tipo de dispositivos es indispensable para ofrecer la mejor experiencia de usuario, conseguir un mejor posicionamiento web e incrementar las conversiones (ventas o suscripciones).

El concepto Mobile First es la última tendencia en el desarrollo web, donde todo el proceso de diseño y creación de un sitio web se realiza directamente en celulares, dejando los equipos de sobremesa en un segundo plano.

Qué es el Mobile First y su relevancia

El mobile first es un nuevo concepto del diseño y desarrollo web por el cual se centra toda la atención en desarrollar la web para dispositivos móviles, optimizándola para que se adapte a las características especiales de estos dispositivos. Posteriormente, la web se ajustará para computadoras y otros dispositivos.

El significado de mobile first es móvil primero, haciendo referencia a la prioridad en el diseño web a los celulares.

Hasta ahora, el desarrollo web se centraba en equipos de escritorio, y poco a poco, con el auge de los smartphones y otros dispositivos móviles se fue apostando por el diseño responsive, donde se diseña para computadoras y luego se adapta a celulares. El mobile first va un paso más allá buscando actualizar el diseño web a las necesidades y demandas del mercado actual, desarrollando primero para móviles y luego adaptando equipos de sobremesa.

Características del diseño Mobile First

El diseño para móviles es una metodología que cuenta con algunas características propias que la definen:

  • Simplicidad. Se eliminan todos los elementos que no son necesarios ni aportan valor a la web para ofrecer una mejor experiencia de usuario.
  • Tiempo de carga. Se prioriza el tiempo de carga de la web para que muestre su contenido y funcionalidades de forma inmediata.
  • Usabilidad. Los distintos elementos que favorecen la navegación se optimizan para facilitar el uso por parte de los usuarios (menús, enlaces, botones…).
  • Reducción del código. Se minimiza el código buscando la simplicidad y la sencillez del desarrollo (acelera los tiempos de desarrollo).
  • Optimización de imágenes. No se utilizan imágenes con grandes resoluciones o con un gran tamaño.
  • Resolución web móvil. La resolución se adapta a las características especiales de la pantalla de estos dispositivos (menor tamaño y orientación vertical).

Ventajas del Mobile First para tu diseño web

El movimiento mobile first supone un cambio en el enfoque del diseño y desarrollo web. Esta nueva tendencia está alineada con las nuevas necesidades de programación, donde los celulares son los dispositivos principales de una gran mayoría de usuarios para acceder a internet.

Los beneficios que ofrece este tipo de diseño web son:

Experiencia de usuario

El diseño web Mobile First persigue ofrecer la mejor experiencia de usuario en smartphones, tablets y otros dispositivos móviles (aunque principalmente en celulares). Al convertirse estos dispositivos en los de mayor uso para realizar todo tipo de tareas en internet, se persigue que las páginas web, eCommerce y blogs funcionen de forma perfecta y con un gran rendimiento en celulares.

Escalabilidad y flexibilidad

El diseño y desarrollo mobile first simplifica mucho el proceso y la codificación necesaria, haciendo mucho más sencillo añadir nuevas funcionalidades o contenidos a la web. Cada vez que se quiera añadir una nueva opción o utilidad al sitio, será mucho más rápido y sencillo de implementar al no tener que hacer frente a un complejo diseño previo, habitual en las web tradicionales de escritorio.

Además, el diseño limitado a resoluciones pequeñas es más sencillo de llevar a resoluciones mayores, pudiendo conseguir resultados realmente espectaculares (algo muy difícil de lograr en el caso contrario, responsive design).

Favorece la creatividad

Tener que trabajar en un espacio más reducido para ofrecer una buena experiencia de usuario hace necesario utilizar la creatividad e innovar buscando nuevos diseños y opciones.

Al disponer de ciertas restricciones la creatividad se fomenta y se encuentran soluciones realmente eficientes, dando prioridad a todo aquello que realmente tiene valor.

Mejorar el posicionamiento web

Google premia con mejores posiciones en sus páginas de resultados aquellos sitios que se adaptan a los dispositivos móviles, presentan un gran rendimiento, y en definitiva, ofrecen la mejor experiencia de usuario en dispositivos móviles.

Apostar por mobile first para desarrollar un proyecto web es una gran decisión para facilitar el posicionamiento web y conseguir una gran visibilidad del sitio.

 

El concepto de móvil primero o first mobile phone es cada vez más utilizado por profesionales y agencias de diseño web pues utiliza un enfoque que se adapta más a la situación actual del mercado.

Si vas a comenzar un proyecto web, la mejor decisión es abordarlo con diseño mobile first y posteriormente realizar los cambios e implementar las funciones propias para dispositivos de escritorio. De esta manera se ofrecerá una web totalmente adaptada a los celulares en la que los usuarios disfrutarán de una experiencia satisfactoria.

Ir a Blog

Cuáles son los diferentes tipos de archivos de imagen

               

Las fotografías e imágenes son elementos fundamentales para una página web o tienda online, ya que facilitan la comprensión del contenido al usuario y hacen más agradable la navegación web.

Desde el comienzo de la www las páginas web utilizan distintos tipos de archivos de imagen, como JPG o GIF. Con el paso del tiempo han aparecido nuevos formatos para adaptar el uso de imágenes a las necesidades actuales de la web, como son el caso de los archivos PNG o el nuevo formato de Google para imágenes WebP.

Tipos de archivos de imagen

Vemos los diferentes tipos de archivos de imágenes que más se utilizan en internet.

Formato JPG

Estos archivos de imagen son los más populares en internet debido al alto índice de compresión que presentan sin una gran pérdida de calidad. La mayoría de fotografías que podemos encontrar en la red se encuentran en este formato debido a que pueden mostrar imágenes con una gran resolución y calidad, sin que afecte de forma negativa a la velocidad de carga.

Un punto muy interesante del JPG es que admite diferentes tipos de compresión para poder optimizar el tamaño de las imágenes.

Como puntos débiles de este formato es la carencia de un canal alfa para implementar transparencias, o la imposibilidad de ofrecer imágenes animadas.

Formato GIF

Aunque cada vez se utiliza menos, el GIF es un formato de imagen muy interesante al disponer de transparencia y posibilidad de animación, a lo que se une un buen nivel de compresión que permite utilizar imágenes que no tengan un gran peso.

El punto débil del GIF se encuentra en su limitación de colores, que solo permite el uso de 256, algo que no encaja con las necesidades de la web actual (solo es interesante para infografías, imágenes animadas o iconos).

Formato PNG

El PNG es un formato que se utiliza mucho en internet debido a sus características que aúnan lo mejor de otros formatos como GIF y JPG. Un PNG permite presentar imágenes con una gran calidad y un alto grado de compresión, sin tener que renunciar a la posibilidad de utilizar transparencias (algo fundamental para una página web o eCommerce).

Formato TIFF

Es el formato ideal para mostrar imágenes con un alto nivel de calidad. El problema de los archivos TIFF radica en el gran peso o tamaño de las imágenes, por lo que su uso se restringe a necesidades concretas donde la calidad de imagen es lo más importante.

Formato WEbP

Se trata de un nuevo formato de imagen desarrollado por Google que viene a cumplir con las necesidades actuales de las imágenes para sitios web. Este formato presenta imágenes muy livianas, con capacidad de transparencia y animación, y con un nivel de calidad bastante alto. Por contra, aún no es 100 % compatible con otros navegadores que no sean Google Chrome, aunque las expectativas es que lleguen a funcionar en cualquiera en poco tiempo.

Entre los nuevos tipos de formatos de imágenes, este es uno de los más interesantes, sobre todo, al tener a un gigante como Google detrás de su desarrollo.

Qué formato de imagen elegir según las necesidades

En un sitio web debes conocer el formato de imagen ideal según sus necesidades, para de esta forma ofrecer la mejor experiencia de usuario.

Aunque se esté utilizando un formato de imagen inapropiado en una entrada de la web o en un artículo de la tienda online, siempre se puede modificar, ya que es sencillo cambiar el tipo de archivo de imagen utilizando un programa de edición gráfica o una herramienta online específica.

Veamos cómo utilizar imágenes en el formato correcto en algunas situaciones concretas.

Tienda online

En una tienda online son necesarias dos características principales para sus imágenes: que no ralentice el tiempo de carga y que muestren un alto nivel de calidad para ayudar a que los usuarios tomen su decisión de compra.

El formato PNG suele ser elegido por los eCommerce para mostrar su contenido debido a que cumple con los dos requisitos anteriores.

Entradas de un blog

Los formatos JPG y PNG son los ideales para mostrar imágenes en el contenido de un blog. Estos formatos ofrecen un alto grado de compresión para mostrar imágenes que no ralentice la carga de la web.

Dependiendo de si se prioriza calidad o tamaño de imagen, se debe decidir cuál de los dos formatos utilizar en los post.

Portales específicos

Muchas webs ofrecen imágenes de alto nivel de calidad debido a la naturaleza de su negocio. En estos casos, se sacrifica la velocidad de carga para ofrecer imágenes de alta resolución y calidad, utilizando para ello el formato TIFF.

Iconos e infografías

Cuando se añaden este tipo de imágenes al contenido de una web es recomendable utilizar formatos de imágenes ligeros como PNG o incluso GIF. El formato GIF ofrece imágenes realmente pequeñas debido al uso de solo 256 colores, por lo que es el recomendado para que pequeños elementos donde la calidad no es lo más importante, se muestren de forma correcta y tengan el mínimo impacto en la velocidad de carga.

 

Hemos visto cuáles son los formatos de imagen más utilizados y cuál elegir en distintos proyectos web. Las imágenes que utiliza una web son una herramienta clave para la experiencia de usuario y las conversiones, por lo que utilizarlas con el formato adecuado debe ser una prioridad para tu sitio.

Ir a Blog

Cómo agregar un formulario de contacto en WordPress

               

Uno de los elementos básicos que todo sitio web incorpora y que los propios usuarios esperan encontrar, es el formulario de contacto. A través de esta función, los usuarios pueden expresar dudas, solicitar información o ponerse en contacto directo con la web, utilizando para ello un sistema muy sencillo y rápido.

Crear un formulario en HTML y JavaScript es un proceso sencillo, pero que requiere tener un buen nivel en programación web. Sin embargo, con WordPress todo es mucho más sencillo gracias a la existencia de múltiples plugins específicos para crear formularios.

A continuación, te mostramos cómo agregar un formulario de contacto en WordPress de forma rápida y sencilla, sin tener que poseer conocimientos en programación web.

Ventajas de incluir formularios de contacto en tu web

Es habitual que los usuarios busquen en una página web, blog o eCommerce el formulario de contacto cuando quieren plantear alguna duda, problema, o simplemente ponerse en contacto con un sitio web.

Los beneficios más interesantes de contar con un formulario de contacto son:

Facilita la interacción del usuario

Los usuarios disponen de una función que ya conocen para ponerse en contacto con la web. El uso de formularios existe desde el comienzo de internet por lo que los usuarios están acostumbrados a su funcionamiento, y no tienen dificultades a la hora de rellenar los distintos campos y pulsar en el botón de envío (aceptando previamente la política de privacidad correspondiente).

No disponer de un formulario de contacto es dificultar a los usuarios su interacción con la web o empresa.

Es sencillo de implementar

Poner un formulario de contacto es técnicamente muy sencillo con HTML y no es necesario ser un programador avanzado para ello. Si se utiliza WordPress, el proceso es aún más fácil, ya que solo es necesario instalar un plugin específico y configurar los campos que se quieren añadir al formulario.

Tiene un bajo coste

Añadir la funcionalidad de formulario de contacto no tiene coste si se utilizan plugins gratuitos o se realiza manualmente con HTML. Es una función básica que se añade a la web o tienda virtual sin un coste extra que añadir.

Permite conocer mejor a los usuarios

El formulario de contacto web es una buena forma de captar contactos o leads para poder utilizar sus datos en futuras estrategias de marketing digital.

También es una gran fuente de información que permite analizar y comprender cuáles son las necesidades y demandas de los usuarios de la web, para así ofrecerles los productos y servicios que realmente necesitan.

Cómo puedes crear un formulario de contacto en WordPress

Para crear un formulario de contacto en WordPress sin plugin es necesario añadir una nueva página e introducir el código HTML correspondiente, primero, para crear cada uno de las etiquetas y campos, y segundo, para incluir el botón de envío hacia el correo electrónico asignado (también hay que implementar una casilla de verificación para el consentimiento explícito de la política de privacidad y un enlace hacia la misma).

Este proceso manual en HTML, ayudado de CSS para dar un mejor estilo al formulario, puede resultar bastante complejo para muchos usuarios, por lo que es mejor que utilicen un plugin específico para formulario de contacto o formulario de pedido.

Formulario de contacto utilizando un plugin

Para implementar un formulario en WordPress lo habitual es utilizar un complemento que se encargue de la parte técnica y de código, y que permita crear los campos y etiquetas mediante un sistema visual muy sencillo.

Entre los plugins de formulario de contacto para WordPress más utilizados tenemos:

  • Contact Form 7. Se trata sin duda el plugin para crear formularios más utilizado en WordPress debido a diferentes motivos. Es un complemento gratuito que se puede utilizar sin coste en proyectos profesionales, es muy sencillo de utilizar sin necesidad de tener conocimientos de HTML, y es altamente personalizable por lo que se puede crear el formulario de contacto o para otro objetivo (por ejemplo, captación de leads) con los campos y diseño que se deseen.
  • WPForms. Otro complemento bastante popular a la hora de crear todo tipo de formularios en WordPress. Este plugin cuenta con varias plantillas prediseñadas que aceleran el proceso de crear un formulario, haciendo que sea mucho más sencillo integrarlo en la web.
  • Formidable Forms. Este complemento es el ideal para los que busquen una solución para la creación de formularios de contacto profesionales en WordPress. Una de sus principales ventajas es que ha sido diseñado para crear formularios adaptados a los dispositivos móviles, además de muchas otras funciones avanzadas.

 

En WordPress, el formulario envía la información a la base de datos o a un correo electrónico, donde es almacenada para poder gestionar posteriormente toda esa información.

Implementar un formulario de contacto personalizado debe ser una prioridad en tu sitio web para ofrecer la manera habitual por la que los usuarios se ponen en contacto e interaccionan con la misma.

Ir a Blog

Efecto Parallax: cómo se consigue

               

Llamar la atención de los usuarios que visitan una web desde el primer momento ofrece muchas ventajas para el sitio. Los usuarios que queden impactados tras ingresar en una web verán incrementada su curiosidad e interés por su contenido, y percibirán una gran imagen de la web, asociada a la profesionalidad y la innovación.

El efecto Parallax es sencillo de implementar en un sitio web, consiguiendo que cualquier usuario quede sorprendido al acceder al sitio y ver como se mueve el fondo en distintas capas consiguiendo una sensación de profundidad que no se esperaban.

Qué es el efecto Parallax

El parallax es un efecto scroll con imagen de fondo que se utiliza en el diseño web para llamar la atención de los usuarios de forma impactante. Cuando los usuarios acceden a una web con scroll vertical que utiliza el efecto parallax, experimentan una ilusión en 3D cuando se realiza el movimiento, ayudando a que se sumergen en el contenido y disfruten de una gran experiencia de usuario.

El efecto parallax consigue crear la ilusión de que existen uno o varios fondos en movimiento y figuras en primer plano, engañando al cerebro para que piense que se encuentra ante una escena en 3D.

Este efecto era muy utilizado en la industria de los videojuegos en la época donde aún no había entrado el diseño 3D en este mundo, creando sensaciones muy realistas y espectaculares.

Qué ventajas tiene utilizar el efecto parallax en el diseño web

Implementar este efecto en una página web tiene una serie de beneficios muy interesantes para un sitio web, entre los que podemos destacar:

  • Atrae la atención del usuario. Dentro de los efectos en páginas web, el parallax es uno de los que mayor impacto crea en los usuarios. Cuando un visitante accede a una web con este efecto no permanecerá indiferente, y quedará marcado el sitio en su recuerdo gracias a este impactante efecto que simula un movimiento en tres dimensiones.
  • Incrementa el tiempo de permanencia. El efecto parallax consigue que los usuarios permanezcan más tiempo en el sitio, debido a la atracción que supone dicho efecto.
  • Reduce la tasa de rebote. Los usuarios no abandonan una web sin ver su contenido cuando se encuentran con este efecto. El propio parallax es el causante de retener al usuario y abrirle las puertas al resto de contenido, evitando que reboten hacia otro enlace de la página de resultados de Google.
  • Crea mayor expectación por el contenido. El usuario que se siente atraído por el efecto parallax querrá saber qué otras cosas sorprendentes o interesantes le puede ofrecer el sitio web.

Cómo conseguir el efecto Parallax en tu web

Implementar el efecto parallax en una página web con scroll vertical no es especialmente complicado. Se puede llevar a cabo de dos formas distintas, programando directamente el parallax por código, o recurriendo a un plugin especial de WordPress para ello.

1. Implementar el efecto parallax de forma manual

Para poder crear un efecto parallax en una web desde cero es necesario combinar CSS y JavaScript. Por lo tanto, se deben tener conocimientos avanzados en estas tecnologías web para poder implementar este efecto de forma óptima.

Si se dispone de estos conocimientos en programación web es sencillo encontrar en internet tutoriales sobre distintas formas de implementar el efecto.

2. Implementar el efecto parallax con un plugin de WordPress

La manera más sencilla de utilizar el efecto parallax en una web es recurriendo a un plugin especializado de WordPress. Estos complementos facilitan todo el proceso de creación del efecto, limitando al usuario a seleccionar las imágenes, el tipo de efectos y algunos parámetros para controlarlo (como la velocidad de movimiento de las distintas capas, la posibilidad de dejar objetos sin movimiento, o la dirección en la que se mueve cada capa, entre otros).

Algunos de los plugins más interesantes para utilizar parallax en WordPress son:

  • Skrollr. Ideal para los que quieran implementar el efecto parallax sin grandes complicaciones en su sitio web.
  • Stellar. Es uno de los complementos que mayor nivel de personalización permite en las distintas capas del efecto parallax, pudiendo crearse efectos realmente sorprendentes. También es uno de los complementos con más opciones y más complicados de configurar.
  • ScrollMagic. Quizás sea el plugin más popular para crear parallax en webs WordPress. Una de sus principales características es que el efecto implementado tendrá un bajo impacto en el tiempo de carga de la web, por lo que es uno de los más recomendados para usuarios inexpertos.

 

Hemos visto qué es el efecto parallax y cómo puede implementarlo en tu sitio web para conseguir impactar realmente a tus usuarios con una presentación original y atractiva. Implementar este tipo de efecto en un sitio WordPress es muy sencillo gracias a los distintos complementos que se pueden instalar, y que facilitan todo el proceso.

El efecto parallax en Android y en dispositivos móviles es una buena forma de diferenciarse de la competencia y destacar una web o una web app del resto de alternativas existentes en el mercado.

Ir a Blog

Qué es el slug y cómo se configura

               

Cuando visitamos un sitio web podemos apreciar en la barra de navegación de nuestro explorador web la dirección del dominio en la que nos encontramos. Además del propio nombre de dominio con su extensión correspondiente, esta dirección cuenta con más texto que hace referencia específica a cada página que forma el sitio.

El slug es este texto propio de cada URL de una página, blog o página web. En algunos sitios podemos apreciar que este slug es complejo y casi ilegible, mientras que en otros es muy sencillo de leer, ya que corresponde habitualmente con el contenido que muestra la página.

Qué es un slug

Un slug se denomina al texto que se encuentra después del nombre de dominio de un sitio web y que determina específicamente la URL a la que se accede. Esta parte del dominio es personalizable por parte del desarrollador web por lo que se utiliza para facilitar la navegación de los usuarios y para que los motores de búsqueda puedan posicionarlas de forma más sencilla.

Por lo tanto, optimizar los slug de un sitio web aporta dos ventajas fundamentales.

  • Ayudan a los usuarios a entender dónde se encuentran y de qué trata la página que visitan.
  • Facilita el trabajo de rastreo, análisis e indexado de Google y otros motores de búsqueda.

Además, en las SERP o páginas de resultados de Google, el slug se muestra junto al título y la descripción, por lo que tiene un impacto directo en el CTR.

Cómo configurar el slug en WordPress

Si utilizas el CMS WordPress para tu página web o blog, o WooCommerce para tu eCommerce, puedes configurar de forma muy sencilla los slug. Antes de modificar el formato de tus slug es importante que conozcas tres puntos importantes a la hora de configurarlos:

  1. El texto debe introducirse utilizando solo letras minúsculas.
  2. No se pueden utilizar espacios por lo que todas las palabras que conformen el slug deben ir seguidas o separadas por algún símbolo. Si introduces por error un espacio, WordPress lo corregirá automáticamente añadiendo en su lugar un guion (“-”).
  3. Algunos caracteres no se admiten en el slug, como por ejemplo la letra “ñ”, o el uso de tildes.

Para acceder a la personalización de los slugs en WordPress hay que ir al panel de administración, y en la sección Ajustes / Enlaces Permanentes, seleccionar la opción que más se adapte:

  • Simple. Es la que viene por defecto en WordPress.
  • Día y nombre. Utiliza una estructura por año y día, utilizando directorios (separados por el signo “/”).
  • Mes y nombre. Igual que el anterior, pero la estructura utiliza el mes de la publicación y el título de la entrada o página.
  • Numérico. Va enumerando las entradas de forma correlativa.
  • Nombre de la entrada. Uno de los más utilizados, ya que el slug corresponderá con el título de la página o la entrada, sustituyendo los espacios por el signo “-”.
  • Entrada personalizada. Donde se puede configurar de forma personalizada el slug, utilizando una serie de etiquetas.

Los slugs se pueden configurar para páginas, entradas, categorías, o autor. Para ello hay que activar esas opciones en la parte superior de WordPress, desplegando el menú opciones de pantalla y activando la casilla correspondiente.

Consejos para optimizar el slug

El slug es un espacio muy interesante para poder potenciar el posicionamiento web de un sitio. A continuación, ofrecemos una serie de puntos clave que debes tener en cuenta para poder optimizar tus slug y sacarles el mayor partido.

Introducir palabras clave

Es importante que las palabras clave aparezcan en el slug para que los Googlebots puedan comprender mejor el contenido de la web y les sea más sencillo incluirlas en el lugar correcto en el ranking de Google.

Si se utiliza WordPress, añadiendo al título de las entradas o páginas keyword principal se conseguirá un buen slug para SEO.

Evitar sobrecargar el slug

Es importante ser concisos en el slug, incluyendo la información importante y necesaria. Para conseguir un buen texto es importante evitar palabras extras que no aporten valor, y evitar acciones como el key stuffing (añadir muchas palabras clave), ya que podría suponer una penalización en el posicionamiento.

Utilizar guiones

Los guiones son una parte importante de un slug, ya que no se admiten espacios en las direcciones web. Los Googlebots y otros rastreadores interpretan que los guiones que se añaden en un slug de una URL son espacios en blanco por lo que no hay que preocuparse a la hora de añadirlos.

 

Las URL amigables son importantes para el posicionamiento web, ya que ofrecen a los usuarios una forma más fácil de comprender de qué trata el contenido de una página, y sirven para facilitar también el trabajo de los buscadores.

Configurar de forma óptima los slugs de una página web, blog o tienda online es un proceso sencillo que proyectará una mejor imagen de la web, donde se cuida hasta el más mínimo detalle para que los usuarios puedan disfrutar de una gran experiencia.

Ir a Blog

Cómo crear botones CSS

               

Uno de los elementos web más utilizados para navegar e interactuar en una página web o eCommerce son los botones. Desde el punto de vista técnico, los botones se pueden implementar directamente en código utilizando HTML o CSS, aunque los botones CSS permiten una mayor personalización para adaptarse al diseño y estilo de un sitio web.

Crear botones con HTML o con CSS

Crear un botón con HTML solo permite incluir un texto y un enlace hacia dónde lleva cuando el usuario hace clic o pulsa encima de él. Es necesario utilizar CSS para poder personalizar y darle al botón las propiedades necesarias para que muestre un aspecto visual atractivo. Incluso, es posible crear botones con iconos en CSS, para dotarlos de un aspecto más profesional y llamativo.

Para crear un botón en HTML hay que utilizar el siguiente código:

< a href = “URL del enlace”>Haz clic aquí. Este código muestra el texto “Haz clic aquí” con un enlace que lleva hacia la URL indicada.

Para personalizar ese botón y darle un aspecto llamativo se debe implementar código CSS, como por ejemplo:

< a class=”boton” target=”_blank” target=”_blank” href=”URL del enlace”>Haz clic aquí. Se crea el botón en CSS.

.boton {

    padding: 10px 20px;

    background-color: white;

    color: #000000;

}

El código CSS anterior añadir propiedades especiales al botón como un margen (padding), un color blanco para el fondo, y un color negro para el texto.

Al buscar botones CSS para ejemplos, se pueden encontrar en internet infinidad de posibilidades de código con las que probar y testear los efectos que producen, para así adaptarlos a las necesidades personales.

Claves para crear botones con CSS

A continuación, ofrecemos una serie de recomendaciones o tips para poder crear botones con CSS totalmente personalizables.

Crear siempre el botón

Es importante crear primero el botón en CSS antes de comenzar a variar sus propiedades o atributos. Para ellos se utiliza la línea de código que vimos anteriormente:

< a class=”boton” target=”_blank” target=”_blank” href=”URL del enlace”>Haz clic aquí

Le asignamos un nombre al botón con la propiedad class para poder asignarle posteriormente sus propiedades o variar sus atributos. También se indica, tanto la URL hacia la que lleva el botón, como el texto que debe mostrar al usuario.

Personalizar el botón

Tras crear el botón, se puede empezar añadir sus distintas propiedades nombrándolo primero, siguiendo con una lista de los distintos atributos que se quieren variar. Como vimos en el anterior ejemplo, el código para personalizar un botón sería:

.boton {

    padding: 10px 20px;

    background-color: white;

    color: #000000;

}

En la primera línea hacemos referencia a la clase del botón, de tal forma, que todas las propiedades que se añaden a continuación lo modificarán.

Colorear el fondo de los botones

Una de las partes características de un botón es su fondo, que es de distinto color al color del fondo de la página y del propio texto del botón, para así conseguir ese efecto de realce. Para variar el color de un botón en CSS se utiliza la propiedad background-color, seguida del color que se quiere utilizar, bien con el nombre del color (white, black, silver), con su código hexadecimal (#ffffff o #000000, por ejemplo), o el equivalente en RGB (rgb (255,0,0).

Asignar el color del texto

El otro color clave de un botón es el del texto que contiene. Para asignarlo se utiliza la propiedad color, seguida del color seleccionado.

Añadir un borde a los botones

Los bordes de un botón se pueden definir utilizando la propiedad border, como por ejemplo:

border: 1px solid #e24000;

En este ejemplo, podemos apreciar cómo asignamos un tamaño de un pixel para el borde de un botón de tipo sólido, con un color marcado por su código hexadecimal (naranja oscuro, en este caso).

El borde también puede tomar la forma típica redondeada de algunos botones web, para ello hay que utilizar el siguiente código CSS:

border-radius: 10px;

La propiedad border-radius es la que da la forma con esquinas redondeadas en un botón CSS.

Implementar el efecto Hover

Esta es una de las características esenciales de un botón, que se produce cuando se pasa el puntero del ratón por encima y cambia su aspecto. Con CSS es muy sencillo implementar el efecto hover para conseguir un botón con aspecto profesional.

.boton:hover {

    background-color: #00c69f!important;

    color: white!important;

}

En la primera línea indicamos que, para el botón al que llamamos boton, asignaremos a continuación sus propiedades cuando el usuario pase el ratón por encima, con la propiedad hover. Todos los atributos que se implementan a continuación, solo tendrán efecto cuando el usuario mueva el puntero por encima del ratón, desapareciendo cuando el puntero esté fuera de su área.

 

Hemos visto cómo crear un botón en CSS y cómo es mucho más flexible y personalizable que hacerlo con HTML, incluso hay mayor libertad creativa que utilizando plugins específicos para crear botones de WordPress u otro CMS.

CSS es un lenguaje de estilos con una curva de aprendizaje muy suave, por lo que es interesante aprender cómo funciona para poder crear botones personalizados para una web y conseguir que se adapten perfectamente al diseño y estilo.

Ir a Blog

Para qué sirve un slider y sus inconvenientes

               

Los efectos que se pueden implementar en una página web o eCommerce son muy interesantes para llamar la atención de los usuarios al mismo tiempo que se les ofrece una mejor funcionalidad y forma de acceder al contenido.

Utilizar un slider en un sitio web lo dota de un mayor nivel de profesionalidad, proyectando una imagen de modernidad e innovación muy positiva para la empresa. Además, estos elementos son muy prácticos y funcionales, facilitando el acceso a secciones de la web o a información relevante.

Qué es un slider y para qué sirven

Un slider es un elemento que se puede implementar en un sitio web y cuya función es mostrar imágenes y texto que se van deslizando. Son una especie de carrusel que va mostrando distinto contenido, pudiéndose realizar este desplazamiento de forma automática cada cierto tiempo, o de forma manual por el propio usuario.

El slider se suele incluir en la cabecera de una página web, blog o tienda online, justo debajo del menú de navegación. De esta forma, se pueden destacar contenidos o zonas de la web que interese que los usuarios visiten más.

Un slider bien implementado puede ser fundamental para mejorar la experiencia de usuario y para dirigirles hacia páginas de conversión, como a las fichas de productos en una tienda virtual, por ejemplo.

Cómo poner un slider en WordPress

Existen múltiples plugins slider en WordPress, por lo que es sencillo instalar activar uno de ellos para implementar un carrusel de imágenes y textos. El plugin Master Slider por ejemplo, permite diseñar un slider personalizado y colocarlo en un lugar estratégico de la web

Se puede establecer el tamaño del slider en WordPress para que se adapte al diseño y estilo de la página.

Existen otros plugin interesantes para poner un slider en WordPress como Slider by WD, Slide Anything o Smart Slider 3, entre otros.

Por qué usar un slider

Un HTML slider dota de gran dinamismo a un sitio web por lo que implementarlo le proporcionará muchas ventajas al mismo.

Los principales beneficios que se obtienen cuando se utiliza en slider son:

Mejora la experiencia de usuario

Un buen slider facilita el acceso a los usuarios al contenido más relevante e importante de la web. Con el slider, un usuario puede navegar por distintas opciones de la web y acceder a la que crea más interesante, sin necesidad de estar buscando por los menús u otras opciones de navegación del sitio.

Llama la atención

Los slider pueden diseñarse y configurarse de forma espectacular, llamando la atención de los usuarios nada más acceder a la web. En estos elementos se pueden combinar distintas imágenes, tipos de letras, colores, efectos visuales, y transiciones, para mostrar el contenido de una forma innovadora y original, que no dejará indiferente a los visitantes del sitio.

Proyecta una mejor imagen

Con un buen slider en la cabecera de una tienda online o página web se proyectará hacia los usuarios una imagen de profesionalidad e innovación, haciendo que confíen más en el sitio, lo que hará más probable que realicen alguna conversión, como una suscripción o una compra.

Permite contar una historia

El sistema de mostrar la información por fases de un slider es ideal para poder contar una historia paso a paso a los usuarios. Esta opción, unida a su capacidad visual con el uso de imágenes, colores y efectos, permite mostrar un proceso lineal de forma atractiva y eficiente, como por ejemplo, un portafolio de trabajos realizados, o para explicar cómo realizar una tarea concreta.

Cuáles son los inconvenientes de emplear un slider

No todo son beneficios en el uso de slider en un sitio web, sobre todo, si no se implementan de forma correcta.

Los principales problemas que se pueden presentar al utilizar un slider son:

  • Ralentiza la velocidad de carga. Abusar del número de imágenes, o del tamaño de las mismas, así como de los efectos de transición, pueden hacer que el tiempo de carga se incremente de forma considerable.
  • Entorpece la navegación. Un slider puede entorpecer la navegación habitual del usuario en una web, dirigiéndolo a páginas de escaso valor o desviando su atención de las páginas de conversión, por ejemplo.
  • Rompe con el diseño. El slider tiene que implementarse dentro del diseño o estilo de la web, ya que de lo contrario producirá un efecto antiestético que arruinará la imagen de la web.

 

El slider es un elemento muy utilizado hoy en día en la mayoría de sitios web. Los usuarios pueden acceder a contenido importante, novedades y ofertas a través de un slider, sin necesidad de estar buscando dentro de la estructura de la web.

Al implementar un slider en una web se obtienen diversas ventajas, pero hay que realizarlo de forma adecuada, pues de lo contrario causarán un efecto negativo en el sitio, ralentizando su carga, por ejemplo.

Ir a Blog

Cómo instalar Google Analytics en tu web con WordPress

               

Conocer de dónde proviene el tráfico web, en qué páginas abandonan los usuarios un sitio, o cuáles son las páginas más visitadas, son algunos de los muchos datos importantes que puedes conocer sobre tu sitio web. Mientras más información poseas sobre tu web y el comportamiento de sus visitantes, mejores decisiones tomarás para optimizarla y ofrecerles una buena experiencia de usuario, consiguiendo así incrementar las conversiones, mejorar el posicionamiento web y disponer de una web mucho más usable y accesible para todos los usuarios.

Configurar Analytics  de Google  para WordPress es el proceso que necesitas para acceder a una gran cantidad de datos de tu web, presentada en formatos de tablas, listas y gráficas comparativas por periodos de tiempo. Esta herramienta gratuita de Google será indispensable para poder establecer buenas estrategias SEO y tener la web optimizada para los motores de búsqueda, y de manera especial, para aparecer en mejores posiciones en las páginas de resultados de Google.

Por qué configurar Google Analytics en tu web

Configurar Analytics en tu web te dará acceso a una gran cantidad de información sobre tu sitio web, lo cual te aportará numerosas ventajas como:

Acceso a muchos datos estadísticos

Con Google Analytics podrás conocer todos los datos estadísticos relacionados con tu página web o tienda online. Algunos de los datos más importantes que podrás conocer son:

  • Número de visitas totales.
  • Número de visitas de cada URL.
  • Origen de las visitas (tráfico orgánico, redes sociales, campañas SEM en Adwords…).
  • Tiempo que permanecen los usuarios en tu web durante una sesión.
  • Tasa de rebote o el porcentaje de usuarios que abandonan el sitio sin interaccionar con él.
  • Número de conversiones.
  • Procedencia de las conversiones.
  • Nuevos usuarios.

Mejorar la toma de decisiones

El acceso a toda esta información te dará una visión global y precisa del estado de tu web. Basado en estos datos podrás tomar mejores decisiones a la hora de elegir las técnicas y estrategias SEO a implementar para optimizar el sitio para los motores de búsqueda y para ofrecer la mejor experiencia a los usuarios.

Muchas estrategias de marketing digital exitosas utilizan Google Analytics como una de las principales herramientas de analítica web, para decir las mejores estrategias a seguir para alcanzar unos objetivos fijados.

Fácil de utilizar

A pesar de la gran cantidad de información que ofrece esta herramienta, su uso es muy sencillo y no son necesarios conocimientos técnicos avanzados para ello. La interfaz de usuario y la estructuración de Google Analytics facilita que cualquier usuario pueda dominar su uso sin necesidad de invertir mucho tiempo y esfuerzo, o realizar una formación específica.

Conocer las palabras clave

Con Google Analytics se puede identificar qué palabras clave son las que mejor están posicionando cada página del sitio. Así es más sencillo establecer estrategias para potenciar el posicionamiento web, evitar problemas como la canibalización de keywords, o identificar nuevas palabras clave interesantes para la web.

Cómo instalar Google Analytics en WordPress

A continuación, veremos cómo configurar Google Analytics en tu sitio WordPress paso a paso.

1. Crear cuenta de Google Analytics

En primer lugar, es necesario disponer de una cuenta activa de Google Analytics. Si se dispone de una cuenta de Google o de Gmail solo hay que entrar en la web de Google Analytics e identificarse con las credenciales de acceso a Google, lo que dará la opción de activar para la misma el servicio de Google Analytics.

Si no se dispone de una cuenta de Gmail o de Google, será necesario crearla previamente para poder acceder a Google Analytics.

2. Obtener el código de Analytics

Una vez activada la cuenta de Google Analytics es necesario obtener un código de vinculación. Se trata de un trozo de código HTML que se debe insertar en la web para indicarle a Google Analytics que se es el propietario legítimo del sitio.

En Google Analytics hay que ir a Pestaña Administración / Columna Propiedades / Información de seguimiento / Código de seguimiento. El código HTML que se muestra hay que copiarlo para utilizarlo posteriormente en WordPress.

3. Instalar un plugin específico

Con un plugin Analytics para WordPress es muy sencillo vincular una cuenta de Google Analytics con tu sitio web WordPress. En el mercado existen diversos complementos que simplifican este proceso, como pueden ser Simple Google Analytics, Google Analytics by Yoast o Google Analyticator, entre otros.

En el complemento elegido se introduce el código HTML de seguimiento obtenido en Google Analytics, y éste se encargará automáticamente de aplicar los cambios necesarios en la web para vincular el sitio WordPress con la cuenta Google Analytics.

Tras realizar este proceso con éxito, ya se podrá acceder a la herramienta online y verificar que se tiene acceso a la información de la web.

 

Hemos visto cómo instalar Google Analytics en mi web para poder disponer de toda la información sobre los visitantes y su comportamiento en la misma. La analítica web es fundamental para poder tomar mejores decisiones y conseguir alcanzar los objetivos de conversión de una página web o tienda online. Configurar Google Analytics debe ser una prioridad para optimizar un sitio web gracias a datos reales y fiables.

Ir a Blog

Cómo clonar mi sitio web

               

El concepto clonar hace referencia a realizar una copia exacta de algo. En el diseño y desarrollo web el término clonar se utiliza para definir el proceso de creación de una copia de un sitio web para diferentes fines.

Al clonar un sitio web se dispondrá de una copia exacta del mismo que sirve como respaldo en caso de problemas, facilita la migración al cambiar de proveedor de servicio de alojamiento web, o permite crear una web idéntica donde realizar test y pruebas de nuevos diseños y funcionalidades.

A continuación, veremos cómo clonar páginas web y por qué es muy importante saber hacerlo.

Razones por las que clonar tu sitio web

Realizar una clonación de un sitio web es un proceso muy interesante que se suele realizar principalmente por tres motivos:

1. Migración entre distintos hosting

Cuando se realiza un cambio de hosting, la clonación es un proceso ideal para pasar todos los archivos, carpetas y estructura de la web, del servidor original al nuevo servidor web contratado. Realizando una clonación WordPress es mucho más rápido y sencillo migrar entre proveedores web.

Al clonar un sitio WordPress a otro dominio, se podrá seguir gestionando el mismo sin tener que recurrir a complejos y tediosos procesos de configuración e instalación.

2. Copia de seguridad

Una clonación de un sitio web permite disponer de una copia exacta que se puede almacenar como backup de la web. Ante cualquier incidencia o problema grave con la web, se puede rescatar esta clonación, quedando el sitio otra vez operativo en muy poco tiempo.

No hay excusas para no utilizar un sistema de clonado para un sitio web, ya que es una de las medidas de seguridad más importantes que debes realizar. Además, el proceso de clonación es muy sencillo y rápido, por lo que no se perderá tiempo ni será necesario poseer conocimientos técnicos avanzados para realizarlo.

La clonación web es una forma muy eficiente de realizar copias de seguridad de páginas, blogs y tiendas online.

3. Crear un entorno de pruebas real

Al clonar una web se puede crear una nueva copia exacta para utilizarla probando nuevos diseños, implementando nuevas funcionalidades o realizando cambios y pruebas. De esta manera se podrán realizar todo tipo de test sin que esto afecte al funcionamiento del sitio web, por lo que se pueden implementar cambios drásticos o profundos sin miedo.

La clonación es un proceso muy útil para crear entornos de pruebas en el desarrollo y diseño web, tanto a nivel local (montando un servidor web local), como en la red (bien en un directorio diferente del hosting o en un hosting diferente contratado solo para pruebas).

Cómo puedes clonar tu sitio web

Si hay una característica que destaca en WordPress, es la cantidad de plugins que existen en el mercado y que permiten realizar casi cualquier cosa. Por supuesto, existe una amplia variedad de complementos especialmente diseñados para realizar clonaciones, por lo que el proceso de realizar copias exactas en WordPress es muy sencillo y cómodo.

Veamos cómo clonar un sitio web WordPress utilizando diferentes plugins o complementos:

Clonar con Duplicator

Duplicator es uno de los plugins de clonación más utilizados de WordPress, con más de un millón de descargas. Una de sus claves de éxito es que está localizado a muchos idiomas, entre ellos el español.

Con Duplicator cada clonación que se realice del sitio WordPress se empaqueta, agrupando y comprimiendo todos los datos de la web para facilitar el posterior desempaquetado y configuración en el sitio de destino.

En el sitio web de destino no es necesario instalar WordPress, basta con subir los archivos empaquetados con Duplicator y él se encargará de realizar todo de forma automática (acudiendo a la URL donde se han subido los archivos seguidos de /installer.php). En muy poco tiempo se tendrá lista y funcionando de nuevo la web, pero esta vez en un servidor diferente.

Si queremos hacer pruebas en la web, se puede montar un servidor local web y utilizar Duplicator para crear la web en pocos minutos.

Clonar con herramientas del hosting

Los hosting ofrecen entre sus servicios web la posibilidad de realizar clonaciones del sitio. Dependiendo del hosting, este servicio se encontrará en diferentes sitios del panel de administración.

Es muy interesante utilizar esta opción de clonación que ofrece el hosting, ya que permite automatizar la clonación para disponer siempre de una copia exacta lista para ser utilizada en caso de necesidad (un error grave del sitio o un ciberataque, por ejemplo).

 

Clonar páginas WordPress es un proceso sencillo y muy útil para no tener que repetir un diseño y estructura, y proceder solo a variar su contenido. Esta práctica ahorra mucho tiempo y esfuerzo.

Realizar una copia exacta de un sitio WordPress es una práctica muy interesante para disponer de un backup de la web que se puede recuperar en cualquier momento o para migrar el sitio de un hosting a otro.

Ir a Blog

Atributos ALT para imágenes en WordPress

               

Las imágenes son elementos muy importantes dentro de una página web, blog o tienda online pues aportan información en un formato visual muy atractivo para el usuario. En una tienda online, por ejemplo, las fotos de los productos son elementos clave para conseguir incrementar las ventas, mostrando a los usuarios los artículos de forma detallada, como si se encontrasen en la tienda de forma física.

Una de las grandes ventajas del uso de imágenes en un sitio WordPress es que se posicionan en Google, bien mostrándose en las páginas de resultados como fragmentos destacados, o en la sección de imágenes del buscador de Google.

Complementar de forma apropiada los atributos ALT en WordPress para las imágenes facilita el posicionamiento de las mismas en Google, por lo que conocer qué es el atributo ALT, para qué sirve y cómo utilizarlo en WordPress es de vital importancia.

Qué son los atributos ALT

Los atributos de imagen ALT son una parte de la etiqueta de imágenes de HTML que incluyen un texto que hace referencia a su contenido. El texto del atributo ALT debe describir de qué trata o que muestra la imagen, y se mostrará al usuario en caso de que dicha imagen no pueda cargarse, para que sepa que en ese lugar se muestra una imagen con un contenido definido.

Se denomina ALT a este atributo por su alusión a texto alternativo, pues se muestra solo si la imagen no puede ser visualizada por el usuario.

Cómo utilizar la etiqueta ALT en HTML

En código HTML la etiqueta ALT se implementa de la siguiente forma:

< img src = “URL de la imagen” alt = “texto alternativo” >.

El atributo title de HTML para las imágenes también es importante cuando se suben imágenes a una página web o eCommerce. Este título define la imagen y ayuda a mejorar el posicionamiento web de la misma.

Para utilizar los atributos ALT y TITLE en una imagen en HTML hay que seguir el siguiente patrón:

< img src = “URL de la imagen” title = “título de la imagen” alt = “texto alternativo” >.

Para qué sirven y beneficios para SEO

La etiqueta ALT de las imágenes en HTML tiene dos usos diferentes:

1. Alternativa a la imagen

Cuando se implementó este atributo de imágenes en HTML su objetivo era el de mostrar un texto alternativo que hacía referencia a una imagen, cuando esta no podía mostrarse al usuario.

Antiguamente, cuando las conexiones a internet eran mucho más lentas e inestables, era habitual que muchas imágenes no llegasen a cargar o que se produjera un error que impedía mostrarlas. El atributo ALT venía a reducir este impacto negativo, mostrando a los usuarios un texto alternativo con la descripción de esa imagen.

Hoy en día no existe este problema gracias al gran rendimiento de conexiones a internet de fibra óptica o las conexiones de datos 4G y 5G, aunque el texto alternativo sigue siendo muy útil para la accesibilidad web.

2. Posicionamiento web

El principal uso del atributo de imagen ALT hoy en día se encuentra en la optimización de imágenes para los motores de búsqueda. Los bots de Google y otros buscadores web consultan el atributo ALT para comprender el contenido de una imagen y así poder indexarla y clasificarla de forma adecuada en su base de datos.

Por este motivo, optimizar el texto alternativo de las imágenes es una técnica SEO muy importante para conseguir que las imágenes de una web se muestren en posiciones de privilegio en las SERP, y consigan atraer mayor tráfico web al sitio.

Cómo rellenar los atributos ALT en WordPress

Rellenar el image ALT TAG en sitios web WordPress es un proceso muy sencillo. Al añadir una imagen a WordPress, en el gestor de imágenes que incorpora este CMS, se pueden rellenar diferentes campos como el título, el texto alternativo, la descripción y la leyenda.

Es una buena práctica introducir siempre un texto alternativo cada vez que se sube una imagen a WordPress, pues el contenido de este atributo es el que Google utiliza para indexar la imagen.

Utilizar las palabras clave en los atributos ALT de las imágenes ayuda a mejorar su posicionamiento web. Cada imagen debe contar con su propio texto alternativo optimizado, y no es una buena idea repetir siempre el mismo atributo ALT en todas las imágenes, ya que, aunque es muy cómodo, no se podrá obtener todos los beneficios en posicionamiento que ofrece.

 

Los atributos ALT de las imágenes juegan un papel fundamental en el posicionamiento web de imágenes, junto al atributo HTML TITLE. WordPress simplifica y facilita la creación, optimización y gestión de un sitio web con opciones específicas, como la posibilidad de introducir en campos el título y texto alternativo de cada imagen que se suba al sitio.

Tomarse su tiempo redactando el mejor texto alternativo para las imágenes de un eCommerce, blog o página web, es una buena manera de incrementar la visibilidad del sitio web Google a través de sus imágenes.

Ir a Blog

×