LIBERTÉ

COGESTIONE - by Sandy


Laboratorio di Web Development

Durante la cogestione al Liceo Scientifico "G.Galilei" di Nizza Monferrato è stato presente un piccolo laboratorio da me gestito per avvicinare le comuni genti all'ambiente dello sviluppo Web. Pubblico subito le slide, utilizzando la funzione incorpora di Google Slides©.


Spiegazione delle Slide

1. Il Web Development è quell'insieme di tecniche di programmazione che permettono di creare applicazioni basate sul Web, ovvero create, basate e fruibili tramite una rete (Internet in questo caso). In questa sede non è possibile cercare di riassumere tutti i concetti alla base di questa grande parte dell'informatica per cui mi limiterò di dare pochi piccoli cenni e spunti di "riflessione" da prendere e, se si vuole, cogliere per entrare in questo ambito. Cominciamo subito:
2. Come grande passo iniziale penso sia indispensabile cercare di cappire la differenza tra sviluppo front-end e back-end. Per farlo mi avvalgo di una semplice metafora. Consideriamo un orologio: noi possiamo vedere le lancette di quell'orologio che si muovono e possiamo interagire con lui con la rotellina per farle girare. Ebbene, tutto ciò che un utente può vedere e con cui può interagire &egrace; creato dallo sviluppo front-end: ecco spiegato come il design delle lancette dell'orologio, la rotellina o qualsivoglia bottone in un sito sono creati. Tutti i processi che permettono alle lancette dell'orologio di funzionare, ovvero gli ingranaggi con i quali in linea generale l'utente non ha a che fare, sono creati con lo sviluppo Back-end. Sul web questo si tratta di tutto ciò che permette la comunicazione tra il server e il browser oppure tra server e database, etc. Tutto ciò che succede senza che gli utenti lo sappiano.
3. Quindi la maggior parte di linguaggi utilizzati per lo sviluppo front-end sono quelli di markup come HTML (che vediamo dopo), CSS ovvero ciò che definisce lo stile grafico di un sito e JavaScript che permette ad una pagina di far accadere degli eventi: come lo spostamento di un oggetto o il ricaricamento di parte o di tutta la pagina mentre praticamente tutti gli altri gestiscono il back-end. Tra questi cito il PHP, che rende dinamiche le pagine web ed è un discendente del linguaggio C, il SQL, che permette di creare database e di comunicare con essi, il linguaggio Python, a oggetti che permette sul web di creare la logica di un server e il suo contatto con altri codici, oppure ancora Java e .Net.
4. L'HTML, acronimo di HyperText Markup Language, non è un linguaggio di programmazione bensì un linguaggio di markup, ovvero quell'insieme di comandi che costituisce il layout di una pagina o del testo stesso. L'HTML è alla base di ogni pagina web: ne definisce infatti ogni aspetto fisico. Poich´ non è molto complesso, per soddisfare le esigenze di grafica sul web si è creato il codice CSS ovvero in italiano fogli di stile a cascata che quindi semplificano il processo di creazione della grafica da quello di layout effettivo rendendo le pagine meno pesanti (poichè basta linkarli) e agevolando il processo del riutilizzo del codice poiché basta crearne uno solo e linkarlo a tutte le pagine che si vuole. Ritordando all'HTML, è un codice di pubblico dominio e la sua sintassi è creata, convalidata e mantenuta da un consorzio web che nel 2014 ha rilasciato l'ultima versione valida: HTML5.
5. Come una cellula l'HTML è formato da tanti piccoli tessellini che lo vanno a comporre. Il più piccolo in ordine gerarchico che ha valenza è detto ELEMENTO che è generalmente così formato: vi è un tag di apertura inserito composto dal simbolo di minore e maggiore con in mezzo il nome dell'elemento, così <TAG>, poi vi è il contenuto effettivo dell'elemento che infine si chiude con un altro TAG uguale a quello di apertura con uno slash tra il simbolo di minore e il nome del tag, esempio: </TAG>. Esempio totale: <p>Hello World!</p> che nella pagina web aperta dall'utente mostrerà un testo (p sta per paragraph) con scritto Hello World!. Molti programmatori bypassano lo studio di questo linguaggio utilizzando un software detto WYSIWYG, acronimo inglese che significa vedi quanto ottieni, che permette di creare una pagina web senza modificare in alcun modo il codice sorgente. Per iniziare consiglio l'uso di NVU, che è semplice, veloce e intuitivo permettendo allo stesso tempo di modificare la pagina sia dall'editor grafico che dal codice sorgente.
6. Una pagina web è formata da due blocchi principali: l'head e il body. L'head, la testa, contiene tutte le informazioni della pagina quali nome oppure da quale foglio di stile deve attingere la sua grafica (anche sel'informazione più importante ovvero il tipo di pagina è definito prima dell'apertura dell'elemento HTML ed è definito Doctype ovvero tipo di pagina, ma son piccolezze) e il body che contiene tutta la struttura della pagina con anche il testo. Quindi gli elementi principali possono essere combinati tra loro come head e title ma in questo caso si comporteranno come le matriosche ovvero l'elemento padre va chiuso dopo la fine di quello del figlio. Se invece non dovessero andar combinati tra loro, allora sono indipendenti e l'uno va chiuso prima dell'inizio dell'altro come tra head e body.
7. Dopo questa iniziale introduzione, è bene approciarsi al mondo dello sviluppo web partendo dalla scelta di un sito di hosting, ovvero chi avrà i dati delle nostre pagine nei propri server, e per questo consiglio Altervista che è un servizio di hosting gratuito e permette di inserire sia il nostro codice sorgente, creato con HTML etc., che di utilizzare un CMS ovvero un software web prefabbricato che permette allo sviluppatore di svincolarsi dalla creazione delle varie pagine e dalla loro gestione e darsi invece all'allestimento dei contenuti. Il più famoso di questi è Wordpres che permette la creazione di blog ma anche, tramite molti plugin e temi precreati, di creare un sito di e-commerce o un sito aziendale. Un esempio è il nascituro sito del comitato Green. Un altro CMS simile offerto gratuitamente su Altervista è Drupal mentre per creare veri e propri portali come il sito web dell'istituto comprensivo di Montegrosso d'Asti. È possibile utlizzare anche il potente CMS phpBB che permette di creare dei forum, oramai obsoleti con l'era dei grandi social come Facebook, dei quali linko quello delle olimpiadi della matematica.