La proporzione divina applicata al web design

Chi non conosce il valore della proporzione divina, altrimenti detta sezione aurea? Per chi non lo sapesse è un numero irrazionale, è rappresentato dalla lettera greca Phi e vale 1,618 (solo per dare i primi tre decimali, visto che sono infiniti…).

E’ un numero importante e avvolto, se vogliamo, da un alone di mistero: è presente in natura cosi come in maestose opere architettoniche. È certo che scultori, pittori e architetti greci e romani – e, forse, ancor prima egizi – si servirono largamente della “proporzione divina”, tanto che secondo molti critici starebbe semplicemente qui il segreto dell’armonia inimitabile di quelle opere d’arte quali la Grande Piramide di Cheope, il Partenone di Atene, l’Arco di Costantino, il Pantheon di Roma, l’acquedotto di Segovia e del Gard. Queste e molte altre opere hanno dimensioni che rispettano la proporzione dell’1,618. Noi stessi siamo la prova vivente della proporzione divina. Non ci credere? Provate a misurare la vostra altezza, poi misurate l’altezza dall’ombelico al pavimento e provate a fare il rapporto dei due numeri. Non so se questo riuscirà a stupirvi, ma di sicuro il risultato si approssimerà a 1,6. E se non ci credete ancora, provate con le falangi della vostra mano…

golden-ratio-equation

Ma non voglio tediarvi ulteriormente su come si è arrivati in passato a trovare il numero (esistono infiniti articoli sul web), ma vorrei illustrare semplicemente come, questo numero divino, può essere semplicemente applicato a qualsiasi oggetto di design e cionondimeno al web design.

Un web designer dovrebbe sempre garantire ai visitatori di un sito web un certo senso naturale di ordine, armonia, equilibrio e comfort. La logica che sta alla base della proporzione divina è la convinzione che questo numero sia qualcosa di organico, universale, armonico ed esteticamente piacevole. Infatti, essendo tale rapporto evidente in molte cose esistenti nell’universo è probabile che possano migliorare notevolmente il design dei vostri progetti.

Continue Reading


SASS: Syntactically Awesome Style Sheets

Scrivere un foglio CSS di per sé può essere divertente, ma i siti si fanno sempre più grandi e complessi e di conseguenza i fogli di stile sempre più difficili da mantenere. Si ci comincia a chiedersi se c’è un modo per non ripetere un sacco di codice CSS nel foglio di stile. La buona notizia è che la soluzione esiste e si chiama pre-processore. Utilizzare metodi di pre-elaborazione fa risparmiare un sacco di tempo e fatica, perchè:

  • Consente di utilizzare variabili che possono essere riutilizzate nel foglio di stile
  • Linguaggio e sintassi di alto livello che offre numerose funzionalità avanzate
  • I file CSS vengono compilati e caricati sul server Web di produzione

Ci sono due metodi di pre-elaborazione: SASS e LESS. In questo articolo vedremo tuttavia il metodo SASS, Syntactically Awesome Style Sheets. Continue Reading


Ottimizzare lo scrolling web è possibile?

Lo scrolling di una pagina web non sembra essere qualcosa legato alle performance. In effetti, quando i contenuti di una pagina web sono stati caricati, perchè dovremmo mai preoccuparci di quello che accade quando avviene lo scroll della pagina? La ragione è semplice: quando si “scrolla” la pagina, il browser deve ridisegnare per intero la pagina nel monitor. Questo significa un dispendio di risorse in termini di calcolo che potremmo minimizzare riducendo il lavoro del browser nel ridisegnare la pagina e di conseguenza massimizzare la performance della pagina. Continue Reading


@font-face: font personalizzati nel proprio sito web

@font-face è un’interessate caratteristica delle specifiche CSS3 che permette di caricare e di usare all’interno delle pagine web qualsiasi font non standard in maniera dinamica e scalabile. La proprietà @font-face è una delle regole appartenenti alle @-rules (@charset, @import, @media, @page, @font-face, @namespace) del CSS.

Alcuni benefici nell’uso di @font-face sono:

  • piena compatibilità con gli strumenti di ricerca
  • accessibilità e compatibilità con gli strumenti di screen readers
  • il testo viene riconosciuto dai traduttori automatici (es. google traslate)
  • pieno supporto per le proprietà CSS relative al testo: line-height, letter-spacing, text-shadow, text-align, e i selettori quali ::first-letter e ::first-line

Continue Reading


Cropping, clipping e Masking in CSS

In computer graphics, due operazione largamente utilizzate sono il crop e il mask. Entrambe le operazioni nascondono delle porzioni di immagini e se avete lavorato con SVG o con il Canvas HTML allora la terminologia non dovrebbe essere una novità. Il clipping definisce l’area visibile di un elemento: tutto ciò che sta intorno a quest’area non viene renderizzato e quindi “ritagliato”. La maschera invece, che viene applicata all’immagine, definisce attraverso il canale alfa la porzione di immagine da rendere “trasparente” e quindi non visibile. La trasparenza ovviamente può variare a seconda della quantità di colore della maschera.

Una novità nel CSS è proprio quella di applicare queste due operazioni al mondo HTML. Continue Reading


PHP vs Ruby vs Python. Quale linguaggio di programmazione scegliere?

Esistono molti linguaggi di programmazione e ognuno funziona per fare dei compiti specifici e unici. Ogni linguaggio ha un unico insieme di parole chiave e una speciale sintassi per organizzare i comandi. In questo articolo daremo un’occhiata a tre linguaggi molto popolari: PHP, Ruby, Python. Vedremo come funzionano, quali sono le differenze e dove vengono principalmente utilizzati. Continue Reading


La libreria GD in PHP

GD è una libreria grafica che viene fornito in bundle con PHP, a partire dalla versione 4.3.0. GD è un progetto open source, sotto la guida di Thomas Boutell. Maggiori informazioni si possono trovare sul sito libgd.org che contiene immagini e documentazione su l’ultima versione (2.1.00 alla data di questo articolo).

GD consente ai programmatori PHP di generare immagini dinamiche in formato JPEG e PNG, è scritta in C ed è disponibile per i sistemi Unix, Windows e derivati. Anche se la libreria viene comunemente usata con PHP, le implementazioni sono disponibili anche per altri linguaggi di programmazione, ad esempio il Perl. Continue Reading


Big data e database

b1

Big Data è un termine popolare usato per descrivere la crescita esponenziale della disponibilità dei dati, sia strutturati che non strutturati. Questi dati possono rappresentano una fonte importante per le imprese e la società perchè consentono alle aziende di prendere decisioni con più sicurezza. E prendere decisioni migliori può significare maggiore efficienza operativa, riduzione dei costi e riduzione del rischio. Continue Reading


Captology, ovvero la tecnologia persuasiva

brainwash-logo-big1

Può uno dispositivo tecnologico, come il computer o lo smartphone, farci cambiare modo di pensare o il nostro modo di comportamento? Può indurci a prendere delle importanti decisioni nella nostra vita? A quanto pare, la risposta è si.

Della propaganda e della persuasione, occulta o meno, si è parlato molto. Ma si è parlato meno di come l’interazione tra persone e macchine possa tradursi in una forma di persuasione.  Continue Reading


R.I.P. Flash, benvenuto HTML5

MK-BQ351A_HTML5_G_20111110180025

Cos’hanno in comune cassette, mini-dv e Flash? Sono tre tecnologie che hanno bisogno di un player per funzionare, tre tecnologie che sono “morte” o stanno morendo. Proprio come i CD hanno sostituito i nastri magnetici per migliorare l’efficienza nella riproduzione di musica e file digitali, HTML5 sta facendo lo stesso con Flash.

Il dibattito HTML5 vs Flash è un tema discusso da molti anni tra gli sviluppatori Web – e lo è diventato ancora di più da quando Steve Jobs ha pubblicato nel 2010 la sua lettera descrivendo l’HTML5 come il futuro e Flash come “non è più necessario”. Checché se ne dica, non si può negare che le implicazioni di HTML5 nei video e nel web sono reali.

Per i video online, HTML5 offre due cose che Flash non fa: interoperabilità nei sistemi mobilimarkup semantico. La spinta verso i sistemi “portatili”, la proliferazione di video interattivi per l’intrattenimento, la pubblicità e l’ecommerce e la struttura aperta di HTML5 si combinano per creare il futuro di un web basato su HTML5, a discapito della tecnologia Flash sempre più obsoleta e destinata ad essere annoverata nella Tech Hall of Fame (come Windows XP, Palm Treo). Continue Reading


Pagine:1234567