¿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 si 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, que 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 tienes que 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 facilitara 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 comportara 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 esta 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.