Lynda.com Progetta il video di sfondo HTML Web

• Potrebbe 17, 2024

Il video di sfondo è un ottimo modo per commercializzare il tuo prodotto e in questo corso di formazione video di Lynda.com intitolato Progetta il Web: HTML Background Video con Chris Converse imparerai come aggiungere un video di sfondo a riproduzione automatica alla tua pagina web. Imparerai anche come usare i CSS per posizionare altri elementi di design sul video di sfondo. E i file degli esercizi sono gratuiti anche per l'abbonamento Standard.

Converse inizia con un file html di bare bones e crea il contenitore div principale per gli elementi di design: la tagline del testo, il logo svg e il video. Dimostra come utilizzare la riproduzione automatica nel tag video e come impostare i due tipi più comuni di video, .mp4 e .ogg.

Successivamente, Converse passa ai file CSS e CSS per definire lo stile e posizionare il video e l'immagine del logo centrata. Continua a fare lo stesso per il testo della tagline. Mi è piaciuta soprattutto la sua tecnica per lavorare con i bordi.

Converse discute quindi su come rendere reattivo questo layout usando media query per schermi medi e piccoli e CSS. Ancora una volta, imposta gli stili per il video, il logo e lo slogan. Dimostra anche come impostare un'immagine sostitutiva per piccoli schermi che non possono riprodurre un video e come nascondere il video.

Passando a problemi più complessi, Converse dimostra come utilizzare JavaScript per aggiungere un controllo più complesso sul display per le funzionalità dei dispositivi mobili, come gli eventi tattili. Introduce un sito Web di terze parti chiamato Modernizr che genererà classi CSS che possono essere aggiunte alla pagina tramite JavaScript in base alle funzionalità del dispositivo corrente. Dimostra come generare il codice, scaricarlo e aggiungerlo al codice della tua pagina web.

Nell'ultima lezione, Converse mostra come codificare la posizione e altri stili per il layout in modo che il video copra l'intera finestra del browser.

Questo corso riguardava l'HTML e il CSS utilizzati per modellare e posizionare un video di sfondo per dispositivi Web e mobili. Tuttavia, speravo che l'autore avrebbe discusso le opzioni per l'hosting e l'ottimizzazione del file video per un download veloce. Inoltre, sarebbe bello sapere come aggiungere elementi di design interattivi sul video di sfondo anziché solo elementi statici.

Chris Converse ha una laurea in graphic design presso il Rochester Institute of Technology e 22 anni di esperienza in design e tecnologia.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Divulgazione: non sono stato compensato finanziariamente per questo articolo. Le opinioni sono completamente mie sulla base della mia esperienza.

Istruzioni Video: InDesign and HTML tutorial: InDesign and HTML overview | lynda.com (Potrebbe 2024).