SliderNav è un plugin per jQuery che permette di scorrere una lista dinamica mediante una barra di navigazione verticale, costituita da indici. L’autore prende ispirazione dalla rabrica telefonica dell’iPhone, infatti è realizzato principalmente per un elenco alfabetico, ad esempio una rubrica di contatti, ma può essere utilizzato per qualsiasi cosa.

Il plugin aggiunge automaticamente la barra di navigazione e imposta l’altezza per la lista in base a quanto è alta la barra. E’ possibile scorrere il contenuto della lista utilizzando la rotellina del mouse.

Utilizzo

SliderNav è semplice da far funzionare, ma prima nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e il foglio di stile CSS associato:

<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="slidernav.js"></script>

Aggiungiamo il codice HTML che crea la nostra lista di contatti utilizzando la struttura seguente:

<div id="slider">
  <div class="slider-content">
    <ul>
      <li id="a"><a name="a" class="title">A</a>
        <ul>
          <li><a href="/">Adam</a></li>
          <li><a href="/">Alex</a></li>
          <li><a href="/">Ali</a></li>
          <li><a href="/">Apple</a></li>
          <li><a href="/">Arthur</a></li>
          <li><a href="/">Ashley</a></li>
        </ul>
      </li>
      <li id="b"><a name="b" class="title">B</a>
        <ul>
          <li><a href="/">Barry</a></li>
          <li><a href="/">Becky</a></li>
          <li><a href="/">Biff</a></li>
          <li><a href="/">Billy</a></li>
          <li><a href="/">Bozarking</a></li>
          <li><a href="/">Bryan</a></li>
        </ul>
      </li>
      etc...
    </ul>
  </div>
</div>

Una volta impostato l’intera lista, è semplicemente una questione di chiamare la funzione sliderNav sull’elemento che abbiamo appena creato:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav();
});

il codice sopra è da scrivere nell’intestazione head della nostra pagina HTML, dopo aver richiamato il plugin.

Opzioni

E’ possibile inizializzare il plugin modificando le impostazioni predefinite in base alle proprie esigenze:

• height: impostare questo valore in pixel se si vuole evitare il rilevamento automatico basato sull’altezza della barra di navigazione verticale.
• items: per default il plugin genera la navigazione in ordine alfabetico utilizzando tutte le 26 lettere dell’alfabeto inglese, ma è possibile inizializzarlo utilizzando delle voci personalizzate.
• arrows: il plugin visualizza delle frecce di scorrimento sulla lista, utili per gli utenti che non dispongono di un mouse con rotellina; i valori possibili di tipo booleano sono true (visualizza) o false (nasconde).

Ecco il codice per inizializzare il plugin, da sostituire a quello semplice:

<script type="text/javascript"
$(document).ready(function(){
  $('#slider').sliderNav({
    items: ['voce1','voce2','voce3'],
    height: '200',
    arrows: false
  });
});
</script>

Conclusioni

SliderNav, come ci consiglia lo stesso autore, può tornare utile principalmente quando vogliamo mostrare molte informazioni in un piccolo box organizzate con un ordine alfabetico (o per data).
Sulla pagina dedicata al plugin SliderNav è possibile scaricare il codice, visualizzare la demo e ottenere ulteriori aggiornamenti.

In Australia è stato sviluppato un software in grado di contare con massima accuratezza il numero di capelli, o di peli su zone delimitate. E’ opera dei ricercatori di scienze matematiche e dell’informazione del Csiro (Ente Nazionale di Ricerca).

Il software si affida a immagini catturate da uno scanner pressato sulla pelle. Usando un algoritmo matematico rintraccia e identifica ogni singolo capello, rilevandolo comprendendo sue caratteristiche, distinguendolo da rughe, cicatrice o nei.

Il software renderà più facile il compito di chi prepara creme depilatorie, che potrà valutare così con precisione la loro efficacia.

Ora Napolux potrai contarti i capelli in tempo reale.

In questi giorni, dove lavoro, si sta discutendo dell’evoluzione del logo aziendale, ne ho creato un articolo delle mie considerazione.

Quanto conta un logo nella storia dell’evoluzione di una società? Il disegno di un marchio è una parte fontamentale di un progetto: vengono chiamati in campo gusto estetico, sintesi grafica e concettuale, capacità rappresentativa. Il logo deve essere riconoscibile, di facile riproduzione senza dimenticare il valore emozionale, spesso molto legato alla società di cui ne è il simbolo.

Fino a qualche tempo fa si giudicava corretto solo un logo che, riprodotto in bianco e nero e a dimensioni ridotte, risultasse facilmente leggibile. Oggi le cose sono diverse e questo avviene per una concomitanza di fattori: le possibilità tecniche di rappresentazione sono migliorate, così come quelle di stampa e soprattutto il gusto estetico si è evoluto dirigendosi verso l’illustrazione, l’uso dei colori e delle sfumature, delle trasparenze e degli effetti in generale.