Cell. +39 3479684755

Il Blog di Instant Websites

Autore: INSTANT WEBSITES

Immagine di sfondo al 100% con CSS3 e con CSS2

Si pone talvolta l’esigenza di impostare una singola immagine di sfondo alla pagina del nostro sito, che presenti le seguenti caratteristiche:

1) deve ridimensionarsi in relazione alla viewport (dimensione, o meglio risoluzione dello schermo dell’utente),
2) non deve deformarsi in seguito a quanto sopra, vale a dire le proporzioni devono restare immutate.

Sembra facile ma, come sanno bene gli sviluppatori, non lo è anche se la nuova versione dei Cascading Style Sheet facilita di molto la vita.

Vediamo dunque come procedere:

CSS3

E’ stata introdotta la nuova proprietà background-size, impostandone il valore su contain o cover è possibile ottenere l’effetto desiderato.

Il codice CSS sarà dunque:

body {
margin: 0;
padding: 0;
background: url(immagini/index.jpg) no-repeat center center fixed;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}

Usando contain, l’immagine non viene deformata ma può lasciare degli spazi bianchi sul lato lungo dello schermo; usando cover, invece, l’immagine riempie interamente lo schermo ma può deformarsi.

Il limite è rappresentato dal fatto che solo i browser più recenti supportano la proprietà in questione.
Pur adottando la sintassi differenziata vista sopra (pur specificando cioè mozilla o webkit quali “motori” del browser), resta il problema di Internet Explorer che supporta background-size solo dalla versione 9; come è noto, chi ha un PC che gira sotto Windows XP non può avere una versione superiore alla 8 quindi si tratta di un problema serio che richiede una soluzione alternativa.

Continua a leggere

Come usare il tag video di HTML5

Introduzione

Una delle novità più interessanti di HTML5 sarà costituita dal nuovo tag video, che consentirà appunto l’esecuzione di file video senza richiedere interfacce Flash o QuickTime.

Ciò risulta ancor più importante dal momento che numerosi tablet e smartphone non supportano la tecnologia di Adobe Flash, rendendo non fruibili i contenuti che dipendono dal relativo plugin.

La struttura base del tag <video> è la seguente:

<video><source src=”…”></video>

Tuttavia, in questa fase di sviluppo finale di HTML5, necessario predisporre il file video in più formati per garantire la compatibilità con i diversi browser.

Questi formati sono: .mp4, .ogv, .webm.

Continua a leggere

Perché “instant” websites?

Il termine “instant” (istantaneo) nel nostro nome non deve trarre in inganno: non ha nulla a che vedere con quei disastrosi programmini o quei servizi online – alcuni relativamente onerosi – che promettono di costruire un sito completo e professionale a chiunque nel giro di pochi minuti.

Un lavoro professionale, nel senso autentico del termine, richiede necessariamente un certo tempo affinché vengano curati tutti gli aspetti di progettazione e sviluppo che consentono poi ai fruitori di visitare il sito e navigarlo senza problemi.

Ovviamente se l’intento è quello di costruire una paginetta per mostrare quanto è bello il nostro cane o la nostra collezione di fumetti, tali servizi possono andare più che bene.

Se, viceversa, l’oggetto del sito è la presentazione di un’attività devono essere rispettati determinati parametri qualitativi mancando i quali il risultato che si ottiene è quello di una … cattiva presentazione.

Detto questo, un sito “fatto bene” non deve necessariamente costare una cifra spropositata né richiedere mesi su mesi per la sua creazione.

Il nostro obiettivo è quello di rispondere nella maniera migliore possibile alle esigenze che ci vengono prospettate dal potenziale Cliente ed è per questo motivo che la prima fase del lavoro consiste in una vera e propria intervista a quest’ultimo.

Non ci limitiamo a “disegnare” o “scrivere codice”: siamo dei veri e propri consulenti che, recepite le necessità e le finalità del Cliente, formulano una proposta che sia tecnicamente ed economicamente su misura.

A quel punto il lavoro può procedere speditamente e senza intoppi con piena soddisfazione di chi ce l’ha commissionato.

Siamo vicini al Cliente, lo aiutiamo, lo affianchiamo; siamo veloci (“instant“) e consegnamo quello che abbiamo promesso, che si tratti di un sito di dimensioni medio/grandi o di un mini-sito per un evento spot.

Metteteci alla prova!

Categorie
Archivi