Alla ricerca…del codice perfetto

Con questo post volevo parlare del problema che affligge la maggior parte degli sviluppatori web:  sviluppare siti cross-browser, ovvero rendere il nostro sito web compatibile con qualsiasi tipo di browser in circolazione.

Il problema della compatibilità con i browser, infatti, riguarda tutti i siti Internet e nasce quando una pagina web o qualsiasi altra risorsa condivisa in rete viene sviluppata senza tener conto delle funzionalità presenti nei diversi browser, nelle diverse versioni degli stessi e nelle diverse piattaforme che li supportano.

Bisogna cercare di  adottare determinati accorgimenti in termini di linguaggi di markup (XML, XHTML, HTML ecc), fogli di stile (CSS, XSLT ecc), scripting lato client (javascript/ajax o altri) o eventuali altri formati di uso frequente sul web (Flash, Java), al fine di permettere all’utente che naviga di visualizzare e fruire i contenuti senza differenze dipendenti dal browser che utilizza.

Io la vedo come una ricerca, una ricerca del codice perfetto; a volte si rischia così di trasformarla in un’odissea, in una ricerca estenuante di trucchi e soluzioni alla miriade di bug che affliggono i browser presenti nel mercato.

Ma come fare a testare il nostro sito web su tutti i browser esistenti nel mercato?
Bè , esistono svariati programmi che ti permettono di testare il sito web, ma quello che mi ha colpito di più girando in rete è stato Browsershots.

Browsershot è un servizio web, gratuito, che permette di visualizzare un sito in 50 web browser diversi, di tutti e 4 i maggiori sistemi operativi (Linux, Windows, Mac OS X, BSD).
Basta inserire l’url del nostro sito web nell’apposito spazio , selezionare i browser con cui fare il controllo, addirittura puoi decidere di selezionare le dimensioni dello schermo, la profondità di colore, selezionare se sono presenti script  java e se è presente un animazione flash.

Avremo davanti a noi una serie di thumbnails: una per ogni browser scelto.
Se clicchiamo la thumbnail, ingrandiremo lo screenshot e otterremo informazioni  sul computer, sul browser, e sul rendering in generale. Cliccando invece sullo screenshot avremo l’immagine a grandezza massima.

Peccato che il confronto avvenga solo con degli screeshot e non si possa navigare all’interno dei vari  browser, ma chissà che in un futuro non venga sviluppato un modo semplice e veloce per testare i nostri siti web interagendo con i vari browser.

Quanto dovremmo ancora soffrire per raggiungere il codice perfetto? :)
Bene

Commenti (7)

Andrea Beggimarzo 19, 2009

Sarebbe auspicabile non perderci troppo la testa in questi particolari. Un sito web non è una brochure stampata in tipografia, non c’è scritto da nessuna parte che si deve vedere assolutamente uguale con due browser diversi. Secondo me alcune differenze ci possono essere e dovrebbe essere fatto capire al cliente.
Questo a maggior ragione in considerazione del fatto che la fruizione di un sito ormai avviene con così tanti dispositivi diversi (e penso a cellulari, palmari, televisioni, tablet ecc ecc) che occuparsi compulsivamente del suo aspetto mi sembra tempo perso.
Secondo me l’importante è che sia correttamente validato XHTML, il resto viene da sé.

Francesco Castagnassomarzo 19, 2009

Utile come sito!!
Secondo me però. anzichè dover essere noi a “sbatterci” così tanto per riuscire a fare un sito che graficamente sia uguale per tutti i browser, dovrebbero essere i browser a seguire gli standard di interpretazione del codice html e css !!! ( Vedi internet explorer : non segue per niente gli standard! )
Purtroppo questa condizione penso non si raggiungerà mai, l’importante è che un sito non appaia totalmente diverso da un browser all’altro :P

Benemarzo 19, 2009

Penso che l’occuparsi compulsivamente dell’aspetto di un sito sia sbagliato, delle differenze ci saranno per forza sempre, il problema avviene quando ci sono gravi incongruenze tra un browser e un altro, mi è capitato molto spesso di comprare su internet utilizzando siti di grosse aziende e non riuscire a completare la transazione perchè il codice utilizzato era obsoleto per il browser che stavo utilizzando; sinceramente non so fino a che punto puoi far capire questa cosa al cliente…
Ci sarà sempre quel cliente che non vorrà mai aggiornare il suo IE6 o quello che utilizza solo Machintosh.
Quindi alla fine penso che questa ricerca, purchè non diventi una odissea, faccia parte del lavoro di uno sviluppatore web, anche perdendoci un po’ di tempo; è una grossa soddisfazione riuscire a creare un sito in modo tale che si visualizzi correttamente sulla maggior parte di tutti i browser…

Andrea Beggimarzo 20, 2009

Bene, quelo dell’e-commerce è il problema inverso: se l’azienda non crea codice che funzioni (bada bene, funzioni, non visualizzi identico) su tutti i browser e vuol fare e-commerce, perde soldi. E’ quindi nel suo interesse che il codice supporti il maggior numero di browser.
La strada è l’adesione agli standard. Se il codice è standard, i browser seguiranno.

Francesco Castagnassomarzo 20, 2009

E’ anche vero che, se si tratta di dover realizzare un sito il cui scopo sia solo quello di presentare una azienda, l’aspetto grafico deve per forza essere il più simile possibile tra le varie modalità di visualizzazione dei browser!
Ormai un sito può essere visto come il “biglietto da visita virtuale” di una azienda, e figuriamoci che ho visto siti di SOFTWARE HOUSE che si vedono bene solo con explorer!
Non dimostra certo professionalità!

Vincenzo T.marzo 21, 2009

Chi scrive codice è sempre fra due fuochi:
Da una parte la ricerca della soluzione “perfetta”, che in realtà non si limita solo alla cross-browser visibilità, è’ una spinta indispensabile per migliorare e creare nuove idee e dall’altra una dose di pragmatismo che nel mondo reale fatto di budget, risorse, costi e ricavi, non può essere trascurato.
La sfida non è solo accademica, là dove Benedetto la definisce una ricerca, non è lontano dalla realtà.

[...] avevo pubblicato un post riguardo BrowserShots che genera screenshot di una pagina web in più di 80 versioni dei più diffusi Browser su Windows, [...]

Scrivi un commento

Il tuo commento