files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

---
title: DHTML Demostraciones del uso de DOM/Style
slug: DHTML_Demostraciones_del_uso_de_DOM_Style
tags:
  - CSS
  - DHTML
  - DOM
  - JavaScript
  - Todas_las_Categorías
---
<p>
</p><p><b>Proyecto de ejemplos DOM Mozilla</b>
</p><p><a class="external" href="http://cgi.din.or.jp/%7Ehagi3/JavaScript/Mozilla/SampleList.cgi?fmt=html">Esta página</a> contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para eventos DOM, DOM Core, DOM HTML y mucho más.
</p><p><b> Animación y manipulación de elementos de texto </b>
</p>
<ul><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/colorfades.html">Atenuación de colores</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/textinterlace.html">Text Interlace Effect</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/fadespacing.html">Atenuación y espaciado</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/bouncingsmile.html">Texto animado 1</a> - <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/geckowave.html">y 2</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/credits.html">Demo de títulos de crédito</a> (requiere Netscape 7.x/Mozilla)
</li></ul>
<p><b> Animación 3D en tiempo real </b>
</p><p><a class="external" href="http://www.world-direct.com/mozilla/dhtml/funo/3dcube/index.htm">Esta demostración</a> muestra cómo usar JavaScript y DOM para animar un conjunto de imágenes para crear un efecto de animación 3D.
</p>
<h3 id="Demostraciones_DOM_.28Requiere_navegador_que_interprete_DOM_1_y_2.29"> Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2) </h3>
<p><b> Estilo DOM: Recortar y posicionar elementos con la interfaz JavaScript DOM </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/can/index.html">Esta demostración</a> está optimizada para funcionar con Mozilla porque usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para establecer el valor de las propiedades de posición y recorte de los elementos DIV.
</p><p><b> Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/resize/index.html">Esta muestra</a> requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla.
</p><p><b> DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/dynatable-light/index.html">Esta demo</a> requiere un navegador que soporte la especificación DOM 1 y DOM 2, como Netscape 7.x o Mozilla. Usa los eventos DOM 2 del ratón para proporcionar un interfaz que puede manipular dinámicamente los elementos de la tabla.
</p>
<h3 id="Controles_multiplataforma"> Controles multiplataforma </h3>
<p><b>Windowing API: La ventana DHTML de BrainJar </b>
</p><p><a class="external" href="http://www.brainjar.com/dhtml/windows/demo.html">BrainJar's DHTML Windows</a> es un control (<i>widget</i>) que muestra cómo añadir ventanas DHTML dinámicas en una aplicación DHTML.
</p><p><b> Stock Ticker </b>
</p><p><a class="external" href="http://developer.mozilla.org/en/docs/DHTML_Demonstrations_Using_DOM/Style:Stock_Ticker">Stock Ticker</a> proporciona un objeto reutilizable que puede adaptarse para monitorizar (mediante una línea en movimiento) valores financieros en cualquier navegador que soporte el estándar DOM.
<br>
</p>
<h3 id="Recursos_adicionales_para_aprender_DOM"> Recursos adicionales para aprender DOM </h3>
<p><b> Cruzando una tabla HTML con JavaScript e Interfaces DOM </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/technote/tn-dom-table/">Una visión</a> general sobre los métodos DOM de nivel 1 y de cómo usarlos mediante JavaScript. Estas notas técnicas cubren los métodos del núcleo, que son los que permiten la creación y manipulación dinámica de los elementos de marcado mediante JavaScript.
</p><p><b> DOM Central </b>
</p><p>Aprenda más acerca de <a href="es/DOM">W3C DOM</a>.
</p><p><b> Visita GetElementById.com </b>
</p><p><a class="external" href="http://getelementbyid.com/">GetElementById.com</a> contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la <a class="external" href="http://getelementbyid.com/scripts/index.aspx?CodeID=28">demo Zoom Intro</a> y otras magníficas demostraciones y scripts DOM.
</p><p><b> La categoría W3C DOM en DMOZ.ORG </b>
</p><p><a class="external" href="http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/">Esta categoría</a> contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM.
</p>{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }}