Icono WWW. Fondo móvil

Qué es un widget. Definición y ejemplos

El término widget se traduce al español como artilugio o artefacto, y es utilizado para referirse a algún elemento que permite desarrollar una actividad u oficio.

En informática, widget hace referencia a los pequeños programas o funciones que se anexan a un sistema superior (sea un sitio web o un sistema operativo) y agregan valor a la experiencia de usuario.

Para tener presente, algunos desarrolladores utilizan el término plugin para referirse a este tipo de programas informáticos.

Ejemplos de widgets

Un ejemplo de widget es la lista de tareas pendientes en la pantalla del teléfono móvil. Esta aplicación no es el gestor de eventos en sí. Tan solo es un programa -más pequeño- que se conecta al gestor (puede ser Google Calendar) y descarga una información específica: las tareas pendientes.

Siguiendo con el celular, el módulo que indica el porcentaje restante de batería también es un artilugio. Este no se encarga de administrar u optimizar el hardware. Su función es simplemente indicar cuánto queda de carga disponible.

Para el caso de un sitio web se puede identificar como widget una casilla de redes sociales, donde se listan y enlazan los perfiles en Facebook, Twitter, Instagram y Flickr del autor (como sucede en la parte superior de este blog).

Un motor de búsqueda interno, las entradas más recientes, una casilla de anuncios publicitarios y una nube de etiquetas también son artefactos que agregan valor y optimizan la experiencia del usuario.

Widgets de redes sociales

Con la masificación de las redes sociales, es común encontrar sitios web que presentan las publicaciones de la marca en Facebook y Twitter desde su página de inicio.

Para lograr esta función, el administrador del sitio anexa un código HTML (acompañado por elementos CSS y JS) a la página web y permite la conexión entre un sitio y otro.

Para el caso de Facebook, los plugins disponibles son:

  • Grupos
  • Botón Guardar
  • Citas textuales
  • Botón «Me gusta»
  • Botón «Compartir»
  • Botón «Enviar»
  • Comentarios insertados
  • Publicaciones insertadas
  • Reproductor de video
  • Páginas

Para hacer más clara la explicación, miremos el widget Facebook «Me gusta».

Los códigos de inserción son:

<div id="fb-root"></div>
<script
async
defer
crossorigin="anonymous"
src="https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v8.0"
nonce="mW7qV1PL">
</script>
<div class="fb-like" 
data-href="https://e-lexia.com"
data-width="500"
data-layout="button"
data-action="like"
data-size="large"
data-
share="true">
</div>

El resultado es:

En Facebook para desarrolladores está la documentación para lograr este tipo de aplicaciones.

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

Explicación sobre widgets

Aprovecho este recurso que presenté en el curso «Implementación de las TIC en el aula de clase», de la Universidad Cooperativa de Colombia.

Aquí explico el concepto, además de su comparación con los gadgets y un ejemplo de aplicación con los artefactos de WordPress.

En el canal YouTube «Escuela Digital» puedes encontrar más videos sobre el tema.

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

Apoya la producción de la Escuela Digital desde PayPal.me

Con una taza de chocolate todo sabe mejor ¿Nos invitas a una?

¡Vamos por los 20.000 suscriptores en YouTube! Suscríbete

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Licencia Creative Commons Qué es un widget. Definición y ejemplos por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/blog.

2 respuestas a «Qué es un widget. Definición y ejemplos»

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Icono de soporte y atención. Dirige al formulario de contacto de e-Lexia.com Contacto
Logo de e-Lexia.com: Regresar al inicio del sitio web Inicio