{"id":13417,"date":"2013-03-19T16:04:06","date_gmt":"2013-03-19T15:04:06","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=13417"},"modified":"2023-02-27T14:42:24","modified_gmt":"2023-02-27T14:42:24","slug":"slider-nivo-mootools-oggetti","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/","title":{"rendered":"Slider Nivo con Mootools ed ereditariet\u00e0 oggetti"},"content":{"rendered":"

Per continuare il nostro cammino con la OOP, ho deciso di mostrarvi un esempio pratico e di facile comprensione dell\u2019ereditariet\u00e0 delle classi<\/strong>. In questo intervento riprender\u00f2 lo slider Nivo<\/strong> precedentemente realizzato da me utilizzando come framework Mootools e sfruttando le classi per definire due tipologie di slider, una (padre) con sistema di navigazione a frecce e un\u2019altra (figlia) che implementer\u00e0 anche una navigazione a pallini, sfruttando metodi e propriet\u00e0 definite nella classe padre.<\/p>\n

Consiglio, per chi se lo fosse perso, di riguardare l\u2019introduzione alla Object Oriented Programming, di cui ho parlato nel post precedente<\/a>, prima di proseguire alla lettura di questo intervento.<\/p>\n

Markup HTML e regole Css<\/h2>\n

La struttura HTML e le regole Css che ho utilizzato per questo esempio sono identiche a quelle presenti nel post sullo Slider Nivo che si pu\u00f2 trovare a questo link<\/a>. L\u2019unica differenza sar\u00e0 l\u2019aggiunta di una regola css display:block al primo elemento della lista.<\/p>\n

Codice Javascript\/Mootools<\/h2>\n

Analizziamo passo dopo passo la definizione dei metodi e delle classi da me realizzate in questo post. Per la realizzazione dello slider<\/strong> ho utilizzato due classi. La prima, Nivo, sar\u00e0 la classe padre, che incorporer\u00e0 metodi e propriet\u00e0 per creare uno slideshow di tipo Nivo con sistema di navigazione a frecce<\/strong>, la seconda Navigation, aggiunger\u00e0 alla navigazione a frecce anche dei pallini cliccabili<\/strong>.<\/p>\n

Per prima cosa definiremo una propriet\u00e0 che ci servir\u00e0 molto spesso all\u2019interno dei metodi successivi, che non sar\u00e0 altro che una sorta di puntatore all\u2019elemento attuale dello slider. Essa ci permetter\u00e0 anche di ricavare l\u2019elemento successivo della lista di slide.<\/p>\n

[code type=”javascript”]counter: 0[\/code]<\/p>\n

Il primo metodo che definiremo servir\u00e0 per inizializzare il nostro oggetto e quindi i parametri in ingresso che ci serviranno all\u2019interno dei metodi successivi.<\/p>\n

[code type=”javascript”]
\ninitialize: function ( slider, next, prev) {<\/p>\n

this.slider = slider;<\/p>\n

this.next = next;<\/p>\n

this.prev = prev;<\/p>\n

this.elements = this.slider.getElements(‘.element’);<\/p>\n

this.nEle = this.elements.length;<\/p>\n

}
\n[\/code]<\/p>\n

slider sar\u00e0 l\u2019elemento padre delle slide figlie, next la freccia a destra dello slideshow, prev la freccia a sinistra dello slideshow, elements sar\u00e0 un array contenente tutti gli elementi dello slider e nEle il numero di elementi.<\/p>\n

I prossimi due metodi verranno utilizzati per definire l\u2019animazione di fadeOut() e fadeIn() delle nostre slide. Per farlo ci serviremo della classe Fx di Mootools che con i suoi metodi .reveal() e .dissolve() ci permetter\u00e0 di creare un\u2019animazione sulla opacit\u00e0 dei nostri elementi.<\/p>\n

[code type=”javascript”]
\nfadeOut: function(element) {<\/p>\n

element.dissolve();<\/p>\n

},<\/p>\n

fadeIn: function(element) {<\/p>\n

element.reveal();<\/p>\n

}
\n[\/code]<\/p>\n

Il prossimo metodo, getElementPosition(), ci permetter\u00e0 di ricavare l\u2019elemento successivo o precedente della lista a seconda del parametro direction che gli diamo in ingresso, che potr\u00e0 essere \u2018+\u2019 o \u2018-\u2019.<\/p>\n

[code type=”javascript”]
\ngetElementPosition: function(direction) {<\/p>\n

if ( direction == ‘+’) {<\/p>\n

if ( this.counter == this.nEle-1) {<\/p>\n

this.counter = 0;<\/p>\n

} else {<\/p>\n

this.counter++;<\/p>\n

};<\/p>\n

} else if ( direction == ‘-‘) {<\/p>\n

if ( this.counter == 0 ) {<\/p>\n

this.counter = this.nEle-1;<\/p>\n

} else {<\/p>\n

this.counter–;<\/p>\n

}<\/p>\n

};<\/p>\n

nextSlide = this.elements[ this.counter ];<\/p>\n

return nextSlide;<\/p>\n

}
\n[\/code]<\/p>\n

Se il parametro direction avr\u00e0 valore \u2018+\u2019, e il valore di counter non sar\u00e0 uguale al numero di elementi, la propriet\u00e0 counter verr\u00e0 incrementata di 1, altrimenti counter verr\u00e0 riportata a 0 poich\u00e9 significher\u00e0 che la posizione attuale sar\u00e0 esattamente sull\u2019ultimo elemento, e quindi bisogner\u00e0 riportarsi all\u2019inizio della lista.<\/p>\n

Se il parametro direction avr\u00e0 valore \u2018-\u2019, e il valore di counter non sar\u00e0 uguale a 0 (primo elemento), counter verr\u00e0 decrementato di 1. Nel caso di counter = a 0 ci si sposter\u00e0 in fondo alla lista.<\/p>\n

Al termine di questi controlli ci salveremo l\u2019elemento n-esimo cercandolo nel nostro array elements. Passo finale un semplice return del nostro elemento successivo.<\/p>\n

I prossimi metodi, nextElement() e prevElement(), ci serviranno per effettuare la vera e propria funzione di slide tra gli elementi della lista<\/strong>. Prendiamo in considerazione nextElement():<\/p>\n

[code type=”javascript”]
\nnextElement: function() {<\/p>\n

this.next.addEvent(‘click’, function() {<\/p>\n

this.fadeOut(this.elements[this.counter]);<\/p>\n

nextSlide = this.getElementPosition(‘+’);<\/p>\n

this.fadeIn(nextSlide);<\/p>\n

}.bind(this));<\/p>\n

},<\/p>\n

prevElement: function() {<\/p>\n

this.prev.addEvent(‘click’, function() {<\/p>\n

this.fadeOut(this.elements[this.counter]);<\/p>\n

nextSlide = this.getElementPosition(‘-‘);<\/p>\n

this.fadeIn(nextSlide);<\/p>\n

}.bind(this));<\/p>\n

}
\n[\/code]<\/p>\n

Assegneremo alla freccia next, precendemente passata come parametro nella inizializzazione del nostro oggetto, un evento click. Questo evento svolger\u00e0 3 semplici passi. Per prima cosa richiamer\u00e0 il metodo fadeOut() sull\u2019elemento attuale, dopodich\u00e9 andr\u00e0 a ricavare il prossimo elemento con getElementPosition() e infine invocher\u00e0 il fadeIn() dell\u2019elemento successivo. Ho utilizzato .bind(this) per passare il contesto della classe all\u2019interno del metodo per poter risalire alle nostre propriet\u00e0 e metodi precedentemente definite.<\/p>\n

prevElement() differir\u00e0 da nextElement() per due fattori: l\u2019evento click verr\u00e0 invocato sulla freccia prev e il getElementPosition() sar\u00e0 richiamato per estrarre l\u2019elemento precedente, passandogli come parametro il valore \u2018-\u2019.<\/p>\n

L\u2019ultimo metodo di questa classe \u00e8 play() che istanzia i listener per gli eventi sulle frecce.<\/p>\n

[code type=”javascript”]
\nplay: function() {<\/p>\n

this.nextElement();<\/p>\n

this.prevElement();<\/p>\n

}
\n[\/code]<\/p>\n

A questo punto se noi provassimo ad instanziare un oggetto di questa classe Nivo, avremmo una navigazione con slideshow Nivo perfettamente funzionante<\/strong>. Per esempio:<\/p>\n

[code type=”javascript”]
\nvar nivo = new Nivo( document.getElement(‘.nivo’), document.getElement(‘.next’), document.getElement(‘.prev’));<\/p>\n

nivo.play();
\n[\/code]<\/p>\n

Ora definiamo una classe figlia Navigator che estender\u00e0 la classe padre Nivo e che al suo interno utilizzer\u00e0 alcuni metodi e propriet\u00e0 gi\u00e0 definiti, ridefinir\u00e0 altri metodi in base alle sue esigenze e ne definir\u00e0 di nuovi per svolgere nuove funzionalit\u00e0. Ecco la dichiarazione:<\/p>\n

[code type=”javascript”]
\nvar Navigator = new Class({<\/p>\n

Extends: Nivo,<\/p>\n

navi: {},<\/p>\n

circles: [],
\n[\/code]<\/p>\n

I metodi initialize(), fadeOut(), fadeIn() e getElementPosition() verranno ereditati senza alcuna modifica da parte della classe Navigator.<\/p>\n

Ora, invece, redifiniremo il metodo nextElement e prevElement aggiungendo una piccola modifica al codice:<\/p>\n

[code type=”javascript”]
\nnextElement: function() {<\/p>\n

this.next.addEvent(‘click’, function( event ) {<\/p>\n

this.fadeOut(this.elements[this.counter]);<\/p>\n

this.circles[ this.counter ].removeClass(‘active’);<\/p>\n

nextSlide = this.getElementPosition(‘+’);<\/p>\n

this.fadeIn(nextSlide);<\/p>\n

this.circles[ this.counter ].addClass(‘active’);<\/p>\n

}.bind(this));<\/p>\n

},<\/p>\n

prevElement: function() {<\/p>\n

this.prev.addEvent(‘click’, function( event ) {<\/p>\n

this.fadeOut(this.elements[this.counter]);<\/p>\n

this.circles[ this.counter ].removeClass(‘active’);<\/p>\n

nextSlide = this.getElementPosition(‘-‘);<\/p>\n

this.fadeIn(nextSlide);<\/p>\n

this.circles[ this.counter ].addClass(‘active’);<\/p>\n

}.bind(this));<\/p>\n

}
\n[\/code]<\/p>\n

Sostanzialmente in entrambi i casi andremo a spostare la classe active dal pallino attuale a quello successivo alla transizione di slide.<\/p>\n

Ora andiamo a definire il metodo che ci servir\u00e0 per creare i pallini di navigazione<\/strong> in base al numero di slide che abbiamo nella nostra lista.<\/p>\n

[code type=”javascript”]
\ncreateCircles: function() {<\/p>\n

this.navi = new Element(‘div’, {<\/p>\n

‘class’: ‘navi’<\/p>\n

});<\/p>\n

this.navi.inject(document.getElement(‘.nivo-slider’));<\/p>\n

i = 0;<\/p>\n

for ( i = 0; i < this.nEle; i++ ) {\n\n var opts = {\n\n href: 'javascript:void(0)',\n\n rel: i\n\n };\n\n if ( i == 0 ) {\n\n opts['class'] = 'active';\n\n }\n\n var circle = new Element('a', opts);\n\n circle.inject(this.navi);\n\n this.circles.push(circle);\n\n };\n\n}\n[\/code]\n\nInnanzitutto inseriremo un div contenente i pallini, creandolo con Element() di Mootools.\n\nEseguiremo un semplice for per ogni elemento presente nella lista, e per ognuno di questi andremo a inserire con una .inject() un elemento a html sempre utilizzando Element() di Mootools, alla quale passeremo una variabile contenente le opzioni che ci serviranno, ovvero l\u2019attributo href \u2018javascript:void(0)\u2019 e un attributo rel incrementante che verr\u00e0 utilizzato per ricavare la posizione dell\u2019elemento slide al momento del click su uno dei pallini.\n\nAssegneremo al primo pallino la classe active e come ultima operazione, creeremo un array contenente tutti i pallini tramite una operazione di .push().\n\nDefiniamo ora il metodo nextCircle(). Questo metodo sar\u00e0 colui che ci permetter\u00e0 di eseguire una transizione di slide dall\u2019elemento attuale all\u2019elemento target sul quale abbiamo cliccato.\n\n[code type=\"javascript\"]\nnextCircle: function() {\n\n document.getElements('.navi a').addEvent('click', function( event ) {\n\n this.fadeOut(this.elements[this.counter]);\n\n this.circles[ this.counter ].removeClass('active');\n\n this.counter = parseInt(event.target.rel) ;\n\n this.fadeIn(this.elements[this.counter]);\n\n this.circles[ this.counter ].addClass('active');\n\n }.bind(this));\n\n}\n[\/code]\n\nIl metodo \u00e8 molto simile a nextElement e prevElement precedentemente definiti. La differenza \u00e8 che in questo metodo non verr\u00e0 richiamato getElementPosition ma utilizzeremo l\u2019attributo rel del pallino cliccato per andare a ricavarci la posizione della slide successiva. Per far ci\u00f2 faremo un parseInt() del valore di rel e lo assegneremo a this.counter.\n\nAll\u2019interno di questo metodo, inoltre, gestiremo anche lo spostamento della classe active dal pallino precedente a quello successivo.\n\nUltima redifinizione sar\u00e0 quella del metodo play(), al quale applicheremo l\u2019inizializzazione di altri due metodi.\n\n[code type=\"javascript\"]\nplay: function() {\n\n this.createCircles();\n\n this.nextElement();\n\n this.prevElement();\n\n this.nextCircle();\n\n}\n[\/code]\n\nPasso finale, l\u2019instanza della classe e il richiamo del metodo play()\n\n[code type=\"javascript\"]\n var navigator = new Navigator( document.getElement('.nivo'), document.getElement('.next'), document.getElement('.prev'));\n\n navigator.play();\n[\/code]\n\nA questo link<\/a>, come sempre, la possibilit\u00e0 di visualizzare una demo creata da me su jsfiddle.<\/p>\n","protected":false},"excerpt":{"rendered":"

Per continuare il nostro cammino con la OOP, ho deciso di mostrarvi un esempio pratico e di facile comprensione dell\u2019ereditariet\u00e0 delle classi<\/strong>. Riprender\u00f2 lo slider Nivo<\/strong> precedentemente realizzato sfruttando le classi per definire due tipologie di slider.<\/p>\n","protected":false},"author":4,"featured_media":13446,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[108],"tags":[96,86,279,280],"class_list":["post-13417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo","tag-javascript","tag-mootools","tag-slider","tag-slideshow"],"yoast_head":"\n\u2022 Slider Nivo con Mootools ed ereditariet\u00e0 oggetti - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Slider Nivo con Mootools ed ereditariet\u00e0 oggetti. 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\/sviluppo\/slider-nivo-mootools-oggetti\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Slider Nivo con Mootools ed ereditariet\u00e0 oggetti - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Slider Nivo con Mootools ed ereditariet\u00e0 oggetti. 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\/sviluppo\/slider-nivo-mootools-oggetti\/\" \/>\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-03-19T15:04:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:42:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/03\/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\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Slider Nivo con Mootools ed ereditariet\u00e0 oggetti\",\"datePublished\":\"2013-03-19T15:04:06+00:00\",\"dateModified\":\"2023-02-27T14:42:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/\"},\"wordCount\":1437,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/mootools.jpg\",\"keywords\":[\"javascript\",\"mootools\",\"slider\",\"slideshow\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/\",\"name\":\"\u2022 Slider Nivo con Mootools ed ereditariet\u00e0 oggetti - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/mootools.jpg\",\"datePublished\":\"2013-03-19T15:04:06+00:00\",\"dateModified\":\"2023-02-27T14:42:24+00:00\",\"description\":\"Leggi dal blog: Slider Nivo con Mootools ed ereditariet\u00e0 oggetti. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/mootools.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/mootools.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-nivo-mootools-oggetti\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slider Nivo con Mootools ed ereditariet\u00e0 oggetti\"}]},{\"@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 Slider Nivo con Mootools ed ereditariet\u00e0 oggetti - Artera","description":"Leggi dal blog: Slider Nivo con Mootools ed ereditariet\u00e0 oggetti. 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\/sviluppo\/slider-nivo-mootools-oggetti\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Slider Nivo con Mootools ed ereditariet\u00e0 oggetti - Artera","og_description":"Leggi dal blog: Slider Nivo con Mootools ed ereditariet\u00e0 oggetti. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2013-03-19T15:04:06+00:00","article_modified_time":"2023-02-27T14:42:24+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/03\/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\/sviluppo\/slider-nivo-mootools-oggetti\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Slider Nivo con Mootools ed ereditariet\u00e0 oggetti","datePublished":"2013-03-19T15:04:06+00:00","dateModified":"2023-02-27T14:42:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/"},"wordCount":1437,"commentCount":0,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/03\/mootools.jpg","keywords":["javascript","mootools","slider","slideshow"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/","name":"\u2022 Slider Nivo con Mootools ed ereditariet\u00e0 oggetti - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/03\/mootools.jpg","datePublished":"2013-03-19T15:04:06+00:00","dateModified":"2023-02-27T14:42:24+00:00","description":"Leggi dal blog: Slider Nivo con Mootools ed ereditariet\u00e0 oggetti. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/03\/mootools.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/03\/mootools.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-nivo-mootools-oggetti\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Slider Nivo con Mootools ed ereditariet\u00e0 oggetti"}]},{"@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\/13417","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=13417"}],"version-history":[{"count":1,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/13417\/revisions"}],"predecessor-version":[{"id":234075,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/13417\/revisions\/234075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/13446"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=13417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=13417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=13417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}