diff --git a/controllets/animated-button-container-controllet/animated-button-container-controllet.html b/controllets/animated-button-container-controllet/animated-button-container-controllet.html
index 3cbb7a4..5605c9a 100755
--- a/controllets/animated-button-container-controllet/animated-button-container-controllet.html
+++ b/controllets/animated-button-container-controllet/animated-button-container-controllet.html
@@ -1,4 +1,3 @@
-
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
@@ -145,19 +144,14 @@
     </style>
 
     <template>
-        <!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
-            <neon-animatable><div id="hidden"></div></neon-animatable>
-            <neon-animatable>-->
-                <paper-material elevation="5" id="window" class="window">
-                    <div class="transparent"></div>
-                    <paper-toolbar id="toolbar">
-                        <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
-                        <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
-                    </paper-toolbar>
-                   <div id="container_content"><content></content></div>
-                </paper-material>
-            <!--</neon-animatable>
-        </neon-animated-pages>-->
+        <paper-material elevation="5" id="window" class="window">
+            <div class="transparent"></div>
+            <paper-toolbar id="toolbar">
+                <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
+                <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
+            </paper-toolbar>
+           <div id="container_content"><content></content></div>
+        </paper-material>
 
         <div id="button_container" class="horizontal layout">
            <span class="button-container" id="open" on-click="_onOpenClick">
diff --git a/controllets/create-card-controllet/create-card-controllet.html b/controllets/create-card-controllet/create-card-controllet.html
index b159e13..1c7601b 100755
--- a/controllets/create-card-controllet/create-card-controllet.html
+++ b/controllets/create-card-controllet/create-card-controllet.html
@@ -183,7 +183,7 @@
                         <paper-textarea class="custom_textarea" id="text"
                                                                 label=""
                                                                 char-counter
-                                                                max-rows="6"
+                                                                max-rows="50"
                                                                 maxlength="1024"
                                                                 value="{{text}}">
 
diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html
index bf56542..f3cec86 100755
--- a/controllets/data-sevc-controllet/data-sevc-controllet.html
+++ b/controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -3,6 +3,8 @@
 <!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->
 <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+
+<script defer src="../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
 /********************************************************************************************************************************
 
 <link rel="import" href="../../bower_components/polymer/polymer.html">
@@ -114,8 +116,12 @@
                     this.$.slider.selected = 1;
 //                    console.log(this.selectedDatalet);
                     this.dataUrl = this.dataletPreset["data-url"];
-
                 }
+
+//                var languageLink = document.createElement("link");
+//                languageLink.rel = "localization";
+//                languageLink.href = "../../../locales/it.l20n";
+//                document.getElementsByTagName("head")[0].appendChild(languageLink);
             },
 
             _updateSlider : function(e){
diff --git a/controllets/data-sevc-controllet/demo/index.html b/controllets/data-sevc-controllet/demo/index.html
index 98cbdef..db6804d 100755
--- a/controllets/data-sevc-controllet/demo/index.html
+++ b/controllets/data-sevc-controllet/demo/index.html
@@ -9,11 +9,11 @@
     <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
     <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
 
-    <!--<meta name="defaultLanguage" content="en-EN">-->
-    <meta name="availableLanguages" content="en-EN, it-IT">
-    <!--<link rel="localization" href="../../../locales/{locale}.l20n">-->
-    <link rel="localization" href="../../../locales/it-IT.l20n">
-    <script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
+    <!--&lt;!&ndash;<meta name="defaultLanguage" content="en">&ndash;&gt;-->
+    <!--<meta name="availableLanguages" content="en, it">-->
+    <!--&lt;!&ndash;<link rel="localization" href="../../../locales/{locale}.l20n">&ndash;&gt;-->
+    <link rel="localization" href="../../../locales/it.l20n">
+    <!--<script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>-->
 
     <link rel="import" href="../data-sevc-controllet.html" />
 </head>
@@ -24,6 +24,12 @@
     <data-sevc-controllet id="dsc" deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet>
 
     <script>
+
+//        var languageLink = document.createElement("link");
+//        languageLink.rel = "localization";
+//        languageLink.href = "../../../locales/it.l20n";
+//        document.getElementsByTagName("head")[0].appendChild(languageLink);
+
         var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+
         " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
         " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet.html b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
index 0f73f50..f5958b1 100755
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet.html
+++ b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
@@ -325,14 +325,14 @@
                 $(this.$.datalet_selection_labels).perfectScrollbar();
                 $(this.$.datalet_selection_datalet).perfectScrollbar();
 
-                this.modify = true;//da eliminare in futuro
+                this.params = {'data-url' : this.dataUrl};
+
+                //this.modify = true;//da eliminare in futuro
                 if(this.preselectedDatalet){
                     this.modify = true;
                     this._preselectDatalet();
                     this.preselectedDatalet = undefined;
                 }
-
-                this.params = {'data-url' : this.dataUrl};
             },
 
             attached : function() {
@@ -348,11 +348,12 @@
 //                    console.log($(inputs[i]).children("paper-menu"));
 
                 this._translate();
-
             },
 
             _translate : function(){
                 document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
+                if(this.modify)
+                    document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
             },
 
             setFields : function(fields) {
@@ -387,10 +388,6 @@
             },
 
             _preselectDatalet : function() {
-//                this.$.add_button.innerText = "MODIFY DATALET";
-                document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
-
-
                 this.selectedDatalet = this.preselectedDatalet;
                 this.selectedFields = this._copy(this.fields);
 
@@ -426,11 +423,6 @@
             },
 
             _addInput : function(e){
-//                console.log(e.target.innerHTML.trim());
-//                console.log(e.target.innerText);
-//                console.log(e.currentTarget.innerHTML.trim());
-//                console.log(e.currentTarget.innerText);
-
                 var selectedFields = this._copy(this.selectedFields);
 
                 var index = $(e.target).parents("paper-dropdown-menu")[0].id;
@@ -456,13 +448,12 @@
                 }
 
                 if(load){
-                    var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-//                    console.log(labels);
-                    for (var i = 0; i < labels.length; i++) {
-                        if (labels[i].innerHTML.trim() != "") {
-                            this.params[labels[i].label] = labels[i].value;
-                        }
-                    }
+//                    var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
+//                    for (var i = 0; i < labels.length; i++) {
+//                        if (labels[i].innerHTML.trim() != "") {
+//                            this.params[labels[i].label] = labels[i].value;
+//                        }
+//                    }
                     
                     this._loadDatalet(selectedFields);
                 }
@@ -472,6 +463,18 @@
             _loadDatalet : function(selectedFields){
 //                var params = {'data-url' : this.dataUrl};
 
+                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
+                for (var i = 0; i < labels.length; i++) {
+                    if (labels[i].innerHTML.trim() != "") {
+                        this.params[labels[i].label] = labels[i].value;
+                    }
+                }
+
+                console.log(this.selectedDatalet);
+                console.log(this.params);
+                console.log(selectedFields);
+                console.log(this.dataUrl);
+
                 var dataletParams ={
                     component   : this.selectedDatalet+"-datalet",
                     params      : this.params,
@@ -545,10 +548,10 @@
 
                 $("#datalet_selection_inputs").height(h);
                 $("#datalet_selection_labels").height(h);
-                if(this.modify)
+//                if(this.modify)
                     $("#datalet_selection_datalet").height(h-128);
-                else
-                    $("#datalet_selection_datalet").height(h);
+//                else
+//                    $("#datalet_selection_datalet").height(h);
             }
 
         });
diff --git a/controllets/paper-card-controllet/_paper-card-controllet.html b/controllets/paper-card-controllet/_paper-card-controllet.html
new file mode 100644
index 0000000..834845f
--- /dev/null
+++ b/controllets/paper-card-controllet/_paper-card-controllet.html
@@ -0,0 +1,173 @@
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+
+
+<dom-module id="paper-card-controllet">
+
+    <template>
+        <style>
+            :host {
+                color: #333;
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                display: inline-block;
+                margin: 0 8px 8px ;
+                font-size: 14px;
+                text-align: justify;
+                line-height: 10px;
+                --paper-fab-background: var(--accent-color);
+            }
+
+            paper-material {
+                border-radius: 2px;
+                background-color: white;
+            }
+
+            .preview {
+                position: relative;
+                margin-bottom: 0px;
+                /*max-width: 200px;
+                max-height: 200px;
+                min-width: 200px;
+                min-height: 200px;*/
+            }
+
+            .legend {
+                position: absolute;
+                background: rgba(0,0,0,0.5);
+                bottom: 0;
+                color: white;
+                height: 40px;
+                padding: 0 16px;
+                left: 0; right: 0;
+            }
+
+            paper-fab {
+                position: absolute;
+                right: 10px;
+                bottom: -18px;
+                --paper-fab-background:#2196F3;
+            }
+
+            .content ::content {
+                padding: 0 16px 8px;
+                font-weight: 300;
+                color: var(--secondary-text-color);
+                line-height: 24px;
+            }
+            ::content.buttons {
+                margin-top: 8px;
+            }
+            ::content paper-button, ::content paper-icon-button {
+                font-weight: 500;
+                color: var(--accent-color);
+            }
+
+            paper-material{
+                max-height: 260px;
+                max-width: 200px;
+                min-height: 260px;
+                min-width: 200px;
+            }
+
+            #card_content{
+                overflow: hidden;
+                max-width: 200px;
+                max-height: 240px;
+                min-width: 200px;
+                min-height: 240px;
+            }
+
+            #datalet_preview{
+
+                -ms-transform: scale(0.95);
+                -moz-transform: scale(0.95);
+                -o-transform: scale(0.95);
+                -webkit-transform: scale(0.95);
+                transform: scale(0.95);
+
+            }
+
+            #text_preview{
+               font-size: smaller;
+            }
+
+        </style>
+
+        <paper-material elevation="{{elevation}}">
+            <div class="vertical layout">
+                <div class="preview">
+                    <div id="card_content">
+                        <template is="dom-if" if="{{checkType(type,'image')}}">
+                            <img src="{{imageSrc}}">
+                        </template>
+                        <template is="dom-if" if="{{checkType(type,'datalet')}}">
+                            <div id="datalet_preview"><content></content></div>
+                        </template>
+                        <template is="dom-if" if="{{checkType(type,'text')}}">
+                           <div id="text_preview"><content></content></div>
+                        </template>
+                    </div>
+                    <div class="horizontal layout center legend">
+                        <span>{{legend}}</span>
+                        <paper-fab mini icon="{{icon}}"></paper-fab>
+                    </div>
+                </div>
+                <div class="content">
+                    <p>{{text}}</p >
+                </div>
+            </div>
+        </paper-material>
+    </template>
+
+    <script>
+        Polymer({
+            is:'paper-card-controllet',
+
+            properties: {
+                width: {
+                    type: Number,
+                    value: 350,
+                    /*observer: "_changeWidth",*/
+                },
+                height: {
+                    type: Number,
+                    value: 200
+                },
+
+                legend:{
+                    type: String,
+                    value: "Legend"
+                },
+
+                type:{
+                    type: String,
+                    value: "text"
+                },
+
+                icon:{
+                    type: String,
+                    value: "home"
+                },
+
+                imageSrc: {
+                    type: String,
+                    value:""
+                }
+            },
+            _changeWidth: function(data){
+                this.style.width = data + "px";
+                this.querySelector(".content").width = data + "px";
+            },
+
+            checkType: function(type, check){
+                return (type == check);
+            },
+
+            ready: function(){
+            }
+        })
+    </script>
+
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/paper-card-controllet/paper-card-controllet.html b/controllets/paper-card-controllet/paper-card-controllet.html
index 64823d7..9be8dba 100755
--- a/controllets/paper-card-controllet/paper-card-controllet.html
+++ b/controllets/paper-card-controllet/paper-card-controllet.html
@@ -210,11 +210,11 @@
             properties: {
                 width: {
                     type: Number,
-                    observer: "_changeWidth",
+                    observer: "_changeWidth"
                 },
                 height: {
                     type: Number,
-                    observer: "_changeHeight",
+                    observer: "_changeHeight"
                 },
                 cardType:{
                     type: String,
diff --git a/controllets/search-panel-controllet/search-panel-controllet.html b/controllets/search-panel-controllet/search-panel-controllet.html
index 66815e7..f7b4519 100755
--- a/controllets/search-panel-controllet/search-panel-controllet.html
+++ b/controllets/search-panel-controllet/search-panel-controllet.html
@@ -68,10 +68,10 @@ Example:
                 position: absolute;
                 top: -12px;
                 width: 20vw;
-
             }
 
-            neon-animated-pages{
+            neon-animated-pages
+            {
                /*width: 20vw;*/
             }
 
@@ -143,7 +143,7 @@ Example:
 
             ready: function(){
 
-                if(this.leftDirection != undefined){
+               if(this.leftDirection != undefined){
                     this.$.search_text.style.left =  '5px';
                 }else if(this.rightDirection != undefined){
                     this.$.search_text.style.right =  '5px';
@@ -169,8 +169,9 @@ Example:
              * @param {Event} e
              */
             _valueChanged : function(oldvalue, newValue){
-                clearTimeout (this.timer);
-                this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
+                var t = this;
+                clearTimeout(this.timer);
+                this.timer = setTimeout(function(){t.fire('search-panel-controllet_content-changed', {searchKey: t.searchKey, id : t.id})}, 500);
             },
             /**
              * It returns the value in text area
diff --git a/datalets/base-datalet/base-datalet.html b/datalets/base-datalet/base-datalet.html
index 1f09892..6831aee 100755
--- a/datalets/base-datalet/base-datalet.html
+++ b/datalets/base-datalet/base-datalet.html
@@ -97,7 +97,7 @@ Example :
             <!--<b>Source:</b><span id="domain"></span>-->
             <!--<b></b><span id="domainPage"></span>-->
 
-            <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> ( <a id="base_datalet_link" target="_blank">dataset</a> )
+            <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> (<a id="base_datalet_link" target="_blank">dataset</a>)
 
             <div id="base_datalet_rtp">
                 <div id="rtp">Powered by ROUTE-TO-PA</div>
@@ -140,33 +140,46 @@ Example :
              * @method ready
              */
             ready: function(){
+                //cKan organized with or not catalog
+                queryInitial = this.dataUrl.substring(0,  this.dataUrl.indexOf("api")); //SOURCE
 
+                urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
+                this.$.base_datalet_source.innerHTML = urlSource;
+                this.$.base_datalet_source.setAttribute("href", urlSource);
 
 
-                var urlDatalet;
-                if(this.dataUrl != undefined){
+                //OpenDataSoft check
+                if(this.dataUrl.indexOf("/records/") > -1 )
+                {
+                    //Resourceid of a datalet
+                    var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
+                    var params  = this.decomponeQueryString(query);
+                    resultIssyIdDatalet = params["dataset"];
+                    resultIssyAPI = "explore/dataset/";
+                    urlPageDatasetIssy = queryInitial + resultIssyAPI + resultIssyIdDatalet + "/";
 
+                    this.$.base_datalet_link.setAttribute("href", urlPageDatasetIssy);
+                }
+                else
+                {
+                //CKAN portal
+                var urlDatalet;
+                if(this.dataUrl != undefined) {
                     var apiIdResource = "resource_show?id=";
 
                     //Resourceid of a datalet
                     var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
-                    var params  = this.decomponeQueryString(query);
+                    var params = this.decomponeQueryString(query);
+                    //CKAN
                     resultIdDatalet = params["resource_id"];
 
                     //cKan organized with or not catalog
-                    queryInitial = this.dataUrl.substring(0,  this.dataUrl.indexOf("api"));
-                    queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"),  this.dataUrl.indexOf("datastore_search"));
-
-                    urlDatalet = queryInitial +  queryFinal + apiIdResource + resultIdDatalet;
-                    urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
-
-//                    this.$.domainPage.innerHTML = '<a href=' + urlSource +  ' target=' + "_blank>" + urlSource + '</a>'+ "." ;
-
-                    this.$.base_datalet_source.innerHTML = urlSource;
-                    this.$.base_datalet_source.setAttribute("href", urlSource);
+                    queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"), this.dataUrl.indexOf("datastore_search"));
 
+                    urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
                     this.requestDataletData(urlDatalet);
                 }
+                }
             },
             /**
              * Set the domain url to show in the footer
@@ -210,7 +223,6 @@ Example :
              */
             handleDataletResponse: function(e) {
                 this.objectDatalet.json_resultDatalet.value = e;
-
                 //packageId of a give datalet
                 packageIdDatalet = this.objectDatalet.json_resultDatalet.value.result.package_id;
                 resourceId = this.objectDatalet.json_resultDatalet.value.result.id;
@@ -228,8 +240,6 @@ Example :
                     urlSource =  this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
 
                     this.$.base_datalet_link.setAttribute("href", urlDatalet);
-//                    this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet +  ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )";
-
                 }
             }
         });
diff --git a/locales/en-EN.l20n b/locales/en.l20n
index 056f454..056f454 100644
--- a/locales/en-EN.l20n
+++ b/locales/en.l20n
diff --git a/locales/fr.l20n b/locales/fr.l20n
new file mode 100644
index 0000000..056f454
--- /dev/null
+++ b/locales/fr.l20n
@@ -0,0 +1,23 @@
+<slide1Title "SELECT DATASET">
+<slide1Subtitle "Search or copy and paste the url of dataset.">
+<slide2Title "SELECT DATA">
+<slide2Subtitle "Select the fields from tree-view. The multi-table will show the values related to the selected fields.">
+<slide3Title "SELECT VISUALIZATION">
+<slide3Subtitle "Select a visualization, fill out inputs and labels (optional).">
+
+<listView "LIST VIEW">
+<treeMapView "TREE MAP VIEW">
+<mostPopular "MOST POPULAR">
+<availableDatasets "Available datasets">
+<suggestedDatasets "Suggested datasets">
+<selectedUrl "Selected url">
+
+<inputs "INPUTS">
+<labels "LABELS / OPTIONS">
+<comment "COMMENT">
+<commentLabel "comment (max 100 characters)">
+<dataletPreview "DATALET PREVIEW">
+<addDatalet "ADD">
+<modifyDatalet "MODIFY">
+
+<googlePiechartDescription "The labels of slices.">
\ No newline at end of file
diff --git a/locales/it-IT.l20n b/locales/it.l20n
index 2ee74a8..2ee74a8 100644
--- a/locales/it-IT.l20n
+++ b/locales/it.l20n
diff --git a/locales/nl.l20n b/locales/nl.l20n
new file mode 100644
index 0000000..056f454
--- /dev/null
+++ b/locales/nl.l20n
@@ -0,0 +1,23 @@
+<slide1Title "SELECT DATASET">
+<slide1Subtitle "Search or copy and paste the url of dataset.">
+<slide2Title "SELECT DATA">
+<slide2Subtitle "Select the fields from tree-view. The multi-table will show the values related to the selected fields.">
+<slide3Title "SELECT VISUALIZATION">
+<slide3Subtitle "Select a visualization, fill out inputs and labels (optional).">
+
+<listView "LIST VIEW">
+<treeMapView "TREE MAP VIEW">
+<mostPopular "MOST POPULAR">
+<availableDatasets "Available datasets">
+<suggestedDatasets "Suggested datasets">
+<selectedUrl "Selected url">
+
+<inputs "INPUTS">
+<labels "LABELS / OPTIONS">
+<comment "COMMENT">
+<commentLabel "comment (max 100 characters)">
+<dataletPreview "DATALET PREVIEW">
+<addDatalet "ADD">
+<modifyDatalet "MODIFY">
+
+<googlePiechartDescription "The labels of slices.">
\ No newline at end of file