Nelle scorse lezioni abbiamo introdotto l'utilizzo di Visual Studio Code per la scrittura di codice. Aabbiamo visto come questo editor sia efficace e permetta agli sviluppatori di lavorare al meglio risparmiando tempo e ottimizzando la produttività.
Dopo aver analizzato gli strumenti principali ad aver installato le principali estensioni di lavoro, ovvero strumenti aggiuntivi che aumentano le funzioni del programma, abbiamo iniziato lo sviluppo di un intero sito Web ed all'interno della scorsa lezione abbiamo dato forma a tutte le pagine collegandole fra di loro e permettendo la navigazione utente.
La situazione attuale è la seguente, una struttura semplice ma funzionale che fornisce la base per ottimizzare ed inserire elementi che miglioreranno il risultato finale e ci permetteranno di sfruttare altre funzionalità di Visual Studio Code. Il protagonista di questa guida.
Come sviluppare animazioni con Visual Studio Code
Procediamo aprendo la prima pagina del sito Web, ovvero index.html, e miglioriamo l'introduzione inserendo una galleria slider. Non la creeremo partendo da zero ma con l'estensione Bootstrap Snippet installata e già utilizzata nelle scorse lezioni.
Grazie a questa estensione sarà possibile richiamare tutti i template e le impostazioni fornite dal framework Bootstrap all'interno delle nostre pagine Web.
Se non conoscessi Bootstrap, ti faccio un rapido riepilogo in quanto è un framework di grandissima utilità, open source, ampiamente utilizzato per la creazione di siti Web e applicazioni Web.
Bootstrap offre un insieme di strumenti, componenti e stili predefiniti che semplificano il processo di sviluppo Web.
Approfondiremo questo framework durante la prossima lezione dedicata responsive design, ora sarà utile per inserire modelli precompilati in modo da snellire la scrittura di codice. In particolare in questo momento abbiamo bisogno di creare una galleria carosello, quindi, una volta installata e attivata l'estensione in Visual Studio Code, possiamo usare lo shortcut dedicato.
Per prima cosa dobbiamo assicurarci che la libreria sia incorporata, nel caso non l'avessi fatto nelle lezioni precedenti, ti basterà usare il trigger b4-$ e premere invio.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>Fatto ciò, ci posizioniamo all'interno del file HTML all'altezza del documento nel quale vogliamo far comparire lo slider, e digitiamo il trigger indicato: b4-carousel-default. In automatico sarà inserito il costrutto di codice che richiama la galleria carousel.
A questo punto colleghiamo le immagini aggiungendo la proprietà src="" in modo da richiamare le immagini che vogliamo inserire nello slider. Possiamo inoltre rimuovere la proprietà data-src in quanto non necessaria.
Infine definiamo la grandezza delle immagini attraverso la classe bootstrap w-100 ottenendo il seguente risultato:
<div id="carouselId" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselId" data-slide-to="0" class="active"></li>
<li data-target="#carouselId" data-slide-to="1"></li>
<li data-target="#carouselId" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="w-100" src="images/chi-siamo.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="w-100" src="images/portfolio.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="w-100" src="images/contatti.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselId" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselId" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
L'estensione Image Gallery
Proseguiamo ora aprendo la pagina portfolio.html alla quale andiamo ad aggiungere un elenco di immagini per darle maggior forma. Per gestire al meglio le immagini e incrementare la riconoscibilità di ognuna, cerchiamo all'interno del repository Visual Studio Code un'estensione che ci permetta di migliorare l'organizzazione, scriviamo Image Gallery ed installiamo l'estensione chiamata proprio Image Gallery.
A questo punto abilitando le funzioni presenti sarà possibile avere una migliore anteprima di tutte le immagini contenute nella cartella di lavoro, semplicemente cliccando con il tasto destro sopra alla cartella images e selezionando la nuova voce "Open Image Gallery".
Proseguiamo quindi inserendo nuove immagini che includeremo all'interno della pagina portfolio.html.
Ora possiamo tornare nel file HTML e lavorare alla creazione della galleria. Scriviamo div e premiamo invio facendoci aiutare dai suggerimenti base di Visual Studio Code
Immagini e CSS
Continuiamo poi usando Emmet, un'estensione molto popolare presente di default in Visual Studio Code che offre funzionalità di abbreviazione per velocizzare la scrittura del codice HTML e CSS. Abbiamo già affrontato questo plugin nelle lezioni precedenti, quindi se non lo conoscessi ti consiglio di dare un occhiata.
Procediamo creando la struttura che ospiterà le immagini della pagina portfolio.
<em>(div.itemgallery>div.itemgallery_i>img)*6</em>
Diamo invio. Ora non rimane che inserire le 6 immagini all'interno dei rispettivi tag.
<div id="portfolio-gallery">
<div class="itemgallery">
<div class="itemgallery_i"><img src="images/portfolio-1.jpg" alt=""></div>
</div>
<div class="itemgallery">
<div class="itemgallery_i"><img src="images/portfolio-2.jpg" alt=""></div>
</div>
<div class="itemgallery">
<div class="itemgallery_i"><img src="images/portfolio-3.jpg" alt=""></div>
</div>
<div class="itemgallery">
<div class="itemgallery_i"><img src="images/portfolio-4.jpg" alt=""></div>
</div>
<div class="itemgallery">
<div class="itemgallery_i"><img src="images/portfolio-5.jpg" alt=""></div>
</div>
<div class="itemgallery">
<div class="itemgallery_i"><img src="images/portfolio-6.jpg" alt=""></div>
</div>
</div>Passiamo poi al CSS e modelliamo gli elementi per dar loro la forma che preferiamo. Apriamo il file layout.css e scriviamo le seguenti regole:
#portfolio-gallery{
width: 1000px;
height: auto;
position: relative;
margin: 0 auto;
}
.itemgallery{
width: 50%;
height: auto;
position: relative;
float: left;
}
.itemgallery_i{
padding: 20px;
}
.itemgallery img{
width: 100%;
height: auto;
}E il risultato finalmente prende forma:
Ora passiamo alla pagina contatti.html all'interno della quale divideremo lo spazio in due parti, uno dedicato alla contact map e l'altro alle informazioni di contatto.
<div id="#col_contact">
<div class="col_contact_left">
<div class="col_contact_left_i">
<a href="#">Indirizzo e città</a><br/>
<a href="tel:+39 0000000000">+39 0000000000</a><br/>
<a href="mailto:indirizzoemail">indirizzoemail</a>
</div>
</div>
<div class="col_contact_right">
<div class="col_contact_right_i">
</div>
</div>
<div class="clr"></div>
</div>Ora aggiungiamo alcune icone per migliorare la lettura delle informazioni di contatto, per fare ciò utilizzeremo la stessa estensione usata per richiamare le regole di Bootstrap.
Grazie alle funzionalità presenti al suo interno, l'estensione permette di richiamare anche le librerie di icone relative a Font Awesome.
Le icone di Font Awesome
FontAwesome è una libreria di icone molto popolare e ampiamente utilizzata nel Web design e nello sviluppo Web. Fornisce infatti una vasta raccolta di icone che possono essere facilmente incorporate nei siti Internet. Procediamo quindi all'inclusione della libreria dedicata in maniera da poter richiamare tutte le icone desiderate.
<script src="https://kit.fontawesome.com/114619fb68.js" crossorigin="anonymous"></script>Fatto ciò possiamo richiamare le icone inserendole di fianco alle informazioni elencate, aprendo infatti l'anteprima dell'estensione è possibile vedere i dettagli e gli shortcuts delle icone presenti.
Partiamo inserendo all'interno della località la relativa icona, richiamandola in questo modo: fa4-map-marker.
<a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Indirizzo e città</a><br/>Dopodiché proseguiamo con le altre ovvero: fa4-mobile.
<a href="tel:+39 0000000000"><i class="fa fa-mobile" aria-hidden="true"></i> +39 0000000000</a><br/>fa-mail-bulk
<a href="mailto:indirizzoemail"><i class="fas fa-mail-bulk"></i> indirizzoemail</a>Completiamo la pagina "Contatti" inserendo una mappa per mostrare l'esatta location, incorporando una Google Map all'interno del <div></div> di destra:
<div id="col_contact">
<div class="col_contact_left">
<div class="col_contact_left_i">
<a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Indirizzo e città</a><br/>
<a href="tel:+39 0000000000"><i class="fa fa-mobile" aria-hidden="true"></i> +39 0000000000</a><br/>
<a href="mailto:indirizzoemail"><i class="fas fa-mail-bulk"></i> indirizzoemail</a>
</div>
</div>
<div class="col_contact_right">
<div class="col_contact_right_i">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387193.3059353029!2d-74.25986548248684!3d40.69714941932609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20Stati%20Uniti!5e0!3m2!1sit!2sit!4v1684074482262!5m2!1sit!2sit" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="clr"></div>
</div>A questo punto sarà possibile personalizzare gli elementi con CSS, nel modo che preferiamo.
