{"id":3954,"date":"2010-08-10T18:25:38","date_gmt":"2010-08-10T16:25:38","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=3954"},"modified":"2023-02-27T14:56:17","modified_gmt":"2023-02-27T14:56:17","slug":"dalla-proposta-grafica-al-css-le-slices-di-photoshop","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/","title":{"rendered":"Dalla proposta grafica al CSS \u2013 Le slices di Photoshop"},"content":{"rendered":"

\"photoshop_icon\"Continuiamo nella strada che porta dalla proposta grafica alla pagina finita<\/a>. Lo scorso articolo abbiamo visto le propriet\u00e0 del testo di Photoshop e come convertirle in propriet\u00e0 del nostro foglio di stile.<\/p>\n

Oggi avanziamo ulteriormente dando forma ai vari elementi della pagina: nella seconda puntata <\/a>abbiamo creato la struttura HTML, oggi cominciamo a dare una forma <\/strong>a quella struttura. Il file PSD originale da cui \u00e8 tratto l\u2019articolo \u00e8 scaricabile attraverso questo link, mentre il materiale completo si trova qui.<\/p>\n

Strumenti di aiuto<\/h3>\n

Una piccola deviazione dell’argomento: abbiamo accennato a come seguire la griglia verticale della pagina con il line-height e con uno strumento di riferimento visivo (un’immagine di sfondo che ci aiuti a prendere le misure), riguardo a questo vorrei fermarmi un attimo.<\/p>\n

Non \u00e8 una tecnica che amo, ma per essere sicuri di stare rispettando le misure <\/strong>imposte dalla grafica, in particolar modo le distanze verticali, potrebbe essere utile inserire come sfondo <\/strong>della pagina HTML un’esportazione in formato JPG del PSD <\/strong>grafico originale. In questo modo avremo sempre sotto al naso l’immagine originale ad aiutarci con le misure del CSS.<\/p>\n

Il modo pi\u00f9 semplice, come abbiamo fatto nell’esempio riguardante la griglia verticale \u00e8 quello di inserire l’immagine come sfondo del body. Volendo potremmo invece usare un add-on di Firefox chiamato Pixel Perfect che semplicemente visualizza un overlay al sito con l’immagine JPG di cui parlavamo qui sopra.<\/p>\n

Pagina principale<\/h3>\n

In uno dei precedenti articoli abbiamo identificato nella struttura una colonna <\/a>che racchiude la maggior parte dei contenuti. Iniziamo misurando la larghezza di questo elemento <\/strong>in Photoshop con la solita tecnica <\/strong>(strumento selezione –M<\/strong>– , selezioniamo i pixel, leggiamo in info quanto \u00e8 la larghezza<\/strong>) e diamo lo stile alla colonna.<\/p>\n

Essendo una pagina molto semplice utilizzo l’elemento BODY come elemento principale della pagina dando come propriet\u00e0 width<\/em>, la larghezza della colonna (qui l’esempio finito dell’articolo).<\/p>\n

Il primo elemento che incontriamo nel body \u00e8 il logo<\/strong>. Nella mia struttura ho voluto mantenerlo come un’immagine <\/strong>seguita da un elemento di testo. Avrei potuto fare un’immagine enorme ma mi sarei perso la possibilit\u00e0 di indicizzare la frase legata al brand. Quindi dal mio PSD mi interesser\u00e0 esclusivamente estrarre la parte grafica sapendo che il testo rimarr\u00e0 in HTML <\/strong>e per questo motivo dovr\u00f2 escludere dal taglio la frase sotto di esso “Your motorbike routes”.<\/p>\n

Tagliare l’immagine<\/h3>\n

Photoshop ci da uno strumento portentoso per il taglio della grafica <\/strong>in immagine pi\u00f9 piccole. Questo strumento \u00e8 lo strumento Slice <\/em>(K<\/strong>). Selezionandolo appare l’icona di un taglierino<\/strong>. Disegnamo con questo strumento un rettangolo nel documento. Un’area rossa con delle maniglie appare sul documento<\/strong>.<\/p>\n

\"sliece-example\"<\/p>\n

Quest’area rossa \u00e8 l’area che verr\u00e0 utilizzata da Photoshop per creare un file contenente la porzione di documento che racchiude<\/strong>. Di quest’area possiamo definire immediatamente il nome del file <\/strong>che verr\u00e0 generato, le dimensioni <\/strong>e la posizione al pixel ed altre caratteristiche<\/strong>. Per farlo basta cliccare con lo strumento (K<\/strong>) 2 volte sulla slice appena disegnata e apparir\u00e0 una finestra editabile (vedi immagine).<\/p>\n

La comodit\u00e0 di questo strumento <\/strong>sta nel fatto che una volta definite le varie slice all’interno della pagina, con un click potremo esportare tutti i file <\/strong>che ci servono per la creazione del CSS. Sembra nulla, ma alla prima modifica della grafica baster\u00e0 riadattare la slice e soltanto risalvare<\/strong>: la pagina sar\u00e0 aggiornata in automatico.<\/p>\n

Definiamo l’area intorno al logo che racchiuda il nome del sito e la motocicletta. Notiamo subito che c’\u00e8 uno sfondo uniforme dietro al logo, ma noi siamo previdenti e decidiamo di esportare l’immagine con lo sfondo trasparente.<\/p>\n

Vediamo come. Per prima cosa nascondiamo temporaneamente <\/strong>il gruppo di livelli chiamati BG. Ora dietro lo sfondo tutto \u00e8 trasparente. Per salvare il file <\/strong>clicchiamo su File > Save for Web & Devices <\/em>(Ctrl+Shift+Alt+S<\/strong>, una combo strappadita). Si apre una finestra modale <\/strong>per il salvataggio.<\/p>\n

Selezioniamo dall’area di lavoro la slice <\/strong>del nostro logo. Nella colonna di destra si attiveranno alcune opzioni. E’ da qui che possiamo definire il formato e le caratteristiche dell’immagine da esportare<\/strong>. Scegliamo PNG 24 che supporta la trasparenza a 24bit e clicchiamo su Save <\/strong>se vogliamo esportare o su Done <\/strong>se abbiamo semplicemente finito di preparare la slice e la vogliamo salvare in seguito.<\/p>\n

\"saveforweb\"<\/p>\n

Cliccando su Save <\/strong>la finestra si chiude ed appare la finestra di salvataggio <\/strong>del vostro OS. Attenzione. Se nel file c’\u00e8 pi\u00f9 di una slice il nome inserito nel campo di testo viene ignorato <\/strong>ed \u00e8 utilizzato quello che avete definito nelle propriet\u00e0 della slices. Questa cosa mette in confusioni tutti quelli che visto iniziare ad usare questa utilit\u00e0.<\/p>\n

L’unica puntualizzazione qui la voglio fare sull’ultima opzione, “Slices”<\/strong>. Questa indica quali slices <\/strong>Photoshop deve salvare<\/strong>. Solitamente io salvo solo quelle selezionate, o solo quelle definite dall’utente<\/strong>. Infatti se avete notato, Photoshop crea delle slices di riempimento per tutta la pagina che, se non lavoriamo con le tabelle, non ci servono a nulla.<\/p>\n

Se salviamo, Photoshop crea una cartella images <\/strong>contenente le immagini che ora possiamo utilizzare nel CSS o HTML.<\/p>\n

Css senza immagini<\/h3>\n

Preparata l’immagine del logo per mostrare come tagliare ed avere le dimensioni da inserire nell’HTML, continuo con la creazione del CSS misurando e rimisurando tutti gli elementi <\/strong>fino ad avere un abbozzo molto simile alla pagina finale senza le immagini di sfondo che \u00e8 possibili vedere nell’esempio finito qui di seguito.<\/p>\n

La prossima volta, continuando con questa serie di articoli<\/a>, vedremo come scegliere le porzioni di immagini da tagliare e quando evitare l’utilizzo delle immagini convertendo gli stili di Photoshop in propriet\u00e0 CSS e finalmente le inseriremo all’interno del documento HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"

\"photoshop_icon\"Continuiamo nella strada che porta dalla proposta grafica alla pagina finita<\/a>. Lo scorso articolo abbiamo visto le propriet\u00e0 del testo<\/a> di Photoshop e come convertirle in propriet\u00e0 del nostro foglio di stile.<\/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,42,151,152,66],"class_list":["post-3954","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-photoshop","tag-grafica-web","tag-mockup","tag-proposta-grafica","tag-web-design"],"yoast_head":"\n\u2022 Dalla proposta grafica al CSS \u2013 Le slices di Photoshop - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Le slices di Photoshop. 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-le-slices-di-photoshop\/\" \/>\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 Le slices di Photoshop - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Le slices di Photoshop. 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-le-slices-di-photoshop\/\" \/>\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-10T16:25:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:56:17+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=\"5 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-le-slices-di-photoshop\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Dalla proposta grafica al CSS \u2013 Le slices di Photoshop\",\"datePublished\":\"2010-08-10T16:25:38+00:00\",\"dateModified\":\"2023-02-27T14:56:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/\"},\"wordCount\":947,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"keywords\":[\"Adobe Photoshop\",\"grafica web\",\"mockup\",\"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-le-slices-di-photoshop\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/\",\"name\":\"\u2022 Dalla proposta grafica al CSS \u2013 Le slices di Photoshop - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"datePublished\":\"2010-08-10T16:25:38+00:00\",\"dateModified\":\"2023-02-27T14:56:17+00:00\",\"description\":\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Le slices di Photoshop. 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-le-slices-di-photoshop\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\\\/#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-le-slices-di-photoshop\\\/#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 Le slices di Photoshop\"}]},{\"@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 Le slices di Photoshop - Artera","description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Le slices di Photoshop. 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-le-slices-di-photoshop\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Dalla proposta grafica al CSS \u2013 Le slices di Photoshop - Artera","og_description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Le slices di Photoshop. 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-le-slices-di-photoshop\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-08-10T16:25:38+00:00","article_modified_time":"2023-02-27T14:56:17+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":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Dalla proposta grafica al CSS \u2013 Le slices di Photoshop","datePublished":"2010-08-10T16:25:38+00:00","dateModified":"2023-02-27T14:56:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/"},"wordCount":947,"commentCount":5,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","keywords":["Adobe Photoshop","grafica web","mockup","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-le-slices-di-photoshop\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/","url":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/","name":"\u2022 Dalla proposta grafica al CSS \u2013 Le slices di Photoshop - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","datePublished":"2010-08-10T16:25:38+00:00","dateModified":"2023-02-27T14:56:17+00:00","description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Le slices di Photoshop. 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-le-slices-di-photoshop\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-le-slices-di-photoshop\/#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-le-slices-di-photoshop\/#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 Le slices di Photoshop"}]},{"@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\/3954","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=3954"}],"version-history":[{"count":10,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/3954\/revisions"}],"predecessor-version":[{"id":217661,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/3954\/revisions\/217661"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=3954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=3954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=3954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}