Che cos'è uno sfondo Web incorporato. Cosa sono le applicazioni web e le pagine web dinamiche. Tipica applicazione delle applicazioni web
| 16.04.2015
Nell'ultimo anno, i web designer hanno iniziato sempre più a utilizzare un modo originale per rendere più interessante un sito: installare un video come sfondo della pagina. Una trama interessante o solo un'immagine "dal vivo" sullo sfondo decorerà anche un normale sito di biglietti da visita, interesserà l'utente e lo incoraggerà a rimanere più a lungo sul sito. Oggi condivideremo con te uno dei modi per impostare uno sfondo video a schermo intero per un sito Web utilizzando HTML5 e CSS.
Se sei fermamente convinto di voler impostare un video per lo sfondo sul sito, devi conoscere alcune sfumature:
- Innanzitutto, devi ricordare che il video ha un peso abbastanza grande. Ciò può influire negativamente sulla velocità di caricamento della pagina, soprattutto se l'utente ha una connessione Internet lenta. Pertanto, scegli video che non siano troppo lunghi nel tempo. Nel caso in cui devi utilizzare un video piuttosto lungo, preparati a lavorare per ridurne il peso o a sacrificare parte del pubblico.
- In secondo luogo, evita la riproduzione automatica dell'audio dai video. Usa video senza audio o aggiungi la possibilità per l'utente di attivare l'audio se ne ha bisogno. La riproduzione automatica di un suono all'apertura di un sito è considerata una pessima forma.
- In terzo luogo, è necessario occuparsi della compatibilità cross-browser e della corretta visualizzazione e riproduzione del video su tutti i dispositivi, oltre a fornire un'alternativa al video (nei casi in cui non viene riprodotto). Mostreremo come farlo nel nostro esempio di seguito.
- E in quarto luogo, dovresti pensare attentamente se un videocitofono è appropriato nel sito in cui vuoi installarlo, poiché è molto facile attraversare il confine tra originalità e inutilità di questa impresa. In nessun caso il video deve distrarre l'utente dal suo obiettivo principale, grazie al quale è arrivato sul sito. Quando imposti uno sfondo video sotto il contenuto del testo, non dimenticare di controllare quanto sia leggibile il testo. Ad esempio, a un certo punto della riproduzione del video potrebbe svanire sullo sfondo (testo bianco su sfondo bianco, testo nero su sfondo nero, ecc.).
1.HTML
Per il nostro esempio abbiamo realizzato un video con una risoluzione di 1920×1080, una durata di 15 secondi e un peso di poco più di 3 MB. Dentro il blocco
Per etichetta
- larghezza - la larghezza dell'area per la riproduzione del video;
- altezza - l'altezza dell'area;
- riproduzione automatica - riproduzione video automatica;
- loop - ripetizione ciclica del video;
- poster è un'immagine che viene visualizzata al posto del video durante il caricamento o non disponibile.
Successivamente, abbiamo due tag
2. CSS
Il nostro foglio di stile di sfondo si presenta così:
#video-bg ( posizione: fissa; in alto: 0; a destra: 0; in basso: 0; a sinistra: 0; overflow: nascosto; z-index: 1; sfondo: url(bg/daisy-stock-poster.jpg) no -repeat #94a233; dimensione dello sfondo: copertina; ) #video-bg > video ( posizione: assoluta; in alto: 0; sinistra: 0; larghezza minima: 100%; altezza minima: 100%; larghezza: auto; altezza : auto; ) @supports (adatta all'oggetto: copertina) ( #video-bg > video ( in alto: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; adatta all'oggetto: copertina; ) )
Come puoi vedere dal codice, lo sfondo viene impostato sull'intera pagina e l'immagine (un frame dello stesso video) viene impostata come sfondo di backup. Nel caso più estremo, il colore di sfondo sarà #94a233 .
C'è anche una direttiva @supports nel codice che controlla se il browser supporta la proprietà di adattamento dell'oggetto. In caso affermativo, lo sfondo viene impostato per coprire e viene visualizzato proporzionalmente su schermi di dimensioni diverse.
Secondo caniuse.com, la proprietà object-fit è attualmente supportata da tutti i browser tranne Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 e Android Browser 4.1-4.4.
Dall'autore: In questo tutorial, illustreremo una semplice tecnica per creare un'immagine di sfondo che si estenderà completamente all'intera larghezza della finestra del browser. Per fare ciò, abbiamo bisogno della proprietà CSS della dimensione dello sfondo; JavaScript non è necessario.
Esempi di intere immagini di sfondo reattive
Al giorno d'oggi, è diventato piuttosto popolare utilizzare una foto enorme come sfondo che occupa l'intera pagina web. Ecco alcuni esempi di siti con immagini di sfondo complete reattive impostate:
Se desideri ottenere un risultato simile nel tuo prossimo progetto web, allora questo articolo fa per te.
Principi di base
Ecco il nostro piano d'azione.
Usa la proprietà background-size per riempire completamente la finestra
La proprietà CSS della dimensione dello sfondo è impostata per coprire. Il valore della copertina indica al browser di ridimensionare automaticamente e proporzionalmente la larghezza e l'altezza dell'immagine di sfondo in modo che siano sempre uguali o maggiori della larghezza/altezza della finestra.
Utilizzare una query multimediale per gestire piccole immagini di sfondo per dispositivi mobili
Per migliorare la velocità di caricamento della pagina su schermi di piccole dimensioni, utilizzeremo una query multimediale per eseguire il rendering di una versione più piccola della nostra immagine di sfondo. Non è obbligatorio. Questa tecnica funzionerà senza di essa. Ma perché usare una piccola immagine di sfondo mobile è una buona idea?
L'immagine che ho usato nella demo è 5500x3600px. Questa risoluzione è sufficiente per la maggior parte dei monitor per computer widescreen attualmente sul mercato. Ma per questo devi elaborare un file da 1,7 MB.
Un tale enorme carico aggiuntivo solo per il gusto di posizionare una foto di sfondo in ogni caso non porterà nulla di buono. E, naturalmente, questo sarà estremamente negativo per le connessioni che utilizzano Internet mobile. Inoltre, questa risoluzione è eccessiva per i dispositivi con uno schermo piccolo (ne parleremo più avanti). Diamo un'occhiata all'intero processo.
HTML
Per il markup, tutto ciò che serve è questo:
Assegneremo un'immagine di sfondo all'elemento body in modo che l'immagine occupi sempre l'intera finestra del browser.
Tuttavia, questa tecnica funzionerà anche per qualsiasi elemento a livello di blocco (come un div o un form). Se la larghezza e l'altezza dell'elemento del blocco sono "fluide", l'immagine di sfondo verrà sempre ridimensionata per adattarsi all'intero contenitore.
css
Imposta i seguenti stili per l'elemento body:
body ( /* Percorso dell'immagine */ background-image: url(images/background-photo.jpg); /* L'immagine di sfondo è sempre centrata verticalmente e orizzontalmente */ background-position: center center; /* L'immagine di sfondo non viene ripetuto * / background-repeat: no-repeat; /* L'immagine di sfondo è fissa nella finestra, quindi non si sposta quando l'altezza del contenuto è maggiore dell'altezza dell'immagine */ background-attachment: fixed; /* Questo è ciò che consente all'immagine di sfondo di adattarsi alle dimensioni del contenitore */ background-size: cover; /* Imposta il colore di sfondo da visualizzare durante il caricamento dell'immagine di sfondo */ background-color: #464646; )
corpo ( /* Percorso dell'immagine */ immagine di sfondo: url (immagini/foto di sfondo. jpg); /* L'immagine di sfondo è sempre centrata verticalmente e orizzontalmente */ /* L'immagine di sfondo non viene ripetuta */ background-repeat: no-repeat; /* L'immagine di sfondo è fissata nella finestra in modo che non si muova quando l'altezza del contenuto è maggiore dell'altezza dell'immagine */ /* Questo è ciò che consente all'immagine di sfondo di adattarsi alle dimensioni del contenitore */ dimensione dello sfondo: copertina; /* Imposta il colore di sfondo da visualizzare durante il caricamento dell'immagine di sfondo */ colore di sfondo : #464646; |
La coppia proprietà/valore più importante a cui prestare attenzione è:
dimensione dello sfondo: copertina;
dimensione dello sfondo: copertina; |
Qui è dove inizia la magia. Questa coppia proprietà/valore indica al browser di ridimensionare l'immagine di sfondo in modo proporzionale, ad es. in modo che la sua larghezza e altezza siano uguali o maggiori della larghezza/altezza dell'elemento (nel nostro caso, l'elemento body).
Tuttavia, questa coppia proprietà/valore ha un problema: se l'immagine di sfondo è più piccola dell'elemento body - cosa che accadrà su schermi ad alta risoluzione e/o quando hai un'enorme quantità di contenuto sulla pagina - il browser ingrandirà inevitabilmente . E, come sappiamo, quando aumentiamo le dimensioni di una bitmap, la qualità dell'immagine diminuisce (in altre parole, si verifica la pixelizzazione).
L'aumento delle dimensioni di un'immagine rispetto alle sue dimensioni originali influisce sulla qualità dell'immagine. Tienilo a mente quando scegli l'immagine giusta. La demo utilizza un'enorme foto da 5500 x 3600 pixel per i monitor widescreen, quindi sarebbe necessario uno schermo molto grande perché si verifichi una distorsione della qualità. Andiamo avanti. Per assicurarci che l'immagine di sfondo sia sempre centrata nel viewport, scriviamo:
posizione di sfondo: centro centro;
posizione dello sfondo: centro centro; |
Questa voce posiziona lo sfondo sull'asse delle coordinate al centro della finestra. Successivamente, dobbiamo definire cosa accadrà quando l'altezza del contenuto supera l'altezza visibile della finestra. Quando ciò accade, viene visualizzata una barra di scorrimento.
In questo caso, dobbiamo assicurarci che l'immagine di sfondo rimanga nella sua posizione originale anche quando l'utente scorre la pagina verso il basso. In questa situazione, l'immagine terminerà semplicemente durante lo scorrimento o si sposterà durante lo scorrimento (il che può distrarre molto l'utente). Per correggere lo sfondo, abbiamo impostato la proprietà background-attachment su fixed.
sfondo-allegato: fisso;
sfondo-allegato: fisso; |
Nella demo, ho aggiunto la possibilità di "caricare contenuto" in modo da poter vedere cosa succede quando viene visualizzata una barra di scorrimento nel browser quando la proprietà background-attachment è impostata su fissa. Puoi anche scaricare la demo e giocare con le proprietà di posizionamento degli elementi (come background-attachment e background-position) per vedere come influisce sullo scorrimento della pagina e sull'immagine di sfondo. Il resto dei valori delle proprietà sono abbastanza autoesplicativi da soli.
Stenografia CSS
Ho dettagliato le proprietà dello sfondo per renderle più facili da spiegare. L'abbreviazione sarà anche equivalente:
corpo (sfondo: url(background-photo.jpg) centro copertura centrale no-repeat fisso;)
corpo ( sfondo: url (sfondo-foto. jpg) centro centro copertina nessuna ripetizione fissa; |
Tutto quello che devi fare è modificare il valore dell'URL in modo che punti al percorso dell'immagine di sfondo.
Opzionale: media query per piccoli schermi
Per schermi più piccoli, ho usato Photoshop per ridimensionare l'immagine di sfondo originale proporzionalmente a 768x505px e ho usato Smush.it per ridimensionare un po' di più. Ciò ha ridotto la dimensione del file da 1741 KB a 114 KB. Quelli. dimensione dell'immagine ridotta del 93%.
Per favore, non fraintendetemi, 114 KB sono ancora abbastanza per un elemento di design puramente estetico. Considerando il carico aggiuntivo di 114 KB, userei un file del genere solo se vedessi un'opportunità per migliorare significativamente l'esperienza utente (UX) del sito, perché. al momento, una quota significativa del traffico Internet è rappresentata dai dispositivi mobili background-image: url (images / background-photo-mobile-devices. jpg) ;
La query multimediale ha un limite di larghezza di max-width: 767px, il che significa che se il viewport del browser è maggiore di 767px, verrà caricata un'immagine di sfondo di grandi dimensioni.
Lo svantaggio dell'utilizzo di questa media query è che se modifichi la larghezza della finestra del browser, ad esempio, da 1200 px a 640 px (o viceversa), vedrai immediatamente quando viene caricata l'immagine di sfondo piccola o grande.
Inoltre, poiché alcuni dispositivi con schermo piccolo possono visualizzare più pixel, ad esempio l'iPhone 5 con display retina può visualizzare una risoluzione di 1136x640px, l'immagine di sfondo piccola sarà pixelata.
Riassumendo
Puoi visualizzare una versione più aggiornata del codice sorgente da questo tutorial su GitHub. Posso solo avvertirti di una cosa: usa questa tecnica con cautela, perché file di grandi dimensioni possono danneggiare gravemente l'UX, soprattutto se l'utente finale utilizza una connessione Internet lenta e inaffidabile. Questo è un altro motivo per cui dovresti scegliere un colore di sfondo appropriato in modo che l'utente possa leggere il contenuto durante il caricamento dell'immagine di sfondo.
Come installare un sito sul monitor desktop?
Probabilmente la prima cosa di cui ogni utente si stanca è guardare lo sfondo installato sul desktop. Molte persone guardano costantemente l'immagine predefinita per anni, anche se il sistema è stato reinstallato più di una volta. Tutti gli utenti si annoiano rapidamente e cercano immagini adatte per il desktop. Alcuni utenti preferiscono sfondi animati. Ti suggerisco di impostare la pagina principale del tuo sito preferito come sfondo (qualsiasi pagina, ovviamente). Ora, in tempi di Internet illimitato, questo a volte è molto, molto conveniente per alcuni, specialmente quando un computer o un laptop è costantemente connesso alla rete. In ogni caso, è una buona opzione. Questo trucco è apparso in Windows XP. Ahimè, è finita lì. I tavoli interattivi sono spariti. Per me personalmente è stato molto interessante assistere all'aggiornamento dei siti di notizie in linea. Tale impostazione sul desktop sarebbe utile a molti utenti. Ma, ancora una volta, i creatori delle nuove versioni di Windows hanno deciso di lasciare il desktop senza la possibilità di riflettere una pagina interattiva. Ad essere onesti, molto, molto dispiaciuto. Personalmente, questa opportunità a volte mi manca molto.
Ma passiamo dalle parole ai fatti. Installa la pagina web sul desktop
- Fai clic con il pulsante destro del mouse su qualsiasi spazio libero sul desktop
- Nel menu aggiuntivo che appare sul desktop, seleziona la voce Proprietà.
- Selezioniamo la scheda Desktop e facciamo clic Configurazione desktop...
- Dal menu Elementi del desktop, seleziona la scheda ragnatela e quindi fare clic sul pulsante Creare... Bene, o scegli un oggetto La mia home page attuale. Lo sfondo visualizzerà la pagina del sito che è impostata come home nel browser predefinito.
Nella finestra che appare, è sufficiente inserire l'indirizzo precedentemente copiato del tuo sito preferito dalla barra degli indirizzi del tuo browser.
Chiudere le finestre di dialogo successive accettando le modifiche e facendo clic su OK. Ora, invece di un'immagine noiosa, hai una pagina di un sito web che ti piace e, guardando il sito sul tuo desktop, puoi osservare i cambiamenti nella rete in modo interattivo.
Caricamento in corso...