{"id":1267,"date":"2014-04-22T10:00:27","date_gmt":"2014-04-22T09:00:27","guid":{"rendered":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?p=1267"},"modified":"2014-04-22T10:33:21","modified_gmt":"2014-04-22T09:33:21","slug":"sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/","title":{"rendered":"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I)"},"content":{"rendered":"<p>Hoy en d\u00eda el \u00e9xito de cualquier aplicaci\u00f3n depende en gran medida de tener una interfaz de usuario r\u00e1pida, intuitiva y atractiva al usuario. Debido a estos requerimientos el auge de un lenguaje como JavaScript ha ido en aumento y se ha incorporado como parte de nuestros conocimientos si o s\u00ed.<br \/>\nAhora bien a la hora de decantarse por un framework JavaScript es donde m\u00e1s dudas hay. El primer motivo es la gran cantidad de frameworks que hay (como hemos visto en <a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?s=frameworks+javascript\" target=\"_blank\">anteriores entradas<\/a>). El segundo motivo principalmente es porque ning\u00fan frameworks cubre 100 % nuestros objetivos, nos gusta parte de uno y parte de otro, salvo AngularJS (cuyo principal inconveniente es el conocimiento que debemos de tener de JavaScript y que pertenece a Google).<br \/>\nPara solventar en parte esta problem\u00e1tica hacemos uso de RactiveJS. RactiveJS es otro framework JavaScript, que se caracteriza por tener aspectos destacados de otros frameworks (JQueryUI, Angular, Mustache&#8230;) la posibilidad de realizar componentes con lo que nuestros desarrollos pueden ser reutilizables con tan solo cambiar los estilos. Adem\u00e1s puede ser extensibles con otros frameworks como Backbone, JQuery UI y hacerlos que  formen parte de nuestro ecosistema sin que desentonen, ni que se vean como un pegote o a\u00f1adido.<!--more--><br \/>\nPara esto voy a escribir una serie de post, en las semanas pr\u00f3ximas:<br \/>\n1.- Introducci\u00f3n a RactiveJS + Integrando con SharePoint<br \/>\n2.-\u00a0Extendiendo RactiveJS con Backbone<br \/>\n3.- Caso de Uso: Encamina.Enmarcha UI Herramientas utilizadas<\/p>\n<p><strong>1.- Introducci\u00f3n a RactiveJS<\/strong><br \/>\nRactiveJS fue creado originalmente para usarlo en el peri\u00f3dico ingles <a href=\"http:\/\/www.theguardian.com\/\">The Guardian<\/a>, y naci\u00f3 con la misi\u00f3n de solucionar el eterno problema con los navegadores, ya que una web de noticias se debe de visualizar en todos los navegadores posibles (tanto de escritorio como aplicaciones m\u00f3viles). Para ello hay tiene que solventar un problema: el HTML est\u00e1tico. Para ello RactiveJS hace uso de las plantillas de Mustache pero convirtiendo ese HTML en un DOM muy ligero, haciendo uso de estas plantillas, junto con JavaScript y CSS. A este HTML se le a\u00f1ade funcionalidad como eventos, acciones para poder dar un paso m\u00e1s que lo que utilizando solamente Mustache.<br \/>\nOtra de las ventajas que tiene es que permite una buena integraci\u00f3n entre los diversos miembros del equipo por un lado el departamento de dise\u00f1o tiene el HTML tal y como lo ha pensado, y por otra parte tiene una integraci\u00f3n con los datos tal y como desean los desarrolladores. Esta comunicaci\u00f3n entre los miembros del equipo se hace indispensable para no solaparse el trabajo y no duplicar el trabajo.<br \/>\n<strong>Creando un ejemplo de Tareas pendientes<\/strong><br \/>\nCualquier proyecto\/app que utilice RactiveJS esta dividida en tres partes: Template (HTML extendido), JavaScript y CSS.<\/p>\n<ul>\n<li>Nos hace falta un \u00abTemplate\u00bb o plantilla donde vamos a pintar los datos que necesitamos. Esto ser\u00e1 un html pero con marcas donde vamos a representar los datos.<\/li>\n<li>Una parte de JavaScript, donde dotaremos de la creaci\u00f3n de los eventos que tiene esta plantilla<\/li>\n<li>CSS, fichero CSS donde alojaremos los estilos de esta plantilla. Esta parte es opcional, los estilos se pueden a\u00f1adir dentro del template o bien en un fichero aparte. Lo bueno que tiene Ractive es que los estilos solamente se aplican sobre ese Template de esta forma evitamos ir creando archivos de estilos interminables y fijados a los identificadores del html.<\/li>\n<\/ul>\n<p>Para este ejemplo podemos tener un template como el siguiente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n &lt;script type=&quot;text\/ractive&quot; id=&quot;example-template&quot;&gt;\r\n &lt;div class='todo-app'&gt;\r\n\r\n  &lt;header id='header'&gt;\r\n    &lt;!-- we bind to the custom 'enter' event as well as 'change', for the benefit of IE --&gt;\r\n    &lt;input id='new-todo' on-enter-change='new_todo' placeholder='What needs to be done?' autofocus&gt;\r\n  &lt;\/header&gt;\r\n\r\n  {{#items.length}} &lt;!-- only show when there are one or more items --&gt;\r\n    &lt;section id='main'&gt;\r\n\r\n      &lt;!-- 'toggle all' button --&gt;\r\n      &lt;label for='toggle-all'&gt;Mark all as complete&lt;\/label&gt;\r\n      &lt;input\r\n        id='toggle-all'\r\n        type='checkbox'\r\n        on-click-change='toggle_all'\r\n        checked='{{ items.length === completedTodos() }}'\r\n        intro='fade'\r\n        outro='fade'\r\n      &gt;\r\n\r\n      &lt;!-- the actual list --&gt;\r\n      &lt;ul id='todo-list'&gt;\r\n        {{#items:i}}\r\n          {{&gt;item}}\r\n        {{\/items}}\r\n      &lt;\/ul&gt;\r\n    &lt;\/section&gt;\r\n\r\n    &lt;div id='footer' intro='fade' outro='slide'&gt;\r\n      &lt;span id='todo-count'&gt;\r\n        &lt;strong&gt;{{ activeTodos() }}&lt;\/strong&gt; {{ activeTodos() === 1 ? 'item' : 'items' }} left\r\n      &lt;\/span&gt;\r\n\r\n      &lt;!-- switch filters --&gt;\r\n      &lt;ul id='filters'&gt;\r\n        &lt;li class='{{ currentFilter === &quot;all&quot; ? &quot;selected&quot; : &quot;&quot; }}' on-tap='set_filter:all'&gt;All&lt;\/li&gt;\r\n        &lt;li class='{{ currentFilter === &quot;active&quot; ? &quot;selected&quot; : &quot;&quot; }}' on-tap='set_filter:active'&gt;Active&lt;\/li&gt;\r\n        &lt;li class='{{ currentFilter === &quot;completed&quot; ? &quot;selected&quot; : &quot;&quot; }}' on-tap='set_filter:completed'&gt;Completed&lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n\r\n      &lt;!-- hidden if no completed items are left --&gt;\r\n      {{# completedTodos() }}\r\n        &lt;button id='clear-completed' on-tap='clear_completed'&gt;\r\n          Clear completed ({{ completedTodos() }})\r\n        &lt;\/button&gt;\r\n      {{\/ completedTodos() }}\r\n    &lt;\/div&gt;\r\n  {{\/items.length}}\r\n\r\n&lt;\/div&gt;\r\n&lt;!-- {{&gt;item}} --&gt;\r\n{{# filter( this ) }}\r\n&lt;li intro='slide:fast' outro='slide:fast' class='{{ .completed ? &quot;completed&quot; : &quot;&quot; }} {{ .editing ? &quot;editing&quot; : &quot;&quot; }}'&gt;\r\n  &lt;div class='view'&gt;\r\n    &lt;input class='toggle' type='checkbox' checked='{{.completed}}'&gt;\r\n    &lt;label on-dblclick='edit'&gt;{{description}}&lt;\/label&gt;\r\n    &lt;button on-tap='remove:{{i}}' class='destroy'&gt;&lt;\/button&gt;\r\n  &lt;\/div&gt;\r\n\r\n  {{#.editing}}\r\n    &lt;div class='edit-container'&gt;\r\n      &lt;input intro='select' class='edit' value='{{description}}' on-blur-enter='submit'&gt;\r\n    &lt;\/div&gt;\r\n  {{\/.editing}}\r\n&lt;\/li&gt;\r\n{{\/ end of todo item }}\r\n&lt;!-- {{\/item}} --&gt;\r\n     &lt;\/script&gt;\r\n<\/pre>\n<p>Este html\/avanzado es muy semejante por una parte al html que gener\u00e1bamos con Angular por ejemplo tenemos varios funciones a eventos dbclick, onblu-enter,checked, como aplicamos filtros de una forma muy simple. Y por otro lado tenemos una sintaxis muy similar a Mustache donde pondremos el s\u00edmbolo Mustache \u00ab{\u00bb donde queremos reemplazar este valor por un valor de nuestros datos o de una funci\u00f3n.<br \/>\nUna vez tenemos generado el HTML, el siguiente paso es dotarle de funcionalidad para ello implementaremos la variable Ractive donde por un lado asignaremos el template que vamos a utilizar, por otro lado el sitio donde lo vamos a renderizar y por \u00faltimo le asignaremos los datos que vamos a representar. <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n  var template = $('#example-template').html();\r\n    var example = $('#example');\r\n   \r\n    var items, sampleItems, todoList, filters;\r\n\r\n    \/\/ our model is a normal array - Ractive will intercept calls to mutator methods\r\n    \/\/ like push and splice, so we don't need to inherit from a custom class or anything\r\n    sampleItems = &#x5B;\r\n      { description: 'Add a todo' },\r\n      { description: 'Add some more todos' },\r\n      { description: 'Build something with Ractive.js' }\r\n    ];\r\n\r\n    \/\/ Load data from localStorage. FF will throw a SecurityError if you try\r\n    \/\/ to access localStorage with cookies disabled, so we try-catch\r\n    try {\r\n        if (window.localStorage) {\r\n            items = JSON.parse(window.localStorage.getItem('ractive-todos'));\r\n        }\r\n\r\n        if (!items || !items.length) {\r\n            items = sampleItems;\r\n        }\r\n    } catch (err) {\r\n        \/\/ overwrite localStorage so we don't need to try-catch later\r\n        window.localStorage = {\r\n            setItem: function () { } \/\/ noop\r\n        };\r\n\r\n        items = sampleItems;\r\n    }\r\n    \/\/ set up some filters\r\n    filters = {\r\n        completed: function (item) { return item.completed; },\r\n        active: function (item) { return !item.completed; },\r\n        all: function () { return true; }\r\n    };\r\n\r\n    \/\/ create our app view\r\n    todoList = new Ractive({\r\n        el: example,\r\n        template: template,\r\n        noIntro: true, \/\/ disable transitions during initial render\r\n\r\n        data: {\r\n            items: items,\r\n            filter: function (item) {\r\n                var filter = filters&#x5B;this.get('currentFilter')];\r\n                return filter(item);\r\n            },\r\n            currentFilter: 'all',\r\n\r\n            \/\/ These computed values are aware of their dependency on\r\n            \/\/ `items` because of `this.get( 'items' )` - and will\r\n            \/\/ automatically recompute and update the view when\r\n            \/\/ `items` changes.\r\n            completedTodos: function () {\r\n                return this.get('items').filter(filters.completed).length;\r\n            },\r\n\r\n            activeTodos: function () {\r\n                return this.get('items').filter(filters.active).length;\r\n            }\r\n        },\r\n\r\n        \/\/ We can define 'transitions', which are applied to elements on intro\r\n        \/\/ or outro. This is normally used for animation, but we can use it for\r\n        \/\/ other purposes, such as autoselecting an input's contents\r\n        transitions: {\r\n            select: function (t) {\r\n                setTimeout(function () {\r\n                    t.node.select();\r\n                    t.complete();\r\n                }, 0);\r\n            }\r\n        }\r\n    });\r\n\r\n    \/\/ Various user mouse and keyboard actions, defined in the template, will\r\n    \/\/ fire 'proxy events' that trigger behaviours and state changes\r\n    todoList.on({\r\n        remove: function (event, index) {\r\n            items.splice(index, 1);\r\n        },\r\n        new_todo: function (event) {\r\n            items.push({\r\n                description: event.node.value,\r\n                completed: false\r\n            });\r\n\r\n            event.node.value = '';\r\n        },\r\n        edit: function (event) {\r\n            this.set(event.keypath + '.editing', true);\r\n        },\r\n        submit: function (event) {\r\n            this.set(event.keypath + '.editing', false);\r\n        },\r\n        clear_completed: function () {\r\n            var i = items.length;\r\n\r\n            while (i--) {\r\n                if (items&#x5B;i].completed) {\r\n                    items.splice(i, 1);\r\n                }\r\n            }\r\n        },\r\n        toggle_all: function (event) {\r\n            var i = items.length, completed = event.node.checked;\r\n\r\n            while (i--) {\r\n                this.set('items&#x5B;' + i + '].completed', completed);\r\n            }\r\n        },\r\n        set_filter: function (event, filter) {\r\n            this.set('currentFilter', filter);\r\n        }\r\n    });\r\n    \/\/ When the model changes, persist to localStorage if possible\r\n    todoList.observe('items', function (items) {\r\n        \/\/ persist to localStorage\r\n        if (window.localStorage) {\r\n            localStorage.setItem('ractive-todos', JSON.stringify(items));\r\n        }\r\n    });\r\n<\/pre>\n<p>Este c\u00f3digo no es muy dificil de entender. varios m\u00e9todos para a\u00f1adir, filtrar elementos y de una forma muy sencilla. Si ejecutamos este c\u00f3digo en una App AutoHosted visualizamos la siguiente pantalla:<br \/>\n<a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png\" alt=\"RactiveJS\" width=\"822\" height=\"572\" class=\"aligncenter size-full wp-image-1269\" srcset=\"https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png 822w, https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS-300x208.png 300w\" sizes=\"auto, (max-width: 822px) 100vw, 822px\" \/><\/a><\/p>\n<p><strong>A\u00f1adiendo SharePoint<\/strong><br \/>\nUna vez tenemos el ejemplo b\u00e1sico con datos ficticios, ahora vamos a incluirlo que consulte la lista de tareas de SharePoint.<br \/>\nEl primer paso vamos a rearlizar una consulta la la lista de SharePoint \u00abTareas\u00bb y posteriormente asignarle estos datos a nuestro objeto Ractive.<br \/>\nPara ello solamente con el siguiente c\u00f3digo es suficiente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n var web = context.get_web();\r\n    context.load(web);\r\n    var spList = web.get_lists().getByTitle('Tarea');\r\n    var camlQuery = SP.CamlQuery.createAllItemsQuery();\r\n    this.value = spList.getItems(camlQuery);\r\n    context.load(value);\r\n    context.executeQueryAsync(Function.createDelegate(this, this.mySuccessFunction),\r\n        Function.createDelegate(this, this.myFailFunction));\r\n\r\nfunction mySuccessFunction() {\r\n    var template = $('#example-template').html();\r\n    var example = $('#example');\r\n    var listItems = this.value.getEnumerator();\r\n    items = &#x5B;];\r\n    var i = 0;\r\n    while (listItems.moveNext()) {\r\n        var oListItem = listItems.get_current();\r\n        items&#x5B;i] = { description: oListItem.get_item('Title') };\r\n        i++;\r\n    }\r\n}\r\n<\/pre>\n<p>Para completar el ejemplo tendremos que a\u00f1adir en cada evento de a\u00f1adir\/modificar\/eliminar su correspondiente acci\u00f3n en el SSOM de JavaScript. Para este primer ejemplo no los voy a implementar, dado que es un ejemplo base y podemos encontrar esta informaci\u00f3n en la ayuda de Technet.<br \/>\nEl a\u00f1adir esta funcionalidad solamente seria valida para este ejemplo \u00abdemo\u00bb en un caso real vamos a extender Ractive para hacer uso Backbone y tener una integraci\u00f3n total con los servicios REST de SharePoint\/WebApi para la parte de comunicaci\u00f3n con el servidor y por otro lado vamos a modificar la colecci\u00f3n de datos, de tal forma que por un lado comprobemos que los datos se renderizan de una forma muy r\u00e1pida y eficaz y por otro lado vamos enviando la informaci\u00f3n al servidor sin interferir en la ejecuci\u00f3n de la aplicaci\u00f3n. Estos aspectos los visualizaremos en el pr\u00f3ximo post \ud83d\ude42<br \/>\nEste ejemplo lo pod\u00e9is descargar desde el siguiente <a href=\"http:\/\/1drv.ms\/1lwCBne\" target=\"_blank\">link<\/a>.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content --><span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"<p>Hoy en d\u00eda el \u00e9xito de cualquier aplicaci\u00f3n depende en gran medida de tener una interfaz de usuario r\u00e1pida, intuitiva y atractiva al usuario. Debido a estos requerimientos el auge de un lenguaje como JavaScript ha ido en aumento y &hellip; <a href=\"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,100],"tags":[19,101,26],"class_list":["post-1267","post","type-post","status-publish","format-standard","hentry","category-buenas-practicas","category-javascript-2","tag-javascript","tag-requirejs","tag-sharepoint"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I) - Desarrollando sobre SharePoint<\/title>\n<meta name=\"description\" content=\"En este post, es el primero de una serie de post de como realizar interfaces de usuarios potentes haciendo uso de un framework JavaScript como es Ractive\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I) - Desarrollando sobre SharePoint\" \/>\n<meta name=\"twitter:description\" content=\"En este post, es el primero de una serie de post de como realizar interfaces de usuarios potentes haciendo uso de un framework JavaScript como es Ractive\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adri\u00e1n D\u00edaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/\"},\"author\":{\"name\":\"Adri\u00e1n D\u00edaz\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"headline\":\"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I)\",\"datePublished\":\"2014-04-22T09:00:27+00:00\",\"dateModified\":\"2014-04-22T09:33:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/\"},\"wordCount\":1858,\"commentCount\":0,\"image\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2014\\\/04\\\/RactiveJS.png\",\"keywords\":[\"JavaScript\",\"requirejs\",\"sharepoint\"],\"articleSection\":[\"buenas practicas\",\"javascript\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/\",\"url\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/\",\"name\":\"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I) - Desarrollando sobre SharePoint\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2014\\\/04\\\/RactiveJS.png\",\"datePublished\":\"2014-04-22T09:00:27+00:00\",\"dateModified\":\"2014-04-22T09:33:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"description\":\"En este post, es el primero de una serie de post de como realizar interfaces de usuarios potentes haciendo uso de un framework JavaScript como es Ractive\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2014\\\/04\\\/RactiveJS.png\",\"contentUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2014\\\/04\\\/RactiveJS.png\",\"width\":822,\"height\":572},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#website\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/\",\"name\":\"Desarrollando sobre SharePoint\",\"description\":\"Arquitectura, buenas pr\u00e1cticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\",\"name\":\"Adri\u00e1n D\u00edaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"caption\":\"Adri\u00e1n D\u00edaz\"},\"description\":\"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/author\\\/desarrollandosobresharepoint\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I) - Desarrollando sobre SharePoint","description":"En este post, es el primero de una serie de post de como realizar interfaces de usuarios potentes haciendo uso de un framework JavaScript como es Ractive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/","twitter_card":"summary_large_image","twitter_title":"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I) - Desarrollando sobre SharePoint","twitter_description":"En este post, es el primero de una serie de post de como realizar interfaces de usuarios potentes haciendo uso de un framework JavaScript como es Ractive","twitter_image":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png","twitter_misc":{"Escrito por":"Adri\u00e1n D\u00edaz","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/#article","isPartOf":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/"},"author":{"name":"Adri\u00e1n D\u00edaz","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"headline":"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I)","datePublished":"2014-04-22T09:00:27+00:00","dateModified":"2014-04-22T09:33:21+00:00","mainEntityOfPage":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/"},"wordCount":1858,"commentCount":0,"image":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/#primaryimage"},"thumbnailUrl":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png","keywords":["JavaScript","requirejs","sharepoint"],"articleSection":["buenas practicas","javascript"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/","url":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/","name":"[SharePoint] Crear una interfaz de usuario potente con Ractive.JS (I) - Desarrollando sobre SharePoint","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#website"},"primaryImageOfPage":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/#primaryimage"},"image":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/#primaryimage"},"thumbnailUrl":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png","datePublished":"2014-04-22T09:00:27+00:00","dateModified":"2014-04-22T09:33:21+00:00","author":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"description":"En este post, es el primero de una serie de post de como realizar interfaces de usuarios potentes haciendo uso de un framework JavaScript como es Ractive","inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/sharepoint-crear-una-interfaz-de-usuario-potente-con-ractive-js\/#primaryimage","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png","contentUrl":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2014\/04\/RactiveJS.png","width":822,"height":572},{"@type":"WebSite","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#website","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/","name":"Desarrollando sobre SharePoint","description":"Arquitectura, buenas pr\u00e1cticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb","name":"Adri\u00e1n D\u00edaz","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","caption":"Adri\u00e1n D\u00edaz"},"description":"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/author\/desarrollandosobresharepoint\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts\/1267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/comments?post=1267"}],"version-history":[{"count":0,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts\/1267\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/media?parent=1267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/categories?post=1267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/tags?post=1267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}