Alla fine del marzo scorso Paul Irish, un noto front-end engineer e developer advocate per Google Chrome, aveva twittato un documento accademico dal titolo “Towards a Taxonomy of Errors in HTML and CSS”, risalente a due anni fa e riguardante uno studio condotto dalla Drexel University di Philadelphia sugli errori più comuni commessi nella programmazione di file HTML e CSS.
Il fatto che sia stato riportato alla luce un documento del 2013 potrebbe sembrare piuttosto strano. Eppure la lettura dello stesso può rivelarsi molto utile, in quanto, aiuta a comprendere quali errori ancora vengono commessi dai principianti, e quali sono stati invece i progressi ottenuti.
Allo studio hanno preso parte 20 partecipanti, ognuno dei quali con livelli di esperienza su HTML e CSS differenti, solo 2 hanno indicato di essere web design per professione. 7 erano le donne e 13 i maschi, tutti di età compresa tra i 18 e i 47 anni. Nessuno dei partecipanti era uno sviluppatore professionista.
L’obiettivo dello studio era quello di mettere in luce gli errori più comuni commessi quando si inizia ad imparare il linguaggio HTML e CSS. I partecipanti hanno utilizzato openHTML Editor, un editor di testo che fa parte del progetto di ricerca openHTML finalizzato alla creazione di strumenti per l’apprendimento dello sviluppo web. I risultati dello studio sarebbero stati utilizzati per progettare un nuovo web editor, in grado di aiutare gli utenti alle prime armi a non commettere gli errori più comuni.
Lo studio mirava a rispondere in particolare alle seguenti domande:
- Quali sono gli errori che commettono le persone quando sviluppano una pagina HTML o CSS?
- Da cosa dipendono questi errori?
- Dopo aver commesso l’errore, quanto tempo impiegano le persone per rendersene conto?
Le attività eseguite durante lo studio di ricerca
I partecipanti avevano a loro disposizione 30 minuti per portare a termine il loro compito, utilizzando tutte le risorse comprese le ricerche sul web. I compiti da svolgere erano:
- Creare un titolo, paragrafo, elenco ordinato e sub-list.
- Creare un collegamento ipertestuale, aggiungere un’immagine e collegare il link all’immagine.
- Allineare il testo in una tabella, cambiare i colori di sfondo, il colore di un collegamento ipertestuale e aggiungere un colore allo stato hover.
- Correggere un immagine, un tag non chiuso e un selettore unmatched .
- Creare e centrare orizzontalmente un contenitore div,aggiungere una barra laterale destra nel contenitore.
Come si può notare si tratta di semplici operazioni HTML / CSS che certamente non hanno messo in difficoltà i partecipanti. Ma lo scopo dello studio non era quello di valutare il risultato finale, bensì l’approccio complessivo degli sviluppatori durante le fasi di completamento dei compiti.
Durante le riprese video sono stati monitorati centinaia di errori, ma la maggior parte di essi sono stati individuati e corretti dagli sviluppatori. Anche si tratta di errori corretti, sono stati comunque classificati come errori capaci di rallentare notevolmente l’attività di sviluppo.
Classificazione degli errori su file HTML e CSS
Gli errori sono stati classificati in tre differenti tipologie.
- Errori skill-based – Si tratta di azioni non volute, veri e propri errori di battitura che sono causati da una serie di fattori, ma non di certo da errori di comprensione. Un tipico errore era ad esempio ma mancanza di apertura o chiusura degli apici:
< img src = “image.gif” alt = My immagine “/> - Errori Rule-based – Si tratta di errori non intenzionali, ma causati comunque da incomprensioni. La causa potrebbe essere la non corretta applicazione di regole che riguardano ad esempio la sintassi. L’esempio tipico di questa categoria di errori è:
< div class = “2” > </ div >
e poi nel CSS
. 2 { background-color : blue ;}
è chiaro che il nome di una classe non possa iniziare con un valore numerico. Si tratta quindi di un errore di sintassi. - Errori Knowledge-based – Chiamati anche breackdowns. Si tratta di errori che si verificano a livello concettuale e sono il risultato di una comprensione non complete della situazione che spesso induce a delle ricerche sul web.
I risultati dello studio
Il numero di errori è stato così ripartito:
- 9% sono stati errori skill-based;
- 9% sono stati errori rule-based;
- 1% sono stati errori knokledge-based.
Per quanto concerne gli errori che sono rimasti irrisolti sono:
- il 4.3% degli errori skill-based;
- il 39.6% degli errori rule-based;
- il 52.1% degli errori knowledge-based.
Tra gli errori skill-based i più comuni erano errori di tipografia, tag non chiusi, delimitatori mancanti e così via. Tra gli errori rule-based i più comuni erano: uso di elementi obsoleti, elementi non validi, utilizzo di nomi sbagliati e così via.
Gli sviluppi dello studio su HTML e CSS
Thomas Park, uno degli autori dello studio, ha affermato che attualmente stanno lavorando ad uno strumento chiamato Snowball, pensato per la costruzione di articoli moderni e interattivi che mira a ridurre gli errori dei principianti attraverso l’utilizzo di componenti HTML / CSS / JS.
Il motivo per il quale abbiamo riproposto questo studio risiede nella volontà di sottolineare gli errori più comuni commessi in fase di scrittura di un codice. È importante che soprattutto i principianti facciano particolare attenzione a queste problematiche, onde evitare di perdere del tempo inutile che potrebbe essere impiegato, invece, nello sviluppo dell’applicazione web.
