Sviluppo e progettazione Web 101

web_development_101Vuoi conoscere le basi dello sviluppo e della progettazione Web? Eccezionale…


Ma c’è un problema con questa linea di pensiero, o un certo numero di loro in realtà …

  • Qual è lo scopo di avere un sito web? Tutti ne hanno davvero bisogno?
  • In tal caso, come si crea un sito Web di qualità? O in altre parole, come apprendi lo sviluppo e la progettazione Web di base che ti consentirebbero di costruire tu stesso quel sito Web di qualità?
  • Ancora più importante, puoi creare un sito Web di qualità al tuo primo tentativo? O hai bisogno di anni di esperienza dietro di te, prima di poter sperare in qualsiasi risultato sopra terribile?

Rispondiamo a tutto ciò in questo guida per principianti allo sviluppo e alla progettazione web.

[Avviso spoiler. Sì, puoi creare un sito Web di qualità al primo tentativo.]

Cosa è coperto in questa guida?

Ok, prima di tutto, siamo contenti che tu abbia continuato a leggere e che tu abbia deciso di provare lo sviluppo web! Ecco come andrà a finire:

I capitoli sono presentati in modo molto semplice, con il contenuto principale a sinistra e gli oggetti utilizzabili a destra. Così:

Introduzione alla guida: capitolo 1

Ora, come procedere:

  • Durante la tua prima lettura: Ti consigliamo di leggere l’intero documento dall’alto verso il basso. Questo ti darà una buona visione di 10.000 piedi dell’argomento e ti aiuterà a capire le parti più importanti di esso. Ti fornirà inoltre strumenti e metodi di base su come gestire le singole attività.
  • Durante la tua seconda lettura e oltre: Usa il sommario e passa alla parte che ti interessa di più. Inoltre, sentiti libero di usare i pulsanti di condivisione accanto a ogni capitolo e invia i link a te stesso o ai tuoi amici / follower che potrebbero essere interessati.

Pronto? Andiamo al capitolo 1.

Per chi è questa guida?

Se vuoi imparare lo sviluppo e la progettazione web di base, questa guida è per te. Qualunque sia la tua motivazione.

Inoltre, non hai bisogno di alcuna conoscenza tecnica precedente per iniziare (oltre alle “competenze web” di base). Il punto centrale di questa guida è quello di essere una sorta di corso “101” per tutti coloro che sono interessati alla costruzione di siti Web e all’apprendimento dello sviluppo web.

Ecco alcuni motivi comuni per cui potresti essere interessato:

  • 1. AVETE BISOGNO di un sito Web per la vostra azienda (e vuoi vedere se riesci a costruirlo da solo).
  • 2. Vuoi IMPARARE lo sviluppo web per passione o interesse temporaneo (niente di male).
  • 3. Hai bisogno di un sito web per la scuola.
  • 4. Stai aiutando un amico o un familiare a mettere online il loro sito web.

L’idea principale che ci guiderà

Questo è importante! E per favore non essere arrabbiato con noi se sei uno sviluppatore web avanzato che sta leggendo questo, ma l’idea principale che ci guiderà attraverso l’intera risorsa di sviluppo web e progettazione 101 è:

“L’approccio alla minima resistenza”

Ecco i tre principi dell’approccio meno resistente:

  • siamo non scomporre le cose a livello molecolare. Cioè non approfondiremo il funzionamento dei linguaggi di programmazione o il funzionamento di un web server.
  • siamo non reinventare la ruota. Cioè se qualcuno ha già risolto un determinato problema e reso disponibile la soluzione, la utilizzeremo.
  • siamo rendendo fantastica una soluzione semplice, piuttosto che una soluzione complicata e apparentemente più funzionale buggy e non comprensibile.

CAPITOLO 1: Il piano

La tua idea, il tipo di sito Web, il nome di dominio e l’hosting.

Prima di creare un sito Web, avrai bisogno di un piano

Per quanto ironico possa sembrare – lo show di successo degli anni ’80 “The A-Team” ci ha insegnato, un buon piano è un la chiave del successo.

Se hai un sito Web seduto da un po ‘di tempo, allora sei sicuramente entusiasta dell’unica idea di farne finalmente uscire per gli altri a leggere e navigare.

Vuoi che il tuo sito web sia fantastico. Probabilmente sai come sarà in una certa misura. O forse hai anche il logo perfetto pronto.

Ma…

Non è affatto dove dovresti iniziare. Se inizi con aspettative prestabilite, questo ti porterà solo molta confusione lungo il percorso e un risultato inferiore alla fine.

Invece, pensa a quanto segue:

  1. Separati da qualsiasi obiettivo tecnico che potresti avere. Come, ad esempio, l’obiettivo dell’apprendimento delle tecnologie di siti Web o di determinati software di siti Web.
  2. Ponetevi una domanda principale: “Per cosa ho bisogno del sito?”

Non si tratta di te, si tratta dell’obiettivo del sito.

Domande che è necessario porsi prima di impostare il sito Web

  1. Cosa intende realizzare il sito?
  2. Quale sarà la “cosa” principale presentata attraverso il sito? (ad es. la tua azienda, un prodotto, i post del tuo blog, ecc.)
  3. Il sito Web avrà uno scopo speciale? (ad esempio un negozio di eCommerce, un portfolio di un fotografo, ecc.)
  4. Chi è il pubblico target?
  5. Perché sono interessati all’argomento del sito?
  6. Quale dolore risolve il sito per i singoli membri del pubblico?

A proposito di queste ultime 3 domande, parliamo del pubblico per un minuto …

Esistono 2 regole principali per la creazione di siti Web. Ecco la regola n. 1:

 Il lettore / visitatore viene prima di tutto. Sono le persone principali che il tuo sito Web deve soddisfare.

In un certo senso, il tuo sito web non è tuo. È loro.

(Regola n. 2 di cui parleremo tra un minuto.)

Dimenticare questa semplice linea guida può condurti nel modo completamente sbagliato, anche fino al punto in cui ti ritrovi con un sito Web che confonde tutti quelli che ti circondano tranne te.

“Ugh! Le persone semplicemente non capiscono di cosa tratta questo sito. Come possono essere così ignoranti ?! ” – finisci per pensare. Ma a quanto pare, l’ignorante eri tu.

L’unico modo per evitarlo è costruire il tuo sito web pensando al lettore fin dall’inizio.

Quindi … prendi quel pezzo di carta e rispondi a tutte le domande precedenti.

Una volta terminato, disponi della tua serie di linee guida su cui agire mentre lavori sul tuo sito web.

Quelle risposte saranno uno strumento eccezionalmente potente mentre procedi. Sarai in grado di tornare da loro ogni volta che dovrai affrontare una decisione relativa al tuo sito web.

Dovresti fare * questo * o * quello *? Vai al foglio delle risposte e scoprilo. Dovresti usare una barra laterale larga o stretta? Vai alle risposte, scopri quale è più probabile che risuoni con il lettore di destinazione. E così via.

Nomi di dominio e Web hosting

Se vuoi essere il proprietario di un sito Web, devi disporre di un nome di dominio e di un host web.

Bene, tecnicamente parlando, puoi creare un sito Web di prova tutto sul tuo computer e quindi eseguirlo da un server web locale (installato anche come software sul tuo computer), ma non sarebbe una soluzione utilizzabile per il 99% del casi, quindi saltiamolo.

Quindi, un host e un dominio …

La cattiva notizia qui è che entrambi costano denaro.

La buona notizia … non sono così tanti soldi nel grande schema delle cose. Inoltre, mentre stai imparando, puoi persino avviare più piccoli siti Web su un singolo nome di dominio e sotto un singolo host web.

Ma cominciamo dall’inizio.

Host Web:

  • In termini semplici, un host web è dove si trova il tuo sito Web e dove i tuoi visitatori possono trovarlo. In un certo senso, gli host web per i siti Web sono proprio come appartamenti per umani. Sotto il cofano, gli host web sono aziende che noleggiano i loro server in cambio di denaro (… piccoli appartamenti per i tuoi siti Web).
  • Per iniziare, farà un piano di hosting condiviso standard. Puoi ottenerli per qualsiasi cosa a partire da $ 3 al mese. Ecco un bel confronto tra i più diffusi host web. Dai un’occhiata e decidi quale di queste aziende ti sembra giusta. Tuttavia, i nostri consigli valgono per SiteGround, A2 Hosting e Dreamhost.

domini:

  • Se un host web è un appartamento, un dominio è l’indirizzo di tale appartamento. Ad esempio, il dominio di questo sito Web è hostingfacts.com.
  • Il modo per iniziare è quello di scegliere il nome di dominio desiderato e quindi acquistarlo da un registrar. Ecco una guida completa su come acquistare un nome di dominio ed ecco un elenco di generatori di nomi di dominio.

 

Suggerimenti e suggerimenti per la scelta di un nome di dominio

Va bene, quindi andare in un registrar di domini e acquistare effettivamente il dominio è una cosa, ma come scegliere il nome di dominio giusto?

Ci sono un paio di scuole:

  • Nomi di dominio con marchio. Questi sono domini composti da parole inesistenti. Pensa a cose come Google.com o Yahoo.com. Prima che arrivassero quelle compagnie, quelle parole non significavano nulla. L’aspetto positivo di un nome di dominio con marchio è che è … beh, altamente personalizzabile, memorabile ed è facile distinguere il tuo sito dagli altri.
  • Nomi basati su parole chiave. Questi sono composti da parole esistenti, inserite in una sequenza che descrive lo scopo del sito. Pensa a cose come Pizza.com o StartBloggingOnline.com. Con un nome di dominio del genere, i tuoi visitatori saranno in grado di prevedere con precisione il tipo di sito web che stanno per visitare. Il rovescio della medaglia è che quei domini sono generalmente meno brandizzabili.
  • Nomi combinati. Questi sono domini di marca e domini basati su parole chiave messi insieme. Pensa, Facebook.com o Copyblogger.com. Tali nomi suggeriscono “una parte” della natura del sito Web per il visitatore, ma sono ancora altamente brandizzabili.

Alcune linee guida generali indipendentemente dal tipo di dominio scelto:

  • Rendi il dominio facile da memorizzare.
  • Rendilo breve e semplice. Più lungo è il dominio, più è confuso.
  • Ottieni un .com (se possibile). .Com è il principale “dominio di primo livello” disponibile. Non accontentarti di nient’altro.
  • Cerca di evitare trattini. Ottieni il tuo nome in forma di blob singolo come “cakerecipes.com” anziché “cake-recipes.com”

Cose da preparare dopo questo capitolo:

  • Un nome di dominio.
  • Un host web.
  • Il tuo foglio di risposte: gli obiettivi del tuo sito e come servirà il pubblico.

Serve ancora aiuto? Ecco ulteriori letture per te:

  • Perché l’hosting condiviso? Principali tipi di host confrontati
  • 10 cose che rendono un host web buono
  • 12 regole per la scelta del nome di dominio giusto
  • Una guida completa alla pianificazione del sito Web

CAPITOLO 2: Progettazione e wireframing

Prendi carta e penna e gratta insieme alla struttura del tuo sito web

Ok, entriamo nella fase di progettazione.

Per prima cosa, ecco l’etica del lavoro che seguiremo qui:

  • Usiamo carta e penna il più a lungo possibile e solo allora passiamo al computer. Credici, ogni minuto speso lavorando al tuo design su carta è un’ora risparmiata una volta che inizi a mettere a punto le cose sul computer.
  • Stiamo svolgendo un lavoro iterativo … Facciamo »controlla i risultati» migliora »controlla i risultati» ripeti fino al termine.

Nel capitolo 1, abbiamo menzionato qualcosa che abbiamo chiamato la regola n. 1 della costruzione di siti Web. Ora è il momento della regola # 2:

Regola n. 2 della costruzione del sito Web:

Pensa prima ai contenuti.

Il contenuto è ciò che conta su un sito Web. Non il design. Soddisfare.

Le persone vengono per il contenuto. Non vengono per il design. Il design è solo un veicolo per fornire il contenuto.

Non iniziare mai con l’aspetto del tuo sito Web. Inizia con il contenuto. Soddisfare. Soddisfare. Soddisfare.

Quindi cosa intendiamo per “contenuto”? In breve, è la cosa che le persone vogliono ottenere dal tuo sito web. Post di blog, prodotti nel negozio, thread del forum se stai creando un forum, articoli di notizie, offerta commerciale e così via.

“Veramente? Gli sguardi non contano davvero? ” – Tu chiedi.

Invece di batterlo, dai un’occhiata a questa pagina:

Sito Web semplice

Questa semplice pagina web è di gran lunga la migliore spiegazione di ciò che il design è e quale scopo serve online.

Quindi ricorda, prima contenuti!

Contenuto e struttura del sito Web

Ok, quindi poiché il contenuto è la cosa più importante, devi averlo (la maggior parte) pronto in anticipo. O almeno, devi avere una buona idea di quanti contenuti ci saranno e in quale forma.

Nota. Sappiamo che questa parte può essere dura. Iniziare con i contenuti sembra abbastanza innaturale per la progettazione di siti Web, ma alla fine è davvero il modo migliore per ottenere un risultato eccezionale. Pensa quindi al contenuto che desideri condividere con il lettore e al modo in cui desideri presentarlo.

Il prossimo passo è individuare i singoli tipi di pagine di cui avrai bisogno (come una homepage, una pagina di prodotto, una pagina di categoria, una pagina di informazioni, una pagina di contatto, la pagina di vendita principale, una pagina di destinazione dell’iscrizione a una newsletter, elenco principale del blog, singoli post, forse un negozio e quant’altro sembra necessario).

Pensa, qual è il modo più efficace per organizzare i tuoi contenuti sul sito web?

Fai tutto questo sulla carta. Sarà probabilmente più facile e veloce per te che imparare un pezzo di software di disegno grafico sul posto.

Esempio:

content-struttura

Gratta insieme un wireframe

Un wireframe nel web design è semplicemente uno schema di pagina o un modello: una guida visiva che rappresenta la struttura di un sito Web (Wikipedia ci dice).

I wireframe sono fantastici! Li usiamo per la maggior parte delle cose che facciamo che dovrebbero apparire online. Ad esempio, ecco un wireframe proprio per questa guida:

Gratta insieme un wireframe

Come puoi vedere, ancora una volta, è sulla carta. Anche se ci sono più app per questo tipo di lavoro, in realtà non consigliamo di usarle. Potrebbero essere fantastici per i designer professionisti, ma un principiante o una persona intermedia perderà solo il tempo di impararli e alla fine non otterranno molti miglioramenti rispetto a ciò che otterrebbero attraverso carta e penna.

Quindi, come wireframe?

Bene, ci sono due approcci se sei un principiante:

  • Segui il flusso se ti senti forte e attira semplicemente (non sempre una soluzione perfetta).
  • Ottieni una rapida conoscenza di come eseguire correttamente il wireframe (di solito meglio).

Per quest’ultimo, vai qui – un’ottima guida.

(Assicurati di creare un wireframe per ogni importante tipo di pagina che hai elencato nel passaggio precedente.)

Cose da preparare dopo questo capitolo:

  • La maggior parte dei contenuti del sito, o almeno la maggior parte previsti (ad esempio, se si fa affidamento sui contenuti generati dagli utenti, è difficile averli in anticipo).
  • La struttura dei contenuti del tuo sito Web preparata come grafico.
  • Un wireframe dei singoli tipi di pagine che ti serviranno.

Ulteriori letture:

  • 9 passaggi per pianificare il contenuto del sito Web
  • Nuovo nel web design? Comincia qui.

CAPITOLO 3: UX e UI

Non sottovalutare mai l’importanza dell’esperienza utente e dell’interfaccia utente

Come in, User Experience e User Interface.

WebDesignerDepot ci dà una definizione piuttosto poetica dei due:

L’interfaccia utente è la sella, le staffe e i regni.

UX è la sensazione che riesci a cavalcare e allacciare il bestiame.

Per una definizione più pratica:

  • L’interfaccia utente è ciò che l’utente vede quando guarda il tuo sito.
  • UX è come si sentono al riguardo.

La coppia e la sua buona esecuzione definiscono sostanzialmente l’utilità del tuo sito Web per l’utente finale / visitatore.

Sia la UX che la progettazione dell’interfaccia utente sono argomenti di grandi dimensioni in sé e ci sono molti elementi più piccoli che svolgono un ruolo nel risultato finale.

In breve, c’è molto da imparare se hai appena iniziato il tuo viaggio.

Quindi, invece di cercare di limitare un intero corso di progettazione dell’interfaccia utente e dell’interfaccia utente qui, segnaliamo solo una manciata di elementi importanti e quindi ti inviamo da qualche altra parte per ulteriori letture.

Obiettivi dell’utente

UX riguarda gli obiettivi dell’utente … Non tanto dei tuoi obiettivi … Obiettivi dell’utente.

Ok, cosa significa? Prima di tutto, torna allo scopo del tuo sito Web: la cosa su cui hai lavorato nei capitoli precedenti. Il motivo per cui stai costruendo il sito web e in che modo aiuta l’utente / visitatore.

Come si traduce nell’obiettivo del visitatore? … Qual è l’unica cosa che il visitatore vuole ottenere o ottenere quando arriva sul tuo sito? Questo è il loro obiettivo.

Quanto sono facili da raggiungere quegli obiettivi?

Quindi, concentrati sulla seguente domanda:

  • Il visitatore può raggiungere facilmente il suo obiettivo? – Possono ottenere l’esatta informazione per la quale sono venuti in modo semplice?

Per rispondere a questo, è necessario tornare al wireframe, alla struttura dei contenuti e ricontrollare le cose.

Assicurati che la struttura dei contenuti e le pagine che hai pensato abbiano senso dal punto di vista di un utente. Assicurati che possano navigare liberamente tra le pagine importanti e in modo non confuso.

In sostanza, qui, ci assicuriamo che il sito Web dia valore ai tuoi visitatori.

Difficile capire tutto da solo, non è vero?

Ti consigliamo vivamente di consultare le risorse elencate nella sezione “ulteriori letture” di questo capitolo … ma puoi anche provare “un hack”, per così dire.

Vale a dire, pensa a ciò che ti frustra quando visiti siti Web simili a quello che vuoi costruire? Forse ci sono alcune informazioni che sono davvero difficili da raggiungere o qualche elemento di interfaccia che rende il sito confuso.

Prendi appunti, trai conclusioni, non fare gli stessi errori con il tuo sito web.

Utilizzo dell’emozione come strumento

Quando lavori sull’interfaccia utente e sulla UX del tuo sito, ciò a cui sostanzialmente stai mirando è invocare una certa emozione nel tuo visitatore.

Volete che provino un certo modo, il che li convincerà ad agire in un certo modo. Pertanto, rendi il tuo sito web davvero utile.

Per lavorare sulla parte emotiva del lavoro, uno dei migliori strumenti è il colore.

I colori hanno significati diversi nelle diverse culture. Comprendere queste differenze può rendere il tuo lavoro molto più semplice. Ecco un bel cheat sheet.

Una volta che sei nel campo da baseball di quali colori vuoi (possibilmente) usare, ecco un paio di linee guida generali quando lavori con il colore:

  • Scegli una combinazione di colori principale composta da un paio di colori che vanno bene insieme. Ecco un ottimo generatore di combinazioni di colori.
  • Scegli un colore che sarà il tuo accento: il colore che verrà utilizzato per i pulsanti di azione, i pulsanti di acquisto e così via. Fondamentalmente, tutto ciò che richiede l’attenzione dell’utente.

Tipografia

In molti casi, la tipografia è il luogo in cui vinci (o perdi) il gioco di costruzione di siti Web.

È così facile dimenticare completamente la tipografia e usare Arial per tutto.

Non consigliato.

Al giorno d’oggi, lavorare con caratteri personalizzati è semplicissimo e non devi nemmeno fare nulla di tecnico per abilitare quei caratteri personalizzati sul tuo sito.

La tipografia grande e grandiosa è molto di moda in questi giorni e rende anche il lavoro di un designer – in particolare il lavoro di un designer principiante – molto più semplice.

Dai un’occhiata a questo sito, ad esempio:

bonobo

Hai notato qualcosa? Sì, i caratteri sono enormi e sembrano fantastici!

Ecco come lavorare su questo:

  • In generale, ogni progetto di sito Web richiede due tipi di testo: intestazioni e paragrafi. Nella maggior parte dei casi, sarà sufficiente un solo carattere per ciascuno.
  • Vai a Google Fonts – la libreria di caratteri gratuiti di Google che puoi utilizzare sul tuo sito Web – e cerca un titolo che ti piace davvero.
  • Quindi, prendi il nome di quel font e cercalo in Font Pair: è una libreria di abbinamenti di font pre-creati che vanno bene insieme.
  • Scegli un abbinamento che sembra fantastico.
  • Annota i nomi di entrambi i caratteri, ti serviranno in seguito.

Farlo in questo modo accelererà il tuo processo e ti darà comunque un grande risultato.

Esempio, abbiamo trovato un font chiamato Bree Serif in Google Fonts che ci piace molto:

Bree-Serif

Quindi, l’abbiamo portato su Font Pair, e il sito ha suggerito che Bree Serif si sposa bene con Open Sans. Perfetto:

Bree-Serif-aperti-sans

La struttura finale

Finalmente l’ultimo passo!

L’intero punto di questo capitolo è di atterrare su un layout / struttura finale che utilizzerai per il tuo sito. A questo punto, dovresti essere quasi sicuro delle cose che vuoi fare con il tuo design e l’interfaccia utente.

Cose da preparare dopo questo capitolo:

  • I tuoi obiettivi utente sono chiaramente elencati.
  • Il wireframe ha ricontrollato per assicurarsi che tali obiettivi non siano confusi.
  • La combinazione di colori selezionata.
  • La tipografia ha capito.
  • L’intero layout / struttura / organizzazione del sito Web.

Ulteriori letture: 

  • UX Magazine
  • UX Booth
  • La psicologia e l’emozione dietro il colore nel web design
  • Che cos’è il design dell’esperienza utente? Panoramica, strumenti e risorse
  • Stabilire obiettivi aziendali intelligenti per un sito Web
  • 8 regole per creare una tipografia efficace

CAPITOLO 4: WordPress, HTML o Modelli?

Decidi quale percorso seguire: i sistemi di gestione dei contenuti o codificali da zero

Qui è dove inizia il vero lavoro sporco, sporco, sotto il cofano!

Questa è probabilmente anche la parte più spaventosa del processo (ammettilo!).

Per una volta, è il momento giusto per mettere da parte carta e penna e iniziare a lavorare con alcuni software.

E proprio fuori dal cancello, ci sono un sacco di domande …

  • Dovrei imparare l’HTML?
  • Che dire di CSS?
  • I modelli di siti Web HTML già pronti faranno il trucco per me?
  • Devo imparare un linguaggio di programmazione come PHP?
  • Ho sentito che WordPress è il modo di costruire un sito in questi giorni.
  • Ho visto l’annuncio del Super Bowl di Squarespace. Cosa succede con quello?
  • Come si chiama Joomla? o Drupal?
  • E ancora e ancora e ancora.

La risposta a tutti questi è sì.

Come in, sì, puoi fare una o tutte queste cose, e spetta solo a te decidere quale percorso scegliere.

Quello che stiamo cercando di dire è che non esiste il miglior approccio n. 1 qui. Tutto dipende da quanto sei interessato a partecipare allo sviluppo web, da quanto delle basi della costruzione del sito web vuoi imparare, da quanto velocemente hai bisogno di un sito di qualità e da come personalizzabile che vuoi che sia in seguito.

Ecco quindi come procederemo da questo capitolo in avanti. Primo, scegli la persona che ti definisce meglio:

  • un) Voglio imparare di cosa tratta lo sviluppo web, tutte le basi, tutti i meccanismi interni di un sito Web e tutti i meccanismi che fanno funzionare un sito Web.
  • b) Voglio imparare come utilizzare un costruttore di siti Web affidabile che gestirà la maggior parte del lavoro pesante per me.
  • c) Io non so cosa fare. Voglio solo un sito Web che posso costruire da solo e che funzioni correttamente.

Risposta a)? Vai al capitolo 5.

Risposta b)? Vai al capitolo 6.

Risposta c)? Sentiti libero di leggere questo articolo e poi tornare (dovrebbe aiutarti a selezionare il percorso perfetto):

  • 8 migliori piattaforme di blog e creazione di siti Web esaminate … Ogni piattaforma è descritta insieme ai suoi pro e contro e la risorsa suggerisce anche la migliore scelta disponibile (Wix o SB) per le tue esigenze specifiche.

Lo hai letto? Grande! Quindi quale delle persone sopra ti descrive meglio – a) o b)?

Gli strumenti che potrebbero esserti utili lungo il percorso:

  • Grafica: Paint.NET, Gimp, Pixlr.
  • Scrittura codice: Notepad ++, TextWrangler, SublimeText.
  • Direzione del lavoro: Trello.
  • Design: combinazioni di colori, Google Fonts, gli strumenti da qui.
  • Fotografia: Unsplash, AllTheFreeStock

CAPITOLO 5: Introduzione a HTML, CSS & Javascript

Come i siti Web sono una realtà integrata

In questo capitolo, illustreremo le nozioni di base dello sviluppo Web, spiegheremo i termini più importanti e ti invieremo quindi ad alcune risorse specifiche in cui puoi approfondire le tue conoscenze e abilità.

HTML

HTML è la lingua dei siti Web. Ogni pagina web viene creata o convertita in HTML ad un certo punto.

Ad esempio, per vedere la struttura HTML di questa guida che stai leggendo qui, basta premere “Ctrl + U” sulla tastiera.

HTML definisce ogni blocco che vedi in una pagina web. Alla fine della giornata, per visualizzare qualsiasi cosa su una pagina Web, deve essere convertito in HTML.

Per imparare l’HTML in modo efficace, ti consigliamo di iscriverti a uno dei corsi (gratuiti o a pagamento) disponibili sul web. Alcuni dei migliori possono essere trovati presso Codeacademy o Treehouse.

Ad esempio, ecco una sezione specifica di Codeacademy su HTML e CSS.

Homepage di CodeCademy

Questo è l’approccio globale all’HTML.

CSS

Il CSS – per saltare i noiosi dettagli tecnici – è responsabile dello stile di tutto ciò che è visibile in una pagina web.

CSS accetta tag HTML, quindi strutture e aggiunge stile. Cose come: testo in grassetto, regolazioni del colore, ombre, layout, persino animazioni, ora vengono eseguite principalmente con CSS.

Per una migliore comprensione di come funziona esattamente, passa a questo rapido corso alla Codeacademy.

Per un apprendimento più approfondito, controlla anche le sezioni CSS su Codeacademy o Treehouse.

JavaScript, jQuery, Bootstrap, ecc.

JavaScript è un linguaggio di programmazione che ti consente di introdurre alcune azioni dinamiche sul tuo sito web. Ad esempio, puoi fare cose come convalidare i moduli web o interagire con l’utente in modo più snello senza dover ricaricare la pagina in cui si trovano. Ecco un bel tutorial di w3schools.

Tenendo presente ciò, jQuery è una libreria JavaScript che ti consente di creare cose avanzate con meno codice. Molto utile per uno sviluppatore web. Ulteriori informazioni qui.

Infine, Bootstrap è un’invenzione molto interessante. Originariamente introdotto da Twitter, è fondamentalmente un ambiente front-end che accelera il processo di costruzione di un sito Web fornendo la maggior parte degli elementi del sito comuni già pre-costruiti. Sembra complicato, no?

Ma non lo è. Dai un’occhiata a questo corso di base presso Codeacademy (a proposito, questo è il modo in cui abbiamo originariamente imparato Bootstrap).

Cose da preparare dopo questo capitolo:

  • Fondamentalmente, la prima bozza del tuo sito Web HTML / CSS è stata completamente costruita. Da lì, puoi iniziare a iterare e migliorare il risultato finale.

CAPITOLO 6: Piattaforme per la creazione di siti Web

Stai configurando il tuo primo sito? Prova piattaforme web gratuite come WordPress, Joomla o Drupal

Capitolo 6: Piattaforme per la creazione di siti Web

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Ci sono più costruttori di siti web là fuori di cui puoi agitare un bastone. (Se sei il tipo di persona che agita si attacca alle cose.)

Va bene, scherzi a parte.

Chiaramente, se non hai il desiderio di imparare a programmare le cose a mano, sono sicuramente più soluzioni che possono aiutarti.

Nota. Tieni presente che tutto il resto di cui abbiamo discusso nei capitoli 1-4 si applica ancora qui. Anche se scegli una soluzione per la creazione di siti che è un po ‘pratica, devi comunque fare attenzione a rendere il prodotto finale amichevole per gli utenti e in sintonia con gli obiettivi di tutti. Quegli strumenti di costruzione del sito sono esattamente … strumenti.

A partire da quelli che sono i più facili da comprendere:

SquareSpace

L’unica piattaforma di siti Web che pubblicizza durante il Super Bowl.

In breve, una soluzione molto utile che può essere utilizzata da chiunque. Non sono richieste competenze preliminari.

Ti consente di creare siti Web classici, blog e persino negozi di e-commerce su cui abbiamo persino scritto una recensione. L’interfaccia e l’intero processo di utilizzo sono abbastanza facili da comprendere, inoltre i ragazzi di Squarespace offrono molti tutorial interessanti. Dai un’occhiata qui.

WordPress

Onestamente, adoriamo WordPress.

Il più delle volte, è la piattaforma perfetta con cui costruire un sito web. Ha il perfetto equilibrio tra complessità e facilità d’uso ed è praticamente infinitamente personalizzabile.

Animazione di WordPress

Inoltre, è attualmente la piattaforma di siti Web più popolare di tutti. Come condiviso dal creatore di WordPress – Matt Mullenweg – WordPress ora alimenta il 25% dell’intera Internet. Possono tutte quelle persone sbagliarsi?

Va bene, quindi per iniziare con WordPress in pratica hai solo bisogno del tuo dominio e hosting. Lo stesso software WordPress è completamente gratuito.

Per iniziare, sentiti libero di seguire uno di questi percorsi:

a) “Il percorso di avvio rapido”

  • Vai qui per imparare il modo semplificato di installare WordPress e avviare il tuo sito in un pomeriggio.
  • Scegli un tema gratuito dalla directory ufficiale: assicurati che sia in linea con gli obiettivi del tuo sito e che il layout / design non sia lontano dalla struttura desiderata (lo regolerai leggermente).
    • Controlla queste due risorse per imparare a personalizzare un tema esistente.
    • In alternativa, puoi scegliere un tema premium multiuso che può essere regolato tramite una comoda interfaccia utente (nessuna codifica coinvolta). Il tema X è un buon esempio di una cosa del genere.
  • Installa alcuni dei plugin più popolari e migliori per ottenere funzionalità extra.

b) “Il percorso approfondito”

  • Inizia imparando WordPress attraverso un corso online. Treehouse offre un fantastico.
  • Scegli il tuo tema e plugin come sopra. In alternativa, costruisci il tuo tema da zero.

Alla fine, WordPress è probabilmente la piattaforma di siti Web più versatile sul mercato. Con esso, puoi costruire praticamente qualsiasi tipo di sito Web, non solo blog o semplici siti aziendali. Ecco un elenco di 47 (!) Modi diversi di utilizzare WordPress, solo per farti pensare.

Joomla e Drupal

Sebbene leggermente diversi tra loro, Joomla e Drupal sono entrambi eccellenti sistemi di gestione dei contenuti per progetti Web più avanzati.

Non sono così forti dal punto di vista del design, ma sono altamente personalizzabili e in grado di gestire qualsiasi tipo di sito Web che potresti avere in programma.

A volte, a seconda della complessità del tuo progetto, potrebbero richiedere molto più tempo per padroneggiare e molti più sforzi per farlo.

Per una formazione più approfondita, ci sono fantastici corsi su Lynda.com, sia per Joomla che per Drupal.

Cose da preparare dopo questo capitolo:

  • La prima bozza del tuo sito Web è completamente costruita, non importa se hai deciso di utilizzare WordPress o qualche altra piattaforma.
  • Assicurati che sia in linea con i tuoi obiettivi iniziali, il pubblico di destinazione e che offra una buona UX.

CAPITOLO 7: Mobile Responsive Design

Oltre il 60% delle persone utilizza cellulari e tablet per navigare sul Web

La reattività mobile è ora un aspetto molto importante della costruzione di siti Web, probabilmente più di quanto non sia mai stato.

Ecco di cosa tratta l’intero problema:

Fondamentalmente, in questo momento, ci sono più persone che utilizzano dispositivi mobili per accedere al Web che mai. In effetti, si stima che ora ci siano più utenti di Internet mobile rispetto agli utenti di Internet desktop (75,1% vs 52,7%).

Ma c’è un problema.

Non tutti i progetti di siti Web saranno ottimizzati per essere visualizzati su dispositivi mobili direttamente dal gate.

Alcuni problemi comuni includono:

  • i caratteri sono troppo piccoli,
  • il layout stesso non si adatta affatto a uno schermo più piccolo,
  • o la tecnologia utilizzata per creare il sito non disponibile su dispositivi mobili.

È qui che entra in gioco l’idea della reattività mobile.

Un sito Web reattivo risponde all’ambiente in cui viene visualizzato. Se si tratta di un computer desktop, il sito Web viene visualizzato in un certo modo. Se è un cellulare, viene visualizzato in un altro modo.

Ecco una spiegazione migliore: What Heck Is Responsive Web Design?

Quindi la cosa da fare in questo momento sarebbe quella di controllare e assicurarsi che il tuo sito Web funzioni su dispositivi mobili. Usa i tuoi dispositivi per verificarlo, ma prova anche il test mobile di Google o passa a uno strumento come Responsive Design Tester.

Se ci sono problemi, è necessario risolverli.

Alcune soluzioni:

  • Responsive Web Design: come fare
  • Come rendere il sito Web reattivo in circa 15 minuti

CAPITOLO 8: Riunire tutto insieme

Conosci le basi, ora tocca a te

Aspetta, ci siamo quasi!

Questo è l’ultimo capitolo del nostro viaggio piuttosto lungo.

A questo punto, dovresti avere il tuo primo sito web costruito … Sia con WordPress, HTML / CSS costruito a mano, qualche costruttore di siti Web o qualunque altro strumento tu abbia selezionato per il lavoro.

In breve, complimenti! Ma ci sono ancora un paio di cose che vale la pena fare:

  • Ricontrolla le cose di cui abbiamo discusso nei capitoli 1 e 2. Assicurati che gli obiettivi effettivamente funzionino per l’utente finale e che il sito Web non sia fonte di confusione.
  • Convalida la struttura del codice tramite il servizio di convalida markup del W3C.
  • Controlla se non ci sono problemi di sicurezza con il sito. Usa lo scanner di Sucuri per questo.
  • Ottieni feedback dalla community. Controlla cosa pensano gli altri del tuo lavoro. I forum su Sitepoint possono essere utili.

Se questa è la tua prima lettura di questa risorsa, ti incoraggiamo davvero a tornarci un paio di volte e trattarlo come un file di riferimento per la tua ulteriore formazione.

Come abbiamo detto all’inizio, sentiti libero di usare il sommario e navigare da capitolo a capitolo e da risorsa a risorsa come meglio credi.

Infine, siamo curiosi … qual è la tua più grande sfida quando si tratta di costruzione di siti Web, sviluppo web o design? Si prega di condividere nei commenti o via Twitter. Siamo tutti orecchi!

Grazie per aver letto, sei fantastico!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map