Pablo Miki

Diseño web en Galicia

Contacto

Sin categoría

Currently browsing: Sin categoría
  • Como crear una buena ficha de producto en una tienda online

    Para elaborar y redactar una buena ficha de producto en cualquier ecommerce, se deben seguir los siguientes pasos:

    • Nombre del producto: Elige un título atractivo y descriptivo que resalte las características principales del producto
    • Imágenes: Utiliza imágenes de alta calidad pero bien optimizadas para el SEO (nombre, peso, dimensiones..)) y de diferentes ángulos para que los clientes puedan ver el producto desde diferentes perspectivas.
    • Descripción corta: Es el texto gancho que debe describir brevemente el productos de una forma atractiva y precisa.
    • Descripción larga: Proporciona una descripción detallada del producto, incluyendo sus características, beneficios y usos. Utiliza lenguaje claro y evita el uso de tecnicismos.

    Con respecto a tu ficha de producto, debería contar con:

    • Utilizar una estructura clara y ordenada: La ficha debe estar organizada de manera lógica, con una estructura que permita a los clientes encontrar la información que necesitan de manera rápida y sencilla.
    • Especificaciones: Incluye información técnica relevante del producto, como sus dimensiones, peso, materiales, etc.
    • Precio: Indica el precio del producto de forma clara y visible.
    • Opiniones: Permite a los clientes dejar sus opiniones sobre el producto.
    • Botones de compra: Proporciona botones claros y fáciles de encontrar para que los clientes puedan comprar el producto con facilidad.
    • Opciones: Ofrece opciones adicionales como colores, tamaños, personalizaciones, etc.
    • Garantías: Indica cualquier garantía o política de devolución del producto.

     

    «Cuanto más completas sean tus fichas de producto, mejor será tu posicionamiento y tus ventas.»

     

     

     

  • Accesibilidad Web en WordPress. Como hacer que tu web sea accesible para todos y cumplir requisitos del Kit Digital

    Es sin duda una de las búsquedas de moda entre programadores y diseñadores que entre otras cosas, deben cumplir la accesibilidad doble A (AA) en los proyectos que van saliendo mediante del famoso Kit Digital. Para mi también está siendo un reto importante por lo que mientras investigo, voy dejando aquí mi granito de arena a lo  que he encontrado..

    Qué es la accesibilidad

    La accesibilidad se refiere a la facilidad de uso de un producto, servicio o entorno para todas las personas, independientemente de sus características o habilidades. En el contexto de la tecnología, la accesibilidad se refiere a la capacidad de una página web o aplicación sea accesible y utilizable por el máximo número de personas, independientemente de sus conocimientos, capacidades personales o las características técnicas del dispositivo de acceso empleado.

    Algunos ejemplos de consideraciones de accesibilidad incluyen la compatibilidad con tecnologías de asistencia, como lectores de pantalla, y la utilización de diseños y contenidos que sean fáciles de leer y navegar para todos los usuarios.

    A nivel internacional, el W3C promueve la progresiva adopción de directrices de accesibilidad en la Web, especialmente a través de su grupo de trabajo Iniciativa para la Accesibilidad Web (WAI).

    Los niveles de accesibilidad: criterios de conformidad A, AA y AAA

    La accesibilidad web se define según tres criterios de conformidad que establecen la norma WCAG 2.1: A, AA y AAA . En esta norma encontraremos cuatro principios fundamentales de la accesibilidad web que fijaran sus niveles: perceptible, operable, comprensible y robusto.

    Los niveles de conformidad A, AA y AAA se refieren a diferentes niveles de exigencia en cuanto al cumplimiento de estos principios. El nivel A es el mínimo exigido, mientras que el nivel AAA es el más exigente y ofrece la mayor accesibilidad para todos los usuarios.

    • Nivel «A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1;
    • Nivel «Doble-A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1 y 2;
    • Nivel «Triple-A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1, 2, y 3.

    La administración pública en España, al menos un nivel AA

    Para obtener al menos un nivel AA hay que cumplir cosas como: subtítulos para audios emitidos en vivo, posibilidad de visualizar el contenido en orientación horizontal y vertical, cambiar el tamaño del texto hasta en un 200 por ciento sin perder el contenido, los encabezados, las etiquetas o proporcionar sugerencias de corrección ante errores de entrada, entre otros, son imprescindibles para obtener una conformidad AA.

    Documentación:

    Directrices de accesibilidad WCAG 2.1

    Las directrices de accesibilidad WCAG 2.1 contemplan múltiples recomendaciones que afectan a variados aspectos de la presentación de la información en una Web. Las directrices básicas de estas recomendaciones se recogen en una lista de referencia rápida que incluye las recomendaciones más importantes:

    • Alternativas de texto: ofrezca alternativas de texto para cualquier contenido que no sea texto de forma que pueda ser interpretado del modo que precisen otras personas, tal como tamaño de letra extra grande, braille, texto hablado, lenguaje de signos o un lenguaje más sencillo.
    • Contenido alternativo al audio o video: ofrezca alternativas para cualquier información presentada exclusivamente a través de audio o vídeo. En el desarrollo Web, ciertos contenidos como las imágenes o los vídeos disponen de la posibilidad de incluir texto alternativo. En el caso de las imágenes, el atributo alt permite incluir una descripción del contenido de la imagen en modo texto, que los navegadores especialmente adaptados para personas con discapacidades visuales puede leer en voz alta. De igual forma, YouTube permite añadir archivos de subtítulos a los vídeos, de forma que las personas con discapacidad auditiva puedan leer sobreimpreso como texto el contenido de audio de los mismos. Amara.org ofrece una plataforma de uso gratuito muy interesante para la generación de archivos de subtitulado de vídeos, incluso en versiones multi-idioma, lo que permite que este contenido sea accesible para personas que no entienden la lengua empleada en la locución del vídeo.
    • Adaptable: se debe crear contenido que pueda ser presentado de formas distintas (por ejemplo en una maquetación más sencilla) sin perder la información o su estructura. Establecer tamaños de fuente relativos permite que los usuarios puedan configurar fácilmente el tamaño de letra con que se sienten más cómodos para la lectura, sin afectar a la presentación de los sitios Web.
    • Distinguible: haga más fácil para sus usuarios que vean u oigan el contenido, incluyendo el separar mejor la forma del fondo. En este sentido, ciertas tendencias estéticas que favorecen los tamaños de fuente reducidos o el uso de texto en gris sobre fondos blancos dificulta la lectura por parte de ciertas personas.
    • Accesible mediante el teclado: implemente las distintas funcionalidades para que se pueda acceder a ellas desde un teclado. Por ejemplo, los formularios pueden estar preparados para poder saltar de campo a campo mediante la tecla de tabulación, lo que hace más fácil su cumplimentación.
    • Suficiente tiempo: deje bastante tiempo para que sus usuarios puedan leer o usar adecuadamente el contenido.
    • Ataques: no diseñe contenido de tal forma que pueda ocasionar ataques, especialmente por el uso de ciertos contrastes de color en asociación con efectos de flash y parpadeo rápido de las imágenes.
    • Navegabilidad: ofrezca formas de ayudar a sus usuarios a navegar, encontrar el contenido y determinar dónde están dentro de su sitio Web. Los rastros de migas de pan, los URL semánticos, los mapas del sitio, etc. facilitan la navegación de los usuarios.
    • Entrada de datos: haga posible que sus usuarios puedan usar distintos tipos de dispositivos de entrada además del teclado.
    • Legibilidad: asegúrese de que el contenido de texto es legible y fácilmente comprensible para sus usuarios. Aspectos como el contraste y la posibilidad de variar el tamaño de las fuentes de letra, como ya hemos comentado, favorecen la legibilidad de los textos.
    • Predictibilidad: haga que sus páginas Web aparezcan y funcionen de una forma predecible por sus usuarios. Use las convenciones establecidas en su página de inicio también en todas las secciones y páginas internas.
    • Autocorrección o ayuda en la entrada de datos: ayude a sus usuarios a evitar y corregir los errores que puedan cometer al interactuar con su página Web, rellenar formularios, seleccionar una opción… También hay funcionalidades que pueden ayudar a los usuarios al autorellenado de formularios cuando se detecta que los valores que esperan ciertos campos ya están disponibles en la memoria del navegador.
    • Compatibilidad: optimice la compatibilidad con los navegadores actuales y futuros incluyendo tecnologías de ayuda al usuario.

    ¿Cómo evalúo el nivel de accesibilidad web?

    Hay varias herramientas online para poder verificar de un modo rápido, aunque básico, el grado de adecuación de un sitio Web a las directrices de accesibilidad. Aunque cabe decir que ninguna de estas herramientas son 100% certificables, son orientativas. Nos sirven para saber cuáles serían los aspectos básicos para hacer nuestras páginas más accesibles.

    • Test de Accesibilidad Web : https://www.tawdis.net
    • HERA: Test de Accesibilidad Web: http://www.sidar.org/#probhera

     

    Recomendaciones básicas de accesibilidad Web

    El  W3C nos ofrece diez consejos básicos para crear webs accesibles:

    • Textos legibles: Usa tipografías que sean fácilmente legibles con un tamaño superior a los 15px.
    • Contenido adecuado, el mismo debe ser escaneable, es decir, que a simple vista se sepa que información voy a encontrar en él.
    • Evitar grandes párrafos: Los párrafos no deberían tener más de 5 líneas de longitud.
    • Texto resaltados no sólo con color: Si queremos resaltar un texto, no usar sólo el color, ya que personas con daltonismo, por ejemplo, no lo verán correctamente. Prueba con letras más grandes, imágenes, iconos…
    • Encabezados bien organizados jerárquicamente. Si vas a utilizar encabezados, que no sean simples textos con clase que alterar su diseño, utilizar correctamente los h1, h2…
    • Alt en imágenes y animaciones: usa el atributo «Alt» para describir la función de cada elemento visual.
    • Mapas de imagen: emplee mapas de imagen del lado del cliente y texto para las zonas activas.
    • Multimedia: proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
    • Enlaces con texto con sentido: use anchor text que tenga sentido aun leído fuera de contexto. Por ejemplo, evitar etiquetas como por ejemplo: «pincha aquí», «ver más»…
    • Organización de las páginas: use encabezamientos, listas y estructura consistente. Use hojas de estilo CSS para la maquetación y el estilo donde sea posible.
    • Figuras y diagramas: descríbalos brevemente en la página o use el atributo longdesc.
    • Scripts, applets y plug-ins: ofrezca contenido alternativo si las funcionalidades no son accesibles o no se les puede dar soporte.
    • Marcos: use el elemento noframes y títulos descriptivos.
    • Tablas: facilite la lectura línea a línea. Resuma.
    • Formularios: Debes asegurarte que cada elemento del formulario tenga la etiqueta correcta. Donde debe escribir su nombre, el mismo debe tener correctamente escrito la etiqueta (<label>) «Nombre».
    • Revise su trabajo: valide su código en W3C. Use las herramientas, puntos de comprobación y directrices de http://www.w3.org/TR/WCAG21/.

     

    Documentación y guías

  • Traducción al español de los mensajes de Contact Form 7

    Suele pasar que en muchos WordPress, sobre todo los que se crean con los instaladores que traen muchos hostings, los plugins y configuraciones vengan en inglés. Y esto pasa a menudo con el módulo de formulario más utilizado del mundo, el famoso Contact Form 7. Sobre todo con los textos de los formularios y los mensajes de error y de envío del formulario.

    Seguro que has llegado hasta esta web buscando las famosas traducciones de los mensajes, así aquí las tienes. Eso si, vas a tener que subirlas manualmente.

    Primero verás el título del campo en negrita, luego la versión en inglés, luego la «oficial» en español y luego (si aparece) la versión que suelo usar yo, porque me encaja más 😉

    El mensaje del remitente se ha enviado correctamente
    Thank you for your message. It has been sent.
    Gracias por tu mensaje. Ha sido enviado.
    Muchas gracias por contactarnos, tu mensaje ha sido enviado.
    
    Ha fallado el envío del mensaje del remitente
    There was an error trying to send your message. Please try again later.
    Ha ocurrido un error al intentar enviar tu mensaje. Por favor, inténtalo de nuevo más tarde.
    
    Han ocurrido errores de validación
    One or more fields have an error. Please check and try again.
    Uno o más campos tienen un error. Por favor, revísalos e inténtalo de nuevo.
    
    El envío se consideró spam
    There was an error trying to send your message. Please try again later.
    Ha ocurrido un error al intentar enviar tu mensaje. Por favor, inténtalo de nuevo más tarde.
    
    Hay términos que debe aceptar el remitente
    You must accept the terms and conditions before sending your message.
    Debes aceptar los términos y condiciones antes de enviar tu mensaje.
    
    Hay un campo que debe rellenar el remitente
    The field is required.
    El campo es obligatorio.
    
    Hay un campo cuyo contenido es más largo que la longitud máxima permitida
    The field is too long.
    El campo es demasiado largo.
    
    Hay un campo cuyo contenido es más corto que la longitud mínima permitida
    The field is too short.
    El campo es demasiado corto.
    
    La dirección de correo electrónico que ha introducido el remitente no es válida
    The e-mail address entered is invalid.
    La dirección de correo electrónico que has introducido no es válida.
    
    La URL que ha introducido el remitente no es válida
    The URL is invalid.
    La URL no es válida.
    
    El número de teléfono que ha introducido el remitente no es válido
    The telephone number is invalid.
    El número de teléfono no es válido.
    
    La carga del archivo ha fallado por alguna razón
    There was an unknown error uploading the file.
    Ha ocurrido un error desconocido al subir el archivo.
    
    El archivo subido no tiene un formato permitido
    You are not allowed to upload files of this type.
    No tienes permisos para subir archivos de este tipo.
    
    El archivo subido es demasiado grande
    The file is too big.
    El archivo es demasiado grande.
    
    La carga del archivo ha fallado por error de PHP
    There was an error uploading the file.
    Ha ocurrido un error al subir el archivo.
    
    El formato de fecha que ha introducido el remitente no es válido
    The date format is incorrect.
    El formato de fecha es incorrecto.
    
    La fecha es anterior al límite permitido
    The date is before the earliest one allowed.
    La fecha es anterior a la más temprana permitida.
    
    La fecha es posterior al límite permitido
    The date is after the latest one allowed.
    La fecha es posterior a la más tardía permitida.
    
    El formato de número que ha introducido el remitente no es válido
    The date format is incorrect.
    El formato de número no es válido.
    
    El número es menor que el límite permitido
    The date is before the earliest one allowed.
    El número es menor que el mínimo permitido.
    
    El número es mayor que el límite permitido
    The number is larger than the maximum allowed.
    El número es mayor que el máximo permitido.
    
    El remitente no ha introducido la respuesta correcta al cuestionario
    The answer to the quiz is incorrect.
    La respuesta al cuestionario no es correcta.