Cell. +39 3479684755
Il Blog di Instant Websites
Corsi di web design a Vigevano (Pavia)
Le aree fondamentali del programma base sono le seguenti:
- Introduzione al Web Design
- La struttura di un sito web
- HTML5 e CSS3: progettazione e sviluppo di pagine reattive
- Promozione del sito (SEO)
Le caratteristiche più importanti della nostra proposta di corsi sono:
- interazione diretta con l’insegnante, essendo seduti alla stessa scrivania, anche nei corsi collettivi che prevedono al massimo 3 partecipanti;
- flessibilità di giorno e di orario delle lezioni (nei limiti delle disponibilità);
- possibilità di personalizzare il programma, nel caso si disponga di una preparazione di base e/o ci si voglia concentrare su determinate aree del programma;
- programma ampio e completo, dato che parte dalla progettazione di un sito alle pratiche di SEO (ottimizzazione per i motori di ricerca).
Siamo a Vigevano (Pavia), il nostro ufficio è facilmente raggiungibile anche da Milano:
- in treno, partendo dalla stazione di Milano Porta Genova o Milano San Cristoforo: circa 30′ di viaggio, poi 10′ di camminata dalla stazione alla sede;
- in auto, con ampio parcheggio gratuito proprio davanti alla sede stessa.
I corsi possono essere organizzati in orari mattutini, pomeridiani o serali (nei giorni feriali) ed è possibile concordare:
- corsi di gruppo ed individuali;
- lezioni e consulenze singole;
- corsi con programmi personalizzati;
- corsi specializzati (ad es. su WordPress, Joomla!, OpenCart ed altri CMS).
Programma: scarica il file con il programma aggiornato dei corsi (Corso Base + moduli proposti per il Corso Avanzato)
I nostri siti di riferimento: www.corsidiwebdesignavigevano.it / www.corsiwebdesign.it / www.corsidiwebdesign.eu
Modulo di richiesta informazioni: lnx.instantwebsites.it/iwblog/?page_id=953
Telefono: 3479684755 – 0200618547 (segreteria telefonica)
Possibilità di incontro conoscitivo gratuito e senza impegno
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.
FitVids.js: plugin jQuery per l’inserimento di video reattivi
L’inserimento di video da YouTube o altre piattaforme sociali tramite iframe in una pagina reattiva o comunque fluida, comporta alcune difficoltà particolari, legate all’esigenza di mantenere il corretto rapporto proporzionale tra base ed altezza del video (e del relativo contenitore).
L’argomento è stato già trattato e, in un recente articolo, è stato indicato un fix, peraltro non immediato, per risolvere il problema.
Esiste tuttavia un plugin sviluppato per il framework jQuery, chiamato FitVids.js, che serve proprio allo scopo.
Esempio 1: utilizzo in una pagina fluida
Vediamo come utilizzarlo in una pagina fluida con dimensioni 100%, dove abbiamo impostato solo un padding a body.
Associamo la libreria di base del framework ed il plugin, preventivamente scaricato ed inserito in un’apposita cartella del nostro sito:
…
<head>
…
<script src=”https://code.jquery.com/jquery.js”></script>
<script src=”js/jquery.fitvids.js”></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(“#videoBox”).fitVids();
});
</script>
…
</head>
là dove #videoBox è il box che conterrà il video.