Central Scrutinizer (blog italiano)

Il mondo del web è in continua evoluzione, tranne che da queste parti. (una piccola pausa di ritenzione da cui è stato esclusa la costantemente aggiornata pagina su del.icio.us).
Il problema è dovuto al fatto che, ci terrei a ribadirlo ancora una volta, quando fai un applicazione, anche 2.0, quindi perpetual beta e una cosa e l’altra, spesso il collo di bottiglia è che deve esser produttiva alla prima release. Ora uno dei problemi fondamentali è che i tempi di produzione della prima release stabile sono lunghi, specialmente se anche l’ IT del cliente non è formato nello sviluppare. Il problema attualmente è che il mercato non è maturo perchè gli implementatori non sono maturi in questo momento, gli sviluppatori non hanno ancora abbastanza sufficienti cognizioni per andare ad agire immediatamente su quello che viene progettato, quindi si devono stabilire talmente tante sessioni di feedback per cui adesso in questo momento non è possibile agire in modo completamente agile (*) a destra.
In questo ed alcuni post seguenti vorrei raccontarvi un paio di piccoli dubbi che mi sono posto nel creare due siti extra-lavorativi, con relativa soluzione link-corredata.

Il primo sito ha per titolo: “The Lab of the Central Scrutinizer – also called “The Whitezone” – where I, Mark Rosetta, collect the experiments made in my weblogs”:

• http://lab.centralscrutinizer.it

1) Come riorganizzare nel modo migliore alcuni post del proprio blog? – Creando un nuovo blog che riproponga gli stessi post (“riciclate, sempre“) in formato “raccolta di-”.
Nel mondo dei blog di web design, i quali ricevono un grande supporto dai siti di social bookmarking, è importantissimo ricordare che nel migliore dei casi 1 scrive un post, 50 lo commentano, 500 lo segnalano, 5000 lo leggono. Ci guadagna ovviamente la persona che scrive (da qui: “But why not make something new? Instead of linking to a few articles every day, write one. Instead of showcasing and discussing the latest designs, design something. You’ve got this absolutely batty opportunity of instant global publishing. Publish! The world is your oyster!“) ma anche il segnalatore che riesce a raccogliere la ‘maggior quantità’ (a volte ci si accontenta solamente di un numero o di un “how to” nel titolo del post – ma è ovvio che se uno script o tutorial non serve a niente non verrà risegnalato) di post interessanti da linkare.
Un tempo andavano di moda i listoni alla Handbook o Interesting Links di Veerle (io due anni fa ci provai con ‘la collection’), ora riscuotono un certo successo i siti con feed alla MiniAjax o Smashing Magazine, ed ovviamente l’esercito delle gallerie.

2) Come realizzare un template in pochissimo tempo? – Puntando sul bianco, la colonna unica, ed aggiornando la frase “Io amo il minimale!” in “Il web design è 95% tipografia“.
In realtà la tipografia, ma soprattutto il layout (a volte la sola tipografia può definire il layout) costituiscono l’impalcatura di ogni sito web e dovrebbero essere studiati abbastanza approfonditamente. Io ho trovato un buon punto di partenza nelle slide di due presentazioni tenute da Mark Boulton al SXSW: “Web Typography Sucks” (io, l’amico Antonio ed un newyorkese conosciuto all’albergo l’abbiamo persa perchè siamo scesi alla fermata sbagliata dell’autobus; ho detto agli altri due “Ora la gente uscirà da lì dicendo ‘Una delle migliori presentazioni a cui ho mai assistito in vita mia!’” Tristemente, avevo ragione.) con Richard Rutter, e “Grids Are Good” con Khoi Vinh.
Riutilizzerò lo stesso layout, con l’aggiunta di una colonna sulla destra, per il redesign di questo blog pronto per il 2012. (a proposito di procrastinazione feroce, il buon Fullo si immolò per tutti noi). Se un tempo soffrivo di agorafobia grafica , ora i post più lunghi hanno bisogno di una maggiore spazio in larghezza. Per rendere il testo allineato all’header e al footer, ho utilizzato un impopolare text-align: justify; questo articolo su Digital Web Magazine, però, mi da conforto:

You are probably already familiar with the text-align property, but you may not have thought about using the justify value. There are few cases when it’s useful; however, when using narrow, newspaper-like columns, it can greatly improve the flow of your text and help define the layout and overall design of your pages.

3) E’ possibile inserire, con effetto rollover, 2 link con ‘image replacement’ in un solo <h1>? - Anni ed anni di navigazione sul web ci hanno insegnato che, nella maggiorparte dei casi, il titolo in alto a sinistra nella pagina è linkato e porta all’homepage del sito.
Il titolo può essere un semplice testo, oppure questo può essere sostituito da un immagine; in entrambi i casi io utilizzo un codice HTML di questo tipo:

<div id="header">
<h1><a href="http://example.com">Titolo sito</a></h1>
</div>

dove ho inserito un h1 in un div “header”, ed al suo interno il testo del link dentro un tag <a>.

Per sostituire il testo con un immagine (“image replacement”) tramite CSS utilizzo la tecnica di Mike Rundle Accessible Image Replacement:

h1 a {
    display: block;
    width: larghezza immagine;
    height: altezza immagine;
    background: url(immagine.jpg) no-repeat;
    text-indent: -9000px;
}

L’elemento inline <a> diventa block-level, quindi può assumere delle dimensioni: queste saranno uguali a quelle dell’immagine, inserita come background di <a>, mentre il testo verrà fatto scomparire traslato fuori dall’area visibile del browser.
Al link può essere aggiunto un effetto rollover utilizzando la tecnica Fast CSS Rollover:

h1 a:hover {
        background: url(immagine.jpg) no-repeat bottom;
}

L’h1 del titolo del Lab che avevo in mente conteneva invece al suo interno due link:
The Lab of the weblog Central Scrutinizer.

Mentre il sottotitolo il link ad una sola parola:
(also called “The Whitezone“)

Tradotto in codice HTML:

<div id="header">
<h1>The <a id="logolab" href="http://lab.centralscrutinizer.it">Lab</a> of the weblog
<a id="logocentral" href="http://www.centralscrutinizer.it/en">Central Scrutinizer</a>
</h1>
<h2>(also called "<a id="logowhite" href="http://lab.centralscrutinizer.it">The Whitezone</a>")</h2>

Nel CSS ho reso l’header position: relative in modo da diventare spazio di riferimento dei tre link a cui ho attributo position:absolute, e spostato quest’ultimi tramite top e left all’interno del div header. (un esempio simile si trova in questo post di Andy Clarke su 24ways.)

Infine, per i tre link ho utilizzato l’image replacement e il rollover come nell’esempio sopra inserendo come background le immagini logocentral, logolab e logowhite.

a#logocentral {
	position: absolute;
	top: 47px;
	left: 0px;
	z-index: 5;
	width: 129px;
	height: 72px;
	background: url(images/logocentral.jpg) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logocentral:hover{
	background: url(images/logocentral.jpg) no-repeat scroll bottom;
}

a#logolab {
	position: absolute;
	top: 6px;
	left: 150px;
	z-index: 1;
	width: 183px;
	height: 110px;
	background: url(images/logolab.png) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logolab:hover{
	background: url(images/logolab.png) no-repeat scroll bottom;
}

a#logowhite {
	position: absolute;
	top: 117px;
	left: 5px;
	z-index: 10;
	width: 348px;
	height: 57px;
	background: url(images/logowhite.jpg) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logowhite:hover{
	background: url(images/logowhite.jpg) no-repeat scroll bottom;
}

Arrivedòrci! ->(1 – continua…)

Postato Mercoledì, Agosto 29th, 2007 alle 16:42 ma scritto qualche mese prima. Puoi seguire le poche risposte a questo post attraverso il feed RSS 2.0 . Puoi anche lasciare una risposta, o (qualcuno li usa ancora? scrivetemi) un trackback dal tuo sito.