Chiunque gestisce un sito web o un blog che sia ad uso personale, commerciale o promozionale, potrebbe trarre grande giovamento dal conoscere in modo approfondito quelli che sono, a livello di linguaggi per il web, i quattro “pezzi” basilari che costituiscono forma, contenuto, interazione e funzionalità di ogni singola pagina.
Quello che cercheremo di spiegare in questo articolo riguarda la base di come funziona un sito web e in particolare di:
- CSS (che stabilisce la forma);
- HTML (che regola il contenuto);
- JavaScript (che cura l’interazione) ;
- PHP (per le funzionalità dinamiche);
a prescindere dal tipo di CMS usato ad esempio con un Hosting WordPress, Joomla, Drupal e così via. Tutto questo rappresenta il punto di partenza anche per come creare un sito web.
Il modello client-server
Qualunque sia la tecnologia sottostante, in effetti, per gli scopi della nostra trattazione bisogna sapere che le pagine di un sito web vengono usualmente servite secondo il modello client-server: più visitatori (client) in pratica, richiedono in vari momenti della giornata le pagine di interesse ad un server, reperendole a seconda dei casi mediante motori di ricerca, social network o semplice passaparola.
Questo modello è molto consolidato nel web, per quanto venga poi implementato con alcune piccole accortezze e differenze, al fine di aumentare l’efficienza del servizio ed evitare overload (sovraccarichi) del server.
HTML: “inscatola” i contenuti delle pagine
Il markup HTML, detto impropriamente “linguaggio” HTML, serve a codificare opportunamente il contenuto di una pagina, ed aiuta gli utenti (ma anche i motori di ricerca) ad individuare le parti di ognuna più o meno rilevanti.
Mediante una serie di specifici tag, ovvero stringhe delimitate dai simboli < e >, è possibile individuare degli elementi univoci di vario tipo: i link della pagina, le parti in grassetto o corsivo del testo, i paragrafi, le sezioni ed altro ancora.
La cosa più importante è che HTML introduce una sorta di “doppio livello” nei contenuti web: da un lato quello che scriviamo in termini di tag, dall’altro quello che risulta essere visibile all’utente mediante browser (la “resa” finale della pagina).
In alcuni casi i tag possono essere accompagnati da uno o più attributi, che servono a specificare le caratteristiche intrinseche degli elementi in questione.
Eccovi due esempi di uso molto comune sulle varie pagine web:
- <a href=”http://www.hostingvirtuale.com”>questo è un link a HostingVirtuale</a> (l’attributo è href valorizzato con il nome del sito tra virgolette; la resa sarà: questo è un link a HostingVirtuale;
- questo è un <strong>grassetto</strong>, questo un <em>corsivo</em>; qui la resa finale sarà: questo è un grassetto, questo un corsivo.
Esistono altri tag senza effetti grafici evidenti che servono a delimitare le sezioni logiche di un sito, come ad esempio gli <span> ed i <div>; quello che bisogna ricordare in generale, è che ogni tag presenta un inizio ed una fine, cioè uno di apertura (ad esempio <a> o <span>) ed uno rispettivo, di chiusura (ad esempio </a>, </span>).
Con l’introduzione di HTML5, inoltre, sono stati resi disponibili dei tag ulteriori più avanzati, come ad esempio <article> (per individuare gli articoli di blog e riviste online) e <video>.
CSS: stabilisce lo stile della pagina
HTML di per sè fornisce informazioni sui contenuti e sulla struttura delle pagine, ma non dice nulla riguardo alla forma presentativa finale ed è quindi parte determinante per comprendere come funziona un sito web.
Per esprimere al meglio questo aspetto, ad esempio:
- creare box rettangolari o dai bordi arrotondati;
- inserire effetti di ombreggiatura nei box;
- posizionare gli elementi nelle varie posizioni del testo;
- moltissimi altri effetti di stilizzazione, al fine di rendere gradevoli i contenuti web per gli utenti.
è possibile fare uso del CSS, in particolare nella sua versione CSS3, che offre effetti grafici di alto livello compatibili, di solito, con la maggioranza dei browser in circolazione.
Di solito il CSS si include in fogli di stile a parte (file .CSS), oppure si integra dentro HTML direttamente.
JavaScript: regola il livello di interazione lato client
Il Javascript è forse uno degli elementi più ostici, insieme a PHP, delle pagine web: si tratta di un linguaggio di programmazione lato client che permette di inserire degli effetti che facilitino le operazioni degli utenti, implementando ad es.:
- la possibilità di trascinare, riposizionare e dimensionare elementi (tag) HTML;
- l’opportunità di implementare meccanismi avanzati di interazione con la pagina;
- altri effetti di interazione atti per facilitare le operazioni che l’utente dovrà eseguire (ad esempio, durante la registrazione di un sito, la segnalazione di errori nella compilazione dei campi).
Non è raro inoltre, nelle pagine moderne, che JS interagisca con PHP (ad esempio con le funzioni di auto-completamento del testo), e che JS venga sfruttato mediante framework estensivi come jQuery, al fine di creare applicazioni complete stand alone, o addirittura videogiochi per browser.
PHP: rende le pagine dinamiche e regola l’interazione lato server
Il PHP è il linguaggio di programmazione principe per i siti base come per quelli più avanzati: interamente free ed open source, permette al webmaster di servire contenuti nella maniera più semplice o elaborata, permettendo di sfruttare ad esempio un singolo file .PHP per servire contenuti differenti.
Una trattazione approfondita di PHP richiederebbe diversi articoli e non è possibile affrontarla per esteso in questa sede. Potrebbe essere la base per un articolo su come funziona un sito e-commerce e che ci riserviamo di pubblicare in seguito.
Basti sapere, a questo livello, che i maggiori CMS si basano su di esso e sulle sue ricchissime librerie e che esso prevede meccanismi di interazione con il database, di creazione dinamica di pagine, di filtraggio delle informazioni, di realizzazione di motori di ricerca interni e di interazione con API (librerie) di servizi esterni, quali Google Analytics ed altri ancora.
Lascia un commento