12 principi per mantenere pulito il codice

 
drapoel
12 marzo 2009
Commenta

Beautiful HTML è la fondazione di un bel sito. Quando insegno alle persone il CSS, dico sempre che un buon CSS può esistere soltando con un HTML egualmente bello.
I vantaggi di un HTML, pulito sono tante, ma molti siti non curano la bellezza del codice scritto.

Ora mosterò alcuni codici scritti in HTML, non tenendo in merito riguardo al design ma per mostrare un codice ben fatto e uno fatto male. Partiamo dall’inizio

1.Strict DOCTYPE

cleancode 1 12 principi per mantenere pulito il codice
Se facciamo questo, dobbiamo farlo bene, non metto in discussione se utilizzare HTML 4.01 o XHTML 1.0: ciuscuno di essi offrono una rigorosa versione che ci permette di scrivere un codice bello e onesto.

FONTI:


2.Set di caratteri e codifica dei caratteri

cleancode 2 12 principi per mantenere pulito il codice
Nella nostra sezione <head> la prima cosa che dobbiamo fare è dichiarare il nostro set di caratteri. Qui stiamo utilizzando UTF-8. Andiamo avanti e muoviamolo su che il browser così il browser sa il set utilizzato prima che inizi a leggere il contenuto. Mentre parliamo dei caratteri, andiamo e assicuriamoci che i caratteri che stiamo usando siano propriamente codificati. Abbiamo un & nel nostro titopo, al fine di evitare errori di interpretazione lo convertiamo in &amp.

Fonti:


3.Indentazione

cleancode 3 12 principi per mantenere pulito il codice
Ci sono già tre righe e sono già infastidico dalla mancanza di indentazione. L’indentazione non incide sul modo in cui la pagina viene visualizzata, ma ha un’enorme effetto sulla leggibilità del codice. Generalmente si danno degli spazi quando si avvia un nuovo elemento e si ritorna al punto precente quando lo si chiude. Le regole dell’indentazione non sono fisse, potete inventarne uno vostro personale, l’imporante è che favorisca la lettura del codice.

Fonti:

Clean up your Web pages with HTML TIDY

4.Tenere CSS e JavaScript esterni

cleancode 4 12 principi per mantenere pulito il codice
Abbiamo alcuni CSS nella nostra sezione <head>. Si trata di un grave errore, poichè posso applicarli solo in questa singola pagina HTML. Tenere i tuoi file CSS separata significa che una pagina futura può essere collegata ad essa ed utilizzare lo stesso codice, così cambiare il desgin su più pagine diventa facile.
In questo esempio non c’è JavaScript ma valgono le stesse regole.

5.Innestare corretamente i tag

cleancode 5 12 principi per mantenere pulito il codice
Il titolo del nostro sito “My Cat Site” è all’interno dei tag <h1>, il che ha perfettamente senso. E come vuole la norma, il titolo è un link per la HomePage.Tuttavia il tag di ancoraggio <a> avvolge il tag d’intestazione, il che è un’errore. La maggior parte dei browser lo gestisce bene ugualmente, ma è rimane un’errore formale. Un ancoraggio è un elemento in linea, i tag dell’header sono elementi fissi. I blocchi non possono andare dentro elmenti inline. Non è una buona idea.

6.Eliminare inutili divs

cleancode 6 12 principi per mantenere pulito il codice
Non conosco il primo che lo ha coniato, ma adoro il termine “divitis”, che si riferisce all’eccessivo uso dei divs nell’HTML. A volte durante le fasi di apprendimento del web design le persone imparano ad avvolgere gli elementi in un div in modo che possano applicare al loro obiettivo il CSS. Questo porta ad una proliferazione di elementi div ed essere utilizzati anche in luoghi inutili. Nel nostro esempio abbiamo utilizzato al minimo i divs in modo da rendere il codice più pulito.

FONTI:


7.Utilizzare meglio convenzioni di denominazione

cleancode 7 12 principi per mantenere pulito il codice
Questo è un buon momento per parlare delle convenzioni di denominazione, come ne abbiamo già parlato riguardo le liste disordinate. Ad esempio bigbarNavigation è troppo lungo ed ha senso, ma sarebbe meglio cambiare la progettazione del sito e avere buoni ID per i nomi come “mainNav”, “sidebar”, e altro. Sono utili per definire meglio l’uso che se ne fà.

8.Eliminare tiporgrafia al CSS

cleancode 8 12 principi per mantenere pulito il codice
Si può evitare di utilzizare all Caps nel markup, usufruendo del CSS con l’opzione text-transfor: uppercas, potendo quindi usufruire della grande potenza del CSS.

9.Classe id in <body>

cleancode 9 12 principi per mantenere pulito il codice

Con la classe per del body, voglio indicare letteralmente la classe per il body. Poichè si può utiluzzare il CSS, seguite la figura per compendere come la gestione degli ID sia importanti per il sitoweb. Meglio non dividere in più parti il corpo per poterlo modificare meglio.

FONTI:

10.Valida

cleancode 10 12 principi per mantenere pulito il codice

Ci sarebbero una serie di azioni che non richiederebbero di parlare, ma tu puoi eseguire il tuo codice senza che ci sia un controllo sui piccoli errori. Spesso questi piccoli, errori non vengono nemmeno notato, ma si è sempre a rischio. Un codice validato è sicuramente migliore di uno non validato.
utilizzare quindi sistemi per controllare quanto scritto.

FONTI:

11.Ordine logico

cleancode 11 12 principi per mantenere pulito il codice
Meglio mantenere un’ordine logico. Notare in figura come si cerchi di dare ordine al codice. Quindi meglio utilizzare il tipo qualche tipo di impaginazione o di posizionamento, così da rendere meglio il filo logico.

12.Basta fare ciò che si può

Abbiamo dato qualche consiglio per migliorare il codice HTML. Quando iniziate dalla base è tutto facile.  Se invece provate a migliorare un codice è molto difficile. Ora dovete lavorare per migliorarvi e create una giusto codice HTML.
cleancode 12 12 principi per mantenere pulito il codice
FONTE: SmashingMagazine.COM

Categorie: CSS, Internet, Template, Webmaster
Tags: ,
Articoli Correlati
Come calcolare il codice BIC (o Swift) di una banca

Come calcolare il codice BIC (o Swift) di una banca

Nell’era digitale si fa praticamente tutto online, pagamenti compresi. E vi sarà capitato, per fare o ricevere un pagamento, di aver bisogno del codice Swift (o BIC) della vostra banca, […]

Come calcolare un codice fiscale

Come calcolare un codice fiscale

Siete alla posta, in ufficio o in banca e dovete effettuare un’operazione. Serve il codice fiscale, ma vi accorgete improvvisamente di non averlo appuntato da nessuna parte, e di aver […]

5 consigli per un webdesign accessibile

5 consigli per un webdesign accessibile

In questo articolo vedremo 5 cose che non possono mancare nel nostro CSS! 1. Colore di sfondo del body body {background-color: #fff} Mettete sempre un colore di sfondo alla pagina […]

Come modificare il CSS di un template Joomla

Come modificare il CSS di un template Joomla

In questo articolo vogliamo continuare a parlare di creazione e gestione di siti web, e questa volta ci riferiamo ai CSS dei template di una delle piattaforme più famose, Joomla. […]

Modelli e Layout CSS Gratis!

Modelli e Layout CSS Gratis!

A volte è utile utilizzare modelli per la creazione di siti web, tra cui alcuni (X)HTML/CSS. Partiamo da qui, impariamo ed esploriamo le possibilità del CSS e dei template. Forniremo […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento