Buona Lettura!

Questa tecnica fa uso di PNG, ma cosa succede con IE6 e IE5.5? Questo browser non supporta le PNG a 24bit trasparenti.

Mi sono ricordato però che io solitamente utilizzo un metodo per le png su IE che fa uso di un file .htc, e perchè non usare questa tecnica per rendere compatibile il tutto conIE 6 e 5.5?

Il risultato potete vederlo qui e adesso due parole su come realizzarlo.

I file necessari per la buona riuscita sono:

IEPNGfix
MooTools 1.11

A questo punto il gioco è quasi fatto. Una volta installato tutto nelle rispettive directory andiamo a creare un file Javascript dove inseriamo una funzione per far attivare il fix per IE:

function addPNGRule() {
if (document.all && document.styleSheets && document.styleSheets[0] &&
document.styleSheets[0].addRule) {
document.styleSheets[0].addRule('.png', 'behavior: url(c/iepngfix.htc)');
}
}

Cosa fa questo funzione? Semplice, aggiunge una regola globale al CSS dove, in caso esista la classe .png gli applica un behavior, in questo caso il fix delle png. Ovviamente lo fa solo per IE.

Poi con mootools (io uso mootools, ma poi siete liberi di usare ciò che volete) avvio la funzione alla fine del caricamento della pagina:

// Initialization Function
function init() { addPNGRule(); }

// Set DOMReady Events
window.addEvent('domready', init);

Questo per quanto riguarda il fix PNG, il codice invece del gradient è molto simile a quello originale, tranne l’applicazione della classe .png al tag span:

<h1 class="gradient"><span class="png">This is a PNG test</span></h1>

Et voilà! Il tutto funziona con i seguenti browser:

Safari 2
Safari 3
IE 5.5
IE 6
IE 7
Firefox
Opera 9

Per tutti i fortunati possessori di un’iPhone, andate su http://wishlists.dimix.it/ e divertitevi a gestire i vostri desideri! :)

Per costruirla ho utilizzato i MooTools ed è basata sui Cookie. I dati quindi vengono memorizzati nei cookie per poi riformare gli array necessari per la visualizzazione e la gestione dei dati stessi.

Buon divertimento!

Tanti bei siti e applicazioni web, i migliori diciamo, in circolazione..

Buona navigazione!

Ulteriori informazioni:

Perchè usare XHTML e i CSS, marckup semantico, XHTML avanzato e web 2.0, Javascript per potenziare il layout

20 alunni per classe
Prezzo: 200 €
Durata: 7 ore
Rivolto a: web designer e developer

Per iscriversi andare sul sito di Let’s Course

Seguendo un’articolo su A List A Part, dove spiegavano come poter modificare alcune parti delle nostre pagine XHTML con la sostituzione ad esempio di Immagini con Oggetti Flash, ho sperimentato quello che avete visto nel link poco sopra.

Il concetto è molto semplice, si crea il nostro progetto, poi andiamo a sostituire tramite Javascript e DOM gli elementi XHTML con altri elementi. Io ho utilizzato i MooTools per praticità ma possiamo andare a lavorare direttamente sul DOM tramite i metodi classici di Javascript.

Flash da veramente milioni di possibilità, il limite è la fantasia, possiamo quindi prendere veramente ogni parte della nostra pagina e sostituirla con un oggetto flash.

Proprio seguento questa logica, pochi giorni fa è nato swfIR.
Altro non è che un oggetto flash che va a sostituirsi con un’immagine da noi indicata e gli applica alcuni filtri ed effetti.
L’idea è geniale, ma la realizzazione è veramente semplice. E allora perchè fanno tanto clamore certi tools? Perchè fino ad adesso in pochi ci hanno pensato.

Questo è il web del futuro, almeno secondo me.. e per quello che riguardano i siti web.

Web 2.0 è proprio l’utilizzo di tutte le tecniche in modo intelligente per avere un prodotto innovativo.
Occhio però a non abbondare e a non tralasciare il nostro impegno per rendere il web per tutti.

Buon lavoro!

In realtà preferisco le applicazioni desktop per fare determinate cose. Un po’ per la potenza di calcolo, un po’ per la velocità di risposta..

Però chissà se il futuro sarà questo, cioè avere le applicazioni sulla quale lavorare, installate in modo remoto su un server e poi lavorarci da qualunque parte del mondo con un qualsiasi client.

Certo, adattare un browser e il suo codice di programmazione (HTML), che va ricordato è nato per gli ipertesti ed è tutt’oggi per essi, non mi sembra una soluzione adeguata.

Magari inventeranno un’applicazione, un client o qualcosa del genere con un linguaggio di programmazione desktop (Objective-C?) in modo da poter creare vere applicazioni web e non qualcosa di adattato..

Vabbè, intanto godiamoci queste perle :)

Guardate questa galleria

Semplicissimo il suo utilizzo, basta inserire il codice JS ed importarlo come qualunque file javascript e usare un markup minimale e semplice:

<div id="FrogJS">
<a xhref="images/1.jpg" mce_href="images/1.jpg" title="Credit">
<img xsrc="images/1_thumb.jpg" mce_src="images/1_thumb.jpg" alt="Caption" />
</a>
<a xhref="images/2.jpg" mce_href="images/2.jpg" title="Credit">
<img xsrc="images/2_thumb.jpg" mce_src="images/2_thumb.jpg" alt="Caption" />
</a>
</div>

..e il gioco è fatto.

Veramento un’ottima soluzione!

Quindi ecco alcuni link dove potete prendere spunto per creare nuove applicazioni e funzioni:

Cross Fade
Table Sort
Photo Gallery

Questi link portano rispettivamente ad una funzione per creare sfumature tra div, per ordinare le colonne di una tabella e per creare una galleria fotografica.

Molto utili sia per alcuni prodotti da presentare che come spunti per inventare qualche nuova funzione.