Una pagina html con tutti i link che servono davvero


Alle volte un’idea semplicissima diventa, una volta sviluppata e realizzata, una di quelle cose che rendono la vita migliore –almeno un pochino.
Come quella di cui voglio parlare in questo post. L’idea non è mia –sia chiaro da subito– ma sapete come vanno le cose.
Anche Stefano Lavori ha copiato l’idea che ha cambiato il mondo dei ‘puter: scrivania, cartelle, documenti, topo e quant’altro li ha copiati dopo averli visti nel parco della collina del coyote. Bravo Stefano, che ha visto che era un’idea che acchiappava, ma, dico io, bravi quelli del parco che quelle cose le avevano immaginate.
Tutto questo per dire che chi è stato bravo davvero è Mattux (quello che in casa si ostinano a chiamare Matteo o, esagerando Matteo Pani)


Trovate tutto sul suo blog, nella pagina Startpage minimale che utilizza un menù. Quindi, dopo aver proposto a Matteo di brevettare il tutto, magari con il nome iMattux (Stefano insegna) il mio compito è finito. No! Aspettate un momentino, adesso vi racconto quelle che sono le mie personalizzazioni.

Al CSS di Matteo ho apportato un unica modifica: ho allargato il campo di destra. Nella riga (dovrebbe essere la n. 110)

ul.link { position:absolute; left:250px; top:50px; opacity:0; width:250px; visibility:hidden;

ho cambiato il valore di width sostituendo 250 con 400, altrimenti le descrizioni lunghe venivano spezzate su due linee. Il resto è tutto OK.

Nel file html le modifiche sono, ovviamente più numerose e personali.
Intanto il titolo, quello che appare sulla barra della finestra: è definito nelle prime righe, così <title>Tutti i link</title>.

La scritta grande in testa alla pagina è definita della divisione testata:

<div id="testata"> <h1>Tutti i link che servono davvero</h1> </div>

seguono tante div class=”contenuto_due” in cui vengono definite le scritte del menu e dei link. Qui io propongo una variazione rispetto alla versione di Matteo: la linea tipica per l’elenco della class=”link” è del tipo

<li><a href="https://plus.google.com/" target ="_blank">Google Plus</a></li>.
L’aggiunta di target =”_blank” aprirà la pagina indicata in un nuovo tab. Così questo menu si apre una volta sola e rimane aperto sempre nel tab più a sinistra, meglio no? 8)

Per inserire una riga vuota, non clickabile basta mettere
<li><a href="#">&nbsp;</a></li>

Attenzione che ogni div id=”gruppo” deve avere identificatori unici e consistenti per indice_# e lista_#; ma è facilissimo.

Tutto lì.
Funziona con Linux, Windows, Mac, _________. A meno che siate proprio speciali. Io l’ho testato con Firefox ma il codice è davvero standard, non dovrebbero esserci problemi. Per dire potreste usare anche Internet Explorer 8) –che sarebbe comunque una pessima idea.

Nel mio caso si vede che mancano le voci relative al Reader dei siti RSSati e per la mail. Ciò perché ho due estensioni che mi avvisano all’arrivo di nuovi documenti da leggere.

Oggi quello della mail non funziona 😦

Alcuni penseranno come direbbe il mio tutor a UCDB Gyro Gearloose

Troppo semplice, non capisco

ma a altri potrebbe piacere, e magari servire. Io per esempio lo sto usando. Sempre che Matteo non voglia farsi pagare le royalties 8)

Posta un commento o usa questo indirizzo per il trackback.

Commenti

  • Mattux  Il 8 settembre 2011 alle 11:54

    Ma va, che Royalties XD
    Addirittura non l’ho coperto da licenza (la più adatta credo sarebbe la AGPL, o forse una più libera).
    Mi fa comunque veramente piacere come questa piccola cosa sia piaciuta e che possa tornare utile a qualcuno oltre a me 😀

    Visto che hai elenchi di link un po’ lunghi rispetto al menù ti potrei suggerire di decommentare la riga 112, che aggiunge un bordo anche ad essi 🙂 È solo una piccolezza estetica, ma io son pignolo 😛

    Vorrei precisare che l’immagine di testa io l’ho presa da un bellissimo tema di icone per GNOME, che ora non ricordo qual’è. Magari appena lo ripesco aggiorno il mio post.

    • juhan  Il 8 settembre 2011 alle 12:01

      Contento che ti sia piaciuto il post.
      Si il CSS offre tante possibilità ma volevo tenere il tutto semplice, per dire così ci può riuscire un niubbo come me e sentirsi geek 😉
      Poi chissà se lo usa qualcuno, oltre a me.

  • giulia68  Il 10 settembre 2011 alle 01:15

    Grazie, Matt! E grazie a Juhan che mi ha permesso di arrivare a te! 🙂
    Ho appena scaricato il link.. me lo studierò con calma.. io sono lenta in queste cose.. 😉 e appena sarà in funzione ti dirò che effetto mi farà..
    Grazie ancora e buon lavoro!
    Giulia

Trackback

  • […] si chiama Mat. Mat com’è che non c’eri più tra i miei followati? Trovate tutt qui: Una pagina html con tutti i link che servono davvero. Chissà se Mat la usa ancora anche lui, se l’ha aggiornata? Il post è del 2011, roba […]

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.

%d blogger hanno fatto clic su Mi Piace per questo: