{"id":5385,"date":"2010-11-17T19:03:18","date_gmt":"2010-11-17T18:03:18","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=5385"},"modified":"2023-02-27T14:53:24","modified_gmt":"2023-02-27T14:53:24","slug":"dalla-proposta-grafica-al-css-vestiamo-lheader","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/","title":{"rendered":"Dalla proposta grafica al CSS \u2013 Vestiamo l’header"},"content":{"rendered":"

\"photoshop_icon\"Ci siamo lasciati molto tempo fa con un articolo della serie riguardante la strada dalla proposta grafica alla pagina finita<\/a>. Eravamo arrivati a strutturare la pagina web completa senza immagini di sfondo applicate.<\/p>\n

Definiti gli elementi HTML, ora per\u00f2 dobbiamo vestirli. Come gi\u00e0 abbiamo visto si tratta di ritagliare con l’ausilio delle slices di Photoshop tutti gli elementi grafici da applicare alle porzioni della pagina tramite CSS. Oggi analizziamo la creazione dell’header che comprende un breve testo di introduzione e solo ed esclusivamente elementi grafici.<\/p>\n

Ora gli approcci alla “vestizione” possono essere di due tipi:<\/p>\n

Facciamo un po’ di patchwork<\/h3>\n

Per prima cosa possiamo creare un elemento grafico tramite lo sfondo del tag HTML definito nella struttura<\/strong>. Questo \u00e8 stato l’approccio classico nello sviluppo di una pagina web senza l’ausilio delle propriet\u00e0 CSS3<\/a> e che tuttora viene utilizzato per quegli elementi che hanno come sfondo una texture complessa o un elemento disegnato.<\/p>\n

Lo svantaggio <\/strong>di questo approccio \u00e8 il fatto di trovarsi spesso nella inevitabile situazione di dover inserire markup aggiuntivo<\/a> per ottenere certi effetti grafici ottimizzando allo stesso tempo gli elementi HTML.<\/p>\n

Un esempio. Se dovessi ricreare lo sfondo qui sotto solo con le immagini dovrei, nel caso pi\u00f9 semplice, tagliare l’intera immagine<\/strong>. In questo caso, se per qualsiasi motivo la pagina dovesse diventare fluida<\/a>, ovvero aumentare o diminuire la sua larghezza a secondo delle dimensioni del browser, la tecnica non sarebbe applicabile.<\/p>\n

\"es-1\"<\/p>\n

Nel secondo caso allora potrei dividere l’immagine in 3 pezzi<\/strong>, il blocco iniziale, con il bordo stondato, il blocco finale, con quell’effettino di luce e la parte centrale, con il pattern a righe. Ora il problema sta sul come applicarle all’HTML <\/strong>che \u00e8 un semplice H2 con all’interno uno span. Una soluzione potrebbe essere applicare lo sfondo a righe all’H2, il primo bordo stondato allo span ed il terzo elemento?<\/strong><\/p>\n

\"es-2\"
\n<\/strong><\/p>\n

Bh\u00e8 non mi resta che aggiungere un elemento HTML di appoggio<\/strong>, inutile ai fini del significato semantico per risolvere il problema (mai aggiungere un elemento inutile… perch\u00e8?… sarebbe male!). Fortunatamente possiamo risolverla <\/strong>oggi tramite l’ausilio di qualche propriet\u00e0 CSS3<\/p>\n

Invece ora disegnamo<\/h3>\n

L’approccio con i CSS3 \u00e8 molto pi\u00f9 semplice, con l’enorme svantaggio che ancora tutte le propriet\u00e0 non sono disponibili su tutti i browser. Chrome ad occhio mi sembra il pi\u00f9 avanzato nell’utilizzo delle nuove regole.<\/p>\n

Questo implica di dover scendere a dei compromessi sull’adattamento della visualizzazione di un elemento su vari browser e quindi mitigare il loro utilizzo ai soli aspetti grafici che non distruggono l’esperienza utente nel caso non fossero capiti dal browser (parole chiave per approfondimento sono progressive enhancemente<\/a> e graceful degradation). Gli esempi utilizzati sono stati testati in Firefox 3.6 e Chrome.<\/p>\n

Riprendendo la nostra barra possiamo risolvere quasi tutto senza l’utilizzo delle immagini usando solo propriet\u00e0 CSS.<\/p>\n

\"es-3\"<\/p>\n

Nel caso specifico andiamo ad usare dei background multipli<\/a> per inserire le immagini nello sfondo senza aggiungere markup<\/strong>, minimizzare le dimensioni delle immagini, <\/strong>in pi\u00f9 utilizzeremo una text.shadow per aggiungere l’ombra del testo inserito nell’header in modo dinamico<\/strong> (se cambia il testo, non dobbiamo fare nulla).<\/p>\n

Come \u00e8 subito visibile lo svantaggio \u00e8 quello di dover tradurre le regole <\/strong>nelle corrispettive regole di ogni browser almeno fino a quando esse non saranno approvate come standard CSS.<\/p>\n

.logo h2 {\n    \/* ... ometto parte non utile all'esempio *\/\n    border-bottom:1px solid #7c0000;\n    background-color:#b80000;\n    background-image:url(\"..\/images\/higlight.png\"), url(\"..\/images\/stripes.png\");\n    background-position: right, top left;\n    background-repeat: no-repeat, repeat;\n    -moz-border-radius-topleft:9px;\n    -webkit-border-top-left-radius:9px;\n    border-top-left-radius:9px;\n    -moz-border-radius-topright:9px;\n    -webkit-border-top-right-radius:9px;\n    border-top-left-radius:9px;\n}\n.logo h2 span {\n    \/* ... ometto parte non utile all'esempio *\/\n    background:url(\"..\/images\/gloss-top.png\") top left no-repeat;\n    text-shadow:1px 1px 0 #620000;\n}<\/pre>\n
Il secondo problema <\/strong>in questo caso \u00e8 come tradurre quello che vedo nel file PSD in una regola CSS. Questo lo vedremo nella prossima puntata analizzando le ombre del testo e le sfumature tramite CSS andando cos\u00ec a terminare i pulsanti di login e la barra nel footer.<\/p>\n
Ricordo di nuovo che non tutti i browser vedranno lo stesso risultato e che sta a noi compensare lo scarsa implementazione dei browser con scelte magari meno tecnologiche ma disponibili a tutti.<\/p>\n
Per concludere, potete scaricare l’esempio completo, il PSD e godervi la nuova versione della pagina.<\/p>\n","protected":false},"excerpt":{"rendered":"
\"photoshop_icon\"Ci siamo lasciati molto tempo fa con un articolo<\/a> della serie riguardante la strada dalla proposta grafica alla pagina finita<\/a>. Eravamo arrivati a strutturare la pagina web completa senza immagini di sfondo applicate.
\nDefiniti gli elementi HTML, ora per\u00f2 dobbiamo vestirli: vediamo come.<\/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":[150,127,69,42,152,66],"class_list":["post-5385","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-photoshop","tag-css","tag-css3","tag-grafica-web","tag-proposta-grafica","tag-web-design"],"yoast_head":"\n\u2022 Dalla proposta grafica al CSS \u2013 Vestiamo l'header - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Vestiamo l'header. 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\/dalla-proposta-grafica-al-css-vestiamo-lheader\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Dalla proposta grafica al CSS \u2013 Vestiamo l'header - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Vestiamo l'header. 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\/dalla-proposta-grafica-al-css-vestiamo-lheader\/\" \/>\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-11-17T18:03:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:53:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg\" \/>\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\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Dalla proposta grafica al CSS \u2013 Vestiamo l’header\",\"datePublished\":\"2010-11-17T18:03:18+00:00\",\"dateModified\":\"2023-02-27T14:53:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/\"},\"wordCount\":648,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"keywords\":[\"Adobe Photoshop\",\"CSS\",\"CSS3\",\"grafica web\",\"proposta grafica\",\"web design\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/\",\"name\":\"\u2022 Dalla proposta grafica al CSS \u2013 Vestiamo l'header - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"datePublished\":\"2010-11-17T18:03:18+00:00\",\"dateModified\":\"2023-02-27T14:53:24+00:00\",\"description\":\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Vestiamo l'header. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-vestiamo-lheader\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dalla proposta grafica al CSS \u2013 Vestiamo l’header\"}]},{\"@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 Dalla proposta grafica al CSS \u2013 Vestiamo l'header - Artera","description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Vestiamo l'header. 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\/dalla-proposta-grafica-al-css-vestiamo-lheader\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Dalla proposta grafica al CSS \u2013 Vestiamo l'header - Artera","og_description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Vestiamo l'header. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-11-17T18:03:18+00:00","article_modified_time":"2023-02-27T14:53:24+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","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\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Dalla proposta grafica al CSS \u2013 Vestiamo l’header","datePublished":"2010-11-17T18:03:18+00:00","dateModified":"2023-02-27T14:53:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/"},"wordCount":648,"commentCount":0,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","keywords":["Adobe Photoshop","CSS","CSS3","grafica web","proposta grafica","web design"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/","url":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/","name":"\u2022 Dalla proposta grafica al CSS \u2013 Vestiamo l'header - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","datePublished":"2010-11-17T18:03:18+00:00","dateModified":"2023-02-27T14:53:24+00:00","description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Vestiamo l'header. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-vestiamo-lheader\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Dalla proposta grafica al CSS \u2013 Vestiamo l’header"}]},{"@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\/5385","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=5385"}],"version-history":[{"count":10,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/5385\/revisions"}],"predecessor-version":[{"id":217815,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/5385\/revisions\/217815"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=5385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=5385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=5385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}