Cumplimiento, diseño, calidad del código y anuncios del mercado de materiales de HubSpot

Los proveedores de materiales en el mercado deben cumplir con los siguientes estándares establecidos por HubSpot al enviar temas (junto con las plantillas y módulos del tema). Estas normas se aplican a todos los materiales en el mercado. 

Los proveedores del mercado deben mantener su información de proveedor actualizada en todo momento. HubSpot se reserva el derecho de eliminar o anular cualquier anuncio de materiales donde la información del proveedor (como el correo electrónico o el sitio web) sea inexacta, faltante o ya no funcione.

En este momento, solo puedes enviar temas al mercado de materiales. Las plantillas y los módulos solo se pueden enviar como parte de un tema. Los temas no pueden usar características como HubDB y funciones sin servidor. Más información sobre los límites de los temas.

Los archivos de materiales de terceros deben cargarse en el CDN de HubSpot a menos que sean de una fuente confiable como JSDelivr, Google Hosted Libraries, CDNJS. Estos materiales se pueden agregar a la hoja de estilo usando la característica @import.

Nota: si estás incluyendo archivos en un módulo, debe usar los parámetros css_assets y js_assets en tu archivo meta.json (sección Archivos enlazados en Herramientas de diseño).

Los proveedores del mercado de materiales pueden ofrecer hasta 20 temas gratuitos, sin incluir los temas presentados a través del Programa Acelerador de Temas.

Todos los materiales deben contener una estructura de carpetas adecuada y estar agrupados en una carpeta principal, que debería describir el anuncio del producto. Por ejemplo, si estás construyendo un tema con nombre "SuperAwesome" para el mercado, tu estructura debe verse similar a la imagen de abajo.

Al crear URL de vista previa, debes usar tu propio nombre de dominio. No puedes usar el dominio proporcionado por HubSpot, que tiene la estructura:
[AccountID].hs-sites.com

A continuación, se presentan los requisitos que deben cumplirse al diseñar los materiales.

Sus materiales deben mostrarse correctamente en las resoluciones/anchos comunes de dispositivos móviles y de escritorio. Esto significa que los materiales deben mostrarse correctamente cuando se ven en pantallas móviles y de escritorio. Tu material no debe requerir que los usuarios tengan que desplazarse fuera de la página (a menos que este sea el comportamiento previsto del material) o causar resultados inesperados en diferentes navegadores.

 Se recomienda probar usando dispositivos físicos y diferentes navegadores, pero también puedes usar servicios de terceros, como:

• BrowserStack
• Responsinator
• Sauce Labs

Todos los materiales deben ser compatibles con los navegadores compatibles de HubSpot. Para obtener una lista completa, consulta este artículo de la base de conocimientos.

El diseño debe mostrar una alta calidad estética y un atractivo visual. A continuación, se muestran algunos ejemplos de estética de diseño deficiente que invalidarían un envío al mercado de materiales:

• Los diseños son demasiado similares a los elementos existentes: tu diseño se parece mucho a un anuncio existente y podría causar confusión a la hora de diferenciarlo.
• Espaciado, relleno, margen o alturas de línea inconsistentes en los elementos: tu diseño tiene un espaciado inconsistente entre los elementos, lo que hace que los usuarios no puedan discernir la visibilidad entre secciones o grupos de textos.
• Uso de imágenes inapropiadas, con marca de agua, pixeladas o sin licencia: tu diseño debe usar imágenes que sean apropiadas. Las imágenes que se encuentran a través de una búsqueda de "imágenes" en el motor de búsqueda no tienen licencia para uso público. Si buscas imágenes gratuitas, te recomendamos que leas nuestro post de blog sobre sitios de imágenes gratuitas.
• Uso de colores que no son complementarios: tu diseño debe contener un esquema de colores que sea estéticamente agradable. Al elegir esquemas de color, te recomendamos que pienses en los estándares de accesibilidad para crear un diseño inclusivo.
• Elementos mal alineados o con posición inconsistente: tu diseño debe tener un flujo visual lógico y no causar desorden visual. Un ejemplo de esto sería tener cuadros de texto flotantes que se superponen de manera no intencional en áreas donde no se espera que haya texto.

Debes usar convenciones de nomenclatura descriptiva al etiquetar tus materiales. Por ejemplo, si estás creando un módulo que permite a los usuarios mostrar imágenes en un formato de anuncio de galería con filtros:

• Nombre apropiado: Galería de imágenes con filtros
• Nombre inapropiado: Galería

Al crear plantillas, consulta la documentación de anotaciones de plantillas. Debes usar la anotación label, que controla la etiqueta que ven los creadores de contenido al elegir una plantilla de página en el flujo de creación de página.

Las etiquetas de módulo, las etiquetas de plantilla y las etiquetas de sección no deben incluir el nombre del material en la etiqueta. Por ejemplo, si tu tema se titula "Gizmo", la etiqueta no puede contener el nombre del tema, como "Gizmo-Slider". 

Más información sobre los requisitos de contenido de los módulos.

Todas las palabras, imágenes, medios y contenido predeterminado usado en el material deben coincidir con lo que se está promocionando en la página del anuncio del material y en el sitio de la demostración.

Por ejemplo, si el contenido de tus temas está orientado a bienes raíces con una demostración funcional, el usuario final debe recibir ese tema. Si al comprar, al usuario final se le entrega un tema centrado en la aptitud física, esto se consideraría una estrategia de señuelo y cambio, lo cual es inaceptable.

No está permitido enviar materiales con diferentes variaciones de lo siguiente:

• Variaciones de color: los materiales idénticos con diferentes esquemas de color no se contarán como materiales únicos. Por ejemplo, no puedes enviar un material con un tema de color azul y luego enviar una versión roja del mismo material.  
• Diseños de plantillas: enviar un material como "Página de destino con barra lateral derecha" y "Página de destino con barra lateral izquierda", donde la barra lateral se intercambia simplemente no equivale a instancias distintas y únicas de un material.
• Variación de contenido: presentar un material con contenido centrado en educación y enviar el mismo material con contenido centrado en bienes raíces no equivale a instancias separadas únicas de un material.

Los materiales no deben usar elementos de un anuncio de mercado de materiales existente. Cualquier material que se compró/descargó o es una versión clonada de un material que se compró/descargó del mercado de materiales será rechazado. 

Al incluir hojas de estilo o archivos JavaScript en tus temas, se recomienda usar la función require_css y la función require_js al incluir estos archivos. Se recomienda cargar JavaScript que bloquea la visualización en el pie de página para mejorar el rendimiento.

Al incluir hojas de estilo o archivos JavaScript en el módulo de un tema, recomendamos encarecidamente vincular estas dependencias de archivos al módulo. Más información sobre losrequisitos de calidad del código en los módulos.

Al aplicar IDS y clases, debes usar nombres apropiados y seguir una convención de nombres consistente. Hay muchas metodologías diferentes de convención de nomenclatura en la web. A continuación, se muestran algunos ejemplos:

• BEM: https://en.bem.info/methodology/naming-convention/
• ABEM: https://css-tricks.com/abem-useful-adaptation-bem/
• ITCSS: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
  • https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528

No deberías nunca diseñar tu contenido según las clases generadas por opción predeterminada que forman parte del marco estructural de tus sitios. Esto incluye, entre otras cosas, la siguiente lista de clases e ID que genera HubSpot en plantillas y módulos:

Las clases generadas por opción predeterminada de HubSpot siempre están sujetas a cambios. En su lugar, deberías usar clases personalizadas que se asignan a través de las herramientas de diseño en los campos de clase designados o a través del desarrollo local agregando una clase personalizada a las etiquetas de elementos.

No incluyas clases o ID personalizados dentro del contenido en el editor de texto enriquecido a través de la opción Código fuente. Las clases e ID agregados a través de esta opción pueden ser fácilmente anulados (ya sea directa o indirectamente) causando que se perciban problemas con tu material.

Tu material no debe incluir ningún código o elemento que no sea necesario para que el material funcione. Esto incluye pero no está limitado a:

• Hojas de estilo o scripts no utilizados 
• Código con comentarios 
• Código no utilizado

Hay una diferencia entre el código comentado y los comentarios en el código. Si proporcionas contexto en tu código con fines de aclaración, usa el delimitador de comentarios, ya que te permitirá comentar tu código sin que estos comentarios se muestren en las vistas Ver fuente o Inspeccionar de una página. Ver a continuación un ejemplo.

En tu tema, todos los módulos predeterminados de HubSpot deben tener un diseño y mostrarse correctamente en todas las plantillas enviadas.

Un tema, junto con sus plantillas y módulos, no debe mostrar ningún error en las herramientas de diseño o la consola del navegador. A continuación se muestra un ejemplo de errores dentro de las Herramientas de Diseño:

Tu anuncio, si utiliza materiales de terceros, debe cargarse a través de HTTPS para garantizar la seguridad adecuada. Del mismo modo, todo el código debe renderizarse correctamente cuando se visualiza a través de HTTPS. Esto es para evitar advertencias de contenido mixto en la consola del navegador y asegurarse de que todo el contenido se muestre correctamente.

Los siguientes son los requisitos al anunciar tu material en el mercado de materiales. HubSpot se reserva el derecho de modificar la información de envío de tu anuncio de materiales para cumplir con los siguientes requisitos.

Al nombrar tu material, asegúrate de usar un nombre único que ayude a que tu material se destaque. Lo siguiente no se permitirá al nombrar tu material:

• Uso de la palabra "tema", "módulo" o "sección" para identificar el tipo de material. Esto es innecesario, ya que ya nos aseguramos de categorizar los materiales por estos tipos. 
  • Ejemplos: “Tema de ejemplo”, “Módulo de acordeón fácil”, “Correo electrónico de envío único”
• El nombre de tu empresa. Los anuncios de materiales ya indican el nombre y la información del proveedor de materiales en la página de anuncio. 
  • Ejemplos: “Growth by HubSpot”, “Slider | HubSpot”, “HubSpot 's Super Easy Mailer”
• Número de versión. Nuestro mercado utiliza su propio sistema de control de versiones para los materiales publicados que se indica en el anuncio de materiales. 
  • Ejemplos: “Growth - 1.21”, “Growth v2”, “Growth 2-1”

Más información sobre la asignación de nombres de módulos y otros requisitos de contenido.

Las descripciones deben ser un resumen de tu material e incluir puntos de venta clave y cómo tu material puede ayudar a los compradores a lograr su objetivo. Al escribir descripciones para temas, no necesitas incluir una lista de los módulos o plantillas incluidos en el tema, ya que ya las enumeramos para ti en la página del anuncio de materiales.

Las imágenes para tu material deben mostrar tu propio material como el enfoque principal de la imagen. Al menos el 75% del contenido de una imagen debe mostrar tu material.

Tus imágenes no pueden contener ninguno de los siguientes elementos. Si lo hacen, los eliminaremos a nuestra entera discreción.

• Exceso de palabrería y/o slogans de marketing, texto o marca
  • Ejemplo: "¡Más de 100 características más soporte!" o superponer texto/marca sobre la imagen del material.
• Imágenes de personas (reales o ficticias) posando, señalando o sosteniendo objetos.
  • Ejemplo: usar una imagen de reserva de una persona que sostiene una computadora con tu material en la pantalla.
• Insignias y/o banners que contengan información relacionada con revisiones e instalaciones de tus materiales, niveles o insignias de socios de HubSpot (si corresponde) o calificación del rendimiento del sitio web. Estos tipos de datos pueden fluctuar y tener el potencial de engañar a otros. Si eres partner de HubSpot y deseas mostrar tu nivel de partner y/o insignia, asegúrate de que sea la versión más reciente.

Asegúrate de usar imágenes de tamaño completo de tu material para mostrar cómo se ve y cómo funciona. Las siguientes dimensiones de imagen son muy recomendables para la mejor experiencia de visualización de tu anuncio de materiales. 

• Imagen de miniatura:
  • Tamaño: mínimo 480px x 360px (relación 4:3)
  • Formatos: JPG, JPEG, PNG
• Imágenes temáticas:
  • Ancho mínimo: 1160px
  • Formatos: JPG, JPEG, PNG
• Imágenes destacadas: 
  • Tamaño: mínimo 480px × 360px (relación 4:3)
  • Formatos: JPG, JPEG, PNG
• Ejemplos de clientes:
  • Tamaño: mínimo 480px x 360px (relación 4:3)
  • Formatos: JPG, JPEG, PNG

Tu video de demostración debe mostrar tu material en acción y transmitir casos de uso adecuados. Los videos deben estar en formato mp4 y se recomienda usar una relación 4:3 o 16:9 para una visualización óptima.

Los títulos de características se muestran en la vista de anuncio en el mercado de materiales y son una de las primeras cosas que ven tus clientes potenciales.

Utiliza la sección de características para resaltar las características clave que contiene tu material. También debes explicar cómo tu material puede ayudar a resolver ciertos problemas o casos de uso para compradores potenciales. Dentro de la sección de características, puedes usar imágenes basadas en marketing para transmitir conjuntos de características. Por ejemplo, usar un collage de imágenes que muestren estilos de botones.

HubSpot proporciona un conjunto de etiquetas predeterminadas para asignar a tu tema. Si una etiqueta en particular no está disponible, puedes agregar una nueva etiqueta.

Al elegir etiquetas de búsqueda para tus materiales:

• Use etiquetas que reflejen con exactitud el material que se está anunciando.
• No puedes usar etiquetas que contengan lo siguiente:
  • Nombres de empresas como HubSpot o Ejemplo de empresa.
  • Términos relativos como "mejor calificado", "mejor" o "número uno".
  • Etiquetas que describen el tipo de material, como "tema", "módulo" o "correo electrónico", ya que están implícitas en función del tipo de material que se está viendo.
  • Blasfemia o lenguaje despectivo.

Los ejemplos de clientes (es decir, sitios web funcionales de sus clientes) son importantes para que los clientes vean cómo otras empresas utilizan tu material. Permite a los compradores potenciales tener una idea de cómo usar tu material y también ver qué tan personalizable puede ser. Se recomienda asegurarte de tener permiso por escrito de tus clientes para enlazar a tu sitio web. Si lo solicita, haz que el permiso por escrito de tu cliente esté disponible para verificación.

HubSpot se reserva el derecho de rechazar materiales por razones no indicadas anteriormente. En todos los casos, si se produce un rechazo, un ingeniero de aseguramiento de calidad (QA) de HubSpot proporcionará comentarios por correo electrónico.

Los materiales deben aprobarse dentro de 3 reenvíos o serán rechazados automáticamente. 

Nuestros ingenieros de QA trabajan a partir de una serie de materiales enviados. Los materiales que no pasan el QA se moverán al final de la cola cuando se vuelvan a enviar. Tampoco podemos proporcionar información sobre la posición de tus materiales o el plazo para su revisión en la cola debido a la fluctuación del volumen de materiales enviados. Seguir nuestras instrucciones para enviar tus materiales ayudará a garantizar que tu material pase por primera vez en nuestro proceso de control de calidad. 

Los proveedores del mercado de materiales son responsables de todos los códigos y archivos que se cargan. Deben respaldar su propio trabajo durante la duración del anuncio en el mercado si hay algún problema con su código o archivos.

No está permitido que los proveedores del mercado de materiales y su equipo (incluidos otros en su empresa que no hayan trabajado en tu material) revisen sus propios anuncios.

Los proveedores del mercado de materiales deben poder proporcionar un recibo detallado si lo solicitan, este recibo debe incluir:

• Nombre del anuncio de materiales
• Descripción del anuncio de materiales
• Fecha de adquisición del material
• Nombre del material
• Información fiscal del IVA (si corresponde)
• Información de la empresa proveedora del mercado de materiales

HubSpot se reserva el derecho de eliminar anuncios del mercado por razones que incluyen, pero no se limitan a:

• El material contiene errores
• Materiales de terceros en la pausa de envío
• El material no es compatible con los navegadores compatibles con HubSpot (Sección 2.1.2).
• Uso de material con derechos de autor, como imágenes, iconos, fuentes, audio y video, que no estén autorizados para la distribución
• Materiales que hacen seguimiento a usuarios sin su consentimiento informado y de inclusión voluntaria explícita.
• Materiales (incluido el enlace al contenido del Mercado de materiales o de demostración de materiales) que incluye:
  • Promoción de o interacción con actividades ilegales
  • Contenido despectivo, despreciativo y/o malintencionado 
  • Reclamaciones deshonestas o falsas
  • Contenido ofensivo sobre la raza, la religión, la edad, el sexo o la orientación sexual
• Los módulos se eliminarán si el módulo afecta a otros elementos de la página/correo electrónico (consulte nuestros Requisitos de Módulos, sección 5 sobre calidad de código)

Respetamos los derechos de propiedad intelectual de los demás y esperamos que proveedores de materiales usuarias también lo hagan. Podemos, a discreción, suspender el acceso o cerrar las cuentas de proveedores de materiales que infrinjan los derechos de propiedad intelectual de otras personas. Por favor, no envíes ningún material (es decir, temas, plantillas y módulos) que se basen en el material de un tercero a menos que tengas permiso para usar ese material del propietario de los derechos de autor. Además, no envíes ningún material que incorpore los logotipos de otras empresas a menos que obtengas su permiso. Si compras cualquier material (ya sea individualmente o como parte de otro producto) a través de mercados de terceros y los modificas para que funcionen con productos de HubSpot, asegúrate de que eres el propietario de los derechos de autor del material o tienes una licencia subyacente que permite que el material se venda y/o distribuya en mercados de terceros como el nuestro. De lo contrario, es posible que no aprobemos ese material. Si crees que tu trabajo ha sido copiado de una manera que constituye una infracción de derechos de autor en nuestro mercado de materiales, sigue los pasos descritos en la sección Reclamaciones por infracción de derechos de autor en nuestra página de Términos de uso del sitio web.

Los materiales no deben incluir imágenes de la integración de Shutterstock de HubSpot.

HubSpot ofrece dos opciones de portal de pago que se pueden conectar a tu cuenta de proveedor del mercado de materiales. Estas son Stripe y PayPal. HubSpot recomienda a los proveedores del mercado de materiales que utilicen el Stripe Payment Gateway si está disponible en su país. Si Stripe no está disponible en tu país, recomendamos usar el portal de pago de PayPal.