{"id":559,"date":"2019-09-25T09:00:13","date_gmt":"2019-09-25T07:00:13","guid":{"rendered":"http:\/\/webposible.com\/xposible\/?p=559"},"modified":"2019-11-29T12:26:41","modified_gmt":"2019-11-29T10:26:41","slug":"ocho-viejos-errores-que-siguen-sin-solucionarse-en-la-web-actual","status":"publish","type":"post","link":"http:\/\/webposible.com\/xposible\/2019\/ocho-viejos-errores-que-siguen-sin-solucionarse-en-la-web-actual\/","title":{"rendered":"Ocho viejos errores que siguen sin solucionarse en la web actual"},"content":{"rendered":"\r\n<p>Pasan los a\u00f1os, avanzan los est\u00e1ndares, evolucionan los navegadores, vienen nuevos desarrolladores y nuevas paradigmas de desarrollo (con abundante e incluso excesivo <span lang=\"en\">javascript<\/span>, que no falte), pero hay errores que, a pesar del paso del tiempo, siguen estando presentes. Aqu\u00ed van algunos:<\/p>\r\n\r\n\r\n\r\n<h2>Error 1: No identificar el idioma (<code>lang<\/code>) de una p\u00e1gina adecuadamente<\/h2>\r\n\r\n\r\n\r\n<p>Es un peque\u00f1o detalle, pero muy importante. Si una p\u00e1gina est\u00e1 en ingl\u00e9s (en), espa\u00f1ol (es), franc\u00e9s (fr), chino (zh), esukera (eu), catal\u00e1n (ca), gallego (gl),\u2026 debe estar especificado en el c\u00f3digo fuente. Por ejemplo <code>&lt;html lang=\"lt\"&gt;<\/code> para una p\u00e1gina en lat\u00edn.<\/p>\r\n\r\n\r\n\r\n<p>Simplificando mucho: para el valor del atributo <code>lang<\/code> se emplea un valor <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_ISO_639-1_codes\">ISO-639-1<\/a>. Tambi\u00e9n se puede a\u00f1adir el c\u00f3digo del pa\u00eds tras un gui\u00f3n, como <code>lang=\"es-es\"<\/code> para espa\u00f1ol de Espa\u00f1a. Pero puede ser bastante m\u00e1s complejo, como se puede consultar en <a lang=\"en\" href=\"https:\/\/tools.ietf.org\/html\/bcp47\" hreflang=\"en\">Tags for Identifying Languages<\/a>.<\/p>\r\n\r\n\r\n\r\n<h2>Error 2: No incluir un t\u00edtulo apropiado para la web (<code>title<\/code>), ni para el contenido (<code>h1<\/code>)<\/h2>\r\n\r\n\r\n\r\n<p>Los elementos <code>title<\/code> y <code>h1<\/code> nos ofrecen la posibilidad de resumir el contenido de una p\u00e1gina web en unas pocas palabras (a personas y buscadores). Es una irresponsabilidad no utilizarlo adecuadamente. Tal vez, y salvo excepciones, una buena elecci\u00f3n sea usar el t\u00edtulo del documento para el <code>h1<\/code>, el mismo literal acompa\u00f1ado del nombre del dominio para el t\u00edtulo.<\/p>\r\n\r\n\r\n\r\n<h2>Error 3: Usar textos ambiguos en enlaces (por ejemplo \u00abaqu\u00ed\u00bb)<\/h2>\r\n\r\n\r\n\r\n<p>El cl\u00e1sico error: usar t\u00e9rminos como texto de un enlace que no tiene ning\u00fan significado le\u00eddo fuera de contexto. \u00bfA qu\u00e9 me refiero? Usar textos como \u00abaqu\u00ed\u00bb, \u00abenlace\u00bb \u00f3 \u00abp\u00e1gina\u00bb no aportan nada de informaci\u00f3n.<\/p>\r\n\r\n\r\n\r\n<p>Si para saber d\u00f3nde nos lleva un enlace tenemos que leer el p\u00e1rrafo entero o la frase en la que est\u00e1 el v\u00ednculo, cometemos un grave error doble:<\/p>\r\n\r\n\r\n\r\n<ul>\r\n<li>Hacemos perder el tiempo a los usuarios<\/li>\r\n<li>Perdemos una buena oportunidad de mejorar el posicionamiento web.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>Mi consejo: usar el t\u00edtulo del documento de destino como texto del enlace.<\/p>\r\n\r\n\r\n\r\n<p>Curiosidad SEO: hace a\u00f1os al buscar \u00abaqu\u00ed\u00bb en <span lang=\"en\">Google<\/span> nos mostraba la p\u00e1gina de descarga de <span lang=\"en\">Adobe Acrobat Reader<\/span>. El obvio motivo es la infinidad de v\u00ednculos con el texto \u00abaqu\u00ed\u00bb que enlazaban esa p\u00e1gina. De ah\u00ed la importancia para el posicionamiento de los enlaces.<\/p>\r\n\r\n\r\n\r\n<h2>Error 4: No diferenciar apropiadamente los enlaces mediante estilos<\/h2>\r\n\r\n\r\n\r\n<p>Otro serio problema: no diferenciar con claridad, los enlaces del texto que le rodea. \u00bfD\u00f3nde puedo hacer click, tocar? En no pocas ocasiones, al prescindir del cl\u00e1sico subrayado, perdemos un factor importante para diferenciar un enlace de un texto <em>normal<\/em>. En ocasiones el \u00fanico.<\/p>\r\n\r\n\r\n\r\n<p>Hay un porcentaje importante de usuarios con discromatopsia ( incapacidad para distiguir ciertos colores). Y en general, desde el punto de vista de la accesibilidad, es una mala pr\u00e1ctica usar el color para transmitir informaci\u00f3n: por ejemplo que la \u00fanica forma de distinguir un enlace sea por el color del texto.<\/p>\r\n\r\n\r\n\r\n<p>Obviamente hay situaciones, como men\u00fas de navegaci\u00f3n y enlaces con apariencia de botones, en los que el subrayado no es necesario. Pero en el resto de los casos, recomiendo subrayar los enlaces. Facilita mucho a los usuarios encontrarlos y evita frustraci\u00f3n\u2026 por no hablar de evita perder visitas.<\/p>\r\n\r\n\r\n\r\n<h2>Error 5: No incluir alternativa textual (<code>alt<\/code>) en las im\u00e1genes<\/h2>\r\n\r\n\r\n\r\n<p>En HTML5 tambi\u00e9n est\u00e1 <code>figcaption<\/code>, pero <code>alt<\/code> sigue teniendo toda su vigencia e importancia: describir textualmente una imagen, ya sea para las personas o para los buscadores es una obligaci\u00f3n moral y t\u00e9cnica.<\/p>\r\n\r\n\r\n\r\n<h2>Error 6: Insuficiente contraste entre el texto y el fondo<\/h2>\r\n\r\n\r\n\r\n<p>Entiendo que el color (y el contraste) es una forma que funciona para destacar unos elementos sobre otros. Pero se sobrepasa con demasiada frecuencia el l\u00edmite del contraste m\u00ednimo: pensad que se pueden dar situaciones de iluminaci\u00f3n nada \u00f3ptimas (el m\u00f3vil en la calle acompa\u00f1ado de un peque\u00f1o tama\u00f1o del texto), discapacidades visuales (la edad, la mencionada discromatopsia que dificulta diferenciar colores,\u2026) y no tiene sentido incluir un texto que no se puede leer en cualquier contexto.<\/p>\r\n\r\n\r\n\r\n<p>Siendo m\u00e1s concreto: no entiendo (ni comparto), el uso de fondo oscuro (casi negro) con un texto min\u00fasculo en color gris medio.<\/p>\r\n\r\n\r\n\r\n<p>\u00bfC\u00f3mo remediarlo? con herramientas como <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">contrastchecker<\/a>.<\/p>\r\n\r\n\r\n\r\n<h2>Error 7: Que la web no se visualice apropiadamente en un tel\u00e9fono m\u00f3vil<\/h2>\r\n\r\n\r\n\r\n<p>La aparici\u00f3n del iPhone (2007) ha sido sin duda un hito en el desarrollo de la web m\u00f3vil. M\u00e1s de diez a\u00f1os m\u00e1s tarde, no tiene sentido que una web no se visualice apropiadamente en un tel\u00e9fono m\u00f3vil corriente.<br \/>Sorprende, que en numerosos casos, hay m\u00e1s usuarios que acceden a una web desde un tel\u00e9fono m\u00f3vil que desde ordenadores de sobremesa. Pensemos adem\u00e1s en que pueden tener una conexi\u00f3n lenta, o ciertas restricciones en el uso de datos (que se consumen con mucha facilidad).<br \/>La cifra de personas que acceden a una web desde un tel\u00e9fono m\u00f3vil deber\u00eda ser uno de los datos m\u00e1s importantes a la hora de desarrollar web y pensar que un exceso de recursos (<span lang=\"en\">kilobityes<\/span> de im\u00e1genes, <span lang=\"en\">scripts<\/span>, estilos,\u2026) repercute negativamente y aleja a los posibles usuarios.<\/p>\r\n\r\n\r\n\r\n<h2>Error 8: Que no cumpla unos requisitos m\u00ednimos de accesibilidad.<\/h2>\r\n\r\n\r\n\r\n<p>Las <a href=\"https:\/\/www.w3.org\/TR\/WAI-WEBCONTENT\/\" hreflang=\"en\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr> 1.0<\/a> se publicaron como recomendaci\u00f3n en el a\u00f1o 1999. La segunda versi\u00f3n (<a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" hreflang=\"en\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr> 2.0<\/a>), se publica en el 2008 y la \u00faltima (<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" hreflang=\"en\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr> 2.1<\/a>), en el a\u00f1o 2018. La legislaci\u00f3n ha ido, con cierto retraso, siguiendo los pasos del W3C, pero ah\u00ed tenemos en Europa y Espa\u00f1a las \u00faltimas novedades (leer <a href=\"http:\/\/webposible.com\/xposible\/2019\/disponible-la-une-en-3015492019\/\">Disponible la UNE-EN 301549:2019 de accesibilidad<\/a> para tener algo m\u00e1s de informaci\u00f3n).<\/p>\r\n\r\n\r\n\r\n<p>Impedir o dificultar el acceso a una web a una parte nada despreciable de personas, es una imprudencia. Y si entramos en t\u00e9rminos morales, una discriminaci\u00f3n inmerecida. Si el argumento moral no funciona, tal vez sea m\u00e1s convincente el asunto de la p\u00e9rdida de visitas o beneficios por ventas, oportunidades de negocio o publicidad.<\/p>\r\n\r\n\r\n\r\n<p><strong>Apunte final<\/strong>: la mayor parte de los errores aqu\u00ed mencionados est\u00e1n muy relacionados con la accesibilidad. Da para una pensada en profundidad.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Pasan los a\u00f1os, avanzan los est\u00e1ndares, evolucionan los navegadores, vienen nuevos desarrolladores y nuevas paradigmas de desarrollo (con abundante e incluso excesivo javascript, que no falte), pero hay errores que, a pesar del paso del tiempo, siguen estando presentes. Aqu\u00ed van algunos: Error 1: No identificar el idioma (lang) de una p\u00e1gina adecuadamente Es un [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/559"}],"collection":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":3,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/559\/revisions"}],"predecessor-version":[{"id":589,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/559\/revisions\/589"}],"wp:attachment":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/media?parent=559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/categories?post=559"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/tags?post=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}