Introduzione

L'HTML Dinamico

HTML Dinamico, Dynamic HTML o DHTML, è un'acronimo usato per indicare quelle pagine che usano l'Hypertext Markup Language (HTML), i Cascading Style Sheets (CSS), e si appoggiano a JavaScript per rendere interattive le pagine web. DHTML è una struttura di Netscape Communicator 4.0 e Microsoft Internet Explorer 4.0 ed è una tecnologia interamente client-side, vale a dire che non fa uso di server esterni. Affidandosi al browser per mostrare e manipolare le pagine web ed è simile alle tecnologie Java e Flash, anche se con queste non ha alcuna correlazione.

Il DHTML crea in modo efficiente effetti che utilizzano poche risorse, aumentando le funzionalità di una pagina web. Si possono creare animazioni, giochi, applicazioni, fornisce nuovi modi per navigare nei siti web, e fa cose fino ad ora impossibili solo con l'aiuto dell'HTML. Molte caratteristiche del DHTML possono essere ottenute sia con Java sia con Flash, purtuttavia il DHTML fornisce una valida alternativa che non utilizza plugin e si fonde perfettamente in una pagina web.

Sebbene le tecnologie insite nel DHTML (HTML, CSS e JavaScript) siano standardizzate, il modo in cui Netscape e Microsoft le hanno implementate differisce notevolmente. Per questa ragione, scrivere una pagina DHTML che funzioni per entrambi i browser (ci riferiamo a tutte quelle operazioni che vanno sotto il nome di cross-browser) può essere un lavoro molto complicato.

I Link per ottenere maggiori informazioni sul DHTML:

Documentazione Microsoft sul DHTML
Documentazione Nescape sul DHTML

I Fogli di Stile

I Fogli di stile, Cascading Style Sheets (CSS), sono un'aggiunta all'HTML che dà agli sviluppatori un modo sofisticato per strutturare le pagine web. I codici di stile dei CSS separano il contenuto della pagina (il testo puro) dal modo in cui verrà rappresentata (i colori, gli stili - fonti, corpo del carattere, visibilità - e la posizione).

Il posizionamento nei Cascading Style Sheets, Cascading Style Sheets Positioning o CSSP, è un'estensione dei CSS che permette di controllare pixel per pixel la posizione degli elementi dell'HTML.

I Link per una maggiore informazione sul DHTML:

W3C CSS-Positioning
Guida ai CSS di Builder.com

JavaScript

Contrariamente al suo nome, JavaScript è completamente diverso da Java. JavaScript è un linguaggio che utilizza documenti esterni, denominati in inglese "script", ed è, quindi, uno "scripting language"  che, costruito all'interno del browser, ne controlla gli elementi dell'HTML. Mentre Java è un linguaggio di programmazione di alto livello adatto a scrivere applicazioni esportabili su varie piattaforme ( i sistemi operativi su cui si fondano i nostri computer), tra l'altre cose, gli Applets che non sono altro che programmi in Java che possono essere fatti "girare" su una pagina web.

JavaScript apparì per la prima volta in Netscape 2.0, serviva principalmente per lo script del contenuto della pagina web e forniva funzionalità aggiuntive ai form, ai frame e alle window. Con Netscape 3.0 furono aggiunte ulteriori capacità quali i rollover e i controlli audio e video.  Anche Microsoft Internet Explorer 3.0 (rilasciato poco dopo Netscape 3.0) implementava JavaScript, ma sotto le mentite spoglie di JScript, essenzialmente si trattava della stessa cosa con qualche incompatibilità giusto per forzare i programmatori ad utilizzare la loro versione.

Ulteriori estensioni furono poi aggiunte con Netscape 4.0 e Internet Explorer 4.0, introducendo il DHTML (come abbiamo già visto, vanno sotto questo nome gli elementi dell'HTML che usano i CSS). In ogni modo questi ampliamenti non furono standardizzati prima di mettere sul mercato i due browser. Risultato: abbiamo ora due versioni di JavaScript ampiamente incompatibili.

I Link per avere più informazioni su JavaScript:

Guida di Netscape a JavaScript
Reference di JavaScript
Il JScript della Microsoft

Il Dynamic Duo

Il Dynamic Duo, è un tutorial da me, Dan Steinman, scritto ed è il risultato delle mie sperimentazioni e successi con il Cross-Browser DHTML, mi riferisco con questo alla capacità di un codice in linguaggio JavaScript di funzionare con entrambi i due principali browser, Nestcape e Internet Explorer.

Questo tutorial si occupa principalmente dei problemi insiti nella programmazione DHTML. E copre la porzione di CSSP e JavaScript che può essere usata sia con Netscape sia con Internet Explorer. Non è mia intenzione occuparmi di tutto l'argomento, né offrire la miglior soluzione in assoluto per un particolare progetto, piuttosto questo tutorial fornirà consigli e spiegazioni delle cose con le quali ho ottenuto dei buoni risultati.

Se non avete familiarità con JavaScript e i CSS, questo tutorial non è decisamente il miglior punto di partenza. Comunque, partirò lentamente e affronterò le conoscenze di base per comprendere come il DHTML funzioni. I concetti di programmazione di questo tutorial non sono particolarmente complessi, anche se il cross-browser DHTML richiede un certo livello di capacità nel debugging e la cosa potrebbe rivelarsi un po' impegnativa per un novizio. Lavorerete su browser che saranno solo parzialmente compatibili, e linguaggi di programmazione solo parzialmente implementati. Vi imbatterete in errori e limitazioni non solo tra i due browser, ma anche sui differenti sistemi operativi e le ulteriori versioni dei browser. Questo tutorial si limita all'esame della superficie dei problemi che incontrerete costruendo le vostre pagine DHTML... credetemi non sto scherzando.

Detto questo, ho fatto del mio meglio per buttar giù una serie di linee guida che rendano efficiente il cross-browser DHTML. Seguendo i consigli e le tecniche di questo tutorial potrete creare qualsiasi cosa vi venga in mente. Non appena avrete finito di leggerlo comprenderete pressoché tutti i concetti insiti nel DHTML, avrete appreso un grande numero di tecniche di programmazione JavaScript usando il mio DHTML API (il DynLayer), come pure avrete imparato a costruire il vostro oggetto DHTML che vi permetterà di creare widgets multiuso e i componenti per il vostro sito web.

Sono apprezzati commenti e suggerimenti di ogni genere. Sono sempre alla ricerca del modo per migliorare questo tutorial. Come pure sarei veramente grato per qualsiasi contributo, incluse le modifiche ai codici, o qualsiasi oggetto DHTML che abbiate creato e che volete condividere con altri. Se avete costruito un sito web o progettato un gioco, oppure un'applicazione utilizzando questo tutorial sarò ben lieto di inserire un nuovo link nella pagina DHTML Resources.

Home Prossima Lezione: Cascading Style Sheets Positioning
copyright 1998 Dan Steinman