Diversi amici hanno visto il mio e-cv e mi hanno chiesto di spiegargli come realizzarlo, purtroppo si deve necessariamente lavorare un pò sul codice HTML, ma cercherò di semplificare il tutto nel limite del possibile.
La prima cosa che ho fatto è selezionare un bel template su themeforest, io per esempio ho acquistato Premium Layers. Una volta acquistato e scaricato il pacchetto zip tipo questo: themeforest-7880419-premium-layers-html-vcard-resume-template.zip
Una volta aperto l’archivio, trovete all’interno 3 directory: help, PSD e vcard, quella che ci interessa è vcard, entriamo in questa cartella ed apriamo il file index.html facendo apri con wordpad o con un editor html, ad esempio bluefish che è gratuito e molto leggero.
Parallelamente apriamo il file index.html cliccandoci due volte, così da aprirlo anche sul browser, per poter vedere il risultato delle nostre modifiche in tempo reale. Inizialmente quindi dovreste ritrovarvi in questa situazione, da una parte l’editor html con il codice e dall’altra il browser web con l’anteprima del risultato che stiamo per andare a cambiare:
A questo punto iniziamo le vere modifiche, partiamo dall’immagine del profilo che troviamo:
themeforest-7880419-premium-layers-html-vcard-resume-template/vcard/images/profile-avatar.png
Immaginiamo per un momento di essere Mark Zuckerberg e di voler creare il CV, prendiamo un’immagine carina e sovrascriviamola su profile-avatar.png:
A questo punto entriamo nel vivo del codice per modificare i contenuti, partiamo proprio dal Profile, quindi tutti i dati relativi al chi siamo. La cosa più semplice da fare per modificare il codice è copiare le scritte che vogliamo modificare e cercarle nel file index.html e sostituirle.
Ad esempio cercando “Robb Armstrong”, la prima occorrenza che troverete fa proprio riferimento a quella riga, chiaramente quando modificate il testo fate molta attenzione ai tag html, tutto ciò che vedete racchiuso tra < e > non toccatelo. Quindi per modificare la prima riga che sarà così:
<h2>Hello, I am <span>Robb Armstrong</span><br>Designer and Front-end Developer</h2>
ci basterà sostituirla in:
<h2>Ciao io sono <span>Mark Zuckerberg</span><br>Founder e CEO di Facebook</h2>
Andando avanti così fino al termine di questa sezione, dovremmo ritrovarci in una situazione simile:
Passando su Work, la questione si complica leggermente, prima di tutto dovremmo capire quante categorie di lavori vorremmo inserire nel nostro portfolio, inizialmente troveremo: All (quindi tutte insieme), Web Design, App Icons, iOS App UI e Illustration, mettiamo di volerne inserire solo 3 oltre All ovviamente, quello che dobbiamo fare è cercare “Illustration” sempre nel file index.html ed effettuare le seguenti modifiche:
- la prima occorrenza che troveremo è sicuramente questa:
- <li class=”filter” data-filter=”illustration”>Illustration</li>
- dato che non ne abbiamo più bisogno eliminiamo del tutto questa riga
- ora però dobbiamo cancellare tutti i lavori che facevano parte di quella categoria, quindi continuando la ricerca troveremo:
- <li class=”item col-md-4 illustration”>
- In questo caso non basta eliminare la riga, ma l’intera porzione di codice che lo riguarda cioè:
- <li class=”item col-md-4 illustration”>
<a title=”Sample 2″ href=”https://www.youtube.com/watch?v=L9szn1QQfas” data-lightbox-gallery=”gallery1″ class=”nivo-lbox”>
<div class=”folio-img”>
<img src=”images/projects/2.jpg” alt=”” class=”img-responsive”>
<div class=”overlay”>
<div class=”overlay-inner”>
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li> - così via anche per tutte le altre occorrenze relative a illustration
Terminata l’eliminazione della categoria aggiuntiva non ci resta che modificare quelle attuali, per esempio, vogliamo trasformare Web Design, App Icons, iOS App UI in Giocatore compulsivo, Cartone animato e Renziano.
Per farlo dovremo semplicemente sostituire tutte le occorrenze l’una con l’altra:
<li class=”filter” data-filter=”webdesign”>Web Design</li>
<li class=”filter” data-filter=”appicon”>App Icons</li>
<li class=”filter” data-filter=”iosappui”>iOS App UI</li>
Diventerà
<li class=”filter” data-filter=”giocatorecompulsivo”>Giocatore compulsivo</li>
<li class=”filter” data-filter=”cartoneanimato”>Cartone animato</li>
<li class=”filter” data-filter=”renziano”>Renziano</li>
Fatto questo dobbiamo capire quanti lavori inserire nel portfolio, io per semplicità ne inserirò 3 uno per ogni categoria.
Prima di farlo, ripuliamo un pò il codice di quello che non ci serve, partendo da qui:
<ul id=”portfolio”>
<li class=”item col-md-4 webdesign”>
<a title=”Example 1″ href=”images/projects/1-big.jpg” data-lightbox-gallery=”gallery1″ class=”nivo-lbox”>
<div class=”folio-img”>
<img src=”images/projects/1.jpg” alt=”” class=”img-responsive”>
<div class=”overlay”>
<div class=”overlay-inner”>
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
Lasciamo solo questo primo blocco da “<ul id=”portfolio”>” fino al primo “</li>” ed eliminiamo tutto fino alla riga prima della prima occorrenza di “</ul”> dovremo quindi ritrovarci:
<ul id=”portfolio”>
<li class=”item col-md-4 webdesign”>
<a title=”Example 1″ href=”images/projects/1-big.jpg” data-lightbox-gallery=”gallery1″ class=”nivo-lbox”>
<div class=”folio-img”>
<img src=”images/projects/1.jpg” alt=”” class=”img-responsive”>
<div class=”overlay”>
<div class=”overlay-inner”>
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li></ul>
Immaginate ogni blocco di <li class….> fino al </li> un lavoro del portfolio, dovendone inserire tre quindi devo copiare ed incollare il blocco altre due volte modificando il riferimento alla categoria webdesign che non esiste più e al nome dell’immagine che dovrà apparire, il title, il tag H4 ed il p essattamente così:
<ul id=”portfolio”>
<li class=”item col-md-4 giocatorecompulsivo“>
<a title=”Mi piace giocare ai videogame” href=”images/projects/1-big.jpg” data-lightbox-gallery=”gallery1″ class=”nivo-lbox”>
<div class=”folio-img”>
<img src=”images/projects/1.jpg” alt=”” class=”img-responsive”>
<div class=”overlay”>
<div class=”overlay-inner”>
<h4>VR Gaming</h4>
<p>VR Director</p>
</div>
</div>
</div>
</a>
</li><li class=”item col-md-4 cartoneanimato“>
<a title=”Appassionato di cartoni” href=”images/projects/2-big.jpg” data-lightbox-gallery=”gallery1″ class=”nivo-lbox”>
<div class=”folio-img”>
<img src=”images/projects/2.jpg” alt=”” class=”img-responsive”>
<div class=”overlay”>
<div class=”overlay-inner”>
<h4>Trasformatore Uomo-Cartone</h4>
<p>esperto</p>
</div>
</div>
</div>
</a>
</li><li class=”item col-md-4 renziano“>
<a title=”Renziano convinto” href=”images/projects/3-big.jpg” data-lightbox-gallery=”gallery1″ class=”nivo-lbox”>
<div class=”folio-img”>
<img src=”images/projects/3.jpg” alt=”” class=”img-responsive”>
<div class=”overlay”>
<div class=”overlay-inner”>
<h4>Adoro Renzi</h4>
<p>Gli ruberò il posto di lavoro</p>
</div>
</div>
</div>
</a>
</li></ul>
Il risultato dovrebbe essere questo:
Fatto questo non ci resta che creare le immagini che abbiamo inserito nel codice, esattamente:
- images/projects/1.jpg (210x168px)
- images/projects/1-big.jpg (1300x866px)
- images/projects/2.jpg (210x168px)
- images/projects/2-big.jpg (1300x866px)
- images/projects/3.jpg (210x168px)
- images/projects/3-big.jpg (1300x866px)
Quello che dovrebbe venire fuori è:
Terminata questa parte un pò più complessa non vi rimane altro che continuare con le modifiche come fatto finora. Al termine potrete rinominare il file index.html in apri_curriculum.html così da renderlo più semplice e comprensibile. Nel caso in cui vi interesserà capire come ottimizzarlo ancora di più per l’invio, lo vedremo in un altro articolo.
Qui trovate l’esempio online.
Per qualsiasi dubbio non esitate a commentare.
