Tempo stimato per la lettura 3 minuti

Ambiente di lavoro

In questa lezione vedremo come avviare un ambiente di lavoro per lo sviluppo di pagine web.

Più precisamente scaricheremo e installeremo i software necessari per lavorare in maniera ottimale e professionale.

Per iniziare ci bastano 2 programmi, uno per “trasformare” il nostro computer di lavoro in una sorta di server e uno per scrivere il codice delle nostre pagine web.

Simulare la navigazione del sito come se fosse realmente online

Quando si lavora alla progettazione di un sito web, è necessario simulare il suo comportamento come se fosse realmente online. Non sempre si ha la possibilità di farlo, quindi per essere sicuri di lavorare nel migliore dei modi è meglio creare le stesse condizioni nel computer locale sul quale stiamo lavorando “trasformandolo” in una sorta di server virtuale.

XAMPP il programma che trasforma il computer in un server

Icona del software xampp

Devi scaricare questo programma e installarlo sul tuo computer, per farlo basta cliccare qui https://www.apachefriends.org/it/download.html e scegliere la versione corrispondente al tuo sistema operativo.

Personalmente preferisco usare sempre le versioni più aggiornate di ogni programma, quindi in questo caso scaricherò XAMPP per Windows 7.4.4 (vedi immagine).

Anteprima della sezione download

Una volta scaricato il file si troverà nella cartella download

File di XAMMP scaricato

Lanciare l’eseguibile e installare il software. Se ti può essere d’aiuto segui la sequenza di immagini che trovi di seguito.

Premi YES per installare senza disattivare l’antivirus
Premi NEXT per avviare l’installazione di XAMPP
Premi NEXT per installare i componenti di XAMPP
Scegli su quale disco o cartella vuoi installare XAMPP
Scegli la lingua Inglese
Togli la spunta Learn more ecc…
Installa XAMPP
Attendere il completamento dell’installazione
Schermata che chiede di lanciare XAMPP

Premi su finish (vedi immagine sopra) di aprirà la finestra pannello di controllo del software.

Avvio del servizio Apache

Avvia il servizio “Apache” che consente al computer di diventare un web server. Gli altri servizi del software saranno affrontati nelle lezioni successive.

Digita sulla barra dell’indirizzo del browser la parola “localhost”, che sta ad indicare l’url del computer locale. Una volta digitato premi invio, se il servizio Apache di XAMPP è stato avviato correttamente comparirà una schermata simile all’immagine successiva e l’url sarà diventato http://localhost/dashboard/.

Pagina iniziale di XAMPP

La stessa finestra compare anche se nella barra dell’indirizzo digiti 127.0.0.1, indirizzo ip del server locale generato automaticamente da XAMPP. Consiglio di lavorare con l’indirizzo ip invece che con localhost in quanto le prestazioni risultano migliori in termini di velocità.

La cartella htdocs

La cartella htdocs conterrà tutti i nostri progetti in locale e ci consentirà di lavorare simulando la navigazione come se il sito fosse online. Tale cartella è posizionata in questo percorso C:\xampp\htdocs

Cartella htdocs di XAMPP

Crea all’interno di questa cartella una sotto cartella chiamata sitiweb.

Nuova cartella dentro htdocs
Nome cartella “sitiweb”

Digita nella barra dell’indirizzo del browser http://127.0.0.1/sitiweb/ a video comparirà una schermata come l’immagine seguente.

Percorso di lavoro sul browser

XAMPP è stato correttamente installato ed è perfettamente funzionante, l’indirizzo che hai precedentemente digitato corrisponde al percorso in locare che ti consentirà di vedere i tuoi progetti in locale come se fossero online.

Adesso crea due sotte cartelle di sitiweb che chiamerai html-base > lezione-2 (vedi immagine sotto). Volutamente ho scritto i nomi separati dal simbolo ” – ” il meno perché se stiamo simulando che il sito è online, non potrebbe avere un nome a dominio con lo spazio ma deve obbligatoriamente essere tutto attaccato.

www.mario rossi.it (non può esistere), www.mario-rossi.it (può esistere) .

Sposta il file index.html che abbiamo creato nella lezione 1 dentro la cartella C:\xampp\htdocs\sitiweb\html-base\lezione-2.

File index.html nella cartella di lezione 2

Ora torna sul browser e ricarica la pagina all’indirizzo http://127.0.0.1, la visualizzazione cambierà mostrandoci le cartelle contenute in htdocs, in questo caso solo “html-base”.

Cartella HTML-BASE

Dal momento che stiamo simulando la navigazione come se il sito fosse online, il nome della cartella “html-base” viene interpretato dal browser come un collegamento ipertestuale e quindi è diventato cliccabile. Cliccando sul link si accede al contenuto della cartella che in questo caso corrisponde a “lezione-2”.

Sotto cartella di HTML-BASE

A sua volta, cliccando su “lezione-2” si accede al contenuto della cartella. All’interno di questa cartella al momento è presente solo il file “index.html” che hai precedentemente spostato. Al click su lezione 2 viene mostrata la pagina web come se fosse online. Il browser dal momento che fil file si chiama index.html lo riconosce come home page e ce lo mostra.

Home page

Nella prossima lezione andremo a scaricare Atom, il programma che useremo per scrivere il codice HTML.

Atom