Regole per scrivere un buon codice HTML

regole per un buon htmlOggi propongo 12 regole che dovrebbero essere le linee guida di chi sta per scrivere una pagina web. Sono indicazioni decisamente utili e coprono gli ambiti della programmazione, dell’ottimizzazione del codice, della divisione tra contenuto e presentazione e della semantica del codice. 

L’articolo è tratto da uno schema in inglese di CSS-Triks, che ho tradotto in italiano.

Eccole, una dopo l’altra:

  1. DOCTYPE dichiarato correttamente
    Spesso è sottovalutato, ma il content type è molto importante. Non solo permette al codice di essere validato, ma consente ai browser di interpretare correttamente l’HTML.
  2. Body con il proprio IDMettendo un ID sul tag BODY sarà possibile vincolare lo stile ad ogni singola pagina. Per esempio, se volete che l’H2 venga visualizzato in modo diverso nell’home page, potete scrivere: #home h2 {…}. Questo non comprometterà la visualizzazione di H2 nelle altre pagine.
  3. DIV principale per ogni paginaMettere tutto il contenuto della pagina in un div contenitore (wrapper), significa aver la possibilità di avere un maggior controllo sulla visualizzazione della pagina. E’ importante soprattutto quando si definisce la larghezza per siti a dimensione fissa, semifluida o fluida.
  4. Contenuto comune incluso
    Gran parte di una pagina ha contenuti comuni con le altre. Pensiamo ai menu, alle sidebar, ai footer, ai box laterali, ecc…
    Questo tipo di contenuto dovrebbe essere incluso dinamicamente, tramite inclusione di altri file o tramite database.
  5. Chiusura dei tag
    Bisogna finire i tag che si cominciano. Non essere superficiali non chiudendo i tag aperti è un grave errore, nonostante la visualizzazione si buona.
  6. Contenuto, contenuto, contenutoIl contenuto della pagina è il motivo d’essere di un codice HTML. Ricordati di usare i paragrafi, punti elenco e le corrette entità HTML (è per indicare il carattere è).
    Evita l’uso di <br/> per formattare la pagina
  7. Corretta definizione dell’HEAD
    Il titolo deve essere impostato. Il charset pure. I fogli di stile correttamente collegati (compresi quelli per la stampa). Script collegati e non scritti nel codice html. I file esterni devono essere inclusi nelle appropriate cartelle (p.e. CSS/, e script/).
  8. Menu semanticamente corretto
  9. Contenuto principale, prima di tutto!
    E’ importante che il contenuto principale della pagina, come il testo dell’articolo, il dettaglio della news, ecc, sia nella parte iniziale del codice HTML. Sidebar, menu di navigazione e footer devono comparire nell’HTML dopo.
  10. Codice correttamente indentato
    Se le parti del codice sono indentate, la struttura risulta molto più leggibile. Codice allineato a sinistra è orribile e di difficile lettura.
  11. H1, h2, h3, ecc… nel corretto ordine
    Usare i tag header (h1, h2, h3, ecc…), così come sono stati ideati, cioè per creare titoli per sezioni. E’ buona norma usarli nel corretto ordine, cioè prima l’h1, poi l’h2, e così via.
  12. Nessuno stile nell’HTML
    Il codice HTML dovrebbe trasportare contenuto e struttura e non lo stile. Mantieni lo stile nel CSS.
    Evita quindi l’uso di tag <font>.

Regole per scrivere una pagina html

Scarica il poster (1600×1200 pixel, 300KB) per poterlo stampare e attaccare nel tuo ufficio!

Ottimi template gratis per siti professionali

Template GratisOggi vi propongo 5 ottimi archivi di template gratuiti di ottima qualità. Si tratta di siti che propongono design web di qualità superiore per unicità e creatività, ideati da certificati professionisti del web design.

Template World

Template World Tutti i template di Template World sono gratis, senza tabelleW3C-compliant. Sono layout creati dai designer di Template World. Questi template sono stati provati e sono compatibili con la gran parte dei più famosi browser in circolazione sui principali sistemi operativi. La licenza è Creative Commons 2.5, che significa che siete liberi di modificare il layout per adattarlo al vostro personale gusto. L’unico vincolo è l’obbligo di inserire un link a Template world.

Studio7Design

template di Studio7Design I template di Studio7Design fanno parte della serie Nautica e sono layout open source. L’uso è gratuito per siti a carattere no-profit o per siti personali. La licenza usata è la Creative Commons 2.5.

Andreas Viklund templates

Andreas Viklund templateAndreas Viklund mette a disposizione gratuitamente i suoi migliori template, tutti rigorosamente in XHTML e CSS. Sono completamente gratis per tutti gli usi possibili senza nessuna limitazione o obbligo. L’unica richiesta è di inserirlo nei crediti, ma solamente se lo volete fare.

 Solucija Template

Solucjia TemplateIn questo sito è possibile trovare template per siti web gratuiti e completamente XHTML / CSS. Possono essere usati senza limitazioni sia su siti non commerciali che su quelli commerciali. L’unica richiesta non obbligatoria è di inserire nei crediti un link a Solucjia Design nel footer della pagina.

Open Design Community

Open Design CommunityLa community Open Design (The Open Design Community – TODC) è un gruppo di web designer votati all’open source che contribuiscono alla crescita della comunità fornendo centinaia di template in formato XHTML e CSS, completamente gratuiti. L’obiettivo di questo gruppo di persone è di rendere internet un luogo esteticamente più bello. (via AjaxPath)

Editor online: syntax highlight in Javascript

CodePressè un editor web creato per gestire il codice sorgente dei propri progetti. La caratteristica principale è il syntax highlight, ovvero la capacità di colorare in tempo reale parole chiave, operatori, stringhe, valori numerici e molto altro, durante la digitazione stessa del codice sul browser.

 I linguaggi fin qui supportati sono: PHP, Javascript, Java, Perl, SQL, HTML e CSS. Le sue caratteristiche principali sono:

  • Syntax highlighting in tempo reale
  • Code snippets,  per esempio, in modalità PHP digitando "if" e premendo [tab]
  • Completamento automatico, semplicemente scrivendo " o ( o ‘ o [ o {
  • Tasti veloci. In modalità PHP, per esempio, la combinazione [ctrl][shift][spazio] è una combinazione veloce per &nbsp;
  • Finestre multiple. E’ possibile avere più CodePress sulla stessa finestra del browser

syntax highlight

Effetto bottone in javascript

bottoni in javascriptGlossy.js è una libreria Javascript che aggiunge angoli stondati, trasparenza e ombreggiatura alle immagini della propria pagina web. E’ una libreria non intrusivo che mantiene il proprio codice pulito.

Funziona in tutti i maggiori browser web: Firefox 1.5+, Opera 9+, IE6+ e Safari. Nei browser non supportati si disattiva e l’utente non si accorgerà di nulla.

Per applicare l’effetto agli oggetti della pagina, è sufficiente indicare alcuni nomi di classe css. Eccone un esempio:

class = "glossy iradius50"

oppure

class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"

Generatore di Temi per WordPress

generatore di temi per wordpressPer chi non ha molta pratica con l’HTML e i fogli di stile, ma vuole a tutti i costi personalizzare il proprio blog, consiglio questa funzionale applicazione: WordPress Theme Generator. L’interfaccia è abbastanza spartana, ma il risultato è apprezzabile.

La personalizzazione va dal logo agli sfondi colorati, dal colore dei testi alla dimensione in larghezza del blog. Si possono inoltre definire la struttura del sito, con sidebar a sinistra o a destra, il layout del menu (a tab, oppure a punto elenco) e la licenza finale d’utilizzo. Il preview è in tempo reale per permettere un’agevole modifica dei parametri.

WordPress Theme Generator può essere un buon punto d’inizio per poi cominciare a imparare a modificare il proprio template.

Nuovi temi per Google

Google - nuovi temi per personalizzare l'home page del più grande motore di ricerca
Sono disponibili nuovi temi che Google offre per personalizzare la sua home page. I temi sono veramente simpatici, come quello che ho proposto qui sopra. Il tema si chiama "Bus stop", e un gruppetto di persone variopinte stanno aspettando il bus. Gli altri temi disponibili sono: la spiagga, uno cityscape con il profilo di una città, sweet dreams, la casa del tè che mostra un paesaggio giapponese e un tema stagionale.

Paesaggio notturno

Ovviamente Google non si è fermata a questo. Per alcuni temi adatta lo sfondo mostrando un paesaggio diurno o notturno in base all’orario di accesso alla pagina. Oltre a questo, il tema potrebbe cambiare anche in base al tempo metereologico. Per fare questo viene chiesto il paese e la nazione di appartenenza.

Per ora la possibilità di aggiungere temi è riservata agli utenti di lingua inglese. Spero che questa funzionalità venga presto estesa anche a noi italiani

Web 2.0: il meglio del meglio sulla rete

web 2.0 risorseI siti marchiati Web 2.0 si stanno diffondendo a macchia d’olio in tutti gli angoli più sperduti di internet. Dai bookmark sociali ai siti di vendita immobiliare; questa lista propone il meglio del meglio, la crema dei siti Web 2.0. Che cosa rende un sito di tipo Web 2.0? Questo articolo può chiarirvi le idee.

Ci sono anche altri collegamenti utili:

Web 2.0: una definizione in 10 punti

Molti di voi spesso si saranno chiesti: “Cosè il Web 2.0?“. Sfortunatamente non esiste una definizione chiara ed esaustiva. Quando si cerca di spiegare che cos’è, si tende ad usare un insieme di definizioni ed esempi.

Ecco come viene definito da Tim O’Reilly in “What is Web 2.0“, da Paul Graham nel suo “Web 2.0” e da Jason Fried nel libro “User Survey“:

  • La saggezza degli utenti: con questa definizione pensiamo direttamente al funzionamento di Digg.com, in cui il successo di un articolo è deciso dagli utenti che lo votano. La gente parla della forza dell'”Effetto della rete”. I risultati di Google funzionano in base a questa definizione. E’ il numero di link al sito che ne decide l’importanza.
  • Applicazioni web condivise: se applichiamo questa definizione, allora solo alcuni siti verrebbero classificati come Web 2.0: Basecamp, Writely e 30Boxes. Ma se pensiamo a Google e a Digg come applicazioni, allora molti altri siti rientrerebbero nella categoria.
  • Il web inteso come piattaforma: definizione abbastanza vaga. Avete ragione. Secondo Tim O’Really, che ha coniato questo concetto, significa mettere a disposizione un servizio che non potrebbe vivere senza il web. In quest’ottica, allora pensiamo a eBay, Craiglist, Wikipedia, del.icio.us, Skype e Dodgeball. Penso che ogni community possa rientrare in questa definizione.
  • Partecipazione degli utenti: Questo è il punto fondamentale che divide i vecchi siti dai nuovi servizi web come YouTube, Flickr e OhMyNews dove gli utenti sono anche gli autori. L’espressione “read/write web” illustra chiaramente l’idea che vogliamo trasmettere.
  • Pieno coinvolgimento dell’utente:  I siti Web 2.0 usano CSS, AJAX, e altre tecnologie che aumentano l’usabilità e creano pagine dinamiche che sono i grado di mostrare più informazioni nello stesso spazio.
  • Neologismo per Marketing: questo è almeno quello che gli scettici dicono. Così Google search, Amazon ed eBay, che fanno parte del Web 2.0 per una o più delle loro caratteristiche, sono solo una sorta di moderna moda passeggera destinata a sparire. Questa definizione è parzialmente vera, anche se, secondo me, il Web 2.0 è molto di più.
  • L’importanza dei dati: La gestione dei dati è una competenza insita nelle aziende che trattano il Web 2.0. “L’SQL è il nuovo HTML”, è un’altra definizione che segue la stessa filosofia. Tutto il Web 2.0, dalle grandi aziende come Amazon e Google per arrivare alle piccole startup come 30boxes e Orchestrate, operano principalmente con database e praticamente non fanno altro che mostrare viste personalizzate.
  • Beta per sempre: Le applicazioni Web 2.0 sono continuamente rilasciate, riscritte e rivisitate su basi in continuo sviluppo. La maggior parte delle applicazioni di Google, per esempio, sono ancora in beta. Ancora, Flickr si rumoreggia sia modificato ogni 30 minuti. MySpace e altre reti sociali aggiungono nuove caratteristiche ogni quindici giorni. Questa è comunque diventata una caratteristica anche delle applicazioni standalone, basti pensare a Windows e MacOs che rilasciano fix e patch in continuazione.
  • Usare il web come è stato ideato: Paul Graham riferisce di un incremento nell’usabilità che è stata raggiunta attraverso un buon design, grazie a tecnologie come AJAX e anche perchè è stato permesso agli utenti di organizzare le loro informazioni liberamente (si veda Flickr e del.icio.us).
  • Nulla: Molti asseriscono che il Web 2.0 non esiste. Personalmente trovo difficile condividere questa risposta. Semplicemente perchè se da un lato è difficile trovare una definizione chiara, dall’altro è anche innegabile una lenta rivoluzione nei nuovi siti. E’ come voler descrivere il mondo con il solo bianco e nero. Esistono le gradazioni e le tonalità che dipingono meglio gli oggetti e la realtà. La stessa cosa credo si possa dire delle nuove applicazioni. Inoltre il Web 2.0 è ancora una espressione giovane. Ci rendiamo conto di cosa sia, ma non riusciamo ancora a definirne i contorni.

(tratto da twopointtouch.com)