Lavorando su un sito fa sempre comodo poter contare su utility o risorse reperibili in rete in grado di semplificare o velocizzare certe fasi del nostro lavoro. Abbiamo già affrontato l'argomento in altri articoli:
- Utility indispensabili per webdesigner
- Layout in CSS con Layout-o-matic
- Un indirizzo e-mail anti-spam
- Ripuliamo l'HTML di Word
- Scegliere il colore giusto
Questo e gli altri che seguiranno sono l'ideale prosecuzione della serie. In questo appuntamento ci occuperemo di menu con i CSS, di ottimizzazione dei fogli di stile, di test sui font, di codici di colori ed entità HTML.
CSS Tab Designer
Ci siamo occupati più volte in questa sezione di menu a tab con i CSS. Gli Un menu a tabs con i CSSdi Alesandro Fulciniti sono un eccellente riferimento per imparare le principali tecniche di implementazione. Qui parliamo di un piccolo programma in grado di farci realizzare questo tipo di menu con pochi click del mouse. Si tratta di CSS Tab Designer. Disponibile per piattaforma Windows, può essere scaricato da questo sito. Scompattato lo zip, si potrà procedere all'installazione. Insieme al programma verranno copiati sul nostro disco anche una serie di esempi preconfezionati.
Il principio di funzionamento è piuttosto semplice, anche se l'interfaccia non è sempre intuitiva. Si parte dal presupposto che ogni menu sia composto da una serie di item. In quelli a tab, poi, troviamo sempre uno specifico item che è selezionato, risultando diverso nell'aspetto rispetto a quelli non attivi:
Per ogni nuovo progetto, si inizia con il creare un item specificando in un'apposita area dell'interfaccia il testo della tab e l'URL a cui punta:
A questo punto basterà un click sul pulsante Add Item per aggiungerlo all'elenco:
Ripetere questa procedura fino a completare le voci necessarie. Dal pannello degli item visto qui sopra sarà sempre possibile eliminare specifiche voci, modificarle nell'ordine, aggiornarle.
Il bello viene quando si deve dare il tocco di stile. Dal menu Style posto sulla barra orizzontale si può scegliere tra ben 45 combinazioni, non si deve fare altro. Nella parte inferiore dello schermo si può osservare un'anteprima live del nostro lavoro. Una volta trovato lo stile che più ci convince, basterà cliccare sulla voce Generate HTML: il programma provvederà a creare l'output necessario, in genere un documento HTML, un foglio di stile CSS e le immagini accessorie. Ulteriori modifiche e personalizzazioni si potranno effettuare lavorando su questi file.
Altri menu
Parlando di menu con i CSS non possiamo non citare Listamatic (1 e 2). Si tratta una raccolta pressocché completa degli esempi e delle tecniche di menu basati su liste via via comparsi in rete negli ultimi mesi. Ce n'è davvero per tutti i gusti e le esigenze, da quelli verticali a quelli orizzontali. Di ciascun esempio viene fornito il codice HTML e quello CSS. Non purtroppo le eventuali immagini accessorie utilizzate, che possono comunque essere recuperate, magari andando a cercarle nella cache del browser.
'Parente' stretto di Listamatic è List-o-matic. Si tratta in questo caso di un wizard che consente la creazione veloce di menu con liste. Nei pochi passi necessari ad ultimare il lavoro, si potrà scegliere innanzitutto il numero di item, per poi passare al testo e ai link, per finire, ovviamente, con la selezione dello stile. Il risultato finale potrà essere personalizzato in seguito con i colori e i font che meglio si adattano al nostro progetto.
Per i più frettolosi, segnalo anche Free Menu Designs. Niente di più semplice: una serie di bei menu CSS pronti per essere scaricati e modificati a nostro piacimento. Ogni pacchetto contiene un file HTML (gli stili sono incorporati) e le immagini usate.
#FF????
Lavorando con i fogli di stile è fatale doversi confrontare con i codici dei colori. Se per tinte comuni come il bianco e il nero è facile ricordare la sequenza esadecimale o quella RGB, non così è per le innumerevoli varianti cromatiche che potremmo o dovremmo utilizzare. Questo CSS Color Chart è allora una risorsa da tenere nei bookmark per trovare immediatamente quello che ci serve. Lo schema presenta di default i codici esadecimali, ma con un semplice click sul pulsante ToggleRGB-Hex è possibile passare all'alternativa RGB.
Ottimizzare i CSS
Nella scrittura di un foglio di stile è difficile rispettare sin dall'inizio le buone norme che consentono di ottenere un documento leggero e razionale nella struttura. CSS Formatter and Optimiser è una utility online che serve esattamente a questo. È possibile operare in due modi. Copiare e incollare il codice nell'area identificata come CSS Input oppure passare all'applicazione l'URL di un foglio di stile già caricato su un server. Compiuto questo primo passo, si può passare a settare le impostazioni presenti nel riquadro a destra. Si può scegliere tra 4 livelli di ottimizzazione, da Low ad Highest. Nella scelta si deve tenere presente che più alto è il livello più diminuisce la 'leggibilità' del codice, dal momento che vengono quasi completamente eliminati gli spazi bianchi e le separazioni di riga. Le altre opzioni presenti consentono di modificare eventualmente l'ordine di selettori e proprietà, di abbreviare i codici dei colori, di usare proprietà a sintassi abbreviata quando possibile, etc. Si procede all'ottimizzazione con un click sul pulsante Process CSS. L'applicazione fornisce il nuovo codice e anche un report che evidenzia il guadagno di peso in Kb che si è riusciti ad ottenere.
Testare i font
La scelta delle caratteristiche del testo tramite i CSS è senza dubbio tra quelle cruciali in fase di progettazione. Il modo migliore per non doversi sottoporre ad estenuanti sessioni di test, è partire con le idee chiare. Prima di mettere mano al codice, insomma, potremmo fare un giro su Korhoen Typeviewer. La pagina è di una semplicità esemplare. Al centro una porzione di testo. In alto una serie di campi di testo corrispondenti alle principali proprietà, dal tipo di font all'altezza di linea. Basterà quindi inserire i valori e la combinazioni da testare per visualizzare immediatamente le modifiche apportate sul testo sottostante. Per le opzioni più comuni è anche possibile utilizzare i menu a tendina attivabili dalle voci presenti in alto.
Codice e caratteri speciali
Innanzitutto una risorsa da tenere sempre a portata di mano nel caso si debbano usare nell'HTML delle nostre pagine caratteri speciali. La lista di DeGraeve.com è completa e semplice da consultare.
Uno dei casi in cui è importante saper gestire i caratteri speciali di HTML è quello in cui si deve inserire in una pagina una porzione di codice (HTML, Javascript, ASP, PHP...) da presentare magari come esempio. Il problema è che se certi caratteri non vengono codificati, il codice verrà interpretato dal browser. In pratica, non posso inserire semplicemente
<p>Questo è un paragrafo</p>
perché otterrei, appunto, la generazione di un nuovo paragrafo. Devo quindi usare al posto dei classici apici questa soluzione:
<p>Questo è un paragrafo</p>
in cui gli apici sono sostituiti dalle entità corrispondenti.
Un lavoro immane se si deve fare su porzioni piuttosto estese. Per fortuna c'è Simple Code, la mini-applicazione creata da Dan Cederholm di Simple Bits. Si inserisce nella prima textarea il codice da modificare, si clicca su Process e si riceve nella seconda textarea la versione codificata con le entità.
