{"id":12575,"date":"2013-02-05T14:05:21","date_gmt":"2013-02-05T13:05:21","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=12575"},"modified":"2023-02-27T14:43:10","modified_gmt":"2023-02-27T14:43:10","slug":"slider-oop-mootools","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/","title":{"rendered":"Creare uno slider OOP utilizzando Mootools"},"content":{"rendered":"<p>Per OOP, acronimo di <strong>Object Oriented Programming<\/strong>, si intende un metodo di programmazione che si differenzia dalla normale programmazione procedurale. Nell\u2019OOP \u00e8 possibile appunto definire delle classi che poi verranno istanziate da elementi chiamati oggetti.<\/p>\n<p>In questo intervento, mi occuper\u00f2 di riprendere lo slider da me precedentemente realizzato con jQuery e di ricreare la stessa situazione utilizzando il <strong>framework Mootools<\/strong>, che ci d\u00e0 la possibilit\u00e0 di utilizzare la programmazione ad oggetti.<\/p>\n<h2>Introduzione alla programmazione ad oggetti<\/h2>\n<p>Per chi ancora non ha ben chiaro come funzioni l\u2019OOP, vi spiegher\u00f2 in breve come funziona e quali vantaggi fornisce.<br \/>\nSono 3 i punti fondamentali della <strong>programmazione ad oggetti<\/strong>:<\/p>\n<ul>\n<li>Incapsulamento<\/li>\n<li>Ereditariet\u00e0<\/li>\n<li>Polimorfismo<\/li>\n<\/ul>\n<p>Per <strong>incapsulamento<\/strong> si intende la possibilit\u00e0 di definire dati, quindi propriet\u00e0 e metodi, all\u2019interno dell\u2019oggetto che per\u00f2 possano essere utilizzati soltanto dall\u2019oggetto stesso. In questo modo diamo la possibilit\u00e0 di proteggere i dati interni dell\u2019oggetto, e quindi di poter invocare metodi dell\u2019oggetto senza poter vedere effettivamente che codice esegue il suddetto metodo.<\/p>\n<p>L\u2019<strong>ereditariet\u00e0<\/strong> \u00e8 la possibilit\u00e0 di creare delle classi che ereditano metodi e procedure di un\u2019altra classe che \u00e8 detta anche superclasse.A queste sottoclassi \u00e8 possibile assegnare ulteriori metodi e procedure o addirittura ridefinire i metodi della superclasse. Ad esempio possiamo ereditare due metodi dalla superclasse, ridefinirne uno e aggiungerne altri.<\/p>\n<p>Il <strong>polimorfismo<\/strong> \u00e8 la propriet\u00e0 che ci permette di invocare un metodo definito sia nella superclasse che in n sottoclassi in modo distinto, a seconda dell\u2019oggetto che andiamo a istanziare. Per esempio se abbiamo un metodo definito in una superclasse che poi successivamente viene ridefinito in una o pi\u00f9 sottoclassi, possiamo istanziare pi\u00f9 oggetti contemporaneamente con classi differenti. Ognuno di questi oggetti richiamer\u00e0 il metodo definito dalla propria classe.<\/p>\n<h2>Markup HTML e regole Css<\/h2>\n<p>Per questo esempio il markup HTML e le regole CSS definite sono identiche a quelle dell\u2019esempio precedentemente realizzato presente a <a href=\"https:\/\/www.artera.net\/it\/blog\/webdesign\/thumbnail-slider-jquery\">questo link<\/a>. L\u2019unica differenza \u00e8 che, avendo calcolato la larghezza del singolo elemento dello slider in un modo differente, ho aggiunto un tag <em>div class=&#8221;thumbs-content&#8221;<\/em> che, impostato con larghezza fissa, altezza fissa, e overflow nascosto, mi servir\u00e0 per nascondere una porzione di contenuto del <em>div id=&#8221;thumbs&#8221;<\/em>.<\/p>\n<h2>Codice Javascript\/Mootools<\/h2>\n<p>Veniamo finalmente al fulcro della <strong>creazione dello slider OOP<\/strong>. Sostanzialmente ho definito una classe con al suo interno propriet\u00e0 e metodi che mi permetteranno di far muovere gli elementi al click sulle frecce. Tutto ci\u00f2 sar\u00e0 possibile istanziando l\u2019oggetto con i parametri corretti, e invocando il metodo .play();. Sar\u00e0 possibile, inoltre, impostare a piacimento la velocit\u00e0 di transizione di movimento. Iniziamo a vedere come si dichiara una classe in modo generico:<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\nvar Slider = new Class({<br \/>\n    proprieta1: proprieta1,<br \/>\n    proprieta2: proprieta2,<br \/>\n    metodo1: function() {<br \/>\n    \/\/ istruzioni<\/p>\n<p>},<\/p>\n<p>metodo2: function() {<\/p>\n<p>\/\/istruzioni<\/p>\n<p>}<br \/>\n});<br \/>\n[\/code]<\/p>\n<p>In questo modo definiamo propriet\u00e0, quelle che comunemente vengono intese come variabili e metodi quelle che di solito si usa chiamare funzioni. Nello specifico ho definito queste propriet\u00e0 e diversi metodi che man mano vi illustrer\u00f2:<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\nwidth: 0,<\/p>\n<p>start: 0<br \/>\n[\/code]<\/p>\n<p>Per prima cosa definiamo il metodo che prender\u00e0 i parametri che noi passiamo al momento dell\u2019istanza del nostro oggetto e che ci serviranno nel corso dello script tramite il costruttore della classe: il metodo initialize.<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n        initialize: function( slider, arrowDx, arrowSx, nEle, speed ) {<\/p>\n<p>            this.slider = slider;<\/p>\n<p>            this.arrowDx = arrowDx;<\/p>\n<p>            this.arrowSx = arrowSx;<\/p>\n<p>            this.nEle = nEle;<\/p>\n<p>            this.speed = speed;<\/p>\n<p>            this.thumbs = this.slider.getElementById(&#8216;thumbs-wrapper&#8217;);<\/p>\n<p>        }<br \/>\n[\/code]<\/p>\n<p>Passeremo rispettivamente: <strong>lo slider, la freccia destra, la freccia sinistra<\/strong>, il numero di elementi e come parametro facoltativo la velocit\u00e0 espressa in millisecondi. La propriet\u00e0 thumbs verr\u00e0 ricavato da this.slider.<\/p>\n<p>Il metodo successivo, getWidth, ricaver\u00e0 la larghezza del singolo elemento attraverso la larghezza dello slider divisa per 3 (numero di elementi che si visualizzano del nostro slider).<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n        getWidth: function() {<br \/>\n            var size = this.slider.getSize();<br \/>\n            return size.x \/ 3 ;<br \/>\n        }<\/p>\n<p>[\/code]<\/p>\n<p>getStart ci servir\u00e0 per ottenere il punto di partenza da cui dovr\u00e0 partire la propriet\u00e0 css left del nostro <em>div id=&#8221;thumbs-wrapper&#8221;<\/em>. Si ricava il valore moltiplicando la larghezza passata come parametro per il numero di elementi.<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n        getStart: function() {<br \/>\n            this.start = -this.width * this.nEle;<br \/>\n            this.thumbs.setStyle(&#8220;left&#8221;, this.start + &#8220;px&#8221;);<br \/>\n        }<br \/>\n[\/code]<\/p>\n<p>Il prossimo metodo verr\u00e0 utilizzato per ottenere la posizione attuale e quindi il valore \u201cleft\u201d durante ogni ciclo di slide con la seguente funzione:<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\ngetCurrentPos: function() {<br \/>\n            return parseInt(this.thumbs.getStyle(&#8220;left&#8221;));<br \/>\n        }<br \/>\n[\/code]<\/p>\n<p>Quest\u2019ultimo verr\u00e0 richiamato all\u2019interno delle operazioni di slide.<\/p>\n<p>Passiamo ora ad un metodo un po\u2019 pi\u00f9 interessante, che ci permetter\u00e0 di inserire una lista di elementi clonati in fondo e a all\u2019inizio dei nostri elementi, questo per poter ottenere un ciclo infinito una volta che arriviamo alla fine della lista o torniamo al primo elemento a ritroso.<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n        cloneElements: function() {<\/p>\n<p>            var elements = $$(&#8216;#thumbs-wrapper .thumb&#8217;);<br \/>\n            var first = elements[0];<\/p>\n<p>            elements.each(function(element) {<br \/>\n                element.clone()<br \/>\n                    .addClass(&#8216;cloned&#8217;)<br \/>\n                    .inject( this.thumbs )<br \/>\n                    .clone()<br \/>\n                    .inject( first, &#8216;before&#8217; );<br \/>\n            }.bind(this));<\/p>\n<p>        }<br \/>\n[\/code]<\/p>\n<p>Per prima cosa otteniamo un array, elements, contenente tutti i nostri <strong>elementi dello slider<\/strong>. Dopodich\u00e9 ricaviamo il primo elemento della lista e infine eseguiamo in ciclo per ogni elements con la funzione .each(). Dentro questo .each() utilizzeremo la funzione di mootools .inject(), che inserir\u00e0 i nostri elementi clonati con la funzione .clone() in coda al <em>div id=&#8221;thumbs-wrapper&#8221;<\/em> con .inject( this.thumbs) e all\u2019inizio con .inject( first, \u2018before\u2019);.<\/p>\n<p>I prossimi due metodi serviranno per effettuare il <strong>movimento di slide<\/strong>. Analizziamo passo dopo passo come funzionano:<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n        slideRight: function() {<\/p>\n<p>            if (!this.speed) { this.speed = 500 };<\/p>\n<p>            slideRight = new Fx.Morph(this.thumbs, {<br \/>\n                duration: this.speed,<br \/>\n                transition: Fx.Transitions.Sine.easeOut,<br \/>\n                onComplete: function() {<br \/>\n                    if ( ( this.getCurrentPos() ) == 2 * this.start ) {<br \/>\n                    this.thumbs.setStyle(&#8220;left&#8221;, this.start + &#8220;px&#8221;);<br \/>\n                    }<br \/>\n                }.bind(this),<br \/>\n            });<br \/>\n[\/code]<\/p>\n<p>La prima istruzione controller\u00e0 se la propriet\u00e0 speed \u00e8 stata valorizzata (quando viene istanziato l\u2019oggetto), altrimenti imposter\u00e0 un valore di default. Dopodich\u00e9 con l\u2019utilizzo della classe di mootools Fx.Morph definiamo come funzioner\u00e0 <strong>l\u2019animazione del nostro slider<\/strong>. Impostiamo la durata della transizione dello sliding con il parametro duration, con transition definiamo il tipo di transizione e infine al complete della transizione (onComplete) andiamo a riportare lo slider in posizione iniziale se ci siamo posizionati sull\u2019ultimo elemento, in modo tale da poter ottenere un loop infinito. Una nota molto importante \u00e8 l\u2019utilizzo della funzione .bind(this). Essa mi permette, sostanzialmente, di passare il contesto desiderato, nel nostro caso quello della classe, ad un metodo o ad una funzione definita e quindi di poter utilizzare this.thumbs all\u2019interno della funzione richiamata al complete. Se non avessi effettuato il bind in questa funzione, non avrei potuto utilizzare la propriet\u00e0 this.thumbs al suo interno.<\/p>\n<p>Passo successivo \u00e8 la definizione del listener per l\u2019evento di click sulla freccia:<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n            this.arrowDx.addEvent(&#8216;click&#8217;, function() {<\/p>\n<p>                var currentPos = this.getCurrentPos(),<br \/>\n                left = currentPos &#8211; this.width;<\/p>\n<p>                slideRight.start({<br \/>\n                    &#8216;left&#8217;: [ currentPos, left]<br \/>\n                });<\/p>\n<p>            }.bind(this));<br \/>\n[\/code]<\/p>\n<p>All\u2019evento click sulla freccia che abbiamo passato come propriet\u00e0 al momento dell\u2019istanza dell\u2019oggetto, applicheremo uno slide che partir\u00e0 dalla posizione attuale e arriver\u00e0 alla posizione successiva. La posizione attuale la ricaviamo con il metodo precedentemente definito, ossia getCurrentPos(), e lo spostamento sar\u00e0 dato dalla posizione attuale + la larghezza di un elemento.<\/p>\n<p>Il metodo della freccia di sinistra sar\u00e0 praticamente identico a differenza dello spostamento che sar\u00e0 verso sinistra e che al complete della funzione controlleremo quanto la posizione attuale avr\u00e0 raggiunto il primo elemento della lista.<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n        slideLeft: function() {<\/p>\n<p>            if (!this.speed) { this.speed = 500 };<\/p>\n<p>            slideLeft = new Fx.Morph(this.thumbs, {<br \/>\n                duration: this.speed,<br \/>\n                transition: Fx.Transitions.Sine.easeOut,<br \/>\n                onComplete: function() {<br \/>\n                    if ( ( this.getCurrentPos() ) == 0 ) {<br \/>\n                    this.thumbs.setStyle(&#8220;left&#8221;, this.start + &#8220;px&#8221;);<br \/>\n                    }<br \/>\n                }.bind(this),<br \/>\n            });<\/p>\n<p>            this.arrowSx.addEvent(&#8216;click&#8217;, function() {<\/p>\n<p>                var currentPos = this.getCurrentPos(),<br \/>\n                left = currentPos + this.width;<\/p>\n<p>                slideLeft.start({<br \/>\n                    &#8216;left&#8217;: [ currentPos, left]<br \/>\n                });<\/p>\n<p>            }.bind(this));<br \/>\n[\/code]<\/p>\n<p>A questo punto rimane soltanto da definire un metodo che richiamer\u00e0 tutti i metodi precedentemente definiti:<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n        play: function() {<br \/>\n            this.width = this.getWidth();<br \/>\n            this.getStart();<br \/>\n            this.cloneElements();<br \/>\n            this.slideRight();<br \/>\n            this.slideLeft();<br \/>\n        }<br \/>\n[\/code]<\/p>\n<p>Istanziamo l\u2019oggetto e \u201cschiacciamo\u201d play!<\/p>\n<p>[code type=&#8221;javascript&#8221;]<br \/>\n    var slider = new Slider( $(&#8216;thumbs&#8217;), $$(&#8216;a.dx-arrow&#8217;), $$(&#8216;a.sx-arrow&#8217;), 5, 1000 );<\/p>\n<p>    slider.play();<br \/>\n[\/code]<\/p>\n<p>Lascio a <a href=\"http:\/\/jsfiddle.net\/matteomelillo\/tDshn\/3\/\" title=\"Demo slider OOP Mootools\" target=\"_blank\" rel=\"noopener noreferrer\">questo link<\/a> la possibilit\u00e0 di visualizzare e testare una demo creata da me.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Per OOP, acronimo di <strong>Object Oriented Programming<\/strong>, si intende un metodo di programmazione che si differenzia dalla normale programmazione procedurale. Nell\u2019OOP \u00e8 possibile definire delle classi che verranno istanziate da elementi chiamati oggetti.<\/p>\n","protected":false},"author":4,"featured_media":12577,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[96,86,279,280],"class_list":["post-12575","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-javascript","tag-mootools","tag-slider","tag-slideshow"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u2022 Creare uno slider OOP utilizzando Mootools - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Creare uno slider OOP utilizzando Mootools. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Creare uno slider OOP utilizzando Mootools - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Creare uno slider OOP utilizzando Mootools. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-05T13:05:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:43:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/02\/mootools.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1\" \/>\n\t<meta property=\"og:image:height\" content=\"1\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Creare uno slider OOP utilizzando Mootools\",\"datePublished\":\"2013-02-05T13:05:21+00:00\",\"dateModified\":\"2023-02-27T14:43:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/\"},\"wordCount\":1358,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/mootools.jpg\",\"keywords\":[\"javascript\",\"mootools\",\"slider\",\"slideshow\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/\",\"name\":\"\u2022 Creare uno slider OOP utilizzando Mootools - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/mootools.jpg\",\"datePublished\":\"2013-02-05T13:05:21+00:00\",\"dateModified\":\"2023-02-27T14:43:10+00:00\",\"description\":\"Leggi dal blog: Creare uno slider OOP utilizzando Mootools. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/mootools.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/02\\\/mootools.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-oop-mootools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creare uno slider OOP utilizzando Mootools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 Creare uno slider OOP utilizzando Mootools - Artera","description":"Leggi dal blog: Creare uno slider OOP utilizzando Mootools. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","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":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Creare uno slider OOP utilizzando Mootools - Artera","og_description":"Leggi dal blog: Creare uno slider OOP utilizzando Mootools. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2013-02-05T13:05:21+00:00","article_modified_time":"2023-02-27T14:43:10+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/02\/mootools.jpg","width":1,"height":1,"type":"image\/jpeg"}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"7 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Creare uno slider OOP utilizzando Mootools","datePublished":"2013-02-05T13:05:21+00:00","dateModified":"2023-02-27T14:43:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/"},"wordCount":1358,"commentCount":2,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/02\/mootools.jpg","keywords":["javascript","mootools","slider","slideshow"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/","url":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/","name":"\u2022 Creare uno slider OOP utilizzando Mootools - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/02\/mootools.jpg","datePublished":"2013-02-05T13:05:21+00:00","dateModified":"2023-02-27T14:43:10+00:00","description":"Leggi dal blog: Creare uno slider OOP utilizzando Mootools. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/02\/mootools.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/02\/mootools.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-oop-mootools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Creare uno slider OOP utilizzando Mootools"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/12575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=12575"}],"version-history":[{"count":1,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/12575\/revisions"}],"predecessor-version":[{"id":234483,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/12575\/revisions\/234483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/12577"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=12575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=12575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=12575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}