Salve a tutti. Ho deciso di dare via, tramite l'apertura di questa discussione, alla prima rubrica targata Syra, chiamata Non fare il web designer. Perché questo? Semplicemente è un modo per sfogare la mia "rabbia", diciamo, verso tutti quei web designer che progettano siti web per aziende di vario genere commettendo castronate "a gogò". Questa rubrica è aperta a tutti, chiunque può commentare e chiunque può trarne spunto per creare una propria considerazione per una nuova "puntata" di "Non fare il web designer". Voglio evidenziare questo: in questa rubrica andrò ad evidenziare solo i difetti e quindi a criticare (a volte con un tono anche un po' sarcastico) in modo spero costruttivo il lavoro degli altri web designer, sperando di essere anche d'aiuto anche a tutti quelli vogliono intraprendere la via del web design. Spero che le mie considerazioni vi piacciano! Buona lettura!
Il primo sito che prendiamo in esame oggi, è quello di un centro commerciale aperto abbastanza recentemente dalle mie parti: il suo nome è "Nave de Vero". In particolare ci focalizzeremo sulla prima pagina che ha attirato la mia attenzione, quella dell'Elenco dei negozi.
Alla prima vista pare una pagina anche fatta bene, il design è pulito e certamente i colori dei collegamenti per il filtro di ricerca aiutano assolutamente. Ma la prima cosa che può saltare all'occhio effettuando un po' di "drag and drop" (trascina e rilascia), è la seguente: ogni negozio in elenco è rappresentato da un'immagine. E non intendo solo il logo, il che andrebbe bene, ma anche la descrizione, LA DESCRIZIONE ragazzi!.
Cosa c'è di meglio che complicare la vita all'utente medio, mettendo le descrizioni dei negozi come immagini? La cosa mi ha lasciato un po' perplesso, perché io se voglio cercare qualcosa in una pagina, premo "CTRL+F" e scrivo quello che sto cercando. Grazie di complicarmi la vita eh!
Vabbè dai, questa cosa la posso passare, è solo un ostacolo per l'utente, ma tanto esistono i "filtri" (non dinamici purtroppo, inteso che deve ricaricare la pagina).
Una persona curiosa come me, non può quindi non andare a guardare sotto il cofano come un appassionato di motori con le automobili. Tuttavia, a differenza di questi ultimi, tutto quello che vediamo sotto può essere deleterio. Perché? Perché è analizzando il sorgente che si scoprono le castronate migliori (e anche un tutorial di How-to-basic su come farsi venire un infarto, magari con delle uova).
Castronate? BOOM, eccovi il prossimo dettaglio raccapricciante. La prima cosa che notiamo quando apriamo la console di sviluppo con il sorgente della pagina, è l'immenso numero di errori che lo scrolling della pagina causa. Andando a guardare l'errore, troviamo la seguente dicitura (onnipresente nelle pagine del sito):
Da questo possiamo capire che potrebbe esserci qualche riferimento ad un navigatore per riportare la visualizzazione in alto alla pagina... e cosa troviamo proprio come terzo tag del body? Il nostro torna_su!
La cosa però più bizzarra è questa: osservando il CSS, scopriamo che l'elemento è stato nascosto mediante la proprietà
Un'altro dettaglio, che può essere anche tralasciato, è quello del nome delle classi. Striscia_grigia, Striscia_grigia3... aspetta dov'è finita la 2? Originalità PORTAMI VIA. Però, un'altra cosa mi ha sorpreso: la classe corpo_pagina. Aspetta, non dirmelo: quello che io vedo dopo l'introduzione inizia da lì? Sarò io che sarò strano, ma di solito si usa il termine "container".
Dai nomi delle classi sorge il dubbio: ma perché non usano i tag <header> e <footer> di HTML5? Perché? Semplicemente NON POSSONO, perché veramente ha senso usare uno standard datato 2002 (ultima revisione di XHTML 1.0, che poi non so che senso abbia usarlo in questo caso quando non hai da creare dei tag proprietari) quando l'ultima versione di suddetto linguaggio risale al 2010 per la versione 2.0. Ditemi voi, ha senso fare una cosa di questo tipo per un sito di un'attività commerciale inaugurata poco più di un anno fa? Ha senso?
Altra cosa collegata all'uso dell'XHTML... se lo usi, lo usi bene di solito no? Non è questo il caso a quanto pare, perché effettuando una validazione mediante il Validatore w3c (http://validator.w3c.org), possiamo notare quanti errori sono presenti. Potete trovare qui il resoconto: Resoconto (spoiler: 163 errori e 9 warnings). Correggere grazie.
State pronti, perché ora vi faccio venire la pelle d'oca.
Quante volte ve l'hanno detto? "La curiosità fa male", ma chi ci crede di solito? Essere curiosi aiuta sempre, ci fa imparare e scoprire cose nuove... Cose nuove? Qui dite addio nella speranza nel genere umano, perché NON E' POSSIBILE creare una spaziatura usando 20
E dopo questa, vi saluto, perché veramente... okay, chi l'avrà fatto sarà legato alle vecchie tecnologie, ma vi prego, aggiornatevi perché queste cose rappresentano anche una perdita di prestazioni da parte del browser.
Spero che il mio post vi sia piaciuto e accetto critiche su tutto (p.s. guardate l'ora di scrittura, se ho commesso qualche errore, non esitate a segnalarlo, grazie).
Edited by eXander - 13/10/2015, 20:13
Il primo sito che prendiamo in esame oggi, è quello di un centro commerciale aperto abbastanza recentemente dalle mie parti: il suo nome è "Nave de Vero". In particolare ci focalizzeremo sulla prima pagina che ha attirato la mia attenzione, quella dell'Elenco dei negozi.
Alla prima vista pare una pagina anche fatta bene, il design è pulito e certamente i colori dei collegamenti per il filtro di ricerca aiutano assolutamente. Ma la prima cosa che può saltare all'occhio effettuando un po' di "drag and drop" (trascina e rilascia), è la seguente: ogni negozio in elenco è rappresentato da un'immagine. E non intendo solo il logo, il che andrebbe bene, ma anche la descrizione, LA DESCRIZIONE ragazzi!.
Cosa c'è di meglio che complicare la vita all'utente medio, mettendo le descrizioni dei negozi come immagini? La cosa mi ha lasciato un po' perplesso, perché io se voglio cercare qualcosa in una pagina, premo "CTRL+F" e scrivo quello che sto cercando. Grazie di complicarmi la vita eh!
Vabbè dai, questa cosa la posso passare, è solo un ostacolo per l'utente, ma tanto esistono i "filtri" (non dinamici purtroppo, inteso che deve ricaricare la pagina).
Una persona curiosa come me, non può quindi non andare a guardare sotto il cofano come un appassionato di motori con le automobili. Tuttavia, a differenza di questi ultimi, tutto quello che vediamo sotto può essere deleterio. Perché? Perché è analizzando il sorgente che si scoprono le castronate migliori (e anche un tutorial di How-to-basic su come farsi venire un infarto, magari con delle uova).
Castronate? BOOM, eccovi il prossimo dettaglio raccapricciante. La prima cosa che notiamo quando apriamo la console di sviluppo con il sorgente della pagina, è l'immenso numero di errori che lo scrolling della pagina causa. Andando a guardare l'errore, troviamo la seguente dicitura (onnipresente nelle pagine del sito):
Uncaught TypeError: Cannot read property 'top' of undefined
Da questo possiamo capire che potrebbe esserci qualche riferimento ad un navigatore per riportare la visualizzazione in alto alla pagina... e cosa troviamo proprio come terzo tag del body? Il nostro torna_su!
La cosa però più bizzarra è questa: osservando il CSS, scopriamo che l'elemento è stato nascosto mediante la proprietà
display: none
perché l'immagine non esiste.Un'altro dettaglio, che può essere anche tralasciato, è quello del nome delle classi. Striscia_grigia, Striscia_grigia3... aspetta dov'è finita la 2? Originalità PORTAMI VIA. Però, un'altra cosa mi ha sorpreso: la classe corpo_pagina. Aspetta, non dirmelo: quello che io vedo dopo l'introduzione inizia da lì? Sarò io che sarò strano, ma di solito si usa il termine "container".
Dai nomi delle classi sorge il dubbio: ma perché non usano i tag <header> e <footer> di HTML5? Perché? Semplicemente NON POSSONO, perché veramente ha senso usare uno standard datato 2002 (ultima revisione di XHTML 1.0, che poi non so che senso abbia usarlo in questo caso quando non hai da creare dei tag proprietari) quando l'ultima versione di suddetto linguaggio risale al 2010 per la versione 2.0. Ditemi voi, ha senso fare una cosa di questo tipo per un sito di un'attività commerciale inaugurata poco più di un anno fa? Ha senso?
Altra cosa collegata all'uso dell'XHTML... se lo usi, lo usi bene di solito no? Non è questo il caso a quanto pare, perché effettuando una validazione mediante il Validatore w3c (http://validator.w3c.org), possiamo notare quanti errori sono presenti. Potete trovare qui il resoconto: Resoconto (spoiler: 163 errori e 9 warnings). Correggere grazie.
State pronti, perché ora vi faccio venire la pelle d'oca.
Quante volte ve l'hanno detto? "La curiosità fa male", ma chi ci crede di solito? Essere curiosi aiuta sempre, ci fa imparare e scoprire cose nuove... Cose nuove? Qui dite addio nella speranza nel genere umano, perché NON E' POSSIBILE creare una spaziatura usando 20
. Non si può. Io mi rifiuto di crederci. Non ho mai visto nemmeno Næt' o #Mattex (scusate se vi cito, ma siete i più giovani qui ad imparare il web design) fare una, e passatemi il termine, cagata di questo genere. Usate il CSS o piuttosto se proprio non volete, una tabella, ma non gli
! Il punto al quale mi riferisco è posizionato tra il pulsante "torna alla pagina precedente" e "Negozi", ovvero il titolo della pagina.E dopo questa, vi saluto, perché veramente... okay, chi l'avrà fatto sarà legato alle vecchie tecnologie, ma vi prego, aggiornatevi perché queste cose rappresentano anche una perdita di prestazioni da parte del browser.
Spero che il mio post vi sia piaciuto e accetto critiche su tutto (p.s. guardate l'ora di scrittura, se ho commesso qualche errore, non esitate a segnalarlo, grazie).
Edited by eXander - 13/10/2015, 20:13
.