DHTML: codifica web dinamica

• Potrebbe 3, 2024

DHTML sta per Dinamico HyperText Markup Language e può essere definito come l'arte di rendere dinamiche le pagine Web HTML combinando HTML con Javascript e CSS (Cascading Style Sheets). A differenza delle altre quattro varianti HTML studiate nei precedenti quattro articoli di questa serie, DHTML non è uno standard definito dal consorzio W3. Piuttosto, è un "termine di marketing che è stato utilizzato da Netscape e Microsoft per descrivere le nuove tecnologie che i browser di generazione 4.x potrebbero supportare" (W3 Consortium). HTML 4.0 ha introdotto per la prima volta due importanti componenti inerenti alla struttura di DHTML:

• Fogli di stile a cascata (CSS)
• Document Object Models (DOM)

Rendi dinamico il tuo codice

I CSS forniscono modelli di stile e layout mentre DOM fornisce modelli di contenuto dei documenti HTML. JavaScript e VBScript aggiungono la possibilità di scrivere codice di scripting per controllare elementi HTML. Complessivamente, questi tre componenti si sommano a pagine HTML dinamiche. Uno dei principali deterrenti è l'incompatibilità del browser: Netscape e Microsoft non hanno ancora deciso cosa implementare nei loro browser: quindi, scrivere pagine DHTML che funzionano bene in entrambi i browser può essere complicato. Per vedere di persona, puoi accedere agli standard Microsoft e Netscape online:

• Libreria MSDN presso Microsoft
• HTML dinamico in Netscape Communicator

"DHTML eccelle nella creazione di effetti a bassa larghezza di banda che migliorano la funzionalità di una pagina Web. Può essere utilizzata per creare animazioni, giochi, applicazioni, fornire nuovi modi di navigare attraverso i siti Web e creare layout di pagine fuori dal mondo che semplicemente non sono è possibile solo con HTML. Sebbene molte delle funzionalità di DHTML possano essere duplicate con Flash o Java, DHTML fornisce un'alternativa che non richiede plug-in e si integra perfettamente in una pagina Web. "(Dan Steinman, 1998).

Per comprendere le complessità di DHTML, è utile esaminare i suoi componenti in modo più dettagliato.

Fogli di stile

I CSS sono codici sofisticati che separano i contenuti Web dalla desplay del Web: stile, posizionamento, colori, caratteri e così via. Il posizionamento CSSP o CSS consente il controllo a livello di pixel sul posizionamento degli elementi HTML. La separazione dello stile di presentazione dei documenti Web dal contenuto con CSS2 (livello CSS 2) semplifica l'authoring Web e la manutenzione del sito. "CSS2 supporta fogli di stile specifici per i media in modo che gli autori possano adattare la presentazione dei loro documenti a browser visivi, dispositivi uditivi, stampanti, dispositivi braille, dispositivi portatili, ecc. Questa specifica supporta anche il posizionamento dei contenuti, caratteri scaricabili, layout della tabella, funzionalità per internazionalizzazione, contatori automatici e numerazione e alcune proprietà relative all'interfaccia utente "(W3 Consortium). Il W3C offre un eccellente tutorial per imparare CSS2 chiamato, Specifica CSS2.

JavaScript

JavaScript è uno speciale linguaggio basato su browser di scripting utilizzato per controllare elementi HTML e aggiungere funzionalità a moduli, frame, finestre, rollover di immagini, controlli audio-video e manipolare DHTML. Netscape per primo ha chiamato questo scripting JavaScript, quindi Microsoft ha escogitato il termine, JScript, per il suo particolare marchio di scripting. Il risultato? Due versioni di JavaScript che possono essere fastidiosamente incompatibili. Per esplorare di più questo problema, visita Netscape JavaScript centrale e di Microsoft JScript pagina delle risorse. Il segreto degli effetti dinamici del contenuto JavaScripted è l'uso di oggetti layer. Gli oggetti livello modificano il testo quando il mouse vi scorre sopra; fa muovere immagini o testo nella pagina web; inoltre fa cadere i menu a discesa. Gli oggetti di livello sono disposti in tag div, con caratteristiche quali colore, posizione e visibilità.

Mettendoli insieme

Il DHTML viene solitamente applicato per raggiungere tre compiti:

• Posizione o posizionando blocchi di contenuto sulla pagina e spostandoli
• Modifiche di stile che cambiano l'aspetto della pagina
• Gestione degli eventi o correlando eventi dell'utente a cambiamenti nel posizionamento o altre modifiche di stile

Nelle versioni più recenti di Internet Explorer e Netscape (versioni 5, 6 e successive) il DOM sta diventando il codice prescelto per la maggior parte della codifica DHTML. Una volta padroneggiato, il DOM può aiutare i web designer a manipolare, aggiungere, eliminare e modificare la codifica dei documenti relativa a tutti gli stili, gli attributi (come un href) e gli elementi (come i tag html) sulla pagina. Ciò significa che tutti i tag e gli attributi comuni a un documento HTML sono accessibili tramite il DOM. Attualmente, i livelli del modello a oggetti del documento 0 e 1 sono raccomandati dal W3C. Anche il livello 2 è in lavorazione, ma non è stato ancora promosso come standard per la codifica DHTML.

Un utile gruppo di tutorial è disponibile tramite HTML Goodies, chiamato DHTML e Layer Tutorial.

I collegamenti inclusi in questo articolo offrono introduzioni e istruzioni per iniziare il tuo viaggio nel padroneggiare questo nuovo sviluppo nella codifica HTML.Qualsiasi ricerca rapida su Google porterà molte più risorse alla tua attenzione, prontamente disponibili a portata di mano. Man mano che i produttori di browser lavorano sulla loro incompatibilità e l'uso di browser di versioni superiori diventa più comune, DHTML diventerà una parte obbligatoria dell'itinerario di qualsiasi designer professionista.

Evidenzia HTML serie di articoli

PARTE 1: Un designer credibile dovrebbe conoscere l'HTML?
PARTE 2: HTML 3.2 - La nascita di Wilbur
PARTE 3: HTML 4.0 E 4.01 - Più di una buona cosa!
PARTE 4: XHTML: Web Coding per il design raffinato
PARTE 5: DHTML: codifica web dinamica