Andrea.Zilio.name / blog

Il titolo di questo blog è “XHTML, CSS, Javascript, PHP… e chissà cos’altro”.
Guardando però i temi che effettivamente ho trattato, il titolo dovrebbe forse essere “Chissà cos’altro… e XHTML, CSS, Javascript, PHP”

Visto che non ho alcuna intenzione di cambiare il titolo; ho deciso di cambiare i temi: voglio impegnarmi a scrivere qualcosa di tecnico qui sul blog.

Vediamo, i modi per parlare di questi argomenti sono molteplici:

1. segnalazione di una novità/tecnica/risorsa interessante o innovativa
2. la mia opinione a caldo riguardo a qualcosa di cui si discute in rete
3. l’approfondimento di una qualche tecnica delle tecnologie citate

Inoltre c’è da decidere il livello di approfondimento: cosa dare per scontato e cosa vedere nel dettaglio.
Questo implica scegliere il target di voi lettori.

Se questo sito ricevesse un numero di visite significativo potrei girare la domanda a voi e chiedervi cosa vi interessa di più, ma in realtà devo e voglio decidere io, anche perchè ognuna delle possibilità richiede una quantità di tempo differente… ed il tempo è limitato… molto limitato ultimamente.

In realtà è una scappatoia per non rivelarvi che siete 4 gatti e comunque ognuno dei 4 gatti leggerà “at most 28% of the words” di questa pagina.
Come direbbe qualche mio prof: non molto entusiasmante

In realtà, comunque, il problema non è il metodo per discutere di questi argomenti: potrei utilizzarli a mia discrezione tutti e 3.
Il vero problema è la scelta dei singoli temi: sono così tanti ed ho così tante idee che non so mai da dove iniziare

Questo post è quindi per dirvi che ho scelto sia i temi che il target/livello di approfondimento: nei prossimi post tratterò le tecniche secondo me più importanti dei CSS dando per scontate le basi di questi ultimi. Più avanti vedrò magari il making of di alcuni plugin per wordpress che ho già realizzato e che sto tuttora utilizzando.

Riguardo ai CSS non aspettatevi cose campate in aria, puramente teoriche o filosofiche: parlerò di tecniche che chi fa webdesign ad un buon livello utilizza quotidianamente, ma che non sono sempre conosciute da tutti.

La scelta di non partire da zero escluderà ovviamente chi di CSS conosce poco o nulla, ma sono disponibili ottime guide per rimediare e tornare qui

Stavolta faccio sul serio: tra le mie bozze c’è già il prossimo articolo dove parlerò di una tecnica utilizzatissima per realizzare gli effetti di hover con immagini.
Non spiegherò come si usa la pseudoclasse :hover, lo darò per scontato: vedremo come utilizzarla nel modo migliore dal punto di vista della user experience.

A presto

Qualche giorno fa il Corriere della Sera ha fatto un restyling della propria versione online.

Che ve ne pare?

www.corriere.it

Invece di studiare Analisi 2, stavo sistemando un foglio di stile su un sito web che ha la necessità di funzionare correttamente con il maggior numero di browser (come tutti del resto) e ho scoperto uno strano comportamento di Internet Explorer 5 con la proprietà font-size dei CSS e le tabelle.

<satira>Che strano… Un errore con Internet Explorer….</satira>

Secondo la Bibbia, font-size è una proprietà che eredita (Vangelo secondo W3C, 15, 7).
Per coloro che non credono, ricordo che quando una proprietà eredita, questa, se non indicato diversamente, prende lo stesso valore specificato (o a sua volta ereditato) per la stessa proprietà nel suo elemento genitore (parent element).

Vediamo di fare un esempio:

<div id="container">

Paragrafo diglio di div#container e discendente di body

</div>
Paragrafo figlio di body

Applichiamo questo foglio di stile:

body{
font-family: Verdana;
font-size: 10px;
}
div#container{
font-size: 14px;
}

Il risultato dovrebbe essere lo stesso che vedete nell’immagine qui sotto:

Il primo <p> eredita il valore 14px da div#container il quale non ha ereditato 10px da body perchè ha espressamente indicato appunto 14px.
Il secondo paragrafo invece eretida il valore specificato su body generando quindi un testo di dimensione 10px.

Fin qui tutto OK. Anche Internet Explorer ci arriva.

Proviamo a mettere una tabella al posto dell’ultimo paragrafo (e lasciamo inalterato il CSS):

<div id="container">

Paragrafo diglio di div#container e discendente di body

</div>
<table border="0">
<tbody>
<tr>
<td>Prima cella di una tabella figlia di body</td>
</tr>
</tbody></table>

Qui Internet Explorer 5.5 inciampa:

Pagina visualizzata su IE6, Firefox, Opera,ecc :

ecco invece la stessa pagina renderizzata con IE 5.5:

Come potete vedere, per qualche strano motivo, Internet Explorer 5.5 tratta diversamente le tabelle dagli altri tag nonostante il messia non si sia espresso in merito.

Analizzato il problema vediamo di fare in modo che anche quei pochi e sfortunati utenti che ancora utilizzano questo browser corrotto e peccatore possano invece vedere correttamente i nostri siti web:

La soluzione è semplice e senza controindicazioni: è sufficente ricordare a IE 5 che il testo all’interno dei tag table deve avere un valore pari al 100% del font-size del tag genitore (di fatto facciamo ereditare la proprietà artificialmente).

table{
font-size: 100%;
}

oppure:

table{
font-size: 1em;
/* Per la proprietà font-size i valori in % e in em sono intercambiabili */
}

Ed ecco che anche IE 5 segue la retta via…

Update:
Sembra che non solo la proprietà font-size abbia questo problema, ma qualsiasi stile sia dato al testo… W IE

Dopo una vacanza natalizia che ormai ha quasi occupato anche Gennaio, rieccomi qui a scrivere delle novità del blog!

In questi 20 giorni sono finalmente riuscito a completare la “famosa” sezione tecnica del mio blog:

Quale vuole essere lo scopo di tutto ciò?
Lo scopo di questa nuova sezione è quello di poter dividere i temi che riguardano l’informatica, (affrontati anche approfonditamente da un punto di vista tecnico) dal resto dei temi che ho trattato finora sul mio blog.

Perchè questa divisione?
Semplicemente perchè gli argomenti che tratterò su “blog” avranno un pubblico differente rispetto a quelli di cui invece parlerò su “work” e penso quindi che sia meglio avere 2 sezioni differenti.

Ma quali saranno gli argomenti trattati su work.epper.org ?
Ovviamente dipenderà dai miei interessi che, essendo ancora un felice studente universitario, potranno anche mutare nel corso del tempo.
Ultimamente i miei approfondimenti riguardano lo sviluppo e la programmazione web dall’ (X)HTML ai CSS passando anche per PHP e Javascript e quindi non potranno che essere questi gli argomenti principali ora come ora Non mancheranno però le mie inutili, personali ed evitabili considerazioni sulle novità tecnologiche più in generale.

Ok, ma cosa cambia?
Bhè, chi con l’informatica preferisce non avere a che fare può tranquillamente continuare a “seguire” il blog come ha sempre fatto.
I pochi e coraggiosi utenti che vorranno invece ascoltare le mie stupidaggini tecnologiche devono sapere che http://work.epper.org ha un nuovo feed RSS apposito per essere informati dei nuovi post: http://work.epper.org/feed/
Se volete seguire entrambi i blog, iscrivetevi ad entrambi i feed…

Il nuovo tema fa proprio schifo!
Condivido, chissà che a Epper venga in mente di cambiarlo prima o poi…

Il nuovo tema è davvero bello!
Preferisco la sincerità
Bene, dopo questa breve self-interview ispirata alle interviste dei politici dei giorni nostri, faccio un saluto ai 56 utenti di Internet Explorer 6 che finalmente riusciranno a vedere correttamente il blog anche con quella sottospecie di interprete casuale di pagine web.

Per gli interessati, su work.epper.org è già presente un lungo post che tratta la gestione degli eventi in Javascript
Eventuali commenti/considerazioni/insulti seguono