Html

Il linguaggio HTML è il linguaggio utilizzato per la costruzione di pagine internet.

Vedi Dettagli

CSS

La sigla CSS sta per Cascading Style Sheets, in italiano fogli di stile; è un linguaggio che gestisce il design e l’aspetto estetico.

Vedi Dettagli

Bootstrap

Bootstrap è una raccolta di strumenti liberi per la creazione di siti e applicazioni per il Web.

Vedi Dettagli


HTML
la struttura del sito

In informatica l'HyperText Markup Language (traduzione letterale: linguaggio a marcatori per ipertesti), comunemente noto con l'acronimo HTML, è un linguaggio di markup. Nato per la formattazione e impaginazione di documenti ipertestuali disponibili nel web 1.0, oggi è utilizzato principalmente per il disaccoppiamento della struttura logica di una pagina web (definita appunto dal markup) e la sua rappresentazione, gestita tramite gli stili CSS per adattarsi alle nuove esigenze di comunicazione e pubblicazione all'interno di Internet.

L'HTML è un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C). È derivato dall'SGML, un metalinguaggio finalizzato alla definizione di linguaggi utilizzabili per la stesura di documenti destinati alla trasmissione in formato elettronico. La versione attuale, la quinta, è stata rilasciata dal W3C nell'ottobre 2014.

L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web attraverso tag di formattazione. Sebbene l'HTML supporti l'inserimento di script e oggetti esterni quali immagini o filmati, non è un linguaggio di programmazione: non prevedendo alcuna definizione di variabili, strutture dati, funzioni o strutture di controllo che possano realizzare programmi, il suo codice è in grado soltanto di strutturare e decorare dati testuali.

Il linguaggio HTML, o la sua variante XHTML, ha come scopo quello di gestire i contenuti associandone o specificandone allo stesso tempo la struttura grafica (layout) all'interno della pagina web da realizzare grazie all'utilizzo di tag diversi. Ogni tag (ad esempio 'h1' o 'p') specifica un diverso ruolo dei contenuti che esso contrassegna (quindi il tag 'h1' definirà un'importanza maggiore del tag 'p'). La formattazione consiste nell'inserimento nel testo di marcatori o etichette, detti tag, che descrivono caratteristiche come la funzione, il colore, le dimensioni, la posizione relativa all'interno della pagina. I browser che leggono il codice mostrano all'utente formattazioni predefinite per ogni tag che incontrano (così ad esempio i contenuti marcati con il tag 'h1' avranno carattere 18pt e i contenuti marcati da 'p' avranno carattere 12pt). Tuttavia questa formattazione è completamente sotto il controllo dell'utente, che può modificarla nelle Impostazioni del suo browser.


CSS
l'estetica del sito

La sigla CSS sta per Cascading Style Sheets, in italiano fogli di stile. Essenzialmente, il CSS è un linguaggio che gestisce il design e la presentazione delle pagine web (cioè l’aspetto estetico) e lavora in combinazione con l’HTML, o HyperText Markup Language (linguaggio a marcatori per ipertesti, il quale invece gestisce i contenuti delle pagine). Con il CSS potete stabilire le regole secondo cui il sito dovrà mostrare le informazioni, mantenendo tutti i comandi relativi alla formattazione e allo stile (font, colori, dimensioni, ecc) separati da quelli relativi al contenuto.

Vengono chiamati cascading (a cascata) perché i fogli di stile su cui lavorare sono svariati, ma solo uno eredita a cascata tutte le proprietà dei fogli precedenti. Per molte persone la struttura classica e semplice di un blog può essere sufficiente; ma quando l’obiettivo è personalizzare l’aspetto di un sito web, è necessario approfondire la conoscenza del CSS.

Tre fogli di stile
Esistono tre tipi di fogli di stile CSS: esterni, interni, in linea.

Gli stili esterni controllano l’aspetto degli oggetti presenti su diverse pagine di un sito.
Gli stili interni controllano l’aspetto di una singola pagina.
Gli stili in linea controllano solo un elemento su di una singola pagina, anche una sola parola.

Potete usare fogli di stile multipli, i quali sanno già automaticamente in che modo dovranno rinviare l’uno all’altro; in generale, quelli in linea hanno la precedenza sui fogli interni, i quali a loro volta ce l’hanno sugli esterni. La creazione di un foglio di stile e la scrittura dei comandi di CSS avviene mediante l’utilizzo di un editor di testo. Perché le regole inserite entrino in vigore e la vostra pagina web le rispetti, non dovete fare altro che collegare il foglio di stile al vostro HTML. Un argomento ampio come il CSS non può certo essere trattato in maniera esaustiva in un breve articolo per blog, che qui vuole semplicemente fugare dubbi di carattere nozionistico. Ma possiamo comunque illustrare un breve esempio di linguaggio CSS.

In questo sito
Ho creato un file style.css in cui ho stilizzato i componenti nativi di bootstrap seguendo la documentazione ufficiale e cambiando quasi esclusivamente i margini dei componenti nella struttura del sito e qualche colore.


BOOTSTRAP
respondive design

Bootstrap è una raccolta di strumenti liberi per la creazione di siti e applicazioni per il Web. Essa contiene modelli di progettazione basati su HTML e CSS, sia per la tipografia, che per le varie componenti dell'interfaccia, come moduli, pulsanti e navigazione, così come alcune estensioni opzionali di JavaScript.

Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton presso Twitter come un framework che uniformasse i vari componenti che ne realizzavano l'interfaccia web, dato che la presenza di diverse librerie aveva portato ad incoerenze ed elevati oneri di manutenzione.

Inoltre, Bootstrap semplifica la creazione del sito poichè si utilizzano classi e componenti che sono anche già ottimizzati per il mobile responsive, ovvero la visualizzazione attraverso diversi dispositivi (desktop - tablet - mobile) adattandosi in automatico.

Installazione
L'installazione è semplicissima; una volta scaricata la libreria, andremo ad includerla nelle pagine html in cui vogliamo utilizzarla e dovremmo indicare solo la path (indirizzo dove è stata posizionata la libreria all'interno del progetto) in due punti: nell'head andremo ad importare il bootstrap.css mentre nel footer andremo ad importare bootstrap.js

Cosa contiene realmente Bootstrap?
Possiamo suddividere i suoi elementi in quattro macro-aree:

Scaffolding (o impalcatura)
Questa aree contiene tutti quegli elementi CSS che permettono di definire la struttura della pagina, ossia il suo layout. La parte costitutiva di questa pagina è il Grid system ossia una griglia, fissa o fluida, con una larghezza base di 960px nella quale possono essere definite righe e colonne in cui poi incasellare i contenuti. Di base, la griglia è costituita da 12 colonne e ogni elemento del layout può espandersi su una o più colonne, semplicemente applicando una classe di stile che in qualche modo definisce la sua “estensione”. Un elemento per cui è definita la classe class="col-md-2", ad esempio, occuperà automaticamente 2 colonne della griglia base. Perché si estenda su quattro colonne basterà modificare la classe così: class="col-md-4". Semplice no? Vale davvero la pena di imparare ad utilizzare questo framework... perchè sarà molto semplice creare siti web responsivi e dal layout perfetto.

CSS base
Questa area contiene degli stili predefiniti per diversi elementi della pagina, come i titoli (H1, H2,…), le tabelle, i pulsanti, gli elementi dei form, le immagini… Con queste regole di stile realizzare pulsanti di varie dimensioni, con i bordi smussati, con un effetto over diventa davvero semplice e immediato. Lo stesso vale per la creazione di una tabella con righe a colori alterni. Nel primo caso, basta applicare una delle moltissime classi disponibili, come class="btn btn-primary" o class="btn btn-default btn-lg", nel secondo, basta applicare alla tabella la classe class="table table-striped".

Componenti
Questa area contiene elementi più complessi di pulsanti o tabelle, ma ormai molto comuni nei siti web. Ad esempio, gruppi di pulsanti, barre di navigazione, menu a discesa… Fra i componenti è compreso anche un set di icone, o meglio di glifi (dato che non si tratta di immagini ma di caratteri) di uso comune, messe a disposizione da Glyphicons. Le icone/glifi Glyphicons di norma sono a pagamento, mentre il test distribuito con Bootstrap è gratuito. I creatori di Bootrstap suggeriscono a chi le usa di inserire, se possibile, un link al sito Glyphicon, come una sorta di ringraziamento. Come avrete sicuramente già intuito, le icone si utilizzano tramite apposite classi.

Javascript
Quest’ultima area contiene diversi plug-in jQuery per realizzare effetti molto comuni come transizioni, finestre modali, popup, carousel, accordion, tab. Anche questi plug-in sono semplici da usare e vi permettono di realizzare tantissime soluzioni interessanti.