Buscar:

104 CUBES. Think With Four Fingers

Como dice el diseñador Rafa Cáccamo en su blog, nuestro nombre 104 CUBES hace referencia a «Las 104 teclas estándar del teclado universal unificadas con la definición inglesa de 104 CUBES acercándose al imaginario profesional y particular.»

En primera instancia nuestro eslogan «Think With Four Fingers» dice algo más que una mera referencia a los cuatro dedos que los programadores solemos utilizar casi constantemente. Tanto para las 104 CUBES que componen el teclado estándar como para malear el ratón que se convierte casi inevitablemente en nuestros cuatro dedos como extensión.

«Think with four fingers» es también una invitación a pensar con cuatro dedos, como una escala superior a «pensar con dos dedos de frente» y que se relaciona con la últimamente tan manida palabra anglosajona smart. «Piensa de forma inteligente». Esos dispositivos, los que llevan el prefijo smart son los que hacemos más smart. En realidad no creemos que los dispositivos sean más inteligentes: lo que pensamos es que ahora los usuarios, y nuestros clientes pueden tener una actitud más inteligente frente a ellos. Cada vez tienen más posibilidades y la inteligencia consiste en sacarle el máximo partido. El gran cambio que viene, no viene de parte de los dispositivos, sino de la actitud de los usuarios frente a ellos. Como decimos en nuestro post «De caja tonta a «Televisor Inteligente»

Think Smart es también lo mismo que Think With Four Fingers.

Los tiempos y la tecnología siguen cambiando, evolucionando, y dentro de unos años la referencia a las 104 teclas de un teclado serán un recordatorio de cómo hemos empezando y cómo pensando con más de dos dedos de frente hemos llegado a no necesitarlas. Un recordatorio necesario de que los inteligentes han sido empresas, usuarios, programadores y diseñadores. Aunque habrá también un tiempo en el que utilizar el teclado será exclusivo de los programadores.

accesibilidad Web
Esto basta para dar todo lo que necesita un usuario

Accesibilidad vs. Usabilidad web. Ambas se fusionan en la Smart TV

Ambos conceptos comparten el objetivo de mejorar la experiencia del usuario. La usabilidad se enfoca en la experiencia general, mientras que la accesibilidad se centra en garantizar que todos, independientemente de sus habilidades, puedan acceder y utilizar el sitio. Ambos son fundamentales para crear sitios web inclusivos y efectivos.

El diseño y desarrollo de aplicaciones para Smart TV plantea un desafío significativo al tratar de equilibrar la accesibilidad y la usabilidad. Aunque algunas de las principales aplicaciones de streaming, como Netflix, Rakuten y Amazon Prime Video, han logrado encontrar ese equilibrio, la complejidad inherente merece una reflexión detallada.

Accesibilidad: Abriendo Puertas para Todos los Espectadores

Enfoque en Experiencias Inclusivas:
La accesibilidad en aplicaciones para Smart TV implica considerar las necesidades de un amplio espectro de usuarios, incluidos aquellos con discapacidades visuales, auditivas o motoras. La implementación de tecnologías como la navegación por voz, descripciones de audio y subtítulos es esencial para garantizar que todos los espectadores tengan acceso a contenido de manera equitativa.

Ejemplos de Accesibilidad en Aplicaciones de Streaming:

  • Subtítulos Personalizables: Netflix permite a los usuarios personalizar el estilo y tamaño de los subtítulos para adaptarse a sus preferencias.
  • Descripciones de Audio: Amazon Prime Video ofrece descripciones de audio detalladas para mejorar la experiencia para usuarios con discapacidades visuales.

Usabilidad: Facilitando la Experiencia de Visualización

La Importancia de la Usabilidad en Smart TV:
La usabilidad se convierte en el núcleo de la experiencia del usuario al interactuar con aplicaciones en Smart TV. La interfaz debe ser intuitiva y eficiente, permitiendo a los espectadores encontrar y disfrutar del contenido de manera sencilla.

El Desafío de Encontrar el Equilibrio Perfecto:

  1. Adaptación a Diferentes Dispositivos:
  • Accesibilidad: Garantizar que la aplicación sea compatible con diferentes controles remotos y tecnologías de asistencia.
  • Usabilidad: Asegurarse de que la interfaz sea coherente y fácil de navegar en diversas marcas y modelos de Smart TV.
  1. Personalización sin Complicaciones:
  • Accesibilidad: Ofrecer opciones de personalización para adaptarse a las preferencias de los usuarios.
  • Usabilidad: Mantener la personalización simple y no abrumadora, evitando complicaciones innecesarias.
  1. Actualizaciones y Mejoras Continuas:
  • Accesibilidad: Integrar nuevas tecnologías de asistencia a medida que evolucionan.
  • Usabilidad: Implementar actualizaciones que mejoren la experiencia del usuario sin afectar la accesibilidad.

Conclusiones: Navegando por el Laberinto de Smart TV Apps

Desarrollar aplicaciones para Smart TV que logren un equilibrio armonioso entre accesibilidad y usabilidad es un desafío continuo. Tomar inspiración de líderes de la industria como Netflix, Rakuten y Amazon Prime Video puede proporcionar valiosas lecciones sobre cómo enfrentar este dilema complejo y ofrecer experiencias de visualización excepcionales para todos. En última instancia, el éxito radica en comprender las necesidades únicas de los usuarios y comprometerse con la mejora continua.

Accesibilidad Web. Consejos y Ejemplos de Código.

La accesibilidad web es crucial para asegurar que todos los usuarios, independientemente de sus habilidades o discapacidades, puedan acceder y disfrutar de tu contenido en línea. En este artículo, exploraremos estrategias para mejorar la accesibilidad en sitios web, desde prácticas generales hasta la integración de plugins y temas accesibles en WordPress.

1. Entendiendo la Accesibilidad Web:

La accesibilidad web implica diseñar y desarrollar sitios de manera que sean comprensibles, navegables y operables para todos los usuarios. Esto incluye aquellos con discapacidades visuales, auditivas, motoras o cognitivas. La Web Content Accessibility Guidelines (WCAG) establece estándares internacionales para garantizar la accesibilidad web.

2. Consejos Generales para WordPress:

  • Etiquetas Alt en Imágenes:
    Asegúrate de proporcionar descripciones claras y concisas para todas las imágenes utilizando la etiqueta alt. Esto ayuda a los usuarios con discapacidades visuales a comprender el contenido visual.
   <img src="imagen-ejemplo.jpg" alt="Descripción de la imagen">
  • Contraste en Colores:
    Garantiza un buen contraste entre el texto y el fondo para mejorar la legibilidad. Puedes utilizar herramientas en línea para verificar el contraste y ajustar los colores en consecuencia.
   body {
      color: #333;
      background-color: #fff;
   }

3. Plugins de Accesibilidad para WordPress:

  • WP Accessibility:
    Este plugin mejora la accesibilidad mediante la corrección automática de algunos problemas comunes. También permite a los usuarios controlar el tamaño del texto y ofrece opciones para desactivar estilos.
  • WP ADA Compliance Check Basic:
    Realiza una verificación automática de tu sitio en busca de problemas de accesibilidad según las pautas WCAG. Proporciona sugerencias para corregir posibles problemas.

4. Temas Accesibles para WordPress:

  • Astra:
    Astra es un tema popular y altamente personalizable que se adhiere a las mejores prácticas de accesibilidad. Su diseño limpio y estructura bien organizada facilita la navegación.
  • GeneratePress:
    GeneratePress es otro tema ligero y accesible que se enfoca en la velocidad y la accesibilidad. Cumple con los estándares WCAG y proporciona opciones de personalización avanzadas.

5. Ejemplos de Código para Mejorar Accesibilidad:

  • Enlaces Navegables:
    Asegúrate de que los enlaces sean descriptivos y fácilmente identificables. Esto beneficia a usuarios que utilizan lectores de pantalla.
   <a href="/pagina-importante" title="Ir a la página importante">Página Importante</a>
  • Menú de Navegación Accesible:
    Utiliza código semántico para estructurar menús de navegación. Esto ayuda a usuarios con discapacidades cognitivas y facilita la navegación.
   <nav>
      <ul>
         <li><a href="#">Inicio</a></li>
         <li><a href="#">Servicios</a></li>
         <li><a href="#">Contacto</a></li>
      </ul>
   </nav>

En resumen:
Mejorar la accesibilidad web en WordPress es esencial para crear experiencias en línea inclusivas. Desde la elección de temas accesibles hasta la implementación de plugins específicos, cada paso contribuye a hacer que tu sitio sea más accesible para todos. Adoptar estas prácticas no solo cumple con estándares éticos, sino que también mejora la experiencia de usuario para un público más amplio. ¡Haz tu parte para construir una web para todos!

12 Consejos de Usabilidad con CSS para tu Sitio Web


En el mundo del diseño web, la usabilidad es clave para ofrecer una experiencia positiva a los usuarios. Aquí te presentamos 12 consejos prácticos para mejorar la usabilidad de tu sitio utilizando CSS.

Google lo sabe

Estos ajustes no solo harán tu sitio más atractivo, sino que también contribuirán a su rendimiento, accesibilidad y al SEO!!

Pero ¿Qué se entiende por Usabilidad?

La usabilidad se refiere a la facilidad con la que los usuarios pueden interactuar con un servicio o sistema para lograr sus objetivos de manera eficiente.

Un sitio web con buena usabilidad permite a los visitantes encontrar fácilmente la información que buscan, realizar acciones sin confusiones y tener una experiencia fluida durante su sesión. Por ejemplo, un formulario de contacto con etiquetas claras, instrucciones concisas y retroalimentación inmediata sobre la correcta presentación de datos mejora la usabilidad al guiar al usuario de manera intuitiva.


  1. Diseño Responsive:
    Asegúrate de que tu sitio web sea compatible con diferentes dispositivos y tamaños de pantalla. Utiliza consultas de medios CSS (media queries) para adaptar el diseño según el dispositivo.
   @media only screen and (max-width: 600px) {
      /* Estilos para pantallas pequeñas */
      body {
         font-size: 14px;
      }
   }

Ten en cuenta otras posibilidades como Zoom o Utilizar porcentajes si se trata de pantallas de TV.

  1. Navegación Intuitiva:
    Crea una estructura de navegación clara y fácil de entender. Utiliza menús desplegables o de navegación que sean intuitivos, evitando la sobrecarga de opciones.
   <nav>
      <ul>
         <li><a href="#">Inicio</a></li>
         <li><a href="#">Productos</a></li>
         <li><a href="#">Contacto</a></li>
      </ul>
   </nav>
  1. Contraste y Legibilidad:
    Asegúrate de que el texto sea fácilmente legible. Utiliza colores de fondo y texto que tengan un buen contraste para mejorar la accesibilidad, especialmente para aquellos con discapacidades visuales.
   body {
      color: #333;
      background-color: #fff;
   }
  1. Velocidad de Carga:
    Optimiza las imágenes y utiliza técnicas de compresión para reducir el tiempo de carga de la página. La rapidez con la que se carga una página afecta significativamente la experiencia del usuario.
    Puedes herramientas de compresión de imágenes como TinyPNG para reducir el tamaño de las imágenes.
  2. Interactividad Responsiva:
    Haz que los elementos interactivos, como botones y enlaces, respondan rápidamente a las acciones del usuario. Utiliza transiciones y animaciones CSS para proporcionar retroalimentación visual.
   button {
      transition: background-color 0.3s ease;
   }

   button:hover {
      background-color: #3498db;
   }
  1. Formularios Amigables:
    Simplifica la entrada de datos en formularios. Utiliza etiquetas claras y colores para resaltar campos obligatorios o errores, y organiza los elementos de forma lógica.
   <label for="nombre">Nombre:</label>
   <input type="text" id="nombre" name="nombre" required>
  1. Compatibilidad con Navegadores:
    Verifica que tu diseño se vea y funcione correctamente en diferentes navegadores. Realiza pruebas cruzadas para garantizar una experiencia coherente.
  2. Accesibilidad:
    Cumple con las pautas de accesibilidad web (WCAG). Utiliza atributos alt en las imágenes, proporciona descripciones adecuadas y asegúrate de que el sitio sea navegable mediante el teclado.
   <img src="imagen.png" alt="Descripción de la imagen">
  1. Flexibilidad en la Fuente:
    Permite que los usuarios ajusten el tamaño de fuente según sus preferencias. Utiliza unidades relativas como porcentajes o em en lugar de unidades fijas.
   body {
      font-size: 1em;
   }
  1. Feedback Visual:
    Proporciona retroalimentación visual instantánea cuando los usuarios interactúan con elementos de la interfaz. Esto incluye cambios de color, efectos de sombra u otras transiciones.

    .boton { transition: color 0.3s ease; } .boton:hover { color: #27ae60; }
  2. Pruebas de Usuario:
    Realiza pruebas de usuario para obtener comentarios directos sobre la usabilidad. Observa cómo los usuarios interactúan con tu sitio y ajusta el diseño en consecuencia.
    La implementación de herramientas como Selenium o Jest puede facilitar las pruebas automatizadas.
  3. Mantenimiento Regular:
    Actualiza y mantiene tu código regularmente para evitar problemas de rendimiento y asegurarte de que tu sitio se mantenga compatible con las últimas tecnologías y estándares web.

Información interactiva en centros de trabajo

Las pantallas en industrias como la fabricación y la construcción se utilizan a menudo para informar a los trabajadores sobre los riesgos de seguridad, para instruirlos sobre cómo hacer su trabajo y para crear motivación en la consecución de objetivos. Los departamentos de recursos humanos y seguridad laboral agradecen la capacidad de llegar a los trabajadores con sus importantes informaciones que pueden agilizar en una comunicación en tiempo real.

La Pantalla Informativa es una tecnología que hace que el lugar de trabajo sea mejor y más eficiente. Un estudio realizado por la Organización para la Cooperación y el Desarrollo Económico encontró que la “presencia de pantallas aumentó significativamente el apoyo de los empleados a sus lugares de trabajo”, amueblando estructuras físicas con pantallas puede provocar sentimientos de “zonas” públicas más densas y sociables.

Las pantallas informativas en las industrias son parte del intento de gerencia y recursos humanos de hacer que cada paso cuente para el logro de las metas. Están tratando de asegurarse de que todos se desempeñen al máximo nivel y que no haya pérdida de tiempo debido a una comunicación ineficiente o procesos de trabajo ineficientes.

Las pantallas informativas se utilizan en diversas industrias y se están convirtiendo en una parte importante del entorno de trabajo. Estas pantallas se pueden utilizar para mostrar información que es crucial para el entorno de trabajo y la seguridad.

El primer uso de estas pantallas fue en la industria de la aviación. Esto se hizo principalmente para mostrar información sobre el clima, el estado del vuelo, la información del aeropuerto y otros mensajes importantes. Hoy en día, estas pantallas también se utilizan en hospitales, aeropuertos, escuelas y otros espacios públicos, y hay una creciente implantación en zonas estratégicas en fábricas.

En consecuencia, más eficiencia en el centro de trabajo.

IPTV. No sólo operadores.

La IPTV desbancará a la TDT y las plataformas desbancarán a las operadoras.

IPTV es una tecnología de la información que permite la entrega de contenido de televisión a través de una conexión de banda ancha a Internet. La IPTV, también conocida como Web TV, ofrece una experiencia de televisión en línea muy similar a la de la televisión tradicional, pero con la flexibilidad y conveniencia de Internet. 

La IPTV utiliza la tecnología de protocolo de Internet (IP) para transmitir contenido de televisión, lo que le permite ofrecer una experiencia de usuario más interactiva y personalizada. Algunas de las características más populares de la IPTV incluyen el acceso a la televisión en vivo, el video on demand (VOD), el catch-up TV, la TV personalizada y la interacción con otros usuarios a través de redes sociales. La IPTV está ganando terreno en todo el mundo, y España no es una excepción. 

Según un informe de la Comisión Nacional de los Mercados y la Competencia (CNMC), el número de hogares españoles con acceso a la IPTV se duplicó entre 2016 y 2017, y se espera que continúe creciendo a un ritmo similar en los próximos años. En Galicia, el número de hogares con IPTV también está en aumento. 

La TV por cable está descendiendo ya, junto con la tradicional en número de usuarios en términos relativos. Hay que tener en cuenta no sólo el valor obvio de las preferencias de los usuarios que se acercan al consumo de contenidos multimedia. Aparte hay que tener en cuenta que las aplicaciones IP tienen la capacidad de segmentar e incluso interactuar con el usuario, lo que provoca el número de horas diarias de consumo es mayor, lo que deja menos cabida en tiempo para el consumo de radio o TV tradicional, que es en lo que se basan los operadores.

Cada vez más los operadores se están convirtiendo en plataformas, creando sus propios contenidos lo que está creando la guerra del Streaming o como dice Elena Neira las Streaming Wars .

Pero la batalla está ahora en la información y el «live». Como no espabilen los tradicionales el mercado se les va a atomizar de tal forma que los nuevos usuarios van a tener problemas para identificar cuál es el grande. Tendiendo en cuenta además que la tecnología permite más resultados profesionales con mucho menos esfuerzos, y Youtube está consiguiendo que lo menos profesional lo parezca. Se está descubriendo cómo el streaming, sobre todo a través de la pandemia, llama la atención, se puso de moda, hasta el punto que las TVs e incluso los anuncios presentan a las personas como grabadas a través de un móvil, aún cuando no es necesario. Resulta que aparte de ser más barato, llama la atención. Youtube puso de moda ese estilo youtuber que ahora está de moda.

Importante decir que como siempre van a remolque y acaban paliando sus carencias con dinero procedente del Estado. Ejemplo: Los últimos 1400 M que les han dado el 2021. También con leyes: Se regalan espectros, leyes que impedirán correr tal o cual contenido dependiendo de la procedencia, obligación a los fabricantes de que ingesten por una vía principal tales IPs. Pero bueno, eso ya se verá.

un intento un poco burdo es el HBBTV, que encima no le saben sacar partido, ni ellos mismo creen en él y se gastan un dineral en el Loves TV (que yo lo uso) para poco uso. Para loo que sí está sirviendo es para que se vayan poniendo las pilas en las tecnologías ya que los costes son enormes y no es un problema que tengan las plataformas. Ellos sí.

Lo que está claro es que la TDT pierde terreno con los operadores, pero los operadores de TV pierden terreno con respecto a las plataformas. En USA ya hace tiempo que le dieron el sorpasso, aquí, falta muy poco. Esto lo demuestra el hecho de que hoy en día te puedes montar tu propia operadora de Internet y Televisión con tu propia marca con una inversión de 200 €. Eso suele ser el principio del fin, pero una buena oportunidad para entrar en el mercado y evolucionar o innovar en él.