Come creare pagine web - Lezione 10 del Corso Joomla
Nella lezione si mostra come creare le pagine web con la visualizzazione ottimale nei dispositivi mobili e desktop. La pagina web che viene creata sarà composta dai due moduli in alto con il background grigio a tutto lo schermo. Nei moduli viene posizionata l'immagine nel formatto webp visibile solo per desktop e il testo visibile a tutti dispositivi. Il contenuto viene creato con l'editor codeMirror e con l'aiuto delle colonne di Bootstrap Grid, impostando larghezza delle colonne in base al dispositivo. Sull'esempio pratico si mostra l’utilizzo delle colonne nelle pagine web pubblicando l'immagine e il testo. Con l'aiuto dello strumento flessibile si mostra la differenza della visualizzazione della pagina nei dispositivi diversi. Inoltre si mostra come nascondere e allineare il contenuto in base al dispositivo che visita la pagina web, come inserire le liste numerate con il titolo e la descrizione e come inserire l'icona di Font Awesome.
Capitoli
Creazione pagine web: 00:00
Controllo l'ottimizzazione della pagina per diversi dispositivi: 00:33
Conversione delle immagini nel formato webp: 01:43
Cambio dell'editor di Joomla: 03:59
Creazione articolo e assegnazione alla voce del menu: 04:20
Preparazione dello sfondo e della larghezza dei moduli: 05:22
Creazione e pubblicazione dei moduli con l'immagine e la lista con il testo: 07:46
Assegnazione distanze interne ai moduli: 16:52
Personalizzazione della voce del menu-: 19:48
Creazione del contenuto della pagina web: 20:39
Introduzione Bootstrap: 21:20
Introduzione Grid - larghezza dei blocchi secondo dispositivo (PC, Tablet, Smartphone): 22:38
Come usare le colonne in Bootstrap Grid: 24:30
Esempio dell'utilizzo pratico delle colonne di Grid: 28:20
Nascondere una colonna per i dispositivi mobili: 30:07
Altro metodo di assegnazione della larghezza alle colonne in base ai dispositivi: 32:44
Allineamento (destra, sinistra,centro) del contenuto secondo il dispositivo (PC, Tablet, Smartphone): 34:26
Inserimento di una lista numerata con il titolo e la descrizione: 36:14
Come usare le icone di Font Awesome: 38:22