Consulta SQL cambiar transportista de un pedido en Prestashop

cambiar transportista en un pedido de prestashop

Consulta SQL cambiar transportista de un pedido:

Seguramente os habréis encontrado con el siguiente problema. Te han hecho un pedido en tu tienda con prestashop pero el cliente te solicita después, que lo envíes con otra agencia de transporte. También puede ocurrir que el cliente se haya equivocado al seleccionar el transporte o incluso por un bug de Prestashop.

Existe algún modulo que realiza esta función, pero lamentablemente son módulos de pago. Pues bien, aquí os dejo la siguiente consulta SQL y así no tendréis que gastaros ni un Euro:

UPDATE `ps_orders` SET `id_carrier` = '320' WHERE `ps_orders`.`id_order` =2151

A continuación os explico como podéis utilizar este código:

Desde vuestro panel de administración de Prestashop: Entrar en Parámetros avanzados/Gestor SQL, una vez estés dentro, arriba a vuestra derecha hacer clic en Añadir una consulta SQL y os aparecerá la siguiente pantalla:

Debéis rellenar los campos solicitados, en Nombre de la consulta SQL, poner un nombre para que podáis recordar fácilmente para qué servía la consulta, por ejemplo Búsqueda de clientes por ID del producto.

A continuación en Consulta SQL, debéis incluir la consulta que os he puesto más arriba, en ID CARRIER tendréis que poner el ID de vuestro transportista, y en ID ORDER el número de vuestro pedido, una vez le hagáis clic en Guardar, vuestra consulta se habrá realizado correctamente.

Si te ha servido esta consulta sql cambiar transportista, te recomiendo que visites esta otra consulta para buscar un cliente que ha comprado un producto en concreto.

Espero que os haya servido como a mí esta consulta, si tenéis cualquier duda dejar un comentario y estaré encantado de ayudaros, y recordar, si os ha gustado este artículo no dudéis en compartirlo!!!

Bibliotecas y herramientas de animación CSS

Crear animaciones CSS de aspecto profesional puede ser difícil y lleva mucho tiempo, pero afortunadamente, existen excelentes herramientas de animación CSS para ayudar a impulsar tu proceso creativo. Esta colección de recursos incluye todas las mejores bibliotecas de animación CSS.

Elige uno que se adapte a tu proyecto y comienza de inmediato, o utilízalo como punto de partida para crear algo personalizado para tu marca. También hay algunas hojas de estilo y atajos útiles para complementar tu aprendizaje.

01. animista

Animista es un parque de animación CSS

Animista es un tipo de área de juegos donde puedes editar y jugar con una colección de animaciones CSS pre-hechas. Luego copia el código de lo que desees, para usar en tus proyectos. Animista comenzó su vida como un proyecto paralelo para la desarrolladora front end Ana Travas, quien aún lo está desarrollando.

02. CSS3 Animation Cheat Sheet

Explora esta colección de animaciones CSS3 preestablecidas, plug-and-play

Este útil proyecto ofrece un conjunto de animaciones preestablecidas, plug-and-play para que las uses en tus proyectos web. Hay instrucciones claras para ayudarte a comenzar, pero básicamente, solo tienes que añadir la hoja de estilo a tu sitio web y aplicar las clases de CSS pre-hechas a los elementos que desea animar. Esta hoja de trucos utiliza los fotogramas clave de CSS3, lo que significa que no debes preocuparte por colocar el elemento para dejar espacio para las animaciones.

03. animate.css

Esta biblioteca incluye 77 animaciones CSS esenciales.

Esta biblioteca reúne nada menos que 77 animaciones, todas creadas en CSS y listas para usar. Simplemente haz referencia al archivo CSS y cuando añadas clases a un elemento, la animación sucederá. Esto funciona mejor al agregar o eliminar clases usando JavaScript.

La biblioteca tiene un tamaño de archivo impresionantemente pequeño cuando está comprimido con gzip, pero si no quieres cargar todo en tu pagina web, el proyecto también es una gran fuente de inspiración. Compilada por Dan Eden, esta biblioteca incluye casi todas las animaciones CSS que puedas necesitar, desde lo básico (rebote, atenuación) hasta algo más emocionante (Jack in the Box, Jello). Usa el menú desplegable en la página de inicio para ver el título de la biblioteca animada en cada uno de los diferentes estilos.

04. Hover.css

Hover.css se centra en animaciones de interacción de botones

Similar a Animate.css, Hover.css es una colección de efectos CSS que puedes usar en tus proyectos. Esta biblioteca fue creada específicamente para animaciones de interacción de botones. La biblioteca se puede descargar en vainilla CSS, Sass o Less, por lo que encajarán en casi cualquier proyecto. La biblioteca tiene casi todas las animaciones que puedas necesitar para la interacción.

05. CSShake

CSShake se centra en agitar animaciones.

CSShake es una biblioteca de animaciones CSS dedicada a hacer temblar elementos. La biblioteca tiene una serie de clases que puedes agregar a los elementos para aplicar una de las muchas animaciones diferentes. Las animaciones usan fotogramas clave y utilizan la propiedad de transformación para crear animaciones que a veces parecen locas, pero definitivamente difíciles de ignorar.

06. Obnoxious.css

¿Quieres saber cómo no hacer animación CSS?

Obnoxious.css fue creado por Tim Holman y es exactamente como su nombre indica. La biblioteca explora lo que es posible con la animación CSS, pero ilustra perfectamente lo que no debes hacer con las animaciones CSS. Si bien se presenta como una biblioteca de animación lista para el producto (y lo es), se pretende que sea irónica. Prepárate.

Espero que te haya gustado este artículo sobre herramientas de animación CSS, si no te es molestia, compártelo y ayuda a que se difunda este mensaje.

La pagina web de Capitana Marvel es un hermoso desastre de los años 90

Marvel aprovechó la nostalgia de los noventa para promocionar su película.

La pagina web promocional de Marvel para su película Capitana Marvel, te llenará de un cálido resplandor nostálgico, o te servirá como otro recordatorio de que ahora eres muy, muy viejo.

En línea con la configuración del Capitana Marvel en 1995, Marvel lanzó una pagina web retro que te informa de todo lo que necesitas saber sobre la película de superhéroes protagonizada por Brie Larson. Eso es todo el tiempo que estés dispuesto a navegar a través del diseño de una web de la vieja escuela y las opciones de fuentes que te agotan los ojos.

Un encantador recuerdo

Para los visitantes que crecieron con una dieta de Pogs y Tamagotchis, el sitio web es un encantador recuerdo de una época en la que acceder a una pagina web significaba que no podías hacer llamadas telefónicas. Mientras tanto, los visitantes más jóvenes podrán disfrutar de esta estética arcaica que alguna vez disfrutaron los «ancianos».

Explora la paginaweb de Capitana Marvel aquí

Los elementos familiares de internet de antaño incluyen un libro de visitas, un contador de visitas y una cantidad de texto animado que paraliza el módem. Todo lo que falta es una bandada de tostadoras voladoras. Sin embargo, en términos de diseño promocional, este sitio web es tan malo que es muy bueno.

Diseño estrafalario pero efectivo

Algunos de nuestros toques favoritos incluyen a la anciana Skrull que aparece de vez en cuando: los visitantes pueden hacer clic para golpearla en la cara. El antiguo Windows Media Player y el cuestionario decepcionante sonarán una sonrisa también. Y si bien puede parecer una diversión estrafalaria en la superficie, este sitio también es práctico: el botón «Obtener boletos» se encuentra en una posición privilegiada cuando llegas a la página.

La lengua en la mejilla, internet, killjoy y el editor ejecutivo de The Verge , Dieter Bohn, ha señalado que este sitio no es una réplica exacta de un sitio web de los noventa, ya que cuenta con 10 MB, lo que hubiera demorado una eternidad su apertura.

También destaca el hecho de que su libro de visitas está lleno de referencias a eventos que sucedieron después de 1995. Sin embargo, esto no arruina nuestro disfrute del sitio, especialmente cuando te enteras de que todo fue creado en FrontPage y alojado con Angelfire.

Que es y como funciona Gutenberg de WordPress

Gutenberg, el nuevo editor de contenido basado en bloques de WP

Gutenberg es un editor de contenido basado en bloques que se está introduciendo con la actualización de WordPress 5.0. Gutenberg va a reinventar la forma en que escribimos y mostramos el contenido en la web, brindando poderosas herramientas a todos los usuarios de WordPress, desde el editor hasta el desarrollador.

Con el lanzamiento de Gutenberg, WordPress está dando un gran paso hacia la incorporación de diseños fáciles y receptivos en la edición de contenido. En este artículo, echamos un vistazo a la nueva herramienta que cambia el juego y lo que significa para aquellos que construyen sitios web de WordPress.

¿Qué es el editor de Gutenberg?

Gutenberg permite a los usuarios formar su contenido a partir de bloques receptivos, similares a las herramientas de creación de sitios web como Squarespace. Crear publicaciones y páginas que se moldean fácilmente con tu plantilla para cualquier tamaño de pantalla. Los diseñadores de plantillas pueden personalizar los tipos de bloques para que coincidan con sus plantillas, y a los usuarios que no tienen conocimientos de códigos les resultará fácil agregar elementos como columnas, imágenes de portada e incrustaciones en redes sociales sin la necesidad de complementos de WordPress difíciles de manejar. Incluso es posible incrustar widgets en publicaciones y páginas.

Este editor pretende negar la necesidad de códigos cortos y campos personalizados mediante la estandarización del proceso de creación de contenido. Hace que la publicación sea más rápida y más poderosa, dando a los editores nuevas herramientas para escribir y publicar de manera más eficiente que antes. Incluso puedes escribir tu contenido en otros editores como Google Docs o Microsoft Word y pegarlo en el editor de Gutenberg, y se traducirá su contenido en bloques automáticamente.

¿Cómo funciona Gutenberg?

Los bloques son la base del nuevo editor de Gutenberg. Al dividir el contenido en diferentes tipos, como párrafos, listas, imágenes, citas y más, los bloques permiten a los editores insertar, arrastrar y soltar, eliminar e intercambiar partes de la publicación o página con facilidad.

En comparación con el editor anterior de TinyMCE, puede ser un tanto extraño para los usuarios que nunca antes han visto un editor basado en bloques o un generador de páginas. Pero después de un poco de práctica, los beneficios superan con creces la curva de aprendizaje. Así que no te desanimes si te parece desalentador al principio.

Los bloques predeterminados se dividen en unas pocas secciones diferentes. Elementos en línea, bloques comunes, formateo, elementos de diseño, widgets, incrustaciones y bloques reutilizables. Incluso hay un bloque ‘Clásico’ si echas de menos a TinyMCE, con la opción de convertirlo más tarde en bloques de Gutenberg. Los complementos también pueden agregar bloques, lo que hace que la integración de nuevos bloques sea fácil y simplificada, y reduce la cantidad de desorden en el editor donde se tienen múltiples complementos.

Los desarrolladores de plantillas y complementos tendrán algo que hacer para actualizar su código y hacer un uso completo de la nueva actualización. Valdría la pena ver a los usuarios crear contenido que no solo es fácil de usar, sino también para UI.

Una nueva forma de escribir

Escribir con bloques es muy fácil, con nuevos métodos abreviados de teclado para ayudarte a ubicar bloques existentes, insertar, duplicar, mover y eliminar bloques sobre la marcha. Los bloques también incluyen una amplia variedad de bloques de incrustación predeterminados. Cumplen con la promesa de WordPress.org de que la edición de contenido admitirá multimedia y contenido en paralelo. Con un conjunto tan completo de bloques de inmediato, Gutenberg está listo para abordar el contenido de todos los sabores.

Los complementos, los tipos de publicaciones personalizadas, las metacuadros y los códigos cortos podrán utilizar la misma interfaz de usuario. Lo que hace que el proceso de unirlo todo sea perfecto para cada usuario. También significa que el código y el contenido finalmente están completamente separados. La actualización del código ya no requerirá ninguna actualización del contenido, ya que los desarrolladores pueden orientar el comportamiento del bloque circundante.

Bloques reutilizables

Los bloques reutilizables son una nueva función integral que te permite guardar un bloque y reutilizarlo en cualquier contenido. Cuando se edita un bloque reutilizable, se actualiza automáticamente donde se ha utilizado, sin la necesidad de editar manualmente cada página donde aparece. Los bloques reutilizables se pueden actualizar en línea o desde su propio panel de administración haciendo clic en el botón «Opciones» en la parte superior derecha de cualquier editor de contenido y dirigiéndose a «Administrar todos los bloques reutilizables».

La creación de un bloque reutilizable se puede hacer desde allí, o haciendo clic en el botón ‘Opciones’ en cualquier menú de bloques y haciendo clic en ‘Agregar a bloques reutilizables’. También puede guardar varios bloques en un bloque reutilizable resaltando el contenido, haciendo clic en el botón ‘Opciones’ que aparece en la parte superior izquierda de su selección y seleccionando ‘Agregar a bloques reutilizables’.

Bloques para formato de texto

Encabezado. El bloque de encabezado formatea los encabezados desde H1 hasta H6. La inserción de un bloque de encabezado en el contenido seleccionará H2 de manera predeterminada, lo que es ideal para dirigir a los editores de contenido a mantener la estructura del encabezado en cascada del contenido y evitar múltiples H1 en una página. La configuración predeterminada de Twenty Nineteen permite a los editores cambiar la alineación del rumbo (izquierda, central o derecha) y agregar un ancla HTML para vincular directamente a una sección de la página.

Párrafo. El bloque de párrafo conformará la mayor parte de tu contenido, es el ‘bloque de construcción de toda la narrativa. Cada párrafo tiene su propio bloque, y Twenty Nineteen viene con la configuración de texto predeterminada para el tamaño del texto, las mayúsculas, el fondo y el color del texto. Se puede transformar fácilmente en una cita, título, lista o verso. Mientras escribes, al presionar intro se creará un nuevo bloque, listo para el siguiente párrafo. El formato del texto se limita a los estilos en línea como negrita, cursiva, enlaces y tachado.

Y más bloques

Las listas. Las listas son bloques separados para los párrafos, lo que puede causar cierta confusión al principio porque podrías mirar erróneamente debajo del ‘párrafo’. De forma predeterminada, los bloques de lista tienen opciones simples, como listas ordenadas (numeradas) y no ordenadas (viñetas), así como una herramienta para anidar listas debajo de otros elementos de la lista. El formato de texto básico, como el bloque de párrafo, incluye negrita, cursiva y enlaces.

Bloques de cotización. Bloques decotización en formato de cotizaciones con la opción de agregar una cita fácil. Esto solía ser difícil para los no expertos en tecnología en el editor clásico de TinyMCE, ya que agregar una cita requeriría codificación adicional en la vista HTML. Las opciones predeterminadas incluyen la alineación del texto de las comillas, así como los estilos de comillas grandes o regulares. Hay una opción de bloque Pullquote separada para incluir comillas en los bloques flotantes hacia la izquierda o hacia la derecha, o extensiones de ancho completo. El intercambio entre los dos es fácil y se puede hacer con un solo clic.

Otras opciones de formato. Otras opciones de formato predeterminadas incluyen ‘Clásico’, código, preformateado, tablas y bloques HTML personalizados. Debe haber un bloque para cada ocasión, incluso con solo los tipos de bloque predeterminados en 5.0, mientras que la adición del bloque HTML personalizado junto con el bloque «Clásico» similar al Editor de TinyMCE original debería cubrir la mayoría de los casos.

Bloques en columnas

Quizás uno de los bloques nuevos más poderosos para el diseño de contenido es el tipo de bloque de columna. Permite a los usuarios crear hasta seis columnas e insertar párrafos, listas, imágenes y más en un formato receptivo. Con la opción de hacer que el bloque de columnas tenga el ancho completo, el espacio de la página está bien utilizado y el contenido puede fluir como el usuario lo desee.

Hay un poco de habilidad para volver a encontrar la configuración de la columna una vez que haya creado y editado el bloque, pero usar Tab y Shift + Tab te ayudará si resulta difícil abrir el menú de opciones con el mouse. Ten cuidado, al reducir el número de columnas después de rellenarlas, se eliminará el contenido de las columnas eliminadas. Así que asegúrate de mover los bloques fuera de la estructura de la columna antes de editar el bloque de columnas.

¿Por qué deberías usar el editor de Gutenberg?

01. Es más fácil de lo que parece.

Las cosas nuevas pueden ser desalentadoras, pero Gutenberg es sorprendentemente fácil de aprender. A los pocos minutos de usar el nuevo editor de contenido, crearás contenido más rápido que nunca.

02. Fomenta nuevos tipos de contenido

Con nuevos tipos de bloque y soporte para cosas que nunca supo que necesitaba. Gutenberg alentará a los editores a crear contenido que salga del molde y descubrir nuevas formas de mostrar contenido y relacionarse con los espectadores.

03. Hace que los desarrolladores y los usuarios se unan.

Debido a que los bloques estandarizan la forma en que se crea el contenido, los desarrolladores pueden controlar mejor qué pueden estar creando los editores y predecir cómo se utilizarán sus plantillas y estilos para evitar conflictos desastrosos de códigos de usuarios.

04. WYSIWYG es realmente WYSIWYG

De cara al futuro, con un poco de dedicación de los desarrolladores y tu estilo, Gutenberg representará con mayor precisión lo que realmente aparece en la publicación publicada. Los editores pueden crear su contenido en tiempo real sin tener que depender de la vista previa.

05. Es el futuro.

El mundo del contenido web está cambiando rápidamente, y ¿qué mejor manera de mantenerse al día que aferrarse a la ola de nuevas tecnologías? Gutenberg está allanando el camino para que lleguen cosas emocionantes.

Clean Blocks: Plantilla gratis WordPress compatible con Gutenberg

Clean blocks plantilla gratis para wordpress

Clean Blocks es una nueva plantilla gratis para WordPress de Catch Themes que se lanzó la semana pasada en WordPress.org. El diseño es adecuado para empresas, agencias, profesionales independientes y otros profesionales de servicios que requieren contenido destacado, un portafolio, testimonios, un blog y una sección de servicios.

Clean Blocks incluye la compatibilidad básica de Gutenberg, ya que es compatible con todos los bloques principales y tiene algunos estilos de bloques mejorados.

Compatible con Gutenberg

Puede parecer innecesario especificar que es compatible con Gutenberg, ya que el editor ha sido parte del núcleo de WordPress desde principios de diciembre de 2018. Sin embargo, más de la mitad de todos los usuarios de WordPress no ejecutan la versión 5.0+. Casi el 30% se está quedando atrás en 4.9 y el 25% está en versiones aún más antiguas.

Los autores de la plantilla que crean productos que tienen características exclusivas de Gutenberg, todavía no están creando para la mayoría de los usuarios de WordPress. Estos autores están forjando un camino para el futuro del desarrollo de plantillas. Esta plantilla realmente no se incluye en esta categoría, ya que esencialmente permite a los usuarios de WordPress 5.0+ continuar usando el nuevo editor sin problemas de estilo. También es compatible con versiones anteriores de WordPress (4.8+).

Recomendaciones de plugins

Clean Blocks recomienda una colección de complementos de funcionalidad de Catch Themes al activar el tema. Estos complementos manejan cosas como galerías, desplazamiento infinito, feeds de Instagram, widgets y tipos de contenido adicionales. La plantilla incluye docenas de opciones en el Personalizador para controlar casi todos los aspectos de cómo se muestra el contenido, desde la longitud del extracto hasta las categorías que se muestran en la página de inicio hasta el color del texto del encabezado. Este tipo de panel de opciones del Personalizador sobrecargado es común para los temas de estilo de usos múltiples, y muchos usuarios lo esperan.

Vea una demostración de la versión gratuita para ver todas las funciones en acción.

Plantilla fácil de personalizar

El nombre «Clean Blocks» implica que el tema va más allá de lo básico para personalizar la experiencia de Gutenberg, pero ese no parece ser el caso. La gran mayoría de las funciones que se ven en la demostración están controladas por el personalizador. Por ejemplo, las funciones como Testimonios y Servicios no están disponibles como bloques. Mientras que algunos autores de plantillas optan por integrar características como esta al combinar sus plantillas con complementos de colección de bloque, Catch Themes ha puesto todo en el Personalizador.

Incluso con la compatibilidad de Gutenberg, muchas plantillas aún tienen una desconexión entre la parte posterior y la interfaz, donde ciertas funciones solo pueden configurarse en el Personalizador. Esta experiencia de personalización fracturada es uno de los males necesarios para este tiempo de transición antes de que el editor de bloques sea capaz de manejar aspectos más complejos de la personalización del sitio.

Plantilla gratis WordPress multipropósito

Clean Blocks es un ejemplo de una plantilla multipropósito que esencialmente lo mantiene en la vieja escuela en términos de personalización del contenido, al tiempo que proporciona compatibilidad básica con Gutenberg para los usuarios que ejecutan WordPress 5.0 o superior. El tema está disponible en WordPress.org y ya se ha descargado varios cientos de veces durante su primera semana en el directorio.

Consulta SQL buscar clientes que han comprado un producto

Consulta SQL búsqueda de clientes por ID del producto

Consulta SQL buscar clientes:

Hoy os voy a dejar una consulta SQL que a mi particularmente me ha salvado en multitud de ocasiones. Seguramente si tenéis una tienda realizada en Prestashop desde hace mucho tiempo, os habréis encontrado con este problema, necesitáis saber que clientes han comprado un producto en concreto pero Prestashop no os lo facilita de ninguna forma sencilla.

Pues bien, aquí os dejo la siguiente consulta SQL:

SELECT c.firstname, c.lastname, c.email
FROM ps_orders o LEFT JOIN ps_customer c ON c.id_customer = o.id_customer LEFT JOIN ps_order_detail n ON n.id_oder = o.id_order
WHERE n.product_id = id;

A continuación os explico como podéis utilizar este código:

Desde vuestro panel de administración de Prestashop: Entrar en Parámetros avanzados/Gestor SQL, una vez estési dentro, arriba a vuestra derecha hacer clic en Añadir una consulta SQL y os aparecerá la siguiente pantalla:

A continuación en Consulta SQL, debéis incluir la consulta que os he puesto más arriba, una vez le hagáís clic en Guardar, vuestra consulta se habrá realizado correctamente.

Cómo diseñar para la web en 2019 / Nuevas tendencias

He escrito acerca de cómo diseñar para la web moderna antes de 2018, pero la web avanza rápidamente por lo que esas pautas ya están obsoletas y son obsoletas a medida que las convenciones más modernas se han generalizado.

Analicemos los principios de diseño más importantes para la web moderna en 2019

Deja que los usuarios sepan que tienes una aplicación móvil

Este sigue siendo el principio más importante y no deja de tener razón. Los grupos focales bien pagados han demostrado que lo primero que un usuario desea hacer cuando visita tu página web en su navegador es instalar una aplicación móvil.

La mejor manera de lograr esto es mostrar un diálogo que les solicite que la instalen.

Como paso opcional, puede agregar un botón o un hipervínculo para cerrar dicho cuadro de diálogo, pero es importante usar algún texto, preferiblemente que esté redactado de tal manera que avergüence al usuario para que cumpla con los requisitos.

Implementa una política de no seguimiento

Muchos navegadores modernos en estos días son compatibles con un encabezado HTTP llamado DNT que significa No rastrear. Este encabezado tiene la intención de indicar que un usuario no desea ser rastreado y, desafortunadamente, esto está habilitado de manera predeterminada en algunos navegadores.

Sin embargo, no te preocupes ya que no todo está perdido. Hemos encontrado que la mayoría de los usuarios eliminarán este encabezado cuando se le solicite hacerlo. Recomendamos que sirva una guía sobre cómo deshabilitarlo cuando el encabezado está presente.

Consejo : No sirvas el mensaje para deshabilitar DNT en la guía que muestra a los usuarios cómo deshabilitar DNT ya que la tasa de conversión termina siendo bastante pobre.

Implementando una Política de Cookies

El consentimiento de las cookies es confuso, mientras que en la mayoría de los casos no es necesario con un uso razonable de cookies, es mejor pedirle al usuario que lo autorice para que podamos rastrear todo sin temor a las repercusiones.

Consejo : No sirvas páginas sin cookies habilitadas, incluso cuando no las necesitamos, ya que significa que podemos rastrear menos información personal, por lo que tenemos menos información de usuario para vender.

Bloqueando los bloqueadores de anuncios

Los bloqueadores de anuncios están en todas partes y realmente pueden dañar tus márgenes, por lo que la precaución obvia a tomar es bloquear los bloqueadores de anuncios.

Chrome se está moviendo para bloquear los bloqueadores de anuncios, por lo que si el usuario usa un navegador como Brave, podremos decir que el navegador del usuario no es lo suficientemente moderno.

Consejo : No le cuente a nadie sobre Brave, el navegador de código abierto basado en Chromium con bloqueo de anuncios incorporado.

Maximizando tu diseño

Los días de 800 píxeles de ancho se acabaron. Las pantallas modernas tienden a ser de pantalla ancha, así que asegúrate de aprovechar todo el ancho del diseño.

Utilizar notificaciones

Los navegadores modernos admiten notificaciones, por lo que habilitarlas es una obligación, pero como alternativa también pueden también suscribir automáticamente al usuario a un boletín, notificaciones por SMS y / o notificaciones por correo electrónico.

Sugerencia : Usa estas notificaciones para avisar a los usuarios cuando tengas una nueva versión de la aplicación móvil disponible.

Preguntar al usuario

A veces, los usuarios olvidan que pueden registrarse, asegúrate de avisarles regularmente y presentar un enlace o botón de registro prominente.

Sugerencia : También puedes preguntar al usuario cuando esté a punto de abandonar tu página web o cuando el cursor del mouse lo abandone.

Permitir que el usuario opte por salir

Es muy importante que seamos amigables con el usuario y que no seamos intrusivos, lo que significa que debemos permitir que los usuarios desactiven nuestras solicitudes constantes y diálogos modales.

La mejor práctica aquí es colocar la configuración de exclusión voluntaria en un lugar donde el usuario la detecte fácilmente, ya que esto se encuentra dentro de una de las páginas de «preferencias de cuenta».

Usa JavaScript

Es un hecho conocido, todos los sitios web requieren de JavaScript.

Mientras podrías estar pensando, «Oh, es sólo texto sin formato». ¿Pero en el futuro? Para entonces, habrá muchos más, y te lo prometo ahora mismo. Cuando eso suceda, te arrepentirás de no haber convertido tu sitio web en una aplicación isomórfica utilizando el último marco que se ejecuta en una nube sin servidor.

Consejo : No renderices esta página con JavaScript.

7 reglas del diseño web que siempre hay que cumplir

Reglas del diseño web

El diseño web puede ser un mundo complejo. Está lleno de reglas, terminología y técnicas que rigen lo que hace que una página web excelente logre los objetivos para los que fue diseñada, y otra que no. Sin embargo, el diseño web puede ser complicado de dominar si no tienes la capacitación adecuada. A pesar de su complejidad, el diseño web se está convirtiendo en una habilidad cada vez más valiosa en nuestro mundo digital. Aprender sobre los fundamentos del diseño web te ayudará a construir y refinar la marca de tu empresa.

1. Evita los problemas de legibilidad

Si los usuarios no pueden leer correctamente el texto de tu página web, tu mensaje no se está difundiendo bien. Tener texto legible en tu página web es increíblemente importante, pero hay varios errores que los diseñadores novatos cometen para disminuir la legibilidad.

Las malas opciones de color del texto pueden ser fácilmente contraproducentes. Por ejemplo, una página web puede tener un texto blanco sobre un fondo de color claro, lo que puede dificultar su lectura. Del mismo modo, tener texto oscuro sobre un fondo oscuro también dificulta la lectura. El texto colocado sobre una imagen (como un banner) también puede dificultar su interpretación.

Para evitar esto, usa el contraste de color apropiado. Utiliza texto oscuro sobre el fondo blanco o texto claro sobre un fondo oscuro. Si bien ambas son buenas opciones, el texto oscuro sobre un fondo claro tiende a proporcionar el mejor contraste, pero es más tenso para los ojos cuando se lee durante un largo período de tiempo. Si estás colocando texto sobre una imagen, usa una superposición para aumentar el contraste entre el texto y la imagen. Una superposición oscura ayudará a que el texto de color claro sobresalga, mientras que usar una superposición de colores más claros hará que el texto oscuro aparezca.

Además, sería mejor si eligieras fuentes que sean fáciles de leer y no demasiado pequeñas. Una fuente complicada que está escrita en cursiva o con serif puede ser extremadamente difícil de leer, especialmente para usuarios mayores. Si el texto es demasiado pequeño, te encontrarás con el mismo problema. Elige fuentes claras, sans-serif y tamaños de letra grandes para mejorar la legibilidad de tu página web.

2. Aplicar jerarquía visual

Otro concepto fundamental en el diseño web es la idea de jerarquía visual. Este es el orden en que un usuario procesa la información en una página web .

Hay una serie de técnicas que puedes utilizar para facilitar a los usuarios la comprensión de la jerarquía de tu contenido, como el uso de diferentes tamaños de fuente y color. Por ejemplo, el título del artículo que estás leyendo en este momento es mucho más grande que el título de la sección. Además, el encabezado de esta sección es más grande que la fuente del texto. Esto se debe a que queremos que los usuarios lean el título primero y luego se muevan hacia abajo en la página. Los diferentes tamaños de nuestros títulos, encabezados y texto ayudan a guiar a los espectadores a medida que interactúan con nuestro contenido.

El color es útil para establecer la jerarquía visual también. Por ejemplo, los botones en una página de inicio que les dicen a los usuarios que deben «registrarse» o «comprar ahora» pueden ser de un color más brillante que los otros colores de la página. Los enlaces también pueden tener un color diferente al del texto normal.

Piensa en cuál es tu objetivo final para tu sitio web. ¿Quieres que los usuarios compren tus productos? ¿Quieres que se registren a tu newsletter? ¿Programar una consulta gratuita? Cualquiera que sea el caso, puede utilizar la jerarquía visual para guiar a los usuarios hacia los puntos de venta de tu página web.

3. No utilices muchas fuentes diferentes

Mientras estamos en el tema de las fuentes, se debe tener en cuenta que la regla general es utilizar tres fuentes o menos. Muy a menudo, una fuente es suficiente. En pocas palabras, tener demasiadas fuentes hará que tu página se vea desestructurada y poco profesional, por decir algo.

También debes asegurarse de que tus opciones de fuente sean cohesivas. Además, deben ser apropiadas para tu industria y el mensaje que estás tratando de transmitir. Las fuentes Sans serif son particularmente útiles para transmitir una imagen moderna y también son ideales para productos digitales (como eCommerces). Evita las fuentes exageradas, infantiles o no profesionales a toda costa.

4. Tener una CTA visible

Una de las primeras cosas que los usuarios deberían ver cuando visitan tu sitio web es una llamada a la acción (CTA). Por lo general, este es un botón en la página principal de tu pagina que les dice «Compre ahora», «Obtenga más información» o «Programe una consulta». Su CTA es tu punto de venta e impulsará el compromiso del cliente.

Algunos sitios web entierran su CTA en la parte inferior de la página u olvidan incluirla en absoluto. Ya que el CTA genera la respuesta del cliente que está buscando, asegúrate de que sea uno de los primeros elementos que alguien vea.

5. Incluye tu información de contacto

Parece obvio, ¿verdad? Pues te sorprenderías de cuántas empresas se niegan a incluir su información de contacto en sus páginas web. Una de las razones principales por las que los visitantes visitan tu sitio es ponerse en contacto con tu empresa. Si no pueden encontrar la información que están buscando dentro de los primeros segundos de visitar tu página, se irán.

Por este motivo, asegúrate de incluir información de contacto clara y fácil de encontrar en tu sitio web. Asegúrate de incluir cosas tales como:

Tu número de teléfono
Dirección comercial de tu empresa
La dirección postal de tu empresa, si es diferente de la dirección comercial
Direcciones de correo electrónico de los contactos clave (o al menos una dirección de correo electrónico genérica)

También puedes configurar un formulario de contacto en tu página web para que los usuarios completen y envíen consultas. Sin embargo, aún debes incluir tus detalles completos de contacto, como tu número de teléfono y direcciones físicas. Recuerda que algunos usuarios preferirán llamarte o visitar tus instalaciones. El porcentaje de usuarios que prefieren usar mecanismos de contacto «tradicionales» variará según el tipo de usuarios a los que se dirige. Cuanto más fácil sea para que las personas se comuniquen contigo, más eficaz será tu web.

6. Evitar las distracciones automáticas

Si bien el video, el audio y otras formas de medios digitales pueden agregar vida y compromiso a una página web, evita la función de reproducción automática. Incluir un video o audio de reproducción automática en tu web puede dificultar que los usuarios naveguen por tu sitio. Además, estas características pueden dificultar la búsqueda de la CTA.

Además, la reproducción automática de audio o video puede ser molesta y frustrante para los espectadores. ¿Alguna vez has abierto un enlace a una página web en tu teléfono, solo para que el audio alto proveniente de un video incorporado comenzase a reproducirse de repente? Esto no solo puede ser discordante, sino que los videos en reproducción automática también pueden ser incómodos y vergonzosos si estás en público.

La solución a esto es bastante sencilla. En lugar de habilitar las funciones de reproducción automática, simplemente permita a los usuarios hacer clic en el botón de reproducción.

7. Corrección, Corrección, Corrección

¿Alguna vez has estado navegando por una página web y has encontrado un error tipográfico deslumbrante? Ese error tipográfico puede sacarte del contenido del sitio web y hacer que pienses más en el error que la compañía dejó de cometer. Si bien los elementos visuales de un sitio son cruciales para su diseño general, el texto es igualmente importante (si no más).

Los accidentes de puntuación, así como los errores gramaticales y ortográficos, pueden disminuir la credibilidad de tu empresa. Mientras que unos pocos errores tipográficos de vez en cuando no necesariamente significan un desastre, muchos errores a lo largo del tiempo pueden dañar la imagen profesional que intentas crear.

Cuando diseñes tu sitio web final, asegúrate de tomarte un tiempo adicional para revisar todas las secciones. Haz que un colega o dos también lo revisen, en caso de que accidentalmente se haya perdido algún error. Tan pronto como veas un error tipográfico, corrígelo! Asegúrate de mantener tu página web limpia y libre de todos los errores para que no distraigan de tu diseño y contenido.

El diseño web es una habilidad compleja de dominar, y tal vez uno podría decir que es mejor dejarlo en manos de los expertos. Sin embargo, si realizas el trabajo tú mismo, la familiaridad con estas reglas te permitirá saber qué funciona y qué no funciona cuando evalúas la calidad y la eficacia de tu página web.

Como la fuente Gotham conquistó el mundo del diseño

Nacimiento de la Fuente Gotham

Cuando cierro los ojos y pienso en una palabra, me imagino esa palabra con la fuente Gotham. Estoy maldito por la necesidad compulsiva de identificar cada tipo de letra con el que me encuentro, pero incluso si no sufres esta aflicción en particular, si su relación con la tipografía se parece a su relación con el aire, una interacción constante tan perfecta que casi no lo piensa, a menos que suceda algo. Muy mal, ya sabes esta fuente. Si navegas online, has visto una cartelera, has ido a una sala de cine o has caminado por la calle con los ojos abiertos, has visto a Gotham.

Gotham es un tipo de letra diseñado por primera vez en 2000 para GQ y lanzado para uso público en 2002. Una lista abreviada de dónde ha aparecido incluye: Spotify; Netflix; Universidad de Nueva York; Programas de televisión que incluyen CONAN y Saturday Night Live ; películas que incluyen Inception , Moneyball , The Lovely Bones y Moonlight . Si los anuncios en las estaciones de tren y en las paradas de autobús de su ciudad no usan Gotham, probablemente usen un aspecto similar a Gotham.

Gotham está en todas partes , como sugiere el nombre de una de las cuentas de Tumblr dedicadas a rastrear su prevalencia, pero ¿cómo llegó a ser tan ubicuo? ¿De qué manera se adquiere un tipo de letra tan exhaustivamente en tan poco tiempo, y qué les gusta a los anunciantes de todas las industrias?

Una fuente sans serif

Las respuestas más simples son las técnicas. Gotham es un sans serif sans serif sans serif, lo que significa que le faltan los pies pequeños en las esquinas de las letras que se ven en un tipo de letra como Times New Roman y geométricas que aluden a la influencia de las formas básicas en su diseño. Tiene una altura x alta, lo que significa que las letras minúsculas como xey son comparativamente grandes, y sus diferentes pesos (negrita, delgada, mediana, etc.) son muy distintos entre sí. Todo esto es para decir que Gotham se puede leer fácilmente a distancia en una cartelera o cartel, lo que la convierte en una opción natural para la publicidad impresa.

Las raíces de esta tipografía

De hecho, Gotham encuentra sus raíces tipográficas en gran parte de la señalización arquitectónica del siglo 20 que se encuentra comúnmente en la ciudad de Nueva York. Por extraño que parezca, la señalización geométrica en la puerta principal de la Autoridad Portuaria (no es un lugar que muchas personas asocian con la moda) sirvió de inspiración para el creador de Gotham, el titán de la industria tipográfica Tobias Frere-Jones.

“El objetivo era encontrar una voz sencilla, incluso clara”, me dijo Frere-Jones por correo electrónico, “y las letras de la Terminal de autobuses de la Autoridad Portuaria fueron un ejemplo prometedor de esa voz. También me preocupaba hacer nuevos sans geométricos cuando ya hay tantos … esperaba que esta fuente no tipográfica pudiera producir algo memorable en un campo tan abarrotado «.

También está la cuestión del estilo más nebulosa y abarcadora. Gotham ha sido descrito por Frere-Jones como «fresco» y «masculino» (después de todo, estaba destinado inicialmente a GQ ); Michael Beirut, quien diseñó el logotipo de Hillary Clinton 2016, una vez lo describió a Newsweek como una «fuente elegante, intencionalmente no elegante, muy sencilla y sencilla».

¿Una fuente masculina o femenina?

Es difícil desentrañar lo que se refiere a la distinción de una tipografía como “masculina”: En el contexto de GQ , la franqueza y la autoridad sencillas de Gotham ciertamente se pueden leer como masculinas, especialmente en sus pesos más pesados, pero en los pesos más ligeros, combinados con la paleta de colores correcta, se podría leer fácilmente como una tipografía elegante y femenina. ¡Es una fuente que oscila en ambos sentidos!

Tal vez esa combinación de elegancia y sencillez es el factor más crucial en su ascenso a la prominencia. Gotham es, de muchas maneras, una pizarra en blanco, que se puede usar con estilo en una amplia variedad de contextos, mientras que impregna su entorno con un poco de elegancia «plainspoken» realista.

El fenómeno de Gotham

Pero lo que hace que el fenómeno de Gotham sea extraordinario es la forma en que se ha utilizado en innumerables industrias para innumerables productos y marcas, mientras que trasciende su asociación con cualquiera en particular. Si te mostrara una oración escrita en Jubilat o Myriad Set Pro, las cuales tienen algunas similitudes de construcción de letras con Gotham a pesar de parecer muy diferentes, es probable que las reconozcas como las fuentes utilizadas por Bernie Sanders y Apple, respectivamente.

Pero es probable que no identifiques inmediatamente a Gotham como «la fuente de Obama», o «la fuente de Saturday Night Live » o «la fuente de Spotify», ¿lo harías? En su universalidad, Gotham se resiste a ser encasillado, lo que le permite ser usado por una marca importante después de una marca importante sin volverse obsoleto.

Imitadores y progenitores

En las casi dos décadas desde la llegada de Gotham, el ya bien poblado campo de sans serifs reducido ha visto una explosión en el mundo de la publicidad. Los imitadores de Gotham, incluidos Raleway, Montserrat y Gibson, han asumido el manto de los sans serifs limpios y directos, junto con los progenitores de Gotham como Avenir y Proxima Nova.

«El péndulo nunca se detiene», dijo Frere-Jones. “La ola de sans serifs reducida ya está comenzando a mostrar su edad, y algunas identidades corporativas ya se están alejando de ella. Pero ser limpio y directo nunca pasa de moda, incluso si necesita una nueva expresión «.

Descarga modulo

Hello Theme, nueva plantilla para Elementor Page Builder

El constructor de páginas Elementor lanzó recientemente la plantilla Hello en WordPress.org. Después de unos pocos días en el directorio, el tema ya tiene más de 10,000 instalaciones activas. Es en esencia una plantilla en blanco que ofrece compatibilidad al 100% con Elementor.

Los diseñadores de plantillas para WordPress con una gran base de usuarios están en una posición única para influir en el mercado de plantillas para wordpress. Los usuarios a menudo seleccionan un diseñador de plantillas antes de elegir la propia plantilla sobre todo si cuentan con compatibilidad con su complemento preferido. Elementor no es una excepción, con más de 2 millones de instalaciones y una calificación promedio de 4.8 estrellas en WordPress.org.

Últimamente, la tendencia con algunas de las plantillas de WordPress más populares e intuitivas es ofrecer un diseño de nicho sólido y listas para usar, donde los usuarios no tienen que elegir demasiadas opciones o jugar con la configuración. Hello theme toma una ruta diferente, operando como un conducto más a la biblioteca de plantillas de la página Elementor.

La captura de pantalla del tema muestra una página de inicio diseñada en Elementor, pero la plantilla real tiene muy pocos estilos y no se parece a nada fuera de la caja.

Primeros pasos con la nueva plantilla

Una vez instalado, el primer paso es crear una página y seleccionar «Editar en Elementor». Desde allí, los usuarios pueden seleccionar de una biblioteca diferentes plantillas o comenzar a crear sus propios diseños desde cero.

Hello theme no es una plantilla nueva del todo. Elementor lo lanzó por primera vez en GitHub en marzo de 2018. Al hospedarlo en WordPress.org, los usuarios pueden instalarlo más fácilmente y obtener actualizaciones automáticas para mejoras y correcciones de seguridad.

«El repositorio de complementos jugó un papel muy importante en el excepcional crecimiento de Elementor, y tenemos muchas esperanzas similares para Hello theme», dijo Benin, miembro de la CMO de Elementor.

Inconvenientes de Hello theme de Elementor

Existen algunos inconvenientes importantes en el uso de la plantilla Hello que pueden dificultar su crecimiento potencial. El acceso a encabezados, pies de página y widgets está restringido a los usuarios de Elementor Pro. Esto parece una forma confusa de construir un sitio de WordPress y podría ser un detalle útil para incluir en la descripción del tema en WordPress.org. Si hay otra forma de acceder a los encabezados y pies de página sin comprar Elementor Pro, no he podido encontrarlo.

Los propietarios de tiendas de WooCommerce deben ser conscientes de que Hello theme aún no ofrece soporte completo para los estilos de página de WooCommerce. Aunque la publicación anuncia que la plantilla tiene una compatibilidad «fuera de la caja» con WooCommerce, las páginas de la tienda son simples y poco atractivas. Un usuario comentó que las páginas de pago y de compra no parecen muy atractivas y preguntó si sería posible editar las fuentes y los colores con Elementor.

El representante de Elementor, Matan Naveh, respondió a múltiples preocupaciones sobre el soporte de WooCommerce y dijo que la compatibilidad total aún está en desarrollo.

Mejora en la carga

Algunos usuarios que cambiaron de la plantilla Astra, otra plantilla muy utilizada comúnmente por los usuarios de Elementor, han reportado disminuciones significativas (50%) en el tiempo de carga en sitios después de cambiar a la plantilla Hello. Elementor afirma que es «el tema de WordPress más rápido que se haya creado», pero las comparaciones de referencia publicadas no incluyen ningún tema conocido por su alto rendimiento.

Elementor está trabajando en la creación de una plantilla secundaria para Hello. Actualmente se encuentra en desarrollo en GitHub y el equipo está trabajando para que se apruebe para WordPress.org.

El objetivo principal del tema Hello es ofrecer compatibilidad con el creador de páginas, pero no se recomienda para usuarios que no estén utilizando Elementor.