DescartesJS
  • Inicio
  • Descartes
    • Introducción
    • Conceptualización
    • Versiones
    • Ejemplos
  • Edición
    • Gestor de escenas
    • Editor de escenas
    • Código de una escena
    • Manejo de escenas
  • Paneles
    • Botones
    • Espacios
    • Controles
    • Definiciones
    • Programas
    • Gráficos
    • Gráficos 3D
    • Animaciones
  • Auxiliares
    • Colores
    • Funciones
    • Textos
    • Macros
    • Ficheros
    • Imágenes
  • Créditos

Documentación técnica de la herramienta Descartes y del intérprete DescartesJS

  • Estás aquí : 
  • DescartesJS
  • /Buscar resultados para [ imagenes 2D ]
  • Imágenes en Gráficos 2D

    12 abril, 2014 Autor/a: Juan Guillermo Rivera Berrío
    Sin comentarios todavía

    Las imágenes se pueden insertar como fondo de un espacio, asociados a controles y, como lo explicamos en este apartado, como un elemento tipo gráfico 2D. En este caso, el panel de configuración específico del tipo imagen tiene este aspecto:

    imagen1

    A continuación se explican los campos específicos.

    Expresión La expresión es un campo de texto. Su contenido puede ser de dos tipos:

    • Sólo uso de las coordenadas (x, y). En este caso, se asumen estas coordenadas como el extremo superior izquierdo de la imagen.

    imagen2

    • Uso de coordenadas y tamaño de la imagen (x, y, w, h). Esta opción permite incluir dos valores (ancho y alto), que definen el tamaño relativo de la imagen. La imagen en su tamaño original se logra con la expresión (x, y, 1, 1). Una imagen reducida a la mitad sería (x, y, 0.5, 0.5). Las coordenadas, en este caso, corresponden al centro de la imagen.

    imagen3

    Archivo Es un campo de texto libre en el que debe escribirse el nombre del archivo que contiene la imagen que se desea usar como objeto gráfico. Sólo pueden utilizarse archivos png, jpg y gif. Los archivos de imágenes pueden colocarse  en la carpeta donde se encuentra la página que contiene la escena o en subdirectorios de ella. En el nombre del archivo hay que escribir los subdirectorios (ver imágenes anteriores). También es posible usar el nombre de un archivo, cuyo contenido es el archivo de la imagen, incluidos los subdirectorios.

    imagen4

    Animado  Selector para indicar si se trata de una imagen animada (gif animado). Los gif animados sólo se representan como tales con el intérprete de Java, con el intérprete DescartesJS sólo se verá la primera imagen que compone ese gif. Para usar gráficos animados con DescartesJS ha de usarse un espacio HTMLIframe (consulte el artículo «Espacios HTMLIframe«)
    Frecuencia Lapso de tiempo en milisegundos que debe haber entre una y otra actualización de la imagen animada.
    Rotini Determina el ángulo de rotación de la imagen. Para una rotación con respecto al centro de la imagen, se recomienda la expresión con coordenadas y tamaño de la imagen (ver escena de ejemplo, al final de este apartado).

    En la siguiente escena se puede observar el funcionamiento de los parámetros «Expresión» y «Rotini». Usa los controles y observa el comportamiento de la imagen, si haces clic en el botón «Coordenadas y tamaño», podrás practicar, además, con el rotini o rotación de la imagen:

    Si prestaste atención, seguramente notaste que para valores negativos en el tamaño, la imagen se invierte. La siguiente escena, muestra una utilidad de este comportamiento del tamaño de la imagen:

    (Puede descargar esta escena y la anterior desde este enlace)

    Finalmente, la opción familia que trae el panel de configuración, también es posible usarla con imágenes.

  • Imágenes en controles numéricos tipo botón

    13 junio, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    Descartes ofrece las opciones color para decorar los botones que vamos a utilizar en una escena; sin embargo, también tenemos la posibilidad de asociar una imagen a este tipo de control. En la siguiente imagen se observa como se puede asociar una imagen a un botón (en la ruta imagenes/btn1.png). Es importante definir el tamaño del botón en la casilla pos que, para el ejemplo, es 129×30.

    boton1
    boton2
    En la siguiente escena, se emplean varias imágenes para un botón como las que se muestran en la imagen de la derecha. Descartes, también, reconoce la imagen asociada al botón con el sufijo _over; es decir, si el tenemos el botón con nombre btn1.png y su asociado btn1_over.png, esta última se visiona cuando pasamos el puntero del ratón sobre el botón. Y análogamente con el sufijo _down al pulsar dicho botón.
    En la escena, haz clic varias veces sobre el botón para que observes algunos de los diseños utilizados que son imágenes de dominio público. Por otra parte, hemos incluido unos marcos adicionales en la opción gráficos del editor, como una muestra más de lo que podemos hacer con las imágenes.
    Practica, entonces, con la siguiente escena, para que observes las diferentes opciones que permiten incorporar imágenes en un espacio: fondo, botones y gráficos 2D
    Escena interactiva

    (Puede descargar la escena anterior desde este enlace)

  • Macros en el editor de configuración Java y en el intérprete Java

    28 octubre, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    ¿Qué es una macro?

    Una macro es un archivo de texto que contiene parte del código de una escena de Descartes y que interpretado por Descartes actúa como un gráfico en una escena.

    Podemos distinguir dos tipos de macros: Macros del Sistema o Macros de usuario. Los primeros son macros que previamente se han construido y que están incorporados al código del intérprete de Descartes en Java Descartes5.jar, y los segundo son macros que puede definir el usuario y que no están integrados en el intérprete.

    objetos cartesianos debe colocarse en un sitio específico. Hay dos formas posibles de acomodar las macros: con direccionamiento general o con direccionamiento particular.

    1) Macros del Sistema

    Los macros del sistema tienen una organización interna en diversos subdirectorios y para su localización es necesario aportar el direccionamiento adecuado. Este direccionamiento es aportado por el editor de configuración de manera automática y ha de respetarse para que pueda ser accesible. En la figura siguiente puede observarse a un primer nivel el directorio macros, en un segundo nivel g2d y g3d (macros de gráficos 2d y 3d respectivamente) y un tercer nivel y sucesivos donde se agrupan los macros por su temática. Para un detalle completo de todos estos macros puede consultarse el artículo Relación de macros del sistema.

    Organización interna de los macros del sistema

    Organización interna de los macros del sistema

    Dado que los macros 2d están ubicados en el subdirectorio macros/g2d/ y los 3d en macros/g3d/ el editor de configuración presupone este direccionamiento y sólo aporta como parámetro en la escena el direccionamiento relativo a esos dos subdirectorios anteriores.

    Así pues el macro masa que está ubicado en macros/g2d/dinamica/masa en el parámetro expresión del código de la escena aparecerá referenciado como dinamica/masa.

    Todos estos macros son públicos y pueden ser utilizados por cualquier desarrollador de escenas.

    2) Macros de usuario o particulares

    Un usuario puede crear sus macros y ubicarlos en la misma carpeta donde se encuentra la página que contiene a la escena o en subcarpetas de ella. Para usarlos tendrá que indicar el direccionamiento adecuado para que el intérprete de Descartes pueda acceder a ese fichero y leer su contenido.

    ¿Qué contenido tiene una macro?

    Un archivo de texto que es una macro contiene varias líneas. La primera especifica si es de dos o tres dimensiones: tipo_de_macro=R2 o tipo_de_macro=R3. Luego vienen líneas que definen los objetos auxiliares del macro y, finalmente, las líneas que definen los gráficos del macro. Las líneas que definen auxiliares y gráficos son exactamente las que aparecen al pulsar las etiquetas azules Auxiliar o Gráfico en los respectivos paneles de configuración.

    Por ejemplo el contenido del archivo de texto que constituye el macro dinamica/masa que es uno de los utilizados en la segunda escena de arriba es éste:

    Nota: Cuando una escena se transforma en macro sólo se traspasan al macro los auxiliares y los gráficos. Los controles, la animación y las demás partes de una escena no pasan al macro.

    ¿Cómo utiliza los macros un autor de escenas de Descartes?

    La utilización de los macros para configurar escenas es como la de cualquier otro gráfico. Si se desea usar un macro del sistema, bastará buscarlo recurriendo a los menús que se encuentran en el panel de configuración de macros y seleccionarlo. Si se desea usar un macro que no es del sistema, es decir que no está registrado, entonces deberá ser un macro con direccionamiento particular y será necesario escribir su nombre explícitamente, incluyendo las posibles subcarpetas a partir desde donde esté la página web que contiene la escena.

    Todos los macros se pueden girar o trasladar utilizando los campos rotini y posini que aparecen en sus paneles de configuración. He aquí el panel de configuración de un macro de dos dimensiones:

    macro1

    y el de un macro de tres dimensiones:

    macro2

    Es importante poner un nombre diferente para cada instancia de cada macro que se utilice en una escena. Los auxiliares del macro (constantes, variables, vectores, funciones y algoritmos) pueden utilizarse en la escena precediendo la llamada a uno de ellos por el nombre de la instancia del macro y un punto. Por ejemplo la masa del objeto definido por el macro dinamica/masa de nombre M es M.m

    ¿Cómo podemos conocer cuáles son los parámetros de un macro del sistema?

    Para obtener esta información basta pulsar el botón Aux que se encuentra a la derecha del campo de texto y de los menús desplegables que se usan para poner la trayectoria y el nombre del macro. Al hacerlo se abre una ventana como esta:

    macro3

    en la que aparecen todos los auxiliares con sus valores iniciales. Si se trata de algoritmos o de funciones con algoritmo sólamente aparece la palabra algoritmo entre paréntesis. En el caso de constantes y algoritmos que no son funciones, a la derecha aparece una-sola-vez o siempre, indicando cuándo se evalúa. A las constantes que se evalúan siempre no podrá modificarlas el usuario del macro desde una aplicación. En principio las funciones algorítmicas y los algoritmos son para ser usados desde las aplicaciones, tampoco deberían sobreescribirse en las aplicaciones, pues representan funcionalidad propia del macro. En cambio todas las variables que se evalúan una sola vez y las funciones no algorítmicas pueden sobreescribirse, siempre y cuando el autor de la aplicación entienda su significado.

    ¿Cómo puede saberse el significado de los auxiliares de un macro?

    En el caso de las macros del sistema, pulsando el botón Doc se abre la página web donde está la escena que define la macro, y la misma página en general debe tener una o varias escenas que muestran cómo se usa dicho macro, e ilustran el significado de cada uno de sus auxiliares. (El comentario anterior no tiene validez en la versión5 y se mantiene por si el desarrollador de escenas quiere aplicarlo a sus macros particulares, según se detalla en el siguiente párrafo)

    En el caso de los macros particulares, será responsabilidad del autor ofrecer esta documentación y deberá hacerlo en una página con el mismo nombre y dirección del macro, pero con extensión html o htm. Allí deberá poner la escena que usó para generar el macro y algún ejemplo de cómo puede utilizarse.

    ¿Qué escenas pueden convertirse en macros?

    Para que una escena pueda convertirse en un macro debe satisfacer las siguientes condiciones:

    1. Tener un solo espacio.
    2. No debe contener macros.

    Algunos gráficos como las ecuaciones, sucesiones, rellenos e imágenes no son convenientes para utilizarse en un macro si se desea que éste pueda girarse y transladarse usando rotini y posini.

    ¿Cómo se convierte una escena en un macro?

    Es muy fácil. Cuando una escena tiene un solo espacio, se habilita el botón macro, que aparece arriba a la derecha de la ventana de edición de configuraciones, como puede verse en la imagen del panel de configuración de la escena donde se crearon los ejes.

    macro4

    Al pulsar este botón aparece otra ventana con el macro, es decir, con el texto del macro.

    macro5

    Para crear la macro basta copiar ese texto y guardarlo en un archivo de texto con cualquier nombre. Ése será el nombre de la macro y el directorio donde lo guardó será su trayectoria. Dicho archivo deberá colocarse como se indica arriba según vaya a tener direccionamiento general o particular. Hecho esto la nueva macro ya puede usarse en cualquier escena.

    Nota: Recuerde que cuando una escena se transforma en macro sólo se traspasan a la macro los auxiliares y los gráficos. Los controles, la animación y las demás partes de una escena no pasan al macro.

    Nota: A pesar de que el botón macro se habilita siempre que hay un solo espacio en la escena, esto no garantiza que la macro resultante sea un macro auténtico. Para ello es necesario asegurarse que no tiene macros y si es de dos dimensiones y se desea que gire con rotini y se translade con posini, tampoco debe tener ecuaciones, sucesiones,rellenos ni imágenes.

    ¿Qué ventajas y limitaciones tienen las macros como objetos gráficos?

    Las macros pueden trasladarse y girarse mediante unos atributos específicos que aparecen en su panel de configuración. Esto, junto con la posibilidad de tener parámetros y algoritmos propios, les da gran flexibilidad y aplicabilidad.

    Una  de sus limitaciones sin embargo, es que no se les pueden cambiar los colores, a menos que éstos se definan a través de sus cantidades de rojo, verde y azul y éstas se traten como parámetros del macro. Otra es que las macros no cuentan con controles gráficos propios.

    ¿Qué utilidad tienen las macros?

    En principio las macros fueron ideados para crear bancos de objetos gráficos específicos para un área de aplicación. Por ejemplo una librería para circuitos (eléctricos) como la que actualmente existe en el banco de macros del sistema.

    Cada autor puede desarrollar las macros que le convenga, ya sea para ahorrarse trabajo al observar que utiliza varias veces la misma construcción, para uniformizar la presentación de varias escenas o para organizar mejor su trabajo. Como ejemplos de aplicación de macros pueden verse Máquinas Térmicas y Espejos Esfericos , en especial se recomienda mirar y estudiar los ejemplos del macro dinamica/masa por ser, desde el punto de vista gráfico, uno muy sencillo, pero de una gran funcionalidad que hereda gracias a sus auxiliares.

  • Índice Documentación

    26 mayo, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    Inicio

    Inicio

    Descartes

    La Comunidad Descartes y su herramienta

    Introducción

    Conceptualización

    ¿Qué es Descartes?

    Intérpretes de Descartes

    Referencia y localización de los intérpretes

    Editores de configuración de Descartes

    Versiones

    Versiones de Descartes

    Versión 1 de Descartes

    Versión 2 de Descartes

    Versión 3 de Descartes

    Descartes Álgebra

    Versión 4 de Descartes

    Plug-in de Descartes

    Bloqueo de escenas en Java

    Versión 5 de Descartes

    Versión DescartesJS

    Otros tipos de escenas

    Discursos de Descartes o Arquímedes

    Ítems de Descartes 

    Ejemplos

    Edición

    Gestor de escenas

    Instalación del gestor de escenas (Java)

    ¿Cómo usar el gestor de escenas? (Java)

    Opción de menú «Archivo»

    Opción de menú «Opciones»

    Opción de menú «Servidores»

    Opción de menú «Ítems»

    Opción de menú «HTML»

    Opción de menú «Editar»

    Opción de menú «Insertar»

    Editor de escenas

    Editor de configuración de escenas en Java

    Editor de configuración de escenas de Descartes 2

    Editor de configuración de escenas de Descartes 5

     Editor de configuración de Discursos

    Editor de configuración de Ítems

    Editor básico de configuración, de líneas, (javascript)

    Cómo editar escenas con el editor básico de líneas (artículo incompleto)

    Editor de configuración de escenas en javascript (artículo incompleto)

    Código de una escena

    Código de una escena

    Sintaxis del código de una escena

    Acceso al código de una escena

    Manejo de escenas

    Copiar y pegar escenas en html

    Ejemplos con «docBase»

    Embeber en blog

    Embeber en Moodle

    Embeber en wikis

    Embeber como ventana emergente

    Embeber como iframe en entorno html

    Embeber como iframe en una escena o discurso

    Diseño web adaptable (responsive) en escenas

    Escenas adaptables

    Unidades didácticas adaptables

    Comunicación entre escenas y con el fichero html que las contiene

    Comunicación entre escenas en espacios HTMLIframe

    Comunicación entre una escena y el fichero html que la contiene

    Comunicación escena-html usando Descartes Java

    Comunicación escena-html usando Descartes JS

    Comunicación de una escena con el html embebido en un HTMLIframe

    Aplicaciones de la comunicación para vídeos interactivos

    Aplicación de la comunicación para integrar cálculo simbólico

    Comunicación de vectores entre escena y html

    Comunicación de matrices entre escena y html

    Paso de parámetros desde una escena Descartes a una web independiente

    Paneles

    Botones

    Botones

    Espacios

    Espacios

    Espacios R2 o bidimensionales

    Espacios R3 o tridimensionales

    Espacios sensibles a los movimientos del ratón

    Espacios AP

    Espacios HTMLIframe

    Audio y vídeo mediante espacios HTMLIframe

    Imágenes de fondo en espacios

    Controles

    Controles

    Controles numéricos

    Imágenes en controles numéricos tipo botón

    Controles gráficos

    Controles de texto

    Controles de Audio – Video

    Audios y vídeos interactivos con Descartes

    Definiciones

    Definiciones

    Variables

    Funciones

    Funciones matemáticas básicas

    Operadores

    Funciones para gestión de cadenas

    Funciones para la comunicación

    Palabras reservadas

    Vectores

    ficheros y vectores

    guardar vectores en ficheros

    Matriz

             ficheros y matrices

             guardar matrices en ficheros

    Programas

    Programa

    Algoritmos

    INICIO

    CALCULOS

    Evento

    Gráficos

    Gráficos

    Punto 2-D

    Segmento 2-D

    Polígono 2-D

    Relleno 2-D

    Arco 2-D

    Flecha 2-D

    Sucesión 2-D

    Ecuación 2-D

    Curva 2-D

    Texto 2-D

    Imágenes en Gráficos 2D 

    Gráficos 3D

    Gráficos 3D

    Punto 3D

    Segmento 3D

    Polígono 3D

    Curva 3D

    Triángulo 3D

    Cara 3D

    Polireg 3D

    Superficie 3D

    Texto 3D

    Otras figuras 3D

    Familias 3D

    Ejercicios con gráficos 3D – Relaciones espaciales

    Animaciones

    Animaciones

    Animaciones – Ejercicio

    Animaciones – La ilusión de Adelson

    Animaciones – Las ilusiones de Koffka y de Haze

    Audios y vídeos interactivos con Descartes

    Otros elementos auxiliares

    Colores

    Colores

    Textos

    Textos y Editor de textos y fórmulas

    Macros

    Macros

    Macros en el editor de configuración Java y en el intérprete Java (queda en el último párrafo enlazar ejemplos)

    Macros en el intérprete DescartesJS

    Relación de macros del sistema (redactar)

    Ficheros

    Ficheros

    Imágenes

    Imágenes de fondo en espacios

    Imágenes en controles numéricos tipo botón

    Imágenes en Gráficos 2D

    Ejemplos de aplicación y utilidades

    Lupa cartesiana (aplicación de espacios y escala en imágenes)

    Aplicación de algoritmos

    Ciclos o bucles anidados

    Recomendaciones, indicaciones y elementos prefabricados

    Audios y vídeos interactivos con Descartes

    Aplicaciones de la comunicación para vídeos interactivos

    Vídeos interactivos en Youtube

    Vídeo interactivo con preguntas de respuesta escrita

    Vídeo interactivo con selección de fragmentos de vídeo

    Vídeo interactivo con preguntas de selección múltiple

    Vídeo interactivo con enlace a otros vídeos

    Vídeo interactivo con enlace a otras escenas de Descartes

    Vídeo interactivo y escena interactiva simultánea

    Vídeos interactivos en local

    Vídeos interactivos con línea de tiempo

    Vídeos interactivos con línea de tiempo (v1)

    Curvas de Bezier en Geogebra y Descartes

    Vídeos interactivos con línea de tiempo (v2)

    Aplicaciones de la comunicación para integrar cálculo simbólico

    Integración de construcciones de Geogebra con Descartes

    Comunicación Descartes-Google Maps

    Libros interactivos con Descartes embebido en «Mouleskine notebook»

    Créditos

    Créditos

  • La Comunidad Descartes y su herramienta

    11 abril, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    La comunidad Descartes está constituida por un equipo de instituciones y organizaciones no gubernamentales que tienen como fin promover la renovación y cambio metodológico en los procesos de aprendizaje y enseñanza de las Matemáticas, y también en otras áreas de conocimiento, utilizando los recursos digitales interactivos generados usando la herramienta Descartes. Entre sus objetivos y para la consecución de este fin se promueve el desarrollo y difusión de la herramienta de autor denominada «Descartes».

    Consideremos la siguiente escena interactiva de Descartes en la que podemos observar diferentes objetos matemáticos bidimensionales e interactuar con ellos.El fin básico de la Comunidad Descartes es aprovechar las ventajas del ordenador y de Internet para ofrecer al profesorado y al alumnado una nueva forma de enseñar y aprender. Como ayuda para la consecución de este objetivo se ha desarrollado una herramienta: el núcleo interactivo para programas educativos (nippe), denominado también “Descartes». Este nippe permite el diseño de escenas en las que mediante la pulsación de botones, la introducción o modificación de valores numéricos o el desplazamiento de controles gráficos, se interactúa con el sistema informático obteniéndose una respuesta acorde a los parámetros aportados, permitiendo la simulación de procesos y un aprendizaje activo.

    El aprendizaje más significativo es el obtenido mediante la experiencia propia, así pues si te aventuras a interactuar con la escena anterior podrás captar las posibilidades que nos ofrece Descartes. No obstante, en el siguiente vídeo tienes una descripción detallada de ella.

    http://descartesjs.org/documentacion/wp-content/uploads/2014/04/InteraccionEscena1.mp4

    Las dos escenas siguientes muestran algunas de las posibilidades de representación tridimensional, de relación e interacción entre objetos bi y tridimensionales, de incorporación de otros elementos como imágenes, etc., entre otras muchas posibilidades. Puedes interactuar con ellas o si lo deseas en el vídeo ubicado al final de esta página podrás ver una descripción detallada de las mismas.

    Interactuemos con la primera escena:

    Ahora podemos interactuar con una segunda escena que incluye una imagen de fondo:

    En el siguiente vídeo se aborda una descripción de las escenas anteriores:

    http://descartesjs.org/documentacion/wp-content/uploads/2014/04/D2D3.mp4

Categorías

Etiquetas

adaptable algoritmo algoritmos Animaciones animación arco blog colores Comunicación configuración controles curva definiciones diseño web adaptable ecuación editor evento flecha función GeoGebra Gestalt gestor de escenas gráficos Gráficos 3D guía de uso Haze ilusiones imagen instalación Java Koffka matriz Moodle polígono programa punto Relleno responsive responsivo segmento sucesión texto variables vector vídeos interactivos

Entradas recientes

  • Libros interactivos con Descartes embebido en «Moleskine notebook»
  • Comunicación con JavaScript desde una escena Descartes a la API de una plataforma educativa vía paquete Scorm
  • Comunicación Descartes-Google Maps
  • Paso de parámetros desde una escena Descartes a una web independiente
  • Lupa cartesiana

Comentarios recientes

  • Anónimo en Construcciones GeoGebra con Descartes: Ángulos en una circunferencia, vídeo interactivo
  • Anónimo en Macros en el intérprete DescartesJS
  • Anónimo en Interactive video – Euler’s line
  • Anónimo en Interactive video – Euler’s line
  • Anónimo en Operadores

Utilidades

  • Acceder
  • Feed de entradas
  • Feed de comentarios
  • WordPress.org
Documentación DescartesJS posee una licencia CC by-nc-nd si no se indica lo contrarioTheme zAlive by zenoven.
  • Inicio
  • Descartes
  • Edición
  • Paneles
  • Auxiliares
  • Créditos
× Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Aceptar