Categoría: Diseño Web

  • No me hagas pensar, diseña con empatía

    No me hagas pensar, diseña con empatía

    Este finde además de algún documental de diseño me he pillado en la biblioteca dos libros de Steve Krug, el famosísimo «No me hagas pensar (Don’t Make Me Think)» y «Haz fácil lo imposible». Porque la experiencia de usuario del libro no la superará la pantalla. Son de los pocos libros de tecnología que puedes encontrar en los estantes de una biblioteca pública que a pesar de los años aún son útiles.

    No me hagas pensar de Steve Krug

    Porque ¿cuál crees que es el secreto de las webs que simplemente «funcionan»?

    ¿Alguna vez has aterrizado en un sitio web y te has sentido completamente perdido? Haces clic en un menú, luego en otro, intentando encontrar algo tan simple como un precio o un número de contacto, y la frustración crece con cada segundo. Todos hemos estado ahí. Por otro lado, hay webs que parecen leerte la mente: encuentras lo que buscas sin esfuerzo, como si fuera la cosa más natural del mundo.

    La diferencia entre estas dos experiencias no es casualidad. Se basa en principios de diseño fundamentales que, a menudo, son contraintuitivos. No se trata de tener el diseño más creativo o la tecnología más avanzada, sino de entender cómo piensan y actúan realmente las personas. Es un cambio de mentalidad: de diseñar para nosotros a diseñar con empatía.

    Nielsen y Krug, hagamos de Internet un lugar más fácil para todos

    En el universo de la experiencia de usuario (UX), dos nombres resuenan con especial autoridad: Jakob Nielsen y Steve Krug. Ambos son figuras influyentes que han dedicado sus carreras a un objetivo común: hacer que la web sea un lugar más fácil de usar para todos. Sin embargo, aunque su meta es la misma, sus enfoques y principios presentan matices distintos.

    La diferencia fundamental entre Nielsen y Krug radica en su punto de partida. Nielsen ofrece un marco de evaluación para expertos, mientras que Krug propone una filosofía de diseño basada en el sentido común, accesible para todos los implicados en un proyecto.

    Jakob Nielsen: El padre de la evaluación heurística

    El enfoque de Jakob Nielsen se basa en un decálogo de «principios heurísticos», un conjunto de reglas generales desarrolladas originalmente en 1994 a partir del análisis factorial de 249 problemas de usabilidad. Estos principios no son directrices específicas, sino reglas de oro que sirven como base para que los expertos en usabilidad realicen «evaluaciones heurísticas». Mediante este método de inspección, los evaluadores examinan una interfaz y juzgan su cumplimiento con dichos principios para detectar problemas potenciales de usabilidad. Su método, por tanto, es un marco deductivo, que parte de principios universales para aplicarlos a interfaces específicas.

    Steve Krug: El defensor del usuario

    La filosofía de Steve Krug se resume en una frase lapidaria que se ha convertido en su primera y más importante ley de la usabilidad: «¡No me hagas pensar!». Su enfoque no es un checklist técnico, sino un principio rector de sentido común dirigido a todos los que participan en la creación de un producto digital. La idea central es reducir la carga cognitiva del usuario al mínimo absoluto, asegurando que cada paso en una interfaz sea autoevidente e intuitivo. Su filosofía es, en esencia, un marco inductivo, que extrae una verdad fundamental a partir de la observación directa y empática del comportamiento real del usuario.

    Tabla Comparativa de Enfoques

    CaracterísticaEnfoque de Jakob NielsenEnfoque de Steve Krug
    NaturalezaUn conjunto de 10 principios heurísticos formales.Una filosofía central: «¡No me hagas pensar!».
    Audiencia PrincipalExpertos en usabilidad para realizar evaluaciones.Todos los implicados en un producto digital (diseñadores, marketing, etc.).
    Foco PrincipalEvaluar la calidad y el cumplimiento de una interfaz.Reducir la carga cognitiva y comprender el comportamiento real del usuario.
    MétodoBase para la inspección y evaluación de interfaces.Guía para el diseño intuitivo y la realización de tests de usuario sencillos.

    El Decálogo de Nielsen: Las 10 Reglas Heurísticas de Usabilidad

    Los principios de Nielsen son reglas generales para el diseño de interacción que han demostrado su validez a lo largo de décadas.

    1. Visibilidad del estado del sistema: El sistema debe mantener siempre informado al usuario sobre lo que está ocurriendo (ej., una barra de progreso al cargar un archivo).

    2. Relación entre el sistema y el mundo real: El sistema debe hablar el lenguaje del usuario, con palabras y conceptos que le resulten familiares.

    3. Control y libertad del usuario: Los usuarios deben poder deshacer o rehacer una acción y disponer de una «salida de emergencia» para abandonar un estado no deseado.

    4. Consistencia y estándares: Los usuarios no deben tener que cuestionarse si diferentes palabras, situaciones o acciones significan lo mismo.

    5. Prevención de errores: Es mejor un diseño cuidadoso que evite que los problemas ocurran en primer lugar.

    6. Reconocimiento antes que recuerdo: Minimizar la carga de memoria del usuario haciendo visibles los elementos, acciones y opciones (ej., mostrar los elementos vistos recientemente en un e-commerce en lugar de obligar al usuario a recordarlos).

    7. Flexibilidad y eficiencia de uso: El sistema debe ser útil tanto para usuarios principiantes como para expertos, permitiendo a estos últimos usar atajos para acelerar la interacción.

    8. Estética y diseño minimalista: Las interfaces no deben contener información que sea irrelevante o raramente necesaria.

    9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: Los mensajes de error deben expresarse en un lenguaje claro, indicar el problema y sugerir una solución (ej., en lugar de «Error 404», mostrar «La contraseña es incorrecta. Por favor, inténtelo de nuevo»).

    10. Ayuda y documentación: Aunque es mejor que el sistema se pueda usar sin ayuda, puede ser necesario proveer documentación que sea fácil de localizar y concisa.

    Por si prefieres ver y escuchar en lugar de leer. Vídeo realizado con Notebook LLM

    Los Principios Guía de Krug: Diseñando para no Hacer Pensar

    El enfoque de Steve Krug se articula en torno a una filosofía central, apoyada por observaciones clave sobre cómo se comportan realmente los usuarios en la web. Estos principios guía ofrecen una perspectiva práctica y centrada en el usuario.

    1. La Primera Ley de la Usabilidad: ¡No me hagas pensar! Esta es la regla fundamental de Krug. El objetivo de cualquier diseño web es que sea autoevidente e intuitivo. Cada vez que un usuario se detiene a pensar en algo tan trivial como si un elemento es clicable o qué significa una etiqueta, la experiencia se degrada. El diseño debe eliminar cualquier duda o esfuerzo mental innecesario.

    2. La Realidad del Uso Web: Escanear, Satisfacer y Apañárselas Krug describe tres hechos clave sobre el comportamiento real del usuario en la web:

        ◦ No leemos, escaneamos: Los usuarios ojean las páginas en busca de palabras y frases clave que les interesen. Ignoran el resto.

        ◦ No buscamos la opción óptima, satisfacemos: En lugar de analizar todas las opciones para elegir la mejor, los usuarios seleccionan la primera que parece «suficientemente buena» para cumplir su objetivo, un comportamiento conocido en inglés como satisficing (unión de satisfy y suffice).

        ◦ No entendemos cómo funcionan las cosas, nos las apañamos (muddle through): Los usuarios avanzan a través de la interfaz usando prueba y error. No les interesa entender la lógica subyacente, simplemente avanzan hasta lograr su objetivo o abandonar.

    3. La Brevedad es Oro: Omite las Palabras Innecesarias Para facilitar el escaneo y la comprensión, Krug aconseja reducir el texto a la mitad, y luego a la mitad de lo que queda. Esto minimiza el «ruido visual» y ayuda a que el contenido verdaderamente relevante destaque. Es fundamental eliminar el «happy talk» (textos introductorios vacíos y autopromocionales) y las instrucciones que un diseño intuitivo haría innecesarias.

    4. La Usabilidad como Cortesía Común Krug introduce el concepto de la «reserva de buena voluntad». Cada usuario llega a un sitio web con una cantidad limitada de paciencia. Esta reserva disminuye con cada obstáculo, como información oculta, pasos innecesarios o un diseño confuso. Por el contrario, puede aumentar con acciones que demuestran consideración por el usuario, como proporcionar información clara, facilitar la recuperación de errores o anticipar sus necesidades.


    Vamos a poner al usuario en el centro de nuestro trabajo y vamos a poner en común ambos enfoques. Vamos a diseñar para él con la ayuda de las que creo que son las 6 ideas fundamentales de la experiencia de usuario (UX) según Krug, apoyándolas también en las 10 reglas heurísticas de Nielsen.

    1. La Regla de Oro: «No me hagas pensar»

    La primera y más importante ley de la usabilidad, popularizada por Steve Krug, es simple pero revolucionaria: el objetivo principal de un buen diseño es eliminar el esfuerzo mental del usuario.

    Los usuarios no visitan tu web para resolver un acertijo. Llegan con un objetivo claro: encontrar información, comprar un producto, contactarte. Cada vez que tienen que detenerse a pensar qué significa un icono o dónde les llevará un enlace, estás añadiendo signos de interrogación mentales que los alejan de su meta. Tu trabajo es eliminar esos signos de interrogación.

    ¡Se trata de no hacerle pensar!

    Este principio es tan fundamental porque choca directamente con el deseo de ser «creativo» o «diferente». A menudo, los diseñadores se esfuerzan por crear algo único, pero si esa originalidad genera confusión, han fracasado. En el mundo de la usabilidad, la claridad siempre triunfa sobre la creatividad ambigua.

    2. La Dura Realidad: Nadie Lee tu Web, Solo la Escanean

    Nos encanta imaginar que los usuarios leen detenidamente cada palabra que hemos escrito con tanto esmero, absorbiendo el mensaje de principio a fin. La realidad, según la investigación de Steve Krug, es muy diferente.

    Los usuarios no leen las páginas; las escanean. Sus ojos saltan por la pantalla en busca de palabras clave, titulares o elementos visuales que se parezcan a lo que están buscando. Ignoran todo lo demás. Este comportamiento se rige por un principio llamado «satisficing» (un término que combina satisfacer y suficiente): los usuarios no buscan la mejor opción posible, sino la primera que parece suficientemente buena para resolver su problema. Este comportamiento está impulsado por la urgencia, las bajas consecuencias de cometer un error y, a veces, la simple emoción de adivinar.

    ¿Qué significa esto para tu diseño?

    • Jerarquía visual clara: Haz que los elementos más importantes destaquen.
    • Párrafos cortos: Evita grandes bloques de texto.
    • Listas con viñetas: Son perfectas para el escaneo.
    • Uso de negritas: Resalta palabras y frases clave para captar la atención.

    Si no diseñas para el escaneo, tu contenido más importante pasará desapercibido.

    3. El Principio de Humildad: Tu sitio no es el centro de su universo

    Es fácil caer en la trampa de pensar que tu sitio web es especial y que los usuarios dedicarán tiempo a aprender sus particularidades. Aquí es donde entra en juego la Ley de Jakob, formulada obviamente por Jakob Nielsen:

    «Los usuarios pasan la mayor parte de su tiempo en otros sitios.»

    Los usuarios esperan que tu sitio web funcione de la misma manera que todos los demás sitios que ya conocen. Han desarrollado modelos mentales basados en miles de horas de navegación. Ir en contra de estas convenciones obliga al usuario a aprender algo nuevo, aumentando su carga cognitiva. Esto se conoce como consistencia externa (seguir los estándares de la industria), que es tan importante como la consistencia interna (mantener la coherencia dentro de tu propio producto).

    En lugar de reinventar la rueda, apóyate en los estándares de la industria. Esto no limita la creatividad; libera al usuario para que pueda centrarse en lo que realmente importa: tu contenido y tu oferta.

    4. El mejor error es el que nunca ocurre

    Aunque tener mensajes de error claros y útiles es importante, un diseño verdaderamente superior se anticipa y previene los problemas antes de que sucedan. Este es el núcleo de la heurística de «Prevención de errores» de Jakob Nielsen.

    Existen dos tipos de errores: los slips, que son errores inconscientes causados por la falta de atención, y los mistakes, que son errores conscientes basados en un desajuste entre el modelo mental del usuario y el diseño. Un diseño preventivo aborda ambos. Piensa en las «barreras de protección en carreteras de montaña»; no te ayudan después de que te has caído, sino que evitan que te caigas.

    Un ejemplo digital perfecto es la función de autocompletar en las barras de búsqueda. Al sugerir términos o corregir errores, el sistema previene los slips (errores de tipeo) y guía al usuario hacia un resultado exitoso. De igual forma, una buena guía de formato de contraseña previene los mistakes al aclarar las reglas de antemano. Un buen diseño es proactivo, no solo reactivo.

    5. La ilusión del «Usuario Promedio»

    Uno de los mayores mitos en el diseño de productos es la existencia del «usuario promedio». Los equipos a menudo caen en la trampa de pensar que los usuarios son como ellos, lo que conduce a debates  interminables basados en opiniones personales: «A mí me gusta así» o «Yo nunca haría clic ahí».

    Steve Krug lo deja claro: no hay un usuario promedio. Cada persona es única. La única forma de resolver estos debates y descubrir lo que realmente funciona es probando con usuarios reales.

    La solución no tiene por qué ser costosa o compleja. Realizar pruebas de usabilidad simples y tempranas es clave. De hecho, probar con un solo usuario es infinitamente mejor que no probar con ninguno. Las investigaciones demuestran que con solo tres usuarios puedes descubrir los problemas de usabilidad más graves y recurrentes. Deja de adivinar y empieza a observar.

    6. La Usabilidad es cortesía: El depósito de la buena voluntad

    Steve Krug propone una metáfora poderosa: cada usuario llega a un sitio web con un «reservorio de buena voluntad». Es una cantidad limitada de paciencia y disposición a tolerar problemas. Cada obstáculo, cada momento de confusión, drena un poco de ese reservorio. Si se agota, el usuario se va, probablemente para no volver.

    La usabilidad, vista desde esta perspectiva, se convierte en un acto de cortesía. Es respetar el tiempo y el esfuerzo del usuario.

    Factores que disminuyen la buena voluntad:

    • Ocultar información que el usuario quiere ver (como precios o datos de contacto).
    • Hacer preguntas innecesarias en un formulario.
    • Penalizarlo por no hacer las cosas “como queremos” (por ejemplo, rechazar un número de teléfono porque tiene espacios).
    • Falta de sinceridad en la comunicación.
    • Poner demasiados obstáculos en su camino.
    • Tener una apariencia poco profesional o descuidada.

    Factores que aumentan la buena voluntad:

    • Saber lo que el usuario busca y hacerlo fácil de encontrar.
    • Ahorrarle pasos siempre que sea posible.
    • Facilitarle la recuperación de errores.
    • Ser transparente y sincero.

    Enmarcar la usabilidad como cortesía la humaniza. No se trata solo de métricas y conversiones, sino de tratar a las personas con consideración.

    Conclusión: Diseñar con empatía

    Si te fijas, todas estas verdades apuntan en una misma dirección: la empatía. El secreto de un diseño web que «simplemente funciona» es la capacidad de ponerse en el lugar del usuario, entender sus objetivos y anticipar sus frustraciones.

    La usabilidad no es una lista de verificación técnica que se aplica al final del proceso. Es una filosofía centrada en el ser humano que debe guiar cada decisión, desde la estructura de la información hasta el color de un botón.

    Enlaces útiles:

  • Cómo convertir una plantilla HTML en un tema para WordPress

    Cómo convertir una plantilla HTML en un tema para WordPress

    En el proceso de crear un tema para WordPress podemos empezar por la creación o migración de un sitio en HTML / CSS y JS o desde una plantilla HTML de terceros. Aunque existe el plugin HTML Import 2 aquí veremos cómo crear un tema propio para WordPress a partir de una plantilla HTML / CSS y JS.

    Básicamente debemos de encontrar en ese HTML aquello que debe ser dinámico, aquello que debe cambiar según la configuración de WP o que debe ser editable desde el backend y sustituir ese HTML por PHP.

    En esta primera parte de una serie de artículos sobre la creación de temas para WordPress veremos:

    1. De HTML a WordPress (Preparando el entorno de desarrollo)
    2. Diseccionando el index.html
    3. Encolar los archivos CSS y JS
    4. Sustituir lo estático por lo dinámico (template tags)
    5. El Loop
    6. Resto de páginas (distintos Loops)
    7. Contenido dinámico

    En el siguiente artículo publicaremos el proceso de conversión de una una plantilla HTML / CSS / JS a un tema de WordPress gratuito que subiré al repositorio.

    Empezamos

    1. De HTML a WordPress (Preparando el entorno de desarrollo)

    1. Primero debemos crear un entorno local e instalar WordPress.
    2. Importamos contenido dummy (falso) para poder trabajar. Nos descargamos el archivo XML del Codex. En nuestro WP –> Herramientas –> Importar –> WordPress –> Instalamos plugin –> Ejecutar importador –> subimos el archivo XML que nos hemos descargado –> Dejamos los autores tal como están pero marcamos la casilla de importar los datos adjuntos.
    3. Para no trabajar desde cero comenzaremos con un starter theme, nos descargamos el tema http://underscores.me/ (de código abierto, gratuito y creado por Automattic) En las opciones marcamos la opción Sassify para tener los archivos SASS. Lo instalamos en nuestro WP –> Apariencia –> Temas –> Añadir nuevo.
    4. Abrimos la carpeta de nuestro tema en nuestro editor (Brackets, Sublime Text o mejor VS Code).
    5. En esa misma carpeta metemos los archivos HTML / CSS y JS a convertir.

    2. Diseccionando el index.html

    La mayoría de las plantillas para WordPress actuales tienen la opción de mostrar un diseño diferente en la home de nuestro sitio que en las páginas de su interior. En nuestra plantilla HTML el archivo index.html sería la home. Lo tienes que dividir en 4 partes: header, contenido, footer y sidebar (este último es opcional).

    1. El header.php contiene desde <!doctype HTML> hasta aquello que se va a repetir en todas las páginas, normalmente hasta el menú.
    2. El contenido (index.php, single.php, archive.php, front-page.php…) es aquello que dinámicamente muestra según la página que se visite (una entrada, una página, un producto…)
    3. El footer.php contiene aquello que se repite al final de todas las páginas, termina con </html>
    4. El sidebar.php contiene el código que muestra la barra lateral, si no vas a usarla puedes omitirlo

    El tema Underscores trae por defecto creados ya los acrhivos header.php, index.php, footer.php y sidebar.php Debes editar cada uno para poner el marcado HTML que has creado, con sus clases CSS.

    3. Encolar los archivos CSS y JS

    Si la plantilla HTML tiene archivos CSS y JS lo ideal es sustituir sus llamadas en el HTML a una función dinámica de WP que encola esos archivos. En el tema Underscores, en el archivo functions.php ya tienes la función creada, sólo tienes que añadir los archivos.

    Ejemplo para encolar el archivo main.css (*) y el jquery.scrollex.min.js dependiente de jQuery de esta forma:

    <?php function mitema_theme_setup(){
    wp_enqueue_style('main-styles', get_template_directory_uri().'/assets/css/main.css');
    wp_enqueue_script('j-scrollex', get_template_directory_uri().'/assets/js/jquery.scrollex.min.js',array('jquery'), false, true);
    }
    add_action('wp_enqueue_scripts', 'mitema_theme_setup');

    * Nota: como seguramente utilices SASS lo mejor es que compiles ese archivo junto a los de Underscores y los que tú añadas en el style.css y así sólo cargas un CSS.

    4. Sustituir lo estático por lo dinámico (template tags)

    Aquello que sea dinámico se marca con PHP <php código PHP ?> para ello utilizamos las templates tags.

    Como WP trabaja con PHP vimos cómo en el mismo archivo conviven perfectamente estos dos lenguajes HTML y PHP, de forma que aquello que queremos que sea dinámico lo cambiamos a PHP, por ejemplo para poner el título del sitio en vez de poner

    <h1>El título de mi sitio</h1>

    ponemos

    <h1><?php blogingo(‘name’); ?></h1>

    Son lo que llamamos las “template tags”. La sintaxis básica será:

    Abrimos PHP

    <?php

    Nombre de la template tag + () + ; <- en algunas ocasiones dentro de los paréntesis indicaríamos uno o varios parámetros por ejemplo ‘name’

    bloginfo(‘name’);

    Cerramos PHP

    ?>

    Ejemplos:

    <?php blogingo('name'); ?> <- Imprime el Título del sitio indicado en Ajustes –> Generales

    <?php get_header(); ?> <- Inserta el archivo del tema llamado header.php

    Hay algunos template tags que no imprimen el resultado, normalmente se diferencian de otras porque empiezan por get, por ejemplo tenemos the_title() y get_the_title(), si queremos imprimirlo (que se muestre en el navegador) utilizaríamos “echo” pudiendo concatenar con puntos HTML y PHP

    <?php echo '<h1>El título de esta entrada es '. get_the_title() . '</h1>'; ?>

    Nota: Si queremos que el texto sea traducible utilizaremos la función _e() para imprimir las cadenas de texto.

    _e( 'El título de esta entrada es', 'textdomain' );

    Por ejemplo para referenciar la ruta a una imagen subida a tu tema a la carpeta img pondrías

    <img src=”<?php echo get_template_directory_uri(); ?>/img/logo.png" alt=”mi logo”>

    El tema Underscores ya viene preparado con los archivos PHP con muchas template tags:

    • que cargan el archivo head wp_head();
    • añaden el menú creado en el administrador wp_nav_menu();
    • y muchas más

    Lista completa de Template Tags

    [publi]

    Puede ayudarte algún plugin o extensión de tu IDE

    5. El Loop

    Luego está la parte que carga dinámicamente el contenido (entradas, productos o ítems de portfolio), es lo que se conoce como el Loop, tiene esta sintaxis:

    <?php if ( have_posts() ) :
    while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', 'home' );
    endwhile;
    else :
    get_template_part( 'template-parts/content', 'none' );
    endif;  ?>

    Es un condicional que accede a la BBDD para ver si hay contenido. Si hay contenido mostrará uno de los contenidos (máximo el número indicado en ajustes, por defecto 10) con la plantilla del acrhivo «content-home.php» que está en la carpeta «template-parts». En ese archivo tendrás que utilizar otras template tags como the_title, the_permalink (el enlace a ese contenido), the_excerpt (el extracto o resumen).

    6. Resto de páginas (distintos Loops)

    En las partes donde se muestran artículos (o productos si fuera una tienda) seguimos utilizando el Loop de WordPress, dependiendo de qué página sea visitada se mostrarán el loop devolverá de la BBDD algo distinto. Por ejemplo en la página de una categoría se muestran sólo los que pertenecen a esa categoría, en la de fecha sólo de esa fecha, etc. El loop de un artículo tiene la misma sintaxis que cualquier otro pero lo que muestre de la BBDD será distinto del que usarás en la home.

    El loop siempre tiene la misma sintaxis:

    <?php if (have_posts()) : ?>

    <!—Se comprueba que existan entradas publicadas. -->

    <?php while (have_posts()) : the_post(); ?>

    <!—En el caso de que existan se crea un bucle por el número de publicaciones que hayamos definido en Ajustes – Lectura, por defecto son 10 entradas. -->

    <!—Aquí se pone lo que queramos que se muestre de cada publicación, por ejemplo el título, la imagen destacada, el autor, la fecha, etc. En vez de ponerlo aquí podemos ponerlo en un archivo vinculado con get_template_part(). Por ejemplo get_template_part( 'template-parts/content', 'single' ); -->

    <?php endwhile; ?>
    <?php else :

    get_template_part( 'template-parts/content', 'none' );?>

    <!—Cargamos el archivo content-none.php con lo que queramos que aparezca si no hay ninguna entrada publicada.  -->

    <?php endif; ?>

    El proceso es el mismo, sólo tendrás que cambiar la ruta del archivo PHP en get_template_part() en single.php a por ejemplo a get_template_part( 'template-parts/content', 'single' );

    En el archivo content-single.php en vez de mostrar el excerpt mostrarás todo el contenido de ese artículo con la template tag the_content().

    Puedes ayudarte del plugin What The File para ver qué archivo de tu tema es el que se está cogiendo, para la portada te aconsejo que hagas un archivo front-page.php, si recuerdas la jerarquía de WP cuando no existe un archivo más específico se tira de index.php por eso hacemos uno específico para la portada si buscamos un diseño único.

    7. Contenido dinámico

    La home o página de inicio además de poder tener un diseño distinto, de mostrar las últimas entradas, testimonios, portafolio puede tener algún contenido (texto + multimedia) propio. Para que sea editable y dinámico creas una página en WP y esa página la pones en los Ajustes -> Lectura como página de portada.

    Para el portafolio (Cómo crear un portafolio en WordPress con y sin plugins), testimonios, etc. puedes crear un sidebar, usar un plugin o crear un Custom Post Type y añadirlo al archivo PHP correspondiente de tu tema.

    Otra forma de añadir contenido dinámico es con los Custom Fields. Puedes crearlos para hacer editable los títulos y textos que ahora son Lorem puedes añadir a la página que pongas como inicio Custom Fields, puedes crearlos con este plugin  y luego los llamas en front-page.php con

    <?php the_field('nombre-de-tu-custom-field'); ?>

    Enlaces


    En próximos artículos publicaremos el caso práctico real donde convertiremos una plantilla HTML / CSS / JS a un tema de WordPress que pondré a vuestra disposición para que podáis ver el código y/o utilizarlo de forma gratuita en vuestro WordPress.

  • Cómo conseguir un dominio .design y hosting gratuito para WordPress

    Cómo conseguir un dominio .design y hosting gratuito para WordPress

    Para tener un sitio web necesitas dos cosas:

    1. Un dominio, un nombre por el que entrar a tu web desde un navegador, otra opción sería tener un subdominio 
    2. Un hosting o alojamiento web, un servidor, un ordenador que aloje los archivos y la base de datos de tu web y que esté conectado a Internet 24/7 

    0. Introducción. El mercado de los dominios y alojamientos

    Aunque vamos a ver cómo tener ambos de forma gratuita os explico un poco cómo funciona su mercado. 

    Ambos productos, tanto el dominio como el hosting, puedes adquirirlos por separado o en la misma empresa. Los dominios se contratan de forma anual y el alojamiento puedes contratarlo mensual o anualmente aunque lo habitual es también hacer el pago anual. 

    El coste de un dominio, dependiendo de su extensión, puede ser bastante económico, menos de 10€, el alojamiento es algo más, depende de sus características. Funciona como los planes de las teleoperadoras móviles. 

    Los proveedores presentan los planes de hosting resaltando “el recomendado” con características que debemos estudiar antes de decidirnos, si buscamos tener un WordPress es imprescindible que nos permita tener PHP y al menos una Base de Datos, luego está ya el espacio en disco para alojar archivos, la transferencia de archivos, cuentas de email, características del servidor, etc. 

    Normalmente ofrecen ofertas jugosas para el primer año, estudia y compara si luego de ese primer año te va a convenir seguir en esa empresa sin los descuentos. Aunque si hemos hecho una mala elección o simplemente nuestro sitio lo está petando y por ejemplo necesitamos más transferencia de datos siempre podemos cambiar de plan, como os decía, funcionan igual que las teleoperadores móviles, si te quedas sin datos siempre puedes contratar más.

    Decidir con qué empresa trabajar tampoco es una decisión vitalicia, puedes migrar o transferir tanto tu dominio como la base de datos y los archivos de tu web a otra empresa cuando lo necesites. 

    Ahora os explicaré paso por paso lo que hay que hacer para tener tu propio WordPress bajo un dominio .design y un hosting gratuito. Si no gustas de leer te dejo un esquema con los pasos a seguir:

    1. Contratar un dominio:
      1. Opción gratuita .design en porkbun.com
      2. Contratar uno de pago
    2. Contratar un alojamiento web o hosting
      1. Opción gratuita en https://infinityfree.net/ o https://www.piensasolutions.com/wordpress (actualizado nov 23)
      2. Contratar uno de pago (tiene que tener al menos una BBDD)
    3. Apuntar el dominio a los servidores. Si has elegido el dominio .design gratuito entra en porkbun y despliega los «details» de tu dominio. En Nameservers de la columna central borra lo que hay y pega los nameservers de tu hosting. Si has optado por Infinity Free usa estos Nameservers

    1. Conseguir un dominio .design gratuito 

    Antes de adquirir un dominio debemos pensar y repensar, el naming es muy importante. Y luego hay que tener suerte para que esté libre. Hay sitios que te pueden ayudar a encontrar el dominio adecuado insertando alguna palabra clave, aquí hice una recopilación de sitios webs que nos ayudan a elegir un dominio

    Luego hacemos una preselección siguiendo estos consejos:

    • Original, 
    • breve,
    • simple, 
    • fácil de recordar.

    ¿Lo tienes? Ahora hay que tener suerte para que esté libre. Comprobar su disponibilidad. Y en esto influye qué dominio de nivel superior (TLD) nos conviene, en nuestro ejemplo necesitamos que esté libre el .design

    O para que nos entendamos extensiones para dominios, haber hay muchísimas. Las más habituales son las .com y .es, aunque en nuestro caso vamos a optar por .design porque podemos conseguirla a coste cero. Hace algún tiempo estaban los dominios gratuitos tk que regalaba el gobierno de Tokelau, un país del Pacífico sur para promocionarse pero hoy día ya lo lleva una empresa holandesa y no es posible adquirirlos gratuitamente. 

    Para adquirir un dominio .design gratuito debéis ir al simpático Porkbun y aplicar el cupón SEVILLE20, WDD19C o GOOG19A o directamente a este enlace https://porkbun.com/tld/design/?coupon=SEVILLE20

    Tienes que registrarte y poner los datos de pago, tu tarjeta bancaria,  pero te aseguro que no hacen ningún cargo. Si no deseas adquirir el dominio gratuito por cualquier motivo siempre puedes optar en el hosting por un subdominio gratuito.

    El dominio en Porkbun será gratis sólo el primer año así que si no quieres llevarte sorpresas puedes desactivar la renovación automática para que tú decidas si quieres renovar o transferir el dominio a otra empresa cuando cumplas el año.

    Es gratis sólo el primer año así que si no quieres llevarte sorpresas puedes desactivar la renovación automática para que tú decidas si quieres renovar o transferir el dominio a otra empresa cuando cumplas el año.

    En verde activada, en gris desactivada.

    ¡Listo! Ya tienes tu dominio .design gratuito

    2. Conseguir un Hosting o alojamiento web gratuito

    Servicios de hosting gratuito hay también varios, normalmente como gancho para que pases a un plan de pago, asociados a la adquisición de un dominio, velocidad de pena,  cortes programados del servicio, con acceso privado mediante unas claves… Nadie da duros a cuatro pesetas, qué viejuno que soy ;)

    Los hostings gratuitos son para es testear, para aprender, para tener un sitio de pruebas, para un proyecto personal de presupuesto cero. Algunas opciones:

    Opciones hay muchas, para este tutorial he optado por: :

    Sólo necesitas crear una cuenta:

    1. Con tu dominio gratuito (Custom Comain), el .design que habéis registrado en Porkbun, 
    2. o bien con un subdominio gratuito de tipo .epizy.com o .rf.gd

    Sólo necesitas crear una cuenta con tu dominio gratuito (Custom Comain) o bien con un subdominio gratuito de tipo .epizy.com o .rf.gd

    Algunas otras opciones:

    3. Asociar el dominio con el hosting

    Un tercer paso es decirle al dominio que tu web está alojada en el servidor XXX. Para ello tienes que editar los Nameservers en eldominio. 

    En Porkbun están en la columna central cuando despliegas los “Details” de tu dominio. Editas la opción “AUTHORITATIVE NAMESERVERS”, borras lo que aparece y pones los de tu hosting. Si has optado por Infinity Free usa estos Nameservers

    Una vez cambiados deberás esperar unas horas para que se propaguen las DNS.

    4. Instalar un WordpPress

    Ya tenemos dominio y hosting y ahora toca instalar WordPress, podemos hacerlo de forma manual o de forma automática. Para que os resulte más fácil veamos esta segunda opción.

    Entras en el panel de control de tu hosting, suponemos que Infinity Free si has seguido todos los pasos y bajas hasta la sección de Software

    Al entrar en Softaculous Apps Installer verás a WordPress en los Top Scripts y si no siempre puedes encontrarlo en el buscador de la barra lateral izquierda, desgraciadamente todavía en la sección de “Blogs” :( porque ¡WordPress no es sólo para Blogs 😠! como de hecho vais a comprobar. 

    La instalación automática es muy sencilla y rápida. Lo que sí te aconsejo es que cambies la sección de Admin Account:

    • el nombre de usuario y la contraseña que aparecen por defecto “admin” y “pass” porque no son precisamente seguras.
    • y el email,

    Lo demás déjalo igual, lo podrás editar luego, baja y pincha en “Install”, en minutos o segundos te aparecerá la URL de tu WP público con tu dominio y la URL a tu panel de administración de WordPress.

    Todo bueno, bonito y barato ;)

    Ya tienes las llaves, ahora ve pensando y recopilando los muebles: textos, fotografías y vídeos porque en breve vamos a decorar tu casa. 

    Y por último para darle contenido a tu WP imagino que si tienes un dominio .design puede interesarte tener un portafolio, aquí tienes cómo hacerlo Cómo crear un portafolio en WordPress con y sin plugins

  • Cómo eliminar las imágenes inútiles de WordPress

    Cómo eliminar las imágenes inútiles de WordPress

    Los recursos de tu servidor son finitos, el espacio en disco que tienes contratado puede acabarse si no gestionas bien la librería multimedia de tu WordPress. Seguramente cuando haces copias de seguridad es cuando eres consciente del enorme tamaño de tu sitio.

    Un altísimo porcentaje de ese tamaño es por la carpeta «uploads» donde se guardan por defecto las imágenes y los archivos que subes a tu WordPress.

    Claro que esto es lógico si consideramos que el 53% del peso de una web tipo son imágenes. Aunque no tan lógico cuando descubramos que muchas de las imágenes que guarda nuestro WordPress no sirven para nada.

    En este artículo vamos a tratar de reducir en lo posible el tamaño de nuestra carpeta «uploads». Como más que un artículo me ha salido un libro os dejo un pequeño índice y si tienes prisa ve directamente a las conclusiones:

    1. Cómo guarda WordPress la información de las imágenes en la BBDD
    2. Identificar y eliminar las imágenes inútiles de nuestro WordPress
      1. Cómo identificar imágenes que no usamos
        1. Identificar elementos multimedia sin adjuntar
        2. Identificar los tamaños de imagen que me sobran
          1. Imagen original
          2. La configuración de medios
          3. Imágenes responsive añadidas por el propio Core
          4. El tema que utilices
          5. Algún plugin
      2. Cómo eliminar y dejar de crear las imágenes inútiles
        1. Eliminar imágenes inútiles
          1. Cómo volver a crear los nuevos tamaños útiles en imágenes antiguas
            1. Plugins que regeneran y también eliminan imágenes inútiles
            2. Plugins que sólo regeneran tamaños de imágenes
          2. Cómo eliminar los tamaños inútiles de imágenes antiguas
          3. Bonus: Actualizar el HTML después de regenerar y eliminar
          4. Eliminar imágenes sin adjuntar
        2. Dejar de crear tamaños de imagen inútiles
          1. Dejar de crear tamaños por defecto
          2. Dejar de crear el tamaño responsive medium-large
          3. Dejar de crear tamaños de plugins y temas
      3. Conclusiones
      4. Cómo optimizar las imágenes de tu WordPress (nuevo artículo)

    El primer problema es que el tamaño de esas imágenes puede no ser el adecuado, debes optimizarlas, así que lo primero que debes hacer es tener optimizadas esas imágenes, previa subida o mediante plugins como EWWW Image Optimizer o con ShortPixel cuyos brutales resultados explico en  Cómo optimizar las imágenes de tu WordPress

    El segundo problema, que es el que vamos a tratar en este artículo, es que puedes tener muchas imágenes en tu servidor que nunca se utilizan en tu sitio web, así que veremos cómo identificarlas y cómo deshacerte de imágenes que no sirven para absolutamente nada y están ocupado un preciado espacio. 

    Lo primero que tenemos que hacer es una copia de seguridad, no sólo de la carpeta uploads sino también de la BBDD.

    1. Cómo guarda WordPress la información de las imágenes en la BBDD

    La tabla wp_posts además de guardar la info de entradas, páginas, revisiones y CPT guarda la info de cada imagen donde:

    • post_type será attachment,
    • post_parent será el ID de la publicación a la que se adjunta
    • guid se guarda la ruta absoluta al archivo.

    Y en la tabla wp_postmeta es donde se almacenan otros metadatos:

    •  _wp_attachment_image_alt guarda el contenido del atributo ALT
    • _wp_attached_file guarda la ruta relativa dentro de «uploads»
    • _wp_attachment_metadata guarda la información sobre distintos tamaños de imagen, algo de lo que hablaremos más adelante.

    2. Identificar y eliminar las imágenes inútiles de nuestro WordPress

    Depende del tipo y edad de tu proyecto:

    • este sitio, un simple blog de 11 años que tiene 8.649 elementos multimedia que ocupan 2,2 GB
    • mientras que elfinalde.com con sólo 2 años tiene ya 70.476 elementos que ocupan 26,5 GB

    En este artículo veremos cómo reducir el tamaño de esa carpeta:

    1. Identificar esas imágenes inútiles y
    2. Cómo eliminarlas.

    2. 1. Cómo identificar imágenes que no usamos

    Hay dos tipos de imágenes que debemos identificar:

    1. las imágenes que por algún motivo subimos a nuestro WordPress pero que no utilizamos, serían las imágenes sin adjuntar
    2. una misma imagen suele tener distintas versiones, debemos identificar cuáles usamos y cuáles no

    2.1.1.- Identificar elementos multimedia sin adjuntar

    Imágenes, vídeos o audios o archivos PDF que subiste pero que no añadiste a ninguna publicación. Estos elementos puedes verlos desde Medios > Biblioteca y en el primer desplegable donde pone «Todos los medios» elegir «Sin adjuntar».

    Debes revisarlo de vez en cuando, aquí quedan esas imágenes que subimos desde la biblioteca para un posible artículo pero que nunca llegamos a publicar o imágenes de publicaciones que han pasado a mejor vida porque aunque las hayas eliminado de la papelera los archivos adjuntos no se eliminan.

    Pero mucho cuidado, que aunque aparezcan como medios «Sin adjuntar» no siempre significa que no lo utilices. Una imagen sólo se adjunta a una publicación (Entrada, página o Custom Post Type) Va a ser una imagen «Sin adjuntar» aunque útil cuando:

    • una imagen subida a la biblioteca la usas sólo como Imagen destacada
    • una imagen subida a la biblioteca la uses en algún widget
    • subas una imagen desde la edición un widget, aunque la uses en el mismo

    Y por último también puede ocurrir que haya archivos adjuntos que no uses. Si escribiendo una entrada subes 10 imágenes pero luego no las insertas serán imágenes «adjuntas» pero inútiles.

    Una solución parcial es instalar el plugin Find Posts Using Attachment que nos mostrará un listado de las publicaciones y la forma en que un medio está siendo usado (contenido o imagen destacada) o no usado. La info la tendremos en una nueva columna de la Biblioteca pero también en la página individual de cada imagen. Es una forma mucho más segura de saber si es una imagen útil que simplemente ver si está sin adjuntar aunque no detecta si la imagen se usa en un widget o shortcode.

    Otro plugin interesante para la gestión de medios aunque todavía en beta es Media Usage. Este plugin nos muestra en una nueva columna las distintas versiones de una imagen, iconos con la inicial del ID del tamaño. Al hacer clic en ellos accedemos a las estadísticas de uso de esa imagen, por IP y desde qué página. Ojo, como te habrás imaginado una imagen sin visitas no tiene porqué ser inútil.

    En cualquier caso antes de eliminar cualquier imagen y como medida extra de seguridad os aconsejo activar la papelera en la Biblioteca de Medios añadiendo esto a wp-config.php

    define( 'MEDIA_TRASH', true );

    Una vez aclarado esto, puedes seleccionarlas en lote, enviarlas a la papelera y posteriormente eliminarlas desde la misma biblioteca de medios aunque mi recomendación es que utilices algún plugin como Media Cleaner o Theia Upload Cleaner for WordPress que explico en el apartado sobre eliminar imágenes inútiles antiguas.

    2.1.2. Identificar los tamaños de imagen que me sobran

    Todo WordPress crea por defecto distintas versiones de una misma imagen. El número de archivos y sus tamaños vienen definidos por:

    1. Imagen original
    2. La configuración de medios
    3. Imágenes responsive añadidas por el propio Core
    4. El tema que utilices
    5. Algún plugin

    2.1.2.1. Imagen original

    El archivo original lógicamente ocupa se guarda y ocupa espacio, no deberíamos subir archivos mayores del tamaño máximo que vayamos a necesitar. Es decir, si el tamaño mayor de imagen que vamos a utilizar es de 1024px de ancho lo ideal es subir todas las imágenes a ese ancho, no más.

    Debemos tener en cuenta que si subimos una imagen de menor resolución a otras versiones que necesitamos no se crearán dichas versiones, es decir, WordPress puede escalar una imagen reduciendo su tamaño pero nunca ampliando. Siguiendo el ejemplo anterior si subimos una imagen de 1023 píxeles de ancho la imagen de 1024px no se creará.

    2.1.2.2. Imágenes creadas por los ajustes de WordPress

    En Ajuste > Medios se especifican 3 tamaños: miniatura, medio y grande que luego puedes utilizar desde el editor, que se creen los 3 dependerá del tamaño del original como explicado en el apartado anterior.

    Tendrás que pensar si utilizas estos 3 tamaños cuando:

    • publicas desde el editor
    • desde el tema (ver en 1.2.4 cómo averiguarlo)

    2.1.2.3. Imágenes responsive añadidas por el propio Core

    Desde la versión 4.4 WordPress añade a la etiqueta HTML <img> los atributos scrset y sizes sirviendo un tamaño acorde con la resolución del dispositivo de todos los tamaños disponibles de una imagen. Ahorramos ancho de banda y ganamos en velocidad.

    Además se añadió una función para crear un tamaño extra, llamado medium_large para resoluciones de 768px de ancho.

    2.1.2.4. Imágenes que crea el propio tema

    El tema que utilices puede añadir nuevos tamaños a través de add_image_size haz una búsqueda de esta función en los archivos de tu tema para saber qué tamaños añade.

    Por ejemplo el tema Twenty Seventeen añade dos nuevos tamaños en su archivo functions.php

    add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );

    add_image_size( 'twentyseventeen-thumbnail-avatar', 100, 100, true );

    Para saber dónde se utilizan estas imágenes podemos volver a hacer una búsqueda pero esta vez por el nombre del tamaño de imagen. Generalmente los distintos tamaños de imagen se pintan usando

    the_post_thumbnail( 'nombre del tamaño de imagen: thumbnail | medium | medium-large | full | twentyseventeen-featured-image | ...  ' );

    Aunque también se pueden usar otras resoluciones no registradas:

    the_post_thumbnail(array(500, 300, true));

    echo wp_get_attachment_image(12622, array(500, 300, true));

    Siguiendo con el tema Twenty Seventeen si buscamos «twentyseventeen-featured-image" lo encontramos en 8 archivos, en header.php, en los de front page y en todos los archivos de loop de single incluidos los formatos de entrada. En resumen, el tema utiliza este imagen de 2000×1200 como imagen de cabecera.

    Ahora busquemos la otra imagen, la llamada twentyseventeen-thumbnail-avatar y ¡sorpresa! no hay ningún archivo que pinte esta imagen de 100×100, hemos encontrado una imagen completamente inútil.  

    2.1.2.5. Imágenes creadas por plugins

    Los plugins también pueden utilizar  add_image_size Por ejemplo:

    • el plugin Featured Image Admin Thumb añade una imagen de 60×60 desde
      add_image_size( $this->fiat_image_size, 60, 60, array( 'center', 'center' ) );
    • El plugin Jetpack añade una de 50×50 para el módulo de portafolios con
      add_image_size( 'jetpack-portfolio-admin-thumb', 50, 50, true );
    • El widget del plugin SiteOrigin Post Carousel añade uno de 272×182 con
      add_image_size('sow-carousel-default', 272, 182, true);

    Puedes escanear tu carpeta de plugins en busca de «add_image_size» para ver qué plugins añaden versiones de imágenes. Ten en cuenta que si desactivas y borras el plugin las imágenes que haya creado no se eliminarán.

    Nota: Las imágenes que crean los plugins puede que no se guarden con la misma estructura de año/mes y lo hagan en una carpeta independiente cuyo nombre probablemente haga alusión al del plugin.

    Nota 2: El bloque de Imagen del proyecto Gutenberg (versión 1.9.1 del plugin) lista todos los tamaños de una imagen, no sólo el original y los 3 por defecto. Podemos elegir también cualquier otro tamaño que haya sido creado desde el tema o desde un plugin.

    2.2. Cómo eliminar y dejar de crear las imágenes inútiles

    Una vez que detectamos aquellas imágenes inútiles que no hacen más que consumir recursos debemos eliminar las que tengamos ya creadas y decirle a WordPress que deje de crearlas.

    2.2.1. Eliminar imágenes inútiles

    Si tu WP es nuevo puedes saltarte este paso pero si llevas un tiempo con él lo más probable es que tengas un montón de imágenes inútiles en tu servidor.

    Veremos cómo deshacernos de todas esas imágenes que se han estado creando y que sólo sirven para ocupar espacio.

    Digamos que has cambiado los ajustes de medios o has cambiado de tema. Surgirán dos problemas:

    1. El nuevo tema utiliza tamaños de imagen nuevos, por ejemplo uno de 275×275
    2. El tema viejo utilizaba tamaños de imagen que ya no necesitas, por ejemplo uno de 450×250

    El plugin Regenerate Thumbnails Reminder te advertirá si surge algún problema del tipo 1, si detecta algún tamaño nuevo te recomendará que regeneres ese nuevo tamaño para las imágenes que ya tenías subidas. El plugin que ya hemos comentado Media Usage muestra con iconos las versiones de cada imagen de forma que puedes comprobar si hay variaciones entre los tamaños nuevos y los antiguos.

    Vamos a ver cómo regenerar estos nuevos tamaños.

    2.2.1.2 Cómo volver a crear los nuevos tamaños útiles en imágenes antiguas

    Para que todas tus imágenes antiguas tengan las versiones nuevas de tamaño útiles, en nuestro caso el nuevo tamaño 275×275 tenemos muchos plugins, el más famoso y clásico ya Regenerate Thumbnails.  Hace exactamente lo que pedimos regenerar en lote o individualmente los nuevos tamaños sin borrar ningún tamaño antiguo. Veamos otras opciones:

    Plugins que regeneran y también eliminan imágenes inútiles

    Image Regenerate & Select Crop: Divide la acción de regenerar por tamaño, tipo de publicación a la que se ha adjuntado, calidad para regenerarla, además si es un tamaño recortado puedes elegir el punto de anclaje. Puedes desactivar el tamaño que quieras y también eliminar todas las imágenes pertenecientes a ese tamaño para luego regenerarlas. Muy, muy completo.

    reGenerate Thumbnails Advanced: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, puedes elegir el período de tiempo de las imágenes a regenerar. Tendremos información del proceso así como un log de errores, por ejemplo si hay algún medio que no es una imagen.

    Force Regenerate Thumbnails: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, te muestra un resumen de esos tamaños eliminados y regenerados.

    Optimize Images Resizing: No hay ajustes, simplemente elimina y/o regenera.

    Plugins que sólo regeneran tamaños de imágenes

    ONet Regenerate Thumbnails: Puedes regenerar las imágenes en lote como muchos otros pero además puedes elegir el ratio de compresión, añadir un botón al lado del uploader del editor de publicaciones y crear nuevos tamaños de imagen. No elimina ninguna imagen.

    AJAX Thumbnail Rebuild: Eliges qué tamaños regenerar pero no elimina ninguna versión.

    Simple Image Sizes: Este plugin mejora la página Ajustes > Medios mostrando todos los tamaños disponibles y pudiendo crear los nuestros. De cada tamaño puedes editar su tamaño, recorte e incluso dando la opción de que un tamaño añadido por un tema, un plugin o creado por nosotros esté disponible en el editor. Por último permite regenerar aquellos tamaños que seleccionemos. No elimina ningún archivo.

    Thumbnails (Miniaturas): en vez de regenerar todas las imágenes, las crea y cachea cuando se necesitan evitando procesar una gran cantidad de imágenes. Además puede añadir la Imagen Destacada a entradas que no tengan ninguna asignada. Es muy útil cuando un tema o plugin crea un tamaño sin ID, por ejemplo los plugins de sliders suelen usar tamaños específicos.

    2.2.2.2 Cómo eliminar los tamaños inútiles de imágenes antiguas

    En el apartado anterior hemos visto muchos plugins que además de regenerar los nuevos tamaños permiten eliminar los que ya no sirvenreGenerate Thumbnails AdvancedImage Regenerate & Select CropForce Regenerate ThumbnailsOptimize Images Resizing

    Otra opción sería el plugin Theia Upload Cleaner for WordPress, te lista todos los tamaños de tu sitio y decides cuál eliminar. Además trae otras funciones para detectar imágenes inútiles que comentaremos en apartado sobre eliminar imágenes sin adjuntar.

    Theia Upload Cleaner eliminar tamaños inútiles de imagen

    Otra opción es hacerlo de forma manual, aunque no es aconsejable puedes usar por ejemplo Filezilla. Haces una búsqueda recursiva (icono prismáticos) en la carpeta uploads de archivos que contengan «-300x» y te devolverá todos los archivos cuyo ancho es 300px. Ej: imagen-inutil-300x127.jpg

    filezilla wordpress eliminar imágenes inútiles

    Si tienes acceso por SSH a tu servidor puedes hacer lo mismo yendo al directorio wp-content/uploads y luego ejecutando

    find . -name "*-300x*" -type f -delete

    Bonus: Actualizar el HTML después de regenerar y eliminar

    Regenerar y eliminar las imágenes no modifica el contenido de tus publicaciones, si pusiste una imagen de tamaño grande en una página y luego cambiaste su tamaño esa página seguirá buscando la imagen antigua. Afortunadamente tenemos una solución:

    Regenerate Thumbnails HTML: Muy útil sobre todo cuando los cambios son en los ajustes de Medios. Digamos que en mis entradas he añadido imágenes de tamaño medio durante meses cuyo tamaño máximo son 300px y ahora decido cambiarlo a 250px, si vamos a la pestaña HTML de una de esas entradas vemos que WP ha estado generando este código

    <img class="alignnone size-medium wp-image-50" src="https://ceslava.com/wp-content/uploads/2017/12/fotografia-300x127.jpg" alt="" width="300" height="127" />

    Donde la ruta del archivo será aquella versión de ancho 300, lo sabemos por el sufijo del nombre del archivo «nombre-archivo-anchoxalto.jpg» y que el atributo width toma como valor también los 300px. WordPress no actualiza este HTML aunque hayamos cambiado el tamaño medio, sigue llamando a la imagen anterior incluso si la eliminamos lo que puede resultar en enlaces rotos.

    Este plugin te permite hacer una búsqueda de etiquetas img según el atributo ancho y el ID del tamaño. Si da resultados puedes actualizar el HTML de tus publicaciones.

    2.2.1.3. Eliminar imágenes sin adjuntar

    Las podemos eliminar desde la misma Biblioteca de medios como hemos visto antes o pero mejor utilizando el plugin gratuito Media CleanerDNUI o incluso mejor el plugin Theia Upload Cleaner for WordPress que trae funciones extras. Estos plugins escanearán más a fondo la BBDD que un simple filtro de imágenes sin adjuntar que como vimos en el apartado sobre identificar imágenes sin adjuntar no siempre te asegura que sea inútil.

    Entre las ventajas de estos plugins están:

    • que cuando eliminas las imágenes además de enviarla a la papelera las mueve a otro directorio (uploads/wpmc-trash en el caso de Media Cleaner) y Theia Upload Cleaner además te crea una copia de seguridad. Si envías una imagen a la papelera desde la Biblioteca de Medios los archivos se quedarán en el mismo sitio
    • también escaneará posibles imágenes utilizadas en widgets, galerías o shortcodes
    • detectará como inútil aquellas imágenes adjuntadas pero que realmente no se utilizan

    Otros plugins:

    • WordPress Uploaded Files Cleaner que aunque lleva sin actualizarse mucho tiempo aún funciona
    • Image Cleanup ofrece una interfaz más pobre que los otros, de hecho no tenemos una miniatura de la imagen aunque es muy potente indexando todas las imágenes posibles.

    Como dijimos al principio del artículo recuerda que antes de eliminar cualquier imagen debemos hacer una copia de seguridad de la carpeta uploads y de la BBDD.

    2.2.2. Dejar de crear tamaños de imagen inútiles

    Añadiendo esta función evitarás que se creen tamaños de imagen especificados tanto en los ajustes, en el Core, en un plugin o en un tema.

    function no_crear_useless_image_sizes ($sizes) {
    unset( $sizes['medium']); /* tamaño por defecto (ver otro método 2.2.1) */
    unset( $sizes['medium_large']); /* tamaño responsive (ver 2.2.2) */
    unset( $sizes['jetpack-portfolio-admin-thumb']); /* tamaño del plugin Jetpack (ver 2.2.3) */
    unset( $sizes['twentyseventeen-thumbnail-avatar']); /* tamaño del tema Twenty Seventeen (ver 2.2.3) */
    return $sizes;
    }

    La función se la pasamos al hook intermediate_image_sizes_advanced que filtra todos los tamaños que genera WP automáticamente cada vez que subamos una imagen.

    add_filter('intermediate_image_sizes_advanced','no_crear_useless_image_sizes');

    En principio puedes añadirlo a tu archivo functions.php o mejor al functions.php de un tema hijo o como plugin.

    Si no quieres meterte en código puedes utilizar el plugin que hemos comentado antes Image Regenerate & Select Crop para desactivar tamaños de imagen.

    Otra opción es usar el plugin gratuito Optimize Images Resizing lo que hace es generar los tamaños sólo cuando se necesitan, no cuando se sube una imagen, es decir, este plugin evitaría que se generara el tamaño twentyseventeen-thumbnail-avatar del tema Twenty Seventeen porque jamás se va a necesitar. También puedes eliminar con él las imágenes inútiles antiguas.

    Me parece muy interesante para algunos tipos de proyectos que por ejemplo utilicen muchos tamaños y tengan una enorme librería de medios. Para un sitio al uso es un poco arriesgado dejar que WP genere el tamaño X cuando un usuario visite tu esa página.

    2.2.2.1. Dejar de crear tamaños por defecto

    Para que WordPress no genere alguna o todas las versiones que por defecto crea (thumbnail, medium y large) de cada imagen podemos ir a Ajustes > Medios y definir en cero los anchos y altos de las imágenes que nos sobren.

    Con esta configuración no se crearían imágenes de tamaño medio (‘medium’)

    2.2.2.2. Dejar de crear el tamaño responsive medium-large

    Igual quieres que WP no cree una versión de 768px de ancho de todas tus imágenes, quizás no porque no te preocupa esto de las imágenes responsive sino porque tu tema ya crea una imagen de este tamaño o casi y ves absurdo tener dos.

    2.2.2.3. Dejar de crear tamaños de plugins y temas

    Podemos evitar que se creen imágenes inútiles desde plugins o temas, simplemente conociendo el nombre de esa imagen. Si la función que hemos visto antes la añades al archivo functions.php debe estar después de que se haya definido el tamaño con add_image_size de ahí que os recomiendo hacerlo mejor desde un tema hijo.

    3. Conclusiones

    Tener optimizado tu WordPress es un trabajo de detalles, hay muchos factores en los que pensar, uno de ellos son los archivos. Como empezamos el artículo, tu servidor tiene un espacio finito.

    Resumen de pasos facilito y con plugins:

    1. Hagas una copia de seguridad
    2. Instales Image Regenerate & Select Crop y veas todos los tamaños que se están generando por cada imagen ¿De verdad los necesitas todos? Imagino que si estás leyendo esto es porque piensas que no
    3. Elimina las imágenes de los tamaños que no necesitas
    4. Desactiva los tamaños que no necesites para que no se vuelvan a crear
    5. Opcional: Si ves que alguno de los tamaños al margen de Miniatura, Medio y Grande te pueden ser útiles para incluirlos en alguna publicación en vez de tener que recortar o escalar la imagen instala el plugin Simple Image Sizes para añadirlo a los tamaños de inserción de imágenes del editor.

    Además si has cambiado de tema o los ajustes de medios

    1. Regenera los tamaños que han sido afectados
    2. Instala el plugin Regenerate Thumbnails HTML para actualizar los cambios en el HTML de inserciones de imágenes de tamaños que han cambiado.

    Te puede interesar también este otro artículo: Todo sobre la Imagen Destacada en WordPress

    Cualquier aporte, corrección o duda en los comentarios.

    Actualización 29-01-18

    He publicado el artículo Cómo optimizar las imágenes de tu WordPress con los resultados finales.

  • Cómo optimizar las imágenes de tu WordPress

    Cómo optimizar las imágenes de tu WordPress

    En el artículo Cómo eliminar las imágenes inútiles de WordPress vimos cómo configurar bien nuestro WordPress para que no genere versiones inútiles de una imagen. La idea era ahorrar espacio en el servidor, recursos, optimizar.

    En este artículo vamos a ver cómo optimizar esas imágenes restantes, las que sí son útiles y mostramos a nuestros usuarios, ahora no sólo estaremos ahorrando recursos del servidor sino que mejoraremos la velocidad de nuestro sitio, su rendimiento y por tanto el posicionamiento y la experiencia de nuestros usuarios.

    Antes de optimizar

    Antes de empezar a optimizar te aconsejo eliminar las imágenes inútiles. En elfinalde.com me deshice de muchas, logré eliminar 4GB.

    Tenía una versión «inútil», era muy parecida a la que crea WP para «responsive», la medium_large para resoluciones de 768px de ancho. Decidí quedarme sólo con 3 versiones de cada imagen además de la original. Es cierto que cuantos más tamaños disponga mejor resultado tendrás, pero en este proyecto el nº de imágenes es muy grande, así que opté por reducir las opciones, la mayoría se muestran pequeñas en una galería (100×100) y se amplían en una lightbox, además como tienen carga perezosa no me preocupa.

    Así que para que WP no me creara el código de imágenes responsive con <picture> lo desactivé:

    function elfinalde_disable_srcset( $sources ) {
    return false;
    }
    add_filter( 'wp_calculate_image_srcset', 'elfinalde_disable_srcset' );

    Cómo optimizar las imágenes en WordPress

    Existen varias soluciones, desde la manual hasta la automatización con un cron y la línea de comandos (ver WP CLI). En medio hay varios plugins que nos facilitan el proceso de optimización.

    Yo he utilizado ShortPixel, un plugin freemium gratuito hasta 100 imágenes al mes. Antes había utilizado EWWW Image Optimizer porque el volumen de imágenes en elfinalde.com supera con creces la centena, en cambio en muchos sitios será más que suficiente con la versión gratuita de ShortPixel.  La cuestión es que me contactaron para probarlo en elfinalde.com y el resultado ha sido brutal.

    ¡Alerta SPOILER! con ShortPixel pasé de 22,2GB a 9,9GB (ahorrado más de 12GB)

    Principalmente el ratio de compresión es mucho mayor además de características como copias de seguridad. Puedes hacer un test online del % de optimización que puedes lograr con ShortPixel. En elfinalde ha sido del 79%. Siempre tendrás acceso a las estadísticas

    La optimización se hace cada vez que subes una imagen aunque si ya tienes imágenes anteriores como era mi caso debes ejecutar la optimización en masa, por lotes. Tuve que procesar más de 70.000 imágenes, daros cuenta que cada tamaño es una imagen es 1 crédito, es decir, si tu sitio crea 4 versiones distintas de una imagen, el proceso se hará en 5 imágenes y también estarás consumiendo 5 créditos con ShortPixel. Por tanto asegúrate de no estar creando imágenes inútiles.

    Entre las opciones os recomiendo que activéis la eliminación de datos EXIF y que limites el tamaño máximo sobre todo si esas subidas no son manuales, si la hace un cliente o es a través de una API, en mi caso lo he fijado a 1200px.

    En los ajustes avanzados puede que te resulte llamativo crear una versión gratuita en formato WebP de Google. Con la configuración adecuada se incluirá esa versión en el elemento <picture> generado por WP. Yo lo hice, generé un imagen .webp por cada imagen pero me di cuenta que no sólo no ocupaban menos que su homónimo JPEG sino que muchas veces ocupaban más. Además de que si mi intención era ahorrar espacio en disco con esto lo estaba duplicando.

    Otra opción que me dio problema es la de convertir los PNG en JPEG, aunque el proceso lo hace bien, la imagen destacada que usaba el PNG no se actualiza con el JPEG.

    La optimización en lote te va informando del proceso, se hace en segundo plano y puedes seguir trabajando aunque siempre es recomendable no hacerlo por no saturar. Yo decidí para ahorrar créditos y recursos no optimizar las miniaturas, sólo las imágenes originales y tardó 4 días :O

    Por último debes tener en cuenta que ShortPixel crea una copia de seguridad que te permite revertir ese proceso. Y claro, esa copia ocupa espacio en tu servidor, puedes eliminarla desde la misma interfaz de ShortPixel.

    Conclusiones

    Dependerá del tipo de web que tienes, si usas o no muchas imágenes. En un blog donde publiques un par de artículos a la semana tienes de sobra con ShortPixel gratuito pero en un proyecto con miles de imágenes tener bien optimizada tu librería de medios es muy importante. Date cuenta que no sólo ahorras el espacio en tu librería sino también cada vez que haces un simple backup.

    En mi caso pasé de 26,5GB a 9,9GB.

     

     

     

  • Cómo migrar tu WordPress a HTTPS gratis y fácil

    Cómo migrar tu WordPress a HTTPS gratis y fácil

    Si todavía no has cambiado tu WordPress al protocolo HTTPS (HyperText Transfer Protocol Secure – Protocolo seguro de transferencia de hipertexto) ya estás tardando, a continuación te mostraré cómo hacerlo muy fácil y además de forma gratuita.

    ¿Por qué cambiar a HTTPS?

    ¿Pero esto de los certificados SSL no era sólo para tiendas? ¿No era algo para asegurar las plataformas de pago? ¿Y si yo tengo un blog de cine donde no vendo nada ni tengo ningún contenido sensible de seguridad también debo migrar?

    La respuesta es SÍ. Cualquier sitio web debe hoy día utilizar esta capa extra de seguridad. De hecho tus usuarios serán advertidos por los navegadores «Este sitio no es seguro» y lo contrario cuando visitas con Google Chrome un sitio con HTTPS en la barra de direcciones pone «Es seguro». Y Google agradece que la web sea más seguro añadiendo como factor de posicionamiento SEO este extra de seguridad. A todo esto hay que añadir las ventajas de la actualización del protocolo HTTP a HTTP/2 para la que necesitas un certificado SSL.

    Resumen: con HTTPS tu sitio será más seguro, ayudará a mejorar tu SEO y podrás beneficiarte de HTTP/2.

    Migrar tu WordPress a HTTPS en 5 pasos

    El artículo veremos los 5 pasos que he seguido para migrar mi sitio de cine y series https://elfinalde.com

    • PASO 1: Cómo conseguir un certificado SSL gratuito
    • PASO 2: Instalar tu certificado SSL en tu servidor
    • PASO 3: Activar HTTPS en tu WordPress
    • PASO 4: Configurar Google Search Console (Google Webmaster Tools)
    • PASO 5: Configurar Google Analytics

    PASO 1: Cómo conseguir un certificado SSL gratuito

    Lo primero es conseguir un certificado SSL (Secured Socket Layer / Capa de conexión segura) Algunos hostings ofrecen este servicio extra a un coste o incluyen el servicio gratuito de Let´s Encrypt. Compruébalo en tu plan de alojamiento, si no te ofrecen un SSL gratuito sigue estos pasos.

    1. Instala el plugin WP Encrypt en tu WordPress

    1. Completa los campos de su configuración, muy fácil, el nombre, tu país y su código. En los campos adicionales marca «Auto-generate Certificate» para que cuando caduque vuelva a generarse cada 90 días.

    1. Luego haz clic en «Register account» y luego en «Generate Certificate». Se te indicará la ruta de tu Certificado SSL totalmente gratuito en una nueva carpeta creada «letsencrypt», descarga esta carpeta a tu equipo por FTP.

    PASO 2: Instalar tu certificado SSL en tu servidor

    El siguiente paso es instalarlo el certificado creado en tu servidor. Vamos a verlo en Plesk

    1. Haz clic en la opción «Certificados SSL»

    1. En la siguiente pantalla haz click en Añadir certificado SSL

    1. Ahora tienes que ponerle un nombre y subir 3 archivos .pem que creaste en el PASO 1 en tu WordPress.
    • Como Clave privada (*.key) subes el archivo key.pem
    • Como Certificado (*.crt) subes el archivo cert.pem
    • Como Certificado CA (*-ca.crt) subes el archivo chain.pem

    1. Listo, ya tenemos el certificado, por último debes asociarlo a tu dominio. En Configuración de Hosting > Seguridad seleccionamos nuestro certificado

    En cPanel el proceso es similar, existen también plugins para cPanel de Let´s Encrypt. Si te surge alguna duda en este paso puedes consultar a tu proveedor de hosting.

    PASO 3: Activar HTTPS en tu WordPress

    Ya puedes visitar tu sitio con https://tudominio.com aunque si navegas por él o alguien te visita desde un buscador volverán a encontrarse con el antiguo «http». Hay que redireccionar todas las URLs que hasta ahora apuntaban a HTTP a HTTPS, puedes hacerlo manualmente en los ajustes, en .htaccess y con Buscar y Reemplazar en la base de datos o servirte de un plugin gratuito que no miente en su nombre Really Simple SSL

    Instalas, activas y ejecutas.

    Contenido mixto

    Si visitas tu sitio ahora desde HTTPS y aún no aparece el candado verde es porque el navegador ha encontrado algún contenido mixto, es decir, tu sitio es HTTPS pero hace peticiones a URLs HTTP. Por ejemplo desde CSS, JS tuyo o de algún plugin. El plugin Really Simple SSL corrige algunos pero a veces tendrás que comprobar con la consola qué URL está provocando esto y solucionarlo manualmente o probar otros plugins también gratuito como SSL Insecure Content Fixer o la versión Premium (de pago) del mismo Really Simple SSL

    PASO 4: Configurar Google Search Console (Google Webmaster Tools)

    El último paso es decirle a Google que hemos cambiado a HTTPS. Debemos crear dos nuevas propiedades, una por cada nueva versión de nuestro sitio (con y sin www) https://www.midominio.com y https://midominio.com

    Si lo prefieres puedes crear un conjunto con las 4 propiedades del mismo dominio.

    Añade el sitemap y en Configuración del sitio elige como dominio preferido (con o sin www) el mismo que tengas como  Dirección del sitio en los ajustes generales de tu WordPress.

    PASO 5: Configurar Google Analytics

    Ya tienes tu sitio funcionando con HTTPS ahora debes cambiarlo en GA. Vas a Administrar y eliges la cuenta, propiedad y vista correspondiente.

    En Configuración de la vista cambias a https:// la «URL del sitio web» y en Configuración de la propiedad la URL predeterminada.

    Y si lo deseas más abajo en la Configuración de la propiedad asocias tu propiedad de Search Console a la de GA. 

    Puedes hacer un test online de tu SSL en SSL Server Test

  • Cómo automatizar el atributo ALT en todas las imágenes de WordPress

    Cómo automatizar el atributo ALT en todas las imágenes de WordPress

    El atributo alt (texto alternativo) tiene la función de describir una imagen en la etiqueta HTML <img>. Debes tomarlo como un atributo obligatorio para accesibilidad web y SEO.

    Cada imagen que publiques debería sí o sí tener una descripción en su atributo alt por tres razones:

    1. Harás tu web más accesible para personas con alguna discapacidad visual, el atributo altes utilizado por los lectores de pantalla y navegadores para invidentes.
    2. Por SEO, ayudarás al posicionamiento de tu sitio.
    3. En el caso de que haya algún problema por el que no se puede mostrar la imagen el navegador mostrará el texto del atributo altDe ahí lo de texto alternativo.

    No debes confundirlo con el atributo title que los navegadores lo utilizan a modo de tooltip.

    Cómo añadir el atributo alt en WordPress

    Cuando añadimos una imagen en WordPress tenemos opción de incluirlo en un campo. Bien desde la Biblioteca multimedia

    atributo alt wordpress

    o desde el editor

    Si no completas ese campo el resultado será un alt vacío: alt=""WordPress no lo coge ni del nombre del archivo ni del título.

    Cómo añadir alt a todas las imágenes de WordPress

    Si no quieres hacer este trabajo de forma manual puedes automatizarlo, generar un texto alt para todas las imágenes de tu WordPress, las antiguas y para todas las que publiques desde ahora.

    Puedes utilizar el plugin SEO Friendly Images aunque lleva más de años sin actualizarse aún tiene más 200.000 instalaciones activas-

    O bien puedes añadir en tu archivo functions.php este código que buscará todos los alt vacíos, la cadena alt=""en el contenido de tus páginas y entradas y los sustituirá por alt="Título de la página o entrada nº imagen" Si pusiste manualmente el altno cambiará nada.

    function add_alt_tags( $content ) {
      preg_match_all( '/<img (.*?)\/>/', $content, $images );
      if ( ! is_null( $images ) ) {
        foreach ( $images[1] as $index => $value ) {
          if ( preg_match( '/alt=""/', $value ) ) {
            $new_img = str_replace(
              'alt=""',
              'alt="' . esc_attr( get_the_title() ) . ' '. $index . '"',
              $images[0][$index] );
            $content = str_replace(
              $images[0][$index],
              $new_img,
              $content );
          }
        }
      }
      return $content;
    }
    add_filter( 'the_content', 'add_alt_tags', 99999 );

    * Este código lo publicaron hace un tiempo los amigos de Nelio Software pero le he hecho algunas modificaciones para que funcione correctamente.

    Como hemos comentado esto es para las imágenes de tus entradas, páginas y Tipos de entradas personalizadas (CPT) pero en un WP hay más imágenes a las que añadir el atributo alt.Por un lado las imágenes de tu tema, para ello haz una búsqueda de las <img> en los archivos de tu tema y asegúrate de que tienen el atributo alt y por otro las imágenes destacadas.

    Cómo añadir alta las imágenes destacadas en WordPress

    Las imágenes destacadas la suelen utilizar los temas en la página de inicio, en el sidebar, en el footer, en las páginas de archivo, etc. En esta entrada hablamos de todo lo concerniente a las imágenes destacadas en WordPres

    Normalmente se hace uso de la función the_post_thumbnail o get_the_post_thumbnail en ambas funciones le puedes añadir los atributos que quieras al <img> que genere.

    Para añadir un alt con el título de la publicación busca esas 2 funciones en los archivos de tu tema y añade el array entero

    the_post_thumbnail( 
    'large', 
    array( "alt" => esc_attr( get_the_title() ) )
    
    );

     

    o si ya existe añade el alt separado por coma

    
    the_post_thumbnail( 
    'large', 
    array( 'itemprop' => "image", "alt" => esc_attr( get_the_title() ) )
    );

    Cómo añadir el atributo ALT a las imágenes de Woocommerce (actualización 30/01/18)

    Enrique nos pregunta en un comentario cómo añadir el atributo ALT a los productos de WooCommerce.

    Para WooCommerce nuestro código anterior no funciona porque las imágenes no están dentro del content. Una solución sería este plugin Seo Image Optimizer for WordPress & WooCommerce y otra bien implementar este código visto en How to automatically apply woocommerce product title to all product images alt tags?

    
    add_filter('wp_get_attachment_image_attributes', 'change_attachement_image_attributes', 20, 2);
    
    function change_attachement_image_attributes( $attr, $attachment ){
    // Get post parent
    $parent = get_post_field( 'post_parent', $attachment);
    
    // Get post type to check if it's product
    
    $type = get_post_field( 'post_type', $parent);
    if( $type != 'product' ){
        return $attr;
    }
    
    /// Get title
    $title = get_post_field( 'post_title', $parent);
    
    if( $attr['alt'] == ''){
        $attr['alt'] = $title;
        $attr['title'] = $title;
    }
    
    return $attr;
    }
    

    Actualización 31/03/18

    En los comentarios Juan Carlos López (muchas gracias) nos deja este otro script

    if (!(is_admin())) {
    function jclconsultor_add_alt_tags($content) {
    preg_match_all(‘//’,$content,$images);
    if (!is_null($images)) {
    $the_bloginfo= get_bloginfo(‘display’);
    $the_title	= ucwords(esc_attr(get_the_title()));
    foreach ($images[1] as $index => $value) {
    $img	= $images[0][$index];
    $img_alt = ‘ alt=”‘.$the_title.’ – ‘.$the_bloginfo.'” ‘;
    $img_title	= null;if (strpos($img,’title=””‘)===false){$img_title=’ title=”‘.$the_title.’ – ‘.$the_bloginfo.'” ‘;}
    if (preg_match(‘/alt=””/’,$value)) {
    $img_new=str_replace(‘alt=””‘,$img_alt.$img_title,$img);
    } else {
    if (strpos($img,’alt’)===false){$img_new=str_replace(‘<img','<img'.$img_alt.$img_title,$img);}
    }
    $content = str_replace($img,str_replace(' ',' ',$img_new),$content);
    }
    }
    return $content;
    }
    add_filter('the_content','jclconsultor_add_alt_tags',99999);
    }
    
    
  • Consejos para diseñar y concienciar sobre accesibilidad web

    Consejos para diseñar y concienciar sobre accesibilidad web

    Existen algunas reglas básicas para hacer nuestros diseños web accesibles al mayor rango de usuarios independientemente de sus capacidades técnicas, cognitivas o físicas. Según la OMS hay en el mundo alrededor de 600 millones de personas con algún tipo de discapacidad. Facilitar el acceso a nuestro sitio web, nuestro servicio o al de nuestro cliente no es tan complicado.

    La diseñadora Karwai Pun que trabaja para Home Office Digital del Gobierno del Reino Unido ha creado 6 carteles con estas reglas básicas de lo que hay que hacer y lo que no. Cada póster habla de un tipo de discapacidad específica: discapacidad auditiva, autismo, dislexia, discapacidad visual o discapacidad motora y uno específico para lectores de pantalla.

    accesibilidad

    Podemos encontrar reglas comunes como hacer los textos los más descriptivos y simples, usar tamaños de fuente legibles, usar el atributo <alt> para describir elementos multimedia, etc. Y alguna con matices según la discapacidad, como la que aplicamos al contraste de colores donde las personas con autismo parecen necesitar menos brillo que los que tienen alguna discapacidad visual.

    diseño accesibilidad lectores de pantalla consejos diseño accesibilidad web discapacidad motora consejos diseño accesibilidad web discapacidad visual consejos diseño accesibilidad web dislexia consejos diseño accesibilidad web discapacidad auditiva consejos diseño accesibilidad web autismo