Questo articolo è stato contribuito da PSDtoWP.net

Forse sarebbe meglio iniziare qui con il perché. Circa un quarto di tutti i siti web funziona su WordPress, la piattaforma di blogging online. Questo lo rende di gran lunga uno dei più popolari sistemi di gestione dei contenuti open source del pianeta.

La stragrande maggioranza dei web designer utilizza ancora Photoshop per progettare un sito web, anche se ci sono alternative. Ciò significa che molti designer di siti Web devono trovare modi su come convertire i file PSD in un tema WordPress reattivo!

Ora, questo potrebbe sembrare abbastanza semplice. Tuttavia, la conversione di un file PSD in un sito web WordPress non è esattamente facile. Si richiede molto di più di una semplice abilità di Photoshop! Per trasformare il tuo file PSD in un tema reattivo che può essere utilizzato su WordPress, avrai bisogno di conoscenze sui linguaggi di sviluppo web front-end come HTML, CSS e JavaScript, oltre al linguaggio di programmazione back-end PHP.

Ora che il perché è fuori strada, è il momento di procedere al come! Anche se il come certamente non è facile, può ancora essere realizzato in cinque abbastanza semplice da capire passi!

Fase Uno: Creare il web design

Passare alla fase due se hai già progettato il tuo sito.

C’è molto di più nel creare un sito web che semplicemente creare un logo e inserire un menu, una barra laterale, un piè di pagina e il contenuto insieme. I pezzi di questo puzzle devono essere creati in primo luogo, e il processo di questa creazione è qualcosa che non tutti possono fare così facilmente.

Il web design che si crea deve essere quel perfetto equilibrio tra forma e funzione, un web design che si rivolge a una grande esperienza utente.

Ricerca

Al fine di creare un web design che soddisfa con successo i criteri di aspetto e funzionalità, è necessario fare qualche ricerca seria. Prima di tutto, chi è il tuo pubblico di destinazione e cosa vuole il tuo pubblico di destinazione? Questi sono ovviamente aspetti chiave della tua ricerca.

Imparare dagli altri

Un altro aspetto del web design che avete bisogno di ricerca è le tecniche che i concorrenti hanno applicato. Questi concorrenti sono probabilmente meglio stabiliti di te, quindi sarai certamente in grado di imparare molto dal design che usano! Una volta che hai fatto la tua ricerca e hai una buona idea su come dovrebbe apparire il tuo sito web, dovresti iniziare a pensare alla funzionalità. Quali funzioni vuoi che il tuo web design possieda?

Wireframe

Una volta risolto tutto, scaricalo su carta. Disegnare & schizzo ciò che si immagina il tuo sito a guardare come in modo da avere un aiuto visivo come ci si sposta in avanti!

Design

Una volta che hai finito di fare gli schizzi fisici / wireframe, sei pronto a salire sulla sedia del capitano e accendere Photoshop. La prima cosa che devi fare prima di iniziare sul serio è assicurarti di utilizzare una griglia basata su colonne come XXgrid. Questo renderà il tuo design davvero ordinato e allineato! Questo non è solo per l’estetica. L’utilizzo di una griglia basata su colonne per creare un design allineato renderà più facile per te o il tuo sviluppatore front-end che svilupperà HTML e CSS per creare un layout ottimizzato e reattivo per tablet e smartphone!

Prima di passare al passaggio successivo, ricorda che devi mantenere i tuoi file di progettazione PSD organizzati in livelli, cioè ogni sezione dovrebbe avere la propria cartella con i titoli corrispondenti!

Fase due: Taglia il PSD

Una volta creato un web design che si è completamente soddisfatti, è tempo di crisi. Fondamentalmente quello che devi fare ora è il processo da PSD a WordPress.

Siti Web in questi giorni sono tutti costruiti utilizzando HTML5 e CSS3. Questi sono molto meglio di XHTML e CSS2, perché invece di tutti i pulsanti, i bordi, i gradienti, i bordi arrotondati e tutte le altre funzionalità create utilizzando le immagini, vengono creati come parti funzionali della codifica CSS3. Quindi, affettare il file PSD sarà fondamentalmente ora comporta solo affettare le immagini di sfondo dal PSD!

Per fare ciò, è necessario aprire il file in Photoshop o Illustrator, a seconda del software utilizzato per creare il design. Se il progettista avesse fatto bene il suo lavoro, avrebbe creato un file di progettazione ben strutturato con cartelle e livelli, rendendo più facile per voi trovare quello che ti serve. Studiare il web design e cercare le immagini che si pensa avrebbe bisogno di affettare. Queste sono fondamentalmente tutte le immagini che non possono essere create usando CSS3, di solito il logo e le immagini di sfondo. Leggi come tagliare le immagini qui.

Una volta sostituite queste immagini di sfondo usando i CSS, vedrete un enorme calo dei tempi di caricamento. Questo attirerebbe un sacco di utenti al tuo sito, perché l’utente medio di Internet non può sopportare lunghi tempi di caricamento!

Fase tre: Creare HTML, CSS3 e JavaScript (jQuery)

Una volta tagliate le immagini dal file PSD, è il momento di creare HTML5 e CSS3. La prima cosa che devi fare è creare una nuova cartella in cui si crea indice.html e stile.CSS. Inoltre, crea una sottocartella chiamata images o img (a seconda di quale preferisci) e posiziona le immagini che hai estratto in questa cartella. Crea un’altra cartella chiamata JavaScript o js. Questo è per dopo, in modo da poter memorizzare tutti i file JavaScript e jQuery in una posizione ben contrassegnata. Una volta che hai finito di creare tutte le cartelle, i file e le sottocartelle, è il momento di iniziare a costruire HTML5 e CSS3.

HTML5

HTML5 è un linguaggio relativamente nuovo che possiede sia funzionalità XHTML che HTML. Questo linguaggio è essenzialmente utilizzato per creare la struttura di base del documento, così come nominare tutti gli elementi della pagina. HTML5 ha elementi separati per le diverse sezioni del tuo sito web, come l’intestazione <>, <nav>, <a parte>, così come gli elementi <footer> (e molto altro), che consentono di creare un documento pulito e ben strutturato che è universalmente leggibile. Qui ci sono alcune risorse eccellenti che è possibile utilizzare per imparare o aggiornare la memoria su HTML5.

Risorse HTML

W3Schools è il sito web numero superiore per imparare le basi di HTML5. Ogni elemento e attributo di questa lingua è spiegato e insegnato utilizzando demo, rendendo per una facile esperienza di apprendimento.

Mozilla Developer’s Section – La gente dietro il popolare browser Mozilla Firefox hanno una sezione dello sviluppatore sul loro sito web. È possibile utilizzare questa sezione per imparare molto su HTML5 attraverso i tutorial che hanno lì, se sei un principiante o un programmatore avanzato.

Web Design Tuts-Questo sito ha un sacco di diversi tutorial HTML5, alcuni dei quali sono gratuiti e alcuni dei quali sono pagati.

W3-Questo sito web è responsabile dello sviluppo di tutti gli standard web aperti che sono stati creati al fine di garantire la longevità del web. Qui puoi trovare informazioni approfondite su HTML5 e tutti i suoi ultimi sviluppi.

Validatore W3 – Una volta completato il tuo HTML5, passa attraverso questo validatore. Ti dirà se il tuo HTML5 soddisfa gli standard w3 open web!

CSS3

CSS si riferisce ai fogli di stile a cascata e CSS3 è l’ultima versione di questo linguaggio front-end. CSS3 viene utilizzato per prendere le ossa nude degli elementi creati utilizzando HTML5 e la forma, la posizione e lo stile di loro. Ciò consente di creare un web design coerente in cui tutti gli elementi confermano con il design complessivo del sito. Una volta che hai usato CSS3, scoprirai che il tuo HTML5 sarà molto più pulito e ben strutturato, il che a sua volta gli permetterà di caricare molto più velocemente e di essere indicizzato più velocemente dai motori di ricerca. Di seguito sono riportate alcune risorse per aiutarti a imparare o aggiornare la memoria su CSS3:

Risorse CSS

W3 CSS – W3 è sulle risorse più note e rinomate per i tutorial CSS3 e gli esempi dei vari selettori CSS3, proprietà e valori. La parte migliore di questo è che ogni tutorial ha una pagina “provalo tu stesso”, che ti consente di applicare ciò che hai imparato.

Impara CSS3 – Mozilla non è solo il creatore del browser Firefox. È anche un posto eccellente per familiarizzare con CSS3 e aggiornare le tue conoscenze sulla lingua.

CSS Web Design Tuts-Questo sito contiene tutta una cornucopia di tutorial che si può passare attraverso. Alcuni di questi tutorial devono essere pagati, ma altri sono ancora completamente gratuiti e possono insegnarti molto sui selettori CSS3, sulle proprietà e sui valori.

W3 CSS-Questo sito è un luogo ideale per rimanere aggiornati con le ultime notizie CSS3, perché questa è la comunità stessa che sviluppa gli standard web CSS3. È anche un ottimo posto per scoprire informazioni tecniche sulla lingua.

CSS Validator – Questo è il validatore attraverso il quale è necessario eseguire tutti i CSS3 prima di rendere pubblico il sito web. Questo è al fine di assicurarsi che il CSS3 soddisfa gli standard web impostati da W3!

Responsive Design

Internet ha fatto molta strada sin dal suo inizio. Ciò è dovuto in parte all’avvento di smartphone e tablet e alla proliferazione di questi tipi di tecnologia nella nostra vita quotidiana. Come risultato dell’immensa popolarità di questi dispositivi, una parte significativa degli utenti totali di Internet guarda i siti Web su schermi significativamente più piccoli rispetto al laptop medio. Inoltre, interagiscono con questi siti web non utilizzando cursori, utilizzando le dita. Quindi, il sito web moderno deve essere in grado di adattarsi ai vari tipi di dispositivi che sono là fuori. Questo è dove responsive design entra in gioco. Utilizzando responsive design, i progettisti sono in grado di creare un sito Web in grado di regolare l’intero layout in base al tipo di dispositivo su cui viene visualizzato.

È una buona idea decidere in anticipo se vuoi che il tuo nuovo sito Web sia caratterizzato da un design reattivo o meno prima di iniziare a costruire HTML5 e CSS3. Questo perché quando codifichi la parte reattiva del design del tuo sito Web, dovrai lavorare con le query multimediali CSS3. Utilizzando queste query multimediali, è possibile definire trame e stili diversi per diverse risoluzioni dello schermo.

Ricorda di non usare mai larghezze fisse, usa invece le percentuali. Questo è indicato come design di layout fluido o liquido, che consente di ottimizzare il tuo sito Web non solo per le risoluzioni definite all’interno delle query multimediali, ma anche per tutte le risoluzioni tra di loro. Questo è un enorme vantaggio per il tuo sito web dal momento che gli smartphone, tablet e computer che stanno venendo fuori oggi hanno così tante dimensioni diverse, e quindi risoluzioni, ed è necessario ospitare tutti loro.

Responsive Resources

Ecco alcune grandi risorse che puoi utilizzare per rinfrescare la memoria o conoscere il responsive design e tutta la codifica correlata:

Google Responsive – Questa è una grande risorsa per quelli di voi che sono nuovi al responsive design utilizzando le query multimediali CSS3.

Principles of Responsive Webdesign-Leggi questo articolo per capire la differenza tra responsive web design e adaptive web design. Ha alcuni grandi esempi per aiutarti a capire le cose in dettaglio!

Fluid Grids – È possibile utilizzare questo eccellente articolo di Ethan Marcotte per conoscere griglie fluide e come usarli. Prova a utilizzare gli esempi forniti nell’articolo da solo!

Framework front-end reattivo

Se non si è disposti a imparare le corde per quanto riguarda le query multimediali CSS3, o forse semplicemente non si ha abbastanza tempo per farlo, provare a utilizzare invece un framework front-end reattivo. Se si decide di utilizzare un framework grid, tenere presente che è necessario applicare lo stesso framework ai CSS e all’HTML, poiché si lavorerà con classi e ID predefiniti per connettere il framework creato utilizzando HTML5 a CSS3. L’utilizzo di un framework front-end reattivo ti consentirà sicuramente di sviluppare il tuo sito Web molto più velocemente, ma al ribasso rallenterà anche i tempi di caricamento del tuo sito Web a causa della grande quantità di codice che non utilizzerai.

Alcuni dei framework front-end più popolari sono:

Bootstrap-Questo framework reattivo è abbastanza facile da implementare e un ulteriore vantaggio è che utilizza una CDN per ridurre anche l’impatto delle velocità di caricamento del tuo sito web.

MENO-Questo è un framework griglia CSS adattivo piuttosto che uno reattivo che consente di creare un layout adattivo.

Fondazione – Questo è un quadro griglia front-end con una dimensione del file che è assolutamente piccolo al fine di ridurre al minimo l’impatto che avrà sulla velocità di caricamento del tuo sito web.

JavaScript (vs CSS3)

JavaScript è attualmente uno dei linguaggi di programmazione più popolari al mondo. Ciò è dovuto al fatto che è supportato da una vasta gamma di browser e anche dal fatto che contiene librerie come jQuery e sistemi di back-end come Node.js e framework come AngularJS. Non c’è da meravigliarsi che così tanti sviluppatori giurino su questo linguaggio di programmazione! Tuttavia, negli ultimi tempi JavaScript ha iniziato a diventare obsoleto, poiché molte delle sue funzioni hanno iniziato ad essere rilevate dalle animazioni CSS3, che consentono di animare le transizioni tra gli stili.

Risorse Javascript

W3-Questo è un ottimo punto di partenza se siete nuovi a JavaScript, grazie alla eccellente tutorial che è disponibile su questo sito.

jQuery – Una volta che hai una certa esperienza con JavaScript, puoi iniziare a usare librerie come questa per programmare molto più facilmente. jQuery è la libreria JavaScript più popolare di un miglio.

NodeJS – Se si preferisce sistemi di back-end, ma allo stesso tempo l’amore JavaScript, controllare questo sito.

AngularJS-Combina le formidabili forze di HTML e Java usando questo framework e ottieni alcune viste dinamiche.

Assicurati di controllare le seguenti risorse prima di iniziare a utilizzare JavaScript per animare gli elementi sul tuo sito web mentre probabilmente puoi anche usare CSS3:

Animazioni CSS3 – Ancora una volta ci rivolgiamo a w3schools per i nostri tutorial CSS3. Esamina le demo disponibili su questo sito Web per comprendere tutte le diverse animazioni CSS3.

Animazioni Mozilla-Approfondisci la tua conoscenza delle animazioni CSS3 con i nove esempi ed esempi forniti da Mozilla.

Fase quattro: Costruisci i file del tema WordPress

Ora che hai convertito con successo i tuoi progetti PSD in HTML5, CSS3 e JavaScript, è il momento della conversione principale: trasformare il tuo HTML in un tema WordPress completo e reattivo. Ricorda di seguire la gerarchia dei modelli di WordPress per assicurarti che i tuoi temi funzionino davvero. L’ordine generale è quello di iniziare con l’intestazione.php, seguito da indice.php, piè di pagina.php e stile.CSS. Utilizzerai questi quattro modelli su tutte le pagine del tuo sito web.

Una volta che hai una comprensione completa di come funziona la gerarchia dei modelli, devi iniziare a rompere i file HTML in pezzi. Puoi iniziare creando una cartella nella cartella temi che puoi trovare nell’installazione di WordPress, l’indirizzo per il quale è /wp-content/themes/. Creare l’intestazione del file.php in questa cartella. Questo file è quello che userai per dichiarare il tipo di documento e tutti gli elementi che appartengono all’intestazione della tua pagina, come i metas, il titolo, i fogli di stile, i javascript e così via. Una volta che hai finito con questo, crea piè di pagina.php e incolla tutti gli elementi del piè di pagina nel tuo documento HTML. Se il design del tuo sito web include una barra laterale, crea un file denominato barra laterale.anche php e include tutta la codifica pertinente all’interno di questo file.

Una volta completata la creazione di tutti gli elementi del tuo sito web in questi file, è necessario iniziare a creare la tua home page. Ci sono diversi modi per farlo. Ad esempio, puoi semplicemente creare index.php, prima pagina.php o pagina-home.php, ognuno di questi file sarà adatto a ciò che stai cercando di fare, quindi la scelta finale dipende interamente da te. Ora che hai finito di creare uno dei tre modelli per la tua home page, includi tutti .file php che hai appena creato. Ora che avete la vostra parte superiore, inferiore e laterale pronto, incollare il HTML5 della tua home page in mezzo e avrete creato con successo la home page del tuo sito web. Basta seguire lo stesso processo per tutte le pagine del tuo sito web e si può passare alla fase successiva e finale.

Fase cinque: Utilizzare WordPress integrato tag e funzioni

Una volta creato con successo il tema per il vostro WordPress, è ora necessario assicurarsi che siete in grado di modificare il tuo sito web all’interno del pannello di amministrazione, piuttosto che dover modificare il file del tema ogni volta che si desidera modificare qualcosa. Forse le funzioni WordPress più popolari per rendere tutti i tuoi contenuti modificabili tramite il pannello di amministrazione è aggiungendo la funzione add_meta_box. Basta impostare meta box per il contenuto di ogni pagina e siete a posto!

Creare le funzionalità principali del tuo sito web è abbastanza facile usando WordPress. Ad esempio, la visualizzazione di informazioni come i link sui tuoi siti Web può essere eseguita facilmente utilizzando le funzioni di WordPress. Basta controllare la pagina di riferimento funzione per WordPress per vedere tutte le funzioni disponibili.

Allo stesso modo, WordPress offre anche tag modello. Queste sono essenzialmente funzioni stesse, con l’unica differenza che sono state create appositamente per temi specifici che le rendono più efficienti.

Menu WordPress

Quando accedi al pannello di amministrazione del tuo sito web, probabilmente vorresti cambiare le voci di menu nei menu e nell’aspetto in modo da non doverlo modificare usando il pannello di amministrazione. Questo è abbastanza facile grazie al fatto che stai usando WordPress, tutto ciò che devi fare è sostituire l’elenco dei menu del file modello con una riga di PHP, dopo di che puoi semplicemente iniziare ad aggiungere voci di menu.

Potrebbero esserci situazioni in cui una pagina interna ha un’intestazione o un piè di pagina diversi. Per aggiungere questa funzionalità al tuo sito web, tutto ciò che devi fare è aggiungere tag condizionali. Questi consentono di applicare codice diverso per pagine o post selezionati.

Una volta che il tuo sito web WordPress è attivo e funzionante sul tuo server di sviluppo, tutto ciò che devi fare è scaricarlo sul tuo server live. Ecco un articolo in cui viene spiegato in dettaglio come si sposta un sito WordPress, passo dopo passo. Basta seguire tutti i sei passaggi forniti e avrete il vostro sito web installato e funzionante su un server live in pochissimo tempo.