Mentre lo sviluppo web si riferisce in genere al markup e alla codifica Web, include tutte le attività di sviluppo correlate, come ad esempio:
- Scripting lato client (scrittura del codice front-end)
- Script sul lato server (scrittura del codice back-end)
- Configurazione della sicurezza del server e della rete (impostazione della sicurezza per browser e reti)
- Sviluppo dell'e-commerce (creazione di siti web di e-commerce e negozi online)
- Sviluppo del sistema di gestione dei contenuti (scrittura e creazione di siti Web)
Termini di sviluppo Web da sapere
Prima di immergermi nel processo di sviluppo web, passiamo in rassegna alcuni termini di sviluppo web che potresti vedere in questo pezzo.
Sito web
siti web sono file archiviati su server, che sono computer che ospitano siti Web (termini fantastici per "file di archivio per"). Questi server sono collegati a una rete gigantesca chiamata Internet … o al World Wide Web (se stiamo seguendo la terminologia degli anni '90). Parliamo di più sui server nella prossima sezione.
browser sono programmi per computer che caricano i siti Web tramite la tua connessione Internet, come Google Chrome o Internet Explorer. Il tuo computer è anche conosciuto come cliente.
Indirizzo IP (Internet Protocol)
Protocollo Internet è un insieme di standard che regolano l'interazione su Internet.
Per accedere a un sito Web, è necessario conoscere il suo indirizzo IP. Un indirizzo IP è una stringa univoca di numeri. Ogni dispositivo ha un Indirizzo IP per distinguersi dai miliardi di siti Web e dispositivi connessi tramite Internet.
L'indirizzo IP per HubSpot è 104.16.249.5. Puoi trovare l'indirizzo IP di qualsiasi sito Web utilizzando il prompt dei comandi su Windows o Network Utility> Traceroute su MacBook o visitando un sito come Sito 24×7 ..
Per trovare l'indirizzo IP del tuo dispositivo, puoi anche digitare "qual è il mio indirizzo IP" nel browser di ricerca.
Mentre è possibile accedere a un sito Web utilizzando il suo indirizzo IP, la maggior parte degli utenti di Internet preferisce utilizzare i nomi di dominio o passando attraverso i motori di ricerca.
HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol collega te e la tua richiesta del sito web al server remoto che ospita tutti i dati del sito web. È un insieme di regole (un protocollo) che definisce come i messaggi dovrebbero essere inviati su Internet. Ti permette di saltare tra le pagine del sito e i siti web.
Quando si digita un sito Web nel browser Web o si cerca qualcosa tramite un motore di ricerca, HTTP fornisce un framework in modo che il client (computer) e il server possano parlare la stessa lingua quando inviano richieste e risposte tra loro su Internet. È essenzialmente il traduttore tra te e Internet: legge la richiesta del tuo sito web, legge il codice inviato dal server e lo traduce per te sotto forma di un sito web.
Linguaggio di codifica
Coding si riferisce alla scrittura di codice per server e applicazioni. Si chiama "linguaggio" perché è composto da vocaboli e regole grammaticali per comunicare con i computer. Includono anche comandi speciali, abbreviazioni e segni di punteggiatura che possono essere letti solo da dispositivi e programmi.
In un certo senso, anche gli sviluppatori sono traduttori.
Tutto il software è scritto da almeno uno linguaggio di programmazione, ma variano tutti in base a piattaforma, sistema operativo e stile. Esistono molti tipi diversi di linguaggi di codifica … tutti raggruppati in due categorie (scritte da due diversi tipi di sviluppatori): front-end e back-end.
Fine frontale
Fine frontale (o lato client) è il lato dello sviluppo web che vedi e interagisci con un utente di Internet. Quando le informazioni sul sito web vengono trasferite da un server a un browser, i linguaggi di codifica front-end consentono al sito Web di funzionare senza dover continuamente "comunicare" con Internet.
Il codice di front-end consente agli utenti come te e me di interagire con un sito Web e riprodurre video, espandere o ridurre a icona le immagini, evidenziare il testo e altro. Gli sviluppatori Web che lavorano sulla codifica front-end funzionano sviluppo sul lato client.
Tratteremo alcuni linguaggi di codifica front-end nella prossima sezione.
Back-end
Back-end (o lato server) è il lato che non vedi quando usi internet. È l'infrastruttura digitale, e per i non sviluppatori, sembra un mucchio di numeri, lettere e simboli.
Gli sviluppatori back-end lavorano in sistemi come server, sistemi operativi, API e database e gestiscono il codice per sicurezza, contenuto e struttura del sito.
Esistono più linguaggi di codifica back-end rispetto ai linguaggi front-end. Questo perché i browser – al front-end – comprendono solo JavaScript, ma un server – nel back-end – può essere configurato per comprendere (praticamente) qualsiasi linguaggio. Tratteremo alcuni linguaggi di codifica back-end nella prossima sezione.
Content Management System (CMS)
Un sistema di gestione dei contenuti è un'applicazione Web o una serie di programmi utilizzati per creare e gestire contenuti Web. (Nota: i CMS non sono la stessa cosa dei costruttori di siti, come Squarespace o Wix.)
Anche se non è necessario costruire un sito Web, l'utilizzo di CMS è sicuramente più semplice. Fornisce i blocchi predefiniti (come plug-in e componenti aggiuntivi) e ti consente di creare la struttura con il tuo codice. I CMS vengono generalmente utilizzati per l'e-commerce e il blog, ma sono utili per tutti i tipi di siti Web.
Perché conoscere lo sviluppo Web?
Potresti essere un imprenditore che assume uno sviluppatore freelance per costruire il tuo sito web, un marketer che lancia una visione al tuo team di sviluppo o uno studente che apprende lo sviluppo come una carriera. Indipendentemente da chi sei o perché stai leggendo questa guida, capire le basi dello sviluppo del sito web può essere utile in questo mondo guidato dalla tecnologia.
Internet non sta andando via in qualunque momento presto. In realtà, è diventato un portale e il metodo principale di ricerca, connessione, educazione e intrattenimento nel mondo.
A partire dal 2018, ci sono 4,2 miliardi di utenti Internet globali. Questo è più della metà della popolazione mondiale, e queste persone usano Internet per una grande varietà di ragioni.
Qual è l'unica cosa in comune tra questi motivi? Richiedono un sito Web e ogni sito Web richiede uno sviluppatore Web esperto.
Lo sviluppo Web è anche un'industria in rapida espansione. Tra oggi e il 2026, l'occupazione degli sviluppatori web dovrebbe aumentare del 15%. È molto più veloce della maggior parte delle altre carriere tecnologiche.
Se stai cercando di assumere uno sviluppatore web o diventare uno, è bene sapere che il percorso di carriera offre posizioni ad alta domanda e ad alto valore. Continua a leggere per saperne di più sul processo di sviluppo web e non dimenticare di controllare le risorse per gli sviluppatori sotto.
Processo di sviluppo del sito Web
Il processo di creazione di un sito Web non è facile come 1-2-3. Ogni percorso di sviluppo è diverso in base al tipo di sito Web, ai linguaggi di codifica e alle risorse.
La seguente sezione offre una breve panoramica del processo di sviluppo Web e una breve introduzione alle più comuni lingue e opzioni CMS.
Pianificazione del tuo sito Web e creazione di una Sitemap
Tutti i siti Web iniziano con un piano. Gli sviluppatori chiamano questo piano un wireframe o una sitemap (da non confondere con sitemap.xml, che è un file che aiuta la scansione dei SERP e trova il tuo sito). Non deve essere un documento ufficiale; è semplicemente una visione per il tuo sito che ti darà sia la direzione di te che del tuo sviluppatore (i) e un punto di partenza. Puoi disegnarlo su una lavagna o utilizzare uno strumento come Invision, Slickplan o Mindnode.
Proprio come un business plan offre a un potenziale investitore informazioni sui tuoi obiettivi e risultati, una sitemap offre allo sviluppatore un'idea di ciò che stai immaginando e delle informazioni necessarie per soddisfare la tua visione. Puoi creare la tua Sitemap da solo o lavorare con i tuoi sviluppatori.
Ecco alcune domande da porsi quando pianifichi il tuo sito.
- Che pagine individuali vuoi? Quale contenuto sarà su quelle pagine?
- Come puoi organizzare quelle pagine in categorie? (Queste categorie potrebbero rappresentare il menu della tua home page – se aiuta a pensarci in questo modo.)
- Qual è la gerarchia delle pagine sul tuo sito?
- Come si collegheranno le pagine?
- Quali pagine e categorie sono essenziali per il tuo sito e la tua esperienza utente e quali potrebbero essere rimossi o combinati?
Scrivere il codice del tuo sito web
Il prossimo passo nel processo di sviluppo web sta scrivendo il codice.
Gli sviluppatori utilizzeranno linguaggi di codifica diversi per il front-end e il back-end dei siti Web, nonché per le diverse funzionalità del sito (come design, interattività, ecc.) Queste lingue diverse collaborano per creare ed eseguire il tuo sito.
Iniziamo con le lingue più comunemente usate. Quasi tutti i siti web usano questi tre insieme, e probabilmente anche il tuo lo farà.
HTML
HyperText Markup Language (HTML) è stato utilizzato dagli anni '90. È il fondamento di tutti i siti Web e rappresenta il minimo indispensabile di ciò che è necessario per creare un sito web. (Sì, è possibile creare un sito Web con solo HTML. Tuttavia non sarebbe troppo bello.)
Lingue come CSS e JavaScript migliorano e modificano la struttura di base del sito costruita da HTML. HTML5 è la versione più recente e supporta la funzionalità del browser multipiattaforma, rendendola popolare nello sviluppo di applicazioni mobili.
CSS
Cascading Style Sheets (CSS) è stato sviluppato alla fine degli anni '90. Aggiunge elementi di design come la tipografia, i colori e i layout ai siti Web; è il codice cosmetico.
Il CSS consente agli sviluppatori di trasformare il tuo sito web in modo che corrisponda all'estetica che hai immaginato per il tuo sito e, come HTML5, il CSS è compatibile con tutti i browser.
JavaScript
JavaScript è la ciliegina sulla torta dei linguaggi di programmazione. Creato a metà degli anni '90, JavaScript viene utilizzato per aggiungere funzionalità ai siti Web. Gli sviluppatori lo usano per aggiungere animazioni, automatizzare le attività all'interno di determinate pagine e aggiungere funzionalità interattive che migliorano l'esperienza dell'utente.
JavaScript è in rapida evoluzione. Una volta considerato un linguaggio "giocattolo", JavaScript è ora il linguaggio di codifica più utilizzato al mondo. Con l'aiuto di Node.Js, ora è un linguaggio di codifica back-end. È la prima lingua che deve essere compresa dal browser, e alcuni hanno persino discusso di applicare l'apprendimento automatico ad esso.
HTML, CSS, JavaScript sono i "tre grandi" dello sviluppo web. Quasi tutti i siti Web li utilizzano in qualche modo. Ce ne sono molti altri, come linguaggi sul lato server come Java, C ++, Python e SQL, ma la comprensione di questi tre è fondamentale per la conoscenza dello sviluppo del tuo sito web.
Costruire il back-end del tuo sito web
Scrivere codice potrebbe essere una delle parti più complicate dello sviluppo web, ma non è certo l'unico componente. Devi anche costruire il tuo back-end e le strutture e il design del sito front-end.
Iniziamo con il back-end.
Il back-end gestisce i dati che abilitano la funzionalità sul front-end. Ad esempio, il back-end di Facebook memorizza le mie foto, in modo che il front-end possa quindi consentire ad altri di guardarle. È composto da due componenti principali:
- Banche dati, che è responsabile per l'archiviazione, l'organizzazione e l'elaborazione dei dati in modo che sia recuperabile dalle richieste del server
- server, che è l'hardware e il software che compongono il tuo computer. I server sono responsabili dell'invio, dell'elaborazione e della ricezione delle richieste di dati. Sono l'intermediario tra il database e il client / browser. Il browser, in effetti, dirà al server "Ho bisogno di queste informazioni" e il server saprà come ottenere tali informazioni dal database e inviarlo al client.
Questi componenti lavorano insieme per costruire le basi di ogni sito web.
Per quanto riguarda la costruzione il tuo sito web, gli sviluppatori di back-end stabiliranno tre cose.
- Il tuo codice logico, che è essenzialmente un insieme di regole su come il tuo sito web risponderà a determinate richieste e su come gli oggetti del tuo sito web interagiranno.
- Il tuo gestione del database, che è il modo in cui il tuo sito web organizzerà, gestirà e recupererà i suoi dati. Maggiori informazioni su SQL vs. NoSQL qui.
- Il tuo infrastruttura, che è il modo in cui verrà ospitato il tuo sito. Ospitare il tuo sito ti darà un maggiore controllo, ma è molto più costoso e richiede di mantenere la salute e la sicurezza del proprio server.
Con questi componenti e le decisioni in atto, il tuo sito Web sarà pronto per lo sviluppo front-end.
Nota: Il back-end è leggermente tangenziale allo sviluppo web perché non è sempre necessario un back-end se non si memorizzano dati. "Dati" in questo contesto indica qualsiasi informazione inserita dall'utente che è necessario salvare e persistere. Pensa al login in un sito web. Se non hanno un back-end, come potrebbero ricordare le informazioni di accesso? O quali sono le impostazioni del tuo profilo? Per ottenere queste informazioni, hai bisogno di un back-end.
Facebook, ad esempio, ha bisogno di sapere cosa sono le persone nel tuo elenco di amici, quali eventi hai unito, quali post hai creato e altro ancora. Questo è tutto "dati" che vive in un database. Se non avessero un back-end con un database, nessuno di quei dati sarebbe accessibile a loro.
D'altra parte, un sito web che è puramente informativo e non richiede che gli utenti inseriscano alcun dato non avrebbe bisogno di un back-end.
Quindi, se non hai dati, non hai necessariamente bisogno di sviluppo back-end. Ma questo non significa che non dovresti imparare le basi. Non sai mai quando potresti averne bisogno.
Costruire il front-end del tuo sito web
Se ti sei mai imbattuto in web design o giocato con un sito Web in WordPress o Squarespace, hai toccato lo sviluppo web front-end.
Il materiale di front-end è importante: è ciò che vedono i tuoi visitatori, i clienti e gli utenti e in che modo utilizzeranno il tuo sito web.
Lo sviluppo front-end (o lato client) include una combinazione di JavaScript, HTML e CSS. Controlla anche componenti come la tipografia, la navigazione, il posizionamento e la compatibilità e la reattività del browser. Questa parte riflette maggiormente la visione iniziale del tuo sito e ciò che hai incluso nel tuo wireframe.
Man mano che cambiano le preferenze della tecnologia e dei consumatori, la codifica lato client tende a diventare obsoleta … molto più rapidamente rispetto allo sviluppo back-end. Questo è dove le risorse di codifica (come quelle che abbiamo incluso sotto) sono utili.
Lavorare con un CMS
Perché qualcuno dovrebbe scegliere un CMS oltre la codifica "a mano" o "da zero?" Beh, un CMS – come Wordpress o HubSpot – è più facile da usare (devi scrivere meno codice) e spesso ha gli strumenti per ospitare il sito . D'altra parte, è meno flessibile e, quindi, ti dà meno controllo sul tuo front-end.
Le opzioni CMS includono spesso anche plugin che rimuovono la necessità di scrivere un back-end. Ad esempio, esistono plug-in WordPress per l'e-commerce in modo che, invece di creare un back-end complicato per addebitare le carte di credito dei clienti, è sufficiente utilizzare un plug-in esistente ed evitare la necessità di gestire database e codice lato server a tutti.
I più diffusi sistemi di gestione dei contenuti includono HubSpot, Joomla, Magento e WordPress, che detengono quasi il 60% della quota di mercato. (In questo caso stiamo parlando di software WordPress open source, non del costruttore di siti WordPress.)
Acquisizione di un nome di dominio
A questo punto, il tuo sito web avrà un indirizzo IP. Ha anche bisogno di un nome di dominio che i tuoi visitatori possano usare per trovare il tuo sito.
Forse hai sentito di siti come GoDaddy e Hover. Questi servizi consentono di acquistare un nome di dominio e registrarsi con ICANN (Internet Corporation per nomi e numeri assegnati). La maggior parte delle registrazioni di domini è valida per un anno prima che tu debba rinnovare.
I costruttori di siti e i servizi di hosting, come WordPress e Squarespace, ti consentono anche di acquistare un nome di dominio.
Risorse per lo sviluppo di siti Web
Interessato a saperne di più su sviluppo e codifica? Al di fuori del collegamento e della rete con altri sviluppatori, ci sono molte risorse che puoi attingere per favorire la comprensione o lo sviluppo web.
Corsi e classi di sviluppo Web
Sia che tu voglia esplorare la codifica back-end, front-end o full-stack, ecco alcuni corsi e corsi online consigliati dai nostri sviluppatori HubSpot.
TutorialsPoint
Tutti i contenuti e le risorse su TutorialsPoint sono gratuiti. Tra tutorial, ebook e video, TutorialsPoint offre molti modi diversi per imparare.
intellettuale
Secondo il loro sito web, "egghead è un gruppo di professionisti dello sviluppo del web e collaboratori open source che offrono corsi video concisi e densi di informazioni sui migliori strumenti del settore". Gli utenti possono seguire corsi, ascoltare i podcast o prendere lezioni su una vasta gamma di argomenti di sviluppo web.
Khan Academy
Khan Academy è una ben nota risorsa educativa gratuita. Gli utenti possono apprendere qualsiasi cosa, dalla macroeconomia all'algebra lineare alla storia degli Stati Uniti, così come una manciata di argomenti informatici.
freeCodeCamp
freeCodeCamp è un'organizzazione non-profit (come Khan Academy) che aiuta le persone a imparare a programmare gratuitamente. Con migliaia di articoli, video e lezioni interattive, oltre a gruppi di studio in tutto il mondo, freeCodeCamp aiuta migliaia di sviluppatori e ingegneri a conoscere i lavori di programmazione e di sviluppo del territorio.
Casa sull'albero
Team Treehouse è un programma di apprendimento online basato su abbonamento. Gli utenti pagano una tariffa mensile e hanno accesso a centinaia di corsi su oltre 20 argomenti diversi. Da JavaScript a Python a PHP, Treehouse può insegnarti tutto ciò che devi sapere sullo sviluppo web.
Comunità di sviluppo Web
Gli sviluppatori Web sono padroni di Internet, quindi ha senso che si incontrino lì.
Secondo Code Condo, gli sviluppatori si uniscono a queste comunità per:
- Informazioni aggiornate e risoluzione dei problemi
- Risposte perspicaci, nuove prospettive
- Suggerimenti e trucchi per programmatori di tutti i livelli
- Collegamenti a risorse, colloqui e documenti di ricerca
- Incontrare nuovi amici, compagni di codice e potenziali partner
Ecco alcune community online consigliate dai nostri sviluppatori HubSpot.
Stack Overflow
Stack Overflow è stato introdotto dieci anni fa e da allora è diventato una delle comunità di programmazione più popolari al mondo. Secondo il co-fondatore Jeff Atwood, "[Stack Overflow] è da programmatori, per programmatori, con l'intento ultimo di aumentare collettivamente la somma totale delle buone conoscenze di programmazione nel mondo. "
Stack Overflow è un ottimo posto dove andare con le domande perché la maggior parte delle volte, altri sviluppatori hanno chiesto e risposto agli stessi. I forum di Stack Overflow ti tengono in contatto con altri sviluppatori e ti tengono informato.
Mozilla Development Network (MDN)
La rete di sviluppo di Mozilla è nota per essere più accurata e accurata rispetto ad altre risorse online. Non è tanto una comunità quanto una risorsa completa e una biblioteca di documenti per le lingue di codifica. È utile quando si apprende come funzionano determinate funzioni e si aggiorna costantemente sulle novità di programmazione e di sviluppo.
Reddit è una community basata su forum dove gli sviluppatori di tutti i livelli si riuniscono per chiedere e rispondere alle domande. È incredibilmente interattivo e include persone provenienti da tutto il mondo. Puoi anche unirti a "subreddits" in base a un argomento, come ad esempio il web design, JavaScript o il free lance.
A voi
Internet è qui per rimanere. Sta migliorando ogni giorno e gli sviluppatori web sono in prima linea in queste innovazioni e miglioramenti. Da questo blog al social network preferito alle app che utilizzi sul telefono, lo sviluppo web tocca quasi ogni parte della tua giornata e la tua attività. Prenditi il tempo per capire la programmazione e la programmazione per migliorare non solo la tua vita ma anche la vita dei tuoi clienti.
Originariamente pubblicato il 28 novembre 2018 alle 7:00:00, aggiornato il 28 novembre 2018
Temi:
Sviluppo del sito web
