Esercizio Realizzazione di un portfolio online

Transcript

1 Esercizio Realizzazione di un portfolio online In questo esercizio dovrai realizzare un progetto con wordpress che abbia lo scopo di offrire visibilità al tuo lavoro e avere uno strumento a disposizione per affrontare un colloquio o una selezione di lavoro. 1. Raccolta del materiale Raccogli tutto il materiale che hai a disposizione per popolare il tuo blog (immagini dei tuoi lavori, il tuo curriculum,..) e salvali in una cartella. Se non hai materiale a disposizione salva comunque in una cartella delle immagini che ti possono servire a scopo esemplificativo. Prepara un'immagine 512x512 px formato.png con sfondo trasparente che rappresenti un cerchio con al centro le tue iniziali, utilizza i colori e il font che preferisci. 2. Categoria predefinita Crea la categoria 'Portfolio' e impostala come categoria predefinita per gli articoli dalle impostazioni di scrittura. 3. Commenti Dalla voce di menù Impostazioni Discussione, togli la spunta alla voce 'Consenti la scrittura di commenti per i nuovi articoli'. 4. Pagine Crea le pagine 'Curriculum' e 'Contatti'. Per il momento non inserire contenuti. 5. Personalizzazione del tema Installa e attiva il tema 'Twenty Fifteen' e apri le opzioni di personalizzazione. Denominazione del sito Inserisci come titolo del sito il tuo nome e cognome oppure un nickname, come motto puoi inserire semplicemente 'Portfolio Online', oppure una frase breve che identifica te o il tuo lavoro. Come logo e icona del sito inserisci l'immagine 512x512px precedentemente creata. Immagine di sfondo Carica un'immagine da utilizzare come sfondo e seleziona l'impostazione 'riempi lo

2 schermo'. Menù Dalla sezione menù delle opzioni di personalizzazione del tema crea i seguenti menù: 1) Nome: menu top Nome voce di menù Tipo Valore Home Link personalizzato Inserisci l'indirizzo del tuo sito come valore del link Curriculum Pagina Associa la pagina Curriculum Contatti Pagina Associa la pagina contatti 2) Nome: menu social Nome voce di menù Tipo Valore Facebook Link personalizzato Inserisci il link alla tua pagina fb oppure ' Twitter Link personalizzato Inserisci il link alla tua pagina tw oppure ' Instagram Link personalizzato Inserisci il link alla tua pagina Instagram oppure ' Clicca sulla voce 'Posizioni del menù' ed associa i menù alle posizioni nel seguente modo: Posizione menù Menù associato Menù principale Menù social link Menu top Menu social Widget Come widget della sidebar imposta solamente 'cerca' e 'archivi'. Come titolo degli archivi scrivi 'Archivio mensile' e seleziona la voce 'mostra conteggio articoli'. Pagina iniziale statica Come modalità di visualizzazione della prima pagina imposta 'Gli ultimi articoli'. 6. Popola il tuo blog Per poter lavorare sul tuo blog inizia a popolarlo con qualche articolo. Crea almeno 6 nuovi articoli, ognuno deve identificare un tuo progetto che sarà inserito nel portfolio. Ogni articolo deve avere un titolo, un'immagine in evidenza ed essere associato alla categoria 'Portfolio'. Per il momento non inserire contenuto nelle pagine.

3 7. Pagina Contatti Plugin Installa e attiva il plugin 'Contact Form 7'. Integrazione recaptcha Clicca su 'Integrazione' dalla nuova voce di menù 'Contatti' creata dal plugin. Clicca sul link google.com/recaptcha, nella schermata che segue cliccare sul pulsante 'Get recaptcha'. Compila la sezione 'Registra un nuovo sito', come tipo di recaptcha scegli recaptcha V2 (convalida gli utenti con la casella di controllo 'non sono un robot') e registra il sito. La chiave del sito e la chiave segreta che vengono generate da Google recaptcha vanno inserite nella pagina Contatti > Integrazione accessibile dal menù di amministrazione del blog. Personalizzazione del form Dalla tabella che compare nella pagina Contatti > Moduli di contatto clicca su 'Modulo di contatto 1' per modificarlo. Cliccando sugli appositi pulsanti inserisci i seguenti tipi di campi del form ed impostali come campi richiesti: , testo, area di testo. I nomi di questi campi saranno rispettivamente ' ', 'oggetto' e 'messaggio'. Inserisci ora il tipo di campo file senza impostarlo come campo richiesto. Inserisci il tipo di campo rechaptcha. Infine il tipo di campo 'Invia' con etichetta invia. Adesso con l'html assegna un'etichetta ad ogni campo, il risultato dovrebbe essere all'incirca questo: <label> La tua * [ * "example@ .it"] </label> <label> Oggetto * [text* oggetto] </label> <label> Messaggio * [textarea* messaggio] </label> <label> Allega un file [file file-636] </label> [recaptcha] [submit "Invia"] Salva e copia lo shortcode che appare sotto al titolo del modulo di contatto. Integrazione del form nella pagina Apri la pagina Contatti precedentemente creata e incolla lo shortcode nell'area del contenuto. Fai precedere lo shortcode dal seguente testo: Compila il form per contattarmi. I campi con * sono obbligatori.

4 8. Pagina Curriculum Personalizziamo ora la pagina curriculum dividendola in 3 sezioni a comparsa (Skills, Esperienza Professionale e Formazione) tramite l'utilizzo di un menù Accordion (menù a fisarmonica). Es: Plugin e shortcode Installa e attiva il plugin 'Shortcode Ultimate'. Dalla nuova voce di menù dell'area di amministrazione 'Shortcode', clicca su 'Examples'. Dall'elenco Basic Examples clicca sulla voce 'Accordions, spoilers, different styles, anchors'. Cerca l'esempio 'Accordion with open spoiler' e clicca sul pulsante 'get the code'. Copia il codice tralasciando il titolo <h2>: [su_accordion] [su_spoiler title="spoiler title" open="yes"] Spoiler content [/su_spoiler] [su_spoiler title="spoiler title"] Spoiler content [/su_spoiler] [su_spoiler title="spoiler title"] Spoiler content [/su_spoiler] [/su_accordion] Integrazione dello shortcode Apri la pagina 'Curriculum' precedentemente creata e incolla il codice nell'area del contenuto. Modifica la voce title presente in ognuna delle tre righe di codice e sostituiscila rispettivamente con: 'Skills', 'Esperienza Professionale', 'Formazione'. Il risultato sarà così: [su_accordion] [su_spoiler title="skills" open="yes"] Spoiler content [/su_spoiler] [su_spoiler title="esperienza Professionale"] Spoiler content [/su_spoiler] [su_spoiler title="formazione"] Spoiler content [/su_spoiler] [/su_accordion] Skills All'interno della sezione Skills inseriremo ora delle progress bar per indicare il livello di conoscenza di ciascuna skill. Per farlo utilizzeremo il plugin WP Progress Bar. Una volta installato e attivato il plugin clicca su settings e imposta come colore per il background #EFEFEF e come Progress color #007FFF e salva. Dall'area shortcode copia il seguente testo:

5 [wp_progress_bar text="photoshop" pc="90"] Il valore text identifica il testo che verrà visualizzato nella barra, il valore pc il valore in percentuale che la barra dovrà mostrare graficamente. Apri la pagina Curriculum e all'interno della prima sezione del menù Accordion incolla 3 volte il testo copiato. Modifica testo e valore per ciascuna barra nel seguente modo: [wp_progress_bar text="photoshop" pc="90"] [wp_progress_bar text="illustrator" pc="70"] [wp_progress_bar text="wordpress & CMS" pc="60"] Esperienza Professionale Nella sezione Esperienza Professionale inseriremo delle tabelle grazie al plugin TablePress. Installa e attiva il plugin. Dalla nuova voce di menù TablePress clicca su Aggiungi nuova tabella. Come nome tabella imposta 'esperienza', numero righe 3, numero colonne 2 e clicca sul pulsante Aggiungi tabella. In Contenuti Tabella inserisci i seguenti valori: A 1 Posizione: Illustratore 2 Azienda: Casa Editrice Il Libro 3 Periodo: B Nella sezione Opzioni tabella togli la spunta a tutte le opzioni. Salva le modifiche e poi copia la tabella due volte cliccando sull'apposito pulsante in basso nella pagina. Clicca su Tutte le tabelle ed apri nuovamente la prima tabella creata, copia lo shortcode associato alla tabella e incollalo nella pagina Curriculum nella sezione Esperienza Professionale. Es.: [su_spoiler title="esperienza"] [table id=1 /] [/su_spoiler] Ripeti l'operazione per le altre due tabelle: [su_spoiler title="esperienza"] [table id=1 /] [table id=2 /] [table id=3 /] [/su_spoiler] Formazione Nella sezione formazione inseriremo un elenco puntato:

6 Laurea triennale Facoltà di Architettura 2016; Diploma superiore Liceo Artistico 2013; Qualifica regionale grafico multimediale Minerva Sapiens in corso. [su_spoiler title="formazione"] <ul> <li>laurea triennale - Facoltà di Architettura ;</li> <li>diploma superiore - Liceo Artistico ;</li> <li>qualifica regionale grafico multimediale - Minerva Sapiens - in corso.</li> </ul> [/su_spoiler] 8. Home Page All'interno dell'home page inseriremo un elenco degli ultimi articoli grazie al plugin 'Content Views' e la utilizzeremo come home page. Crea una nuova pagina chiamata Portfolio. Installa e attiva il plugin Content Views. Dal menù Content Views nell'area di amministrazione clicca su 'Aggiungi nuovo'. Nella sezione Filter settings lascia vuoto il campo limit e inserisci la spunta 'Taxonomy' ed associa la categoria 'Portfolio' precedentemente creata e salva. Nella sezione Display settings togli la spunta alla sezione 'show content' e salva. In alto copia il codice per implementare lo script nella pagina. Es: [pt_view id="6ac2d15bdm"] Apri la pagina Portfolio inserisci lo script copiato. Posizionati ora nell'area del contenuto prima dello script incollato e clicca su 'Insert shortcode'. Clicca su 'Quote'. Inserisci una citazione inserendo il nome dell'autore nel campo cite. Es L arte non riproduce ciò che è visibile, ma rende visibile ciò che non sempre lo è. - Paul Klee Campo cite: Paul Klee Dal menù Aspetto > Personalizza impostiamo la pagina Portfolio come Home Page. 9. Slider negli articoli All'interno degli articoli inseriremo degli slidehow di immagini che mostrano i nostri lavori. Installa e attiva il plugin 'Easing slider'. Clicca sulla voce del menù di amministrazione Sliders > Add New. Assegna un titolo allo slider, clicca sul pulsante Add Slide per aggiungere le immagini ed infine nella sezione Dimention spunta la voce 'Make 100% full width'. Clicca su Publish.

7 Apri l'ultimo articolo creato della categoria 'Portfolio'. Posizionati nell'area del contenuto e clicca su Add Slider, dal menù a tendina scegli lo slider creato e clicca su 'Insert Slider'. Prima dello script dello slider puoi inserire una descrizione del progetto. Aggiorna l'articolo. 10. Cookie Notice Integriamo l'avviso sull'utilizzo dei cookie nel nostro sito installando e attivando il plugin Cookie Notice. Crea una nuova pagina chiamata 'Informazioni sull'utilizzo dei Cookie'. Da impostazioni clicca su Cookie Notice. Nella sezione 'Collegamento a Maggiori informazioni' abilita il collegamento a leggi di più e associa la pagina appena creata. Salva 11. Newsletter Creiamo ora una newsletter per permettere a chi visita il nostro sito di ricevere aggiornamenti tramite . Crea la pagina 'Newsletter' e aggiungila al menu top. Installa e attiva il plugin Newsletter. Nella pagina Newsletter > Settings and more configura come Newsletter dedicated page la Newsletter creata. Apri la pagina newsletter e nell'area del contenuto scrivi: Per ricevere aggiornamenti da questo blog inserisci la tua [newsletter] Aggiorna la pagina. 12. Condivisione Social Installa e attiva il plugin Share Buttons by AddThis. Da Impostazioni > Share Buttons by AddThis metti la spunta nell'area Sharing Buttons Below

8 Content, scegli la grafica che preferisci e salva. 13. Personalizza il tuo Portfolio Online Ora che il portfolio ha preso una forma personalizzalo con i tuoi contenuti, modifica la pagina Curriculum, personalizza il tema come preferisci.