In questo video-tutorial vediamo come gestire un menù di tipo dropdown, cioè con voci di menù di secondo livello che si aprono al passaggio del mouse della voce principale. Molto semplice è la gestione di un menù di sole voci di menù di primo livello, mentre con più livelli è più complicato perché dobbiamo anche gestire le sotto voci costituite dagli “ul nidificati nei tag li”.
Io ho trovato una soluzione con il plugin pushy.js. che è un menù di navigazione responsive off-canvas che usa le transizioni e trasformazioni CSS. Vediamo come funziona. Qui ‘è tutta la documentazione.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “COME TRASFORMARE UN MENU’ DROPDOWN IN MENU’ RESPONSIVE”—

Nome *

Email *

Per piacere seguici e metti mi piace:

Dopo il grande successo del video “Come realizzare un menù a tendina con le transizioni Css3” in termini di visualizzazioni che però ha creato non pochi problemi, sia per la visualizzazione che per il montaggio ( chiedo ancora scusa ma ero alle prime esperienze in termini di video-tutorial) ho deciso di riscriverlo modificandolo leggermente il codice e creandone una versione responsive ( che vedremo nel prossimo video tutorial ).
(altro…)

Per piacere seguici e metti mi piace:

Il responsive web design è ormai considerata un ’arte vera e propria che richiede molta lettura, pratica ed esercizio per poter essere compresa e poi implementata. Per raggiungere questo obiettivo è importante tener conto di alcune regole e concetti che ti permetteranno di realizzare un sito web correttamente visualizzabile su su qualsiasi risoluzione e quindi dispositivo. In primo luogo non si può prescindere da un approccio fluido di progettazione e sviluppo.
(altro…)

Per piacere seguici e metti mi piace:

Quanto è difficile spiegare il nostro mestiere? Quanto ancora il nostro mestiere avrà bisogno di tante parole e frasi per poter essere considerato un mestiere con la M maiuscola? Mi rivolgo ai miei colleghi: alzi la mano chi di voi non trovi difficoltà a spiegare cosa rappresenta il nostro mestiere nell’epoca della grande tecnologia, della navigazione su internet da cellulari e smartphone, nell’era di whatsApp e di Facebook, nell’era del cosiddetto settore “quaternario”?.

(altro…)

Per piacere seguici e metti mi piace:

In questo video tutorial vi parlo della progettazione responsive con sistema di griglia. Per far questo ho realizzato un mini video corso che comprende un totale di 4 video più intro e conclusione. Ho preferito fare in questo modo rispetto alla possibilità di girare un unico video molto lungo. Nei video vedremo come:

  1. Introduzione;
  2. progettare la griglia in photoshop;
  3. impostare la griglia sul browser;
  4. inserire il contenuto;
  5. rendere la griglia responsive;
  6. conclusione;

INTRODUZIONE – 1 VIDEO

In questo primo video vi mostro come realizzare la griglia in photoshop e vediamo come posizionare i contenuti all’interno della griglia. La griglia è un sistema di righe e colonne nei quali poter collocare gli elementi del sito web in modo preciso. Di solito le griglie sono 12 o 16 ma in ogni caso possiamo progettare un sistema di griglie differente in base al tipo di layout. Valutare la scelta è importante già nella fase di progettazione grafica.
Perché è facile inserire i contenuti nella griglia. Perché abbiamo le colonne ed i margini tra le colonne che ci permettono di posizionare in maniera precisa i contenuti e di calcolare le distanze tra essi sia verticalmente che orizzontalmente. Nel mio esempio ho realizzato un sistema di 16 colonne suddivise in un layout di 1440 px. Quindi ho realizzato un sistema che prevede 4 righe e 16 colonne. Nella 4 righe posizioniamo le parti principali del sito: header, gallery, middle, footer. All’interno di queste righe posizioneremo le colonne.

1440 / 16 = 90 px - 20px di margine

PROGETTARE IN PHOTOSHOP – 2 VIDEO

In photoshop ci facciamo un’idea precisa del sistema di griglie che vogliamo progettare sul web. Nel mio esempio ho creato un sistema di 16 griglie suddivise su un layout di 1440px di larghezza. In tal modo suddividendo 1440 / 16 = 90 otteniamo la larghezza della colonna. Ogni colonna poi avrà un margine di 20 px. In termini relativi sul 100% ogni colonna sarà pari a 6,25%. Disegniamo un sistema di griglie di 5 righe all’interno delle quali posizioneremo le nostre colonne.

LE GRIGLIE DA PSD AD HTML – 3 VIDEO

Nel passare da psd ad html è semplice. In questo esempio anziché usare le percentuali e quindi il sistema di misura relativo utilizziamo la proprietà css calc().
La proprietà css calc() ci permette di fare delle vere e proprie operazioni matematiche all’interno del foglio di stile e con molta precisione senza doverle calcolare con la calcolatrice. Inoltre le operazioni matematiche possono essere fatte senza alcun problema, combinando diverse unità di misura come le percentuali ed i pixel o gli ems.

Secondo il classico sistema anziché fare il seguente calcolo:

100% / 16 = 6,25%

1 colonna 6,25%
2 colonne 12,5%
3 colonne 18,75%
4 colonne 25%
5 colonne 31,25%
6 colonne 37,5%
7 colonne 43,75%
8 colonne 50%
9 colonne 56,25%
10 colonne 62.5%
11 colonne 68.75%
12 colonne 75%
13 colonne 81.25%
14 colonne 87.5%
15 colonne 93.75%
16 colonne 100%

Anziché utilizzare questa tecnica usiamo la proprietà calc()
oppure possiamo esprimere il concetto in frazioni con la funzione calc( 100% * 1/1 )

100% * 1/16 = 1 colonna
100% * 2/16 = 2 colonna
100% * 3/16 = 3 colonna
100% * 4/16 = 4 colonna
100% * 5/16 = 5 colonna
100% * 6/16 = 6 colonna
100% * 7/16 = 7 colonna
100% * 8/16 = 8 colonna —— LA META’ CIOE’ 1/2
100% * 9/16 = 9 colonna
100% * 10/16 = 10 colonna
100% * 11/16 = 11 colonna
100% * 12/16 = 12 colonna
100% * 13/16 = 13 colonna
100% * 14/16 = 14 colonna
100% * 15/16 = 15 colonna
100% * 16/16 = 16 colonna

Progettiamo la nostra griglia con questo metodo
Il calcolo si riferisce alla singola colonna. quindi la colonna per esempio 6 ( cioè totale 6 colonne ) è pari a 6 / 16 – 20px dell’ultima colonna + un margine destro di 20px ciascuno

Video 4 – inserire i contenuti e le media queries

Nel precedente video abbiamo realizzato la nostra griglia: le colonne in rosso saranno quelle che avranno i contenuti della nostra pagina. Inserire i contenuti è semplice. Troviamo la nostra colonna all’interno del foglio html e inseriamo ciò che vogliamo. Per esempio nella prima colonna in rosso che è quella formata da 16 colonne e quindi un’intera riga inseriamo i box.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “COME PROGETTARE UNA GRIGLIA RESPONSIVE”—

Nome *

Email *

Per piacere seguici e metti mi piace: