Jose Alexis Correa Valencia
@jalexiscv, hace 6 meses..
Cover 2 5DA5410C5734F

Modulo Social, Componente Keywods


Una keyword o palabra clave es el término o conjunto de términos que utilizan los usuarios cuando buscan en los buscadores. Con esta definición básica, ya te puedes hacer una idea de la extraordinaria importancia que tienen.  De hecho, la inmensa mayoría de visitas en las páginas de internet se hacen a través de ellas, ya que son poquísimos los usuarios que, hoy en día, teclean directamente la direccion URL.

¿Qué te pueden aportar las keywords? En primer lugar, el hecho de ser el método habitual de búsqueda y entrada a una página web ya justifica el uso de keywords, su análisis y búsqueda. Trabajar las keywords correctas en tus contenidos, te permitirá posicionarlos en las primeras posiciones de los buscadores y, como consecuencia, aumentar sus visitas.

De ahí que, si quieres conseguir un buen posicionamiento orgánico de una página web, blog o post, es totalmente necesario seleccionar las keywords correctas y utilizarlas de forma adecuada en el contenido.Para que te hagas una idea, deberás utilizarlas en el título y en algún subtítulo, en la metadescripción, en el interior del texto (sobre todo en el primer párrafo), en el alt-text de las imágenes, entre otros. De esta forma, los buscadores entenderán que tu contenido trata sobre ese concepto concreto. Dejando a un lado las cuestiones de posicionamiento, las keywords también resultan de extraordinaria ayuda para definir el contenido principal de una página y su estructura, así como de los diferentes posts publicados.

1. Keywords graficados como Badges

Nuestras etiquetas ya sean utilizadas para palabras claves (keywords), etiquetas (tags) o insignias (badges), se adaptan al contexto a casi cualquier contenido mediante la utilización del componente badges existente en bootstrap y gracias al cual la insignia (badge) tiene seis posibles variaciones en el class todas ellas añadiendo la class badge. Aqui esta lista:

  • badge-default
  • badge-primary
  • badge-success
  • badge-info
  • badge-warning
  • badge-warning
  • badge-danger

El uso del color para añadir significado solo proporciona una indicacion visual, que no se transmitira a los usuarios de las tecnologias de asistencia, como los lectores de pantalla. La informacion denotada por el color sea obvia del propio contenido (por ejemplo, el texto visible), o que se incluya a traves de medios alternativos, como texto adicional oculto con la class .sr-only.

El siguiente ejemplo muestra la adaptación grafica del badge al ser incorporado a un elemento tipo titulo h1, h2, h3, h3, h4, h5, h6.

1.1. Código:
1.2. Resultado:

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Las insignias se pueden usar como parte de enlaces o botones para proporcionar un contador.

1.3. Código:
1.4. Resultado:

Tenga en cuenta que, dependiendo de cómo se utilicen, las insignias pueden ser confusas para los usuarios de lectores de pantalla y tecnologías de asistencia similares. Si bien el diseño de las insignias proporciona una indicación visual de su propósito, a estos usuarios simplemente se les presentará el contenido de la insignia. Dependiendo de la situación específica, estas insignias pueden parecer palabras o números adicionales al azar al final de una oración, enlace o botón. A menos que el contexto sea claro (como en el caso del ejemplo de "Notificaciones", donde se entiende que el "4" es el número de notificaciones), considere incluir un contexto adicional con una parte de texto adicional visualmente oculta.

1.5. Código:
1.6. Resultado:

2. Variaciones contextuales

Agregue cualquiera de las clases modificadoras mencionadas a continuación para cambiar el aspecto de una insignia.

2.1. Código:
2.2. Resultado:
Primary Secondary Success Danger Warning Info Light Dark

3. Transmitir el significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia desde el contenido en sí (por ejemplo, el texto visible), o se incluye a través de medios alternativos, como texto adicional oculto con la clase .sr-only.

4. Insignias en forma de píldoras

Utilice la clase de modificador de .badge-pill badge para hacer que las tarjetas sean más redondas (con un border-radius más grande y un padding horizontal adicional). Útil si te pierdes las insignias de v3.

4.1. Código:
4.2. Resultado:
Primary Secondary Success Danger Warning Info Light Dark

5. Insignias como vinculos

El uso de las clases .badge-* contextuales en un elemento proporciona rápidamente distintivos accionables con los estados de desplazamiento y enfoque.

5.1. Código:
5.2. Resultado:
Fuentes
    Comentario
    Image
    Comentarios