I 5 errori più comuni commessi dagli sviluppatori HTML5: una guida per principianti

Sono passati più di 20 anni da quando Tim Berners-Lee e Robert Cailliau hanno specificato l'HTML, che è diventato il linguaggio di markup standard utilizzato per costruire Internet. Da allora, la comunità di sviluppo HTML ha chiesto miglioramenti a questo linguaggio, ma questo grido è stato ascoltato principalmente dagli sviluppatori di browser Web che hanno cercato di alleviare i problemi HTML dei loro colleghi. Sfortunatamente, ciò ha portato a ancora più problemi causando molti problemi di compatibilità tra browser e duplicazione del lavoro di sviluppo. In questi 20 anni, l'HTML è stato aggiornato 4 volte, mentre la maggior parte dei browser ha ricevuto un numero a due cifre di aggiornamenti principali più numerose piccole patch.

HTML5 avrebbe dovuto finalmente risolvere i nostri problemi e diventare uno standard per governarli tutti (browser) . Questa è stata probabilmente una delle tecnologie più attese dalla creazione del World Wide Web. È successo? Abbiamo finalmente ottenuto un linguaggio di markup che sarà completamente compatibile con più browser e funzionerà su tutte le piattaforme desktop e mobili fornendoci tutte le funzionalità che chiedevamo? Non lo so! Solo pochi giorni fa (16 settembre 2014) abbiamo ricevuto un'altra richiesta di revisione da parte del W3C, quindi la specifica HTML5 è ancora incompleta.

Si spera che, quando la specifica sarà finalizzata un giorno, i browser non avranno già un codice obsoleto significativo e implementeranno facilmente e correttamente fantastiche funzionalità come Web Workers , più elementi audio e video sincronizzati e altri componenti HTML5 di cui abbiamo bisogno per un a lungo.

Tuttavia, abbiamo migliaia di aziende che hanno basato le loro attività su HTML5 e stanno andando alla grande. Ci sono anche molte grandi applicazioni e giochi basati su HTML5 utilizzati da milioni di persone, quindi il successo è ovviamente possibile e HTML5 è, e continuerà ad essere, utilizzato indipendentemente dallo stato delle sue specifiche.

Tuttavia, la ricetta che ho menzionato può facilmente esploderci in faccia, e quindi ho enfatizzato alcuni degli errori HTML5 più basilari che possono essere evitati. La maggior parte degli errori elencati di seguito sono la conseguenza dell'implementazione incompleta o mancante di alcuni elementi HTML5 in diversi browser e dovremmo sperare che nel prossimo futuro diventino obsoleti. Fino a quando ciò non accadrà, suggerisco di leggere l'elenco e di tenerlo a mente quando crei la tua prossima applicazione HTML5, che tu sia un principiante HTML5 o un veterinario esperto.

Errore comune n. 1: fidarsi dell'archiviazione locale

Lasciali mangiare la torta! Questo approccio è stato un peso per gli sviluppatori per secoli. A causa del timore ragionevolmente ragionevole di violazioni della sicurezza e della protezione dei computer, nei "secoli bui" in cui Internet era temuto da molti, le applicazioni Web potevano lasciare quantità irragionevolmente piccole di dati sui computer. È vero, c'erano cose come i dati utente che ci hanno fornito "grandi browser master di Microsoft®" o cose come gli oggetti condivisi locali in Flash, ma questo era tutt'altro che perfetto.

È quindi ragionevole che una delle prime funzionalità di base di HTML5 adottate dagli sviluppatori sia stata Web Storage. Tuttavia, tieni presente che Web Storage non è sicuro. È meglio che utilizzare i cookie perché non verranno trasmessi via cavo, ma non sono crittografati. Non dovresti assolutamente mai archiviare i token di sicurezza lì. La tua politica di sicurezza non dovrebbe mai basarsi sui dati archiviati in Web Storage poiché un utente malintenzionato può modificare facilmente i suoi valori localStorage e sessionStorage in qualsiasi momento.

Per avere maggiori informazioni su Web Storage e su come utilizzarlo, suggerisco di leggere questo post.

Errore comune n. 2: aspettarsi la compatibilità tra i browser

HTML5 è molto più di un semplice linguaggio di markup. È maturato abbastanza per combinare il comportamento con il layout e dovresti considerare HTML5 come HTML esteso con JavaScript avanzato in cima. Se guardi a tutti i problemi che abbiamo avuto prima solo per rendere una combinazione statica di HTML+CSS identica su tutti i browser, è lecito presumere che una maggiore complessità significherà solo uno sforzo maggiore per garantire la compatibilità tra browser.

L'interpretazione di HTML5 su browser diversi è tutt'altro che identica, proprio come nel caso di JavaScript. Tutti i principali attori nelle guerre dei browser hanno dato una mano nelle specifiche HTML5, quindi è corretto presumere che le deviazioni tra i browser dovrebbero ridursi nel tempo. Ma anche ora alcuni browser hanno deciso di ignorare completamente alcuni elementi HTML5 rendendo molto difficile seguire una linea di base e un insieme comune di funzionalità. Se aggiungiamo più dispositivi e piattaforme connessi a Internet all'equazione, la situazione diventa ancora più complicata, causando problemi con HTML5.

Ad esempio, le animazioni Web sono un'ottima funzionalità supportata solo da Chrome e Opera, mentre la funzionalità di notifica Web che consente di avvisare l'utente al di fuori del contesto di una pagina Web di un'occorrenza, come la consegna di e-mail, è completamente ignorata da Internet Explorer.

Per saperne di più sulle funzionalità di HTML5 e sul supporto dei diversi browser, consulta la guida HTML5 su www.caniuse.com.

Quindi resta il fatto che anche se HTML5 è nuovo e ben specificato, dovremmo aspettarci molti problemi di compatibilità tra browser e pianificarli in anticipo. Ci sono troppe lacune che i browser devono colmare ed è lecito aspettarsi che non possano superare bene tutte le differenze tra le piattaforme.

Errore comune n. 3: supporre prestazioni elevate

Indipendentemente dal fatto che HTML5 sia ancora in evoluzione, è una tecnologia molto potente che presenta molti vantaggi rispetto alle piattaforme alternative utilizzate prima della sua esistenza. Ma da un grande potere derivano grandi responsabilità , specialmente per i principianti di HTML5. HTML5 è stato adottato da tutti i principali browser su piattaforme desktop e mobili. Tenendo presente questo, molti team di sviluppo scelgono HTML5 come piattaforma preferita, sperando che le loro applicazioni funzionino allo stesso modo su tutti i browser. Tuttavia, supporre prestazioni ragionevoli su piattaforme desktop e mobili solo perché lo affermano le specifiche HTML5, non è sensato. Molte aziende (khm! Facebook khm!) hanno scommesso su HTML5 per la loro piattaforma mobile e hanno sofferto che HTML5 non funzionasse come previsto.

Ancora una volta, tuttavia, ci sono alcune grandi aziende che fanno molto affidamento su HTML5. Basta guardare i numerosi studi di sviluppo di giochi online che stanno facendo cose incredibili spingendo HTML5 e browser ai loro limiti. Ovviamente, fintanto che sei a conoscenza dei problemi di prestazioni e li stai aggirando, puoi essere in un ottimo posto per creare applicazioni straordinarie.

Errore comune n. 4: accessibilità limitata

Il web è diventato una parte molto importante della nostra vita. Rendere le applicazioni accessibili alle persone che si affidano alla tecnologia assistiva è un argomento importante che viene spesso messo da parte nello sviluppo del software. HTML5 cerca di superare questo problema implementando alcune delle funzionalità avanzate di accessibilità. Più di pochi sviluppatori hanno accettato che ciò fosse sufficiente e non hanno davvero dedicato tempo a implementare opzioni di accessibilità aggiuntive nelle loro applicazioni. Sfortunatamente, in questa fase HTML5 presenta problemi che gli impediscono di rendere le tue applicazioni disponibili a tutti e dovresti aspettarti di investire tempo aggiuntivo se desideri includere una gamma più ampia di utenti.

Puoi controllare questo posto per ulteriori informazioni sull'accessibilità in HTML5 e sullo stato attuale delle funzionalità di accessibilità più comuni.

Errore comune n. 5: non utilizzare i miglioramenti di HTML5

HTML5 ha esteso in modo significativo il set di tag HTML/XHTML standard. Oltre ai nuovi tag, abbiamo alcune nuove regole e comportamenti. Troppi sviluppatori hanno raccolto solo alcuni miglioramenti e hanno saltato alcune delle fantastiche nuove funzionalità di HTML5.

Una delle cose più interessanti in HTML5 è la convalida lato client. Questa caratteristica è stata probabilmente uno dei primi elementi di HTML5 che i browser web hanno raccolto. Ma, sfortunatamente, puoi trovare più di pochi sviluppatori che aggiungono l'attributo novalidate ai loro moduli per impostazione predefinita. Le ragioni per farlo sono ragionevoli e sono abbastanza sicuro che avremo un dibattito su questo. A causa della compatibilità con le versioni precedenti, molte applicazioni hanno implementato validatori JavaScript personalizzati e la convalida immediata eseguita dai browser è scomoda. Tuttavia, non è troppo difficile garantire che due metodi di convalida non si scontrano e la standardizzazione della convalida dell'utente garantirà un'esperienza comune aiutando a risolvere i problemi di accessibilità che ho menzionato in precedenza.

Un'altra grande caratteristica è legata al modo in cui l'input dell'utente viene gestito in HTML5. Prima dell'arrivo di HTML5, dovevamo mantenere tutti i nostri campi modulo contenuti all'interno del <form></form> . I nuovi attributi del modulo lo rendono perfettamente valido per fare qualcosa del genere:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Anche se lname non è all'interno del modulo, verrà inviato insieme a fname .

Per ulteriori informazioni sui nuovi attributi e miglioramenti dei moduli, puoi consultare Mozilla Developer Network.

Incartare

Capisco che gli sviluppatori web siano un danno collaterale nelle guerre dei browser poiché molti degli errori di cui sopra sono una conseguenza diretta dell'implementazione problematica di HTML5 in diversi browser. Tuttavia, è ancora fondamentale evitare i problemi comuni di HTML5 e dedicare un po' di tempo alla comprensione delle nuove funzionalità di HTML5. Una volta che avremo tutto sotto controllo, le nostre applicazioni utilizzeranno nuovi e straordinari miglioramenti e porteranno il Web a un livello superiore.