Lezione 3: La nostra prima Home page


In questa lezione vedremo insieme come creare la nostra prima Home page. A differenza di quanto visto precedentemente, inizieremo a definire gli elementi che compongono la pagina a partire dalla navbar.

Componenti:

Il bello di utilizzare un framework è sicuramente il numero di componenti messe a nostra disposizione. In particolare Bootstrap, ci fornisce diversi strumenti e paradigmi che ci aiuteranno non poco nella realizzazione del progetto. Per un elenco esaustivo di questi potete consultare la documentazione ufficiale.
Alcuni di questi strumenti li avete già incontrati, dove? Se non lo avete notato questo sito è realizzato in Bootstrap! In particolare, potete trovare:
  • Gliphicons: un set di oltre 250 icone disponibili gratuitamente per i vostri siti
  • Navbar: la barra di navigazione del sito
  • Dropdowns: menu a tendina (avete provato a ridurre questa pagina?)
  • Breadcrumbs: menu di navigazione all'interno delle pagine (guarda alla fine di questa pagina!)
  • ed ancora: bottoni, badge, alert, oggetti multimediali e molto altro!
Grazie a questi oggetti, possiamo popolare il nostro sito di tutto il necessario.

Home page:

Per iniziare è necessario dare una struttura alla nostra pagina web. Per farlo il componente basilare per la navigazione è la navbar (barra di navigazione). Vediamo di seguito come realizzarla.

Navbar:

La navbar, come suggerito dal nome, è una componente chiave per la navigazione del nostro sito. Bootstrap ci permette di creare navbar responsive e dinamiche, che ci permettono di integrare un gran numero di componenti. Questi possono essere: link, menu a tendina, pulsanti, campi di ricerca, ecc. Inoltre, ci fornisce i giusti strumenti per riadattare questa barra a seconda delle risoluzioni.

esempio:

Vediamo come creare, sul nostro scheletro, la semplice barra di navigazione utilizzata su questo sito. Una volta ripreso lo scheletro utilizzato nella precedente lezione, posizionatevi all'interno dei tag <body> ed inserite il seguente codice: 
<!-- Navigation -->
<nav class="navbar" role="navigation">

</nav>
<!-- /Navigation -->
In questo modo abbiamo inizializzato lo spazio per nostra barra di navigazione, semplice no? Però non ci è ancora possibile visualizzarla (o meglio ...provate l'esercizio!), abbiamo ancora del lavoro da fare. Abbiamo due diversi stili per la barra:
  • navbar-default per creare una barra di colore bianco
  • navbar-inverse per crearne una a colori invertiti come quella qui sopra
Inoltre possiamo definire la posizione all'interno della pagina della barra, che potrà essere sia in cima che sul fondo della stessa. Per variare la sua posizione, dobbiamo utilizzare i seguenti comandi:
  • navbar-fixed-top per ancorare la barra alla parte alta della pagina
  • navbar-fixed-bottom per posizionare la barra sul fondo
O ancora, potremmo definirla in modo che non segua lo scorrere della pagina, attraverso i comandi: *-static-*. Per applicare queste classi alla nostra barra sarà sufficiente inserirle all'interno della formula class del tag <nav>. 
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

</nav>
<!-- /Navigation -->

Esercizio

Prova a cambiare il colore della barra tra default ed inverse e la sua posizione all'interno della pagina tra top e bottom.

puoi cambiare il colore di fondo della pagina aggiungendo questo codice CSS: body { background: #3caf52 !important;} come visto nella precedente lezione.

Inseriamo gli elementi:

A questo punto abbiamo creato la nostra barra di navigazione, ma è completamente vuota. Per popolarla però, dobbiamo tenere a mente che tutto in Bootstrap si modella attraverso le griglie. Ricordate quanto detto nella precedente lezione? Esatto, ci serve un container: 
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

    </div>
    <!-- /.container -->
</nav>
<!-- /Navigation -->
Questo sarà la "scatola" che conterrà le due strutture della navbar, sia quella per dispositivi desktop che mobile. Anche in questo caso, dovremo pensare allo sviluppo in un ottica di inscatolamento. Quindi, definiamo l'header della nostra barra che conterrà il pulsante d'attivazione del menu ed il logo (o nome) del nostro sito: 
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand e toggle per mobile -->
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigazione</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- Brand -->
                <a class="navbar-brand">WD</a>
        </div>
    </div>
    <!-- /.container -->
</nav>
<!-- /Navigation -->
È importante notare l'oggetto con classe sr-only, questo non verrà visualizzato a video, ma risulta di vitale importanza per gli screen readers e dunque l'accessibilità della pagina. Le altre icone, sono le "linee" che vediamo all'interno del pulsante che si verrà a creare sulla barra.

Come avrete notato, il collegamento tra le due barre è garantito dal comando data-target, dovremo dunque creare un nuovo oggetto <div> di classi collapse e navbar-collapse che conterrà le definizioni dei link.

Principalmente Bootstrap ci mette a disposizione due tipologie di link: semplici o a dropdown. Maggiori informazioni riguardo i possibili elementi utilizzabili all'interno della navbar sono disponibili qui. Per questo primo esempio, vediamo come definire dei semplici collegamenti. Per farlo inseriamo i componenti che mancano al nostro scheletro: 
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand e toggle per mobile -->
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigazione</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- Brand -->
                <a class="navbar-brand">WD</a>
        </div>
        <!-- Insieme di links, forms, and altri componenti per la navbar -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">Nome</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse --> 
    </div>
    <!-- /.container -->
</nav>
<!-- /Navigation -->
A questo punto sarà sufficiente inserire tutti i link come elementi della lista e popolare gli indirizzi per vedere realizzata la nostra barra.

Come avrete notato, è possible indicare quale pagina è visualizzata al momento sulla barra di navigazione. Per ottenere questo risultato è sufficiente aggiungere al tag <li> del link che vogliamo qualificare la classe active.

Esercizio

A questo punto abbiamo tutti gli elementi per poter creare una barra di navigazione complessa. Prendiamo per esempio la demo Carousel proposta dagli sviluppatori di Bootstrap. In questo esercizio dovrai repplicare all'interno della nostra pagina web la stessa navbar.

Come avrai notato però, questa oltre ad essere staticamente ancorata alla parte alta della finestra, risulta essere della stessa dimensione degli altri elementi e non estesa per tutta la lunghezza della finestra, sapresti dire il perché?

La grandezza degli elementi è strettamente legata alla loro inclusione all'interno dei container. Partendo dal nostro scheletro, inverti il container con il tag <nav> per limitare la dimensione della barra.

Ricorda anche di invertire l'ordine di chiusa dei tag!! Quindi, ricapitolando, inverti le prime due e le ultime due righe!

Prova a costruire la barra tralasciando il menu dropdown che affronteremo nel paragrafo successivo. Ricorda di utilizzare le classi che abbiamo visto in questa lezione per valorizzare la voce "Home" nella barra e per ancorare la posizione della barra di navigazione.

Inserisci molti <br> all'interno dei tag <body>. In questo modo allungerai la lunghezza complessiva della pagina e potrai verificare più facilmente il comportamento della barra.

Menu Dropdown:

I menu dropdown, non differiscono di molto rispetto ai normali link visti fino ad ora. Anche in questo caso, utilizziamo una struttura ad elenco puntato per rappresentare le varie voci di menu, la differenza principale è nella classe di valorizzazione degli elementi. Per maggiori informazioni potete consultare la documentazione ufficiale di Bootstrap.

Per il nostro esempio, vi è sufficiente utilizzare la seguente porzione di codice per creare un dropdown menu: 

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Nome</a></li>
        <!-- Dichiarazione del munu --> 
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <!-- separatore --> 
                <li role="separator" class="divider"></li>
                <!-- voce non selezionabile -->
                <li class="dropdown-header">Nav header</li>
            </ul>
        </li>
    </ul>
</div>

Esercizio

Completa il menu precedente includendo anche l'ultimo elemento dropdown.

Esercizio

Ripristina la barra di navigazione a pieno schermo e prova a spostare il menu dropdown a destra della barra mantenendo gli altri elementi sulla sinistra. Il risultato finale desidato è questo.

Per ottenere questo risultato, ti sarà necessario utilizzare le impostazioni di allineameneto dei componenti. Leggi attentamente il paragrafo dedicato all'allinemanto disponibile nella documentazione e presta particolare attenzione al concetto di gruppi di elementi separati!