mozilla

Revision 190055 of DHTML Demostraciones del uso de DOM/Style

  • Enlace amigable (slug) de la revisión: DHTML_Demostraciones_del_uso_de_DOM//Style
  • Título de la revisión: DHTML Demostraciones del uso de DOM/Style
  • Id de la revisión: 190055
  • Creada:
  • Creador: Trace2x
  • ¿Es la revisión actual? No
  • Comentario /* Additional Resources for Learning The DOM */

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "DHTML", "en" ])}}

Proyecto de ejemplos DOM Mozilla

Esta página 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 mas.

Animación y manipulación de elementos de texto

Animación 3D en tiempo real
Esta demostración como usar JavaScript y DOM para animar un conjunto de objetos imagen para crear un efecto de animación 3d.


Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2)

Estilo DOM: Sujetando y posicionando elementos con la interfaz JavaScript DOM
Esta demostración está optimizada para funcionar con Mozilla porqué usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para posicionarse y sujetar propiedades de los elementos DIV.

Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM
Esta muestra requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla.

DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos
Esta demo 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.


Cross-Browser Widgets

Windowing API: La ventana DHTML de BrainJar
BrainJar's DHTML Windows es un "widget" que muestra como añadir ventanas DHTML dinámicas en una aplicación DHTML.

Stock Ticker
Stock Ticker proporciona un objeto reutilizable, que puede adaptarse para monitorizar (mediante una línea en movimiento) valores financieros en cualquier navegador que soporte el Standard DOM.

Recursos adicionales para aprender DOM

Cruzando una tabla HTML con JavaScript e Interfaces DOM
Una visión general sobre los métodos DOM de nivel 1.0 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.

DOM Central
Aprenda más acerca de W3C DOM.

Visita GetElementById.com
GetElementById.com contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la demo Zoom Intro y otras magníficas demostraciones y scripts DOM.

W3C DOM Category at DMOZ.ORG
Esta categoría contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM.

{{ wiki.languages( { "en": "en/DHTML" } ) }}

Fuente de la revisión

<p>
</p><p>{{wiki.template('Traducción', [ "inglés", "DHTML", "en" ])}}
</p><p><b>Proyecto de ejemplos DOM Mozilla</b> <br>
</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 mas.
</p><p><b> Animación y manipulación de elementos de texto </b><br>
</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><br>
<a class="external" href="http://www.world-direct.com/mozilla/dhtml/funo/3dcube/index.htm">Esta demostración</a> como usar JavaScript y DOM para animar un conjunto de objetos imagen para crear un efecto de animación 3d.
</p><p><br>
</p>
<h3 name="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: Sujetando y posicionando elementos con la interfaz JavaScript DOM </b><br>
<a class="external" href="http://www.mozilla.org/docs/dom/samples/can/index.html">Esta demostración</a> está optimizada para funcionar con Mozilla porqué usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para posicionarse y sujetar propiedades de los elementos DIV.
</p><p><b> Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM </b><br>
<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><br>
<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><p><br>
</p>
<h3 name="Cross-Browser_Widgets"> Cross-Browser Widgets </h3>
<p><b>Windowing API: La ventana DHTML de BrainJar </b><br>
<a class="external" href="http://www.brainjar.com/dhtml/windows/demo.html">BrainJar's DHTML Windows</a> es un "widget" que muestra como añadir ventanas DHTML dinámicas en una aplicación DHTML.
</p><p><b> Stock Ticker </b><br>
<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 Standard DOM.
<br>
</p>
<h3 name="Recursos_adicionales_para_aprender_DOM"> Recursos adicionales para aprender DOM </h3>
<p><b> Cruzando una tabla HTML con JavaScript e Interfaces DOM </b><br>
<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.0 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><br>
Aprenda más acerca de <a href="es/DOM">W3C DOM</a>.
</p><p><b> Visita GetElementById.com </b><br>
<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> W3C DOM Category at DMOZ.ORG </b><br>
<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>{{ wiki.languages( { "en": "en/DHTML" } ) }}
Revertir a esta revisión