{"id":4321,"date":"2010-08-27T15:44:27","date_gmt":"2010-08-27T13:44:27","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=4321"},"modified":"2023-02-27T14:55:43","modified_gmt":"2023-02-27T14:55:43","slug":"una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/","title":{"rendered":"Una gallery fotografica con Mootools e CSS3 – Parte I"},"content":{"rendered":"

\"Gallery<\/a>Nonostante l’indubbia importanza che le scrollbar<\/strong> hanno a livello di user experience<\/strong>, ultimamente mi \u00e8 capitato di sentirmi frustrato a causa di alcune gallery fotografiche<\/strong> che offrono una scadente gestione dello scorrimento tra gli elementi. Chiaramente, considerare negativo l’utilizzo delle scrollbar sarebbe un errore madornale<\/strong>. Anzi, penso che le barre di scorrimento rimarranno sempre necessarie sul web. Ecco, dunque lo spunto di riflessione che ho considerato: perch\u00e8 non affiancare alle scrollbar altri metodi di scorrimento per una lista di elementi<\/em>?<\/p>\n

Il problema<\/h3>\n

Il caso che voglio analizzare ed offrire una soluzione \u00e8 la tipica gallery fotografica allegata ad un contenuto web<\/strong>. Si tratta di una galleria che contiene molti elementi che semanticamente sono collegati al testo della pagina visualizzata. Non \u00e8 dunque una gallery a se stante, ma un contenuto correlato.<\/p>\n

Chiaramente \u00e8 necessario riservare uno spazio che probabilmente non sar\u00e0 eccessivamente ampio, ma che, invece, comporter\u00e0 una porzione quadrata, molto limitata. In una situazione classica il box che contiene la gallery sar\u00e0 provvisto di una scrollbar.<\/p>\n

Noi per\u00f2 vogliamo offrire un metodo di scorrimento diverso per le immagini, una soluzione elegante, ma al contempo semplice ed intuitiva.<\/p>\n

Alcune soluzioni<\/h3>\n

Discutendo con Massimiliano<\/a><\/em> di queste mie impressioni abbiamo considerato alcune eventualit\u00e0 dettate dai recenti trend di sviluppo e dalla nostra esperienza in ambito web development<\/strong>.<\/p>\n

    \n
  1. Cliccando sul box della gallery e, mantenendo premuto il tasto del mouse, muovere il puntatore in verticale potremmo emulare il sistema di scorrimento che utilizziamo sui nostri smartphone<\/strong>. In questo modo per\u00f2 si corre il rischio di, per differenziare il click sulle immagini e il trascinamento, di non avere il risultato ottimale in termini di usabilit\u00e0. Inoltre, in ogni caso, \u00e8 necessario cliccare sul box e trascinare…quindi cosa cambia rispetto ad una scrollbar? Si tratterebbe per\u00f2 di un interessante case study javascript che potrei considerare per un mio post futuro.<\/li>\n
  2. La nostra soluzione: utilizzare lo spostamento del mouse per muovere la gallery<\/em>. In base alla posizione del mouse la gallery subisce uno scroll pi\u00f9 o meno veloce<\/strong> in base alla distanza del puntatore rispetto al centro del box.<\/li>\n<\/ol>\n

    Consideriamo che in questo post voglio concentrarmi maggiormente sulla componente tecnica di realizzazione pi\u00f9 che di usabilit\u00e0 (senza precludere modifiche in prossimi post), tanto che non inserir\u00f2 neanche la scrollbar, in contrasto con quanto analizzato sopra: un sistema di scroll secondo la visualizzazione classica<\/strong> (almeno le due frecce verticali) deve essere previsto.<\/p>\n

    Analisi della soluzione<\/h3>\n

    In primo luogo lo stato hover per le immagini della gallery. Voglio sfruttare un effetto transition CSS3 come descritto in uno dei miei ultimi post<\/a> in modo da poter ingrandire di poco l’immagine sulla quale viene posizionato il mouse.<\/p>\n

    Per il funzionamento generale della gallery possiamo considerare lo schema rappresentato nella seguente immagine:<\/p>\n

    \"La<\/a>Per il movimento utilizzato dallo scorrimento della gallery dobbiamo immaginare una linea trasparente che passa per la met\u00e0 dell’altezza della galleria. Man mano che il puntatore si allontana da questa linea la velocit\u00e0 di scorrimento aumenta<\/strong>, chiaramente in entrambi i sensi.<\/p>\n

    Per effettuare lo spostamento, a livello di struttura HTML\/CSS<\/strong> andremo a posizionare un contenitore che includa tutte le immagini e che, essendo all’interno di un altro wrapper che abbia overflow:hidden, possa visualizzare solamente alcune immagini per volta. Andando poi a modificare il valore del margin-top del contenitore diretto delle immagini potremo visualizzare lo scorrimento delle immagini.<\/p>\n

    Per l’animazione che gestisce la modifica vera e propria del margin-top come appena descritto, ho deciso di utilizzare il framework Js preferito da noi di Artera: Mootools<\/a>. Andando ad utilizzare la Classe Fx.Tween<\/a> possiamo gestire la modifica del margin-top in modo fluido e pulito<\/strong>.<\/p>\n

    To be continued…<\/h3>\n

    Non perdere il mio prossimo post per analizzare come effettivamente andremo a realizzare tecnicamente la galleria. Vedremo come creare la struttura HTML\/CSS e lo script Javascript per lo scorrimento delle immagini.<\/p>\n","protected":false},"excerpt":{"rendered":"

    \"Gallery<\/a>Nonostante l’indubbia importanza che le scrollbar<\/strong> hanno a livello di user experience<\/strong>, ultimamente mi \u00e8 capitato di sentirmi frustrato a causa di alcune gallery fotografiche<\/strong> che offrono una scadente gestione dello scorrimento tra gli elementi. Chiaramente, considerare negativo l’utilizzo delle scrollbar sarebbe un errore madornale<\/strong>. Anzi, penso che le barre di scorrimento rimarranno sempre necessarie sul web. Ecco, dunque lo spunto di riflessione che ho considerato: perch\u00e8 non affiancare alle scrollbar altri metodi di scorrimento per una lista di elementi<\/em>?<\/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-4321","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 I - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte I. 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-1\/\" \/>\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 I - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte I. 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-1\/\" \/>\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-08-27T13:44:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:55:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/08\/gallery.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=\"3 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-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Una gallery fotografica con Mootools e CSS3 – Parte I\",\"datePublished\":\"2010-08-27T13:44:27+00:00\",\"dateModified\":\"2023-02-27T14:55:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/\"},\"wordCount\":642,\"commentCount\":1,\"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-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/gallery.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-1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/\",\"name\":\"\u2022 Una gallery fotografica con Mootools e CSS3 - Parte I - 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-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/gallery.png\",\"datePublished\":\"2010-08-27T13:44:27+00:00\",\"dateModified\":\"2023-02-27T14:55:43+00:00\",\"description\":\"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte I. 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-1\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/gallery.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/gallery.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\\\/#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 I\"}]},{\"@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 I - Artera","description":"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte I. 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-1\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Una gallery fotografica con Mootools e CSS3 - Parte I - Artera","og_description":"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte I. 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-1\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-08-27T13:44:27+00:00","article_modified_time":"2023-02-27T14:55:43+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/08\/gallery.png","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"3 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-1\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Una gallery fotografica con Mootools e CSS3 – Parte I","datePublished":"2010-08-27T13:44:27+00:00","dateModified":"2023-02-27T14:55:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/"},"wordCount":642,"commentCount":1,"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-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/08\/gallery.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-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/","url":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/","name":"\u2022 Una gallery fotografica con Mootools e CSS3 - Parte I - 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-1\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/08\/gallery.png","datePublished":"2010-08-27T13:44:27+00:00","dateModified":"2023-02-27T14:55:43+00:00","description":"Leggi dal blog: Una gallery fotografica con Mootools e CSS3 - Parte I. 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-1\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/08\/gallery.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/08\/gallery.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/una-elegante-gallery-fotografica-con-mootools-e-css3-parte-1\/#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 I"}]},{"@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\/4321","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=4321"}],"version-history":[{"count":4,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/4321\/revisions"}],"predecessor-version":[{"id":216376,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/4321\/revisions\/216376"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=4321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=4321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=4321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}