Il Blog di INSTANT WEBSITES

Web Design

Vetrina di siti realizzati da INSTANT WEBSITES

FITKID DANCE Lugano
POLISPORTIVA GYMNASIUM Lugano (CH)
FITKID DANCE
https://gymnasiumlugano.ch/

Immobiliare Porpora Loreto
IMMOBILIARE PORPORA LORETO
https://www.porporaloreto.it/
Affitto diretto di appartamenti in via Porpora e via Vigevano a Milano

IOA
INTERNATIONAL OSTEOPATHIC ACADEMY
https://www.ioaosteopathy.net/
Scuola di osteopatia con diploma a norma Europea EN16686

Continua a leggere

Tutto in homepage

Tanto tempo fa, in una galassia lontana lontana…

… la homepage dei siti era utilizzata come pagina di benvenuto e, spesso, conteneva solo una foto o un’animazione per lo più inutile oltre alle bandierine per la scelta della lingua (se il sito era sviluppato in due o più lingue).

Ovviamente la galassia era la nostra ed il concetto di “tanto tempo fa” è da intendersi in termini informatici, quindi diciamo tre lustri e forse meno.

I motori di ricerca non erano ancora perfezionati. Google basava l’indicizzazione su quanto veniva inserito dagli sviluppatori nei metatag di pagina, da cui l’abominevole pratica di infilare parole-chiave appetite dal web anche se non c’entravano con i contenuti (ricordate quando su eBay i titoli delle inserzioni erano del tipo “Cellulare cinese no iPhone” in modo tale da essere visualizzate da chi cercava, nell’esempio fatto, l’iPhone?).

I dispositivi mobili non erano ancora diventati gli strumenti irrinunciabili e tuttofare che abbiamo oggi perennemente nelle nostre mani: si avevano a disposizione delle connessioni di tipo primitivo, come il Wap, costose e lente; i monitor dei PC da tavolo avevano una risoluzione orizzontale di 1024px.

No, non ho nessuna intenzione di commentare qualcosa del tipo “bei tempi” anche se appartengo alla schiera di coloro i quali trovano assai preoccupante il rimbambimento della gente a cui assistiamo tutti i giorni, per colpa degli smartphone che sono diventati delle estensioni delle mani ma non del cervello.

Non erano bei tempi, erano solo tempi assai diversi da quelli attuali e le pratiche adottate dagli sviluppatori web erano molto più elementari – e semplici – di quelle attuali.
Prima dell’arrivo dei CSS, le strutture di pagina erano costruite con i frame e le tabelle e, naturalmente, l’unica preoccupazione che concerneva la risoluzione video era quella di scegliere se sviluppare contenitori larghi un migliaio di pixel (1024 meno lo spazio occupato dalla barra di scorrimento) oppure 800 per supportare i monitor meno recenti. Media Query? Figurarsi.

L’aumento vertiginoso della velocità delle connessioni, passando dai 14.4Kbps dei modem analogici alle connessioni digitali, unitamente al sorpasso in anni recenti degli smartphone sui laptop come strumento di accesso alla Rete, hanno fatto sì che i siti si ampliassero e modificassero, includendo sempre più contenuti multimediali.

In tutto questo contesto, descritto molto sommariamente – non è certo mia intenzione scrivere la storia di Internet! – il significato della homepage o front page, cioè della pagina iniziale del sito, è mutato profondamente.

Continua a leggere

Introduzione a flexbox

Introduzione a flexbox

La proprietà flexbox, introdotta con CSS3, costituisce uno strumento molto interessante per gestire lo spazio all’interno di un contenitore anche quando non si conoscano a priori le dimensioni dei box in esso contenuti.

L’aspetto più interessante che differenzia questa soluzione tecnica da quelle alternative (l’uso della proprietà float e della dichiarazione display: table-cell) è che tramite flexbox è possibile riordinare i box cambiandone la disposizione.

Per esaminare ad un primo livello di approfondimento flexbox, procederemo con una serie di esempi.

Inseriamo nella pagina un contenitore largo 450px con (inizialmente) tre box larghi 150px ciascuno, identificati dai numeri 1, 2 e 3 al loro interno.
Al contenitore è stata assegnata la classe .wrapper ed ai tre box al suo interno le classi: .primo, .secondo e .terzo.

Nel primo esempio, così come in quelli che seguono, il contenitore .wrapper ha tra le sue proprietà css la dichiarazione: display: flex; ed i box in esso contenuti assumono il comportamento di default, vale a dire si dispongono uno di fianco all’altro.

E’ possibile cambiare questa disposizione tramite la proprietà flex-direction che assume questi possibili valori: row (default), column, row-reverse e column-reverse.
Nel secondo esempio è stata usata la dichiarazione flex-direction: row-reverse; e nel terzo esempio la dichiarazione flex-direction: column-reverse; facendo sì che i box si dispongano rispettivamente su una riga partendo dall’ultimo e su una colonna, sempre partendo dall’ultimo.

Continua a leggere

Categorie
Archivi