Piccole modifiche /2

vlogit.gifUltime settimane con connessione a singhiozzo, in casa Central Scrutinizer: me l’avevano detto che i periodi post-laurea cominciano sempre all’insegna del precariato.
Senza perdermi d’animo ne ho approfittato per: 1)cominciare un nuovo progetto basato su una piccola fissazione di cui vi accennai tempo fa; 2) comprare e sfogliare a malapena questo ricchissimo tomo; 3) rimettere un pò in sesto il look di vlog.it.
Riguardo a quest’ultimo preparate i cuscini, perchè vi racconterò per filo e per segno quali sono stati i piccoli cambiamenti – stando naturalmente ben attento in questo periodo di par condicio a ripartire il giusto spazio in caso si debba parlare dello scontro Firefox ed Explorer.
La situazione iniziale è in questo screenshot.

Per prima cosa, naturalmente, ho riscritto l’HTML per recuperare la validità e la semantica perse un tempo che fu. Certo, ho tolto molti div in eccesso ma ne ho dovuto inserire altri per supportare successivamente i vari sfondi, quindi il peso è rimasto pressochè identico.
Riguardo al layout ho mantenuto la struttura a 2 colonne laterali, allargate di qualche pixel e riavvicinate a quella centrale. Ho eliminato un box a sinistra e due a destra, lasciando intatti solo i due degli archivi, il search e il box italico. All’inizio pensavo di spostare i box superstiti nel footer, poi però la forma arrotondata dell’header unita alla snella larghezza della colonna centrale avrebbero potuto causare rimandi non desiderati.

Colori: si tratta di template con schema monocromatico, quindi il punto di partenza è stato ed è ancora lo sfondo arancione del container, poi diluito in varie gradazioni. Ho quindi preso il vecchio web-safe #ff8800 (#f80 per gli amici) e l’ho rimaneggiato più volte con il fido Color Blender brandendo alla fine tra le mani un più veritiero #f29c19. A partire da questo, sempre con Color Blender, ho ottenuto dieci colori chiari inserendo nel secondo input che vedete il nero, e quindi dieci colori più chiari inserendo il bianco: una palette di venti colori dal bianco al nero (che non userò mai, ovviamente) passando attraverso il mio arancione in soli due colpi di javascript.

Riguardo alle immagini, avevo necessità di una sola ombra esterna di 2 pixel per cui ho utilizzato l’amico Fireworks che in certe cose trovo molto più immediato dell’ex concorrente Adobe (come con il Notepad ed il Word, ad esempio). Dicevo, ho uniformato tutte le ombre e aggiunto un menu sotto l’header con un ‘effetto maxi-tab: uno zoppicante mix tra il fast CSS rollover ed il menu a mini-tab.

Per ossequiare la mania della rotondità (non ve lo aspettavate “ossequiare”, uh?), ho pensato di avvalermi (neanche questo, eh?) nei form che si trovano nei commenti e nella pagina del submit della più volte citata tecnica CSS + javascript Nice Forms, venendo incontro però al problema del select non utilizzabile attraverso la tastiera: esisterà un rimedio?

Per ultimo, nella nuova pagina dedicata alle risorse sul videoblogging, ho utilizzato qualcosa che volevo sperimentare da tempo, ovvero lo scrolling morbido in javascript per la navigazione tra le ancore interne alla pagina.
[nota: le ancore possono essere inserite in due modi: <a name="nomeancora"/> oppure con un semplice id ad un elemento, ad esempio un div: <div id="nomeancora"/>. In entrambi i casi il link che punteranno alle ancore saranno del tipo: <a href="#nomeancora">Link</a>]
Partendo dalla segnalazioni in questo post apparso su <edit>, ho optato alla fine per questo script di Stuart Landgridge, che ha il difetto di riconoscere solo le ancore con attributo “name” e non gli “id” come invece fanno la soluzione moo.fx (scartato per non dovere dipendere dall’intero pacchetto che in ogni caso stimo molto) e quella di Travis Beckham (scartato per una certa obsolescenza).
Un ottima soluzione sembra essere invece quella che propone Frequency Decoder in questo commento nel post su web-graphics , ovvero una revisione del codice di Beckham in modalità non intrusiva.
Ora darò un occhiata, vi terrò aggiornati come sempre.

Update: lo script di Frequency Decoder sembra molto valido.
Ho estratto la parte relativa allo scrolling e cominciato a ridurlo ulteriormente confrontandolo con gli altri script di cui ho parlato sopra. Se volete provarlo anche voi, nel frattempo, eccolo qui:

Questa rimane la pagina di esempio.

4 comments:

Lascia un commento


Archivio categorie

Here's the months' archive. The time is now, remember.