Post contrassegnati da tag 'css'

Web design (struttura e presentazione): dalle tabelle ai css alla semantica

Nel 1997 David Siegel accoppiò un elemento HTML <table> a un’immagine GIF spaziatrice e diede vita al primo modo per dare un layout visuale alle pagine web, che permetteva di riprodurre i layout tradizionali della stampa anche su Internet.

Quando i Web designer iniziarono ad utilizzare le tabelle in questo modo (e non solo come voleva l’inventore di <table>, Dave Raggett, per presentare dati tabulari) Siegel scrisse “Il Web è rovinato e l’ho rovinato io…. Ho commesso l’orribile errore di mischiare la struttura con la presentazione“.

Ok, lo confesso, uno di quei Web designer ero proprio io!!! ;)
Ho iniziato a sviluppare siti Internet alla fine degli anni 90, quando ero ancora un ragazzino di 19 anni, e ricordo che i colleghi (eravamo in 2 in un’azienda di 200 persone a sperimentare il web!) guardavano con ammirazione e stupore ogni layout grafico che riuscivo a tradurre in html!

Io non mi vergono a dire che sviluppavo layout con le tabelle, anzi lo scrivo proprio con orgoglio, in un’epoca in cui i pochi siti internet esistenti erano tutti con lo sfondo grigio, times new roman come font, link blu, link visitati viola, orribili gif animate come barre divisorie (la più famosa e diffusa era il cane che corre!!) i miei layout grafici innovativi e raffinati a tabelle mi avevano fatto guadagnare la stima dei soci di una delle aziende informatiche più grandi d’Italia ;)
Ed essere progressivamente diventato particolarmente bravo a farlo mi ha permesso di diventare libero professionista prima, e successivamente di fondare assieme a Francesco Net Sinergy, la mia azienda.

Il passaggio ai CSS (cascading style sheet) che ho perfezionato personalmente e aziendalmente già da alcuni anni (quando la maggior parte dei browser ha iniziato a fornire un supporto decente) non è stato indolore, per tutti quelli come me abituati a scrivere il codice html (comprensivo della presentazione grafica) cambiare totalmente modo di pensare e sviluppare utilizzando i <div>, i livelli, il float e i fogli di stile è stato uno stravolgimento che ha richiesto parecchia pazienza ed esercizio!

Devo dire che però ne è valsa la pena, l’utilizzo combinato di XHTML e CSS rende possibile creare layout grafici molto più di impatto e complessi, pagine con codice molto più pulito e snello che occupano meno banda e meno risorse del server, permette di ottimizzare la visualizzazione su device differenti (il pc o un dispositivo mobile per esempio), permette di creare layout per la stampa ecc.ecc., anche se confesso che per i template grafici delle newsletter, per essere sicuri che vengano visualizzati correttamente sia dai client di posta che dai vari webmail, li sviluppiamo ancora con le tabelle e gli stili inglobati nel codice html! ;)

Insomma, sicuramente i siti che sviluppiamo oggi sono molto meglio di quelli di 5/10 anni fa, però credo che sia esagerato da parte di tanti Web designer e sviluppatori rinnegare il passato. Utilizzare le tabelle per creare layout simili a quelli della carta stampata è stato uno dei primi mashup del web, e credo sia stato importantissimo perchè penso che se i siti fossero rimasti tutti uguali e grigi le aziende non avrebbero iniziato ad investire sulla loro presenza in rete!!!
Io penso che sia stato proprio geniale e che David Siegel debba esserne orgoglioso (magari lo è e tutte le sue frasi frustate fanno solo parte del personaggio che si è costruito!) e noi tutti dobbiamo essergliene grati!

Il futuro del web, il web 3.0 a detta dei guru sarà il web semantico. Questo porterà ad un utilizzo ancora più spinto dell’HTML e dell’XML, per attribuire ai vari contenuti delle pagine web un significato semantico, e favorire il reperimento di informazioni nel “rumore” prodotto dal costante aumento dei contenuti disponibili nelle reti. Personalmente sono molto affascinato da questo tema e spero che nel giro di breve tempo vengano definiti degli standard che possano essere adottati da tutti gli sviluppatori.

Internet è un “ambiente” in continua evoluzione; il costante aumento di disponibilità di banda permette la gestione di nuovi tipi di contenuti (pensiamo alla recente esplosione dei video!) e di applicazioni sempre più evolute e interattive. Questo fa si che l’utilizzatore (privato o business che sia) sia coinvolto tramite esperienze sempre più ricche e che dedichi sempre maggior tempo all’utilizzo della rete, preferendolo progressivamente ad altri media come la televisione!
Gli addetti ai lavori come me, devono quindi essere sempre pronti a mettere completamente in discussione le loro competenze e professionalità acquisite nel corso degli anni per evolversi assieme alla rete (oppure è meglio cambiare lavoro!) senza però dimenticare quello che è stato fatto in precedenza perchè comunque fa parte della storia di Internet e nel suo piccolo ha contribuito a migliorarlo.

Facciamo dimagrire i siti web con la dieta a base di css!

dieta siti web con css dimagrimento riduzione banda

Chiunque si stia occupando della realizzazione del nuovo sito Internet della propria azienda, dovrebbe sentirsi in diritto, oltre che moralmente obbligato a richiedere l’utilizzo delle tecnologie XHTML e CSS, che altro non sono che due sigle per indicare che il contenuto (descritto tramite xhmtl o html) e la sua rappresentazione grafica (descritta nel css) sono indipendenti uno dall’altro.

Quali sono i vantaggi di questa soluzione?

- il file css, quindi che descrive la grafica del sito, viene scaricato in occasione del primo collegamento ad una pagina del sito, successivamente non viene più scaricato mentre vengono trasmesse dal web server solo le pagine xhtml e i file in esse referenziate (immagini, video, flash ecc.ecc.). Inoltre se la pagina html usa i div al posto delle tabelle, consente un ulteriore risparmio di kylobyte e quindi di banda.

- è possibile creare file css per media differenti; uno per la visualizzazione nel browser, uno ottimizzato per la stampa, uno per il telefonino o l’Iphone ecc.ecc.

- è possibile creare file css per gestire browser e versioni particolari degli stessi che non sono perfettamente compatibili con il box model e gli standard del w3c, assicurando comunque una corretta visualizzazione sul 99% dei browser (es. internet explorer 6.0)

- è possobile, utilizzando correttamente la sintassi dei css e il javascript, fornire all’utente la possibilità di ingrandire la dimensione dei caratteri e dei testi nella pagina (molto utile per le persone anziane o gli ipovedenti)

- aggiornando un’unico file è possibile modificare la grafica di tutte le pagine del sito con evidente risparmio di tempo ed risparmio economico.

- l’utilizzo corretto dei tag html, dei div e dei css porta alla creazione di pagine che dal punto di vista del codice sono meglio predisposte per una corretta indicizzazione e di conseguenza posizionamento nei motori di ricerca. Se parliamo di fattore in-page che influenzano il posizionamento nei mdr però la sintassi corretta non basta, necessario lavorare sul contenuto ma questi temi li approfondirò meglio in un altro post.

Ma facciamo un esempio pratico:

Mediamente un file css pesa tra i 10 e i 30kb, significa che nella visualizzazione di 10 pagine il server risparmia un traffico di banda di 100-300kb.
Per un sito trafficato che mediamente serve ogni giorno 20.000 pagine, significa risparmiare in banda dai 200 ai 500 Megabyte… se moltiplichiamo per 365 sono dai 70 ai 160 Gigabyte di banda risparmiati in un anno! E vi assicuro che dal punto di vista economico sono parecchi soldi!

E se siamo un’azienda con un sito poco trafficato con qualche decina di visitatori al giorno? Forse non avremo un vantaggio economico in termini di risparmio in banda del web server, ma sicuramente il nostro visitatore/cliente riuscirà a caricare le nostre pagine più velocemente, avrà un’esperienza di navigazione migliore e molto probabilmente rimarrà pià tempo sul sito visitando più pagine (ovvero ci saranno più probabilità di effettuare delle conversioni)

Si parla tanto di temi come l’ecologia, il risparmio energetico, penso che anche su Internet sia importante diffondere la cultura del risparmio di banda, che è comunque una risorsa finita (anche se viene costantemente potenziata tramite l’adozione di nuove tecnologie).
Meno byte inutili che circolano in rete significano connessioni più veloci per tutti.


RSS del blog conversiamo - Pensieri web2.0 di Alessandro Trenti e dei suoi amici

Se ti piace il mio blog puoi inserirlo nei tuoi bookmark o in siti di tagging come del.icio.us, ma poi devi ricordarti di controllare se ci sono degli aggiornamenti... se utilizzi invece gli RSS tramite un aggregatore sarai sempre informato suoi nuovi articoli che scrivo senza dover controllare sempre il mio blog.

Archivi