Sviluppo Web
Scopri tre tecniche importanti utilizzate dagli sviluppatori HTML più avanzati che ti permettono di migliorare drasticamente la qualità tecnica del tuo prodotto.
Come migliorare la qualità tecnica dei tuoi lavori HTML attraverso tre tecniche professionali
L'utente finale, chiamato anche "visitatore", esprime il suo giudizio riguardo la navigazione in un particolare sito Web attraverso una moltitudine di parametri specifici, perfettamente conosciuti dallo sviluppatore esperto. Certamente il visitatore deve essere interessato ai contenuti del sito, altrimenti la navigazione sul suddetto prodotto informatico perderebbe il suo senso più profondo, ma dando per scontato che questo aspetto sia verificato, possiamo individuare nel grado della user-experience l'aspetto più importante su cui lavorare per migliorare la qualità dei tuoi lavori HTML.
La user-experience, che in italiano indica letteralmente l'esperienza dell'utente (mentre sta visitando un sito Web), è il prodotto finale di più caratteristiche primarie che, mescolate, producono un determinato tipo di risultato. Possiamo dunque dire che la user-experience è la conseguenza delle tue scelte in fase di architettura di un layout.
Ad esempio, nella componente grafica delle pagine, devi prestare attenzione alla scelta dei colori, dei font (caratteri del testo) e della disposizione degli elementi, perché a parità di contenuti, la costruzione di un layout piuttosto che di un altro fa una grande differenza sull'esperienza dei tuoi visitatori.
Nella componente prettamente tecnica invece, ci sono svariati fattori su cui puoi incidere per aumentare il livello di questo importante fattore, sei pronto a scoprirli?
In questo articolo infatti, ti mostriamo tre tecniche davvero importanti utilizzate dagli sviluppatori HTML più avanzati che ti permettono di migliorare drasticamente la qualità tecnica del tuo prodotto. Questa miglioria poi si rifletterà su molti aspetti della user-experience dell'utente finale. Partiamo.
Tecnica 1: rendi il tuo sito capace di interpretare più caratteri possibili
Una caratteristica notoriamente fastidiosa di un sito Web è la sua incapacità di interpretare correttamente i cosiddetti caratteri speciali, come ad esempio i caratteri accentati o i simboli.
La nota positiva è che tu, con la giusta conoscenza, puoi incidere su questa capacità direttamente dal codice HTML!
Ti basta inserire il corretto meta tag all'interno dell'head, e potrai dire addio alla visualizzazione di caratteri "storpiati" dal browser:
<meta charset="utf-8">
Grazie a questa aggiunta, inoltre, anche tutti i caratteri speciali dei linguaggi internazionali saranno prodotti correttamente, dando al tuo sito un volto ancor più internazionale.
Tecnica 2: usa gli attributi HTML 5 per gli elementi dei form
L'HTML 5 è la più moderna specifica per costruire pagine Web, ed aggiunge tantissime caratteristiche meravigliose rispetto alla precedente quarta versione: usale!
Ad esempio, nella compilazione dei form (i moduli di contatto), l'utente potrebbe sbagliare a digitare determinati campi, e se quest'ultimo ha disabilitato Javascript, i tuoi script non potranno assisterlo nella sua procedura. Niente paura, puoi ottenere risultati di pari livello utilizzando gli specifici attributi "type" applicati sugli elementi "input"!
Al posto di utilizzare un generico
<input type="text">
varia le tue scelte, virando per componenti quali:
<input type="email"> // controlla che l'utente inserisca una mail
<input type="url"> // controlla che l'utente inserisca un URL
<input type="tel"> // controlla che l'utente inserisca un numero di telefono
In questo caso risolvi due problemi molto importanti:
- se l'utente sbaglia nella digitazione, verrà assistito dal browser per digitare l'input corretto, come ad esempio un indirizzo e-mail composto adeguatamente
- se l'utente non fornisce l'input corretto, non potrà inviare il form tramite la pagina Web
Tecnica 3: usa l'attributo "alt" nelle immagini
Quando parliamo di user-experience, non ci stiamo riferendo solo ai cosiddetti utenti "standard", ma anche agli utenti che presentano differenti tipologie di disabilità.
Un utente non vedente, ad esempio, non può purtroppo godersi visivamente le immagini che hai inserito nelle tue creazioni, ma tu hai il potere di fornirgli una descrizione dettagliata di cosa hai ritratto, aumentando in maniera drastica la qualità della sua esperienza di navigazione. Per fare questo ti basta fornire una descrizione alle tue immagini attraverso l'attributo alt:
<img src="mountain.jpg" alt="Una splendida panoramica delle Alpi!" />
<img src="fruits.jpg" alt="Lamponi, mirtilli e fragole fresche!" />
L'utente non vedente sarà ora istruito dal suo screen-reader riguardo al contenuto delle tue immagini. Questa tecnica inoltre, migliora in maniera esponenziale il SEO (posizionamento sui motori di ricerca) delle tue pagine: quando si dice "prendere due piccioni con una fava".
Come hai potuto vedere, in qualità di sviluppatore front-end disponi concretamente di un enorme potenziale, ma proprio per questo motivo ricorda sempre ciò che disse il famoso zio Ben di Spider-Man:
da grandi poteri, derivano grandi responsabilità.
La qualità dell'esperienza di navigazione dei tuoi utenti è nelle tue mani.
