{"id":843,"date":"2010-10-04T13:18:33","date_gmt":"2010-10-04T11:18:33","guid":{"rendered":"https:\/\/blogs.ua.es\/observatoriotic\/?p=843"},"modified":"2011-07-20T23:37:33","modified_gmt":"2011-07-20T21:37:33","slug":"modificando-un-estilo-de-exe-learning","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/observatoriotic\/2010\/10\/04\/modificando-un-estilo-de-exe-learning\/","title":{"rendered":"Modificando un estilo de eXe Learning"},"content":{"rendered":"

Si has utilizado eXe Learning, seguro que has probado las diferentes opciones del men\u00fa “Estilos”<\/strong>. Estas opciones nos permiten variar el aspecto visual de los contenidos que estamos creando pero, si queremos darle un toque m\u00e1s personal, puede que estos estilos predefinidos no se ajusten del todo a la idea que llevamos. A continuaci\u00f3n, veremos c\u00f3mo modificar algunas de las propiedades de un estilo ya definido<\/strong>, como por ejemplo, el color del texto o del fondo de las p\u00e1ginas.<\/p>\n

\"Men\u00fa<\/a><\/p>\n

Al dise\u00f1ar un estilo se pretende\u00a0 definir por completo la apariencia de los contenidos: la tipograf\u00eda empleada para los t\u00edtulos o para los dem\u00e1s textos, los colores, el tama\u00f1o, el espaciado entre elementos de la p\u00e1gina, las im\u00e1genes de fondo, etc. A su vez, se consigue separar la estructura del documento de la presentaci\u00f3n del mismo<\/strong>. De este modo, cuando estemos creando los materiales no tendremos que preocuparnos de modificar las caracter\u00edsticas visuales de cada p\u00e1rrafo que escribamos.<\/p>\n

\n

Si has utilitzat eXe Learning, segur que has provat les diferents opcions del men\u00fa “Estils<\/strong>“. Aquestes opcions ens permeten variar l’aspecte visual dels continguts que crearem per\u00f2, si volem donar-li un toc m\u00e9s personal, pot ser que aquests estils predefinits no s’ajusten del tot a la idea que portem. A continuaci\u00f3, 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\u00e0gines.<\/p>\n

En dissenyar un estil es pret\u00e9n definir per complet l’aparen\u00e7a dels continguts: la tipografia emprada per als t\u00edtols o per als altres textos, els colors, la grand\u00e0ria, l’espaiat entre elements de la p\u00e0gina, les imatges de fons, etc. Al seu torn, s’aconsegueix separar l’estructura del document de la presentaci\u00f3<\/strong>. D’aquesta manera, quan estiguem creant els materials no haurem de preocupar-nos de modificar les caracter\u00edstiques visuals de cada par\u00e0graf que escriguem.<\/p>\n

<\/p>\n

<\/a><\/p>\n

cas val<\/a> foro<\/a><\/strong><\/p>\n

Los estilos de eXe vienen definidos por una serie de im\u00e1genes y ficheros con extensi\u00f3n CSS<\/strong> (hojas de estilo). CSS es el lenguaje que se utiliza para definir las propiedades de un documento HTML estructurado.<\/p>\n

\"Archivos<\/a><\/p>\n

La idea que debemos extraer es que, si queremos modificar una caracter\u00edstica global para todas las p\u00e1ginas\u00a0 de contenidos, simplemente debemos hacer los cambios en el fichero de estilo correspondiente. Imaginad que tenemos un documento con 50 p\u00e1ginas, cada una con sus iDevices correspondientes y queremos modificar el color del texto. Sin hojas de estilo, tendr\u00edamos que ir seleccionando p\u00e1gina por p\u00e1gina todos los textos y aplicar el cambio de color deseado. Con el uso de CSS s\u00f3lo tenemos que modificar una l\u00ednea de c\u00f3digo en un \u00fanico fichero.<\/p>\n

El problema principal es que la creaci\u00f3n de hojas de estilo no es una tarea f\u00e1cil 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\u00f1adir 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.<\/p>\n

Antes de comenzar, debemos tener claro el proceso de generaci\u00f3n de contenidos con eXe Learning:<\/p>\n

    \n
  1. Nosotros nos encargamos de a\u00f1adir contenidos.<\/li>\n
  2. Estructuramos los contenidos, con ayuda de eXe, en t\u00edtulos, iDevices, etc.<\/li>\n
  3. Al generar los materiales, se aplican las caracter\u00edsticas del estilo seleccionado en funci\u00f3n de la estructuraci\u00f3n de contenidos realizada.<\/li>\n<\/ol>\n

    [kml_flashembed movie=\"http:\/\/w3.ua.es\/ite\/blogTIC\/videos\/eXe\/exe_css.swf\" width=\"700\" height=\"525\" wmode=\"transparent\" \/]<\/code><\/p>\n

    Puesto que el estilo se aplica en funci\u00f3n de la estructura del documento, deber\u00edamos conocer la estructura b\u00e1sica de un documento HTML<\/a>.<\/p>\n

    El HTML es un lenguaje de etiquetas utilizado para la creaci\u00f3n de p\u00e1ginas web. Dichas etiquetas aparecen encerradas entre los s\u00edmbolos menor y mayor<\/strong> ‘<<\/strong>‘ ‘><\/strong>‘, y por lo general, existen etiquetas de apertura y de cierre. Por ejemplo, la primera etiqueta del documento ser\u00eda <html><\/strong> y su etiqueta de cierre correspondiente <\/html><\/strong>. Todo lo comprendido entre ambas etiquetas forma parte de la estructura de la p\u00e1gina. Una p\u00e1gina web puede dividirse en 2 partes principales: la cabecera <head><\/strong> que contiene metadatos y otros elementos que no se muestran directamente al usuario, y el cuerpo <body><\/strong> que engloba todo el contenido de la p\u00e1gina mostrado en el navegador. A su vez, dentro de la etiqueta <body><\/strong> podemos encontrar diferentes tipos de elementos utilizados para dar\u00a0 estructura al contenido (t\u00edtulos, p\u00e1rrafos, listas…).\u00a0 Algunas de las etiquetas m\u00e1s comunes son:<\/p>\n