{"id":3424,"date":"2012-07-20T21:34:27","date_gmt":"2012-07-20T21:34:27","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3424"},"modified":"2013-01-02T14:32:22","modified_gmt":"2013-01-02T14:32:22","slug":"farbtastic-color-picker","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/","title":{"rendered":"Farbtastic Color Picker"},"content":{"rendered":"<p>Farbtastic es un plugin jQuery que nos permite tener uno o varios selectores de color en una p\u00e1gina Web.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3449\" title=\"colorpicker\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png\" alt=\"\" width=\"219\" height=\"242\" \/><\/a>Cada widget se vincula a un elemento existente (por ejemplo, un campo de texto) y se actualiza el valor del elemento cuando se selecciona un color.<\/p>\n<p>Para disponer de este selector o color picker tan solo deberemos incluir los estilos necesarios, la librer\u00eda jQuery, el plugin y su llamada en nuestro &lt;head&gt;:<\/p>\n<pre>&lt;link rel=\"stylesheet\" href=\"farbtastic.css\" type=\"text\/css\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"farbtastic.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" charset=\"utf-8\"&gt;\r\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('#demo').hide();\r\n\u00a0\u00a0\u00a0 $('#picker').farbtastic('#color');\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Y luego en nuestro &lt;body&gt;, dentro de un formulario podr\u00edamos tener el siguiente c\u00f3digo:<\/p>\n<pre>&lt;div class=\"form-item\"&gt;\r\n\u00a0 \u00a0 &lt;label for=\"color\"&gt;Color:&lt;\/label&gt;\r\n\u00a0\u00a0\u00a0 &lt;input type=\"text\" id=\"color\" name=\"color\" value=\"#123456\" \/&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"picker\"&gt;&lt;\/div&gt;<\/pre>\n<p>El empleo de este plugin podr\u00eda ser interesante, por ejemplo, en el caso de que queramos que los usuarios puedan cambiar el color de fondo de su escritorio, empleando este selector de color y depositando su valor en un campo de texto tipo hidden y al pulsar un bot\u00f3n enviar el c\u00f3digo del color seleccionado para guardarlo en base de datos o archivo.<\/p>\n<p>Otra gran utilidad que le veo es que el c\u00f3digo de los colores es dif\u00edcil sab\u00e9rselos de memoria. Podr\u00edamos seleccionarlo en este estupendo selector para saber su c\u00f3digo. Lo puedes <a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/farbtastic\/demo1.html\" target=\"_blank\">ver en el ejemplo en funcionamiento<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Farbtastic es un plugin jQuery que nos permite tener uno o varios selectores de color en una p\u00e1gina Web. Cada widget se vincula a un elemento existente (por ejemplo, un campo de texto) y se actualiza el valor del elemento cuando se selecciona un color. Para disponer de este selector o color picker tan solo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3449,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[76,79],"class_list":["post-3424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-colores","tag-inputs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Farbtastic Color Picker - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Farbtastic Color Picker - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Farbtastic es un plugin jQuery que nos permite tener uno o varios selectores de color en una p\u00e1gina Web. Cada widget se vincula a un elemento existente (por ejemplo, un campo de texto) y se actualiza el valor del elemento cuando se selecciona un color. Para disponer de este selector o color picker tan solo [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-20T21:34:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-02T14:32:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png\" \/>\n\t<meta property=\"og:image:width\" content=\"219\" \/>\n\t<meta property=\"og:image:height\" content=\"242\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/\",\"name\":\"Farbtastic Color Picker - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png\",\"datePublished\":\"2012-07-20T21:34:27+00:00\",\"dateModified\":\"2013-01-02T14:32:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png\",\"width\":219,\"height\":242},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Farbtastic Color Picker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Farbtastic Color Picker - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Farbtastic Color Picker - Jose Aguilar Blog","og_description":"Farbtastic es un plugin jQuery que nos permite tener uno o varios selectores de color en una p\u00e1gina Web. Cada widget se vincula a un elemento existente (por ejemplo, un campo de texto) y se actualiza el valor del elemento cuando se selecciona un color. Para disponer de este selector o color picker tan solo [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-20T21:34:27+00:00","article_modified_time":"2013-01-02T14:32:22+00:00","og_image":[{"width":219,"height":242,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/","url":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/","name":"Farbtastic Color Picker - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png","datePublished":"2012-07-20T21:34:27+00:00","dateModified":"2013-01-02T14:32:22+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/colorpicker.png","width":219,"height":242},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/farbtastic-color-picker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Farbtastic Color Picker"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3424"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3424\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3449"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}