Articoli con Tag ‘HTML’


Web2.0: Adobe ci prova con Apollo?

Apollo è il nome in codice (per ora) di un ambizioso progetto Adobe destinato al mondo  RIA (Rich Internet Applications) e Web2.0, Ajax compreso. A qualcuno ricorda Macromedia Contribute, a qualcun’altro Macromedia Central. C’è, altresì, chi vede in Apollo la mera unione -  o possibilità – di far convivere elementi Flash e PDF (cosa tra l’altro già fattibile con Flash Paper)!

Continua...

Nascondimi

Una caratteristica dei fogli di stili (i file .css) è quella di poter essere specificati a seconda del media di output. Gli Style Sheet permettono infatti di specificare la stessa classe, lo stesso ID lo stesso TAG, ecc… per media diversi. Ad esempio posso scrivere un file .css con la seguente sintassi:

1
2
3
4
5
6
7
@media screen {
div#myBox {display:none}
}

@media print {
div#myBox {display:block}
}

Quello che ne deriva, alla fine, è che il contenuto del DIVcon id myBoxnon sarà visibile sul browser, sullo schermo, ma quando provo a stampare la pagina troverò un contenuto diverso da quello che mi aspettavo.
I motori di ricerca, spider, crawler o aggregatori, normalmente (per ora) non risolvono i file css. A loro interessa il contenuto non la formattazione visiva. Tuttavia questa tecnica potrebbe avere risvolti interessanti se non inquietanti. Proprio per le caratteristiche dei sistemi di indicizzazione una situazione come quella mostrata qui sotto sarebbe quantomeno curiosa:

1
2
3
4
5
6
7
<div id="visibile_a_video">
   <p>Contenuto visibile a video</p>
</div>

<div id="visibile_in_stampa">
   <p>Contenuto visibile in stampa</p>
</div>

Correlato con un file .css di questo tipo:

1
2
3
4
5
6
7
8
9
@media screen {
div#visibile_a_video {display:block}
div#visibile_in_stampa {display:none}
}

@media print {
div#visibile_a_video {display:none}
div#visibile_in_stampa {display:block}
}

Google, ad esempio, indicizzerebbe entrambi i contenuti del nostro HTML, anche se a video saremmo in grado di vederne solo uno. Se stampiamo la pagina troveremmo con sorpresa un nuovo contenuto. Il trucco, tuttavia, sarebbe svelato eliminando l’applicazione degli stili nei browser che lo supportano. Normalmente nessuno esegue un’operazione di questo tipo quando naviga su Internet. Tale indagine scaturirebbe solo dopo aver trovato un’incongruenza tra ciò che è visibile a video e ciò che si è stampato!

Ad oggi non mi risultano casi eclatanti di questo tipo di manipolazioni tramite CSS. Un tempo si cercava di aumentare la visibilità su Internet inserendo una serie di testi, parole, dello stesso colore dello sfondo della pagina Web, così da rendere tale artifizio oscuro agli occhi dei navigatori. Con il tempo i motori di indicizzazione si sono cautelati contro queste “frodi”. Sarà forse il momento di anticipare qualche burlone prima di creare un precedente?

Attualmente gli Style Sheet consentono di specificare tutta una serie di media type di output. Per una lista completa vedi il W3C.

Continua...

Web Developer 1.1.3

Chris Pederick rilascia la nuova versione di Web Developer, comodo add-on per FireFox ed altri browser, che insieme a FireBug rende la vita degli sviluppatori Web migliore.
Segnalo questa release per le sue ottime novità rispetto alla versione predente. Le icone della toolbar sono state ridisegnate, ora molto più efficaci. È stato aumentato il numero di funzioni disponibili sui menu, come un comodo magnify in tempo reale, rules e linee guida, possibilità di editare l’HTML. Da installare quanto prima…

Continua...

Dynamic Javascript & CSS File

Nel Post Creare un RSS Reader in PHP e Javascript abbiamo indirettamente incontrato una tecnica estremamente interessante che permetteva di creare – in pratica – un file Javascript da PHP.

Continua...

HTML dinamico con Javascript

Scrivere codice HTML dinamicamente all’interno di una pagina è possibile ed utile. Il modo più diretto e conosciuto è quello di utilizzare documenti.write() o un contenitore DIV predisposto ad accettare codice inserito tramite innerHTML. In alternativa è possibile agganciarsi ad un TAG esistente ed utilizzare il DOM per aggiungere o rimuovere elementi all’interno della pagina. Ad esempio immmaginiamo di voler caricare un nuovo file Javascript senza utilizzare scripting lato server e quindi il ricaricamento della pagina. La funzioni qui sotto, ad esempio, aggiunge un file Javascript alla vostra pagina, passato come parametro (comprensivo di path).

1
2
3
4
5
6
function addScripting(s) {
 var scriptNode = document.createElement('script');
 document.getElementsByTagName("head")[0].appendChild(scriptNode);
 scriptNode.language='javascript';
 scriptNode.src=s;
}

Similmente è possibile aggiungere un foglio di stile alla nostra pagina, indicato dalla variabile cssfile:

1
2
3
4
5
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', cssfile );
document.getElementsByTagName('head')[0].appendChild(cssNode);

Continua...

Classi e ID nei CSS

Ecco alcuni brevi consigli su come usare class e id nei fogli di stile. Tenete subito in considerazione che l’uso di tecniche Javascript avanzate, come lo stesso uso di motori Ajax, può entrare in conflitto con i consigli esposti qui! E vedremo alla fine il perchè.

Continua...

Le meraviglie del CSS2.0+

A causa forse delle incompatibilità stilistiche e di output – ancora presenti – tra i vari browser, non tutti conoscono le innumerevoli potenzialità dei fogli di stile. Vogliamo mostrare, quindi, alcune caratteristiche della sintassi CSS sconosciute ai più e per ricordarci quanto poco – spesso – sfruttiamo a pieno gli strumenti che abbiamo a disposizione.

Nota: tutti gli esempio sono stati provati su Firefox 1.5.0.5

Selezione per attributi

1
2
3
4
5
<div id="myInput">
<input type="submit" value="invia" />
<input type="button" value="Pulisci" />
<input type="button" value="Annulla" />
</div>
1
2
3
div#myInput input[type=submit] {color:#f00}
div#myInput input[type=button] {color:#0f0}
div#myInput input[value=Annulla] {color:#00f}

Questa caratteristica, spesso indicata cone CSS2 avanzata, permette cose strabiglianti, se ci riflettiamo un attimo. Il maggior vantaggio lo si ottinene lato HTML, dove non sono necessarie classi o id per distinguere i TAG nel CSS. Sono proprio gli attributi – comunque presenti – nel TAG ad indicare quale stile associare. Inoltre qualsiasi attributo del TAG può essere preso come selettore: alt, title, accesskey, ecc…

Selezione per profondità

Questo tipo di selezione è a dir poco spettacolare, se considerate che può essere sommata a quella precedente. Essa permette di definire la gerarchia degli elementi. Guardando l’esempio qui sotto ci si rendo subito conto della straordinaria portata di questo tipo di selezione, che mantiene il codice HTML pulito e senza indicatori superflui.

1
2
3
4
5
6
7
<div id="myBox">
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<p>Paragrafo 3</p>
<p>Paragrafo 4</p>
<p>Paragrafo 5</p>
</div>
1
2
3
div#myBox > p       {color:#f00}
div#myBox > p + p {color:#0f0}
div#myBox > p:last-child {color:#00f}

Addirittura, giusto per concludere questo sorvolo, oltre a last-child esiste first-child e – fantastico – first-letter! Provate voi.
Abbiamo ovviamente appena sfiorato l’argomento, alquanto vasto a dire il vero, che vede i CSS come strumento evoluto per la definizione del layput di pagine. Esistono altri selettori e comportamenti e grandi novità per le specifiche dei file CSS di futura generazione.

Continua...



Stop SOPA