Menu a tendina (Drop down menu) solo con i CSS

In questo video corso vedremo come creare un menu a tendina (drop down menu), con il solo utilizzo del linguaggio CSS, cioè senza Javascript o JQuery. Questa tecnica è in CSS2, quindi abbastanza compatibile anche con vecchi browser; ovviamente potrà essere utile creare un foglio stile per Internet Explorer (versioni inferiori alla 9) con i commenti condizionali, in modo da evitare sorprese a chi è rimasto indietro con gli aggiornamenti del browser di casa Microsoft (comunque orami molto pochi, si spera!).

Continua a leggere Menu a tendina (Drop down menu) solo con i CSS

Menu Html5 e Css

Il menu su un sito web

fare un menu con i css e html5Un menu su un sito web è una combinazione di elementi html (cioè tag) e regole css, le quali daranno l’aspetto grafico del menu di navigazione.

Non esiste, in html, nessun elemento (tag) fatto appositamente per questo scopo, neanche in html5. Esiste sicuramente l’elemento cliccabile (il tag “a”), ma non è sufficiente per creare un menu, come oggi viene visto sulla maggior parte dei siti web.

Per creare quindi tutti gli elementi html adatti alla navigazione, sfrutteremo le proprietà dell’elenco puntato (ordinato o non), il quale ci darà una struttura html sufficientemente complessa per il nostro obbiettivo.

Dopo aver inserito correttamente questi tag, potremmo preoccuparci delle regole css che daranno l’aspetto grafico finale.

STRUTTURA HTML

Nel nuovo html5, possiamo intanto sfruttare le caratteristiche semantiche del tag “nav” per avvantaggiare l’indicizzazione e l’accessibilità del sito: ma non è questo, il tag che risolverà i nostri problemi, perchè <nav> è un contenitore come il vecchio <div> e, graficamente, si comporterà nello stesso modo (se opportunamente “resettato” con la proprietà css “display:block”).

Codice html:

 

<nav class=”navigazione”>

<ul>

<li><a href=”#”>home</a></li>

<li><a href=”#”>about us</a></li>

<li><a href=”#”>products</a></li>

<li><a href=”#”>contacts</a></li>

</ul>

<br class=”clear”>

</nav>

 

Questa struttura html ci permette di controllare autonomamente il contenitore del menu (nav) e gli elementi che dovranno “flottare” ed essere cliccabili allo stesso tempo, cioè i tag <a>.

Ricordiamoci che per interrompere il float (in quanto stiamo creando un menu orizzontale e quindi gli elementi cliccabili dovranno affiancarsi tra di loro), occorre inserire un tag con una classe che risponda ad una regola css con la proprietà “clear:both”: sfrutteremo il tag <br> che è un’interruzione di riga forzata e quindi un tag autochiudente (cioè non è previsto che abbia contenuto). Rimane comunque sempre un errore, anche se poco grave (sarebbe più grave utilizzare un <div> in quanto contenitore che rimarrebbe vuoto).

Nota bene: il tag <br> non può essere nidificato all’interno del tag <ul> (o <ol>) perchè gli elenchi puntati o numerati possono contenere solamente tag <li>.

Il codice CSS

Con i css dobbiamo formattare tutti i tag che abbiamo inserito nell’html e opportunamente classificato con gli attributi “class” (vedi tag <nav> e tag <br>).

.clear {

clear: both;

}

DESCRIZIONE: la regola di classe “clear” serve per interrompere il float, quando verrà assegnato.

 

.navigazione {

background-color: #036;

}

DESCRIZIONE: il tag <nav> (con la classe “navigazione”) ha solamente lo sfondo blu scuro.

 

 

.navigazione ul  {

margin: 0px;

padding: 0px;

list-style-type: none;

}

DESCRIZIONE: il tag <ul> (dentro il tag con la classe “navigazione”) ha una regola di reset che serve a togliere il margine (interno ed esterno) e il punto dell’elenco. Normalmente questa regola dovrebbe già essere applicata se stiamo costruendo un sito web con la tecnica del “reset”.

 

 

.navigazione ul li {

display: inline;

}

DESCRIZIONE: il tag <li> (dentro il tag <ul>, dentro il tag con la classe “navigazione”) ha la proprietà css “display:inline”, che serve a evitare che le vecchie versioni di Internet Explorer visualizzino il menu a “scaletta” (bug IE).

 

 

.navigazione a {

display: block;

width: 160px;

padding: 7px;

float: left;

text-decoration: none;

margin-right: 4px;

}

DESCRIZIONE: il tag <a> (dentro il tag con la classe “navigazione”). La regola più importante. La proprietà css “display:block” visualizza il tag <a> (che normalmente è un link) come un blocco, cioè come un elemento che occupa tutta la larghezza a disposizione, mandando a capo gli elementi successivi. Gli vengono quindi assegnate le proprietà CSS larghezza, margine interno (padding), float (affiancamento): cioè tutte le caratterisitiche in comune con  gli altri stati dei pulsanti.

 

 

.navigazione a:link {

color: #FFF;

background-color: #069;

}

DESCRIZIONE: il tag <a> nello stato “link” (dentro il tag con la classe “navigazione”).  Lo stato “:link” (o meglio chiamata “pseudoclasse” link), descrive il link nel suo stato normale.

 

 

.navigazione a:visited {

color: #FFF;

background-color: #069;

}

DESCRIZIONE: il tag <a> nello stato “visited” (dentro il tag con la classe “navigazione”).  Lo stato “:link” (o meglio chiamata “pseudoclasse” visited), descrive il link nel suo stato visitato.

 

 

.navigazione a:hover {

color: #FFF;

background-color: #900;

}

DESCRIZIONE: il tag <a> nello stato “hover” (dentro il tag con la classe “navigazione”).  Lo stato “:link” (o meglio chiamata “pseudoclasse” hover), descrive il link nello stato di rollover (sopra con il mouse).

 

 

.navigazione a:active {

color: #FFF;

background-color: #C90;

}

DESCRIZIONE: il tag <a> nello stato “active” (dentro il tag con la classe “navigazione”).  Lo stato “:link” (o meglio chiamata “pseudoclasse” active), descrive il link attivo (click con il mouse).

Software (programmi) e fasi lavorative per il web design layout

Ecco una valutazione personale su quali siano attualmente i migliori programmi/software, nonché le fasi di lavoro e le procedure corrette per la creazione di layout per siti web moderni, efficaci, ed in linea con le specifiche del web. In questo articolo cercheremo di dare una risposta alle numerose domande che mi vengono poste dai miei allievi quando scelgono un corso di web design del nostro studio (link, pagina dei nostri corsi). Ma iniziamo con l’articolo e analizziamo le fasi lavorative per ottenere un buon layout per un sito web.

Lo studio dei contenuti

Qui non parlerò di software di progettualità; tale requisito è alla base di ogni creazione, artistica o artigianale che sia.
Non ci si può esimere dalla fase progettuale che, nell’ambito della grafica e della comunicazione finalizzata al web, pretende uno studio approfondito che parte dai contenuti (testi, immagini, loghi, video, animazioni, elementi di interazione con l’utente), i quali devono essere studiati e disposti per pagine, sezioni, categorie. Avete mai provato a fare un volantino senza avere studiato i contenuti?

La fase di studio dei contenuti non è affatto semplice, ma richiede competenze elevate nell’ambito della comunicazione: occorrerà valutare target e strategie di comunicazione per far vedere al cliente i contenuti che si aspetta  (un po’ come la disposizione dei prodotti all’interno di un supermercato).

Quindi voglio ricordare: senza “testi e immagini” non si inizia a lavorare!!

Le immagini e le fotografie,
Adobe Photoshop

Quale miglior software di Adobe Photoshop per i flussi di lavoro (fotoritocco, fotomontaggio. ottimizzazione…) che riguardano le foto? Questo software è decisamente il prodotto più conosciuto e professionale allo stesso tempo (caratteristiche non sempre in accordo, nel mondo “reale”). Grazie a questo prodotto potremmo avvalerci dei migliori strumenti di editing fotografico e grafico, studiati e implementati da fotografi, dai grafici e dai programmatori di casa Adobe, dall’ormai lontano 1990.
Preferirei sicuramente le immagini in formato RAW, per poter ottenere  il massimo dallo scatto digitale e adopererei i flussi di lavoro automatizzati di Photoshop (azioni, batch…) per elaborare in pochi click grandi quantità di fotografie da pubblicare online; si spera ovviamente che le foto siano scattate da un fotografo professionista, informato sulla linea comunicativa da tenere per il cliente.

La gestione dei video,
YouTube, Vimeo…

Per realizzare i video occorre rivolgersi a professionisti del video editing; per quanto riguarda la pubblicazione sul sito è necessario tenere in considerazione che, data l’enormità di formati e tipologie di computer, browser e dispositivi, sarà necessario rivolgersi ad un servizio online come YouTube e Vimeo. Questi si preoccuperanno di convertire il video in tutti i formati possibili e in tempi assolutamente più veloci rispetto anche ad una sola conversione effettuata sul nostro pc di casa.

I servizi online offrono molti vantaggi, rispetto al caricamento del video direttamente sulle nostre pagine del sito web:

  1. Facilità di pubblicazione: scarico il video sul computer, lo elaboro eventualmente, mi connetto al mio profilo/canale, e carico online.
  2. Facilità di gestione: database dei video, metadati, modifiche online e velocissime.
  3. Integrazione sul proprio sito. Guardi il video, vai sulle opzioni di condivisione, prendi il codice, lo incolli nel tuo Html, lo formatti con i css.
  4. Il formato. quale formato video tra i centinaia disponibili? e per l’audio? Sono domande a cui non daremo nessuna risposta: penserà a tutto il convertitore di YouTube (flash o Html5) e non dovremo letteralmente “impazzire” per rendere compatibile i nostri video su tutti i computer.
  5. Socialità e indicizzazione. YouTube in questo caso, sicuramente batte tutti. Il nostro video potrà essere commentato, visitato, integrato su altri siti, protetto con licenza Creative Commons con un click, potrà contenere istruzioni e l’indirizzo del nostro sito visibile a tutti. Oppure no: basterà impostare correttamente le impostazioni di privacy.

Una piccola precisazione, sulla quale non pretendo condivisione assoluta: credo che nella maggior parte dei casi, gli utenti saranno facilitati quando sul nostro sito troveranno il player video che sono abituati ad utilizzare, cioè quello di YouTube o Vimeo, senza perdere tempo nel capire dove si trova il pulsante dell’audio, o come si “manda avanti”, o la modalità a pieno schermo.

Studio del layout
Adobe Illustrator o Photoshop?

È sicuramente più diffusa la pratica di creare il layout del sito su Photoshop, probabilmente perché più conosciuto e diffuso; sono ragioni più che valide per optare verso questa scelta, ma vorrei far notare che Adobe Illustrator è un software più pratico per impaginare e totalmente integrato con le funzionalità di Photoshop; inoltre i due offrono sistemi diversi (pixel  e vettoriale) per la realizzazione delle grafiche che insieme, offriranno la possibilità di realizzare qualsiasi progetto. La mia opinione è quindi: usiamo entrambi: effetti su Photoshop, impaginazione su Illustrator.

Viste poi le nuove funzionalità del pannello CSS di Adobe Illustrator CC, si evince che anche Adobe propende verso la realizzazione di layout con questo prodotto piuttosto che con Photoshop, il quale resta comunque il prodotto più potente per effetti e fotorealismo.

Creare il sito e pubblicarlo.
libero il codice, liberi dai software…

Io utilizzo Adobe Dreamweaver che è un ottimo software, ma attenzione: i linguaggi del web sono in genere open source e gestiti, per quanto riguarda la loro attualizzazione e standardizzazione (caratteristica importante perché i siti siano uguali per tutti, funzionanti ed accessibili) da un organismo di controllo che si chiama W3C (link, ufficio italiano del w3c). I produttori dei browser web si devono solo adattare agli standard. Personalmente consiglio di utilizzare codice Html e Css certificato w3c (cerca su google)per i software vedete voi (basta anche un foglio di testo).

Ciao.

Flash Cs5.5, maschere sfumate as3

In questa video lezione di Flash Cs5.5 vediamo come creare una maschera sfumata attraverso il linguaggio Actionscript 3. Non è difficile; occorre un pezzetto di codice (vedi sotto), un’immagine e l’utilizzo di base delle animazioni movimento.

Corso GattosulWeb collegato: Adobe Flash Cs5, corsi web design, Roma.

[important]Codice Actionscript3:
maschera.cacheAsBitmap = true;
albero.cacheAsBitmap = true;
maschera.mask = albero;[/important]

Passaggi:
1) La prima cosa da fare è scontornare l’immagine con Photoshop, eventualmente con l’utilizzo dei canali alfa (nel video si vede come fare, una volta creato il canale occorre caricare la selezione: menù selezione -> carica selezione). Il file deve essere salvato in formato .psd per garantire la trasparenza su Flash.

2) Creare il file di Flash (consiglio di salvarlo subito), importare l’immagine creando il simbolo necessario all’animazione di movimento assegnando, eventualmente, un nome di istanza.

3) Creare il simbolo per la colorazione dell’albero. In realtà questo simbolo fungerà da maschera, ma eventualmente si potrà invertire il codice actionscript (cioè trasformare “maschera.mask = albero;” in “albero.mask = maschera;”) per vedere la sagoma dell’albero prendere i colori del simbolo “colore-albero_mc”.

4) Disegneremo, all’interno del simbolo “colore-albero_mc”, l’animazione del tronco e delle foglie su livelli separati, con effetti che possono essere regolati a piacere. Occorrerà ovviamente mettere uno “stop” alla fine dell’animazione per non veder ripetere all’infinito l’animazione.

5) È il momento di Actionscript. Torniamo sullo stage, creiamo un livello per le azioni (è facoltativo, ma vivamente consigliato) e incolliamo il codice di cui sopra. Fate attenzione al nome delle istanze che corrispondano ai vostri simboli, altrimenti non può funzionare (logico, no?)

Scarica i file del tutorial as3 (.zip)

Flash Cs5, animazione 3d con immagini

In questo tutorial di Flash Cs5 puoi vedere come animare un’immagine con gli strumenti 3D di Flash, partendo da Photoshop. L’animazione su Flash avviene solitamente con oggetti vettoriali (direttamente in Flash o disegnati in Illustrator), spesso però capita di non averli, oppure di avere la necessità di utilizzare immagini. È possibile anche in questo caso, sfruttando le caratteristiche di Photoshop, cioè separandone gli elementi.

[important]L’animazione 3D consente di muovere gli oggetti sul piano delle coordinate “y” (oltre a “x” e “z”), ottenendo un effetto di rotazione nello spazio; ovviamente non stiamo parlando di animazione 3D reale, ma solamente di un oggetto bidimensionale che trasla sull’asse tridimensionale (finto 3D).[/important]

Una volta importata l’immagine su Flash, avendo convertito i livelli in clip filmato (vedi il video più sotto), occorre distribuire i simboli sui livelli della timeline (avendo cura di creare i simboli per ogni elemento animabile) e, con l’animazione di tipo movimento, effettuare le trasformazioni nel tempo.

N.B.: per comprendere tutti i passaggi nel tutorial, occorre conoscere la timeline di Flash e l’animazione movimento con i simboli clip filmato.