Ho pensato di creare un menu in orizzontale, funzionante solamente con CSS3 e HTML, senza l’impiego di jQuery e simili; dovrà avere un effetto fade-out sui bottoni del menu al momento in cui ci si passa sopra con il mouse.

Il codice HTML

Partiamo come sempre con il codice HTML, sfruttando l’ormai nota possibilità ce forniscono le liste non ordinate:

<div id="nav">
      <ul>
        <li><a href="#" class="selected">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Chi siamo</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Contatti</a></li>
      </ul>
</div>

Ovviamente a questo punto ci concentreremo sull’aspetto più importante, il CSS3 e gli effetti che vogliamo ottenere.

#nav ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#nav ul li {
  background-color: #666;
}
#nav ul li,
#nav ul li a {
  float: left;
  display: block;
}
#nav ul li a {
  margin: 15px;
  padding: 5px;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
}
#nav ul li a:hover,
#nav ul li a.selected {
  background-color: #e5e5e5;
  color: #272727;
}

Sino a questo punto, niente di strano, abbiamo creato un controllo sulle liste impostandogli un aspetto semplice, il tutto si può vedere su questo primo esempio.

Ma se volessimo dare un pizzico di pepe a questo menu?

Utilizziamo i CSS3 e nello specifico andiamo ad aggiungere dei bordi arrotondati ai bottoni che compongono il menu, inoltre posizioniamo anche delle ombre e il nostro effetto fade-out una volta che il mouse passa sopra il menu stesso.
Per fare tutto questo é sufficiente modificare il div #nav ul li a con le seguenti proprietà:

#nav ul li a {
  margin: 15px;
  padding: 5px;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
	-moz-border-radius:5px;
	-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
	-webkit-border-radius:5px;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
	-webkit-transition:all 0.50s ease-out;
}

Se tutto è andato a buon fine dovreste ottenere un risultato simile a questo esempio; ovviamente a questo punto vi potete sbizzarrire con la scelta dei colori e dei controlli estetici.

Technorati Tags: CSS3, tutorial

Articoli che potrebbero interessarti

• 20/04/2010 -- Codici brevi per Wordpress (0)
• 14/04/2010 -- Post auto-referenziale (0)
• 23/03/2010 -- Creare un bottone animato per i nostri form (1)

In realtà i fatti hanno assecondato Apple, in quanto in soli 60 giorni sono stati venduti 2 milioni di pezzi dell’ultimo arrivato.

A parer mio siamo testimoni di un momento epico della storia della tecnologia, paragonabile all’ingresso della telefonia mobile consumer; immaginate di poter ritornare a quindici, vent’anni fa e che un qualcuno vi proponesse un apparecchio in grado di telefonare da qualsiasi località, senza dover aver il problema dell’essere in casa; probabilmente avreste risposto che tale apparecchio non faceva al caso vostro in quanto il telefono, oggi diremo fisso, lo avevate già nella vostra abitazione.
Riuscite oggi ad uscire di casa senza cellulare? Probabilmente la risposta è no.
Nella stessa maniera oggi assistiamo alla nascita di una nuova generazione di apparecchi che vedono nell’iPad il suo modernissimo ed evolutissimo Adamo.

Detto questo vediamo come possiamo utilizzare l’iPad per il nostro lavoro.
Sappiamo già che l’iPad permette una ottimale navigazione web, la possibilità di leggere, rispondere e spedire e-mail, la possibilità di leggere quotidiani e testi, oltre a gestire in maniera molto efficiente calendari, contatti ed impegni.

Ho fatto una piccola lista di applicazioni che si possono installare sull’iPad per ottenere una ottima postazione di lavoro.

Pages, Numbers e Keynotes
Semplicemente indispensabili se si vuole poter lavorare con il proprio iPad come se si fosse di fronte al proprio Mac; ovviamente risultano essere compatibili con i propri file per Mac e per Office. La comodità di poter scegliere quale applicazione installare della suite iWork è spettacolare. Se avete necessità di un elaboratore di testi Pages fa al caso vostro, per un foglio di calcolo Numbers e comodissimo e con Keynote abbinato al kit Camera per collegarlo ad un proiettore esterno le vostre presentazioni non avranno segreti.
Il costo di ogni singola applicazione è di 7,99 € sull’AppStore.

Print n Share for Advanced Printig
Una delle cose che l’iPad non riesce a fare è stampare. Ma dall’AppStore arriva una stupenda applicazione, Print n Share for Advanced Printig, la quale permette di stampare su una qualsiasi stampante wifi oppure su una stampante collegata ad un PC/Mac grazie ad un software di appoggio. Inoltre il programma si può anche installare su una pendrive, così da portarselo appresso e utilizzarlo magari sul computer di un cliente. La stessa applicazione permette inoltre di trasformare l’iPad in un disco fisso esterno. Geniale!

PDF Reader Pro Edition for iPad
E’ un ottimo PDF Reader, praticamente la differenza con quello che utilizzate quotidianamente sul Mac è minima; apre gli allegati e-mail, effettua ricerche interne al file PDF, apre i file protetti da password, funziona sia in orizzontale che in verticale e permette di condividere il file sia in USB che via wireless.

A mio giudizio già con queste tre App per iPad si può fare tutto o quasi quello che normalmente viene svolto dai nostri PC/Mac.

Se avete consigli, ovviamente postateli nei commenti

Aggiornamento

Approfitto del commento di Giorgio per aggiungere un’altra applicazione interessante che permette la sincronizzazione dei file tra iPad e PC/Mac; ovviamente si può scegliere il servizio della Apple MobileMe, il quale permette una totale sincronizzazione tra i dispositivi  iPhone/iPad e PC/Mac, ovunque nel mondo e lavora anche sui contatti, mail, foto, ect. Una funzione interessante è il cosiddetto iDisk, un sistema per archiviare e condividere documenti on-line.

Se la vostra necessità è ‘limitata’ solo a quest’ultima esigenza, potete provare un interessantissimo software multi-piattaforma, DropBox il quale vi permetterà di caricare nelle vostre cartelle on line tutti i file che volete e visualizzarli nel vostro tablet oppure inviarli via email. Il software è gratis e fornisce 2GB di spazio e merita una prova.

Technorati Tags: Apple, iPad

Articoli che potrebbero interessarti

• 20/05/2010 -- Vedere il file nascosti su Mac OS X (1)
• 24/03/2010 -- Una Time Capsule fatta in casa (0)
• 04/05/2009 -- Box di ricerca in stile Mac OS X (1)

Aprire il Terminale, su Applicazioni>Terminale e digitate la seguente stringa e poi Enter:

defaults write com.apple.finder AppleShowAllFiles -bool true

Fatto questo basterà “riaprire” il Finder ricordandosi di tenere premuti i tasti ctrl+alt e andando su Riapri dopo aver cliccato sull’icona.
A questo punto potrete cancellare il file nascosti che non volete siano presenti anche sui sistemi Windows.
Per ripristinare le cose, basta ritornare sul Terminale e scrivere la seguente stringa:

defaults write com.apple.finder AppleShowAllFiles -bool false

Technorati Tags: Apple

Articoli che potrebbero interessarti

• 31/05/2010 -- L’iPad è tra noi: come usarlo per lavoro (8)
• 24/03/2010 -- Una Time Capsule fatta in casa (0)
• 04/05/2009 -- Box di ricerca in stile Mac OS X (1)

Questi non sono altro che porzioni di codice più esteso che viene richiamato al momento della scrittura di un articolo in una maniera più compressa e veloce.

Un codice breve per Google Maps

Un esempio può essere l’impiego delle Mappe di Google all’interno dei nostri articoli; in realtà molti mi potranno obiettare che Google permette in maniera semplice di incorporare velocemente un iframe della mappa, però é anche vero che a volte questo semplice copia-incolla crea dei problemi con l’editor visuale all’interno dei nostri post.
Con un shortcode si risolve tutto.

Aprite il file functions.php e incollate questo codice:

//Google Maps Shortcode
function fn_googleMaps($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));
return '';
}
add_shortcode("googlemap", "fn_googleMaps");

Mentre all’interno dei post o pagine si può usare questo:

 [googlemap width="200" height="200" src="[url]"]

Se si notano i tre valori qui sopra si può vedere come siano completamente personalizzabili ed indipendenti da quelli immessi di default nella funzione.
A questo punto non vi resta da fare altro che copiare il codice delle Mappe Google e sostituirlo con URL.

Questo post è un promemoria di come sia facile costruire il proprio codice breve per le funzionalità specifiche che più vi sono utili, qualunque possa essere.

Technorati Tags: Google Maps, tutorial, WordPress

Articoli che potrebbero interessarti

• 29/04/2009 -- Cambiare l’header di WordPress con i Tag Condizionali (2)
• 24/06/2010 -- Menu CSS3 con effetto fade-out (0)
• 07/02/2010 -- Creare un div a comparsa/scomparsa con jQuery su Wordpress (0)

L’articolo sui CSS3 é molto interessante, soprattutto per il gradevolissimo effetto estetico che se ne ricava; considerando che ormai quasi tutti i browser riesco ad interpretare bene i CSS3 si può, magari, già iniziare ad utilizzarli in qualche lavoro.

Per chi fosse interessato: Galleria d’immagini con i CSS3

Per quanto riguarda la mia pagina Twitter, il sito Copy Paste ha steso una classifica di 100 pagine Twitter da cui prender ispirazione ed esempio; la cosa mi gratifica parecchio, anche perchè significa che Smashing Magazine non si sbagliava

Inoltre mi fa molto piacere scoprire di essere in classifica insieme alle più famose Web Agency e Designer, oltre che blogger strafamosi e sportivi di fama internazionale.

L’autostima cresce

Technorati Tags: CSS3, twitter

Articoli che potrebbero interessarti

• 24/06/2010 -- Menu CSS3 con effetto fade-out (0)
• 23/03/2010 -- Creare un bottone animato per i nostri form (1)
• 19/09/2009 -- Sono su Smashing Magazine! (4)