Si has utilizado eXe Learning, seguro que has probado las diferentes opciones del menú “Estilos”. Estas opciones nos permiten variar el aspecto visual de los contenidos que estamos creando pero, si queremos darle un toque más personal, puede que estos estilos predefinidos no se ajusten del todo a la idea que llevamos. A continuación, veremos cómo modificar algunas de las propiedades de un estilo ya definido, como por ejemplo, el color del texto o del fondo de las páginas.
Al diseñar un estilo se pretende definir por completo la apariencia de los contenidos: la tipografía empleada para los títulos o para los demás textos, los colores, el tamaño, el espaciado entre elementos de la página, las imágenes de fondo, etc. A su vez, se consigue separar la estructura del documento de la presentación del mismo. De este modo, cuando estemos creando los materiales no tendremos que preocuparnos de modificar las características visuales de cada párrafo que escribamos.
Si has utilitzat eXe Learning, segur que has provat les diferents opcions del menú “Estils“. Aquestes opcions ens permeten variar l’aspecte visual dels continguts que crearem però, si volem donar-li un toc més personal, pot ser que aquests estils predefinits no s’ajusten del tot a la idea que portem. A continuació, veurem com modificar algunes de les propietats d’un estil ja definit, com per exemple, el color del text o del fons de les pàgines.
En dissenyar un estil es pretén definir per complet l’aparença dels continguts: la tipografia emprada per als títols o per als altres textos, els colors, la grandària, l’espaiat entre elements de la pàgina, les imatges de fons, etc. Al seu torn, s’aconsegueix separar l’estructura del document de la presentació. D’aquesta manera, quan estiguem creant els materials no haurem de preocupar-nos de modificar les característiques visuals de cada paràgraf que escriguem.
Los estilos de eXe vienen definidos por una serie de imágenes y ficheros con extensión CSS (hojas de estilo). CSS es el lenguaje que se utiliza para definir las propiedades de un documento HTML estructurado.
La idea que debemos extraer es que, si queremos modificar una característica global para todas las páginas de contenidos, simplemente debemos hacer los cambios en el fichero de estilo correspondiente. Imaginad que tenemos un documento con 50 páginas, cada una con sus iDevices correspondientes y queremos modificar el color del texto. Sin hojas de estilo, tendríamos que ir seleccionando página por página todos los textos y aplicar el cambio de color deseado. Con el uso de CSS sólo tenemos que modificar una línea de código en un único fichero.
El problema principal es que la creación de hojas de estilo no es una tarea fácil y que los atributos soportados por un navegador pueden no funcionar en otro. Sin embargo, en ocasiones simplemente queremos modificar el color de fondo o del texto o añadir alguna imagen, lo cual puede realizarse de un modo relativamente sencillo, sobre todo si partimos de estilos ya definidos, como es el caso que nos ocupa.
Antes de comenzar, debemos tener claro el proceso de generación de contenidos con eXe Learning:
- Nosotros nos encargamos de añadir contenidos.
- Estructuramos los contenidos, con ayuda de eXe, en títulos, iDevices, etc.
- Al generar los materiales, se aplican las características del estilo seleccionado en función de la estructuración de contenidos realizada.
[kml_flashembed movie="http://w3.ua.es/ite/blogTIC/videos/eXe/exe_css.swf" width="700" height="525" wmode="transparent" /]
Puesto que el estilo se aplica en función de la estructura del documento, deberíamos conocer la estructura básica de un documento HTML.
El HTML es un lenguaje de etiquetas utilizado para la creación de páginas web. Dichas etiquetas aparecen encerradas entre los símbolos menor y mayor ‘<‘ ‘>‘, y por lo general, existen etiquetas de apertura y de cierre. Por ejemplo, la primera etiqueta del documento sería <html> y su etiqueta de cierre correspondiente </html>. Todo lo comprendido entre ambas etiquetas forma parte de la estructura de la página. Una página web puede dividirse en 2 partes principales: la cabecera <head> que contiene metadatos y otros elementos que no se muestran directamente al usuario, y el cuerpo <body> que engloba todo el contenido de la página mostrado en el navegador. A su vez, dentro de la etiqueta <body> podemos encontrar diferentes tipos de elementos utilizados para dar estructura al contenido (títulos, párrafos, listas…). Algunas de las etiquetas más comunes son:
- <h1> hasta <h6>: indica que el texto es un encabezado. Dependiendo del número tendrán mayor o menor importancia (mayor o menor tamaño).
- <p>: indica el comienzo de un párrafo.
- <div>: contenedor que permite agrupar varios elementos a los que, posteriormente, aplicaremos un estilo común.
- <a>: para definir hipervínculos o enlaces web.
En la imagen podemos ver un código HTML simplificado, junto con el resultado mostrado por el navegador. Las marcas en rojo se han añadido para aclarar el ejemplo (no forman parte del contenido mostrado).
Observad que dentro de la etiqueta div aparece la propiedad id. Esta propiedad nos va a servir para identificar los diferentes contenedores (div) o fragmentos del documento, que puedan aparecen en la página. Así, según el ejemplo, si especificamos que el bloque denominado “contenido” muestre el texto en color azul, los dos párrafos que están dentro de este bloque se mostrarán con el texto en el color indicado. Por supuesto, también sería posible mostrar todos los párrafos en color azul, sin necesidad de utilizar las etiquetas div.
Cuando generamos un material HTML con eXe Learning, el propio programa se encarga de poner etiquetas a cada sección del documento. En las hojas de estilo CSS se hace referencia a cada una de esas etiquetas para aplicar propiedades comunes.
Llegados a este punto, lo mejor es que modifiquemos un estilo nosotros mismos y comprobemos las variaciones en el documento final. Para comenzar con algo sencillo, vamos a cambiar el color de fondo y del texto de nuestros materiales.
- Paso 1: localizar el directorio de instalación de eXe Learning y en su interior, la carpeta en la que se encuentran los estilos disponibles. Por defecto la ruta es
C:\Archivos de programa\exe\style - Paso 2: duplicar y renombrar la carpeta de uno de los estilos, por ejemplo “default“. Debemos tener en cuenta que, el nuevo estilo aparecerá en el menú de eXe cuando reiniciemos la aplicación. Es decir, tenemos que cerrar eXe y abrirlo de nuevo, para que en el menú “Estilos” aparezca el nombre del nuevo estilo.
- Paso 3: ordenar los ficheros por tipo, para localizar fácilmente las hojas de estilo.
En este punto, tendremos localizados los ficheros “content.css” y “nav.css” propios del estilo que hemos elegido. Existe otro fichero CSS denominado “base.css” que es común a todos los estilos y por tanto, cualquier modificación que realicemos de ese fichero se aplicará a todos los estilos existentes. El archivo “base.css” se encuentra dentro de la carpeta “style”.
Vamos a abrir “content.css” con WORDPAD (si tenéis alguna otra aplicación que permita la edición de HTML podéis utilizarla).
En la siguiente imagen podemos ver una parte del archivo css. Las “etiquetas” o nombres que describe cada bloque de contenidos se ha marcado en rojo. A continuación, entre llaves aparece el listado de propiedades (subrayadas en azul) utilizado para ese bloque de contenido junto con el valor asignado. El formato es: propiedad : valor ;
 |
body: son las propiedades generales que se aplicarán a todas las hojas.
a: propiedades para los enlaces. (a:hover, define las propiedades del enlace cuando es seleccionado)
nodeTitle y nodeDecoration: definen las propiedades del título de cada hoja.
|
Las propiedades que permiten cambiar el color del texto y del fondo son “color” y “background“, respectivamente. Si nos fijamos en el valor asignado a una de estas propiedades, veremos que consta de 6 números precedidos por una almohadilla ‘#‘. ¿Qué significan esos números? Son números en notación hexadecimal (pueden tomar valores comprendidos del 0 al 9 y de la A a la F). Cada color se puede generar a partir de combinaciones de los 3 colores primarios rojo, verde y azul (RGB) con valores comprendidos entre 0 y 255. El valor mínimo corresponde a la ausencia de ese color, mientras que el valor 255 es el color con la máxima intensidad. En web, como hemos visto, se suele utilizar notación hexadecimal: si agrupamos los 6 números de dos en dos, el primer par se correspondería con el color rojo, el siguiente con el verde y el último con el azul. En este caso los valores de cada par estarían comprendidos entre 00 y FF. Por ejemplo, para representar el color rojo puro, la notación sería #FF0000; para el verde #00FF00; para el blanco #FFFFFF.
Pero no os preocupéis, no tenemos que aprender a convertir formatos numéricos. En la web hay un sin fin de páginas que nos facilitarán el trabajo. Por ejemplo, http://html-color-codes.info/codigos-de-colores-hexadecimales/ . Aquí podéis encontrar una pequeña aplicación que os permitirá obtener el código hexadecimal del color que seleccionéis previamente. También funciona a la inversa: si introducís un código en hexadecimal os muestra el color correspondiente.
Pues bien, para cambiar el color de fondo del material, debemos modificar la propiedad “background” dentro de la sección “body”. A su vez, para cambiar el color del texto, debemos modificar la propiedad “color” también dentro de la sección “body” ya que queremos que estos cambios afecten al texto del cuerpo del documento. Para cambiar el color del texto de un enlace, debemos modificar la propiedad “color” dentro de la sección “a”, que es la que corresponde a las propiedades de los enlaces.
Por ejemplo, realiza los siguientes cambios:
- en el cuerpo:
background: #B9DCFA color:#000000 - en los enlaces: color:#D824D8
Guarda los cambios y genera el material en formato HTML para comprobar que se han aplicado las modificaciones del estilo al mismo. No olvides seleccionar el estilo que estás modificando (“Default2” en el ejemplo).
De un modo similar, podremos modificar diferentes características para diferentes secciones del documento, hasta que consigamos un estilo totalmente personalizado. Os dejamos una serie de enlaces para aprender más sobre HTML y CSS, aunque en la web podréis encontrar muchos más. Ánimo!
Enlaces:
Manuales básicos de HTML y CSS
Els estils d’eXe estan definits per una sèrie d’imatges i fitxers amb extensió CSS (fulls d’estil). CSS és el llenguatge que s’utilitza per a definir les propietats d’un document HTML estructurat.
La idea que hem d’extraure és que, si volem modificar una característica global per a totes les pàgines de continguts, simplement hem de fer els canvis en el fitxer d’estil corresponent. Imagineu que tenim un document amb 50 pàgines, cadascuna amb les seues iDevices corresponents i volem modificar el color del text. Sense fulls d’estil, hauríem d’anar seleccionant pàgina per pàgina tots els textos i aplicar el canvi de color desitjat. Amb l’ús de CSS només hem de modificar una línia de codi en un únic fitxer.
El problema principal és que la creació de fulls d’estil no és una tasca fàcil i que els atributs suportats per un navegador poden no funcionar en un altre. No obstant això, en ocasions simplement volem modificar el color de fons o del text o afegir alguna imatge, la qual cosa pot realitzar-se d’una manera relativament senzilla, sobretot si partim d’estils ja definits, com és el cas que ens ocupa.
Abans de començar, hem de tenir clar el procés de generació de continguts amb eXe Learning:
- Nosaltres ens encarreguem d’afegir continguts.
- Estructurem els continguts, amb ajuda d’eXe, en títols, iDevices, etc.
- En generar els materials, s’apliquen les característiques de l’estil seleccionat en funció de l’estructuració de continguts realitzada.
[kml_flashembed movie="http://w3.ua.es/ite/blogTIC/videos/eXe/exe_css.swf" width="700" height="525" wmode="transparent" /]
Atés que l’estil s’aplica en funció de l’estructura del document, hauríem de conèixer l’estructura bàsica d’un document HTML.
L’HTML és un llenguatge d’etiquetes utilitzat per a la creació de pàgines web. Aquestes etiquetes apareixen tancades entre els símbols menor i major ‘<‘ ‘>‘, i en general, existeixen etiquetes d’obertura i de tancament. Per exemple, la primera etiqueta del document seria <html> i la seua etiqueta de tancament corresponent </html>. Tot el comprès entre ambdues etiquetes forma part de l’estructura de la pàgina. Una pàgina web pot dividir-se en 2 parts principals: la capçalera <head> que conté metadades i altres elements que no es mostren directament a l’usuari, i el cos <body> que engloba tot el contingut de la pàgina mostrat en el navegador. Al seu torn, dins de l’etiqueta <body> podem trobar diferents tipus d’elements utilitzats per a donar estructura al contingut (títols, paràgrafs, llestes…). Algunes de les etiquetes més comunes són:
- <h1> fins a <h6>: indica que el text és un encapçalat. Depenent del nombre tindran major o menor importància (major o menor grandària).
- <p>: indica el començament d’un paràgraf.
- <div>: contenidor que permet agrupar diversos elements als quals, posteriorment, aplicarem un estil comú.
- <a>: per a definir hipervincles o enllaces web.
En la imatge podem veure un codi HTML simplificat, juntament amb el resultat mostrat pel navegador. Les marques en roig s’han afegit per a aclarir l’exemple (no formen part del contingut mostrat).
Observeu que dins de l’etiqueta div apareix la propietat id. Aquesta propietat ens va a servir per a identificar els diferents contenidors (div) o fragments del document, que puguen apareixen en la pàgina. Així, segons l’exemple, si especifiquem que el bloc denominat “contingut” mostre el text en color blau, els dos paràgrafs que estan dins d’aquest bloc es mostraran amb el text en el color indicat. Per descomptat, també seria possible mostrar tots els paràgrafs en color blau, sense necessitat d’utilitzar les etiquetes div.
Quan generem un material HTML amb eXe Learning, el propi programari s’encarrega de posar etiquetes a cada secció del document. En els fulls d’estil CSS es fa referència a cadascuna d’aqueixes etiquetes per a aplicar propietats comunes.
Arribats a aquest punt, el millor és que modifiquem un estil nosaltres mateixos i comprovem les variacions en el document final. Per a començar amb alguna cosa senzilla, canviarem el color de fons i del text dels nostres materials.
- Pas 1: localitzar el directori d’instal·lació d’eXe Learning i en el seu interior, la carpeta en la qual es troben els estils disponibles. Per defecte la ruta és
C:\Archivos de programa\exe\style - Pas 2: duplicar i reanomenar la carpeta d’un dels estils, per exemple “default“. Hem de tenir en compte que, el nou estil apareixerà en el menú d’eXe quan reiniciem l’aplicació. És a dir, hem de tancar eXe i obrir-ho de nou, perquè en el menú “Estils” aparega el nom del nou estil.
- Pas 3: ordenar els fitxers per tipus, per a localitzar fàcilment els fulls d’estil.
[kml_flashembed movie="http://w3.ua.es/ite/blogTIC/videos/eXe/exe_css.swf" width="700" height="525" wmode="transparent" /]
En aquest punt, tindrem localitzats els fitxers “content.css” i “nav.css” propis de l’estil que hem triat. Existeix un altre fitxer CSS denominat “base.css” que és comú a tots els estils i per tant, qualsevol modificació que realitzem d’aqueix fitxer s’aplicarà a tots els estils existents. L’arxiu “base.css” es troba dins de la carpeta “style“.
Obrirem “content.css” amb WORDPAD (si teniu alguna altra aplicació que permeta l’edició d’HTML podeu utilitzar-la).
En la següent imatge podem veure una part de l’arxiu css. Les “etiquetes” o noms que descriu cada bloc de continguts s’ha marcat en roig. A continuació, entre claus apareix el llistat de propietats (subratllades en blava) utilitzat per a aqueix bloc de contingut juntament amb el valor assignat. El format és: propietat : valor ;
|
body: són les propietats generals que s’aplicaran a tots els fulls.
a: propietats per als enllaços. (a:hover, defineix las propietats de l’enllaç quan és seleccionat)
nodeTitle y nodeDecoration: defineix les propietats del títol de cada full.
|
Les propietats que permeten canviar el color del text i del fons són “color” i “background“, respectivament. Si ens fixem en el valor assignat a una d’aquestes propietats, veurem que consta de 6 nombres precedits per un coixinet ‘#’. Què signifiquen aquests nombres? Són nombres en notació hexadecimal (poden prendre valors compresos del 0 al 9 i de la A a la F). Cada color es pot generar a partir de combinacions dels 3 colors primaris roig, verd i blau (RGB) amb valors compresos entre 0 i 255. El valor mínim correspon a l’absència d’aqueix color, mentre que el valor 255 és el color amb la màxima intensitat. En web, com hem vist, se sol utilitzar notació hexadecimal: si agrupem els 6 nombres de dos en dos, el primer parell es correspondria amb el color roig, el següent amb el verd i l’últim amb el blau. En aquest cas els valors de cada parell estarien compresos entre 00 i FF. Per exemple, per a representar el color roig puro, la notació seria #FF0000; per al verd #00FF00; per al blanc #FFFFFF.
Però no us preocupeu, no hem d’aprendre a convertir formats numèrics. En la web hi ha un sense fi de pàgines que ens facilitaran el treball. Per exemple, http://html-color-codes.info/codigos-de-colores-hexadecimales/ . Ací podeu trobar una petita aplicació que us permetrà obtenir el codi hexadecimal del color que seleccioneu prèviament. També funciona al revés: si introduïu un codi en hexadecimal us mostra el color corresponent.
Bé, per a canviar el color de fons del material, hem de modificar la propietat “background” dins de la secció “body“. Al seu torn, per a canviar el color del text, hem de modificar la propietat “color” també dins de la secció “body” ja que volem que aquests canvis afecten al text del cos del document. Per a canviar el color del text d’un enllaç, hem de modificar la propietat “color” dins de la secció “a“, que és la que correspon a les propietats dels enllaços.
Per exemple, realitza els següents canvis:
- en el cos:
background: #B9DCFA color:#000000 - en los enllaços: color:#D824D8
Guarda els canvis i genera el material en format HTML per a comprovar que s’han aplicat les modificacions de l’estil. No oblides seleccionar l’estil que estàs modificant (“Default2” en l’exemple).
D’una manera similar, podrem modificar diferents característiques per a diferents seccions del document, fins que aconseguim un estil totalment personalitzat. Us deixem una sèrie d’enllaços per a aprendre més sobre HTML i CSS, encara que en la web podreu trobar molts més. Ànim!
5 replies on “Modificando un estilo de eXe Learning”
Hola, sólo una pregunta. ¿Me podrían decir dónde se encuentra la carpeta “styles” en el mac?
Muchas gracias por la información, me ha ayudado mucho este post.
Hola,
utiliza el “Finder” para localizar el ejecutable de eXe dentro de la carpeta “Aplicaciones”. Si en el menú de la izquierda seleccionas “Ubicaciones > Aplicaciones“, podrás encontrarlo fácilmente.
Ver imagen
Sobre el archivo de eXe, haz clic con el botón derecho del ratón para que aparezca el menú contextual y escoge la opción “Mostrar contenido del paquete“.
Ver imagen
Se abrirá una ventana en la que se mostrarán todas las carpetas de instalación de eXe, incluida la carpeta “style“.
Ver imagen
Como no soy usuaria de Mac, no sé si hay un modo más sencillo de hacerlo…
Espero que te sirva!
Hola buenas a todos.
Primeo dejenme felicitarlos por este excelente tutorial, ahora mi curiosidad es la siguiente si yo quisiera colocar el menu que me genera el EXE de forma horizontal como lo podria colocar o exactamente en que archivo, porq ya e probado en el base.css, nav.css y content.css y por ningun lado encuentro como modificar esa propiedad, estaria muy agradecido con su respuesta.
Hola, ya hace más de un año que me comentaste si había alguna forma de colocar el menú que genera Exelearning en horizontal modificando el CSS.
Seguramente ya lo hayas resuelto, pero quería comentar que hoy he encontrado una línea de desarrollo de la aplicación que incorpora estilos con el menú en horizontal, además de solucionar varios bugs.
La web es http://exelearning.net
Me parece genial que se haya continuado con el proyecto!
Muchísimas gracias por este tutorial tan bien explicado y tan detallado. Para los que usamos eXe es una delicia que nos presentes algo “delicado” de forma clara y amena.
Enhorabuena por este trabajo.