Una delle applicazioni che trovo decisamente strepitose è TopStyle. L'editor, che dovrebbe fungere da puro editor per i CSS, si rileva assai utile anche per l'editing dei file HTML o di quelli con codice server-side o di semplici file XML o di testo (Quest'ultimi per soli fini di consultazione / modifica senza pretendere aiuto di alcun genere).

Prima ancora che Nick Bradbury vendette i suoi prodotti alla NewsGator, intorno al finire del 2006, l'applicazione subì uno stallo notevole alla versione 3.12, sicuramente stabile e performante, ma con alcune pecche.

Oggi, nel riformattare la macchina, dico, fammi andare a vedere se c'è una nuova versione ... e sorpresa, la versione 3.5 è qua. Non sò da quanto tempo è stata rilasciata: non ho ricevuto alcuna e-mail di notifica in merito (Nota di demerito).

Fatto sta che era li li con la carta di credito per ordinare l'aggiornamento, quando leggo gli utenti della versione 3.x hanno diritto all'aggiornamento gratuito.

Gioia e tripudio. Unica nota negativa, come sempre, è quella della sola versione per Windows. Infatti sul mac, per quanto esista un editor CSS decisamente buono, non posso dire altrettanto di un editor HTML e mi piacerebbe veramente poter rimpiazzare Komodo, che attualmente uso, con TopStyle.

Il giorno prima della mia partenza per le ferie, mi chiama un cliente al quale recentemente gli abbiamo realizzato un sito internet e mi dice "Sai, se premo il tasto stampa, mi viene fuori una finestra d'errore che dice 'Errore nello script ecc. ecc.'".

Sulle prime cado dalle nuvole, anche perchè da che mondo e mondo, la funzione di stampa è indipendente dal sito internet, tanto più che non si trattava nemmeno di un tasto nel sito, ma della funzione nativa di Internet Explorer.

Essendo il giorno prima delle vacanze, il cliente ha compreso la situazione ed abbiamo rimandato ad oggi - giorno di riapertura - il "debug".

Dopo alcune prove (IE 7, Firefox, Safari, Opera), io non riesco a riprodurre l'errore, quindi penso che sia qualche casino legato alla sua macchina che un tempo era infetta. Poi penso pure al suo pc, XP Sp2 con connessione Internet da tartaruga e quindi al fatto che lui aveva IE 6. Quindi apro la virtual machine, apro il sito, tasto stampa e ... patatrac. Ecco li l'errore.

Linea 1401, poi linea 1200 ... e via dicendo. Linee che ovviamente non erano presenti dentro al codice html di poco più di 100 righe. Quindi l'errore non poteva essere (almeno apparentemente) nel mio codice, anche perchè era XHTML e CSS valido. Eppure l'errore si ripresentava sistematicamente in tutte le pagine del sito, quindi era qualcosa dentro alla pagina.

Dopo alcune ricerche e soluzioni delle più assurde come file corrotto (non si capiva nemmeno quale se l'html o quello di IE), fantomatiche riregistrazioni della dll incriminata, inizio allora a smontare la pagina, cancellando blocchi di codice fino a quando non arrivo a scoprire che un tag div il cui id impostato a tags creava il problema. Rinominato quel tag, tutto ha iniziato magicamente a funzionare.

L'ennesima riprova di quanto IE 6 sia tutto da buttare.

In concomitanza con l'uscita del post di Alessandro, mi sono deciso a scaricare anche io gli ASP.NET 2.0 CSS Friendly Control Adapters perchè volevo "ritinteggiare" un paio di gridview all'ìnterno di un mio progetto.

Appena scaricata la "suite" di Microsoft la testo, e i pochi esempi lasciano ben sperare. Allora passo ad utilzzare l'adapter delle gridView.

Un paio di righe di codice, F5 ... e ... sorpresa ... nell'HTML vedo ancora l'odioso tag table. Al che penso ... avrò sbagliato qualcosa.

Provo a googlare in cerca di qualche esempio ... ma niente ... sempre che nessuno usi questi control adpater per fare stili in puro CSS (e pensare che io sono 3 anni abbondanti che ormai scrivo siti solo in CSS).

Rassegnato provo a dare un'occhiata al codice all'interno, ed effettivamente non mi sbagliavo. Per il gridview, l'adapter non fa altro che "incastonare" la tabella dentro ad un div, aggiungere dei tag intermedi che non sto ad elencare (potete guardare qui), ma fondamentalmente di CSS non c'è assolutamente niente.

Al che, rassegnato inizio a scrivere ... ed ecco finalmente il mio ASP.Net Gridview Pure Css Adapter. E' in una sorta di beta ... l'ho scritto appena ieri pomeriggio. Sicuramente è migliorabile ... ma per il momento sembra funzionare. Con il tempo e con i suggerimenti sicuramente si può far tutto.

Buona gridview a tutti. 

Technorati Tags: GridView, Un adapter per le GridView in puro CSS, ASP.Net Css Friendly Adapter

In giro per la rete ci sono tonnellate di esempi di layout a due, tre, quattro colonne e chi più ne ha più ne metta. Il problema è che molto spesso sono tutti dei copia e incolla. Pochi sono gli autori che si prestano a scrivere codice e purtroppo in questo caso nemmeno i miei siti preferiti contenevano un codice che funzionasse perfettamente.

In particolare, quando mi occorre qualcosa, io mi dirigo in prima battuta su ALA, ma stavolta l’articolo che ho trovato conteneva delle imprecisioni nel codice proposto al punto che mettere uno sfondo dietro all’elemento portante del css, visto in Firefox, non funzionava.

Ho così iniziato a googlare e finalmente sono approdato su questo sito, che ho aggiunto nei preferiti, dove ho trovato questo articolo che è stato in grado di illuminarmi. Consiglio a tutti una lettura di 3 Column CSS Layout - Fluid, Multi-Column Stretch

Il concetto di fondo è sempre lo stesso: il tempo è denaro, gli aggiornamenti software e hardware se non necessari si possono evitare, quindi figuriamoci il restyling del sito internet. Inutile. Sarà per questo che ogni giorno che navigo trovo milioni di siti web fatti ancora con le tabelle, non conformi al W3C, non validabili perché sintatticamente sgrammaticati.
Insomma degli obbrobri in tutto e per tutto. E puntualmente mi domando, ma perché perdo un mondo di tempo a fare i siti dei miei clienti compatibili e conformi agli standard. Poi apro lo stesso sito su IE, Firefox, Opera (che sono allo stato attuale i browser più utilizzati) e allora mi rispondo da me. Il sito visitato è a malapena conforme con IE. Negli altri browser le scritte un po’ a destra un po’ a sinistra, sfondi che si sovrappongono. Insomma lo sfacelo. E allora la mia domanda trova puntualmente risposta. Perché voglio dare un prodotto compatibile, duraturo nel tempo, ma soprattutto fruibile dalla maggior parte dei dispositivi.

Fino a non molto tempo fa il fax era il miglior sistema per trasmettere i documenti. Oggi l’e-mail l’ha praticamente soppiantato. Stesso discorso succede per i vecchi siti basati su tabelle e i nuovi siti basati interamente sui fogli di stile.

I fogli di stile, separando la parte grafica (stile) dalla parte del contenuto, consentono un migliore sviluppo della pagina, minor codice, pagine più leggere, ereditarietà visuale e chi più ne ha più ne metta. Insomma, farne a meno oggi, è un po’ come voler scrivere un nuovo software utilizzando ancora il vecchio Visual Basic 6.

Ma ecco quelli che secondo me sono i motivi principali per i quali non se ne potrebbe fare a meno.

1. Aspetto esteriore e aspettative del cliente: è statisticamente dimostrato che in un regime di concorrenza, a parità di prodotto (tipologia, caratteristiche, ecc), il cliente finale si rivolge quasi sempre alla società che ha saputo presentarsi meglio. Essendo per sua natura Internet un mezzo di comunicazione e interazione passivo, l’aspetto del sito web è quel parametro secondo il quale il cliente valuta la serietà della ditta e della proposta che sta analizzando.
    
2. Accessibilità: il rapido sviluppo delle tecnologie, ed in particolare del wire-less che sta portando Internet sopra a dispositivi che fino a pochi anni fa non erano che strumenti tecnologici destinati ad una stretta cerchia di persone, richiede conseguentemente – dove necessario – che il sito Internet sia accessibile anche a dispositivi diversi dal computer di casa o dal portatile. Nella vecchia concezione dei siti internet, questo non è possibile se non facendo due versioni del sito stesso. Con i fogli di stile, basta semplicemente indirizzare correttamente il foglio di stile in base al dispositivo che sta navigando sul sito. Questo consente di avere una unica pagina con le informazioni e più livelli per la presentazione grafica. Minor sforzo quindi per la manutenzione.
   
3. Usabilità: consci dei livelli di astrazione di cui poc’anzi ho accennato, i fogli di stile, in questo frangente riescono a fornire migliori performance perché richiedono minor codice HTML, quindi si caricano più velocemente nei browser. Parimenti,tramite l’uso di tag appositi, consentono di predisporre il sito Internet per la fruizione anche a soggetti diversamente abili.
   
4. Posizionamento nei motori di ricerca: inutile dirlo, ma un codice più pulito e organizzato meglio, è maggiormente indicizzabile dai motori di ricerca, che – dato il loro costante processo di sviluppo – oggi iniziano a tenere sempre più in considerazione siti web puramente scritti in CSS. Le conseguenze sono facilmente immaginabili.

Non credo sia necessario aggiungere altro se non buon CSS a tutti.

I fogli di stile permettono una maggiore padronanza della formattazione del testo rispetto all'HTML, e contestualmente offrono anche una gamma più ampia di attributi applicabili di cui da tempo l'HTML soffriva la mancanza.

Per dare un'idea immediata di come queste prorietà modifichino la formattazione del testo, negli esempi a seguire verrà utilizzata la formattazione in linea; si ricorda tuttavia, che la stessa formattazione, inserita in un foglio di stile e associata con appositi tag ID o tramite classi, permette di applicare la formattazione agli oggetti interessati.

Attributo family

Cominciamo con l’attributo ‘family’ e i suoi corrispondenti valori: la proprietà Font-Family ci consente di specificare la famiglia di font.

Supponiamo di voler utilizzare il font Garamond per un paragrafo intero, come quello che state leggendo.

Per ottenere il risultato sopra mostrato, si è inserito una cosa di questo tipo:

&lt; p style=&quot;font-family: Garamond, sans-serif;&quot;&gt;Testo< /p>

E’ comunque buona norma impostare piu’ di un font, ed in particolare utilizzarne almeno uno generico tipo il sans-serif, da posizionarsi sempre come ultimo font della lista. Questo perchè se i font specificati non sono disponibili sul computer dove la pagina HTML sta per essere visualizzata, almeno si avrà la certezza che il font di default, comunque sempre presente nel sistema operativo, verrà utilizzato per la visualizzazione della pagina stessa. Si ricorda inoltre che nel caso si vogliano utilizzare font il cui nome è composto da più di una parola, il nome del font deve essere racchiuso tra i doppi apici.

Abbiamo poi la proprietà font-size, che si preoccupa di impostare le dimensioni del carattere del font, e che ricordo ha maggior valenza rispetto all’attributo SIZE dell’HTML. Questo significa che se nella porzione di codice HTML dove viene modificato via CSS la dimensione del font esiste anche il size dell’HTML, questo verrà praticamente ignorato.

Attributo size

Con il CSS le dimensioni del font consento di impostare valore estremamente pi&amp;ugrave; precisi e di gran lunga superiori al tradizionale size HTML.

&amp;lt;font style=&quot;font-family:verdana; font-size:15pt;&quot; size=&quot;50&quot;;&gt;Attributo size&amp;lt;/font&gt;

Ma soffermiamoci un momento per prendere in considerazione le varie unit&amp;agrave; di misura applicabili. Nell&amp;rsquo;esempio sopra &egrave; stato usato il point (pt) che &eacute; la misura largamente pi&ugrave; adottata, ma vi sono altre unit&agrave; di misura a disposizione.
La scelta sta tutta a chi disegna la pagina, ma andrebbe comunque seguita per definizione una regola generale, che in questo esempio non &egrave; stata presa in considerazione.
Sto parlando della possibilit&agrave; intrinseca che la misura offre di essere ridimensionata, mantenendo le sue proporzioni. Detto questo, tanto il pixel (px) o il point (pt) sono unit&amp;agrave; di misura fisse che non consentono un corretto ridimensionamento e non andrebbero mai utilizzate per per le dimensioni del testo. E' un p&ograve; come voler misurare il peso di un oggetto in centimetri.

Il motivo di questo specifica, dettata peraltro anche dal W3C, &egrave; che alcuni utenti con particolari problematiche visive, piuttosto che utenti che vogliono poter leggere senza per questo dover essere succubi delle dimensioni di testo impostate dai programmatori, devono, senza per questo sconbussolare il layout grafico del sito che consultano, poter allargare o stringere il testo a loro piacimento.
Le misure corrette da utilizzare sarebbe quindi la percentuale (%) o la dimensione originale del font stesso (em). Detta regola, ovviamente, non vale quando si sta realizzando un foglio di stile per le pagine il cui output sar&agrave; la stampante, dove &egrave; d'obbligo l'uso di una dimensione fissa tipo il pixel o il point.

Un grado generale di tutte le unit&amp;agrave; di misura:

px : ossia pixel, unità fissa;
cm : centimetri, unità fissa;
pt : abbreviazione di point, un pt equivale ad 1/72 di pollice, unità fissa;
in : abbreviazione di inch, pollice. Un pollice equivale a 2,54 centimetri, unità fissa;
% : percentuale, unità relativa;
em : altezza naturale del font, unità relativa;
en : metà dell’altezza naturale del font, unità relativa;

In realtà esistono altri attributi per modificare le dimensioni del testo, poco usati e che invito a leggere attraverso sito ufficiale del W3C (in lingua inglese).

Lo stile del carattere. Sarà spesso capitato di scrivere del testo in corsivo, e la proprietà font-style serve ad impostare proprio questa sua caratteristica. Così mettendo un italic il testo verrà scritto in corsivo. Esiste anche un’altra proprietà, oblique, che è molto simile all’italico e per questo la rende praticamente inutilizzata. Di fatto l’oblique dovrebbe tentare, nel limite del possibile, di mettere in posizione italica un font, utilizzando comunque il font base, senza per questo caricare la versione specifica, “risparmiando memoria”. Data la velocità dei moderni calcolatori, questo risparmio è praticamente invisibile.

Tuttavia, per chi ha un pò di familiarità con i font, avrà certamente notato che un font è spesso accompagnato da più di un file; questo perchè ad ogni file corrisponde una versione del carattere, quindi normale, italico, grassetto ecc. Durante il normale utilizzo delle applicazioni che si servono dei font, all’uopo viene caricata la versione corretta del carattere; questo è quello che succede anche con le pagine HTML. L’uso di oblique serve ad evitare questo ulteriore caricamento.
Il valore di default della proprietà font-style &egrave normal, che specificato o meno, lascia il testo invariato, cos&igrave come il True-Type &egrave stato realizzato.

Attributo font-weight

Concludiamo con il peso di un font, la cui propriet&agrave; CSS &egrave; font-weight. Serve a definire la consistenza o il peso visivo del testo. Si applica a tutti gli elementi ed &egrave; ereditata.

Il peso di un carattere può essere espresso con una scala numerica o con parole chiave. I valori numerici vanno dal 100 al 900, ordinati in senso crescente (dal leggero al pesante). Mentre le parole chiave possono assumere il valore di normal, valore di default, il cui valore &grave pari a 400 e bold, che consente al carattere di acquistare l’aspetto che definiamo con la parola grassetto, e il cui valore equivale a 700.
Abbiamo poi due ulteriori parole chiave, di tipo relativo, che consentono ad una determinata porzione di testo parente di apparire rispettivamente più pesante o più leggero. Queste parole chiave sono bolder o lighter.

Le differenze durante l'uso di bolder e lighter sono spesso minime, che difficilmente si pu&amp;ograve; notare la differenza e in alcuni casi non supportate (vedi lighter in IE 6). Tuttavia sebbene poco utili, almeno dal mio punto di vista, non potevo ometterle dalla spiegazione.

Ecco un link di un sito web dove il posizionamento dinamico e il floating sembrano essere di casa.
Devo dire che è abbastanza utile per chi sta approcciando al mondo del CSS.

Il sito è corredato di spiegazioni e molti esempi.

Per poter utilizzare il CSS esistono fondamentalmente tre sistemi, adatti alle varie esigenze:

• in linea, ossia posti all’interno del tag HTML da influenzare;
• incorporati al documento HTML, quindi una zona del foglio HTML marcata come CSS, posta generalmente in cima al documento;
• esterni, cioè un file con estenzione .css separato dal codice HTML e richiamato tramite un apposito link;

Di questi tre sistemi io prediligo - nel limite del possibile (e ovviamente a seconda dei casi) - esclusivamente il terzo (per questioni di praticità di scrittura, di aggiornamento e per un sacco di altre cose che ci si rende conto solo quando lo si usa). In fin dei conti il CSS è nato per dare quella completa astrazione al layout della pagina HTML senza per questo andare a toccare il codice stesso, quindi viene da se che l’uso degli altri due sistemi dovrebbe trovare scarso utilizzo (anche se non vi nascondo ad oggi si trovano in giro siti che nemmeno sanno cosa sia il CSS, ma questa è tutta un’altra storia).

I Fogli di stile in linea

Questa soluzione è utile quando si intende limitare la modifica del comportamento grafico ad un singolo tag del codice HTML, lasciando inalterate tutte le altre proprieta’ della pagina. Per esempio:

Testo sottolineato
Testo sottolineato

I Fogli di stile incorporati

I fogli di stile incorporati nel documento hanno il medesimo compito del CSS in linea, modificare il comportamento del tag. La differenza sta nel fatto che si possono definire delle classi o dei blocchi di codice attribuibili solo a determinati elementi marcati con un certo ID.

Nel primo caso, tutti i tag (a patto che le proprietà utilizzate nel CSS siano valide e accomunabili tra loro nei diversi ambiti a cui la classe fa riferimento) cui il valore dell’attributo class=”" sia uguale vengono modificati contemporaneamente. Nel secondo caso, viene modificato esclusivamente il tag il cui valore dell’attributo ID coincida con quello specificato nel blocco CSS. Viene da se che dovendo essere l’ID univoco, le modifiche verranno applicate esclusivamente ad un tag (fatta eccezione se non si stanno commettendo degli errori).

Qualche esempio:

In questo caso tutto il testo della pagina verra’ sottolineato.

In questo caso solo il testo a cui sarà stato associato per il tag FONT la classe Sottolineato verrà sottolineato. (Ciao).

In questo caso, invece, supponendo che all’interno della pagina vi sia un elemento HTML la cui proprietà ID sia stata impostata su Test, e ammesso che questo elemento sia (nel nostro esempio) un tag DIV o SPAN che solitamente contengono testo, il testo di quell’elemento verrà sottolineato.

I Fogli di stile esterni

Considerato che il CSS applicato ad una pagina di un sito web, spesso e volentieri è comune a tutte le pagine, onde evitare di avere tonnellate di codice che ripete sempre le stesse informazioni, è possibile racchiudere il CSS in un documento esterno.

Il vantaggio indiscusso è che se si deve modificare un comportamento grafico, tipo cambire il tipo di font, con HTML classico occorrerebbe agire su ogni singolo tag e su tutte le pagine del sito (si pensi a siti di grandi dimensioni), mentre adottando un foglio di stile esterno sarebbe sufficente cambiare una o al massimo poche righe di codice ed in un solo file, con conseguente risparmio di tempo.

Ecco la sintassi per collegare la pagina al file esterno, da porsi anch’essa tra i tag :

La sintassi da usare nel file esterno è identica a quella degli stili incorporati, con la differenza che deve contenere il solo codice di stile, senza i tag