In questi giorni di raccoglimento a casa, una delle occupazioni più interessanti è stata dedicarmi al sito della mia associazione di kung fu. Pare infatti che io sia il webmaster di tale associazione. Così mi sono dato da fare, visto che io un sito partenzo da zero, dal blocco note con foglio bianco, non l’avevo mai fatto. E mi sono dovuto confrontare con i due mostri sacri di questo periodo: xhtml e css. Questa esperienza mi ha portato via un bel po’ di ore (e molti smadonnamenti) ma alla fine il prodotto finito è più che soddisfacente e rispetta tutti i requisiti che avevo in partenza.
Se vi va, vi racconto come ho fatto. Ma vi avverto che, per quanto cercherò di renderlo accessibile a tutti, è un post piuttosto tecnico.
Dunque, bisogna premettere due cose.
La prima è che il sito vecchio è stato messo giù per qualche motivo che è tuttora ignoto: infatti, se andate su www.sevenstarmantis.org per ora vi beccate un avviso di “pagina in manutenzione”. Secondo poi, e diretta conseguenza di questo disservizio, l’obiettivo primario era rimettere su al più presto, in vista delle nuove iscrizioni di settembre, una paginetta che contenesse le informazioni basilari, come i contatti telefonici e gli indirizzi delle palestre.
La complicazione era che il vecchio sito, realizzato da un amico e fratello di allenamento, era fatto in flash. Ora, chi è dentro questo mondo, sa che è sempre un po’ delicato, un sito in flash. Quindi la mia idea è stata quella di prendere una paginetta html piena di tabelle incomprensibili e “tradurla” in xhtml e css, cercando di renderla più uguale possibile. Pare ci sono riuscito e, se me lo concedete, a me sembra anche meglio. Ed è stata una palestra perfetta per capire come funziona la faccenda.
Ho lavorato sul Mac, utilizzando due programmi free con cui mi sono trovato molto bene. Per la parte xhtml ho usato Taco, che è molto semplice e pulito, quasi essenziale, ma fa il suo lavoro egregiamente. Per la parte css, invece, dopo varie e lunghe ricerche in cui ho dovuto scartare tutti quei freeware con periodo trial limitato ai 30 giorni (odiosi, per forza che poi uno li cracka!), ho trovato cssEdit, che è elegantissimo come tutte le applicazioni Mac ed è limitato solo nella lunghezza dei file. Duemila righe e spiccioli, se ricordo bene; per quello che dovevo farci io, anche troppe. Ed oltre ad essere bello esteticamente, è anche estremamente funzionale! E’ un piacere lavorarci: la parte del codice si avvale di vari menu espandibili sulla destra, divisi per ambito, che rendono semplicissima la stesura del codice stesso. Bisogna però fare attenzione alle dichiarazioni non supportate: per esempio avevo trovato una buona soluzione per due blocchi utilizzando “display: inline-block”, per poi scoprire che era supportato solo da Safari sul Mac (che quindi a me lo visualizzava bene in fase di editing) e che quindi, aperta la pagina su Firefox, ottenevo un disastro.
Ma il vero punto di forza del programmino è la finestra di preview: questa mi è piaciuta davvero. Perchè non mostra solo un’anteprima, ma offre anche uno strumento chiamato “x-ray view” che permette di analizzare il layout della pagina. Ed è ottimo, direi indispensabile, per fare il “debug” della stessa, ottimizzarla e capire dove si sbaglia. E’ molto simile al plugin per Firefox Web Developer, in fin dei conti, ma con il pregio di essere integrato nel programma stesso.
Insomma, il risultato finale è -per ora- visibile a questo indirizzo. Ma c’è solo l’homepage.
I più smaliziati o i più attenti al design noteranno che ci sono ancora dei dettagli da sistemare. Però si visualizza bene in tutti i browser, tranne ovviamente IE7, che espande il bordo del body a tutta la finestra. Forse cercherò di capire perchè.
Ed è stato soddisfacente anche il test di validazione del W3C: solo due errori sul css, e pochi, e credo facilmente correggibili, errori per quanto riguarda l’xhtml.
Insomma, io sono molto soddisfatto e orgoglioso del mio piccolo ^_^
EDIT:
Il sito dopo mille peripezie, finalmente, è online al suo posto: www.sevenstarmantis.org
uhm considera che per i css di IE7 devi fare un corso apposito praticamente…sti maledetti hanno fatto un casino! IE6 andava tanto bene per la media di prodotti microsoft…per farlo come firefocz hanno fatto un macello!! mah
Annuncio al mondo intero che il sito http://www.sevenstarmantis.org è finalmente attivo!!