Accesibilidad web ¿Qué es? y ¿Por qué es importante para tu sitio web?

Accesibilidad web ¿Qué es? y ¿Por qué es importante para tu sitio web?

¿Has escuchado hablar del término de accesibilidad web?, te pongo un ejemplo:

Piensa en la banqueta de la calle en donde vives, ¿listo?, ahora si tuvieras que transitar por ella en silla de ruedas ¿podrías recorrerla de un extremo a otro sin ningún inconveniente?, te puedo decir que en mi caso no y el primer obstáculo que encuentro es un poste de luz.

Así como en este ejemplo la banqueta es inaccesible sucede con muchos sitios web. Y es que existen diferentes tipos de discapacidades que pueden interrumpir la navegación de los usuarios, si los sitios web no son creados pensando en todos aquellos que tienen algún tipo de discapacidad.

Y así como no se piensa en las personas en sillas de ruedas o con algún otro tipo de discapacidad para realizar una banqueta y se tienen que bajar a la calle para poder transitar. Los usuarios de una página web la abandonan si no es accesible para navegar en ella.

Es por eso que es importante crear sitios web accesibles para todos los usuarios y adaptables a cualquier tipo de dispositivo en el que se esté visualizando, ya que aproximadamente del 15% al 20% de la población mundial presenta alguna discapacidad.

¿Por qué es importante la accesibilidad web?

El construir un sitio web accesible se ha convertido en algo primordial para aquellas empresas o negocios que se manejan en el ámbito online, quitando las barreras digitales que puedan existir y abriendo horizontes para que tu página web pueda ser navegada por cualquier persona.

Es una realidad que hoy en día es cada vez es más común que los seres humanos tenemos una vida en la que el Internet viene incluido, ya que este nos brinda acceso a un muy diverso tipo de contenido, desde noticias, entretenimiento, comunicación a través de correos o redes sociales hasta compras y ventas.

Al momento de acceder a esta amplia gama de contenidos se emplean nuestros sentidos como la vista para leerlos, el oído para escuchar audios, el tacto para teclear las búsquedas y hacer los clics, incluso la parte cognitiva para comprender lo que estamos explorando.

Es ahí donde radica la importancia de que los sitios web sean accesibles, es decir, que brinden un acceso igualitario para todos los usuarios, así como saber cómo hacer esto posible, quieres saber más, continúa leyendo.

accesibilidad-web

¿Qué es la accesibilidad web?

Comencemos por lo básico la definición, un producto accesible implica que todos podamos hacer uso de él, sin importar la edad, sexo, idioma, cultura, nivel educativo o si la persona interesada presente algún tipo de discapacidad.

La accesibilidad aplicada a los sitios web busca precisamente que éstos sean utilizables para el máximo número de usuarios, sin importar sus capacidades o conocimientos, creando páginas que van a permitir que las personas puedan percibir, navegar, entender e interactuar con la Web sin ningún tipo de obstáculo.

Además el uso de páginas accesibles permite que sean consultadas con la misma efectividad, seguridad y protección, independientemente del tipo de condición que presente el usuario.

La Accesibilidad Web es todo un arte que garantiza que los portales que se visiten sean utilizados y comprendidos de forma satisfactoria por gran cantidad de usuarios. Cuando se cumple con todos los estándares de accesibilidad, se asegura una experiencia incluyente y con oportunidades iguales para todos, rompiendo así barreras físicas y sociales.

Como bien lo especificó Tim Berners-Lee, Director del W3C e inventor de la World Wide Web, “El poder de la Web está en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial” (Fuente: World Wide Web Consortium Launches International Program Office for Web Accessibility Initiative).

El consorcio W3C también define que Accesibilidad Web significa que “personas con algún tipo de discapacidad van a poder hacer uso de la Web”. Es por eso que es importante distinguir este tipo de público que también podría navegar en tus sitios web.

¿Cuál es la comunidad de impacto en la accesibilidad web?

Como mencionamos al principio en la actualidad estudios demuestran que aproximadamente del 15% al 20% de la población mundial presenta alguna discapacidad, y el internet les ha beneficiado de alguna manera en sus vidas.

Es imposible no ver este número de tráfico potencial para cualquier negocio, por eso es importante tomar las consideraciones necesarias para que los sitios web cuenten con el potencial que se requiere para ofrecer una óptima experiencia de usuario para todo tipo de personas.

La comunidad de usuarios web con discapacidades puede ser dividida en: visual, motora, auditiva y cognitiva.

tipos-de-discapacidades

Visual: problemas que afectan la vista de las personas que se subdividen en:

  • Usuarios con ceguera total o visión muy reducida.
  • Usuarios con deficiencia visual o visión parcial.
  • Usuarios con ceguera al color o daltonismo.

En este caso las mejores opciones a presentar para una navegación Web accesible pueden ser:

  1. Contar con programas compatibles de lectura de pantalla, los cuales leen el texto electrónico en voz alta para que las personas con discapacidades visuales puedan tener acceso a cualquier contenido de la red.
  2. Crear contenido de tamaño reajustable, que permita visualizar fuentes en diferentes dimensiones.
  3. Definir contrastes de color.
  4. Asignar descripciones de audio.
  5. Contar con texto alternativo para imágenes y videos.

Motora: problemas que afectan a personas con formas diversas de movimiento limitado o usuarios con discapacidad física. En este caso las opciones posibles para brindar contenidos web accesibles son:

  1. Acceder a operaciones de teclado.
  2. Comandos de voz.
  3. Contar con compatibilidad de diversas tecnologías de asistencia como: palos bucales, varillas para la cabeza y dispositivos de conmutación.
  4. Controles con sus adecuados etiquetados.
  5. Procesos de corrección de errores sencillos.
  6. Software de seguimiento de ojo.

Auditiva: problemas que afectan a personas sordas o con audición limitada. Para este caso se pueden ofrecer las siguientes alternativas que brindan una experiencia de red accesible.

  1. Contenido de audio y video con subtítulos y transcripciones.
  2. Contenido mostrado en lengua de señas.

Cognitiva: problemas que afectan a personas con afecciones en la memoria, la atención o la capacidad para interpretar la información, presentan dificultades de aprendizaje, distracción y también muestran incapacidad para recordar o concentrarse.

Las opciones más convenientes para ofrecer sitios web en esta categoría son:

  1. Legibilidad en el contenido.
  2. Contar con un diseño de fácil navegación.
  3. Brindar experiencias de navegación ininterrumpida.
  4. Generar textos con espaciado suficiente.
  5. Optar por contenidos de estructuras sencillas y flexibles.
  6. De igual manera para las personas que tienen problemas de lenguaje se les ofrece el poder navegar a
  7. través de la web tan solo con emitir algún sonido.

Entre mayor número de consideraciones, de las mencionadas arriba, tomes en cuenta a la hora de diseñar tus sitios web, más amplio será el portal de personas a las que llegará el contenido de tu negocio.

Las personas con discapacidades son un público en potencia, que en lugar de ignorarse debe incluirse en las experiencias de navegación, el grado de uso del Internet mejorará abarcando un mayor número de perfiles de discapacidad, creando así toda una comunidad de accesibilidad.

Beneficios de la Accesibilidad Web

Una vez que se tiene claramente definida la Accesibilidad Web puedes conocer y aprovechar las ventajas que te va a ofrecer el que tu página web cuente con este atributo.

Dentro de la amplia gama de beneficios que ofrece un sitio web con accesibilidad para sus propietarios y usuarios, están los siguientes:

  • Mejora el posicionamiento de tu página web en los buscadores y el de tu SEO.
  • Incrementa la audiencia y tu cuota de mercado.
  • Para todo tipo de usuarios se mejora la usabilidad de tu web.
  • Además de la comunidad en potencia de usuarios con discapacidad, también abre las puertas para adultos mayores y a usuarios que tienen entornos no favorecedores como baja iluminación, ambientes con ruidos constantes, espacios muy reducidos, etc.
  • Aumenta el soporte para mercado internacional (idiomas alternativos, subtítulos, contenidos universales, etc.)
  • Reduce la brecha digital.
  • La eficiencia y el tiempo de respuesta se mejoran.
  • Da muestra de la responsabilidad social, evitando la discriminación por tener discapacidad y cumpliendo el derecho a la participación.
  • Te destaca de la competencia.
  • Se mitiga el riesgo de quejas y demandas.
  • Está en pro de los objetivos europeos como son: creación de nuevos mercados, aumento de la productividad y el empleo, mejor acceso a herramientas de información y comunicación, entre otros.
  • Los costos de desarrollo y mantenimiento se reducen.
  • Se logra que tus contenidos al ser visualizados en distintos navegadores y dispositivos sean equivalentes, cumpliendo los estándares de accesibilidad.

Como puedes ver son muchos los beneficios que se pueden tener al contar con un sitio web accesible.

Hay beneficios que puedes encontrar de manera general y también los incluidos en diferentes sitios como: el W3C en su página Auxiliary Benefits of Accessible Web Design, el Observatorio de la Accesibilidad TIC de Discapnet, entre otros.

El Marco jurídico de la Accesibilidad Web en el entorno universal

Hablando de accesibilidad, uno de los elementos más representativos es la World Wide Web (W3C), la cual logra unir a infinidad de ordenadores alrededor del mundo, de ahí se desprenden diversos principios y legislaciones a nivel internacional que se describen en las próximas líneas.

marco-juridico-accesibilidad-web

España y Unión Europea

Para el caso de las administraciones públicas españolas, éstas tienen que ser accesibles por Ley a partir del año 2006, de ahí surge la actual norma sobre accesibilidad conocida como Real Decreto 1112/2018 (del 7 de septiembre de ese año) que abarca tanto la accesibilidad de los sitios web y como la accesibilidad de aplicaciones para dispositivos móviles en el sector público.

Este Real Decreto 1112/2018 tiene como estándar de accesibilidad para los sitios web las recomendaciones contenidas en el consorcio W3C, las cuales fueron elaboradas por el grupo WAI (Iniciativa de Accesibilidad Web) y descritas en textos de las Pautas de Accesibilidad WCAG.

En el marco de este Real Decreto, la Directiva del Parlamento Europeo y el Consejo de la Unión Europea generan el texto para efectos de EEE sobre “la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público”.

Dicho principio determina a la accesibilidad como un conjunto de principios y técnicas a respetar al momento de diseñar, construir, actualizar y mantener los sitios web y las aplicaciones de dispositivos móviles.

En base a esto, la Directiva de Accesibilidad hace obligatorio que los sitios web y las aplicaciones de los dispositivos móviles de los organismos del sector público tengan como base estos requisitos comunes, definidos a nivel de accesibilidad europeo.

Así mismo, esta Directiva Europea obliga a los Estados miembros, a partir del 26 de octubre de 2016, establecer un sistema de presentación y seguimiento de informes de manera periódica a la Comisión Europea, adoptando medidas de promoción, formación y concientización en lo que respecta a accesibilidad.

Para más información referente a este real decreto puedes consultar la página: https://www.boe.es.

Por otro lado, se crea el instrumento técnico denominado Observatorio Estatal de la Discapacidad (OED) el cual se pone al servicio de las administraciones públicas para la recopilación, sistematización, actualización, generación y difusión de información en lo relacionado al entorno de la discapacidad.

El OED está amparado bajo el Artículo 73° del Real Decreto Legislativo 1/2013 y por medio de éste se configura como un instrumento de promoción y orientación de las políticas públicas de acuerdo a la Convención Internacional sobre los derechos de personas con discapacidad.

El OED se promueve a través de las siguientes instituciones:

  • Ministerio de Sanidad.
  • Servicios Sociales e Igualdad, a través de la Dirección General de Políticas de Apoyo a la Discapacidad.
  • El Real Patronato sobre Discapacidad.
  • La Comunidad Autónoma de Extremadura a través del Servicio Extremeño de Promoción de la
  • Autonomía y Atención a la Dependencia (SEPAD).
  • El Comité Español de Representantes de Personas con Discapacidad.
  • La Universidad de Extremadura.
  • Por último, pero no menos importante, el Tratado de Ámsterdam de la Unión Europea, dentro de la cláusula de la no-discriminación, marca como objetivo llevar a cabo un inventario de soluciones en el mercado.

En esta cláusula es implementada tanto para el software como para el hardware, garantizando la “no-discriminación” en las personas y de esta manera ir creando el modelo europeo a seguir.

Iberoamérica

Países como Argentina, Brasil, Colombia, El Salvador, Perú, Puerto Rico y Costa Rica, adoptaron la sintetización de que “el desarrollo y el acceso universal y equitativo a la Sociedad del Conocimiento constituye un desafío y una oportunidad que ayuda a alcanzar las metas sociales, económicas y políticas de los países de las Américas”.

Esto se da en el marco de la XXXVI sesión ordinaria de la Asamblea General de la OEA, la cual se desarrolló bajo el lema “Gobernabilidad y Desarrollo en la Sociedad del Conocimiento”, aprobada por los Ministros de Relaciones Exteriores de las Américas el 6 de junio de 2006, aclamada por una declaración de accesibilidad denominada Declaración de Santo Domingo.

Argentina

Existen varios proyectos de ley en este país, como el Proyecto de Ley 1923-03 del gobierno de la ciudad de Buenos Aires y el Proyecto de Ley Sobre Acceso de las Personas con Discapacidad a los Sitios de Internet, expediente 2954/03 del Senado de la Nación.

De igual manera se cuenta con la Ley de Accesibilidad de la Información en las Páginas Web sancionada por el Senado de la República de Argentina el 3 de noviembre de 2010.

Brasil

En la administración pública brasileña se establece y sanciona el Decreto 5296 el 2 de diciembre de 2004, dicho decreto define conceptos como barrera de accesibilidad, ayudas técnicas y de diseño universal.

Así mismo, el Decreto 5296 marca en su Artículo 47° un plazo de 12 meses a partir de su publicación, para que sea obligatorio que los sitios electrónicos de la Administración General del Estado sean accesibles para personas con deficiencia visual, garantizando el pleno acceso a la información.

Por otro lado, hacia el año 2000, el día 10 de diciembre se sanciona la Ley 10.098, la cual establece las normas generales y criterios básicos que garantizan la accesibilidad al medio físico, a los transportes y a las comunicaciones para todas las personas con discapacidades o movilidad reducida.

También fue organizado el Taller para la Inclusión Digital con invitados expertos de todo el mundo, que define directrices y propuestas que impulsan la Inclusión Digital Brasileña.

Colombia

El Gobierno colombiano expidió el Decreto 1151, el 29 de abril de 2008, mediante el cual se constituyen los “lineamientos generales de la Estrategia de Gobierno En Línea” de carácter obligatorio para todas las entidades de la administración pública del país.

Perú

El gobierno peruano lanza la Ley 28530 “Ley de Promoción de Acceso a Internet para personas con discapacidad y adecuación del espacio físico de las cabinas Internet”, la cual entró en vigor el 25 de septiembre de 2005.

Dicha Ley marca en su Artículo 3° la Adecuación de portales y páginas web para entidades públicas y universidades, incorporando opciones de acceso a la información para personas con discapacidad visual.

En su Artículo 7° determina las Sanciones para el incumplimiento de los artículos 3° y 4°, sancionándose a través de multa, de la cual el 60% se transfiere a la CONADIS para el cumplimiento de sus funciones, en base a esta Ley.

Puerto Rico

El Gobierno del Estado Libre Asociado de Puerto Rico garantiza el acceso a toda información relevante que se publique en sus páginas oficiales de Internet, para toda la población y para visitantes virtuales con algún impedimento, a través de la Ley 229 del 2 de septiembre de 2003.

El Salvador

Por su parte, la ley más general que maneja el gobierno de El Salvador es la Ley de Equiparación de Oportunidades para las Personas con Discapacidad (Ley 888), publicada el 27 de abril del año 2000.

Costa Rica

Las leyes relacionadas a la accesibilidad para el país de Costa Rica se acotan a las siguientes:

  • Ley N° 8100: se aprueba la Constitución y Convenio de la Unión Internacional de Telecomunicaciones),
  • Ley 7600: Ley de igualdad de oportunidades para las personas con discapacidad y
  • Ley 8661: Ley de Aprobación de la Convención sobre los Derechos de las Personas con Discapacidad y su Protocolo (19 de agosto de 2008).

Para el año 2019 se crea la Directriz N° 051-MTSS-MICITT de “Implementación de sitios web accesibles en el sector público costarricense” mediante la cual se exige cumplir con los criterios de accesibilidad web.

Así como se sabe, ya que el público de impacto al que beneficia la accesibilidad web es considerable, también a través de este recuento universal se denota que hablar de sitios web accesibles ya es un tema internacional que cada vez es más y más relevante aplicarlo.

Pautas existentes de la Accesibilidad Web

Para generar una accesibilidad web es necesario tomar en cuenta componentes esenciales para el desarrollo web, dichos componentes van a interactuar juntos y para esto es necesario aplicar ciertas pautas que a continuación se explican.

pautas-accesibilidad-web

ATAG (Authoring Tool Accessibility Guidelines, ATAG). Pautas de Accesibilidad para herramientas de creación de contenido

Este tipo de pautas se refieren a programas o servicios que los desarrolladores web, diseñadores o redactores emplean para crear el contenido web.

A través de documentos denominados ATAG se especifica cómo lograr que las herramientas de creación de contenido sean accesibles, para que de esta forma les sea posible a las personas con discapacidad crear contenido web.

UAAG (User Agent Accessibility Guidelines, UAAG). Pautas de Accesibilidad para el agente de usuario

Los navegadores, extensiones de navegadores, reproductores multimedia, lectores y cualquier aplicación que exponga contenido web son los considerados agentes de usuario y para los cuales estas pautas aplican.

Las pautas de UAAG son desarrolladas por el Grupo de Pautas de Accesibilidad del Agente de Usuario (UAWG), el cual forma parte de la WAI del consorcio W3C.

WCAG (Web Content Accessibility Guidelines). Pautas de Accesibilidad para el contenido web

Este tipo de pautas son aplicables para contenido móvil o dinámico, así como Tecnologías de la Información y Comunicación que no estén relacionadas con la web.

Hacia el año de 1999 un grupo de trabajo llamado Iniciativa de Accesibilidad Web mejor conocido por sus siglas en inglés como WAI, creado por el consorcio W3C desarrolló las “Pautas de Accesibilidad para el Contenido en la Web 1.0 (WCAG)” las cuales fueron actualizadas a su versión “WCAG 2.0” la cual en el presente es un estándar internacional.

Las WCAG 1.0 generaron 14 directrices, las cuales eran:

  1. Proporciona alternativas equivalentes para el contenido visual y auditivo.
  2. No te bases únicamente en el color para indicar o informar.
  3. Utiliza marcadores y hojas de estilo y hazlo apropiadamente.
  4. Identifica el idioma usado.
  5. Crea tablas que se transformen correctamente.
  6. Asegúrate de que las páginas que incorporen nuevas tecnologías se transformen correctamente.
  7. Asegura al usuario el control sobre los cambios de los contenidos tempo-dependientes.
  8. Asegura la accesibilidad directa de las interfaces incrustadas.
  9. Diseña para la independencia del dispositivo.
  10. Utiliza soluciones provisionales.
  11. Utiliza las tecnologías y pautas W3C.
  12. Proporciona información de contexto y orientación.
  13. Proporciona mecanismos claros de navegación.
  14. Asegúrate de que los documentos sean claros y simples.

A su vez creó una gran cantidad de puntos de control para definir qué tanta accesibilidad podía tener una página web. Conforme la tecnología en general para la web y para las personas con discapacidad fue avanzando, fue necesario adecuarse a esto y dar paso a las WCAG 2.0.

Las pautas de la versión WCAG 2.0 se destinan a audiencias variadas, como desarrolladores y diseñadores Web, desarrolladores de herramientas o personas que ocupan guiarse por dicho estándar para garantizar la accesibilidad.

De lo que más distingue a las pautas WCAG 2.0 de las WCAG 1.0 es que se centran más en principios que en técnicas lo cual hará que las pautas vayan evolucionando a la par de la tecnología.

La “WCAG 2.0” se comprende de 4 principios fundamentales, los cuales son:

  • Perceptible: Hace que tu contenido esté a disposición de todos los sentidos, principalmente la vista y el oído, por medio del navegador o de ayudas técnicas como los ampliadores o los lectores de pantalla, símbolos o lenguajes más simples, braille, entre otras.
  • Operable: Permite que los visitantes interactúen con cada uno de los elementos o controles interactivos, a través del uso del ratón, el teclado o cualquier dispositivo de apoyo, según sea el caso.
    También brinda al usuario el tiempo necesario para leer y utilizar el contenido, de igual manera proporciona los medios para que pueda navegar y encontrar dicho contenido fácilmente.
  • Comprensible: No da lugar a confusiones o ambigüedades, el contenido es cien por ciento claro, legible e incluso un tanto predecible.
  • Robusta: Tu contenido contará con una vasta gama de tecnologías, que incluyen viejos y nuevos agentes de usuario y ayudas técnicas que tengan una máxima compatibilidad con las aplicaciones actuales y futuras.

Dichos principios son desarrollados en 12 pautas que tienen como objetivo generar un ambiente de cooperación en el contenido Web accesible, estableciendo 3 niveles de prioridad entre ellas.

Tomando en cuenta los puntos de verificación señalados, cada pauta contiene criterios de conformidad que se determinan como “Niveles de Conformidad” y están estructurados de la siguiente manera:

  • Nivel de Conformidad “A”: En este se enmarcan todos los puntos de verificación de prioridad 1. Abarca los puntos que en definitiva sí se tienen que cumplir para que uno o más grupos de personas se topen con sitios web accesibles. Contiene 25 criterios de conformidad.
  • Nivel de Conformidad “AA”: Aquí se cumplen todos los puntos de verificación de las prioridades 1 y 2. En este supuesto se incluyen los puntos que se deben cumplir para que no haya dificultades para acceder al sitio. Contiene 13 criterios más de conformidad.
  • Nivel de Conformidad “AAA”: En este se logran satisfacer los puntos de verificación incluidos en las prioridades 1, 2 y 3. Es aquí donde se incluyen los puntos que se pueden cumplir para que cualquier grupo de usuarios pueda acceder a la página web. Se adicionan otros 23 criterios de conformidad que sumados a los 38 anteriores dan un total de 61.

¿Cómo lograr un sitio web accesible?

Ya conocemos la definición, legislación, ventajas y demás pormenores de lo que es y lo que representa la accesibilidad web, ahora te preguntarás y ¿Cómo logro esto? Pues bien, en las siguientes líneas vas a descubrirlo.

Para lograr un sitio web accesible en su diseño y desarrollo hay que tomar en cuenta que no todos los visitantes lo pueden hacer con los mismos medios técnicos ni cuentan con las mismas capacidades para comprender todo el contenido que se publica.

Derivado de esto surgen 2 principios básicos para diseñar un sitio web accesible, los cuales son:

  • Crea páginas que se transformen correctamente y
  • Ofrece el contenido de manera comprensible para facilitar la navegación por el sitio web.

Para desarrollar el diseño accesible de tu página web es vital que emplees las guías o pautas de accesibilidad arriba mencionadas que comprenden las WCAG 1.0, las WCAG 2.0 e incluso ya una versión de las WCAG 2.1.

Además de los arriba mencionados, existe otra serie de principios claves a la hora de diseñar y desarrollar tu sitio web accesible, los cuales son fácil de implementar y son:

  • Da un diseño visual accesible: en este principio hay que estructurar el diseño con sus respectivos tamaños de tipografías, contrastes de color, ubicación de áreas para dar clics, entre otras, optando por configuraciones personalizadas o navegadores especializados que permitan adaptarse a las necesidades especiales de cada usuario.
  • Proporciona un adecuado texto alternativo: esta opción es utilizada para aquellos contenidos que no se comprenden de textos, puede ser muy útil para la navegación de personas ciegas que lo hacen a través de un lector de pantalla.
  • Brinda encabezados en las tablas de datos: la información muchas veces puede ser organizada por medio de tablas, pero estas deben contar con su adecuado encabezado el cual estará relacionado con las celdas que las componen.
    Este principio también facilita la navegación para usuarios con lectores de pantalla.
  • Garantiza que los usuarios puedan completar y enviar todos los formularios: en este caso hay que asegurar que cada elemento de un formulario tenga una etiqueta y que ésta sea asociadas al elemento que le corresponda.
    De igual manera hay que garantizar que el usuario pueda enviar su formulario y por supuesto si se presenta algún error pueda recuperarse de él.
  • Asegura que tus enlaces tengan sentido fuera de contexto: si el texto con el que se haga algún enlace se lee por parte del usuario de forma aislada, debe tener sentido.
  • Proporciona subtítulos y/o transcripciones: esto debe ser empleado para videos y audios, si el audio está archivado puede ser suficiente con una transcripción.
  • Garantiza accesibilidad en el contenido que no sea HTML (incluyendo: archivos PDF, documentos Word, presentaciones Power Point y contenido de Adobe Flash): hay que ofrecer alguna alternativa accesible para estos casos o en su defecto sustituirlos por HTML. Para los archivos de PDF es importante que también se le incluyan etiquetas.
  • Permite el poder saltar elementos repetitivos en tu página: es necesario proporcionar la opción a los usuarios de que puedan saltar el mecanismo de navegación y todo elemento que se repita en la página.
    Esto a través de un enlace en la parte superior que puede ser “Saltar al contenido”, “Saltar al contenido principal” o “Saltar navegación”; es como cuando le saltas la intro a tu serie favorita para irte directo a lo que sigue.
  • Al transmitir el significado de tus contenidos, no confíes únicamente en el color: muchas veces el color mejora la comprensión, pero no bases dicho entendimiento solamente en el color, para que sea algo disponible para personas daltónicas o usuarios de lectores de pantalla.
  • Asegúrate de crear contenido escrito claramente y que sea fácil de leer: haz tus escritos claros, utiliza encabezados, listas y evidentes tipos de letras.
  • Que el Javascript sea accesible: hay que garantizar que independiente al dispositivo empleado estén los controladores de eventos de Javascript, para no requerir el uso del ratón.
  • Diseña de acuerdo a las normas: en este caso hay que separar el contenido de tu presentación, lo cual se logra empleando CSS, creando así un contenido más flexible y accesible.
  • Al hacer uso de estos criterios de accesibilidad puedes establecer una metodología adecuada que te permita diseñar y desarrollar la mayor accesibilidad de sitios posible.

WAI ARIA: especificación on-line que aporta accesibilidad al diseño de tu sitio web

Se deriva de su nombre en inglés Accessible Rich Internet Applications (WAI-ARIA), es un conjunto de atributos accesibles especiales que pueden agregarse a cualquier etiqueta del código de tu página y están especialmente adaptados a HTML.

WAI-ARIA te va a permitir desarrollar el contenido de tu web de forma mucho más accesible para las personas con discapacidades.

Esta especificación brinda la oportunidad de que al desarrollar tu web describas tus widgets más detalladamente y le agregues los atributos especiales que la harán más accesible.

WAI-ARIA está dividida en 3 tipos de atributos, los cuales son:

  • Roles: son los que ofrecen la descripción de los widgets (por ejemplo controles deslizantes, barras de menús, pestañas y cuadros de diálogos) y así estén disponibles para HTML 4 y hasta 5.
  • Estados: son los que hacen una descripción del estatus de la interacción actual de un elemento, para informar a la tecnología si está ocupado, desactivado, seleccionado u oculto.
  • Propiedades: son las que describen las características de los widgets para saber rasgos como: si cuentan con algún elemento requerido, con una ventana emergente o si pueden ser arrastrados.
  • La manera en que funciona WAI-ARIA a la hora de desarrollar tu web, es brindando un marco en el cual se pueden agregar los atributos que te ayudarán a identificar características para tener una buena interacción con el usuario, su relación entre sí y su estado actual.

De igual manera incluye tecnologías que te van a permitir asignar controles, regiones en vivo y eventos a interfaces de programación de aplicaciones (API) de accesibilidad para enriquecer aplicaciones de Internet.

Una vez que se aplican los atributos de WAI-ARIA en tu página web, se le incluyen especificaciones de esquemas API para dar orientación en la aplicación de agentes de usuario.

Utilizar los atributos WAI-ARIA te va a proporcionar para el desarrollo de tu sitio web lo siguiente:

  • Funciones como “menú”, “elemento de árbol”, “barra de progreso” o “control deslizante” para describir el tipo de widget que presentas.
  • Roles como encabezados, regiones y tablas para explicar la estructura de tu página web.
  • Propiedades como el “marcado” para casilla de verificación o “haspopup” para menú, que describan el estado de tus widget.
  • Propiedades como cuadro de diálogo de alerta, para definir regiones activas en tu página que pueden obtener actualizaciones y a su vez políticas de interrupción para dichas actualizaciones.

¿Cómo evaluar el nivel de Accesibilidad Web?

Una vez diseñado y desarrollado tu sitio web, existen una serie de métodos y herramientas de evaluación por medio de los cuales es posible valorar el nivel de accesibilidad con el que cuente.

En base a esto, necesitas definir una metodología basada en la verificación de los criterios de conformidad en la cual se vaya indicando dicha conformidad por medio de categorías como: “cumple”, “no aplica” y “no cumple”.

También, previo a realizar la valoración en su totalidad, debes determinar el alcance de la evaluación, examinar bien tu sitio antes de evaluarlo, elegir una muestra representativa y auditarla para posteriormente reportar los resultados que arroje.

Hay casos que comprueban que con una buena metodología de seguimiento para analizar la accesibilidad de los portales web es posible lograr que tu página web sea adecuada para cualquier tipo de usuario.

Un ejemplo de ello son algunas de las universidades en España, como la Universidad de Sevilla, la Universidad de Alcalá, entre otras, que se han propuesto ofrecer información accesible cumpliendo con las Pautas de Accesibilidad de Contenidos Web, diseñando una metodología de análisis que combina tres herramientas, así como un análisis manual para lograr esto.

Algunos de los recursos que hay para llevar a cabo una buena revisión de accesibilidad son:

  • ACT (Resumen de Pruebas de Conformidad de Accesibilidad): determina normas que comprueban la conformidad de tu contenido web de acuerdo a los estándares establecidos de accesibilidad.
  • EARL (Resumen de Lenguaje de Evaluación e Informes): es un formato que se lee a través de aplicaciones, mediante el cual se pueden presentar los resultados de las pruebas de accesibilidad.
  • WCAG-EM (Metodología de Evaluación de Conformidad con la Accesibilidad en Sitios Web): este recurso nos da un aproximado de cuánto se ajusta tu sitio web a las pautas de accesibilidad para el contenido web.

Es importante resaltar que la evaluación de accesibilidad la puedes hacer de forma manual o a través de medios de verificación del funcionamiento de tu sitio web, a través de un experto o de manera automática por medio de alguna herramienta que analiza el código de tu página y entrega un listado de los errores encontrados.

check-list-accesibilidad-web

Herramientas automáticas para evaluaciones de accesibilidad

En la gran red del Internet se encuentran una serie de herramientas que te van a facilitar hacer una evaluación de accesibilidad a tu sitio web, algunas de las más relevantes son las siguientes:

Taw

Esta herramienta analiza tu página web basándose en los criterios de conformidad de las WCAG 2.0 emitiendo un informe de problemas y advertencias identificadas.

Esta herramienta automática online es la de mayor referencia en habla hispana, su principal objetivo es que los servicios accesibles de tu página web alcancen el mayor nivel de conformidad posible.

A la hora de que TAW realiza sus comprobaciones se divide en dos categorías: Automáticos (cuando la herramienta detecta los errores por sí sola y éstos se deben solucionar) y Manuales (cuando la herramienta indica algún posible problema, el cual debe ser confirmado o descartado).

Wave

En esta herramienta con tan solo presionar un botón te va a realizar un chequeo integral de tu página web, basándose también en las WCAG 2.0.

Hera

Esta herramienta evalúa la accesibilidad de tu sitio web en base a las pautas WCAG 1.0.

Examinator

Esta herramienta realiza la evaluación estableciendo una puntuación (entre 1 y 10) que va a fungir como indicador de la accesibilidad. Además brinda puntuaciones de acuerdo a 5 tipos de discapacidades diferentes.

Dos Validadores del W3C

En este caso se lleva a cabo la comprobación, análisis y validación previa del código de tu página web, a través de servicios de validación como el X (HTML) y CSS del W3C.

Esta opción va a detectar algunos de los errores y advertencias que presente tu página, más no todo lo marcado en las pautas de accesibilidad.

Además de las evaluaciones sistemáticas que proporcionan una validación de accesibilidad rápida, es importante que también realices una revisión manual con la cual evites errores en cuanto a que tu contenido sea distinguible, adaptable, legible y navegable.

Una vez que lleves a cabo el análisis de accesibilidad en tu sitio web podrás determinar en qué nivel de conformidad se encuentra (A, AA o AAA) y definir si con ese es suficiente o hay que hacerle mejoras.

En resumen sobre Accesibilidad Web

La web en general brinda una amplia gama de oportunidades para todos los usuarios y también para las personas con discapacidad o algunas condiciones especiales, en este sentido es importante que al momento de que desarrolles tu página web, te adaptes y evoluciones a la par, ofreciendo servicios relacionados a la accesibilidad en tus contenidos.

Muchas veces al momento en que proyectas el diseño de tu sitio web no es tu intención el excluir a cierto grupo de personas, sin embargo se hace cuando los servicios ofrecidos no son accesibles.

Para evitar esto, puedes tomar en cuenta la información de este artículo y crear una página web accesible para todos, tomando en cuenta su clara definición, las normas y legislaciones que la rigen, los puntos necesarios para desarrollar su diseño y haciendo las evaluaciones y análisis necesarios.

Entre más pongas en práctica lo aquí descrito mayor será el aumento del grado de conciencia y responsabilidad social en los contenidos que expongas en tu sitio web, además de potenciar exponencialmente la audiencia que te visite.

La accesibilidad web es algo que ya se ha convertido clave en el mundo online, hoy en día todos los propietarios y/o desarrolladores de páginas web deberían considerar hacerlas accesibles con una mejora constante y evolutiva.

No te detengas en pensarlo y ábrele las puertas a todo tipo de usuario a tu sitio que contará con su respectiva accesibilidad web.

Responsive web design: por que es tan importante para la web

Responsive web design: por que es tan importante para la web

Hoy en día el Internet y la tecnología han ido evolucionando constantemente y es algo que está al alcance de la mayoría de la población a nivel mundial, esto se logra través del uso de una amplia variedad de dispositivos, ya sea móviles o fijos con los que se puede tener una navegación multiplataforma y acceder a los diferentes sitios web existentes.

Esto ha venido a revolucionar el diseño de sitios web, es por eso que la técnica del Diseño Web responsivo, mejor conocido como Responsive Web Design (de acuerdo a su nombre en inglés) se ha convertido en la mejor de las herramientas para adaptarse a la nueva realidad virtual.

Al momento de acceder a los sitios web mediante los diferentes dispositivos que hoy existen (como son los teléfonos inteligentes, tabletas, computadoras u ordenadores de escritorio, laptops, proyectores de pantalla, libros electrónicos e incluso Smart TV) se abre una amplia gama de formatos, resoluciones y tamaños de pantallas para los cuales es necesario que el diseño de tu web se adapte a cada uno de ellos.

Lo anterior se lleva a cabo con la finalidad de que la persona que está detrás de cada una de estas pantallas tenga la mejor experiencia de usuario posible a la hora de navegar en tu sitio, entonces te preguntarás ¿Cómo se puede lograr esto? Comencemos por lo básico, definir qué es el Responsive Web Design.

Responsive web design

Definición del Responsive Web Design

El RDW (Responsive Web Design) es una filosofía de diseño y desarrollo de interfaces que tiene como objetivo adecuar la apariencia que presentan las páginas web de acuerdo al tipo de dispositivo en que los sitios web son visitados.

Es la tecnología más utilizada en la actualidad, que propone que el contenido de tu web se adapte al entorno de cualquier tamaño de pantalla que exista mediante un único diseño, sin necesidad de tener una versión para cada dispositivo móvil o fijo, lo cual se logra a través de estructuras flexibles como son imágenes, videos y contenedores moldeables.

Imagina que tienes una funda elástica que puedes estirar para cubrir tanto tu celular como tu tablet o tu laptop, lo mismo que sucede con un diseño responsive.

El término Responsive Web Design se refiere, en su traducción más ajustada al español, a un diseño adaptativo o responsivo, ante lo cual adaptativo significa perteneciente o relativo a la adaptación o a la capacidad de adaptación.

Por su parte la palabra responsive o responsivo significa perteneciente o relativo a la respuesta y se refiere cuando un sistema tiene la característica de tener una reacción al medio que lo rodea, por ejemplo cuando entras a una tienda y automáticamente suena un timbre, ese es un sistema responsivo.

Una vez teniendo clara la definición del RDW, es importante distinguir entre un Adaptive Web Design (AWD) y un Responsive Web Design (RWD), a continuación te presento las diferencias entre uno y otro.

Diferencias entre el Adaptive Web Design (AWD) y el Responsive Web Design (RWD)

  • El AWD usa un código de servidor o cliente para distinguir el dispositivo y adaptar el contenido de la web al formato de pantalla requerido, mediante hojas de estilo CSS; el RWD utiliza Media Queries con las que detecta a los dispositivos específicos brindando imágenes escalables que se irán ajustando a cada tipo de pantalla que se desee.
  • En el AWD tu contenido puede no mostrarse totalmente en todas las pantallas ya que la información se preselecciona y se descargan solo los activos que se optimizan para los dispositivos móviles; el RWD en cambio, descarga todos los activos de la web sin importar el tipo de dispositivo, por lo que tu contenido será mostrado siempre en su totalidad.
  • El AWD cuenta con diferentes plantillas para cada tipo de dispositivo, caso contrario el RWD maneja una sola plantilla que sirve para todo tipo de dispositivos existentes lo cual lo hace más sencillo y práctico.
  • Por un lado el AWD emplea secuencias de comandos para llevar a cabo la adaptación a los dispositivos y tamaños de pantalla, para así distinguir el tipo de dispositivo y cambiar el comportamiento de la web; por el otro lado el RWD incluye todas las características que un navegador pueda necesitar.
  • Cuando ya cuentas con tu web desarrollada puedes partir de ella para adaptarla a las plantillas de diseño del AWD, sin embargo si quieres contar con RWD tendrás que reconstruir tu web totalmente y eso generará un presupuesto elevado, pero será una sola inversión con grandes ventajas.
  • Al llevar a cabo un proyecto de AWD necesitas conseguir programadores con bases sólidas en javascript y CSS para adaptar tu web, pero si quieres realizar un RWD tendrás una larga fase de diseño y testeo que te proporcionarán experiencias de usuario personalizadas para la mayor cantidad posible de dispositivos.
  • La descarga del AWD es más rápida pues carga únicamente lo necesario para el dispositivo que lo requiere, por su parte el RWD descarga todos sus elementos necesarios para todos los dispositivos que se presenten.
  • El AWD tiene buen rendimiento pues con su diseño adaptativo abarca una amplia cantidad de dispositivos a un costo menor y por su lado el RWD es ideal para marcas que inician desde cero.

La técnica de diseño responsive está consolidada como una de las grandes prácticas en la actualidad, proporcionando a los lectores la posibilidad de acceder a los contenidos de tu web con una experiencia de usuario lo más similar posible en cualquiera de los dispositivos disponibles.

Con lo ya mencionado nos queda claro que el responsive web design se trata de colocar los elementos de la web para redimensionarlos y así permitir la correcta visualización de acuerdo al ancho de los dispositivos móviles y los dispositivos de sobremesa.

¿Cómo surge la técnica del Responsive Web Design?

El diseño responsivo es una herramienta creada y difundida por el norteamericano Ethan Marcotte (en el año 2010), a partir de una serie de artículos publicados en “A List Apart” que es una línea especializada en diseño y en el desarrollo web los cuales extendería posteriormente en su libro “Responsive Web Design”.

La idea y propósito de un diseño web adaptable se discutieron y describieron con antelación en Julio de 2008 por el World Wide Web Consortium dentro de su recomendación “Mobile Web Best” con el subtítulo One Web, el cual engloba navegación tanto en dispositivos móviles como en dispositivos de sobremesa que cuentan con mayores resoluciones de pantalla.

Bajo este concepto surge la idea de crear una “Web para Todos” (Web for All), es decir, que el contenido que ofrece tu web esté disponible sea cual sea el medio que se utilice, por lo que será accesible en todos los dispositivos (Web on Everything) con excelente experiencias para los usuarios.

Desde entonces el concepto ha trascendido de tal forma que, desde el 21 de Abril del 2015, Google comunicó que se iniciaría a penalizar en el posicionamiento orgánico a los sitios que fueran no “responsive”, proporcionando inclusive un recurso para saber si la página web pasaba su validación.

Es así como en la actualidad el responsive web design se ha convertido en una de las mejores prácticas que van a garantizar al usuario tener excelentes experiencias de navegación, contando con un único canal mejorado que servirá para todos los tamaños de pantalla.

¿Cómo funciona el RWD?

Los dispositivos de navegación han ido evolucionando y con ellos la manera de crear los métodos por medio de los cuales van surgiendo páginas más fluidas que generan contenedores que abarcan todo el ancho de la ventana, en donde el sitio web se visualiza.

En la actualidad existen pantallas con gran cantidad de pixeles de ancho (desde 300 hasta 2,000 y fracción o más) por lo que se volvió necesario llevar a la web a dimensiones con incluso el doble de ancho que la de origen, para evitar que pueda verse distorsionada.

A raíz de esto surgen layouts (contenidos) mucho más fluidos, con un diseño de estructura flexible, por medio de las media queries de CSS3, en las cuales la palabra “query” equivale a pregunta, por lo que al aplicar dichas media queries a la hora en que se visualiza tu contenido, surge en automático la interrogativa: ¿qué dispositivo se está usando?

Es por eso que al utilizar las media queries es mucho más sencillo ajustar la anchura del sitio web a la pantalla que lo necesite (cuyas resoluciones van desde los 240 hasta los 1,200 pixeles), manejándose con porcentajes ajustados a los anchos de cada una de las pantallas existentes, en base a dispositivos específicos.

En lugar de crear una website para cada dispositivo que se va presentando, puedes hacer una sola página utilizando estos recursos que van a detectar el tipo de tecnología con sus respectivos elementos de ancho a la que accede el usuario, mostrando la versión optimizada que le corresponde con imágenes más ligeras, redistribución de columnas, entre otras características, según sea el caso.

Es así como el RWD se convierte en una web multiplataforma que va a cubrir todo tipo de resoluciones y por consecuencia va a satisfacer un mayor número de necesidades del público en potencia.

Todo esto además, lo puedes lograr con una sola versión de desarrollo de código en HTML y CSS, dentro de la cual se incluyen en la hoja de estilos, la serie de órdenes conocidas como media queries y de esta manera te será posible abarcar todas las resoluciones de las pantallas que se vayan presentando.

Puedes programar el documento de tu sitio en la actual edición HTML5 y CSS3, con el cual obtendrás una excelente experiencia ya que es una herramienta de fácil manejo, con nuevos elementos creativos y con la cual puedes ahorrarte el costo que te significaría desarrollar una app nativa para cada dispositivo en específico, obteniendo resultados uniformes en todas las plataformas.

Cuando introduces las media queries en tu hoja de estilos, tu web puede añadir consultas más especializadas tomando en cuenta los anchos de pantalla, alturas y capacidad de colores.

Con la implementación de los diseños adaptativos o responsivos, a través de un único desarrollo, se puede ir cambiando cualquier aspecto relacionado al estilo de tu web, ya que el responsive web design se maneja con porcentajes en las dimensiones de cada layout.

Con esto puedes evitar depender de un ancho fijo y te permite crear contenidos con elementos mucho más fluidos como son fuentes, imágenes y objetos multimedia que se van redimensionando y adaptando al espacio, formato y resolución de pantalla que se requiera.

En la actualidad el diseño responsive se ejecuta en una amplia gama de frameworks CSS como Bootstrap, foundation, bulma, que tiene una gran popularidad y ofrecen una gran cantidad de recursos al momento de diseñar el sitio.

A la hora de diseñar una Responsive Web se debe contar con las aptitudes, experiencia y conocimientos correctos, ya que de esto va a depender que se puedan evitar problemas de diseño, de navegación y por ende el grado de satisfacción del usuario será mayor.

En las líneas siguientes te presento una serie de problemas que podrían darse durante el desarrollo de tu web para que tengas en cuenta las posibles soluciones que puedes emplear.

Problemas que pueden presentarse en el Diseño Responsive y posibles soluciones:

Proporción del encabezado

  • PROBLEMA: utilizar la misma proporción en pantallas grandes, como la de los ordenadores de sobremesa, que en pantallas pequeñas, como la de los teléfonos inteligentes ocasionará inconvenientes en cuestiones de diseño y usabilidad, ocasionando molestias y pérdida de tiempo a los usuarios.
  • POSIBLE SOLUCIÓN: lo más adecuado es modificar manualmente los tamaños de los encabezados para anticiparse al mantenimiento de las proporciones automáticas.
  • PROBLEMA: Comúnmente los sitios web se habían diseñado para computadoras de escritorio o portátiles por lo que al trasladarse el contenido a pantallas de dispositivos móviles causó dificultades para acceder a los menús o para escribir en ellos.
  • POSIBLE SOLUCIÓN: Ante esta problemática se sugiere cambiar los amplios menús de navegación (horizontales y verticales) por modelos más sencillos y prácticos, reescalando su tamaño y minimizando el menú a un ícono, así como ajustar la dimensión de los vínculos para ser oprimidos por el dedo cómodamente, pues los famosos clicks se han sustituido por pequeños toques del dedo como input.

Bases del Diseño de tu Web

  • PROBLEMA: Usualmente los diseños de los sitios web se proyectaban basados en pixeles, ocupando cajas de un único tamaño que se distribuían en pantallas de ancho fijo.
  • POSIBLE SOLUCIÓN: Con la implementación del responsive web design ahora basarás los diseños de tus páginas web en porcentajes en lugar de pixeles, con lo cual generarás ajustes en pantallas de ancho variable, midiendo los elementos agrupados por el porcentaje de la pantalla en la que se esté navegando.

Imágenes en pantallas de alta definición

  • PROBLEMA: Al emplear en la iconografía imágenes en formato PNG, éstas suelen aparecer pixeleadas en una pantalla de alta definición, como la de los smatphones.
  • POSIBLE SOLUCIÓN: Lo mejor en este caso es usar imágenes en formato SVG (Gráficos Vectoriales Redimensionables) cuyos vectores posibilitan el aumentar o disminuir el tamaño de la imagen sin alterar su calidad al visualizarla, además de tener un peso mucho menor en comparación a los formatos JPG o PNG.

Velocidad de las conexiones en dispositivos móviles

  • PROBLEMA: Casi siempre los dispositivos móviles se conectan a internet a través de conexiones no muy estables y limitadas, lo cual hace lenta la carga del contenido de los sitios web.
  • POSIBLE SOLUCIÓN: En este caso puedes optar por optimizar tu página, reduciendo archivos CSS y JS, así como cargando imágenes de tamaños diferentes, dependiendo del dispositivo. Otra opción que aplica aquí es el uso de CDN como el cloudflare.

Las columnas del contenido y sus bordes.

  • PROBLEMA: Cuando el contenido de tu web aparece en formato de columnas, la propiedad CSS “border”, es decir el borde de la columna solo permite trabajar con pixeles.
  • POSIBLE SOLUCIÓN: El responsive web design trabaja con anchos porcentuales lo cual favorece a que los elementos de los proyectos de diseño se vayan adaptando al tamaño de la pantalla en la que se esté mostrando, para esto será necesario habilitar un elemento HTML flexible para poder aplicar a la vez un ancho y un borde porcentual y a su vez utilizar un elemento box-shadow con el que los pixeles de los bordes sean simulados.

Animaciones desplegadas en los dispositivos móviles.

  • PROBLEMA: Generalmente las animaciones tienen un funcionamiento más lento en los dispositivos móviles que en los dispositivos de sobremesa, como son las computadoras, debido a la menor capacidad de procesamiento.
  • POSIBLE SOLUCIÓN: Las recomendaciones en este caso son propiciar que los procesos se generen más rápido con el empleo de mayor cantidad de código nativo, canjea las animaciones y transiciones de Javascript por las de CSS3 que son más rápidas, por último en lo que respecta al código Javascript utiliza más memoria y menos procesador.

Generando un diseño fluido: ancho de capas y div

La principal propuesta para que tu sitio web cuente con diseño mucho más fluido es deshaciéndote de los pixeles y los anchos fijos y predefinidos; esto se logra aplicando la proporcionalidad para que el ancho de las capas en las que se estructura tu web sea fluido y adaptable.

Es así como lograrás que en la visualización de tu página web, ya sea en un dispositivo pequeño o uno grande, los elementos mantengan el mismo tamaño y sean reorganizados, todo a proporción de su tamaño original.

Dichos elementos pueden ser:

  • De ancho fijo: son los elementos (videos, imágenes u objetos) que desde su origen tienen un ancho fijo ya definido, que al insertarse en el código de la página habrá que definir dicho ancho como el máximo permitido para la resolución que se esté empleando y de esta manera no pasarse del elemento padre que lo rige.
  • De ancho variable: para establecer este tipo de elementos seguiremos una fórmula básica que es determinar el ancho inicial del elemento en la página y dividirlo entre el ancho original.

Nunca debes perder de vista que vas a diseñar tu sitio web para personas, no para dispositivos, por lo que el principal propósito de utilizar el responsive web design será generar la más satisfactoria experiencia de navegación.

No olvides tomar en cuenta todos los tamaños de pantalla que el usuario podría visualizar según se vayan presentando, para que el diseño no se quede obsoleto con el paso del tiempo.

Ventajas de un Responsive Web Design

La optimización web es interminable pues día a día la tecnología de los dispositivos a través de los cuales se consultan los sitios web van avanzado y transformándose por lo que el diseño de tu página siempre debe estar a la vanguardia y utilizar el responsive web design es uno de los mejores caminos a tomar para este caso.

Ya una vez que conoces su definición, origen y funcionamiento quizá podría surgir en ti la pregunta ¿de qué me sirve todo esto? Pues bien a continuación te expongo las mejores ventajas que obtendrás al aplicar la herramienta del responsive web design.

  • Con el responsive web design es posible cubrir todas las resoluciones de pantalla existentes en la actualidad, obteniendo así un sitio web optimizado para distintos dispositivos.
  • Se mejora la experiencia de diferentes tipos de usuarios en un rango considerable, en comparación de los sitios web de ancho fijo, lo cual se deriva de la opinión que los lectores tienen de tu sitio y el uso que le dan.
  • Se reducen los costos de creación y de inversión en mantenimiento, lo cual se logra al usar una sola plantilla para todas las plataformas con las que necesites trabajar y al hacer un cambio, en automático se hace en todas las versiones.
  • Se comprimen los tiempos del desarrollo de tu web.
  • Se evita el desarrollo de aplicaciones ad-hoc para cada sistema operativo móvil (como son iOS y Android).
  • Se genera el ahorro de múltiples redirecciones e incluso de contenidos duplicados al aparecer una única URL de tu sitio web en los resultados de búsqueda, proporcionando un mejor posicionamiento web en los buscadores más destacados como es el caso de Google.
  • Se evita también el caer en errores de los enlaces que comparten los usuarios en medios sociales como Facebook o Twitter, mejor conocidos como social links.
  • Se mejora el SEO, favoreciendo el tráfico que generará tu web e incrementando el ranking de los buscadores móviles.
  • Se logra aumentar la viralidad de tus contenidos, al ser compartidos más rápida y naturalmente en las aplicaciones sociales que tenga activas el usuario al momento de acceder a tu página web.
  • Puedes optar por contratar un desarrollador o puedes generar la web tú mismo, por medio de propuestas en editores web, como Wix, los cuales funcionan a partir de plantillas que puedes personalizar y que están creadas en HTML5 y CSS3, de esta manera puedes re-colocar los elementos de tu web para que te sea posible adaptarla y optimizarla, según lo requieras.
  • Al ser tan generalizado en la actualidad el responsive web design, varios desarrolladores han creado aplicaciones preconfiguradas, también llamadas frameworks, para evitar crear páginas web adaptativas partiendo desde cero, por ejemplo: Bootstrap (https://getbootstrap.com/), Spring, Laravel, Express, etc.
  • Al llegar tu contenido a más usuarios, debido a que tu web se va a adaptar a cualquier tipo de dispositivo, tu marca será mejor posicionada e indiscutiblemente vas a potenciar tu marketing digital.
  • En consecuencia al punto anterior, se obtiene un incremento en tus ventas online y si se cuenta con un e-commerce, logras transmitir aún más confianza a todos los tipos de usuarios que desees.
  • Permite segmentar tu audiencia ya que tienes la posibilidad de saber qué dispositivos utilizan tus usuarios.
  • Mejora la rapidez de la carga de tu página web y la mantiene a la vanguardia en lo que respecta a tecnología, dando beneficios adicionales frente a tu competencia.
  • Al centrarse en el tamaño de la pantalla y no del dispositivo, tu web puede adaptarse a dispositivos actuales y lo más importante a dispositivos futuros, sin importar sus dimensiones.

Claro que no todo es miel sobre hojuelas y hay que tener en cuenta que siempre existirá la contraparte, por lo que también encontramos algunas desventajas al emplear el responsive web design como:

  • El costo del desarrollo al inicio es superior que al de una web sin esta filosofía del diseño, pues presenta un mayor grado de dificultad técnica.
  • Hay que ser cuidadoso en cual contenido se va a mostrar y cual no, dependiendo de la versión en la que se consulte.

Sin embargo, como salta a la vista, es mucho mayor el número de ventajas que el de las desventajas que hay al utilizar el responsive web design, por lo tanto no hay que dudar que es una buena opción.

En este contexto, hay ejemplos de portales web que ya han implementado el RWD y aprovechado toda la serie de ventajas que ofrece.

Uno de los primeros casos en prensa online que empleó un diseño responsive es el Boston Globe, marcando un precedente ante el cual otros medios de comunicación, como la revista Time y hasta el New York Time, pensaron en emplear esta técnica (para más información de este caso puedes consultar las páginas http://bid.ub.edu/es/31/gonzalez2.htm y http://www.bostonglobe.com/).

Definitivamente para que tu sitio web evolucione, no dudes en aprovechar los beneficios que ofrece establecer un diseño web responsive.

Concluyendo sobre el Responsive Web Design

Una vez que se ha profundizado sobre este tema, puedes notar que es posible desarrollar un proyecto con confianza para mejorar tu marca, al generar un diseño fluido de tu web para sistemas y dispositivos singulares, sin importar de qué tipo sean, ya que gracias al responsive web design tienes la oportunidad de crear las bases para que tu página se vaya adaptando a todo tipo de pantallas en las cuales tu contenido sea visitado.

En otras palabras, a través del responsive web design podrás ir a la par del crecimiento de las tecnologías y técnicas que irán avanzando con el tiempo, esto referente a la creación de contenidos en la web y a la generación de nuevos y mejorados sistemas y dispositivos digitales.

Es como esa “funda” que mencionamos en un inicio con la que puedes cubrir tu celular, tablet o laptop, la cual no dejará de ser lo suficientemente “elástica” o “adaptable” para cualquier aparato que adquieras en un futuro, de igual manera tus sitios web podrán irse visualizando en cualquier dispositivo que surja.

No hay duda de que el diseño responsive es la técnica más práctica y útil con la que puedes generar sitios web de buena calidad en cualquier medio.

Es una herramienta que ha venido a revolucionar el entorno de la navegación, la cual irá mejorando con el paso del tiempo y con la participación de todos los involucrados, desde los desarrolladores hasta los usuarios.

Ahora que ya conoces todo lo que necesitas saber sobre esta técnica no puedes dejar pasar la oportunidad de implementarla para tu sitio web, es clave que des este paso para que no dejes de avanzar en tu negocio.

Haz que tu sitio web se adapte a esta nueva realidad y de esta manera brindes una experiencia de usuario cada vez más satisfactoria. Es algo que ya está aquí, ya no es desconocido o inalcanzable, solo es cuestión de que te decidas.

 

¿Qué es la experiencia de usuario y el diseño UX? Y porque es importante en tu sitio web o app

¿Qué es la experiencia de usuario y el diseño UX? Y porque es importante en tu sitio web o app

La experiencia de usuario o UX (user experience) es uno de los conceptos más usados actualmente y esto se debe a la importancia que ha ganado esta característica dentro del desarrollo web.

¿Te has puesto a pensar en lo que te gusta y lo que no cuando entras a un sitio web?

¿Qué es UX experiencia de usuario?

Es el conjunto de las interacciones del usuario con una marca; debido a la era digital en la que vivimos su aplicación ha sido más común en páginas web, aplicaciones móviles, y herramientas digitales; sin embargo, también aplica en productos. La experiencia de usuario se centra en la experiencia general que tienen tus usuarios al interactuar con la marca: las emociones, las percepciones, que tan agradable y sencillo es interactuar con tu sitio web, o tu app.

Generando una percepción positiva o negativa que no solo depende de factores como el diseño visual, la usabilidad, la arquitectura de la información, la calidad de los contenidos, el diseño de interacción, etc. Si no también de aspectos relacionados con los sentimientos, las emociones, la confiabilidad de la marca, entre otros.

Experiencia de usuario

¿Por qué es importante una buena experiencia de usuario?

Con la transformación digital la forma de interacción y las preferencias de nuestros potenciales clientes va cambiando, y con esto hemos tenido que ir adaptando nuestros productos y/o servicios para la satisfacción de nuestro cliente, con la finalidad de poder incrementar las ventas y fidelizar a nuestros visitantes, es por eso que la experiencia del usuario se ha vuelto tan importante para el diseño de sitios web, y aplicaciones móviles.

Sabemos que actualmente los usuarios desean satisfacer sus necesidades de una forma rápida y sencilla, imagínate el 53% de los usuarios de móviles abandonan una página web si tarda más de 3 segundos en cargar. Es por eso que es importante el diseño de experiencias positivas.

La experiencia del usuario abarca muchos elementos, por eso te mencionaremos los pilares a tomar en cuenta para lograr un mayor nivel de satisfacción con tus productos o servicios.

  • Diseño visual. Independientemente del tipo de sitio web o aplicación móvil, tener un diseño visual que provoque emociones de atracción y apreciación, contribuirá en sí el usuario decide quedarse o irse.
  • Utilidad. En gran medida tiene que ser funcional para el usuario, así como ofrecer un valor agregado que le facilite las cosas como: plantillas, calculadoras, convertidores, contenido informativo, etc.
  • Accesibilidad. El tener acceso desde cualquier tipo de dispositivo y que además el sitio web se adapte al tipo de pantalla, se ajuste a las características de cada dispositivo y así ofrecer una óptima experiencia en la página.
  • Usabilidad. Como ya hemos mencionado la experiencia del usuario va ligado con la facilidad de uso, es por eso que la usabilidad es uno de los elementos primordiales en la experiencia del usuario, se refiere a que tan sencillo es usar una interfaz o un producto y es que simplemente si para los usuarios es difícil de usar, ellos simplemente se van.
  • Intuitividad. Este elemento está ligado directamente a la usabilidad, ya que es importante que la interfaz sea intuitiva, y no genere complicaciones para los usuarios, es crucial que no se sientan perdidos al interactuar.
  • Rendimiento técnico óptimo. A los usuarios nos gustan las cosas inmediatamente y que funcionen correctamente, es por eso que la velocidad de carga y el desempeño técnico de tu sitio web es importante para garantizar una buena experiencia de usuario.
  • Conexión. Al conectar con tus usuarios emocionalmente, ellos confiarán en tu marca y en tu sitio, para esto es importante humanizar; mostrar a los usuarios la personalidad y accesibilidad de la marca.

¿Qué es el diseño UX?

El diseño de experiencia de usuario es el proceso para mejorar el nivel de satisfacción de un usuario al interactuar con un producto o servicio, al mejorar su accesibilidad, la facilidad de uso e interacción con el producto.

Un diseñador UX tiene que considerar el “por qué” el “qué” y el “cómo” del uso de un producto. El “por qué” tiene que ver con las motivaciones de los usuarios para adquirir algún producto o servicio, el “qué” está relacionado con la funcionalidad, que es lo que podrán hacer con el producto, y el “cómo” tiene que ver con el diseño de la funcionalidad del producto, que sea agradable y fácil de usar.

La experiencia de usuario y la usabilidad son términos que constantemente son confundidos, pero no son lo mismo; la usabilidad es parte de la experiencia del usuario, es uno de los elementos que es importante tener en cuenta para lograr una buena experiencia de usuario.

En diseño de software el producto tiene que llegar al usuario por medio de un dispositivo y ofrecer una experiencia fluida y sin que presente algún problema.

diseño ux

Elementos del diseño UX

Existen 5 elementos dentro del diseño UX que son necesarios para garantizar una óptima experiencia de usuario en tus proyectos.

Diseño de interfaz

Es el diseño de los elementos para que la interacción entre el usuario y la funcionalidad sea fácil de usar y agradable para el usuario, aquí intervienen lineamientos de diseño, para generar experiencias de usuario agradables.

Diseño visual

Hay diversas características a tomar en cuenta para lograr un diseño atractivo, donde al unirse la funcionalidad, el contenido y la estética satisfagan a los sentidos del usuario. Además de tener en cuenta aspectos como el equilibrio, color, espacio, contraste, tamaño y formas de los elementos para que el diseño visual sea agradable.

Para evaluar el diseño visual de un producto generalmente se realizan preguntas como: ¿Qué es lo que llama principalmente la atención del usuario? ¿Hacia dónde dirige su mirada al principio?

Diseño de navegación

La estructura de navegación es definida por el comportamiento del usuario en la navegación; saltar de una página a otra dentro del sitio web, a través de los hipervínculos. Existen diferentes tipos de navegación de acuerdo al tipo de contenido y la estructura que requiere, que son:

  • Red. En este tipo de estructura puedes acceder desde la página principal (home) a otras páginas sin ningún orden en específico, es una estructura libre.
  • Jerárquica. Es la estructura en árbol donde hay una página principal de donde se accede a las subpáginas, de las cuales se puede acceder a otras, creando distintos niveles.
  • Lineal. Es una estructura donde de una página puedes ir a otra y así sucesivamente o regresarte si así lo deseas como en un libro. Es muy útil si quieres que los usuarios sigan un trayecto en específico.
  • Lineal con jerarquía. Es una combinación entre las dos estructuras anteriores. La organización de las páginas y subpáginas es jerárquica, pero es posible navegar de forma lineal si las páginas son del mismo nivel.

Investigación del usuario

Es primordial realizar un estudio para conocer las necesidades, problemáticas y deseos de tus potenciales clientes (buyer person), es realizar el diseño de personajes para que el diseño de tu sitio web o app resuelva lo que ellos requieren y cumplir con sus expectativas.

Arquitectura de la información

La arquitectura de la información es necesaria para estructurar y etiquetar el contenido de tal forma que sea más fácil para los visitantes encontrarla. Es necesario diseñar y organizar el espacio interno, los contenidos, los sistemas de navegación, el etiquetado, etc.

Proceso de diseño de la experiencia de usuario.

Con base en lo que mencionamos anteriormente de los elementos en un diseño UX, vamos a ver una serie de pasos que se necesitan seguir para el diseño de la experiencia del usuario, donde la satisfacción del usuario es primordial, con un diseño centrado en el humano donde es importante considerar las necesidades de tus potenciales clientes, planeando y creando prototipos para que los usuarios lo prueben y darles una solución adecuada.

1.- Investigación

Antes de comenzar a diseñar es indispensable hacer una investigación, para tener más claro para quien se está diseñando, para esto es necesario hacer preguntas que nos den esa información como: ¿Quiénes son tus clientes? ¿Por qué van a visitar tu sitio web o app? ¿Qué es lo que van a encontrar ahí? ¿Qué problema les va a resolver tu web o tu app?.

Realizar un análisis de la competencia es parte de la investigación que se tiene que realizar antes de diseñar, todos tenemos competencia y si crees no tenerla date un clavado en Google seguro que encuentras algo.

Existen dos tipos de competencia: directa e indirecta, de cada una de ellas identifica lo que hacen como tú, que ofrecen ellos de forma diferente y que hace la diferencia con lo que tú vas a ofrecer.

2.- Definir a tu cliente potencial

Definir de una forma puntual a tus potenciales clientes, te ayudará para determinar el tono y la voz en que te dirigirás a ellos que puede ser formal, informal, no es lo mismo dirigirte a una audiencia en un rango de edad de 40 años en adelante a dirigirte a personas de 18 años.

Conseguir información sobre las problemáticas a resolver de tus usuarios es una pieza clave en el proceso de diseño. Realizar encuestas en línea ayuda a obtener información valiosa sobre tu audiencia que te va a servir para lograr una agradable experiencia de navegación.

3.- Creación de ruta de decisión.

Con la creación de una ruta de decisión, sabremos cuanta información necesita recibir el usuario en un momento para tomar una decisión y realizar una acción, en que punto de su navegación espera ver la opción “A”, “B” o “C”. Nos facilitará el diseño de la experiencia del usuario para tener éxito.

Recuerda tener en cuenta la divulgación progresiva, que es dar al usuario solo la información que necesitan para realizar el llamado a la acción, no sobrecargarlos con información que los va a distraer, confundir, frustrar o desorientarse.

4.- Realizar wireframes y prototipos.

Después de tener identificada la ruta de decisión de tus usuarios, sigue realizar el wireframe de tu sitio web, un esquema donde podamos observar el esqueleto de tu proyecto, todos los elementos que va a incluir, la explicación de como será la interacción y navegación del usuario.

Generalmente va en tonos grises y no incluye el diseño visual para no distraer lo que se está revisando que es la estructura del sitio web o aplicación móvil.

Una vez definido el wireframe es momento de realizar los prototipos donde ya incluye un poco de diseño visual como: colores, tipografía, imágenes, colores, etc. Sin embargo está más centrada en la simulación de la interacción del usuario con la interfaz, digamos que este será tu borrador de como se comportará tu producto final.

wireframe

5.- Realizar mapeo de los recorridos

El mapeo de recorridos es el viaje que hace tu cliente a través de tu sitio web o tu app para completar una compra de un producto o servicio y a través de esto identificar las mejoras que se requieren para una buena interacción del usuario con tu web, conocer la perspectiva del usuario.

Además el mapeo de los recorridos te ayudará con:

  • Reconocer en que puntos tu cliente interactúa con tu negocio.
  • Conocer la experiencia real del cliente y los puntos a mejorar.
  • Percibir las diferentes necesidades en las etapas del embudo de compra.

Conclusión

La experiencia de usuario es importante al momento del diseño de interfaces, del diseño de productos, de aplicaciones móviles y no hay una receta para que está sea la mejor, ya que esto va a depender de tus usuarios potenciales, es decir si es lo que ellos necesitan para lo que tú les estás ofreciendo o si simplemente deciden irse sin ver tu producto o servicio, por una u otra razón.

Pero si quieres que tus potenciales clientes permanezcan en tu web y que además realicen la acción que quieres para convertir y hacer crecer tu negocio, es primordial generar una óptima experiencia para tus clientes, que los invite a quedarse y fidelizar con tu marca.

Es por eso que es importante medir los resultados para ir adaptando y mejorando la experiencia que nuestros usuarios van a tener al estar en nuestro sitio web o app y que está cumpla con su objetivo.

Bootstrap: lo que necesitas saber del framework de CSS mas popular

Bootstrap: lo que necesitas saber del framework de CSS mas popular

Es una gran herramienta para CSS, ya que con Bootstrap podrás crear interfaces, diseñar y personalizar sitios web con el kit de herramientas de código abierto de front-end que te ofrece, y por su diseño responsive adaptable a cualquier tipo de dispositivo y pantalla logrando una buena experiencia de usuario (UX). Además te ofrece herramientas que te permitirán hacer uso de estilos y elementos de sus librerías y es compatible con la gran mayoría de navegadores web usados actualmente.

 

¿Qué es Bootstrap?

Es un framework front-end de CSS con el cual puedes dar formas y estilos a un sitio web, fue desarrollado en 2010 por twitter. Antes de ser código abierto se le conocía como “Twitter Blueprint” y era usado para estandarizar las herramientas de la empresa.

Es una herramienta que te permite crear interfaces de usuarios sencillas y ordenadas y sobre todo es completamente responsive esto quiere decir que se adapta a cualquier tipo de pantalla y dispositivo, usando el diseño mobile-first.

Y, ¿Qué es un framework?

Un framework es una estructura previa que se puede usar en cualquier otro proyecto, es decir un entorno que facilita la programación de una aplicación, un sitio web, o un software.

Consta de librerías previamente creadas que facilitaran tu trabajo como desarrollador, existe gran diversidad de frameworks para diferentes lenguajes como laravel, symfony 4, etc.

Ventajas de Bootstrap

Al hacer uso de plantillas prediseñadas en HTML y CSS se facilita el trabajo de un desarrollador, ya que te ayuda en desarrollar una buena idea para una página web desde cero. La integración a cualquier documento HTML es fácil gracias a su estructura modular y puedes ahorrar tiempo y esfuerzo al no tener que realizar muchas de las configuraciones de CSS. Encontrarás elementos como:

  • Barras de navegación
  • Menús desplegables
  • Botones
  • Alertas
  • Formularios, etc.

En la siguiente imagen podrás observar un ejemplo de una página de precios creada con Bootstrap con los componentes de “cards”.

ejemplo-bootstrap

Fuente: Sitio oficial de Bootstrap https://getbootstrap.com/

Dentro de las muchas ventajas que tiene este framework, aquí te mencionamos algunas de las más importantes:

Diseño responsive.

Hoy en día contar con un diseño responsive en un sitio web es importante para la experiencia de usuario como para el algoritmo de Google, con bootstrap no tendrás de que preocuparte por eso, ya que podrás crear sitios web con CSS y javascript completamente adaptables para cualquier tipo de pantalla y dispositivo gracias a su Grid system.

Fácil de usar.

Solo necesitas conocimientos básicos de HTML y CSS para hacer uso de este framework y ahorrarás tiempo, ya que cuenta con elementos predefinidos como formularios, tablas, barras de navegación, tipografías, etc. Y los podrás personalizar si así lo deseas.

Compatibilidad.

Es compatible con las últimas versiones estables de los navegadores actuales como:

  • Google chrome
  • Mozilla firefox
  • Opera
  • Internet explorer y Microsoft Edge
  • Safari

Si requieres más información sobre con cuáles navegadores y en que versiones es compatible:

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
# needed since Legacy Edge still has usage; 79 was the first Chromium Edge version
# should be removed in the future when its usage drops or when it's moved to dead browsers
not Edge < 79
Firefox ESR
iOS >= 10
Safari >= 10
Android >= 6
not Explorer <= 11

En caso de los dispositivos móviles es compatible con las últimas versiones de los navegadores predeterminados de cada plataforma principal.

Chrome Firefox Safari Android Browser & WebView
Android Supported Supported         —                                              v6.0+
iOS Supported Supported        Supported                                   —

Fuente: https://getbootstrap.com/ 

En el sitio oficial de Bootstrap encontrarás información más específica sobre la compatibilidad con navegadores y dispositivos.

En constante actualización.

En agosto de 2011 fue el lanzamiento de Bootstrap como framework de código abierto, y desde entonces han tenido más de veinte lanzamientos.

Cuentan con un equipo de desarrolladores realizando mejoras y actualizaciones constantes, además de estar agregando nuevas funcionalidades.

Versiones:

  • v1.x
  • v2.x
  • v3.x
  • v4.x
  • Actualmente v5.x en su fase beta.

Grid System.

Con su sistema de cuadrícula que te permite maquetar por columnas, será más fácil el posicionamiento de cada uno de los elementos y el contenido se adaptara en función del tamaño de la pantalla de donde se esté visualizando.

Integración con JavaScript.

Solo es necesario integrar la biblioteca de jQuery en tu documento HTML y tendrás la posibilidad de agregar elementos de JS. Sin embargo en la versión v5.x que se encuentra en desarrollo se elimina el jQuery y es javascript puro y con esto habrá mejoras.

Funcionalidad y estructura

Para que Bootstrap funcione de una forma óptima es necesario tomar en cuenta diferentes aspectos como el uso del class container, el grid system, los breakpoints, etc. Por eso aquí te dejamos las reglas que se deben de seguir en grid system, así como que clases son las que se tienen que usar, los tipos de container que hay y como funciona cada uno y los aspectos que consideramos importantes para el uso de Bootstrap.

Diseño responsive

Para asegurar la característica del diseño responsive es necesario hacer uso de etiquetas como <div> y el uso del class container.

Un elemento <div> te permite agrupar contenido o crear secciones, idóneo para estructurar la página de una forma adaptable.

Bootstrap asigno la característica class container al elemento <div> con la finalidad de determinar las dimensiones apropiadas para los elementos incluidos en este espacio, contienen, alinean o rellenan el contenido dependiendo del tamaño de pantalla y dispositivo.

Son tres contenedores (class container) diferentes:

  • .container, que establece un ancho máximo en cada responsive breakpoint.
  • .container-fluid, donde el ancho es el 100% en todos los breakpoints.
  • .container-{breakpoint}, que el ancho es el 100% hasta que se especifique el breakpoint.

En la siguiente tabla se puede ver como se compara el max-width con el original:

Extra pequeño
<576px
Pequeño
≥576px
Medio
≥768px
Grande
≥992px
X-grande
≥1200px
XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Fuente: Sitio oficial de Bootstrap https://getbootstrap.com/

Grid System

Su sistema de cuadrícula te permite diseñar y alinear el contenido por medio de contenedores, filas y columnas.

El “grid system” consta de 12 columnas que se pueden agrupar conforme se requiera, las clases a usar son: col (columna), row (fila) y container (contenedor) que van dentro de la etiqueta <div> , con el atributo class:

<div class="container">
  <div class="row">
    <div class="col-sm">

Reglas dentro del grid system:

  1. Las filas (row) deben colocarse dentro de un contenedor (container).
  2. Las filas (row) únicamente pueden contener columnas (col).
  3. Las columnas (col) tienen que ser hijo inmediato de una fila (row).

Recuerda que las filas y columnas siempre funcionan juntas. Te recomiendo seguir estas reglas, te puede ahorrar muchos dolores de cabeza.

Otro punto importante dentro del Bootstrap grid son los 6 puntos de interrupción predeterminados “breakpoints” que son los encargados de como cambia la respuesta del diseño dependiendo del tamaño de la ventana gráfica, que son:

Breakpoint Tamaño Prefijo de clase
Extra pequeño (xs) <576px .col-
Pequeño (sm) ≥576px .col-sm-
Medio (md) ≥768px .col-md-
Grande (lg) ≥992px .col-lg-
Extra grande (xl) ≥1200px .col-xl-
Extra extra grande (xxl) ≥1400px .col-xxl-

 

Recuerda que para Bootstrap es “mobile first” por eso su “breakpoint” predeterminado es (xs).

Usando la clase “col”

Las columnas que hagas usando la clase “col”, se adaptaran al ancho de tu fila; es decir si creas 2 columnas cada una ocupara el 50% del ancho de tu fila.

ejemplo-class-col1

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

En caso de que no quieras que el ancho de las columnas sea el mismo, y prefieres que sea variable según el tamaño del contenido puedes hacer uso de los breakpoints

ejemplo-class-col

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

En la documentación de bootstrap puedes encontrar más formas de personalización del grid system para que te sea más fácil su uso.

Componentes de Bootstrap

La cantidad de componentes con los que cuenta Bootstrap es bastante amplia por eso te mencionamos algunas de las más importantes.

Alertas

Podrás crear diferentes tipos de alertas con colores específicos según lo requieras, hay alertas con enlaces y con contenido adicional.

ejemplos-alertas

Botones

Encontrarás varios estilos de botones predefinidos, que podrás usar en formularios, llamados a la acción, etc.

ejemplos-botones

Carrusel

Es un componente de presentación de diapositivas en forma de carrusel que te permitirá visualizar una serie de contenido (imágenes o diapositivas con texto). Y puedes tener controles de visualización como los indicadores de anterior/siguiente.

ejemplo-carrusel

Barra de navegación

Con este componente tendrás diferentes formas en la presentación de un menú, además de personalizarlo a tus necesidades.

ejemplos-barra-de-navegacion

En caso de que quieras ver todos los componentes de Bootstrap te invitamos a ver la documentación.

Como comenzar a usar Bootstrap

Bootstrap básicamente se compone de dos directorios el de JS y el de CSS que son los encargados de asignar las características a cada uno de los elementos de la página.

Para iniciar a hacer uso de este framework puedes comenzar con descargarlo y añadir los archivos manualmente, puedes añadirlos a tu proyecto mediante el CDN agregando los siguientes scripts en la cabecera de tu HTML o puedes instalarlo con un gestor de paquetes.

¿Dónde descargar Bootstrap?

Puedes comenzar descargando desde la página oficial de Bootstrap el paquete que contiene los archivos de CSS y JS compilados, así como los archivos fuente y temas opcionales.
Después descomprime el archivo en el directorio deseado.
La versión más reciente al día de hoy es 5.0x que está en beta, por eso te recomiendo hacer uso de la versión 4.6.x por el momento.

Añadir CDN en mi HTML

Para agregar Bootstrap sin tener que descargar los archivos puedes añadir a tu archivo los script en la cabecera <head> de tu HTML para CSS y antes de la etiqueta de cierre </body> para JS que encontraras aquí, y con esto ya notarás cambios en la página web.

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Usando Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>
<body>
    <h1>Hola Mundo</h1>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

Instalación con Gestor de paquetes

Otra forma de descargar este framework es a través del gestor de paquetes, a continuación te dejo la sintaxis que necesitarías para los administradores de paquetes:

npm

Para instalar bootstrap en Node.js :

npm install [email protected]

Yarn

Para instalar bootstrap en Node.js :

yarn add [email protected]

RubyGems

Para instalarlo en Ruby si estas usando Bundler:

gem 'bootstrap', '~> 5.0.0.beta1'

Y una alternativa si no lo estas usando es:

gem install bootstrap -v 5.0.0.beta1

Composer

Si estas usando PHP:

composer require twbs/bootstrap:5.0.0-beta1

NuGet

Si estas trabajando en .NET:

Install-Package bootstrap

Install-Package bootstrap.sass

Bootstrap 5.0

Actualmente se encuentra en desarrollo la versión v5.x, donde se están enfocando en realizar mejoras al código base, en mejorar los componentes y las características de los existentes, se eliminaran algunas de las compatibilidades con los navegadores más antiguos y algo importante que destacar de esta versión es que se elimina la librería jquery para JavaScript para hacer uso de JS puro.

En resumen …

Con este framework no tendrás que preocuparte por las media queries y los porcentajes de css para lograr un sitio responsive, encontraras muchos componentes para personalizar un sitio web, además de que cuenta con temas que podrás integrar en WordPress.

Como podrás ver es un framework que cuenta con muchas ventajas, sin embargo se recomienda trabajar con él desde el inicio y no querer integrarlo después de haber iniciado algunos estilos, ya que podrían romperse y se tienen que hacer ajustes que pueden volverse tediosos.

Descubre que es CSS, y sorpréndete con todo lo que puedes hacer

Descubre que es CSS, y sorpréndete con todo lo que puedes hacer

Ya has escuchado hablar de CSS, pero, aún tienes duda de lo ¿Qué es? y ¿para qué sirve?. ¿Quieres cambiar tu texto de color?, ¿Te gustaría poner una imagen de fondo?, ¿Quieres crear formas?, todo esto lo puedes hacer con CCS, y podemos empezar con tener definir que es y como empezar a usarlo.

¿Qué es CSS?

CSS por sus siglas en ingles Cascading Style Sheets, “hojas de estilo en cascada” fue desarrollado por el W3C en 1996. Es un lenguaje de hojas de estilo enfocado a, definir, crear y personalizar los elementos de un documento HTML.

Su nombre “hojas de estilo en cascada” se debe a que las características de los elementos se aplican de arriba hacia abajo con reglas que poseen un esquema de prioridades.

Con CSS definirás el aspecto visual de tu página web, (tipo de fuente, colores, tamaño, alineación, márgenes, formas, separación del contenido, etc.) y esté le indicará al navegador la información de los estilos que tiene que desplegar de una página web.

¿Para qué sirve?

CSS sirve para dar estilo a cualquier página web, y además de cambiar color, tipo de letra, alineación, tamaño, formas etc. Podrás hacer cosas como: animar elementos, cambiar la forma de las esquinas, degradados, entre muchas otras.

El código CSS hace más fácil el trabajo de un desarrollador front-end al separar la estructura de los documentos: HTML para la estructura de la web y CSS para agregar estilo.

CSS no se limita solo a darle formato a un texto de una página web, sino que además en conjunto con JS puedes definir por ejemplo: que el borde de un input en un formulario, cuando sea incorrecto cambie de color (como se muestra en la imagen de abajo).

Ejemplo de CSS + JS

En este formulario se puede ver el cambio de color del borde a rojo para indicarnos un error.

También puedes usar tu hoja de estilo para personalizar diferentes sitios web no solo uno.

¿Cómo funciona?

CSS tiene que estar enlazado con el código de HTML para poder observar como se ve en el navegador la personalización de tu sitio web, te explicaremos como hacerlo a continuación.

Cómo enlazar tu CSS con tu código de HTML

Supongamos que ya tienes tu archivo en HTML y quieres enlazar tu CSS, lo que tienes que hacer es lo siguiente:

  1. Vas a nombrar a tu documento de CSS “style.css”.
  2. En tu documento HTML entre las etiquetas <head> y </head> vas a colocar
<link href="styles/style.css" rel="stylesheet" type="text/css">

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Que es CSS</title>
  <link href="styles/style.css" rel="stylesheet" type="text/css">
</head>

Y con esto ya podrás ver en el navegador los estilos asignados a los elementos en tu página web.

Sintaxis básica de CSS

La sintaxis básica de CSS está compuesta por: uno o varios selectores y la declaración que se compone por la propiedad y valor de la propiedad, como se muestra en la imagen.
Sintaxis-CSS

  • Selector: Es el elemento de HTML al que se le aplicara el estilo definido en tu CSS.
  • Declaración: La declaración está compuesta por la propiedad y el valor de la propiedad, que especificara a cuál de las propiedades del elemento les quieres dar estilo.
  • Propiedades: Son las diferentes formas en las que se le puede dar estilo a un elemento de tu archivo HTML como en la imagen, donde color es una propiedad del selector en <p>. Tú seleccionas que propiedad es la que quieres modificar por ejemplo: color, tipo de letra, tamaño, negritas, alineación, etc. Aquí puedes ver las propiedades que puedes usar para tu sitio web.
  • Valor de la propiedad: Es el valor que decidas asignarle a la propiedad por ejemplo en lugar de blue pudo ser red, colores en formato rgb o en valores hexadecimales.

Otras partes importantes de la sintaxis:

  • Todas las reglas deben estar encapsuladas entre llaves ({}) después del selector.
  • Se tienen que escribir (:) para separar la propiedad y su valor.
  • Para separar las declaraciones dentro de cada regla se tiene que usar el punto y coma (;).
  • De este modo para modificar varios valores de la propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:
p {
  color: #FF0000;
  width: 500px;
  border: 1px solid black;
}

Tipos de selectores

Existen diferentes tipos de selectores, a continuación te explicaremos cada uno de ellos.

  • Selector de elemento. Llamado también como etiqueta, son todos los elementos especificados por HTML, como <p> “párrafo”
    HTML <p> CSS  p 
    HTML <div> CSS div
    HTML <h1> CSS h1
  • Selector por ID. Es un elemento de la página identificado con un id, solo se permite un único elemento por id.
    HTML <a id="hero-id"> CSS  #hero-id  
    HTML <nav id="holamundo"> CSS  #holamundo 
    HTML <section id="seccion-1"> CSS  #seccion-1
    
  • Selector por clase. Son los elementos de la página identificados con una clase (puede haber varios elementos con la misma clase).
    HTML<a class="hero-class">  CSS .hero-class 
    HTML<li class="lista-ordenada">  CSS .lista-ordenada 
    HTML<span class="servicios">  CSS .servicios
  • Selector de atributo. Son los elementos con un atributo especificado.
    HTML <a title="#internal"> CSS a[title]
    HTML <a href="https://plectrolab.com"> CSS a[href="https://plectrolab.com"] 
  • Selector de pseudoclase. Los elementos especificados, cuando está realizando la acción de la pseudo clase.
    HTML <a href="contacto.html">Selector por psuedoclase</a> CSS a:hover  
    HTML<input type="text" id="name" name="name" required  minlength="4" maxlength="8" size="10">
    CSS input:focus 

Recuerda que puedes agrupar selectores si lo que quieres es aplicar la misma regla, solo tienen que estar separados por comas (,) por ejemplo:

p,h1,lu,h3 {
  color: blue;
}

See the Pen
CSS que es
by Plectro lab (@Plectro-lab)
on CodePen.

Herencias

¿Qué son las herencias en CSS?. La herencia es un mecanismo por el cual las propiedades de un elemento padre hereda a sus elementos hijos.

Por ejemplo si a un elemento padre se le especifica el tipo de color y tipo de letra, todos los elementos que estén incluidos en él, van a tener el mismo color y tipo de letra, a menos de que se le haya asignado uno diferente.

Hay propiedades que no se heredan, generalmente son las que tienen que ver con la caja, por ejemplo los márgenes, ya que es poco probable que el margen que necesita el elemento padre sea el mismo que va a necesitar el elemento hijo.

Más Información

Si estás interesado en aprender más sobre CSS te dejamos algunos recursos que te pueden ayudar.

CSS ha crecido tanto, que es imposible que una persona almacene toda la información en el cerebro, pero conocer todo lo que puedes hacer, te ayudara en darle a una página web la personalización que tú decidas.