{"id":279,"date":"2012-06-19T11:54:28","date_gmt":"2012-06-19T09:54:28","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/esempio-di-cv-responsive\/"},"modified":"2012-06-19T11:54:28","modified_gmt":"2012-06-19T09:54:28","slug":"esempio-di-cv-responsive","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/esempio-di-cv-responsive\/","title":{"rendered":"Un esempio di CV responsive"},"content":{"rendered":"<div class=\"paragrafo\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/06\/n54bweb.png\" border=\"0\" align=\"left\" \/>\u00c8 semplice trovare un lavoro. Tutto ci\u00f2 di cui avete bisogno quando cercate un lavoro \u00e8 il vostro curriculum vitae in formato <code>.pdf<\/code>. Creare un semplice r\u00e9sum\u00e9 (CV) in HTML5\/CSS3 che si adatti bene alle varie dimensioni della viewport \u00e8 un esercizio futile.<\/p>\n<p>Tutte menzogne! Ecco quattro ragioni per cui \u00e8 un&#8217;ottima idea creare il proprio CV in HTML:<\/p>\n<ol>\n<li>I CV statici diventano presto obsoleti. Un unico URL assicura al recruiter o all&#8217;agenzia che il vostro r\u00e9sum\u00e9 sia sempre aggiornato.<\/li>\n<li>Un potenziale datore di lavoro potrebbe guardare il vostro CV su uno smartphone. Legare i nostri CV al formato <code>.pdf<\/code> fuori moda. Volete davvero che sia un rigido <code>.pdf<\/code> non responsive a rappresentarvi?<\/li>\n<li>Modificare i files <code>.pdf<\/code> pu\u00f2 essere un&#8217;esperienza dolorosa.<\/li>\n<li>Un CV in formato HTML fai-da-te potrebbe mostrare ai potenziali datori di lavoro quanto vi piaccia quel che fate, il che non \u00e8 mai un male.<\/li>\n<\/ol>\n<p>Diamo un&#8217;occhiata ai requisiti per il nostro <a href=\"CV-responsive\/demo.html\">CV responsive<\/a>.<\/p>\n<ul>\n<li>Deve essere semplice da mantenere.<\/li>\n<li>Deve apparire elegante.<\/li>\n<li>Deve adattarsi bene ai device pi\u00f9 piccoli.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Deve essere semplice da mantenere<\/h2>\n<p>Valutare la manutenibilit\u00e0 di un documento si riduce a questo: <em>quanto efficientemente possiamo individuare e aggiornare le varie parti del documento?<\/em> Il modo pi\u00f9 semplice per ottenere facilit\u00e0 di mantenimento \u00e8 quello di creare un markup minimale e chiaro. Quindi, questo \u00e8 esattamente quel che faremo.<\/p>\n<p>Esaminando il codice sorgente non vedrete nulla di sconvolgente: do un semplice <code>header<\/code>, abbiamo impostato due colonne e ciascuna colonna ospita diversi elementi <code>article<\/code>. Il nostro markup \u00e8 completo in poche righe di HTML.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Deve apparire elegante<\/h2>\n<p>Il vostro CV deve apparire meraviglioso come lo siete voi, cos\u00ec chiamiamo in aiuto la cavalleria <code>CSS<\/code>. Usando l&#8217;approccio mobile-first, definiamo delle regole responsive per le viewport pi\u00f9 piccole (con larghezza inferiore ai 520px). Perch\u00e9 ho scelto 520 pixel come media query del <em>punto di rottura<\/em>? Questo design in particolare appare un po&#8217; troppo condensato a dimensioni pi\u00f9 piccole di 520px. Il numero \u00e8 totalmente arbitrario e specifico per questo design.<\/p>\n<p>Un po&#8217; di stile non guasta, cos\u00ec ho aggiunto una semplice transition <code>CSS<\/code> verso la fine della nostra media query, la quale aggiunge un tocco gradevole nel supportare i browser. I browser che non supportano le transitions le ignoreranno. Allargate il vostro browser webkit da piccolo (meno di 520px) a grande per vedere la transition.<\/p>\n<pre><code>.date-ranges {\n\t\twidth: 15.4639%;\n    <strong>transition:all .3s ease;\n    -o-transition:all .3s ease; \n    -moz-transition:all .3s ease;\n    -webkit-transition:all .3s ease;<\/strong>    \n}<\/code><\/pre>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Deve adattarsi bene ai device pi\u00f9 piccoli<\/h2>\n<p>Ridimensionate la <a href=\"CV-responsive\/demo.html\">demo<\/a> e fate tutti i test che volete: il nostro design \u00e8 mobile-friendly ma conserva anche il suo bell&#8217;aspetto.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Dove posso usarlo?<\/h2>\n<p>Se avete spazio su un server, potete metterci il vostro r\u00e9sum\u00e9, cos\u00ec che potete dare il vostro url sempre aggiornato a un recruiter o a un&#8217;agenzia. Gli utenti di <a href=\"http:\/\/www.linkedin.com\/\">LinkedIn<\/a> lo sanno: mentre scrivo, non c&#8217;\u00e8 alcun campo nel profilo utente per aggiungere un r\u00e9sum\u00e9 o un URL a un CV. PEr ora, siamo fermi al vecchio caricamento del documento. Tristemente, questa \u00e8 la situazione attuale su molti altri siti di job hunting ed \u00e8 esattamente per questo motivo che ho scritto questo articolo, per cambiare l&#8217;aria stagnante che stiamo respirando.<\/p>\n<p>Come molti veterani brizzolati del lavoro sanno bene, un forte r\u00e9sum\u00e9 e un colloquio quasi perfetto possono <em>ancora<\/em> lasciarvi senza il lavoro dei vostri sogni. La competizione \u00e8 feroce e non diminuisce mai, ma trovare nuovi modi per distinguerci nell&#8217;attuale difficile economia \u00e8 vitale per la sopravvivenza di noi sviluppatori.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I veterani brizzolati del job hunting sanno fin troppo bene che un brillante curriculum vitae e un colloquio praticamente perfetto potrebbero ancora lasciarvi senza il lavoro dei vostri sogni. La concorrenza \u00e8 feroce e non finisce mai. Trovare nuovi modi per distinguersi nell&#8217;implacabile economia di oggi \u00e8 vitale per la sopravvivenza di noi designer\/developer. Fortunatamente, il maghetto degli standard web nonch\u00e9 mobile web developer Andrew Hoffman ha trovato un modo dandy per differenziarci e che tra l&#8217;altro \u00e8 perfetto per i lettori di citeA List Apart\/cite. Vediamo come creare un curriculum semplice in HTML5\/CSS3 che si adatti bene alle varie dimensioni della viewport, che sia semplice da aggiornare e mantenere e che non diventi mai obsoleto.<\/p>\n","protected":false},"author":818,"featured_media":7000663,"comment_status":"open","ping_status":"open","template":"","categories":[244,247,272,273,69,274],"tags":[],"coauthors":[423],"class_list":["post-279","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-html","category-layout-and-grids","category-mobile-multidevice","category-numero-54-19-giugno-2012","category-responsive-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000663"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=279"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}