{"id":1964,"date":"2020-10-29T13:38:22","date_gmt":"2020-10-29T18:38:22","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1964"},"modified":"2024-11-01T11:26:16","modified_gmt":"2024-11-01T16:26:16","slug":"que-es-un-widget-definicion-y-ejemplos","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/que-es-un-widget-definicion-y-ejemplos\/","title":{"rendered":"Qu\u00e9 es un widget. Definici\u00f3n y ejemplos"},"content":{"rendered":"<p>El t\u00e9rmino <em>widget<\/em> se traduce al espa\u00f1ol como artilugio o artefacto, y es utilizado para referirse a alg\u00fan elemento que permite desarrollar una actividad u oficio.<\/p>\n<p>En inform\u00e1tica, <em>widget<\/em> hace referencia a los peque\u00f1os 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.<\/p>\n<p>Para tener presente, algunos desarrolladores utilizan el t\u00e9rmino <em>plugin<\/em> para referirse a este tipo de programas inform\u00e1ticos.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Ejemplos de widgets<\/h2>\n<p>Un ejemplo de <em>widget<\/em> es la lista de tareas pendientes en la pantalla del tel\u00e9fono m\u00f3vil. Esta aplicaci\u00f3n no es el gestor de eventos en s\u00ed. Tan solo es un programa -m\u00e1s peque\u00f1o- que se conecta al gestor (puede ser Google Calendar) y descarga una informaci\u00f3n espec\u00edfica: las tareas pendientes.<\/p>\n<p>Siguiendo con el celular, el m\u00f3dulo que indica el porcentaje restante de bater\u00eda tambi\u00e9n es un artilugio. Este no se encarga de administrar u optimizar el <em>hardware<\/em>. Su funci\u00f3n es simplemente indicar cu\u00e1nto queda de carga disponible.<\/p>\n<p>Para el caso de un sitio web se puede identificar como <em>widget<\/em> 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).<\/p>\n<p>Un motor de b\u00fasqueda interno, las entradas m\u00e1s recientes, una casilla de anuncios publicitarios y una nube de etiquetas tambi\u00e9n son artefactos que agregan valor y optimizan la experiencia del usuario.<\/p>\n<h2>Widgets de redes sociales<\/h2>\n<p>Con la masificaci\u00f3n de las redes sociales, es com\u00fan encontrar sitios web que presentan las publicaciones de la marca en Facebook y Twitter desde su p\u00e1gina de inicio.<\/p>\n<p>Para lograr esta funci\u00f3n, el administrador del sitio anexa un c\u00f3digo HTML (acompa\u00f1ado por elementos CSS y JS) a la p\u00e1gina web y permite la conexi\u00f3n entre un sitio y otro.<\/p>\n<p>Para el caso de Facebook, los <em>plugins<\/em> disponibles son:<\/p>\n<ul>\n<li>Grupos<\/li>\n<li>Bot\u00f3n Guardar<\/li>\n<li>Citas textuales<\/li>\n<li>Bot\u00f3n \u00abMe gusta\u00bb<\/li>\n<li>Bot\u00f3n \u00abCompartir\u00bb<\/li>\n<li>Bot\u00f3n \u00abEnviar\u00bb<\/li>\n<li>Comentarios insertados<\/li>\n<li>Publicaciones insertadas<\/li>\n<li>Reproductor de video<\/li>\n<li>P\u00e1ginas<\/li>\n<\/ul>\n<p>Para hacer m\u00e1s clara la explicaci\u00f3n, miremos el <em>widget<\/em> Facebook \u00abMe gusta\u00bb.<\/p>\n<p>Los c\u00f3digos de inserci\u00f3n son:<\/p>\n<pre>\r\n&lt;div id=\"fb-root\"&gt;&lt;\/div&gt;<br \/>&lt;script <br \/> async<br \/> defer<br \/> crossorigin=\"anonymous\"<br \/> src=\"https:\/\/connect.facebook.net\/es_LA\/sdk.js#xfbml=1&amp;version=v8.0\"<br \/> nonce=\"mW7qV1PL\"&gt;<br \/>&lt;\/script&gt;\r\n<\/pre>\n<pre>\r\n&lt;div class=\"fb-like\" <br \/>  data-href=\"https:\/\/e-lexia.com\" <br \/>  data-width=\"500\" <br \/>  data-layout=\"button\" <br \/>  data-action=\"like\" <br \/>  data-size=\"large\" <br \/>  data-<br \/>  share=\"true\"&gt;<br \/>&lt;\/div&gt;\r\n<\/pre>\n<p>El resultado es:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fe-lexia.com&#038;width=500&#038;layout=button&#038;action=like&#038;size=large&#038;share=true&#038;height=65&#038;appId\" width=\"500\" height=\"65\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" allow=\"encrypted-media\"><\/iframe><\/p>\n<p>En <a href=\"https:\/\/developers.facebook.com\/docs\/plugins\/page-plugin\">Facebook para desarrolladores<\/a> est\u00e1 la documentaci\u00f3n para lograr este tipo de aplicaciones.<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Explicaci\u00f3n sobre widgets<\/h2>\n<p>Aprovecho este recurso que present\u00e9 en el curso \u00abImplementaci\u00f3n de las TIC en el aula de clase\u00bb, de la Universidad Cooperativa de Colombia.<\/p>\n<p>Aqu\u00ed explico el concepto, adem\u00e1s de su comparaci\u00f3n con los <em>gadgets<\/em> y un ejemplo de aplicaci\u00f3n con los artefactos de WordPress.<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" title=\"\u00bfQu\u00e9 es un widget? Ayudas de contenidos e interactividad en los sitios | [EPW]\" width=\"774\" height=\"581\" src=\"https:\/\/www.youtube.com\/embed\/KlmKw-d7Tmc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@escuela-digital?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abEscuela Digital\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El t\u00e9rmino widget se traduce al espa\u00f1ol como artilugio o artefacto, y es utilizado para referirse a alg\u00fan elemento que permite desarrollar una actividad u oficio. En inform\u00e1tica, widget hace referencia a los peque\u00f1os programas o funciones que se anexan a un sistema superior (sea un sitio web o un&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1593,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,66],"class_list":["post-1964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1964"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1964\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1593"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}