IDEAcss Fondation, è una struttura concettuale astratta, che consiste nella definizione di regole e denominazioni (Dizionari), che comprende anche una flessibile libreria di modelli di stile (istruzioni CSS), il cui obiettivo è di semplificare la realizzazione delle pagine web basate sui Cascading Style Sheets, al fine di renderle più conforme agli standard e compatibile con le varie versioni dei browser.

Un importante componente dell’IDEAcss Fondation è l’IDEAcss Pattern, un web design pattern Semantico (X)HTML/CSS, che comprende regole generali, tipografiche e di stile conforme agli standard più recenti, una soluzione progettuale generale a problemi ricorrenti durante la scrittura dei fogli di stile. Prima della sua realizzazione, per circa un mese ho studiato e realizzato diversi esempi basati su oltre una ventina di proposte di CSS Framework. La conclusione a cui sono giunto può essere sintetizzata nei punti che seguono.

Un CSS Pattern, diversamente da un CSS Framework, non deve essere grande e complesso, ma deve comprendere solo un set di semplici stili CSS, al fine di consentire al progettista di concentrarsi sulle funzioni specifiche del progetto, piuttosto che ridefinire classi e id, che probabilmente sono stati già definiti in una precedente applicazione. Ciò evita anche di introdurre inutili errori, di definire contenuti casuali e di dover tutte le volte, riscrivere le medesime definizioni, anche se formalmente appaiono essere diverse. I principali vantaggi nell’uso di un CSS Pattern sono:

• Normalizzazione delle classi di base, il fine è di disporre nei progetti di un comune insieme di definizioni, di Id e di nomi di classi
• Un più efficiente flusso di lavoro in team, in quanto usando un CSS Pattern come un comune punto di partenza, si ottiene sia di ridurre la possibilità di errori, sia di ridurre i tempi di sviluppo, senza costi aggiuntivi e senza compromettere la qualità del prodotto. 
• Una più efficace compatibilità fra i browser, in quanto una parte di questi problemi, possono essere risolti all’interno del Pattern.
• Una codifica chiara e ben strutturata sin dall’inizio del progetto.

Le principali motivazioni che mi hanno indotto a non usare o scrivere un CSS Framework, sono state quelle di voler evitare di introdurre, nella scrittura dei fogli di stile, codice inutile e di perdere tempo nel cercare di imparere ad usare un framework, piuttosto che utilizzare la semantica relativa alle definizioni dei CSS. Infatti se si analizzano i diversi CSS Framework si rileva che, nel tentativo di realizzare un modello generale, si è dovuto compromettere il significato semantico dei diversi elementi.

Inoltre nella realizzazione delle applicazioni è mia consuetudine suddividere il progetto in moduli totalmente indipendenti, in cui tutti gli elementi e le definizioni sono contenuti in una singola directory, in modo da poterli facilmente trasferire in altri progetti.
Quindi un CSS Pattern, si differenzia da un CSS Framework, in quanto non è una libreria o un componente software, da includere in modo rigido nei progetti, ma un modello da utilizzare per normalizzare, velocizzzare e risolvere i problemi di compatibilità fra i diversi browser, che si possono presentare durante la scrittura dei fogli di stile.

L’IDEAcss model comprende una serie di semplici insieme di stili, definiti seguendo criteri di modularità. In IDEAcss sono stati definiti i seguenti gruppi di stile:

• reset, per realizzare un adeguato stile di default una singola o un gruppo di pagine web.
• typography, per definire stili tipografici relativi agli elementi html. Comprende definizioni di font faces, sizes, weights e neutral colours. In questa sezione sono inseriti solo gli stili che hanno una validità globale.
• color, in cui vengono definiti i colori particolari, e quelli relativi agli sfondi e ai bordi, evitando di aggiungere qualsiasi altro tipo di attributo.
• general, per definire stili per regole generali grid, per realizzare layouts basati su griglie
• layout, per poter disporre di layouts di tipo generale. Probabilmente queste definizioni devono essere personalizzate nei diversi progetti, al fine di adattarle alle particolari necessità, tuttavia la normalizzazione delle denominazioni consente di rendere più semplice e immediate il loro riutilizzo.
• form, per poter disporre di stili adatti ai web form
• design presentation, per definire stili per la strutturazione della pagina
• web specialist, per definire strutture di navigazione, footer, header, ecc
• navigation, per definire gli stili che generalmente utilizzati per i menù di navigazione
• print, definizioni di speciali stili da utilizzare esclusivamente per la stampa.
• mobil web, per una eventuale presentazione anche su dispositivi mobili
• tweaks, per le definizioni necessarie per i vecchi browser (style browser hacks)
• workarounds, per specifici browser mediante istruzioni condizionale IE, ecc.

Queste definizioni consentono di aggiungere un layer di astrazione fra i contenuti e gli stili che non devono necessariamente essere inserite tutte in ogni singola pagina dell’applicazione web, ma averle definite in modo indipendente, consente di creare una ottimale e coerente base, per la definizione degli stili personalizzati

Nella denominazione dei diversi elementi, IDEAcss utilizza le seguenti convenzioni:

1. Structural Definition, in cui i nomi indicano il significato che l’elemento ha nella strutturazione della pagina. Queste denominazioni non prevedono definizioni del tipo box-sinistro, testo-rosso o simili, per evitare di dover cambiare il nome dell’elemento, quando si modificano le sue proprietà. Alcuni validi esempi sono: page-document, header, footer, menu, ecc.
2. Semantic Definition, in cui i nomi riflettono la funzione o il contenuto dell’elemento. Alcuni validi esempi sono: section, article, aside, ecc.
3. Element Definition, in cui i nomi identificano un particolare elemento, associato ad una Semantic Definition. Per esempio ad article potrebbero essere associati gli elementi titles, subtitles, author, captions, ecc.

Nella definizione degli elementi, IDEAcss utilizza le seguenti regole:

• per definire i nomi degli elementi e delle classi, vengono usati solo i caratteri minuscoli
• tutti i nomi sono in lingua inglese
• le parole multiple sono separate con il carattere "-" (per esempio, la denominazione “page doc” è definita come page-doc)

non vengono usate le definizioni delle classi in tutti quei casi in cui è possibile usare, per gli elementi child, i tag standard (x)html. Per esempio il seguente codice:

Per esempio, un database potrebbe contenere una tabella denominata article, all’interno della quale sono stati definiti i seguenti campi: titles, subtitles, author, captions, ecc. queste denominazioni vengono usati anche per definire le classi nelle pagine di stile. In questo modo è l’intera applicazione che diventa Semantica, inoltre diventa più semplice e ben documentato nel codice anche, l’elaborazione mediante jQuery.

Un ulteriore beneficio è che diventa estremamente più semplice realizzare un programma che, partendo dalla definizione degli oggetti contenuti nel database, possa creare in automatico tutti i layer di software necessari per realizzare l’applicazione,compreso i fogli di stile, anche se solo nella denominazioni.

I Dizionari in IDEAcss consentono di raccogliere in ordine alfabetico tutte le denominazioni usate per definire le classi da utilizzare nei fogli stile. Queste denominazioni sono suddivise in tre diversi gruppi:

• Structural Definition
• Semantic Definition
• Element Definition

Le Structural Definition, raggruppano le definizioni che indicano il significato che l’elemento ha nella strutturazione della pagina. Un elenco parziale dei nomi che appartengono a questo gruppo sono i seguenti: page-doc, header, menu, nav-menu, container, sub-container, content, sub-content, footer, column, row, grid, widget, ecc.

Le Semantic Definition, raggruppano le definizione che descrivono ciò che un elemento rappresenta, in modo indipendente dalle proprietà, in modo che non necessitano di essere cambiati quando si apportano modifiche agli aspetti della pagina.
Ad esempio, la parola article descriverà sempre un articolo, indipendentemente dal contenuto e dall’aspetto. Questo tipo di convenzione consente di rendere più coerente e veloce lo sviluppo di pagine web. Un elenco parziale dei nomi usati è il seguente:

• section, sezione di un generico documento, cioè un gruppo tematico di contenuti
• article, sezione di una pagina che comprende un contenuto, indipendente dal documento in cui è inserito
• comment, sezione di un documento che contiene commenti o note
• aside, sezione di una pagina che comprende un contenuto che è tangenzialmente connessa ad un’altra e che può essere considerata separata dal contenuto, per esempio una barra laterale.

Gli Element Definition, raggruppano le definizioni relative ad un particolare elemento della Semantic Definition. Ad esempio l’elemento article potrebbe comprendere le seguenti Element Definition: titles, subtitles, author, captions, headlines, sub-head, body-text, logo, page-number, page-continue, next-page, ecc.

Un comune errore che viene spesso commesso è di inserire tutti gli stili, di un’intera applicazione web, in un unico file css. Questo metodo potrebbe essere adeguato nella realizzazione di piccoli siti, con un limitato numero di definizioni di stili, ma in generale è meglio definire diversi file CSS. I criteri che in generale si dovrebbero seguire sono i seguenti:

• Utilizzare un file css separato per ogni singola pagina dell’applicazione in cui inserire le definizioni che si riferiscono a quella pagina, in modo da caricare solo quelli necessari, eliminando così gli stili inutili.
• Semplificare la struttura dei fogli di stile e del codice di markup, eliminando tutto ciò che non è necessario
• Definire le immagini di tipo decorativo solo nei fogli stile come sfondo, mentre dichiarare nella pagina tutte le immagini che contengono informazioni, grafici o scritte. Ciò consente di eliminare inutili tag (x)html e di contribuire a separare la struttura dalla presentazione.
• Eliminare gli elementi che controllano gli aspetti di presentazione dalle definizioni di markup, in quanto le linee di codice Javascript possono inserire bug difficili da individuare e rendono il codice di markup difficile da leggere
• Inserire il codice Javascript in file esterni ed utilizzare le funzioni getElementById e getElementsByTagName per ottenere i riferimenti agli elementi di markup su cui agire, al fine di modificare gli aspetti del codice di markup.

Nella strutturazione di un foglio stile è opportuno suddividere il contenuto in sezioni, delimitando le diverse parti con un commento:

• nella prima sezione inserire gli stili che ridefiniscono le proprietà dei tag HTML
• nella seconda sezione inserire le Structural Definition, cioè gli stili che definiscono il layout principale della pagina
• nelle successive sezioni inserire gli stili relativi alle diverse sezioni della pagina, utilizzando definizioni di tipo semantico per i nomi

Seguire simili regole, oltre ad imporre un ordine coerente nella definizione degli stili, consente anche di definire identificatori di stili che possono essere efficacemente interrogati da linguaggi tipo jquery.

Una buona regola, nella strutturazione dei fogli di stile è di utilizzare gli elementi per il loro reale significato. Ad esempio l’elemento <h1> che identifica il “Titolo 1” dovrebbe essere utilizzato solo per identificare il titolo di un documento, non per definire caratteri grandi o bold, in quanto l’utilizzo appropriato degli elementi che costituiscono una pagina web, consente di dare un maggior enfasi a ciò che lo compongono.

Tutti gli oggetti non testuali dovrebbero avere un’alternativa testuale, in modo da fornire le informazioni significative, anche in assenza di immagini, in modo da consentire alla pagina di essere ancora navigabile. In altri termini, l e immagini dovrebbero comprendere una breve descrizione mediante l’attributo “alt”. Questo attributo viene visualizzato quando il browser non può accedere all’immagine

         <img src="image/logo.jpg" alt="Logo Azienda" />    

Se si utilizza l’elemento object occorre inserire l’alternativa testuale nell’oggetto   

<object  data="imagelLogo.jpg"  type="image/png">

          Logo Azienda

</object>

Vi sono immagini che non richiedono un’alternativa testuale in quanto sono usate per fornire un effetto decorativo. In questo caso, alt deve essere presente, ma come stinga vuota:

           <img  src="image/decorazione.jpg"  alt=""  />

E’ opportuno non utilizzare immagini in movimento, testi lampeggianti o testi scorrevoli, in quanto la presenza di questi elementi può creare disturbi da epilessia fotosensibile o far perdere la concentrazione.

Occorre definire un adeguato contrasto di colori e luminosità tra sfondo e contenuto. A tal fine è buona norma definire sempre sia il colore di sfondo sia quello relativo al testo.

La realizzazione delle pagine web dovrebbe essere basato su una esplicita separazione degli aspetti che la caratterizzano. Questi diversi aspetti sono:

• Accessibilità, definisce la possibilità delle pagine web di essere fruibili, indipendentemente  da eventuali disabilità dell’utente e dalla tipologia del browser.
• Usabilità, definisce la capacità delle pagine web di incontrare le esigenze dell’utente, nel migliore dei modi possibili.
• Contenuto, rappresenta le informazioni che si vogliono comunicare all’utente
• Struttura, definisce sia la struttura logica del contenuto, cioè l’organizzazione della pagina web in paragrafi, intestazioni, ecc. sia come struttura di navigazione, che comprendei link, ed altri elementi.
• Presentazione, che rappresenta la modalità con cui le informazioni vengono presentate all’utente.
• Comportamento, che consente di alterare la struttura e la presentazione in risposta ad eventi generati dall’utente, mediante mouse, tastiera, ecc.

Per separare il contenuto e la struttura dalla presentazione occorre:

• Evitare di utilizzare nelle pagine XHTML elementi di presentazione quali font, center, e gli attributi di presentazione quali align, border, color, ecc.
• La struttura logica delle pagine deve utilizzare prevalentemente gli elementi div, p, span, ul, li, ecc. e gli attributi alt, id, classa, ecc.
• Utilizzare l’elemento div per definire blocchi nella pagina (header, footer, sezioni, ecc)
• Utilizzare l’elemento span per definire le componenti in linea, come ad esempio parole e frasi.
• Utilizzare gli elementi ul e li per definire i menu e le barre di navigazione, in quanto sono strutture di navigazione
• Utilizzare gli elementi h1, h2, h3, ecc, solo per la strutturazione dell’intestazioni
• In generale evitare l’utilizzo di immagini contenenti testo (affiancare il testo all’immagine), mentre può essere una buona scelta se si desidera visualizzare un breve testo con un particolare aspetto.
• Evitare di utilizzare le immagini o sequenze &nbsp; per definire lo spazio fra i vari elementi.
• Preferire per la formattazione del testo gli elementi em e strong che mettono in evidenza il significato logico, rispetto a b, i che agiscono sulla presentazione dei caratteri
• Utilizzare gli elementi HTML in modo coerente con il loro significato semantico
• Utilizzare le tabelle solo per strutturare dati in formato tabellare
• Evitare l’uso dei frame
• Inserire le regole CSS in file separati e la tipologia del dispositivo a cui il foglio di stile si riferisce, mediante l’attributo media

In genere nella realizzazione dei fogli stile si considera di modificare solo l’aspetto di default del documento, dimenticando che ogni browser utilizza propri valori di default, ciò causa non pochi problemi di compatibilità. A tal fine, invece di considerare adeguati i valori di default degli attributi, diversi progettisti preferiscono impostare i valori alle dimensioni o all’aspetto che desiderano, ma prima implementano una serie di istruzioni che eseguono il reset dei valori di default, degli elementi dei fogli stile CSS (altezza, margini, dimensione dei caratteri, ecc.).

Diverse sono state le soluzioni di reset proposte, quella che segue è la proposta di reset di Eric Meyer, letta  sul suo sito http://meyerweb.com/.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
       margin:0;padding:0;border:0;outline:0; ont-size:100%;vertical-align:baseline;
       background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }    
ins { text-decoration: none; } 
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; } 

Personalmente ritengo la proposta di reset totale una soluzione estrema, decisamente troppo invasiva, in quanto elimina il valore semantico degli elementi (x)html, mentre credo sia meglio definire un personale stile di reset, da utilizzare come base del proprio progetto, agendo solo sugli stili che riteniamo opportuno resettare, in modo da riscrivere solo alcune regole, piuttosto che azzerare, per poi ripristinare il tutto.

Anche se vi sono alcune differenze fra i diversi browser, la quasi totalità dei valori di default sono coerenti con le aspettative degli utenti. Tuttavia, vi sono alcuni elementi che è utile resettare:

• reset del margine e del padding mediante la definizione: * { margin:0; padding:0; }
• impostare il font nel body
• eliminare il border alle immagini img { border:none }
• modificare il colore ed eliminare la sottolineatura del tag a, in modo da farla apparire solo quando il cursone del mouse è sul link. Inoltre con la dichiarazione a {outline-style:none} eliminare il bordino fatto di puntini, per poi definire il nuovo stile mediante la dichiarazione focus { }

Apparentemente i CSS Framework costituiscono un’efficace soluzione, in realtà comportano diversi propblemi, in quanto oltre a compromettere la natura semantica degli elementi, limitano fortemente la creatività del designer. Inoltre, nelle librerie o nei framework, anche se vi è molto codice, questo non pregiudica le prestazioni in quanto è eseguito solo quando si invoca la funzione, mentre nei CSS framework il codice è sempre eseguito tutto. Tuttavia, i CSS Framework, hanno anche introdotto diverse valide idee, fra queste la definizione di un layout a griglia per posizionare gli elementi, tramite i fogli stile.

Sono disponibili diverse soluzioni, che si somigliano molto, ma quella che rappresenta, a mio avviso, il giusto compromesso anche in termini di semplicità è la soluzione proposta da Bjorkoy con Blueprint, che ho modificato per adattarla alle mie convenzioni ed ho deciso di utilizzare solo nelle web-form.

Di default la griglia è larga 950px, suddivisa in 24 colonne larghe 30px, con un margine fra le colonne di 10px. Quindi la dimensione totale della griglia è:   width= (NumColonne * 40) - 10

.div{margin:0;padding:0}
.grid-box{width:950px;margin:0 auto}
.showgrid{background:url(grid.png)}
.right{text-align:right}
.row00{line-height:2.2;clear:both;}

div.col01,div.col02,div.col03,div.col04,div.col05,div.col06,div.col07,div.col08,div.col09,div.col10, div.col11,div.col12,div.col13,div.col14,div.col15,div.col16,div.col17,div.col18,div.col19,div.col20, div.col21,div.col22,div.col23,div.col24{float:left;margin-right:10px}

.col01{width:30px} .col02{width:70px} .col03{width:110px} .col04{width:150px}
.col05{width:190px} .col06{width:230px} .col07{width:270px} .col08{width:310px}
.col09{width:350px} .col10{width:390px} .col11{width:430px} .col12{width:470px}
.col13{width:510px} .col14{width:550px} .col15{width:590px} .col16{width:630px}
.col17{width:670px} .col18{width:710px} .col19{width:750px} .col20{width:790px}
.col21{width:830px} .col22{width:870px} .col23{width:910px}
.col24,div.col24{width:950px;margin:0}

La sintassi definisce, mediante convenzioni normative, il modo in cui i tag, gli attributi e i valori devono essere  applicati agli elementi di una pagina web. Non rispettare queste regole significa non avere documenti validi e ben formati. L’obiettivo della sintassi è di vincolare le definizioni mediante usi ben definiti.

Un documento ben formato significa che rispetta le regole della sintassi XML, mentre un documento è ritenuto valido se usa un linguaggio in modo corretto.

Per XHTM le regole sono definite nel DTD (Document Type Definition) del W3C.

Le principali regole da seguire sono:

·         gli elementi devono essere correttamente annidati <b><i>Testo</i></b>

·         i nomi di elementi e attributi devono essere in minuscolo

·         gli elementi non vuoti (cioè, quelli che contengono testo o altri elementi) devono avere, dopo il tag di apertura anche quello di chiusura: <p>Testo</p>

·         anche gli elementi vuoti devono essere terminare con la dichiarazione />. Es: <br />

·         i valori degli attributi devono essere delimitati da virgolette <img src=”foto.jpg” >

·         ogni attributo deve avere un valore

·         per identificare un elemento occorre usare solo gli attributi id e class.

Documento HTML

L’elemento <html> deve contenere la dichiarazione del namespace XML (spazio dei nomi) mediante l’attributo xmlns.

< html xmlns ="http://www.w3.org/1999/xhtml" >

In un document XHTML, <html> deve essere preceduto dall’elemento <!DOCTYPE>, all’interno del quale occorre indicare la DTD di riferimento e il suo URI. Un documento HTML è costituito da due sezioni ben distinte: 

•   una  parte iniziale denominata testa <HEAD> 
•   una centrale denominata corpo <BODY>

Nella Head si inseriscono:  i comandi che inviano informazioni al web server e  il codice che deve essere letto prima di costruire la pagina: script, fogli di style, ecc.

Il BODY racchiude il contenuto della pagina web

<html>
    <head>
          script, fogli di style, ecc.
    </head>
    <body>
         contenuto della pagina web: testo ed immagini, ecc.
   </body>
</html>

il browser ignora il vostro modo di scrivere, in quanto si limita a leggere ed interpretare solo gli elementi  html validi.

Icona personalizzata

E’ possibile visualizzare, nella barra degli indirizzi URL del Browser e nella directory de dei preferiti, una icona personalizzata, mediante l’inserimento nel tag <head>, della seguente definizione:

<head>

       <link rel="shortcut icon" href="http://www.antoniosammartino.it/favicon.ico">

</head> 

Il nome dell’icona deve essere “favicon.ico” (i browser più recenti accettano anche un nome diverso), deve avere una dimensione di 16x16 pixel e non deve superare la gamma di 256 colori.

Contenitori di tipo Blocchi

Gli elementi <div>e <span> consentono di definire generici contenitori in grado di contenere elementi HTML. Ad ogni div o span viene associato una sezione della pagina. In genere l’elemento span viene annidato all’interno dei div.

Contenitore di tipo Paragrafo

L’elemento <p> consente di definire un paragrafo entro cui inserire un testo.

La principale differenza fra i tre elementi è la seguente:

·       <div> crea un ritorno a capo, in genere è usato per contenere interi paragrafi o immagini

·       <span> è un elemento inline, cioè non crea ritorni a capo e continua sulla stessa linea del tag che lo include. In genere è usato all'interno dei paragrafi al fine di associare effetti visivi a parte di un testo.

·       <p> crea un ritorno a capo e un’interlinea vuota

Gli elementi <div>,  <span> e <p> vengono anche denominati Selettori in quanto consentono di selezionare una parte del documento a cui assegnare specifiche regole.

Header

Un ulteriore contenitore per il testo è l’elemento Header. E’ un elemento di tipo blocco, formattato in grassetto e lascia una riga vuota prima e dopo di sé. Sono disponibili 6 diversi tipi descritti nella tabella che segue:

<h1>titolo 1 </h1>        titolo 1

<h2>titolo 2 </h2>     titolo 2

<h3>titolo 3 </h3>       titolo 3

<h4>titolo 4 </h4>         titolo 4

<h5>titolo 5 </h5>         titolo 5

<h6>titolo 6 </h6>            titolo 6