Cell. +39 3479684755
Il Blog di Instant Websites
Menu adattivo con jQuery
Tra le varie problematiche emerse con il web design reattivo, o adattivo che dir si voglia, c’è innanzitutto quella di garantire un facile accesso ed operatività del menu di navigazione.
Ogni voce del menu stesso deve essere facilmente azionabile, cosa che in una visualizzazione normale (zoomata “out”) della pagina nel caso in cui questa non sia reattiva può diventare pressoché impossibile.
Una soluzione pratica e gradevole graficamente, poiché per niente intrusiva, è quella di nascondere il menu normale raggiunta una certa dimensione della viewport e fare apparire un menu in forma di pulsante, con o senza etichetta.
Si consideri ad esempio questa pagina creata apposta per il tutorial, quindi molto essenziale.
Il contenitore di base ha larghezza pari a 960px; nel momento in cui la viewport scende sotto tale dimensione – ovvero, in termini di media query, ha larghezza massima di 959px – il contenitore stesso occupa tutto lo spazio disponibile.
Il menu di base, che è orizzontale, non viene immediatamente sostituito poiché resta facilmente accessibile fino a quando la viewport non raggiunge una dimensione quantificata in 640px (breakpoint): a quel punto, appare il menu adattivo.
Per realizzare quanto sopra è stato utilizzato un plugin per jQuery chiamato SlickNav – Responsive Mobile Menu Plugin for jQuery che ha il pregio di essere facile da impiegare e da personalizzare.
Dopo avere scaricato il pacchetto dal sito del plugin (vedi sotto), copiamo il file jquery.slicknav.js (o il corrispondente minimizzato, anche se il “peso” in Kb è molto modesto) in una cartella chiamata ad esempio /js ed il file slicknav.css in una cartella chiamata /css.
Nel codice di pagina inseriremo dunque nella sezione <head>:
…
<!– Viewport tag and properties –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”/>
<!– /Viewport tag and properties –>
…
(come sempre quando vogliamo che i dispositivi mobili eseguano le media query basandosi sulla propria risoluzione della viewport invece di zoomare), poi:
…
<!– css –>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
<link href=”css/slicknav.css” rel=”stylesheet” type=”text/css”>
<!– /css –>
<!– jQuery e plugin –>
<script src=”js/jquery.js”></script>
<script src=”js/jquery.slicknav.js”></script>
<script>
$(function(){
$(‘#menu’).slicknav();
});
</script>
<!– /jQuery e plugin –>
Il foglio style.css è quello di base della nostra pagina mentre slicknav.css è quello specifico del plugin.
Posizionamento delle colonne in un layout reattivo
Lo sviluppo di una pagina web a due o più colonne può essere attuato sulla base di due metodi: il metodo delle faux columns, basato sulla proprietà float, ed il metodo basato sull’uso della dichiarazione display: table-cell.
Ce ne siamo occupati in un precedente articolo del blog: https://lnx.instantwebsites.it/iwblog/?p=926 concludendo che il primo dei due è ancora preferibile, non fosse altro per il fatto di essere consolidato nella pratica, oltre che per via del mancato support da parte di Internet Explorer 7. AGGIORNAMENTO: essendo nel frattempo IE7 divenuto obsoleto, la scelta tra le due tecniche si baserà sulla prassi preferita dallo sviluppatore. All’articolo menzionato si rinvia anche per le modifiche di posizionamento nel layout reattivo.
Quando il layout deve essere di tipo reattivo, si pone talvolta il problema della diversa disposizione delle colonne nella visualizzazione adattiva rispetto a quella normale.
Prendiamo ad esempio una struttura del tipo raffigurato nell’immagine seguente (ridotto al minimo indispensabile per gli scopi di questo tutorial):
Assegnando alle due colonne (ed al relativo box contenitore) la proprietà float: left ed inserendole nel codice HTML di pagina nell’ordine corrispondente, avremmo come risultato che nella visualizzazione adattiva – in cui la proprietà float viene annullata e i due box si comportano come elementi a livello di blocco – la colonna 1 si disporrebbe sopra e la colonna 2 sotto.
Si tratterebbe in effetti del normale posizionamento statico degli elementi, appunto, a livello di blocco che non a caso è definito per semplicità “posizionamento in base al flusso di codice”.
Nel foglio di stile avremmo dunque:
#colonna-1 { float: left; width: 360px; }
#colonna-2 { float: left; width: 600px; }
e per quanto concerne le Media Query:
@media (max-width:959px) { #colonna-1, #colonna-2 { float: none; width: auto; } }
Box reattivo per la pubblicazione di un video tramite iframe
Esistono diversi metodi per pubblicare video in una pagina HTML, il migliore dei quali in termini di compatibilità è quello che fa uso del tag <video> della nuova versione di HTML, vale a dire HTML5 (ne abbiamo parlato in un precedente articolo).
Prevedendo diversi formati del file, compreso quello di fallback per i browser che non supportano HTML5 (.flv cioè Flash Video), è possibile rendere il video fruibile su tutti i dispositivi, recenti e meno recenti.
Ci sono però altre considerazioni che spingono a preferire una soluzione differente: pubblicare il filmato su YouTube, quindi incorporarlo nella pagina del sito.
Queste motivazioni sono riconducibili innanzitutto a quanto segue:
- rendere il video visibile anche sul sito YouTube stesso, quindi ad una platea potenzialmente molto più ampia;
- evitare di dovere convertire il file in più formati (.mp4, .ogv, .webm, .m4v, .flv);
- aggirare le limitazioni imposte da alcuni fornitori di hosting sullo spazio massimo occupabile in totale e/o relativo ad un singolo file, dato che i file video sono spesso di grosse dimensioni.
Presupponendo dunque di avere optato per questa strada, YouTube fornisce il codice per incorporare il video nella pagina, ad esempio:
<iframe width=”853″ height=”480″ src=”//www.youtube.com/embed/6U-J8Nn9JfQ”></iframe>
Notiamo per prima cosa che il filmato ha proporzioni pari a 16:9 quasi esatte, il che si traduce in un rapporto base/altezza pari a:
9/16 = 0,5625 => 56,25%
mentre nel caso di un filmato con proporzioni 4:3 il calcolo diverrebbe:
3/4 = 0,75 => 75,00%
Questa premessa è necessaria perché, come vedremo di seguito, la soluzione dell’iframe comporta delle complicazioni nel rendere adattivo il filmato.