Come avevo già annunciato di voler fare, ho aggiornato la grafica del sito facendo qualche cambiamento ed alcuni miglioramenti. Niente rivoluzioni, solo qualche piccolo ritocco che dovrebbe migliorare l’usabilità e l’aspetto di questo sito.
Spero di essere riuscito a raggiungere l’obiettivo, tra i vari cambiamenti vorrei segnalare l’utilizzo di una semplice tecnica spiegata da Christian Montoya per visualizzare le date dei post. Il codice è ovviamente corretto, per un’effetto molto carino che richiede ben poche righe di CSS. Per i dettagli vi rimando al suo articolo.
In aggiunta a questo, segnalo uno strano comportamento di Internet Explorer 7 che mi sono trovato davanti in fase di debug. A voi uno screen (cliccate se volete vedere la versione a tutto schermo):
Questo è quello che mi appariva davanti, non vi sto a descrivere nemmeno il comportamento di Explorer 6 che era ancora peggiore. Ovviamente su Firefox tutto appariva perfettamente, così come state vedendo il sito in questo momento.
Dopo diverso tempo speso a cercare di capire cosa causasse il problema, mi sono accorto che c’era un tag non chiuso nel codice della pagina. Pensavo di aver trovato un bug di IE7, ma si trattava solo di scarsa capacità di adattamento agli errori.
Magari se avessi provato la validazione del codice me ne sarei accorto prima, non infieriamo troppo sul nuovo browser di casa Microsoft!
Si è appena concluso il primo concorso organizzato da HostingTalk.it, e sono fiero di annunciare che TomStardust.com si è classificato al primo posto come miglior sito HT 2006!
Dopo ben 3 mesi, tutti i 91 partecipanti sono stati valutati, e con mia grande sorpresa è arrivato il riconoscimento.
I criteri di valutazione erano vari, e riguardavano:
Grafica
Codice
Contenuti ed organizzazione
Posizionamento sui motori di ricerca
Accessibilità
Usabilità
Rispetto degli standard W3C
Se siete interessati, potete trovare maggiori informazioni a questo indrizzo, mentre il giudizio completo su TomStardust.com è in questa pagina, che per me è stata molto utile, soprattutto per capire dove posso ancora migliorare.
Finisco qui le autocelebrazioni, confermando quanto anticipato nei giorni scorsi: a breve ci sarà qualche piccolo cambiamento grafico.
Il 1° Novembre ci saranno due eventi in contemporanea: il CSS Reboot che molti ricorderanno nelle sue passate edizioni, e lo Standards Reboot.
In breve, raccoglieranno i siti di tutti coloro che apporteranno dei cambiamenti alla grafica entro questa data. La cosa inizia sicuramente a perdere buona parte del suo fascino originario, ma esserci non fa mai male, se si ha del tempo da spendere per l’iniziativa.
Questo sito salvo imprevisti (= mancanza di tempo) parteciperà, non prevedo uno stravolgimento del look, ma è l’occasione buona per migliorare l’aspetto di alcuni elementi ed apportare diverse novità.
Aggiornamento: sul blog di Christian Montoya c’è un interessante articolo a riguardo, con la sua opinione su questi eventi che stanno diventando sempre più simili ai soliti siti showcase.
Oltre a questo, vengo a sapere che CSS Reboot ha cambiato proprietario, ed a quanto pare il sito attuale presenta diversi problemi soprattutto lato server. Vedremo cosa succederà il 1° Novembre, chissà se assisteremo ad un bel collasso del sito.
E’ stato finalmente reso disponibile per il download Internet Explorer 7, l’ultima versione del browser di casa Microsoft. Cambierà qualcosa nel prossimo futuro per gli utenti del web e per gli sviluppatori?
Sicuramente chi avrà i maggiori benefici sarà chi utilizzava ancora IE6, che si troverà con una navigazione a schede e maggiori garanzie sulla sicurezza. All’atto pratico però, il nuovo browser Microsoft non offre niente di nuovo rispetto alla concorrenza, visto che le attuali versioni di Firefox, Opera, Safari, ecc.. consentono già di fare le stesse cose allo stesso modo, se non meglio.
E per gli sviluppatori? Sicuramente ci sarà un nuovo browser da controllare per questioni di compatibilità, ma a parte questo non cambierà molto nel breve periodo. Ci saranno ancora numerosi utenti con Explorer 6, e sarà d’obbligo continuare a supportarlo.
Forse cambierà qualcosa per chi ancora oggi continua a supportare IE5.5 (me compreso), ma sono ancora dubbioso se fare questo passo.. se volete, dite la vostra a riguardo.
IE7 è disponibile per il download (solo in inglese, per ora) da questa pagina. Ricordate che è compatibile solo con Windows XP e Windows Server 2003.
Aggiornamento: a quanto pare stanno iniziando a venire fuori i primi bug per Internet Explorer 7. In questo articolo ne viene descritto uno ereditato da IE6: del testo che misteriosamente viene duplicato. Potete vedere anche la pagina di esempio, ovviamente aprendola con IE.
Proprio oggi pomeriggio ho avuto una chiacchierata con un amico che si trova ad affrontare un problema alquanto spinoso: il sito che gestisce (non farò il nome) ha molte visite al mese, anche grazie ad un forum con migliaia di iscritti, ed il servizio di hosting attuale non è più sufficiente.
La prima domanda che mi ha rivolto è stata: “conosci un buon hosting non troppo caro?” Il problema sembra chiaro.. il traffico generato dal sito è alto, quindi le richieste di banda sono elevate: si parla di trovare una soluzione da almeno 200Gb mensili.
A queste condizioni qualsiasi soluzione sarà tutto tranne che economica, ma non appena ho visitato il sito ho avuto l’illuminazione: non sarà colpa anche del codice delle pagine?
Un’occhiata veloce mi è sufficiente: layout a tabelle, immagini non ottimizzate, l’homepage da sola pesa circa 250kb, ma ci sono pagine interne che arrivano anche a più di 600kb. In una situazione del genere è facile spiegare il perchè di tanti problemi di traffico mensile: con un buon numero di visite si raggiungono in fretta quote spaventose.
La soluzione migliore per risolvere buona parte dei problemi è una sola: una nuova versione del sito, senza layout a tabelle, con xhtml e css, che segua gli standard del W3C. Probabilmente non ci sarebbe più bisogno nemmeno del cambio di hosting, del resto il caso di ESPN.com insegna! Si risparmierebbero molti kb, che moltiplicati per ogni visitatore diventerebbero fondamentali.
Queste indicazioni possono essere utili a chiunque si trovi ad affrontare un problema del genere: se avete problemi di banda mensile con il vostro servizio di hosting, prima di cambiare domandatevi se il codice e le immagini del sito sono ottimizzati, potreste avere delle sorprese.
Molti appassionati di web design conosceranno Stylegala, uno dei più famosi siti showcase. I siti recensiti per me sono sempre stati un esempio da seguire, e l’essere presente nella galleria è sempre stato sinonimo di grande qualità.
Da qualche tempo però, e più precisamente da quando Stylegala è stato messo in vendita, lo standard dei siti recensiti è calato drasticamente, e non sono solo io a dirlo. Siti con layout approssimativi, colori discutibili, per non parlare dei problemi di accessibilità ed usabilità. Vi basta dare un’occhiata alle ultime entrate per capire a cosa mi riferisco, siti che finora sono ben sotto la sufficienza anche secondo i visitatori.
Cosa ha portato ad uno scenario simile?
A mio parere i nuovi recensori non hanno le capacità tecniche di valutare in maniera corretta i siti in attesa di approvazione. Se prima Stylegala era un esempio, il top delle gallerie CSS, adesso ha perso gran parte del suo appeal.
Questo caso deve servire per il futuro, spesso scendere a compromessi per aumentare il numero di segnalazioni potrebbe rivelarsi un boomerang. Se non ci sono siti degni di nota, una galleria che si rispetti deve limitare la propria attività piuttosto che accettare tutto il possibile abbassando i propri standard.
Non scendo poi nel dettaglio dei siti showcase, perchè ancora oggi il problema più evidente è che spesso viene considerato esclusivamente l’aspetto grafico senza guardare la validità del codice o l’usabilità. Questa potrebbe però essere una scelta voluta, discutibile, ma accettabile, almeno finchè non si sarà sviluppata una maggiore sensibilità globale su questi temi.
Un recente articolo di A list apart mette ben in chiaro cosa ci si può aspettare quando si inizia ad utilizzare i CSS nello sviluppo di siti web. Non solo per cambiamenti minori, ma soprattutto per separare gli elementi presentazionali (layout, immagini di sfondo, decorazioni, tipografia..) dal codice vero e proprio.
Imparare ad utilizzare i fogli di stile richiede tempo e pazienza, ed è bene non arrivare impreparati all’appuntamento. Per questo ho trovato l’articolo molto interessante.
Per tutti coloro che hanno qualche problema con l’inglese tecnico o vogliono leggere un riassunto, ecco una traduzione (libera) che può chiarire le idee meglio di tante inutili discussioni sull’argomento CSS.
Lezione n°1: Tutto quello che sai è inutile.. o quasi
Iniziare a lavorare con i CSS comporta un rapido colpo di spugna. Duro da ammettere, ma è così. Bisogna prepararsi a fare tabula rasa e cominciare da zero per apprendere al meglio tutte le tecniche. Ovviamente restano valide tutte le conoscenze su design, programmazione, usabilità, ecc..
Lezione n°2: Niente apparirà allo stesso modo ovunque
Ovviamente il riferimento è alla renderizzazione dei vari browser. Tutt’ora è difficile raggiungere lo stesso identico risultato su Firefox, Internet Explorer, Opera, Safari.. differenze non sostanziali, ma spesso presenti.
Lezione n°3: Spesso sarà necessario scegliere il minore tra due mali
Nello sviluppo di un sito, si presenterà prima o poi la necessità di scendere a compromessi. Ci saranno siti in cui si dovrà rinunciare ad alcune funzionalità programmate in partenza, limitazioni relative all’accessibilità, e così via.
Lezione n°4: La perfezione si raggiunge non quando non c’è piu niente da aggiungere, ma quando non c’è più nulla da togliere
E’ facile convertire un sito da un layout a tabelle riempiendolo di div e tags inutili. Appesantire il codice non serve, ed è sempre meglio togliere tutti gli elementi non indispensabili in modo da avere una pagina il più semplice possibile.
Lezione n°5: Alcuni siti avranno bisogno di attenzione alla coerenza delle pagine
Se il graphic designer non si occupa di altri aspetti dello sviluppo di un sito, dovrete stare attenti che mantenga una certa coerenza in tutte le pagine. Avere troppi elementi unici per ogni pagina potrebbe portare ad una crescita delle spese, dannosa soprattutto in piccoli progetti.
Lezione n°6: Inevitabili tempi di sviluppo più lunghi
Attualmente i CSS non sono supportati alla stessa maniera da tutti i browser, e finchè non imparerete a memoria tutte le differenze, ci vorrà più tempo a testare il lavoro e verificare che sia coerente su ogni user agent. Avrete però grandi vantaggi nelle fasi successive di manutenzione ed aggiornamento.
Lezione n°7: Contenuti coerenti ed ordinati portano grandi benefici
Se siete stati attenti alla semantica del codice ed alla coerenza dei contenuti, avrete innumerevoli vantaggi: dal poter mantenere la struttura html inalterata nei futuri redesign del sito, alla navigazione da tastiera finalmente possibile.
Lezione n°8: I selettori discendenti sono un must
Il classico errore di chi è alle prime armi con i CSS è riempire il codice di div, e dare ad ogni elemento un contenitore o un id. E’ inutile, e spesso per risolvere ogni problema basta imparare a gestire i selettori discendenti. Se servono spiegazioni.. chiedetemi pure maggiori dettagli nei commenti!
Lezione n°9: Usare CSS hack a volte sarà indispensabile
Se per un progetto avrete tempi ristretti, e dovrete risolvere qualche errore di visualizzazione, la via obbligatoria sarà quella di utilizzare degli hack nei vostri fogli di stile. Non elegante, ma spesso necessario per rientrare in tempi e costi.
Lezione n°10: Risolvere dei bug potrebbe comportare altri problemi
Risolvendo un bug, è probabile che si presenti qualche nuovo problema, magari su un browser differente. Non è però una questione senza soluzione, basta saper trovare il modo giusto: per quanto riguarda soprattutto Internet Explorer, positioniseverything.net è essenziale.
Lezione n°11: Ci saranno sorprese nei layout a colonne
Con layout a 2-3 colonne, si presenteranno spesso problemi di visualizzazione. Per risolverli, in genere sarà necessario specificare sempre height e width di molti elementi, insieme alle proprietà float e clear. Questo va contro alla 4° lezione, ma non si era anche detto della necessità di trovare dei compromessi?
Lezione n°12: Le immagini di background faranno la differenza
Utilizzare immagini di sfondo tramite CSS spesso si rivelerà un’ottima soluzione per migliorare l’impatto grafico del sito. Senza considerare poi i vantaggi verso motori di ricerca e screen reader, che troveranno invece i contenuti testuali nel codice.
In conclusione
Siamo alla fine della guida: questi punti potranno essere considerati soggettivi, ma hanno tutti la loro importanza. Io stesso ne condivido più alcuni rispetto ad altri, ma tenerli sempre presenti quando ci si avvicina per la prima volta al mondo dei CSS non farà male.
Voi cosa ne pensate? Condividete tutto quello che ho scritto?
Se credete che gli standard web e le norme del W3C servano a poco, c’è una pagina che potrebbe farvi ricredere.
Roger Johansson ha pubblicato sul suo blog un articolo dove presenta una homepage di Google di aspetto assolutamente identico all’originale, realizzata con html valido e css, in alternativa a tabelle, immagini spacer gif, e tutti gli altri orrori che appartengono ormai al web del passato.
Ebbene, questa nuova versione occupa 3902 bytes, mentre l’originale è 4944 bytes. Se non avete idea di cosa questo possa significare, la versione che segue gli standard risparmia il 21,07% di banda, che è straordinario se provate ad immaginare il numero di utenti che ogni giorno passano dalla homepage di Google.
Pensare che in generale le pagine realizzate con div e css occupino più risorse è quindi un falso mito, senza contare tutti i vantaggi di avere un codice ben strutturato e separato dagli aspetti presentazionali.
Tanto per allinearmi con le mode del web 2.0 ed in particolare di questo 2006, ho deciso di cambiare la grafica del titolo e di qualche altro elemento minore (come le intestazioni delle pagine).
Adesso sì che posso essere felice, mi è bastato un semplice riflesso e qualche sfumatura sull’immagine: ci vuole poco per far contento un web designer di questi tempi…
Mi raccomando, aspetto pareri!
Se invece vi state chiedendo quali siano le tendenze di cui sto parlando, nessun problema, anzi significa che siete ancora sani mentalmente. Se proprio volete farvi contagiare, forse questo articolo vi chiarirà le idee: 8 Web Design Clichés of 2006.
Il formato PNG per le immagini è sempre più diffuso sul web da quando è stato creato nel 1995, e con l’utilizzo delle trasparenze consente di ottenere ottimi risultati.
E’ infatti possibile sovrapporre immagini trasparenti ad altri elementi per arrivare ad interessanti combinazioni irraggiungibili con il formato GIF, se non fosse per i soliti problemi di compatibilità con Internet Explorer.
Al contrario dei vari Firefox, Opera, ecc.., il browser di casa Microsoft non supporta le trasparenze dei PNG mostrando un improbabile sfondo grigio.
La soluzione in attesa di IE7 consiste in un hack CSS che permette di aggirare il problema utilizzando un particolare filtro per IE (dalla versione 5.5 in poi).
Potete vedere subito l’esempio che ho realizzato; per i vostri test tutto quello che dovrete fare è usare il seguente codice CSS:
#overlay{
background: url(opaco70.png);
}
* html #overlay { /* Regole per IE (dalla 5.5 in poi) */
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="opaco70.png" ,sizingMethod="scale");
}
Ovviamente la vostra immagine PNG andrà a sostituire opaco70.png dell’esempio, così come il nome dell’elemento a cui applicare la trasparenza.
I problemi di questa tecnica? Eccoli:
Non è supportata da Internet Explorer 5 ed inferiori, quindi se il vostro sito è studiato per funzionare anche con questo browser, meglio evitare di utilizzarla
L’elemento a cui applicate la trasparenza dovrà avere width e height impostate, o in alternativa position: absolute (decisamente restrittivo, lo so)
L’utilizzo di CSS hack deprecati e non standard
Traete le vostre conclusioni, la cosa potrebbe tornare sicuramente utile aspettando l’uscita ufficiale di IE7, ma sono da valutare bene i pro ed i contro.
E’ stato finalmente reso disponibile per il download Internet Explorer 7, l’ultima versione del browser di casa Microsoft. Cambierà qualcosa nel prossimo futuro per gli utenti del web e per gli sviluppatori?
Tanto per allinearmi con le mode del web 2.0 ed in particolare di questo 2006, ho deciso di cambiare la grafica del titolo e di qualche altro elemento minore (come le intestazioni delle pagine).