Dopo qualche mese di apnea causa tesi, ecco un aggiornamento al portfolio: il nuovo tema per maestroalberto. Il buon Alberto ha deciso di rinnovare il vestito del suo blog, mi ha chiesto di dargli una mano e ho accettato volentieri. E’ nato così un tema pulito ed essenziale, con 6 sidebar gestite tramite widget (3 laterali e 3 nel footer).

Dal punto di vista tecnico, la cosa a mio avviso più interessante è il modulo di ricerca Google, riadattato alla grafica del tema. Per i curiosi, riporto il css utilizzato:

#header form#quick-search {
position: absolute;
top: 175px; right: 20px;
padding: 0; margin: 0;
border: 1px solid #fff;
width: 320px; height: 33px;
background: #e5e5e3 url(images/header-search.gif) no-repeat top left;
z-index: 999999;
overflow: hidden;
}
#header form#quick-search p {
margin: 0; padding: 0; border: none;
}
#header form#quick-search input {
border: none;
background: transparent;
color: #bababa;
float: left;
margin: 0; padding: 5px;
}
#header form#quick-search .tbox {
margin: 6px 0 0 5px;
width: 216px;
display: inline;
border: none;
}
#header #search form#quick-search .btn{
width: 25px; height: 25px;
border: none;
}
#header form#quick-search label {
float: right;
font-size: 10px;
line-height: 11px;
border: none;
padding: 2px 2px 0 2px;
margin: 0;
}
#header form#quick-search input.radio {
float: right;
clear: right;
height: 12px;
margin: 2px 2px 0 0;
padding: 0;
border: none;
}

Ecco come appare il modulo in questione:

L’unica criticità era far rientrare i label che veicolano la ricerca su google o sul web nel piccolo spazio a disposizione nel form, l’unico modo per far diregire a IE questa cosa è forzare le dimensioni del campo di input del radio button. Con Firefox o Safari nessun problema; con IE, nonostante i margini e il padding, il bottone continuava ad andare per i fatti suoi. Dando una regola di height a 12px tutto è tornato come voluto.

Altra cosa interessante del tema è l’utilizzo del 960 grid system: un framework css molto comodo per dimensionare e strutturare un template con dimensione fissa di 960 pixel. E’ un modo rapido e veloce per impostare gli spazi, il framework permette di utilizzare un sistema a 12 o 16 colonne, grazie a una serie di classi preconfezionate e pronte all’uso, sicuramente da approfondire.

Per quanto riguarda la validazione invece, il CSS è privo di errori, mentre il codice XHTML risulta inquinato dai vari plugin.. Mi chiedo: ha ancora senso correre dietro ai mille errori che si presentano quando questi non dipendono da te? La politica che ho adottato è quella di costruire codice valido nella parte che realizzo in prima persona e infischiarsene di ciò che scrivono gli altri, finchè questo non intacca le prestanzioni globali..

Ne approfitto per fare un in bocca al lupo ad Alberto e ringraziarlo per avermi dato fiducia.
Commenti e suggerimenti sono ben accetti.

E’ un po’ di tempo che non parlo di javascript, forse perché effettivamente ne scrivono tutti, e per qualche strana attitudine personale tendo a rigettare gli argomenti troppo inflazionati.
Fatto sta che javascript è una tecnologia sempre più utilizzata per gestire effetti e transizioni particolari sulle pagine web. Un anno fa tutti sembravano concordi sul fatto che Adobe Flex avrebbe soppiantato javascript, ajax e compagnia bella.
Di questo Air c’è in giro qualcosa (esistono diverse applicazioni interessanti..), ma ancora non si è verificata la diffusione di massa; ancora resta una tecnologia valida sulla carta ma non sfruttata in pieno, forse perchè è un sistema proprietario. Parlo da ignorante, non ho mai avuto modo di approfondire, e se qualcuno è in grado di smentirmi sono qui per ascoltarlo, mi piacerebbe sapere. Probabilmente l’espansione c’è, ma come tutte quelle che si rispettino è lenta e inesorabile. [Update: ma questo è tutto un altro discorso..]

Javascript è invece sempre più omnipresente, da Flickr al blog meno noto di tutti, le soluzioni e le proposte si sprecano.
Nell’utilizzare questi script bisogna stare molto attenti a garantire l’usabilità del sito anche per chi ha javascript disattivato e a non creare conflitti. L’integrazione dei diversi framework è ben lontana, spesso si finisce per costruire template con effetti accattivanti che poi vanno in difficoltà se abbinati a plugin che utilizzano framework differenti rispetto a quelli preventivati in fase di design. A tal proposito può risultare utile consultare questo articolo di edit che offre utili consigli per la scelta del framework più adatto; se poi si vuole avere un’idea più completa delle offerte possibili ci viene in aiuto questa esaustiva guida.

Qui invece vorrei fare il punto, raccogliendo tutte le cose che ho visto in giro negli ultimi mesi. Qualcuno probabilmente già ne avrà sentito parlare, per altri potrebbe essere un buon punto di partenza per farsi un’idea di ciò che il “mercato” offre.. Si tratta in genere di plugin o script a se stanti rilasciati dagli sviluppatori gratuitamente, quindi liberamente utilizzabili.

Framework più noti

• Mootools
• JQuery – JQuery UI (user interface) – Interface (framework per gli effetti)
• Prototype – Scriptaculous
• YUI

Gallerie multimediali

• Shadowbox (funziona con tutti i framewokr e carica diversi tipi di media)
  
• Thickbox (jquery)
  
• Slimbox (mootools)
• Lightbox (scriptaculous)
• prettyPhoto

• In questo sito invece è possibile trovare la raccolta di tutti i cloni di lightbox disponibili: attualmente ne conta ben 38

Utility

• Modalbox: per creare dialog-box
• VirtualTour: tour virtuali di ambienti (jquery)
• Markitup: editor javascript (jquery)
• Timeframe: calendario javascript
• Websnapr: bubble tooltip
• Spoiler Revealer: per far apparire un testo (jquery)
• Accordion solo CSS e javascript

Inutility

• Cubescape: per creare le tue composizioni cubiformi
• Supermario in javascript
• Supermario Kart

Menu di navigazione

Riporto solo i più interessanti, ce ne sono davvero una marea..

• Fisheye menu con mootools
• Fisheye menu con jquery
• Fisheye menu senza l’utilizzo di frameworks
• Fancy Menu
• iPod menu
• TabbedPane: menu a tab (prototype)

Ultima segnalazione per il post di Tom, che ha fatto una carrellata di alcuni effetti presenti su siti web, accompagnandoli con valide considerazioni.