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!
La mia reazione
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.
Aiuto.
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).
Ma una cosa davvero STUPENDA, l'ho trovata su questo suo sito (ma è presente su tutti i suoi progetti, visto che usa sempre lo stesso layout): www.centroitaca.it/
Tralasciando i nomi assurdi delle classi (e ID... "pulsantiera", sul serio? ), tralasciando anche l'uso di div, al posto di farlo in formato lista, le immagini al posto del testo... perchè era troppo difficile mettere, il testo centrato, del colore giusto, e un "border-bottom: 5px #83aff6" per l'effetto figo sulla voce del menù selezionata. E l'uso dell'evento JS "onmouseover" per modificare l'immagine.
Chissà quanto sono costati questi siti. Una persona che non se ne intende minimamente di webdesign e ha un gusto pessimo, potrebbe anche dire che il sito è realizzato bene.. ma chi se ne intende, capisce subito che si tratta di un team (se non ci lavora dietro una sola persona) di truffatori, che utilizzano un template realizzato negli anni 90, e anche male, visto che contiene comunque degli errori, per guadagnare soldi facilmente senza muovere un dito.
Il mio consiglio è questo: Se avrete l'occasione (o ce l'avete già) di lavorare a un sito, fatelo con passione, impegnatevi a farlo migliore possibile, anche se il vostro cliente sarà un completo ignorante. Non fatelo solo per il gusto di guadagnare, perchè vuol dire che non siete portati per questo mestiere e siete dei truffatori e basta, come lui/loro.
Questo è il brutto (o il bello a seconda dei punti di vista) del web: chiunque può mettersi a fare qualcosa senza capirne una mazza. "Studiare per fare siti/applicazioni? Non serve, la scuola ormai è finita, meglio andare per tentativi." Al di là di tutto quello che hai fatto notare il problema principale è che ci sono troppi file js e immagini disaccoppiati e non compressi. In questo caso per il tipo di sito può essere una cosa da poco ma in genere è il problema principale di lentezza e spreco di risorse. Se non è su un hosting patacca potrebbe anche aggiornare la versione di PHP visto che ormai siamo quasi alla 7.
CITAZIONE
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.
E' nascosto perchè dovrebbe (il condizionale è d'obbligo con lo scempio che han fatto ) apparire solo quando non si è già in cima alla pagina. Comunque dato che l'immagine è irraggiungibile a sto punto è meglio che non funzioni.
CITAZIONE
[...] Sarò io che sarò strano, ma di solito si usa il termine "container".
Mica è un'obbligo °>° Puoi usare anche wrapper o qualsiasi altro nome significativo. In quel caso corpo_pagina ha abbastanza senso come nome. Le questioni sulla nomenclatura sono soggettive, non ci sono regole ferree. L'importante è usare nomi significativi (non è questo il caso), le questioni stilistiche (separare le parole con - invece del _, e simili) sono secondarie.
CITAZIONE
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?
Non la condannerei come scelta. HTML5 è senz'altro più orientato al futuro, ma XHTML è ancora un buono standard su cui basarsi. Il problema principale come hai detto è che l'hanno usato da cani.
Appena ho visto il titolo del post, ho detto:"devo subito leggerlo". Due minuti dopo sono rimasto di merda, cosa cavolo ho visto, io non l'ho definirei web designer assolutamente, ma persona che si crede essa e che non l'ho è (almeno il design per fortuna è stato realizzato bene)!
CITAZIONE (eXander @ 13/10/2015, 00:46)
Aiuto.
Curiosando qua è là tra gli elementi del sorgente. E qui dite addio nella speranza del 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 !
Poteva usare uno/più span con un display:inline-block che occupa 4px (se ricordo bene) e non uttilizare un  !
Simpatica rubrica, mi piace. Non mi sono trovato d'accordo sui nomi dati alle classi : non devono avere un nome di default, quindi è giusto che utilizzi nomi che magari lo aiutano nel compilare il foglio di stile. Ho trovato il tuo commento agli errori veramente divertente ed interessante, i miei complimenti.
Questo è il brutto (o il bello a seconda dei punti di vista) del web: chiunque può mettersi a fare qualcosa senza capirne una mazza. "Studiare per fare siti/applicazioni? Non serve, la scuola ormai è finita, meglio andare per tentativi." Al di là di tutto quello che hai fatto notare il problema principale è che ci sono troppi file js e immagini disaccoppiati e non compressi. In questo caso per il tipo di sito può essere una cosa da poco ma in genere è il problema principale di lentezza e spreco di risorse. Se non è su un hosting patacca potrebbe anche aggiornare la versione di PHP visto che ormai siamo quasi alla 7.
Non posso fare altro che concordare, purtroppo quello che si studia a scuola non basta mai e anzi spesso è non aggiornato (io nella scuola che ho fatto a Pescara, assistivo alla creazione di pagine in HTML 4.01... Quando mi hanno interrogato ho saputo dire più di quanto avevano insegnato. Comunque non ho notato la questione delle immagini non compresse (più che altro perché di solito non ci faccio caso) e nemmeno quella dei troppi file js. Ma, diciamo, dovrebbe essere risaputo che più fogli carichi più rallenti il caricamento complessivo. Certo, poi dipende tutto dall'hosting, però per quanto mi riguarda bisognerebbe orientarsi automaticamente allo sviluppo secondo l'ottimizzazione di risorse.
CITAZIONE (raxell @ 13/10/2015, 14:08)
E' nascosto perchè dovrebbe (il condizionale è d'obbligo con lo scempio che han fatto ) apparire solo quando non si è già in cima alla pagina. Comunque dato che l'immagine è irraggiungibile a sto punto è meglio che non funzioni.
Si, dovrebbe... ma a quanto pare non appare nemmeno quando non si è più al top. A differenza, invece, "abilitandolo" (seppur con un immagine non funzionante), il sistema funziona comunque.
CITAZIONE (raxell @ 13/10/2015, 14:08)
Mica è un'obbligo °>° Puoi usare anche wrapper o qualsiasi altro nome significativo. In quel caso corpo_pagina ha abbastanza senso come nome. Le questioni sulla nomenclatura sono soggettive, non ci sono regole ferree. L'importante è usare nomi significativi (non è questo il caso), le questioni stilistiche (separare le parole con - invece del _, e simili) sono secondarie.
Si lo so, infatti avevo qualche dubbio sulla scrittura... però non posso non dire che il web designer abbia avuto fantasia per i nomi delle classi. Rimane comunque che senza dubbio è meglio scrivere dei nomi di questo tipo che usare piuttosto delle classi/id come li usa Facebook (a capirli...).
CITAZIONE
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?
CITAZIONE (raxell @ 13/10/2015, 14:08)
Non la condannerei come scelta. HTML5 è senz'altro più orientato al futuro, ma XHTML è ancora un buono standard su cui basarsi. Il problema principale come hai detto è che l'hanno usato da cani.
No certo, ma per quanto mi riguarda ha senso aggiornarsi al XHTML 2.0 (per quando in questo caso il suo uso non sia stato propriamente necessario). Forse non mi sono fatto capire, ma io non è che sto "condannando" la scelta dell'XHTML, bensì la scelta della sua vecchia versione, in quanto meno ottimizzata per le tecnologie attuali.
CITAZIONE (Næt' @ 13/10/2015, 14:33)
Appena ho visto il titolo del post, ho detto:"devo subito leggerlo". Due minuti dopo sono rimasto di merda, cosa cavolo ho visto, io non l'ho definirei web designer assolutamente, ma persona che si crede essa e che non l'ho è (almeno il design per fortuna è stato realizzato bene)!
Poteva usare uno/più span con un display:inline-block che occupa 4px (se ricordo bene) e non uttilizare un  !
Non ho provato, ma penso di si, avrebbe avuto senso usare un inline-block.
Al di là del doppio post, il terzo screen è una cosa tutta tua, nel senso che io non la noto, mentre il secondo non capisco a cosa ti riferisci.
CITAZIONE (#Mattex @ 13/10/2015, 15:11)
O.O Ok, ora posso uccidermi
Benvenuto nel gruppo.
CITAZIONE (LordAndrew @ 13/10/2015, 17:42)
Simpatica rubrica, mi piace. Non mi sono trovato d'accordo sui nomi dati alle classi : non devono avere un nome di default, quindi è giusto che utilizzi nomi che magari lo aiutano nel compilare il foglio di stile. Ho trovato il tuo commento agli errori veramente divertente ed interessante, i miei complimenti.
Ti ringrazio. Come ho già scritto sopra in risposta a raxell, avevo qualche dubbio sulla scrittura di un paragrafo relativo ai nomi delle classi.
Al di là del doppio post, il terzo screen è una cosa tutta tua, nel senso che io non la noto, mentre il secondo non capisco a cosa ti riferisci.
Per il terzo cambiando risoluzione si risolve, quindi è una cosa mia. Per il secondo, se noti, ha uttilizato un margin-top per centrare verticalmente la scritta e il tag center per centrare orizzontalmente la scritta è quindi può dare problemi, giusto? (poteva usare un line-height:40px e un text-align:center o margin:0px auto)
Per il terzo cambiando risoluzione si risolve, quindi è una cosa mia. Per il secondo, se noti, ha uttilizato un margin-top per centrare verticalmente la scritta e il tag center per centrare orizzontalmente la scritta è quindi può dare problemi, giusto? (poteva usare un line-height:40px e un text-align:center o margin:0px auto)
Si, dovrebbe... ma a quanto pare non appare nemmeno quando non si è più al top. A differenza, invece, "abilitandolo" (seppur con un immagine non funzionante), il sistema funziona comunque.
In teoria se da errore nel js non dovrebbe funzionare, perchè lo script quando scrolli dovrebbe cambiare il display da none a block o qualcosa di simile. All'inizio è impostato a display: none perchè sei in cima alla pagina, ma quando scrolli dovrebbe cambiare (cosa che non succede per l'errore nel js).
CITAZIONE
[...] Rimane comunque che senza dubbio è meglio scrivere dei nomi di questo tipo che usare piuttosto delle classi/id come li usa Facebook (a capirli...).
Per la complessità che ha Facebook probabilmente usa dei sistemi automatici per generare gran parte del codice, a quei livelli è improponibile tenere sotto controllo tutto il markup.
In teoria se da errore nel js non dovrebbe funzionare, perchè lo script quando scrolli dovrebbe cambiare il display da none a block o qualcosa di simile. All'inizio è impostato a display: none perchè sei in cima alla pagina, ma quando scrolli dovrebbe cambiare (cosa che non succede per l'errore nel js).
Si beh, sono due funzioni separate (ma collegate diciamo).
CITAZIONE (raxell @ 13/10/2015, 22:11)
Per la complessità che ha Facebook probabilmente usa dei sistemi automatici per generare gran parte del codice, a quei livelli è improponibile tenere sotto controllo tutto il markup.
Sicurissimo, per farti un esempio semplice sono come gli id dei post su forumfree: non sono scritti a mano ma inseriti in automatico in base ai dati del DB. Per facebook il discorso è lo stesso ma in scala molto più ampia.
) apparire solo quando non si è già in cima alla pagina.
Contacts
