Come Riordinare Un CSS Parecchio Disordinato

Pubblicato il 28-02-2006 da Sergio | Nessun Commento

Bentornato nel Mio blog. Se trovi queste pagine interessanti abbonati gratuitamente tramite RSS feed o tramite Email!

Comincio oggi una serie di piccoli tutorial tecnici basati sulla mia esperienza professionale: spero che possano esserti di qualche aiuto.

Ultimamente, lavorando ad un progetto web di grandi dimensioni giunto oramai alla fase di refactoring mi sono trovato a dover riordinare il foglio di stile.

Per mia convinzione personale preferisco avere un unico foglio di stile per un intero sito internet: questo in teoria dovrebbe rendere più facile gestire l’interfaccia grafica (soprattutto i colori e stili del testo) e dovrebbe contribuire non poco a mantenere una uniformità in tutto il sito.

Dato che il progetto è in sviluppo ormai da qualche anno, e soprattutto dato che su questo CSS ci hanno lavorato più persone con diversi gradi di conoscenza, diversi tool di sviluppo e diverse filosofie di lavoro, il risultato come prevedibile è stato un inestricabile groviglio di quasi 800 righe di codice.

A questo va sommato il fatto che data la necessità di raggiungere determinati step di sviluppo in tempi stabiliti sono state spesso fatte modifiche al volo al foglio di stile in modo da modificare un determinato aspetto dell’interfaccia giusto per la determinata release o demo tecnica.

Il foglio di stile quindi risulta assolutamente illeggibile e disordinato.

Dato che una delle caratteristiche del progetto è quella di essere configurabile in diverse distribuzioni e di avere una interfaccia grafica personalizzabile tramite appunto il css, nella “schedule” del progetto c’era da parecchio tempo la voce “Ordinare il CSS”.

Una operazione del genere sinceramente è qualcosa che non auguro neanche al mio peggior nemico: infatti richiede metodo, pazienza, attenzione ed inoltre risulta incredibilmente noiosa.

Se malauguratamente ti dovessi mai trovare in una situazione del genere ecco la mia procedura in 10 passi per uscirne vivo:

1) Riscrivi i nomi dei selettori nel modo più semplice possibile: ad esempio il selettore

body#main table.tabellaprincipale thead tr td

potrebbe tranquillamente essere semplificato in questo modo

#main .tabellaprincipale thead td

2) Prendi ogni blocco del foglio di stile ed espandilo in questo modo

.titoloselect{
font-size: 8pt;
font-style:normal;
font-weight:bold;
font-variant:normal;
text-transform: none;
color: #003366;
text-decoration: none;}

Puoi vedere che in questo modo sia il selettore, sia ogni regola del blocco sono facilmente visibili. Lascia inoltre un “a capo” prima e uno dopo ogni definizione.

Il numero di righe di foglio di stile a questo punto potrebbe raggiungere cifre spaventose: ma niente paura da qui in avanti avremo molto da cancellare.

3) Fai due copie del foglio di stile chiamandone una text.css e l’altra color.css

4) Nel foglio di stile color.css cancella tutte le regole che non riguardano i colori

Il blocco di prima ad esempio verrebbe così trasformato

.titoloselect{color: #003366;}

Molto più leggibile vero?

5) Accorpa tutti i blocchi uguali

Ad esempio questi due blocchi

.titoloselect{color: #003366;}

.titologrande{color: #003366;}

diventano

.titoloselect,
.titologrande{color: #003366;}

In questo modo sarà molto più facile quando si presenterà la necessità di cambiare i colori dell’interfaccia mantenere una uniformità cambiando una unica regola.

Inoltre in questo passaggio potresti scoprire definizioni doppie, inutili o peggio contrastanti: risolvi tutti questi problemi uno alla volta (con molta pazienza e attenzione).

6) Applica i passi 4 e 5 al css text.css questa volta però eliminando le regole che non riguardano il testo

Sempre l’esempio di prima viene trasformato in questo modo

.titoloselect{
font-size: 8pt;
font-style:normal;
font-weight:bold;
font-variant:normal;
text-transform: none;
text-decoration: none;}

7) Elimina dal foglio di stile originale ogni regola riguardante testo e colore (ovvero quelle regole che ora si trovano negli altri due fogli di stile)

8) Applica il passo 5 al foglio di stile originale

9) Unisci i tre file in un unico foglio di stile mettendo prima i colori poi gli stili del testo e quindi tutto il resto.

A questo punto dovresti aver ottenuto un risultato molto più facile da leggere e da gestire quindi sei a un passo dalla vittoria:
10) Completa il lavoro inserendo commenti e rifinendo le classi in modo che tutto funzioni a meraviglia. A questo punto dovrebbe essere molto più facile ottimizzare l’interfaccia del sito e mi sembra un ottimo momento per farlo.

Spero che questa guida possa esserti servita, ma la prossima volta cerca di tenere il css ordinato fin dal primo momento (questa nota è più per me che per te) e ricorda

Il codice è poesia…

ATI in ritardo per i driver Linux

Pubblicato il 27-02-2006 da Sergio | 1 Commento

Secondo questo articolo di protesta del Pete’s Open Source Journal sembra che la serie R5 della ATI sia sul mercato da 5 mesi senza un minimo di supporto per gli utenti Linux.

Sembra inoltre che ATI sia ulteriormente in ritardo con il rilascio dei suddetti driver. Quindi stai attento se sei in procinto di fare un upgrade all’hardware della tua linux box.

Linux oramai comincia ad avere una fetta di mercato non più ignorabile: una politica del genere da parte di uno dei due colossi per quanto riguarda le schede video potrebbe dare un buon vantaggio al competitore nVidia.

Se si pensa soprattutto a chi usa queste schede per lavoro (si per lavoro:rendering video, modellazione 3d) o più semplicemente a tutti quelli che vogliono avere una game box senza essere dipendenti del mondo microsoft possiamo capire come ATI perda una grossa opportunità in un mercato in espanzione.
Fortunatamente non è un mio problema dato che tutte le mie macchine montano schede nVidia…

Blogger al Pesto

Pubblicato il 26-02-2006 da Sergio | Nessun Commento

Le Trofie al Pesto

Pranzo domenicale molto speciale ieri a mezzogiorno.

Ho potuto infatti assaporare le gustose Trofie al Pesto gentilmente offerte da quelli della San Lorenzo, con l’operazione Pesto al Blogger.

Pesto al blogger è una illuminata operazione di marketing ideata da Antonio Tombolini lanciata direttamente dal blog della azienda San Lorenzo.

San Lorenzo produce non solo le famose trofie al pesto della promozione, ma anche anche altri prodotti tipici come l’olio e il mosto che ho avuto modo di gustare l’anno scorso.

Dato che l’azienda distribuisce i propri prodotti anche attraverso internet penso che la scelta di puntare sui blogger come canale promozionale sia particolarmente azzeccata.

Infatti l’operazione ha avuto un successo superiore alle aspettative per quanto riguarda il numero blogger aderenti.

Spero che altre aziende riescano a vedere il potenziale canale promozionale nascosto nella blogosfera.

Sarebbe bello per i blogger…

Brevettato AJAX e non solo

Pubblicato il 23-02-2006 da Sergio | 1 Commento

Il sistema dei brevetti software negli stati uniti ha colpito ancora: il 14 febbraio di quest’anno mentre tutti gli innamorati erano intenti a scambiarsi regali ed efusioni è stato concesso il brevetto “Methods, systems, and processes for the design and creation of rich-media applications via the internet”.

Ecco cosa dice il riassunto del brevetto

Rich-media applications are designed and created via the Internet. A host computer system, containing processes for creating rich-media applications, is accessed from a remote user computer system via an Internet connection. User account information and rich-media component specifications are uploaded via the established Internet connection for a specific user account. Rich-media applications are created, deleted, or modified in a user account via the established Internet connection. Rich-media components are added to, modified in, or deleted from scenes of a rich-media application based on information contained in user requests. After creation, the rich-media application is viewed or saved on the host computer system, or downloaded to the user computer system via the established Internet connection. In addition, the host process monitors the available computer and network resources and determines the particular component, scene, and application versions, if multiple versions exist, that most closely match the available resources.

cioè in pratica a parte forse le pagine html statiche penso che tutto possa ricadere all’interno di questa definizione: soprattutto ricadono certamente tutte le applicazioni Web 2.0 e soprattutto quasi qualsiasi cosa creata con tecnologia AJAX.

Per approfondire ti consiglio la lettura di questo articolo di aviransplace.com dal quale per altro ho appreso la notizia.

Fortunatamente i brevetti software in europa non sono arrivati: ma penso che ora più che mai sia necessaria la mobilitazione contro i brevetti sul software.

Prima che brevettino l’aria…

11 Settembre: Punti Di Vista

Pubblicato il 23-02-2006 da Sergio | 2 Commenti

Se hai preso per buone le verità della televisione questo post è tutto per te.

Reventemento ho scoperto due documentari riguardanti l’11 settembre molto interessanti: reopen 911 e Loose Change.

Sono due documentari abbastanza sorprendenti che cercano di dimostrare la presenza di zone d’ombra nei drammatici eventi dell’11 settembre 2001. Entrambi i documentari arrivano a conclusioni alquanto azzardate teorizzando complotti oscuri e governi ombra.

Esaminiamoli nel dettaglio:

Loose Change penso sia un’opera poco più che amatoriale (ma comunque di buona qualità). Usa intensamente le risorse fornita di internet, soprattutto wikipedia e Google Earth. Arriva a conclusioni forse eccessive ed effettivamente in molti casi non ho creduto alla versione dei fatti proposta nel video. Ha un po’ il sapore di X-files e a tratti è un po’ eccessivo. In ogni caso contiene dettagli che non si trovano nell’altro video e inoltre, essendo più corto, è di più facile fruizione. I creatori di quest’opera Korey Rowe , Dylan Avery, Jason Bermas hanno rispettivamente 22, 22 e 26 anni.
Reopen 911 invece mi ha veramente stupito: contrariamente al luogo comune che vuole i paranoici teorizzatori di cospirazioni come degli antipatrioti e degli antiamericani; questo video mostra uno dei più fulgidi esempi di patriottismo americano che io abbia mai visto. Il video è prodotto e finanziato a fondo perso da Jimmy Walter e raccoglie una serie di autorevoli testimonianze che includono republicani ed ex militari collegate da un evento di commemorazione e denuncia avvenuto a new york. La qualità è decisamente superiore e i toni sono un po’ più pacati.

Loose Change può essere visto direttamente online a questo indirizzo

Reopen 911 invece è un’opera di pubblico dominio e come tale può essere scaricata gratuitamente attraverso la rete bittorrent, o addirittura tramite il sito ufficiale è possibile richiedere gratuitamente una copia del dvd con tanto di sottotitoli in Italiano.

Non è che mi abbiano convinto più di tanto ma comunque penso valga la pena di dargli un’occhiata: infatti entrambi i documentari lasciano aperte una grande serie di domande e mi hanno stuzzicato a “scavare” internet alla ricerca di altre informazioni, prove e controprove.

Non ti chiedo di credergli, ti chiedo di prenderli in cosiderazione…

Ultramundum Rilascia I Primi Programmi

Pubblicato il 22-02-2006 da Sergio | Nessun Commento

La prima volta che ho conosciuto Ultramundum è stato durante CreAzione: una serie di conferenze su Software Libero, licenze Creative Commons e altri argomenti del genere. Durante questa conferenza si è svolta una dimostrazione della tecnologia Ultrapeg alla base del progetto Ultramundum.

In pratica ci è stata mostrata una perfetta ricostruzione 3d della piazza S.Carlo di Torino, veramente dettagliata e incredibilmente fluida. Tutto questo secondo la spiegazione era finalizzato a internet: infatti tutti i modelli erano creati tramite un linguaggio di pro…

Ma corro troppo.

Andiamo con Ordine: Ultramundum è una fondazione che si prefissa come obiettivo nientemeno che “diffondere in tutto il mondo il servizio dell’Ultravisione, la televisione tridimensionale via Internet.” L’ultravisione è un sistema quadridimensionale (tre dimensioni più il tempo) per la trasmissione di contenuti orientati all’interattività: quindi Film, mappe, videogiochi a tre dimensioni.

L’idea di fondo sarebbe ricreare l’universo in 4 dimensioni ovvero io posso essere in una città e spostarmi avanti e indietro nel tempo e vedendo le modifiche: pensando ad un ipotetico modello della città di Roma potremo vedere i suoi mutamenti nei secoli, dai tempi dell’impero romano fino ai giorni nostri.

Dopo la presentazione e la chiaccherata con il reponsabile di questo progetto ho lungamente aspettato che la fondazione rilasciasse qualche tool o qualche demo pubblica.

Finalmente in occasione delle olimpiadi invernali di Torino sono stati rilasciari una mappa 3d della città (che non iclude per quanto ho potuto vedere la piazza fotorealistica della demo) e qualche tool e manuale.

Il software attualmente è esclusivamente per windows e per quanto posso vedere non è ancora completamente funzionante (tende ad andare in crash spesso sul mio computer), ma comunque è una ottima dimostrazione delle potenzialità della piattaforma.

La piattaforma è completamente sviluppata in Italia e si basa su un proprio motore di rendering che sembra avere delle caratteristiche eccezionali ma che, al contempo, non sembra sfruttare a fondo tutte le risorse fornite dalle moderne schede accelleratrici.

Parliamo un po’ di Businnes Model: Ultramundum è una fondazione senza scopo di lucro e per quanto la riguarda tende a rilasciare tutti i sorgenti del proprio software tranne quelli del motore di rendering che appartengono ad uno sviluppatore esterno alla fondazione.

Per il momento quindi il software distribuito dalla fondazione può essere considerato Free as in Beer.

Per quanto riguarda i modelli 3d e gli script che animano gli scenari ultravisivi la fondazione ha deciso di creare una licenza apposita. Tutti i modelli saranno liberi da usare se non a scopo di lucro, mentre per un uso commerciale è previsto un sistema di royalties.

Inoltre in casi particolari (come quello della famosa piazza della demo) può essere consentita ai creatori o ai committenti di determinati modelli l’uso esclusivo per un determinato periodo di tempo.

Il concetto mi risulta ancora un po’ complesso ma potrebbe essere un modello interessante per portare avanti un software del genere.

Per il momento dai un’occhiata al materiale rilasciato e divertiti a svolazzare sopra Torino.

Se il progetto riuscisse a continuare penso che ne vedremo certamente delle belle…

Se Gli Stati Fossero Aziende

Pubblicato il 21-02-2006 da Sergio | Nessun Commento

Se gli stati fossero aziende i cittadini sarebbero gli azionisti, i politici il consiglio di amministrazione mentre i ministri probabilmente sarebbero i responsabili di determinati settori dell’azienda.

Seguendo questa fantasia il nostro stato diventa una multinazionale con filiali in tutto il mondo: la quale sopravvivenza sul mercato dipende dalla compravendita di beni e servizi con altre multinazionali in un libero mercato.

La nostra multinazionale quindi è in balia del mercato come tutte le altre e quindi quando dovesse trovarsi un giono a corto di qualche risorsa proveniente da una grossa multinazionale dell’est il consiglio di amministrazione cercherebbe di instaurare più solidi rapporti commerciali con le multinazionali del sud, ricchi delle risorse necessarie alla nostra compagnia per sopravvivere.

Gli azionisti delle multinazionali del sud, insieme aqualcuno dei loro consiglieri delegati, hanno una curiosa abitudine: Non magiano mai prosciutto e non bevono alcolici. Questa particolarità non dovrebbe essere di nessun interesse nelle relazioni tra la nostra multinazionale e le multinazionali del sud; però ultimamente è successo un evento veramente particolare: alcuni azionisti di alcune società del nord hanno preso in giro gli azionisti delle società del sud per questa loro peculiarità.

Gli azionisti del sud hanno reagito in maniera abbastanza spropositata non limitandosi a chiudere i rapporti con le multinazionali del nord ma anche reagendo violentemente contro le filiari che queste società hanno nei loro paesi. Effettivamente alcuni azionisti del sud sono noti sul mercato per il loro modo non sempre ortodosso di condurre gli affari.

In ogni caso questo non causa grossi problemi alle società del nord che possono anche permettersi di non fare grandi affari con le società del sud.

Infatti se confronti i bilanci energetici (sezione olio e gas) di una multinazionale del nord con quelli della nostra multinazionale ti sarà ben chiaro quano per la nostra compagnia sia vitale avere le migliori relazioni possibili con le multinazionali del sud rispetto alle compagnie del nord che, appunto, vanno avanti quasi da sole.

In questo scenario appena descritto mettiamo che un consigliere delegato e responsabile per il riassetto della società (la nostra società infatti è nel bel mezzo di un cambiamento da S.P.A. a qualcosa di non ancora ben definito) indossi volontariamente e sotto l’attenzione dei media una maglietta ritenuta offensiva dagli azionisti del sud causando la loro violenta reazione e mettendo a rischio i delicati rapporti commerciali.

Ora come dovrebbero conportarsi gli azionisti di fronte a questo consigliere delegato?

Peso che sia ben chiaro no?

Torniamo al mondo reale.

Nel mondo reale ogni persona ha diritto di esprimere come meglio crede le proprie idee, e questo è un sacrosanto diritto. Ci sono molti altri elementi importanti nel mondo reale da tenere in considerazione: l’onore, la fede, il patriottismo, la politica, l’essere occidentali… tutto vero.

Ma ricordiamoci: nessuno di questi valori si può bruciare nella stufa per tenerci caldi d’inverno ne tantomeno bruciare nelle autovetture per permetterci di muoverci.

Ricordiamoci sempre che nella società attuale liberista e globalizzata la base di tutto è il mercato e quindi non siamo molto distanti dal modello di stato azienda sopra illustrato.

Per questo motivo nonostante debba continuare a esprimersi liberamente ritengo debba anche essere responsabile delle proprie azioni. Per questo motivo ritengo le dimissioni di Calderoli giuste e il suo comportamento assolutamente ingiustificabile.

Ma nella realtà gli stati non sono aziende…

Come Telefonare Con SipDiscount

Pubblicato il 20-02-2006 da Sergio | 1 Commento

Ti avevo parlato di SipDiscount il servizio VoIP che permette attualmente di chiamare gratis in Italia.

Nei giorni passati non ho avuto un gran che di tempo per provare questo servizio su strada ma finalmente, nel weekend sono riuscito a condurre i test necessari a preparare questa piccola guida par cominciare a usare SipDiscount.
Prima cosa scaricare il client dal sito di SipDiscount: Il client serve solo a registrarsi al servizio. Installalo su una macchina Windows e registrati.

A questo punto dovrebbe esserti arrivata una email contenente tutti i dati relativi alla registrazione.

Bene a questo punto ti serve un client per la rete SIP.

Quello che ho usato nei miei test è X-Lite. X-lite è un client gratuito disponibile pel Linux/Windows e Mac quindi non dovresti avere problemi a scaricarlo e installarlo.

Fatto?

Andiamo avanti.

Lancia il programma: si aprirà immediatamente una finestra di configurazione dei volumi di cuffie e microfono, se hai cuffie e microfono nessun problema, segui semplicemente le istruzioni.

A questo punto siamo dentro: l’unico passo che ci separa dal completare la nostra missione è l’inserimento dei dati di connessione.

Il programma dovrebbe accorgersi di non essere in grado attualmente di collegarsi e quindi, colto dal panico, ci apre automaticamente il menu di configurazione.

Dovrai compilare una serie di campi Display name/Autorzation Name/UserName e Password.

Nei primi tre campi ho messo sempre la username mentre nel campo password indovina un po’? La password.

Per gli altri campi fai riferimento all’email di registrazione, quindi inserisci

Domain:sipdiscount.com
SIP/Proxy:sip1.sipdiscount.com

Ecco Fatto: a questo punto chiudi il menu e per sicurezza riavvia il programma.

Se tutto è andato come doveva andare al riavvio del programma dovresti leggere “Logged In” Enter phone number.

Per chiamare digita il numero sul tastierino numerico inserendo prefisso internazionale/prefisso locale/numero di telefono

Ad esempio se vuoi chiamare Bob di Milano inserisci 003902xxxx dove:

0039 è il prefisso internazionale italiano
02 è il prefisso di Milano
xxxx è il numero di telefono del tuo amico Bob che sinceramente non conosco.

Per il resto il programma funziona come un normale telefono: cornetta verde per Alzare cornetta rossa per attaccare… Ma su queste cose non dovresti avere problemi vero?

Avevo detto che il servizio era gratuito: mi sbagliavo. Effettivamente con la sola registrazione si può chiamare gratuitamente per 1 minuto, mentre per poter chiamare gratuitamente per più tempo occorre, come in tutti gli altri casi, caricare 10€ di credito.

In ogni caso non uno sproposito direi. Meno di VoipCheap e molto meno di VoipStunt.

Speriamo che l’italia rimanga tra i paesi gratuiti…

Il servizio sembra funzionare bene: i tempi di connessione della chiamata possono essere anche molto alti (1 minuto) ma in generale la qualità audio e il ritardo sono paragonabili a qulli del normale telefono.

Presto i programmi di Google per Linux

Pubblicato il 17-02-2006 da Sergio | Nessun Commento

Google ha annunciato di star lavorando ad una versione Linux dei propri programmi.

Sembra infatti che partendo da Picasa, il noto editor fotografico, verrà rilascera presto la versione Linux del pacchetto di applicativi di Google.

La soluzione adottata da google per il porting è molto semplice: piuttosto che riscrivere e ricompilare tutto il codice ha deciso di affidarsi all’emulazione fornita dal noto emulatore Wine.

Con wine infatti è già possibile, oltre ad emulare i software di google, far girare un gran numero di applicativi e giochi scritti per windows. Tutto questo senza aver una perdita in prestazioni e anzi, a volte, con un risultato più prestante dello stesso Windows Xp.

Google però ha assicurato che gli utenti non si renderanno neanche conto del macchinoso processo di emulazione dato che avranno un programma facile da installare e da usare come quello per windows.

Il passo successivo sarà probabilmente l’istant messanger Google Talk che tra l’altro per quanto riguarda l’aspetto della chat è emulato egregiamente dal client Kopete.
Spero che presto possa avvenire la stessa cosa per Google Earth

Questa notizia che sembra voler confermare la precedente possibilità del rilascio di una distribuzione Linux ad opera della grande G e certamente dimostra un suo interesse verso la più diffusa piattaforma open source.
E questo non può far altro che farmi attendere le prossime mosse di Google…

Bukkake: la canzone dell’estate 2006

Pubblicato il 16-02-2006 da Sergio | 4 Commenti

Fa freddo, fuori c’è la nebbia, piove e forse è un po’ presto per pensare all’estate.

Però è anche questo il momento in cui nascono i tormentoni estivi. Negli anni passati infatti tutti i brani riempipista del periodo più caldo dell’anno sono usciti durante il freddo inverno e, piano piano sono cresciuti fino a esplodere divenendo il successo estivo.

Cercare di capire fin da ora quale sarà la canzoncina che tutti quanti canticchieranno sulle spiagge è certamente un esercizio molto divertente. Giorgio di Caymag non ha dubbi:

Il tormentone estivo del 2006 sarà Bukkake di Immanuel.

Ho provato ad ascoltare la canzone e effettivamente si! Penso proprio che sarà così.

La canzone ha un buon ritmo ballabile pur non essendo propriamente un pezzo da discoteca, un ritornello simpatico semplice da imparare e un gusto un po’ esotico che non fa mai male.

Insomma: la canzone ha tutte le carte in regola per diventare il brano riempipista dell’estate.

Già mi vedo le teenager canticchiare in discoteca questa allegra canzoncina…

Ascoltala subito cliccando sul tasto qua sotto!

Pagina Successiva »