Corso da PSD a HTML/CSS - (dalla grafica al codice)

La conversione di un file PSD in codice HMTL/CSS è una fase molto delicata nel processo di realizzazione di un progetto web. Da dove iniziare? Che strada seguire? Come evitare errori comuni? È ciò di cui ci occupiamo in questo video corso fatto su misura per aspiranti web designer.

Accedi subito al corso!

Corso da PSD a HTML/CSS – (dalla grafica al codice)

Video Corso Multimediale

* L'accesso è per sempre (24 ore su 24)

L’ipotesi più frequente è quella di un PSD che ci viene passato da un grafico (ma non è da escludere la fattispecie in cui si tratta di un nostro PSD). Dobbiamo trasformare in pagina web, funzionante e fedele, ciò che vediamo in Photoshop. Tipografia, ombre, divider, padding e persino i simboli grafici più insoliti, ogni elemento deve stare al suo posto, così come è stato progettato graficamente e poi approvato dal cliente.
Lo scopo di questo corso non è solo quello di usare il codice, ma più tecnicamente quello di riprodurre a regola d’arte il layout grafico con i suoi abbellimenti così come ci è stato consegnato in PSD, cercando di ridurre al minimo le volte in cui siamo chiamati per correggere un’interlinea, dei margini, elementi di tipografia etc.

Programma del Corso

01. Analisi Preliminare

Nella prima lezione vedremo insieme gli step da seguire prima di iniziare il lavoro di “conversione” del nostro PSD. Le regole da seguire sono sempre le stesse: Analisi, Pianificazione e Sviluppo. Il cosa fare è chiaro per tutti, ma come? Con quali strumenti? Lo scopriremo…

02. L’header

Una volta predisposto tutto il necessario per la realizzazione della nostra pagina web, passiamo all’implementazione del codice HTML che andrà a contenere i vari elementi dell’header.

03. Il content

L’header e il footer hanno, di norma, una struttura più o meno standard e, una volta capito come procedere, non si incontrano particolari difficoltà. Il content, la parte centrale della nostra pagina, è la prima cosa che l’utente vede quando apre un sito web e la sua realizzazione richiede particolare attenzione. La regola è una sola: non commettere errori!

04. Il footer

Gli ultimi sforzi e il processo di conversione del nostro PSD in codice è finito. Finalmente possiamo gustarci la nostra pagina HTML che, volendo, è pronta per essere pubblicata sul web.

05. Twitter Bootstrap... e dintorni

Smartphone, tablet, monitor full HD e retina… insomma dispositivi di ogni tipo, forma e dimensione. Se qualche anno fa questa caratteristica poteva rappresentare un valore aggiunto, oggi è impensabile realizzare un sito web che non si adatti alle dimensioni del dispositivo in uso.

06. DRY (Don’t Repeat Yourself): riutilizzo del codice

Uno degli argomenti più delicati, in ambito di ingegneria del software, è il riutilizzo del codice. Il principio DRY, Don’t Repeat Yourself, afferma che andrebbe evitata ogni forma di ridondanza e/o ripetizione logica durante lo sviluppo di un software. Evitare il code smell, cioè la ripetizione di parti di codice, permette di avere un codice pulito e di facile manutenzione; in altre parole, qualità!

che cosa contiene il corso:

Video Training ( streaming )

Quattro video training in streaming.

File ottimizzato per Tablet e Smartphone

File ottimizzato per Tablet e Smartphone

Completo di tutti i Moduli previsti dal programma, in formato epub ottimizzato per Ipad, Iphone, Tablet, Smartphone, Ereader.

File in formato PDF

File in formato PDF

La trascrizione delle lezioni è stata realizzata anche nel classico formato PDF.

File in formato Kindle

File in formato Kindle

Ovviamente, non poteva mancare il .mobi per il Kindle. Se preferisci questo tipo di dispositivo, puoi tranquillamente leggere le nostre lezioni anche in questo formato.

Codice sorgente

Una solida base è la maniera migliore per iniziare a costruire la propria meraviglia: il docente ha deciso, quindi, di condividere il codice sorgente delle lezioni.

I bonus di questo corso

Insieme alle 6 lezioni del corso, potrai accedere al seguente video tutorial:

  • Configurazione di Adobe Photoshop: avere una piattaforma ben configurata permette di risparmiare tempo e non commettere errori banali. Questo tutorial ti aiuterà nella configurazione di Photoshop, fornendoti delle linee guida che ti aiuteranno a svolgere in maniera veloce e precisa il tuo lavoro.

Obiettivi che raggiungerai con questo corso

Lo scopo di questo corso è insegnarti a convertire in maniera corretta un PSD in HTML/CSS.
Il suo primo obiettivo, dunque, è metterti nelle condizioni di essere un fedele riproduttore della grafica. Ma non solo. Gli altri obiettivi che potrai raggiungere con questo corso sono i seguenti:

  • Acquisire una scrittura corretta del codice (con trucchi e best practices)
  • Saper creare pagine web dinamiche e responsive

A chi è rivolto il corso

Questo modulo è stato estratto da One Year Together, il corso multimediale per Web Designer Freelance. I suoi contenuti sono utili a chiunque voglia imparare a sviluppare in codice. È tuttavia un corso pensato per Web Designer che vogliono mettersi in proprio.

Corso da PSD a HTML/CSS – (dalla grafica al codice)

Accedi subito al corso!

Corso da PSD a HTML/CSS – (dalla grafica al codice)

* L'accesso è per sempre (24 ore su 24)

Post Scriptum

Per una visione più completa dell’argomento, consigliamo di prendere anche:

l'autore

Andrea Grillo

Ingegnere Informatico, inizia la sua "carriera" smanettando su un Commodore64 ricevuto in regalo nei primi anni '90. Vive in prima persona il boom del web che, unito con la passione per le nuove tecnologie, lo porta a intraprendere gli studi nel settore dell'ingegneria dell'informazione. Nei primi anni della sua carriera si è occupato di sviluppo di software gestionali e cablaggio strutturato per poi tornare al suo primo grande amore: il web! Oggi, mosso dallo stesso entusiasmo che anni prima lo portò ad intraprendere la professione del web designer, decide di dedicarsi anche alla formazione per trasmettere agli altri l'esperienza maturata nel settore.
Altri prodotti di Andrea Grillo

Ti potrebbe interessare…

Scarica un’anteprima gratuita di questo prodotto

Inserisci il tuo nome e il tuo indirizzo email per scaricare il file.

 

Dicono di questo prodotto:

Non sono ancora state lasciate review per questo prodotto

LASCIA UN FEEDBACK Inserisci la tua opinione sul prodotto