• Cómo editar escenas con el editor básico de líneas

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

    Hay que completar este artículo

    En la ventana del editor podemos distinguir tres zonas:

    • La superior que cuenta con cinco botones:
      • Agregar
      • Remover
      • Duplicar
      • Subir
      • Bajar
    • La inferior con dos botones:
      • Aceptar que bien confirma una acción realizada (agregar, duplicar, remover) o bien confirma los cambios realizados, cierra el editor y se reflejan estos en la escena
      • Cancelar que omite una acción o cambio efectuado.
    • La central que distribuye y presenta el código de la escena por líneas alternando dos tonos de color para clarificar cada parámetro de la escena. Dentro de cada línea en letras blancas con fondo negro se sitúan los campos modificables por el usuario. Al seleccionar una línea, se destaca con un fondo rojo, y se permite la edición.

  • Sintaxis del código de una escena

    12 junio, 2014 Autor/a: José R Galo Sánchez
    2 Comentarios

    Llamamos código de una escena de Descartes al que hay que insertar en el código html de una página Web para que la escena aparezca. El formato externo es pues el mismo que el de cualquier bloque html, es decir, el código comienza con una etiqueta que en este caso es <ajs…>para la escena en DescartesJS (<applet…> en Descartes Java) en la que se incluyen algunos atributos, sigue una serie de etiquetas <param … > cada una con los atributos name=»…» y value=»…», y termina con </ajs> (respectivamente </applet>).

    En principio es posible crear manualmente una escena de Descartes escribiendo el código directamente en una página html. Aunque no es necesario hacerlo así, el autor de escenas encontrará a veces conveniente retocar directamente el código de sus escenas, para lo cual es conveniente que se familiarice con el contenido de esta página.

    Como se detalla en los artículos que describen los editores de configuración Descartes genera automáticamente el código de una escena. El botón código es una de las alternativas para acceder a éste y al pulsarlo aparece una nueva ventana, llamada ventana de código del applet, que tiene, por ejemplo, este aspecto en el gestor de escenas:

    código de una escena

    código de una escena en la ventana de código del editor de configuración

    El código aparece en un área de texto al centro de la ventana, y además aparece seleccionado, listo para ser copiado con Ctrl-C y pegado en alguna página html. En la parte superior de la ventana aparecen dos líneas. La primera tiene cuatro campos de texto: nombre, codebase, width y height, que corresponden a unos atributos de la etiqueta <applet> y permiten afinar la configuración. En la segunda línea aparecen dos selectores (código HTML y pop o emergente), dos campos de texto (b_width y b_height) y un botón (aplicar).

    En la parte inferior, la ventana tiene una etiqueta que explica lo que puede hacerse con el contenido del área de texto, y una línea con l selector LMS y dos campos de texto (CURSO y UNIDAD), que están relacionados con el sistema LMS de seguimiento de actividades de los alumnos.

    La siguiente tabla explica el significado de todos estos campos.

    nombre

     

    		 El nombre de la escena.El nombre es un campo opcional pero conviene usarlo.Debe ser una sola palabra sin espacios que servirá para identificar la configuración específica y distinguirla de otras que podrían aparecer en la misma página. Es muy útil poner un nombre que identifique una configuración y la distinga de cualquier otra, particularmente cuando se realizan modificaciones a una configuración existente.

    codebase

     

    		 El CODEBASE es la dirección, relativa a la página html, en donde se encuentra el archivo jar. Es propio del código de la escena en Java.
    width
    		 El ancho de la escena medido en pixeles.Debe ser un número positivo y es el ancho (en pixeles)
    del rectángulo que asigna el navegador a la escena.
    height
    		 La altura de la escena medida en pixelesDebe ser un número positivo y es el alto (en pixeles)
    del rectángulo que asigna el navegador a la escena.
    código HTML
    		 Selector que define si el applet se codificará usando la codificación HTML estándar.Es un selector que permite decidir si se codifican las letras acentuadas,
    la ñ, la ç, etc… utilizando la codificación estándar de HTML.Por defecto aparece activado pues es recomendable usarla para asegurar que las escenas
    creadas puedan visualizarse en cualquier plataforma.(No aplicable a DescartesJS).
    pop
    		 Selector que permite definir si la escena será de tipo «pop» o emergente, lo cual significa que en la página html sólo aparece un botón (con el nombre de la escena) que al pulsarse lanza la escena en una ventana nueva.
    b_width
    		 Si la escena es de tipo «pop», entonces b_width es el ancho en pixeles del botón que
    lanza la escena.
    b_height
    		 Si la escena es de tipo «pop», entonces b_height es la altura, en pixeles, del botón
    que lanza la escena.
    aplicar Sirve para aplicar las modificaciones a la configuración y que éstas aparezcan en el código del applet.
    LMS
    		 Este selector debe activarse si se desea utilizar esta escena en el
    sistema LMS de seguimiento de actividades de los alumnos .En tal caso hay que dar el nombre oficial del curso y de la unidad a las que pertenece. (No aplicable a DescartesJS).
    CURSO
    		 Nombre oficial (registrado en el LMS) del curso al que
    pertenece esta escena.Sólo debe llenarse si la escena va a estar conectada a un servidor LMS. (No aplicable a DescartesJS).
    UNIDAD
    		 Nombre de la unidad didáctica a la que pertenece esta escena. (No aplicable a DescartesJS).

    En general, entre la etiqueta <ajs…> y su cierre </ajs> hay varias líneas que comienzan con <param name= y contienen los llamados parámetros de la escenas. Lo que sigue a continuación de <param name= es el nombre de un parámetro y va entre comillas dobles. Luego aparece value=  y una cadena, entre comillas dobles que se llama el valor del parámetro. Un valor de parámetro, es decir una cadena asignada a la etiqueta value, no puede contener una doble comilla pues el navegador la interpretaría como el final de la cadena. Estos pares de nombres y valores  o name y value se llaman los «parámetros» de la escena. En la tabla que sigue se describen los nombres de los parámetros de Descartes así como el posible contenido de sus valores.

    name

    value

    name=»nombre»

     

    		 value=»Aperitivo»Nombre de la escena.

    name=»Versión»

     

    		 value=»3.5″Es el número de la versión de Descartes con la que se generó el código. Se incluye como información. En principio una escena creada por una versión determinada deberá poder ser interpretada correctamente por cualquier versión posterior. Siempre se marca como objetivo mantener la compatibilidad hacia atrás.
    name=»Idioma» value=»español»El idioma en que debe presentarse la escena. En la versión 2 de Descartes hay cinco posibles idiomas: english, español, catalá, galego y euskera. Los nombres deben escribirse tal como se hace en la frase anterior.
    name=»Botones»
    		 value=»créditos=si config=si inicio=si limpiar=si»Define cuáles de los cuatro botones
    que suelen aparecer en las cuatro esquinas de una escena deben aparecer y cuáles no. (Ver Botones).
    name=»Espacio»(un sólo espacio) value=»fondo=negro red=grisObscuro ejes=gris texto=rosa»Define los cuatro colores básicos del espacio de una escena con un único espacio R2. También define si se deben dibujar en el espacio la red, los ejes y si se deben numerar y/o etiquetar los ejes. Por ejemplo:  números=si eje-x=’eje x’ eje-y=’no’.Nota: Este parámetro se conserva por compatibilidad con
    Descartes2 y sólo se utiliza para leer configuraciones antiguas. El código generado por Descartes 3 y posteriores lo excluye en favor de E_00 (ver la siguiente fila de la tabla).
    name=»E_00″name=»E_01″name=»E_02″…(espacios) Ejemplo para un espacio R2:value=»id=’E00′ R3=’false’ despl_imagen=’arr-izq’ fondo=’blanco’ red=’no’ red10=’negro’ ejes=’gris’ texto=’grisObscuro’ números=’false’«Ejemplo para un espacio R3: 

    value=»id=’E01′ R3=’true’ escala=’24’
    O.y=’20’ x=’9%’ y=’53%’ ancho=’32%’ alto=’44%’ despl_imagen=’arr-izq’ fondo=’turquesa’
    despliegue=’pintor’ cortar=’true'»

    Es la configuración de un espacio. Contiene el identificador id, que debe ser una palabra sin espacios ni símbolos de operadores y que comienza con una
    letra. Estos son los parámetros de cada tipo de espacio:

    R3=false

    		id, R3, escala,
    O.x, O.y, x, y, ancho,
    alto, imagen, despl_imagen, fondo, red, red10, ejes, texto, eje_x, eje_y, números.

    R3=true

    		 id, R3, escala,
    O.x, O.y, x, y, ancho,
    alto, imagen, despl_imagen, fondo,     despliegue, cortar.
    name=»C_00″name=»C_01″name=»C_02″…(controles) value=»id=escala
    tipo=numérico valor=’50’ decimales=’4*(escala<10)’ incr=’10’ min=’10’ max=’1000000′
    nombre=zoom región=norte»    Es la configuración de un control. Contiene el identificador id, que debe ser una palabra sin espacios y que comienza con una letra, el tipo de control (numérico o gráfico) y los demás campos  que completan la configuración de un control. Estos son los nombres de todos los campos posibles (ver Controles para consultar el significado y los posibles valores
    de estos atributos): 

    tipo=numérico

    		 id, tipo,
    valor, decimales, incr, min,
    max, nombre, región, visible,
    exponencial-si y pos_mensajes.

    tipo=gráfico

    		 id, tipo,
    expresión, color, color-int, texto,
    decimales, tamaño, dibujar-si, rastro,
    constricción y fuente.
    name=»A_00″name=»A_01″name=»A_02″…(Auxiliares) value=»id=FP expresión=’sqrt(x^2+(p-x^2/(4*p))^2)'»Es la configuración de un auxiliar. Contiene el identificador id, su expresión
    y según el tipo, los siguientes atributos (ver los auxiliares para consultar el significado y los posibles valores de estos atributos): 

    variable id, expresión,
    editable.
    constante id, expresión,
    constante, evaluar.
    vector id, expresión,
    vector, tamaño, evaluar.
    algoritmo id, algoritmo,
    inicio, hacer, mientras, evaluar
    función id, expresión,
    dominio, algoritmo, inicio, hacer,
    mientras.
    sucesion id, expresión,
    dominio, algoritmo, inicio, hacer,
    mientras.
    evento id, condición,
    acción, parámetro, ejecución y pos-mensajes
    name=»G_00″name=»G_01″name=»G_02″…(Gráficos) value=»espacio=’E00′
    tipo=ecuación expresión=’y=x^2/(4*p)’ color=amarillo»    Es la configuración de un gráfico.Contiene el tipo de gráfico, la expresión que lo define, el color y los demás parámetros. Todos los gráficos tiene estos atributos:espacio, tipo, fondo, dibujar-si, color, expresión, rastro, familia, s.parámetro, s.intervalo, s.pasos, texto, decimales, fijo, coord_abs.La tabla enumera los atributos específicos adicionales de cada tipo de gráfico. (Ver Gráficos 2-D para consultar el significado y los posibles valores
    de los atributos): 

    ecuación

    		 ancho, visible,
    editable, relleno+, relleno–
    curva ancho, visible,
    editable, relleno, t.parámetro, t.intervalo, t.pasos
    sucesión tamaño, dominio
    punto tamaño, texto,
    fuente, decimales.
    segmento tamaño, texto,
    fuente, decimales.
    flecha tamaño, texto,
    fuente, decimales, ancho, punta.
    polígono ancho, texto,
    fuente, decimales, relleno.

    arco

    centro,
    radio, inicio, fin, texto,
    fuente, decimales, ancho, relleno.

    relleno

    		  

    texto
     

    texto

    , fuente, decimales.

    imagen
     

    archivo, animado, frecuencia

    .

    macro
     

    nombre

    .
    name=»S_00″name=»S_01″name=»S_02″…(Gráficos) value=»espacio=’E01′ tipo=’Octaedro’ color=’naranja’ color_reverso=’rosa’ aristas=’true’
    rotini='(180,0,30*(1+C.x))’ posini='(0,0,1.5*C.y+1.5)’ modelo=’luz’ cortar=’false'»    Es la configuración de un gráfico en 3 dimensiones.Contiene el tipo de gráfico, la expresión que lo define, los colores, la posición y la rotación iniciales y los  parámetros de presentación. Todos los gráficos 3D, tienen estos atributos: espacio, tipo, fondo, dibujar-si, nombre, expresión, rotini, posini, color, cortar, ancho.La tabla enumera los atributos específicos adicionales de cada tipo de gráfico en 3D. (Ver Gráficos 3D para consultar el significado y los valores posibles de los atributos): 

    punto texto, fuente,
    decimales, fijo.
    segmento Nu
    curva Nu
    polígono Nu
    triángulo color_reverso,
    aristas, modelo
    cara color_reverso,
    aristas, modelo, Nu

     

    polireg
     

    Nu,
    largo.

     

    superficie
     

    color_reverso,
    aristas, modelo    , Nu, Nv

    texto
     

    texto, fuente, decimales, fijo.

     

    macro

    		  
    name=»Animación» value=»id=Animación algoritmo=si inicio=’T=0′ hacer=’T=T+0.05′ mientras=’T<2′ pausa=’80’ auto=si repetir=si controles=no»Es la configuración de la animación. Contiene dos atributos fijos y obligatorios: id=Animación y algoritmo=si y los atributos de un algoritmo: inicio, hacer, mientras.
    Además contiene los atributos pausa, auto, repetir y controles. (ver Animación para consultar el significado y los posibles valores de los atributos)

  • Referencia, localización y ubicación de los intérpretes

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

    Para que una escena se pueda interpretar ha de referenciarse y ubicar el intérprete que se desea usar. El gestor de escenas incluye el código necesario de acuerdo a la opción seleccionada en el submenú «Opciones», pero puede modificarse si el usuario lo desea.

    1. En el intérprete Java la referencia va descrita en el parámetro de la escena denominado «jnlp_href» cuya sintaxis es:

    <param name=»jnlp_href» value=»https://arquimedes.matem.unam.mx/Descartes5/lib/Descartes5.jnlp«>

    En el ejemplo anterior se accede a una dirección de Internet para descargar el intérprete. En este caso se ha reflejado la correspondiente al directorio de distribución ubicado en el servidor arquimedes de la UNAM en México y se trata de una escena de Descartes5, si fuera un discurso habría que poner

     https://arquimedes.matem.unam.mx/Descartes5/lib/Arquimedes.jnlp 

    y para una escena de la versión 2 sería

     https://arquimedes.matem.unam.mx/Descartes5/lib/Descartes2.jnlp.

    Para una referencia local relativa a la ubicación de la página html que contiene a la escena basta cambiar el parámetro value. Por ejemplo:

    <param name=»jnlp_href» value=»./lib/Descartes5.jnlp«>

    indica que el archivo Descartes5.jnlp está en un directorio denominado lib al nivel de la página de llamada (en este mismo directorio habrá de ubicarse el archivo Descartes5.jar que es referenciado por el anterior). Análoga situación ha de contemplarse, cuando sea necesario, para discursos y escenas de la versión 2.

    2. En el intérprete DescartesJS es necesario incluir la llamada al archivo descartes-min.js  que contiene el código javascript del intérprete. Para ello, en cualquier posición de una página html y previamente al código de la primera escena a interpretar se incluirá:

    <script type=’text/javascript’ src=’https://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js’></script>

    En este caso el intérprete se localizaría y descargaría desde el servidor arquímedes de la UNAM. Si se desea que la localización sea a nivel local podría ponerse:

    <script type=’text/javascript’ src=‘./lib/descartes-min.js‘></script>

    y se buscará en el directorio denominado lib ubicado en el árbol de directorios al mismo nivel donde está la página que incluye esta llamada. Obviamente ha de existir ese directorio y en él ha de estar el archivo descartes-min.js.

    ____________________________________________________________________

    Independiente de la modalidad del intérprete (Java o javascript) en:

     https://arquimedes.matem.unam.mx/Descartes5/lib/

    estará siempre la última versión del intérprete. Por tanto, si se utiliza esta referencia siempre se interpretará la escena con la última versión existente.

    Si se utiliza una referencia a un servidor propio obviamente se estará interpretando con la versión que se aloje ahí y que no tiene por qué coincidir con la última existente.

    Si se aloja en una librería local ./lib/descartes-min.js se ejecutará con la versión local ahí referenciada.

    Cada opción tiene sus ventajas y es decisión del usuario desarrollador optar por una u otra. Si se utiliza una versión local se tiene garantía que una escena que cuando fue desarrollada era bien interpretada por el intérprete ahí alojado, seguirá interpretándose siempre igual, es decir, no surgirán posibles incompatibilidades hacia atrás como consecuencia de nuevas versiones del intérprete. Si se utiliza un servidor propio se mantendrían todas las escenas que apuntan a él en la misma versión y si se usa el servidor arquimedes se accede siempre a la última que puede incorporar mejoras.

  • Opción de menú «Insertar» en el gestor de escenas

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

    Para agregar o insertar escenas en la página web, hay que utilizar la opción del menú Insertar.

    Agregar e insertar escenas
    Agregar e insertar escenas

    Se pueden agregar o insertar escenas nuevas de Descartes, de Descartes5, un Discurso o un Ítem, también se pueden agregar e insertar escenas del sistema, es decir, escenas que han sido previamente guardadas en un archivo. Y finalmente se pueden agregar o insertar escenas que previamente han sido copiadas al portapapeles (ver en la opción Editar: copiar y pegar escenas ).

    • Agregar pone la nueva escena después de todas las que hay en la página.
    • Insertar pone la escena antes de la que esté seleccionada.

    Para seleccionar una escena hay que hacer clic sobre el botón negro marcado con una S que aparece a la derecha de cada escena.

    Para insertar escenas en el modo de Mostrar HTML hay que colocar el cursor en el punto del código html donde se quiere hacer la inserción. Al hacer esto, se activarán también las opciones de Insertar párrafo e Insertar párrafo con escena en el menú Insertar.

    • Insertar escena sirve para insertar una escena dentro de en un párrafo o tabla ya existente. Si se escoge esta opción, el cursor tendrá que colocarse dentro del párrafo (o la tabla) en el cual se pretende insertar, o sea en algún sitio entre <p> y </p> (o en algún elemento de la tabla).
    • Insertar párrafo con escena insertará en el lugar donde está el cursor una nueva escena dentro de un nuevo párrafo con alineación centrada; por tanto, conviene colocar el cursor en el texto del código html pero fuera de un párrafo (entre un </p> y el siguiente <p>).

    Las escenas nuevas aparecen en forma gráfica como escenas vacías con red cartesiana, y son totalmente operativas. Por tanto pueden editarse como de costumbre, dando un doble clic o un clic derecho con el cursor colocado sobre la escena para abrir la ventana de edición o de configuración. Otra forma de abrir la ventana del editor de configuración es darle una clic al botón «E» que aparece en la pantalla en el lado superior derecho.

    • Insertar párrafo sirve para insertar un nuevo párrafo en el sitio donde se ubica el cursor. Esta operación simplemente agrega el código html de apertura y cierre de un párrafo (<p> y </p>), y se podría incluso hacer manualmente.

  • Opción de menú «Editar» en el gestor de escenas

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

    Esta opción permite realizar todo lo necesario para llevar a buen término la edición tanto del código html como de las escenas.

    Al abrir una página con varias escenas, si la opción Html está en ocultar, aparecerán una tras de otra –por ejemplo, en la figura siguiente podemos observar dos escenas– y si está activa la opción Html las observaremos con bloques de código.

    Página con dos escenas
    Página con dos escenas

    Las escenas que aparecen son editables, es decir, haciendo un doble clic sobre alguna de ellas se abre el editor de configuración de la escena, o bien pulsando el botón config ya sea sobre la escena (si tal botón aparece en ella) o sobre la ventana exterior (que aparece tras un clic derecho sobre cualquier sitio de la escena). Los cambios que se hagan a la configuración y que se hayan aplicado, pasarán a formar parte de la página y por tanto se guardarán cuando ésta se guarde en el disco. Además, si durante la edición se cambia el tamaño de una escena, la página se refresca automáticamente y la escena aparece con su nuevo tamaño.

    El resto del código html puede editarse manualmente en formato de texto. Por tanto, es posible escribir todo el contenido de la página que se está creando, incluso el texto, dentro del Gestor. Sin embargo, para hacer mejoras de estilo del texto, es recomendable usar cualquier editor de html.

    Cuando se crea una página nueva (Archivo->Nuevo) aparece una escena básica, embebida en la estructura elemental de una página web, con los códigos de apertura, a modo de paréntesis de apertura (etiquetas), <html>, <head> y <body>, y sus respectivos cierres en orden inverso: </body>, </head> y</html>. También aparece el título de la página (<title>TITULO</title>) y un solo párrafo vacío alineado a la izquierda (<p> y </p>).

    Archivo nuevo
    Archivo nuevo

    Sin necesidad de profundizar en el lenguaje html puede observarse que los códigos que utiliza este lenguaje son de texto (caracteres legibles), que las secciones que lo forman están etiquetadas y que éstas, tienen la forma <nombre> y </nombre>. No es necesario usar esto para trabajar con Descartes, sin embargo, puede ayudar a comprender lo que ocurre en algunas ocasiones.

    En esta opción de menú encontramos las posibilidades reflejadas a continuación:

    Opción "Editar"
    Opción «Editar»
    • Cortar, copiar y pegar escenas.  A la derecha de cada escena se encuentra un botón negro con una S, y al pulsarlo quedará seleccionada la escena y se dibujará a su alrededor un marco rojo. En el menú Editar se activarán las siguientes opciones:
      • Cortar escena, para eliminar una escena, pero guardándola en el portapapeles para poderla pegar en otro sitio (se denomina portapapeles a una zona de memoria donde se guarda la información que se corta o se copia, se guarda la escena).
      • Copiar escena, para guardar un duplicado de la escena seleccionada en el portapapeles.
      • Pegar escena, para insertar en el lugar donde esté el cursor la escena que haya en el portapapeles, que será la última cortada o copiada.
      • Eliminar escena, para borrar la escena seleccionada de la página.

    Esas mismas operaciones pueden realizarse con las combinaciones de teclas acostumbradas: Ctrl-X para cortarla, Ctrl-C para copiarla, Crtl-V para pegarla y Supr (o Del) para suprimirla. Y como ya se ha indicado, la escena más recientemente copiada o cortada permanece en el portapapeles y se puede insertar en la página mediante las opciones de Insertar escena e Insertar párrafo con escena del menú Editar y eligiendo la sub-opción del portapapeles.

    Sin embargo, para cortar, copiar, pegar o eliminar un trozo del código html, se trabaja directamente sobre el texto usando las combinaciones de teclas Ctrl-X, Ctrl-C, Crtl-V y Supr (o Del); no es posible hacerlo usando el menú.

    •  Deshacer y rehacer.
      • Si se pulsa la opción de deshacer en el menú Editar, se anulará el último cambio que se efectuó en la página. Se puede deshacer repetidamente hasta llegar a la situación inicial cuando se abrió o creó la página.
      • Si se pulsa rehacer, se revoca el último deshacer (o sea, vuelve a efectuar la acción deshecha). También se puede rehacer repetidamente hasta llegar a la última versión de la página, es decir la que se estaba mostrando cuando se comenzó a pulsar deshacer.
Página anterior Página siguiente