{"id":2354,"date":"2007-04-28T16:05:40","date_gmt":"2007-04-28T21:05:40","guid":{"rendered":"http:\/\/www.vidadigital.net\/blog\/2007\/04\/28\/utilizando-widgets-2\/"},"modified":"2007-04-29T23:13:06","modified_gmt":"2007-04-30T04:13:06","slug":"utilizando-widgets-2","status":"publish","type":"post","link":"http:\/\/www.vidadigital.net\/blog\/2007\/04\/28\/utilizando-widgets-2\/","title":{"rendered":"Utilizando widgets  en Pbwiki"},"content":{"rendered":"<\/p>\n<p>Uno de las caracter\u00edticas de Pbwiki que m\u00e1s me ha llamado la atenci\u00f3n es la utilizaci\u00f3n de&nbsp;&nbsp; javascript para modificar o a\u00f1adir&nbsp; funciones adicionales al wiki. En el <a href=\"http:\/\/widget.pbwiki.com\/Reference\">Widget Library<\/a> se describen los&nbsp; \u00abwidgets\u00bb disponibles y se ofrecen ejemplos de c\u00f3mo implementarlos&nbsp;.&nbsp; Lo primero que debemos hacer para utilizar estos widgets es incluir este c\u00f3digo en&nbsp; la parte superior del \u00abside bar\u00bb:<\/p>\n<p>&lt;script type=<span class=\"str\">\u00abtext\/javascript\u00bb<\/span> src=<span class=\"str\">\u00abhttp:\/\/widget.pbwiki.com\/f\/widget_lib.js\u00bb<\/span>&gt;&lt;\/script&gt;<\/p>\n<style type=\"text\/css\">.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }\n<\/style>\n<\/p>\n<p>Paso a describir aquellos widgets &nbsp;que considero m\u00e1s \u00fatiles:<\/p>\n<p>I. Widgets para modificar los botones del wiki:<\/p>\n<p>a. Para a\u00f1adir un bot\u00f3n al men\u00fa de navegaci\u00f3n: <\/p>\n<p> &lt;script&gt; widget.addButton(<span class=\"str\">\u00abtext to appear on the button\u00bb<\/span>,<span class=\"str\">\u00aburl to send the button to\u00bb<\/span>); &lt;\/script&gt;<\/p>\n<style type=\"text\/css\">.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }\n<\/style>\n<\/p>\n<p>Por ejemplo, si quisiera incluir el enlace a DigiZen como un bot\u00f3n en el wiki utilizo este c\u00f3digo: <\/p>\n<p> &lt;script&gt; widget.addButton(<span class=\"str\">\u00abDigiZen\u00bb<\/span>,<span class=\"str\">\u00abhttp:\/\/www.vidadigital.net\/blog\u00bb<\/span>);<br \/>&lt;\/script&gt;<\/p>\n<style type=\"text\/css\">.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }\n<\/style>\n<p>Este c\u00f3digo debes incluirlo en el \u00abside bar\u00bb.&nbsp; El resultado que obtuve fue el siguiente: <\/p>\n<p><a href=\"http:\/\/www.uprm.edu\/ideal\/images\/Utilizandowidgets2_EA3E\/widget1_thumb13.jpg\" atomicselection=\"true\"><img loading=\"lazy\" decoding=\"async\" style=\"border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px\" height=\"102\" src=\"http:\/\/www.uprm.edu\/ideal\/images\/Utilizandowidgets2_EA3E\/widget1_thumb1_thumb1.jpg\" width=\"500\" border=\"0\"><\/a> <\/p>\n<p>b. Cambiar el nombre a un bot\u00f3n existente: <\/p>\n<p>&lt;script&gt; widget.renameButton(<span class=\"str\">\u00abtexto que tiene en bot\u00f3n\u00bb<\/span>,<span class=\"str\">\u00abnuevo nombre para el bot\u00f3n\u00bb<\/span>); &lt;\/script&gt;<\/p>\n<p>Por ejemplo para cambiar en el texto del bot\u00f3n de \u00abComments\u00bb puedo utilizar el siguiente c\u00f3digo: <\/p>\n<p>&lt;script&gt; widget.renameButton(<span class=\"str\">\u00abComments\u00bb<\/span>,<span class=\"str\">\u00abComentarios\u00bb<\/span>); &lt;\/script&gt;<\/p>\n<p>El resultado es este: <\/p>\n<p><a href=\"http:\/\/www.uprm.edu\/ideal\/images\/Utilizandowidgets2_EA3E\/widgests2_thumb13.jpg\" atomicselection=\"true\"><img loading=\"lazy\" decoding=\"async\" style=\"border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px\" height=\"97\" src=\"http:\/\/www.uprm.edu\/ideal\/images\/Utilizandowidgets2_EA3E\/widgests2_thumb1_thumb1.jpg\" width=\"500\" border=\"0\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>II. Cambios al header del wiki:<\/p>\n<p>a. Cambiar el nombre de la p\u00e1gina: <\/p>\n<p>&lt;script&gt;<br \/>header.replacePageName(<span class=\"str\">\u00abNuevo nombre\u00bb<\/span>);<br \/>&lt;\/script&gt;<\/p>\n<p>Por ejemplo el nombre de la p\u00e1gina principal de lso wikis en Pbwiki es \u00abFront Page\u00bb. Si le queremos cambiar en nombre a \u00ab\u00bbInicio\u00bb, insertamos este c\u00f3digo en la p\u00e1gina principal: <\/p>\n<p>&lt;script&gt;<br \/>header.replacePageName(<span class=\"str\">\u00abInicio\u00bb<\/span>);<br \/>&lt;\/script&gt;<\/p>\n<p>III. Creaci\u00f3n de un \u00edndice alfab\u00e9tico de las p\u00e1ginas del wiki: Utilizando el siguiente c\u00f3digo en cualquier p\u00e1gina puedes crear un \u00edndice del contenido del wiki: <\/p>\n<p>&lt;img src=<span class=\"str\">\u00ab\/plugin_helper.php?plugin=external&amp;name=No%20label&amp;html=%3Cscript%20src%3D%22http%3A%2F%2Fdochuyen.pbwiki.com%2Ff%2FAutoIndex.js%22%3E%3C%2Fscript%3E\u00bb<\/span> isapbwikiplugin=<span class=\"str\">\u00ab1\u00bb<\/span> \/&gt;<\/p>\n<p>Puedes ver un ejemplo en este <a href=\"http:\/\/wiki-rum.pbwiki.com\/Indice\">wiki de prueba<\/a> . <\/p>\n<p>Te invito a explorar &nbsp;los widgets que puedes implementar para&nbsp; configurar el wiki de acuerdo a tus necesidades. <\/p>\n<p><div class=\"wlWriterSmartContent\" id=\"0767317B-992E-4b12-91E0-4F059A8CECA8:4760cb65-5ec2-47db-b53e-6d26fe7c4bb2\" contenteditable=\"false\" style=\"padding-right: 0px; display: inline; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px\">[Tags]pbwiki[\/tags]<\/div>\n<\/p>\n<style type=\"text\/css\">.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }\n<\/style>\n","protected":false},"excerpt":{"rendered":"\n<p>Uno de las caracter\u00edticas de Pbwiki que m\u00e1s me ha llamado la atenci\u00f3n es la utilizaci\u00f3n de&nbsp;&nbsp; javascript para modificar o a\u00f1adir&nbsp; funciones adicionales al wiki. En el Widget Library se describen los&nbsp; \u00abwidgets\u00bb disponibles y se ofrecen ejemplos de c\u00f3mo implementarlos&nbsp;.&nbsp; Lo primero que debemos hacer para utilizar estos widgets es incluir este &hellip; <\/p>\n<p><a class=\"more-link btn\" href=\"http:\/\/www.vidadigital.net\/blog\/2007\/04\/28\/utilizando-widgets-2\/\">Seguir leyendo<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[49],"tags":[139,766],"series":[],"class_list":["post-2354","post","type-post","status-publish","format-standard","hentry","category-wikis","tag-pbwiki","tag-wikis","item-wrap"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4tuv-BY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/posts\/2354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/comments?post=2354"}],"version-history":[{"count":0,"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/posts\/2354\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/media?parent=2354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/categories?post=2354"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/tags?post=2354"},{"taxonomy":"series","embeddable":true,"href":"http:\/\/www.vidadigital.net\/blog\/wp-json\/wp\/v2\/series?post=2354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->