{"id":4415,"date":"2010-09-10T17:28:51","date_gmt":"2010-09-10T15:28:51","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=4415"},"modified":"2023-02-27T14:55:35","modified_gmt":"2023-02-27T14:55:35","slug":"una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/","title":{"rendered":"Una gallery fotografica con Mootools e CSS3 – Parte II"},"content":{"rendered":"

\"mootools\"Terminate ormai le vacanze ci accingiamo a tornare in modalit\u00e0 Autumn<\/em> per riprendere tutte le attivit\u00e0 ordinarie che ci accompagnano durante il nostro anno lavorativo. Cos\u00ec, per dare un po’ di colore alle giornate<\/strong> che cominciano a diventare grigie continuiamo ad analizzare la nostra gallery fotografica realizzata con Mootools e CSS3<\/a>.<\/p>\n

Ci eravamo lasciati proponendo e descrivendo la soluzione alla richiesta di realizzazione di una galleria fotografica alternativa<\/strong> alla classica lista fissa di immagini.<\/p>\n

La struttura HTML<\/h3>\n

Per il tag wrapper della gallery ho deciso di utilizzare un generico DIV<\/strong> poich\u00e8 non siamo in un contesto definito, ma stiamo operando una realizzazione a se stante. In caso la gallery fosse riferita ad un articolo, o comunque fosse stata un contenuto correlato, avremmo potuto utilizzare il tag HTML5 <aside><\/a> gi\u00e0 analizzato qualche mese fa.<\/p>\n

La struttura HTML della gallery \u00e8 molto semplice:<\/p>\n

[html]
\n<div id="galleryWrapper">
\n\t<ul class="gallery clearfix">
\n\t\t<li><a href="#"><img src="images\/1.jpg" alt="" \/><\/a><\/li>
\n\t\t<li><a href="#"><img src="images\/2.jpg" alt="" \/><\/a><\/li>
\n\t\t<li><a href="#"><img src="images\/3.jpg" alt="" \/><\/a><\/li>
\n\t\t<li><a href="#"><img src="images\/4.jpg" alt="" \/><\/a><\/li>
\n\t\t<li><a href="#"><img src="images\/5.jpg" alt="" \/><\/a><\/li>
\n\t\t<li><a href="#"><img src="images\/6.jpg" alt="" \/><\/a><\/li>
\n …
\n\t<\/ul>
\n<\/div>
\n[\/html]<\/p>\n

All’interno del div che fa da wrapper generale della galleria fotografica abbiamo un elenco UL<\/strong> che contiene, a sua volta, un LI<\/strong> per ogni immagine.<\/p>\n

CSS<\/h3>\n

L’importanza del CSS nello sviluppo di questo script non \u00e8 primaria, ma voglio comunque porre l’attenzione sulle propriet\u00e0 che ho applicato per la gestione dell’hover sull’immagine. Per proporre un’animazione anche sull’hover per l’immagine ho deciso di utilizzare la propriet\u00e0 CSS3 transition per gestire\u00a0 animazioni semplici senza l’utilizzazione di Flash o Javascript<\/a>.<\/p>\n

[css]
\n.gallery a{
\n […]
\n\t-webkit-transition-property: margin, width, height;
\n\t-webkit-transition-duration: 0.2s;
\n\t-webkit-transition-timing-function: ease-out;
\n}
\n.gallery a:hover{
\n\tmargin:-15px 5px 5px -15px;
\n\twidth:130px;
\n\theight:130px;
\n […]
\n}
\n[\/css]<\/p>\n

Con queste regole vogliamo, per l’hover sull’immagine, predisporre lo spostamento e il relativo ridimensionamento dell’immagine. Chiaramente, l’animazione verr\u00e0 visualizzata solamente su Webkit; sugli altri browser verr\u00e0 comunque visualizzato l’effetto desiderato, ma senza animazione fluida.<\/p>\n

Javascript<\/h3>\n

Dopo aver analizzato nel mio post precedente il funzionamento tecnico dell’animazione desiderata<\/a> possiamo mettere ora le mani in pasta<\/em> ed operarne la realizzazione.<\/p>\n

Nella prima parte della classe Gallery<\/em> ho effettuato le operazioni di assegnazione delle variabili e tra queste faccio menzione del calcolo dell’altezza dello spazio di tolleranza rispetto al punto centrale del box wrapper nel quale lo spostamento non avviene:<\/p>\n

[javascript]
\n\t\tthis.tollerance = parseInt((this.wrapperHeight\/2)*0.1);
\n[\/javascript]<\/p>\n

Chiaramente this.wrapperHeight<\/em> \u00e8 l’altezza del box gallery.<\/p>\n

Il fulcro vero e proprio della classe sono i metodi move<\/em> e mouseMove<\/em>:<\/p>\n

[javascript]
\n\tmouseMove: function(e){
\n\t\tthis.mouseIn = true;
\n\t\tthis.mouseY = e.client.y – this.wrapperTop;
\n\t\tif (!this.mouseMoving) {
\n\t\t\tthis.mouseMoving = true;
\n\t\t\tthis.move();
\n\t\t}
\n\t},
\n\tmove: function(){
\n\t\tif ((this.mouseIn)) {
\n\t\t\tvar coordPoint = Math.abs(this.middle-this.mouseY);
\n\t\t\tif (coordPoint>this.tollerance) {
\n\t\t\t\tvar moveY = (coordPoint*this.options.yMove)\/this.middle;
\n\t\t\t\tif (this.mouseY>this.middle) moveY = -moveY;<\/p>\n

\t\t\t\tmoveY = this.element.getStyle(‘margin-top’).toInt()+moveY;<\/p>\n

\t\t\t\tif (moveY>0) moveY=0;
\n\t\t\t\tif (Math.abs(moveY)>=this.elementHeight-this.wrapperHeight) moveY = this.wrapperHeight-this.elementHeight-10;<\/p>\n

\t\t\t\tthis.tween.start(moveY);
\n\t\t\t} else this.mouseMoving = false;
\n\t\t}
\n\t}
\n[\/javascript]<\/p>\n

Nel metodo mouseMove<\/em> lo script cattura la posizione del mouse all’interno del box e in move<\/em>, invece, calcola, in base a questa i parametri per il movimento della gallery.<\/p>\n

Ma vediamo subito l’esempio completo al seguente link, in modo da poterne subito analizzare il vero funzionamento: http:\/\/jsfiddle.net\/bGaDG\/<\/p>\n

Concludendo<\/h3>\n

La gallery realizzata \u00e8 sicuramente una soluzione elegante e di impatto che per\u00f2 ha alcuni forti limiti per la pubblicazione su web. Chiaramente, la soluzione sviluppata non \u00e8 sufficientemente adeguata, a livello di usabilit\u00e0<\/a>, per un sito web all’avanguardia<\/strong>. Sarebbe necessario un indicatore per far intuire, all’utente, che per muoversi all’interno della gallery bisogna spostare il proprio mouse; sarebbe anche necessario un indicatore del livello di scorrimento<\/strong> della gallery: una scrollbar che, magari, con il trascinamento sia anche un metodo alternativo alla navigazione con il puntatore del mouse.<\/p>\n

Questi sarebbero alcuni degli improvements<\/em> necessari per avere una gallery completamente ricca e all’avanguardia. In ogni caso, in questi articoli ho voluto concentrarmi sulla realizzazione tecnica dello script, lasciando da parte, magari per qualche prossimo post le migliorie di User Experience<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

\"mootools\"Terminate ormai le vacanze ci accingiamo a tornare in modalit\u00e0 Autumn<\/em> per riprendere tutte le attivit\u00e0 ordinarie che ci accompagnano durante il nostro anno lavorativo. Cos\u00ec, per dare un po’ di colore alle giornate<\/strong> che cominciano a diventare grigie continuiamo ad analizzare la nostra gallery fotografica realizzata con Mootools e CSS3<\/a>.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[69,180,96,86],"class_list":["post-4415","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-css3","tag-gallery-fotografica","tag-javascript","tag-mootools"],"yoast_head":"\n\u2022 Una gallery fotografica con Mootools e CSS3 - Parte II - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte II. 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\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Una gallery fotografica con Mootools e CSS3 - Parte II - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte II. 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\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/\" \/>\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=\"2010-09-10T15:28:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:55:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/mootools.png\" \/>\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=\"4 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\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Una gallery fotografica con Mootools e CSS3 – Parte II\",\"datePublished\":\"2010-09-10T15:28:51+00:00\",\"dateModified\":\"2023-02-27T14:55:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/\"},\"wordCount\":846,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/mootools.png\",\"keywords\":[\"CSS3\",\"gallery fotografica\",\"javascript\",\"mootools\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/\",\"name\":\"\u2022 Una gallery fotografica con Mootools e CSS3 - Parte II - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/mootools.png\",\"datePublished\":\"2010-09-10T15:28:51+00:00\",\"dateModified\":\"2023-02-27T14:55:35+00:00\",\"description\":\"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte II. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/mootools.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/mootools.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Una gallery fotografica con Mootools e CSS3 – Parte II\"}]},{\"@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 Una gallery fotografica con Mootools e CSS3 - Parte II - Artera","description":"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte II. 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\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Una gallery fotografica con Mootools e CSS3 - Parte II - Artera","og_description":"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte II. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-09-10T15:28:51+00:00","article_modified_time":"2023-02-27T14:55:35+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/mootools.png","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Una gallery fotografica con Mootools e CSS3 – Parte II","datePublished":"2010-09-10T15:28:51+00:00","dateModified":"2023-02-27T14:55:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/"},"wordCount":846,"commentCount":2,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/mootools.png","keywords":["CSS3","gallery fotografica","javascript","mootools"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/","url":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/","name":"\u2022 Una gallery fotografica con Mootools e CSS3 - Parte II - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/mootools.png","datePublished":"2010-09-10T15:28:51+00:00","dateModified":"2023-02-27T14:55:35+00:00","description":"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte II. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/mootools.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/mootools.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Una gallery fotografica con Mootools e CSS3 – Parte II"}]},{"@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\/4415","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=4415"}],"version-history":[{"count":2,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/4415\/revisions"}],"predecessor-version":[{"id":217878,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/4415\/revisions\/217878"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=4415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=4415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=4415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}