Crear un propio idevice… con html

This topic contains 15 respuestas, has 3 voices, and was last updated by Angel Quesada Hace 8 años, 3 meses.

Author

Entradas
11 julio, 2016 at 12:48 #25709

Angel Quesada
Member

Hola! Estoy empezando a utilizar esta herramienta para utilizarla en la empresa para la que trabajo. Por ahora todo va genial pero tengo un inconveniente que, si no soluciono, no podremos utilizarla.
Resulta que nosotros tenemos unos elementos como vosotros llamáis a los idevices con nuestros propios efectos y tal, pero claro, tenían su propio código html y sus propias clases con lo cual podíamos jugar con los efectos y las animaciones.
La cosa es que con exelearning sólo puedo crear idevices prefijados y, como mucho, puedo cambiar la imágen, el título y los colores en el css.
¿Hay alguna manera de crear un idevice desde 0 con html?

Gracias adelantadas.
13 julio, 2016 at 9:39 #25715

Ignacio Gros
Keymaster

Tal y como está ahora tendrías que hacer uso del Editor de iDevices, cuyas posibilidades, como dices, no te permiten hacer cualquier cosa.

Sin embargo, estamos trabajando en ello. Mirad esta petición en GitHub: https://github.com/exelearning/iteexe/issues/59

De momento se me ocurre que podríais hacer uso de la etiqueta edition-extra-head en el archivo config.xml del Estilo que estéis usando (supongo que si tenéis bloques o “iDevices” propios tendréis un Estilo propio y conocimientos de programación). Esa etiqueta te permite incluir código HTML (una etiqueta SCRIPT, por ejemplo) justo antes del cierre de la etiqueta HEAD en la página de edición de eXe. Mediante código JavaScript podrías crear una interfaz para guardar los datos en un TEXTAREA. Es lo que se pretende hacer, de una manera más sencilla, con esa petición en GitHub.

Ojalá podáis seguir usando eXe. Si hacéis pruebas con ese sistema, tal vez podáis compartir los resultados.

Gracias, Ángel.

Saludos.
13 julio, 2016 at 22:06 #25717

Anónimo

Hola Ángel: Otra posibilidad que se me ocurre es utilizar plantillas de código HTML. El editor tiene un botón que te permite elegir entre una serie de plantillas HTML (trozos de código) para pegar. Viene con unas plantillas predefinidas, pero podéis incorporar vuestras propias plantillas.

Sin saber exáctamente cómo son vuestros elementos es difícil dar un consejo. Si nos pasa un ejemplo, podríamos proponer algo más concreto.
26 julio, 2016 at 10:28 #25750

Angel Quesada
Member

Hola de nuevo!
Disculpad que haya demorado tanto en contestar. Mi intención por ejemplo es conseguir algo como lo de la imagen que he adjuntado. Es un tocho medianamente grande de código javascript, html y css todo junto. En el caso de no poder hacer un idevice de él, ¿Hay algún otro modo de pegarlo, por ejemplo, dentro de texto libre sin tener que ir a otro programa o pestaña a copiar el código?

Un saludo.

Archivos adjuntos:
You must be logged in to view attached files.
26 julio, 2016 at 23:09 #25752
Anónimo
Hola Ángel:

Creo que se pueden hacer muchas cosas desde la configuración de los estilos sin necesidad de programar idevices propios en Python. En el vídeo adjunto te muestro como se usa el botón plantilla para incluir trozos de html. eXeLearning trae unas pocas plantillas (las necesarias para poder trabajar en varias columnas) pero tu puede incluir en tu estilo la plantillas que necesites para que el editor las pegue en el punto que decida el usuario.

Yo haría lo siguiente:
1. Preparar un archivo .js con las funciones que necesitas. Este archivo lo puedes incluir en la carpeta de tu estilo.
2. Preparar una serie de archivos .html a modo de plantilla con los trozos de html que quieras.
3. En el archivo config.xml de tu estilo puedes utilizar los campos extra-head y edition-extra-head para poder utilizar esos archivos en el material exportado y en tiempo de edición. Adjunto el archivo config.xml de uno de los estilos de exe a modo de ejemplo.
La explicación que te he dado es un poco escueta. Si me pasas un ejemplo de html/js, te preparo un estilo que lo incorpore, ya que un ejemplo es más ilustrativo que una explicación.
26 julio, 2016 at 23:11 #25754
Anónimo
Hola Ángel: Creo que se pueden hacer muchas cosas desde la configuración de los estilos sin necesidad de programar idevices propios en Python. En el vídeo adjunto te muestro como se usa el botón plantilla para incluir trozos de html. eXeLearning trae unas pocas plantillas (las necesarias para poder trabajar en varias columnas) pero tu puede incluir en tu estilo la plantillas que necesites para que el editor las pegue en el punto que decida el usuario. Yo haría lo siguiente:
1. Preparar un archivo .js con las funciones que necesitas. Este archivo lo puedes incluir en la carpeta de tu estilo.
2. Preparar una serie de archivos .html a modo de plantilla con los trozos de html que quieras.
3. En el archivo config.xml de tu estilo puedes utilizar los campos extra-head y edition-extra-head para poder utilizar esos archivos en el material exportado y en tiempo de edición. Puedes echar un vistazo a los archivos config.xml de los estilos de exe para ver ejemplos.
La explicación que te he dado es un poco escueta. Si me pasas un ejemplo de html/js, te preparo un estilo que lo incorpore, ya que un ejemplo es más ilustrativo que una explicación.
28 julio, 2016 at 7:24 #25768

Angel Quesada
Member

Hola José Miguel, antes de nada gracias por contestarme.
Creo que más o menos capto por donde va tu idea pero la cosa es que ese elemento es uno de tantos. Es decir, aparte de ese hay como 5 más y cada uno de ellos tiene un montón de modelos distintos (cada uno sería un html)
Aún no entiendo muy bien como funciona exelearning así que a lo mejor peco un poco de ignorante, pero ahí va:
Si yo ahora meto esos 30 html e importo todos y cada uno como se hace con los css y js (Se supone que en el campo extra head ponemos las importaciones o lo que queramos que vaya en la cabecera de nuestros html) ¿No sobrecargaría un poco la página?

De todos modos te voy a dejar con lo necesario para que funcione el elemento que quiero en un rar y tal vez con eso pueda entenderte algo mejor.

Muchísimas gracias adelantadas!

Archivos adjuntos:
You must be logged in to view attached files.
28 julio, 2016 at 8:10 #25771

Angel Quesada
Member

Hola de nuevo!
He estado mirando esto del edition-extra-head
¿Estoy suponiendo bien si digo que sirve para añadir codigo a la cabecera pero del EDITOR y no de las pages cuando las exportas?
Un saludo!
29 julio, 2016 at 13:21 #25781
Anónimo
Hola Ángel:

Respondiendo a tu pregunta, efectivamente, el campo edition-extra-head te permite incorporar código a la edición, de modo que, por ejemplo, puedes configurar el editor a tu gusto (poner/quitar botones, modificar plantillas, …).

Veo que el tema es más complejo de lo que pensaba, porque los textos están en variables JavaScript, y eso no es compatible con poner un texto editable por el usuario.

Lo que yo te comentaba es preparar trozos de html que sirvan de plantilla para que posteriormente el usuario pueda editarlo y cambiar los textos. En este vídeo verás como al elegir el estilo “miestilo”, el botón de inserción de plantillas muestra unas plantillas diferentes. Te adjunto el estilo para que puedas ver cómo se hace. El estilo tiene los siguientes cambios:
- El campo edition-extra-head carga el archivo miestilo_editor.js
- El archivo miestilo_editor.js tiene la lista de plantillas (nombre y ubicación de los archivos html a pegar)
- Los archivos html en sí.
Espero que te sirva.
1 agosto, 2016 at 8:34 #25802
Angel Quesada
Member
Hola de nuevo Ángel y gracias por tu contestación.Los textos están en javascript pero porque lo veía una manera sencilla de hacer pruebas. No es la estructura definitiva para lo que tengo pensado.Más o menos creo que pillo el cómo quieres que funcione la historia de las plantillas pero no tengo ni idea de cómo lo haces, o cómo hace el editor para leerlas, Si pudieras enviarme un ejemplo te o agradecería. (El contenido de miestilo_editor.jsUn saludo.PD:Vale acabo de ver que ya lo adjuntaste. Lo miro y te digo que tal !
- This reply was modified Hace 8 años, 3 meses by Angel Quesada.
- This reply was modified Hace 8 años, 3 meses by Angel Quesada.
1 agosto, 2016 at 18:24 #25805

Angel Quesada
Member

Hola de nuevo!
He estado intentando lo que dices exactamente como lo tienes tú pero no hay manera. No sé si no pongo bien la ruta o alguna otra cosa pero no me lee las plantillas, cuando le doy al editor siguen apareciendo las columnas. Ahora mismo no estoy en la oficina pero mañana envío unas capturas ¿Alguna idea de por qué no funciona? ¿Dónde se ubican los archivos para el editor? Es que yo veo la misma carpeta en instalación (C:/exe) y otra en mis documentos.

Un saludo y gracias!
2 agosto, 2016 at 9:52 #25809

Angel Quesada
Member

Solucionado! Al final he tenido que tocar los archivos instalados en C:/archivosdeprograma/exe etc pero ya funciona. Muchas gracias por la ayuda!
Aunque tengo un problemilla aún con el tema de extra-body-editor…
Resulta que cuando creo un elemento que precisa de un js (Una animación, por ejemplo) el editor no es capaz de leerla, sin embargo, cuando exporto el contenido sí que aparece bien. El mismo JS que aparece en el contenido es el mismo que tengo importado en el editor. Y en la etiqueta head puedo ver que sí que lo está leyendo con el firebug.

¿Alguna idea?

Un saludo y gracias.
2 agosto, 2016 at 17:40 #25817
Anónimo
Hola Ángel:

No sé si te entiendo bien. Voy por partes:

Para instalar un estilo, lo más cómodo es hacerlo a través de Utilidades/Gestor de Estilos/Importar

Sobre el .js, me surgen dudas, por lo que si me pasas un ejemplo podremos entender mejor el caso concreto. En todo caso, te paso un pequeño listado de temas relacionados con las rutas que te puede ayudar (Ignacio: si me equivoco en algo, corrigeme):

En exe hay tres entornos diferentes:
- El material generado: lo que se crea al exportar y la visualización previa.
- Lo que vemos en aplicación mientras trabajamos.
- El editor (TinyMCE) mientras editamos.
Además, podemos introducir archivos:
- Como recursos (archivos enlazados, imágenes, …): estos archivos, en tiempo de edición van a la carpeta resources, pero al exportar van a la carpeta raíz del material exportado.
- Como parte del estilo: al exportar, también se mezclan con lo archivos de recursos en la carpeta raíz del material exportado.
Este sistema no es el ideal, pero desde las primeras versiones de eXe se planteó así y como siempre ha habido desarrollos más urgentes/importantes, se ha mantenido así hasta ahora. Lo que ocurre es que a veces no es exáctamente igual lo que vemos en edición y en el material exportado.

En todo caso, si me pasas un ejemplo concreto, le echo un vistazo y lo comentamos.
3 agosto, 2016 at 6:38 #25823

Angel Quesada
Member

De acuerdo, intentaré explicarme mejor.
Ahora mismo, por ejemplo, estoy trabajando con una librería llamada “wheelnav”. Esta librería me permite crear unas circunferencias en las cuales, cuando clicas, puedes realizar alguna función (http://wheelnavjs.softwaretailoring.net/)
Bien, para que estos círculos funcionen necesito llamar al archivo wheelnav.min.js
La cosa es que que yo en el extra-edition-body (no recuerdo cómo era exactamente la sintaxis, pero en el config.xml sí lo tengo bien escrito seguro) tengo la llamada a este archivo para que, desde el mismo editor, pueda ver el resultado. Sin embargo, lo único que obtengo es un error de javascript diciéndome que wheelnav no está definido (vamos, que algo no hago bien en la llamada). Aunque también he de decir que para que el editor lea el archivo no sé exactamente donde lo tendría que colocar…
Un saludo y gracias otra vez por la ayuda. En breves es bastante posible que tengáis a otra empresa de formación utilizando esta maravilla, ¿Mola, no?
3 agosto, 2016 at 9:05 #25824

Anónimo

Hola Ángel:

Te paso el estilo modificado para que incluya el archivo wheelnav tanto en el exportado como en edición. Para cargarlo, simplemente importalo desde el gestor de estilos y luego elige el estilo en la lista de estilos.

He probado a cargar el estilo y Firebug no me ha dado error. Lo que no he probado a utilizar el archivo.

Por cierto, un botón que te puede interesar es el de Insertar/Editar atributos. Desde ahí puedes controlar propiedades de elementos (div, p, …).

Espero poder hacer en breve un tutorial sobre esto.
4 agosto, 2016 at 10:16 #25832

Angel Quesada
Member

Hola de nuevo José!
Ya está todo solucionado, tenía un problema de concepto, te explico:
Yo pensaba que tanto que tanto editor como contenido leían siempre de la carpeta “miestilo” y no es así, el editor lee desde el .exe lo que sería /style/miestilo/archivo.js
Ahora todo va genial. Muchísimas gracias por la ayuda, de verdad, con esto ya tengo la esquinita de la pegatina para tirar fuerte de ella.
De todos modos, no sé exáctamente quien anda detrás de este proyecto pero sería muy muy interesante que el concepto de idevice fuera un elemento que cualquier persona puede crear, por ejemplo:
Soy una empresa de contenidos y tengo un elemento que se llama “Tome Nota” que suele contener un dato importante y tiene una cierta animación. Entonces con solo clicar en el idevice “tome nota” pudiera verse el resultado en el contenido como un bloque (tal y como los otros idevices).
Esto sólo es una opinión, claro está. Mientras tanto se puede tirar de las plantillas HTML.

Gracias de nuevo José por molestarte en resolverme estas dudas, de verdad.

Un abrazo.
Author

Entradas