Lo sviluppo web è l’attività professionale di chi si occupa della creazione dei contenuti su Intenet, dalla gestione della rete, alla creazione dei database che conterranno la struttura e lo stile di un sito. Questa attività comprende anche la creazione delle web app, programmi che non necessitano di installazione e che possono essere utilizzate semplicemente tramite una connessione ad internet e l’accesso al sito che ospita il programma.
I linguaggi che riguardano lo sviluppo web spaziano dal semplice linguaggio che si occupa della struttura delle pagine su Internet a linguaggi di programmazione per semplificare il numero di file da creare e a rendere interattivo il sito per l’utente. Un altro linguaggio si occupa della gestione dei database per creare, aggiungere e modificare i file.
Il primo linguaggio che viene insegnato a chi vuole diventare uno sviluppatore è l’HTML, acronimo di HyperText Markup Language, un semplice linguaggio di markup per indicare la struttura, lo scheletro, di un sito web. E’ con questo linguaggio che si creano titoli, paragrafi, si aggiungono immagini e altri tipi di formati multimediali, si creano tabelle e si inseriscono i form per essere contattati o per fare registrare una persona al sito.
Per modificare e abbellire l’aspetto grafico di un sito web ci si serve del linguaggio CSS, Cascading Style Sheets che in italiano si traduce con fogli di stile a cascata. Bisogna indicare l’elemento inserito nei file HTML che si vuole modificare e poi si indicano le modifiche da effettuare.
Per quanto riguarda l’interattività di un sito, ci si avvale del linguaggio JavaScript che permette di creare delle funzioni per il consenso del trattamento dei dati personali o addirittura per creare dei giochi sul web. Il linguaggio PHP viene usato per rendere il sito dinamico, collega varie parti di ogni pagina web in modo che le sezioni più importanti possano essere modificate soltanto una volta per tutte le pagine interessate invece di andare a modificarle una per una.
Programmi e linguaggi per lo sviluppo web
Per potere sviluppare un sito web può essere necessario imparare ad utilizzare un editor di testo progettato proprio per questo tipo di lavoro. Permette di aggiungere i linguaggi che ci interessano e di avere suggerimenti, completamento automatico e avvisi sugli errori che facciamo.
Uno degli editor più utilizzati è Visual Studio Code, progettato da Microsoft. È disponibile su diversi sistemi operativi anche meno usati. Basta scaricarlo dal sito ufficiale e installarlo nel proprio PC o notebook. A seconda dei file che creiamo il programma ci suggerirà le estensioni da installare.
Il linguaggio HTML
Il linguaggio HTML è la base per scrivere un sito web. Anche quando ci si avvale dei linguaggi di programmazione è necessario conoscere la base di questo linguaggio di markup per sapere cosa modificare e come.
Dopo avere installato Visual Studio si può creare una cartella dedicata allo studio sullo sviluppo web e usarla per fare pratica. Se si clicca con il pulsante destro del mouse sulla cartella, tra le varie opzioni ci è data la possibilità di aprire la cartella con VS Code. La cartella verrà aggiunta automaticamente nell’area di lavoro del programma e potremo creare, modificare e cancellare file e cartelle direttamente da lì. La cartella viene visualizzata nella colonna a sinistra. A questo punto possiamo creare un file e chiamarlo home.html; al suo interno inseriremo la pagina principale del sito, la Home Page. Basterà scrivere html e il programma ci suggerirà delle parole per completare la procedura: cliccando o selezionando html:5 VS Code creerà automaticamente la struttura HTML della pagina principale. In basso viene riportato il codice con la relativa spiegazione nei commenti:
<!--
I commenti si inseriscono all'interno di queste parentesi.
I browser non mostrano ciò che scriviamo qui dentro.
Si possono usare i commenti per dire cosa stiamo facendo;
questo è utile in caso di codici complessi o quando vogliamo
insegnare qualcosa.
-->
<!--
Si inizia un file HTML scrivendo il tipo di documento.
Si crea un elemento html che conterrà la pagina e tutte le sue informazioni
-->
<!DOCTYPE html>
<html lang="it">
<!--
All'interno di head si inseriscono informazioni utili al browser e ai
motori di ricerca
Si inserisce anche il titolo della pagina o del sito nel caso stiamo
progettando la Home Page
-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Sviluppo web</title>
</head>
<!--
All'inteno di body viene aggiunto tutto ciò che vogliamo mostrare a
chi ci legge
-->
<body>
<!--
Qui inseriamo il contenuto.
-->
</body>
</html>
Le parentesi a forma di freccia con tutto ciò che c’è scritto al loro interno rappresentano un tag del file HTML. La scritta dentro le parentesi viene chiamata anche nome del tag. Ciascuno di loro indica al browser, programma che visualizza le pagine web, cosa stiamo facendo e come.
I tag possono essere di apertura <..> o di chiusura </..>. Questi due tag, assieme a tutto ciò che è compreso al loro interno rappresentano un elemento HTML. Possiamo indicare i sottotitoli e i paragrafi ma anche liste, tabelle e form. Sotto alcuni esempi:
<body>
<!--
Qui inseriamo il contenuto.
-->
<h1>Sviluppo web</h1>
<p>Benvenuti nel sito per gli sviluppatori del web</p>
<h2>Cosa facciamo</h2>
<img src="img.png" alt="immagine che mostra uno sviluppatore web al PC">
</body>| Tag | Significato |
| h1 | Titolo principale da inserire soltanto all’inizio della pagina |
| p | Un singolo paragrafo |
| h2 | Sottotitolo di una pagina web. il numero indica l’importanza |
| img | Inserisce un’immagine nel testo |
All’interno di un tag di apertura si possono inserire degli attributi, informazioni che permetto al browser di mostrare l’immagine desiderata e altre opzioni come la lunghezza e l’altezza. L’attributo alt rappresenta il testo alternativo da mostrare quando l’immagine non è disponibile: di norma dovrebbe indicare chiaramente ciò che si sta mostrando, specialmente quando è attinente all’argomento principale del sito o della pagina che stiamo scrivendo.
A questo punto possiamo già visualizzare la nostra pagina web. Ci sono diversi modi per farlo:
- Possiamo aprire il file dalla cartella sul PC come facciamo normalmente.
- Possiamo installare l’estensione Live Server e aprire il file direttamente con Visual Studio Code dopo avere fatto clic con il pulsante destro del mouse su di esso. Questa opzione ci permette di risparmiare tempo in quanto la pagina viene aggiornata automaticamente ogni volta che salveremo il nostro file .html.
Il CSS
Vediamo come si modifica il colore del testo. Creiamo un file style.css e lo colleghiamo al file HTML. All’interno dell’elemento head inseriamo il seguente codice:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<!-- Colleghiamo il file CSS -->
<link rel="stylesheet" href="style.css">
<title>Sviluppo web</title>
</head>
Il tag link indica un collegamento con un file esterno, l’attributo rel mostra che tipo di file vogliamo collegare e l’attributo href indica dove trovare il file e il suo nome.
Nel file style.css stabiliamo i seguenti colori:
h1, h2 {
color: red;
}
p {
color: rgb(5, 5, 130);
}
Per quanto riguarda il colore del paragrafo, innanzitutto è stato scelto il blu. Dopo avere cliccato sul nome del colore è apparso un riquadro dove è possibile personalizzare in maniera più dettagliata il colore desiderato.
In questo caso gli elementi che sono modificati (h1, h2 e p) vengono definiti selettori; le regole vengono inserite all’interno delle parentesi graffe e consistono nell’indicare la proprietà desiderata e il valore che essa deve assumere. Nell’esempio sopra abbiamo stabilito il valore dei colori dei sottotitoli e dei paragrafi generici. Se vogliamo modificare lo stile soltanto di specifici paragrafi dobbiamo avvalerci delle classi.
JavaScript
JavaScript è un linguaggio di programmazione: permette di aggiungere elementi interattivi per comunicare con un utente, gestire il consenso per il trattamento dei dati personali. Con questo linguaggio è possibile anche creare dei videogiochi.
Anche in questo caso bisogna creare un file con estensione .js, inserire un collegamento al file HTML e poi inserire il codice per le funzioni sul sito.
<script src="funzioni.js"></script>alert("Hai inserito uno script nel tuo sito");
PHP
Il linguaggio PHP viene utilizzato per collegare diverse parti di un sito nella stessa pagina o per creare dei modelli specifici per post e pagine. Per funzionare è necessario avere installato sul proprio dispositivo una piattaforma che si occupa dello sviluppo web e applicazioni o che permette di testarli. La sintassi e gli elementi di questo linguaggio sono simi allo JavaScript; le funzioni vanno tutte inserite all’interno del suo tag di apertura <?php …. ?>.
JSON
Viene utilizzato per lo scambio di informazioni. Su WordPress può essere usato per salvare lo stile dei blocchi e degli elementi di tutto il sito web, come anche dell’interfaccia di amministratore.
MySQL
È il linguaggio per gestire i database. Permette di ricercare qualunque cosa inserita nel sito, aggiungere file, modificarli o rimuoverli. Quando si acquista un hosting si ha a disposizione una sezione per potere creare dei database per chi vuole fare tutto manualmente.
Python
Python è uno dei linguaggi più versatili e facili da imparare. Si presta a molti utilizzi, tra cui lo sviluppo web, l’analisi dei dati, il machine learning e l’intelligenza artificiale. Ha una vasta gamma di librerie e framework che facilitano la realizzazione di applicazioni web dinamiche e scalabili.
Java
Java è un linguaggio open source e indipendente dalla piattaforma, che può essere utilizzato per quasi tutti i tipi di progetti. È orientato agli oggetti e ha molti framework e librerie per la programmazione web. È un linguaggio potente e robusto, ma anche piuttosto difficile da imparare e richiede più risorse rispetto ad altri linguaggi.
C#
C# è un linguaggio orientato agli oggetti, derivato dal C++, ma più semplice e moderno. È il linguaggio principale per lo sviluppo su piattaforma .NET di Microsoft, che offre molti strumenti e servizi per creare applicazioni web, desktop e mobile. È un linguaggio potente e versatile, ma richiede una buona conoscenza della programmazione ad oggetti.